blob: be5a06d680fa13b868e6ecc8370ee363c2341b08 [file] [log] [blame]
// Copyright 2019 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import {LitElement, html} from 'lit-element';
import deepEqual from 'deep-equal';
import {fieldTypes, EMPTY_FIELD_VALUE} from 'shared/issue-fields.js';
import {arrayDifference, equalsIgnoreCase} from 'shared/helpers.js';
import {NON_EDITING_KEY_EVENTS} from 'shared/dom-helpers.js';
import './mr-multi-checkbox.js';
import 'react/mr-react-autocomplete.tsx';
const AUTOCOMPLETE_INPUT = 'AUTOCOMPLETE_INPUT';
const CHECKBOX_INPUT = 'CHECKBOX_INPUT';
const SELECT_INPUT = 'SELECT_INPUT';
/**
* `<mr-edit-field>`
*
* A single edit input for a fieldDef + the values of the field.
*
*/
export class MrEditField extends LitElement {
/** @override */
createRenderRoot() {
return this;
}
/** @override */
render() {
return html`
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<style>
mr-edit-field {
display: block;
}
mr-edit-field[hidden] {
display: none;
}
mr-edit-field input,
mr-edit-field select {
width: var(--mr-edit-field-width);
padding: var(--mr-edit-field-padding);
}
</style>
${this._renderInput()}
`;
}
/**
* Renders a single input field.
* @return {TemplateResult}
*/
_renderInput() {
switch (this._widgetType) {
case CHECKBOX_INPUT:
return html`
<mr-multi-checkbox
.options=${this.options}
.values=${[...this.values]}
@change=${this._changeHandler}
></mr-multi-checkbox>
`;
case SELECT_INPUT:
return html`
<select
id="${this.label}"
class="editSelect"
aria-label=${this.name}
@change=${this._changeHandler}
>
<option value="">${EMPTY_FIELD_VALUE}</option>
${this.options.map((option) => html`
<option
value=${option.optionName}
.selected=${this.value === option.optionName}
>
${option.optionName}
${option.docstring ? ' = ' + option.docstring : ''}
</option>
`)}
</select>
`;
case AUTOCOMPLETE_INPUT:
return html`
<mr-react-autocomplete
.label=${this.label}
.vocabularyName=${this.acType || ''}
.inputType=${this._html5InputType}
.fixedValues=${this.derivedValues}
.value=${this.multi ? this.values : this.value}
.multiple=${this.multi}
.onChange=${this._changeHandlerReact.bind(this)}
></mr-react-autocomplete>
`;
default:
return '';
}
}
/** @override */
static get properties() {
return {
// TODO(zhangtiff): Redesign this a bit so we don't need two separate
// ways of specifying "type" for a field. Right now, "type" is mapped to
// the Monorail custom field types whereas "acType" includes additional
// data types such as components, and labels.
// String specifying what kind of autocomplete to add to this field.
acType: {type: String},
// "type" is based on the various custom field types available in
// Monorail.
type: {type: String},
label: {type: String},
multi: {type: Boolean},
name: {type: String},
// Only used for basic, non-repeated fields.
placeholder: {type: String},
initialValues: {
type: Array,
hasChanged(newVal, oldVal) {
// Prevent extra recomputations of the same initial value causing
// values to be reset.
return !deepEqual(newVal, oldVal);
},
},
// The current user-inputted values for a field.
values: {type: Array},
derivedValues: {type: Array},
// For enum fields, the possible options that you have. Each entry is a
// label type with an additional optionName field added.
options: {type: Array},
};
}
/** @override */
constructor() {
super();
this.initialValues = [];
this.values = [];
this.derivedValues = [];
this.options = [];
this.multi = false;
this.actType = '';
this.placeholder = '';
this.type = '';
}
/** @override */
update(changedProperties) {
if (changedProperties.has('initialValues')) {
// Assume we always want to reset the user's input when initial
// values change.
this.reset();
}
super.update(changedProperties);
}
/**
* @return {string}
*/
get value() {
return _getSingleValue(this.values);
}
/**
* @return {string}
*/
get _widgetType() {
const type = this.type;
const multi = this.multi;
if (type === fieldTypes.ENUM_TYPE) {
if (multi) {
return CHECKBOX_INPUT;
}
return SELECT_INPUT;
} else {
return AUTOCOMPLETE_INPUT;
}
}
/**
* @return {string} HTML type for the input.
*/
get _html5InputType() {
const type = this.type;
if (type === fieldTypes.INT_TYPE) {
return 'number';
} else if (type === fieldTypes.DATE_TYPE) {
return 'date';
}
return 'text';
}
/**
* Reset form values to initial state.
*/
reset() {
this.values = _wrapInArray(this.initialValues);
}
/**
* Return the values that the user added to this input.
* @return {Array<string>}åß
*/
getValuesAdded() {
if (!this.values || !this.values.length) return [];
return arrayDifference(
this.values, this.initialValues, equalsIgnoreCase);
}
/**
* Return the values that the userremoved from this input.
* @return {Array<string>}
*/
getValuesRemoved() {
if (!this.multi && (!this.values || this.values.length > 0)) return [];
return arrayDifference(
this.initialValues, this.values, equalsIgnoreCase);
}
/**
* Syncs form values and fires a change event as the user edits the form.
* @param {Event} e
* @fires Event#change
* @private
*/
_changeHandler(e) {
if (e instanceof KeyboardEvent) {
if (NON_EDITING_KEY_EVENTS.has(e.key)) return;
}
const input = e.target;
if (input.getValues) {
// <mr-multi-checkbox> support.
this.values = input.getValues();
} else {
// Is a native input element.
const value = input.value.trim();
this.values = _wrapInArray(value);
}
this.dispatchEvent(new Event('change'));
}
/**
* Syncs form values and fires a change event as the user edits the form.
* @param {React.SyntheticEvent} _e
* @param {string|Array<string>|null} value React autcoomplete form value.
* @fires Event#change
* @private
*/
_changeHandlerReact(_e, value) {
this.values = _wrapInArray(value);
this.dispatchEvent(new Event('change'));
}
}
/**
* Returns the string value for a single field.
* @param {Array<string>} arr
* @return {string}
*/
function _getSingleValue(arr) {
return (arr && arr.length) ? arr[0] : '';
}
/**
* Returns the string value for a single field.
* @param {Array<string>|string} v
* @return {string}
*/
function _wrapInArray(v) {
if (!v) return [];
let values = v;
if (!Array.isArray(v)) {
values = !!v ? [v] : [];
}
return [...values];
}
customElements.define('mr-edit-field', MrEditField);