@instawork/design-system
Version:
The design system for Instawork's web apps
40 lines • 1.57 kB
JavaScript
import { CustomInputComponent } from '../custom-input';
import * as $ from 'jquery';
const DEFAULT_OTHER_VALUE = 'other';
/**
* A jQuery plugin can automatically hide and show a text field for a select input with an "other" option
*/
export class OtherFieldComponent extends CustomInputComponent {
constructor($el) {
super($el);
this.$form = this.$el.parents('form');
this.$other = this.$form.find(this.$el.attr(OtherFieldComponent.COMPONENT_ATTR));
this.otherValue = this.$el.attr(OtherFieldComponent.ATTR_OTHER_VALUE) || DEFAULT_OTHER_VALUE;
this.initEvents();
this.onSelectChange();
}
static loadPlugin() {
super.loadPlugin();
if (!$.fn.iwOtherField) {
$.fn.iwOtherField = this.jQueryPlugin('OtherFieldComponent');
}
}
initEvents() {
this.$el.on('change', this.onSelectChange.bind(this));
}
onSelectChange() {
const show = this.$el.val().toLocaleLowerCase() === this.otherValue;
this.$other.toggle(show);
if (show) {
this.$other.trigger('focus');
}
else {
// trigger a change event so that the implementation can update validation state if needed
this.$other.trigger('change');
}
}
}
OtherFieldComponent.COMPONENT_ATTR = 'iw-other-field';
OtherFieldComponent.COMPONENT_SELECTOR = `[${OtherFieldComponent.COMPONENT_ATTR}]`;
OtherFieldComponent.ATTR_OTHER_VALUE = `${OtherFieldComponent.COMPONENT_ATTR}-value`;
//# sourceMappingURL=other-field.component.js.map