message-verify 0.0.41-beta.0 → 0.0.42-beta.0

package/dist/index.d.ts

@@ -1,9 +1,7 @@
 export type ModalConfig = {
-    data: {
-        mobile: string;
-        verifyCodeKey: string;
-        sendSuccess: boolean;
-    };
+    data: string;
     onClose?: () => void;
+    config: object;
+    http: (params: object) => Promise<unknown>;
 };
-export declare const createMessageVerifyModal: (config: ModalConfig) => void;
+export declare const createMessageVerifyModal: (modalProps: ModalConfig) => void;

package/dist/index.js

@@ -2,15 +2,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import ReactDOM from 'react-dom/client';
 import VerifyModal from './verify-modal.js';
 let modalRoot = null;
-export const createMessageVerifyModal = (config) => {
+export const createMessageVerifyModal = (modalProps) => {
     const container = document.createElement('div');
     container.id = 'antd-modal-container';
     document.body.appendChild(container);
     modalRoot = ReactDOM.createRoot(container);
-    modalRoot.render(_jsx(VerifyModal, { config: {
-            ...config,
+    modalRoot.render(_jsx(VerifyModal, { props: {
+            ...modalProps,
             onClose: () => {
-                config.onClose?.();
+                modalProps.onClose?.();
                 destroyModal();
             }
         } }));

package/dist/main.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createRoot } from 'react-dom/client';
 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" }));
+const data = "{\"mobile\":\"188****4035\",\"verifyCodeKey\":\"3f025b33-988e-47c0-950d-6beb776d043f\",\"needValid\":true,\"step\":2,\"message\":\"需要填写验证码\"}";
+createRoot(document.getElementById('root')).render(_jsx("button", { onClick: () => createMessageVerifyModal({
+        data,
+        config: {},
+        http: () => Promise.resolve({}),
+    }), children: "Show Modal" }));

package/dist/verify-modal.d.ts

@@ -1,12 +1,10 @@
 type ModalConfig = {
-    data: {
-        mobile: string;
-        verifyCodeKey: string;
-        sendSuccess: boolean;
-    };
+    data: string;
     onClose?: () => void;
+    config: object;
+    http: (params: object) => Promise<unknown>;
 };
-declare const ModalDom: ({ config }: {
-    config: ModalConfig;
+declare const ModalDom: ({ props }: {
+    props: ModalConfig;
 }) => import("react/jsx-runtime.js").JSX.Element;
 export default ModalDom;

package/dist/verify-modal.js

@@ -2,14 +2,15 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Modal, Input, Button, message } from './compoments/index.js';
 import Api from './resource.js';
-const ModalDom = ({ config }) => {
+const ModalDom = ({ props }) => {
     const [visible, setVisible] = useState(true);
     const [countdown, setCountdown] = useState(3);
     const [captchaImage, setCaptchaImage] = useState('');
     const [captchCode, setCaptchCode] = useState('');
     const [captchaKey, setCaptchaKey] = useState('');
-    const { data } = config || {};
-    const { mobile } = data || {};
+    const { data, config, http } = props || {};
+    const dataObj = JSON.parse(data || '{}');
+    const { mobile } = dataObj || {};
     const getKey = async () => {
         const res = await Api.getCaptchaKey();
         const { body: key } = res.data || {};
@@ -47,9 +48,14 @@ const ModalDom = ({ config }) => {
     };
     return (_jsxs(Modal, { visible: visible, onClose: () => {
             setVisible(false);
-            config.onClose?.();
+            props.onClose?.();
         }, children: [_jsxs("div", { style: { fontSize: 14, color: '#666' }, children: ["\u5DF2\u53D1\u9001\u77ED\u4FE1\u81F3\u60A8\u7684\u624B\u673A\uFF1A", mobile] }), countdown > 0 ? null : _jsxs("div", { style: { marginBlock: 8, display: 'flex', alignItems: 'center', width: 300 }, children: [_jsx(Input, { placeholder: "\u8BF7\u8F93\u5165\u56FE\u5F62\u9A8C\u8BC1\u7801", onChange: (e) => {
                             setCaptchCode(e);
-                        } }), captchaImage && _jsx("img", { src: captchaImage, alt: "\u9A8C\u8BC1\u7801", style: { width: 100, height: 30, marginLeft: 8 }, onClick: getKey })] }), (countdown > 0 || captchCode) ? null : _jsx("div", { style: { fontSize: 14, color: 'red' }, 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, { placeholder: "\u8BF7\u8F93\u5165\u9A8C\u8BC1\u7801", onChange: (val) => { console.log('change', val); } }), _jsx(Button, { disabled: countdown > 0 || !captchCode, onClick: handleResend, children: countdown > 0 ? `${countdown}秒` : '重新发送' })] })] }));
+                        } }), captchaImage && _jsx("img", { src: captchaImage, alt: "\u9A8C\u8BC1\u7801", style: { width: 100, height: 30, marginLeft: 8 }, onClick: getKey })] }), (countdown > 0 || captchCode) ? null : _jsx("div", { style: { fontSize: 14, color: 'red' }, 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, { placeholder: "\u8BF7\u8F93\u5165\u9A8C\u8BC1\u7801", onChange: (val) => {
+                            if (val.length === 6) {
+                                console.log('change', val.length);
+                                http(config);
+                            }
+                        } }), _jsx(Button, { disabled: countdown > 0 || !captchCode, onClick: handleResend, children: countdown > 0 ? `${countdown}秒` : '重新发送' })] })] }));
 };
 export default ModalDom;

