caoww
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

DESIGN-4216 feat: 容器组件提供一些滚动api

es6
zsmj 2 years ago
parent
301b38035b
commit
725253f112
9 changed files with 98 additions and 40 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      src/base/combination/group.button.js
  2. 16
      src/base/combination/group.virtual.js
  3. 16
      src/base/list/listview.js
  4. 9
      src/base/list/virtuallist.js
  5. 2
      typescript/base/combination/group.button.ts
  6. 6
      typescript/base/combination/group.virtual.ts
  7. 4
      typescript/base/list/listview.ts
  8. 11
      typescript/base/list/virtuallist.ts
  9. 62
      typescript/index.ts

12
src/base/combination/group.button.js
Unescape View File

@ -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 = [];

16
src/base/combination/group.virtual.js
Unescape View File

@ -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

16
src/base/list/listview.js
Unescape View File

@ -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();

9
src/base/list/virtuallist.js
Unescape View File

@ -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();

2
typescript/base/combination/group.button.ts
Unescape View File

@ -40,4 +40,6 @@ export declare class ButtonGroup extends Widget {
getNodeByValue(value: any): any;
getValue<T>(): T[];
scrollToValue(value: any, scrollIntoViewOptions?: boolean | Obj): void;
}

6
typescript/base/combination/group.virtual.ts
Unescape View File

@ -3,7 +3,7 @@ import { Widget } from '../../core/widget';
export declare class VirtualGroup extends Widget {
static xtype: string;
static EVENT_CHANGE: string;
addItems<T>(items: T[]): void;
prependItems<T>(items: T[]): void;
@ -13,4 +13,6 @@ export declare class VirtualGroup extends Widget {
getValue<T>(): T[];
populate(items?: any, ...args: any[]): void
}
scrollToValue(value: any, scrollIntoViewOptions?: boolean | Obj): void;
}

4
typescript/base/list/listview.ts
Unescape View File

@ -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<T>(items: T[]): void;
scrollTo(scrollTop: number): void;
}

11
typescript/base/list/virtuallist.ts
Unescape View File

@ -0,0 +1,11 @@
import { Widget } from "../../core/widget";
export declare class VirtualList extends Widget {
static xtype: string;
restore(): void;
populate<T>(items: T[]): void;
scrollTo(scrollTop: number): void;
}

62
typescript/index.ts
Unescape View File

@ -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,

Write Preview
Loading…
Cancel
Save