@douyinfe/semi-ui 2.13.0-beta.0 → 2.14.0-beta.0

package/treeSelect/_story/treeSelect.stories.js

@@ -1343,7 +1343,7 @@ export const CheckRelationDemo = () => {
         defaultValue='China'
       />
       <br /><br />
-      <div>checkRelation='unRelated' + defaultValue 为 China + 开启搜索 + searchBox in trigger + showClear</div>
+      <div>多选 + checkRelation='unRelated' + defaultValue 为 China + 开启搜索 + searchBox in trigger + showClear</div>
       <TreeSelect
         dropdownStyle={dropdownStyle}
         treeData={treeData}
@@ -1354,6 +1354,19 @@ export const CheckRelationDemo = () => {
         defaultExpandAll
         style={style}
         searchPosition='trigger'
+        defaultValue={['China', 'Japan']}
+      />
+      <br /><br />
+      <div>单选 + checkRelation='unRelated' + defaultValue 为 China + 开启搜索 + searchBox in trigger + showClear</div>
+      <TreeSelect
+        dropdownStyle={dropdownStyle}
+        treeData={treeData}
+        filterTreeNode
+        showClear
+        checkRelation='unRelated'
+        defaultExpandAll
+        style={style}
+        searchPosition='trigger'
         defaultValue='China'
       />
       <br /><br />
@@ -1459,4 +1472,150 @@ export const SearchableAndExpandedKeys = () => {
           />
       </>
   )
-}
+}
+
+export const loadData = () => {
+    const initialData = [
+        {
+            label: 'Expand to load',
+            value: '0',
+            key: '0',
+        },
+        {
+            label: 'Expand to load',
+            value: '1',
+            key: '1',
+        },
+        {
+            label: 'Leaf Node',
+            value: '2',
+            key: '2',
+            isLeaf: true,
+        },
+    ];
+    const [treeData, setTreeData] = useState(initialData);
+    const [loadedKeys, setLoadedKeys] = useState(['2']);
+
+    function updateTreeData(list, key, children) {
+        return list.map(node => {
+            if (node.key === key) {
+                return { ...node, children };
+            }
+            if (node.children) {
+                return { ...node, children: updateTreeData(node.children, key, children) };
+            }
+            return node;
+        });
+    }
+
+    function onLoadData({ key, children }) {
+        return new Promise(resolve => {
+            if (children) {
+                resolve();
+                return;
+            }
+            setTimeout(() => {
+                setTreeData(origin =>
+                    updateTreeData(origin, key, [
+                        {
+                            label: 'Child Node',
+                            key: `${key}-0`,
+                        },
+                        {
+                            label: 'Child Node',
+                            key: `${key}-1`,
+                        },
+                    ]),
+                );
+                resolve();
+            }, 1000);
+        });
+    }
+    return (
+        <TreeSelect
+            loadData={onLoadData}
+            filterTreeNode
+            treeData={treeData}
+            style={{ width: 300 }}
+            placeholder="请选择"
+        />
+    );
+}
+
+
+export const loadDataAndLoadedkeys = () => {
+    const initialData = [
+        {
+            label: 'Expand to load',
+            value: '0',
+            key: '0',
+        },
+        {
+            label: 'Expand to load',
+            value: '1',
+            key: '1',
+        },
+        {
+            label: 'Leaf Node',
+            value: '2',
+            key: '2',
+            isLeaf: true,
+        },
+    ];
+    const [treeData, setTreeData] = useState(initialData);
+    const [loadedKeys, setLoadedKeys] = useState(['2']);
+
+    function updateTreeData(list, key, children) {
+        return list.map(node => {
+            if (node.key === key) {
+                return { ...node, children };
+            }
+            if (node.children) {
+                return { ...node, children: updateTreeData(node.children, key, children) };
+            }
+            return node;
+        });
+    }
+
+    function updateLoadedKeys(key) {
+        if(!loadedKeys.includes(key)){
+          setLoadedKeys([...loadedKeys, key]);
+          console.log('[...loadedKeys, key]', [...loadedKeys, key]);
+        }
+    }
+
+    function onLoadData({ key, children }) {
+        return new Promise(resolve => {
+            if (children) {
+                resolve();
+                return;
+            }
+            setTimeout(() => {
+                setTreeData(origin =>
+                    updateTreeData(origin, key, [
+                        {
+                            label: 'Child Node',
+                            key: `${key}-0`,
+                        },
+                        {
+                            label: 'Child Node',
+                            key: `${key}-1`,
+                        },
+                    ]),
+                );
+                // updateLoadedKeys(key);
+                resolve();
+            }, 1000);
+        });
+    }
+    return (
+        <TreeSelect
+            loadData={onLoadData}
+            filterTreeNode
+            // loadedKeys={loadedKeys}
+            treeData={treeData}
+            style={{ width: 300 }}
+            placeholder="请选择"
+        />
+    );
+}

