@hanwenbo/x-taro-ui 0.0.1 → 0.0.3
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.
- package/es/adapters/miniapp/overlayHost.js +14 -8
- package/es/auth/components.d.ts +17 -15
- package/es/auth/components.js +253 -133
- package/es/auth/entries/locales.d.ts +2 -0
- package/es/auth/entries/locales.js +1 -0
- package/es/auth/index.d.ts +1 -0
- package/es/auth/index.js +2 -1
- package/es/auth/internal.d.ts +17 -11
- package/es/auth/internal.js +107 -42
- package/es/auth/phoneNumberInput.d.ts +4 -2
- package/es/auth/phoneNumberInput.js +27 -8
- package/es/auth/provider.d.ts +2 -2
- package/es/auth/styles.css +161 -99
- package/es/auth/theme.js +20 -4
- package/es/components/_shared/render.d.ts +1 -1
- package/es/components/button/button.js +23 -3
- package/es/components/button/types.d.ts +6 -0
- package/es/components/capsuleTabs/capsuleTabs.js +4 -0
- package/es/components/icon/lucide.generated.d.ts +10 -0
- package/es/components/icon/lucide.generated.js +10 -0
- package/es/components/inputItem/inputItem.js +5 -2
- package/es/components/list/list.d.ts +1 -1
- package/es/components/pagination/pagination.js +18 -5
- package/es/components/searchBar/searchBar.js +4 -0
- package/es/components/sectionList/sectionList.d.ts +1 -2
- package/es/components/segmented/segmented.js +10 -2
- package/es/components/touchableOpacity/touchableOpacity.js +1 -0
- package/es/taro-components.d.ts +6 -0
- package/lib/adapters/miniapp/overlayHost.js +13 -6
- package/lib/auth/components.d.ts +17 -15
- package/lib/auth/components.js +257 -125
- package/lib/auth/entries/locales.d.ts +2 -0
- package/lib/auth/entries/locales.js +33 -0
- package/lib/auth/index.d.ts +1 -0
- package/lib/auth/index.js +13 -0
- package/lib/auth/internal.d.ts +17 -11
- package/lib/auth/internal.js +76 -31
- package/lib/auth/phoneNumberInput.d.ts +4 -2
- package/lib/auth/phoneNumberInput.js +65 -45
- package/lib/auth/provider.d.ts +2 -2
- package/lib/auth/styles.css +161 -99
- package/lib/auth/theme.js +7 -4
- package/lib/components/_shared/render.d.ts +1 -1
- package/lib/components/button/button.js +7 -0
- package/lib/components/button/types.d.ts +6 -0
- package/lib/components/capsuleTabs/capsuleTabs.js +1 -0
- package/lib/components/icon/lucide.generated.d.ts +10 -0
- package/lib/components/icon/lucide.generated.js +24 -0
- package/lib/components/inputItem/inputItem.js +3 -0
- package/lib/components/list/list.d.ts +1 -1
- package/lib/components/pagination/pagination.js +19 -5
- package/lib/components/searchBar/searchBar.js +4 -0
- package/lib/components/sectionList/sectionList.d.ts +1 -2
- package/lib/components/segmented/segmented.js +6 -1
- package/lib/components/touchableOpacity/touchableOpacity.js +1 -0
- package/lib/taro-components.d.ts +6 -0
- package/package.json +4 -4
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { authLocales, authZhCN, authEnUS } from '@hanwenbo/x-auth-core/locales';
|
package/es/auth/index.d.ts
CHANGED
package/es/auth/index.js
CHANGED
package/es/auth/internal.d.ts
CHANGED
|
@@ -1,34 +1,38 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { type CSSProperties, type ReactNode } from 'react';
|
|
2
2
|
import type { ContactIdentifierType, IdentifierType, ResolvedAuthConfig } from '@hanwenbo/x-auth-core/types';
|
|
3
3
|
export declare type AuthSurface = 'card' | 'plain';
|
|
4
|
-
export declare
|
|
4
|
+
export declare type AuthHeaderAlign = 'left' | 'center';
|
|
5
|
+
export declare function AuthPanel({ children, className, description, footer, headerAlign, logo, style, surface, testID, title }: {
|
|
5
6
|
children: ReactNode;
|
|
6
7
|
className?: string;
|
|
7
8
|
description?: ReactNode;
|
|
8
9
|
footer?: ReactNode;
|
|
10
|
+
headerAlign?: AuthHeaderAlign;
|
|
9
11
|
logo?: ReactNode;
|
|
10
12
|
style?: CSSProperties;
|
|
11
13
|
surface?: AuthSurface;
|
|
12
14
|
testID?: string;
|
|
13
15
|
title?: ReactNode;
|
|
14
|
-
}):
|
|
16
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
15
17
|
export declare function AuthField({ children, error, hint, label }: {
|
|
16
18
|
children: ReactNode;
|
|
17
19
|
error?: string;
|
|
18
20
|
hint?: ReactNode;
|
|
19
21
|
label?: ReactNode;
|
|
20
|
-
}):
|
|
22
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
21
23
|
export declare function AuthError({ children }: {
|
|
22
24
|
children?: ReactNode;
|
|
23
|
-
}):
|
|
24
|
-
|
|
25
|
+
}): import("react/jsx-runtime").JSX.Element | null;
|
|
26
|
+
interface AuthSelectorProps<Value extends string> {
|
|
25
27
|
onChange: (value: Value) => void;
|
|
26
28
|
options: Array<{
|
|
27
29
|
label: ReactNode;
|
|
28
30
|
value: Value;
|
|
29
31
|
}>;
|
|
30
32
|
value?: Value;
|
|
31
|
-
}
|
|
33
|
+
}
|
|
34
|
+
export declare function AuthSelector<Value extends string>({ onChange, options, value }: AuthSelectorProps<Value>): import("react/jsx-runtime").JSX.Element | null;
|
|
35
|
+
export declare function CredentialSelector<Value extends string>({ onChange, options, value }: AuthSelectorProps<Value>): import("react/jsx-runtime").JSX.Element | null;
|
|
32
36
|
export declare function IdentifierInput({ config, error, onChange, showLabel, type, value }: {
|
|
33
37
|
config: ResolvedAuthConfig;
|
|
34
38
|
error?: string;
|
|
@@ -36,8 +40,9 @@ export declare function IdentifierInput({ config, error, onChange, showLabel, ty
|
|
|
36
40
|
showLabel?: boolean;
|
|
37
41
|
type: IdentifierType;
|
|
38
42
|
value: string;
|
|
39
|
-
}):
|
|
40
|
-
export declare function VerificationCodeInput({ codeLength, countdown, disabled, error, onChange, onSend, sending, showLabel, value }: {
|
|
43
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
44
|
+
export declare function VerificationCodeInput({ config, codeLength, countdown, disabled, error, onChange, onSend, sending, showLabel, value }: {
|
|
45
|
+
config?: ResolvedAuthConfig;
|
|
41
46
|
codeLength: number;
|
|
42
47
|
countdown: number;
|
|
43
48
|
disabled?: boolean;
|
|
@@ -47,9 +52,10 @@ export declare function VerificationCodeInput({ codeLength, countdown, disabled,
|
|
|
47
52
|
sending?: boolean;
|
|
48
53
|
showLabel?: boolean;
|
|
49
54
|
value: string;
|
|
50
|
-
}):
|
|
51
|
-
export declare function contactOptions(types: ContactIdentifierType[]): {
|
|
55
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
56
|
+
export declare function contactOptions(types: ContactIdentifierType[], config?: ResolvedAuthConfig): {
|
|
52
57
|
label: any;
|
|
53
58
|
value: ContactIdentifierType;
|
|
54
59
|
}[];
|
|
60
|
+
export {};
|
|
55
61
|
//# sourceMappingURL=internal.d.ts.map
|
package/es/auth/internal.js
CHANGED
|
@@ -1,8 +1,17 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
+
import { useAuthTranslation } from '@hanwenbo/x-auth-core/react';
|
|
1
8
|
import React from 'react';
|
|
2
9
|
import { Text, View } from '@tarojs/components';
|
|
3
10
|
import { identifierLabel } from '@hanwenbo/x-auth-core/identifier';
|
|
4
11
|
import { Button } from "../components/button";
|
|
5
12
|
import { Icon } from "../components/icon";
|
|
13
|
+
import { Segmented } from "../components/segmented";
|
|
14
|
+
import { Tabs } from "../components/tabs";
|
|
6
15
|
import { InputItem } from "../components/inputItem/index";
|
|
7
16
|
import { PhoneNumberInput } from "./phoneNumberInput";
|
|
8
17
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -18,6 +27,8 @@ export function AuthPanel(_ref) {
|
|
|
18
27
|
className = _ref.className,
|
|
19
28
|
description = _ref.description,
|
|
20
29
|
footer = _ref.footer,
|
|
30
|
+
_ref$headerAlign = _ref.headerAlign,
|
|
31
|
+
headerAlign = _ref$headerAlign === void 0 ? 'left' : _ref$headerAlign,
|
|
21
32
|
logo = _ref.logo,
|
|
22
33
|
style = _ref.style,
|
|
23
34
|
_ref$surface = _ref.surface,
|
|
@@ -29,7 +40,7 @@ export function AuthPanel(_ref) {
|
|
|
29
40
|
"data-testid": testID,
|
|
30
41
|
style: style,
|
|
31
42
|
children: [logo || title || description ? /*#__PURE__*/_jsxs(View, {
|
|
32
|
-
className: "x-taro-auth-panel__header",
|
|
43
|
+
className: "x-taro-auth-panel__header x-taro-auth-panel__header--".concat(headerAlign),
|
|
33
44
|
children: [logo ? /*#__PURE__*/_jsx(View, {
|
|
34
45
|
className: "x-taro-auth-panel__logo",
|
|
35
46
|
children: logo
|
|
@@ -62,39 +73,84 @@ export function AuthError(_ref3) {
|
|
|
62
73
|
}) : null;
|
|
63
74
|
}
|
|
64
75
|
export function AuthSelector(_ref4) {
|
|
65
|
-
var
|
|
76
|
+
var _onChange = _ref4.onChange,
|
|
66
77
|
options = _ref4.options,
|
|
67
78
|
value = _ref4.value;
|
|
68
79
|
if (options.length < 2) return null;
|
|
69
|
-
return /*#__PURE__*/_jsx(
|
|
80
|
+
return /*#__PURE__*/_jsx(Segmented, {
|
|
81
|
+
block: true,
|
|
70
82
|
className: "x-taro-auth-selector",
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
+
onChange: function onChange(next) {
|
|
84
|
+
return _onChange(next);
|
|
85
|
+
},
|
|
86
|
+
options: options.map(function (option) {
|
|
87
|
+
return _objectSpread(_objectSpread({}, option), {}, {
|
|
88
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
|
89
|
+
name: option.value === 'account' ? 'UserRound' : option.value === 'phone' ? 'Phone' : 'Mail',
|
|
90
|
+
size: 16
|
|
91
|
+
})
|
|
92
|
+
});
|
|
93
|
+
}),
|
|
94
|
+
value: value
|
|
83
95
|
});
|
|
84
96
|
}
|
|
85
|
-
export function
|
|
86
|
-
var
|
|
87
|
-
|
|
88
|
-
onChange = _ref5.onChange,
|
|
89
|
-
_ref5$showLabel = _ref5.showLabel,
|
|
90
|
-
showLabel = _ref5$showLabel === void 0 ? true : _ref5$showLabel,
|
|
91
|
-
type = _ref5.type,
|
|
97
|
+
export function CredentialSelector(_ref5) {
|
|
98
|
+
var _onChange2 = _ref5.onChange,
|
|
99
|
+
options = _ref5.options,
|
|
92
100
|
value = _ref5.value;
|
|
101
|
+
if (options.length < 2) return null;
|
|
102
|
+
return /*#__PURE__*/_jsx(Tabs, {
|
|
103
|
+
className: "x-taro-auth-method-tabs",
|
|
104
|
+
activeKey: value,
|
|
105
|
+
items: options.map(function (option) {
|
|
106
|
+
return {
|
|
107
|
+
key: option.value,
|
|
108
|
+
title: option.label
|
|
109
|
+
};
|
|
110
|
+
}),
|
|
111
|
+
onChange: function onChange(next) {
|
|
112
|
+
return _onChange2(next);
|
|
113
|
+
},
|
|
114
|
+
variant: "outline",
|
|
115
|
+
size: "large",
|
|
116
|
+
stretch: false,
|
|
117
|
+
indicatorVisible: false,
|
|
118
|
+
headerStyle: {
|
|
119
|
+
gap: 28
|
|
120
|
+
},
|
|
121
|
+
tabBarStyle: {
|
|
122
|
+
borderWidth: 0
|
|
123
|
+
},
|
|
124
|
+
tabStyle: {
|
|
125
|
+
paddingLeft: 0,
|
|
126
|
+
paddingRight: 0
|
|
127
|
+
},
|
|
128
|
+
textStyle: {
|
|
129
|
+
fontSize: 16
|
|
130
|
+
},
|
|
131
|
+
activeTextStyle: {
|
|
132
|
+
fontWeight: 650
|
|
133
|
+
}
|
|
134
|
+
});
|
|
135
|
+
}
|
|
136
|
+
export function IdentifierInput(_ref6) {
|
|
137
|
+
var config = _ref6.config,
|
|
138
|
+
error = _ref6.error,
|
|
139
|
+
onChange = _ref6.onChange,
|
|
140
|
+
_ref6$showLabel = _ref6.showLabel,
|
|
141
|
+
showLabel = _ref6$showLabel === void 0 ? true : _ref6$showLabel,
|
|
142
|
+
type = _ref6.type,
|
|
143
|
+
value = _ref6.value;
|
|
144
|
+
var t = config.t;
|
|
93
145
|
var label = identifierLabel(type, config);
|
|
94
146
|
return /*#__PURE__*/_jsx(AuthField, {
|
|
95
147
|
error: error,
|
|
96
148
|
label: showLabel ? label : undefined,
|
|
97
149
|
children: type === 'phone' ? /*#__PURE__*/_jsx(PhoneNumberInput, {
|
|
150
|
+
placeholder: t('auth.enter', {
|
|
151
|
+
label: label
|
|
152
|
+
}),
|
|
153
|
+
config: config,
|
|
98
154
|
countries: config.phone.countries,
|
|
99
155
|
countryCallingCodeEditable: config.phone.countryCallingCodeEditable,
|
|
100
156
|
defaultCountry: config.phone.defaultCountry,
|
|
@@ -105,10 +161,12 @@ export function IdentifierInput(_ref5) {
|
|
|
105
161
|
size: "large",
|
|
106
162
|
value: value
|
|
107
163
|
}) : /*#__PURE__*/_jsx(InputItem, {
|
|
108
|
-
error: error,
|
|
164
|
+
error: Boolean(error),
|
|
109
165
|
maxLength: type === 'account' ? config.account.maxLength : undefined,
|
|
110
166
|
onChange: onChange,
|
|
111
|
-
placeholder: type === 'account' ? config.account.placeholder :
|
|
167
|
+
placeholder: type === 'account' ? config.account.placeholder : t('auth.enter', {
|
|
168
|
+
label: label
|
|
169
|
+
}),
|
|
112
170
|
prefix: /*#__PURE__*/_jsx(Icon, {
|
|
113
171
|
name: type === 'account' ? 'User' : 'Mail',
|
|
114
172
|
size: 18
|
|
@@ -119,27 +177,31 @@ export function IdentifierInput(_ref5) {
|
|
|
119
177
|
})
|
|
120
178
|
});
|
|
121
179
|
}
|
|
122
|
-
export function VerificationCodeInput(
|
|
123
|
-
var
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
showLabel =
|
|
132
|
-
|
|
180
|
+
export function VerificationCodeInput(_ref7) {
|
|
181
|
+
var config = _ref7.config,
|
|
182
|
+
codeLength = _ref7.codeLength,
|
|
183
|
+
countdown = _ref7.countdown,
|
|
184
|
+
disabled = _ref7.disabled,
|
|
185
|
+
error = _ref7.error,
|
|
186
|
+
_onChange3 = _ref7.onChange,
|
|
187
|
+
onSend = _ref7.onSend,
|
|
188
|
+
sending = _ref7.sending,
|
|
189
|
+
_ref7$showLabel = _ref7.showLabel,
|
|
190
|
+
showLabel = _ref7$showLabel === void 0 ? true : _ref7$showLabel,
|
|
191
|
+
value = _ref7.value;
|
|
192
|
+
var t = useAuthTranslation(config);
|
|
133
193
|
return /*#__PURE__*/_jsx(AuthField, {
|
|
134
194
|
error: error,
|
|
135
|
-
label: showLabel ? '
|
|
195
|
+
label: showLabel ? t('auth.code') : undefined,
|
|
136
196
|
children: /*#__PURE__*/_jsx(InputItem, {
|
|
137
|
-
error: error,
|
|
197
|
+
error: Boolean(error),
|
|
138
198
|
maxLength: codeLength,
|
|
139
199
|
onChange: function onChange(next) {
|
|
140
|
-
return
|
|
200
|
+
return _onChange3(next.replace(/\D/g, '').slice(0, codeLength));
|
|
141
201
|
},
|
|
142
|
-
placeholder:
|
|
202
|
+
placeholder: t('auth.codeLength', {
|
|
203
|
+
length: codeLength
|
|
204
|
+
}),
|
|
143
205
|
prefix: /*#__PURE__*/_jsx(Icon, {
|
|
144
206
|
name: "CircleCheck",
|
|
145
207
|
size: 18
|
|
@@ -150,17 +212,20 @@ export function VerificationCodeInput(_ref6) {
|
|
|
150
212
|
onClick: onSend,
|
|
151
213
|
size: "small",
|
|
152
214
|
type: "link",
|
|
153
|
-
|
|
215
|
+
compact: true,
|
|
216
|
+
children: sending ? t('auth.sending') : countdown > 0 ? t('auth.resendCountdown', {
|
|
217
|
+
seconds: countdown
|
|
218
|
+
}) : t('auth.getCode')
|
|
154
219
|
}),
|
|
155
220
|
type: "tel",
|
|
156
221
|
value: value
|
|
157
222
|
})
|
|
158
223
|
});
|
|
159
224
|
}
|
|
160
|
-
export function contactOptions(types) {
|
|
225
|
+
export function contactOptions(types, config) {
|
|
161
226
|
return types.map(function (type) {
|
|
162
227
|
return {
|
|
163
|
-
label: identifierLabel(type),
|
|
228
|
+
label: identifierLabel(type, config),
|
|
164
229
|
value: type
|
|
165
230
|
};
|
|
166
231
|
});
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import type { AuthConfig } from '@hanwenbo/x-auth-core/types';
|
|
2
|
+
import { type CSSProperties } from 'react';
|
|
2
3
|
import type { PhoneCountryCode, PhoneCountryLabels } from '@hanwenbo/x-auth-core/types';
|
|
3
4
|
import './styles.css';
|
|
4
5
|
export interface PhoneNumberInputProps {
|
|
6
|
+
config?: AuthConfig;
|
|
5
7
|
className?: string;
|
|
6
8
|
countries?: PhoneCountryCode[];
|
|
7
9
|
countryCallingCodeEditable?: boolean;
|
|
@@ -18,5 +20,5 @@ export interface PhoneNumberInputProps {
|
|
|
18
20
|
testID?: string;
|
|
19
21
|
value?: string;
|
|
20
22
|
}
|
|
21
|
-
export declare function PhoneNumberInput({ className, countries, defaultCountry, disabled, error, labels, limitMaxLength, onChange, placeholder, readOnly, size, style, testID, value }: PhoneNumberInputProps):
|
|
23
|
+
export declare function PhoneNumberInput({ config, className, countries, defaultCountry, disabled, error, labels, limitMaxLength, onChange, placeholder, readOnly, size, style, testID, value }: PhoneNumberInputProps): import("react/jsx-runtime").JSX.Element;
|
|
22
24
|
//# sourceMappingURL=phoneNumberInput.d.ts.map
|
|
@@ -1,20 +1,29 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
1
7
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
8
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
9
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
4
10
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
5
11
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
12
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
13
|
+
import { useAuthTranslation } from '@hanwenbo/x-auth-core/react';
|
|
7
14
|
import React, { useEffect, useMemo, useState } from 'react';
|
|
8
15
|
import { Text, View } from '@tarojs/components';
|
|
9
16
|
import { composePhoneNumber, getPhoneCountryOptions, splitPhoneNumber } from '@hanwenbo/x-auth-core/phone';
|
|
10
17
|
import { InputItem } from "../components/inputItem/index";
|
|
11
18
|
import { Picker } from "../components/picker";
|
|
19
|
+
import { useInputItemTokens } from "../components/inputItem/tokens";
|
|
12
20
|
import "./styles.css";
|
|
13
21
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
22
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
15
23
|
export function PhoneNumberInput(_ref) {
|
|
16
24
|
var _options$find, _selected$countryCode, _selected$countryCode2;
|
|
17
|
-
var
|
|
25
|
+
var config = _ref.config,
|
|
26
|
+
className = _ref.className,
|
|
18
27
|
countries = _ref.countries,
|
|
19
28
|
_ref$defaultCountry = _ref.defaultCountry,
|
|
20
29
|
defaultCountry = _ref$defaultCountry === void 0 ? 'CN' : _ref$defaultCountry,
|
|
@@ -24,14 +33,18 @@ export function PhoneNumberInput(_ref) {
|
|
|
24
33
|
_ref$limitMaxLength = _ref.limitMaxLength,
|
|
25
34
|
limitMaxLength = _ref$limitMaxLength === void 0 ? true : _ref$limitMaxLength,
|
|
26
35
|
_onChange = _ref.onChange,
|
|
27
|
-
|
|
28
|
-
placeholder = _ref$placeholder === void 0 ? '请输入手机号' : _ref$placeholder,
|
|
36
|
+
placeholder = _ref.placeholder,
|
|
29
37
|
readOnly = _ref.readOnly,
|
|
30
38
|
size = _ref.size,
|
|
31
39
|
style = _ref.style,
|
|
32
40
|
_ref$testID = _ref.testID,
|
|
33
41
|
testID = _ref$testID === void 0 ? 'auth-phone-number' : _ref$testID,
|
|
34
42
|
value = _ref.value;
|
|
43
|
+
var t = useAuthTranslation(config);
|
|
44
|
+
var inputTokens = useInputItemTokens(size);
|
|
45
|
+
if (placeholder === undefined) placeholder = t('auth.enter', {
|
|
46
|
+
label: t('auth.phone')
|
|
47
|
+
});
|
|
35
48
|
var parsed = splitPhoneNumber(value, defaultCountry);
|
|
36
49
|
var _useState = useState(parsed.countryCode),
|
|
37
50
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -54,9 +67,12 @@ export function PhoneNumberInput(_ref) {
|
|
|
54
67
|
return /*#__PURE__*/_jsxs(View, {
|
|
55
68
|
className: "x-taro-auth-phone ".concat(className !== null && className !== void 0 ? className : ''),
|
|
56
69
|
"data-testid": testID,
|
|
57
|
-
style:
|
|
70
|
+
style: _objectSpread({
|
|
71
|
+
'--x-taro-auth-phone-height': "".concat(inputTokens.height, "px"),
|
|
72
|
+
'--x-taro-auth-phone-font-size': "".concat(inputTokens.fontSize, "px")
|
|
73
|
+
}, style),
|
|
58
74
|
children: [/*#__PURE__*/_jsx(Picker, {
|
|
59
|
-
ariaLabel:
|
|
75
|
+
ariaLabel: t('auth.chooseCountry'),
|
|
60
76
|
columns: options.map(function (option) {
|
|
61
77
|
var _labels$option$countr;
|
|
62
78
|
return {
|
|
@@ -65,7 +81,7 @@ export function PhoneNumberInput(_ref) {
|
|
|
65
81
|
};
|
|
66
82
|
}),
|
|
67
83
|
disabled: disabled || readOnly,
|
|
68
|
-
title:
|
|
84
|
+
title: t('auth.chooseCountry'),
|
|
69
85
|
value: [(_selected$countryCode2 = selected === null || selected === void 0 ? void 0 : selected.countryCode) !== null && _selected$countryCode2 !== void 0 ? _selected$countryCode2 : defaultCountry],
|
|
70
86
|
onConfirm: function onConfirm(nextValue) {
|
|
71
87
|
var next = options.find(function (option) {
|
|
@@ -77,7 +93,7 @@ export function PhoneNumberInput(_ref) {
|
|
|
77
93
|
},
|
|
78
94
|
children: function children(_items, actions) {
|
|
79
95
|
return /*#__PURE__*/_jsxs(View, {
|
|
80
|
-
ariaLabel:
|
|
96
|
+
ariaLabel: t('auth.chooseCountry'),
|
|
81
97
|
className: "x-taro-auth-phone__country",
|
|
82
98
|
role: "button",
|
|
83
99
|
onClick: actions.open,
|
|
@@ -92,7 +108,7 @@ export function PhoneNumberInput(_ref) {
|
|
|
92
108
|
});
|
|
93
109
|
}
|
|
94
110
|
}), /*#__PURE__*/_jsx(InputItem, {
|
|
95
|
-
ariaLabel:
|
|
111
|
+
ariaLabel: t('auth.phone'),
|
|
96
112
|
className: "x-taro-auth-phone__input",
|
|
97
113
|
disabled: disabled,
|
|
98
114
|
error: error,
|
|
@@ -103,6 +119,9 @@ export function PhoneNumberInput(_ref) {
|
|
|
103
119
|
placeholder: placeholder,
|
|
104
120
|
readOnly: readOnly,
|
|
105
121
|
size: size,
|
|
122
|
+
style: {
|
|
123
|
+
minHeight: inputTokens.height - 2
|
|
124
|
+
},
|
|
106
125
|
type: "tel",
|
|
107
126
|
value: nationalNumber
|
|
108
127
|
})]
|
package/es/auth/provider.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { type PropsWithChildren } from 'react';
|
|
2
2
|
import type { AuthConfig, AuthFailureHandler, AuthServices, AuthSession, ReauthenticationRequiredHandler } from '@hanwenbo/x-auth-core/types';
|
|
3
3
|
import { type AuthThemeTokens } from './theme';
|
|
4
4
|
export interface AuthProviderProps<Session extends AuthSession = AuthSession> extends PropsWithChildren {
|
|
@@ -8,6 +8,6 @@ export interface AuthProviderProps<Session extends AuthSession = AuthSession> ex
|
|
|
8
8
|
services?: AuthServices<Session>;
|
|
9
9
|
tokens?: AuthThemeTokens;
|
|
10
10
|
}
|
|
11
|
-
export declare function AuthProvider<Session extends AuthSession = AuthSession>({ children, config, onAuthError, onReauthenticationRequired, services, tokens }: AuthProviderProps<Session>):
|
|
11
|
+
export declare function AuthProvider<Session extends AuthSession = AuthSession>({ children, config, onAuthError, onReauthenticationRequired, services, tokens }: AuthProviderProps<Session>): import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
export declare function useAuthTheme(tokens?: AuthThemeTokens): AuthThemeTokens;
|
|
13
13
|
//# sourceMappingURL=provider.d.ts.map
|