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

package/select/index.tsx

@@ -662,6 +662,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         this.foundation.handleClearClick(e as any);
     }
 
+    /* istanbul ignore next */
     onClearBtnEnterPress(e: React.KeyboardEvent) {
         this.foundation.handleClearBtnEnterPress(e as any);
     }
@@ -878,7 +879,11 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         return (
             <>
                 <div className={contentWrapperCls}>
-                    {<span className={spanCls}>{renderText || renderText === 0 ? renderText : placeholder}</span>}
+                    {
+                        <span className={spanCls} x-semi-prop="placeholder">
+                            {renderText || renderText === 0 ? renderText : placeholder}
+                        </span>
+                    }
                     {filterable && showInput ? this.renderInput() : null}
                 </div>
             </>
@@ -1006,7 +1011,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             [`${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() {
@@ -1020,7 +1025,11 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             [`${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>
+        );
     }
 
     renderSelection() {
@@ -1067,7 +1076,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
       (selections.size || inputValue) && !disabled && (isHovering || isOpen);
 
         const arrowContent = showArrow ? (
-            <div className={`${prefixcls}-arrow`}>
+            <div className={`${prefixcls}-arrow`} x-semi-prop="arrowIcon">
                 {arrowIcon}
             </div>
         ) : (

package/select/option.tsx

@@ -105,7 +105,11 @@ class Option extends PureComponent<OptionProps> {
             }
             return (
                 <LocaleConsumer<Locale['Select']> componentName="Select">
-                    {(locale: Locale['Select']) => <div className={optionClassName}>{emptyContent || locale.emptyText}</div>}
+                    {(locale: Locale['Select']) => (
+                        <div className={optionClassName} x-semi-prop="emptyContent">
+                            {emptyContent || locale.emptyText}
+                        </div>
+                    )}
                 </LocaleConsumer>
             );
         }

package/sideSheet/SideSheetContent.tsx

@@ -88,7 +88,7 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
         let header, closer;
         if (title) {
             header = (
-                <div className={`${prefixCls}-title`}>
+                <div className={`${prefixCls}-title`} x-semi-prop="title">
                     {this.props.title}
                 </div>
             );
@@ -140,11 +140,11 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
             >
                 <div className={`${prefixCls}-content`}>
                     {header}
-                    <div className={`${prefixCls}-body`} style={props.bodyStyle}>
+                    <div className={`${prefixCls}-body`} style={props.bodyStyle} x-semi-prop="children">
                         {props.children}
                     </div>
                     {props.footer ? (
-                        <div className={`${prefixCls}-footer`}>
+                        <div className={`${prefixCls}-footer`} x-semi-prop="footer">
                             {props.footer}
                         </div>
                     ) : null}

package/skeleton/index.tsx

@@ -48,7 +48,7 @@ class Skeleton extends PureComponent<SkeletonProps> {
         let content;
         if (loading) {
             content = (
-                <div className={skCls} style={style} {...others}>
+                <div className={skCls} style={style} {...others} x-semi-prop="placeholder">
                     {placeholder}
                 </div>
             );

package/space/index.tsx

@@ -85,7 +85,7 @@ class Space extends PureComponent<SpaceProps> {
         });
         const childrenNodes = flatten(children);
         return (
-            <div className={classNames} style={realStyle}>
+            <div className={classNames} style={realStyle} x-semi-prop="children">
                 {childrenNodes}
             </div>
         );

package/spin/index.tsx

@@ -95,14 +95,18 @@ class Spin extends BaseComponent<SpinProps, SpinState> {
             [`${prefixCls}-animate`]: loading,
         });
 
-        return (
-            loading ? (
-                <div className={`${prefixCls}-wrapper`}>
-                    {indicator ? <div className={spinIconCls}>{indicator}</div> : <SpinIcon />}
-                    {tip ? <div>{tip}</div> : null}
-                </div>
-            ) : null
-        );
+        return loading ? (
+            <div className={`${prefixCls}-wrapper`}>
+                {indicator ? (
+                    <div className={spinIconCls} x-semi-prop="indicator">
+                        {indicator}
+                    </div>
+                ) : (
+                    <SpinIcon />
+                )}
+                {tip ? <div x-semi-prop="tip">{tip}</div> : null}
+            </div>
+        ) : null;
     }
 
     render() {
@@ -122,7 +126,9 @@ class Spin extends BaseComponent<SpinProps, SpinState> {
         return (
             <div className={spinCls} style={style}>
                 {this.renderSpin()}
-                <div className={`${prefixCls}-children`} style={childStyle}>{children}</div>
+                <div className={`${prefixCls}-children`} style={childStyle} x-semi-prop="children">
+                    {children}
+                </div>
             </div>
         );
     }

package/switch/index.tsx

@@ -146,23 +146,18 @@ class Switch extends BaseComponent<SwitchProps, SwitchState> {
         const showUncheckedText = uncheckedText && !nativeControlChecked && size !== 'small';
         return (
             <div className={wrapperCls} style={style} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-                {
-                    loading
-                        ? (
-                            <Spin
-                                wrapperClassName={cssClasses.LOADING_SPIN}
-                                size={size === 'default' ? 'middle' : size}
-                            />
-                        )
-                        : <div className={cssClasses.KNOB} aria-hidden={true} />
-                }
+                {loading ? (
+                    <Spin wrapperClassName={cssClasses.LOADING_SPIN} size={size === 'default' ? 'middle' : size} />
+                ) : (
+                    <div className={cssClasses.KNOB} aria-hidden={true} />
+                )}
                 {showCheckedText ? (
-                    <div className={cssClasses.CHECKED_TEXT}>
+                    <div className={cssClasses.CHECKED_TEXT} x-semi-prop="checkedText">
                         {checkedText}
                     </div>
                 ) : null}
                 {showUncheckedText ? (
-                    <div className={cssClasses.UNCHECKED_TEXT}>
+                    <div className={cssClasses.UNCHECKED_TEXT} x-semi-prop="uncheckedText">
                         {uncheckedText}
                     </div>
                 ) : null}
@@ -170,13 +165,13 @@ class Switch extends BaseComponent<SwitchProps, SwitchState> {
                     {...switchProps}
                     ref={this.switchRef}
                     id={id}
-                    role='switch'
+                    role="switch"
                     aria-checked={nativeControlChecked}
                     aria-invalid={this.props['aria-invalid']}
                     aria-errormessage={this.props['aria-errormessage']}
                     aria-label={this.props['aria-label']}
                     aria-labelledby={this.props['aria-labelledby']}
-                    aria-describedby={this.props["aria-describedby"]}
+                    aria-describedby={this.props['aria-describedby']}
                     aria-disabled={this.props['disabled']}
                     onChange={e => this.foundation.handleChange(e.target.checked, e)}
                     onFocus={e => this.handleFocusVisible(e)}

package/table/Table.tsx

@@ -1015,7 +1015,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
         }
 
         return isValidElement(title) || typeof title === 'string' ? (
-            <div className={`${prefixCls}-title`}>{title}</div>
+            <div className={`${prefixCls}-title`} x-semi-prop="title">{title}</div>
         ) : null;
     };
 
@@ -1032,7 +1032,9 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             <LocaleConsumer componentName="Table" key={'emptyText'}>
                 {(locale: TableLocale, localeCode: string) => (
                     <div className={wrapCls}>
-                        <div className={`${prefixCls}-empty`}>{empty || locale.emptyText}</div>
+                        <div className={`${prefixCls}-empty`} x-semi-prop="empty">
+                            {empty || locale.emptyText}
+                        </div>
                     </div>
                 )}
             </LocaleConsumer>
@@ -1048,7 +1050,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
         }
 
         return isValidElement(footer) || typeof footer === 'string' ? (
-            <div className={`${prefixCls}-footer`} key="footer">
+            <div className={`${prefixCls}-footer`} key="footer" x-semi-prop="footer">
                 {footer}
             </div>
         ) : null;

package/tabs/TabBar.tsx

@@ -70,7 +70,7 @@ class TabBar extends React.Component<TabBarProps, TabBarState> {
         if (tabBarExtraContent) {
             const tabBarStyle = { ...tabBarExtraContentDefaultStyle, ...tabBarExtraContentStyle };
             return (
-                <div className={extraCls} style={tabBarStyle}>
+                <div className={extraCls} style={tabBarStyle} x-semi-prop="tabBarExtraContent">
                     {tabBarExtraContent}
                 </div>
             );

package/tabs/TabPane.tsx

@@ -98,6 +98,7 @@ class TabPane extends PureComponent<TabPaneProps> {
                 aria-hidden={active ? 'false' : 'true'}
                 tabIndex={0}
                 {...getDataAttr(restProps)}
+                x-semi-prop="children"
             >
                 {motion ? (
                     <TabPaneTransition
@@ -107,14 +108,18 @@ class TabPane extends PureComponent<TabPaneProps> {
                         state={active ? 'enter' : 'leave'}
                     >
                         {(transitionStyle): ReactNode => (
-                            <div className={`${cssClasses.TABS_PANE_MOTION_OVERLAY}`} style={{ ...transitionStyle }}>
+                            <div
+                                className={`${cssClasses.TABS_PANE_MOTION_OVERLAY}`}
+                                style={{ ...transitionStyle }}
+                                x-semi-prop="children"
+                            >
                                 {shouldRender ? children : null}
                             </div>
                         )}
                     </TabPaneTransition>
-                ) : (
-                    shouldRender ? children : null
-                )}
+                ) : shouldRender ? (
+                    children
+                ) : null}
             </div>
         );
     }

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() {

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

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

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