-
Notifications
You must be signed in to change notification settings - Fork 14
/
dropdown.ts
158 lines (152 loc) · 4.76 KB
/
dropdown.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
// [Smoosic](https://github.com/AaronDavidNewman/Smoosic)
// Copyright (c) Aaron David Newman 2021.
/**
* Classes to support dropdown compontents
* @module /ui/dialogs/components/dropdown
*/
import { buildDom } from '../../../common/htmlHelpers';
import { SuiComponentBase, SuiDialogNotifier, SuiComponentParent, DialogDefinitionOption } from './baseComponent';
declare var $: any;
/**
* constructor params for {@link SuiDropdownComponent}
* @param id id in DOM
* @param classes
* @param type indicates the data type of the value
* @param increment not used
* @param label
* @param smoName variable name in dialog/adapter
* @param control name of constructor
* @param disabledOption
* @category SuiDialogParams
*/
export interface SuiDropdownComponentParams {
id: string,
classes: string,
increment?: number,
label: string,
smoName: string,
control: string,
disabledOption?: string,
dataType?: string,
options?: DialogDefinitionOption[]
}
/**
* single-select dropdown list
* @category SuiDialog
*/
export class SuiDropdownComponent extends SuiComponentBase {
options: DialogDefinitionOption[];
disabledOption: string;
dataType: string;
value: string = '';
constructor(dialog: SuiDialogNotifier, parameter: SuiDropdownComponentParams) {
super(dialog, parameter);
this.options = parameter.options!;
this.disabledOption = parameter.disabledOption ?? '';
this.dataType = parameter.dataType ?? 'string';
}
checkDefault(s: any, b: any) {
if (this.disabledOption.length) {
s.prop('required', true).append(b('option').attr('selected', 'selected').prop('disabled', true).text(this.disabledOption));
}
}
get html() {
const b = buildDom;
const id = this.parameterId;
const r = b('div').classes(this.makeClasses('dropdownControl smoControl')).attr('id', id).attr('data-param', this.smoName);
const s = b('select');
this.checkDefault(s, b);
this.options.forEach((option) => {
s.append(
b('option').attr('value', option.value.toString()).text(option.label));
});
r.append(s).append(
b('label').attr('for', id + '-input').text(this.label));
return r;
}
replaceOptions(options: DialogDefinitionOption[]) {
const b = buildDom;
const s = b('select');
const sel = this._getInputElement();
const parent = $(sel).parent();
$(sel).remove();
this.checkDefault(s, b);
options.forEach((option) => {
s.append(b('option').attr('value', option.value.toString()).text(option.label));
});
$(parent).append(s.dom());
this.bind();
}
unselect() {
$(this._getInputElement())[0].selectedIndex = -1;
$(this._getInputElement()).blur();
}
_getInputElement() {
var pid = this.parameterId;
return $(this.dialog.dgDom.element).find('#' + pid).find('select');
}
getValue(): string | number {
const input = this._getInputElement();
const option = input.find('option:selected');
let val = $(option).val();
val = (this.dataType.toLowerCase() === 'int') ? parseInt(val, 10) : val;
val = (this.dataType.toLowerCase() === 'float') ? parseFloat(val) : val;
if (typeof(val) === 'undefined') {
val = $(input).find('option:first').val();
$(input).find('option:first').prop('selected', true);
}
return val;
}
setValue(value: string | number) {
const input = this._getInputElement();
$(input).val(value);
}
bind() {
const input = this._getInputElement();
const self = this;
$(input).off('change').on('change',
() => {
self.handleChanged();
});
}
}
/**
* constructor params for {@link SuiDropdownComposite}
* element, often a checkbox
* @param {id} - unique ID for the control DOM
* @param {classes} - additional classes for styling added to DOM
* @param {label} - default label for the component
* @param {smoName} - the variable in the dialog that the componenet maps to
* @param {control} - the constructor of the UI control
* @param {parentComponent} - for composite components, the top-level
* @category SuiDialogParams
* */
export interface SuiDropdownCompositeParams {
id: string,
classes: string,
type?: string,
increment?: number,
label: string,
smoName: string,
control: string,
disabledOption?: string,
dataType?: string,
options?: DialogDefinitionOption[],
parentControl: SuiComponentParent
}
/**
* A dropdown composite mixes a dropdown with some other
* @category SuiDialog
*/
export class SuiDropdownComposite extends SuiDropdownComponent {
parentControl: SuiComponentParent;
constructor(dialog: SuiDialogNotifier, parameters: SuiDropdownCompositeParams) {
super(dialog, parameters);
this.parentControl = parameters.parentControl;
}
handleChanged() {
this.changeFlag = true;
this.parentControl.changed();
this.changeFlag = false;
}
}