-
Notifications
You must be signed in to change notification settings - Fork 14
/
toggle.ts
87 lines (83 loc) · 2.35 KB
/
toggle.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
import { buildDom } from '../../../common/htmlHelpers';
import { SuiComponentBase, SuiDialogNotifier, SuiComponentParent } from './baseComponent';
declare var $: any;
/**
* parameters for simple on-off toggle
* @category SuiDialogParams
*/
export interface SuiToggleComponentParams {
id: string,
classes: string,
type?: string,
increment?: number,
label: string,
smoName: string,
control: string
}
/**
* Simple boolean checkbox component
*/
export class SuiToggleComponent extends SuiComponentBase {
defaultValue: boolean = false;
constructor(dialog: SuiDialogNotifier, parameter: SuiToggleComponentParams) {
super(dialog, parameter);
this.defaultValue = false;
this.dialog = dialog;
}
get html() {
const b = buildDom;
const id = this.parameterId;
const r = b('div').classes(this.makeClasses('toggleControl smoControl')).attr('id', this.parameterId).attr('data-param', this.smoName)
.append(b('input').attr('type', 'checkbox').classes('toggleInput')
.attr('id', id + '-input')).append(
b('label').attr('for', id + '-input').text(this.label));
return r;
}
_getInputElement() {
const pid = this.parameterId;
return $(this.dialog.dgDom.element).find('#' + pid).find('input');
}
setValue(value: boolean) {
$(this._getInputElement()).prop('checked', value);
}
getValue() {
return $(this._getInputElement()).prop('checked');
}
bind() {
const input = this._getInputElement();
$(input).off('change').on('change',
() => {
this.handleChanged();
});
}
}
/**
* Params for toggle combined with another component
*/
export interface SuiToggleCompositeParams {
id: string,
classes: string,
type?: string,
increment?: number,
label: string,
smoName: string,
control: string,
disabledOption?: string,
defaultValue?: string | number,
dataType?: string,
parentControl: SuiComponentParent
}
// ### SuiToggleComposite
// Dropdown component that can be part of a composite control.
export class SuiToggleComposite extends SuiToggleComponent {
parentControl: SuiComponentParent;
constructor(dialog: SuiDialogNotifier, parameters: SuiToggleCompositeParams) {
super(dialog, parameters);
this.parentControl = parameters.parentControl;
}
handleChanged() {
this.changeFlag = true;
this.parentControl.changed();
this.changeFlag = false;
}
}