sapo-components-ui-rn 1.0.76 → 1.0.78

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/dist/index.js CHANGED
@@ -6017,8 +6017,15 @@ var TextInputNumber = function (_a) {
6017
6017
  setInputValue(function (prev) { return prev.slice(0, -1); });
6018
6018
  }
6019
6019
  else if (key === "000") {
6020
- if (type === "integer" && inputValue.length > 0) {
6021
- setInputValue(function (prev) { return prev + "000"; });
6020
+ if (type === "integer") {
6021
+ var newInputValue = inputValue + "000";
6022
+ var newValue = Number(newInputValue);
6023
+ var maxValueNumber = Number(maxValue);
6024
+ if (!isNaN(newValue) &&
6025
+ !isNaN(maxValueNumber) &&
6026
+ newValue <= maxValueNumber) {
6027
+ setInputValue(newInputValue);
6028
+ }
6022
6029
  setIsFirstInput(false);
6023
6030
  }
6024
6031
  }
@@ -6040,6 +6047,20 @@ var TextInputNumber = function (_a) {
6040
6047
  setIsFirstInput(false);
6041
6048
  }
6042
6049
  else {
6050
+ // Kiểm tra nếu input bắt đầu bằng 0 và không có dấu chấm
6051
+ if (inputValue === "0") {
6052
+ if (key === ".") {
6053
+ setInputValue("0.");
6054
+ return;
6055
+ }
6056
+ else if (key >= "1" && key <= "9") {
6057
+ setInputValue(key);
6058
+ return;
6059
+ }
6060
+ else {
6061
+ return;
6062
+ }
6063
+ }
6043
6064
  var newInputValue = inputValue + key;
6044
6065
  var newValue = Number(newInputValue);
6045
6066
  var maxValueNumber = Number(maxValue);
@@ -6047,16 +6068,16 @@ var TextInputNumber = function (_a) {
6047
6068
  !isNaN(maxValueNumber) &&
6048
6069
  newValue <= maxValueNumber) {
6049
6070
  if (inputValue.includes(".")) {
6050
- var _a = inputValue.split("."), intPart = _a[0], _b = _a[1], decimalPart = _b === void 0 ? "" : _b;
6051
- if (intPart.length < 12 && decimalPart.length === 0) {
6071
+ var _a = inputValue.split("."); _a[0]; var _b = _a[1], decimalPart = _b === void 0 ? "" : _b;
6072
+ if (newInputValue.length <= 12 && decimalPart.length === 0) {
6052
6073
  setInputValue(function (prev) { return prev + key; });
6053
6074
  }
6054
- else if (decimalPart.length < 3) {
6075
+ else if (newInputValue.length <= 12 && decimalPart.length < 3) {
6055
6076
  setInputValue(function (prev) { return prev + key; });
6056
6077
  }
6057
6078
  }
6058
6079
  else {
6059
- if (inputValue.length < 12) {
6080
+ if (newInputValue.length <= 12) {
6060
6081
  setInputValue(function (prev) { return prev + key; });
6061
6082
  }
6062
6083
  }
@@ -6111,7 +6132,14 @@ var TextInputNumber = function (_a) {
6111
6132
  {
6112
6133
  borderRadius: BORDER_RADIUS_6,
6113
6134
  },
6114
- [styles$b.border, { borderColor: colors.borderPrimaryDefault }],
6135
+ [
6136
+ styles$b.border,
6137
+ {
6138
+ borderColor: isShowModalKeyboard
6139
+ ? colors.borderBrandDefault
6140
+ : colors.borderPrimaryDefault,
6141
+ },
6142
+ ],
6115
6143
  textError.length > 0 && [
6116
6144
  {
6117
6145
  borderColor: colors.borderErrorDefault,
@@ -6163,10 +6191,10 @@ var TextInputNumber = function (_a) {
6163
6191
  React__default["default"].createElement(reactNative.Modal, { visible: isShowModalKeyboard, transparent: true, animationType: "fade", onRequestClose: onCloseModalKeyboard },
6164
6192
  React__default["default"].createElement(reactNative.TouchableOpacity, { style: styles$b.modalOverlay, activeOpacity: 1, onPress: onCloseModalKeyboard },
6165
6193
  React__default["default"].createElement(View, { onPress: function () { }, activeOpacity: 1, backgroundColor: colors.surfacePrimaryDefault, style: styles$b.modalContent },
6166
- React__default["default"].createElement(Text$1, { style: styles$b.modalTitle }, label),
6194
+ React__default["default"].createElement(Text$1, { style: [styles$b.modalTitle, styles$b.text18] }, label),
6167
6195
  React__default["default"].createElement(View, { width: "100%" },
6168
6196
  React__default["default"].createElement(View, { paddingHorizontal: SPACE_40 },
6169
- React__default["default"].createElement(Text$1, { numberOfLines: 1, style: styles$b.valueText }, formatNumberInput$1(inputValue, formatDecimal) || "0")),
6197
+ React__default["default"].createElement(Text$1, { numberOfLines: 1, style: [styles$b.text30, styles$b.valueText] }, formatNumberInput$1(inputValue, formatDecimal) || "0")),
6170
6198
  React__default["default"].createElement(reactNative.TouchableOpacity, { onPress: handleClear, style: styles$b.clearButton },
6171
6199
  React__default["default"].createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24, color: colors.textSecondary }))),
6172
6200
  React__default["default"].createElement(View, { style: styles$b.keyboardGrid }, [
@@ -6183,6 +6211,7 @@ var TextInputNumber = function (_a) {
6183
6211
  ], onPress: function () { return handleKeyPress(key); }, disabled: (key === "000" && type === "float") ||
6184
6212
  (key === "." && inputValue.includes(".")) }, key === "del" ? (React__default["default"].createElement(Icon$1, { name: "IconDelNumber", type: "Svg", size: 24 })) : (React__default["default"].createElement(Text$1, { style: [
6185
6213
  styles$b.keyText,
6214
+ styles$b.text22,
6186
6215
  key === "000" &&
6187
6216
  type === "float" &&
6188
6217
  styles$b.disabledKeyText,
@@ -6192,13 +6221,14 @@ var TextInputNumber = function (_a) {
6192
6221
  ] }, key)))); }))); })),
6193
6222
  React__default["default"].createElement(View, { style: styles$b.actionRow },
6194
6223
  React__default["default"].createElement(reactNative.TouchableOpacity, { activeOpacity: 0.8, style: styles$b.actionButton, onPress: onCloseModalKeyboard },
6195
- React__default["default"].createElement(Text$1, { style: styles$b.actionText }, "\u0110\u00F3ng")),
6224
+ React__default["default"].createElement(Text$1, { style: [styles$b.actionText, styles$b.text16] }, "\u0110\u00F3ng")),
6196
6225
  React__default["default"].createElement(Spacer, { style: {
6197
6226
  height: "100%",
6198
6227
  }, width: 1, backgroundColor: colors.borderPrimaryDefault }),
6199
6228
  React__default["default"].createElement(reactNative.TouchableOpacity, { activeOpacity: 0.8, style: [styles$b.actionButton, !canSave && { opacity: 0.5 }], onPress: handleSave, disabled: !canSave },
6200
6229
  React__default["default"].createElement(Text$1, { style: [
6201
6230
  styles$b.actionText,
6231
+ styles$b.text16,
6202
6232
  { color: colors.textBrandDefault },
6203
6233
  !canSave && { color: colors.textSecondary },
6204
6234
  ] }, "L\u01B0u"))))))));
