@douyinfe/semi-ui 2.14.0-alpha.0 → 2.14.0-beta.2

package/tagInput/index.tsx

@@ -238,6 +238,7 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         this.foundation.handleClearBtn(e);
     };
 
+    /* istanbul ignore next */
     handleClearEnterPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
         this.foundation.handleClearEnterPress(e);
     };
@@ -298,8 +299,17 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
             // eslint-disable-next-line max-len
             [`${prefixCls}-prefix-icon`]: isSemiIcon(labelNode),
         });
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
-        return <div className={prefixWrapperCls} onMouseDown={this.handlePreventMouseDown} onClick={this.handleClickPrefixOrSuffix} id={insetLabelId}>{labelNode}</div>;
+        return (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
+            <div 
+                className={prefixWrapperCls} 
+                onMouseDown={this.handlePreventMouseDown} 
+                onClick={this.handleClickPrefixOrSuffix} 
+                id={insetLabelId} x-semi-prop="prefix"
+            >
+                {labelNode}
+            </div>
+        );
     }
 
     renderSuffix() {
@@ -312,8 +322,17 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
             // eslint-disable-next-line max-len
             [`${prefixCls}-suffix-icon`]: isSemiIcon(suffix),
         });
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-        return <div className={suffixWrapperCls} onMouseDown={this.handlePreventMouseDown} onClick={this.handleClickPrefixOrSuffix}>{suffix}</div>;
+        return (
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+            <div
+                className={suffixWrapperCls}
+                onMouseDown={this.handlePreventMouseDown}
+                onClick={this.handleClickPrefixOrSuffix}
+                x-semi-prop="suffix"
+            >
+                {suffix}
+            </div>
+        );
     }
 
     renderTags() {
@@ -333,7 +352,7 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         const typoCls = cls(`${prefixCls}-wrapper-typo`, {
             [`${prefixCls}-wrapper-typo-disabled`]: disabled
         });
-        const spanNotWithPopoverCls = cls(`${prefixCls}-wrapper-n`, {
+        const restTagsCls = cls(`${prefixCls}-wrapper-n`, {
             [`${prefixCls}-wrapper-n-disabled`]: disabled
         });
         const restTags: Array<React.ReactNode> = [];
@@ -372,13 +391,18 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
                 tags.push(item);
             }
         });
+
+        const restTagsContent = (
+            <span className={restTagsCls}>+{tagsArray.length - maxTagCount}</span>
+        );
+
         return (
             <>
                 {tags}
                 {
                     restTags.length > 0 &&
                     (
-                        showRestTagsPopover && !disabled ?
+                        showRestTagsPopover ?
                             (
                                 <Popover
                                     content={restTags}
@@ -388,16 +412,9 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
                                     autoAdjustOverflow
                                     {...restTagsPopoverProps}
                                 >
-                                    <span className={cls(`${prefixCls}-wrapper-n`)}>
-                                        +{tagsArray.length - maxTagCount}
-                                    </span>
+                                    {restTagsContent}
                                 </Popover>
-                            ) :
-                            (
-                                <span className={spanNotWithPopoverCls}>
-                                    {`+${tagsArray.length - maxTagCount}`}
-                                </span>
-                            )
+                            ) : restTagsContent
                     )
                 }
             </>

package/timePicker/Combobox.tsx

@@ -317,7 +317,12 @@ class Combobox extends BaseComponent<ComboboxProps, ComboboxState> {
         return (
             <LocaleConsumer componentName="TimePicker">
                 {(locale: Locale['TimePicker'], localeCode: Locale['code']) => (
-                    <ScrollList header={panelHeader} footer={panelFooter}>
+                    <ScrollList
+                        header={panelHeader}
+                        footer={panelFooter} 
+                        x-semi-header-alias="panelHeader"
+                        x-semi-footer-alias="panelFooter"
+                    >
                         {this.renderAMPMSelect(locale, localeCode)}
                         {this.renderHourSelect(value.getHours(), locale)}
                         {this.renderMinuteSelect(value.getMinutes(), locale)}

package/timePicker/TimePicker.tsx

@@ -413,6 +413,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         // this.picker.blur();
     }
 
+    /* istanbul ignore next */
     handlePanelVisibleChange = (visible: boolean) => this.foundation.handleVisibleChange(visible);
 
     openPanel = () => {

package/toast/toast.tsx

@@ -120,7 +120,7 @@ class Toast extends BaseComponent<ToastReactProps, ToastState> {
         const btnSize = 'small';
         return (
             <div
-                role='alert'
+                role="alert"
                 aria-label={`${type ? type : 'default'} type`}
                 className={toastCls}
                 style={style}
@@ -129,7 +129,7 @@ class Toast extends BaseComponent<ToastReactProps, ToastState> {
             >
                 <div className={`${prefixCls}-content`}>
                     {this.renderIcon()}
-                    <span className={`${prefixCls}-content-text`} style={textStyle}>
+                    <span className={`${prefixCls}-content-text`} style={textStyle} x-semi-prop="content">
                         {content}
                     </span>
                     {showClose && (
@@ -137,7 +137,7 @@ class Toast extends BaseComponent<ToastReactProps, ToastState> {
                             <Button
                                 onClick={e => this.close(e)}
                                 type="tertiary"
-                                icon={<IconClose />}
+                                icon={<IconClose x-semi-prop="icon" />}
                                 theme={btnTheme}
                                 size={btnSize}
                             />

package/tooltip/index.tsx

@@ -664,7 +664,10 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                 }
 
                 children = cloneElement(children as React.ReactElement, { style: childrenStyle });
-                children = this.wrapSpan(children);
+                if (trigger !== 'custom') {
+                    // no need to wrap span when trigger is custom, cause it don't need bind event
+                    children = this.wrapSpan(children);
+                }
                 this.isWrapped = true;
             } else if (!isValidElement(children)) {
                 children = this.wrapSpan(children);

package/transfer/index.tsx

@@ -10,7 +10,7 @@ import '@douyinfe/semi-foundation/transfer/transfer.scss';
 import BaseComponent from '../_base/baseComponent';
 import LocaleConsumer from '../locale/localeConsumer';
 import { Locale } from '../locale/interface';
-import Checkbox from '../checkbox';
+import { Checkbox } from '../checkbox/index';
 import Input, { InputProps } from '../input/index';
 import Spin from '../spin';
 import Button from '../button';
@@ -353,6 +353,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
                 checked={checked}
                 role="listitem"
                 onChange={() => this.onSelectOrRemove(item)}
+                x-semi-children-alias={`dataSource[${index}].label`}
             >
                 {item.label}
             </Checkbox>

package/tree/treeNode.tsx

@@ -5,7 +5,7 @@ import { cssClasses } from '@douyinfe/semi-foundation/tree/constants';
 import isEnterPress from '@douyinfe/semi-foundation/utils/isEnterPress';
 import { debounce, isFunction, isString, get, isEmpty } from 'lodash';
 import { IconTreeTriangleDown, IconFile, IconFolder, IconFolderOpen } from '@douyinfe/semi-icons';
-import Checkbox from '../checkbox';
+import { Checkbox } from '../checkbox';
 import TreeContext, { TreeContextValue } from './treeContext';
 import Spin from '../spin';
 import { TreeNodeProps, TreeNodeState } from './interface';
@@ -269,7 +269,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
         });
         return (
             <ul className={wrapperCls}>
-                <li className={`${prefixcls}-label ${prefixcls}-label-empty`}>
+                <li className={`${prefixcls}-label ${prefixcls}-label-empty`} x-semi-prop="emptyContent">
                     {emptyContent}
                 </li>
             </ul>

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',
+};