antd-mobile 5.2.1 → 5.3.1

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 (126) hide show
  1. package/2x/cjs/components/avatar/avatar.js +1 -0
  2. package/2x/cjs/components/calendar/calendar.js +23 -20
  3. package/2x/cjs/components/date-picker/date-picker.js +3 -7
  4. package/2x/cjs/components/dialog/dialog.css +27 -18
  5. package/2x/cjs/components/dialog/dialog.js +39 -42
  6. package/2x/cjs/components/dropdown/dropdown.css +2 -1
  7. package/2x/cjs/components/ellipsis/ellipsis.d.ts +2 -0
  8. package/2x/cjs/components/ellipsis/ellipsis.js +8 -5
  9. package/2x/cjs/components/form/context.d.ts +2 -1
  10. package/2x/cjs/components/form/context.js +6 -5
  11. package/2x/cjs/components/form/form-item.css +27 -1
  12. package/2x/cjs/components/form/form-item.d.ts +1 -0
  13. package/2x/cjs/components/form/form-item.js +44 -13
  14. package/2x/cjs/components/form/form.js +18 -9
  15. package/2x/cjs/components/form/index.css +27 -1
  16. package/2x/cjs/components/input/input.js +2 -2
  17. package/2x/cjs/components/modal/modal.css +27 -21
  18. package/2x/cjs/components/modal/modal.js +39 -36
  19. package/2x/cjs/components/popover/arrow.js +1 -2
  20. package/2x/cjs/components/pull-to-refresh/pull-to-refresh.js +1 -1
  21. package/2x/cjs/components/switch/spin-icon.d.ts +3 -0
  22. package/2x/cjs/components/switch/spin-icon.js +37 -0
  23. package/2x/cjs/components/switch/switch.css +1 -1
  24. package/2x/cjs/components/switch/switch.js +4 -6
  25. package/2x/cjs/locales/base.d.ts +51 -0
  26. package/2x/cjs/locales/base.js +52 -0
  27. package/2x/cjs/locales/en-US.d.ts +51 -0
  28. package/2x/cjs/locales/zh-CN.d.ts +51 -0
  29. package/2x/cjs/locales/zh-CN.js +52 -0
  30. package/2x/es/components/avatar/avatar.js +1 -0
  31. package/2x/es/components/calendar/calendar.js +23 -19
  32. package/2x/es/components/date-picker/date-picker.js +3 -7
  33. package/2x/es/components/dialog/dialog.css +27 -18
  34. package/2x/es/components/dialog/dialog.js +37 -41
  35. package/2x/es/components/dropdown/dropdown.css +2 -1
  36. package/2x/es/components/ellipsis/ellipsis.d.ts +2 -0
  37. package/2x/es/components/ellipsis/ellipsis.js +7 -5
  38. package/2x/es/components/form/context.d.ts +2 -1
  39. package/2x/es/components/form/context.js +4 -3
  40. package/2x/es/components/form/form-item.css +27 -1
  41. package/2x/es/components/form/form-item.d.ts +1 -0
  42. package/2x/es/components/form/form-item.js +43 -13
  43. package/2x/es/components/form/form.js +18 -11
  44. package/2x/es/components/form/index.css +27 -1
  45. package/2x/es/components/input/input.js +2 -2
  46. package/2x/es/components/modal/modal.css +27 -21
  47. package/2x/es/components/modal/modal.js +37 -36
  48. package/2x/es/components/popover/arrow.js +1 -2
  49. package/2x/es/components/pull-to-refresh/pull-to-refresh.js +1 -1
  50. package/2x/es/components/switch/spin-icon.d.ts +3 -0
  51. package/2x/es/components/switch/spin-icon.js +23 -0
  52. package/2x/es/components/switch/switch.css +1 -1
  53. package/2x/es/components/switch/switch.js +3 -5
  54. package/2x/es/locales/base.d.ts +51 -0
  55. package/2x/es/locales/base.js +52 -0
  56. package/2x/es/locales/en-US.d.ts +51 -0
  57. package/2x/es/locales/zh-CN.d.ts +51 -0
  58. package/2x/es/locales/zh-CN.js +52 -0
  59. package/2x/package.json +4 -4
  60. package/cjs/components/avatar/avatar.js +1 -0
  61. package/cjs/components/calendar/calendar.js +23 -20
  62. package/cjs/components/date-picker/date-picker.js +3 -7
  63. package/cjs/components/dialog/dialog.css +26 -18
  64. package/cjs/components/dialog/dialog.js +39 -42
  65. package/cjs/components/dropdown/dropdown.css +2 -1
  66. package/cjs/components/ellipsis/ellipsis.d.ts +2 -0
  67. package/cjs/components/ellipsis/ellipsis.js +8 -5
  68. package/cjs/components/form/context.d.ts +2 -1
  69. package/cjs/components/form/context.js +6 -5
  70. package/cjs/components/form/form-item.css +21 -1
  71. package/cjs/components/form/form-item.d.ts +1 -0
  72. package/cjs/components/form/form-item.js +44 -13
  73. package/cjs/components/form/form.js +18 -9
  74. package/cjs/components/form/index.css +21 -1
  75. package/cjs/components/input/input.js +2 -2
  76. package/cjs/components/modal/modal.css +26 -20
  77. package/cjs/components/modal/modal.js +39 -36
  78. package/cjs/components/popover/arrow.js +1 -2
  79. package/cjs/components/pull-to-refresh/pull-to-refresh.js +1 -1
  80. package/cjs/components/switch/spin-icon.d.ts +3 -0
  81. package/cjs/components/switch/spin-icon.js +37 -0
  82. package/cjs/components/switch/switch.css +1 -1
  83. package/cjs/components/switch/switch.js +4 -6
  84. package/cjs/locales/base.d.ts +51 -0
  85. package/cjs/locales/base.js +52 -0
  86. package/cjs/locales/en-US.d.ts +51 -0
  87. package/cjs/locales/zh-CN.d.ts +51 -0
  88. package/cjs/locales/zh-CN.js +52 -0
  89. package/es/components/avatar/avatar.js +1 -0
  90. package/es/components/calendar/calendar.js +23 -19
  91. package/es/components/date-picker/date-picker.js +3 -7
  92. package/es/components/dialog/dialog.css +26 -18
  93. package/es/components/dialog/dialog.js +37 -41
  94. package/es/components/dropdown/dropdown.css +2 -1
  95. package/es/components/ellipsis/ellipsis.d.ts +2 -0
  96. package/es/components/ellipsis/ellipsis.js +7 -5
  97. package/es/components/form/context.d.ts +2 -1
  98. package/es/components/form/context.js +4 -3
  99. package/es/components/form/form-item.css +21 -1
  100. package/es/components/form/form-item.d.ts +1 -0
  101. package/es/components/form/form-item.js +43 -13
  102. package/es/components/form/form.js +18 -11
  103. package/es/components/form/index.css +21 -1
  104. package/es/components/input/input.js +2 -2
  105. package/es/components/modal/modal.css +26 -20
  106. package/es/components/modal/modal.js +37 -36
  107. package/es/components/popover/arrow.js +1 -2
  108. package/es/components/pull-to-refresh/pull-to-refresh.js +1 -1
  109. package/es/components/switch/spin-icon.d.ts +3 -0
  110. package/es/components/switch/spin-icon.js +23 -0
  111. package/es/components/switch/switch.css +1 -1
  112. package/es/components/switch/switch.js +3 -5
  113. package/es/locales/base.d.ts +51 -0
  114. package/es/locales/base.js +52 -0
  115. package/es/locales/en-US.d.ts +51 -0
  116. package/es/locales/zh-CN.d.ts +51 -0
  117. package/es/locales/zh-CN.js +52 -0
  118. package/package.json +4 -4
  119. package/umd/antd-mobile.js +1 -1
  120. package/umd/antd-mobile.js.LICENSE.txt +0 -24
  121. package/2x/assets/spin.svg +0 -12
  122. package/2x/cjs/assets/spin.svg +0 -12
  123. package/2x/es/assets/spin.svg +0 -12
  124. package/assets/spin.svg +0 -12
  125. package/cjs/assets/spin.svg +0 -12
  126. package/es/assets/spin.svg +0 -12
