forked from fanruan/fineui
Zhenfei.Li
2 years ago
9 changed files with 789 additions and 740 deletions
@ -1,20 +1,20 @@ |
|||||||
/** |
import { shortcut, extend } from "@/core"; |
||||||
* 小号搜索框 |
import { SearchEditor } from "./editor.search"; |
||||||
* Created by GUY on 2015/9/29. |
|
||||||
* @class BI.SmallSearchEditor |
@shortcut() |
||||||
* @extends BI.SearchEditor |
export class SmallSearchEditor extends SearchEditor { |
||||||
*/ |
static xtype = "bi.small_search_editor" |
||||||
BI.SmallSearchEditor = BI.inherit(BI.SearchEditor, { |
|
||||||
_defaultConfig: function () { |
_defaultConfig() { |
||||||
var conf = BI.SmallSearchEditor.superclass._defaultConfig.apply(this, arguments); |
const conf = super._defaultConfig(...arguments); |
||||||
return BI.extend(conf, { |
|
||||||
baseCls: (conf.baseCls || "") + " bi-small-search-editor", |
return extend(conf, { |
||||||
height: 20 |
baseCls: `${conf.baseCls || ""} bi-small-search-editor`, |
||||||
|
height: 20, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_init: function () { |
_init() { |
||||||
BI.SmallSearchEditor.superclass._init.apply(this, arguments); |
super._init(...arguments); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("bi.small_search_editor", BI.SmallSearchEditor); |
|
||||||
|
|||||||
@ -1,20 +1,20 @@ |
|||||||
/** |
import { shortcut, extend } from "@/core"; |
||||||
* 小号搜索框 |
import { TextEditor } from "./editor.text"; |
||||||
* Created by GUY on 2015/9/29. |
|
||||||
* @class BI.SmallTextEditor |
@shortcut() |
||||||
* @extends BI.SearchEditor |
export class SmallTextEditor extends TextEditor { |
||||||
*/ |
static xtype = "bi.small_text_editor" |
||||||
BI.SmallTextEditor = BI.inherit(BI.TextEditor, { |
|
||||||
_defaultConfig: function () { |
_defaultConfig() { |
||||||
var conf = BI.SmallTextEditor.superclass._defaultConfig.apply(this, arguments); |
const conf = super._defaultConfig(...arguments); |
||||||
return BI.extend(conf, { |
|
||||||
baseCls: (conf.baseCls || "") + " bi-small-text-editor", |
return extend(conf, { |
||||||
height: 20 |
baseCls: `${conf.baseCls || ""} bi-small-text-editor`, |
||||||
|
height: 20, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_init: function () { |
_init() { |
||||||
BI.SmallTextEditor.superclass._init.apply(this, arguments); |
super._init(...arguments); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("bi.small_text_editor", BI.SmallTextEditor); |
|
||||||
|
|||||||
@ -0,0 +1,4 @@ |
|||||||
|
export { SearchEditor } from "./editor.search"; |
||||||
|
export { SmallSearchEditor } from "./editor.search.small"; |
||||||
|
export { TextEditor } from "./editor.text"; |
||||||
|
export { SmallTextEditor } from "./editor.text.small"; |
||||||
@ -1,202 +1,204 @@ |
|||||||
/** |
import { shortcut, Widget, extend, emptyFn, createWidget, toPix, parseFloat, HTapeLayout, GridLayout, isNumeric, clamp, MIN, MAX, KeyCode, add } from "@/core"; |
||||||
* Created by windy on 2017/3/13. |
import { SignEditor } from "@/case"; |
||||||
* 数值微调器 |
import { TextEditor } from "../editor"; |
||||||
*/ |
import { IconButton } from "@/base"; |
||||||
BI.NumberEditor = BI.inherit(BI.Widget, { |
|
||||||
_defaultConfig: function (conf) { |
@shortcut() |
||||||
return BI.extend(BI.NumberEditor.superclass._defaultConfig.apply(this, arguments), { |
export class NumberEditor extends Widget { |
||||||
baseCls: "bi-number-editor bi-focus-shadow " + (conf.simple ? "bi-border-bottom" : "bi-border bi-border-radius"), |
static xtype = "bi.number_editor" |
||||||
validationChecker: BI.emptyFn, |
|
||||||
valueFormatter: function (v) { |
static EVENT_CONFIRM = "EVENT_CONFIRM" |
||||||
|
static EVENT_CHANGE = "EVENT_CHANGE" |
||||||
|
|
||||||
|
_defaultConfig(conf) { |
||||||
|
return extend(super._defaultConfig(...arguments), { |
||||||
|
baseCls: `bi-number-editor bi-focus-shadow ${conf.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`, |
||||||
|
validationChecker: emptyFn, |
||||||
|
valueFormatter (v) { |
||||||
return v; |
return v; |
||||||
}, |
}, |
||||||
valueParser: function (v) { |
valueParser (v) { |
||||||
return v; |
return v; |
||||||
}, |
}, |
||||||
value: 0, |
value: 0, |
||||||
allowBlank: false, |
allowBlank: false, |
||||||
errorText: "", |
errorText: "", |
||||||
step: 1, |
step: 1, |
||||||
min: BI.MIN, |
min: MIN, |
||||||
max: BI.MAX, |
max: MAX, |
||||||
watermark: "", |
watermark: "", |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_init: function () { |
_init() { |
||||||
BI.NumberEditor.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.sign_editor", |
type: SignEditor.xtype, |
||||||
height: BI.toPix(o.height, 2), |
height: toPix(o.height, 2), |
||||||
simple: o.simple, |
simple: o.simple, |
||||||
allowBlank: o.allowBlank, |
allowBlank: o.allowBlank, |
||||||
watermark: o.watermark, |
watermark: o.watermark, |
||||||
value: o.valueFormatter(o.value), |
value: o.valueFormatter(o.value), |
||||||
validationChecker: function (v) { |
validationChecker: v => { |
||||||
// 不设置validationChecker就自动检测
|
// 不设置validationChecker就自动检测
|
||||||
var parsedValue = o.valueParser(v); |
const parsedValue = o.valueParser(v); |
||||||
if (o.validationChecker === BI.emptyFn && !self._checkValueInRange(parsedValue)) { |
if (o.validationChecker === emptyFn && !this._checkValueInRange(parsedValue)) { |
||||||
return false; |
return false; |
||||||
} |
} |
||||||
|
|
||||||
return o.validationChecker(parsedValue); |
return o.validationChecker(parsedValue); |
||||||
}, |
}, |
||||||
errorText: o.errorText, |
errorText: o.errorText, |
||||||
listeners: [ |
listeners: [{ |
||||||
{ |
eventName: SignEditor.EVENT_QUICK_DOWN, |
||||||
eventName: BI.SignEditor.EVENT_QUICK_DOWN, |
action: e => { |
||||||
action: e => { |
if ([KeyCode.UP, KeyCode.DOWN].includes(e.keyCode)) { |
||||||
if ([BI.KeyCode.UP, BI.KeyCode.DOWN].includes(e.keyCode)) { |
e.preventDefault(); |
||||||
e.preventDefault(); |
} |
||||||
} |
|
||||||
}, |
|
||||||
}, |
}, |
||||||
{ |
}, |
||||||
eventName: BI.SignEditor.EVENT_KEY_DOWN, |
{ |
||||||
action: (keycode) => { |
eventName: SignEditor.EVENT_KEY_DOWN, |
||||||
if (keycode === BI.KeyCode.UP) { |
action: keycode => { |
||||||
this._finetuning(o.step); |
if (keycode === KeyCode.UP) { |
||||||
|
this._finetuning(o.step); |
||||||
return; |
|
||||||
} |
return; |
||||||
if (keycode === BI.KeyCode.DOWN) { |
} |
||||||
this._finetuning(-o.step); |
if (keycode === KeyCode.DOWN) { |
||||||
} |
this._finetuning(-o.step); |
||||||
}, |
} |
||||||
} |
}, |
||||||
|
} |
||||||
], |
], |
||||||
}); |
}); |
||||||
this.editor.on(BI.TextEditor.EVENT_CHANGE, function () { |
this.editor.on(TextEditor.EVENT_CHANGE, () => { |
||||||
// 大多数时候valueFormatter往往需要配合valueParser一起使用
|
// 大多数时候valueFormatter往往需要配合valueParser一起使用
|
||||||
var value = this.getValue(); |
const value = this.editor.getValue(); |
||||||
var parsedValue = o.valueParser(value); |
const parsedValue = o.valueParser(value); |
||||||
this.setValue(o.valueFormatter(parsedValue)); |
this.editor.setValue(o.valueFormatter(parsedValue)); |
||||||
self.fireEvent(BI.NumberEditor.EVENT_CHANGE); |
this.fireEvent(NumberEditor.EVENT_CHANGE); |
||||||
}); |
}); |
||||||
this.editor.on(BI.TextEditor.EVENT_ERROR, function () { |
this.editor.on(TextEditor.EVENT_ERROR, () => { |
||||||
o.value = BI.parseFloat(this.getLastValidValue()); |
o.value = parseFloat(this.editor.getLastValidValue()); |
||||||
self._checkAdjustDisabled(o.value); |
this._checkAdjustDisabled(o.value); |
||||||
self.element.addClass("error"); |
this.element.addClass("error"); |
||||||
}); |
}); |
||||||
this.editor.on(BI.TextEditor.EVENT_VALID, function () { |
this.editor.on(TextEditor.EVENT_VALID, () => { |
||||||
o.value = BI.parseFloat(this.getValue()); |
o.value = parseFloat(this.editor.getValue()); |
||||||
self._checkAdjustDisabled(o.value); |
this._checkAdjustDisabled(o.value); |
||||||
self.element.removeClass("error"); |
this.element.removeClass("error"); |
||||||
}); |
}); |
||||||
this.editor.on(BI.TextEditor.EVENT_CONFIRM, function () { |
this.editor.on(TextEditor.EVENT_CONFIRM, () => { |
||||||
self.fireEvent(BI.NumberEditor.EVENT_CONFIRM); |
this.fireEvent(NumberEditor.EVENT_CONFIRM); |
||||||
}); |
}); |
||||||
this.topBtn = BI.createWidget({ |
this.topBtn = createWidget({ |
||||||
type: "bi.icon_button", |
type: IconButton.xtype, |
||||||
forceNotSelected: true, |
forceNotSelected: true, |
||||||
trigger: "lclick,", |
trigger: "lclick,", |
||||||
debounce: false, |
debounce: false, |
||||||
cls: (o.simple ? "solid-triangle-top-font " : "add-up-font bi-border-left ") + "top-button bi-list-item-active2 icon-size-12", |
cls: `${o.simple ? "solid-triangle-top-font " : "add-up-font bi-border-left "}top-button bi-list-item-active2 icon-size-12`, |
||||||
}); |
}); |
||||||
this.topBtn.on(BI.IconButton.EVENT_CHANGE, function () { |
this.topBtn.on(IconButton.EVENT_CHANGE, () => { |
||||||
self._finetuning(o.step); |
this._finetuning(o.step); |
||||||
self.fireEvent(BI.NumberEditor.EVENT_CHANGE); |
this.fireEvent(NumberEditor.EVENT_CHANGE); |
||||||
self.fireEvent(BI.NumberEditor.EVENT_CONFIRM); |
this.fireEvent(NumberEditor.EVENT_CONFIRM); |
||||||
}); |
}); |
||||||
this.bottomBtn = BI.createWidget({ |
this.bottomBtn = createWidget({ |
||||||
type: "bi.icon_button", |
type: IconButton.xtype, |
||||||
trigger: "lclick,", |
trigger: "lclick,", |
||||||
forceNotSelected: true, |
forceNotSelected: true, |
||||||
debounce: false, |
debounce: false, |
||||||
cls: (o.simple ? "solid-triangle-bottom-font " : "minus-down-font bi-border-left ") + "bottom-button bi-list-item-active2 icon-size-12", |
cls: `${o.simple ? "solid-triangle-bottom-font " : "minus-down-font bi-border-left "}bottom-button bi-list-item-active2 icon-size-12`, |
||||||
}); |
}); |
||||||
this.bottomBtn.on(BI.IconButton.EVENT_CHANGE, function () { |
this.bottomBtn.on(IconButton.EVENT_CHANGE, () => { |
||||||
self._finetuning(-o.step); |
this._finetuning(-o.step); |
||||||
self.fireEvent(BI.NumberEditor.EVENT_CHANGE); |
this.fireEvent(NumberEditor.EVENT_CHANGE); |
||||||
self.fireEvent(BI.NumberEditor.EVENT_CONFIRM); |
this.fireEvent(NumberEditor.EVENT_CONFIRM); |
||||||
}); |
}); |
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.htape", |
type: HTapeLayout.xtype, |
||||||
height: BI.toPix(o.height, 2), |
height: toPix(o.height, 2), |
||||||
element: this, |
element: this, |
||||||
items: [ |
items: [ |
||||||
this.editor, { |
this.editor, { |
||||||
el: { |
el: { |
||||||
type: "bi.grid", |
type: GridLayout.xtype, |
||||||
columns: 1, |
columns: 1, |
||||||
rows: 2, |
rows: 2, |
||||||
items: [ |
items: [{ |
||||||
{ |
column: 0, |
||||||
column: 0, |
row: 0, |
||||||
row: 0, |
el: this.topBtn, |
||||||
el: this.topBtn, |
}, { |
||||||
}, { |
column: 0, |
||||||
column: 0, |
row: 1, |
||||||
row: 1, |
el: this.bottomBtn, |
||||||
el: this.bottomBtn, |
}], |
||||||
} |
|
||||||
], |
|
||||||
}, |
}, |
||||||
width: 23, |
width: 23, |
||||||
} |
} |
||||||
], |
], |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
focus: function () { |
focus() { |
||||||
this.editor.focus(); |
this.editor.focus(); |
||||||
}, |
} |
||||||
|
|
||||||
isEditing: function () { |
isEditing() { |
||||||
return this.editor.isEditing(); |
return this.editor.isEditing(); |
||||||
}, |
} |
||||||
|
|
||||||
_checkValueInRange: function (v) { |
_checkValueInRange(v) { |
||||||
var o = this.options; |
const o = this.options; |
||||||
|
|
||||||
return !!(BI.isNumeric(v) && BI.parseFloat(v) >= o.min && BI.parseFloat(v) <= o.max); |
return !!(isNumeric(v) && parseFloat(v) >= o.min && parseFloat(v) <= o.max); |
||||||
}, |
} |
||||||
|
|
||||||
_checkAdjustDisabled: function (v) { |
_checkAdjustDisabled(v) { |
||||||
if (this.options.validationChecker === BI.emptyFn) { |
if (this.options.validationChecker === emptyFn) { |
||||||
this.bottomBtn.setEnable(BI.parseFloat(v) > this.options.min); |
this.bottomBtn.setEnable(parseFloat(v) > this.options.min); |
||||||
this.topBtn.setEnable(BI.parseFloat(v) < this.options.max); |
this.topBtn.setEnable(parseFloat(v) < this.options.max); |
||||||
} |
} |
||||||
}, |
} |
||||||
|
|
||||||
// 微调
|
_finetuning(addValue) { |
||||||
_finetuning: function (add) { |
const { |
||||||
const { max, min } = this.options; |
max, |
||||||
let v = BI.parseFloat(this.getValue()); |
min, |
||||||
v = BI.add(v, add); |
} = this.options; |
||||||
v = BI.clamp(v, min, max); |
let v = parseFloat(this.getValue()); |
||||||
|
v = add(v, addValue); |
||||||
|
v = clamp(v, min, max); |
||||||
this.setValue(v); |
this.setValue(v); |
||||||
}, |
} |
||||||
|
|
||||||
setUpEnable: function (v) { |
setUpEnable(v) { |
||||||
this.topBtn.setEnable(!!v); |
this.topBtn.setEnable(!!v); |
||||||
}, |
} |
||||||
|
|
||||||
setDownEnable: function (v) { |
setDownEnable(v) { |
||||||
this.bottomBtn.setEnable(!!v); |
this.bottomBtn.setEnable(!!v); |
||||||
}, |
} |
||||||
|
|
||||||
getLastValidValue: function () { |
getLastValidValue() { |
||||||
return this.editor.getLastValidValue(); |
return this.editor.getLastValidValue(); |
||||||
}, |
} |
||||||
|
|
||||||
getLastChangedValue: function () { |
getLastChangedValue() { |
||||||
return this.editor.getLastChangedValue(); |
return this.editor.getLastChangedValue(); |
||||||
}, |
} |
||||||
|
|
||||||
getValue: function () { |
getValue() { |
||||||
return this.options.value; |
return this.options.value; |
||||||
}, |
} |
||||||
|
|
||||||
setValue: function (v) { |
setValue(v) { |
||||||
var o = this.options; |
const o = this.options; |
||||||
o.value = v; |
o.value = v; |
||||||
this.editor.setValue(o.valueFormatter(v)); |
this.editor.setValue(o.valueFormatter(v)); |
||||||
this._checkAdjustDisabled(o.value); |
this._checkAdjustDisabled(o.value); |
||||||
}, |
} |
||||||
|
} |
||||||
}); |
|
||||||
BI.NumberEditor.EVENT_CONFIRM = "EVENT_CONFIRM"; |
|
||||||
BI.NumberEditor.EVENT_CHANGE = "EVENT_CHANGE"; |
|
||||||
BI.shortcut("bi.number_editor", BI.NumberEditor); |
|
||||||
|
|||||||
Loading…
Reference in new issue