message-verify 0.0.32-beta.0 → 0.0.34-beta.0

package/dist/index.d.ts

@@ -1,7 +1,9 @@
 export type ModalConfig = {
-    content: React.ReactNode;
-    title?: string;
-    width?: number;
+    data: {
+        mobile: string;
+        verifyCodeKey: string;
+        sendSuccess: boolean;
+    };
     onClose?: () => void;
 };
-export declare const showModal: (config: ModalConfig) => void;
+export declare const createMessageVerifyModal: (config: ModalConfig) => void;

package/dist/index.js

@@ -1,45 +1,27 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// import App from './app.js';
-// import { createRoot } from 'react-dom/client';
-// interface Props {
-//     data: {
-//         mobile: string;
-//         verifyCodeKey: string;
-//         sendSuccess: boolean;
-//     };
-//     refresh: () => void;
-//     isShow: boolean;
-// }
-// function createMessageVerify(props: Props) {
-//     // 创建一个挂载点
-//     const container = document.createElement('div');
-//     document.body.appendChild(container);
-//     // 渲染弹窗
-//     const root = createRoot(container);
-//     // 这里 isShow 直接传 true，弹窗立即显示
-//     root.render(<App {...props} isShow={true} />);
-//     // 可选：返回关闭方法
-//     return {
-//         destroy: () => {
-//             root.unmount();
-//             document.body.removeChild(container);
-//         }
-//     };
-// }
-// export { createMessageVerify };
-// export default createMessageVerify;
-// src/modal.tsx
-// src/modal.tsx
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import Modal from './compoments/modal.js';
 import ReactDOM from 'react-dom/client';
+import { useEffect, useState } from 'react';
 let modalRoot = null;
-const AntdModal = ({ config }) => (_jsx(Modal, { visible: true, onClose: () => { console.log('close'); }, children: config.content }));
-export const showModal = (config) => {
+const ModalDom = ({ config }) => {
+    const [visible, setVisible] = useState(true);
+    const { data } = config || {};
+    const { mobile } = data || {};
+    useEffect(() => {
+        console.log('mobile', mobile);
+    }, []);
+    return (_jsx(Modal, { visible: visible, onClose: () => {
+            setVisible(false);
+            config.onClose?.();
+        }, children: _jsxs("div", { children: ["\u5DF2\u53D1\u9001\u77ED\u4FE1\u81F3\u60A8\u7684\u624B\u673A\uFF1A", mobile] }) }));
+};
+// ... existing code ...
+export const createMessageVerifyModal = (config) => {
     const container = document.createElement('div');
     container.id = 'antd-modal-container';
     document.body.appendChild(container);
     modalRoot = ReactDOM.createRoot(container);
-    modalRoot.render(_jsx(AntdModal, { config: {
+    modalRoot.render(_jsx(ModalDom, { config: {
             ...config,
             onClose: () => {
                 config.onClose?.();

package/dist/main.js

@@ -1,4 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createRoot } from 'react-dom/client';
-import { showModal } from './index.js'; // 或 './index'
-createRoot(document.getElementById('root')).render(_jsx("button", { onClick: () => showModal({ content: 'React Content' }), children: "Show Modal" }));
+import { createMessageVerifyModal } from './index.js'; // 或 './index'
+const data = {
+    mobile: '185****7760',
+    verifyCodeKey: 'e381c5f9-c7f4-4bf1-a948-744334fb0203',
+    sendSuccess: true
+};
+createRoot(document.getElementById('root')).render(_jsx("button", { onClick: () => createMessageVerifyModal({ data }), children: "Show Modal" }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "message-verify",
-  "version": "0.0.32-beta.0",
+  "version": "0.0.34-beta.0",
   "type": "module",
   "main": "dist/index.js",
   "dependencies": {

package/src/index.tsx

@@ -1,68 +1,49 @@
-// import App from './app.js';
-// import { createRoot } from 'react-dom/client';
-
-// interface Props {
-//     data: {
-//         mobile: string;
-//         verifyCodeKey: string;
-//         sendSuccess: boolean;
-//     };
-//     refresh: () => void;
-//     isShow: boolean;
-// }
-
-// function createMessageVerify(props: Props) {
-//     // 创建一个挂载点
-//     const container = document.createElement('div');
-//     document.body.appendChild(container);
-
-//     // 渲染弹窗
-//     const root = createRoot(container);
-//     // 这里 isShow 直接传 true，弹窗立即显示
-//     root.render(<App {...props} isShow={true} />);
-
-//     // 可选：返回关闭方法
-//     return {
-//         destroy: () => {
-//             root.unmount();
-//             document.body.removeChild(container);
-//         }
-//     };
-// }
-
-// export { createMessageVerify };
-// export default createMessageVerify;
-// src/modal.tsx
-// src/modal.tsx
 import Modal from './compoments/modal.js'
 import ReactDOM from 'react-dom/client'
+import { useEffect, useState } from'react'
 
 export type ModalConfig = {
-  content: React.ReactNode
-  title?: string
-  width?: number
+    data: {
+        mobile: string;
+        verifyCodeKey: string;
+        sendSuccess: boolean;
+    };
   onClose?: () => void
 }
 
 let modalRoot: ReactDOM.Root | null = null
 
-const AntdModal = ({ config }: { config: ModalConfig }) => (
-  <Modal
-    visible={true}
-    onClose={() => {console.log('close')}}
-  >
-    {config.content}
-  </Modal>
-)
+const ModalDom = ({ config }: { config: ModalConfig }) => {
+    const [visible, setVisible] = useState(true);
+    const { data } = config || {};
+    const { mobile } = data || {};
+
+    useEffect(() => {
+        console.log('mobile', mobile);
+    }, [])
+  
+    return (
+      <Modal
+        visible={visible}
+        onClose={() => {
+          setVisible(false);
+          config.onClose?.();
+        }}
+      >
+        <div>已发送短信至您的手机：{mobile}</div>
+      </Modal>
+    );
+  };
+  // ... existing code ...
 
-export const showModal = (config: ModalConfig) => {
+export const createMessageVerifyModal = (config: ModalConfig) => {
   const container = document.createElement('div')
   container.id = 'antd-modal-container'
   document.body.appendChild(container)
 
   modalRoot = ReactDOM.createRoot(container)
   modalRoot.render(
-    <AntdModal
+    <ModalDom
       config={{
         ...config,
         onClose: () => {

package/src/main.tsx

@@ -1,7 +1,13 @@
 import { createRoot } from 'react-dom/client';
-import { showModal } from './index.js'; // 或 './index'
+import { createMessageVerifyModal } from './index.js'; // 或 './index'
+
+const data = {
+    mobile: '185****7760',
+    verifyCodeKey: 'e381c5f9-c7f4-4bf1-a948-744334fb0203',
+    sendSuccess: true
+}
 
 createRoot(document.getElementById('root')!).render(
-    <button onClick={() => showModal({ content: 'React Content' })}>
+    <button onClick={() => createMessageVerifyModal({ data })}>
       Show Modal
     </button>);