@@ -32,6 +32,7 @@ const Avatar = p => {
32
32
  placeholder: props.fallback,
33
33
  alt: props.alt,
34
34
  lazy: props.lazy,
35
+ fit: props.fit,
35
36
  onClick: props.onClick,
36
37
  onError: props.onError
37
38
  }));
@@ -50,7 +50,29 @@ const Calendar = (0, _react.forwardRef)((p, ref) => {
50
50
  if (item) markItems.unshift(item);
51
51
  }
52
52
 
53
- const [current, setCurrent] = (0, _react.useState)(() => (0, _dayjs.default)().date(1));
53
+ const dateRange = (0, _react.useMemo)(() => {
54
+ var _a, _b, _c, _d;
55
+
56
+ if (props.selectionMode === 'single') {
57
+ const value = (_b = (_a = props.value) !== null && _a !== void 0 ? _a : props.defaultValue) !== null && _b !== void 0 ? _b : null;
58
+ return [value, value];
59
+ } else if (props.selectionMode === 'range') {
60
+ return (_d = (_c = props.value) !== null && _c !== void 0 ? _c : props.defaultValue) !== null && _d !== void 0 ? _d : [null, null];
61
+ } else {
62
+ return [null, null];
63
+ }
64
+ }, [props.selectionMode, props.value, props.defaultValue]);
65
+ const [begin, setBegin] = (0, _react.useState)(null);
66
+ const [end, setEnd] = (0, _react.useState)(null);
67
+ (0, _ahooks.useIsomorphicLayoutEffect)(() => {
68
+ setBegin(dateRange[0] ? (0, _dayjs.default)(dateRange[0]) : null);
69
+ setEnd(dateRange[1] ? (0, _dayjs.default)(dateRange[1]) : null);
70
+ }, [dateRange[0], dateRange[1]]);
71
+ const [current, setCurrent] = (0, _react.useState)(() => {
72
+ var _a;
73
+
74
+ return (0, _dayjs.default)((_a = dateRange[0]) !== null && _a !== void 0 ? _a : today).date(1);
75
+ });
54
76
  (0, _ahooks.useUpdateEffect)(() => {
55
77
  var _a;
56
78
 
@@ -102,25 +124,6 @@ const Calendar = (0, _react.forwardRef)((p, ref) => {
102
124
  }
103
125
  }, _react.default.createElement(_arrowLeftDouble.ArrowLeftDouble, null)));
104
126
 
105
- const dateRange = (0, _react.useMemo)(() => {
106
- var _a, _b, _c, _d;
107
-
108
- if (props.selectionMode === 'single') {
109
- const value = (_b = (_a = props.value) !== null && _a !== void 0 ? _a : props.defaultValue) !== null && _b !== void 0 ? _b : null;
110
- return [value, value];
111
- } else if (props.selectionMode === 'range') {
112
- return (_d = (_c = props.value) !== null && _c !== void 0 ? _c : props.defaultValue) !== null && _d !== void 0 ? _d : [null, null];
113
- } else {
114
- return [null, null];
115
- }
116
- }, [props.selectionMode, props.value, props.defaultValue]);
117
- const [begin, setBegin] = (0, _react.useState)(null);
118
- const [end, setEnd] = (0, _react.useState)(null);
119
- (0, _ahooks.useIsomorphicLayoutEffect)(() => {
120
- setBegin(dateRange[0] ? (0, _dayjs.default)(dateRange[0]) : null);
121
- setEnd(dateRange[1] ? (0, _dayjs.default)(dateRange[1]) : null);
122
- }, [dateRange[0], dateRange[1]]);
123
-
124
127
  function renderCells() {
125
128
  var _a;
126
129
 
@@ -50,14 +50,10 @@ const DatePicker = p => {
50
50
  });
51
51
  const now = (0, _react.useMemo)(() => new Date(), []);
52
52
  const pickerValue = (0, _react.useMemo)(() => {
53
- let date = value;
54
-
55
- if (date === null) {
56
- date = new Date((0, _bound.bound)(now.getDate(), props.min.getDate(), props.max.getDate()));
57
- }
58
-
53
+ let date = value !== null && value !== void 0 ? value : now;
54
+ date = new Date((0, _bound.bound)(date.getTime(), props.min.getTime(), props.max.getTime()));
59
55
  return (0, _datePickerUtils.convertDateToStringArray)(date, props.precision);
60
- }, [value, props.precision]);
56
+ }, [value, props.precision, props.min, props.max]);
61
57
  const onConfirm = (0, _react.useCallback)(val => {
62
58
  setValue((0, _datePickerUtils.convertStringArrayToDate)(val, props.precision));
63
59
  }, [setValue, props.precision]);
