From 725253f1127f276b2651a0db99fa7f9500900a55 Mon Sep 17 00:00:00 2001 From: zsmj Date: Mon, 4 Jul 2022 17:50:27 +0800 Subject: [PATCH] =?UTF-8?q?DESIGN-4216=20feat:=20=E5=AE=B9=E5=99=A8?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=8F=90=E4=BE=9B=E4=B8=80=E4=BA=9B=E6=BB=9A?= =?UTF-8?q?=E5=8A=A8api?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/combination/group.button.js | 12 +++- src/base/combination/group.virtual.js | 16 ++++- src/base/list/listview.js | 16 +++-- src/base/list/virtuallist.js | 9 ++- typescript/base/combination/group.button.ts | 2 + typescript/base/combination/group.virtual.ts | 6 +- typescript/base/list/listview.ts | 4 +- typescript/base/list/virtuallist.ts | 11 ++++ typescript/index.ts | 62 +++++++++++--------- 9 files changed, 98 insertions(+), 40 deletions(-) create mode 100644 typescript/base/list/virtuallist.ts diff --git a/src/base/combination/group.button.js b/src/base/combination/group.button.js index 68dd3e5d0..ed4f9d680 100644 --- a/src/base/combination/group.button.js +++ b/src/base/combination/group.button.js @@ -197,7 +197,7 @@ BI.ButtonGroup = BI.inherit(BI.Widget, { items = this._packageItems(items, this._packageBtns(this.buttons)); } - this.layouts = BI.createWidget(BI.extend({element: this}, this._packageLayout(items))); + this.layouts = BI.createWidget(BI.extend({ element: this }, this._packageLayout(items))); }, setNotSelectedValue: function (v) { @@ -331,6 +331,16 @@ BI.ButtonGroup = BI.inherit(BI.Widget, { return node; }, + /** + * 滚动到指定的节点 + */ + scrollToValue: function (value, scrollIntoViewOptions) { + var node = this.getNodeByValue(value); + if (node) { + node.element[0].scrollIntoView(scrollIntoViewOptions); + } + }, + empty: function () { BI.ButtonGroup.superclass.empty.apply(this, arguments); this.options.items = []; diff --git a/src/base/combination/group.virtual.js b/src/base/combination/group.virtual.js index e816ab108..d42c7a5b7 100644 --- a/src/base/combination/group.virtual.js +++ b/src/base/combination/group.virtual.js @@ -96,6 +96,20 @@ BI.VirtualGroup = BI.inherit(BI.Widget, { return v; }, + getNodeByValue: function (value) { + return this.buttonMap[value]; + }, + + /** + * 滚动到指定的节点 + */ + scrollToValue: function (value, scrollIntoViewOptions) { + var node = this.getNodeByValue(value); + if (node) { + node.element[0].scrollIntoView(scrollIntoViewOptions); + } + }, + getValue: function () { var v = []; BI.each(this.buttonMap, function (i, item) { @@ -113,7 +127,7 @@ BI.VirtualGroup = BI.inherit(BI.Widget, { this.options.items = items; items = this._packageBtns(items); if (!this.layouts) { - this.layouts = BI.createWidget(BI.extend({element: this}, this._packageLayout(items))); + this.layouts = BI.createWidget(BI.extend({ element: this }, this._packageLayout(items))); } else { this.layouts.populate(items, { context: this diff --git a/src/base/list/listview.js b/src/base/list/listview.js index 052abc139..65f777a99 100644 --- a/src/base/list/listview.js +++ b/src/base/list/listview.js @@ -1,5 +1,5 @@ /** - * 表示当前对象 + * 边滚动边加载的列表控件 * * Created by GUY on 2017/5/23. * @class BI.ListView @@ -33,8 +33,8 @@ BI.ListView = BI.inherit(BI.Widget, { items: [BI.extend({ type: "bi.vertical", scrolly: false, - ref: function () { - self.container = this; + ref: function (_ref) { + self.container = _ref; } }, o.el)], element: this @@ -69,8 +69,8 @@ BI.ListView = BI.inherit(BI.Widget, { var self = this, o = this.options; var height = this.element.height(); var minContentHeight = o.scrollTop + height + o.overscanHeight; - var index = (this.cache[this.renderedIndex] && (this.cache[this.renderedIndex].index + o.blockSize)) || 0, - cnt = this.renderedIndex + 1; + var index = (this.cache[this.renderedIndex] && (this.cache[this.renderedIndex].index + o.blockSize)) || 0; + var cnt = this.renderedIndex + 1; var lastHeight; var getElementHeight = function () { return self.container.element.height(); @@ -112,6 +112,12 @@ BI.ListView = BI.inherit(BI.Widget, { this.cache = {}; }, + scrollTo: function (scrollTop) { + this.options.scrollTop = scrollTop; + this._calculateBlocksToRender(); + this.element.scrollTop(scrollTop); + }, + populate: function (items) { if (items && this.options.items !== items) { this.restore(); diff --git a/src/base/list/virtuallist.js b/src/base/list/virtuallist.js index b7f2700c7..d5881b30b 100644 --- a/src/base/list/virtuallist.js +++ b/src/base/list/virtuallist.js @@ -46,7 +46,6 @@ BI.VirtualList = BI.inherit(BI.Widget, { self.bottomBlank = this; } }], - element: this }; }, @@ -78,7 +77,7 @@ BI.VirtualList = BI.inherit(BI.Widget, { while ((lastHeight = getElementHeight()) < minContentHeight && index < o.items.length) { var items = o.items.slice(index, index + o.blockSize); this.container.addItems(items.map(function (item, i) { - return o.itemFormatter(item, index + i) + return o.itemFormatter(item, index + i); }), this); var addedHeight = getElementHeight() - lastHeight; this.tree.set(cnt, addedHeight); @@ -177,6 +176,12 @@ BI.VirtualList = BI.inherit(BI.Widget, { this.container.attr("items", []); }, + scrollTo: function (scrollTop) { + this.options.scrollTop = scrollTop; + this._calculateBlocksToRender(); + this.element.scrollTop(scrollTop); + }, + restore: function () { this.renderedIndex = -1; this._clearChildren(); diff --git a/typescript/base/combination/group.button.ts b/typescript/base/combination/group.button.ts index eca1a224b..020ef0275 100644 --- a/typescript/base/combination/group.button.ts +++ b/typescript/base/combination/group.button.ts @@ -40,4 +40,6 @@ export declare class ButtonGroup extends Widget { getNodeByValue(value: any): any; getValue(): T[]; + + scrollToValue(value: any, scrollIntoViewOptions?: boolean | Obj): void; } diff --git a/typescript/base/combination/group.virtual.ts b/typescript/base/combination/group.virtual.ts index c3004e75f..d8e8c1b24 100644 --- a/typescript/base/combination/group.virtual.ts +++ b/typescript/base/combination/group.virtual.ts @@ -3,7 +3,7 @@ import { Widget } from '../../core/widget'; export declare class VirtualGroup extends Widget { static xtype: string; static EVENT_CHANGE: string; - + addItems(items: T[]): void; prependItems(items: T[]): void; @@ -13,4 +13,6 @@ export declare class VirtualGroup extends Widget { getValue(): T[]; populate(items?: any, ...args: any[]): void -} \ No newline at end of file + + scrollToValue(value: any, scrollIntoViewOptions?: boolean | Obj): void; +} diff --git a/typescript/base/list/listview.ts b/typescript/base/list/listview.ts index 459623383..b0007d5a1 100644 --- a/typescript/base/list/listview.ts +++ b/typescript/base/list/listview.ts @@ -1,4 +1,4 @@ -import { Widget } from '../../core/widget'; +import { Widget } from "../../core/widget"; export declare class ListView extends Widget { static xtype: string; @@ -6,4 +6,6 @@ export declare class ListView extends Widget { restore(): void; populate(items: T[]): void; + + scrollTo(scrollTop: number): void; } diff --git a/typescript/base/list/virtuallist.ts b/typescript/base/list/virtuallist.ts new file mode 100644 index 000000000..f23c00487 --- /dev/null +++ b/typescript/base/list/virtuallist.ts @@ -0,0 +1,11 @@ +import { Widget } from "../../core/widget"; + +export declare class VirtualList extends Widget { + static xtype: string; + + restore(): void; + + populate(items: T[]): void; + + scrollTo(scrollTop: number): void; +} diff --git a/typescript/index.ts b/typescript/index.ts index c8be7c201..d0d524c36 100644 --- a/typescript/index.ts +++ b/typescript/index.ts @@ -20,12 +20,12 @@ import { IconChangeButton } from "./case/button/icon/icon.change"; import { MultiSelectItem } from "./case/button/item.multiselect"; import { BubbleCombo } from "./case/combo/bubblecombo/combo.bubble"; import { TextValueCombo } from "./case/combo/combo.textvalue"; -import { SmallTextValueCombo } from './case/combo/combo.textvaluesmall'; +import { SmallTextValueCombo } from "./case/combo/combo.textvaluesmall"; import { SearchTextValueCombo } from "./case/combo/searchtextvaluecombo/combo.searchtextvalue"; import { SignEditor } from "./case/editor/editor.sign"; -import { StateEditor } from './case/editor/editor.state'; +import { StateEditor } from "./case/editor/editor.state"; import { AllValueMultiTextValueCombo } from "./component/allvaluemultitextvaluecombo/allvalue.multitextvalue.combo"; -import { Form } from './component/form/form'; +import { Form } from "./component/form/form"; import { AbstractTreeValueChooser } from "./component/treevaluechooser/abstract.treevaluechooser"; import { AbstractListTreeValueChooser } from "./component/treevaluechooser/abstract.treevaluechooser.list"; import { Action, ActionFactory } from "./core/action/action"; @@ -53,7 +53,10 @@ import { DownListCombo } from "./widget/downlist/combo.downlist"; import { DownListPopup } from "./widget/downlist/popup.downlist"; import { Icon } from "./base/single/icon/icon"; import { LeftVerticalAdaptLayout } from "./core/wrapper/layout/adapt/adapt.leftvertical"; -import { LeftRightVerticalAdaptLayout, RightVerticalAdaptLayout } from "./core/wrapper/layout/adapt/adapt.leftrightvertical"; +import { + LeftRightVerticalAdaptLayout, + RightVerticalAdaptLayout, +} from "./core/wrapper/layout/adapt/adapt.leftrightvertical"; import { IconTextIconItem } from "./base/single/button/listitem/icontexticonitem"; import { HorizontalAutoLayout } from "./core/wrapper/layout/adapt/auto.horizontal"; import { InlineVerticalAdaptLayout } from "./core/wrapper/layout/adapt/inline.vertical"; @@ -82,14 +85,14 @@ import { MultiSelectCombo } from "./widget/multiselect/multiselect.combo"; import { SearchEditor } from "./widget/editor/editor.search"; import { MultiLayerSingleLevelTree } from "./widget/multilayersingletree/multilayersingletree.leveltree"; import { SimpleColorChooser } from "./case/colorchooser/colorchooser.simple"; -import { ColorChooser } from './case/colorchooser/colorchooser'; +import { ColorChooser } from "./case/colorchooser/colorchooser"; import { A } from "./base/a/a"; import { Html } from "./base/single/html/html"; import { Switcher } from "./base/combination/switcher"; -import { Expander } from './base/combination/expander'; +import { Expander } from "./base/combination/expander"; import { Loader } from "./base/combination/loader"; import { ListPane } from "./case/layer/pane.list"; -import { MultiPopupView } from './case/layer/layer.multipopup'; +import { MultiPopupView } from "./case/layer/layer.multipopup"; import { MultiSelectBar } from "./case/toolbar/toolbar.multiselect"; import { SelectList } from "./case/list/list.select"; import { AbstractAllValueChooser } from "./component/allvaluechooser/abstract.allvaluechooser"; @@ -130,7 +133,7 @@ import { TextValueDownListCombo } from "./widget/textvaluedownlistcombo/combo.te import { Switch } from "./case/button/switch"; import { HorizontalLayout } from "./core/wrapper/layout/layout.horizontal"; import { ShelterEditor } from "./case/editor/editor.shelter"; -import { TextTrigger } from './case/trigger/trigger.text'; +import { TextTrigger } from "./case/trigger/trigger.text"; import { SelectTextTrigger } from "./case/trigger/trigger.text.select"; import { DateInterval } from "./widget/timeinterval/dateinterval"; import { DynamicDatePane } from "./widget/datepane/datepane"; @@ -151,43 +154,44 @@ import { Segment } from "./case/segment/segment"; import { LinearSegment } from "./case/linersegment/linear.segment"; import { Img } from "./base/single/img/img"; import { EditorIconCheckCombo } from "./case/combo/editoriconcheckcombo/combo.editiconcheck"; -import { IconTextValueCombo } from './case/combo/icontextvaluecombo/combo.icontextvalue'; -import { ListView } from './base/list/listview'; -import { FloatCenterLayout } from './core/wrapper/layout/middle/middle.float.center'; -import { _msg } from './base/foundation/message'; -import { _web } from './core/platform/web'; -import { DynamicYearMonthPopup } from './widget/yearmonth/popup.yearmonth'; -import { _utils } from './core/utils'; +import { IconTextValueCombo } from "./case/combo/icontextvaluecombo/combo.icontextvalue"; +import { ListView } from "./base/list/listview"; +import { VirtualList } from "./base/list/virtuallist"; +import { FloatCenterLayout } from "./core/wrapper/layout/middle/middle.float.center"; +import { _msg } from "./base/foundation/message"; +import { _web } from "./core/platform/web"; +import { DynamicYearMonthPopup } from "./widget/yearmonth/popup.yearmonth"; +import { _utils } from "./core/utils"; import { Controller } from "./core/controller/controller"; import { LayerController } from "./core/controller/controller.layer"; import { DateCalendarPopup } from "./widget/date/calendar/popup.calendar.date"; import { Tree, Node } from "./core/utils/tree"; import { TextNode } from "./base/single/button/node/textnode"; import { TextValueCheckComboPopup } from "./case/combo/textvaluecheckcombo/popup.textvaluecheck"; -import { ImageButton } from './base/single/button/buttons/button.image'; +import { ImageButton } from "./base/single/button/buttons/button.image"; import { History, Router } from "./router/router"; -import { DateTimeCombo } from './widget/datetime/datetime.combo'; +import { DateTimeCombo } from "./widget/datetime/datetime.combo"; import { FloatHorizontalLayout } from "./core/wrapper/layout/adapt/float.horizontal"; import { AdaptiveLayout } from "./core/wrapper/layout/layout.adaptive"; -import { HexColorChooserPopup } from './case/colorchooser/colorchooser.popup.hex'; -import { BlankIconTextItem } from './base/single/button/listitem/blankicontextitem'; +import { HexColorChooserPopup } from "./case/colorchooser/colorchooser.popup.hex"; +import { BlankIconTextItem } from "./base/single/button/listitem/blankicontextitem"; import { Broadcasts, Layers } from "./base/base"; import { BroadcastController } from "./core/controller/controller.broadcast"; import { Pager } from "./base/pager/pager"; -import { TimeInterval } from './widget/timeinterval/timeinterval'; -import { DynamicDateTimePane } from './widget/datetimepane/datetimepane'; -import { SingleSelectInsertList } from './widget/singleselect/singleselectlist.insert'; -import { MultiSelectTree } from './widget/multiselecttree/multiselecttree'; +import { TimeInterval } from "./widget/timeinterval/timeinterval"; +import { DynamicDateTimePane } from "./widget/datetimepane/datetimepane"; +import { SingleSelectInsertList } from "./widget/singleselect/singleselectlist.insert"; +import { MultiSelectTree } from "./widget/multiselecttree/multiselecttree"; import { HtmlLabel } from "./base/single/label/html.label"; -import { TreeValueChooserPane } from './component/treevaluechooser/pane.treevaluechooser'; -import { TdLayout } from './core/wrapper/layout/layout.td'; -import { MultiLayerSelectLevelTree } from './widget/multilayerselecttree/multilayerselecttree.leveltree'; -import { SelectTreeExpander } from './widget/selecttree/selecttree.expander'; +import { TreeValueChooserPane } from "./component/treevaluechooser/pane.treevaluechooser"; +import { TdLayout } from "./core/wrapper/layout/layout.td"; +import { MultiLayerSelectLevelTree } from "./widget/multilayerselecttree/multilayerselecttree.leveltree"; +import { SelectTreeExpander } from "./widget/selecttree/selecttree.expander"; import { DownListGroupItem } from "./widget/downlist/item.downlistgroup"; import { VerticalStickyLayout } from "./core/wrapper/layout/sticky/sticky.vertical"; import { HorizontalStickyLayout } from "./core/wrapper/layout/sticky/sticky.horizontal"; import { TableLayout } from "./core/wrapper/layout/layout.table"; -import './shims-tsx'; +import "./shims-tsx"; import { Workers } from "./core/worker/workers"; @@ -356,6 +360,7 @@ export interface BI extends _func, _i18n, _base, _inject, _var, _web, _utils { EditorIconCheckCombo: typeof EditorIconCheckCombo; IconTextValueCombo: typeof IconTextValueCombo; ListView: typeof ListView; + VirtualList: typeof VirtualList; FloatCenterLayout: typeof FloatCenterLayout; Msg: _msg; DynamicYearMonthPopup: typeof DynamicYearMonthPopup; @@ -550,6 +555,7 @@ export { EditorIconCheckCombo, IconTextValueCombo, ListView, + VirtualList, FloatCenterLayout, DynamicYearMonthPopup, DateCalendarPopup,