发布0.1.2 & 更新文档

.npmignore

@@ -23,13 +23,14 @@ tests/
 !.vscode/extensions.json
 .idea/
 
-src/
-
 .changeset
+.github
 .husky
 .vscode
+demos
 doc_build
 docs
+src
 modern.config.*
 jest.config.js
 .eslintcache

README.md

@@ -1,46 +1,46 @@
-# Modern.js Package
+# Openify
 
-## Setup
+> 方便 React 弹窗类使用的工具
 
-Install the dependencies:
+## 快速上手
 
-```bash
-pnpm run install
-```
-
-## Get Started
-
-Run and debug the module:
+### 安装依赖
 
 ```bash
-pnpm run dev
+npm install openify
+# or
+yarn add openify
+# or
+pnpm add openify
 ```
 
-Run test cases:
-
-```bash
-pnpm run test
+### 使用`openify`开发组件
+
+```tsx
+export type MyModalProps = OpenableProps<xxx> & {
+  /** your props **/
+};
+
+const MyModal = openify(
+  ({ visible, onClose, afterClose, ... }: MyModalProps) => {
+    // your code here
+    return (
+      <Modal {/** your props **/}>
+        {/** your content here **/}
+      </Modal>
+    );
+  },
+);
+
+export default MyModal;
 ```
 
-Build the module for production:
+### 使用 open 方法
 
-```bash
-pnpm run build
-```
-
-Enable optional features:
-
-```bash
-pnpm run new
-```
-
-Other commands:
-
-```bash
-pnpm run lint         # Lint and fix source files
-pnpm run change       # Add a new changeset
-pnpm run bump         # Update version and changelog via changeset
-pnpm run release      # Release the package
+```tsx
+export default function MyApp() {
+  return <Button onClick={() => MyModal.open()}>打开弹窗</Button>;
+}
 ```
 
-For more information, see the [Modern.js Module documentation](https://modernjs.dev/module-tools/en).
+## [在线文档](https://asurance.github.io/openify/)

demos/close-by-ref.tsx

@@ -0,0 +1,55 @@
+import React, { createRef, forwardRef, useImperativeHandle } from 'react';
+import { Button, Modal, Space } from '@arco-design/web-react';
+import { OpenableProps, openify } from 'openify';
+
+import '@arco-design/web-react/dist/css/arco.css';
+
+type MyModalProps = OpenableProps<void> & {
+  title: string;
+};
+
+type MyModalRef = {
+  close: () => void;
+};
+
+const MyModal = openify(
+  forwardRef<MyModalRef, MyModalProps>(
+    ({ visible, onClose, afterClose, title }: MyModalProps, ref) => {
+      useImperativeHandle(
+        ref,
+        () => ({
+          close() {
+            onClose();
+          },
+        }),
+        [],
+      );
+      return (
+        <Modal
+          title={title}
+          visible={visible}
+          afterClose={afterClose}
+          closable={false}
+        >
+          静态打开
+        </Modal>
+      );
+    },
+  ),
+);
+
+export default () => (
+  <Space>
+    <Button
+      onClick={() => {
+        const ref = createRef<MyModalRef>();
+        MyModal.open({ title: '标题', ref });
+        setTimeout(() => {
+          ref.current?.close();
+        }, 1000);
+      }}
+    >
+      打开弹窗
+    </Button>
+  </Space>
+);

demos/context.tsx

@@ -0,0 +1,48 @@
+import React, { createContext, useContext } from 'react';
+import { Button, Modal, Space } from '@arco-design/web-react';
+import { OpenableProps, openify } from 'openify';
+
+import '@arco-design/web-react/dist/css/arco.css';
+
+const myContext = createContext('默认内容');
+
+type MyModalProps = OpenableProps<void> & {
+  title: string;
+};
+
+const MyModal = openify(
+  ({ visible, onClose, afterClose, title }: MyModalProps) => {
+    const context = useContext(myContext);
+    return (
+      <Modal
+        title={title}
+        visible={visible}
+        onOk={onClose}
+        onCancel={onClose}
+        afterClose={afterClose}
+      >
+        {context}
+      </Modal>
+    );
+  },
+);
+
+const MyModalWithContext = openify(MyModal, {
+  bindToComponent: false,
+  renderHook: node => {
+    return (
+      <myContext.Provider value="context提供内容">{node}</myContext.Provider>
+    );
+  },
+});
+
+export default () => (
+  <myContext.Provider value="context提供内容">
+    <Space>
+      <Button onClick={() => MyModal.open({ title: '弹窗' })}>打开弹窗</Button>
+      <Button onClick={() => MyModalWithContext.open({ title: '弹窗' })}>
+        打开弹窗
+      </Button>
+    </Space>
+  </myContext.Provider>
+);

demos/mydrawer.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Drawer } from '@arco-design/web-react';
+import { OpenableProps, openify } from 'openify';
+
+import '@arco-design/web-react/dist/css/arco.css';
+
+type MyDrawerProps = OpenableProps<void> & {
+  title: string;
+};
+
+const MyDrawer = openify(
+  ({ visible, onClose, afterClose, title }: MyDrawerProps) => {
+    return (
+      <Drawer
+        title={title}
+        visible={visible}
+        onOk={onClose}
+        onCancel={onClose}
+        afterClose={afterClose}
+      >
+        抽屉内容
+      </Drawer>
+    );
+  },
+);
+
+export default MyDrawer;

