forked from fanruan/fineui
Browse Source
Merge in VISUAL/fineui from ~JOKER.WANG/fineui:es6 to es6 * commit 'f87bab8068dd4271cad76b57d4d8f777436cd510': KERNEL-14083 refactor: widget/downlist、singleslider、intervalslider es6化es6
Joker.Wang-王顺
2 years ago
20 changed files with 2350 additions and 1854 deletions
@ -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", |
baseCls: "bi-down-list-group", |
||||||
items: [ |
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, |
element: this, |
||||||
type: "bi.button_tree", |
type: "bi.button_tree", |
||||||
items: o.items, |
items: o.items, |
||||||
chooseType: 0, // 0单选,1多选
|
chooseType: 0, // 0单选,1多选
|
||||||
layouts: [{ |
layouts: [ |
||||||
|
{ |
||||||
type: "bi.vertical", |
type: "bi.vertical", |
||||||
hgap: 0, |
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); |
} |
||||||
|
} |
||||||
|
@ -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"; |
@ -0,0 +1,2 @@ |
|||||||
|
export { AccurateCalculationModel } from "./model.accuratecalculation"; |
||||||
|
export { IntervalSlider } from "./intervalslider"; |
@ -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: "", |
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, |
simple: o.simple, |
||||||
height: o.height, |
height: o.height, |
||||||
hgap: 4, |
hgap: 4, |
||||||
vgap: 2, |
vgap: 2, |
||||||
value: o.value, |
value: o.value, |
||||||
validationChecker: o.validationChecker, |
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", |
cls: "sign-editor-text", |
||||||
title: function () { |
title: () => this.getValue(), |
||||||
return self.getValue(); |
|
||||||
}, |
|
||||||
textAlign: o.textAlign, |
textAlign: o.textAlign, |
||||||
height: o.height, |
height: o.height, |
||||||
hgap: 4, |
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, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
el: this.text, |
el: this.text, |
||||||
left: 0, |
left: 0, |
||||||
right: 0, |
right: 0, |
||||||
top: 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, |
scrolly: false, |
||||||
element: this, |
element: this, |
||||||
items: [this.editor] |
items: [this.editor], |
||||||
}); |
}); |
||||||
this._showHint(); |
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() === "") { |
if (this.editor.getValue() === "") { |
||||||
this.text.setValue(o.watermark || ""); |
this.text.setValue(o.watermark || ""); |
||||||
this.text.element.addClass("bi-water-mark"); |
this.text.element.addClass("bi-water-mark"); |
||||||
} else { |
} 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.setValue(v); |
||||||
this.text.element.removeClass("bi-water-mark"); |
this.text.element.removeClass("bi-water-mark"); |
||||||
} |
} |
||||||
}, this)); |
}, this) |
||||||
}, |
); |
||||||
|
} |
||||||
|
|
||||||
_showInput: function () { |
_showInput() { |
||||||
this.editor.visible(); |
this.editor.visible(); |
||||||
this.text.invisible(); |
this.text.invisible(); |
||||||
}, |
} |
||||||
|
|
||||||
_showHint: function () { |
_showHint() { |
||||||
this.editor.invisible(); |
this.editor.invisible(); |
||||||
this.text.visible(); |
this.text.visible(); |
||||||
}, |
} |
||||||
|
|
||||||
setTitle: function (title) { |
setTitle(title) { |
||||||
this.text.setTitle(title); |
this.text.setTitle(title); |
||||||
}, |
} |
||||||
|
|
||||||
setWarningTitle: function (title) { |
setWarningTitle(title) { |
||||||
this.text.setWarningTitle(title); |
this.text.setWarningTitle(title); |
||||||
}, |
} |
||||||
|
|
||||||
focus: function () { |
focus() { |
||||||
this._showInput(); |
this._showInput(); |
||||||
this.editor.focus(); |
this.editor.focus(); |
||||||
}, |
} |
||||||
|
|
||||||
blur: function () { |
blur() { |
||||||
this.editor.blur(); |
this.editor.blur(); |
||||||
this._showHint(); |
this._showHint(); |
||||||
this._checkText(); |
this._checkText(); |
||||||
}, |
} |
||||||
|
|
||||||
doRedMark: function () { |
doRedMark() { |
||||||
if (this.editor.getValue() === "" && BI.isKey(this.options.watermark)) { |
if (this.editor.getValue() === "" && isKey(this.options.watermark)) { |
||||||
return; |
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; |
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(); |
return this.editor.isValid(); |
||||||
}, |
} |
||||||
|
|
||||||
setErrorText: function (text) { |
setErrorText(text) { |
||||||
this.editor.setErrorText(text); |
this.editor.setErrorText(text); |
||||||
}, |
} |
||||||
|
|
||||||
getErrorText: function () { |
getErrorText() { |
||||||
return this.editor.getErrorText(); |
return this.editor.getErrorText(); |
||||||
}, |
} |
||||||
|
|
||||||
isEditing: function () { |
isEditing() { |
||||||
return this.editor.isEditing(); |
return this.editor.isEditing(); |
||||||
}, |
} |
||||||
|
|
||||||
getLastValidValue: function () { |
getLastValidValue() { |
||||||
return this.editor.getLastValidValue(); |
return this.editor.getLastValidValue(); |
||||||
}, |
} |
||||||
|
|
||||||
getLastChangedValue: function () { |
getLastChangedValue() { |
||||||
return this.editor.getLastChangedValue(); |
return this.editor.getLastChangedValue(); |
||||||
}, |
} |
||||||
|
|
||||||
setValue: function (v) { |
setValue(v) { |
||||||
this.editor.setValue(v); |
this.editor.setValue(v); |
||||||
this._checkText(); |
this._checkText(); |
||||||
}, |
} |
||||||
|
|
||||||
getValue: function () { |
getValue() { |
||||||
return this.editor.getValue(); |
return this.editor.getValue(); |
||||||
}, |
} |
||||||
|
|
||||||
getState: function () { |
getState() { |
||||||
return this.text.getValue(); |
return this.text.getValue(); |
||||||
}, |
} |
||||||
|
|
||||||
setState: function (v) { |
setState(v) { |
||||||
var o = this.options; |
const o = this.options; |
||||||
this._showHint(); |
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); |
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); |
|
||||||
|
@ -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", |
baseCls: "bi-single-slider-button slider-button bi-high-light-border", |
||||||
height: 8, |
height: 8, |
||||||
width: 8, |
width: 8, |
||||||
}, |
} |
||||||
|
constants = { |
||||||
constants: { |
|
||||||
LARGE_SIZE: 16, |
LARGE_SIZE: 16, |
||||||
NORMAL_SIZE: 12, |
NORMAL_SIZE: 12, |
||||||
LARGE_OFFSET: 4, |
LARGE_OFFSET: 4, |
||||||
NORMAL_OFFSET: 6 |
NORMAL_OFFSET: 6, |
||||||
}, |
}; |
||||||
|
|
||||||
render: function () { |
render() { |
||||||
var self = this; |
|
||||||
return { |
return { |
||||||
type: "bi.layout", |
type: Layout.xtype, |
||||||
}; |
}; |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("bi.single_slider_button", BI.SliderIconButton); |
|
||||||
|
@ -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"; |
Loading…
Reference in new issue