@douyinfe/semi-ui 2.7.0 → 2.7.1

package/input/_story/input.stories.js

@@ -897,4 +897,13 @@ export const InputFocus = () => {
       <Input ref={ref} onChange={() => console.log('ref', ref) } onFocus={() => console.log('focus')} />
     </>
   );
-};
+};
+
+export const TextAreaAutosize = () => {
+  return (
+    <div style={{ width: 200 }}>
+      <TextArea autosize />
+    </div>
+  )
+};
+TextAreaAutosize.storyName = "textarea autosize";

package/lib/cjs/_utils/hooks/usePrevFocus.js

@@ -18,6 +18,7 @@ var _react = require("react");
 
 var _index = require("../index");
 
+/* istanbul ignore next */
 function usePrevFocus() {
   const [prevFocusElement, setPrevFocus] = (0, _react.useState)((0, _index.getActiveElement)());
   (0, _react.useEffect)(() => {

package/lib/cjs/modal/useModal/HookModal.js

@@ -57,6 +57,8 @@ const HookModal = (_a, ref) => {
   const {
     motion
   } = props;
+  /* istanbul ignore next */
+
   const mergedMotion = typeof motion === 'undefined' || motion ? (0, _assign.default)((0, _assign.default)({}, motion), {
     didLeave: function () {
       const didLeave = (0, _get2.default)(props.motion, 'didLeave');

package/lib/cjs/tooltip/index.js

@@ -463,7 +463,7 @@ class Tooltip extends _baseComponent.default {
           willUpdateStates.visible = visible;
         }
 
-        this.setState(willUpdateStates, () => {
+        this.mounted && this.setState(willUpdateStates, () => {
           cb();
         });
       },

package/lib/es/_utils/hooks/usePrevFocus.js

@@ -2,6 +2,8 @@ import _isFunction from "lodash/isFunction";
 import _get from "lodash/get";
 import { useState, useEffect } from 'react';
 import { getActiveElement } from '../index';
+
+/* istanbul ignore next */
 export function usePrevFocus() {
   const [prevFocusElement, setPrevFocus] = useState(getActiveElement());
   useEffect(() => {

package/lib/es/modal/useModal/HookModal.js

@@ -39,6 +39,8 @@ const HookModal = (_a, ref) => {
   const {
     motion
   } = props;
+  /* istanbul ignore next */
+
   const mergedMotion = typeof motion === 'undefined' || motion ? _Object$assign(_Object$assign({}, motion), {
     didLeave: function () {
       const didLeave = _get(props.motion, 'didLeave');

package/lib/es/tooltip/index.js

@@ -422,7 +422,7 @@ export default class Tooltip extends BaseComponent {
           willUpdateStates.visible = visible;
         }
 
-        this.setState(willUpdateStates, () => {
+        this.mounted && this.setState(willUpdateStates, () => {
           cb();
         });
       },

package/modal/_story/modal.stories.js

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
-import { Select, Modal, Button, Tooltip, Popover } from '../../index';
+import en_GB from '../../locale/source/en_GB';
+
+import { Select, Modal, Button, Tooltip, Popover, ConfigProvider, Tag, Space } from '../../index';
 import CollapsibleInModal from './CollapsibleInModal';
 import DynamicContextDemo from './DynamicContext';
 
@@ -248,4 +250,94 @@ KeepDomNotLazy.story = {
   name: 'keepDOM && not lazy',
 };
 
+export const UseModalDemo = () => {
+  const [modal, contextHolder] = Modal.useModal();
+  const config = { 'title': 'old title', 'content': 'old content' };
+
+  return (
+      <ConfigProvider locale={en_GB}>
+          <div>
+              <Button
+                  onClick={() => {
+                      const currentModal = modal.confirm(config);
+
+                      setTimeout(() => {
+                        currentModal.update({ title: "new title", content: "new content" });
+                      }, 1000);
+                  }}
+              >
+                  Confirm Modal
+              </Button>
+          </div>
+          {contextHolder}
+      </ConfigProvider>
+  );
+};
+UseModalDemo.storyName = "useModal";
+
+export const UseModalDestroy = () => {
+  const [modal, contextHolder] = Modal.useModal();
+  const config = { 'title': 'old title', 'content': 'old content' };
+
+  return (
+      <ConfigProvider locale={en_GB}>
+          <div>
+              <Button
+                  onClick={() => {
+                      const currentModal = modal.confirm(config);
+
+                      setTimeout(() => {
+                        currentModal.destroy();
+                      }, 1000);
+                  }}
+              >
+                  Confirm Modal
+              </Button>
+          </div>
+          {contextHolder}
+      </ConfigProvider>
+  );
+};
+UseModalDestroy.storyName = "useModal destroy";
+
+export const UseModalAfterClose = () => {
+  const [modal, contextHolder] = Modal.useModal();
+  const [closed, setClosed] = React.useState(false);
+  const [leave, setLeave] = React.useState(false);
+
+  const config = { 
+    title: 'old title', 
+    content: 'old content', 
+    afterClose: () => {
+      setClosed(true);
+    },
+    motion: {
+      didLeave: () => {
+        console.log('didLeave');
+        setLeave(true);
+      }
+    }
+  };
 
+  return (
+      <ConfigProvider locale={en_GB}>
+          <Space>
+              <Button
+                  onClick={() => {
+                      const currentModal = modal.confirm(config);
+
+                      setTimeout(() => {
+                        currentModal.destroy();
+                      }, 0);
+                  }}
+              >
+                  Confirm Modal
+              </Button>
+              <Tag>{`closed: ${closed}`}</Tag>
+              {/* <Tag>{`motion leave: ${leave}`}</Tag> */}
+          </Space>
+          {contextHolder}
+      </ConfigProvider>
+  );
+};
+UseModalAfterClose.storyName = "useModal afterClose";

package/modal/useModal/HookModal.tsx

@@ -35,6 +35,7 @@ const HookModal = ({ afterClose, config, ...props }: PropsWithChildren<HookModal
     }));
 
     const { motion } = props;
+    /* istanbul ignore next */
     const mergedMotion =
         typeof motion === 'undefined' || motion ?
             {

package/notification/_story/useNotification/index.jsx

@@ -4,18 +4,32 @@ import { Button, ConfigProvider } from '../../../index';
 import Context from './context';
 
 function App({ children, globalVars }) {
-    return <Context.Provider value={{ title: '1111', ...globalVars }}>{children}</Context.Provider>;
+    return (
+        <div data-cy="notice-container">
+            <Context.Provider value={{ title: '1111', ...globalVars }}>{children}</Context.Provider>
+        </div>
+    );
 }
 
 export default function Demo() {
-    const [Notice, elements] = useNotification();
+    const [notice, elements] = useNotification();
+    const config = {
+        content: 'Hello World',
+        position: 'top',
+        title: <Context.Consumer>{({ title }) => <strong>{title}</strong>}</Context.Consumer>,
+        duration: 0,
+    };
 
     const addNotice = () => {
-        Notice.addNotice({
-            content: 'Hello World',
-            position: 'top',
-            title: <Context.Consumer>{({ title }) => <strong>{title}</strong>}</Context.Consumer>,
-        });
+        const id1 = notice.info(config);
+        const id2 = notice.success(config);
+        const id3 = notice.warning(config);
+        const id4 = notice.error(config);
+        const id5 = notice.open(config);
+
+        // setTimeout(() => {
+        //     notice.close(id5);
+        // }, 1000);
     };
 
     return (

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.7.0",
+    "version": "2.7.1",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,12 +14,12 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.7.0",
-        "@douyinfe/semi-animation-react": "2.7.0",
-        "@douyinfe/semi-foundation": "2.7.0",
-        "@douyinfe/semi-icons": "2.7.0",
-        "@douyinfe/semi-illustrations": "2.7.0",
-        "@douyinfe/semi-theme-default": "2.7.0",
+        "@douyinfe/semi-animation": "2.7.1",
+        "@douyinfe/semi-animation-react": "2.7.1",
+        "@douyinfe/semi-foundation": "2.7.1",
+        "@douyinfe/semi-icons": "2.7.1",
+        "@douyinfe/semi-illustrations": "2.7.1",
+        "@douyinfe/semi-theme-default": "2.7.1",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "b6e4e0a1e22d4dabe68cbf7e3d2cfd0202da0424",
+    "gitHead": "d0dbd6f932a74386b429dedbc32ae92d9e0af7b9",
     "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.7.0",
+        "@douyinfe/semi-scss-compile": "2.7.1",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/table/_story/v2/FixedMemoryLeak/index.jsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { Popconfirm, Table } from "@douyinfe/semi-ui";
+
+export default function App() {
+    const [data, setData] = useState([{ a: 1 }]);
+    return (
+        <Table
+            dataSource={data}
+            columns={[
+                {
+                    dataIndex: "a",
+                    title: "a",
+                },
+                {
+                    dataIndex: "b",
+                    render: () => {
+                        return (
+                            <Popconfirm
+                                onConfirm={() => {
+                                    setTimeout(() => {
+                                        setData([]);
+                                    });
+                                }}
+                            >
+                                删除
+                            </Popconfirm>
+                        );
+                    },
+                },
+            ]}
+        />
+    );
+}

package/table/_story/v2/index.js

@@ -3,4 +3,5 @@ export { default as FixedColumnsChange } from './FixedColumnsChange';
 export { default as FixedZIndex } from './FixedZIndex';
 export { default as FixedHeaderMerge } from './FixedHeaderMerge';
 export { default as FixedResizable } from './FixedResizable';
-export { default as FixedExpandedRow } from './FixedExpandedRow';
+export { default as FixedExpandedRow } from './FixedExpandedRow';
+export { default as FixedMemoryLeak  } from './FixedMemoryLeak';

package/toast/_story/toast.stories.js

@@ -96,3 +96,44 @@ export const _Toast = () => (
 _Toast.story = {
   name: 'toast',
 };
+
+const ReachableContext = React.createContext();
+
+/**
+ * test with cypress
+ * @returns 
+ */
+export const useToastDemo = () => {
+  const [toast, contextHolder] = Toast.useToast();
+  const config = {
+      duration: 0,
+      title: 'This is a success message',
+      content: <ReachableContext.Consumer>{name => `ReachableContext: ${name}`}</ReachableContext.Consumer>,
+  };
+
+  return (
+      <ReachableContext.Provider value="Light">
+          <div>
+              <Button
+                onClick={() => {
+                    toast.success(config);
+                    toast.info(config);
+                    toast.error(config);
+                    toast.warning(config);
+                    const id = toast.open(config);
+
+                    setTimeout(() => {
+                      toast.close(id);
+                    }, 100);
+                }}
+              >
+                  Hook Toast
+              </Button>
+          </div>
+          <div data-cy="context-holder">
+            {contextHolder}
+          </div>
+      </ReachableContext.Provider>
+  );
+};
+useToastDemo.storyName = "useToast";

package/tooltip/index.tsx

@@ -302,7 +302,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                 } else {
                     willUpdateStates.visible = visible;
                 }
-                this.setState(willUpdateStates as TooltipState, () => {
+                this.mounted && this.setState(willUpdateStates as TooltipState, () => {
                     cb();
                 });
             },