package/treeSelect/index.tsx

@@ -646,7 +646,11 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             [`${prefixcls}-suffix-text`]: suffix && isString(suffix),
             [`${prefixcls}-suffix-icon`]: isSemiIcon(suffix),
         });
-        return <div className={suffixWrapperCls}>{suffix}</div>;
+        return (
+            <div className={suffixWrapperCls} x-semi-prop="suffix">
+                {suffix}
+            </div>
+        );
     };
 
     renderPrefix = () => {
@@ -660,7 +664,11 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             [`${prefixcls}-prefix-icon`]: isSemiIcon(labelNode),
         });
 
-        return <div className={prefixWrapperCls} id={insetLabelId}>{labelNode}</div>;
+        return (
+            <div className={prefixWrapperCls} id={insetLabelId} x-semi-prop="prefix,insetLabel">
+                {labelNode}
+            </div>
+        );
     };
 
     renderContent = () => {
@@ -683,6 +691,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         this.foundation.handleClick(e);
     };
 
+    /* istanbul ignore next */
     handleSelectionEnterPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
         this.foundation.handleSelectionEnterPress(e);
     };
@@ -840,6 +849,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         this.foundation.handleClear(e);
     };
 
+    /* istanbul ignore next */
     handleClearEnterPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
         e && e.stopPropagation();
         this.foundation.handleClearEnterPress(e);
@@ -867,7 +877,11 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         if (showClearBtn) {
             return null;
         }
-        return arrowIcon ? <div className={cls(`${prefixcls}-arrow`)}>{arrowIcon}</div> : null;
+        return arrowIcon ? (
+            <div className={cls(`${prefixcls}-arrow`)} x-semi-prop="arrowIcon">
+                {arrowIcon}
+            </div>
+        ) : null;
     };
 
     renderClearBtn = () => {

package/typography/base.tsx

@@ -526,7 +526,7 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
         }
         const iconSize: Size = size === 'small' ? 'small' : 'default';
         return (
-            <span className={`${prefixCls}-icon`}>
+            <span className={`${prefixCls}-icon`} x-semi-prop="icon">
                 {isSemiIcon(icon) ? React.cloneElement((icon as React.ReactElement), { size: iconSize }) : icon}
             </span>
         );

package/upload/_story/upload.stories.js

