@douyinfe/semi-ui 2.17.0-beta.1 → 2.18.0-beta.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-beta.1",
+    "version": "2.18.0-beta.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-beta.1",
-        "@douyinfe/semi-foundation": "2.17.0-beta.1",
-        "@douyinfe/semi-icons": "2.17.0-beta.1",
+        "@douyinfe/semi-animation-react": "2.18.0-beta.0",
+        "@douyinfe/semi-foundation": "2.18.0-beta.0",
+        "@douyinfe/semi-icons": "2.18.0-beta.0",
         "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.17.0-beta.1",
+        "@douyinfe/semi-theme-default": "2.18.0-beta.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": "f2829772791684497142f4bf6839063b9ef4427f",
+    "gitHead": "d390ac3fde2f62a63087a9ab8ea1dd1166432069",
     "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-beta.1",
+        "@douyinfe/semi-scss-compile": "2.18.0-beta.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/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/_story/v2/FixedFilter/index.tsx

@@ -0,0 +1,106 @@
+import React, { useState, useMemo, useEffect } from 'react';
+
+// eslint-disable-next-line semi-design/no-import
+import { Table, Avatar } from '@douyinfe/semi-ui';
+import * as dateFns from 'date-fns';
+
+const DAY = 24 * 60 * 60 * 1000;
+const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';
+
+const columns = [
+    {
+        title: '标题',
+        dataIndex: 'name',
+        width: 400,
+        render: (text, record, index) => {
+            return (
+                <div>
+                    <Avatar size="small" shape="square" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>
+                    {text}
+                </div>
+            );
+        },
+        filters: [
+            {
+                text: 'Semi Design 设计稿',
+                value: 'Semi Design 设计稿',
+            },
+            {
+                text: 'Semi Pro 设计稿',
+                value: 'Semi Pro 设计稿',
+            },
+        ],
+        onFilter: (value, record) => record.name.includes(value),
+        sorter: (a, b) => a.name.length - b.name.length > 0 ? 1 : -1,
+    },
+    {
+        title: '大小',
+        dataIndex: 'size',
+        sorter: (a, b) => a.size - b.size > 0 ? 1 : -1,
+        render: (text) => `${text} KB`
+    },
+    {
+        title: '所有者',
+        dataIndex: 'owner',
+        render: (text, record, index) => {
+            return (
+                <div>
+                    <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>{typeof text === 'string' && text.slice(0, 1)}</Avatar>
+                    {text}
+                </div>
+            );
+        }
+
+    },
+    {
+        title: '更新日期',
+        dataIndex: 'updateTime',
+        sorter: (a, b) => a.updateTime - b.updateTime > 0 ? 1 : -1,
+        render: (value) => {
+            return dateFns.format(new Date(value), 'yyyy-MM-dd');
+        }
+    }
+];
+
+App.storyName = 'Fixed filter issue 1036';
+/**
+ * test with cypress, please don't modify this story
+ */
+export default function App() {
+    const [dataSource, setData] = useState([]);
+
+    const rowSelection = useMemo(() => ({
+        onChange: (selectedRowKeys, selectedRows) => {
+            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+        },
+        getCheckboxProps: record => ({
+            disabled: record.name === 'Michael James', // Column configuration not to be checked
+            name: record.name,
+        }),
+    }), []);
+    const scroll = useMemo(() => ({ y: 300 }), []);
+
+    const getData = () => {
+        const data = [];
+        for (let i = 0; i < 46; i++) {
+            const isSemiDesign = i % 2 === 0;
+            const randomNumber = (i * 1000) % 199;
+            data.push({
+                key: '' + i,
+                name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi Pro 设计稿${i}.fig`,
+                owner: isSemiDesign ? '姜鹏志' : '郝宣',
+                size: randomNumber,
+                updateTime: new Date('2022-08-11').valueOf() + randomNumber * DAY,
+                avatarBg: isSemiDesign ? 'grey' : 'red'
+            });
+        }
+        return data;
+    };
+
+    useEffect(() => {
+        const data = getData();
+        setData(data);
+    }, []);
+
+    return <Table columns={columns} dataSource={dataSource} rowSelection={rowSelection} scroll={scroll} />;
+}