package/package.json

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

package/src/index.tsx

@@ -2,17 +2,15 @@ import ReactDOM from 'react-dom/client'
 import VerifyModal from './verify-modal.js'
 
 export type ModalConfig = {
-    data: {
-        mobile: string;
-        verifyCodeKey: string;
-        sendSuccess: boolean;
-    };
-  onClose?: () => void
+    data: string;
+    onClose?: () => void
+    config: object;
+    http: (params: object) => Promise<unknown>;
 }
 
 let modalRoot: ReactDOM.Root | null = null
 
-export const createMessageVerifyModal = (config: ModalConfig) => {
+export const createMessageVerifyModal = (modalProps: ModalConfig) => {
   const container = document.createElement('div')
   container.id = 'antd-modal-container'
   document.body.appendChild(container)
@@ -20,10 +18,10 @@ export const createMessageVerifyModal = (config: ModalConfig) => {
   modalRoot = ReactDOM.createRoot(container)
   modalRoot.render(
     <VerifyModal
-      config={{
-        ...config,
+      props={{
+        ...modalProps,
         onClose: () => {
-          config.onClose?.()
+          modalProps.onClose?.()
           destroyModal()
         }
       }}

package/src/main.tsx

@@ -1,13 +1,13 @@
 import { createRoot } from 'react-dom/client';
 import { createMessageVerifyModal } from './index.js'; // 或 './index'
 
-const data = {
-    mobile: '185****7760',
-    verifyCodeKey: 'e381c5f9-c7f4-4bf1-a948-744334fb0203',
-    sendSuccess: true
-}
+const data = "{\"mobile\":\"188****4035\",\"verifyCodeKey\":\"3f025b33-988e-47c0-950d-6beb776d043f\",\"needValid\":true,\"step\":2,\"message\":\"需要填写验证码\"}";
 
 createRoot(document.getElementById('root')!).render(
-    <button onClick={() => createMessageVerifyModal({ data })}>
+    <button onClick={() => createMessageVerifyModal({ 
+        data,
+        config: {},
+        http: () => Promise.resolve({}),
+    })}>
       Show Modal
     </button>);

package/src/verify-modal.tsx

@@ -3,21 +3,20 @@ import { Modal, Input, Button, message } from './compoments/index.js'
 import Api from './resource.js'
 
 type ModalConfig = {
-    data: {
-        mobile: string;
-        verifyCodeKey: string;
-        sendSuccess: boolean;
-    };
-  onClose?: () => void
+    data: string;
+    onClose?: () => void;
+    config: object;
+    http: (params: object) => Promise<unknown>;
 }
-const ModalDom = ({ config }: { config: ModalConfig }) => {
+const ModalDom = ({ props }: { props: ModalConfig }) => {
     const [visible, setVisible] = useState(true);
     const [countdown, setCountdown] = useState(3);
     const [captchaImage, setCaptchaImage] = useState<string>('');
     const [captchCode, setCaptchCode] = useState<string>('');
     const [captchaKey, setCaptchaKey] = useState<string>('');
-    const { data } = config || {};
-    const { mobile } = data || {};
+    const { data, config, http } = props || {};
+    const dataObj = JSON.parse(data || '{}');
+    const { mobile } = dataObj || {};
 
 
     const getKey = async () => {
@@ -63,7 +62,7 @@ const ModalDom = ({ config }: { config: ModalConfig }) => {
         visible={visible}
         onClose={() => {
           setVisible(false);
-          config.onClose?.();
+          props.onClose?.();
         }}
       >
         <div style={{ fontSize: 14, color: '#666' }}>已发送短信至您的手机：{mobile}</div>
@@ -81,7 +80,12 @@ const ModalDom = ({ config }: { config: ModalConfig }) => {
         <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
             <Input
                 placeholder="请输入验证码"
-                onChange={(val) => {console.log('change', val)}}
+                onChange={(val) => {
+                    if(val.length === 6) {
+                        console.log('change', val.length)
+                        http(config);
+                    }
+                }}
             />
             <Button
                 disabled={countdown > 0 || !captchCode}