forked from fanruan/fineui
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
176 lines
5.8 KiB
176 lines
5.8 KiB
import { |
|
shortcut, |
|
find, |
|
i18nText, |
|
isNotEmptyString, |
|
VerticalAdaptLayout |
|
} from "@/core"; |
|
import { |
|
ButtonGroup, |
|
Trigger, |
|
Searcher, |
|
IconButton |
|
} from "@/base"; |
|
import { TriggerIconButton } from "../../button"; |
|
import { DefaultTextEditor } from "../../editor"; |
|
|
|
@shortcut() |
|
export class SearchTextValueTrigger extends Trigger { |
|
static xtype = "bi.search_text_value_trigger"; |
|
|
|
static EVENT_SEARCHING = "EVENT_SEARCHING"; |
|
static EVENT_STOP = "EVENT_STOP"; |
|
static EVENT_START = "EVENT_START"; |
|
static EVENT_CHANGE = "EVENT_CHANGE"; |
|
static EVENT_CLEAR = "EVENT_CLEAR"; |
|
|
|
props() { |
|
return { |
|
baseCls: "bi-search-text-value-trigger", |
|
height: 24, |
|
watermark: i18nText("BI-Basic_Search"), |
|
allowClear: false, |
|
title: () => this.editor.getText(), |
|
}; |
|
} |
|
|
|
render() { |
|
const o = this.options; |
|
|
|
const triggerButton = { |
|
type: TriggerIconButton.xtype, |
|
cls: "trigger-icon-button", |
|
ref: _ref => { |
|
this.triggerBtn = _ref; |
|
}, |
|
width: o.height, |
|
height: o.height, |
|
}; |
|
|
|
const stateText = this._digest(o.value, o.items) || o.text; |
|
|
|
return { |
|
type: "bi.horizontal_fill", |
|
columnSize: ["fill", 24], |
|
items: [ |
|
{ |
|
el: { |
|
type: Searcher.xtype, |
|
ref: _ref => { |
|
this.searcher = this; |
|
}, |
|
isAutoSearch: false, |
|
el: { |
|
type: DefaultTextEditor.xtype, |
|
ref: _ref => { |
|
this.editor = _ref; |
|
}, |
|
watermark: o.watermark, |
|
defaultText: o.defaultText, |
|
text: stateText, |
|
value: o.value, |
|
height: o.height, |
|
}, |
|
popup: { |
|
type: "bi.search_text_value_combo_popup", |
|
cls: "bi-card", |
|
chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE, |
|
tipText: i18nText("BI-No_Select"), |
|
}, |
|
onSearch (obj, callback) { |
|
const keyword = obj.keyword; |
|
const finding = BI.Func.getSearchResult( |
|
o.items, |
|
keyword |
|
); |
|
const matched = finding.match, |
|
find = finding.find; |
|
callback(matched, find); |
|
}, |
|
listeners: [ |
|
{ |
|
eventName: Searcher.EVENT_CHANGE, |
|
action: () => { |
|
this.fireEvent( |
|
SearchTextValueTrigger.EVENT_CHANGE |
|
); |
|
}, |
|
} |
|
], |
|
}, |
|
}, |
|
{ |
|
el: o.allowClear |
|
? { |
|
type: VerticalAdaptLayout.xtype, |
|
horizontalAlign: "left", |
|
scrollable: false, |
|
items: [ |
|
{ |
|
el: { |
|
type: IconButton.xtype, |
|
ref: _ref => { |
|
this.clearBtn = _ref; |
|
}, |
|
cls: |
|
`close-h-font ${ |
|
o.allowClear |
|
? "clear-button" |
|
: ""}`, |
|
stopPropagation: true, |
|
invisible: |
|
!isNotEmptyString(stateText), |
|
width: o.height, |
|
height: o.height, |
|
handler: () => { |
|
this.fireEvent( |
|
SearchTextValueTrigger.EVENT_CLEAR |
|
); |
|
}, |
|
}, |
|
}, |
|
{ |
|
el: triggerButton, |
|
} |
|
], |
|
} |
|
: triggerButton, |
|
width: 24, |
|
} |
|
], |
|
}; |
|
} |
|
|
|
_setState(v) { |
|
this.editor.setState(v); |
|
} |
|
|
|
_digest(value, items) { |
|
const result = find(items, (i, item) => item.value === value); |
|
|
|
return result?.text; |
|
} |
|
|
|
stopEditing() { |
|
this.searcher.stopSearch(); |
|
} |
|
|
|
getSearcher() { |
|
return this.searcher; |
|
} |
|
|
|
populate(items) { |
|
this.options.items = items; |
|
} |
|
|
|
setValue(vals) { |
|
const digestText = this._digest(vals, this.options.items); |
|
this._setState(digestText); |
|
this.options.allowClear && |
|
this.clearBtn.setVisible(isNotEmptyString(digestText)); |
|
} |
|
|
|
getValue() { |
|
return this.searcher.getValue(); |
|
} |
|
}
|
|
|