@douyinfe/semi-ui 2.17.0 → 2.18.0

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

package/webpack.config.js

@@ -22,13 +22,16 @@ module.exports = function ({ minimize }) {
             library: 'SemiUI',
             libraryTarget: 'umd'
         },
+        
         module: {
             rules: [
                 {
                     test: /\.tsx?$/,
                     include: [
                         path.join(rootPath, 'packages/semi-ui'),
-                        path.join(rootPath, 'packages/semi-foundation')
+                        path.join(rootPath, 'packages/semi-foundation'),
+                        path.join(rootPath, 'packages/semi-animation'),
+                        path.join(rootPath, 'packages/semi-animation-react')
                     ],
                     use: [
                         {
@@ -45,7 +48,7 @@ module.exports = function ({ minimize }) {
                         }
                     ]
                 },
-                { 
+                {
                     test: /semi-icons\/.+\.css$/,
                     loaders: 'null-loader'
                 },
@@ -66,7 +69,14 @@ module.exports = function ({ minimize }) {
             new HashedModuleIdsPlugin()
         ],
         resolve: {
-            extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
+            extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
+            alias: {
+                "@douyinfe/semi-foundation": path.resolve(__dirname, "../semi-foundation"),
+                "@douyinfe/semi-icons": path.resolve(__dirname, "../semi-icons"),
+                "@douyinfe/semi-illustrations":path.resolve(__dirname, "../semi-illustrations"),
+                "@douyinfe/semi-animation":path.resolve(__dirname, "../semi-animation"),
+                "@douyinfe/semi-animation-react":path.resolve(__dirname, "../semi-animation-react")
+            },
         },
         externals: {
             react: {