smart-webcomponents-react 14.2.83 → 14.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/alertwindow/alertwindow.d.ts +5 -5
- package/alertwindow/alertwindow.esm.js +10 -85
- package/alertwindow/alertwindow.umd.js +1134 -1209
- package/array/array.d.ts +5 -5
- package/array/array.esm.js +13 -88
- package/array/array.umd.js +752 -827
- package/barcode/barcode.d.ts +3 -3
- package/barcode/barcode.esm.js +6 -61
- package/barcode/barcode.umd.js +311 -366
- package/button/dropdownbutton.d.ts +2 -2
- package/button/multisplitbutton.d.ts +2 -2
- package/calendar/calendar.d.ts +2 -2
- package/calendar/calendar.esm.js +4 -49
- package/calendar/calendar.umd.js +710 -755
- package/card/cardview.d.ts +1 -1
- package/cardview/cardview.d.ts +1 -1
- package/cardview/cardview.esm.js +2 -37
- package/cardview/cardview.umd.js +515 -550
- package/chart/chart.d.ts +9 -9
- package/chart/chart.esm.js +18 -133
- package/chart/chart.umd.js +822 -937
- package/chart/ganttchart.d.ts +20 -20
- package/combobox/combobox.d.ts +4 -4
- package/combobox/combobox.esm.js +8 -73
- package/combobox/combobox.umd.js +1341 -1406
- package/datetimepicker/datetimepicker.d.ts +1 -1
- package/datetimepicker/datetimepicker.esm.js +2 -37
- package/datetimepicker/datetimepicker.umd.js +826 -861
- package/dialogwindow/dialogwindow.d.ts +5 -5
- package/dialogwindow/dialogwindow.esm.js +10 -85
- package/dialogwindow/dialogwindow.umd.js +1134 -1209
- package/dockinglayout/dockinglayout.d.ts +7 -7
- package/dockinglayout/dockinglayout.esm.js +14 -109
- package/dockinglayout/dockinglayout.umd.js +765 -860
- package/dropdownbutton/dropdownbutton.d.ts +2 -2
- package/dropdownbutton/dropdownbutton.esm.js +4 -49
- package/dropdownbutton/dropdownbutton.umd.js +527 -572
- package/dropdownlist/dropdownlist.d.ts +4 -4
- package/dropdownlist/dropdownlist.esm.js +8 -73
- package/dropdownlist/dropdownlist.umd.js +1275 -1340
- package/editor/editor.d.ts +11 -9
- package/editor/editor.esm.js +14 -109
- package/editor/editor.umd.js +911 -1006
- package/fileupload/fileupload.d.ts +2 -1
- package/filterbuilder/filterbuilder.d.ts +1 -1
- package/filterbuilder/filterbuilder.esm.js +2 -37
- package/filterbuilder/filterbuilder.umd.js +463 -498
- package/filterpanel/filterpanel.d.ts +1 -1
- package/filterpanel/filterpanel.esm.js +2 -37
- package/filterpanel/filterpanel.umd.js +354 -389
- package/form/form.d.ts +1 -1
- package/form/form.esm.js +4 -49
- package/form/form.umd.js +1016 -1061
- package/form/formgroup.d.ts +1 -1
- package/ganttchart/ganttchart.d.ts +20 -20
- package/ganttchart/ganttchart.esm.js +40 -265
- package/ganttchart/ganttchart.umd.js +1666 -1891
- package/gauge/gauge.d.ts +2 -2
- package/gauge/gauge.esm.js +4 -49
- package/gauge/gauge.umd.js +664 -709
- package/grid/grid.d.ts +56 -51
- package/grid/grid.esm.js +96 -460
- package/grid/grid.umd.js +2107 -2471
- package/index.d.ts +45 -3
- package/input/input.d.ts +2 -2
- package/input/input.esm.js +4 -49
- package/input/input.umd.js +505 -550
- package/input/numberinput.d.ts +2 -2
- package/input/phoneinput.d.ts +4 -4
- package/kanban/kanban.d.ts +6 -6
- package/kanban/kanban.esm.js +12 -97
- package/kanban/kanban.umd.js +1334 -1419
- package/layout/dockinglayout.d.ts +7 -7
- package/listbox/listbox.d.ts +5 -5
- package/listbox/listbox.esm.js +10 -85
- package/listbox/listbox.umd.js +1170 -1245
- package/listmenu/listmenu.d.ts +1 -1
- package/listmenu/listmenu.esm.js +2 -37
- package/listmenu/listmenu.umd.js +1005 -1040
- package/menu/listmenu.d.ts +1 -1
- package/menu/menu.d.ts +1 -1
- package/menu/menu.esm.js +2 -37
- package/menu/menu.umd.js +1025 -1060
- package/multilinetextbox/multilinetextbox.d.ts +1 -1
- package/multilinetextbox/multilinetextbox.esm.js +2 -37
- package/multilinetextbox/multilinetextbox.umd.js +907 -942
- package/multilinewindow/multilinewindow.d.ts +5 -5
- package/multilinewindow/multilinewindow.esm.js +10 -85
- package/multilinewindow/multilinewindow.umd.js +1134 -1209
- package/multisplitbutton/multisplitbutton.d.ts +2 -2
- package/multisplitbutton/multisplitbutton.esm.js +4 -49
- package/multisplitbutton/multisplitbutton.umd.js +941 -986
- package/numberinput/numberinput.d.ts +2 -2
- package/numberinput/numberinput.esm.js +4 -49
- package/numberinput/numberinput.umd.js +348 -393
- package/numerictextbox/numerictextbox.d.ts +1 -1
- package/numerictextbox/numerictextbox.esm.js +2 -37
- package/numerictextbox/numerictextbox.umd.js +592 -627
- package/package.json +1 -1
- package/phoneinput/phoneinput.d.ts +4 -4
- package/phoneinput/phoneinput.esm.js +8 -73
- package/phoneinput/phoneinput.umd.js +386 -451
- package/pivottable/pivottable.d.ts +3 -3
- package/pivottable/pivottable.esm.js +6 -61
- package/pivottable/pivottable.umd.js +762 -817
- package/progresswindow/progresswindow.d.ts +5 -5
- package/progresswindow/progresswindow.esm.js +10 -85
- package/progresswindow/progresswindow.umd.js +1134 -1209
- package/promptwindow/promptwindow.d.ts +5 -5
- package/promptwindow/promptwindow.esm.js +10 -85
- package/promptwindow/promptwindow.umd.js +1134 -1209
- package/qrcode/qrcode.d.ts +3 -3
- package/qrcode/qrcode.esm.js +6 -61
- package/qrcode/qrcode.umd.js +333 -388
- package/querybuilder/querybuilder.d.ts +6 -1
- package/querybuilder/querybuilder.esm.js +14 -38
- package/querybuilder/querybuilder.umd.js +446 -470
- package/rating/rating.d.ts +1 -1
- package/rating/rating.esm.js +2 -37
- package/rating/rating.umd.js +261 -296
- package/scheduler/scheduler.d.ts +17 -17
- package/scheduler/scheduler.esm.js +34 -229
- package/scheduler/scheduler.umd.js +1782 -1977
- package/slider/slider.d.ts +2 -2
- package/slider/slider.esm.js +4 -49
- package/slider/slider.umd.js +642 -687
- package/source/modules/smart.accordion.js +1 -1
- package/source/modules/smart.array.js +2 -2
- package/source/modules/smart.barcode.js +1 -1
- package/source/modules/smart.breadcrumb.js +1 -1
- package/source/modules/smart.button.js +1 -1
- package/source/modules/smart.buttongroup.js +1 -1
- package/source/modules/smart.calendar.js +3 -3
- package/source/modules/smart.card.js +1 -1
- package/source/modules/smart.cardview.js +4 -4
- package/source/modules/smart.carousel.js +1 -1
- package/source/modules/smart.chart.js +1 -1
- package/source/modules/smart.checkbox.js +1 -1
- package/source/modules/smart.checkinput.js +2 -2
- package/source/modules/smart.chip.js +1 -1
- package/source/modules/smart.colorinput.js +2 -2
- package/source/modules/smart.colorpanel.js +2 -2
- package/source/modules/smart.colorpicker.js +2 -2
- package/source/modules/smart.combobox.js +2 -2
- package/source/modules/smart.common.js +1 -1
- package/source/modules/smart.countryinput.js +2 -2
- package/source/modules/smart.dateinput.js +3 -3
- package/source/modules/smart.daterangeinput.js +4 -4
- package/source/modules/smart.datetimepicker.js +3 -3
- package/source/modules/smart.dockinglayout.js +1 -1
- package/source/modules/smart.dropdownbutton.js +1 -1
- package/source/modules/smart.dropdownlist.js +2 -2
- package/source/modules/smart.editor.js +5 -5
- package/source/modules/smart.element.js +1 -1
- package/source/modules/smart.fileupload.js +3 -3
- package/source/modules/smart.form.js +2 -2
- package/source/modules/smart.formulaparser.js +1 -1
- package/source/modules/smart.ganttchart.js +5 -5
- package/source/modules/smart.gauge.js +1 -1
- package/source/modules/smart.grid.js +14 -14
- package/source/modules/smart.gridpanel.js +4 -4
- package/source/modules/smart.input.js +2 -2
- package/source/modules/smart.kanban.js +5 -5
- package/source/modules/smart.layout.js +1 -1
- package/source/modules/smart.led.js +1 -1
- package/source/modules/smart.listbox.js +2 -2
- package/source/modules/smart.listmenu.js +1 -1
- package/source/modules/smart.map.js +1 -1
- package/source/modules/smart.maskedtextbox.js +2 -2
- package/source/modules/smart.menu.js +1 -1
- package/source/modules/smart.multicomboinput.js +2 -2
- package/source/modules/smart.multiinput.js +2 -2
- package/source/modules/smart.multilinetextbox.js +2 -2
- package/source/modules/smart.multisplitbutton.js +2 -2
- package/source/modules/smart.numberinput.js +2 -2
- package/source/modules/smart.numerictextbox.js +2 -2
- package/source/modules/smart.pager.js +2 -2
- package/source/modules/smart.passwordinput.js +2 -2
- package/source/modules/smart.passwordtextbox.js +2 -2
- package/source/modules/smart.path.js +1 -1
- package/source/modules/smart.phoneinput.js +2 -2
- package/source/modules/smart.pivottable.js +3 -3
- package/source/modules/smart.progressbar.js +1 -1
- package/source/modules/smart.qrcode.js +1 -1
- package/source/modules/smart.querybuilder.js +5 -5
- package/source/modules/smart.radiobutton.js +1 -1
- package/source/modules/smart.rating.js +1 -1
- package/source/modules/smart.router.js +1 -1
- package/source/modules/smart.scheduler.js +4 -4
- package/source/modules/smart.scrollbar.js +1 -1
- package/source/modules/smart.slider.js +1 -1
- package/source/modules/smart.sortable.js +1 -1
- package/source/modules/smart.splitter.js +1 -1
- package/source/modules/smart.switchbutton.js +1 -1
- package/source/modules/smart.table.js +3 -3
- package/source/modules/smart.tabs.js +1 -1
- package/source/modules/smart.tank.js +1 -1
- package/source/modules/smart.textarea.js +2 -2
- package/source/modules/smart.textbox.js +2 -2
- package/source/modules/smart.timeinput.js +2 -2
- package/source/modules/smart.timepicker.js +1 -1
- package/source/modules/smart.toast.js +1 -1
- package/source/modules/smart.tooltip.js +1 -1
- package/source/modules/smart.tree.js +1 -1
- package/source/modules/smart.validator.js +1 -1
- package/source/modules/smart.window.js +2 -2
- package/source/smart.accordion.js +1 -1
- package/source/smart.ajax.js +1 -1
- package/source/smart.array.js +1 -1
- package/source/smart.barcode.js +1 -1
- package/source/smart.bootstrap.js +1 -1
- package/source/smart.breadcrumb.js +1 -1
- package/source/smart.button.js +1 -1
- package/source/smart.buttongroup.js +1 -1
- package/source/smart.calendar.js +2 -2
- package/source/smart.card.js +1 -1
- package/source/smart.cardview.js +1 -1
- package/source/smart.carousel.js +1 -1
- package/source/smart.chart.annotations.js +1 -1
- package/source/smart.chart.api.js +1 -1
- package/source/smart.chart.core.js +1 -1
- package/source/smart.chart.js +1 -1
- package/source/smart.chart.rangeselector.js +1 -1
- package/source/smart.chart.waterfall.js +1 -1
- package/source/smart.checkbox.js +1 -1
- package/source/smart.checkinput.js +1 -1
- package/source/smart.chip.js +1 -1
- package/source/smart.colorinput.js +1 -1
- package/source/smart.colorpanel.js +1 -1
- package/source/smart.colorpicker.js +1 -1
- package/source/smart.combobox.js +1 -1
- package/source/smart.complex.js +1 -1
- package/source/smart.core.js +1 -1
- package/source/smart.countryinput.js +1 -1
- package/source/smart.data.js +1 -1
- package/source/smart.date.js +1 -1
- package/source/smart.dateformatpanel.js +1 -1
- package/source/smart.dateinput.js +1 -1
- package/source/smart.daterangeinput.js +1 -1
- package/source/smart.datetimepicker.js +1 -1
- package/source/smart.dockinglayout.js +1 -1
- package/source/smart.draw.js +1 -1
- package/source/smart.dropdownbutton.js +1 -1
- package/source/smart.dropdownlist.js +1 -1
- package/source/smart.editor.js +2 -2
- package/source/smart.element.js +1 -1
- package/source/smart.elements.js +17 -17
- package/source/smart.export.js +1 -1
- package/source/smart.fileupload.js +2 -2
- package/source/smart.filter.js +1 -1
- package/source/smart.filterbuilder.js +2 -2
- package/source/smart.filterpanel.js +1 -1
- package/source/smart.form.js +1 -1
- package/source/smart.format.js +1 -1
- package/source/smart.formulaparser.js +1 -1
- package/source/smart.ganttchart.js +2 -2
- package/source/smart.gauge.js +1 -1
- package/source/smart.grid.cell.js +2 -2
- package/source/smart.grid.chart.js +1 -1
- package/source/smart.grid.column.js +1 -1
- package/source/smart.grid.core.js +2 -2
- package/source/smart.grid.dialog.js +2 -2
- package/source/smart.grid.edit.js +2 -2
- package/source/smart.grid.export.js +1 -1
- package/source/smart.grid.filter.js +1 -1
- package/source/smart.grid.group.js +1 -1
- package/source/smart.grid.js +1 -1
- package/source/smart.grid.menu.js +2 -2
- package/source/smart.grid.pager.js +1 -1
- package/source/smart.grid.reorder.js +1 -1
- package/source/smart.grid.resize.js +2 -2
- package/source/smart.grid.row.js +1 -1
- package/source/smart.grid.select.js +2 -2
- package/source/smart.grid.sort.js +1 -1
- package/source/smart.grid.toolbar.js +2 -2
- package/source/smart.grid.tree.js +1 -1
- package/source/smart.grid.view.js +2 -2
- package/source/smart.gridpanel.js +1 -1
- package/source/smart.input.js +2 -2
- package/source/smart.kanban.js +2 -2
- package/source/smart.layout.js +1 -1
- package/source/smart.led.js +1 -1
- package/source/smart.listbox.js +2 -2
- package/source/smart.listmenu.js +1 -1
- package/source/smart.map.js +1 -1
- package/source/smart.maskedtextbox.js +1 -1
- package/source/smart.math.js +1 -1
- package/source/smart.menu.js +1 -1
- package/source/smart.multicomboinput.js +1 -1
- package/source/smart.multiinput.js +1 -1
- package/source/smart.multilinetextbox.js +1 -1
- package/source/smart.multisplitbutton.js +1 -1
- package/source/smart.numberformatpanel.js +1 -1
- package/source/smart.numberinput.js +1 -1
- package/source/smart.numeric.js +1 -1
- package/source/smart.numerictextbox.js +1 -1
- package/source/smart.pager.js +1 -1
- package/source/smart.passwordinput.js +1 -1
- package/source/smart.passwordtextbox.js +1 -1
- package/source/smart.path.js +1 -1
- package/source/smart.phoneinput.js +1 -1
- package/source/smart.pivottable.js +1 -1
- package/source/smart.powerbutton.js +1 -1
- package/source/smart.progressbar.js +1 -1
- package/source/smart.qrcode.js +1 -1
- package/source/smart.radiobutton.js +1 -1
- package/source/smart.rating.js +1 -1
- package/source/smart.router.js +1 -1
- package/source/smart.scheduler.js +1 -1
- package/source/smart.scrollbar.js +1 -1
- package/source/smart.slider.js +1 -1
- package/source/smart.sortable.js +1 -1
- package/source/smart.splitter.js +1 -1
- package/source/smart.switchbutton.js +1 -1
- package/source/smart.table.js +1 -1
- package/source/smart.tabs.js +1 -1
- package/source/smart.tank.js +1 -1
- package/source/smart.textarea.js +1 -1
- package/source/smart.textbox.js +1 -1
- package/source/smart.tickintervalhandler.js +1 -1
- package/source/smart.timeinput.js +1 -1
- package/source/smart.timepicker.js +1 -1
- package/source/smart.toast.js +1 -1
- package/source/smart.tooltip.js +1 -1
- package/source/smart.tree.js +1 -1
- package/source/smart.validationpanel.js +1 -1
- package/source/smart.validator.js +1 -1
- package/source/smart.window.js +1 -1
- package/source/styles/components/smart.grid.css +1 -1
- package/source/styles/default/scss/smart.grid.scss +10 -3
- package/source/styles/default/smart.grid.css +7 -3
- package/source/styles/smart.default.css +1 -1
- package/source/typescript/smart.editor.d.ts +4 -2
- package/source/typescript/smart.elements.d.ts +45 -3
- package/source/typescript/smart.fileupload.d.ts +2 -1
- package/source/typescript/smart.grid.d.ts +34 -0
- package/source/typescript/smart.querybuilder.d.ts +5 -0
- package/splitter/splitter.d.ts +3 -3
- package/splitter/splitter.esm.js +6 -61
- package/splitter/splitter.umd.js +901 -956
- package/table/pivottable.d.ts +3 -3
- package/table/table.d.ts +7 -7
- package/table/table.esm.js +14 -109
- package/table/table.umd.js +1278 -1373
- package/tabs/tabs.d.ts +4 -4
- package/tabs/tabs.esm.js +8 -73
- package/tabs/tabs.umd.js +875 -940
- package/tabs/tabswindow.d.ts +5 -5
- package/tabswindow/tabswindow.d.ts +5 -5
- package/tabswindow/tabswindow.esm.js +10 -85
- package/tabswindow/tabswindow.umd.js +1134 -1209
- package/tank/tank.d.ts +2 -2
- package/tank/tank.esm.js +4 -49
- package/tank/tank.umd.js +598 -643
- package/textbox/multilinetextbox.d.ts +1 -1
- package/textbox/numerictextbox.d.ts +1 -1
- package/timepicker/datetimepicker.d.ts +1 -1
- package/toast/toast.d.ts +1 -1
- package/toast/toast.esm.js +2 -37
- package/toast/toast.umd.js +397 -432
- package/tree/tree.d.ts +4 -4
- package/tree/tree.esm.js +8 -73
- package/tree/tree.umd.js +1310 -1375
- package/waitwindow/waitwindow.d.ts +5 -5
- package/waitwindow/waitwindow.esm.js +10 -85
- package/waitwindow/waitwindow.umd.js +1134 -1209
- package/window/alertwindow.d.ts +5 -5
- package/window/dialogwindow.d.ts +5 -5
- package/window/multilinewindow.d.ts +5 -5
- package/window/progresswindow.d.ts +5 -5
- package/window/promptwindow.d.ts +5 -5
- package/window/tabswindow.d.ts +5 -5
- package/window/waitwindow.d.ts +5 -5
- package/window/window.d.ts +5 -5
- package/window/window.esm.js +10 -85
- package/window/window.umd.js +1134 -1209
package/tank/tank.umd.js
CHANGED
|
@@ -2,653 +2,608 @@
|
|
|
2
2
|
require('../source/modules/smart.tank');
|
|
3
3
|
|
|
4
4
|
(function (global, factory) {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
|
|
6
|
+
typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
|
|
7
|
+
(factory((global.tank = {}),global.React));
|
|
8
8
|
}(this, (function (exports,React) { 'use strict';
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
React = React && React.hasOwnProperty('default') ? React['default'] : React;
|
|
11
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
|
-
|
|
12
|
+
const Smart = window.Smart;
|
|
13
|
+
/**
|
|
14
|
+
Tank is a UI Component used in Engineering and Scientific applications. It is broadly used to display the fluid levels.
|
|
15
|
+
*/
|
|
16
|
+
class Tank extends React.Component {
|
|
17
|
+
constructor(props) {
|
|
18
|
+
super(props);
|
|
19
|
+
this.componentRef = React.createRef();
|
|
20
|
+
}
|
|
21
|
+
// Gets the id of the React component.
|
|
22
|
+
get id() {
|
|
23
|
+
if (!this._id) {
|
|
24
|
+
this._id = 'Tank' + Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
|
|
25
|
+
}
|
|
26
|
+
return this._id;
|
|
27
|
+
}
|
|
28
|
+
/** Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
|
|
29
|
+
* Property type: Animation | string
|
|
30
|
+
*/
|
|
31
|
+
get animation() {
|
|
32
|
+
return this.nativeElement ? this.nativeElement.animation : undefined;
|
|
33
|
+
}
|
|
34
|
+
set animation(value) {
|
|
35
|
+
if (this.nativeElement) {
|
|
36
|
+
this.nativeElement.animation = value;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
/** If is set to true all values coerce to the interval, set in the interval property.
|
|
40
|
+
* Property type: boolean
|
|
41
|
+
*/
|
|
42
|
+
get coerce() {
|
|
43
|
+
return this.nativeElement ? this.nativeElement.coerce : undefined;
|
|
44
|
+
}
|
|
45
|
+
set coerce(value) {
|
|
46
|
+
if (this.nativeElement) {
|
|
47
|
+
this.nativeElement.coerce = value;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
/** Sets or gets whether custom ticks at (possibly) uneven interval will be plotted. The ticks to be plotted are defined with the property customTicks.
|
|
51
|
+
* Property type: boolean
|
|
52
|
+
*/
|
|
53
|
+
get customInterval() {
|
|
54
|
+
return this.nativeElement ? this.nativeElement.customInterval : undefined;
|
|
55
|
+
}
|
|
56
|
+
set customInterval(value) {
|
|
57
|
+
if (this.nativeElement) {
|
|
58
|
+
this.nativeElement.customInterval = value;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
/** If customInterval is enabled, sets a list of ticks to be plotted. If coerce is set to true, the value will snap to these ticks.
|
|
62
|
+
* Property type: number[]
|
|
63
|
+
*/
|
|
64
|
+
get customTicks() {
|
|
65
|
+
return this.nativeElement ? this.nativeElement.customTicks : undefined;
|
|
66
|
+
}
|
|
67
|
+
set customTicks(value) {
|
|
68
|
+
if (this.nativeElement) {
|
|
69
|
+
this.nativeElement.customTicks = value;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
/** Sets or gets the pattern which labels are displayed in when mode is 'date'.
|
|
73
|
+
* Property type: string
|
|
74
|
+
*/
|
|
75
|
+
get dateLabelFormatString() {
|
|
76
|
+
return this.nativeElement ? this.nativeElement.dateLabelFormatString : undefined;
|
|
77
|
+
}
|
|
78
|
+
set dateLabelFormatString(value) {
|
|
79
|
+
if (this.nativeElement) {
|
|
80
|
+
this.nativeElement.dateLabelFormatString = value;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
/** Sets or gets the char to use as the decimal separator in numeric values.
|
|
84
|
+
* Property type: string
|
|
85
|
+
*/
|
|
86
|
+
get decimalSeparator() {
|
|
87
|
+
return this.nativeElement ? this.nativeElement.decimalSeparator : undefined;
|
|
88
|
+
}
|
|
89
|
+
set decimalSeparator(value) {
|
|
90
|
+
if (this.nativeElement) {
|
|
91
|
+
this.nativeElement.decimalSeparator = value;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
/** Enables or disables the widget.
|
|
95
|
+
* Property type: boolean
|
|
96
|
+
*/
|
|
97
|
+
get disabled() {
|
|
98
|
+
return this.nativeElement ? this.nativeElement.disabled : undefined;
|
|
99
|
+
}
|
|
100
|
+
set disabled(value) {
|
|
101
|
+
if (this.nativeElement) {
|
|
102
|
+
this.nativeElement.disabled = value;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
/** When cooerce property is true, all values coerce to the interval's value.
|
|
106
|
+
* Property type: string | number
|
|
107
|
+
*/
|
|
108
|
+
get interval() {
|
|
109
|
+
return this.nativeElement ? this.nativeElement.interval : undefined;
|
|
110
|
+
}
|
|
111
|
+
set interval(value) {
|
|
112
|
+
if (this.nativeElement) {
|
|
113
|
+
this.nativeElement.interval = value;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
/** Sets the direction of the tank. If is true - positions of the tank's begin and end are changed.
|
|
117
|
+
* Property type: boolean
|
|
118
|
+
*/
|
|
119
|
+
get inverted() {
|
|
120
|
+
return this.nativeElement ? this.nativeElement.inverted : undefined;
|
|
121
|
+
}
|
|
122
|
+
set inverted(value) {
|
|
123
|
+
if (this.nativeElement) {
|
|
124
|
+
this.nativeElement.inverted = value;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
/** A callback function that can be used to format the values displayed on the tank labels.
|
|
128
|
+
* Property type: any
|
|
129
|
+
*/
|
|
130
|
+
get labelFormatFunction() {
|
|
131
|
+
return this.nativeElement ? this.nativeElement.labelFormatFunction : undefined;
|
|
132
|
+
}
|
|
133
|
+
set labelFormatFunction(value) {
|
|
134
|
+
if (this.nativeElement) {
|
|
135
|
+
this.nativeElement.labelFormatFunction = value;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
/** Sets or gets the widget's label visibility
|
|
139
|
+
* Property type: LabelsVisibility | string
|
|
140
|
+
*/
|
|
141
|
+
get labelsVisibility() {
|
|
142
|
+
return this.nativeElement ? this.nativeElement.labelsVisibility : undefined;
|
|
143
|
+
}
|
|
144
|
+
set labelsVisibility(value) {
|
|
145
|
+
if (this.nativeElement) {
|
|
146
|
+
this.nativeElement.labelsVisibility = value;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
/** Sets or gets the locale. Used in conjunction with the property messages.
|
|
150
|
+
* Property type: string
|
|
151
|
+
*/
|
|
152
|
+
get locale() {
|
|
153
|
+
return this.nativeElement ? this.nativeElement.locale : undefined;
|
|
154
|
+
}
|
|
155
|
+
set locale(value) {
|
|
156
|
+
if (this.nativeElement) {
|
|
157
|
+
this.nativeElement.locale = value;
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
/** Callback, related to localization module.
|
|
161
|
+
* Property type: any
|
|
162
|
+
*/
|
|
163
|
+
get localizeFormatFunction() {
|
|
164
|
+
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
|
|
165
|
+
}
|
|
166
|
+
set localizeFormatFunction(value) {
|
|
167
|
+
if (this.nativeElement) {
|
|
168
|
+
this.nativeElement.localizeFormatFunction = value;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
/** Enables or disables the usage of logarithmic scale in the widget.
|
|
172
|
+
* Property type: boolean
|
|
173
|
+
*/
|
|
174
|
+
get logarithmicScale() {
|
|
175
|
+
return this.nativeElement ? this.nativeElement.logarithmicScale : undefined;
|
|
176
|
+
}
|
|
177
|
+
set logarithmicScale(value) {
|
|
178
|
+
if (this.nativeElement) {
|
|
179
|
+
this.nativeElement.logarithmicScale = value;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
/** Sets or gets the maximum value of the widget.
|
|
183
|
+
* Property type: string | number
|
|
184
|
+
*/
|
|
185
|
+
get max() {
|
|
186
|
+
return this.nativeElement ? this.nativeElement.max : undefined;
|
|
187
|
+
}
|
|
188
|
+
set max(value) {
|
|
189
|
+
if (this.nativeElement) {
|
|
190
|
+
this.nativeElement.max = value;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
/** Sets or gets the type of used mechanical action.
|
|
194
|
+
* Property type: DragMechanicalAction | string
|
|
195
|
+
*/
|
|
196
|
+
get mechanicalAction() {
|
|
197
|
+
return this.nativeElement ? this.nativeElement.mechanicalAction : undefined;
|
|
198
|
+
}
|
|
199
|
+
set mechanicalAction(value) {
|
|
200
|
+
if (this.nativeElement) {
|
|
201
|
+
this.nativeElement.mechanicalAction = value;
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
/** Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
|
|
205
|
+
* Property type: any
|
|
206
|
+
*/
|
|
207
|
+
get messages() {
|
|
208
|
+
return this.nativeElement ? this.nativeElement.messages : undefined;
|
|
209
|
+
}
|
|
210
|
+
set messages(value) {
|
|
211
|
+
if (this.nativeElement) {
|
|
212
|
+
this.nativeElement.messages = value;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
/** Sets or gets the minimum value of the widget.
|
|
216
|
+
* Property type: string | number
|
|
217
|
+
*/
|
|
218
|
+
get min() {
|
|
219
|
+
return this.nativeElement ? this.nativeElement.min : undefined;
|
|
220
|
+
}
|
|
221
|
+
set min(value) {
|
|
222
|
+
if (this.nativeElement) {
|
|
223
|
+
this.nativeElement.min = value;
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
/** Sets or gets whether the widget works with numbers or dates.
|
|
227
|
+
* Property type: ScaleMode | string
|
|
228
|
+
*/
|
|
229
|
+
get mode() {
|
|
230
|
+
return this.nativeElement ? this.nativeElement.mode : undefined;
|
|
231
|
+
}
|
|
232
|
+
set mode(value) {
|
|
233
|
+
if (this.nativeElement) {
|
|
234
|
+
this.nativeElement.mode = value;
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
/** Sets or gets the element's name, which is used as a reference when the data is submitted.
|
|
238
|
+
* Property type: string
|
|
239
|
+
*/
|
|
240
|
+
get name() {
|
|
241
|
+
return this.nativeElement ? this.nativeElement.name : undefined;
|
|
242
|
+
}
|
|
243
|
+
set name(value) {
|
|
244
|
+
if (this.nativeElement) {
|
|
245
|
+
this.nativeElement.name = value;
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
/** Sets the orientation of the widget
|
|
249
|
+
* Property type: Orientation | string
|
|
250
|
+
*/
|
|
251
|
+
get orientation() {
|
|
252
|
+
return this.nativeElement ? this.nativeElement.orientation : undefined;
|
|
253
|
+
}
|
|
254
|
+
set orientation(value) {
|
|
255
|
+
if (this.nativeElement) {
|
|
256
|
+
this.nativeElement.orientation = value;
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
/** Determines the number of digits after the decimal point. Applicable only when scaleType is 'integer'.
|
|
260
|
+
* Property type: number
|
|
261
|
+
*/
|
|
262
|
+
get precisionDigits() {
|
|
263
|
+
return this.nativeElement ? this.nativeElement.precisionDigits : undefined;
|
|
264
|
+
}
|
|
265
|
+
set precisionDigits(value) {
|
|
266
|
+
if (this.nativeElement) {
|
|
267
|
+
this.nativeElement.precisionDigits = value;
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
/** If the widgets is readonly, the users cannot iteract with the element.
|
|
271
|
+
* Property type: boolean
|
|
272
|
+
*/
|
|
273
|
+
get readonly() {
|
|
274
|
+
return this.nativeElement ? this.nativeElement.readonly : undefined;
|
|
275
|
+
}
|
|
276
|
+
set readonly(value) {
|
|
277
|
+
if (this.nativeElement) {
|
|
278
|
+
this.nativeElement.readonly = value;
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
/** Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
|
|
282
|
+
* Property type: boolean
|
|
283
|
+
*/
|
|
284
|
+
get rightToLeft() {
|
|
285
|
+
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
|
|
286
|
+
}
|
|
287
|
+
set rightToLeft(value) {
|
|
288
|
+
if (this.nativeElement) {
|
|
289
|
+
this.nativeElement.rightToLeft = value;
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
/** Sets the position of the widget's scales.
|
|
293
|
+
* Property type: ScalePosition | string
|
|
294
|
+
*/
|
|
295
|
+
get scalePosition() {
|
|
296
|
+
return this.nativeElement ? this.nativeElement.scalePosition : undefined;
|
|
297
|
+
}
|
|
298
|
+
set scalePosition(value) {
|
|
299
|
+
if (this.nativeElement) {
|
|
300
|
+
this.nativeElement.scalePosition = value;
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
/** Sets the type of the tank's scale.
|
|
304
|
+
* Property type: ScaleType | string
|
|
305
|
+
*/
|
|
306
|
+
get scaleType() {
|
|
307
|
+
return this.nativeElement ? this.nativeElement.scaleType : undefined;
|
|
308
|
+
}
|
|
309
|
+
set scaleType(value) {
|
|
310
|
+
if (this.nativeElement) {
|
|
311
|
+
this.nativeElement.scaleType = value;
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
/** Enables or disables scientific notation.
|
|
315
|
+
* Property type: boolean
|
|
316
|
+
*/
|
|
317
|
+
get scientificNotation() {
|
|
318
|
+
return this.nativeElement ? this.nativeElement.scientificNotation : undefined;
|
|
319
|
+
}
|
|
320
|
+
set scientificNotation(value) {
|
|
321
|
+
if (this.nativeElement) {
|
|
322
|
+
this.nativeElement.scientificNotation = value;
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
/** Enables or disables displaying of the thumb label.
|
|
326
|
+
* Property type: boolean
|
|
327
|
+
*/
|
|
328
|
+
get showThumbLabel() {
|
|
329
|
+
return this.nativeElement ? this.nativeElement.showThumbLabel : undefined;
|
|
330
|
+
}
|
|
331
|
+
set showThumbLabel(value) {
|
|
332
|
+
if (this.nativeElement) {
|
|
333
|
+
this.nativeElement.showThumbLabel = value;
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
/** Enables or disables displaying of the tooltip.
|
|
337
|
+
* Property type: boolean
|
|
338
|
+
*/
|
|
339
|
+
get showTooltip() {
|
|
340
|
+
return this.nativeElement ? this.nativeElement.showTooltip : undefined;
|
|
341
|
+
}
|
|
342
|
+
set showTooltip(value) {
|
|
343
|
+
if (this.nativeElement) {
|
|
344
|
+
this.nativeElement.showTooltip = value;
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
/** Enables or disables displaying of the units.
|
|
348
|
+
* Property type: boolean
|
|
349
|
+
*/
|
|
350
|
+
get showUnit() {
|
|
351
|
+
return this.nativeElement ? this.nativeElement.showUnit : undefined;
|
|
352
|
+
}
|
|
353
|
+
set showUnit(value) {
|
|
354
|
+
if (this.nativeElement) {
|
|
355
|
+
this.nativeElement.showUnit = value;
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
/** Determining how many significant digits are in a number. Applicable only when scaleType is 'integer'.
|
|
359
|
+
* Property type: number
|
|
360
|
+
*/
|
|
361
|
+
get significantDigits() {
|
|
362
|
+
return this.nativeElement ? this.nativeElement.significantDigits : undefined;
|
|
363
|
+
}
|
|
364
|
+
set significantDigits(value) {
|
|
365
|
+
if (this.nativeElement) {
|
|
366
|
+
this.nativeElement.significantDigits = value;
|
|
367
|
+
}
|
|
368
|
+
}
|
|
369
|
+
/** Sets or gets the element's visual theme.
|
|
370
|
+
* Property type: string
|
|
371
|
+
*/
|
|
372
|
+
get theme() {
|
|
373
|
+
return this.nativeElement ? this.nativeElement.theme : undefined;
|
|
374
|
+
}
|
|
375
|
+
set theme(value) {
|
|
376
|
+
if (this.nativeElement) {
|
|
377
|
+
this.nativeElement.theme = value;
|
|
378
|
+
}
|
|
379
|
+
}
|
|
380
|
+
/** Sets or gets the position of the thumb label.
|
|
381
|
+
* Property type: Position | string
|
|
382
|
+
*/
|
|
383
|
+
get thumbLabelPosition() {
|
|
384
|
+
return this.nativeElement ? this.nativeElement.thumbLabelPosition : undefined;
|
|
385
|
+
}
|
|
386
|
+
set thumbLabelPosition(value) {
|
|
387
|
+
if (this.nativeElement) {
|
|
388
|
+
this.nativeElement.thumbLabelPosition = value;
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
/** Sets or gets the position of the ticks in jqxTank widget.
|
|
392
|
+
* Property type: TicksPosition | string
|
|
393
|
+
*/
|
|
394
|
+
get ticksPosition() {
|
|
395
|
+
return this.nativeElement ? this.nativeElement.ticksPosition : undefined;
|
|
396
|
+
}
|
|
397
|
+
set ticksPosition(value) {
|
|
398
|
+
if (this.nativeElement) {
|
|
399
|
+
this.nativeElement.ticksPosition = value;
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
|
+
/** Sets or gets the visibility of the ticks.
|
|
403
|
+
* Property type: TicksVisibility | string
|
|
404
|
+
*/
|
|
405
|
+
get ticksVisibility() {
|
|
406
|
+
return this.nativeElement ? this.nativeElement.ticksVisibility : undefined;
|
|
407
|
+
}
|
|
408
|
+
set ticksVisibility(value) {
|
|
409
|
+
if (this.nativeElement) {
|
|
410
|
+
this.nativeElement.ticksVisibility = value;
|
|
411
|
+
}
|
|
412
|
+
}
|
|
413
|
+
/** Sets or gets the position of the tooltip in jqxTank widget.
|
|
414
|
+
* Property type: Position | string
|
|
415
|
+
*/
|
|
416
|
+
get tooltipPosition() {
|
|
417
|
+
return this.nativeElement ? this.nativeElement.tooltipPosition : undefined;
|
|
418
|
+
}
|
|
419
|
+
set tooltipPosition(value) {
|
|
420
|
+
if (this.nativeElement) {
|
|
421
|
+
this.nativeElement.tooltipPosition = value;
|
|
422
|
+
}
|
|
423
|
+
}
|
|
424
|
+
/** Sets or gets if the element can be focused.
|
|
425
|
+
* Property type: boolean
|
|
426
|
+
*/
|
|
427
|
+
get unfocusable() {
|
|
428
|
+
return this.nativeElement ? this.nativeElement.unfocusable : undefined;
|
|
429
|
+
}
|
|
430
|
+
set unfocusable(value) {
|
|
431
|
+
if (this.nativeElement) {
|
|
432
|
+
this.nativeElement.unfocusable = value;
|
|
433
|
+
}
|
|
434
|
+
}
|
|
435
|
+
/** Sets or gets the name of unit used in jqxTank widget.
|
|
436
|
+
* Property type: string
|
|
437
|
+
*/
|
|
438
|
+
get unit() {
|
|
439
|
+
return this.nativeElement ? this.nativeElement.unit : undefined;
|
|
440
|
+
}
|
|
441
|
+
set unit(value) {
|
|
442
|
+
if (this.nativeElement) {
|
|
443
|
+
this.nativeElement.unit = value;
|
|
444
|
+
}
|
|
445
|
+
}
|
|
446
|
+
/** Sets the value's validation by min/max. If 'strict' is applied, the value is always validated by min and max. If 'interaction' is applied, programmatic value changes are not coerced to min/max and if min/max are changed, resulting in the current value being out of range, the value is not coerced, and no change event is fired.
|
|
447
|
+
* Property type: Validation | string
|
|
448
|
+
*/
|
|
449
|
+
get validation() {
|
|
450
|
+
return this.nativeElement ? this.nativeElement.validation : undefined;
|
|
451
|
+
}
|
|
452
|
+
set validation(value) {
|
|
453
|
+
if (this.nativeElement) {
|
|
454
|
+
this.nativeElement.validation = value;
|
|
455
|
+
}
|
|
456
|
+
}
|
|
457
|
+
/** Sets or gets the value of the jqxTank widget.
|
|
458
|
+
* Property type: any
|
|
459
|
+
*/
|
|
460
|
+
get value() {
|
|
461
|
+
return this.nativeElement ? this.nativeElement.value : undefined;
|
|
462
|
+
}
|
|
463
|
+
set value(value) {
|
|
464
|
+
if (this.nativeElement) {
|
|
465
|
+
this.nativeElement.value = value;
|
|
466
|
+
}
|
|
467
|
+
}
|
|
468
|
+
/** Sets or gets the word length. Applicable only when scaleType is 'integer'.
|
|
469
|
+
* Property type: WordLength | string
|
|
470
|
+
*/
|
|
471
|
+
get wordLength() {
|
|
472
|
+
return this.nativeElement ? this.nativeElement.wordLength : undefined;
|
|
473
|
+
}
|
|
474
|
+
set wordLength(value) {
|
|
475
|
+
if (this.nativeElement) {
|
|
476
|
+
this.nativeElement.wordLength = value;
|
|
477
|
+
}
|
|
478
|
+
}
|
|
479
|
+
// Gets the properties of the React component.
|
|
480
|
+
get properties() {
|
|
481
|
+
return ["animation", "coerce", "customInterval", "customTicks", "dateLabelFormatString", "decimalSeparator", "disabled", "interval", "inverted", "labelFormatFunction", "labelsVisibility", "locale", "localizeFormatFunction", "logarithmicScale", "max", "mechanicalAction", "messages", "min", "mode", "name", "orientation", "precisionDigits", "readonly", "rightToLeft", "scalePosition", "scaleType", "scientificNotation", "showThumbLabel", "showTooltip", "showUnit", "significantDigits", "theme", "thumbLabelPosition", "ticksPosition", "ticksVisibility", "tooltipPosition", "unfocusable", "unit", "validation", "value", "wordLength"];
|
|
482
|
+
}
|
|
483
|
+
// Gets the events of the React component.
|
|
484
|
+
get eventListeners() {
|
|
485
|
+
return ["onChange", "onCreate", "onReady"];
|
|
486
|
+
}
|
|
487
|
+
/** Focuses the tank.
|
|
488
|
+
*/
|
|
489
|
+
focus() {
|
|
490
|
+
if (this.nativeElement.isRendered) {
|
|
491
|
+
this.nativeElement.focus();
|
|
492
|
+
}
|
|
493
|
+
else {
|
|
494
|
+
this.nativeElement.whenRendered(() => {
|
|
495
|
+
this.nativeElement.focus();
|
|
496
|
+
});
|
|
497
|
+
}
|
|
498
|
+
}
|
|
499
|
+
/** Gets the optimal size of the widget.
|
|
500
|
+
* @returns {any}
|
|
501
|
+
*/
|
|
502
|
+
getOptimalSize() {
|
|
503
|
+
const result = this.nativeElement.getOptimalSize();
|
|
504
|
+
return result;
|
|
505
|
+
}
|
|
506
|
+
/** Get/set the value of the tank.
|
|
507
|
+
* @param {string | number} value?. The value to be set. If no parameter is passed, returns the displayed value of the tank.
|
|
508
|
+
* @returns {string}
|
|
509
|
+
*/
|
|
510
|
+
val(value) {
|
|
511
|
+
const result = this.nativeElement.val(value);
|
|
512
|
+
return result;
|
|
513
|
+
}
|
|
514
|
+
componentDidRender(initialize) {
|
|
515
|
+
const that = this;
|
|
516
|
+
const props = {};
|
|
517
|
+
const events = {};
|
|
518
|
+
let styles = null;
|
|
519
|
+
for (let prop in that.props) {
|
|
520
|
+
if (prop === 'children') {
|
|
521
|
+
continue;
|
|
522
|
+
}
|
|
523
|
+
if (prop === 'style') {
|
|
524
|
+
styles = that.props[prop];
|
|
525
|
+
continue;
|
|
526
|
+
}
|
|
527
|
+
if (prop.startsWith('on') && that.properties.indexOf(prop) === -1) {
|
|
528
|
+
events[prop] = that.props[prop];
|
|
529
|
+
continue;
|
|
530
|
+
}
|
|
531
|
+
props[prop] = that.props[prop];
|
|
532
|
+
}
|
|
533
|
+
if (initialize) {
|
|
534
|
+
that.nativeElement = this.componentRef.current;
|
|
535
|
+
}
|
|
536
|
+
for (let prop in props) {
|
|
537
|
+
if (prop === 'class' || prop === 'className') {
|
|
538
|
+
const classNames = props[prop].trim().split(' ');
|
|
539
|
+
for (let className in classNames) {
|
|
540
|
+
if (!that.nativeElement.classList.contains(classNames[className]) && classNames[className] !== "") {
|
|
541
|
+
that.nativeElement.classList.add(classNames[className]);
|
|
542
|
+
}
|
|
543
|
+
}
|
|
544
|
+
continue;
|
|
545
|
+
}
|
|
546
|
+
if (props[prop] !== that.nativeElement[prop]) {
|
|
547
|
+
const normalizeProp = (str) => {
|
|
548
|
+
return str.replace(/-([a-z])/g, function (g) {
|
|
549
|
+
return g[1].toUpperCase();
|
|
550
|
+
});
|
|
551
|
+
};
|
|
552
|
+
if (prop === 'hover' || prop === 'active' || prop === 'focus' || prop === 'selected') {
|
|
553
|
+
that.nativeElement.setAttribute(prop, '');
|
|
554
|
+
}
|
|
555
|
+
const normalizedProp = normalizeProp(prop);
|
|
556
|
+
that.nativeElement[normalizedProp] = props[prop];
|
|
557
|
+
}
|
|
558
|
+
}
|
|
559
|
+
for (let eventName in events) {
|
|
560
|
+
that[eventName] = events[eventName];
|
|
561
|
+
that.nativeElement[eventName.toLowerCase()] = events[eventName];
|
|
562
|
+
}
|
|
563
|
+
if (initialize) {
|
|
564
|
+
Smart.Render();
|
|
565
|
+
if (that.onCreate) {
|
|
566
|
+
that.onCreate();
|
|
567
|
+
}
|
|
568
|
+
that.nativeElement.whenRendered(() => {
|
|
569
|
+
if (that.onReady) {
|
|
570
|
+
that.onReady();
|
|
571
|
+
}
|
|
572
|
+
});
|
|
573
|
+
}
|
|
574
|
+
// setup styles.
|
|
575
|
+
if (styles) {
|
|
576
|
+
for (let styleName in styles) {
|
|
577
|
+
that.nativeElement.style[styleName] = styles[styleName];
|
|
578
|
+
}
|
|
579
|
+
}
|
|
580
|
+
}
|
|
581
|
+
componentDidMount() {
|
|
582
|
+
this.componentDidRender(true);
|
|
583
|
+
}
|
|
584
|
+
componentDidUpdate() {
|
|
585
|
+
this.componentDidRender(false);
|
|
586
|
+
}
|
|
587
|
+
componentWillUnmount() {
|
|
588
|
+
const that = this;
|
|
589
|
+
if (!that.nativeElement) {
|
|
590
|
+
return;
|
|
591
|
+
}
|
|
592
|
+
that.nativeElement.whenRenderedCallbacks = [];
|
|
593
|
+
for (let i = 0; i < that.eventListeners.length; i++) {
|
|
594
|
+
const eventName = that.eventListeners[i];
|
|
595
|
+
that.nativeElement.removeEventListener(eventName.substring(2).toLowerCase(), that[eventName]);
|
|
596
|
+
}
|
|
597
|
+
}
|
|
598
|
+
render() {
|
|
599
|
+
return (React.createElement("smart-tank", { ref: this.componentRef }, this.props.children));
|
|
600
|
+
}
|
|
601
|
+
}
|
|
36
602
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
*/
|
|
41
|
-
class Tank extends React.Component {
|
|
42
|
-
constructor(props) {
|
|
43
|
-
super(props);
|
|
44
|
-
this.componentRef = React.createRef();
|
|
45
|
-
}
|
|
46
|
-
// Gets the id of the React component.
|
|
47
|
-
get id() {
|
|
48
|
-
if (!this._id) {
|
|
49
|
-
this._id = 'Tank' + Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
|
|
50
|
-
}
|
|
51
|
-
return this._id;
|
|
52
|
-
}
|
|
53
|
-
/** Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
|
|
54
|
-
* Property type: Animation | string
|
|
55
|
-
*/
|
|
56
|
-
get animation() {
|
|
57
|
-
return this.nativeElement ? this.nativeElement.animation : undefined;
|
|
58
|
-
}
|
|
59
|
-
set animation(value) {
|
|
60
|
-
if (this.nativeElement) {
|
|
61
|
-
this.nativeElement.animation = value;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
/** If is set to true all values coerce to the interval, set in the interval property.
|
|
65
|
-
* Property type: boolean
|
|
66
|
-
*/
|
|
67
|
-
get coerce() {
|
|
68
|
-
return this.nativeElement ? this.nativeElement.coerce : undefined;
|
|
69
|
-
}
|
|
70
|
-
set coerce(value) {
|
|
71
|
-
if (this.nativeElement) {
|
|
72
|
-
this.nativeElement.coerce = value;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
/** Sets or gets whether custom ticks at (possibly) uneven interval will be plotted. The ticks to be plotted are defined with the property customTicks.
|
|
76
|
-
* Property type: boolean
|
|
77
|
-
*/
|
|
78
|
-
get customInterval() {
|
|
79
|
-
return this.nativeElement ? this.nativeElement.customInterval : undefined;
|
|
80
|
-
}
|
|
81
|
-
set customInterval(value) {
|
|
82
|
-
if (this.nativeElement) {
|
|
83
|
-
this.nativeElement.customInterval = value;
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
/** If customInterval is enabled, sets a list of ticks to be plotted. If coerce is set to true, the value will snap to these ticks.
|
|
87
|
-
* Property type: number[]
|
|
88
|
-
*/
|
|
89
|
-
get customTicks() {
|
|
90
|
-
return this.nativeElement ? this.nativeElement.customTicks : undefined;
|
|
91
|
-
}
|
|
92
|
-
set customTicks(value) {
|
|
93
|
-
if (this.nativeElement) {
|
|
94
|
-
this.nativeElement.customTicks = value;
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
/** Sets or gets the pattern which labels are displayed in when mode is 'date'.
|
|
98
|
-
* Property type: string
|
|
99
|
-
*/
|
|
100
|
-
get dateLabelFormatString() {
|
|
101
|
-
return this.nativeElement ? this.nativeElement.dateLabelFormatString : undefined;
|
|
102
|
-
}
|
|
103
|
-
set dateLabelFormatString(value) {
|
|
104
|
-
if (this.nativeElement) {
|
|
105
|
-
this.nativeElement.dateLabelFormatString = value;
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
/** Sets or gets the char to use as the decimal separator in numeric values.
|
|
109
|
-
* Property type: string
|
|
110
|
-
*/
|
|
111
|
-
get decimalSeparator() {
|
|
112
|
-
return this.nativeElement ? this.nativeElement.decimalSeparator : undefined;
|
|
113
|
-
}
|
|
114
|
-
set decimalSeparator(value) {
|
|
115
|
-
if (this.nativeElement) {
|
|
116
|
-
this.nativeElement.decimalSeparator = value;
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
/** Enables or disables the widget.
|
|
120
|
-
* Property type: boolean
|
|
121
|
-
*/
|
|
122
|
-
get disabled() {
|
|
123
|
-
return this.nativeElement ? this.nativeElement.disabled : undefined;
|
|
124
|
-
}
|
|
125
|
-
set disabled(value) {
|
|
126
|
-
if (this.nativeElement) {
|
|
127
|
-
this.nativeElement.disabled = value;
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
/** When cooerce property is true, all values coerce to the interval's value.
|
|
131
|
-
* Property type: string | number
|
|
132
|
-
*/
|
|
133
|
-
get interval() {
|
|
134
|
-
return this.nativeElement ? this.nativeElement.interval : undefined;
|
|
135
|
-
}
|
|
136
|
-
set interval(value) {
|
|
137
|
-
if (this.nativeElement) {
|
|
138
|
-
this.nativeElement.interval = value;
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
/** Sets the direction of the tank. If is true - positions of the tank's begin and end are changed.
|
|
142
|
-
* Property type: boolean
|
|
143
|
-
*/
|
|
144
|
-
get inverted() {
|
|
145
|
-
return this.nativeElement ? this.nativeElement.inverted : undefined;
|
|
146
|
-
}
|
|
147
|
-
set inverted(value) {
|
|
148
|
-
if (this.nativeElement) {
|
|
149
|
-
this.nativeElement.inverted = value;
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
/** A callback function that can be used to format the values displayed on the tank labels.
|
|
153
|
-
* Property type: any
|
|
154
|
-
*/
|
|
155
|
-
get labelFormatFunction() {
|
|
156
|
-
return this.nativeElement ? this.nativeElement.labelFormatFunction : undefined;
|
|
157
|
-
}
|
|
158
|
-
set labelFormatFunction(value) {
|
|
159
|
-
if (this.nativeElement) {
|
|
160
|
-
this.nativeElement.labelFormatFunction = value;
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
/** Sets or gets the widget's label visibility
|
|
164
|
-
* Property type: LabelsVisibility | string
|
|
165
|
-
*/
|
|
166
|
-
get labelsVisibility() {
|
|
167
|
-
return this.nativeElement ? this.nativeElement.labelsVisibility : undefined;
|
|
168
|
-
}
|
|
169
|
-
set labelsVisibility(value) {
|
|
170
|
-
if (this.nativeElement) {
|
|
171
|
-
this.nativeElement.labelsVisibility = value;
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
/** Sets or gets the locale. Used in conjunction with the property messages.
|
|
175
|
-
* Property type: string
|
|
176
|
-
*/
|
|
177
|
-
get locale() {
|
|
178
|
-
return this.nativeElement ? this.nativeElement.locale : undefined;
|
|
179
|
-
}
|
|
180
|
-
set locale(value) {
|
|
181
|
-
if (this.nativeElement) {
|
|
182
|
-
this.nativeElement.locale = value;
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
/** Callback, related to localization module.
|
|
186
|
-
* Property type: any
|
|
187
|
-
*/
|
|
188
|
-
get localizeFormatFunction() {
|
|
189
|
-
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
|
|
190
|
-
}
|
|
191
|
-
set localizeFormatFunction(value) {
|
|
192
|
-
if (this.nativeElement) {
|
|
193
|
-
this.nativeElement.localizeFormatFunction = value;
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
/** Enables or disables the usage of logarithmic scale in the widget.
|
|
197
|
-
* Property type: boolean
|
|
198
|
-
*/
|
|
199
|
-
get logarithmicScale() {
|
|
200
|
-
return this.nativeElement ? this.nativeElement.logarithmicScale : undefined;
|
|
201
|
-
}
|
|
202
|
-
set logarithmicScale(value) {
|
|
203
|
-
if (this.nativeElement) {
|
|
204
|
-
this.nativeElement.logarithmicScale = value;
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
/** Sets or gets the maximum value of the widget.
|
|
208
|
-
* Property type: string | number
|
|
209
|
-
*/
|
|
210
|
-
get max() {
|
|
211
|
-
return this.nativeElement ? this.nativeElement.max : undefined;
|
|
212
|
-
}
|
|
213
|
-
set max(value) {
|
|
214
|
-
if (this.nativeElement) {
|
|
215
|
-
this.nativeElement.max = value;
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
/** Sets or gets the type of used mechanical action.
|
|
219
|
-
* Property type: DragMechanicalAction | string
|
|
220
|
-
*/
|
|
221
|
-
get mechanicalAction() {
|
|
222
|
-
return this.nativeElement ? this.nativeElement.mechanicalAction : undefined;
|
|
223
|
-
}
|
|
224
|
-
set mechanicalAction(value) {
|
|
225
|
-
if (this.nativeElement) {
|
|
226
|
-
this.nativeElement.mechanicalAction = value;
|
|
227
|
-
}
|
|
228
|
-
}
|
|
229
|
-
/** Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
|
|
230
|
-
* Property type: any
|
|
231
|
-
*/
|
|
232
|
-
get messages() {
|
|
233
|
-
return this.nativeElement ? this.nativeElement.messages : undefined;
|
|
234
|
-
}
|
|
235
|
-
set messages(value) {
|
|
236
|
-
if (this.nativeElement) {
|
|
237
|
-
this.nativeElement.messages = value;
|
|
238
|
-
}
|
|
239
|
-
}
|
|
240
|
-
/** Sets or gets the minimum value of the widget.
|
|
241
|
-
* Property type: string | number
|
|
242
|
-
*/
|
|
243
|
-
get min() {
|
|
244
|
-
return this.nativeElement ? this.nativeElement.min : undefined;
|
|
245
|
-
}
|
|
246
|
-
set min(value) {
|
|
247
|
-
if (this.nativeElement) {
|
|
248
|
-
this.nativeElement.min = value;
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
/** Sets or gets whether the widget works with numbers or dates.
|
|
252
|
-
* Property type: ScaleMode | string
|
|
253
|
-
*/
|
|
254
|
-
get mode() {
|
|
255
|
-
return this.nativeElement ? this.nativeElement.mode : undefined;
|
|
256
|
-
}
|
|
257
|
-
set mode(value) {
|
|
258
|
-
if (this.nativeElement) {
|
|
259
|
-
this.nativeElement.mode = value;
|
|
260
|
-
}
|
|
261
|
-
}
|
|
262
|
-
/** Sets or gets the element's name, which is used as a reference when the data is submitted.
|
|
263
|
-
* Property type: string
|
|
264
|
-
*/
|
|
265
|
-
get name() {
|
|
266
|
-
return this.nativeElement ? this.nativeElement.name : undefined;
|
|
267
|
-
}
|
|
268
|
-
set name(value) {
|
|
269
|
-
if (this.nativeElement) {
|
|
270
|
-
this.nativeElement.name = value;
|
|
271
|
-
}
|
|
272
|
-
}
|
|
273
|
-
/** Sets the orientation of the widget
|
|
274
|
-
* Property type: Orientation | string
|
|
275
|
-
*/
|
|
276
|
-
get orientation() {
|
|
277
|
-
return this.nativeElement ? this.nativeElement.orientation : undefined;
|
|
278
|
-
}
|
|
279
|
-
set orientation(value) {
|
|
280
|
-
if (this.nativeElement) {
|
|
281
|
-
this.nativeElement.orientation = value;
|
|
282
|
-
}
|
|
283
|
-
}
|
|
284
|
-
/** Determines the number of digits after the decimal point. Applicable only when scaleType is 'integer'.
|
|
285
|
-
* Property type: number
|
|
286
|
-
*/
|
|
287
|
-
get precisionDigits() {
|
|
288
|
-
return this.nativeElement ? this.nativeElement.precisionDigits : undefined;
|
|
289
|
-
}
|
|
290
|
-
set precisionDigits(value) {
|
|
291
|
-
if (this.nativeElement) {
|
|
292
|
-
this.nativeElement.precisionDigits = value;
|
|
293
|
-
}
|
|
294
|
-
}
|
|
295
|
-
/** If the widgets is readonly, the users cannot iteract with the element.
|
|
296
|
-
* Property type: boolean
|
|
297
|
-
*/
|
|
298
|
-
get readonly() {
|
|
299
|
-
return this.nativeElement ? this.nativeElement.readonly : undefined;
|
|
300
|
-
}
|
|
301
|
-
set readonly(value) {
|
|
302
|
-
if (this.nativeElement) {
|
|
303
|
-
this.nativeElement.readonly = value;
|
|
304
|
-
}
|
|
305
|
-
}
|
|
306
|
-
/** Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
|
|
307
|
-
* Property type: boolean
|
|
308
|
-
*/
|
|
309
|
-
get rightToLeft() {
|
|
310
|
-
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
|
|
311
|
-
}
|
|
312
|
-
set rightToLeft(value) {
|
|
313
|
-
if (this.nativeElement) {
|
|
314
|
-
this.nativeElement.rightToLeft = value;
|
|
315
|
-
}
|
|
316
|
-
}
|
|
317
|
-
/** Sets the position of the widget's scales.
|
|
318
|
-
* Property type: ScalePosition | string
|
|
319
|
-
*/
|
|
320
|
-
get scalePosition() {
|
|
321
|
-
return this.nativeElement ? this.nativeElement.scalePosition : undefined;
|
|
322
|
-
}
|
|
323
|
-
set scalePosition(value) {
|
|
324
|
-
if (this.nativeElement) {
|
|
325
|
-
this.nativeElement.scalePosition = value;
|
|
326
|
-
}
|
|
327
|
-
}
|
|
328
|
-
/** Sets the type of the tank's scale.
|
|
329
|
-
* Property type: ScaleType | string
|
|
330
|
-
*/
|
|
331
|
-
get scaleType() {
|
|
332
|
-
return this.nativeElement ? this.nativeElement.scaleType : undefined;
|
|
333
|
-
}
|
|
334
|
-
set scaleType(value) {
|
|
335
|
-
if (this.nativeElement) {
|
|
336
|
-
this.nativeElement.scaleType = value;
|
|
337
|
-
}
|
|
338
|
-
}
|
|
339
|
-
/** Enables or disables scientific notation.
|
|
340
|
-
* Property type: boolean
|
|
341
|
-
*/
|
|
342
|
-
get scientificNotation() {
|
|
343
|
-
return this.nativeElement ? this.nativeElement.scientificNotation : undefined;
|
|
344
|
-
}
|
|
345
|
-
set scientificNotation(value) {
|
|
346
|
-
if (this.nativeElement) {
|
|
347
|
-
this.nativeElement.scientificNotation = value;
|
|
348
|
-
}
|
|
349
|
-
}
|
|
350
|
-
/** Enables or disables displaying of the thumb label.
|
|
351
|
-
* Property type: boolean
|
|
352
|
-
*/
|
|
353
|
-
get showThumbLabel() {
|
|
354
|
-
return this.nativeElement ? this.nativeElement.showThumbLabel : undefined;
|
|
355
|
-
}
|
|
356
|
-
set showThumbLabel(value) {
|
|
357
|
-
if (this.nativeElement) {
|
|
358
|
-
this.nativeElement.showThumbLabel = value;
|
|
359
|
-
}
|
|
360
|
-
}
|
|
361
|
-
/** Enables or disables displaying of the tooltip.
|
|
362
|
-
* Property type: boolean
|
|
363
|
-
*/
|
|
364
|
-
get showTooltip() {
|
|
365
|
-
return this.nativeElement ? this.nativeElement.showTooltip : undefined;
|
|
366
|
-
}
|
|
367
|
-
set showTooltip(value) {
|
|
368
|
-
if (this.nativeElement) {
|
|
369
|
-
this.nativeElement.showTooltip = value;
|
|
370
|
-
}
|
|
371
|
-
}
|
|
372
|
-
/** Enables or disables displaying of the units.
|
|
373
|
-
* Property type: boolean
|
|
374
|
-
*/
|
|
375
|
-
get showUnit() {
|
|
376
|
-
return this.nativeElement ? this.nativeElement.showUnit : undefined;
|
|
377
|
-
}
|
|
378
|
-
set showUnit(value) {
|
|
379
|
-
if (this.nativeElement) {
|
|
380
|
-
this.nativeElement.showUnit = value;
|
|
381
|
-
}
|
|
382
|
-
}
|
|
383
|
-
/** Determining how many significant digits are in a number. Applicable only when scaleType is 'integer'.
|
|
384
|
-
* Property type: number
|
|
385
|
-
*/
|
|
386
|
-
get significantDigits() {
|
|
387
|
-
return this.nativeElement ? this.nativeElement.significantDigits : undefined;
|
|
388
|
-
}
|
|
389
|
-
set significantDigits(value) {
|
|
390
|
-
if (this.nativeElement) {
|
|
391
|
-
this.nativeElement.significantDigits = value;
|
|
392
|
-
}
|
|
393
|
-
}
|
|
394
|
-
/** Sets or gets the element's visual theme.
|
|
395
|
-
* Property type: string
|
|
396
|
-
*/
|
|
397
|
-
get theme() {
|
|
398
|
-
return this.nativeElement ? this.nativeElement.theme : undefined;
|
|
399
|
-
}
|
|
400
|
-
set theme(value) {
|
|
401
|
-
if (this.nativeElement) {
|
|
402
|
-
this.nativeElement.theme = value;
|
|
403
|
-
}
|
|
404
|
-
}
|
|
405
|
-
/** Sets or gets the position of the thumb label.
|
|
406
|
-
* Property type: Position | string
|
|
407
|
-
*/
|
|
408
|
-
get thumbLabelPosition() {
|
|
409
|
-
return this.nativeElement ? this.nativeElement.thumbLabelPosition : undefined;
|
|
410
|
-
}
|
|
411
|
-
set thumbLabelPosition(value) {
|
|
412
|
-
if (this.nativeElement) {
|
|
413
|
-
this.nativeElement.thumbLabelPosition = value;
|
|
414
|
-
}
|
|
415
|
-
}
|
|
416
|
-
/** Sets or gets the position of the ticks in jqxTank widget.
|
|
417
|
-
* Property type: TicksPosition | string
|
|
418
|
-
*/
|
|
419
|
-
get ticksPosition() {
|
|
420
|
-
return this.nativeElement ? this.nativeElement.ticksPosition : undefined;
|
|
421
|
-
}
|
|
422
|
-
set ticksPosition(value) {
|
|
423
|
-
if (this.nativeElement) {
|
|
424
|
-
this.nativeElement.ticksPosition = value;
|
|
425
|
-
}
|
|
426
|
-
}
|
|
427
|
-
/** Sets or gets the visibility of the ticks.
|
|
428
|
-
* Property type: TicksVisibility | string
|
|
429
|
-
*/
|
|
430
|
-
get ticksVisibility() {
|
|
431
|
-
return this.nativeElement ? this.nativeElement.ticksVisibility : undefined;
|
|
432
|
-
}
|
|
433
|
-
set ticksVisibility(value) {
|
|
434
|
-
if (this.nativeElement) {
|
|
435
|
-
this.nativeElement.ticksVisibility = value;
|
|
436
|
-
}
|
|
437
|
-
}
|
|
438
|
-
/** Sets or gets the position of the tooltip in jqxTank widget.
|
|
439
|
-
* Property type: Position | string
|
|
440
|
-
*/
|
|
441
|
-
get tooltipPosition() {
|
|
442
|
-
return this.nativeElement ? this.nativeElement.tooltipPosition : undefined;
|
|
443
|
-
}
|
|
444
|
-
set tooltipPosition(value) {
|
|
445
|
-
if (this.nativeElement) {
|
|
446
|
-
this.nativeElement.tooltipPosition = value;
|
|
447
|
-
}
|
|
448
|
-
}
|
|
449
|
-
/** Sets or gets if the element can be focused.
|
|
450
|
-
* Property type: boolean
|
|
451
|
-
*/
|
|
452
|
-
get unfocusable() {
|
|
453
|
-
return this.nativeElement ? this.nativeElement.unfocusable : undefined;
|
|
454
|
-
}
|
|
455
|
-
set unfocusable(value) {
|
|
456
|
-
if (this.nativeElement) {
|
|
457
|
-
this.nativeElement.unfocusable = value;
|
|
458
|
-
}
|
|
459
|
-
}
|
|
460
|
-
/** Sets or gets the name of unit used in jqxTank widget.
|
|
461
|
-
* Property type: string
|
|
462
|
-
*/
|
|
463
|
-
get unit() {
|
|
464
|
-
return this.nativeElement ? this.nativeElement.unit : undefined;
|
|
465
|
-
}
|
|
466
|
-
set unit(value) {
|
|
467
|
-
if (this.nativeElement) {
|
|
468
|
-
this.nativeElement.unit = value;
|
|
469
|
-
}
|
|
470
|
-
}
|
|
471
|
-
/** Sets the value's validation by min/max. If 'strict' is applied, the value is always validated by min and max. If 'interaction' is applied, programmatic value changes are not coerced to min/max and if min/max are changed, resulting in the current value being out of range, the value is not coerced, and no change event is fired.
|
|
472
|
-
* Property type: Validation | string
|
|
473
|
-
*/
|
|
474
|
-
get validation() {
|
|
475
|
-
return this.nativeElement ? this.nativeElement.validation : undefined;
|
|
476
|
-
}
|
|
477
|
-
set validation(value) {
|
|
478
|
-
if (this.nativeElement) {
|
|
479
|
-
this.nativeElement.validation = value;
|
|
480
|
-
}
|
|
481
|
-
}
|
|
482
|
-
/** Sets or gets the value of the jqxTank widget.
|
|
483
|
-
* Property type: any
|
|
484
|
-
*/
|
|
485
|
-
get value() {
|
|
486
|
-
return this.nativeElement ? this.nativeElement.value : undefined;
|
|
487
|
-
}
|
|
488
|
-
set value(value) {
|
|
489
|
-
if (this.nativeElement) {
|
|
490
|
-
this.nativeElement.value = value;
|
|
491
|
-
}
|
|
492
|
-
}
|
|
493
|
-
/** Sets or gets the word length. Applicable only when scaleType is 'integer'.
|
|
494
|
-
* Property type: WordLength | string
|
|
495
|
-
*/
|
|
496
|
-
get wordLength() {
|
|
497
|
-
return this.nativeElement ? this.nativeElement.wordLength : undefined;
|
|
498
|
-
}
|
|
499
|
-
set wordLength(value) {
|
|
500
|
-
if (this.nativeElement) {
|
|
501
|
-
this.nativeElement.wordLength = value;
|
|
502
|
-
}
|
|
503
|
-
}
|
|
504
|
-
// Gets the properties of the React component.
|
|
505
|
-
get properties() {
|
|
506
|
-
return ["animation", "coerce", "customInterval", "customTicks", "dateLabelFormatString", "decimalSeparator", "disabled", "interval", "inverted", "labelFormatFunction", "labelsVisibility", "locale", "localizeFormatFunction", "logarithmicScale", "max", "mechanicalAction", "messages", "min", "mode", "name", "orientation", "precisionDigits", "readonly", "rightToLeft", "scalePosition", "scaleType", "scientificNotation", "showThumbLabel", "showTooltip", "showUnit", "significantDigits", "theme", "thumbLabelPosition", "ticksPosition", "ticksVisibility", "tooltipPosition", "unfocusable", "unit", "validation", "value", "wordLength"];
|
|
507
|
-
}
|
|
508
|
-
// Gets the events of the React component.
|
|
509
|
-
get eventListeners() {
|
|
510
|
-
return ["onChange", "onCreate", "onReady"];
|
|
511
|
-
}
|
|
512
|
-
/** Focuses the tank.
|
|
513
|
-
*/
|
|
514
|
-
focus() {
|
|
515
|
-
if (this.nativeElement.isRendered) {
|
|
516
|
-
this.nativeElement.focus();
|
|
517
|
-
}
|
|
518
|
-
else {
|
|
519
|
-
this.nativeElement.whenRendered(() => {
|
|
520
|
-
this.nativeElement.focus();
|
|
521
|
-
});
|
|
522
|
-
}
|
|
523
|
-
}
|
|
524
|
-
/** Gets the optimal size of the widget.
|
|
525
|
-
* @returns {any}
|
|
526
|
-
*/
|
|
527
|
-
getOptimalSize() {
|
|
528
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
529
|
-
const getResultOnRender = () => {
|
|
530
|
-
return new Promise(resolve => {
|
|
531
|
-
this.nativeElement.whenRendered(() => {
|
|
532
|
-
const result = this.nativeElement.getOptimalSize();
|
|
533
|
-
resolve(result);
|
|
534
|
-
});
|
|
535
|
-
});
|
|
536
|
-
};
|
|
537
|
-
const result = yield getResultOnRender();
|
|
538
|
-
return result;
|
|
539
|
-
});
|
|
540
|
-
}
|
|
541
|
-
/** Get/set the value of the tank.
|
|
542
|
-
* @param {string | number} value?. The value to be set. If no parameter is passed, returns the displayed value of the tank.
|
|
543
|
-
* @returns {string}
|
|
544
|
-
*/
|
|
545
|
-
val(value) {
|
|
546
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
547
|
-
const getResultOnRender = () => {
|
|
548
|
-
return new Promise(resolve => {
|
|
549
|
-
this.nativeElement.whenRendered(() => {
|
|
550
|
-
const result = this.nativeElement.val(value);
|
|
551
|
-
resolve(result);
|
|
552
|
-
});
|
|
553
|
-
});
|
|
554
|
-
};
|
|
555
|
-
const result = yield getResultOnRender();
|
|
556
|
-
return result;
|
|
557
|
-
});
|
|
558
|
-
}
|
|
559
|
-
componentDidRender(initialize) {
|
|
560
|
-
const that = this;
|
|
561
|
-
const props = {};
|
|
562
|
-
const events = {};
|
|
563
|
-
let styles = null;
|
|
564
|
-
for (let prop in that.props) {
|
|
565
|
-
if (prop === 'children') {
|
|
566
|
-
continue;
|
|
567
|
-
}
|
|
568
|
-
if (prop === 'style') {
|
|
569
|
-
styles = that.props[prop];
|
|
570
|
-
continue;
|
|
571
|
-
}
|
|
572
|
-
if (prop.startsWith('on') && that.properties.indexOf(prop) === -1) {
|
|
573
|
-
events[prop] = that.props[prop];
|
|
574
|
-
continue;
|
|
575
|
-
}
|
|
576
|
-
props[prop] = that.props[prop];
|
|
577
|
-
}
|
|
578
|
-
if (initialize) {
|
|
579
|
-
that.nativeElement = this.componentRef.current;
|
|
580
|
-
}
|
|
581
|
-
for (let prop in props) {
|
|
582
|
-
if (prop === 'class' || prop === 'className') {
|
|
583
|
-
const classNames = props[prop].trim().split(' ');
|
|
584
|
-
for (let className in classNames) {
|
|
585
|
-
if (!that.nativeElement.classList.contains(classNames[className]) && classNames[className] !== "") {
|
|
586
|
-
that.nativeElement.classList.add(classNames[className]);
|
|
587
|
-
}
|
|
588
|
-
}
|
|
589
|
-
continue;
|
|
590
|
-
}
|
|
591
|
-
if (props[prop] !== that.nativeElement[prop]) {
|
|
592
|
-
const normalizeProp = (str) => {
|
|
593
|
-
return str.replace(/-([a-z])/g, function (g) {
|
|
594
|
-
return g[1].toUpperCase();
|
|
595
|
-
});
|
|
596
|
-
};
|
|
597
|
-
if (prop === 'hover' || prop === 'active' || prop === 'focus' || prop === 'selected') {
|
|
598
|
-
that.nativeElement.setAttribute(prop, '');
|
|
599
|
-
}
|
|
600
|
-
const normalizedProp = normalizeProp(prop);
|
|
601
|
-
that.nativeElement[normalizedProp] = props[prop];
|
|
602
|
-
}
|
|
603
|
-
}
|
|
604
|
-
for (let eventName in events) {
|
|
605
|
-
that[eventName] = events[eventName];
|
|
606
|
-
that.nativeElement[eventName.toLowerCase()] = events[eventName];
|
|
607
|
-
}
|
|
608
|
-
if (initialize) {
|
|
609
|
-
Smart.Render();
|
|
610
|
-
if (that.onCreate) {
|
|
611
|
-
that.onCreate();
|
|
612
|
-
}
|
|
613
|
-
that.nativeElement.whenRendered(() => {
|
|
614
|
-
if (that.onReady) {
|
|
615
|
-
that.onReady();
|
|
616
|
-
}
|
|
617
|
-
});
|
|
618
|
-
}
|
|
619
|
-
// setup styles.
|
|
620
|
-
if (styles) {
|
|
621
|
-
for (let styleName in styles) {
|
|
622
|
-
that.nativeElement.style[styleName] = styles[styleName];
|
|
623
|
-
}
|
|
624
|
-
}
|
|
625
|
-
}
|
|
626
|
-
componentDidMount() {
|
|
627
|
-
this.componentDidRender(true);
|
|
628
|
-
}
|
|
629
|
-
componentDidUpdate() {
|
|
630
|
-
this.componentDidRender(false);
|
|
631
|
-
}
|
|
632
|
-
componentWillUnmount() {
|
|
633
|
-
const that = this;
|
|
634
|
-
if (!that.nativeElement) {
|
|
635
|
-
return;
|
|
636
|
-
}
|
|
637
|
-
that.nativeElement.whenRenderedCallbacks = [];
|
|
638
|
-
for (let i = 0; i < that.eventListeners.length; i++) {
|
|
639
|
-
const eventName = that.eventListeners[i];
|
|
640
|
-
that.nativeElement.removeEventListener(eventName.substring(2).toLowerCase(), that[eventName]);
|
|
641
|
-
}
|
|
642
|
-
}
|
|
643
|
-
render() {
|
|
644
|
-
return (React.createElement("smart-tank", { ref: this.componentRef }, this.props.children));
|
|
645
|
-
}
|
|
646
|
-
}
|
|
603
|
+
exports.Smart = Smart;
|
|
604
|
+
exports.Tank = Tank;
|
|
605
|
+
exports.default = Tank;
|
|
647
606
|
|
|
648
|
-
|
|
649
|
-
exports.Tank = Tank;
|
|
650
|
-
exports.default = Tank;
|
|
651
|
-
|
|
652
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
607
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
653
608
|
|
|
654
609
|
})));
|