调整默认组件库

asurance · Jul 7, 2024 · 7499ae5 · 7499ae5
1 parent 6ca85e5
commit 7499ae5
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 98 deletions.
diff --git a/demos/close-by-ref.tsx b/demos/close-by-ref.tsx
@@ -4,11 +4,9 @@ import React, {
   forwardRef,
   useImperativeHandle,
 } from 'react';
-import { Button, Modal, Space } from '@arco-design/web-react';
+import { Button, Modal, Space } from '@douyinfe/semi-ui';
 import { OpenableProps, openify } from 'openify';
 
-import '@arco-design/web-react/dist/css/arco.css';
-
 type MyModalProps = OpenableProps<void> & {
   title: string;
 };

diff --git a/demos/context.tsx b/demos/context.tsx
@@ -1,9 +1,7 @@
 import React, { createContext, useContext } from 'react';
-import { Button, Modal, Space } from '@arco-design/web-react';
+import { Button, Modal, Space } from '@douyinfe/semi-ui';
 import { OpenableProps, openify } from 'openify';
 
-import '@arco-design/web-react/dist/css/arco.css';
-
 const myContext = createContext('默认内容');
 
 type MyModalProps = OpenableProps<void> & {

diff --git a/demos/mydrawer.tsx b/demos/mydrawer.tsx
@@ -1,29 +1,34 @@
 import React from 'react';
-import { Drawer } from '@arco-design/web-react';
+import { Modal } from '@douyinfe/semi-ui';
 import { OpenableProps, openify } from 'openify';
 
-import '@arco-design/web-react/dist/css/arco.css';
-
-type MyDrawerProps = OpenableProps<void> & {
+type MyAsyncModalProps = OpenableProps<void> & {
   title: string;
 };
 
-const MyDrawer = ({ visible, onClose, afterClose, title }: MyDrawerProps) => {
+const MyAsyncModal = ({
+  visible,
+  onClose,
+  afterClose,
+  title,
+}: MyAsyncModalProps) => {
   return (
-    <Drawer
+    <Modal
       title={title}
       visible={visible}
       onOk={onClose}
       onCancel={onClose}
       afterClose={afterClose}
     >
-      抽屉内容
-    </Drawer>
+      静态打开
+    </Modal>
   );
 };
 
-export const openMyDrawer = openify<void, MyDrawerProps, MyDrawerProps>(
-  MyDrawer,
-);
+export const openMyAsyncModal = openify<
+  void,
+  MyAsyncModalProps,
+  MyAsyncModalProps
+>(MyAsyncModal);
 
-export default MyDrawer;
+export default MyAsyncModal;
diff --git a/demos/promisify.tsx b/demos/promisify.tsx
@@ -1,9 +1,7 @@
 import React, { useRef, useState } from 'react';
-import { Button, Input, Modal, Space } from '@arco-design/web-react';
+import { Button, Input, Modal, Space } from '@douyinfe/semi-ui';
 import { OpenableProps, openify } from 'openify';
 
-import '@arco-design/web-react/dist/css/arco.css';
-
 type Value =
   | {
       isOk: true;

diff --git a/demos/static-call.tsx b/demos/static-call.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
-import { Button, Modal, Space } from '@arco-design/web-react';
+import { Button, Modal, Space } from '@douyinfe/semi-ui';
 import { OpenableProps, openify } from 'openify';
 
-import '@arco-design/web-react/dist/css/arco.css';
-
 type MyModalProps = OpenableProps<void> & {
   title: string;
 };
@@ -29,8 +27,8 @@ export default () => (
     <Button onClick={() => openMyModal({ title: '标题' })}>打开弹窗</Button>
     <Button
       onClick={async () => {
-        const { openMyDrawer } = await import('./mydrawer');
-        openMyDrawer({ title: '标题' });
+        const { openMyAsyncModal } = await import('demos/mydrawer');
+        openMyAsyncModal({ title: '标题' });
       }}
     >
       动态加载

diff --git a/docs/guide/Q&A/close-by-ref.mdx b/docs/guide/Q&A/close-by-ref.mdx
@@ -7,11 +7,9 @@ import React, {
   forwardRef,
   useImperativeHandle,
 } from 'react';
-import { Button, Modal, Space } from '@arco-design/web-react';
+import { Button, Modal, Space } from '@douyinfe/semi-ui';
 import { OpenableProps, openify } from 'openify';
 
-import '@arco-design/web-react/dist/css/arco.css';
-
 type MyModalProps = OpenableProps<void> & {
   title: string;
 };

diff --git a/docs/guide/Q&A/context.mdx b/docs/guide/Q&A/context.mdx
@@ -2,11 +2,9 @@
 
 ```tsx
 import React, { createContext, useContext } from 'react';
-import { Button, Modal, Space } from '@arco-design/web-react';
+import { Button, Modal, Space } from '@douyinfe/semi-ui';
 import { OpenableProps, openify } from 'openify';
 
-import '@arco-design/web-react/dist/css/arco.css';
-
 const myContext = createContext('默认内容');
 
 type MyModalProps = OpenableProps<void> & {

diff --git a/docs/guide/feature/no-dependency.mdx b/docs/guide/feature/no-dependency.mdx
@@ -2,64 +2,6 @@
 
 组件库无关则可以轻易的将该工具库应用到你的项目中。
 
-## Arco Design
-
-```tsx
-import React from 'react';
-import {
-  Button,
-  Drawer,
-  DrawerProps,
-  Modal,
-  ModalProps,
-  Space,
-} from '@arco-design/web-react';
-import { OpenableProps, openify } from 'openify';
-
-import '@arco-design/web-react/dist/css/arco.css';
-
-type OpenModalProps = OpenableProps<void> &
-  Omit<ModalProps, 'visible' | 'onOk' | 'onCancel' | 'afterClose'>;
-
-const openModal = openify<void, OpenModalProps, ModalProps>(Modal, {
-  transformProps({ visible, onClose, afterClose, ...restProps }) {
-    return {
-      ...restProps,
-      visible,
-      onOk: onClose,
-      onCancel: onClose,
-      afterClose,
-    };
-  },
-});
-
-type OpenDrawerProps = OpenableProps<void> &
-  Omit<DrawerProps, 'visible' | 'onOk' | 'onCancel' | 'afterClose'>;
-
-const openDrawer = openify<void, OpenDrawerProps, DrawerProps>(Drawer, {
-  transformProps({ visible, onClose, afterClose, ...restProps }) {
-    return {
-      ...restProps,
-      visible,
-      onOk: onClose,
-      onCancel: onClose,
-      afterClose,
-    };
-  },
-});
-
-export default () => (
-  <Space>
-    <Button onClick={() => openModal({ title: '自定义弹窗' })}>
-      自定义弹窗
-    </Button>
-    <Button onClick={() => openDrawer({ title: '自定义抽屉' })}>
-      自定义抽屉
-    </Button>
-  </Space>
-);
-```
-
 ## Semi Design
 
 ```tsx
@@ -120,6 +62,64 @@ export default () => (
 );
 ```
 
+## Arco Design
+
+```tsx
+import React from 'react';
+import {
+  Button,
+  Drawer,
+  DrawerProps,
+  Modal,
+  ModalProps,
+  Space,
+} from '@arco-design/web-react';
+import { OpenableProps, openify } from 'openify';
+
+import '@arco-design/web-react/dist/css/arco.css';
+
+type OpenModalProps = OpenableProps<void> &
+  Omit<ModalProps, 'visible' | 'onOk' | 'onCancel' | 'afterClose'>;
+
+const openModal = openify<void, OpenModalProps, ModalProps>(Modal, {
+  transformProps({ visible, onClose, afterClose, ...restProps }) {
+    return {
+      ...restProps,
+      visible,
+      onOk: onClose,
+      onCancel: onClose,
+      afterClose,
+    };
+  },
+});
+
+type OpenDrawerProps = OpenableProps<void> &
+  Omit<DrawerProps, 'visible' | 'onOk' | 'onCancel' | 'afterClose'>;
+
+const openDrawer = openify<void, OpenDrawerProps, DrawerProps>(Drawer, {
+  transformProps({ visible, onClose, afterClose, ...restProps }) {
+    return {
+      ...restProps,
+      visible,
+      onOk: onClose,
+      onCancel: onClose,
+      afterClose,
+    };
+  },
+});
+
+export default () => (
+  <Space>
+    <Button onClick={() => openModal({ title: '自定义弹窗' })}>
+      自定义弹窗
+    </Button>
+    <Button onClick={() => openDrawer({ title: '自定义抽屉' })}>
+      自定义抽屉
+    </Button>
+  </Space>
+);
+```
+
 ## Ant Design
 
 ```tsx

diff --git a/docs/guide/feature/promisify.mdx b/docs/guide/feature/promisify.mdx
@@ -4,11 +4,9 @@ Promise 化意味着配合 async/await 使用，可以大大简化代码组织
 
 ```tsx
 import React, { useRef, useState } from 'react';
-import { Button, Input, Modal, Space } from '@arco-design/web-react';
+import { Button, Input, Modal, Space } from '@douyinfe/semi-ui';
 import { OpenableProps, openify } from 'openify';
 
-import '@arco-design/web-react/dist/css/arco.css';
-
 type Value =
   | {
       isOk: true;

diff --git a/docs/guide/feature/static-call.mdx b/docs/guide/feature/static-call.mdx
@@ -4,11 +4,9 @@
 
 ```tsx
 import React from 'react';
-import { Button, Modal, Space } from '@arco-design/web-react';
+import { Button, Modal, Space } from '@douyinfe/semi-ui';
 import { OpenableProps, openify } from 'openify';
 
-import '@arco-design/web-react/dist/css/arco.css';
-
 type MyModalProps = OpenableProps<void> & {
   title: string;
 };
@@ -34,8 +32,8 @@ export default () => (
     <Button onClick={() => openMyModal({ title: '标题' })}>打开弹窗</Button>
     <Button
       onClick={async () => {
-        const { openMyDrawer } = await import('demos/mydrawer');
-        openMyDrawer({ title: '标题' });
+        const { openMyAsyncModal } = await import('demos/mydrawer');
+        openMyAsyncModal({ title: '标题' });
       }}
     >
       动态加载