@@ -957,3 +957,155 @@ export const CustomListOperation = () => {
 CustomListOperation.story = {
   name: 'custom list operation',
 }
+
+
+export const TestReplaceFunc = () => (
+  <>
+    <Upload
+      {...commonProps}
+      action={action}
+      accept=".md,image/*,video/*"
+      maxSize={mb1}
+      minSize={0}
+      transformFile={(fileInstance)=>{return fileInstance;}}
+    >
+      <Button icon={<IconUpload />} theme="light">
+        点击上传（最小0kB，最大1MB）
+      </Button>
+    </Upload>
+    <Upload
+      {...commonProps}
+      action={action}
+      accept="image/*"
+      maxSize={mb1}
+      minSize={0}
+      transformFile={(fileInstance)=>{return fileInstance;}}
+    >
+      <Button icon={<IconUpload />} theme="light">
+        只接受image点击上传（最小0kB，最大1MB）
+      </Button>
+    </Upload>
+    <Upload
+      {...commonProps}
+      action={action}
+      accept=".md,image/*,video/*"
+      maxSize={mb1}
+      minSize={kb2}
+      transformFile={(fileInstance)=>{return fileInstance;}}
+    >
+      <Button icon={<IconUpload />} theme="light">
+        点击上传（最小200kB，最大1MB）
+      </Button>
+    </Upload>
+  </>
+);
+
+TestReplaceFunc.story = {
+  name: 'test replace func',
+};
+
+
+class InsertUpload extends React.Component {
+   constructor() {
+        super();
+        this.onFileChange = this.onFileChange.bind(this);
+        this.insert1 = this.insert1.bind(this);
+        this.insert2 = this.insert2.bind(this);
+        this.insert3 = this.insert3.bind(this);
+        this.uploadRef1 = React.createRef();
+        this.uploadRef2 = React.createRef();
+        this.uploadRef3 = React.createRef();
+        this.file = null;
+    }
+
+    onFileChange(file) {
+      delete file[0].uid;
+      this.file = file;
+    }
+
+    insert1() {
+      // test file number limit
+      this.uploadRef1.current.insert(this.file, 0);
+    }
+
+    insert2() {
+      this.uploadRef2.current.insert(this.file, 0);
+    }
+
+    insert3() {
+      // test size limit
+      this.uploadRef3.current.insert(this.file, 0);
+    }
+
+    render() {
+        let action = 'https://run.mocky.io/v3/d6ac5c9e-4d39-4309-a747-7ed3b5694859';
+        return (
+            <div>
+                <Upload
+                    action={action}
+                    ref={this.uploadRef1}
+                    accept=".md,image/*,video/*"
+                    onSuccess={(...v) => console.log(...v)}
+                    onError={(...v) => console.log(...v)}
+                    onFileChange={this.onFileChange}
+                    maxSize={mb1}
+                    minSize={0}
+                    limit={1}
+                    transformFile={(fileInstance)=>{return fileInstance;}}
+                >
+                    <Button icon={<IconPlus />} theme="light" style={{ marginRight: 8 }}>
+                        选择文件 limit 1
+                    </Button>
+                </Upload>
+                <Upload
+                    action={action}
+                    ref={this.uploadRef2}
+                    accept=".md,image/*,video/*"
+                    onSuccess={(...v) => console.log(...v)}
+                    onError={(...v) => console.log(...v)}
+                    onFileChange={this.onFileChange}
+                    maxSize={mb1}
+                    minSize={0}
+                    limit={2}
+                    transformFile={(fileInstance)=>{return fileInstance;}}
+                >
+                    <Button icon={<IconPlus />} theme="light" style={{ marginRight: 8 }}>
+                        选择文件 limit 2
+                    </Button>
+                </Upload>
+                <Upload
+                    {...commonProps}
+                    action={action}
+                    ref={this.uploadRef3}
+                    accept=".md,image/*,video/*"
+                    onSuccess={(...v) => console.log(...v)}
+                    onError={(...v) => console.log(...v)}
+                    onFileChange={this.onFileChange}
+                    maxSize={mb1}
+                    minSize={kb2}
+                    limit={1}
+                    transformFile={(fileInstance)=>{return fileInstance;}}
+                >
+                    <Button icon={<IconPlus />} theme="light" style={{ marginRight: 8 }}>
+                        选择文件 size 限制
+                    </Button>
+                </Upload>
+                <Button icon={<IconUpload />} theme="light" onClick={this.insert1}>
+                  插入首项上传1
+                </Button>
+                <Button icon={<IconUpload />} theme="light" onClick={this.insert2}>
+                  插入首项上传2
+                </Button>
+                <Button icon={<IconUpload />} theme="light" onClick={this.insert3}>
+                  插入首项上传3
+                </Button>
+            </div>
+        );
+    }
+}
+
+export const Insert = () => <InsertUpload></InsertUpload>;
+
+Insert.story = {
+  name: 'insert',
+};