@meatech/payblend_app_ui_component 1.0.84 → 1.0.86

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 (10) hide show
  1. package/components/Inputs/InputField.tsx +65 -60
  2. package/dist/components/Inputs/InputField.d.ts +2 -1
  3. package/dist/components/Inputs/InputField.d.ts.map +1 -1
  4. package/dist/components/Inputs/InputField.js +35 -31
  5. package/dist/components/Inputs/InputField.js.map +1 -1
  6. package/dist/yup/regex.d.ts.map +1 -1
  7. package/dist/yup/regex.js +1 -1
  8. package/dist/yup/regex.js.map +1 -1
  9. package/package.json +1 -1
  10. package/yup/regex.ts +1 -1
package/components/Inputs/InputField.tsx CHANGED
@@ -29,9 +29,9 @@ export const InputField = ({
29
29
  label,
30
30
  placeholder,
31
31
  errMessage,
32
- size = "medium",
33
- variant = "default",
34
- type = "default",
32
+ size = 'medium',
33
+ variant = 'default',
34
+ type = 'default',
35
35
  labelSize,
36
36
  isShowPassword = true,
37
37
  disabled = false,
@@ -42,6 +42,7 @@ export const InputField = ({
42
42
  mask,
43
43
  obfuscationCharacter,
44
44
  showObfuscatedValue = false,
45
+ isPhoneNumber = false,
45
46
  onChangeText,
46
47
  onEndEditing,
47
48
  onToggleShowPassword,
@@ -56,20 +57,21 @@ export const InputField = ({
56
57
  placeholder?: string;
57
58
  isShowPassword?: boolean;
58
59
  disabled?: boolean;
59
- size?: "small" | "medium" | "large";
60
+ size?: 'small' | 'medium' | 'large';
61
+ isPhoneNumber?: boolean;
60
62
  labelSize?:
61
- | "xxxs"
62
- | "xxs"
63
- | "xs"
64
- | "small"
65
- | "medium"
66
- | "large"
67
- | "xl"
68
- | "xxl"
69
- | "xxxl"
70
- | "xxxxl";
71
- variant?: "default" | "quite" | "none";
72
- type?: "default" | "phone-number" | "password" | "search";
63
+ | 'xxxs'
64
+ | 'xxs'
65
+ | 'xs'
66
+ | 'small'
67
+ | 'medium'
68
+ | 'large'
69
+ | 'xl'
70
+ | 'xxl'
71
+ | 'xxxl'
72
+ | 'xxxxl';
73
+ variant?: 'default' | 'quite' | 'none';
74
+ type?: 'default' | 'phone-number' | 'password' | 'search';
73
75
  isHideIcon?: boolean;
74
76
  maxLength?: number;
75
77
  keyboardType?: KeyboardTypeOptions;
@@ -80,7 +82,7 @@ export const InputField = ({
80
82
  onChangeText?: (
81
83
  text: string,
82
84
  maskedText?: string,
83
- obfuscatedText?: string
85
+ obfuscatedText?: string,
84
86
  ) => void;
85
87
  onEndEditing?: (text: string) => void;
86
88
  onToggleShowPassword?: () => void;
@@ -89,12 +91,12 @@ export const InputField = ({
89
91
  onSubmitEditing?: (text: string) => void;
90
92
  onBlur?: (text: string) => void;
91
93
  }) => {
92
- const { height, fontSize } = useMemo(
94
+ const {height, fontSize} = useMemo(
93
95
  () => ({
94
96
  height: inputFieldHeight[size],
95
97
  fontSize: inputFieldFontSize[size],
96
98
  }),
97
- [size]
99
+ [size],
98
100
  );
99
101
  const inputHeightStyle: StyleProp<TextStyle> = {
100
102
  backgroundColor: disabled ? colors.neutral[20] : colors.white[10],
@@ -106,9 +108,9 @@ export const InputField = ({
106
108
  backgroundColor: disabled ? colors.neutral[20] : colors.white[10],
107
109
  };
108
110
  const inputWrapperBorderStyle: StyleProp<ViewStyle> = {
109
- borderRadius: variant === "default" ? metrics.borderRadiusBase : 0,
111
+ borderRadius: variant === 'default' ? metrics.borderRadiusBase : 0,
110
112
  borderWidth:
111
- variant === "default"
113
+ variant === 'default'
112
114
  ? metrics.borderWidthMedium
113
115
  : metrics.borderWidthNone,
114
116
  borderColor: disabled
@@ -117,11 +119,11 @@ export const InputField = ({
117
119
  ? colors.red[90]
118
120
  : colors.neutral[60],
119
121
  borderBottomWidth:
120
- variant === "none" ? metrics.borderWidthNone : metrics.borderWidthMedium,
122
+ variant === 'none' ? metrics.borderWidthNone : metrics.borderWidthMedium,
121
123
  };
122
124
 
123
125
  const inputBorderStyle: StyleProp<TextStyle> = {
124
- borderLeftWidth: variant === "default" ? metrics.borderWidthMedium : 0,
126
+ borderLeftWidth: variant === 'default' ? metrics.borderWidthMedium : 0,
125
127
  borderLeftColor: disabled
126
128
  ? colors.neutral[20]
127
129
  : errMessage
@@ -130,16 +132,16 @@ export const InputField = ({
130
132
  };
131
133
  const countryCodeList = useMemo(
132
134
  () =>
133
- CountryCode.map((country: any) => ({
135
+ [].map((country: any) => ({
134
136
  label: country.dial_code,
135
137
  value: country.dial_code,
136
138
  })),
137
- []
139
+ [],
138
140
  );
139
141
  const [countryCodeValue, setCountryCodeValue] = useState<SelectItemT>(
140
- countryCodeList[0]
142
+ countryCodeList[0],
141
143
  );
142
- const [inputValue, setInputValue] = useState(value || "");
144
+ const [inputValue, setInputValue] = useState(value || '');
143
145
  const debouncedOnChangeText = useDebounce(inputValue, debounceTime);
144
146
 
145
147
  useEffect(() => {
@@ -148,12 +150,18 @@ export const InputField = ({
148
150
  }
149
151
  }, [debouncedOnChangeText, onDebounceChangeText]);
150
152
 
153
+ useEffect(() => {
154
+ if (isPhoneNumber) {
155
+ setInputValue(value || '');
156
+ }
157
+ }, [value, isPhoneNumber]);
158
+
151
159
  const handleEndEdit = (
152
- e: NativeSyntheticEvent<TextInputEndEditingEventData>
160
+ e: NativeSyntheticEvent<TextInputEndEditingEventData>,
153
161
  ) => {
154
162
  if (onEndEditing) {
155
163
  if (
156
- type === "phone-number" &&
164
+ type === 'phone-number' &&
157
165
  countryCodeValue &&
158
166
  debouncedOnChangeText
159
167
  ) {
@@ -177,30 +185,30 @@ export const InputField = ({
177
185
  const handleChangeText = (
178
186
  maskedText: string,
179
187
  text: string,
180
- obfuscatedText?: string
188
+ obfuscatedText?: string,
181
189
  ) => {
182
190
  setInputValue(maskedText);
183
191
  if (onChangeText) {
184
192
  if (text) {
185
- if (type === "phone-number" && countryCodeValue && text) {
193
+ if (type === 'phone-number' && countryCodeValue && text) {
186
194
  onChangeText(
187
195
  countryCodeValue.value + text,
188
196
  maskedText,
189
- obfuscatedText
197
+ obfuscatedText,
190
198
  );
191
199
  } else {
192
200
  onChangeText(text, maskedText, obfuscatedText);
193
201
  }
194
202
  } else {
195
- setInputValue("");
196
- onChangeText("", maskedText, obfuscatedText);
203
+ setInputValue('');
204
+ onChangeText('', maskedText, obfuscatedText);
197
205
  }
198
206
  }
199
207
  };
200
208
 
201
209
  const handleBlur = () => {
202
210
  if (onBlur) {
203
- if (type === "phone-number" && countryCodeValue && inputValue) {
211
+ if (type === 'phone-number' && countryCodeValue && inputValue) {
204
212
  onBlur(countryCodeValue.value + inputValue);
205
213
  } else {
206
214
  onBlur(inputValue);
@@ -217,9 +225,8 @@ export const InputField = ({
217
225
  styles.inputFieldWrapper,
218
226
  inputWrapperHeightStyle,
219
227
  inputWrapperBorderStyle,
220
- ]}
221
- >
222
- {type === "phone-number" && (
228
+ ]}>
229
+ {type === 'phone-number' && (
223
230
  <SelectField
224
231
  value={countryCodeValue}
225
232
  listData={countryCodeList}
@@ -234,44 +241,42 @@ export const InputField = ({
234
241
  <MaskInput
235
242
  value={inputValue}
236
243
  editable={!disabled}
237
- secureTextEntry={type === "password" && isShowPassword}
244
+ secureTextEntry={type === 'password' && isShowPassword}
238
245
  onEndEditing={handleEndEdit}
239
246
  obfuscationCharacter={obfuscationCharacter}
240
247
  showObfuscatedValue={showObfuscatedValue}
241
248
  onChangeText={(
242
249
  masked: string,
243
250
  unmasked: string,
244
- obfuscated: string
251
+ obfuscated: string,
245
252
  ) => {
246
253
  handleChangeText(masked, unmasked, obfuscated);
247
254
  }}
248
255
  placeholder={placeholder}
249
- keyboardType={keyboardType || "default"}
256
+ keyboardType={keyboardType || 'default'}
250
257
  style={[
251
258
  styles.inputFieldBox,
252
259
  inputHeightStyle,
253
- type === "phone-number" && inputBorderStyle,
260
+ type === 'phone-number' && inputBorderStyle,
254
261
  ]}
255
262
  mask={mask || undefined}
256
263
  maxLength={maxLength}
257
264
  onBlur={handleBlur}
258
265
  onSubmitEditing={handleSubmitEditing}
259
266
  />
260
- {!isHideIcon && type === "password" && (
267
+ {!isHideIcon && type === 'password' && (
261
268
  <Pressable
262
269
  disabled={disabled}
263
270
  onPress={handleToggleShowPassword}
264
- style={[styles.rightBtn, inputBorderStyle]}
265
- >
271
+ style={[styles.rightBtn, inputBorderStyle]}>
266
272
  <Icon name="ic_eye" />
267
273
  </Pressable>
268
274
  )}
269
- {type === "search" && (
275
+ {type === 'search' && (
270
276
  <Pressable
271
277
  disabled={disabled}
272
278
  onPress={handleSearch}
273
- style={[styles.rightBtn, inputBorderStyle]}
274
- >
279
+ style={[styles.rightBtn, inputBorderStyle]}>
275
280
  <Icon name="ic_search" />
276
281
  </Pressable>
277
282
  )}
@@ -289,31 +294,31 @@ export const InputField = ({
289
294
  const styles = StyleSheet.create({
290
295
  inputFieldContainer: {
291
296
  gap: Space.xs,
292
- width: "100%",
297
+ width: '100%',
293
298
  },
294
299
  inputFieldWrapper: {
295
- flexDirection: "row",
296
- width: "100%",
297
- overflow: "hidden",
300
+ flexDirection: 'row',
301
+ width: '100%',
302
+ overflow: 'hidden',
298
303
  },
299
304
  innerInputFieldWrapper: {
300
305
  flex: 1,
301
306
  },
302
307
  inputFieldMaskedBox: {
303
308
  flexGrow: 1,
304
- justifyContent: "center",
309
+ justifyContent: 'center',
305
310
  backgroundColor: colors.white[10],
306
311
  color: colors.neutral[80],
307
312
  paddingVertical: Space.xs,
308
313
  },
309
314
  inputFieldBoxAbsolute: {
310
- position: "absolute",
315
+ position: 'absolute',
311
316
  // opacity: 0,
312
- backgroundColor: "transparent",
317
+ backgroundColor: 'transparent',
313
318
  },
314
319
  inputFieldBox: {
315
320
  flexGrow: 1,
316
- justifyContent: "center",
321
+ justifyContent: 'center',
317
322
  backgroundColor: colors.white[10],
318
323
  color: colors.neutral[80],
319
324
  paddingVertical: Space.xs,
@@ -325,12 +330,12 @@ const styles = StyleSheet.create({
325
330
  width: pw(100),
326
331
  },
327
332
  pickerIconContainer: {
328
- alignItems: "center",
329
- justifyContent: "center",
333
+ alignItems: 'center',
334
+ justifyContent: 'center',
330
335
  },
331
336
  rightBtn: {
332
337
  width: pw(52),
333
- justifyContent: "center",
334
- alignItems: "center",
338
+ justifyContent: 'center',
339
+ alignItems: 'center',
335
340
  },
336
341
  });
package/dist/components/Inputs/InputField.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { KeyboardTypeOptions } from 'react-native';
2
2
  import { Mask } from 'react-native-mask-input';
3
3
 
4
- declare const InputField: ({ value, label, placeholder, errMessage, size, variant, type, labelSize, isShowPassword, disabled, isHideIcon, maxLength, keyboardType, debounceTime, mask, obfuscationCharacter, showObfuscatedValue, onChangeText, onEndEditing, onToggleShowPassword, onSearch, onDebounceChangeText, onSubmitEditing, onBlur, }: {
4
+ declare const InputField: ({ value, label, placeholder, errMessage, size, variant, type, labelSize, isShowPassword, disabled, isHideIcon, maxLength, keyboardType, debounceTime, mask, obfuscationCharacter, showObfuscatedValue, isPhoneNumber, onChangeText, onEndEditing, onToggleShowPassword, onSearch, onDebounceChangeText, onSubmitEditing, onBlur, }: {
5
5
  value: string;
6
6
  label?: string;
7
7
  errMessage?: string;
@@ -9,6 +9,7 @@ declare const InputField: ({ value, label, placeholder, errMessage, size, varian
9
9
  isShowPassword?: boolean;
10
10
  disabled?: boolean;
11
11
  size?: "small" | "medium" | "large";
12
+ isPhoneNumber?: boolean;
12
13
  labelSize?: "xxxs" | "xxs" | "xs" | "small" | "medium" | "large" | "xl" | "xxl" | "xxxl" | "xxxxl";
13
14
  variant?: "default" | "quite" | "none";
14
15
  type?: "default" | "phone-number" | "password" | "search";
package/dist/components/Inputs/InputField.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InputField.d.ts","sourceRoot":"","sources":["../../../components/Inputs/InputField.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,mBAAmB,EASpB,MAAM,cAAc,CAAC;AACtB,OAAkB,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAa1D,eAAO,MAAM,UAAU,GAAI,qTAyBxB;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,SAAS,CAAC,EACN,MAAM,GACN,KAAK,GACL,IAAI,GACJ,OAAO,GACP,QAAQ,GACR,OAAO,GACP,IAAI,GACJ,KAAK,GACL,MAAM,GACN,OAAO,CAAC;IACZ,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IACvC,IAAI,CAAC,EAAE,SAAS,GAAG,cAAc,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,CACb,IAAI,EAAE,MAAM,EACZ,UAAU,CAAC,EAAE,MAAM,EACnB,cAAc,CAAC,EAAE,MAAM,KACpB,IAAI,CAAC;IACV,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,QAoMA,CAAC"}
1
+ {"version":3,"file":"InputField.d.ts","sourceRoot":"","sources":["../../../components/Inputs/InputField.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,mBAAmB,EASpB,MAAM,cAAc,CAAC;AACtB,OAAkB,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAa1D,eAAO,MAAM,UAAU,GAAI,oUA0BxB;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EACN,MAAM,GACN,KAAK,GACL,IAAI,GACJ,OAAO,GACP,QAAQ,GACR,OAAO,GACP,IAAI,GACJ,KAAK,GACL,MAAM,GACN,OAAO,CAAC;IACZ,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IACvC,IAAI,CAAC,EAAE,SAAS,GAAG,cAAc,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,CACb,IAAI,EAAE,MAAM,EACZ,UAAU,CAAC,EAAE,MAAM,EACnB,cAAc,CAAC,EAAE,MAAM,KACpB,IAAI,CAAC;IACV,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,QAuMA,CAAC"}
package/dist/components/Inputs/InputField.js CHANGED
@@ -8,7 +8,6 @@ import { colors } from '../../themes/colors.js';
8
8
  import '../../themes/images.js';
9
9
  import { pw as responsiveWidth, FontSizes, Space, metrics } from '../../themes/metrics.js';
10
10
  import '../../themes/stats.js';
11
- import CountryCode from '../../jsons/CountryCode.json.js';
12
11
  import '../Toasts/Toast.js';
13
12
  import { Icon } from '../Icons/Icon.js';
14
13
  import '../Container/Container.js';
@@ -38,7 +37,7 @@ import { useDebounce } from '../../hooks/useDebounce.js';
38
37
  import '../../hooks/useToast.js';
39
38
  import '../../hooks/useSlideAnimation.js';
40
39
 
41
- const InputField = ({ value, label, placeholder, errMessage, size = "medium", variant = "default", type = "default", labelSize, isShowPassword = true, disabled = false, isHideIcon = false, maxLength, keyboardType, debounceTime = 0, mask, obfuscationCharacter, showObfuscatedValue = false, onChangeText, onEndEditing, onToggleShowPassword, onSearch, onDebounceChangeText, onSubmitEditing, onBlur, }) => {
40
+ const InputField = ({ value, label, placeholder, errMessage, size = 'medium', variant = 'default', type = 'default', labelSize, isShowPassword = true, disabled = false, isHideIcon = false, maxLength, keyboardType, debounceTime = 0, mask, obfuscationCharacter, showObfuscatedValue = false, isPhoneNumber = false, onChangeText, onEndEditing, onToggleShowPassword, onSearch, onDebounceChangeText, onSubmitEditing, onBlur, }) => {
42
41
  const { height, fontSize } = useMemo(() => ({
43
42
  height: inputFieldHeight[size],
44
43
  fontSize: inputFieldFontSize[size],
@@ -53,8 +52,8 @@ const InputField = ({ value, label, placeholder, errMessage, size = "medium", va
53
52
  backgroundColor: disabled ? colors.neutral[20] : colors.white[10],
54
53
  };
55
54
  const inputWrapperBorderStyle = {
56
- borderRadius: variant === "default" ? metrics.borderRadiusBase : 0,
57
- borderWidth: variant === "default"
55
+ borderRadius: variant === 'default' ? metrics.borderRadiusBase : 0,
56
+ borderWidth: variant === 'default'
58
57
  ? metrics.borderWidthMedium
59
58
  : metrics.borderWidthNone,
60
59
  borderColor: disabled
@@ -62,31 +61,36 @@ const InputField = ({ value, label, placeholder, errMessage, size = "medium", va
62
61
  : errMessage
63
62
  ? colors.red[90]
64
63
  : colors.neutral[60],
65
- borderBottomWidth: variant === "none" ? metrics.borderWidthNone : metrics.borderWidthMedium,
64
+ borderBottomWidth: variant === 'none' ? metrics.borderWidthNone : metrics.borderWidthMedium,
66
65
  };
67
66
  const inputBorderStyle = {
68
- borderLeftWidth: variant === "default" ? metrics.borderWidthMedium : 0,
67
+ borderLeftWidth: variant === 'default' ? metrics.borderWidthMedium : 0,
69
68
  borderLeftColor: disabled
70
69
  ? colors.neutral[20]
71
70
  : errMessage
72
71
  ? colors.red[90]
73
72
  : colors.neutral[60],
74
73
  };
75
- const countryCodeList = useMemo(() => CountryCode.map((country) => ({
74
+ const countryCodeList = useMemo(() => [].map((country) => ({
76
75
  label: country.dial_code,
77
76
  value: country.dial_code,
78
77
  })), []);
79
78
  const [countryCodeValue, setCountryCodeValue] = useState(countryCodeList[0]);
80
- const [inputValue, setInputValue] = useState(value || "");
79
+ const [inputValue, setInputValue] = useState(value || '');
81
80
  const debouncedOnChangeText = useDebounce(inputValue, debounceTime);
82
81
  useEffect(() => {
83
82
  if (onDebounceChangeText) {
84
83
  onDebounceChangeText(debouncedOnChangeText);
85
84
  }
86
85
  }, [debouncedOnChangeText, onDebounceChangeText]);
86
+ useEffect(() => {
87
+ if (isPhoneNumber) {
88
+ setInputValue(value || '');
89
+ }
90
+ }, [value, isPhoneNumber]);
87
91
  const handleEndEdit = (e) => {
88
92
  if (onEndEditing) {
89
- if (type === "phone-number" &&
93
+ if (type === 'phone-number' &&
90
94
  countryCodeValue &&
91
95
  debouncedOnChangeText) {
92
96
  onEndEditing(countryCodeValue.value + e.nativeEvent.text);
@@ -109,7 +113,7 @@ const InputField = ({ value, label, placeholder, errMessage, size = "medium", va
109
113
  setInputValue(maskedText);
110
114
  if (onChangeText) {
111
115
  if (text) {
112
- if (type === "phone-number" && countryCodeValue && text) {
116
+ if (type === 'phone-number' && countryCodeValue && text) {
113
117
  onChangeText(countryCodeValue.value + text, maskedText, obfuscatedText);
114
118
  }
115
119
  else {
@@ -117,14 +121,14 @@ const InputField = ({ value, label, placeholder, errMessage, size = "medium", va
117
121
  }
118
122
  }
119
123
  else {
120
- setInputValue("");
121
- onChangeText("", maskedText, obfuscatedText);
124
+ setInputValue('');
125
+ onChangeText('', maskedText, obfuscatedText);
122
126
  }
123
127
  }
124
128
  };
125
129
  const handleBlur = () => {
126
130
  if (onBlur) {
127
- if (type === "phone-number" && countryCodeValue && inputValue) {
131
+ if (type === 'phone-number' && countryCodeValue && inputValue) {
128
132
  onBlur(countryCodeValue.value + inputValue);
129
133
  }
130
134
  else {
@@ -140,48 +144,48 @@ const InputField = ({ value, label, placeholder, errMessage, size = "medium", va
140
144
  inputWrapperHeightStyle,
141
145
  inputWrapperBorderStyle,
142
146
  ] },
143
- type === "phone-number" && (React.createElement(SelectField, { value: countryCodeValue, listData: countryCodeList, cusHeight: height - 2, disabled: disabled, variant: "none", size: size, cusWidth: responsiveWidth(100), onChangeValue: setCountryCodeValue })),
144
- React.createElement(MaskInput, { value: inputValue, editable: !disabled, secureTextEntry: type === "password" && isShowPassword, onEndEditing: handleEndEdit, obfuscationCharacter: obfuscationCharacter, showObfuscatedValue: showObfuscatedValue, onChangeText: (masked, unmasked, obfuscated) => {
147
+ type === 'phone-number' && (React.createElement(SelectField, { value: countryCodeValue, listData: countryCodeList, cusHeight: height - 2, disabled: disabled, variant: "none", size: size, cusWidth: responsiveWidth(100), onChangeValue: setCountryCodeValue })),
148
+ React.createElement(MaskInput, { value: inputValue, editable: !disabled, secureTextEntry: type === 'password' && isShowPassword, onEndEditing: handleEndEdit, obfuscationCharacter: obfuscationCharacter, showObfuscatedValue: showObfuscatedValue, onChangeText: (masked, unmasked, obfuscated) => {
145
149
  handleChangeText(masked, unmasked, obfuscated);
146
- }, placeholder: placeholder, keyboardType: keyboardType || "default", style: [
150
+ }, placeholder: placeholder, keyboardType: keyboardType || 'default', style: [
147
151
  styles.inputFieldBox,
148
152
  inputHeightStyle,
149
- type === "phone-number" && inputBorderStyle,
153
+ type === 'phone-number' && inputBorderStyle,
150
154
  ], mask: mask || undefined, maxLength: maxLength, onBlur: handleBlur, onSubmitEditing: handleSubmitEditing }),
151
- !isHideIcon && type === "password" && (React.createElement(Pressable, { disabled: disabled, onPress: handleToggleShowPassword, style: [styles.rightBtn, inputBorderStyle] },
155
+ !isHideIcon && type === 'password' && (React.createElement(Pressable, { disabled: disabled, onPress: handleToggleShowPassword, style: [styles.rightBtn, inputBorderStyle] },
152
156
  React.createElement(Icon, { name: "ic_eye" }))),
153
- type === "search" && (React.createElement(Pressable, { disabled: disabled, onPress: handleSearch, style: [styles.rightBtn, inputBorderStyle] },
157
+ type === 'search' && (React.createElement(Pressable, { disabled: disabled, onPress: handleSearch, style: [styles.rightBtn, inputBorderStyle] },
154
158
  React.createElement(Icon, { name: "ic_search" })))),
155
159
  errMessage && (React.createElement(Text, { color: "error", size: "xs" }, errMessage)))));
156
160
  };
157
161
  const styles = StyleSheet.create({
158
162
  inputFieldContainer: {
159
163
  gap: Space.xs,
160
- width: "100%",
164
+ width: '100%',
161
165
  },
162
166
  inputFieldWrapper: {
163
- flexDirection: "row",
164
- width: "100%",
165
- overflow: "hidden",
167
+ flexDirection: 'row',
168
+ width: '100%',
169
+ overflow: 'hidden',
166
170
  },
167
171
  innerInputFieldWrapper: {
168
172
  flex: 1,
169
173
  },
170
174
  inputFieldMaskedBox: {
171
175
  flexGrow: 1,
172
- justifyContent: "center",
176
+ justifyContent: 'center',
173
177
  backgroundColor: colors.white[10],
174
178
  color: colors.neutral[80],
175
179
  paddingVertical: Space.xs,
176
180
  },
177
181
  inputFieldBoxAbsolute: {
178
- position: "absolute",
182
+ position: 'absolute',
179
183
  // opacity: 0,
180
- backgroundColor: "transparent",
184
+ backgroundColor: 'transparent',
181
185
  },
182
186
  inputFieldBox: {
183
187
  flexGrow: 1,
184
- justifyContent: "center",
188
+ justifyContent: 'center',
185
189
  backgroundColor: colors.white[10],
186
190
  color: colors.neutral[80],
187
191
  paddingVertical: Space.xs,
@@ -193,13 +197,13 @@ const styles = StyleSheet.create({
193
197
  width: responsiveWidth(100),
194
198
  },
195
199
  pickerIconContainer: {
196
- alignItems: "center",
197
- justifyContent: "center",
200
+ alignItems: 'center',
201
+ justifyContent: 'center',
198
202
  },
199
203
  rightBtn: {
200
204
  width: responsiveWidth(52),
201
- justifyContent: "center",
202
- alignItems: "center",
205
+ justifyContent: 'center',
206
+ alignItems: 'center',
203
207
  },
204
208
  });
205
209
 
package/dist/components/Inputs/InputField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InputField.js","sources":["../../../../components/Inputs/InputField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport {\n KeyboardTypeOptions,\n NativeSyntheticEvent,\n Pressable,\n StyleProp,\n StyleSheet,\n TextInputEndEditingEventData,\n TextStyle,\n View,\n ViewStyle,\n} from \"react-native\";\nimport MaskInput, { Mask } from \"react-native-mask-input\";\nimport Text from \"@ui/components/Text\";\nimport { FontSizes, Space, colors, metrics, pw } from \"@ui/themes\";\nimport CountryCode from \"../../jsons/CountryCode.json\";\nimport { Icon, SelectField } from \"@ui/components\";\nimport { inputFieldFontSize, inputFieldHeight } from \"./styles\";\nimport { useDebounce } from \"@ui/hooks\";\n\ntype SelectItemT = {\n label: string;\n value: string;\n};\n\nexport const InputField = ({\n value,\n label,\n placeholder,\n errMessage,\n size = \"medium\",\n variant = \"default\",\n type = \"default\",\n labelSize,\n isShowPassword = true,\n disabled = false,\n isHideIcon = false,\n maxLength,\n keyboardType,\n debounceTime = 0,\n mask,\n obfuscationCharacter,\n showObfuscatedValue = false,\n onChangeText,\n onEndEditing,\n onToggleShowPassword,\n onSearch,\n onDebounceChangeText,\n onSubmitEditing,\n onBlur,\n}: {\n value: string;\n label?: string;\n errMessage?: string;\n placeholder?: string;\n isShowPassword?: boolean;\n disabled?: boolean;\n size?: \"small\" | \"medium\" | \"large\";\n labelSize?:\n | \"xxxs\"\n | \"xxs\"\n | \"xs\"\n | \"small\"\n | \"medium\"\n | \"large\"\n | \"xl\"\n | \"xxl\"\n | \"xxxl\"\n | \"xxxxl\";\n variant?: \"default\" | \"quite\" | \"none\";\n type?: \"default\" | \"phone-number\" | \"password\" | \"search\";\n isHideIcon?: boolean;\n maxLength?: number;\n keyboardType?: KeyboardTypeOptions;\n debounceTime?: number;\n mask?: Mask;\n obfuscationCharacter?: string;\n showObfuscatedValue?: boolean;\n onChangeText?: (\n text: string,\n maskedText?: string,\n obfuscatedText?: string\n ) => void;\n onEndEditing?: (text: string) => void;\n onToggleShowPassword?: () => void;\n onSearch?: () => void;\n onDebounceChangeText?: (text: string) => void;\n onSubmitEditing?: (text: string) => void;\n onBlur?: (text: string) => void;\n}) => {\n const { height, fontSize } = useMemo(\n () => ({\n height: inputFieldHeight[size],\n fontSize: inputFieldFontSize[size],\n }),\n [size]\n );\n const inputHeightStyle: StyleProp<TextStyle> = {\n backgroundColor: disabled ? colors.neutral[20] : colors.white[10],\n height: height - 2,\n fontSize,\n };\n const inputWrapperHeightStyle: StyleProp<ViewStyle> = {\n height: height,\n backgroundColor: disabled ? colors.neutral[20] : colors.white[10],\n };\n const inputWrapperBorderStyle: StyleProp<ViewStyle> = {\n borderRadius: variant === \"default\" ? metrics.borderRadiusBase : 0,\n borderWidth:\n variant === \"default\"\n ? metrics.borderWidthMedium\n : metrics.borderWidthNone,\n borderColor: disabled\n ? colors.neutral[20]\n : errMessage\n ? colors.red[90]\n : colors.neutral[60],\n borderBottomWidth:\n variant === \"none\" ? metrics.borderWidthNone : metrics.borderWidthMedium,\n };\n\n const inputBorderStyle: StyleProp<TextStyle> = {\n borderLeftWidth: variant === \"default\" ? metrics.borderWidthMedium : 0,\n borderLeftColor: disabled\n ? colors.neutral[20]\n : errMessage\n ? colors.red[90]\n : colors.neutral[60],\n };\n const countryCodeList = useMemo(\n () =>\n CountryCode.map((country: any) => ({\n label: country.dial_code,\n value: country.dial_code,\n })),\n []\n );\n const [countryCodeValue, setCountryCodeValue] = useState<SelectItemT>(\n countryCodeList[0]\n );\n const [inputValue, setInputValue] = useState(value || \"\");\n const debouncedOnChangeText = useDebounce(inputValue, debounceTime);\n\n useEffect(() => {\n if (onDebounceChangeText) {\n onDebounceChangeText(debouncedOnChangeText);\n }\n }, [debouncedOnChangeText, onDebounceChangeText]);\n\n const handleEndEdit = (\n e: NativeSyntheticEvent<TextInputEndEditingEventData>\n ) => {\n if (onEndEditing) {\n if (\n type === \"phone-number\" &&\n countryCodeValue &&\n debouncedOnChangeText\n ) {\n onEndEditing(countryCodeValue.value + e.nativeEvent.text);\n } else {\n onEndEditing(e.nativeEvent.text);\n }\n }\n };\n const handleToggleShowPassword = () => {\n onToggleShowPassword && onToggleShowPassword();\n };\n const handleSearch = () => onSearch && onSearch();\n\n const handleSubmitEditing = () => {\n if (onSubmitEditing) {\n onSubmitEditing(inputValue);\n }\n };\n\n const handleChangeText = (\n maskedText: string,\n text: string,\n obfuscatedText?: string\n ) => {\n setInputValue(maskedText);\n if (onChangeText) {\n if (text) {\n if (type === \"phone-number\" && countryCodeValue && text) {\n onChangeText(\n countryCodeValue.value + text,\n maskedText,\n obfuscatedText\n );\n } else {\n onChangeText(text, maskedText, obfuscatedText);\n }\n } else {\n setInputValue(\"\");\n onChangeText(\"\", maskedText, obfuscatedText);\n }\n }\n };\n\n const handleBlur = () => {\n if (onBlur) {\n if (type === \"phone-number\" && countryCodeValue && inputValue) {\n onBlur(countryCodeValue.value + inputValue);\n } else {\n onBlur(inputValue);\n }\n }\n };\n\n return (\n <View style={styles.inputFieldContainer}>\n {label && <Text size={labelSize || size}>{label}</Text>}\n <View>\n <View\n style={[\n styles.inputFieldWrapper,\n inputWrapperHeightStyle,\n inputWrapperBorderStyle,\n ]}\n >\n {type === \"phone-number\" && (\n <SelectField\n value={countryCodeValue}\n listData={countryCodeList}\n cusHeight={height - 2}\n disabled={disabled}\n variant=\"none\"\n size={size}\n cusWidth={pw(100)}\n onChangeValue={setCountryCodeValue}\n />\n )}\n <MaskInput\n value={inputValue}\n editable={!disabled}\n secureTextEntry={type === \"password\" && isShowPassword}\n onEndEditing={handleEndEdit}\n obfuscationCharacter={obfuscationCharacter}\n showObfuscatedValue={showObfuscatedValue}\n onChangeText={(\n masked: string,\n unmasked: string,\n obfuscated: string\n ) => {\n handleChangeText(masked, unmasked, obfuscated);\n }}\n placeholder={placeholder}\n keyboardType={keyboardType || \"default\"}\n style={[\n styles.inputFieldBox,\n inputHeightStyle,\n type === \"phone-number\" && inputBorderStyle,\n ]}\n mask={mask || undefined}\n maxLength={maxLength}\n onBlur={handleBlur}\n onSubmitEditing={handleSubmitEditing}\n />\n {!isHideIcon && type === \"password\" && (\n <Pressable\n disabled={disabled}\n onPress={handleToggleShowPassword}\n style={[styles.rightBtn, inputBorderStyle]}\n >\n <Icon name=\"ic_eye\" />\n </Pressable>\n )}\n {type === \"search\" && (\n <Pressable\n disabled={disabled}\n onPress={handleSearch}\n style={[styles.rightBtn, inputBorderStyle]}\n >\n <Icon name=\"ic_search\" />\n </Pressable>\n )}\n </View>\n {errMessage && (\n <Text color=\"error\" size=\"xs\">\n {errMessage}\n </Text>\n )}\n </View>\n </View>\n );\n};\n\nconst styles = StyleSheet.create({\n inputFieldContainer: {\n gap: Space.xs,\n width: \"100%\",\n },\n inputFieldWrapper: {\n flexDirection: \"row\",\n width: \"100%\",\n overflow: \"hidden\",\n },\n innerInputFieldWrapper: {\n flex: 1,\n },\n inputFieldMaskedBox: {\n flexGrow: 1,\n justifyContent: \"center\",\n backgroundColor: colors.white[10],\n color: colors.neutral[80],\n paddingVertical: Space.xs,\n },\n inputFieldBoxAbsolute: {\n position: \"absolute\",\n // opacity: 0,\n backgroundColor: \"transparent\",\n },\n inputFieldBox: {\n flexGrow: 1,\n justifyContent: \"center\",\n backgroundColor: colors.white[10],\n color: colors.neutral[80],\n paddingVertical: Space.xs,\n paddingHorizontal: Space.medium,\n fontSize: FontSizes.fontLarge,\n borderWidth: 0,\n },\n picker: {\n width: pw(100),\n },\n pickerIconContainer: {\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n rightBtn: {\n width: pw(52),\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n});\n"],"names":["pw"],"mappings":"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"}
1
+ {"version":3,"file":"InputField.js","sources":["../../../../components/Inputs/InputField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport {\n KeyboardTypeOptions,\n NativeSyntheticEvent,\n Pressable,\n StyleProp,\n StyleSheet,\n TextInputEndEditingEventData,\n TextStyle,\n View,\n ViewStyle,\n} from \"react-native\";\nimport MaskInput, { Mask } from \"react-native-mask-input\";\nimport Text from \"@ui/components/Text\";\nimport { FontSizes, Space, colors, metrics, pw } from \"@ui/themes\";\nimport CountryCode from \"../../jsons/CountryCode.json\";\nimport { Icon, SelectField } from \"@ui/components\";\nimport { inputFieldFontSize, inputFieldHeight } from \"./styles\";\nimport { useDebounce } from \"@ui/hooks\";\n\ntype SelectItemT = {\n label: string;\n value: string;\n};\n\nexport const InputField = ({\n value,\n label,\n placeholder,\n errMessage,\n size = 'medium',\n variant = 'default',\n type = 'default',\n labelSize,\n isShowPassword = true,\n disabled = false,\n isHideIcon = false,\n maxLength,\n keyboardType,\n debounceTime = 0,\n mask,\n obfuscationCharacter,\n showObfuscatedValue = false,\n isPhoneNumber = false,\n onChangeText,\n onEndEditing,\n onToggleShowPassword,\n onSearch,\n onDebounceChangeText,\n onSubmitEditing,\n onBlur,\n}: {\n value: string;\n label?: string;\n errMessage?: string;\n placeholder?: string;\n isShowPassword?: boolean;\n disabled?: boolean;\n size?: 'small' | 'medium' | 'large';\n isPhoneNumber?: boolean;\n labelSize?:\n | 'xxxs'\n | 'xxs'\n | 'xs'\n | 'small'\n | 'medium'\n | 'large'\n | 'xl'\n | 'xxl'\n | 'xxxl'\n | 'xxxxl';\n variant?: 'default' | 'quite' | 'none';\n type?: 'default' | 'phone-number' | 'password' | 'search';\n isHideIcon?: boolean;\n maxLength?: number;\n keyboardType?: KeyboardTypeOptions;\n debounceTime?: number;\n mask?: Mask;\n obfuscationCharacter?: string;\n showObfuscatedValue?: boolean;\n onChangeText?: (\n text: string,\n maskedText?: string,\n obfuscatedText?: string,\n ) => void;\n onEndEditing?: (text: string) => void;\n onToggleShowPassword?: () => void;\n onSearch?: () => void;\n onDebounceChangeText?: (text: string) => void;\n onSubmitEditing?: (text: string) => void;\n onBlur?: (text: string) => void;\n}) => {\n const {height, fontSize} = useMemo(\n () => ({\n height: inputFieldHeight[size],\n fontSize: inputFieldFontSize[size],\n }),\n [size],\n );\n const inputHeightStyle: StyleProp<TextStyle> = {\n backgroundColor: disabled ? colors.neutral[20] : colors.white[10],\n height: height - 2,\n fontSize,\n };\n const inputWrapperHeightStyle: StyleProp<ViewStyle> = {\n height: height,\n backgroundColor: disabled ? colors.neutral[20] : colors.white[10],\n };\n const inputWrapperBorderStyle: StyleProp<ViewStyle> = {\n borderRadius: variant === 'default' ? metrics.borderRadiusBase : 0,\n borderWidth:\n variant === 'default'\n ? metrics.borderWidthMedium\n : metrics.borderWidthNone,\n borderColor: disabled\n ? colors.neutral[20]\n : errMessage\n ? colors.red[90]\n : colors.neutral[60],\n borderBottomWidth:\n variant === 'none' ? metrics.borderWidthNone : metrics.borderWidthMedium,\n };\n\n const inputBorderStyle: StyleProp<TextStyle> = {\n borderLeftWidth: variant === 'default' ? metrics.borderWidthMedium : 0,\n borderLeftColor: disabled\n ? colors.neutral[20]\n : errMessage\n ? colors.red[90]\n : colors.neutral[60],\n };\n const countryCodeList = useMemo(\n () =>\n [].map((country: any) => ({\n label: country.dial_code,\n value: country.dial_code,\n })),\n [],\n );\n const [countryCodeValue, setCountryCodeValue] = useState<SelectItemT>(\n countryCodeList[0],\n );\n const [inputValue, setInputValue] = useState(value || '');\n const debouncedOnChangeText = useDebounce(inputValue, debounceTime);\n\n useEffect(() => {\n if (onDebounceChangeText) {\n onDebounceChangeText(debouncedOnChangeText);\n }\n }, [debouncedOnChangeText, onDebounceChangeText]);\n\n useEffect(() => {\n if (isPhoneNumber) {\n setInputValue(value || '');\n }\n }, [value, isPhoneNumber]);\n\n const handleEndEdit = (\n e: NativeSyntheticEvent<TextInputEndEditingEventData>,\n ) => {\n if (onEndEditing) {\n if (\n type === 'phone-number' &&\n countryCodeValue &&\n debouncedOnChangeText\n ) {\n onEndEditing(countryCodeValue.value + e.nativeEvent.text);\n } else {\n onEndEditing(e.nativeEvent.text);\n }\n }\n };\n const handleToggleShowPassword = () => {\n onToggleShowPassword && onToggleShowPassword();\n };\n const handleSearch = () => onSearch && onSearch();\n\n const handleSubmitEditing = () => {\n if (onSubmitEditing) {\n onSubmitEditing(inputValue);\n }\n };\n\n const handleChangeText = (\n maskedText: string,\n text: string,\n obfuscatedText?: string,\n ) => {\n setInputValue(maskedText);\n if (onChangeText) {\n if (text) {\n if (type === 'phone-number' && countryCodeValue && text) {\n onChangeText(\n countryCodeValue.value + text,\n maskedText,\n obfuscatedText,\n );\n } else {\n onChangeText(text, maskedText, obfuscatedText);\n }\n } else {\n setInputValue('');\n onChangeText('', maskedText, obfuscatedText);\n }\n }\n };\n\n const handleBlur = () => {\n if (onBlur) {\n if (type === 'phone-number' && countryCodeValue && inputValue) {\n onBlur(countryCodeValue.value + inputValue);\n } else {\n onBlur(inputValue);\n }\n }\n };\n\n return (\n <View style={styles.inputFieldContainer}>\n {label && <Text size={labelSize || size}>{label}</Text>}\n <View>\n <View\n style={[\n styles.inputFieldWrapper,\n inputWrapperHeightStyle,\n inputWrapperBorderStyle,\n ]}>\n {type === 'phone-number' && (\n <SelectField\n value={countryCodeValue}\n listData={countryCodeList}\n cusHeight={height - 2}\n disabled={disabled}\n variant=\"none\"\n size={size}\n cusWidth={pw(100)}\n onChangeValue={setCountryCodeValue}\n />\n )}\n <MaskInput\n value={inputValue}\n editable={!disabled}\n secureTextEntry={type === 'password' && isShowPassword}\n onEndEditing={handleEndEdit}\n obfuscationCharacter={obfuscationCharacter}\n showObfuscatedValue={showObfuscatedValue}\n onChangeText={(\n masked: string,\n unmasked: string,\n obfuscated: string,\n ) => {\n handleChangeText(masked, unmasked, obfuscated);\n }}\n placeholder={placeholder}\n keyboardType={keyboardType || 'default'}\n style={[\n styles.inputFieldBox,\n inputHeightStyle,\n type === 'phone-number' && inputBorderStyle,\n ]}\n mask={mask || undefined}\n maxLength={maxLength}\n onBlur={handleBlur}\n onSubmitEditing={handleSubmitEditing}\n />\n {!isHideIcon && type === 'password' && (\n <Pressable\n disabled={disabled}\n onPress={handleToggleShowPassword}\n style={[styles.rightBtn, inputBorderStyle]}>\n <Icon name=\"ic_eye\" />\n </Pressable>\n )}\n {type === 'search' && (\n <Pressable\n disabled={disabled}\n onPress={handleSearch}\n style={[styles.rightBtn, inputBorderStyle]}>\n <Icon name=\"ic_search\" />\n </Pressable>\n )}\n </View>\n {errMessage && (\n <Text color=\"error\" size=\"xs\">\n {errMessage}\n </Text>\n )}\n </View>\n </View>\n );\n};\n\nconst styles = StyleSheet.create({\n inputFieldContainer: {\n gap: Space.xs,\n width: '100%',\n },\n inputFieldWrapper: {\n flexDirection: 'row',\n width: '100%',\n overflow: 'hidden',\n },\n innerInputFieldWrapper: {\n flex: 1,\n },\n inputFieldMaskedBox: {\n flexGrow: 1,\n justifyContent: 'center',\n backgroundColor: colors.white[10],\n color: colors.neutral[80],\n paddingVertical: Space.xs,\n },\n inputFieldBoxAbsolute: {\n position: 'absolute',\n // opacity: 0,\n backgroundColor: 'transparent',\n },\n inputFieldBox: {\n flexGrow: 1,\n justifyContent: 'center',\n backgroundColor: colors.white[10],\n color: colors.neutral[80],\n paddingVertical: Space.xs,\n paddingHorizontal: Space.medium,\n fontSize: FontSizes.fontLarge,\n borderWidth: 0,\n },\n picker: {\n width: pw(100),\n },\n pickerIconContainer: {\n alignItems: 'center',\n justifyContent: 'center',\n },\n rightBtn: {\n width: pw(52),\n justifyContent: 'center',\n alignItems: 'center',\n },\n});\n"],"names":["pw"],"mappings":"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"}
package/dist/yup/regex.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"regex.d.ts","sourceRoot":"","sources":["../../yup/regex.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,QAA+B,CAAC;AAC/D,eAAO,MAAM,cAAc,QAC8J,CAAC;AAC1L,eAAO,MAAM,WAAW,QACyD,CAAC;AAElF,eAAO,MAAM,UAAU,QAAiD,CAAC;AACzE,eAAO,MAAM,eAAe,QAAuB,CAAC;AAEpD,eAAO,MAAM,oBAAoB,QAAgB,CAAC;AAElD,eAAO,MAAM,mBAAmB,QAAY,CAAC;AAE7C,eAAO,MAAM,eAAe,QACyB,CAAC;AACtD,eAAO,MAAM,qBAAqB,QAAoB,CAAC;AACvD,eAAO,MAAM,eAAe,QAAoB,CAAC;AACjD,eAAO,MAAM,eAAe,QAAyB,CAAC;AAEtD,eAAO,MAAM,YAAY,QAAY,CAAC;AACtC,eAAO,MAAM,eAAe,QAA0B,CAAC;AAEvD,eAAO,MAAM,YAAY,QAAU,CAAC;AAEpC,eAAO,MAAM,cAAc,QAAoD,CAAC"}
1
+ {"version":3,"file":"regex.d.ts","sourceRoot":"","sources":["../../yup/regex.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,QAA6D,CAAC;AAC7F,eAAO,MAAM,cAAc,QAC8J,CAAC;AAC1L,eAAO,MAAM,WAAW,QACyD,CAAC;AAElF,eAAO,MAAM,UAAU,QAAiD,CAAC;AACzE,eAAO,MAAM,eAAe,QAAuB,CAAC;AAEpD,eAAO,MAAM,oBAAoB,QAAgB,CAAC;AAElD,eAAO,MAAM,mBAAmB,QAAY,CAAC;AAE7C,eAAO,MAAM,eAAe,QACyB,CAAC;AACtD,eAAO,MAAM,qBAAqB,QAAoB,CAAC;AACvD,eAAO,MAAM,eAAe,QAAoB,CAAC;AACjD,eAAO,MAAM,eAAe,QAAyB,CAAC;AAEtD,eAAO,MAAM,YAAY,QAAY,CAAC;AACtC,eAAO,MAAM,eAAe,QAA0B,CAAC;AAEvD,eAAO,MAAM,YAAY,QAAU,CAAC;AAEpC,eAAO,MAAM,cAAc,QAAoD,CAAC"}
package/dist/yup/regex.js CHANGED
@@ -1,6 +1,6 @@
1
1
  // export const REGEX_EMAIL =
2
2
  // /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
3
- const REGEX_PHONE_NUMBER = /^(070|080|090|084)\d{8,9}$/;
3
+ const REGEX_PHONE_NUMBER = /^(?:\+81[1-9]\d{8,9}|\+84\d{9}|(070|080|090|03)\d{8,9})$/;
4
4
  const REGEX_PASSWORD = /^(?:(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])|(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*])|(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*])|(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*]))[A-Za-z0-9!@#$%^&*]{8,64}$/;
5
5
  const REGEX_EMAIL = /^(?!.*\.\.)[a-zA-Z0-9][a-zA-Z0-9._%+-]*[a-zA-Z0-9]@[a-zA-Z0-9.-]+\.[a-zA-Z]+$/;
6
6
  const REGEX_NAME = /^[\u3040-\u309F\u30A0-\u30FF\u4E00-\u9FFF]+$/;
package/dist/yup/regex.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"regex.js","sources":["../../../yup/regex.ts"],"sourcesContent":["// export const REGEX_EMAIL =\n// /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\nexport const REGEX_PHONE_NUMBER = /^(070|080|090|084)\\d{8,9}$/;\nexport const REGEX_PASSWORD =\n /^(?:(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])|(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*])|(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*])|(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*]))[A-Za-z0-9!@#$%^&*]{8,64}$/;\nexport const REGEX_EMAIL =\n /^(?!.*\\.\\.)[a-zA-Z0-9][a-zA-Z0-9._%+-]*[a-zA-Z0-9]@[a-zA-Z0-9.-]+\\.[a-zA-Z]+$/;\n\nexport const REGEX_NAME = /^[\\u3040-\\u309F\\u30A0-\\u30FF\\u4E00-\\u9FFF]+$/;\nexport const REGEX_NAME_KANA = /^[\\uFF61-\\uFF9F]+$/;\n\nexport const REGEX_NAME_ROMANIZED = /^[A-Za-z]+$/;\n\nexport const REGEX_BIRTH_OF_DATE = /^\\d{8}$/;\n\nexport const REGEX_FULL_NAME =\n /^[\\u3040-\\u309F\\u30A0-\\u30FF\\u4E00-\\u9FFF]{1,30}$/;\nexport const REGEX_PREFECTURE_NAME = /^[^\\x01-\\x7E]+$/;\nexport const REGEX_ADDRESS_1 = /^[^\\x01-\\x7E]+$/;\nexport const REGEX_ADDRESS_2 = /^[^\\x01-\\x7E]{0,60}$/;\n\nexport const REGEX_GENDER = /^[123]$/;\nexport const REGEX_POST_CODE = /^\\d{7}$|^\\d{3}-\\d{4}$/;\n/^(?=.*[A-Za-z])(?=.*\\d)(?=.*[@$!%*?&])[A-Za-z\\d@$!%*?&]{6,}$/;\nexport const REGEX_NUMBER = /^\\d+$/;\n\nexport const REGEX_BIRTHDAY = /^\\d{4}\\/(0[1-9]|1[0-2])\\/(0[1-9]|[12]\\d|3[01])$/;\n"],"names":[],"mappings":"AAAA;AACA;AACO,MAAM,kBAAkB,GAAG;AAC3B,MAAM,cAAc,GACzB;AACK,MAAM,WAAW,GACtB;AAEK,MAAM,UAAU,GAAG;AACnB,MAAM,eAAe,GAAG;AAExB,MAAM,oBAAoB,GAAG;AAE7B,MAAM,mBAAmB,GAAG;AAE5B,MAAM,eAAe,GAC1B;AACK,MAAM,qBAAqB,GAAG;AAC9B,MAAM,eAAe,GAAG;AACxB,MAAM,eAAe,GAAG;AAExB,MAAM,YAAY,GAAG;AACrB,MAAM,eAAe,GAAG;AAExB,MAAM,YAAY,GAAG;AAErB,MAAM,cAAc,GAAG;;;;"}
1
+ {"version":3,"file":"regex.js","sources":["../../../yup/regex.ts"],"sourcesContent":["// export const REGEX_EMAIL =\n// /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\nexport const REGEX_PHONE_NUMBER = /^(?:\\+81[1-9]\\d{8,9}|\\+84\\d{9}|(070|080|090|03)\\d{8,9})$/;\nexport const REGEX_PASSWORD =\n /^(?:(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])|(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*])|(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*])|(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*]))[A-Za-z0-9!@#$%^&*]{8,64}$/;\nexport const REGEX_EMAIL =\n /^(?!.*\\.\\.)[a-zA-Z0-9][a-zA-Z0-9._%+-]*[a-zA-Z0-9]@[a-zA-Z0-9.-]+\\.[a-zA-Z]+$/;\n\nexport const REGEX_NAME = /^[\\u3040-\\u309F\\u30A0-\\u30FF\\u4E00-\\u9FFF]+$/;\nexport const REGEX_NAME_KANA = /^[\\uFF61-\\uFF9F]+$/;\n\nexport const REGEX_NAME_ROMANIZED = /^[A-Za-z]+$/;\n\nexport const REGEX_BIRTH_OF_DATE = /^\\d{8}$/;\n\nexport const REGEX_FULL_NAME =\n /^[\\u3040-\\u309F\\u30A0-\\u30FF\\u4E00-\\u9FFF]{1,30}$/;\nexport const REGEX_PREFECTURE_NAME = /^[^\\x01-\\x7E]+$/;\nexport const REGEX_ADDRESS_1 = /^[^\\x01-\\x7E]+$/;\nexport const REGEX_ADDRESS_2 = /^[^\\x01-\\x7E]{0,60}$/;\n\nexport const REGEX_GENDER = /^[123]$/;\nexport const REGEX_POST_CODE = /^\\d{7}$|^\\d{3}-\\d{4}$/;\n/^(?=.*[A-Za-z])(?=.*\\d)(?=.*[@$!%*?&])[A-Za-z\\d@$!%*?&]{6,}$/;\nexport const REGEX_NUMBER = /^\\d+$/;\n\nexport const REGEX_BIRTHDAY = /^\\d{4}\\/(0[1-9]|1[0-2])\\/(0[1-9]|[12]\\d|3[01])$/;\n"],"names":[],"mappings":"AAAA;AACA;AACO,MAAM,kBAAkB,GAAG;AAC3B,MAAM,cAAc,GACzB;AACK,MAAM,WAAW,GACtB;AAEK,MAAM,UAAU,GAAG;AACnB,MAAM,eAAe,GAAG;AAExB,MAAM,oBAAoB,GAAG;AAE7B,MAAM,mBAAmB,GAAG;AAE5B,MAAM,eAAe,GAC1B;AACK,MAAM,qBAAqB,GAAG;AAC9B,MAAM,eAAe,GAAG;AACxB,MAAM,eAAe,GAAG;AAExB,MAAM,YAAY,GAAG;AACrB,MAAM,eAAe,GAAG;AAExB,MAAM,YAAY,GAAG;AAErB,MAAM,cAAc,GAAG;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@meatech/payblend_app_ui_component",
3
- "version": "1.0.84",
3
+ "version": "1.0.86",
4
4
  "description": "UI Component Library for Payblend App",
5
5
  "main": "./dist/components/index.js",
6
6
  "module": "./dist/components/index.js",
package/yup/regex.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  // export const REGEX_EMAIL =
2
2
  // /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
3
- export const REGEX_PHONE_NUMBER = /^(070|080|090|084)\d{8,9}$/;
3
+ export const REGEX_PHONE_NUMBER = /^(?:\+81[1-9]\d{8,9}|\+84\d{9}|(070|080|090|03)\d{8,9})$/;
4
4
  export const REGEX_PASSWORD =
5
5
  /^(?:(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])|(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*])|(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*])|(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*]))[A-Za-z0-9!@#$%^&*]{8,64}$/;
6
6
  export const REGEX_EMAIL =