Pull request #3388: KERNEL-14083 refactor: widget/downlist、singleslider、intervalslider es6化

Merge in VISUAL/fineui from ~JOKER.WANG/fineui:es6 to es6

* commit 'f87bab8068dd4271cad76b57d4d8f777436cd510':
  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,37 +1,45 @@
-(function() {
+import { shortcut, Widget, extend, createWidget, cloneDeep, some, isArray, each } from "@/core";
+import { DownListPopup } from "./popup.downlist";
+import { Combo } from "@/base";
+import { IconTrigger } from "@/case";
+
+
 function transformItems(items) {
     if (!items) return items;
-        var result = BI.cloneDeep(items);
+    let result = cloneDeep(items);
-        var isComplexItmes = BI.some(items, function (_, item) {
+    const isComplexItmes = some(items, (_, item) => isArray(item));
-            return BI.isArray(item);
-        });
     // 传一维数组，帮转二维
     if (!isComplexItmes) {
         result = [result];
     }
     // 帮转 el
-        BI.each(result, function (_, arr) {
+    each(result, (_, arr) => {
-            BI.each(arr, function (_, item) {
+        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
+                    value: item.value,
                 };
             }
         });
     });
+    
     return result;
 }
 
-    /**
+@shortcut()
-     * Created by roy on 15/8/14.
+export class DownListCombo extends Widget {
-     */
+    static xtype = "bi.down_list_combo";
-    BI.DownListCombo = BI.inherit(BI.Widget, {
+
-        _defaultConfig: function () {
+    static EVENT_CHANGE = "EVENT_CHANGE";
-            return BI.extend(BI.DownListCombo.superclass._defaultConfig.apply(this, arguments), {
+    static EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE";
+    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-down-list-combo",
             height: 24,
             items: [],
@@ -47,15 +55,15 @@
             destroyWhenHide: false,
             isDefaultInit: true,
         });
-        },
+    }
 
-        _init: function () {
+    _init() {
-            BI.DownListCombo.superclass._init.apply(this, arguments);
+        super._init(...arguments);
-            var self = this, o = this.options;
+        const o = this.options;
 
-            this.downlistcombo = BI.createWidget({
+        this.downlistcombo = createWidget({
             element: this,
-                type: "bi.combo",
+            type: Combo.xtype,
             trigger: o.trigger,
             isNeedAdjustWidth: false,
             isDefaultInit: o.isDefaultInit,
@@ -66,78 +74,82 @@
             stopPropagation: o.stopPropagation,
             destroyWhenHide: o.destroyWhenHide,
             el: {
-                    type: "bi.icon_trigger",
+                type: IconTrigger.xtype,
                 extraCls: o.iconCls,
                 width: o.width,
                 height: o.height,
-                    ...o.el
+                ...o.el,
             },
             popup: {
                 el: {
-                        type: "bi.down_list_popup",
+                    type: DownListPopup.xtype,
-                        ref: function (ref) {
+                    ref: _ref => {
-                            self.popupView = ref;
+                        this.popupView = _ref;
                     },
                     items: transformItems(o.items),
                     chooseType: o.chooseType,
                     value: o.value,
-                        listeners: [{
+                    listeners: [
-                            eventName: BI.DownListPopup.EVENT_CHANGE,
+                        {
-                            action: function (value) {
+                            eventName: DownListPopup.EVENT_CHANGE,
-                                self.fireEvent(BI.DownListCombo.EVENT_CHANGE, value);
+                            action: value => {
-                                self.downlistcombo.hideView();
+                                this.fireEvent(
-                            }
+                                    DownListCombo.EVENT_CHANGE,
-                        }, {
+                                    value
-                            eventName: BI.DownListPopup.EVENT_SON_VALUE_CHANGE,
+                                );
-                            action: function (value, fatherValue) {
+                                this.downlistcombo.hideView();
-                                self.fireEvent(BI.DownListCombo.EVENT_SON_VALUE_CHANGE, value, fatherValue);
+                            },
-                                self.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
+                ...o.popup,
-                }
+            },
         });
 
-            this.downlistcombo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () {
+        this.downlistcombo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => {
-                self.fireEvent(BI.DownListCombo.EVENT_BEFORE_POPUPVIEW);
+            this.fireEvent(DownListCombo.EVENT_BEFORE_POPUPVIEW);
         });
-        },
+    }
 
-        hideView: function () {
+    hideView() {
         this.downlistcombo.hideView();
-        },
+    }
 
-        showView: function (e) {
+    showView(e) {
         this.downlistcombo.showView(e);
-        },
+    }
 
-        populate: function (items) {
+    populate(items) {
         this.popupView.populate(items);
-        },
+    }
 
-        setValue: function (v) {
+    setValue(v) {
         this.popupView.setValue(v);
-        },
+    }
 
-        getValue: function () {
+    getValue() {
         return this.popupView.getValue();
-        },
+    }
 
-        adjustWidth: function () {
+    adjustWidth() {
         this.downlistcombo.adjustWidth();
-        },
+    }
 
-        adjustHeight: function () {
+    adjustHeight() {
         this.downlistcombo.adjustHeight();
     }
-    });
+}
-    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);
-}());

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

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,12 +1,21 @@
-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()
+export class DownListItem extends BasicButton {
+  static xtype = "bi.down_list_item";
+
+  static EVENT_CHANGE = "EVENT_CHANGE";
+
+  _defaultConfig() {
+      const conf = super._defaultConfig(...arguments);
+      
+      return extend(conf, {
           baseCls: "bi-down-list-item bi-list-item-active",
           cls: "",
           height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
           logic: {
-                dynamic: true
+              dynamic: true,
           },
           selected: false,
           iconHeight: null,
@@ -14,13 +23,14 @@ BI.DownListItem = BI.inherit(BI.BasicButton, {
           textHgap: 0,
           textVgap: 0,
           textLgap: 0,
-            textRgap: 0
+          textRgap: 0,
       });
-    },
+  }
-    _init: function () {
+
-        BI.DownListItem.superclass._init.apply(this, arguments);
+  _init() {
-        var self = this, o = this.options;
+      super._init(...arguments);
-        this.text = BI.createWidget({
+      const o = this.options;
+      this.text = createWidget({
           type: "bi.label",
           cls: "list-item-text",
           textAlign: "left",
@@ -31,72 +41,85 @@ BI.DownListItem = BI.inherit(BI.BasicButton, {
           text: o.text,
           value: o.value,
           keyword: o.keyword,
-            height: o.height
+          height: o.height,
       });
 
-
+      const icon = isPlainObject(o.icon)
-        var icon = BI.isPlainObject(o.icon) ? o.icon : {
+          ? o.icon
+          : {
               type: "bi.icon",
               width: o.iconWidth,
               height: o.iconHeight,
-        }
+          };
 
-        this.icon = BI.createWidget({
+      this.icon = createWidget({
           type: "bi.center_adapt",
           width: 36,
           height: o.height,
-            items: [{
+          items: [
+              {
                   el: icon,
-            }],
+              }
+          ],
       });
 
-        BI.createWidget(BI.extend({
+      createWidget(
-            element: this
+          extend(
-        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left), BI.extend(o.logic, {
+              {
-            items: BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, this.icon, this.text)
+                  element: this,
-        }))));
               },
+              LogicFactory.createLogic(
+                  LogicFactory.createLogicTypeByDirection(Direction.Left),
+                  extend(o.logic, {
+                      items: LogicFactory.createLogicItemsByDirection(
+                          Direction.Left,
+                          this.icon,
+                          this.text
+                      ),
+                  })
+              )
+          )
+      );
+  }
 
-    setValue: function () {
+  setValue() {
       if (!this.isReadOnly()) {
-            this.text.setValue.apply(this.text, arguments);
+          this.text.setValue(...arguments);
+      }
   }
-    },
 
-    getValue: function () {
+  getValue() {
       return this.text.getValue();
-    },
+  }
 
-    setText: function () {
+  setText() {
-        this.text.setText.apply(this.text, arguments);
+      this.text.setText(...arguments);
-    },
+  }
 
-    getText: function () {
+  getText() {
       return this.text.getText();
-    },
+  }
 
-    doClick: function () {
+  doClick() {
-        BI.DownListItem.superclass.doClick.apply(this, arguments);
+      super.doClick(...arguments);
       if (this.isValid()) {
-            this.fireEvent(BI.DownListItem.EVENT_CHANGE, this.getValue(), this);
+          this.fireEvent(DownListItem.EVENT_CHANGE, this.getValue(), this);
+      }
   }
-    },
 
-    doRedMark: function () {
+  doRedMark() {
-        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() {
-        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);
+  }
 }
-});
-BI.DownListItem.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.down_list_item", BI.DownListItem);

src/widget/downlist/item.downlistgroup.js

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

src/widget/downlist/popup.downlist.js

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

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 () {
+        this.labelTwo.element.hover(
-            self.labelTwo.element.removeClass("bi-border").addClass("bi-border");
+            () => {
-        }, function () {
+                this.labelTwo.element
-            self.labelTwo.element.removeClass("bi-border");
+                    .removeClass("bi-border")
-        });
+                    .addClass("bi-border");
-        this.labelTwo.on(BI.Editor.EVENT_CONFIRM, function () {
+            },
-            var oldValueTwo = self.valueTwo;
+            () => {
-            var v = BI.parseFloat(this.getValue());
+                this.labelTwo.element.removeClass("bi-border");
-            self.valueTwo = v;
+            }
-            var percent = self._getPercentByValue(v);
+        );
-            var significantPercent = BI.parseFloat(percent.toFixed(1));
+        this.labelTwo.on(Editor.EVENT_CONFIRM, () => {
-            self._setSliderTwoPosition(significantPercent);
+            const oldValueTwo = this.valueTwo;
-            self._setBlueTrack();
+            const v = parseFloat(this.getValue());
-            self._checkLabelPosition(self.valueOne, oldValueTwo, self.valueOne, self.valueTwo);
+            this.valueTwo = v;
-            self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
+            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,64 +169,82 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
                                 horizontalAlign: "stretch",
                                 verticalAlign: "middle",
                                 columnSize: ["fill"],
-                                items: [{
+                                items: [
+                                    {
                                         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,
+            oldValueTwo = this.valueTwo;
         if (isLeft) {
             this._setSliderOnePosition(significantPercent);
             this.labelOne.setValue(v);
             this.valueOne = v;
-            this._checkLabelPosition(oldValueOne, oldValueTwo, v, this.valueTwo);
+            this._checkLabelPosition(
+                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) {
+    _draggable(widget, isLeft) {
-        var self = this, o = this.options;
+        let startDrag = false;
-        var startDrag = false;
+        let size = 0,
-        var size = 0, offset = 0, defaultSize = 0;
+            offset = 0,
-        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            defaultSize = 0;
+        const mouseMoveTracker = new MouseMoveTracker(
+            (deltaX => {
                 if (mouseMoveTracker.isDragging()) {
                     startDrag = true;
                     offset += deltaX;
                     size = optimizeSize(defaultSize + offset);
                     widget.element.addClass("dragging");
-                self._rePosBySizeAfterMove(size, isLeft);
+                    this._rePosBySizeAfterMove(size, isLeft);
                 }
-        }, function () {
+            }),
+            (() => {
                 if (startDrag === true) {
                     size = optimizeSize(size);
-                self._rePosBySizeAfterStop(size, isLeft);
+                    this._rePosBySizeAfterStop(size, isLeft);
                     size = 0;
                     offset = 0;
                     defaultSize = size;
@@ -200,8 +252,10 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
                 }
                 widget.element.removeClass("dragging");
                 mouseMoveTracker.releaseMouseMoves();
-            self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
+                this.fireEvent(IntervalSlider.EVENT_CHANGE);
-        }, window);
+            }),
+            window
+        );
         widget.element.on("mousedown", function (event) {
             if (!widget.isEnabled()) {
                 return;
@@ -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,
+                        items: [
+                            {
                                 el: this.labelOne,
                                 top: 0,
                                 left: 0,
-                    }]
+                            }
-                }, {
+                        ],
-                    type: "bi.absolute",
+                    },
-                    items: [{
+                    {
+                        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,
                             left: 0,
                             bottom: 0,
-                        width: "100%"
+                            width: "100%",
-                    }, {
+                        },
+                        {
                             el: this.blueTrack,
                             top: 0,
                             left: 0,
                             bottom: 0,
-                        width: "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
+        if (isEmptyString(dotText)) {
         } else {
-            if (BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max)) {
+            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 {
                     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 });
             } else {
                 this.labelTwo.element.css({ top: 0 });
             }
         } else {
-            if ((labelOneLeft - labelTwoLeft) < 90) {
+            if (labelOneLeft - labelTwoLeft < 90) {
                 this.labelTwo.element.css({ top: 40 });
             } else {
                 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.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) {
-            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) {
             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;
         
-    },
+        return arr.length > 1 ? arr[1].length : 0;
+    }
 
-    _assertValue: function (value) {
+    _assertValue(value) {
         if (value <= this.min) {
             return this.min;
         }
         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) {
-            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.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);
-    },
         
-    _formatDecimal: function (stringNumber1, stringNumber2) {
+        return parseInt(magnitude);
+    }
+
+    _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) -
-        var result = integerResult + "." + decimalResult;
+                parseInt(stringNumber2.numDecimal)
-        return BI.parseFloat(result);
+            ).toString();
+            decimalResult = addZero(decimalResultTemp, decimalMaxLength);
+        }
+        const result = `${integerResult}.${decimalResult}`;
+        
+        return parseFloat(result);
 
         function getDecimalMaxLength(num1, num2) {
             if (num1.numDecimal.length >= num2.numDecimal.length) {
                 return num1.numDecimal.length;
             }
+            
             return num2.numDecimal.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++; // 进一
                 decimalResult = decimalResult.slice(1);
             }
         }
-        var result = integerResult + "." + decimalResult;
+        const result = `${integerResult}.${decimalResult}`;
-        return BI.parseFloat(result);
+        
+        return parseFloat(result);
 
         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) {
-            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,
                     right: 0,
                     top: 0,
-                bottom: 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(
+            bind(() => {
                 if (this.editor.getValue() === "") {
                     this.text.setValue(o.watermark || "");
                     this.text.element.addClass("bi-water-mark");
                 } else {
-                var v = this.editor.getValue();
+                    let v = this.editor.getValue();
-                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);
                     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,
-    },
+    };
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
 
-    beforeMount: function () {
+    beforeMount() {
         const { value, min, max } = this.options;
         this.setMinAndMax({
             min,
@@ -30,164 +53,192 @@ 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",
+                {
+                    type: AbsoluteLayout.xtype,
                     items: [
                         {
                             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 () {
-            self.label.element.removeClass("bi-border").addClass("bi-border");
-        }, function () {
-            self.label.element.removeClass("bi-border");
         });
-        this.label.on(BI.SignEditor.EVENT_CONFIRM, function () {
+        this.label.element.hover(
-            var v = BI.parseFloat(this.getValue());
+            () => {
-            var percent = self._getPercentByValue(v);
+                this.label.element
-            var significantPercent = BI.parseFloat(percent.toFixed(1));
+                    .removeClass("bi-border")
-            self._setAllPosition(significantPercent);
+                    .addClass("bi-border");
+            },
+            () => {
+                this.label.element.removeClass("bi-border");
+            }
+        );
+        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",
+                        type: VerticalLayout.xtype,
-                    items: [{
+                        items: [
-                        type: "bi.absolute",
+                            {
-                        items: [{
+                                type: AbsoluteLayout.xtype,
+                                items: [
+                                    {
                                         el: this.track,
                                         width: "100%",
-                            height: c.TRACK_HEIGHT
+                                        height: c.TRACK_HEIGHT,
-                        }]
+                                    }
-                    }],
+                                ],
+                            }
+                        ],
                         hgap: c.TRACK_GAP_HALF,
-                    height: c.TRACK_HEIGHT
+                        height: c.TRACK_HEIGHT,
                     },
                     top: 23,
                     left: 0,
-                width: "100%"
+                    width: "100%",
-            }, {
+                },
+                {
                     el: sliderVertical,
                     top: 20,
                     left: 0,
-                width: "100%"
+                    width: "100%",
-            }, {
+                },
+                {
                     el: {
-                    type: "bi.vertical",
+                        type: VerticalLayout.xtype,
-                    items: [{
+                        items: [
-                        type: "bi.horizontal_auto",
+                            {
-                        items: [this.label]
+                                type: HorizontalAutoLayout.xtype,
-                    }],
+                                items: [this.label],
+                            }
+                        ],
                         // height: c.EDITOR_HEIGHT
                     },
                     top: 0,
                     left: 0,
-                width: "100%"
+                    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,
+            defaultSize = 0;
+        const mouseMoveTracker = new MouseMoveTracker(
+            (deltaX => {
                 if (mouseMoveTracker.isDragging()) {
                     startDrag = true;
                     offset += deltaX;
                     size = optimizeSize(defaultSize + offset);
                     widget.element.addClass("dragging");
-                var percent = size * 100 / (self._getGrayTrackLength());
+                    const percent = (size * 100) / this._getGrayTrackLength();
-                var significantPercent = BI.parseFloat(percent.toFixed(1));// 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                    const significantPercent = parseFloat(percent.toFixed(1)); // 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
+                    this._setBlueTrack(significantPercent);
-                self._setLabelPosition(significantPercent);
+                    this._setLabelPosition(significantPercent);
-                self._setSliderPosition(significantPercent);
+                    this._setSliderPosition(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;
                 }
-        }, function () {
+            }),
+            (() => {
                 if (startDrag === true) {
                     size = optimizeSize(size);
-                var percent = size * 100 / (self._getGrayTrackLength());
+                    const percent = (size * 100) / this._getGrayTrackLength();
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                    const significantPercent = parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
+                    this._setSliderPosition(significantPercent);
                     size = 0;
                     offset = 0;
                     defaultSize = size;
@@ -195,8 +246,10 @@ BI.SingleSlider = BI.inherit(BI.Single, {
                 }
                 widget.element.removeClass("dragging");
                 mouseMoveTracker.releaseMouseMoves();
-            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+                this.fireEvent(SingleSlider.EVENT_CHANGE);
-        }, window);
+            }),
+            window
+        );
         widget.element.on("mousedown", function (event) {
             if (!widget.isEnabled()) {
                 return;
@@ -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",
+                        type: VerticalLayout.xtype,
-                    items: [{
+                        items: [
-                        type: "bi.absolute",
+                            {
-                        items: [{
+                                type: AbsoluteLayout.xtype,
+                                items: [
+                                    {
                                         el: this.grayTrack,
                                         top: 0,
                                         left: 0,
-                            width: "100%"
+                                        width: "100%",
-                        }, {
+                                    },
+                                    {
                                         el: this.blueTrack,
                                         top: 0,
                                         left: 0,
-                            width: "0%"
+                                        width: "0%",
-                        }]
+                                    }
-                    }],
+                                ],
+                            }
+                        ],
                         hgap: 8,
-                    height: 8
+                        height: 8,
                     },
                     top: 8,
                     left: 0,
-                width: "100%"
+                    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) {
                 valid = true;
             } 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);
-    },
         
-    _getPercentByValue: function (v) {
+        return ((this.max - this.min) * thousandth) / 1000 + this.min;
-        return (v - this.min) * 100 / (this.max - this.min);
+    }
-    },
+
+    _getPercentByValue(v) {
+        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) {
-            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,
-    },
+    };
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
 
-    beforeMount: function () {
+    beforeMount() {
         const { value, min, max } = this.options;
         this.setMinAndMax({
             min,
@@ -31,143 +50,168 @@ 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",
+                {
+                    type: AbsoluteLayout.xtype,
                     items: [
                         {
                             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,
+            items: [
+                {
                     el: {
-                    type: "bi.vertical",
+                        type: VerticalLayout.xtype,
-                    items: [{
+                        items: [
-                        type: "bi.absolute",
+                            {
-                        items: [{
+                                type: AbsoluteLayout.xtype,
+                                items: [
+                                    {
                                         el: this.track,
                                         width: "100%",
-                            height: c.TRACK_HEIGHT
+                                        height: c.TRACK_HEIGHT,
-                        }]
+                                    }
-                    }],
+                                ],
+                            }
+                        ],
                         hgap: c.TRACK_GAP_HALF,
-                    height: c.TRACK_HEIGHT
+                        height: c.TRACK_HEIGHT,
                     },
                     top: 13,
                     left: 0,
-                width: "100%"
+                    width: "100%",
-            }, {
+                },
+                {
                     el: sliderVertical,
                     top: 10,
                     left: 0,
-                width: "100%"
+                    width: "100%",
-            }, {
+                },
+                {
                     el: {
-                    type: "bi.vertical",
+                        type: VerticalLayout.xtype,
-                    items: [{
+                        items: [
-                        type: "bi.horizontal_auto",
+                            {
-                        items: [this.label]
+                                type: HorizontalAutoLayout.xtype,
-                    }],
+                                items: [this.label],
-                    height: c.EDITOR_HEIGHT
+                            }
+                        ],
+                        height: c.EDITOR_HEIGHT,
                     },
                     top: 0,
                     left: 0,
-                width: "100%"
+                    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,
+            defaultSize = 0;
+        const mouseMoveTracker = new MouseMoveTracker(
+            (deltaX => {
                 if (mouseMoveTracker.isDragging()) {
                     startDrag = true;
                     offset += deltaX;
                     size = optimizeSize(defaultSize + offset);
                     widget.element.addClass("dragging");
-                var percent = size * 100 / (self._getGrayTrackLength());
+                    const percent = (size * 100) / this._getGrayTrackLength();
-                var significantPercent = BI.parseFloat(percent.toFixed(1));// 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                    const significantPercent = parseFloat(percent.toFixed(1)); // 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
+                    this._setBlueTrack(significantPercent);
-                self._setLabelPosition(significantPercent);
+                    this._setLabelPosition(significantPercent);
-                self._setSliderPosition(significantPercent);
+                    this._setSliderPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
+                    let v = this._getValueByPercent(significantPercent);
                     v = o.digit === false ? v : v.toFixed(o.digit);
-                self.label.setValue(v + o.unit);
+                    this.label.setValue(v + o.unit);
-                self.value = v;
+                    this.value = v;
-                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+                    this.fireEvent(SingleSliderLabel.EVENT_CHANGE);
                 }
-        }, function () {
+            }),
+            (() => {
                 if (startDrag === true) {
                     size = optimizeSize(size);
-                var percent = size * 100 / (self._getGrayTrackLength());
+                    const percent = (size * 100) / this._getGrayTrackLength();
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                    const significantPercent = parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
+                    this._setSliderPosition(significantPercent);
                     size = 0;
                     offset = 0;
                     defaultSize = size;
@@ -175,8 +219,10 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
                 }
                 widget.element.removeClass("dragging");
                 mouseMoveTracker.releaseMouseMoves();
-            self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+                this.fireEvent(SingleSliderLabel.EVENT_CHANGE);
-        }, window);
+            }),
+            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",
+                        type: VerticalLayout.xtype,
-                    items: [{
+                        items: [
-                        type: "bi.absolute",
+                            {
-                        items: [{
+                                type: AbsoluteLayout.xtype,
+                                items: [
+                                    {
                                         el: this.grayTrack,
                                         top: 0,
                                         left: 0,
-                            width: "100%"
+                                        width: "100%",
-                        }, {
+                                    },
+                                    {
                                         el: this.blueTrack,
                                         top: 0,
                                         left: 0,
-                            width: "0%"
+                                        width: "0%",
-                        }]
+                                    }
-                    }],
+                                ],
+                            }
+                        ],
                         hgap: 8,
-                    height: 8
+                        height: 8,
                     },
                     top: 8,
                     left: 0,
-                width: "100%"
+                    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);
-    },
         
-    _getPercentByValue: function (v) {
+        return ((this.max - this.min) * thousandth) / 1000 + this.min;
-        return (v - this.min) * 100 / (this.max - this.min);
+    }
-    },
 
-    _setEnable: function (b) {
+    _getPercentByValue(v) {
-        BI.SingleSliderLabel.superclass._setEnable.apply(this, [b]);
+        return ((v - this.min) * 100) / (this.max - this.min);
+    }
+
+    _setEnable(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,111 +45,130 @@ 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",
+                {
+                    type: AbsoluteLayout.xtype,
                     items: [
                         {
                             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",
+                        type: VerticalLayout.xtype,
-                    items: [{
+                        items: [
-                        type: "bi.absolute",
+                            {
-                        items: [{
+                                type: AbsoluteLayout.xtype,
+                                items: [
+                                    {
                                         el: track,
                                         width: "100%",
-                            height: c.TRACK_HEIGHT
+                                        height: c.TRACK_HEIGHT,
-                        }]
+                                    }
-                    }],
+                                ],
+                            }
+                        ],
                         hgap: c.TRACK_GAP_HALF,
-                    height: c.TRACK_HEIGHT
+                        height: c.TRACK_HEIGHT,
                     },
                     top: 3,
                     left: 0,
-                width: "100%"
+                    width: "100%",
-            }, {
+                },
+                {
                     el: sliderVertical,
                     top: 0,
                     left: 0,
-                width: "100%"
+                    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,
+            defaultSize = 0;
+        const mouseMoveTracker = new MouseMoveTracker(
+            (deltaX => {
                 if (mouseMoveTracker.isDragging()) {
                     startDrag = true;
                     offset += deltaX;
                     size = optimizeSize(defaultSize + offset);
                     widget.element.addClass("dragging");
-                var percent = size * 100 / (self._getGrayTrackLength());
+                    const percent = (size * 100) / this._getGrayTrackLength();
-                var significantPercent = BI.parseFloat(percent.toFixed(1));// 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                    const significantPercent = parseFloat(percent.toFixed(1)); // 直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
+                    this._setBlueTrack(significantPercent);
-                self._setSliderPosition(significantPercent);
+                    this._setSliderPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
+                    let v = this._getValueByPercent(significantPercent);
                     v = o.digit === false ? v : v.toFixed(o.digit);
-                self.value = v;
+                    this.value = v;
-                self.fireEvent(BI.SingleSliderNormal.EVENT_DRAG, v);
+                    this.fireEvent(SingleSliderNormal.EVENT_DRAG, v);
                 }
-        }, function () {
+            }),
+            (() => {
                 if (startDrag === true) {
                     size = optimizeSize(size);
-                var percent = size * 100 / (self._getGrayTrackLength());
+                    const percent = (size * 100) / this._getGrayTrackLength();
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                    const significantPercent = parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
+                    this._setSliderPosition(significantPercent);
                     size = 0;
                     offset = 0;
                     defaultSize = size;
@@ -142,8 +176,10 @@ BI.SingleSliderNormal = BI.inherit(BI.Single, {
                 }
                 widget.element.removeClass("dragging");
                 mouseMoveTracker.releaseMouseMoves();
-            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+                this.fireEvent(SingleSlider.EVENT_CHANGE);
-        }, window);
+            }),
+            window
+        );
         widget.element.on("mousedown", function (event) {
             if (!widget.isEnabled()) {
                 return;
@@ -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",
+                        type: VerticalLayout.xtype,
-                    items: [{
+                        items: [
-                        type: "bi.absolute",
+                            {
-                        items: [{
+                                type: AbsoluteLayout.xtype,
+                                items: [
+                                    {
                                         el: this.grayTrack,
                                         top: 0,
                                         left: 0,
-                            width: "100%"
+                                        width: "100%",
-                        }, {
+                                    },
+                                    {
                                         el: this.blueTrack,
                                         top: 0,
                                         left: 0,
-                            width: "0%"
+                                        width: "0%",
-                        }]
+                                    }
-                    }],
+                                ],
+                            }
+                        ],
                         hgap: 8,
-                    height: 8
+                        height: 8,
                     },
                     top: 8,
                     left: 0,
-                width: "100%"
+                    width: "100%",
-            }],
-            ref: function (ref) {
-                self.track = ref;
                 }
-        };
+            ],
+            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);
-    },
         
-    _getPercentByValue: function (v) {
+        return ((this.max - this.min) * thousandth) / 1000 + this.min;
-        return (v - this.min) * 100 / (this.max - this.min);
+    }
-    },
 
-    _setEnable: function (b) {
+    _getPercentByValue(v) {
-        BI.SingleSliderNormal.superclass._setEnable.apply(this, [b]);
+        return ((v - this.min) * 100) / (this.max - this.min);
+    }
+
+    _setEnable(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 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);