@douyinfe/semi-ui 2.17.0-alpha.1 → 2.17.0

package/_base/_story/a11y.jsx

@@ -218,7 +218,7 @@ const initValues = {
             preview: true,
             fileInstance: new File([new ArrayBuffer(2048)], 'jiafang1.jpeg', { type: 'image/jpeg' }),
             url:
-                'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
         },
         {
             uid: '3',
@@ -229,7 +229,7 @@ const initValues = {
             preview: true,
             fileInstance: new File([new ArrayBuffer(2048)], 'jiafang2.jpeg', { type: 'image/jpeg' }),
             url:
-                'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
         },
     ],
 };

package/avatar/__test__/avatar.test.js

@@ -261,7 +261,7 @@ describe('Avatar', () => {
     it('src', () => {
         const element = (
            <Avatar
-                src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
+                src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png"
                 style={{ margin: 4 }}
             />
         );
@@ -272,7 +272,7 @@ describe('Avatar', () => {
                 .at(0)
                 .props()
                 .src
-        ).toEqual('https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg');
+        ).toEqual('https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png');
     });
 
     it('shape', () => {
@@ -320,7 +320,7 @@ describe('Avatar', () => {
         const avatar = mount(
             <Avatar 
                 onError={spyOnError}
-                src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
+                src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png"
             />
         );
         avatar

package/avatar/interface.ts

@@ -38,7 +38,7 @@ export interface AvatarProps extends BaseProps {
 }
 
 export type AvatarGroupShape = 'circle' | 'square';
-export type AvatarGroupSize = 'extra-extra-small' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
+export type AvatarGroupSize = 'extra-extra-small' | 'extra-small' | 'small' | 'default' | 'medium' | 'large' | 'extra-large';
 export type AvatarGroupOverlapFrom = 'start' | 'end';
 
 export interface AvatarGroupProps {

package/cascader/_story/cascader.stories.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import CustomTrigger from './CustomTrigger';
 import { Button, Typography, Toast, Cascader } from '../../index';
 
@@ -262,6 +262,96 @@ const treedataWithNodeLabel = [
     }
 ];
 
+export const issue703 = () => {
+    const initialData = [
+        {
+            label: 'Node1',
+            value: '0-0',
+        },
+        {
+            label: 'Node2',
+            value: '0-1',
+        },
+        {
+            label: 'Node3',
+            value: '0-2',
+            isLeaf: true
+        },
+    ];
+    const [data, setData] = useState(initialData);
+    
+    const updateTreeData = (list, value, children) => {
+        return list.map(node => {
+            if (node.value === value) {
+                return { ...node, children };
+            }
+            if (node.children) {
+                return { ...node, children: updateTreeData(node.children, value, children) };
+            }
+            return node;
+        });
+    };
+
+    const onLoadData = selectedOpt => {
+        const targetOpt = selectedOpt[selectedOpt.length - 1];
+        const { label, value } = targetOpt;
+        return new Promise(resolve => {
+            if (targetOpt.children) {
+                resolve();
+                return;
+            }
+
+            setTimeout(() => {
+                setData(origin =>
+                    updateTreeData(origin, value, [
+                        {
+                            label: `${label}-1`,
+                            value: `${label}-1`,
+                            isLeaf: selectedOpt.length > 1
+                        },
+                        {
+                            label: `${label}-2`,
+                            value: `${label}-2`,
+                            isLeaf: selectedOpt.length > 1
+                        },
+                    ]),
+                );
+                resolve();
+            }, 1000);
+        });
+    };
+
+    const [v,setV]=useState([['0-0'], ['0-1', 'Node2-2']]);
+    useEffect(()=>{
+      console.log('data change');
+        setTimeout(()=>setV([['0-0'], ['0-1', 'Node2-2', 'Node2-2-2']]),0);
+    },[data]) 
+
+    return (
+      <>
+        <div>treeData和value动态更新，value中的值在treeData中存在则能够正确显示</div>
+        <Cascader
+            multiple
+            onChange={(a)=>console.log(a)}
+            value={v}
+            style={{ width: 300 }}
+            treeData={data}
+            loadData={onLoadData} 
+            placeholder="Please select"
+        />
+        <div>非受控，动态更新treeData</div>
+        <Cascader
+            multiple
+            onChange={(a)=>console.log(a)}
+            style={{ width: 300 }}
+            treeData={data}
+            loadData={onLoadData} 
+            placeholder="Please select"
+        />
+      </>
+    );
+};
+
 export const _Cascader = () => {
   return (
     <div>

package/cascader/index.tsx

@@ -394,6 +394,34 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             const treeDataHasChange = prevProps && prevProps.treeData !== props.treeData;
             return firstInProps || treeDataHasChange;
         };
+        const getRealKeys = (realValue: Value, keyEntities: Entities) => {
+            // normallizedValue is used to save the value in two-dimensional array format
+            let normallizedValue: SimpleValueType[][] = [];
+            if (Array.isArray(realValue)) {
+                normallizedValue = Array.isArray(realValue[0])
+                    ? (realValue as SimpleValueType[][])
+                    : ([realValue] as SimpleValueType[][]);
+            } else {
+                if (realValue !==  undefined) {
+                    normallizedValue = [[realValue]];
+                }
+            }
+            // formatValuePath is used to save value of valuePath
+            const formatValuePath: (string | number)[][] = [];
+            normallizedValue.forEach((valueItem: SimpleValueType[]) => {
+                const formatItem: (string | number)[] = onChangeWithObject ?
+                    (valueItem as CascaderData[]).map(i => i?.value) :
+                    valueItem as (string | number)[];
+                formatValuePath.push(formatItem);
+            });
+            // formatKeys is used to save key of value
+            const formatKeys: any[] = [];
+            formatValuePath.forEach(v => {
+                const formatKeyItem = findKeysForValues(v, keyEntities);
+                !isEmpty(formatKeyItem) && formatKeys.push(formatKeyItem);
+            });
+            return formatKeys;
+        };
         const needUpdateTreeData = needUpdate('treeData') || needUpdateData();
         const needUpdateValue = needUpdate('value') || (isEmpty(prevProps) && defaultValue);
         if (multiple) {
@@ -408,34 +436,15 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                 let realKeys: Array<string> | Set<string> = prevState.checkedKeys;
                 // when data was updated
                 if (needUpdateValue) {
-                    // normallizedValue is used to save the value in two-dimensional array format
-                    let normallizedValue: SimpleValueType[][] = [];
                     const realValue = needUpdate('value') ? value : defaultValue;
-                    // eslint-disable-next-line max-depth
-                    if (Array.isArray(realValue)) {
-                        normallizedValue = Array.isArray(realValue[0])
-                            ? (realValue as SimpleValueType[][])
-                            : ([realValue] as SimpleValueType[][]);
-                    } else {
-                        if (realValue !==  undefined) {
-                            normallizedValue = [[realValue]];
-                        }
+                    realKeys = getRealKeys(realValue, keyEntities);
+                } else {
+                    // needUpdateValue is false
+                    // if treeData is updated & Cascader is controlled, realKeys should be recalculated
+                    if (needUpdateTreeData && 'value' in props) {
+                        const realValue = value;
+                        realKeys = getRealKeys(realValue, keyEntities);
                     }
-                    // formatValuePath is used to save value of valuePath
-                    const formatValuePath: (string | number)[][] = [];
-                    normallizedValue.forEach((valueItem: SimpleValueType[]) => {
-                        const formatItem: (string | number)[] = onChangeWithObject ?
-                            (valueItem as CascaderData[]).map(i => i?.value) :
-                            valueItem as (string | number)[];
-                        formatValuePath.push(formatItem);
-                    });
-                    // formatKeys is used to save key of value
-                    const formatKeys: any[] = [];
-                    formatValuePath.forEach(v => {
-                        const formatKeyItem = findKeysForValues(v, keyEntities);
-                        !isEmpty(formatKeyItem) && formatKeys.push(formatKeyItem);
-                    });
-                    realKeys = formatKeys;
                 }
                 if (isSet(realKeys)) {
                     realKeys = [...realKeys];

package/checkbox/checkbox.tsx

@@ -139,7 +139,10 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
     }
 
     isInGroup() {
-        return Boolean(this.context && this.context.checkboxGroup);
+        // Why do we need to determine whether there is a value in props?
+        // If there is no value in the props of the checkbox in the context of the checkboxGroup, 
+        // it will be considered not to belong to the checkboxGroup。
+        return Boolean(this.context && this.context.checkboxGroup && ('value' in this.props));
     }
 
     focus() {

package/collapse/__test__/collapse.test.js

@@ -3,11 +3,13 @@ import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants'; //
 
 import { IconPlus, IconMinus, IconCopy } from '@douyinfe/semi-icons';
 
-let getCollapse = collapseProps => {
+let getCollapse = (collapseProps, panel1Props) => {
     let props = collapseProps ? collapseProps : {};
+    let panelProps = panel1Props ? panel1Props : {};
+
     return (
         <Collapse {...collapseProps}>
-            <Collapse.Panel header="This is panel header 1" itemKey="1">
+            <Collapse.Panel header="This is panel header 1" itemKey="1" {...panelProps}>
                 <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>
             </Collapse.Panel>
             <Collapse.Panel header="This is panel header 2" itemKey="2">
@@ -145,4 +147,22 @@ describe('Collapse', () => {
         expect(headers.at(1).getDOMNode().getAttribute(expandAttr)).toEqual("false");
         expect(headers.at(2).getDOMNode().getAttribute(expandAttr)).toEqual("true");
     });
+
+    it('disable Collapse', () => {
+        let props = {
+            disabled: true,
+        };
+        const disabledPanel = mount(getCollapse({}, props));
+        expect(disabledPanel.exists('.semi-collapse-header-disabled')).toEqual(true);
+    });
+
+    it('hide the panel icon', () => {
+        const hidePanelArrow = mount( 
+        <Collapse >
+            <Collapse.Panel header="This is panel header 1" itemKey="1" showArrow={false}>
+                <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>
+            </Collapse.Panel>
+        </Collapse>);
+        expect(hidePanelArrow.exists('.semi-collapse-header-icon')).toEqual(false);
+    });
 });

package/collapse/_story/accordion.stories.js

@@ -17,7 +17,7 @@ export default {
 export const RegularCollapse = () => (
   <div>
     <Collapse onChange={k => console.log(k)}>
-      <Panel header="This is panel header 1" itemKey="1">
+      <Panel header="This is panel header 1" itemKey="1" showArrow={false}>
         <p>{text}</p>
       </Panel>
       <Panel header="This is panel header 2" itemKey="2">
@@ -32,7 +32,7 @@ export const RegularCollapse = () => (
       <Panel header="This is panel header 1" itemKey="1">
         <p>{text}</p>
       </Panel>
-      <Panel header="This is panel header 2" itemKey="124">
+      <Panel header="This is panel header 2" itemKey="124" disabled>
         <p>{text}</p>
       </Panel>
       <Panel header="This is panel header 3" itemKey="3" disabled>

package/collapse/item.tsx

@@ -15,6 +15,8 @@ export interface CollapsePanelProps {
     children?: React.ReactNode;
     reCalcKey?: number | string;
     style?: CSSProperties;
+    showArrow?: boolean,
+    disabled?: boolean,
 }
 
 export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
@@ -32,6 +34,13 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
             PropTypes.string,
             PropTypes.number,
         ]),
+        showArrow: PropTypes.bool,
+        disabled: PropTypes.bool,
+    };
+
+    static defaultProps = {
+        showArrow: true,
+        disabled: false,
     };
 
     private ariaID = getUuidShort({});
@@ -40,6 +49,7 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
 
     renderHeader(active: boolean, expandIconEnable = true) {
         const {
+            showArrow,
             header,
             extra,
         } = this.props;
@@ -65,20 +75,20 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
         if (typeof header === 'string') {
             return (
                 <>
-                    {iconPosLeft ? icon : null}
+                    {showArrow && (iconPosLeft ? icon : null)}
                     <span>{header}</span>
                     <span className={`${cssClasses.PREFIX}-header-right`}>
                         <span>{extra}</span>
-                        {iconPosLeft ? null : icon}
+                        {showArrow && (iconPosLeft ? null : icon)}
                     </span>
                 </>
             );
         }
         return (
             <>
-                {iconPosLeft ? icon : null}
+                {showArrow && (iconPosLeft ? icon : null)}
                 {header}
-                {iconPosLeft ? null : icon}
+                {showArrow && (iconPosLeft ? null : icon)}
             </>
         );
     }
@@ -91,6 +101,8 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
             reCalcKey,
             header,
             extra,
+            showArrow,
+            disabled,
             ...restProps
         } = this.props;
         const {
@@ -106,6 +118,7 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
         });
         const headerCls = cls({
             [`${cssClasses.PREFIX}-header`]: true,
+            [`${cssClasses.PREFIX}-header-disabled`]: disabled,
             [`${cssClasses.PREFIX}-header-iconLeft`]: expandIconPosition === 'left',
         });
         const contentCls = cls({
@@ -120,11 +133,12 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
                     role="button"
                     tabIndex={0}
                     className={headerCls}
+                    aria-disabled={disabled}
                     aria-expanded={active ? 'true' : 'false'}
                     aria-owns={this.ariaID}
-                    onClick={e => onClick(itemKey, e)}
+                    onClick={e => !disabled && onClick(itemKey, e)}
                 >
-                    {this.renderHeader(active, children !== undefined)}
+                    {this.renderHeader(active, children !== undefined && !disabled)}
                 </div>
                 {
                     children && (

package/collapsible/_story/collapsible.stories.js

@@ -368,7 +368,7 @@ class WithUpload extends React.Component {
         status: 'success',
         uid: 'd116a179410eb0ca18e66074509bde93-0',
         url:
-          'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+          'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
       },
       {
         preview: false,
@@ -376,7 +376,7 @@ class WithUpload extends React.Component {
         status: 'success',
         uid: 'b7d579069320590ba4b128672eedbae2-1',
         url:
-          'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+          'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
       },
       {
         preview: false,
@@ -384,7 +384,7 @@ class WithUpload extends React.Component {
         status: 'success',
         uid: 'b7d579069320590ba4b128672eedbae2-2',
         url:
-          'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+          'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
       },
     ];
   }
@@ -410,7 +410,7 @@ class WithUpload extends React.Component {
                 status: 'success',
                 uid: 'd116a179410eb0ca18e66074509bde93-0',
                 url:
-                  'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+                  'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
               },
               {
                 preview: false,
@@ -418,7 +418,7 @@ class WithUpload extends React.Component {
                 status: 'success',
                 uid: 'b7d579069320590ba4b128672eedbae2-1',
                 url:
-                  'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+                  'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
               },
               {
                 preview: false,
@@ -426,7 +426,7 @@ class WithUpload extends React.Component {
                 status: 'success',
                 uid: 'b7d579069320590ba4b128672eedbae2-2',
                 url:
-                  'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+                  'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
               },
             ]}
             dragMainText="点击上传文件或拖拽文件到这里"

package/configProvider/_story/RTLDirection/RTLForm.jsx

@@ -35,7 +35,7 @@ class RTLForm extends React.Component {
                             type: 'image/jpeg',
                         }),
                         url:
-                            'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg',
+                            'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
                     },
                 ],
             },

package/datePicker/__test__/datePicker.test.js

@@ -114,7 +114,7 @@ describe(`DatePicker`, () => {
         const demo = mount(<DatePicker presets={presets} motion={motion} open={open} defaultValue={defaultValue} />);
         const elem = demo.find(BaseDatePicker);
 
-        const btns = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-quick-control-item`);
+        const btns = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-quick-control button`);
 
         /**
          * click next day
@@ -560,7 +560,7 @@ describe(`DatePicker`, () => {
         };
         const demo = mount(<DatePicker {...props} />);
         const elem = demo.find(BaseDatePicker);
-        const btns = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-quick-control-item`);
+        const btns = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-quick-control button`);
 
         // click disabled date
         btns[0].click();
@@ -675,7 +675,7 @@ describe(`DatePicker`, () => {
         const demo = mount(<DatePicker onPresetClick={handlePresetClick} presets={presets} motion={motion} open={open} defaultValue={defaultValue} />);
         const elem = demo.find(BaseDatePicker);
 
-        const btns = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-quick-control-item`);
+        const btns = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-quick-control button`);
 
         btns[0].click();
         btns[1].click();
@@ -987,7 +987,7 @@ describe(`DatePicker`, () => {
         const demo = mount(<DatePicker {...props} onChange={handleChange} />);
         const elem = demo.find(BaseDatePicker);
 
-        const btns = document.querySelectorAll('.semi-datepicker-quick-control-item');
+        const btns = document.querySelectorAll('.semi-datepicker-quick-control button');
 
         btns[0].click();
         expect(handleChange.called).toBeTruthy();
@@ -1016,7 +1016,7 @@ describe(`DatePicker`, () => {
         const demo = mount(<DatePicker {...props} onChange={handleChange} onConfirm={handleConfirm} />);
         const elem = demo.find(BaseDatePicker);
 
-        const btns = document.querySelectorAll('.semi-datepicker-quick-control-item');
+        const btns = document.querySelectorAll('.semi-datepicker-quick-control button');
 
         // 点击 preset
         btns[0].click();