message-verify 0.0.25-beta.0 → 0.0.26-beta.0

package/dist/app.d.ts

@@ -6,6 +6,7 @@ interface Props {
         sendSuccess: boolean;
     };
     refresh: () => void;
+    isShow: boolean;
 }
 declare const App: React.FC<Props>;
 export default App;

package/dist/app.js

@@ -1,12 +1,13 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { Input, Button, Modal, message } from 'antd';
 import Api from './resource.js';
 import '@ant-design/v5-patch-for-react-19';
-const App = ({ data }) => {
+const App = ({ data, isShow }) => {
     const { mobile } = data || {};
     const [countdown, setCountdown] = useState(3);
-    const [visible, setVisible] = useState(false);
+    const [visible, setVisible] = useState(isShow || false);
     const [captchaImage, setCaptchaImage] = useState('');
     const [captchCode, setCaptchCode] = useState('');
     const [captchaKey, setCaptchaKey] = useState('');
@@ -45,9 +46,13 @@ const App = ({ data }) => {
         console.log('handleResend=>res', res);
         message.success('发送成功');
     };
-    console.log('captchCode', captchCode);
-    return (_jsxs(Modal, { open: visible, onClose: () => setVisible(false), width: 400, footer: _jsx(Button, { onClick: () => { }, children: "\u63D0\u4EA4" }), children: [_jsxs("div", { children: ["\u5DF2\u53D1\u9001\u77ED\u4FE1\u81F3\u60A8\u7684\u624B\u673A\uFF1A", mobile] }), countdown > 0 ? null : _jsxs("div", { style: { marginTop: 8, display: 'flex', alignItems: 'center', width: 300 }, children: [_jsx(Input, { onChange: (e) => {
+    const renderModal = (_jsxs(Modal, { open: visible, onClose: () => setVisible(false), width: 400, footer: _jsx(Button, { onClick: () => { }, children: "\u63D0\u4EA4" }), children: [_jsxs("div", { children: ["\u5DF2\u53D1\u9001\u77ED\u4FE1\u81F3\u60A8\u7684\u624B\u673A\uFF1A", mobile] }), countdown > 0 ? null : _jsxs("div", { style: { marginTop: 8, display: 'flex', alignItems: 'center', width: 300 }, children: [_jsx(Input, { onChange: (e) => {
                             setCaptchCode(e.target.value);
                         } }), captchaImage && _jsx("img", { src: captchaImage, alt: "\u9A8C\u8BC1\u7801", style: { width: 100, height: 30, marginLeft: 8 }, onClick: getKey })] }), countdown > 0 ? null : _jsx("div", { children: "\u8BF7\u8F93\u5165\u56FE\u5F62\u9A8C\u8BC1\u7801\u540E\uFF0C\u91CD\u65B0\u53D1\u9001\u9A8C\u8BC1\u7801" }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }, children: [_jsx(Input.OTP, { disabled: !captchCode, length: 6, onChange: (val) => { console.log('change', val); } }), _jsx(Button, { disabled: countdown > 0 || !captchCode, onClick: handleResend, children: countdown > 0 ? `${countdown}秒` : '重新发送' })] })] }));
+    console.log('captchCode', captchCode);
+    if (isShow) {
+        return createPortal(renderModal, document.body);
+    }
+    return null;
 };
 export default App;

package/dist/index.d.ts

@@ -5,6 +5,9 @@ interface Props {
         sendSuccess: boolean;
     };
     refresh: () => void;
+    isShow: boolean;
 }
-export declare function createMessageVerify(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+declare function createMessageVerify(props: Props): {
+    destroy: () => void;
+};
+export { createMessageVerify };

package/dist/index.js

@@ -1,5 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import App from './app';
-export function createMessageVerify(props) {
-    return _jsx(App, { ...props });
+import { createRoot } from 'react-dom/client';
+function createMessageVerify(props) {
+    // 创建一个挂载点
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    // 渲染弹窗
+    const root = createRoot(container);
+    // 这里 isShow 直接传 true，弹窗立即显示
+    root.render(_jsx(App, { ...props, isShow: true }));
+    // 可选：返回关闭方法
+    return {
+        destroy: () => {
+            root.unmount();
+            document.body.removeChild(container);
+        }
+    };
 }
+export { createMessageVerify };

package/dist/main.js

@@ -5,4 +5,4 @@ createRoot(document.getElementById('root')).render(_jsx(App, { data: {
         mobile: '185****7760',
         verifyCodeKey: 'e381c5f9-c7f4-4bf1-a948-744334fb0203',
         sendSuccess: true
-    }, refresh: () => { console.log('刷新'); } }));
+    }, refresh: () => { console.log('刷新'); }, isShow: true }));

package/package.json

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

package/src/app.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom';
 import { Input, Button, Modal, message } from 'antd';
 import Api from './resource.js'
 import '@ant-design/v5-patch-for-react-19';
@@ -10,11 +11,12 @@ interface Props {
         sendSuccess: boolean;
     };
     refresh: () => void;
+    isShow: boolean;
 }
-const App: React.FC<Props> = ({ data }) => {
+const App: React.FC<Props> = ({ data, isShow }) => {
     const { mobile } = data || {};
     const [countdown, setCountdown] = useState(3);
-    const [visible, setVisible] = useState(false);
+    const [visible, setVisible] = useState(isShow || false);
     const [captchaImage, setCaptchaImage] = useState<string>('');
     const [captchCode, setCaptchCode] = useState<string>('');
     const [captchaKey, setCaptchaKey] = useState<string>('');
@@ -57,9 +59,7 @@ const App: React.FC<Props> = ({ data }) => {
         message.success('发送成功');
     }
 
-    console.log('captchCode', captchCode);
-    return (
-        <Modal
+    const renderModal = (<Modal
             open={visible}
             onClose={() => setVisible(false)} 
             width={400}
@@ -93,6 +93,12 @@ const App: React.FC<Props> = ({ data }) => {
             </div>
         </Modal>
     )
+
+    console.log('captchCode', captchCode);
+    if(isShow) {
+        return createPortal(renderModal, document.body);
+    }
+    return null;
 }
 
 export default App;

package/src/index.tsx

@@ -1,4 +1,5 @@
 import App from './app';
+import { createRoot } from 'react-dom/client';
 
 interface Props {
     data: {
@@ -7,8 +8,26 @@ interface Props {
         sendSuccess: boolean;
     };
     refresh: () => void;
+    isShow: boolean;
 }
 
-export function createMessageVerify(props: Props) {
-    return <App {...props} />;
-}
+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 };

package/src/main.tsx

@@ -9,4 +9,5 @@ createRoot(document.getElementById('root')!).render(
             sendSuccess: true
         }}
         refresh={() => {console.log('刷新')}}
+        isShow={true}
     />);