@@ -18,7 +18,7 @@
18
18
  transform: translate(-50%, -50%);
19
19
  }
20
20
 
21
- .adm-dialog-main {
21
+ .adm-dialog-body {
22
22
  width: 100%;
23
23
  max-height: 70vh;
24
24
  font-size: 28px;
@@ -29,35 +29,39 @@
29
29
  flex-direction: column;
30
30
  }
31
31
 
32
- .adm-dialog-main > * {
32
+ .adm-dialog-body > * {
33
33
  flex: none;
34
34
  }
35
35
 
36
- .adm-dialog-main > .adm-dialog-image-container {
36
+ .adm-dialog-body > .adm-dialog-content {
37
37
  flex: auto;
38
38
  }
39
39
 
40
- .adm-dialog-main > .adm-dialog-image-container + .adm-dialog-body {
41
- padding-top: 24px;
40
+ .adm-dialog-body:not(.adm-dialog-with-image) {
41
+ padding-top: 40px;
42
42
  }
43
43
 
44
- .adm-dialog-main .adm-dialog-body {
45
- padding: 40px 24px;
44
+ .adm-dialog-body .adm-dialog-image-container {
45
+ margin-bottom: 24px;
46
+ max-height: 40vh;
46
47
  }
47
48
 
48
- .adm-dialog-main .adm-dialog-body-header-wrapper {
49
- display: flex;
50
- justify-content: center;
49
+ .adm-dialog-body .adm-dialog-header {
50
+ margin-bottom: 16px;
51
+ padding: 0 24px;
51
52
  }
52
53
 
53
- .adm-dialog-main .adm-dialog-body-title {
54
+ .adm-dialog-body .adm-dialog-title {
55
+ margin-bottom: 16px;
56
+ padding: 0 24px;
54
57
  font-weight: bold;
55
58
  font-size: 36px;
56
59
  line-height: 50px;
57
60
  text-align: center;
58
61
  }
59
62
 
60
- .adm-dialog-main .adm-dialog-body-content {
63
+ .adm-dialog-body .adm-dialog-content {
64
+ padding: 0 24px 40px;
61
65
  max-height: 70vh;
62
66
  overflow-x: hidden;
63
67
  overflow-y: auto;
@@ -66,21 +70,26 @@
66
70
  color: #333;
67
71
  }
68
72
 
69
- .adm-dialog-main .adm-dialog-footer {
73
+ .adm-dialog-body .adm-dialog-content-empty {
74
+ padding: 0;
75
+ height: 24px;
76
+ }
77
+
78
+ .adm-dialog-body .adm-dialog-footer {
70
79
  user-select: none;
71
80
  }
72
81
 
73
- .adm-dialog-main .adm-dialog-footer .adm-dialog-action-row {
82
+ .adm-dialog-body .adm-dialog-footer .adm-dialog-action-row {
74
83
  display: flex;
75
84
  align-items: stretch;
76
85
  border-top: 1px solid var(--adm-border-color);
77
86
  }
78
87
 
79
- .adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > * {
88
+ .adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > * {
80
89
  flex: 1;
81
90
  }
82
91
 
83
- .adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
92
+ .adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
84
93
  padding: 20px;
85
94
  font-size: 36px;
86
95
  line-height: 50px;
@@ -88,11 +97,11 @@
88
97
  border-right: solid 1px var(--adm-border-color);
89
98
  }
90
99
 
91
- .adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
100
+ .adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
92
101
  font-weight: bold;
93
102
  }
94
103
 
95
- .adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
104
+ .adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
96
105
  border-right: none;
97
106
  }
98
107
 
@@ -21,8 +21,6 @@ var _dialogActionButton = require("./dialog-action-button");
21
21
 
22
22
  var _image = _interopRequireDefault(require("../image"));
23
23
 
24
- var _space = _interopRequireDefault(require("../space"));
25
-
26
24
  var _renderToContainer = require("../../utils/render-to-container");
27
25
 
28
26
  var _withStopPropagation = require("../../utils/with-stop-propagation");
@@ -39,7 +37,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
39
37
 
40
38
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
41
39
 
42
- const classPrefix = `adm-dialog`;
43
40
  const defaultProps = {
44
41
  visible: false,
45
42
  actions: [],
@@ -78,51 +75,28 @@ const Dialog = p => {
78
75
  }
79
76
  });
80
77
  const [active, setActive] = (0, _react.useState)(props.visible);
81
- const node = (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
82
- className: classPrefix,
83
- style: {
84
- display: active ? 'unset' : 'none'
85
- }
86
- }, _react.default.createElement(_mask.default, {
87
- visible: props.visible,
88
- onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
89
- style: props.maskStyle,
90
- className: (0, _classnames.default)(`${classPrefix}-mask`, props.maskClassName)
91
- }), _react.default.createElement("div", {
92
- className: `${classPrefix}-wrap`,
93
- style: {
94
- pointerEvents: props.visible ? 'unset' : 'none'
95
- }
96
- }, _react.default.createElement(_web.animated.div, {
97
- style: Object.assign({}, style),
98
- onClick: e => e.stopPropagation(),
99
- className: `${classPrefix}-main`
78
+
79
+ const body = _react.default.createElement("div", {
80
+ className: (0, _classnames.default)(cls('body'), props.image && cls('with-image'), props.bodyClassName),
81
+ style: props.bodyStyle
100
82
  }, !!props.image && _react.default.createElement("div", {
101
- className: `${classPrefix}-image-container`
83
+ className: cls('image-container')
102
84
  }, _react.default.createElement(_image.default, {
103
85
  src: props.image,
104
86
  alt: 'dialog header image',
105
87
  width: '100%'
106
- })), _react.default.createElement("div", {
107
- style: props.bodyStyle,
108
- className: (0, _classnames.default)(`${classPrefix}-body`, props.bodyClassName)
109
- }, _react.default.createElement(_space.default, {
110
- direction: 'vertical',
111
- block: true
112
- }, !!props.header && _react.default.createElement("div", {
113
- className: `${classPrefix}-body-header-wrapper`
114
- }, _react.default.createElement("div", {
115
- className: `${classPrefix}-body-header`
116
- }, props.header)), !!props.title && _react.default.createElement("div", {
117
- className: `${classPrefix}-body-title`
118
- }, props.title), !!props.content && _react.default.createElement("div", {
119
- className: `${classPrefix}-body-content`
120
- }, typeof props.content === 'string' ? _react.default.createElement(_autoCenter.default, null, props.content) : props.content))), _react.default.createElement("div", {
121
- className: `${classPrefix}-footer`
88
+ })), !!props.header && _react.default.createElement("div", {
89
+ className: cls('header')
90
+ }, _react.default.createElement(_autoCenter.default, null, props.header)), !!props.title && _react.default.createElement("div", {
91
+ className: cls('title')
92
+ }, props.title), _react.default.createElement("div", {
93
+ className: (0, _classnames.default)(cls('content'), !props.content && cls('content-empty'))
94
+ }, typeof props.content === 'string' ? _react.default.createElement(_autoCenter.default, null, props.content) : props.content), _react.default.createElement("div", {
95
+ className: cls('footer')
122
96
  }, props.actions.map((row, index) => {
123
97
  const actions = Array.isArray(row) ? row : [row];
124
98
  return _react.default.createElement("div", {
125
- className: `${classPrefix}-action-row`,
99
+ className: cls('action-row'),
126
100
  key: index
127
101
  }, actions.map((action, index) => _react.default.createElement(_dialogActionButton.DialogActionButton, {
128
102
  key: action.key,
@@ -137,8 +111,31 @@ const Dialog = p => {
137
111
  }
138
112
  })
139
113
  })));
140
- }))))));
114
+ })));
115
+
116
+ const node = (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
117
+ className: cls(),
118
+ style: {
119
+ display: active ? 'unset' : 'none'
120
+ }
121
+ }, _react.default.createElement(_mask.default, {
122
+ visible: props.visible,
123
+ onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
124
+ style: props.maskStyle,
125
+ className: (0, _classnames.default)(cls('mask'), props.maskClassName)
126
+ }), _react.default.createElement("div", {
127
+ className: cls('wrap'),
128
+ style: {
129
+ pointerEvents: props.visible ? 'unset' : 'none'
130
+ }
131
+ }, _react.default.createElement(_web.animated.div, {
132
+ style: style
133
+ }, body))));
141
134
  return (0, _renderToContainer.renderToContainer)(props.getContainer, (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, node));