@@ -6224,12 +6254,10 @@ var styles$b = reactNative.StyleSheet.create(__assign(__assign({}, containerStyl
6224
6254
  paddingBottom: 20,
6225
6255
  alignItems: "center",
6226
6256
  }, modalTitle: {
6227
- fontSize: 18,
6228
6257
  textAlign: "center",
6229
6258
  marginTop: 16,
6230
6259
  marginBottom: 8,
6231
6260
  }, valueText: {
6232
- fontSize: 30,
6233
6261
  textAlign: "center",
6234
6262
  }, clearButton: {
6235
6263
  padding: 8,
@@ -6251,7 +6279,6 @@ var styles$b = reactNative.StyleSheet.create(__assign(__assign({}, containerStyl
6251
6279
  justifyContent: "center",
6252
6280
  height: 48,
6253
6281
  }, keyText: {
6254
- fontSize: 22,
6255
6282
  fontWeight: "500",
6256
6283
  }, actionRow: {
6257
6284
  flexDirection: "row",
@@ -6264,7 +6291,6 @@ var styles$b = reactNative.StyleSheet.create(__assign(__assign({}, containerStyl
6264
6291
  alignItems: "center",
6265
6292
  paddingVertical: 12,
6266
6293
  }, actionText: {
6267
- fontSize: 16,
6268
6294
  fontWeight: "600",
6269
6295
  }, disabledKey: {
6270
6296
  opacity: 0.5,
@@ -7219,7 +7245,7 @@ var styles$3 = reactNative.StyleSheet.create({
7219
7245
  });
7220
7246
 
7221
7247
  var SelectionField = function (_a) {
7222
- var style = _a.style, _b = _a.content, content = _b === void 0 ? "" : _b, _c = _a.label, label = _c === void 0 ? "" : _c, _d = _a.error, error = _d === void 0 ? "" : _d, borderColor = _a.borderColor; _a.left; var right = _a.right, textStyle = _a.textStyle; _a.labelStyle; var textProps = _a.textProps, onPress = _a.onPress, _e = _a.disabled, disabled = _e === void 0 ? false : _e, textColor = _a.textColor, labelColor = _a.labelColor, _f = _a.size, size = _f === void 0 ? 16 : _f; _a.theme; var _g = _a.required, required = _g === void 0 ? false : _g, props = __rest(_a, ["style", "content", "label", "error", "borderColor", "left", "right", "textStyle", "labelStyle", "textProps", "onPress", "disabled", "textColor", "labelColor", "size", "theme", "required"]);
7248
+ var style = _a.style, _b = _a.content, content = _b === void 0 ? "" : _b, _c = _a.label, label = _c === void 0 ? "" : _c, _d = _a.error, error = _d === void 0 ? "" : _d, borderColor = _a.borderColor; _a.left; var right = _a.right, textStyle = _a.textStyle; _a.labelStyle; var textProps = _a.textProps, onPress = _a.onPress, _e = _a.disabled, disabled = _e === void 0 ? false : _e, textColor = _a.textColor, labelColor = _a.labelColor; _a.theme; var _f = _a.required, required = _f === void 0 ? false : _f, props = __rest(_a, ["style", "content", "label", "error", "borderColor", "left", "right", "textStyle", "labelStyle", "textProps", "onPress", "disabled", "textColor", "labelColor", "theme", "required"]);
7223
7249
  var theme = useInternalTheme();
7224
7250
  var colors = theme.colors;
7225
7251
  var disabledTextStyle = {
@@ -7272,7 +7298,7 @@ var SelectionField = function (_a) {
7272
7298
  ] },
7273
7299
  label,
7274
7300
  required && React__default["default"].createElement(Text$1, { color: colors.textErrorDefault }, " *"))),
7275
- React__default["default"].createElement(Text$1, __assign({ numberOfLines: 1, color: getColor(), size: size, style: [disabled && disabledTextStyle, textStyle] }, textProps),
7301
+ React__default["default"].createElement(Text$1, __assign({ numberOfLines: 1, color: getColor(), style: [disabled && disabledTextStyle, textStyle] }, textProps),
7276
7302
  content.toString() === "" ? label : content,
7277
7303
  required && content.toString() === "" && (React__default["default"].createElement(Text$1, { color: colors.textErrorDefault }, " *")))),
7278
7304
  right || React__default["default"].createElement(Icon$1, { name: "IconArrowDown", type: "Svg", size: 24 }),
@@ -7369,17 +7395,25 @@ var formatNumberInput = function (value, formatDecimal) {
7369
7395
  return result;
7370
7396
  };
7371
7397
  var NumberKeyboard = function (_a) {
7372
- var _b = _a.value, value = _b === void 0 ? "" : _b, _c = _a.label, label = _c === void 0 ? "" : _c, onChangeText = _a.onChangeText, _d = _a.maxValue, maxValue = _d === void 0 ? 999999999999 : _d, _e = _a.type, type = _e === void 0 ? "integer" : _e, _f = _a.formatDecimal, formatDecimal = _f === void 0 ? 3 : _f, visible = _a.visible, onClose = _a.onClose;
7398
+ var _b = _a.value, value = _b === void 0 ? "" : _b, _c = _a.label, label = _c === void 0 ? "" : _c, onChangeText = _a.onChangeText, _d = _a.maxValue, maxValue = _d === void 0 ? 999999999999 : _d, _e = _a.minValue, minValue = _e === void 0 ? 0 : _e, _f = _a.type, type = _f === void 0 ? "integer" : _f, _g = _a.formatDecimal, formatDecimal = _g === void 0 ? 3 : _g, visible = _a.visible, onClose = _a.onClose;
7373
7399
  var theme = useInternalTheme();
7374
7400
  var colors = theme.colors;
7375
- var _g = React$3.useState((value === null || value === void 0 ? void 0 : value.toString()) || ""), inputValue = _g[0], setInputValue = _g[1];
7376
- var _h = React$3.useState(true), isFirstInput = _h[0], setIsFirstInput = _h[1];
7401
+ var _h = React$3.useState((value === null || value === void 0 ? void 0 : value.toString()) || ""), inputValue = _h[0], setInputValue = _h[1];
7402
+ var _j = React$3.useState(true), isFirstInput = _j[0], setIsFirstInput = _j[1];
7403
+ var _k = React$3.useState(true), canSave = _k[0], setCanSave = _k[1];
7377
7404
  React$3.useEffect(function () {
7378
7405
  if (visible) {
7379
7406
  setInputValue((value === null || value === void 0 ? void 0 : value.toString()) || "");
7380
7407
  setIsFirstInput(true);
7381
7408
  }
7382
7409
  }, [visible, value]);
7410
+ React$3.useEffect(function () {
7411
+ var currentValue = Number(inputValue);
7412
+ var minValueNumber = Number(minValue);
7413
+ setCanSave(!isNaN(currentValue) &&
7414
+ !isNaN(minValueNumber) &&
7415
+ currentValue >= minValueNumber);
7416
+ }, [inputValue, minValue]);
7383
7417
  var handleKeyPress = React$3.useCallback(function (key) {
7384
7418
  if (key === "del") {
7385
7419
  setInputValue(function (prev) { return prev.slice(0, -1); });
@@ -7388,14 +7422,20 @@ var NumberKeyboard = function (_a) {
7388
7422
  }
7389
7423
  if (key === "000") {
7390
7424
  if (type === "integer" && inputValue.length > 0) {
7391
- setInputValue(function (prev) { return prev + "000"; });
7425
+ var newInputValue_1 = inputValue + "000";
7426
+ var newValue_1 = Number(newInputValue_1);
7427
+ var maxValueNumber_1 = Number(maxValue);
7428
+ if (!isNaN(newValue_1) &&
7429
+ !isNaN(maxValueNumber_1) &&
7430
+ newValue_1 <= maxValueNumber_1) {
7431
+ setInputValue(newInputValue_1);
7432
+ }
7392
7433
  setIsFirstInput(false);
7393
7434
  }
7394
7435
  return;
7395
7436
  }
7396
7437
  if (key === ".") {
7397
7438
  if (type === "float" && !inputValue.includes(".")) {
7398
- // Nếu inputValue là "0" hoặc rỗng, giữ lại số 0 và thêm dấu "."
7399
7439
  if (inputValue === "0" || inputValue === "") {
7400
7440
  setInputValue("0.");
7401
7441
  }
@@ -7411,6 +7451,20 @@ var NumberKeyboard = function (_a) {
7411
7451
  setIsFirstInput(false);
7412
7452
  return;
7413
7453
  }
7454
+ // Kiểm tra nếu input bắt đầu bằng 0 và không có dấu chấm
7455
+ if (inputValue === "0") {
7456
+ if (key === ".") {
7457
+ setInputValue("0.");
7458
+ return;
7459
+ }
7460
+ else if (key >= "1" && key <= "9") {
7461
+ setInputValue(key);
7462
+ return;
7463
+ }
7464
+ else {
7465
+ return;
7466
+ }
7467
+ }
7414
7468
  var newInputValue = inputValue + key;
7415
7469
  var newValue = Number(newInputValue);
7416
7470
  var maxValueNumber = Number(maxValue);
@@ -7434,17 +7488,19 @@ var NumberKeyboard = function (_a) {
7434
7488
  }
7435
7489
  }, [inputValue, maxValue, type, formatDecimal, isFirstInput]);
7436
7490
  var handleClear = React$3.useCallback(function () {
7437
- setInputValue("0");
7491
+ setInputValue("");
7438
7492
  setIsFirstInput(true);
7439
7493
  }, []);
7440
7494
  var handleSave = React$3.useCallback(function () {
7495
+ if (!canSave)
7496
+ return;
7441
7497
  var finalValue = inputValue;
7442
7498
  if (inputValue.endsWith(".")) {
7443
7499
  finalValue = inputValue.slice(0, -1);
7444
7500
  }
7445
7501
  onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(finalValue);
7446
7502
  onClose();
7447
- }, [inputValue, onChangeText, onClose]);
7503
+ }, [inputValue, onChangeText, onClose, canSave]);
7448
7504
  var handleClose = React$3.useCallback(function () {
7449
7505
  onClose();
7450
7506
  setIsFirstInput(true);
@@ -7452,10 +7508,10 @@ var NumberKeyboard = function (_a) {
7452
7508
  return (React__default["default"].createElement(reactNative.Modal, { visible: visible, transparent: true, animationType: "fade", onRequestClose: handleClose },
7453
7509
  React__default["default"].createElement(reactNative.TouchableOpacity, { style: styles.modalOverlay, activeOpacity: 1, onPress: handleClose },
7454
7510
  React__default["default"].createElement(View, { onPress: function () { }, activeOpacity: 1, backgroundColor: colors.surfacePrimaryDefault, style: styles.modalContent },
7455
- React__default["default"].createElement(Text$1, { style: styles.modalTitle }, label),
7511
+ React__default["default"].createElement(Text$1, { style: [styles.text18, styles.modalTitle] }, label),
7456
7512
  React__default["default"].createElement(View, { width: "100%" },
7457
7513
  React__default["default"].createElement(View, { paddingHorizontal: SPACE_40 },
7458
- React__default["default"].createElement(Text$1, { numberOfLines: 1, style: styles.valueText }, formatNumberInput(inputValue, formatDecimal) || "0")),
7514
+ React__default["default"].createElement(Text$1, { numberOfLines: 1, style: [styles.text30, styles.valueText] }, formatNumberInput(inputValue, formatDecimal) || "0")),
7459
7515
  React__default["default"].createElement(reactNative.TouchableOpacity, { onPress: handleClear, style: styles.clearButton },
7460
7516
  React__default["default"].createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24, color: colors.textSecondary }))),
7461
7517
  React__default["default"].createElement(View, { style: styles.keyboardGrid }, [
@@ -7472,6 +7528,7 @@ var NumberKeyboard = function (_a) {
7472
7528
  ], onPress: function () { return handleKeyPress(key); }, disabled: (key === "000" && type === "float") ||
7473
7529
  (key === "." && inputValue.includes(".")) }, key === "del" ? (React__default["default"].createElement(Icon$1, { name: "IconDelNumber", type: "Svg", size: 24 })) : (React__default["default"].createElement(Text$1, { style: [
7474
7530
  styles.keyText,
7531
+ styles.text22,
7475
7532
  key === "000" &&
7476
7533
  type === "float" &&
7477
7534
  styles.disabledKeyText,
@@ -7481,10 +7538,14 @@ var NumberKeyboard = function (_a) {
7481
7538
  ] }, key)))); }))); })),
7482
7539
  React__default["default"].createElement(View, { style: styles.actionRow },
7483
7540
  React__default["default"].createElement(reactNative.TouchableOpacity, { activeOpacity: 0.8, style: styles.actionButton, onPress: handleClose },
7484
- React__default["default"].createElement(Text$1, { style: styles.actionText }, "\u0110\u00F3ng")),
7541
+ React__default["default"].createElement(Text$1, { style: [styles.actionText, styles.text16] }, "\u0110\u00F3ng")),
7485
7542
  React__default["default"].createElement(Spacer, { style: { height: "100%" }, width: 1, backgroundColor: colors.borderPrimaryDefault }),
7486
7543
  React__default["default"].createElement(reactNative.TouchableOpacity, { activeOpacity: 0.8, style: styles.actionButton, onPress: handleSave },
7487
- React__default["default"].createElement(Text$1, { style: [styles.actionText, { color: colors.textBrandDefault }] }, "L\u01B0u")))))));
7544
+ React__default["default"].createElement(Text$1, { style: [
7545
+ styles.actionText,
7546
+ styles.text16,
7547
+ { color: colors.textBrandDefault },
7548
+ ] }, "L\u01B0u")))))));
7488
7549
  };
