@douyinfe/semi-ui 2.17.1 → 2.18.0-beta.0

package/transfer/_story/transfer.stories.js

@@ -195,7 +195,7 @@ TransferDraggableAndDisabled.story = {
 }
 
 
-const ControledTransfer = () => {
+const ControlledTransfer = () => {
   const [value, setValue] = useState([2, 3]);
 
   const handleChange = value => {
@@ -209,7 +209,7 @@ const ControledTransfer = () => {
   );
 };
 
-export const ControlledTransfer = () => <ControledTransfer />;
+export const ControlledTransfer = () => <ControlledTransfer />;
 
 ControlledTransfer.story = {
   name: '受控Transfer',

package/tree/_story/tree.stories.js

@@ -1,9 +1,9 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useCallback } from 'react';
 import { cloneDeep, difference, isEqual } from 'lodash';
 import { IconEdit, IconMapPin, IconMore } from '@douyinfe/semi-icons';
 import Tree from '../index';
 import AutoSizer from '../autoSizer';
-import { Button, ButtonGroup, Input, Popover, Toast, Space } from '../../index';
+import { Button, ButtonGroup, Input, Popover, Toast, Space, Select, Switch } from '../../index';
 import BigTree from './BigData';
 import testData from './data';
 const TreeNode = Tree.TreeNode;
@@ -2398,4 +2398,153 @@ export const ValueImpactExpansionWithDynamicTreeData = () => {
       </Space>
     </>
   )
-}
+}
+
+class DemoV extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            gData: [],
+            total: 0,
+            align: 'center',
+            scrollKey: '',
+            expandAll: false,
+        };
+        this.onGen = this.onGen.bind(this);
+        this.onScroll = this.onScroll.bind(this);
+        this.onInputChange = this.onInputChange.bind(this);
+        this.onInputBlur = this.onInputBlur.bind(this);
+        this.onSelectChange = this.onSelectChange.bind(this);
+        this.treeRef = React.createRef();
+    }
+
+    generateData(x = 5, y = 4, z = 3, gData = []) {
+        // x：每一级下的节点总数。y：每级节点里有y个节点、存在子节点。z：树的level层级数（0表示一级）
+        function _loop(_level, _preKey, _tns) {
+            const preKey = _preKey || '0';
+            const tns = _tns || gData;
+
+            const children = [];
+            for (let i = 0; i < x; i++) {
+                const key = `${preKey}-${i}`;
+                tns.push({ label: `${key}-标签`, key: `${key}-key`, value: `${key}-value` });
+                if (i < y) {
+                    children.push(key);
+                }
+            }
+            if (_level < 0) {
+                return tns;
+            }
+            const __level = _level - 1;
+            children.forEach((key, index) => {
+                tns[index].children = [];
+                return _loop(__level, key, tns[index].children);
+            });
+
+            return null;
+        }
+        _loop(z);
+
+        function calcTotal(x, y, z) {
+            const rec = n => (n >= 0 ? x * y ** n-- + rec(n) : 0);
+            return rec(z + 1);
+        }
+        return { gData, total: calcTotal(x, y, z) };
+    }
+
+    onGen() {
+        const { gData, total } = this.generateData();
+        this.setState({
+            gData,
+            total
+        });
+    };
+
+    onScroll(scrollKey, align) {
+      this.treeRef?.current.scrollTo({ key: scrollKey, align});
+    }
+
+    onInputChange(value) {
+      this.setState({
+        scrollKey: value,
+      })
+    }
+
+    onInputBlur(e) {
+      const { value } = e.target;
+      this.onScroll(value, this.state.align);
+    }
+
+    onSelectChange(align){
+      this.setState({
+        align: align,
+      })
+      this.onScroll(this.state.scrollKey, align);
+    }
+
+    render() {
+        const style = {
+            width: 260,
+            border: '1px solid var(--semi-color-border)'
+        };
+        return (
+            <div style={{ padding: '0 20px' }}>
+                <Button onClick={this.onGen}>生成数据: </Button>
+                <span>共 {this.state.total} 个节点</span>
+                <br/>
+                <br/>
+                <div style={{ display: 'flex', alignItems: 'center', }}>
+                  <span>defaultExpandAll</span>
+                  <Switch onChange={(value) => {
+                      this.setState({
+                        expandAll: value,
+                      })
+                  }}/>
+                </div>
+                <br/>
+                <span>跳转的key：</span>
+                <Input
+                  placeholder={'格式：x-x-key'} 
+                  style={{ width: 180, marginRight: 20 }} 
+                  onChange={this.onInputChange}
+                  onBlur={this.onInputBlur}
+                ></Input>
+                <span>scroll align：</span>
+                <Select 
+                  defaultValue='center'
+                  style={{ width: 180 }} 
+                  optionList={['center', 'start', 'end', 'smart', 'auto'].map(item => ({
+                    value: item,
+                    label: item,
+                  }))}
+                  onChange={this.onSelectChange}
+                >
+                </Select>
+                <br />
+                <br />
+                {this.state.gData.length ? (
+                    <Tree
+                        key={`key-${this.state.expandAll}`}
+                        ref={this.treeRef}
+                        defaultExpandAll={this.state.expandAll}
+                        treeData={this.state.gData}
+                        filterTreeNode
+                        showFilteredOnly
+                        style={style}
+                        virtualize={{
+                            // if set height for tree, it will fill 100%
+                            height: 300,
+                            itemSize: 28,
+                        }}
+                    />
+                ) : null}
+            </div>
+        );
+    }
+}
+
+export const virtualizeTree = () => <DemoV />;
+
+virtualizeTree.story = {
+  name: 'virtualize tree',
+};

