antd-mobile 5.10.4 → 5.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (114) hide show
  1. package/2x/cjs/components/button/button.d.ts +6 -4
  2. package/2x/cjs/components/button/button.js +31 -7
  3. package/2x/cjs/components/calendar/calendar.css +2 -2
  4. package/2x/cjs/components/calendar/calendar.d.ts +2 -0
  5. package/2x/cjs/components/calendar/calendar.js +6 -1
  6. package/2x/cjs/components/date-picker/date-picker.js +1 -0
  7. package/2x/cjs/components/dialog/dialog-action-button.js +3 -26
  8. package/2x/cjs/components/floating-panel/floating-panel.js +1 -1
  9. package/2x/cjs/components/form/context.d.ts +1 -0
  10. package/2x/cjs/components/form/context.js +2 -1
  11. package/2x/cjs/components/form/form-item.css +1 -1
  12. package/2x/cjs/components/form/form-item.js +3 -1
  13. package/2x/cjs/components/form/form.d.ts +0 -3
  14. package/2x/cjs/components/form/form.js +4 -2
  15. package/2x/cjs/components/form/index.css +1 -1
  16. package/2x/cjs/components/form/index.d.ts +2 -2
  17. package/2x/cjs/components/form/index.js +2 -1
  18. package/2x/cjs/components/index-bar/panel.d.ts +1 -0
  19. package/2x/cjs/components/input/input.css +4 -0
  20. package/2x/cjs/components/input/input.d.ts +2 -0
  21. package/2x/cjs/components/input/input.js +13 -2
  22. package/2x/cjs/components/modal/modal-action-button.js +3 -26
  23. package/2x/cjs/components/search-bar/search-bar.d.ts +2 -0
  24. package/2x/cjs/components/search-bar/search-bar.js +2 -0
  25. package/2x/cjs/components/swiper/index.d.ts +1 -16
  26. package/2x/cjs/components/swiper/swiper.d.ts +1 -16
  27. package/2x/cjs/global/index.js +2 -0
  28. package/2x/es/components/button/button.d.ts +6 -4
  29. package/2x/es/components/button/button.js +30 -8
  30. package/2x/es/components/calendar/calendar.css +2 -2
  31. package/2x/es/components/calendar/calendar.d.ts +2 -0
  32. package/2x/es/components/calendar/calendar.js +6 -2
  33. package/2x/es/components/date-picker/date-picker.js +1 -0
  34. package/2x/es/components/dialog/dialog-action-button.js +3 -21
  35. package/2x/es/components/floating-panel/floating-panel.js +1 -1
  36. package/2x/es/components/form/context.d.ts +1 -0
  37. package/2x/es/components/form/context.js +2 -1
  38. package/2x/es/components/form/form-item.css +1 -1
  39. package/2x/es/components/form/form-item.js +3 -1
  40. package/2x/es/components/form/form.d.ts +0 -3
  41. package/2x/es/components/form/form.js +4 -2
  42. package/2x/es/components/form/index.css +1 -1
  43. package/2x/es/components/form/index.d.ts +2 -2
  44. package/2x/es/components/form/index.js +3 -2
  45. package/2x/es/components/index-bar/panel.d.ts +1 -0
  46. package/2x/es/components/input/input.css +4 -0
  47. package/2x/es/components/input/input.d.ts +2 -0
  48. package/2x/es/components/input/input.js +13 -2
  49. package/2x/es/components/modal/modal-action-button.js +3 -21
  50. package/2x/es/components/search-bar/search-bar.d.ts +2 -0
  51. package/2x/es/components/search-bar/search-bar.js +2 -0
  52. package/2x/es/components/swiper/index.d.ts +1 -16
  53. package/2x/es/components/swiper/swiper.d.ts +1 -16
  54. package/2x/es/global/index.js +2 -0
  55. package/2x/package.json +2 -2
  56. package/bundle/antd-mobile.cjs.js +66 -48
  57. package/bundle/antd-mobile.es.js +67 -49
  58. package/bundle/style.css +6 -3
  59. package/cjs/components/button/button.d.ts +6 -4
  60. package/cjs/components/button/button.js +31 -7
  61. package/cjs/components/calendar/calendar.css +2 -2
  62. package/cjs/components/calendar/calendar.d.ts +2 -0
  63. package/cjs/components/calendar/calendar.js +6 -1
  64. package/cjs/components/date-picker/date-picker.js +1 -0
  65. package/cjs/components/dialog/dialog-action-button.js +3 -26
  66. package/cjs/components/floating-panel/floating-panel.js +1 -1
  67. package/cjs/components/form/context.d.ts +1 -0
  68. package/cjs/components/form/context.js +2 -1
  69. package/cjs/components/form/form-item.css +1 -1
  70. package/cjs/components/form/form-item.js +3 -1
  71. package/cjs/components/form/form.d.ts +0 -3
  72. package/cjs/components/form/form.js +4 -2
  73. package/cjs/components/form/index.css +1 -1
  74. package/cjs/components/form/index.d.ts +2 -2
  75. package/cjs/components/form/index.js +2 -1
  76. package/cjs/components/index-bar/panel.d.ts +1 -0
  77. package/cjs/components/input/input.css +3 -0
  78. package/cjs/components/input/input.d.ts +2 -0
  79. package/cjs/components/input/input.js +13 -2
  80. package/cjs/components/modal/modal-action-button.js +3 -26
  81. package/cjs/components/search-bar/search-bar.d.ts +2 -0
  82. package/cjs/components/search-bar/search-bar.js +2 -0
  83. package/cjs/components/swiper/index.d.ts +1 -16
  84. package/cjs/components/swiper/swiper.d.ts +1 -16
  85. package/cjs/global/index.js +2 -0
  86. package/es/components/button/button.d.ts +6 -4
  87. package/es/components/button/button.js +30 -8
  88. package/es/components/calendar/calendar.css +2 -2
  89. package/es/components/calendar/calendar.d.ts +2 -0
  90. package/es/components/calendar/calendar.js +6 -2
  91. package/es/components/date-picker/date-picker.js +1 -0
  92. package/es/components/dialog/dialog-action-button.js +3 -21
  93. package/es/components/floating-panel/floating-panel.js +1 -1
  94. package/es/components/form/context.d.ts +1 -0
  95. package/es/components/form/context.js +2 -1
  96. package/es/components/form/form-item.css +1 -1
  97. package/es/components/form/form-item.js +3 -1
  98. package/es/components/form/form.d.ts +0 -3
  99. package/es/components/form/form.js +4 -2
  100. package/es/components/form/index.css +1 -1
  101. package/es/components/form/index.d.ts +2 -2
  102. package/es/components/form/index.js +3 -2
  103. package/es/components/index-bar/panel.d.ts +1 -0
  104. package/es/components/input/input.css +3 -0
  105. package/es/components/input/input.d.ts +2 -0
  106. package/es/components/input/input.js +13 -2
  107. package/es/components/modal/modal-action-button.js +3 -21
  108. package/es/components/search-bar/search-bar.d.ts +2 -0
  109. package/es/components/search-bar/search-bar.js +2 -0
  110. package/es/components/swiper/index.d.ts +1 -16
  111. package/es/components/swiper/swiper.d.ts +1 -16
  112. package/es/global/index.js +2 -0
  113. package/package.json +2 -2
  114. package/umd/antd-mobile.js +1 -1
