@douyinfe/semi-ui 2.17.0 → 2.19.0-alpha.0

package/modal/_story/__snapshots__/modal.stories.tsx.snap

@@ -0,0 +1,203 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`模态框-点击遮罩层不可关闭 1`] = `
+<DialogComponent
+  maskClosable={false}
+>
+  <Button
+    onClick={[Function]}
+  >
+    <Button
+      block={false}
+      disabled={false}
+      htmlType="button"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      prefixCls="semi-button"
+      size="default"
+      theme="light"
+      type="primary"
+    >
+      <button
+        aria-disabled={false}
+        className="semi-button semi-button-primary semi-button-light"
+        disabled={false}
+        onClick={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        type="button"
+      >
+        <span
+          className="semi-button-content"
+          onClick={[Function]}
+          x-semi-prop="children"
+        >
+          show dialog
+        </span>
+      </button>
+    </Button>
+  </Button>
+  <Button
+    onClick={[Function]}
+  >
+    <Button
+      block={false}
+      disabled={false}
+      htmlType="button"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      prefixCls="semi-button"
+      size="default"
+      theme="light"
+      type="primary"
+    >
+      <button
+        aria-disabled={false}
+        className="semi-button semi-button-primary semi-button-light"
+        disabled={false}
+        onClick={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        type="button"
+      >
+        <span
+          className="semi-button-content"
+          onClick={[Function]}
+          x-semi-prop="children"
+        >
+          静态调用
+        </span>
+      </button>
+    </Button>
+  </Button>
+  <Modal
+    afterClose={[Function]}
+    cancelLoading={false}
+    centered={false}
+    closable={true}
+    closeOnEsc={true}
+    confirmLoading={false}
+    fullScreen={false}
+    hasCancel={true}
+    keepDOM={false}
+    lazyRender={true}
+    mask={true}
+    maskClosable={false}
+    maskFixed={false}
+    motion={true}
+    okType="primary"
+    onCancel={[Function]}
+    onOk={[Function]}
+    size="small"
+    title="对话框标题"
+    visible={false}
+    zIndex={1000}
+  />
+</DialogComponent>
+`;
+
+exports[`模态框默认 1`] = `
+<DialogComponent>
+  <Button
+    onClick={[Function]}
+  >
+    <Button
+      block={false}
+      disabled={false}
+      htmlType="button"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      prefixCls="semi-button"
+      size="default"
+      theme="light"
+      type="primary"
+    >
+      <button
+        aria-disabled={false}
+        className="semi-button semi-button-primary semi-button-light"
+        disabled={false}
+        onClick={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        type="button"
+      >
+        <span
+          className="semi-button-content"
+          onClick={[Function]}
+          x-semi-prop="children"
+        >
+          show dialog
+        </span>
+      </button>
+    </Button>
+  </Button>
+  <Button
+    onClick={[Function]}
+  >
+    <Button
+      block={false}
+      disabled={false}
+      htmlType="button"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      prefixCls="semi-button"
+      size="default"
+      theme="light"
+      type="primary"
+    >
+      <button
+        aria-disabled={false}
+        className="semi-button semi-button-primary semi-button-light"
+        disabled={false}
+        onClick={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        type="button"
+      >
+        <span
+          className="semi-button-content"
+          onClick={[Function]}
+          x-semi-prop="children"
+        >
+          静态调用
+        </span>
+      </button>
+    </Button>
+  </Button>
+  <Modal
+    afterClose={[Function]}
+    cancelLoading={false}
+    centered={false}
+    closable={true}
+    closeOnEsc={true}
+    confirmLoading={false}
+    fullScreen={false}
+    hasCancel={true}
+    keepDOM={false}
+    lazyRender={true}
+    mask={true}
+    maskClosable={true}
+    maskFixed={false}
+    motion={true}
+    okType="primary"
+    onCancel={[Function]}
+    onOk={[Function]}
+    size="small"
+    title="对话框标题"
+    visible={false}
+    zIndex={1000}
+  />
+</DialogComponent>
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.17.0",
+    "version": "2.19.0-alpha.0",
     "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.0",
-        "@douyinfe/semi-foundation": "2.17.0",
-        "@douyinfe/semi-icons": "2.17.0",
+        "@douyinfe/semi-animation-react": "2.19.0-alpha.0",
+        "@douyinfe/semi-foundation": "2.19.0-alpha.0",
+        "@douyinfe/semi-icons": "2.19.0-alpha.0",
         "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.17.0",
+        "@douyinfe/semi-theme-default": "2.19.0-alpha.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -66,13 +66,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "802e57ecc50de44c7ad4b2322bdd864eb9727cc3",
+    "gitHead": "58f801d44b0fb3079606c9e7b060f5c782d37e0a",
     "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.0",
+        "@douyinfe/semi-scss-compile": "2.19.0-alpha.0",
         "@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/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/table/ColumnFilter.tsx

@@ -164,12 +164,13 @@ export default function ColumnFilter(props: ColumnFilterProps = {}): React.React
     } else {
         iconElem = (
             <div className={finalCls}>
+                {'\u200b'/* ZWSP(zero-width space) */}
                 <IconFilter
                     role="button"
                     aria-label="Filter data with this column"
                     aria-haspopup="listbox"
                     tabIndex={-1}
-                    size="small"
+                    size="default"
                 />
             </div>
         );

package/table/ColumnSorter.tsx

@@ -15,6 +15,7 @@ export interface ColumnSorterProps {
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
     prefixCls?: string;
     sortOrder?: SortOrder;
+    title?: React.ReactNode;
 }
 
 export default class ColumnSorter extends PureComponent<ColumnSorterProps> {
@@ -33,9 +34,9 @@ export default class ColumnSorter extends PureComponent<ColumnSorterProps> {
     };
 
     render() {
-        const { prefixCls, onClick, sortOrder, style } = this.props;
+        const { prefixCls, onClick, sortOrder, style, title } = this.props;
 
-        const iconBtnSize = 'small';
+        const iconBtnSize = 'default';
 
         const upCls = cls(`${prefixCls}-column-sorter-up`, {
             on: sortOrder === strings.SORT_DIRECTIONS[0],
@@ -58,17 +59,22 @@ export default class ColumnSorter extends PureComponent<ColumnSorterProps> {
                 role='button'
                 {...ariaProps}
                 tabIndex={-1}
-                style={style}
-                className={`${prefixCls}-column-sorter`}
+                className={`${prefixCls}-column-sorter-wrapper`}
                 onClick={onClick}
                 onKeyPress={e => isEnterPress(e) && onClick(e as any)}
             >
-                <span className={`${upCls}`}>
-                    <IconCaretup size={iconBtnSize} />
-                </span>
-                <span className={`${downCls}`}>
-                    <IconCaretdown size={iconBtnSize} />
-                </span>
+                {title}
+                <div
+                    style={style}
+                    className={`${prefixCls}-column-sorter`}
+                >
+                    <span className={`${upCls}`}>
+                        <IconCaretup size={iconBtnSize} />
+                    </span>
+                    <span className={`${downCls}`}>
+                        <IconCaretdown size={iconBtnSize} />
+                    </span>
+                </div>
             </div>
         );
     }