KERNEL-14083 refactor: widget/downlist、singleslider、intervalslider es6化

src/case/calendar/calendar.js

@@ -139,8 +139,8 @@ export class Calendar extends Widget {
                 rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 8,
             }))],
         });
-        this.days.on(Controller.EVENT_CHANGE, () => {
+        this.days.on(Controller.EVENT_CHANGE, (...args) => {
-            this.fireEvent(Controller.EVENT_CHANGE, arguments);
+            this.fireEvent(Controller.EVENT_CHANGE, ...args);
         });
         createWidget(extend({
             element: this,

src/case/layer/panel.js

@@ -50,8 +50,8 @@ export class Panel extends Widget {
             }],
         });
 
-        this.button_group.on(Controller.EVENT_CHANGE, () => {
+        this.button_group.on(Controller.EVENT_CHANGE, (...args) => {
-            this.fireEvent(Controller.EVENT_CHANGE, ...arguments);
+            this.fireEvent(Controller.EVENT_CHANGE, ...args);
         });
 
         this.button_group.on(ButtonGroup.EVENT_CHANGE, (value, obj) => {

src/case/list/list.select.js

@@ -55,13 +55,14 @@ export class SelectList extends Widget {
         // 全选
         this.toolbar = createWidget(o.toolbar);
         this.allSelected = false;
-        this.toolbar.on(Controller.EVENT_CHANGE, (type, value, obj) => {
+        this.toolbar.on(Controller.EVENT_CHANGE, (...args) => {
+            const [type, value, obj] = args;
             this.allSelected = this.toolbar.isSelected();
             if (type === Events.CLICK) {
                 this.setAllSelected(this.allSelected);
                 this.fireEvent(SelectList.EVENT_CHANGE, value, obj);
             }
-            this.fireEvent(Controller.EVENT_CHANGE, arguments);
+            this.fireEvent(Controller.EVENT_CHANGE, ...args);
         });
 
         this.list = createWidget(o.el, {
@@ -84,12 +85,13 @@ export class SelectList extends Widget {
             hasNext: o.hasNext,
         });
 
-        this.list.on(Controller.EVENT_CHANGE, (type, value, obj) => {
+        this.list.on(Controller.EVENT_CHANGE, (...args) => {
+            const [type, value, obj] = args;
             if (type === Events.CLICK) {
                 this._checkAllSelected();
                 this.fireEvent(SelectList.EVENT_CHANGE, value, obj);
             }
-            this.fireEvent(Controller.EVENT_CHANGE, arguments);
+            this.fireEvent(Controller.EVENT_CHANGE, ...args);
         });
 
         createWidget(extend({

src/core/wrapper/layout/flex/flex.vertical.js

@@ -12,7 +12,6 @@ import { Layout } from "../../layout";
 @shortcut()
 export class FlexVerticalLayout extends Layout {
     static xtype = "bi.flex_vertical";
-
     props() {
         return extend(super.props(...arguments), {
             baseCls: "bi-f-v",

src/widget/downlist/combo.downlist.js

@@ -1,143 +1,155 @@
-(function() {
+import { shortcut, Widget, extend, createWidget, cloneDeep, some, isArray, each } from "@/core";
-    function transformItems(items) {
+import { DownListPopup } from "./popup.downlist";
-        if (!items) return items;
+import { Combo } from "@/base";
-        var result = BI.cloneDeep(items);
+import { IconTrigger } from "@/case";
-        var isComplexItmes = BI.some(items, function (_, item) {
+
-            return BI.isArray(item);
+
+function transformItems(items) {
+    if (!items) return items;
+    let result = cloneDeep(items);
+    const isComplexItmes = some(items, (_, item) => isArray(item));
+    // 传一维数组，帮转二维
+    if (!isComplexItmes) {
+        result = [result];
+    }
+    // 帮转 el
+    each(result, (_, arr) => {
+        each(arr, (_, item) => {
+            if (item.children && !item.el) {
+                item.el = {
+                    text: item.text,
+                    icon: item.icon,
+                    cls: item.cls,
+                    iconCls1: item.iconCls1,
+                    value: item.value,
+                };
+            }
         });
-        // 传一维数组，帮转二维
+    });
-        if (!isComplexItmes) {
+    
-            result = [result];
+    return result;
-        }
+}
-        // 帮转 el
+
-        BI.each(result, function (_, arr) {
+@shortcut()
-            BI.each(arr, function (_, item) {
+export class DownListCombo extends Widget {
-                if (item.children && !item.el) {
+    static xtype = "bi.down_list_combo";
-                    item.el = {
+
-                        text: item.text,
+    static EVENT_CHANGE = "EVENT_CHANGE";
-                        icon: item.icon,
+    static EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE";
-                        cls: item.cls,
+    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
-                        iconCls1: item.iconCls1,
+
-                        value: item.value
+    _defaultConfig() {
-                    };
+        return extend(super._defaultConfig(...arguments), {
-                }
+            baseCls: "bi-down-list-combo",
-            });
+            height: 24,
+            items: [],
+            adjustLength: 0,
+            direction: "bottom",
+            trigger: "click",
+            container: null,
+            stopPropagation: false,
+            el: {},
+            popup: {},
+            minWidth: 140,
+            maxHeight: 1000,
+            destroyWhenHide: false,
+            isDefaultInit: true,
         });
-        return result;
     }
 
-    /**
+    _init() {
-     * Created by roy on 15/8/14.
+        super._init(...arguments);
-     */
+        const o = this.options;
-    BI.DownListCombo = BI.inherit(BI.Widget, {
-        _defaultConfig: function () {
-            return BI.extend(BI.DownListCombo.superclass._defaultConfig.apply(this, arguments), {
-                baseCls: "bi-down-list-combo",
-                height: 24,
-                items: [],
-                adjustLength: 0,
-                direction: "bottom",
-                trigger: "click",
-                container: null,
-                stopPropagation: false,
-                el: {},
-                popup: {},
-                minWidth: 140,
-                maxHeight: 1000,
-                destroyWhenHide: false,
-                isDefaultInit: true,
-            });
-        },
 
-        _init: function () {
+        this.downlistcombo = createWidget({
-            BI.DownListCombo.superclass._init.apply(this, arguments);
+            element: this,
-            var self = this, o = this.options;
+            type: Combo.xtype,
-
+            trigger: o.trigger,
-            this.downlistcombo = BI.createWidget({
+            isNeedAdjustWidth: false,
-                element: this,
+            isDefaultInit: o.isDefaultInit,
-                type: "bi.combo",
+            container: o.container,
-                trigger: o.trigger,
+            adjustLength: o.adjustLength,
-                isNeedAdjustWidth: false,
+            direction: o.direction,
-                isDefaultInit: o.isDefaultInit,
+            belowMouse: o.belowMouse,
-                container: o.container,
+            stopPropagation: o.stopPropagation,
-                adjustLength: o.adjustLength,
+            destroyWhenHide: o.destroyWhenHide,
-                direction: o.direction,
+            el: {
-                belowMouse: o.belowMouse,
+                type: IconTrigger.xtype,
-                stopPropagation: o.stopPropagation,
+                extraCls: o.iconCls,
-                destroyWhenHide: o.destroyWhenHide,
+                width: o.width,
+                height: o.height,
+                ...o.el,
+            },
+            popup: {
                 el: {
-                    type: "bi.icon_trigger",
+                    type: DownListPopup.xtype,
-                    extraCls: o.iconCls,
+                    ref: _ref => {
-                    width: o.width,
+                        this.popupView = _ref;
-                    height: o.height,
-                    ...o.el
-                },
-                popup: {
-                    el: {
-                        type: "bi.down_list_popup",
-                        ref: function (ref) {
-                            self.popupView = ref;
-                        },
-                        items: transformItems(o.items),
-                        chooseType: o.chooseType,
-                        value: o.value,
-                        listeners: [{
-                            eventName: BI.DownListPopup.EVENT_CHANGE,
-                            action: function (value) {
-                                self.fireEvent(BI.DownListCombo.EVENT_CHANGE, value);
-                                self.downlistcombo.hideView();
-                            }
-                        }, {
-                            eventName: BI.DownListPopup.EVENT_SON_VALUE_CHANGE,
-                            action: function (value, fatherValue) {
-                                self.fireEvent(BI.DownListCombo.EVENT_SON_VALUE_CHANGE, value, fatherValue);
-                                self.downlistcombo.hideView();
-                            }
-                        }]
                     },
-                    stopPropagation: o.stopPropagation,
+                    items: transformItems(o.items),
-                    maxHeight: o.maxHeight,
+                    chooseType: o.chooseType,
-                    minWidth: o.minWidth,
+                    value: o.value,
-                    ...o.popup
+                    listeners: [
-                }
+                        {
-            });
+                            eventName: DownListPopup.EVENT_CHANGE,
-
+                            action: value => {
-            this.downlistcombo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () {
+                                this.fireEvent(
-                self.fireEvent(BI.DownListCombo.EVENT_BEFORE_POPUPVIEW);
+                                    DownListCombo.EVENT_CHANGE,
-            });
+                                    value
-        },
+                                );
+                                this.downlistcombo.hideView();
+                            },
+                        },
+                        {
+                            eventName: DownListPopup.EVENT_SON_VALUE_CHANGE,
+                            action: (value, fatherValue) => {
+                                this.fireEvent(
+                                    DownListCombo.EVENT_SON_VALUE_CHANGE,
+                                    value,
+                                    fatherValue
+                                );
+                                this.downlistcombo.hideView();
+                            },
+                        }
+                    ],
+                },
+                stopPropagation: o.stopPropagation,
+                maxHeight: o.maxHeight,
+                minWidth: o.minWidth,
+                ...o.popup,
+            },
+        });
 
-        hideView: function () {
+        this.downlistcombo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => {
-            this.downlistcombo.hideView();
+            this.fireEvent(DownListCombo.EVENT_BEFORE_POPUPVIEW);
-        },
+        });
+    }
 
-        showView: function (e) {
+    hideView() {
-            this.downlistcombo.showView(e);
+        this.downlistcombo.hideView();
-        },
+    }
 
-        populate: function (items) {
+    showView(e) {
-            this.popupView.populate(items);
+        this.downlistcombo.showView(e);
-        },
+    }
 
-        setValue: function (v) {
+    populate(items) {
-            this.popupView.setValue(v);
+        this.popupView.populate(items);
-        },
+    }
 
-        getValue: function () {
+    setValue(v) {
-            return this.popupView.getValue();
+        this.popupView.setValue(v);
-        },
+    }
 
-        adjustWidth: function () {
+    getValue() {
-            this.downlistcombo.adjustWidth();
+        return this.popupView.getValue();
-        },
+    }
 
-        adjustHeight: function () {
+    adjustWidth() {
-            this.downlistcombo.adjustHeight();
+        this.downlistcombo.adjustWidth();
-        }
+    }
-    });
-    BI.DownListCombo.EVENT_CHANGE = "EVENT_CHANGE";
-    BI.DownListCombo.EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE";
-    BI.DownListCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
 
-    BI.shortcut("bi.down_list_combo", BI.DownListCombo);
+    adjustHeight() {
-}());
+        this.downlistcombo.adjustHeight();
+    }
+}

src/widget/downlist/group.downlist.js

@@ -1,51 +1,62 @@
-/**
+import {
- * Created by roy on 15/9/6.
+    shortcut,
- */
+    Widget,
-BI.DownListGroup = BI.inherit(BI.Widget, {
+    extend,
-    constants: {
+    createWidget,
-        iconCls: "check-mark-ha-font"
+    Controller,
-    },
+    Events
-    _defaultConfig: function () {
+} from "@/core";
-        return BI.extend(BI.DownListGroup.superclass._defaultConfig.apply(this, arguments), {
+
-            baseCls: "bi-down-list-group",
+@shortcut()
-            items: [
+export class DownListGroup extends Widget {
-                {
+  static xtype = "bi.down_list_group";
-                    el: {}
+
-                }
+  constants = { iconCls: "check-mark-ha-font" };
-            ]
+
-        });
+  static EVENT_CHANGE = "EVENT_CHANGE";
-    },
+
-    _init: function () {
+  _defaultConfig() {
-        BI.DownListGroup.superclass._init.apply(this, arguments);
+      return extend(super._defaultConfig(...arguments), {
-        var o = this.options, self = this;
+          baseCls: "bi-down-list-group",
-
+          items: [
-        this.downlistgroup = BI.createWidget({
+              {
-            element: this,
+                  el: {},
-            type: "bi.button_tree",
+              }
-            items: o.items,
+          ],
-            chooseType: 0, // 0单选，1多选
+      });
-            layouts: [{
+  }
-                type: "bi.vertical",
+
-                hgap: 0,
+  _init() {
-                vgap: 0
+      super._init(...arguments);
-            }],
+      const o = this.options;
-            value: o.value
+
-        });
+      this.downlistgroup = createWidget({
-        this.downlistgroup.on(BI.Controller.EVENT_CHANGE, function (type) {
+          element: this,
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+          type: "bi.button_tree",
-            if(type === BI.Events.CLICK) {
+          items: o.items,
-                self.fireEvent(BI.DownListGroup.EVENT_CHANGE, arguments);
+          chooseType: 0, // 0单选，1多选
-            }
+          layouts: [
-        });
+              {
-    },
+                  type: "bi.vertical",
-    getValue: function () {
+                  hgap: 0,
-        return this.downlistgroup.getValue();
+                  vgap: 0,
-    },
+              }
-    setValue: function (v) {
+          ],
-        this.downlistgroup.setValue(v);
+          value: o.value,
-    }
+      });
-
+      this.downlistgroup.on(Controller.EVENT_CHANGE, (type, ...args) => {
-
+          this.fireEvent(Controller.EVENT_CHANGE, type, ...args);
-});
+          if (type === Events.CLICK) {
-BI.DownListGroup.EVENT_CHANGE = "EVENT_CHANGE";
+              this.fireEvent(DownListGroup.EVENT_CHANGE, type, ...args);
-BI.shortcut("bi.down_list_group", BI.DownListGroup);
+          }
+      });
+  }
+
+  getValue() {
+      return this.downlistgroup.getValue();
+  }
+
+  setValue(v) {
+      this.downlistgroup.setValue(v);
+  }
+}

src/widget/downlist/index.js

@@ -0,0 +1,5 @@
+export { DownListGroup } from "./group.downlist";
+export { DownListItem } from "./item.downlist";
+export { DownListGroupItem } from "./item.downlistgroup";
+export { DownListPopup } from "./popup.downlist";
+export { DownListCombo } from "./combo.downlist";

src/widget/downlist/item.downlist.js

@@ -1,102 +1,125 @@
-BI.DownListItem = BI.inherit(BI.BasicButton, {
+import { shortcut, extend, createWidget, isPlainObject, LogicFactory, Direction } from "@/core";
-    _defaultConfig: function () {
+import { BasicButton } from "@/base";
-        var conf = BI.DownListItem.superclass._defaultConfig.apply(this, arguments);
+
-        return BI.extend(conf, {
+@shortcut()
-            baseCls: "bi-down-list-item bi-list-item-active",
+export class DownListItem extends BasicButton {
-            cls: "",
+  static xtype = "bi.down_list_item";
-            height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
+
-            logic: {
+  static EVENT_CHANGE = "EVENT_CHANGE";
-                dynamic: true
+
-            },
+  _defaultConfig() {
-            selected: false,
+      const conf = super._defaultConfig(...arguments);
-            iconHeight: null,
+      
-            iconWidth: null,
+      return extend(conf, {
-            textHgap: 0,
+          baseCls: "bi-down-list-item bi-list-item-active",
-            textVgap: 0,
+          cls: "",
-            textLgap: 0,
+          height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
-            textRgap: 0
+          logic: {
-        });
+              dynamic: true,
-    },
+          },
-    _init: function () {
+          selected: false,
-        BI.DownListItem.superclass._init.apply(this, arguments);
+          iconHeight: null,
-        var self = this, o = this.options;
+          iconWidth: null,
-        this.text = BI.createWidget({
+          textHgap: 0,
-            type: "bi.label",
+          textVgap: 0,
-            cls: "list-item-text",
+          textLgap: 0,
-            textAlign: "left",
+          textRgap: 0,
-            hgap: o.textHgap,
+      });
-            vgap: o.textVgap,
+  }
-            lgap: o.textLgap,
+
-            rgap: o.textRgap,
+  _init() {
-            text: o.text,
+      super._init(...arguments);
-            value: o.value,
+      const o = this.options;
-            keyword: o.keyword,
+      this.text = createWidget({
-            height: o.height
+          type: "bi.label",
-        });
+          cls: "list-item-text",
-
+          textAlign: "left",
-
+          hgap: o.textHgap,
-        var icon = BI.isPlainObject(o.icon) ? o.icon : {
+          vgap: o.textVgap,
-            type: "bi.icon",
+          lgap: o.textLgap,
-            width: o.iconWidth,
+          rgap: o.textRgap,
-            height: o.iconHeight,
+          text: o.text,
-        }
+          value: o.value,
-
+          keyword: o.keyword,
-        this.icon = BI.createWidget({
+          height: o.height,
-            type: "bi.center_adapt",
+      });
-            width: 36,
+
-            height: o.height,
+      const icon = isPlainObject(o.icon)
-            items: [{
+          ? o.icon
-                el: icon,
+          : {
-            }],
+              type: "bi.icon",
-        });
+              width: o.iconWidth,
-
+              height: o.iconHeight,
-        BI.createWidget(BI.extend({
+          };
-            element: this
+
-        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left), BI.extend(o.logic, {
+      this.icon = createWidget({
-            items: BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, this.icon, this.text)
+          type: "bi.center_adapt",
-        }))));
+          width: 36,
-    },
+          height: o.height,
-
+          items: [
-    setValue: function () {
+              {
-        if (!this.isReadOnly()) {
+                  el: icon,
-            this.text.setValue.apply(this.text, arguments);
+              }
-        }
+          ],
-    },
+      });
-
+
-    getValue: function () {
+      createWidget(
-        return this.text.getValue();
+          extend(
-    },
+              {
-
+                  element: this,
-    setText: function () {
+              },
-        this.text.setText.apply(this.text, arguments);
+              LogicFactory.createLogic(
-    },
+                  LogicFactory.createLogicTypeByDirection(Direction.Left),
-
+                  extend(o.logic, {
-    getText: function () {
+                      items: LogicFactory.createLogicItemsByDirection(
-        return this.text.getText();
+                          Direction.Left,
-    },
+                          this.icon,
-
+                          this.text
-    doClick: function () {
+                      ),
-        BI.DownListItem.superclass.doClick.apply(this, arguments);
+                  })
-        if (this.isValid()) {
+              )
-            this.fireEvent(BI.DownListItem.EVENT_CHANGE, this.getValue(), this);
+          )
-        }
+      );
-    },
+  }
-
+
-    doRedMark: function () {
+  setValue() {
-        this.text.doRedMark.apply(this.text, arguments);
+      if (!this.isReadOnly()) {
-    },
+          this.text.setValue(...arguments);
-
+      }
-    unRedMark: function () {
+  }
-        this.text.unRedMark.apply(this.text, arguments);
+
-    },
+  getValue() {
-
+      return this.text.getValue();
-    doHighLight: function () {
+  }
-        this.text.doHighLight.apply(this.text, arguments);
+
-    },
+  setText() {
-
+      this.text.setText(...arguments);
-    unHighLight: function () {
+  }
-        this.text.unHighLight.apply(this.text, arguments);
+
-    }
+  getText() {
-});
+      return this.text.getText();
-BI.DownListItem.EVENT_CHANGE = "EVENT_CHANGE";
+  }
-BI.shortcut("bi.down_list_item", BI.DownListItem);
+
+  doClick() {
+      super.doClick(...arguments);
+      if (this.isValid()) {
+          this.fireEvent(DownListItem.EVENT_CHANGE, this.getValue(), this);
+      }
+  }
+
+  doRedMark() {
+      this.text.doRedMark(...arguments);
+  }
+
+  unRedMark() {
+      this.text.unRedMark(...arguments);
+  }
+
+  doHighLight() {
+      this.text.doHighLight(...arguments);
+  }
+
+  unHighLight() {
+      this.text.unHighLight(...arguments);
+  }
+}

src/widget/downlist/item.downlistgroup.js

@@ -1,118 +1,141 @@
-BI.DownListGroupItem = BI.inherit(BI.BasicButton, {
+import {
-    _defaultConfig: function () {
+    shortcut,
-        var conf = BI.DownListGroupItem.superclass._defaultConfig.apply(this, arguments);
+    extend,
-        return BI.extend(conf, {
+    createWidget,
-            baseCls: (conf.baseCls || "") + " bi-down-list-group-item",
+    isNotNull,
-            logic: {
+    isArray,
-                dynamic: false
+    any,
-            },
+    contains,
-            // invalid: true,
+    isPlainObject,
-            iconCls1: "dot-e-font",
+    first,
-            icon: "",
+    BlankSplitChar
-            iconCls2: "pull-right-e-font"
+} from "@/core";
-        });
+import { BasicButton } from "@/base";
-    },
+
-    render: function () {
+@shortcut()
-        var o = this.options;
+export class DownListGroupItem extends BasicButton {
-        var self = this;
+  static xtype = "bi.down_list_group_item";
-        this.text = BI.createWidget({
+
-            type: "bi.label",
+  static EVENT_CHANGE = "EVENT_CHANGE";
-            cls: "list-group-item-text",
+
-            textAlign: "left",
+  _defaultConfig() {
-            text: o.text,
+      const conf = super._defaultConfig(...arguments);
-            value: o.value,
+      
-            height: o.height,
+      return extend(conf, {
-        });
+          baseCls: `${conf.baseCls || ""} bi-down-list-group-item`,
-
+          logic: {
-        if (BI.isPlainObject(o.icon)) {
+              dynamic: false,
-            this.icon1 = BI.createWidget({
+          },
-                width: 36,
+          // invalid: true,
-                height: o.height,
+          iconCls1: "dot-e-font",
-                type: "bi.center_adapt",
+          icon: "",
-                items: [o.icon],
+          iconCls2: "pull-right-e-font",
-            });
+      });
-        } else {
+  }
-            this.icon1 = BI.createWidget({
+
-                type: "bi.icon_button",
+  render() {
-                cls: o.iconCls1,
+      const o = this.options;
-                width: 36,
+      this.text = createWidget({
-                height: o.height,
+          type: "bi.label",
-                iconHeight: o.iconHeight,
+          cls: "list-group-item-text",
-                iconWidth: 36,
+          textAlign: "left",
-                disableSelected: true,
+          text: o.text,
-                selected: this._digest(o.value),
+          value: o.value,
-            });
+          height: o.height,
-        }
+      });
-
+
-        this.icon2 = BI.createWidget({
+      if (isPlainObject(o.icon)) {
-            type: "bi.icon_button",
+          this.icon1 = createWidget({
-            cls: o.iconCls2,
+              width: 36,
-            width: 24,
+              height: o.height,
-            forceNotSelected: true
+              type: "bi.center_adapt",
-        });
+              items: [o.icon],
-
+          });
-        this.element.hover(function () {
+      } else {
-            if (self.isEnabled()) {
+          this.icon1 = createWidget({
-                self.hover();
+              type: "bi.icon_button",
-            }
+              cls: o.iconCls1,
-        }, function () {
+              width: 36,
-            if (self.isEnabled()) {
+              height: o.height,
-                self.dishover();
+              iconHeight: o.iconHeight,
-            }
+              iconWidth: 36,
-        });
+              disableSelected: true,
-
+              selected: this._digest(o.value),
-        return {
+          });
-            type: "bi.horizontal_fill",
+      }
-            columnSize: [36,  "fill", 24],
+
-            items: [this.icon1, this.text, this.icon2]
+      this.icon2 = createWidget({
-        }
+          type: "bi.icon_button",
-    },
+          cls: o.iconCls2,
-
+          width: 24,
-    _getLevel: function () {
+          forceNotSelected: true,
-        var child = BI.first(this.options.childValues);
+      });
-        return BI.isNotNull(child) ? (child + "").split(BI.BlankSplitChar).length : 0;
+
-    },
+      this.element.hover(
-
+          () => {
-    _digest: function (v) {
+              if (this.isEnabled()) {
-        var self = this, o = this.options;
+                  this.hover();
-        v = BI.isArray(v) ? v : [v];
+              }
-        var level = this._getLevel();
+          },
-        return BI.any(v, function (idx, value) {
+          () => {
-            return BI.contains(o.childValues, (value + "").split(BI.BlankSplitChar).slice(0, level).join(BI.BlankSplitChar));
+              if (this.isEnabled()) {
-        });
+                  this.dishover();
-    },
+              }
-
+          }
-    hover: function () {
+      );
-        BI.DownListGroupItem.superclass.hover.apply(this, arguments);
+
-        this.icon1.element.addClass("hover");
+      return {
-        this.icon2.element.addClass("hover");
+          type: "bi.horizontal_fill",
-
+          columnSize: [36, "fill", 24],
-    },
+          items: [this.icon1, this.text, this.icon2],
-
+      };
-    dishover: function () {
+  }
-        BI.DownListGroupItem.superclass.dishover.apply(this, arguments);
+
-        this.icon1.element.removeClass("hover");
+  _getLevel() {
-        this.icon2.element.removeClass("hover");
+      const child = first(this.options.childValues);
-    },
+      
-
+      return isNotNull(child) ? (`${child}`).split(BlankSplitChar).length : 0;
-    doClick: function () {
+  }
-        BI.DownListGroupItem.superclass.doClick.apply(this, arguments);
+
-        if (this.isValid()) {
+  _digest(v) {
-            this.fireEvent(BI.DownListGroupItem.EVENT_CHANGE, this.getValue());
+      const o = this.options;
-        }
+      v = isArray(v) ? v : [v];
-    },
+      const level = this._getLevel();
-
+      
-    doRedMark: function () {
+      return any(v, (idx, value) => contains(
-        this.text.doRedMark.apply(this.text, arguments);
+          o.childValues,
-    },
+          (`${value}`).split(BlankSplitChar).slice(0, level).join(BlankSplitChar)
-
+      ));
-    unRedMark: function () {
+  }
-        this.text.unRedMark.apply(this.text, arguments);
+
-    },
+  hover() {
-
+      super.hover(...arguments);
-    setValue: function (v) {
+      this.icon1.element.addClass("hover");
-        this.icon1.setSelected && this.icon1.setSelected(this._digest(v));
+      this.icon2.element.addClass("hover");
-    },
+  }
-});
+
-BI.DownListGroupItem.EVENT_CHANGE = "EVENT_CHANGE";
+  dishover() {
-BI.shortcut("bi.down_list_group_item", BI.DownListGroupItem);
+      super.dishover(...arguments);
+      this.icon1.element.removeClass("hover");
+      this.icon2.element.removeClass("hover");
+  }
+
+  doClick() {
+      super.doClick(...arguments);
+      if (this.isValid()) {
+          this.fireEvent(DownListGroupItem.EVENT_CHANGE, this.getValue());
+      }
+  }
+
+  doRedMark() {
+      this.text.doRedMark(...arguments);
+  }
+
+  unRedMark() {
+      this.text.unRedMark(...arguments);
+  }
+
+  setValue(v) {
+      this.icon1.setSelected && this.icon1.setSelected(this._digest(v));
+  }
+}

src/widget/downlist/popup.downlist.js

@@ -1,301 +1,332 @@
-/**
+import {
- * Created by roy on 15/9/8.
+    shortcut,
- * 处理popup中的item分组样式
+    extend,
- * 一个item分组中的成员大于一时，该分组设置为单选，并且默认状态第一个成员设置为已选择项
+    createWidget,
- */
+    createItems,
-BI.DownListPopup = BI.inherit(BI.Pane, {
+    isNotNull,
-    constants: {
+    contains,
-        nextIcon: "pull-right-e-font",
+    each,
-        height: 24,
+    isEmpty,
-        iconHeight: 12,
+    map,
-        iconWidth: 12,
+    isNotEmptyString,
-        hgap: 0,
+    isNotEmptyArray,
-        vgap: 0,
+    some,
-        border: 1
+    deepClone
-    },
+} from "@/core";
-    _defaultConfig: function () {
+import { Pane, ButtonTree } from "@/base";
-        var conf = BI.DownListPopup.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: "bi-down-list-popup",
-            items: [],
-            chooseType: BI.Selection.Multi
-        });
-    },
-    _init: function () {
-        BI.DownListPopup.superclass._init.apply(this, arguments);
-        this.singleValues = [];
-        this.childValueMap = {};
-        this.fatherValueMap = {};
-        this.items = [];
-        var self = this, o = this.options, children = this._createPopupItems(o.items);
-        this.popup = BI.createWidget({
-            type: "bi.button_tree",
-            items: BI.createItems(children,
-                {}, {
-                    adjustLength: -2
-                }
-            ),
-            layouts: [{
-                type: "bi.vertical",
-                hgap: this.constants.hgap,
-                vgap: this.constants.vgap
-            }],
-            value: this._digest(o.value),
-            chooseType: o.chooseType
-        });
 
-        this.popup.on(BI.ButtonTree.EVENT_CHANGE, function (value, object) {
+@shortcut()
-            var changedValue = value;
+export class DownListPopup extends Pane {
-            if (BI.isNotNull(self.childValueMap[value])) {
+  static xtype = "bi.down_list_popup";
-                changedValue = self.childValueMap[value];
-                self.fireEvent(BI.DownListPopup.EVENT_SON_VALUE_CHANGE, changedValue, self.fatherValueMap[value]);
-            } else {
-                self.fireEvent(BI.DownListPopup.EVENT_CHANGE, changedValue, object);
-            }
 
+  constants = {
+      nextIcon: "pull-right-e-font",
+      height: 24,
+      iconHeight: 12,
+      iconWidth: 12,
+      hgap: 0,
+      vgap: 0,
+      border: 1,
+  };
 
-            if (!BI.contains(self.singleValues, changedValue)) {
+  static EVENT_CHANGE = "EVENT_CHANGE";
-                var item = self.getValue();
+  static EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE";
-                var result = [];
-                BI.each(item, function (i, valueObject) {
-                    if (valueObject.value != changedValue) {
-                        result.push(valueObject);
-                    }
-                });
-                self.setValue(result);
-            }
 
-        });
+  _defaultConfig() {
+      const conf = super._defaultConfig(...arguments);
+      
+      return extend(conf, {
+          baseCls: "bi-down-list-popup",
+          items: [],
+          chooseType: Selection.Multi,
+      });
+  }
 
-        BI.createWidget({
+  _init() {
-            type: "bi.vertical",
+      super._init(...arguments);
-            element: this,
+      this.singleValues = [];
-            items: [this.popup],
+      this.childValueMap = {};
-            vgap: 5
+      this.fatherValueMap = {};
-        });
+      this.items = [];
+      const o = this.options,
+          children = this._createPopupItems(o.items);
+      this.popup = createWidget({
+          type: "bi.button_tree",
+          items: createItems(
+              children,
+              {},
+              {
+                  adjustLength: -2,
+              }
+          ),
+          layouts: [
+              {
+                  type: "bi.vertical",
+                  hgap: this.constants.hgap,
+                  vgap: this.constants.vgap,
+              }
+          ],
+          value: this._digest(o.value),
+          chooseType: o.chooseType,
+      });
 
-    },
+      this.popup.on(ButtonTree.EVENT_CHANGE, (value, object) => {
-    _createPopupItems: function (items) {
+          let changedValue = value;
-        var self = this, result = [];
+          if (isNotNull(this.childValueMap[value])) {
-        // 不能修改populate进来的item的引用
+              changedValue = this.childValueMap[value];
-        BI.each(items, function (i, it) {
+              this.fireEvent(
-            var item_done = {
+                  DownListPopup.EVENT_SON_VALUE_CHANGE,
-                type: "bi.down_list_group",
+                  changedValue,
-                items: []
+                  this.fatherValueMap[value]
-            };
+              );
+          } else {
+              this.fireEvent(DownListPopup.EVENT_CHANGE, changedValue, object);
+          }
 
-            var storeItem = [];
+          if (!contains(this.singleValues, changedValue)) {
+              const item = this.getValue();
+              const result = [];
+              each(item, (i, valueObject) => {
+                  if (valueObject.value !== changedValue) {
+                      result.push(valueObject);
+                  }
+              });
+              this.setValue(result);
+          }
+      });
 
-            BI.each(it, function (i, sourceItem) {
+      createWidget({
-                var item = BI.extend({}, sourceItem);
+          type: "bi.vertical",
-                if (BI.isNotEmptyArray(sourceItem.children) && !BI.isEmpty(sourceItem.el)) {
+          element: this,
-                    item.type = "bi.combo_group";
+          items: [this.popup],
-                    // popup未初始化返回的是options中的value, 在经过buttontree的getValue concat之后，无法区分值来自options
+          vgap: 5,
-                    // 还是item自身, 这边控制defaultInit为true来避免这个问题
+      });
-                    item.isDefaultInit = true;
+  }
-                    item.cls = "down-list-group";
-                    item.trigger = "hover";
-                    item.isNeedAdjustWidth = false;
-                    item.el = sourceItem.el;
-                    item.el.title = sourceItem.el.title || sourceItem.el.text;
-                    item.el.type = "bi.down_list_group_item";
-                    item.el.logic = {
-                        dynamic: true
-                    };
-                    item.el.height = sourceItem.el.height || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT;
-                    item.el.iconCls2 = self.constants.nextIcon;
-                    item.popup = {
-                        lgap: 1,
-                        el: {
-                            type: "bi.button_tree",
-                            chooseType: 0,
-                            layouts: [{
-                                type: "bi.vertical"
-                            }]
 
-                        },
+  _createPopupItems(items) {
-                        innerVgap: 5,
+      const result = [];
-                        maxHeight: 378
+      // 不能修改populate进来的item的引用
-                    };
+      each(items, (i, it) => {
-                    self._createChildren(item, sourceItem);
+          const item_done = {
-                } else {
+              type: "bi.down_list_group",
-                    item.type = sourceItem.type || "bi.down_list_item";
+              items: [],
-                    item.title = sourceItem.title || sourceItem.text;
+          };
-                    item.textRgap = 10;
-                    item.isNeedAdjustWidth = false;
-                    item.logic = {
-                        dynamic: true
-                    };
-                }
-                var el_done = {};
-                el_done.el = item;
-                item_done.items.push(el_done);
-                storeItem.push(item);
-            });
-            if (self._isGroup(item_done.items)) {
-                BI.each(item_done.items, function (i, item) {
-                    self.singleValues.push(item.el.value);
-                });
-            }
 
-            result.push(item_done);
+          const storeItem = [];
-            self.items.push(storeItem);
-            if (self._needSpliter(i, items.length)) {
-                var spliter_container = BI.createWidget({
-                    type: "bi.vertical",
-                    items: [{
-                        el: {
-                            type: "bi.layout",
-                            cls: "bi-down-list-spliter bi-split-top cursor-pointer",
-                            height: 0
-                        }
 
-                    }],
+          each(it, (i, sourceItem) => {
-                    cls: "bi-down-list-spliter-container cursor-pointer",
+              const item = extend({}, sourceItem);
-                    vgap: 5,
+              if (isNotEmptyArray(sourceItem.children) && !isEmpty(sourceItem.el)) {
-                    hgap: 12
+                  item.type = "bi.combo_group";
-                });
+                  // popup未初始化返回的是options中的value, 在经过buttontree的getValue concat之后，无法区分值来自options
-                result.push(spliter_container);
+                  // 还是item自身, 这边控制defaultInit为true来避免这个问题
-            }
+                  item.isDefaultInit = true;
-        });
+                  item.cls = "down-list-group";
-        return result;
+                  item.trigger = "hover";
-    },
+                  item.isNeedAdjustWidth = false;
+                  item.el = sourceItem.el;
+                  item.el.title = sourceItem.el.title || sourceItem.el.text;
+                  item.el.type = "bi.down_list_group_item";
+                  item.el.logic = {
+                      dynamic: true,
+                  };
+                  item.el.height =
+            sourceItem.el.height || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT;
+                  item.el.iconCls2 = this.constants.nextIcon;
+                  item.popup = {
+                      lgap: 1,
+                      el: {
+                          type: "bi.button_tree",
+                          chooseType: 0,
+                          layouts: [
+                              {
+                                  type: "bi.vertical",
+                              }
+                          ],
+                      },
+                      innerVgap: 5,
+                      maxHeight: 378,
+                  };
+                  this._createChildren(item, sourceItem);
+              } else {
+                  item.type = sourceItem.type || "bi.down_list_item";
+                  item.title = sourceItem.title || sourceItem.text;
+                  item.textRgap = 10;
+                  item.isNeedAdjustWidth = false;
+                  item.logic = {
+                      dynamic: true,
+                  };
+              }
+              const el_done = {};
+              el_done.el = item;
+              item_done.items.push(el_done);
+              storeItem.push(item);
+          });
+          if (this._isGroup(item_done.items)) {
+              each(item_done.items, (i, item) => {
+                  this.singleValues.push(item.el.value);
+              });
+          }
 
-    _createChildren: function (targetItem, sourceItem) {
+          result.push(item_done);
-        var self = this;
+          this.items.push(storeItem);
-        targetItem.el.childValues = [];
+          if (this._needSpliter(i, items.length)) {
-        targetItem.items = targetItem.children = [];
+              const spliter_container = createWidget({
-        BI.each(sourceItem.children, function (i, child) {
+                  type: "bi.vertical",
-            var item = BI.extend({}, child);
+                  items: [
-            var fatherValue = BI.deepClone(targetItem.el.value);
+                      {
-            var childValue = BI.deepClone(item.value);
+                          el: {
-            self.singleValues.push(item.value);
+                              type: "bi.layout",
-            item.type = item.type || "bi.down_list_item";
+                              cls: "bi-down-list-spliter bi-split-top cursor-pointer",
-            item.extraCls = " child-down-list-item";
+                              height: 0,
-            item.title = item.title || item.text;
+                          },
-            item.textRgap = 10;
+                      }
-            item.isNeedAdjustWidth = false;
+                  ],
-            item.logic = {
+                  cls: "bi-down-list-spliter-container cursor-pointer",
-                dynamic: true
+                  vgap: 5,
-            };
+                  hgap: 12,
-            item.father = fatherValue;
+              });
-            item.childValue = item.value;
+              result.push(spliter_container);
-            self.fatherValueMap[self._createChildValue(fatherValue, childValue)] = fatherValue;
+          }
-            self.childValueMap[self._createChildValue(fatherValue, childValue)] = childValue;
+      });
-            item.value = self._createChildValue(fatherValue, childValue);
+      
-            targetItem.el.childValues.push(item.value);
+      return result;
-            targetItem.items.push(item);
+  }
-        });
-    },
 
-    _isGroup: function (i) {
+  _createChildren(targetItem, sourceItem) {
-        return i.length > 1;
+      targetItem.el.childValues = [];
-    },
+      targetItem.items = targetItem.children = [];
+      each(sourceItem.children, (i, child) => {
+          const item = extend({}, child);
+          const fatherValue = deepClone(targetItem.el.value);
+          const childValue = deepClone(item.value);
+          this.singleValues.push(item.value);
+          item.type = item.type || "bi.down_list_item";
+          item.extraCls = " child-down-list-item";
+          item.title = item.title || item.text;
+          item.textRgap = 10;
+          item.isNeedAdjustWidth = false;
+          item.logic = {
+              dynamic: true,
+          };
+          item.father = fatherValue;
+          item.childValue = item.value;
+          this.fatherValueMap[this._createChildValue(fatherValue, childValue)] =
+        fatherValue;
+          this.childValueMap[this._createChildValue(fatherValue, childValue)] =
+        childValue;
+          item.value = this._createChildValue(fatherValue, childValue);
+          targetItem.el.childValues.push(item.value);
+          targetItem.items.push(item);
+      });
+  }
 
-    _needSpliter: function (i, itemLength) {
+  _isGroup(i) {
-        return i < itemLength - 1;
+      return i.length > 1;
-    },
+  }
 
-    _createChildValue: function (fatherValue, childValue) {
+  _needSpliter(i, itemLength) {
-        return fatherValue + BI.BlankSplitChar + childValue;
+      return i < itemLength - 1;
-    },
+  }
 
-    _digest: function (valueItem) {
+  _createChildValue(fatherValue, childValue) {
-        var self = this;
+      return fatherValue + BI.BlankSplitChar + childValue;
-        var valueArray = [];
+  }
-        BI.each(valueItem, function (i, item) {
-                var value;
-                if (BI.isNotNull(item.childValue)) {
-                    value = self._createChildValue(item.value, item.childValue);
-                } else {
-                    value = item.value;
-                }
-                valueArray.push(value);
-            }
-        );
-        return valueArray;
-    },
 
-    _checkValues: function (values) {
+  _digest(valueItem) {
-        var value = [];
+      const valueArray = [];
-        BI.each(this.items, function (idx, itemGroup) {
+      each(valueItem, (i, item) => {
-            BI.each(itemGroup, function (id, item) {
+          let value;
-                if(BI.isNotNull(item.children)) {
+          if (isNotNull(item.childValue)) {
-                    var childValues = BI.map(item.children, "value");
+              value = this._createChildValue(item.value, item.childValue);
-                    var v = joinValue(childValues, values[idx]);
+          } else {
-                    if(BI.isNotEmptyString(v)) {
+              value = item.value;
-                        value.push(v);
+          }
-                    }
+          valueArray.push(value);
-                }else{
+      });
-                    if(item.value === values[idx][0]) {
+      
-                        value.push(values[idx][0]);
+      return valueArray;
-                    }
+  }
-                }
-            });
-        });
-        return value;
 
-        function joinValue (sources, targets) {
+  _checkValues(values) {
-            var value = "";
+      const value = [];
-            BI.some(sources, function (idx, s) {
+      each(this.items, (idx, itemGroup) => {
-                return BI.some(targets, function (id, t) {
+          each(itemGroup, (id, item) => {
-                    if(s === t) {
+              if (isNotNull(item.children)) {
-                        value = s;
+                  const childValues = map(item.children, "value");
-                        return true;
+                  const v = joinValue(childValues, values[idx]);
-                    }
+                  if (isNotEmptyString(v)) {
-                });
+                      value.push(v);
-            });
+                  }
-            return value;
+              } else {
-        }
+                  if (item.value === values[idx][0]) {
-    },
+                      value.push(values[idx][0]);
+                  }
+              }
+          });
+      });
+      
+      return value;
 
-    populate: function (items) {
+      function joinValue(sources, targets) {
-        BI.DownListPopup.superclass.populate.apply(this, arguments);
+          let value = "";
-        this.items = [];
+          some(sources, (idx, s) => some(targets, (id, t) => {
-        this.childValueMap = {};
+              if (s === t) {
-        this.fatherValueMap = {};
+                  value = s;
-        this.singleValues = [];
+                  
-        var children = this._createPopupItems(items);
+                  return true;
-        var popupItem = BI.createItems(children,
+              }
-            {}, {
+          }));
-                adjustLength: -2
+          
-            }
+          return value;
-        );
+      }
-        this.popup.populate(popupItem);
+  }
-    },
 
-    setValue: function (valueItem) {
+  populate(items) {
-        this.popup.setValue(this._digest(valueItem));
+      super.populate(...arguments);
-    },
+      this.items = [];
+      this.childValueMap = {};
+      this.fatherValueMap = {};
+      this.singleValues = [];
+      const children = this._createPopupItems(items);
+      const popupItem = createItems(
+          children,
+          {},
+          {
+              adjustLength: -2,
+          }
+      );
+      this.popup.populate(popupItem);
+  }
 
-    _getValue: function () {
+  setValue(valueItem) {
-        var v = [];
+      this.popup.setValue(this._digest(valueItem));
-        BI.each(this.popup.getAllButtons(), function (i, item) {
+  }
-            i % 2 === 0 && v.push(item.getValue());
-        });
-        return v;
-    },
 
-    getValue: function () {
+  _getValue() {
-        var self = this, result = [];
+      const v = [];
-        var values = this._checkValues(this._getValue());
+      each(this.popup.getAllButtons(), (i, item) => {
-        BI.each(values, function (i, value) {
+          i % 2 === 0 && v.push(item.getValue());
-            var valueItem = {};
+      });
-            if (BI.isNotNull(self.childValueMap[value])) {
+      
-                var fartherValue = self.fatherValueMap[value];
+      return v;
-                valueItem.childValue = self.childValueMap[value];
+  }
-                valueItem.value = fartherValue;
-            } else {
-                valueItem.value = value;
-            }
-            result.push(valueItem);
-        });
-        return result;
-    }
 
-
+  getValue() {
-});
+      const result = [];
-
+      const values = this._checkValues(this._getValue());
-BI.DownListPopup.EVENT_CHANGE = "EVENT_CHANGE";
+      each(values, (i, value) => {
-BI.DownListPopup.EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE";
+          const valueItem = {};
-BI.shortcut("bi.down_list_popup", BI.DownListPopup);
+          if (isNotNull(this.childValueMap[value])) {
+              const fartherValue = this.fatherValueMap[value];
+              valueItem.childValue = this.childValueMap[value];
+              valueItem.value = fartherValue;
+          } else {
+              valueItem.value = value;
+          }
+          result.push(valueItem);
+      });
+      
+      return result;
+  }
+}

src/widget/index.js

@@ -7,6 +7,9 @@ import * as datetimepane from "./datetimepane";
 import * as dynamicdatetime from "./dynamicdatetime";
 import * as time from "./time";
 import * as editor from "./editor";
+import * as downList from "./downlist";
+import * as singleSliderItem from "./singleslider";
+import * as intervalSliderItem from "./intervalslider";
 import { SelectTreeCombo } from "./selecttree/selecttree.combo";
 import { SingleTreeCombo } from "./singletree/singletree.combo";
 import { MultiTreeCombo } from "./multitree/multi.tree.combo";
@@ -27,6 +30,9 @@ Object.assign(BI, {
     ...dynamicdatetime,
     ...time,
     ...editor,
+    ...downList,
+    ...singleSliderItem,
+    ...intervalSliderItem,
     SelectTreeCombo,
     SingleTreeCombo,
     MultiTreeCombo,
@@ -48,6 +54,9 @@ export * from "./time";
 export * from "./editor";
 export * from "./multiselect";
 export * from "./multiselectlist";
+export * from "./downlist";
+export * from "./singleslider";
+export * from "./intervalslider";
 
 export {
     Collapse,

src/widget/intervalslider/index.js

@@ -0,0 +1,2 @@
+export { AccurateCalculationModel } from "./model.accuratecalculation";
+export { IntervalSlider } from "./intervalslider";

src/widget/intervalslider/intervalslider.js

@@ -1,30 +1,50 @@
-/**
+import {
- * Created by zcf on 2016/9/26.
+    shortcut,
- */
+    createWidget,
-BI.IntervalSlider = BI.inherit(BI.Single, {
+    toPix,
-    _constant: {
+    parseFloat,
+    Layout,
+    AbsoluteLayout,
+    clamp,
+    VerticalLayout,
+    isEmptyString,
+    isNumeric,
+    isNull,
+    isInteger,
+    i18nText,
+    size,
+    parseInt,
+    isNotEmptyString,
+    MouseMoveTracker
+} from "@/core";
+import { Single, Editor } from "@/base";
+import { AccurateCalculationModel } from "./model.accuratecalculation";
+import { SignTextEditor, SliderIconButton } from "../singleslider";
+
+@shortcut()
+export class IntervalSlider extends Single {
+    static xtype = "bi.interval_slider";
+    _constant = {
         EDITOR_WIDTH: 58,
         EDITOR_R_GAP: 60,
         EDITOR_HEIGHT: 20,
         SLIDER_WIDTH_HALF: 15,
         SLIDER_WIDTH: 30,
         SLIDER_HEIGHT: 30,
-        TRACK_HEIGHT: 24
+        TRACK_HEIGHT: 24,
-    },
+    }
-
+    props = {
-    props: {
         baseCls: "bi-interval-slider bi-slider-track",
         digit: false,
         unit: "",
         min: 0,
         max: 100,
-        value: {
+        value: { min: "", max: "" },
-            min: "",
+    };
-            max: "",
-        }
-    },
 
-    beforeMount: function () {
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    beforeMount() {
         const { value, min, max } = this.options;
         this._setMinAndMax({
             min,
@@ -32,90 +52,104 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
         });
         this.setValue(value);
         this.populate();
-    },
+    }
-
-    render: function () {
 
-        var self = this;
+    render() {
-        var c = this._constant;
+        const c = this._constant;
         this.enable = false;
         this.valueOne = "";
         this.valueTwo = "";
 
-        this.calculation = new BI.AccurateCalculationModel();
+        this.calculation = new AccurateCalculationModel();
-        this.grayTrack = BI.createWidget({
+        this.grayTrack = createWidget({
-            type: "bi.layout",
+            type: Layout.xtype,
             cls: "gray-track",
-            height: 6
+            height: 6,
         });
-        this.blueTrack = BI.createWidget({
+        this.blueTrack = createWidget({
-            type: "bi.layout",
+            type: Layout.xtype,
             cls: "blue-track bi-high-light-background",
-            height: 6
+            height: 6,
         });
         this.track = this._createTrackWrapper();
 
-        this.labelOne = BI.createWidget({
+        this.labelOne = createWidget({
-            type: "bi.sign_text_editor",
+            type: SignTextEditor.xtype,
             cls: "slider-editor-button",
             text: this.options.unit,
             allowBlank: false,
-            width: BI.toPix(c.EDITOR_WIDTH, 2),
+            width: toPix(c.EDITOR_WIDTH, 2),
-            height: BI.toPix(c.EDITOR_HEIGHT, 2),
+            height: toPix(c.EDITOR_HEIGHT, 2),
-            validationChecker: function (v) {
+            validationChecker: v => this._checkValidation(v),
-                return self._checkValidation(v);
-            }
-        });
-        this.labelOne.element.hover(function () {
-            self.labelOne.element.removeClass("bi-border").addClass("bi-border");
-        }, function () {
-            self.labelOne.element.removeClass("bi-border");
         });
-        this.labelOne.on(BI.Editor.EVENT_CONFIRM, function () {
+        this.labelOne.element.hover(
-            var oldValueOne = self.valueOne;
+            () => {
-            var v = BI.parseFloat(this.getValue());
+                this.labelOne.element
-            self.valueOne = v;
+                    .removeClass("bi-border")
-            var percent = self._getPercentByValue(v);
+                    .addClass("bi-border");
-            var significantPercent = BI.parseFloat(percent.toFixed(1));// 分成1000份
+            },
-            self._setSliderOnePosition(significantPercent);
+            () => {
-            self._setBlueTrack();
+                this.labelOne.element.removeClass("bi-border");
-            self._checkLabelPosition(oldValueOne, self.valueTwo, self.valueOne, self.valueTwo);
+            }
-            self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
+        );
+        this.labelOne.on(Editor.EVENT_CONFIRM, () => {
+            const oldValueOne = this.valueOne;
+            const v = parseFloat(this.getValue());
+            this.valueOne = v;
+            const percent = this._getPercentByValue(v);
+            const significantPercent = parseFloat(percent.toFixed(1)); // 分成1000份
+            this._setSliderOnePosition(significantPercent);
+            this._setBlueTrack();
+            this._checkLabelPosition(
+                oldValueOne,
+                this.valueTwo,
+                this.valueOne,
+                this.valueTwo
+            );
+            this.fireEvent(IntervalSlider.EVENT_CHANGE);
         });
 
-        this.labelTwo = BI.createWidget({
+        this.labelTwo = createWidget({
-            type: "bi.sign_text_editor",
+            type: SignTextEditor.xtype,
             cls: "slider-editor-button",
             text: this.options.unit,
             allowBlank: false,
-            width: BI.toPix(c.EDITOR_WIDTH, 2),
+            width: toPix(c.EDITOR_WIDTH, 2),
-            height: BI.toPix(c.EDITOR_HEIGHT, 2),
+            height: toPix(c.EDITOR_HEIGHT, 2),
-            validationChecker: function (v) {
+            validationChecker: v => this._checkValidation(v),
-                return self._checkValidation(v);
-            }
-        });
-        this.labelTwo.element.hover(function () {
-            self.labelTwo.element.removeClass("bi-border").addClass("bi-border");
-        }, function () {
-            self.labelTwo.element.removeClass("bi-border");
         });
-        this.labelTwo.on(BI.Editor.EVENT_CONFIRM, function () {
+        this.labelTwo.element.hover(
-            var oldValueTwo = self.valueTwo;
+            () => {
-            var v = BI.parseFloat(this.getValue());
+                this.labelTwo.element
-            self.valueTwo = v;
+                    .removeClass("bi-border")
-            var percent = self._getPercentByValue(v);
+                    .addClass("bi-border");
-            var significantPercent = BI.parseFloat(percent.toFixed(1));
+            },
-            self._setSliderTwoPosition(significantPercent);
+            () => {
-            self._setBlueTrack();
+                this.labelTwo.element.removeClass("bi-border");
-            self._checkLabelPosition(self.valueOne, oldValueTwo, self.valueOne, self.valueTwo);
+            }
-            self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
+        );
+        this.labelTwo.on(Editor.EVENT_CONFIRM, () => {
+            const oldValueTwo = this.valueTwo;
+            const v = parseFloat(this.getValue());
+            this.valueTwo = v;
+            const percent = this._getPercentByValue(v);
+            const significantPercent = parseFloat(percent.toFixed(1));
+            this._setSliderTwoPosition(significantPercent);
+            this._setBlueTrack();
+            this._checkLabelPosition(
+                this.valueOne,
+                oldValueTwo,
+                this.valueOne,
+                this.valueTwo
+            );
+            this.fireEvent(IntervalSlider.EVENT_CHANGE);
         });
 
-        this.sliderOne = BI.createWidget({
+        this.sliderOne = createWidget({
-            type: "bi.single_slider_button"
+            type: SliderIconButton.xtype,
         });
-        this.sliderTwo = BI.createWidget({
+        this.sliderTwo = createWidget({
-            type: "bi.single_slider_button"
+            type: SliderIconButton.xtype,
         });
         this._draggable(this.sliderOne, true);
         this._draggable(this.sliderTwo, false);
@@ -127,7 +161,7 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
             items: [
                 this._createLabelWrapper(),
                 {
-                    type: "bi.absolute",
+                    type: AbsoluteLayout.xtype,
                     items: [
                         {
                             el: {
@@ -135,75 +169,95 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
                                 horizontalAlign: "stretch",
                                 verticalAlign: "middle",
                                 columnSize: ["fill"],
-                                items: [{
+                                items: [
-                                    el: this.track,
+                                    {
-                                }],
+                                        el: this.track,
+                                    }
+                                ],
                                 hgap: 10,
                             },
-                            inset: 0
+                            inset: 0,
                         },
-                        this._createSliderWrapper(),
+                        this._createSliderWrapper()
-                    ]
+                    ],
                 }
-            ]
+            ],
         };
-    },
+    }
 
-    _rePosBySizeAfterMove: function (size, isLeft) {
+    _rePosBySizeAfterMove(size, isLeft) {
-        var o = this.options;
+        const o = this.options;
-        var percent = size * 100 / (this._getGrayTrackLength());
+        const percent = (size * 100) / this._getGrayTrackLength();
-        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        const significantPercent = parseFloat(percent.toFixed(1));
-        var v = this._getValueByPercent(significantPercent);
+        let v = this._getValueByPercent(significantPercent);
         v = this._assertValue(v);
         v = o.digit === false ? v : v.toFixed(o.digit);
-        var oldValueOne = this.valueOne, oldValueTwo = this.valueTwo;
+        const oldValueOne = this.valueOne,
-        if(isLeft) {
+            oldValueTwo = this.valueTwo;
+        if (isLeft) {
             this._setSliderOnePosition(significantPercent);
             this.labelOne.setValue(v);
             this.valueOne = v;
-            this._checkLabelPosition(oldValueOne, oldValueTwo, v, this.valueTwo);
+            this._checkLabelPosition(
-        }else{
+                oldValueOne,
+                oldValueTwo,
+                v,
+                this.valueTwo
+            );
+        } else {
             this._setSliderTwoPosition(significantPercent);
             this.labelTwo.setValue(v);
             this.valueTwo = v;
-            this._checkLabelPosition(oldValueOne, oldValueTwo, this.valueOne, v);
+            this._checkLabelPosition(
+                oldValueOne,
+                oldValueTwo,
+                this.valueOne,
+                v
+            );
         }
         this._setBlueTrack();
-    },
+    }
-
+
-    _rePosBySizeAfterStop: function (size, isLeft) {
+    _rePosBySizeAfterStop(size, isLeft) {
-        var percent = size * 100 / (this._getGrayTrackLength());
+        const percent = (size * 100) / this._getGrayTrackLength();
-        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        const significantPercent = parseFloat(percent.toFixed(1));
-        isLeft ? this._setSliderOnePosition(significantPercent) : this._setSliderTwoPosition(significantPercent);
+        isLeft
-    },
+            ? this._setSliderOnePosition(significantPercent)
-
+            : this._setSliderTwoPosition(significantPercent);
-    _draggable: function (widget, isLeft) {
+    }
-        var self = this, o = this.options;
+
-        var startDrag = false;
+    _draggable(widget, isLeft) {
-        var size = 0, offset = 0, defaultSize = 0;
+        let startDrag = false;
-        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+        let size = 0,
-            if (mouseMoveTracker.isDragging()) {
+            offset = 0,
-                startDrag = true;
+            defaultSize = 0;
-                offset += deltaX;
+        const mouseMoveTracker = new MouseMoveTracker(
-                size = optimizeSize(defaultSize + offset);
+            (deltaX => {
-                widget.element.addClass("dragging");
+                if (mouseMoveTracker.isDragging()) {
-                self._rePosBySizeAfterMove(size, isLeft);
+                    startDrag = true;
-            }
+                    offset += deltaX;
-        }, function () {
+                    size = optimizeSize(defaultSize + offset);
-            if (startDrag === true) {
+                    widget.element.addClass("dragging");
-                size = optimizeSize(size);
+                    this._rePosBySizeAfterMove(size, isLeft);
-                self._rePosBySizeAfterStop(size, isLeft);
+                }
-                size = 0;
+            }),
-                offset = 0;
+            (() => {
-                defaultSize = size;
+                if (startDrag === true) {
-                startDrag = false;
+                    size = optimizeSize(size);
-            }
+                    this._rePosBySizeAfterStop(size, isLeft);
-            widget.element.removeClass("dragging");
+                    size = 0;
-            mouseMoveTracker.releaseMouseMoves();
+                    offset = 0;
-            self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
+                    defaultSize = size;
-        }, window);
+                    startDrag = false;
+                }
+                widget.element.removeClass("dragging");
+                mouseMoveTracker.releaseMouseMoves();
+                this.fireEvent(IntervalSlider.EVENT_CHANGE);
+            }),
+            window
+        );
         widget.element.on("mousedown", function (event) {
-            if(!widget.isEnabled()) {
+            if (!widget.isEnabled()) {
                 return;
             }
             defaultSize = this.offsetLeft;
@@ -211,42 +265,47 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
             mouseMoveTracker.captureMouseMoves(event);
         });
 
-        function optimizeSize (s) {
+        const optimizeSize = s => clamp(s, 0, this._getGrayTrackLength());
-            return BI.clamp(s, 0, self._getGrayTrackLength());
+    }
-        }
-    },
 
-    _createLabelWrapper: function () {
+    _createLabelWrapper() {
-        var c = this._constant;
+        const c = this._constant;
+        
         return {
             el: {
-                type: "bi.vertical",
+                type: VerticalLayout.xtype,
-                items: [{
+                items: [
-                    type: "bi.absolute",
+                    {
-                    items: [{
+                        type: AbsoluteLayout.xtype,
-                        el: this.labelOne,
+                        items: [
-                        top: 0,
+                            {
-                        left: 0,
+                                el: this.labelOne,
-                    }]
+                                top: 0,
-                }, {
+                                left: 0,
-                    type: "bi.absolute",
+                            }
-                    items: [{
+                        ],
-                        el: this.labelTwo,
+                    },
-                        top: 0,
+                    {
-                        right: 0,
+                        type: AbsoluteLayout.xtype,
-                    }]
+                        items: [
-                }],
+                            {
+                                el: this.labelTwo,
+                                top: 0,
+                                right: 0,
+                            }
+                        ],
+                    }
+                ],
                 rgap: c.EDITOR_R_GAP,
-                height: c.SLIDER_HEIGHT
+                height: c.SLIDER_HEIGHT,
             },
             top: 0,
             left: 0,
-            width: "100%"
+            width: "100%",
         };
-    },
+    }
 
-    _createSliderWrapper: function () {
+    _createSliderWrapper() {
-        var c = this._constant;
         return {
             el: {
                 type: "bi.horizontal",
@@ -254,7 +313,7 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
                 verticalAlign: "middle",
                 items: [
                     {
-                        type: "bi.absolute",
+                        type: AbsoluteLayout.xtype,
                         height: 12,
                         width: "fill",
                         items: [
@@ -262,24 +321,25 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
                                 el: this.sliderOne,
                                 top: 0,
                                 bottom: 0,
-                                left: 0
+                                left: 0,
-                            }, {
+                            },
+                            {
                                 el: this.sliderTwo,
                                 top: 0,
                                 bottom: 0,
-                                left: "100%"
+                                left: "100%",
                             }
                         ],
                     }
                 ],
                 hgap: 10,
             },
-            inset: 0
+            inset: 0,
         };
-    },
+    }
 
-    _createTrackWrapper: function () {
+    _createTrackWrapper() {
-        return BI.createWidget({
+        return createWidget({
             type: "bi.horizontal",
             cls: "track-wrapper",
             horizontalAlign: "stretch",
@@ -288,100 +348,110 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
             scrollx: false,
             items: [
                 {
-                    type: "bi.absolute",
+                    type: AbsoluteLayout.xtype,
                     height: 6,
-                    items: [{
+                    items: [
-                        el: this.grayTrack,
+                        {
-                        top: 0,
+                            el: this.grayTrack,
-                        left: 0,
+                            top: 0,
-                        bottom: 0,
+                            left: 0,
-                        width: "100%"
+                            bottom: 0,
-                    }, {
+                            width: "100%",
-                        el: this.blueTrack,
+                        },
-                        top: 0,
+                        {
-                        left: 0,
+                            el: this.blueTrack,
-                        bottom: 0,
+                            top: 0,
-                        width: "0%"
+                            left: 0,
-                    }]
+                            bottom: 0,
+                            width: "0%",
+                        }
+                    ],
                 }
             ],
         });
-    },
+    }
 
-    _checkValidation: function (v) {
+    _checkValidation(v) {
-        var o = this.options;
+        const o = this.options;
-        var valid = false;
+        let valid = false;
         // 像90.这样的既不属于整数又不属于小数，是不合法的值
-        var dotText = (v + "").split(".")[1];
+        let dotText = (`${v}`).split(".")[1];
-        if (BI.isEmptyString(dotText)) {
+        // eslint-disable-next-line no-empty
-        }else{
+        if (isEmptyString(dotText)) {
-            if (BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max)) {
+        } else {
+            if (isNumeric(v) && !(isNull(v) || v < this.min || v > this.max)) {
                 // 虽然规定了所填写的小数位数，但是我们认为所有的整数都是满足设置的小数位数的
                 // 100等价于100.0 100.00 100.000
-                if(o.digit === false || BI.isInteger(v)) {
+                if (o.digit === false || isInteger(v)) {
                     valid = true;
-                }else{
+                } else {
                     dotText = dotText || "";
-                    valid = (dotText.length === o.digit);
+                    valid = dotText.length === o.digit;
                 }
             }
         }
+        
         return valid;
-    },
+    }
 
-    _checkOverlap: function () {
+    _checkOverlap() {
-        var labelOneLeft = this.labelOne.element[0].offsetLeft;
+        const labelOneLeft = this.labelOne.element[0].offsetLeft;
-        var labelTwoLeft = this.labelTwo.element[0].offsetLeft;
+        const labelTwoLeft = this.labelTwo.element[0].offsetLeft;
         if (labelOneLeft <= labelTwoLeft) {
-            if ((labelTwoLeft - labelOneLeft) < 90) {
+            if (labelTwoLeft - labelOneLeft < 90) {
-                this.labelTwo.element.css({top: 40});
+                this.labelTwo.element.css({ top: 40 });
             } else {
-                this.labelTwo.element.css({top: 0});
+                this.labelTwo.element.css({ top: 0 });
             }
         } else {
-            if ((labelOneLeft - labelTwoLeft) < 90) {
+            if (labelOneLeft - labelTwoLeft < 90) {
-                this.labelTwo.element.css({top: 40});
+                this.labelTwo.element.css({ top: 40 });
             } else {
-                this.labelTwo.element.css({top: 0});
+                this.labelTwo.element.css({ top: 0 });
             }
         }
-    },
+    }
-
+
-    _checkLabelPosition: function (oldValueOne, oldValueTwo, valueOne, valueTwo, isLeft) {
+    _checkLabelPosition(oldValueOne, oldValueTwo, valueOne, valueTwo, isLeft) {
-        oldValueOne = BI.parseFloat(oldValueOne);
+        oldValueOne = parseFloat(oldValueOne);
-        oldValueTwo = BI.parseFloat(oldValueTwo);
+        oldValueTwo = parseFloat(oldValueTwo);
-        valueOne = BI.parseFloat(valueOne);
+        valueOne = parseFloat(valueOne);
-        valueTwo = BI.parseFloat(valueTwo);
+        valueTwo = parseFloat(valueTwo);
-        if((oldValueOne <= oldValueTwo && valueOne > valueTwo) || (oldValueOne >= oldValueTwo && valueOne < valueTwo)) {
+        if (
-            var isSliderOneLeft = BI.parseFloat(this.labelOne.getValue()) < BI.parseFloat(this.labelTwo.getValue());
+            (oldValueOne <= oldValueTwo && valueOne > valueTwo) ||
+            (oldValueOne >= oldValueTwo && valueOne < valueTwo)
+        ) {
+            const isSliderOneLeft =
+                parseFloat(this.labelOne.getValue()) <
+                parseFloat(this.labelTwo.getValue());
             this._resetLabelPosition(!isSliderOneLeft);
         }
-    },
+    }
 
-    _resetLabelPosition: function(needReverse) {
+    _resetLabelPosition(needReverse) {
-        this.labelOne.element.css({left: needReverse ? "100%" : "0%"});
+        this.labelOne.element.css({ left: needReverse ? "100%" : "0%" });
-        this.labelTwo.element.css({left: needReverse ? "0%" : "100%"});
+        this.labelTwo.element.css({ left: needReverse ? "0%" : "100%" });
-    },
+    }
 
-    _setSliderOnePosition: function (percent) {
+    _setSliderOnePosition(percent) {
-        this.sliderOne.element.css({left: percent + "%"});
+        this.sliderOne.element.css({ left: `${percent}%` });
-    },
+    }
 
-    _setSliderTwoPosition: function (percent) {
+    _setSliderTwoPosition(percent) {
-        this.sliderTwo.element.css({left: percent + "%"});
+        this.sliderTwo.element.css({ left: `${percent}%` });
-    },
+    }
 
-    _setBlueTrackLeft: function (percent) {
+    _setBlueTrackLeft(percent) {
-        this.blueTrack.element.css({left: percent + "%"});
+        this.blueTrack.element.css({ left: `${percent}%` });
-    },
+    }
 
-    _setBlueTrackWidth: function (percent) {
+    _setBlueTrackWidth(percent) {
-        this.blueTrack.element.css({width: percent + "%"});
+        this.blueTrack.element.css({ width: `${percent}%` });
-    },
+    }
 
-    _setBlueTrack: function () {
+    _setBlueTrack() {
-        var percentOne = this._getPercentByValue(this.labelOne.getValue());
+        const percentOne = this._getPercentByValue(this.labelOne.getValue());
-        var percentTwo = this._getPercentByValue(this.labelTwo.getValue());
+        const percentTwo = this._getPercentByValue(this.labelTwo.getValue());
         if (percentOne <= percentTwo) {
             this._setBlueTrackLeft(percentOne);
             this._setBlueTrackWidth(percentTwo - percentOne);
@@ -389,133 +459,165 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
             this._setBlueTrackLeft(percentTwo);
             this._setBlueTrackWidth(percentOne - percentTwo);
         }
-    },
+    }
 
-    _setAllPosition: function (one, two) {
+    _setAllPosition(one, two) {
         this._setSliderOnePosition(one);
         this._setSliderTwoPosition(two);
         this._setBlueTrack();
-    },
+    }
 
-    _setVisible: function (visible) {
+    _setVisible(visible) {
         this.sliderOne.setVisible(visible);
         this.sliderTwo.setVisible(visible);
         this.labelOne.setVisible(visible);
         this.labelTwo.setVisible(visible);
-    },
+    }
 
-    _setErrorText: function () {
+    _setErrorText() {
-        var errorText = BI.i18nText("BI-Basic_Please_Enter_Number_Between", this.min, this.max);
+        const errorText = i18nText(
+            "BI-Basic_Please_Enter_Number_Between",
+            this.min,
+            this.max
+        );
         this.labelOne.setErrorText(errorText);
         this.labelTwo.setErrorText(errorText);
-    },
+    }
 
-    _getGrayTrackLength: function () {
+    _getGrayTrackLength() {
         return this.grayTrack.element[0].scrollWidth;
-    },
+    }
 
-    // 其中取max-min后保留4为有效数字后的值的小数位数为最终value的精度
+    _getValueByPercent(percent) {
-    // 端点处的值有可能因为min,max相差量级很大(precision很大)而丢失精度，此时直接返回端点值即可
+        // return (((max-min)*percent)/100+min)
-    _getValueByPercent: function (percent) {// return (((max-min)*percent)/100+min)
         if (percent === 0) {
             return this.min;
         }
         if (percent === 100) {
             return this.max;
         }
-        var sub = this.calculation.accurateSubtraction(this.max, this.min);
+        const sub = this.calculation.accurateSubtraction(this.max, this.min);
-        var mul = this.calculation.accurateMultiplication(sub, percent);
+        const mul = this.calculation.accurateMultiplication(sub, percent);
-        var div = this.calculation.accurateDivisionTenExponent(mul, 2);
+        const div = this.calculation.accurateDivisionTenExponent(mul, 2);
-        if(this.precision < 0) {
+        if (this.precision < 0) {
-            var value = BI.parseFloat(this.calculation.accurateAddition(div, this.min));
+            const value = parseFloat(
-            var reduceValue = Math.round(this.calculation.accurateDivisionTenExponent(value, -this.precision));
+                this.calculation.accurateAddition(div, this.min)
-            return this.calculation.accurateMultiplication(reduceValue, Math.pow(10, -this.precision));
+            );
+            const reduceValue = Math.round(
+                this.calculation.accurateDivisionTenExponent(
+                    value,
+                    -this.precision
+                )
+            );
+            
+            return this.calculation.accurateMultiplication(
+                reduceValue,
+                Math.pow(10, -this.precision)
+            );
         }
-        return BI.parseFloat(this.calculation.accurateAddition(div, this.min).toFixed(this.precision));
+        
-
+        return parseFloat(
-    },
+            this.calculation
+                .accurateAddition(div, this.min)
+                .toFixed(this.precision)
+        );
+    }
 
-    _getPercentByValue: function (v) {
+    _getPercentByValue(v) {
-        return (v - this.min) * 100 / (this.max - this.min);
+        return ((v - this.min) * 100) / (this.max - this.min);
-    },
+    }
 
-    _getPrecision: function () {
+    _getPrecision() {
         // 计算每一份值的精度(最大值和最小值的差值保留4为有效数字后的精度)
         // 如果差值的整数位数大于4,toPrecision(4)得到的是科学计数法123456 => 1.235e+5
         // 返回非负值: 保留的小数位数
         // 返回负值: 保留的10^n精度中的n
-        var sub = this.calculation.accurateSubtraction(this.max, this.min);
+        const sub = this.calculation.accurateSubtraction(this.max, this.min);
-        var pre = sub.toPrecision(4);
+        const pre = sub.toPrecision(4);
         // 科学计数法
-        var eIndex = pre.indexOf("e");
+        const eIndex = pre.indexOf("e");
-        var arr = [];
+        let arr = [];
-        if(eIndex > -1) {
+        if (eIndex > -1) {
             arr = pre.split("e");
-            var decimalPartLength = BI.size(arr[0].split(".")[1]);
+            const decimalPartLength = size(arr[0].split(".")[1]);
-            var sciencePartLength = BI.parseInt(arr[1].substring(1));
+            const sciencePartLength = parseInt(arr[1].substring(1));
+            
             return decimalPartLength - sciencePartLength;
         }
         arr = pre.split(".");
+        
         return arr.length > 1 ? arr[1].length : 0;
+    }
 
-    },
+    _assertValue(value) {
-
+        if (value <= this.min) {
-    _assertValue: function (value) {
-        if(value <= this.min) {
             return this.min;
         }
-        if(value >= this.max) {
+        if (value >= this.max) {
             return this.max;
         }
+        
         return value;
-    },
+    }
 
-    _setEnable: function (b) {
+    _setEnable(b) {
-        BI.IntervalSlider.superclass._setEnable.apply(this, [b]);
+        super._setEnable.apply(this, [b]);
-        if(b) {
+        if (b) {
-            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+            this.blueTrack.element
+                .removeClass("disabled-blue-track")
+                .addClass("blue-track");
         } else {
-            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+            this.blueTrack.element
+                .removeClass("blue-track")
+                .addClass("disabled-blue-track");
         }
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         if (this.valueOne <= this.valueTwo) {
-            return {min: this.valueOne, max: this.valueTwo};
+            return { min: this.valueOne, max: this.valueTwo };
         }
-        return {min: this.valueTwo, max: this.valueOne};
+        
-
+        return { min: this.valueTwo, max: this.valueOne };
-    },
+    }
 
-    _setMinAndMax: function (v) {
+    _setMinAndMax(v) {
-        var minNumber = BI.parseFloat(v.min);
+        const minNumber = parseFloat(v.min);
-        var maxNumber = BI.parseFloat(v.max);
+        const maxNumber = parseFloat(v.max);
-        if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber >= minNumber)) {
+        if (!isNaN(minNumber) && !isNaN(maxNumber) && maxNumber >= minNumber) {
             this.min = minNumber;
             this.max = maxNumber;
             this.valueOne = minNumber;
             this.valueTwo = maxNumber;
             this.precision = this._getPrecision();
         }
-    },
+    }
 
-    setMinAndMax: function (v) {
+    setMinAndMax(v) {
         this._setMinAndMax(v);
         this.setEnable(v.min <= v.max);
-    },
+    }
-
+
-    setValue: function (v) {
+    setValue(v) {
-        var o = this.options;
+        const o = this.options;
-        var valueOne = BI.parseFloat(v.min);
+        let valueOne = parseFloat(v.min);
-        var valueTwo = BI.parseFloat(v.max);
+        let valueTwo = parseFloat(v.max);
-        valueOne = o.digit === false ? valueOne : BI.parseFloat(valueOne.toFixed(o.digit));
+        valueOne =
-        valueTwo = o.digit === false ? valueTwo : BI.parseFloat(valueTwo.toFixed(o.digit));
+            o.digit === false
+                ? valueOne
+                : parseFloat(valueOne.toFixed(o.digit));
+        valueTwo =
+            o.digit === false
+                ? valueTwo
+                : parseFloat(valueTwo.toFixed(o.digit));
         if (!isNaN(valueOne) && !isNaN(valueTwo)) {
             if (this._checkValidation(valueOne)) {
-                this.valueOne = (this.valueOne <= this.valueTwo ? valueOne : valueTwo);
+                this.valueOne =
+                    this.valueOne <= this.valueTwo ? valueOne : valueTwo;
             }
             if (this._checkValidation(valueTwo)) {
-                this.valueTwo = (this.valueOne <= this.valueTwo ? valueTwo : valueOne);
+                this.valueTwo =
+                    this.valueOne <= this.valueTwo ? valueTwo : valueOne;
             }
             if (valueOne < this.min) {
                 this.valueOne = this.min;
@@ -524,9 +626,9 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
                 this.valueTwo = this.max;
             }
         }
-    },
+    }
 
-    reset: function () {
+    reset() {
         this._setVisible(false);
         this.enable = false;
         this.valueOne = "";
@@ -534,18 +636,32 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
         this.min = NaN;
         this.max = NaN;
         this._setBlueTrackWidth(0);
-    },
+    }
 
-    populate: function () {
+    populate() {
-        var o = this.options;
+        const o = this.options;
         if (!isNaN(this.min) && !isNaN(this.max)) {
             this.enable = true;
             this._setVisible(true);
             this._setErrorText();
-            if ((BI.isNumeric(this.valueOne) || BI.isNotEmptyString(this.valueOne)) && (BI.isNumeric(this.valueTwo) || BI.isNotEmptyString(this.valueTwo))) {
+            if (
-                this.labelOne.setValue(o.digit === false ? this.valueOne : BI.parseFloat(this.valueOne).toFixed(o.digit));
+                (isNumeric(this.valueOne) || isNotEmptyString(this.valueOne)) &&
-                this.labelTwo.setValue(o.digit === false ? this.valueTwo : BI.parseFloat(this.valueTwo).toFixed(o.digit));
+                (isNumeric(this.valueTwo) || isNotEmptyString(this.valueTwo))
-                this._setAllPosition(this._getPercentByValue(this.valueOne), this._getPercentByValue(this.valueTwo));
+            ) {
+                this.labelOne.setValue(
+                    o.digit === false
+                        ? this.valueOne
+                        : parseFloat(this.valueOne).toFixed(o.digit)
+                );
+                this.labelTwo.setValue(
+                    o.digit === false
+                        ? this.valueTwo
+                        : parseFloat(this.valueTwo).toFixed(o.digit)
+                );
+                this._setAllPosition(
+                    this._getPercentByValue(this.valueOne),
+                    this._getPercentByValue(this.valueTwo)
+                );
             } else {
                 this.labelOne.setValue(this.min);
                 this.labelTwo.setValue(this.max);
@@ -554,6 +670,4 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
             this._resetLabelPosition(this.valueOne > this.valueTwo);
         }
     }
-});
+}
-BI.IntervalSlider.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.interval_slider", BI.IntervalSlider);

src/widget/intervalslider/model.accuratecalculation.js

@@ -1,172 +1,239 @@
-/**
+import { Widget, extend, parseInt, parseFloat } from "@/core";
- * Created by zcf on 2017/3/1.
+
- * 万恶的IEEE-754
+export class AccurateCalculationModel extends Widget {
- * 使用字符串精确计算含小数加法、减法、乘法和10的指数倍除法，支持负数
+    _defaultConfig() {
- */
+        return extend(super._defaultConfig(...arguments), {
-BI.AccurateCalculationModel = BI.inherit(BI.Widget, {
+            baseCls: "",
-    _defaultConfig: function () {
-        return BI.extend(BI.AccurateCalculationModel.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: ""
         });
-    },
+    }
 
-    _init: function () {
+    _init() {
-        BI.AccurateCalculationModel.superclass._init.apply(this, arguments);
+        super._init(...arguments);
-    },
+    }
 
-    _getMagnitude: function (n) {
+    _getMagnitude(n) {
-        var magnitude = "1";
+        let magnitude = "1";
-        for (var i = 0; i < n; i++) {
+        for (let i = 0; i < n; i++) {
             magnitude += "0";
         }
-        return BI.parseInt(magnitude);
+        
-    },
+        return parseInt(magnitude);
+    }
 
-    _formatDecimal: function (stringNumber1, stringNumber2) {
+    _formatDecimal(stringNumber1, stringNumber2) {
         if (stringNumber1.numDecimalLength === stringNumber2.numDecimalLength) {
             return;
         }
-        var magnitudeDiff = stringNumber1.numDecimalLength - stringNumber2.numDecimalLength;
+        let magnitudeDiff =
+            stringNumber1.numDecimalLength - stringNumber2.numDecimalLength;
+        let needAddZero;
         if (magnitudeDiff > 0) {
-            var needAddZero = stringNumber2;
+            needAddZero = stringNumber2;
         } else {
-            var needAddZero = stringNumber1;
+            needAddZero = stringNumber1;
-            magnitudeDiff = (0 - magnitudeDiff);
+            magnitudeDiff = 0 - magnitudeDiff;
         }
-        for (var i = 0; i < magnitudeDiff; i++) {
+        for (let i = 0; i < magnitudeDiff; i++) {
             if (needAddZero.numDecimal === "0" && i === 0) {
                 continue;
             }
             needAddZero.numDecimal += "0";
         }
-    },
+    }
 
-    _stringNumberFactory: function (num) {
+    _stringNumberFactory(num) {
-        var strNum = num.toString();
+        const strNum = num.toString();
-        var numStrArray = strNum.split(".");
+        const numStrArray = strNum.split(".");
-        var numInteger = numStrArray[0];
+        const numInteger = numStrArray[0];
+        let numDecimal;
+        let numDecimalLength;
         if (numStrArray.length === 1) {
-            var numDecimal = "0";
+            numDecimal = "0";
-            var numDecimalLength = 0;
+            numDecimalLength = 0;
         } else {
-            var numDecimal = numStrArray[1];
+            numDecimal = numStrArray[1];
-            var numDecimalLength = numStrArray[1].length;
+            numDecimalLength = numStrArray[1].length;
         }
+        
         return {
-            numInteger: numInteger,
+            numInteger,
-            numDecimal: numDecimal,
+            numDecimal,
-            numDecimalLength: numDecimalLength
+            numDecimalLength,
         };
-    },
+    }
 
-    _accurateSubtraction: function (num1, num2) {// num1-num2 && num1>num2
+    _accurateSubtraction(num1, num2) {
-        var stringNumber1 = this._stringNumberFactory(num1);
+        // num1-num2 && num1>num2
-        var stringNumber2 = this._stringNumberFactory(num2);
+        const stringNumber1 = this._stringNumberFactory(num1);
+        const stringNumber2 = this._stringNumberFactory(num2);
         // 整数部分计算
-        var integerResult = BI.parseInt(stringNumber1.numInteger) - BI.parseInt(stringNumber2.numInteger);
+        let integerResult =
+            parseInt(stringNumber1.numInteger) -
+            parseInt(stringNumber2.numInteger);
         // 小数部分
         this._formatDecimal(stringNumber1, stringNumber2);
-        var decimalMaxLength = getDecimalMaxLength(stringNumber1, stringNumber2);
+        const decimalMaxLength = getDecimalMaxLength(
+            stringNumber1,
+            stringNumber2
+        );
 
-        if (BI.parseInt(stringNumber1.numDecimal) >= BI.parseInt(stringNumber2.numDecimal)) {
+        let decimalResultTemp;
-            var decimalResultTemp = (BI.parseInt(stringNumber1.numDecimal) - BI.parseInt(stringNumber2.numDecimal)).toString();
+        let decimalResult;
-            var decimalResult = addZero(decimalResultTemp, decimalMaxLength);
+
-        } else {// 否则借位
+        if (
+            parseInt(stringNumber1.numDecimal) >=
+            parseInt(stringNumber2.numDecimal)
+        ) {
+            decimalResultTemp = (
+                parseInt(stringNumber1.numDecimal) -
+                parseInt(stringNumber2.numDecimal)
+            ).toString();
+            decimalResult = addZero(decimalResultTemp, decimalMaxLength);
+        } else {
+            // 否则借位
             integerResult--;
-            var borrow = this._getMagnitude(decimalMaxLength);
+            const borrow = this._getMagnitude(decimalMaxLength);
-            var decimalResultTemp = (borrow + BI.parseInt(stringNumber1.numDecimal) - BI.parseInt(stringNumber2.numDecimal)).toString();
+            decimalResultTemp = (
-            var decimalResult = addZero(decimalResultTemp, decimalMaxLength);
+                borrow +
+                parseInt(stringNumber1.numDecimal) -
+                parseInt(stringNumber2.numDecimal)
+            ).toString();
+            decimalResult = addZero(decimalResultTemp, decimalMaxLength);
         }
-        var result = integerResult + "." + decimalResult;
+        const result = `${integerResult}.${decimalResult}`;
-        return BI.parseFloat(result);
+        
+        return parseFloat(result);
 
-        function getDecimalMaxLength (num1, num2) {
+        function getDecimalMaxLength(num1, num2) {
             if (num1.numDecimal.length >= num2.numDecimal.length) {
                 return num1.numDecimal.length;
             }
+            
             return num2.numDecimal.length;
         }
 
-        function addZero (resultTemp, length) {
+        function addZero(resultTemp, length) {
-            var diff = length - resultTemp.length;
+            const diff = length - resultTemp.length;
-            for (var i = 0; i < diff; i++) {
+            for (let i = 0; i < diff; i++) {
-                resultTemp = "0" + resultTemp;
+                resultTemp = `0${resultTemp}`;
             }
+            
             return resultTemp;
         }
-    },
+    }
 
-    _accurateAddition: function (num1, num2) {// 加法结合律
+    _accurateAddition(num1, num2) {
-        var stringNumber1 = this._stringNumberFactory(num1);
+        // 加法结合律
-        var stringNumber2 = this._stringNumberFactory(num2);
+        const stringNumber1 = this._stringNumberFactory(num1);
+        const stringNumber2 = this._stringNumberFactory(num2);
         // 整数部分计算
-        var integerResult = BI.parseInt(stringNumber1.numInteger) + BI.parseInt(stringNumber2.numInteger);
+        let integerResult =
+            parseInt(stringNumber1.numInteger) +
+            parseInt(stringNumber2.numInteger);
         // 小数部分
         this._formatDecimal(stringNumber1, stringNumber2);
 
-        var decimalResult = (BI.parseInt(stringNumber1.numDecimal) + BI.parseInt(stringNumber2.numDecimal)).toString();
+        let decimalResult = (
+            parseInt(stringNumber1.numDecimal) +
+            parseInt(stringNumber2.numDecimal)
+        ).toString();
 
         if (decimalResult !== "0") {
             if (decimalResult.length <= stringNumber1.numDecimal.length) {
-                decimalResult = addZero(decimalResult, stringNumber1.numDecimal.length);
+                decimalResult = addZero(
+                    decimalResult,
+                    stringNumber1.numDecimal.length
+                );
             } else {
-                integerResult++;// 进一
+                integerResult++; // 进一
                 decimalResult = decimalResult.slice(1);
             }
         }
-        var result = integerResult + "." + decimalResult;
+        const result = `${integerResult}.${decimalResult}`;
-        return BI.parseFloat(result);
+        
+        return parseFloat(result);
 
-        function addZero (resultTemp, length) {
+        function addZero(resultTemp, length) {
-            var diff = length - resultTemp.length;
+            const diff = length - resultTemp.length;
-            for (var i = 0; i < diff; i++) {
+            for (let i = 0; i < diff; i++) {
-                resultTemp = "0" + resultTemp;
+                resultTemp = `0${resultTemp}`;
             }
+            
             return resultTemp;
         }
-    },
+    }
 
-    _accurateMultiplication: function (num1, num2) {// 乘法分配律
+    _accurateMultiplication(num1, num2) {
-        var stringNumber1 = this._stringNumberFactory(num1);
+        // 乘法分配律
-        var stringNumber2 = this._stringNumberFactory(num2);
+        const stringNumber1 = this._stringNumberFactory(num1);
+        const stringNumber2 = this._stringNumberFactory(num2);
         // 整数部分计算
-        var integerResult = BI.parseInt(stringNumber1.numInteger) * BI.parseInt(stringNumber2.numInteger);
+        const integerResult =
+            parseInt(stringNumber1.numInteger) *
+            parseInt(stringNumber2.numInteger);
         // num1的小数和num2的整数
-        var dec1Int2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numDecimal) * BI.parseInt(stringNumber2.numInteger), stringNumber1.numDecimalLength);
+        const dec1Int2 = this._accurateDivisionTenExponent(
+            parseInt(stringNumber1.numDecimal) *
+                parseInt(stringNumber2.numInteger),
+            stringNumber1.numDecimalLength
+        );
         // num1的整数和num2的小数
-        var int1dec2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numInteger) * BI.parseInt(stringNumber2.numDecimal), stringNumber2.numDecimalLength);
+        const int1dec2 = this._accurateDivisionTenExponent(
+            parseInt(stringNumber1.numInteger) *
+                parseInt(stringNumber2.numDecimal),
+            stringNumber2.numDecimalLength
+        );
         // 小数*小数
-        var dec1dec2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numDecimal) * BI.parseInt(stringNumber2.numDecimal), (stringNumber1.numDecimalLength + stringNumber2.numDecimalLength));
+        const dec1dec2 = this._accurateDivisionTenExponent(
+            parseInt(stringNumber1.numDecimal) *
+                parseInt(stringNumber2.numDecimal),
+            stringNumber1.numDecimalLength + stringNumber2.numDecimalLength
+        );
 
-        return this._accurateAddition(this._accurateAddition(this._accurateAddition(integerResult, dec1Int2), int1dec2), dec1dec2);
+        return this._accurateAddition(
-    },
+            this._accurateAddition(
+                this._accurateAddition(integerResult, dec1Int2),
+                int1dec2
+            ),
+            dec1dec2
+        );
+    }
 
-    _accurateDivisionTenExponent: function (num, n) {// num/10^n && n>0
+    _accurateDivisionTenExponent(num, n) {
-        var stringNumber = this._stringNumberFactory(num);
+        // num/10^n && n>0
+        const stringNumber = this._stringNumberFactory(num);
+        let integerResult, partDecimalResult;
         if (stringNumber.numInteger.length > n) {
-            var integerResult = stringNumber.numInteger.slice(0, (stringNumber.numInteger.length - n));
+            integerResult = stringNumber.numInteger.slice(
-            var partDecimalResult = stringNumber.numInteger.slice(-n);
+                0,
+                stringNumber.numInteger.length - n
+            );
+            partDecimalResult = stringNumber.numInteger.slice(-n);
         } else {
-            var integerResult = "0";
+            integerResult = "0";
-            var partDecimalResult = addZero(stringNumber.numInteger, n);
+            partDecimalResult = addZero(stringNumber.numInteger, n);
         }
-        var result = integerResult + "." + partDecimalResult + stringNumber.numDecimal;
+        const result =
-        return BI.parseFloat(result);
+            `${integerResult}.${partDecimalResult}${stringNumber.numDecimal}`;
+        
+        return parseFloat(result);
 
-        function addZero (resultTemp, length) {
+        function addZero(resultTemp, length) {
-            var diff = length - resultTemp.length;
+            const diff = length - resultTemp.length;
-            for (var i = 0; i < diff; i++) {
+            for (let i = 0; i < diff; i++) {
-                resultTemp = "0" + resultTemp;
+                resultTemp = `0${resultTemp}`;
             }
+            
             return resultTemp;
         }
-    },
+    }
 
-    accurateSubtraction: function (num1, num2) {
+    accurateSubtraction(num1, num2) {
         if (num1 >= 0 && num2 >= 0) {
             if (num1 >= num2) {
                 return this._accurateSubtraction(num1, num2);
             }
+            
             return -this._accurateSubtraction(num2, num1);
         }
         if (num1 >= 0 && num2 < 0) {
@@ -179,11 +246,12 @@ BI.AccurateCalculationModel = BI.inherit(BI.Widget, {
             if (num1 >= num2) {
                 return this._accurateSubtraction(-num2, -num1);
             }
+            
             return this._accurateSubtraction(-num1, -num2);
         }
-    },
+    }
 
-    accurateAddition: function (num1, num2) {
+    accurateAddition(num1, num2) {
         if (num1 >= 0 && num2 >= 0) {
             return this._accurateAddition(num1, num2);
         }
@@ -196,9 +264,9 @@ BI.AccurateCalculationModel = BI.inherit(BI.Widget, {
         if (num1 < 0 && num2 < 0) {
             return -this._accurateAddition(-num1, -num2);
         }
-    },
+    }
 
-    accurateMultiplication: function (num1, num2) {
+    accurateMultiplication(num1, num2) {
         if (num1 >= 0 && num2 >= 0) {
             return this._accurateMultiplication(num1, num2);
         }
@@ -211,12 +279,13 @@ BI.AccurateCalculationModel = BI.inherit(BI.Widget, {
         if (num1 < 0 && num2 < 0) {
             return this._accurateMultiplication(-num1, -num2);
         }
-    },
+    }
 
-    accurateDivisionTenExponent: function (num1, n) {
+    accurateDivisionTenExponent(num1, n) {
         if (num1 >= 0) {
             return this._accurateDivisionTenExponent(num1, n);
         }
+        
         return -this._accurateDivisionTenExponent(-num1, n);
     }
-});
+}

src/widget/singleslider/button/editor.sign.text.js

@@ -1,196 +1,217 @@
-BI.SignTextEditor = BI.inherit(BI.Widget, {
+import {
-    _defaultConfig: function () {
+    shortcut,
-        var conf = BI.SignTextEditor.superclass._defaultConfig.apply(this, arguments);
+    Widget,
-        return BI.extend(conf, {
+    extend,
-            baseCls: (conf.baseCls || "") + " bi-sign-initial-editor",
+    emptyFn,
-            validationChecker: BI.emptyFn,
+    createWidget,
+    nextTick,
+    Controller,
+    AbsoluteLayout,
+    VerticalLayout,
+    bind,
+    isEmpty,
+    isKey
+} from "@/core";
+import { TextButton, Editor } from "@/base";
+
+@shortcut()
+export class SignTextEditor extends Widget {
+    static xtype = "bi.sign_text_editor";
+
+    static EVENT_CONFIRM = "EVENT_CONFIRM";
+    static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM";
+    static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL";
+
+    _defaultConfig() {
+        const conf = super._defaultConfig(...arguments);
+        
+        return extend(conf, {
+            baseCls: `${conf.baseCls || ""} bi-sign-initial-editor`,
+            validationChecker: emptyFn,
             text: "",
-            height: 24
+            height: 24,
         });
-    },
+    }
 
-    _init: function () {
+    _init() {
-        BI.SignTextEditor.superclass._init.apply(this, arguments);
+        super._init(...arguments);
-        var self = this, o = this.options;
+        const o = this.options;
-        this.editor = BI.createWidget({
+        this.editor = createWidget({
-            type: "bi.editor",
+            type: Editor.xtype,
             simple: o.simple,
             height: o.height,
             hgap: 4,
             vgap: 2,
             value: o.value,
             validationChecker: o.validationChecker,
-            allowBlank: false
+            allowBlank: false,
         });
-        this.text = BI.createWidget({
+        this.text = createWidget({
-            type: "bi.text_button",
+            type: TextButton.xtype,
             cls: "sign-editor-text",
-            title: function () {
+            title: () => this.getValue(),
-                return self.getValue();
-            },
             textAlign: o.textAlign,
             height: o.height,
             hgap: 4,
-            handler: function () {
+            handler: () => {
-                self._showInput();
+                this._showInput();
-                self.editor.focus();
+                this.editor.focus();
-                self.editor.selectAll();
+                this.editor.selectAll();
-            }
+            },
         });
-        this.text.on(BI.TextButton.EVENT_CHANGE, function () {
+        this.text.on(TextButton.EVENT_CHANGE, () => {
-            BI.nextTick(function () {
+            nextTick(() => {
-                self.fireEvent(BI.SignTextEditor.EVENT_CLICK_LABEL);
+                this.fireEvent(SignTextEditor.EVENT_CLICK_LABEL);
             });
         });
-        BI.createWidget({
+        createWidget({
-            type: "bi.absolute",
+            type: AbsoluteLayout.xtype,
             element: this,
-            items: [{
+            items: [
-                el: this.text,
+                {
-                left: 0,
+                    el: this.text,
-                right: 0,
+                    left: 0,
-                top: 0,
+                    right: 0,
-                bottom: 0
+                    top: 0,
-            }]
+                    bottom: 0,
+                }
+            ],
         });
-        this.editor.on(BI.Controller.EVENT_CHANGE, function () {
+        this.editor.on(Controller.EVENT_CHANGE, (...args) => {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+            this.fireEvent(Controller.EVENT_CHANGE, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CONFIRM, function () {
+        this.editor.on(Editor.EVENT_CONFIRM, (...args) => {
-            self._showHint();
+            this._showHint();
-            self._checkText();
+            this._checkText();
-            self.fireEvent(BI.SignTextEditor.EVENT_CONFIRM, arguments);
+            this.fireEvent(SignTextEditor.EVENT_CONFIRM, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () {
+        this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => {
-            self._showHint();
+            this._showHint();
-            self._checkText();
+            this._checkText();
-            self.fireEvent(BI.SignTextEditor.EVENT_CHANGE_CONFIRM, arguments);
+            this.fireEvent(SignTextEditor.EVENT_CHANGE_CONFIRM, ...args);
         });
-        this.editor.on(BI.Editor.EVENT_ERROR, function () {
+        this.editor.on(Editor.EVENT_ERROR, () => {
-            self._checkText();
+            this._checkText();
         });
-        BI.createWidget({
+        createWidget({
-            type: "bi.vertical",
+            type: VerticalLayout.xtype,
             scrolly: false,
             element: this,
-            items: [this.editor]
+            items: [this.editor],
         });
         this._showHint();
-        self._checkText();
+        this._checkText();
-    },
+    }
-
+
-    _checkText: function () {
+    _checkText() {
-        var o = this.options;
+        const o = this.options;
-        BI.nextTick(BI.bind(function () {
+        nextTick(
-            if (this.editor.getValue() === "") {
+            bind(() => {
-                this.text.setValue(o.watermark || "");
+                if (this.editor.getValue() === "") {
-                this.text.element.addClass("bi-water-mark");
+                    this.text.setValue(o.watermark || "");
-            } else {
+                    this.text.element.addClass("bi-water-mark");
-                var v = this.editor.getValue();
+                } else {
-                v = (BI.isEmpty(v) || v == o.text) ? o.text : v + o.text;
+                    let v = this.editor.getValue();
-                this.text.setValue(v);
+                    v = isEmpty(v) || v === o.text ? o.text : v + o.text;
-                this.text.element.removeClass("bi-water-mark");
+                    this.text.setValue(v);
-            }
+                    this.text.element.removeClass("bi-water-mark");
-        }, this));
+                }
-    },
+            }, this)
-
+        );
-    _showInput: function () {
+    }
+
+    _showInput() {
         this.editor.visible();
         this.text.invisible();
-    },
+    }
 
-    _showHint: function () {
+    _showHint() {
         this.editor.invisible();
         this.text.visible();
-    },
+    }
 
-    setTitle: function (title) {
+    setTitle(title) {
         this.text.setTitle(title);
-    },
+    }
 
-    setWarningTitle: function (title) {
+    setWarningTitle(title) {
         this.text.setWarningTitle(title);
-    },
+    }
 
-    focus: function () {
+    focus() {
         this._showInput();
         this.editor.focus();
-    },
+    }
 
-    blur: function () {
+    blur() {
         this.editor.blur();
         this._showHint();
         this._checkText();
-    },
+    }
 
-    doRedMark: function () {
+    doRedMark() {
-        if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) {
+        if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
             return;
         }
-        this.text.doRedMark.apply(this.text, arguments);
+        this.text.doRedMark(...arguments);
-    },
+    }
 
-    unRedMark: function () {
+    unRedMark() {
-        this.text.unRedMark.apply(this.text, arguments);
+        this.text.unRedMark(...arguments);
-    },
+    }
 
-    doHighLight: function () {
+    doHighLight() {
-        if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) {
+        if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
             return;
         }
-        this.text.doHighLight.apply(this.text, arguments);
+        this.text.doHighLight(...arguments);
-    },
+    }
 
-    unHighLight: function () {
+    unHighLight() {
-        this.text.unHighLight.apply(this.text, arguments);
+        this.text.unHighLight(...arguments);
-    },
+    }
 
-    isValid: function () {
+    isValid() {
         return this.editor.isValid();
-    },
+    }
 
-    setErrorText: function (text) {
+    setErrorText(text) {
         this.editor.setErrorText(text);
-    },
+    }
 
-    getErrorText: function () {
+    getErrorText() {
         return this.editor.getErrorText();
-    },
+    }
 
-    isEditing: function () {
+    isEditing() {
         return this.editor.isEditing();
-    },
+    }
 
-    getLastValidValue: function () {
+    getLastValidValue() {
         return this.editor.getLastValidValue();
-    },
+    }
 
-    getLastChangedValue: function () {
+    getLastChangedValue() {
         return this.editor.getLastChangedValue();
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.editor.setValue(v);
         this._checkText();
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.editor.getValue();
-    },
+    }
 
-    getState: function () {
+    getState() {
         return this.text.getValue();
-    },
+    }
 
-    setState: function (v) {
+    setState(v) {
-        var o = this.options;
+        const o = this.options;
         this._showHint();
-        v = (BI.isEmpty(v) || v == o.text) ? o.text : v + o.text;
+        v = isEmpty(v) || v === o.text ? o.text : v + o.text;
         this.text.setValue(v);
     }
-});
+}
-BI.SignTextEditor.EVENT_CONFIRM = "EVENT_CONFIRM";
-BI.SignTextEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM";
-BI.SignTextEditor.EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL";
-
-BI.shortcut("bi.sign_text_editor", BI.SignTextEditor);

src/widget/singleslider/button/iconbutton.slider.js

@@ -1,26 +1,24 @@
-/**
+import { shortcut, Widget, Layout } from "@/core";
- * Created by zcf on 2016/9/22.
- */
-BI.SliderIconButton = BI.inherit(BI.Widget, {
 
-    props: {
+@shortcut()
+export class SliderIconButton extends Widget {
+    static xtype = "bi.single_slider_button";
+
+    props = {
         baseCls: "bi-single-slider-button slider-button bi-high-light-border",
         height: 8,
         width: 8,
-    },
+    }
-
+    constants = {
-    constants: {
         LARGE_SIZE: 16,
         NORMAL_SIZE: 12,
         LARGE_OFFSET: 4,
-        NORMAL_OFFSET: 6
+        NORMAL_OFFSET: 6,
-    },
+    };
 
-    render: function () {
+    render() {
-        var self = this;
         return {
-            type: "bi.layout",
+            type: Layout.xtype,
         };
     }
-});
+}
-BI.shortcut("bi.single_slider_button", BI.SliderIconButton);

src/widget/singleslider/index.js

@@ -0,0 +1,5 @@
+export { SingleSlider } from "./singleslider";
+export { SingleSliderLabel } from "./singleslider.label";
+export { SingleSliderNormal } from "./singleslider.normal";
+export { SignTextEditor } from "./button/editor.sign.text";
+export { SliderIconButton } from "./button/iconbutton.slider";

src/widget/singleslider/singleslider.js

@@ -1,8 +1,29 @@
-/**
+import {
- * Created by zcf on 2016/9/22.
+    shortcut,
- */
+    createWidget,
-BI.SingleSlider = BI.inherit(BI.Single, {
+    parseFloat,
-    _constant: {
+    toPix,
+    Layout,
+    VerticalAdaptLayout,
+    AbsoluteLayout,
+    VerticalLayout,
+    HorizontalAutoLayout,
+    clamp,
+    isNumeric,
+    isNull,
+    parseInt,
+    i18nText,
+    isNotEmptyString,
+    MouseMoveTracker
+} from "@/core";
+import { Single } from "@/base";
+import { SignEditor } from "@/case";
+
+@shortcut()
+export class SingleSlider extends Single {
+    static xtype = "bi.single_slider";
+
+    _constant = {
         EDITOR_WIDTH: 90,
         EDITOR_HEIGHT: 20,
         SLIDER_WIDTH_HALF: 15,
@@ -10,19 +31,21 @@ BI.SingleSlider = BI.inherit(BI.Single, {
         SLIDER_HEIGHT: 30,
         TRACK_HEIGHT: 24,
         TRACK_GAP_HALF: 7,
-        TRACK_GAP: 14
+        TRACK_GAP: 14,
-    },
+    }
 
-    props: {
+    props = {
         baseCls: "bi-single-slider bi-slider-track",
         digit: false,
         unit: "",
         value: "",
         min: 0,
         max: 100,
-    },
+    };
 
-    beforeMount: function () {
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    beforeMount() {
         const { value, min, max } = this.options;
         this.setMinAndMax({
             min,
@@ -30,175 +53,205 @@ BI.SingleSlider = BI.inherit(BI.Single, {
         });
         this.setValue(value);
         this.populate();
-    },
+    }
 
-    render: function () {
+    render() {
-        var self = this, o = this.options;
+        const o = this.options;
-        var c = this._constant;
+        const c = this._constant;
         this.enable = false;
         this.value = "";
 
-        this.grayTrack = BI.createWidget({
+        this.grayTrack = createWidget({
-            type: "bi.layout",
+            type: Layout.xtype,
             cls: "gray-track",
-            height: 6
+            height: 6,
         });
-        this.blueTrack = BI.createWidget({
+        this.blueTrack = createWidget({
-            type: "bi.layout",
+            type: Layout.xtype,
             cls: "blue-track bi-high-light-background",
-            height: 6
+            height: 6,
         });
         this.track = this._createTrackWrapper();
 
-        this.slider = BI.createWidget({
+        this.slider = createWidget({
-            type: "bi.single_slider_button"
+            type: "bi.single_slider_button",
         });
         this._draggable(this.slider);
-        var sliderVertical = BI.createWidget({
+        const sliderVertical = createWidget({
-            type: "bi.vertical_adapt",
+            type: VerticalAdaptLayout.xtype,
             cls: "slider-wrapper",
             columnSize: ["fill"],
-            items: [{
+            items: [
-                type: "bi.absolute",
+                {
-                items: [
+                    type: AbsoluteLayout.xtype,
-                    {
+                    items: [
-                        el: this.slider,
+                        {
-                        top: 8,
+                            el: this.slider,
-                    }
+                            top: 8,
-                ],
+                        }
-                height: c.SLIDER_HEIGHT
+                    ],
-            }],
+                    height: c.SLIDER_HEIGHT,
+                }
+            ],
             hgap: c.SLIDER_WIDTH_HALF,
-            height: c.SLIDER_HEIGHT
+            height: c.SLIDER_HEIGHT,
         });
         // 这边其实是有问题的，拖拽区域是个圆，在圆的边缘拖拽后放开，这边计算出来的蓝条宽度实际上会比放开时长一点或者短一点
-        sliderVertical.element.click(function (e) {
+        sliderVertical.element.click(e => {
-            if (self.enable && self.isEnabled() && sliderVertical.element[0] === e.originalEvent.target) {
+            if (
-                var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF;
+                this.enable &&
-                var trackLength = self.track.element[0].scrollWidth - c.TRACK_GAP;
+                this.isEnabled() &&
-                var percent = 0;
+                sliderVertical.element[0] === e.originalEvent.target
+            ) {
+                const offset =
+                    e.clientX -
+                    this.element.offset().left -
+                    c.SLIDER_WIDTH_HALF;
+                const trackLength =
+                    this.track.element[0].scrollWidth - c.TRACK_GAP;
+                let percent = 0;
                 if (offset < 0) {
                     percent = 0;
                 }
                 if (offset > 0 && offset < trackLength) {
-                    percent = offset * 100 / self._getGrayTrackLength();
+                    percent = (offset * 100) / this._getGrayTrackLength();
                 }
                 if (offset >= trackLength) {
                     percent = 100;
                 }
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                const significantPercent = parseFloat(percent.toFixed(1));
-                self._setAllPosition(significantPercent);
+                this._setAllPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
+                let v = this._getValueByPercent(significantPercent);
                 v = o.digit === false ? v : v.toFixed(o.digit);
-                self.label.setValue(v);
+                this.label.setValue(v);
-                self.value = v;
+                this.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+                this.fireEvent(SingleSlider.EVENT_CHANGE);
             }
         });
-        this.label = BI.createWidget({
+        this.label = createWidget({
             type: "bi.sign_text_editor",
             cls: "slider-editor-button",
             text: o.unit,
-            width: BI.toPix(c.EDITOR_WIDTH, 2),
+            width: toPix(c.EDITOR_WIDTH, 2),
-            height: BI.toPix(c.EDITOR_HEIGHT, 2),
+            height: toPix(c.EDITOR_HEIGHT, 2),
             allowBlank: false,
             textAlign: "center",
-            validationChecker: function (v) {
+            validationChecker: v => this._checkValidation(v),
-                return self._checkValidation(v);
-            }
         });
-        this.label.element.hover(function () {
+        this.label.element.hover(
-            self.label.element.removeClass("bi-border").addClass("bi-border");
+            () => {
-        }, function () {
+                this.label.element
-            self.label.element.removeClass("bi-border");
+                    .removeClass("bi-border")
-        });
+                    .addClass("bi-border");
-        this.label.on(BI.SignEditor.EVENT_CONFIRM, function () {
+            },
-            var v = BI.parseFloat(this.getValue());
+            () => {
-            var percent = self._getPercentByValue(v);
+                this.label.element.removeClass("bi-border");
-            var significantPercent = BI.parseFloat(percent.toFixed(1));
+            }
-            self._setAllPosition(significantPercent);
+        );
+        this.label.on(SignEditor.EVENT_CONFIRM, () => {
+            const v = parseFloat(this.getValue());
+            const percent = this._getPercentByValue(v);
+            const significantPercent = parseFloat(percent.toFixed(1));
+            this._setAllPosition(significantPercent);
             this.setValue(v);
-            self.value = v;
+            this.value = v;
-            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+            this.fireEvent(SingleSlider.EVENT_CHANGE);
         });
         this._setVisible(false);
+        
         return {
-            type: "bi.absolute",
+            type: AbsoluteLayout.xtype,
-            items: [{
+            items: [
-                el: {
+                {
-                    type: "bi.vertical",
+                    el: {
-                    items: [{
+                        type: VerticalLayout.xtype,
-                        type: "bi.absolute",
+                        items: [
-                        items: [{
+                            {
-                            el: this.track,
+                                type: AbsoluteLayout.xtype,
-                            width: "100%",
+                                items: [
-                            height: c.TRACK_HEIGHT
+                                    {
-                        }]
+                                        el: this.track,
-                    }],
+                                        width: "100%",
-                    hgap: c.TRACK_GAP_HALF,
+                                        height: c.TRACK_HEIGHT,
-                    height: c.TRACK_HEIGHT
+                                    }
+                                ],
+                            }
+                        ],
+                        hgap: c.TRACK_GAP_HALF,
+                        height: c.TRACK_HEIGHT,
+                    },
+                    top: 23,
+                    left: 0,
+                    width: "100%",
                 },
-                top: 23,
+                {
-                left: 0,
+                    el: sliderVertical,
-                width: "100%"
+                    top: 20,
-            }, {
+                    left: 0,
-                el: sliderVertical,
+                    width: "100%",
-                top: 20,
-                left: 0,
-                width: "100%"
-            }, {
-                el: {
-                    type: "bi.vertical",
-                    items: [{
-                        type: "bi.horizontal_auto",
-                        items: [this.label]
-                    }],
-                    // height: c.EDITOR_HEIGHT
                 },
-                top: 0,
+                {
-                left: 0,
+                    el: {
-                width: "100%"
+                        type: VerticalLayout.xtype,
-            }]
+                        items: [
+                            {
+                                type: HorizontalAutoLayout.xtype,
+                                items: [this.label],
+                            }
+                        ],
+                        // height: c.EDITOR_HEIGHT
+                    },
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                }
+            ],
         };
-    },
+    }
 
-    _draggable: function (widget) {
+    _draggable(widget) {
-        var self = this, o = this.options;
+        const o = this.options;
-        var startDrag = false;
+        let startDrag = false;
-        var size = 0, offset = 0, defaultSize = 0;
+        let size = 0,
-        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            offset = 0,
-            if (mouseMoveTracker.isDragging()) {
+            defaultSize = 0;
-                startDrag = true;
+        const mouseMoveTracker = new MouseMoveTracker(
-                offset += deltaX;
+            (deltaX => {
-                size = optimizeSize(defaultSize + offset);
+                if (mouseMoveTracker.isDragging()) {
-                widget.element.addClass("dragging");
+                    startDrag = true;
-                var percent = size * 100 / (self._getGrayTrackLength());
+                    offset += deltaX;
-                var significantPercent = BI.parseFloat(percent.toFixed(1));// 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                    size = optimizeSize(defaultSize + offset);
-                self._setBlueTrack(significantPercent);
+                    widget.element.addClass("dragging");
-                self._setLabelPosition(significantPercent);
+                    const percent = (size * 100) / this._getGrayTrackLength();
-                self._setSliderPosition(significantPercent);
+                    const significantPercent = parseFloat(percent.toFixed(1)); // 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                var v = self._getValueByPercent(significantPercent);
+                    this._setBlueTrack(significantPercent);
-                v = o.digit === false ? v : v.toFixed(o.digit);
+                    this._setLabelPosition(significantPercent);
-                self.label.setValue(v);
+                    this._setSliderPosition(significantPercent);
-                self.value = v;
+                    let v = this._getValueByPercent(significantPercent);
-            }
+                    v = o.digit === false ? v : v.toFixed(o.digit);
-        }, function () {
+                    this.label.setValue(v);
-            if (startDrag === true) {
+                    this.value = v;
-                size = optimizeSize(size);
+                }
-                var percent = size * 100 / (self._getGrayTrackLength());
+            }),
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
+            (() => {
-                self._setSliderPosition(significantPercent);
+                if (startDrag === true) {
-                size = 0;
+                    size = optimizeSize(size);
-                offset = 0;
+                    const percent = (size * 100) / this._getGrayTrackLength();
-                defaultSize = size;
+                    const significantPercent = parseFloat(percent.toFixed(1));
-                startDrag = false;
+                    this._setSliderPosition(significantPercent);
-            }
+                    size = 0;
-            widget.element.removeClass("dragging");
+                    offset = 0;
-            mouseMoveTracker.releaseMouseMoves();
+                    defaultSize = size;
-            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+                    startDrag = false;
-        }, window);
+                }
+                widget.element.removeClass("dragging");
+                mouseMoveTracker.releaseMouseMoves();
+                this.fireEvent(SingleSlider.EVENT_CHANGE);
+            }),
+            window
+        );
         widget.element.on("mousedown", function (event) {
-            if(!widget.isEnabled()) {
+            if (!widget.isEnabled()) {
                 return;
             }
             defaultSize = this.offsetLeft;
@@ -206,100 +259,107 @@ BI.SingleSlider = BI.inherit(BI.Single, {
             mouseMoveTracker.captureMouseMoves(event);
         });
 
-        function optimizeSize (s) {
+        const optimizeSize = s => clamp(s, 0, this._getGrayTrackLength());
-            return BI.clamp(s, 0, self._getGrayTrackLength());
+    }
-        }
-    },
 
-    _createTrackWrapper: function () {
+    _createTrackWrapper() {
-        return BI.createWidget({
+        return createWidget({
-            type: "bi.absolute",
+            type: AbsoluteLayout.xtype,
-            items: [{
+            items: [
-                el: {
+                {
-                    type: "bi.vertical",
+                    el: {
-                    items: [{
+                        type: VerticalLayout.xtype,
-                        type: "bi.absolute",
+                        items: [
-                        items: [{
+                            {
-                            el: this.grayTrack,
+                                type: AbsoluteLayout.xtype,
-                            top: 0,
+                                items: [
-                            left: 0,
+                                    {
-                            width: "100%"
+                                        el: this.grayTrack,
-                        }, {
+                                        top: 0,
-                            el: this.blueTrack,
+                                        left: 0,
-                            top: 0,
+                                        width: "100%",
-                            left: 0,
+                                    },
-                            width: "0%"
+                                    {
-                        }]
+                                        el: this.blueTrack,
-                    }],
+                                        top: 0,
-                    hgap: 8,
+                                        left: 0,
-                    height: 8
+                                        width: "0%",
-                },
+                                    }
-                top: 8,
+                                ],
-                left: 0,
+                            }
-                width: "100%"
+                        ],
-            }]
+                        hgap: 8,
+                        height: 8,
+                    },
+                    top: 8,
+                    left: 0,
+                    width: "100%",
+                }
+            ],
         });
-    },
+    }
 
-    _checkValidation: function (v) {
+    _checkValidation(v) {
-        var o = this.options;
+        const o = this.options;
-        var valid = false;
+        let valid = false;
-        if (BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max)) {
+        if (isNumeric(v) && !(isNull(v) || v < this.min || v > this.max)) {
-            if(o.digit === false) {
+            if (o.digit === false) {
                 valid = true;
-            }else{
+            } else {
-                var dotText = (v + "").split(".")[1] || "";
+                const dotText = (`${v}`).split(".")[1] || "";
-                valid = (dotText.length === o.digit);
+                valid = dotText.length === o.digit;
             }
         }
+        
         return valid;
-    },
+    }
 
-    _setBlueTrack: function (percent) {
+    _setBlueTrack(percent) {
-        this.blueTrack.element.css({width: percent + "%"});
+        this.blueTrack.element.css({ width: `${percent}%` });
-    },
+    }
 
-    _setLabelPosition: function (percent) {
+    _setLabelPosition(percent) {
         // this.label.element.css({left: percent + "%"});
-    },
+    }
 
-    _setSliderPosition: function (percent) {
+    _setSliderPosition(percent) {
-        this.slider.element.css({left: percent + "%"});
+        this.slider.element.css({ left: `${percent}%` });
-    },
+    }
 
-    _setAllPosition: function (percent) {
+    _setAllPosition(percent) {
         this._setSliderPosition(percent);
         this._setLabelPosition(percent);
         this._setBlueTrack(percent);
-    },
+    }
 
-    _setVisible: function (visible) {
+    _setVisible(visible) {
         this.slider.setVisible(visible);
         this.label.setVisible(visible);
-    },
+    }
 
-    _getGrayTrackLength: function () {
+    _getGrayTrackLength() {
         return this.grayTrack.element[0].scrollWidth;
-    },
+    }
 
-    _getValueByPercent: function (percent) {
+    _getValueByPercent(percent) {
-        var thousandth = BI.parseInt(percent * 10);
+        const thousandth = parseInt(percent * 10);
-        return (((this.max - this.min) * thousandth) / 1000 + this.min);
+        
-    },
+        return ((this.max - this.min) * thousandth) / 1000 + this.min;
+    }
 
-    _getPercentByValue: function (v) {
+    _getPercentByValue(v) {
-        return (v - this.min) * 100 / (this.max - this.min);
+        return ((v - this.min) * 100) / (this.max - this.min);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.value;
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
-        var o = this.options;
+        const o = this.options;
-        v = BI.parseFloat(v);
+        v = parseFloat(v);
         v = o.digit === false ? v : v.toFixed(o.digit);
-        if ((!isNaN(v))) {
+        if (!isNaN(v)) {
             if (this._checkValidation(v)) {
                 this.value = v;
             }
@@ -310,47 +370,63 @@ BI.SingleSlider = BI.inherit(BI.Single, {
                 this.value = this.min;
             }
         }
-    },
+    }
 
-    _setEnable: function (b) {
+    _setEnable(b) {
-        BI.SingleSlider.superclass._setEnable.apply(this, [b]);
+        super._setEnable.apply(this, [b]);
-        if(b) {
+        if (b) {
-            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+            this.blueTrack.element
+                .removeClass("disabled-blue-track")
+                .addClass("blue-track");
         } else {
-            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+            this.blueTrack.element
+                .removeClass("blue-track")
+                .addClass("disabled-blue-track");
         }
-    },
+    }
 
-    setMinAndMax: function (v) {
+    setMinAndMax(v) {
-        var minNumber = BI.parseFloat(v.min);
+        const minNumber = parseFloat(v.min);
-        var maxNumber = BI.parseFloat(v.max);
+        const maxNumber = parseFloat(v.max);
-        if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) {
+        if (!isNaN(minNumber) && !isNaN(maxNumber) && maxNumber > minNumber) {
             this.min = minNumber;
             this.max = maxNumber;
         }
-    },
+    }
 
-    reset: function () {
+    reset() {
         this._setVisible(false);
         this.enable = false;
         this.value = "";
         this.min = 0;
         this.max = 0;
         this._setBlueTrack(0);
-    },
+    }
 
-    populate: function () {
+    populate() {
-        var o = this.options;
+        const o = this.options;
         if (!isNaN(this.min) && !isNaN(this.max)) {
             this._setVisible(true);
             this.enable = true;
             if (o.digit) {
-                this.label.setErrorText(BI.i18nText("BI-Basic_Please_Enter_Number_Between", this.min, this.max));
+                this.label.setErrorText(
+                    i18nText(
+                        "BI-Basic_Please_Enter_Number_Between",
+                        this.min,
+                        this.max
+                    )
+                );
             } else {
-                this.label.setErrorText(BI.i18nText("BI-Basic_Please_Enter_Integer_Number_Between", this.min, this.max));
+                this.label.setErrorText(
+                    i18nText(
+                        "BI-Basic_Please_Enter_Integer_Number_Between",
+                        this.min,
+                        this.max
+                    )
+                );
             }
 
-            if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) {
+            if (isNumeric(this.value) || isNotEmptyString(this.value)) {
                 this.label.setValue(this.value);
                 this._setAllPosition(this._getPercentByValue(this.value));
             } else {
@@ -359,6 +435,4 @@ BI.SingleSlider = BI.inherit(BI.Single, {
             }
         }
     }
-});
+}
-BI.SingleSlider.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.single_slider", BI.SingleSlider);

src/widget/singleslider/singleslider.label.js

@@ -1,8 +1,26 @@
-/**
+import {
- * Created by Urthur on 2017/9/12.
+    shortcut,
- */
+    createWidget,
-BI.SingleSliderLabel = BI.inherit(BI.Single, {
+    parseFloat,
-    _constant: {
+    toPix,
+    Layout,
+    VerticalAdaptLayout,
+    AbsoluteLayout,
+    VerticalLayout,
+    HorizontalAutoLayout,
+    clamp,
+    isNumeric,
+    isNull,
+    parseInt,
+    isNotEmptyString,
+    MouseMoveTracker
+} from "@/core";
+import { Single, Label } from "@/base";
+
+@shortcut()
+export class SingleSliderLabel extends Single {
+    static xtype = "bi.single_slider_label";
+    _constant = {
         EDITOR_WIDTH: 90,
         EDITOR_HEIGHT: 20,
         HEIGHT: 20,
@@ -11,19 +29,20 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
         SLIDER_HEIGHT: 30,
         TRACK_HEIGHT: 24,
         TRACK_GAP_HALF: 7,
-        TRACK_GAP: 14
+        TRACK_GAP: 14,
-    },
+    }
-
+    props = {
-    props: {
         baseCls: "bi-single-slider-label bi-slider-track",
         digit: false,
         unit: "",
         value: "",
         min: 0,
         max: 100,
-    },
+    };
 
-    beforeMount: function () {
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    beforeMount() {
         const { value, min, max } = this.options;
         this.setMinAndMax({
             min,
@@ -31,152 +50,179 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
         });
         this.setValue(value);
         this.populate();
-    },
+    }
 
-    render: function () {
+    render() {
-        var self = this, o = this.options;
+        const o = this.options;
-        var c = this._constant;
+        const c = this._constant;
         this.enable = false;
         this.value = "";
 
-        this.grayTrack = BI.createWidget({
+        this.grayTrack = createWidget({
-            type: "bi.layout",
+            type: Layout.xtype,
             cls: "gray-track",
-            height: 6
+            height: 6,
         });
-        this.blueTrack = BI.createWidget({
+        this.blueTrack = createWidget({
-            type: "bi.layout",
+            type: Layout.xtype,
             cls: "blue-track bi-high-light-background",
-            height: 6
+            height: 6,
         });
         this.track = this._createTrackWrapper();
 
-        this.slider = BI.createWidget({
+        this.slider = createWidget({
-            type: "bi.single_slider_button"
+            type: "bi.single_slider_button",
         });
         this._draggable(this.slider);
-        var sliderVertical = BI.createWidget({
+        const sliderVertical = createWidget({
-            type: "bi.vertical_adapt",
+            type: VerticalAdaptLayout.xtype,
             columnSize: ["fill"],
-            items: [{
+            items: [
-                type: "bi.absolute",
+                {
-                items: [
+                    type: AbsoluteLayout.xtype,
-                    {
+                    items: [
-                        el: this.slider,
+                        {
-                        top: 8,
+                            el: this.slider,
-                    }
+                            top: 8,
-                ],
+                        }
-                height: c.SLIDER_HEIGHT
+                    ],
-            }],
+                    height: c.SLIDER_HEIGHT,
+                }
+            ],
             hgap: c.SLIDER_WIDTH_HALF,
-            height: c.SLIDER_HEIGHT
+            height: c.SLIDER_HEIGHT,
         });
-        sliderVertical.element.click(function (e) {
+        sliderVertical.element.click(e => {
-            if (self.enable && self.isEnabled() && sliderVertical.element[0] === e.originalEvent.target) {
+            if (
-                var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF;
+                this.enable &&
-                var trackLength = self.track.element[0].scrollWidth - c.TRACK_GAP;
+                this.isEnabled() &&
-                var percent = 0;
+                sliderVertical.element[0] === e.originalEvent.target
+            ) {
+                const offset =
+                    e.clientX -
+                    this.element.offset().left -
+                    c.SLIDER_WIDTH_HALF;
+                const trackLength =
+                    this.track.element[0].scrollWidth - c.TRACK_GAP;
+                let percent = 0;
                 if (offset < 0) {
                     percent = 0;
                 }
                 if (offset > 0 && offset < trackLength) {
-                    percent = offset * 100 / self._getGrayTrackLength();
+                    percent = (offset * 100) / this._getGrayTrackLength();
                 }
                 if (offset >= trackLength) {
                     percent = 100;
                 }
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                const significantPercent = parseFloat(percent.toFixed(1));
-                self._setAllPosition(significantPercent);
+                this._setAllPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
+                let v = this._getValueByPercent(significantPercent);
                 v = o.digit === false ? v : v.toFixed(o.digit);
-                self.label.setText(v + o.unit);
+                this.label.setText(v + o.unit);
-                self.value = v;
+                this.value = v;
-                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+                this.fireEvent(SingleSliderLabel.EVENT_CHANGE);
             }
         });
-        this.label = BI.createWidget({
+        this.label = createWidget({
-            type: "bi.label",
+            type: Label.xtype,
             height: c.HEIGHT,
-            width: BI.toPix(c.EDITOR_WIDTH, 2)
+            width: toPix(c.EDITOR_WIDTH, 2),
         });
 
         this._setVisible(false);
-        return ({
+        
-            type: "bi.absolute",
+        return {
-            items: [{
+            type: AbsoluteLayout.xtype,
-                el: {
+            items: [
-                    type: "bi.vertical",
+                {
-                    items: [{
+                    el: {
-                        type: "bi.absolute",
+                        type: VerticalLayout.xtype,
-                        items: [{
+                        items: [
-                            el: this.track,
+                            {
-                            width: "100%",
+                                type: AbsoluteLayout.xtype,
-                            height: c.TRACK_HEIGHT
+                                items: [
-                        }]
+                                    {
-                    }],
+                                        el: this.track,
-                    hgap: c.TRACK_GAP_HALF,
+                                        width: "100%",
-                    height: c.TRACK_HEIGHT
+                                        height: c.TRACK_HEIGHT,
+                                    }
+                                ],
+                            }
+                        ],
+                        hgap: c.TRACK_GAP_HALF,
+                        height: c.TRACK_HEIGHT,
+                    },
+                    top: 13,
+                    left: 0,
+                    width: "100%",
                 },
-                top: 13,
+                {
-                left: 0,
+                    el: sliderVertical,
-                width: "100%"
+                    top: 10,
-            }, {
+                    left: 0,
-                el: sliderVertical,
+                    width: "100%",
-                top: 10,
-                left: 0,
-                width: "100%"
-            }, {
-                el: {
-                    type: "bi.vertical",
-                    items: [{
-                        type: "bi.horizontal_auto",
-                        items: [this.label]
-                    }],
-                    height: c.EDITOR_HEIGHT
                 },
-                top: 0,
+                {
-                left: 0,
+                    el: {
-                width: "100%"
+                        type: VerticalLayout.xtype,
-            }]
+                        items: [
-        });
+                            {
-    },
+                                type: HorizontalAutoLayout.xtype,
+                                items: [this.label],
+                            }
+                        ],
+                        height: c.EDITOR_HEIGHT,
+                    },
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                }
+            ],
+        };
+    }
 
-    _draggable: function (widget) {
+    _draggable(widget) {
-        var self = this, o = this.options;
+        const o = this.options;
-        var startDrag = false;
+        let startDrag = false;
-        var size = 0, offset = 0, defaultSize = 0;
+        let size = 0,
-        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            offset = 0,
-            if (mouseMoveTracker.isDragging()) {
+            defaultSize = 0;
-                startDrag = true;
+        const mouseMoveTracker = new MouseMoveTracker(
-                offset += deltaX;
+            (deltaX => {
-                size = optimizeSize(defaultSize + offset);
+                if (mouseMoveTracker.isDragging()) {
-                widget.element.addClass("dragging");
+                    startDrag = true;
-                var percent = size * 100 / (self._getGrayTrackLength());
+                    offset += deltaX;
-                var significantPercent = BI.parseFloat(percent.toFixed(1));// 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                    size = optimizeSize(defaultSize + offset);
-                self._setBlueTrack(significantPercent);
+                    widget.element.addClass("dragging");
-                self._setLabelPosition(significantPercent);
+                    const percent = (size * 100) / this._getGrayTrackLength();
-                self._setSliderPosition(significantPercent);
+                    const significantPercent = parseFloat(percent.toFixed(1)); // 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                var v = self._getValueByPercent(significantPercent);
+                    this._setBlueTrack(significantPercent);
-                v = o.digit === false ? v : v.toFixed(o.digit);
+                    this._setLabelPosition(significantPercent);
-                self.label.setValue(v + o.unit);
+                    this._setSliderPosition(significantPercent);
-                self.value = v;
+                    let v = this._getValueByPercent(significantPercent);
-                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+                    v = o.digit === false ? v : v.toFixed(o.digit);
-            }
+                    this.label.setValue(v + o.unit);
-        }, function () {
+                    this.value = v;
-            if (startDrag === true) {
+                    this.fireEvent(SingleSliderLabel.EVENT_CHANGE);
-                size = optimizeSize(size);
+                }
-                var percent = size * 100 / (self._getGrayTrackLength());
+            }),
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
+            (() => {
-                self._setSliderPosition(significantPercent);
+                if (startDrag === true) {
-                size = 0;
+                    size = optimizeSize(size);
-                offset = 0;
+                    const percent = (size * 100) / this._getGrayTrackLength();
-                defaultSize = size;
+                    const significantPercent = parseFloat(percent.toFixed(1));
-                startDrag = false;
+                    this._setSliderPosition(significantPercent);
-            }
+                    size = 0;
-            widget.element.removeClass("dragging");
+                    offset = 0;
-            mouseMoveTracker.releaseMouseMoves();
+                    defaultSize = size;
-            self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+                    startDrag = false;
-        }, window);
+                }
+                widget.element.removeClass("dragging");
+                mouseMoveTracker.releaseMouseMoves();
+                this.fireEvent(SingleSliderLabel.EVENT_CHANGE);
+            }),
+            window
+        );
         widget.element.on("mousedown", function (event) {
             if (!widget.isEnabled()) {
                 return;
@@ -186,99 +232,109 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
             mouseMoveTracker.captureMouseMoves(event);
         });
 
-        function optimizeSize(s) {
+        const optimizeSize = s => clamp(s, 0, this._getGrayTrackLength());
-            return BI.clamp(s, 0, self._getGrayTrackLength());
+    }
-        }
-    },
 
-    _createTrackWrapper: function () {
+    _createTrackWrapper() {
-        return BI.createWidget({
+        return createWidget({
-            type: "bi.absolute",
+            type: AbsoluteLayout.xtype,
-            items: [{
+            items: [
-                el: {
+                {
-                    type: "bi.vertical",
+                    el: {
-                    items: [{
+                        type: VerticalLayout.xtype,
-                        type: "bi.absolute",
+                        items: [
-                        items: [{
+                            {
-                            el: this.grayTrack,
+                                type: AbsoluteLayout.xtype,
-                            top: 0,
+                                items: [
-                            left: 0,
+                                    {
-                            width: "100%"
+                                        el: this.grayTrack,
-                        }, {
+                                        top: 0,
-                            el: this.blueTrack,
+                                        left: 0,
-                            top: 0,
+                                        width: "100%",
-                            left: 0,
+                                    },
-                            width: "0%"
+                                    {
-                        }]
+                                        el: this.blueTrack,
-                    }],
+                                        top: 0,
-                    hgap: 8,
+                                        left: 0,
-                    height: 8
+                                        width: "0%",
-                },
+                                    }
-                top: 8,
+                                ],
-                left: 0,
+                            }
-                width: "100%"
+                        ],
-            }]
+                        hgap: 8,
+                        height: 8,
+                    },
+                    top: 8,
+                    left: 0,
+                    width: "100%",
+                }
+            ],
         });
-    },
+    }
 
-    _checkValidation: function (v) {
+    _checkValidation(v) {
-        return BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max);
+        return isNumeric(v) && !(isNull(v) || v < this.min || v > this.max);
-    },
+    }
 
-    _setBlueTrack: function (percent) {
+    _setBlueTrack(percent) {
-        this.blueTrack.element.css({ width: percent + "%" });
+        this.blueTrack.element.css({ width: `${percent}%` });
-    },
+    }
 
-    _setLabelPosition: function (percent) {
+    _setLabelPosition(percent) {
         // this.label.element.css({left: percent + "%"});
-    },
+    }
 
-    _setSliderPosition: function (percent) {
+    _setSliderPosition(percent) {
-        this.slider.element.css({ left: percent + "%" });
+        this.slider.element.css({ left: `${percent}%` });
-    },
+    }
 
-    _setAllPosition: function (percent) {
+    _setAllPosition(percent) {
         this._setSliderPosition(percent);
         this._setLabelPosition(percent);
         this._setBlueTrack(percent);
-    },
+    }
 
-    _setVisible: function (visible) {
+    _setVisible(visible) {
         this.slider.setVisible(visible);
         this.label.setVisible(visible);
-    },
+    }
 
-    _getGrayTrackLength: function () {
+    _getGrayTrackLength() {
         return this.grayTrack.element[0].scrollWidth;
-    },
+    }
 
-    _getValueByPercent: function (percent) {
+    _getValueByPercent(percent) {
-        var thousandth = BI.parseInt(percent * 10);
+        const thousandth = parseInt(percent * 10);
-        return (((this.max - this.min) * thousandth) / 1000 + this.min);
+        
-    },
+        return ((this.max - this.min) * thousandth) / 1000 + this.min;
+    }
 
-    _getPercentByValue: function (v) {
+    _getPercentByValue(v) {
-        return (v - this.min) * 100 / (this.max - this.min);
+        return ((v - this.min) * 100) / (this.max - this.min);
-    },
+    }
 
-    _setEnable: function (b) {
+    _setEnable(b) {
-        BI.SingleSliderLabel.superclass._setEnable.apply(this, [b]);
+        super._setEnable.apply(this, [b]);
         if (b) {
-            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+            this.blueTrack.element
+                .removeClass("disabled-blue-track")
+                .addClass("blue-track");
         } else {
-            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+            this.blueTrack.element
+                .removeClass("blue-track")
+                .addClass("disabled-blue-track");
         }
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.value;
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
-        var o = this.options;
+        const o = this.options;
-        v = BI.parseFloat(v);
+        v = parseFloat(v);
         v = o.digit === false ? v : v.toFixed(o.digit);
-        if ((!isNaN(v))) {
+        if (!isNaN(v)) {
             if (this._checkValidation(v)) {
                 this.value = v;
             }
@@ -289,32 +345,32 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
                 this.value = this.min;
             }
         }
-    },
+    }
 
-    setMinAndMax: function (v) {
+    setMinAndMax(v) {
-        var minNumber = BI.parseFloat(v.min);
+        const minNumber = parseFloat(v.min);
-        var maxNumber = BI.parseFloat(v.max);
+        const maxNumber = parseFloat(v.max);
-        if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber)) {
+        if (!isNaN(minNumber) && !isNaN(maxNumber) && maxNumber > minNumber) {
             this.min = minNumber;
             this.max = maxNumber;
         }
-    },
+    }
 
-    reset: function () {
+    reset() {
         this._setVisible(false);
         this.enable = false;
         this.value = "";
         this.min = 0;
         this.max = 0;
         this._setBlueTrack(0);
-    },
+    }
 
-    populate: function () {
+    populate() {
-        var o = this.options;
+        const o = this.options;
         if (!isNaN(this.min) && !isNaN(this.max)) {
             this._setVisible(true);
             this.enable = true;
-            if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) {
+            if (isNumeric(this.value) || isNotEmptyString(this.value)) {
                 this.label.setValue(this.value + o.unit);
                 this._setAllPosition(this._getPercentByValue(this.value));
             } else {
@@ -323,6 +379,4 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
             }
         }
     }
-});
+}
-BI.SingleSliderLabel.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.single_slider_label", BI.SingleSliderLabel);

src/widget/singleslider/singleslider.normal.js

@@ -1,28 +1,43 @@
-/**
+import {
- * normal single slider
+    shortcut,
- * Created by Young on 2017/6/21.
+    createWidget,
- */
+    parseFloat,
-BI.SingleSliderNormal = BI.inherit(BI.Single, {
+    VerticalAdaptLayout,
+    AbsoluteLayout,
+    VerticalLayout,
+    clamp,
+    Layout,
+    isNull,
+    parseInt,
+    isNumeric,
+    isNotEmptyString,
+    MouseMoveTracker
+} from "@/core";
+import { Single } from "@/base";
+import { SingleSlider } from "./singleslider";
 
-    _constant: {
+@shortcut()
+export class SingleSliderNormal extends Single {
+    static xtype = "bi.single_slider_normal";
+    _constant = {
         HEIGHT: 28,
         SLIDER_WIDTH_HALF: 15,
         SLIDER_WIDTH: 30,
         SLIDER_HEIGHT: 30,
         TRACK_HEIGHT: 24,
         TRACK_GAP_HALF: 7,
-        TRACK_GAP: 14
+        TRACK_GAP: 14,
-    },
+    }
-
+    props = {
-    props: {
         baseCls: "bi-single-slider-normal bi-slider-track",
         min: 0,
         max: 100,
         value: "",
-        // color: "#3f8ce8"
+    };
-    },
 
-    beforeMount: function () {
+    static EVENT_DRAG = "EVENT_DRAG";
+
+    beforeMount() {
         const { value, min, max } = this.options;
         this.setMinAndMax({
             min,
@@ -30,122 +45,143 @@ BI.SingleSliderNormal = BI.inherit(BI.Single, {
         });
         this.setValue(value);
         this.populate();
-    },
+    }
 
-    render: function () {
+    render() {
-        var self = this;
+        const c = this._constant;
-        var o = this.options;
-        var c = this._constant;
 
-        var track = this._createTrack();
+        const track = this._createTrack();
-        this.slider = BI.createWidget({
+        this.slider = createWidget({
-            type: "bi.single_slider_button"
+            type: "bi.single_slider_button",
         });
         this._draggable(this.slider);
 
-        var sliderVertical = BI.createWidget({
+        const sliderVertical = createWidget({
-            type: "bi.vertical_adapt",
+            type: VerticalAdaptLayout.xtype,
             columnSize: ["fill"],
-            items: [{
+            items: [
-                type: "bi.absolute",
+                {
-                items: [
+                    type: AbsoluteLayout.xtype,
-                    {
+                    items: [
-                        el: this.slider,
+                        {
-                        top: 8,
+                            el: this.slider,
-                    }
+                            top: 8,
-                ],
+                        }
-                height: c.SLIDER_HEIGHT
+                    ],
-            }],
+                    height: c.SLIDER_HEIGHT,
+                }
+            ],
             hgap: c.SLIDER_WIDTH_HALF,
-            height: c.SLIDER_HEIGHT
+            height: c.SLIDER_HEIGHT,
         });
-        sliderVertical.element.click(function (e) {
+        sliderVertical.element.click(e => {
-            if (self.enable && self.isEnabled() && sliderVertical.element[0] === e.originalEvent.target) {
+            if (
-                var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF;
+                this.enable &&
-                var trackLength = self.track.element[0].scrollWidth - c.TRACK_GAP;
+                this.isEnabled() &&
-                var percent = 0;
+                sliderVertical.element[0] === e.originalEvent.target
+            ) {
+                const offset =
+                    e.clientX -
+                    this.element.offset().left -
+                    c.SLIDER_WIDTH_HALF;
+                const trackLength =
+                    this.track.element[0].scrollWidth - c.TRACK_GAP;
+                let percent = 0;
                 if (offset < 0) {
                     percent = 0;
                 }
                 if (offset > 0 && offset < trackLength) {
-                    percent = offset * 100 / self._getGrayTrackLength();
+                    percent = (offset * 100) / this._getGrayTrackLength();
                 }
                 if (offset >= trackLength) {
                     percent = 100;
                 }
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                const significantPercent = parseFloat(percent.toFixed(1));
-                self._setAllPosition(significantPercent);
+                this._setAllPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
+                const v = this._getValueByPercent(significantPercent);
-                self.value = v;
+                this.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+                this.fireEvent(SingleSlider.EVENT_CHANGE);
             }
         });
 
         return {
-            type: "bi.absolute",
+            type: AbsoluteLayout.xtype,
             element: this,
-            items: [{
+            items: [
-                el: {
+                {
-                    type: "bi.vertical",
+                    el: {
-                    items: [{
+                        type: VerticalLayout.xtype,
-                        type: "bi.absolute",
+                        items: [
-                        items: [{
+                            {
-                            el: track,
+                                type: AbsoluteLayout.xtype,
-                            width: "100%",
+                                items: [
-                            height: c.TRACK_HEIGHT
+                                    {
-                        }]
+                                        el: track,
-                    }],
+                                        width: "100%",
-                    hgap: c.TRACK_GAP_HALF,
+                                        height: c.TRACK_HEIGHT,
-                    height: c.TRACK_HEIGHT
+                                    }
+                                ],
+                            }
+                        ],
+                        hgap: c.TRACK_GAP_HALF,
+                        height: c.TRACK_HEIGHT,
+                    },
+                    top: 3,
+                    left: 0,
+                    width: "100%",
                 },
-                top: 3,
+                {
-                left: 0,
+                    el: sliderVertical,
-                width: "100%"
+                    top: 0,
-            }, {
+                    left: 0,
-                el: sliderVertical,
+                    width: "100%",
-                top: 0,
+                }
-                left: 0,
+            ],
-                width: "100%"
-            }]
         };
-    },
+    }
 
-    _draggable: function (widget) {
+    _draggable(widget) {
-        var self = this, o = this.options;
+        const o = this.options;
-        var startDrag = false;
+        let startDrag = false;
-        var size = 0, offset = 0, defaultSize = 0;
+        let size = 0,
-        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            offset = 0,
-            if (mouseMoveTracker.isDragging()) {
+            defaultSize = 0;
-                startDrag = true;
+        const mouseMoveTracker = new MouseMoveTracker(
-                offset += deltaX;
+            (deltaX => {
-                size = optimizeSize(defaultSize + offset);
+                if (mouseMoveTracker.isDragging()) {
-                widget.element.addClass("dragging");
+                    startDrag = true;
-                var percent = size * 100 / (self._getGrayTrackLength());
+                    offset += deltaX;
-                var significantPercent = BI.parseFloat(percent.toFixed(1));// 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                    size = optimizeSize(defaultSize + offset);
-                self._setBlueTrack(significantPercent);
+                    widget.element.addClass("dragging");
-                self._setSliderPosition(significantPercent);
+                    const percent = (size * 100) / this._getGrayTrackLength();
-                var v = self._getValueByPercent(significantPercent);
+                    const significantPercent = parseFloat(percent.toFixed(1)); // 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                v = o.digit === false ? v : v.toFixed(o.digit);
+                    this._setBlueTrack(significantPercent);
-                self.value = v;
+                    this._setSliderPosition(significantPercent);
-                self.fireEvent(BI.SingleSliderNormal.EVENT_DRAG, v);
+                    let v = this._getValueByPercent(significantPercent);
-            }
+                    v = o.digit === false ? v : v.toFixed(o.digit);
-        }, function () {
+                    this.value = v;
-            if (startDrag === true) {
+                    this.fireEvent(SingleSliderNormal.EVENT_DRAG, v);
-                size = optimizeSize(size);
+                }
-                var percent = size * 100 / (self._getGrayTrackLength());
+            }),
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
+            (() => {
-                self._setSliderPosition(significantPercent);
+                if (startDrag === true) {
-                size = 0;
+                    size = optimizeSize(size);
-                offset = 0;
+                    const percent = (size * 100) / this._getGrayTrackLength();
-                defaultSize = size;
+                    const significantPercent = parseFloat(percent.toFixed(1));
-                startDrag = false;
+                    this._setSliderPosition(significantPercent);
-            }
+                    size = 0;
-            widget.element.removeClass("dragging");
+                    offset = 0;
-            mouseMoveTracker.releaseMouseMoves();
+                    defaultSize = size;
-            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+                    startDrag = false;
-        }, window);
+                }
+                widget.element.removeClass("dragging");
+                mouseMoveTracker.releaseMouseMoves();
+                this.fireEvent(SingleSlider.EVENT_CHANGE);
+            }),
+            window
+        );
         widget.element.on("mousedown", function (event) {
-            if(!widget.isEnabled()) {
+            if (!widget.isEnabled()) {
                 return;
             }
             defaultSize = this.offsetLeft;
@@ -153,110 +189,120 @@ BI.SingleSliderNormal = BI.inherit(BI.Single, {
             mouseMoveTracker.captureMouseMoves(event);
         });
 
-        function optimizeSize (s) {
+        const optimizeSize = s => clamp(s, 0, this._getGrayTrackLength());
-            return BI.clamp(s, 0, self._getGrayTrackLength());
+    }
-        }
-    },
 
-    _createTrack: function () {
+    _createTrack() {
-        var self = this;
+        this.grayTrack = createWidget({
-        var c = this._constant;
+            type: Layout.xtype,
-        this.grayTrack = BI.createWidget({
-            type: "bi.layout",
             cls: "gray-track",
-            height: 6
+            height: 6,
         });
-        this.blueTrack = BI.createWidget({
+        this.blueTrack = createWidget({
-            type: "bi.layout",
+            type: Layout.xtype,
             cls: "blue-track bi-high-light-background",
-            height: 6
+            height: 6,
         });
         if (this.options.color) {
-            this.blueTrack.element.css({"background-color": this.options.color});
+            this.blueTrack.element.css({
+                "background-color": this.options.color,
+            });
         }
 
         return {
-            type: "bi.absolute",
+            type: AbsoluteLayout.xtype,
-            items: [{
+            items: [
-                el: {
+                {
-                    type: "bi.vertical",
+                    el: {
-                    items: [{
+                        type: VerticalLayout.xtype,
-                        type: "bi.absolute",
+                        items: [
-                        items: [{
+                            {
-                            el: this.grayTrack,
+                                type: AbsoluteLayout.xtype,
-                            top: 0,
+                                items: [
-                            left: 0,
+                                    {
-                            width: "100%"
+                                        el: this.grayTrack,
-                        }, {
+                                        top: 0,
-                            el: this.blueTrack,
+                                        left: 0,
-                            top: 0,
+                                        width: "100%",
-                            left: 0,
+                                    },
-                            width: "0%"
+                                    {
-                        }]
+                                        el: this.blueTrack,
-                    }],
+                                        top: 0,
-                    hgap: 8,
+                                        left: 0,
-                    height: 8
+                                        width: "0%",
-                },
+                                    }
-                top: 8,
+                                ],
-                left: 0,
+                            }
-                width: "100%"
+                        ],
-            }],
+                        hgap: 8,
-            ref: function (ref) {
+                        height: 8,
-                self.track = ref;
+                    },
-            }
+                    top: 8,
+                    left: 0,
+                    width: "100%",
+                }
+            ],
+            ref: _ref => {
+                this.track = _ref;
+            },
         };
-    },
+    }
 
-    _checkValidation: function (v) {
+    _checkValidation(v) {
-        return !(BI.isNull(v) || v < this.min || v > this.max);
+        return !(isNull(v) || v < this.min || v > this.max);
-    },
+    }
 
-    _setBlueTrack: function (percent) {
+    _setBlueTrack(percent) {
-        this.blueTrack.element.css({width: percent + "%"});
+        this.blueTrack.element.css({ width: `${percent}%` });
-    },
+    }
 
-    _setSliderPosition: function (percent) {
+    _setSliderPosition(percent) {
-        this.slider.element.css({left: percent + "%"});
+        this.slider.element.css({ left: `${percent}%` });
-    },
+    }
 
-    _setAllPosition: function (percent) {
+    _setAllPosition(percent) {
         this._setSliderPosition(percent);
         this._setBlueTrack(percent);
-    },
+    }
 
-    _setVisible: function (visible) {
+    _setVisible(visible) {
         this.slider.setVisible(visible);
-    },
+    }
 
-    _getGrayTrackLength: function () {
+    _getGrayTrackLength() {
         return this.grayTrack.element[0].scrollWidth;
-    },
+    }
 
-    _getValueByPercent: function (percent) {
+    _getValueByPercent(percent) {
-        var thousandth = BI.parseInt(percent * 10);
+        const thousandth = parseInt(percent * 10);
-        return (((this.max - this.min) * thousandth) / 1000 + this.min);
+        
-    },
+        return ((this.max - this.min) * thousandth) / 1000 + this.min;
+    }
 
-    _getPercentByValue: function (v) {
+    _getPercentByValue(v) {
-        return (v - this.min) * 100 / (this.max - this.min);
+        return ((v - this.min) * 100) / (this.max - this.min);
-    },
+    }
 
-    _setEnable: function (b) {
+    _setEnable(b) {
-        BI.SingleSliderNormal.superclass._setEnable.apply(this, [b]);
+        super._setEnable.apply(this, [b]);
-        if(b) {
+        if (b) {
-            this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
+            this.blueTrack.element
+                .removeClass("disabled-blue-track")
+                .addClass("blue-track");
         } else {
-            this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
+            this.blueTrack.element
+                .removeClass("blue-track")
+                .addClass("disabled-blue-track");
         }
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.value;
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
-        var value = BI.parseFloat(v);
+        const value = parseFloat(v);
-        if ((!isNaN(value))) {
+        if (!isNaN(value)) {
             if (this._checkValidation(value)) {
                 this.value = value;
             }
@@ -267,37 +313,35 @@ BI.SingleSliderNormal = BI.inherit(BI.Single, {
                 this.value = this.min;
             }
         }
-    },
+    }
 
-    setMinAndMax: function (v) {
+    setMinAndMax(v) {
-        var minNumber = BI.parseFloat(v.min);
+        const minNumber = parseFloat(v.min);
-        var maxNumber = BI.parseFloat(v.max);
+        const maxNumber = parseFloat(v.max);
-        if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) {
+        if (!isNaN(minNumber) && !isNaN(maxNumber) && maxNumber > minNumber) {
             this.min = minNumber;
             this.max = maxNumber;
         }
-    },
+    }
 
-    reset: function () {
+    reset() {
         this._setVisible(false);
         this.enable = false;
         this.value = "";
         this.min = 0;
         this.max = 0;
         this._setBlueTrack(0);
-    },
+    }
 
-    populate: function () {
+    populate() {
         if (!isNaN(this.min) && !isNaN(this.max)) {
             this._setVisible(true);
             this.enable = true;
-            if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) {
+            if (isNumeric(this.value) || isNotEmptyString(this.value)) {
                 this._setAllPosition(this._getPercentByValue(this.value));
             } else {
                 this._setAllPosition(100);
             }
         }
     }
-});
+}
-BI.SingleSliderNormal.EVENT_DRAG = "EVENT_DRAG";
-BI.shortcut("bi.single_slider_normal", BI.SingleSliderNormal);