@@ -8445,29 +8445,52 @@ const DotLoading = React$1.memo((p) => {
8445
8445
  keyTimes: "0; 0.1; 0.3; 0.4; 1"
8446
8446
  }))))))))));
8447
8447
  });
8448
+ function isPromise(obj) {
8449
+ return !!obj && typeof obj === "object" && typeof obj.then === "function";
8450
+ }
8448
8451
  const classPrefix$1d = `adm-button`;
8449
8452
  const defaultProps$W = {
8450
8453
  color: "default",
8451
8454
  fill: "solid",
8452
8455
  block: false,
8453
8456
  loading: false,
8457
+ loadingIcon: React__default["default"].createElement(DotLoading, {
8458
+ color: "currentColor"
8459
+ }),
8454
8460
  type: "button",
8455
8461
  shape: "default",
8456
8462
  size: "middle"
8457
8463
  };
8458
8464
  const Button = React$1.forwardRef((p, ref) => {
8459
8465
  const props = mergeProps(defaultProps$W, p);
8460
- const disabled = props.disabled || props.loading;
8466
+ const [innerLoading, setInnerLoading] = React$1.useState(false);
8461
8467
  const nativeButtonRef = React$1.useRef(null);
8468
+ const loading = props.loading === "auto" ? innerLoading : props.loading;
8469
+ const disabled = props.disabled || loading;
8462
8470
  React$1.useImperativeHandle(ref, () => ({
8463
8471
  get nativeElement() {
8464
8472
  return nativeButtonRef.current;
8465
8473
  }
8466
8474
  }));
8475
+ const handleClick = (e) => tslib.__awaiter(void 0, void 0, void 0, function* () {
8476
+ if (!props.onClick)
8477
+ return;
8478
+ const promise = props.onClick(e);
8479
+ if (isPromise(promise)) {
8480
+ try {
8481
+ setInnerLoading(true);
8482
+ yield promise;
8483
+ setInnerLoading(false);
8484
+ } catch (e2) {
8485
+ setInnerLoading(false);
8486
+ throw e2;
8487
+ }
8488
+ }
8489
+ });
8467
8490
  return withNativeProps(props, React__default["default"].createElement("button", {
8468
8491
  ref: nativeButtonRef,
8469
8492
  type: props.type,
8470
- onClick: props.onClick,
8493
+ onClick: handleClick,
8471
8494
  className: classNames__default["default"](classPrefix$1d, props.color ? `${classPrefix$1d}-${props.color}` : null, {
8472
8495
  [`${classPrefix$1d}-block`]: props.block,
8473
8496
  [`${classPrefix$1d}-disabled`]: disabled,
@@ -8476,14 +8499,12 @@ const Button = React$1.forwardRef((p, ref) => {
8476
8499
  [`${classPrefix$1d}-mini`]: props.size === "mini",
8477
8500
  [`${classPrefix$1d}-small`]: props.size === "small",
8478
8501
  [`${classPrefix$1d}-large`]: props.size === "large",
8479
- [`${classPrefix$1d}-loading`]: props.loading
8502
+ [`${classPrefix$1d}-loading`]: loading
8480
8503
  }, `${classPrefix$1d}-shape-${props.shape}`),
8481
8504
  disabled
8482
- }, props.loading ? React__default["default"].createElement("div", {
8505
+ }, loading ? React__default["default"].createElement("div", {
8483
8506
  className: `${classPrefix$1d}-loading-wrapper`
8484
- }, React__default["default"].createElement(DotLoading, {
8485
- color: "currentColor"
8486
- }), props.loadingText) : props.children));
8507
+ }, props.loadingIcon, props.loadingText) : props.children));
8487
8508
  });