package/tree/index.tsx

@@ -39,7 +39,8 @@ import {
     TreeNodeData,
     FlattenNode,
     KeyEntity,
-    OptionProps
+    OptionProps,
+    ScrollData,
 } from './interface';
 import CheckboxGroup from '../checkbox/checkboxGroup';
 
@@ -146,6 +147,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
     onNodeClick: any;
     onMotionEnd: any;
     context: ContextValue;
+    virtualizedListRef: React.RefObject<any>;
 
     constructor(props: TreeProps) {
         super(props);
@@ -179,6 +181,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
         this.optionsRef = React.createRef();
         this.foundation = new TreeFoundation(this.adapter);
         this.dragNode = null;
+        this.virtualizedListRef = React.createRef();
     }
 
     /**
@@ -493,6 +496,17 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
         this.foundation.handleInputChange(value);
     };
 
+    scrollTo = (scrollData: ScrollData) => {
+        const { key, align = 'center' } = scrollData;
+        const { flattenNodes } = this.state;
+        if (key) {
+            const index = flattenNodes?.findIndex((node) => {
+                return node.key === key;
+            });
+            index >= 0 && (this.virtualizedListRef.current as any)?.scrollToItem(index, align);
+        }
+    }
+
     renderInput() {
         const {
             searchClassName,
@@ -664,6 +678,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
             <AutoSizer defaultHeight={virtualize.height} defaultWidth={virtualize.width}>
                 {({ height, width }: { width: string | number; height: string | number }) => (
                     <VirtualList
+                        ref={this.virtualizedListRef}
                         itemCount={flattenNodes.length}
                         itemSize={virtualize.itemSize}
                         height={height}

package/tree/interface.ts

@@ -140,3 +140,9 @@ export interface NodeListState {
     cachedMotionKeys?: Set<string>;
     cachedData?: FlattenNode[];
 }
+
+export interface ScrollData {
+    key: string;
+    // The align parameter is consistent with react-window
+    align?: 'center' | 'start' | 'end' | 'smart' | 'auto';
+}

package/upload/_story/upload.stories.js

@@ -311,7 +311,7 @@ DefaultFileList.story = {
   name: 'defaultFileList',
 };
 
-class ControledUpload extends React.Component {
+class ControlledUpload extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -344,7 +344,7 @@ class ControledUpload extends React.Component {
   }
 }
 
-export const ControlledFileList = () => <ControledUpload></ControledUpload>;
+export const ControlledFileList = () => <ControlledUpload></ControlledUpload>;
 
 ControlledFileList.story = {
   name: 'controlled fileList',