message-verify 0.0.43-beta.0 → 0.0.44-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/compoments/input.d.ts +10 -1
  2. package/dist/compoments/input.js +40 -3
  3. package/dist/verify-modal.js +6 -2
  4. package/package.json +1 -1
  5. package/src/compoments/input.tsx +70 -7
  6. package/src/verify-modal.tsx +13 -10
package/dist/compoments/input.d.ts CHANGED
@@ -6,5 +6,14 @@ interface CustomInputProps {
6
6
  type?: string;
7
7
  style?: React.CSSProperties;
8
8
  }
9
- declare const Input: React.FC<CustomInputProps>;
9
+ interface OTPInputProps {
10
+ length: number;
11
+ value?: string;
12
+ onChange?: (val: string) => void;
13
+ style?: React.CSSProperties;
14
+ }
15
+ declare const OTPInput: React.FC<OTPInputProps>;
16
+ declare const Input: React.FC<CustomInputProps> & {
17
+ OTP: typeof OTPInput;
18
+ };
10
19
  export default Input;
package/dist/compoments/input.js CHANGED
@@ -1,6 +1,42 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- const Input = ({ value, onChange, placeholder, type = 'text', style }) => {
3
- return (_jsx("input", { type: type, value: value, placeholder: placeholder, onChange: e => onChange?.(e.target.value), style: {
2
+ import { useRef } from 'react';
3
+ const OTPInput = ({ length, value = '', onChange, style }) => {
4
+ const inputsRef = useRef([]);
5
+ // 拆分 value
6
+ const chars = [];
7
+ for (let i = 0; i < length; i++) {
8
+ chars.push(value[i] || '');
9
+ }
10
+ const handleChange = (idx, char) => {
11
+ if (!/^[0-9a-zA-Z]?$/.test(char))
12
+ return; // 只允许单字符
13
+ const arr = chars.slice();
14
+ arr[idx] = char;
15
+ const newVal = arr.join('');
16
+ onChange?.(newVal);
17
+ // 自动聚焦下一个
18
+ if (char && idx < length - 1) {
19
+ inputsRef.current[idx + 1]?.focus();
20
+ }
21
+ };
22
+ const handleKeyDown = (idx, e) => {
23
+ if (e.key === 'Backspace' && !chars[idx] && idx > 0) {
24
+ // 删除时自动聚焦上一个
25
+ inputsRef.current[idx - 1]?.focus();
26
+ }
27
+ };
28
+ return (_jsx("div", { style: { display: 'flex', gap: 8, ...style }, children: Array.from({ length }).map((_, idx) => (_jsx("input", { ref: el => { inputsRef.current[idx] = el; }, type: "text", maxLength: 1, value: chars[idx], onChange: e => handleChange(idx, e.target.value), onKeyDown: e => handleKeyDown(idx, e), style: {
29
+ width: 32,
30
+ height: 36,
31
+ textAlign: 'center',
32
+ fontSize: 18,
33
+ border: '1px solid #d9d9d9',
34
+ borderRadius: 8,
35
+ outline: 'none',
36
+ } }, idx))) }));
37
+ };
38
+ const Input = (props) => {
39
+ return (_jsx("input", { type: props.type || 'text', value: props.value, placeholder: props.placeholder, onChange: e => props.onChange?.(e.target.value), style: {
4
40
  padding: '6px 12px',
5
41
  border: '1px solid #d9d9d9',
6
42
  borderRadius: 4,
@@ -9,7 +45,8 @@ const Input = ({ value, onChange, placeholder, type = 'text', style }) => {
9
45
  width: '100%',
10
46
  boxSizing: 'border-box',
11
47
  height: 36,
12
- ...style,
48
+ ...props.style,
13
49
  } }));
14
50
  };
51
+ Input.OTP = OTPInput;
15
52
  export default Input;
package/dist/verify-modal.js CHANGED
@@ -5,12 +5,13 @@ import Api from './resource.js';
5
5
  const ModalDom = ({ props }) => {
6
6
  const [visible, setVisible] = useState(true);
7
7
  const [countdown, setCountdown] = useState(3);
8
+ const [otp, setOtp] = useState('');
8
9
  const [captchaImage, setCaptchaImage] = useState('');
9
10
  const [captchCode, setCaptchCode] = useState('');
10
11
  const [captchaKey, setCaptchaKey] = useState('');
11
12
  const { data, config, http } = props || {};
12
13
  const dataObj = JSON.parse(data || '{}');
13
- const { mobile } = dataObj || {};
14
+ const { mobile, verifyCodeKey } = dataObj || {};
14
15
  const getKey = async () => {
15
16
  const res = await Api.getCaptchaKey();
16
17
  const { body: key } = res.data || {};
@@ -51,10 +52,13 @@ const ModalDom = ({ props }) => {
51
52
  props.onClose?.();
52
53
  }, 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) => {
53
54
  setCaptchCode(e);
54
- } }), 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) => {
55
+ } }), 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.OTP, { length: 6, value: otp, onChange: (val) => {
56
+ setOtp(val);
55
57
  if (val.length === 6) {
56
58
  http.defaults.headers.common['sms-code'] = val;
59
+ http.defaults.headers.common['sms-code-key'] = verifyCodeKey;
57
60
  http(config);
61
+ setVisible(false);
58
62
  }
59
63
  } }), _jsx(Button, { disabled: countdown > 0 || !captchCode, onClick: handleResend, children: countdown > 0 ? `${countdown}秒` : '重新发送' })] })] }));