142
135
  };
143
136
 
144
- exports.Dialog = Dialog;
137
+ exports.Dialog = Dialog;
138
+
139
+ function cls(name = '') {
140
+ return 'adm-dialog' + (name && '-') + name;
141
+ }
@@ -4,10 +4,11 @@
4
4
 
5
5
  .adm-dropdown .adm-dropdown-nav {
6
6
  display: flex;
7
+ border-bottom: 2px solid transparent;
7
8
  }
8
9
 
9
10
  .adm-dropdown-open .adm-dropdown-nav {
10
- border-bottom: 2px solid var(--adm-border-color);
11
+ border-bottom-color: var(--adm-border-color);
11
12
  }
12
13
 
13
14
  .adm-dropdown-item {
@@ -1,10 +1,12 @@
1
1
  import { FC } from 'react';
2
2
  import { NativeProps } from '../../utils/native-props';
3
+ import { PropagationEvent } from '../../utils/with-stop-propagation';
3
4
  export declare type EllipsisProps = {
4
5
  content: string;
5
6
  direction?: 'start' | 'end' | 'middle';
6
7
  rows?: number;
7
8
  expandText?: string;
8
9
  collapseText?: string;
10
+ stopPropagationForActionButtons?: PropagationEvent[];
9
11
  } & NativeProps;
10
12
  export declare const Ellipsis: FC<EllipsisProps>;
@@ -15,6 +15,8 @@ var _useResizeEffect = require("../../utils/use-resize-effect");
15
15
 
16
16
  var _ahooks = require("ahooks");
17
17
 
18
+ var _withStopPropagation = require("../../utils/with-stop-propagation");
19
+
18
20
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
19
21
 
20
22
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -24,7 +26,8 @@ const defaultProps = {
24
26
  direction: 'end',
25
27
  rows: 1,
26
28
  expandText: '',
27
- collapseText: ''
29
+ collapseText: '',
30
+ stopPropagationForActionButtons: []
28
31
  };
29
32
 
30
33
  const Ellipsis = p => {
@@ -134,16 +137,16 @@ const Ellipsis = p => {
134
137
  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
135
138
  calcEllipsised();
136
139
  }, [props.content, props.direction, props.rows, props.expandText, props.collapseText]);
137
- const expandActionElement = exceeded && props.expandText ? _react.default.createElement("a", {
140
+ const expandActionElement = exceeded && props.expandText ? (0, _withStopPropagation.withStopPropagation)(props.stopPropagationForActionButtons, _react.default.createElement("a", {
138
141
  onClick: () => {
139
142
  setExpanded(true);
140
143
  }
141
- }, props.expandText) : null;
142
- const collapseActionElement = exceeded && props.expandText ? _react.default.createElement("a", {
144
+ }, props.expandText)) : null;
145
+ const collapseActionElement = exceeded && props.expandText ? (0, _withStopPropagation.withStopPropagation)(props.stopPropagationForActionButtons, _react.default.createElement("a", {
143
146
  onClick: () => {
144
147
  setExpanded(false);
145
148
  }
146
- }, props.collapseText) : null;
149
+ }, props.collapseText)) : null;
147
150
 
148
151
  const renderContent = () => {
149
152
  if (!exceeded) {
@@ -4,8 +4,9 @@ import type { Meta, InternalNamePath } from 'rc-field-form/lib/interface';
4
4
  export declare type FormContextType = {
5
5
  hasFeedback: boolean;
6
6
  layout: FormLayout;
7
+ requiredMarkStyle: 'asterisk' | 'text-required' | 'text-optional';
7
8
  };
8
- export declare const DEFAULT_FORM_CONTEXT: FormContextType;
9
+ export declare const defaultFormContext: FormContextType;
9
10
  export declare const FormContext: React.Context<FormContextType>;
10
11
  export declare type OnSubMetaChange = (meta: Meta & {
11
12
  destroy?: boolean;
@@ -3,19 +3,20 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.NoStyleItemContext = exports.FormContext = exports.DEFAULT_FORM_CONTEXT = void 0;
6
+ exports.defaultFormContext = exports.NoStyleItemContext = exports.FormContext = void 0;
7
7
 
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
 
10
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
11
 
12
- const DEFAULT_FORM_CONTEXT = {
12
+ const defaultFormContext = {
13
13
  hasFeedback: true,
14
- layout: 'vertical'
14
+ layout: 'vertical',
15
+ requiredMarkStyle: 'asterisk'
15
16
  };
16
- exports.DEFAULT_FORM_CONTEXT = DEFAULT_FORM_CONTEXT;
17
+ exports.defaultFormContext = defaultFormContext;
17
18
 
18
- const FormContext = _react.default.createContext(DEFAULT_FORM_CONTEXT);
19
+ const FormContext = _react.default.createContext(defaultFormContext);
19
20
 
20
21
  exports.FormContext = FormContext;
21
22
 
@@ -11,7 +11,7 @@
11
11
  color: #666666;
12
12
  }
13
13
 
14
- .adm-form-item-label-required {
14
+ .adm-form-item-label .adm-form-item-required-asterisk {
15
15
  position: absolute;
16
16
  left: -0.6em;
17
17
  top: 0;
@@ -20,8 +20,34 @@
20
20
  user-select: none;
21
21
  }
22
22
 
23
+ .adm-form-item-label .adm-form-item-required-text {
24
+ margin-left: 8px;
25
+ color: var(--adm-color-weak);
26
+ }
27
+
23
28
  .adm-form-item-label-help {
24
29
  margin-left: 8px;
30
+ cursor: pointer;
31
+ }
32
+
33
+ .adm-form-item-child {
34
+ display: flex;
35
+ }
36
+
37
+ .adm-form-item-child-position-normal {
38
+ justify-content: normal;
39
+ }
40
+
41
+ .adm-form-item-child-position-normal > * {
42
+ flex: auto;
43
+ }
44
+
45
+ .adm-form-item-child-position-right {
46
+ justify-content: right;
47
+ }
48
+
49
+ .adm-form-item-child-position-right > * {
50
+ flex: none;
25
51
  }
26
52
 
27
53
  .adm-form-item-footer {
@@ -16,6 +16,7 @@ export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePr
16
16
  disabled?: boolean;
17
17
  hidden?: boolean;
18
18
  layout?: FormLayout;
19
+ childElementPosition?: 'normal' | 'right';
19
20
  children: ChildrenType;
20
21
  } & NativeProps;
21
22
  export declare const FormItem: FC<FormItemProps>;
@@ -27,6 +27,8 @@ var _popover = _interopRequireDefault(require("../popover"));
27
27
 
28
28
  var _antdMobileIcons = require("antd-mobile-icons");
29
29
 
30
+ var _configProvider = require("../config-provider");
31
+
30
32
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
31
33
 
32
34
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -54,18 +56,47 @@ const FormItemLayout = props => {
54
56
  hidden,
55
57
  errors,
56
58
  arrow,
57
- description
59
+ description,
60
+ childElementPosition = 'normal'
58
61
  } = props;
59
62
  const context = (0, _react.useContext)(_context.FormContext);
63
+ const {
64
+ locale
65
+ } = (0, _configProvider.useConfig)();
60
66
  const hasFeedback = props.hasFeedback !== undefined ? props.hasFeedback : context.hasFeedback;
61
67
  const layout = props.layout || context.layout;
62
68
  const feedback = hasFeedback && errors && errors.length > 0 ? errors[0] : null;
69
+
70
+ const requiredMark = (() => {
71
+ const {
72
+ requiredMarkStyle
73
+ } = context;
74
+
75
+ switch (requiredMarkStyle) {
76
+ case 'asterisk':
77
+ return required && _react.default.createElement("span", {
78
+ className: `${classPrefix}-required-asterisk`
79
+ }, "*");
80
+
81
+ case 'text-required':
82
+ return required && _react.default.createElement("span", {
83
+ className: `${classPrefix}-required-text`
84
+ }, "(", locale.Form.required, ")");
85
+
86
+ case 'text-optional':
87
+ return !required && _react.default.createElement("span", {
88
+ className: `${classPrefix}-required-text`
89
+ }, "(", locale.Form.optional, ")");
90
+
91
+ default:
92
+ return null;
93
+ }
94
+ })();
95
+
63
96
  const labelElement = label ? _react.default.createElement("label", {
64
97
  className: `${classPrefix}-label`,
65
98
  htmlFor: htmlFor
66
- }, label, required && _react.default.createElement("span", {
67
- className: `${classPrefix}-label-required`
68
- }, "*"), help && _react.default.createElement("span", {
99
+ }, label, requiredMark, help && _react.default.createElement("span", {
69
100
  className: `${classPrefix}-label-help`
70
101
  }, _react.default.createElement(_popover.default, {
71
102
  content: help,
@@ -87,7 +118,11 @@ const FormItemLayout = props => {
87
118
  disabled: disabled,
88
119
  onClick: props.onClick,
89
120
  arrow: arrow
90
- }, children);
121
+ }, _react.default.createElement("div", {
122
+ className: (0, _classnames.default)(`${classPrefix}-child`, `${classPrefix}-child-position-${childElementPosition}`)
123
+ }, _react.default.createElement("div", {
124
+ className: (0, _classnames.default)(`${classPrefix}-child-inner`)
125
+ }, children)));
91
126
  };
92
127
 
93
128
  const FormItem = props => {
@@ -105,6 +140,7 @@ const FormItem = props => {
105
140
  noStyle,
106
141
  hidden,
107
142
  layout,
143
+ childElementPosition,
108
144
  description,
109
145
  // Field 相关
110
146
  disabled,
@@ -118,7 +154,7 @@ const FormItem = props => {
118
154
  dependencies,
119
155
  arrow
120
156
  } = props,
121
- fieldProps = (0, _tslib.__rest)(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "description", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies", "arrow"]);
157
+ fieldProps = (0, _tslib.__rest)(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "childElementPosition", "description", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies", "arrow"]);
122
158
 
123
159
  const {
124
160
  validateTrigger: contextValidateTrigger
@@ -179,6 +215,7 @@ const FormItem = props => {
179
215
  onClick: onClick,
180
216
  hidden: hidden,
181
217
  layout: layout,
218
+ childElementPosition: childElementPosition,
182
219
  arrow: arrow
183
220
  }, _react.default.createElement(_context.NoStyleItemContext.Provider, {
184
221
  value: onSubMetaChange
@@ -221,13 +258,7 @@ const FormItem = props => {
221
258
  messageVariables: Variables
222
259
  }), (control, meta, context) => {
223
260
  let childNode = null;
224
- const isRequired = required !== undefined ? required : !!(rules && rules.some(rule => {
225
- if (rule && typeof rule === 'object' && rule.required) {
226
- return true;
227
- }
228
-
229
- return false;
230
- }));
261
+ const isRequired = required !== undefined ? required : rules && rules.some(rule => !!(rule && typeof rule === 'object' && rule.required));
231
262
  const fieldId = ((0, _utils.toArray)(name).length && meta ? meta.name : []).join('_');
232
263
 
233
264
  if (shouldUpdate && dependencies) {
@@ -21,6 +21,10 @@ var _withDefaultProps = require("../../utils/with-default-props");
21
21
 
22
22
  var _header = require("./header");
23
23
 
24
+ var _configProvider = require("../config-provider");
25
+
26
+ var _merge = _interopRequireDefault(require("lodash/merge"));
27
+
24
28
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
29
 
26
30
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -28,10 +32,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
28
32
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
29
33
 
30
34
  const classPrefix = 'adm-form';
31
- const defaultProps = {
32
- hasFeedback: true,
33
- layout: 'vertical'
34
- };
35
+ const defaultProps = _context.defaultFormContext;
35
36
  const Form = (0, _react.forwardRef)((p, ref) => {
36
37
  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
37
38
  const {
@@ -41,9 +42,14 @@ const Form = (0, _react.forwardRef)((p, ref) => {
41
42
  children,
42
43
  layout,
43
44
  footer,
44
- mode
45
+ mode,
46
+ requiredMarkStyle
45
47
  } = props,
46
- formProps = (0, _tslib.__rest)(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode"]);
48
+ formProps = (0, _tslib.__rest)(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode", "requiredMarkStyle"]);
49
+ const {
50
+ locale
51
+ } = (0, _configProvider.useConfig)();
52
+ const validateMessages = (0, _react.useMemo)(() => (0, _merge.default)({}, locale.Form.defaultValidateMessages, formProps.validateMessages), [locale.Form.defaultValidateMessages, formProps.validateMessages]);
47
53
  const lists = [];
48
54
  let currentHeader = null;
49
55
  let items = [];
@@ -74,10 +80,13 @@ const Form = (0, _react.forwardRef)((p, ref) => {
74
80
  className: (0, _classnames.default)(classPrefix, className),
75
81
  style: style,
76
82
  ref: ref
77
- }, formProps), _react.default.createElement(_context.FormContext.Provider, {
83
+ }, formProps, {
84
+ validateMessages: validateMessages
85
+ }), _react.default.createElement(_context.FormContext.Provider, {
78
86
  value: {
79
- hasFeedback: hasFeedback,
80
- layout
87
+ hasFeedback,
88
+ layout,
89
+ requiredMarkStyle
81
90
  }
82
91
  }, lists), footer && _react.default.createElement("div", {
83
92
  className: `${classPrefix}-footer`