7489
7550
  var styles = reactNative.StyleSheet.create(__assign(__assign({}, containerStyles), { modalOverlay: {
7490
7551
  flex: 1,
@@ -7497,12 +7558,10 @@ var styles = reactNative.StyleSheet.create(__assign(__assign({}, containerStyles
7497
7558
  paddingBottom: 20,
7498
7559
  alignItems: "center",
7499
7560
  }, modalTitle: {
7500
- fontSize: 18,
7501
7561
  textAlign: "center",
7502
7562
  marginTop: 16,
7503
7563
  marginBottom: 8,
7504
7564
  }, valueText: {
7505
- fontSize: 30,
7506
7565
  textAlign: "center",
7507
7566
  }, clearButton: {
7508
7567
  padding: 8,
@@ -7524,7 +7583,6 @@ var styles = reactNative.StyleSheet.create(__assign(__assign({}, containerStyles
7524
7583
  justifyContent: "center",
7525
7584
  height: 48,
7526
7585
  }, keyText: {
7527
- fontSize: 22,
7528
7586
  fontWeight: "500",
7529
7587
  }, actionRow: {
7530
7588
  flexDirection: "row",
@@ -7537,7 +7595,6 @@ var styles = reactNative.StyleSheet.create(__assign(__assign({}, containerStyles
7537
7595
  alignItems: "center",
7538
7596
  paddingVertical: 12,
7539
7597
  }, actionText: {
7540
- fontSize: 16,
7541
7598
  fontWeight: "600",
7542
7599
  }, disabledKey: {
7543
7600
  opacity: 0.5,