demos/promisify.tsx

@@ -4,7 +4,7 @@ import { OpenableProps, openify } from 'openify';
 
 import '@arco-design/web-react/dist/css/arco.css';
 
-export type MyModalProps = OpenableProps<
+type MyModalProps = OpenableProps<
   | {
       isOk: true;
       id: string;

demos/static-call.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Button, Modal } from '@arco-design/web-react';
+import { Button, Modal, Space } from '@arco-design/web-react';
 import { OpenableProps, openify } from 'openify';
 
 import '@arco-design/web-react/dist/css/arco.css';
 
-export type MyModalProps = OpenableProps<void> & {
+type MyModalProps = OpenableProps<void> & {
   title: string;
 };
 
@@ -24,10 +24,18 @@ const MyModal = openify(
   },
 );
 
-function openMyModal(title: '标题') {
-  MyModal.open({ title });
+async function openMyModal(title: string) {
+  return MyModal.open({ title });
+}
+
+async function openMyDrawer(title: '标题') {
+  const MyDrawer = await import('./mydrawer');
+  return MyDrawer.default.open({ title });
 }
 
 export default () => (
-  <Button onClick={() => openMyModal('标题')}>打开弹窗</Button>
+  <Space>
+    <Button onClick={() => openMyModal('标题')}>打开弹窗</Button>
+    <Button onClick={() => openMyDrawer('标题')}>动态加载</Button>
+  </Space>
 );

docs/guide/Q&A/_meta.json

@@ -0,0 +1 @@
+["close-by-ref", "context"]

docs/guide/Q&A/close-by-ref.mdx

@@ -0,0 +1,59 @@
+# 如果由外部主动关闭
+
+```tsx
+import React, { createRef, forwardRef, useImperativeHandle } from 'react';
+import { Button, Modal, Space } from '@arco-design/web-react';
+import { OpenableProps, openify } from 'openify';
+
+import '@arco-design/web-react/dist/css/arco.css';
+
+type MyModalProps = OpenableProps<void> & {
+  title: string;
+};
+
+type MyModalRef = {
+  close: () => void;
+};
+
+const MyModal = openify(
+  forwardRef<MyModalRef, MyModalProps>(
+    ({ visible, onClose, afterClose, title }: MyModalProps, ref) => {
+      useImperativeHandle(
+        ref,
+        () => ({
+          close() {
+            onClose();
+          },
+        }),
+        [],
+      );
+      return (
+        <Modal
+          title={title}
+          visible={visible}
+          afterClose={afterClose}
+          closable={false}
+        >
+          静态打开
+        </Modal>
+      );
+    },
+  ),
+);
+
+export default () => (
+  <Space>
+    <Button
+      onClick={() => {
+        const ref = createRef<MyModalRef>();
+        MyModal.open({ title: '标题', ref });
+        setTimeout(() => {
+          ref.current?.close();
+        }, 1000);
+      }}
+    >
+      打开弹窗
+    </Button>
+  </Space>
+);
+```