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