60
64
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "message-verify",
3
- "version": "0.0.43-beta.0",
3
+ "version": "0.0.44-beta.0",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "dependencies": {
package/src/compoments/input.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { useRef } from 'react';
2
2
 
3
3
  interface CustomInputProps {
4
4
  value?: string;
@@ -8,13 +8,74 @@ interface CustomInputProps {
8
8
  style?: React.CSSProperties;
9
9
  }
10
10
 
11
- const Input: React.FC<CustomInputProps> = ({ value, onChange, placeholder, type = 'text', style }) => {
11
+ interface OTPInputProps {
12
+ length: number;
13
+ value?: string;
14
+ onChange?: (val: string) => void;
15
+ style?: React.CSSProperties;
16
+ }
17
+
18
+ const OTPInput: React.FC<OTPInputProps> = ({ length, value = '', onChange, style }) => {
19
+ const inputsRef = useRef<Array<HTMLInputElement | null>>([]);
20
+
21
+ // 拆分 value
22
+ const chars: string[] = [];
23
+ for (let i = 0; i < length; i++) {
24
+ chars.push(value[i] || '');
25
+ }
26
+
27
+ const handleChange = (idx: number, char: string) => {
28
+ if (!/^[0-9a-zA-Z]?$/.test(char)) return; // 只允许单字符
29
+ const arr = chars.slice();
30
+ arr[idx] = char;
31
+ const newVal = arr.join('');
32
+ onChange?.(newVal);
33
+ // 自动聚焦下一个
34
+ if (char && idx < length - 1) {
35
+ inputsRef.current[idx + 1]?.focus();
36
+ }
37
+ };
38
+
39
+ const handleKeyDown = (idx: number, e: React.KeyboardEvent<HTMLInputElement>) => {
40
+ if (e.key === 'Backspace' && !chars[idx] && idx > 0) {
41
+ // 删除时自动聚焦上一个
42
+ inputsRef.current[idx - 1]?.focus();
43
+ }
44
+ };
45
+
46
+ return (
47
+ <div style={{ display: 'flex', gap: 8, ...style }}>
48
+ {Array.from({ length }).map((_, idx) => (
49
+ <input
50
+ key={idx}
51
+ ref={el => { inputsRef.current[idx] = el; }}
52
+ type="text"
53
+ maxLength={1}
54
+ value={chars[idx]}
55
+ onChange={e => handleChange(idx, e.target.value)}
56
+ onKeyDown={e => handleKeyDown(idx, e)}
57
+ style={{
58
+ width: 32,
59
+ height: 36,
60
+ textAlign: 'center',
61
+ fontSize: 18,
62
+ border: '1px solid #d9d9d9',
63
+ borderRadius: 8,
64
+ outline: 'none',
65
+ }}
66
+ />
67
+ ))}
68
+ </div>
69
+ );
70
+ };
71
+
72
+ const Input: React.FC<CustomInputProps> & { OTP: typeof OTPInput } = (props) => {
12
73
  return (
13
74
  <input
14
- type={type}
15
- value={value}
16
- placeholder={placeholder}
17
- onChange={e => onChange?.(e.target.value)}
75
+ type={props.type || 'text'}
76
+ value={props.value}
77
+ placeholder={props.placeholder}
78
+ onChange={e => props.onChange?.(e.target.value)}
18
79
  style={{
19
80
  padding: '6px 12px',
20
81
  border: '1px solid #d9d9d9',
@@ -24,10 +85,12 @@ const Input: React.FC<CustomInputProps> = ({ value, onChange, placeholder, type
24
85
  width: '100%',
25
86
  boxSizing: 'border-box',
26
87
  height: 36,
27
- ...style,
88
+ ...props.style,
28
89
  }}
29
90
  />
30
91
  );
31
92
  };
32
93
 
94
+ Input.OTP = OTPInput;
95
+
33
96
  export default Input;
package/src/verify-modal.tsx CHANGED
@@ -20,12 +20,13 @@ type ModalConfig = {
20
20
  const ModalDom = ({ props }: { props: ModalConfig }) => {
21
21
  const [visible, setVisible] = useState(true);
22
22
  const [countdown, setCountdown] = useState(3);
23
+ const [otp, setOtp] = useState('');
23
24
  const [captchaImage, setCaptchaImage] = useState<string>('');
24
25
  const [captchCode, setCaptchCode] = useState<string>('');
25
26
  const [captchaKey, setCaptchaKey] = useState<string>('');
26
27
  const { data, config, http } = props || {};
27
28
  const dataObj = JSON.parse(data || '{}');
28
- const { mobile } = dataObj || {};
29
+ const { mobile, verifyCodeKey } = dataObj || {};
29
30
 
30
31
 
31
32
  const getKey = async () => {
@@ -87,15 +88,17 @@ const ModalDom = ({ props }: { props: ModalConfig }) => {
87
88
  </div>}
88
89
  {(countdown > 0 || captchCode) ? null : <div style={{ fontSize: 14, color: 'red' }}>请输入图形验证码后，重新发送验证码</div>}
89
90
  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
90
- <Input
91
- placeholder="请输入验证码"
92
- onChange={(val) => {
93
- if(val.length === 6) {
94
- http.defaults.headers.common['sms-code'] = val as string;
95
- http(config);
96
- }
97
- }}
98
- />
91
+ <Input.OTP length={6}
92
+ value={otp}
93
+ onChange={(val) => {
94
+ setOtp(val);
95
+ if(val.length === 6) {
96
+ http.defaults.headers.common['sms-code'] = val as string;
97
+ http.defaults.headers.common['sms-code-key'] = verifyCodeKey as string;
98
+ http(config);
99
+ setVisible(false);
100
+ }
101
+ }} />
99
102
  <Button
100
103
  disabled={countdown > 0 || !captchCode}
101
104
  onClick={handleResend}