8488
8509
  var safeArea = "";
8489
8510
  const classPrefix$1c = "adm-safe-area";
@@ -8914,6 +8935,8 @@ const Calendar = React$1.forwardRef((p, ref) => {
8914
8935
  setCurrent(current.add(1, "year"));
8915
8936
  }
8916
8937
  }, React__default["default"].createElement(ArrowLeftDouble, null)));
8938
+ const maxDay = React$1.useMemo(() => props.max && dayjs__default["default"](props.max), [props.max]);
8939
+ const minDay = React$1.useMemo(() => props.min && dayjs__default["default"](props.min), [props.min]);
8917
8940
  function renderCells() {
8918
8941
  var _a;
8919
8942
  const cells = [];
@@ -8933,9 +8956,10 @@ const Calendar = React$1.forwardRef((p, ref) => {
8933
8956
  isSelect = isBegin || isEnd || d.isAfter(begin, "day") && d.isBefore(end, "day");
8934
8957
  }
8935
8958
  const inThisMonth = d.month() === current.month();
8959
+ const disabled = !inThisMonth || maxDay && d.isAfter(maxDay, "day") || minDay && d.isBefore(minDay, "day");
8936
8960
  cells.push(React__default["default"].createElement("div", {
8937
8961
  key: d.valueOf(),
8938
- className: classNames__default["default"](`${classPrefix$17}-cell`, inThisMonth ? `${classPrefix$17}-cell-in` : `${classPrefix$17}-cell-out`, inThisMonth && {
8962
+ className: classNames__default["default"](`${classPrefix$17}-cell`, disabled && `${classPrefix$17}-cell-disabled`, inThisMonth && {
8939
8963
  [`${classPrefix$17}-cell-today`]: d.isSame(today, "day"),
8940
8964
  [`${classPrefix$17}-cell-selected`]: isSelect,
8941
8965
  [`${classPrefix$17}-cell-selected-begin`]: isBegin,
@@ -8944,6 +8968,8 @@ const Calendar = React$1.forwardRef((p, ref) => {
8944
8968
  onClick: () => {
8945
8969
  if (!props.selectionMode)
8946
8970
  return;
8971
+ if (disabled)
8972
+ return;
8947
8973
  const date = d.toDate();
8948
8974
  if (!inThisMonth) {
8949
8975
  setCurrent(d.clone().date(1));
@@ -11401,6 +11427,7 @@ const DatePicker = (p) => {
11401
11427
  value: pickerValue,
11402
11428
  onCancel: props.onCancel,
11403
11429
  onClose: props.onClose,
11430
+ closeOnMaskClick: props.closeOnMaskClick,
11404
11431
  visible: props.visible,
11405
11432
  confirmText: props.confirmText,
11406
11433
  cancelText: props.cancelText,
@@ -11486,23 +11513,9 @@ const DialogActionButton = (props) => {
11486
11513
  const {
11487
11514
  action
11488
11515
  } = props;
11489
- const [loading, setLoading] = React$1.useState(false);
11490
- function handleClick() {
11491
- return tslib.__awaiter(this, void 0, void 0, function* () {
11492
- setLoading(true);
11493
- try {
11494
- const promise = props.onAction();
11495
- yield promise;
11496
- setLoading(false);
11497
- } catch (e) {
11498
- setLoading(false);
11499
- throw e;
11500
- }
11501
- });
11502
- }
11503
11516
  return withNativeProps(props.action, React__default["default"].createElement(Button, {
11504
11517
  key: action.key,
11505
- onClick: handleClick,
11518
+ onClick: props.onAction,
11506
11519
  className: classNames__default["default"]("adm-dialog-button", {
11507
11520
  "adm-dialog-button-bold": action.bold
11508
11521
  }),
@@ -11510,7 +11523,7 @@ const DialogActionButton = (props) => {
11510
11523
  shape: "rectangular",
11511
11524
  block: true,
11512
11525
  color: action.danger ? "danger" : "primary",
11513
- loading,
11526
+ loading: "auto",
11514
11527
  disabled: action.disabled
11515
11528
  }, action.text));
11516
11529
  };
@@ -12783,7 +12796,7 @@ const FloatingPanel = React$1.forwardRef((p, ref) => {
12783
12796
  tension: 300
12784
12797
  },
12785
12798
  onChange: (result2) => {
12786
- onHeightChange(result2.value.y, y2.isAnimating);
12799
+ onHeightChange(-result2.value.y, y2.isAnimating);
12787
12800
  }
12788
12801
  }));
12789
12802
  react.useDrag((state) => {
@@ -12877,7 +12890,8 @@ const defaultFormContext = {
12877
12890
  name: void 0,
12878
12891
  hasFeedback: true,
12879
12892
  layout: "vertical",
12880
- requiredMarkStyle: "asterisk"
12893
+ requiredMarkStyle: "asterisk",
12894
+ disabled: false
12881
12895
  };
12882
12896
  const FormContext = React__default["default"].createContext(defaultFormContext);
12883
12897
  const NoStyleItemContext = React__default["default"].createContext(null);
@@ -12926,8 +12940,9 @@ const Form$1 = React$1.forwardRef((p, ref) => {
12926
12940
  layout,
12927
12941
  footer,
12928
12942
  mode,
12943
+ disabled,
12929
12944
  requiredMarkStyle
12930
- } = props, formProps = tslib.__rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode", "requiredMarkStyle"]);
12945
+ } = props, formProps = tslib.__rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode", "disabled", "requiredMarkStyle"]);
12931
12946
  const {
12932
12947
  locale
12933
12948
  } = useConfig();
@@ -12974,7 +12989,8 @@ const Form$1 = React$1.forwardRef((p, ref) => {
12974
12989
  name: formProps.name,
12975
12990
  hasFeedback,
12976
12991
  layout,
12977
- requiredMarkStyle
12992
+ requiredMarkStyle,
12993
+ disabled
12978
12994
  }
12979
12995
  }, lists), footer && React__default["default"].createElement("div", {
12980
12996
  className: `${classPrefix$K}-footer`
@@ -13126,7 +13142,9 @@ var Context = /* @__PURE__ */ React.createContext({
13126
13142
  registerField: warningFunc,
13127
13143
  useSubscribe: warningFunc,
13128
13144
  setInitialValues: warningFunc,
13145
+ destroyForm: warningFunc,
13129
13146
  setCallbacks: warningFunc,
13147
+ registerWatch: warningFunc,
13130
13148
  getFields: warningFunc,
13131
13149
  setValidateMessages: warningFunc,
13132
13150
  setPreserve: warningFunc,
@@ -13401,6 +13419,7 @@ const MemoInput = React__default["default"].memo(({
13401
13419
  children
13402
13420
  }) => children, (prev, next) => prev.value === next.value && prev.update === next.update);
13403
13421
  const FormItemLayout = (props) => {
13422
+ var _a;
13404
13423
  const {
13405
13424
  className,
13406
13425
  style,
@@ -13408,7 +13427,6 @@ const FormItemLayout = (props) => {
13408
13427
  label,
13409
13428
  help,
13410
13429
  required,
13411
- disabled,
13412
13430
  children,
13413
13431
  htmlFor,
13414
13432
  hidden,
@@ -13421,6 +13439,7 @@ const FormItemLayout = (props) => {
13421
13439
  } = useConfig();
13422
13440
  const hasFeedback = props.hasFeedback !== void 0 ? props.hasFeedback : context.hasFeedback;
13423
13441
  const layout = props.layout || context.layout;
13442
+ const disabled = (_a = props.disabled) !== null && _a !== void 0 ? _a : context.disabled;
13424
13443
  const requiredMark = (() => {
13425
13444
  const {
13426
13445
  requiredMarkStyle
@@ -13657,7 +13676,8 @@ var Form = attachPropertiesToComponent(Form$1, {
13657
13676
  Subscribe: FormSubscribe,
13658
13677
  Header,
13659
13678
  Array: FormArray,
13660
- useForm: RcForm.useForm
13679
+ useForm: RcForm.useForm,
13680
+ useWatch: RcForm.useWatch
13661
13681
  });
13662
13682
  var grid = "";
13663
13683
  const classPrefix$G = `adm-grid`;
@@ -14563,7 +14583,8 @@ const InfiniteScroll = (p) => {
14563
14583
  var input = "";
14564
14584
  const classPrefix$v = `adm-input`;
14565
14585
  const defaultProps$r = {
14566
- defaultValue: ""
14586
+ defaultValue: "",
14587
+ onlyShowClearWhenFocus: true
14567
14588
  };
14568
14589
  const Input = React$1.forwardRef((p, ref) => {
14569
14590
  const props = mergeProps(defaultProps$r, p);
@@ -14612,6 +14633,15 @@ const Input = React$1.forwardRef((p, ref) => {
14612
14633
  setValue(nextValue);
14613
14634
  }
14614
14635
  }
14636
+ const shouldShowClear = (() => {
14637
+ if (!props.clearable || !value || props.readOnly)
14638
+ return false;
14639
+ if (props.onlyShowClearWhenFocus) {
14640
+ return hasFocus;
14641
+ } else {
14642
+ return true;
14643
+ }
14644
+ })();
14615
14645
  return withNativeProps(props, React__default["default"].createElement("div", {
14616
14646
  className: classNames__default["default"](`${classPrefix$v}`, props.disabled && `${classPrefix$v}-disabled`)
14617
14647
  }, React__default["default"].createElement("input", {
@@ -14652,7 +14682,7 @@ const Input = React$1.forwardRef((p, ref) => {
14652
14682
  onCompositionStart: props.onCompositionStart,
14653
14683
  onCompositionEnd: props.onCompositionEnd,
14654
14684
  onClick: props.onClick
14655
- }), props.clearable && !!value && !props.readOnly && hasFocus && React__default["default"].createElement("div", {
14685
+ }), shouldShowClear && React__default["default"].createElement("div", {
14656
14686
  className: `${classPrefix$v}-clear`,
14657
14687
  onMouseDown: (e) => {
14658
14688
  e.preventDefault();
@@ -14765,23 +14795,9 @@ const ModalActionButton = (props) => {
14765
14795
  const {
14766
14796
  action
14767
14797
  } = props;
14768
- const [loading, setLoading] = React$1.useState(false);
14769
- function handleClick() {
14770
- return tslib.__awaiter(this, void 0, void 0, function* () {
14771
- setLoading(true);
14772
- try {
14773
- const promise = props.onAction();
14774
- yield promise;
14775
- setLoading(false);
14776
- } catch (e) {
14777
- setLoading(false);
14778
- throw e;
14779
- }
14780
- });
14781
- }
14782
14798
  return withNativeProps(props.action, React__default["default"].createElement(Button, {
14783
14799
  key: action.key,
14784
- onClick: handleClick,
14800
+ onClick: props.onAction,
14785
14801
  className: classNames__default["default"]("adm-modal-button", {
14786
14802
  "adm-modal-button-primary": props.action.primary
14787
14803
  }),
@@ -14789,7 +14805,7 @@ const ModalActionButton = (props) => {
14789
14805
  size: props.action.primary ? "large" : "middle",
14790
14806
  block: true,
14791
14807
  color: action.danger ? "danger" : "primary",
14792
- loading,
14808
+ loading: "auto",
14793
14809
  disabled: action.disabled
14794
14810
  }, action.text));
14795
14811
  };
@@ -15766,6 +15782,7 @@ var searchBar = "";
15766
15782
  const classPrefix$i = `adm-search-bar`;
15767
15783
  const defaultProps$f = {
15768
15784
  clearable: true,
15785
+ onlyShowClearWhenFocus: false,
15769
15786
  showCancelButton: false,
15770
15787
  defaultValue: "",
15771
15788
  clearOnCancel: true,
@@ -15845,6 +15862,7 @@ const SearchBar = React$1.forwardRef((p, ref) => {
15845
15862
  maxLength: props.maxLength,
15846
15863
  placeholder: props.placeholder,
15847
15864
  clearable: props.clearable,
15865
+ onlyShowClearWhenFocus: props.onlyShowClearWhenFocus,
15848
15866
  onFocus: (e) => {
15849
15867
  var _a;
15850
15868
  setHasFocus(true);
@@ -8,7 +8,7 @@ import { isFragment } from "react-is";
8
8
  import { useDrag, useWheel, createUseGesture, dragAction, pinchAction } from "@use-gesture/react";
9
9
  import { RightOutline, CheckOutline, DownOutline, PictureOutline, PictureWrongOutline, DownFill, QuestionCircleOutline, CloseOutline, AddOutline, CloseCircleFill, LeftOutline, SoundOutline, TextDeletionOutline, StarFill, CheckCircleFill, InformationCircleFill, ClockCircleFill, ExclamationCircleFill, SearchOutline, MinusOutline } from "antd-mobile-icons";
10
10
  import { staged } from "staged-components";
11
- import RcForm, { List as List$2, Field, useForm } from "rc-field-form";
11
+ import RcForm, { List as List$2, Field, useForm, useWatch } from "rc-field-form";
12
12
  import { computePosition, offset, shift, limitShift, flip, hide, arrow, autoUpdate } from "@floating-ui/dom";
13
13
  import Big from "big.js";
14
14
  var global$1 = "";
@@ -8435,29 +8435,52 @@ const DotLoading = memo((p) => {
8435
8435
  keyTimes: "0; 0.1; 0.3; 0.4; 1"
8436
8436
  }))))))))));
8437
8437
  });
8438
+ function isPromise(obj) {
8439
+ return !!obj && typeof obj === "object" && typeof obj.then === "function";
8440
+ }
8438
8441
  const classPrefix$1d = `adm-button`;
8439
8442
  const defaultProps$W = {
8440
8443
  color: "default",
8441
8444
  fill: "solid",
8442
8445
  block: false,
8443
8446
  loading: false,
8447
+ loadingIcon: React$1.createElement(DotLoading, {
8448
+ color: "currentColor"
8449
+ }),
8444
8450
  type: "button",
8445
8451
  shape: "default",
8446
8452
  size: "middle"
8447
8453
  };
8448
8454
  const Button = forwardRef((p, ref) => {
8449
8455
  const props = mergeProps(defaultProps$W, p);
8450
- const disabled = props.disabled || props.loading;
8456
+ const [innerLoading, setInnerLoading] = useState(false);
8451
8457
  const nativeButtonRef = useRef(null);
8458
+ const loading = props.loading === "auto" ? innerLoading : props.loading;
8459
+ const disabled = props.disabled || loading;
8452
8460
  useImperativeHandle(ref, () => ({
8453
8461
  get nativeElement() {
8454
8462
  return nativeButtonRef.current;
8455
8463
  }
8456
8464
  }));
8465
+ const handleClick = (e) => __awaiter(void 0, void 0, void 0, function* () {
8466
+ if (!props.onClick)
8467
+ return;
8468
+ const promise = props.onClick(e);
8469
+ if (isPromise(promise)) {
8470
+ try {
8471
+ setInnerLoading(true);
8472
+ yield promise;
8473
+ setInnerLoading(false);
8474
+ } catch (e2) {
8475
+ setInnerLoading(false);
8476
+ throw e2;
8477
+ }
8478
+ }
8479
+ });
8457
8480
  return withNativeProps(props, React$1.createElement("button", {
8458
8481
  ref: nativeButtonRef,
8459
8482
  type: props.type,
8460
- onClick: props.onClick,
8483
+ onClick: handleClick,
8461
8484
  className: classNames(classPrefix$1d, props.color ? `${classPrefix$1d}-${props.color}` : null, {
8462
8485
  [`${classPrefix$1d}-block`]: props.block,
8463
8486
  [`${classPrefix$1d}-disabled`]: disabled,
@@ -8466,14 +8489,12 @@ const Button = forwardRef((p, ref) => {
8466
8489
  [`${classPrefix$1d}-mini`]: props.size === "mini",
8467
8490
  [`${classPrefix$1d}-small`]: props.size === "small",
8468
8491
  [`${classPrefix$1d}-large`]: props.size === "large",
8469
- [`${classPrefix$1d}-loading`]: props.loading
8492
+ [`${classPrefix$1d}-loading`]: loading
8470
8493
  }, `${classPrefix$1d}-shape-${props.shape}`),
8471
8494
  disabled
8472
- }, props.loading ? React$1.createElement("div", {
8495
+ }, loading ? React$1.createElement("div", {
8473
8496
  className: `${classPrefix$1d}-loading-wrapper`
8474
- }, React$1.createElement(DotLoading, {
8475
- color: "currentColor"
8476
- }), props.loadingText) : props.children));
8497
+ }, props.loadingIcon, props.loadingText) : props.children));
8477
8498
  });
8478
8499
  var safeArea = "";
8479
8500
  const classPrefix$1c = "adm-safe-area";
@@ -8904,6 +8925,8 @@ const Calendar = forwardRef((p, ref) => {
8904
8925
  setCurrent(current.add(1, "year"));
8905
8926
  }
8906
8927
  }, React$1.createElement(ArrowLeftDouble, null)));
8928
+ const maxDay = useMemo(() => props.max && dayjs(props.max), [props.max]);
8929
+ const minDay = useMemo(() => props.min && dayjs(props.min), [props.min]);
8907
8930
  function renderCells() {
8908
8931
  var _a;
8909
8932
  const cells = [];
@@ -8923,9 +8946,10 @@ const Calendar = forwardRef((p, ref) => {
8923
8946
  isSelect = isBegin || isEnd || d.isAfter(begin, "day") && d.isBefore(end, "day");
8924
8947
  }
8925
8948
  const inThisMonth = d.month() === current.month();
8949
+ const disabled = !inThisMonth || maxDay && d.isAfter(maxDay, "day") || minDay && d.isBefore(minDay, "day");
8926
8950
  cells.push(React$1.createElement("div", {
8927
8951
  key: d.valueOf(),
8928
- className: classNames(`${classPrefix$17}-cell`, inThisMonth ? `${classPrefix$17}-cell-in` : `${classPrefix$17}-cell-out`, inThisMonth && {
8952
+ className: classNames(`${classPrefix$17}-cell`, disabled && `${classPrefix$17}-cell-disabled`, inThisMonth && {
8929
8953
  [`${classPrefix$17}-cell-today`]: d.isSame(today, "day"),
8930
8954
  [`${classPrefix$17}-cell-selected`]: isSelect,
8931
8955
  [`${classPrefix$17}-cell-selected-begin`]: isBegin,
@@ -8934,6 +8958,8 @@ const Calendar = forwardRef((p, ref) => {
8934
8958
  onClick: () => {
8935
8959
  if (!props.selectionMode)
8936
8960
  return;
8961
+ if (disabled)
8962
+ return;
8937
8963
  const date = d.toDate();
8938
8964
  if (!inThisMonth) {
8939
8965
  setCurrent(d.clone().date(1));
@@ -11391,6 +11417,7 @@ const DatePicker = (p) => {
11391
11417
  value: pickerValue,
11392
11418
  onCancel: props.onCancel,
11393
11419
  onClose: props.onClose,
11420
+ closeOnMaskClick: props.closeOnMaskClick,
11394
11421
  visible: props.visible,
11395
11422
  confirmText: props.confirmText,
11396
11423
  cancelText: props.cancelText,
@@ -11476,23 +11503,9 @@ const DialogActionButton = (props) => {
11476
11503
  const {
11477
11504
  action
11478
11505
  } = props;
11479
- const [loading, setLoading] = useState(false);
11480
- function handleClick() {
11481
- return __awaiter(this, void 0, void 0, function* () {
11482
- setLoading(true);
11483
- try {
11484
- const promise = props.onAction();
11485
- yield promise;
11486
- setLoading(false);
11487
- } catch (e) {
11488
- setLoading(false);
11489
- throw e;
11490
- }
11491
- });
11492
- }
11493
11506
  return withNativeProps(props.action, React$1.createElement(Button, {
11494
11507
  key: action.key,
11495
- onClick: handleClick,
11508
+ onClick: props.onAction,
11496
11509
  className: classNames("adm-dialog-button", {
11497
11510
  "adm-dialog-button-bold": action.bold
11498
11511
  }),
@@ -11500,7 +11513,7 @@ const DialogActionButton = (props) => {
11500
11513
  shape: "rectangular",
11501
11514
  block: true,
11502
11515
  color: action.danger ? "danger" : "primary",
11503
- loading,
11516
+ loading: "auto",
11504
11517
  disabled: action.disabled
11505
11518
  }, action.text));
11506
11519
  };
@@ -12773,7 +12786,7 @@ const FloatingPanel = forwardRef((p, ref) => {
12773
12786
  tension: 300
12774
12787
  },
12775
12788
  onChange: (result2) => {
12776
- onHeightChange(result2.value.y, y2.isAnimating);
12789
+ onHeightChange(-result2.value.y, y2.isAnimating);
12777
12790
  }
12778
12791
  }));
12779
12792
  useDrag((state) => {
@@ -12867,7 +12880,8 @@ const defaultFormContext = {
12867
12880
  name: void 0,
12868
12881
  hasFeedback: true,
12869
12882
  layout: "vertical",
12870
- requiredMarkStyle: "asterisk"
12883
+ requiredMarkStyle: "asterisk",
12884
+ disabled: false
12871
12885
  };
12872
12886
  const FormContext = React$1.createContext(defaultFormContext);
12873
12887
  const NoStyleItemContext = React$1.createContext(null);
@@ -12916,8 +12930,9 @@ const Form$1 = forwardRef((p, ref) => {
12916
12930
  layout,
12917
12931
  footer,
12918
12932
  mode,
12933
+ disabled,
12919
12934
  requiredMarkStyle
12920
- } = props, formProps = __rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode", "requiredMarkStyle"]);
12935
+ } = props, formProps = __rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode", "disabled", "requiredMarkStyle"]);
12921
12936
  const {
12922
12937
  locale
12923
12938
  } = useConfig();
@@ -12964,7 +12979,8 @@ const Form$1 = forwardRef((p, ref) => {
12964
12979
  name: formProps.name,
12965
12980
  hasFeedback,
12966
12981
  layout,
12967
- requiredMarkStyle
12982
+ requiredMarkStyle,
12983
+ disabled
12968
12984
  }
12969
12985
  }, lists), footer && React$1.createElement("div", {
12970
12986
  className: `${classPrefix$K}-footer`
@@ -13116,7 +13132,9 @@ var Context = /* @__PURE__ */ React.createContext({
13116
13132
  registerField: warningFunc,
13117
13133
  useSubscribe: warningFunc,
13118
13134
  setInitialValues: warningFunc,
13135
+ destroyForm: warningFunc,
13119
13136
  setCallbacks: warningFunc,
13137
+ registerWatch: warningFunc,
13120
13138
  getFields: warningFunc,
13121
13139
  setValidateMessages: warningFunc,
13122
13140
  setPreserve: warningFunc,
@@ -13391,6 +13409,7 @@ const MemoInput = React$1.memo(({
13391
13409
  children
13392
13410
  }) => children, (prev, next) => prev.value === next.value && prev.update === next.update);
13393
13411
  const FormItemLayout = (props) => {
13412
+ var _a;
13394
13413
  const {
13395
13414
  className,
13396
13415
  style,
@@ -13398,7 +13417,6 @@ const FormItemLayout = (props) => {
13398
13417
  label,
13399
13418
  help,
13400
13419
  required,
13401
- disabled,
13402
13420
  children,
13403
13421
  htmlFor,
13404
13422
  hidden,
@@ -13411,6 +13429,7 @@ const FormItemLayout = (props) => {
13411
13429
  } = useConfig();
13412
13430
  const hasFeedback = props.hasFeedback !== void 0 ? props.hasFeedback : context.hasFeedback;
13413
13431
  const layout = props.layout || context.layout;
13432
+ const disabled = (_a = props.disabled) !== null && _a !== void 0 ? _a : context.disabled;
13414
13433
  const requiredMark = (() => {
13415
13434
  const {
13416
13435
  requiredMarkStyle
@@ -13647,7 +13666,8 @@ var Form = attachPropertiesToComponent(Form$1, {
13647
13666
  Subscribe: FormSubscribe,
13648
13667
  Header,
13649
13668
  Array: FormArray,
13650
- useForm
13669
+ useForm,
13670
+ useWatch
13651
13671
  });
13652
13672
  var grid = "";
13653
13673
  const classPrefix$G = `adm-grid`;
@@ -14553,7 +14573,8 @@ const InfiniteScroll = (p) => {
14553
14573
  var input = "";
14554
14574
  const classPrefix$v = `adm-input`;
14555
14575
  const defaultProps$r = {
14556
- defaultValue: ""
14576
+ defaultValue: "",
14577
+ onlyShowClearWhenFocus: true
14557
14578
  };
14558
14579
  const Input = forwardRef((p, ref) => {
14559
14580
  const props = mergeProps(defaultProps$r, p);
@@ -14602,6 +14623,15 @@ const Input = forwardRef((p, ref) => {
14602
14623
  setValue(nextValue);
14603
14624
  }
14604
14625
  }
14626
+ const shouldShowClear = (() => {
14627
+ if (!props.clearable || !value || props.readOnly)
14628
+ return false;
14629
+ if (props.onlyShowClearWhenFocus) {
14630
+ return hasFocus;
14631
+ } else {
14632
+ return true;
14633
+ }
14634
+ })();
14605
14635
  return withNativeProps(props, React$1.createElement("div", {
14606
14636
  className: classNames(`${classPrefix$v}`, props.disabled && `${classPrefix$v}-disabled`)
14607
14637
  }, React$1.createElement("input", {
@@ -14642,7 +14672,7 @@ const Input = forwardRef((p, ref) => {
14642
14672
  onCompositionStart: props.onCompositionStart,
14643
14673
  onCompositionEnd: props.onCompositionEnd,
14644
14674
  onClick: props.onClick
14645
- }), props.clearable && !!value && !props.readOnly && hasFocus && React$1.createElement("div", {
14675
+ }), shouldShowClear && React$1.createElement("div", {
14646
14676
  className: `${classPrefix$v}-clear`,
14647
14677
  onMouseDown: (e) => {
14648
14678
  e.preventDefault();
@@ -14755,23 +14785,9 @@ const ModalActionButton = (props) => {
14755
14785
  const {
14756
14786
  action
14757
14787
  } = props;
14758
- const [loading, setLoading] = useState(false);
14759
- function handleClick() {
14760
- return __awaiter(this, void 0, void 0, function* () {
14761
- setLoading(true);
14762
- try {
14763
- const promise = props.onAction();
14764
- yield promise;
14765
- setLoading(false);
14766
- } catch (e) {
14767
- setLoading(false);
14768
- throw e;
14769
- }
14770
- });
14771
- }
14772
14788
  return withNativeProps(props.action, React$1.createElement(Button, {
14773
14789
  key: action.key,
14774
- onClick: handleClick,
14790
+ onClick: props.onAction,
14775
14791
  className: classNames("adm-modal-button", {
14776
14792
  "adm-modal-button-primary": props.action.primary
14777
14793
  }),
@@ -14779,7 +14795,7 @@ const ModalActionButton = (props) => {
14779
14795
  size: props.action.primary ? "large" : "middle",
14780
14796
  block: true,
14781
14797
  color: action.danger ? "danger" : "primary",
14782
- loading,
14798
+ loading: "auto",
14783
14799
  disabled: action.disabled
14784
14800
  }, action.text));
14785
14801
  };
@@ -15756,6 +15772,7 @@ var searchBar = "";
15756
15772
  const classPrefix$i = `adm-search-bar`;
15757
15773
  const defaultProps$f = {
15758
15774
  clearable: true,
15775
+ onlyShowClearWhenFocus: false,
15759
15776
  showCancelButton: false,
15760
15777
  defaultValue: "",
15761
15778
  clearOnCancel: true,
@@ -15835,6 +15852,7 @@ const SearchBar = forwardRef((p, ref) => {
15835
15852
  maxLength: props.maxLength,
15836
15853
  placeholder: props.placeholder,
15837
15854
  clearable: props.clearable,
15855
+ onlyShowClearWhenFocus: props.onlyShowClearWhenFocus,
15838
15856
  onFocus: (e) => {
15839
15857
  var _a;
15840
15858
  setHasFocus(true);
package/bundle/style.css CHANGED
@@ -398,10 +398,10 @@ div.adm-px-tester {
398
398
  .adm-calendar-cell.adm-calendar-cell-today {
399
399
  color: var(--adm-color-primary);
400
400
  }
401
- .adm-calendar-cell.adm-calendar-cell-out {
401
+ .adm-calendar-cell.adm-calendar-cell-disabled {
402
402
  color: var(--adm-color-light);
403
403
  }
404
- .adm-calendar-cell.adm-calendar-cell-out .adm-calendar-cell-bottom {
404
+ .adm-calendar-cell.adm-calendar-cell-disabled .adm-calendar-cell-bottom {
405
405
  color: var(--adm-color-light);
406
406
  }
407
407
  .adm-calendar-cell.adm-calendar-cell-selected.adm-calendar-cell.adm-calendar-cell-selected {
@@ -1553,7 +1553,7 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
1553
1553
  }
1554
1554
  .adm-form-item.adm-form-item-horizontal.adm-list-item {
1555
1555
  --align-items: stretch;
1556
- --prefix-width: 6em;
1556
+ --prefix-width: 6.8em;
1557
1557
  }
1558
1558
  .adm-form-item.adm-form-item-horizontal .adm-list-item-content-prefix {
1559
1559
  padding-top: 12px;
@@ -2085,6 +2085,9 @@ a.adm-list-item:active:not(.adm-list-item-disabled)::after {
2085
2085
  .adm-input-element::-webkit-search-decoration {
2086
2086
  display: none;
2087
2087
  }
2088
+ .adm-input-element:disabled {
2089
+ opacity: 1;
2090
+ }
2088
2091
  .adm-input-element[type='date'],
2089
2092
  .adm-input-element[type='time'],
2090
2093
  .adm-input-element[type='datetime-local'] {
@@ -5,10 +5,11 @@ export declare type ButtonProps = {
5
5
  fill?: 'solid' | 'outline' | 'none';
6
6
  size?: 'mini' | 'small' | 'middle' | 'large';
7
7
  block?: boolean;
8
- loading?: boolean;
8
+ loading?: boolean | 'auto';
9
9
  loadingText?: string;
10
+ loadingIcon?: React.ReactNode;
10
11
  disabled?: boolean;
11
- onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
12
+ onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void>;
12
13
  type?: 'submit' | 'reset' | 'button';
13
14
  shape?: 'default' | 'rounded' | 'rectangular';
14
15
  children?: React.ReactNode;
@@ -21,10 +22,11 @@ export declare const Button: React.ForwardRefExoticComponent<{
21
22
  fill?: "none" | "solid" | "outline" | undefined;
22
23
  size?: "small" | "large" | "middle" | "mini" | undefined;
23
24
  block?: boolean | undefined;
24
- loading?: boolean | undefined;
25
+ loading?: boolean | "auto" | undefined;
25
26
  loadingText?: string | undefined;
27
+ loadingIcon?: React.ReactNode;
26
28
  disabled?: boolean | undefined;
27
- onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
29
+ onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void>) | undefined;
28
30
  type?: "reset" | "submit" | "button" | undefined;
29
31
  shape?: "default" | "rounded" | "rectangular" | undefined;
30
32
  children?: React.ReactNode;