@douyinfe/semi-ui 2.17.1 → 2.19.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.17.1",
+    "version": "2.19.0-alpha.1",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -15,11 +15,11 @@
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.17.1",
-        "@douyinfe/semi-foundation": "2.17.1",
-        "@douyinfe/semi-icons": "2.17.1",
+        "@douyinfe/semi-animation-react": "2.19.0-alpha.1",
+        "@douyinfe/semi-foundation": "2.19.0-alpha.1",
+        "@douyinfe/semi-icons": "2.19.0-alpha.1",
         "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.17.1",
+        "@douyinfe/semi-theme-default": "2.19.0-alpha.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -66,13 +66,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "e2dfadcc7f24b9af6cab08b64ac0ead052219961",
+    "gitHead": "d1dbf82734b2187cc74c4bd674ba2c22c199d823",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.17.1",
+        "@douyinfe/semi-scss-compile": "2.19.0-alpha.1",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "@types/react": ">=16.0.0",

package/radio/_story/radio.stories.js

@@ -196,7 +196,7 @@ const RadioGroup1 = () => {
     </div>
   );
 };
-class RadioWithControled extends React.Component {
+class RadioWithControlled extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -240,7 +240,7 @@ export const _RadioGroup = () => {
       </RadioGroup>
       <br />
       value+onchange
-      <RadioWithControled />
+      <RadioWithControlled />
       <br />
       联动
       <RadioGroup1 />

package/radio/radio.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
-import { noop } from 'lodash';
+import { noop, isUndefined, isBoolean } from 'lodash';
 
 import RadioFoundation, { RadioAdapter } from '@douyinfe/semi-foundation/radio/radioFoundation';
 import { RadioChangeEvent } from '@douyinfe/semi-foundation/radio/radioInnerFoundation';
@@ -52,6 +52,7 @@ export interface RadioState {
     addonId?: string;
     extraId?: string;
     focusVisible?: boolean;
+    checked?: boolean;
 }
 
 export { RadioChangeEvent };
@@ -104,11 +105,22 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             hover: false,
             addonId: props.addonId,
             extraId: props.extraId,
+            checked: props.checked || props.defaultChecked || false,
         };
         this.foundation = new RadioFoundation(this.adapter);
         this.radioEntity = null;
     }
 
+    componentDidUpdate(prevProps: RadioProps) {
+        if (this.props.checked !== prevProps.checked) {
+            if (isUndefined(this.props.checked)) {
+                this.foundation.setChecked(false);
+            } else if (isBoolean(this.props.checked)) {
+                this.foundation.setChecked(this.props.checked);
+            }
+        }
+    }
+
     get adapter(): RadioAdapter {
         return {
             ...super.adapter,
@@ -118,6 +130,9 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             setAddonId: () => {
                 this.setState({ addonId: getUuidShort({ prefix: 'addon' }) });
             },
+            setChecked: (checked: boolean) => {
+                this.setState({ checked });
+            },
             setExtraId: () => {
                 this.setState({ extraId: getUuidShort({ prefix: 'extra' }) });
             },
@@ -146,6 +161,7 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             const { radioGroup } = this.context;
             radioGroup.onChange && radioGroup.onChange(e);
         }
+        !('checked' in this.props) && this.foundation.setChecked(e.target.checked);
         onChange && onChange(e);
     };
 
@@ -171,7 +187,6 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
         const {
             addonClassName,
             addonStyle,
-            checked,
             disabled,
             style,
             className,
@@ -194,8 +209,11 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             isButtonRadioComponent,
             buttonSize,
             realPrefixCls;
-        const { hover: isHover, addonId, extraId, focusVisible } = this.state;
-        let props = {};
+        const { hover: isHover, addonId, extraId, focusVisible, checked, } = this.state;
+        const props: Record<string, any> = {
+            checked,
+            disabled,
+        };
 
         if (this.isInGroup()) {
             realChecked = this.context.radioGroup.value === propValue;
@@ -206,13 +224,17 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             isPureCardRadioGroup = this.context.radioGroup.isPureCardRadio;
             buttonSize = this.context.radioGroup.buttonSize;
             realPrefixCls = prefixCls || this.context.radioGroup.prefixCls;
-            props = { checked: realChecked, disabled: isDisabled };
+            props.checked = realChecked;
+            props.disabled = isDisabled;
         } else {
             realChecked = checked;
             isDisabled = disabled;
             realMode = mode;
             isButtonRadioComponent = type === 'button';
             realPrefixCls = prefixCls;
+            isButtonRadioGroup = type === strings.TYPE_BUTTON;
+            isPureCardRadioGroup = type === strings.TYPE_PURECARD;
+            isCardRadioGroup = type === strings.TYPE_CARD || isPureCardRadioGroup;
         }
         const isButtonRadio = typeof isButtonRadioGroup === 'undefined' ? isButtonRadioComponent : isButtonRadioGroup;
 

package/radio/radioGroup.tsx

@@ -177,6 +177,7 @@ class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState> {
                             key={index}
                             disabled={this.props.disabled}
                             value={option}
+                            type={type}
                         >
                             {option}
                         </Radio>
@@ -190,6 +191,7 @@ class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState> {
                             extra={option.extra}
                             className={option.className}
                             style={option.style}
+                            type={type}
                         >
                             {option.label}
                         </Radio>

package/rating/__test__/rating.test.js

@@ -85,7 +85,7 @@ describe('Rating', () => {
         expect(spyOnChange.calledWithMatch(1)).toBe(true);
     });
 
-    it('controled value', () => {
+    it('controlled value', () => {
         const R = getRating({ value: 2 });
         expect(R.state().value).toEqual(2);
         expect(R.find(`.${BASE_CLASS_PREFIX}-rating-star-full`).length).toEqual(2);

package/select/__test__/select.test.js

@@ -20,7 +20,7 @@ function getOption(list = defaultList) {
 let commonProps = {
     // Select use Popup Layer to show candidate option,
     // but all Popup Layer which extends from Tooltip (eg Popover, Dropdown) have animation and delay.
-    // Turn off animation and delay during testing, to avoid wating (something like setTimeOut/balabala...) in the test code
+    // Turn off animation and delay during testing, to avoid waiting (something like setTimeOut/balabala...) in the test code
     motion: false,
     mouseEnterDelay: 0,
     mouseLeaveDelay: 0,
@@ -467,7 +467,7 @@ describe('Select', () => {
         const props = { disabled: true };
         const select = getSelect(props);
         expect(select.exists(`.${BASE_CLASS_PREFIX}-select-disabled`)).toEqual(true);
-        // Does not respond click events when disbaled is true
+        // Does not respond click events when disabled is true
         select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('click', {});
         expect(select.exists(`.${BASE_CLASS_PREFIX}-select-option-list`)).toEqual(false);
     });
@@ -556,12 +556,6 @@ describe('Select', () => {
         select.unmount();
         // when click clear button, should trigger onSearch
         // TODO
-        let scProps = {
-            showClear: true,
-            filter: true,
-            defaultValue: 'tikok',
-        };
-        const scSelect = getSelect(props);
     });
 
     it('emptyContent', () => {
@@ -718,7 +712,7 @@ describe('Select', () => {
     });
 
     it('onDeselect', () => {
-        // trigger onDeselect when option is deselectd
+        // trigger onDeselect when option is deselected
         let onDeselect = (value, option) => {};
         let spyOnDeselect = sinon.spy(onDeselect);
         let props = {
@@ -916,7 +910,7 @@ describe('Select', () => {
     });
 
     it('【autoFocus】 & onBlur when autoFocus = true', () => {
-        // autoFocus should trigger onBlur when click ohter element directly （dropdown not open）
+        // autoFocus should trigger onBlur when click other element directly （dropdown not open）
         let spyOnBlur = sinon.spy((value, option) => {
         });
         let props = {
@@ -936,7 +930,7 @@ describe('Select', () => {
         expect(spyOnBlur.callCount).toEqual(1);
     });
 
-    it('vitrual', () => {
+    it('virtual', () => {
         let spyOnChange = sinon.spy((value) => {
         });
         let optionList = Array.from({ length: 100 }, (v, i) => ({ label: `option-${i}`, value: i }));
@@ -1048,7 +1042,7 @@ describe('Select', () => {
     it('customTrigger', () => {
         const triggerRender = ({ value, ...rest }) => {
             return (
-              <div className="custom-triger">
+              <div className="custom-trigger">
                 trigger
               </div>
             );
@@ -1057,7 +1051,7 @@ describe('Select', () => {
             triggerRender,
         };
         let select = getSelect(props);
-        let trigger = select.find('.custom-triger');
+        let trigger = select.find('.custom-trigger');
         expect(trigger.length).toEqual(1);
         expect(trigger.at(0).text()).toEqual('trigger');
         trigger.at(0).simulate('click')
@@ -1186,7 +1180,7 @@ describe('Select', () => {
         expect(singleSelect.state().selections.size).toEqual(0);
     });
 
-    it('props optionList update after choose some option, uncontroled mode', () => {
+    it('props optionList update after choose some option, uncontrolled mode', () => {
 
         let props = {
             defaultActiveFirstOption: true,
@@ -1234,7 +1228,7 @@ describe('Select', () => {
         expect(selections2[0][0]).toEqual('abc');
     });
 
-    it('click tag close when multiple, controled mode', () => {
+    it('click tag close when multiple, controlled mode', () => {
         let spyOnChange = sinon.spy((value) => {
         });
         let spyOnDeselect = sinon.spy((option) => {
@@ -1303,8 +1297,8 @@ describe('Select', () => {
         expect(inputValue).toEqual(keyword);
     });
     // TODO ref selectAll \deselectAll when onChangeWithObject is true
-    // TODO when loading is true, do not response any keyborard event
-    // TODO can't remove tag when option is diabled
+    // TODO when loading is true, do not response any keyboard event
+    // TODO can't remove tag when option is disabled
     // it('allowCreate-renderCreateItem', ()=>{})
     // it('autoAdjustOverflow', ()=>{})
     // it('remote', ()=>{})

package/select/_story/select.stories.js

@@ -1183,7 +1183,7 @@ RenderSelectedItem.parameters =  {
   chromatic: { disableSnapshot: false },
 };
 
-const ControledSelect = () => {
+const ControlledSelect = () => {
   const [value, setValue] = useState('nick');
   const [value2, setValue2] = useState('jerry');
   const [value3, setValue3] = useState();
@@ -1277,13 +1277,13 @@ const ControledSelect = () => {
   );
 };
 
-export const Controlled = () => <ControledSelect></ControledSelect>;
+export const Controlled = () => <ControlledSelect></ControlledSelect>;
 
 Controlled.story = {
   name: 'controlled',
 };
 
-const UnControledSelect = () => {
+const UnControlledSelect = () => {
   const onChange = value => {
     console.log(value);
   };
@@ -1318,8 +1318,8 @@ const UnControledSelect = () => {
   );
 };
 
-export { UnControledSelect };
-UnControledSelect.story = {
+export { UnControlledSelect };
+UnControlledSelect.story = {
   name: '非受控组件'
 };
 
@@ -1800,7 +1800,7 @@ AllowCreateCustomRender.story = {
   name: 'allowCreate custom render',
 };
 
-let AllowCreateControledDemo = () => {
+let AllowCreateControlledDemo = () => {
   let [value, setValue] = useState();
   const optionList = [
     {

package/steps/_story/steps.stories.js

@@ -199,12 +199,12 @@ class StepsDemo extends React.Component {
   }
 }
 
-export const StepsWithControled = () => {
+export const StepsWithControlled = () => {
   return <StepsDemo></StepsDemo>;
 };
 
-StepsWithControled.story = {
-  name: 'steps with controled',
+StepsWithControlled.story = {
+  name: 'steps with controlled',
 };
 
 class StepsWithonChange extends React.Component {

package/switch/_story/switch.stories.js

@@ -65,17 +65,17 @@ SwitchDisabled.story = {
   name: 'switch disabled',
 };
 
-const ControledSwitch = () => {
+const ControlledSwitch = () => {
   const [checked, onChange] = useState(true);
   return <Switch checked={checked} onChange={(v, e) => onChange(v)} aria-label='power-switch'/>;
 };
-export const SwitchCheckedOnChange = () => <ControledSwitch />;
+export const SwitchCheckedOnChange = () => <ControlledSwitch />;
 
 SwitchCheckedOnChange.story = {
   name: 'switch checked + onChange',
 };
 
-const UnControledSwitch = () => {
+const UnControlledSwitch = () => {
   const onChange = checked => {
     console.log(checked);
   };
@@ -86,7 +86,7 @@ const UnControledSwitch = () => {
     </>
   );
 };
-export const SwitchDefaultCheckedOnChange = () => <UnControledSwitch />;
+export const SwitchDefaultCheckedOnChange = () => <UnControlledSwitch />;
 
 SwitchDefaultCheckedOnChange.story = {
   name: 'switch defaultChecked + onChange',

package/switch/_story/switch.stories.tsx

@@ -57,15 +57,15 @@ stories.add('switch disabled', () => (
 ));
 
 
-const ControledSwitch = () => {
+const ControlledSwitch = () => {
     const [checked, onChange] = useState(true);
     return (
         <Switch checked={checked} onChange={(v, e) => onChange(v)} />
     );
 };
-stories.add('switch checked + onChange', () => <ControledSwitch/>);
+stories.add('switch checked + onChange', () => <ControlledSwitch/>);
 
-const UnControledSwitch = () => {
+const UnControlledSwitch = () => {
     const onChange = checked => {
         console.log(checked);
     };
@@ -76,7 +76,7 @@ const UnControledSwitch = () => {
         </>
     );
 };
-stories.add('switch defaultChecked + onChange', () => <UnControledSwitch/>);
+stories.add('switch defaultChecked + onChange', () => <UnControlledSwitch/>);
 
 class LoadingDemo extends React.Component {
     constructor(props) {

package/tag/_story/tag.stories.js

@@ -1,5 +1,5 @@
 /* argus-disable unPkgSensitiveInfo */
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import withPropsCombinations from 'react-storybook-addon-props-combinations';
 import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
 
@@ -232,3 +232,59 @@ export const AvatarTagGroup = () => <AvatarTagGroupDemo />;
 AvatarTagGroup.story = {
   name: 'avatar tagGroup',
 };
+
+class TagGroupCloseableDemo extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            tagList: [
+                { tagKey: '1', color: 'white', children: '抖音',  closable: true,},
+                { tagKey: '2',color: 'white', children: '火山小视频', closable: true,},
+                { tagKey: '3',color: 'white', children: '剪映', closable: true,},
+                { tagKey: '4',color: 'white', children: '皮皮虾', closable: true,},
+            ]
+        };
+        this.tagListClick = this.tagListClick.bind(this);
+    }
+
+    tagListClick(value, e, tagKey){
+        const newTagList = [...this.state.tagList];
+        const closeTagIndex = newTagList.findIndex(t => t.tagKey === tagKey);
+        newTagList.splice(closeTagIndex, 1);
+        this.setState({
+          tagList: newTagList,
+        });
+    }
+
+    render() {
+        return (
+            <div style={ {
+                backgroundColor: 'var(--semi-color-fill-0)',
+                height: 35,
+                width: 300,
+                display: 'flex',
+                alignItems: 'center',
+                padding: '0 10px',
+                marginBottom: 30,
+            }}>
+                <TagGroup
+                    maxTagCount={3}
+                    style={ {
+                        display: 'flex',
+                        alignItems: 'center',
+                        width: 350,
+                    }}
+                    tagList={this.state.tagList}
+                    size='large'
+                    onTagClose={this.tagListClick}
+                />
+            </div>
+        );
+    }
+}
+
+export const TagGroupCloseable = () => <TagGroupCloseableDemo />;
+
+TagGroupCloseable.story = {
+  name: 'tagGroup closable',
+}

package/tag/group.tsx

@@ -21,6 +21,7 @@ export interface TagGroupProps<T> {
     popoverProps?: PopoverProps;
     avatarShape?: AvatarShape;
     mode?: string;
+    onTagClose: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;
 }
 
 export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
@@ -29,6 +30,7 @@ export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
         className: '',
         size: tagSize[0],
         avatarShape: 'square',
+        onTagClose: () => undefined,
     };
 
     static propTypes = {
@@ -40,6 +42,7 @@ export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
         tagList: PropTypes.array,
         size: PropTypes.oneOf(tagSize),
         mode: PropTypes.string,
+        onTagClose: PropTypes.func,
         showPopover: PropTypes.bool,
         popoverProps: PropTypes.object,
         avatarShape: PropTypes.oneOf(avatarShapeSet),
@@ -95,18 +98,32 @@ export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
     }
 
     renderAllTags() {
-        const { tagList, size, mode, avatarShape } = this.props;
-        const renderTags = tagList.map((tag, index): (Tag | React.ReactNode) => {
+        const { tagList, size, mode, avatarShape, onTagClose } = this.props;
+        const renderTags = tagList.map((tag): (Tag | React.ReactNode) => {
             if (mode === 'custom') {
                 return tag as React.ReactNode;
             }
             if (!(tag as TagProps).size) {
                 (tag as TagProps).size = size;
             }
+            
             if (!(tag as TagProps).avatarShape) {
                 (tag as TagProps).avatarShape = avatarShape;
             }
-            return <Tag key={`${index}-tag`} {...(tag as TagProps)} />;
+
+            if (!(tag as TagProps).tagKey) {
+                if (typeof (tag as TagProps).children === 'string' || typeof (tag as TagProps).children === 'number') {
+                    (tag as TagProps).tagKey = (tag as TagProps).children as string | number;
+                } else {
+                    (tag as TagProps).tagKey = Math.random();
+                }
+            }
+            return <Tag {...(tag as TagProps)} key={(tag as TagProps).tagKey} onClose={(tagChildren, e, tagKey) => {
+                if ((tag as TagProps).onClose) {
+                    (tag as TagProps).onClose(tagChildren, e, tagKey);
+                }
+                onTagClose && onTagClose(tagChildren, e, tagKey);
+            }} />;
         });
         return renderTags;
     }

package/tag/index.tsx

@@ -40,6 +40,7 @@ export default class Tag extends Component<TagProps, TagState> {
 
     static propTypes = {
         children: PropTypes.node,
+        tagKey: PropTypes.oneOf([PropTypes.string, PropTypes.number]),
         size: PropTypes.oneOf(tagSize),
         color: PropTypes.oneOf(tagColors),
         type: PropTypes.oneOf(tagType),
@@ -79,11 +80,11 @@ export default class Tag extends Component<TagProps, TagState> {
         }
     }
 
-    close(e: React.MouseEvent<HTMLElement>, value: React.ReactNode) {
+    close(e: React.MouseEvent<HTMLElement>, value: React.ReactNode, tagKey: string | number) {
         const { onClose } = this.props;
         e.stopPropagation();
         e.nativeEvent.stopImmediatePropagation();
-        onClose && onClose(value, e);
+        onClose && onClose(value, e, tagKey);
         // when user call e.preventDefault() in onClick callback, tag will not hidden
         if (e.defaultPrevented) {
             return;
@@ -96,7 +97,7 @@ export default class Tag extends Component<TagProps, TagState> {
         switch (event.key) {
             case "Backspace":
             case "Delete":
-                closable && this.close(event, this.props.children);
+                closable && this.close(event, this.props.children, this.props.tagKey);
                 handlePrevent(event);
                 break;
             case "Enter":
@@ -119,7 +120,7 @@ export default class Tag extends Component<TagProps, TagState> {
     }
 
     render() {
-        const { children, size, color, closable, visible, onClose, onClick, className, type, avatarSrc, avatarShape, tabIndex, ...attr } = this.props;
+        const { tagKey, children, size, color, closable, visible, onClose, onClick, className, type, avatarSrc, avatarShape, tabIndex, ...attr } = this.props;
         const { visible: isVisible } = this.state;
         const clickable = onClick !== Tag.defaultProps.onClick || closable;
         // only when the Tag is clickable or closable, the value of tabIndex is allowed to be passed in. 
@@ -145,7 +146,7 @@ export default class Tag extends Component<TagProps, TagState> {
         const wrapProps = clickable ? ({ ...baseProps, ...a11yProps }) : baseProps;
         const closeIcon = closable ? (
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-            <div className={`${prefixCls}-close`} onClick={e => this.close(e, children)}>
+            <div className={`${prefixCls}-close`} onClick={e => this.close(e, children, tagKey)}>
                 <IconClose size="small" />
             </div>
         ) : null;

package/tag/interface.ts

@@ -22,12 +22,13 @@ export type AvatarShape = 'circle' | 'square';
 
 export interface TagProps {
     children?: React.ReactNode;
+    tagKey?: string | number;
     size?: TagSize;
     color?: TagColor;
     type?: TagType;
     closable?: boolean;
     visible?: boolean;
-    onClose?: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>) => void;
+    onClose?: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     style?: React.CSSProperties;
     className?: string;

package/transfer/_story/transfer.stories.js

@@ -195,7 +195,7 @@ TransferDraggableAndDisabled.story = {
 }
 
 
-const ControledTransfer = () => {
+const ControlledTransfer = () => {
   const [value, setValue] = useState([2, 3]);
 
   const handleChange = value => {
@@ -209,7 +209,7 @@ const ControledTransfer = () => {
   );
 };
 
-export const ControlledTransfer = () => <ControledTransfer />;
+export const ControlledTransfer = () => <ControlledTransfer />;
 
 ControlledTransfer.story = {
   name: '受控Transfer',