@trionesdev/antd-taro-react 0.0.2-beta.2 → 0.0.2-beta.4

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 (61) hide show
  1. package/dist/Button/button.d.ts +2 -1
  2. package/dist/Button/style.scss +49 -45
  3. package/dist/Calendar/style.scss +4 -4
  4. package/dist/CalendarDatetimePicker/CalendarDatetimePicker.js +22 -19
  5. package/dist/CalendarDatetimePicker/style.scss +12 -4
  6. package/dist/CalendarPicker/calendar-picker.js +2 -1
  7. package/dist/CalendarPicker/style.scss +5 -5
  8. package/dist/Form/FormItem/form-item-input.d.ts +15 -0
  9. package/dist/Form/FormItem/form-item-input.js +39 -0
  10. package/dist/Form/FormItem/form-item-label.d.ts +13 -0
  11. package/dist/Form/FormItem/form-item-label.js +35 -0
  12. package/dist/Form/FormItem/form-item.d.ts +22 -0
  13. package/dist/Form/FormItem/form-item.js +73 -0
  14. package/dist/Form/FormItem/index.d.ts +5 -0
  15. package/dist/Form/FormItem/index.js +3 -0
  16. package/dist/Form/index.d.ts +8 -1
  17. package/dist/Form/index.js +5 -1
  18. package/dist/Form/style.scss +78 -0
  19. package/dist/ImagesPreview/ImagesPreview.js +2 -1
  20. package/dist/ImagesWall/ImagesWall.js +1 -1
  21. package/dist/Input/index.d.ts +17 -2
  22. package/dist/Input/index.js +13 -1
  23. package/dist/Input/index.scss +267 -0
  24. package/dist/Input/input-affix-wrapper.d.ts +13 -0
  25. package/dist/Input/input-affix-wrapper.js +37 -0
  26. package/dist/Input/input-digit.d.ts +7 -0
  27. package/dist/Input/input-digit.js +53 -0
  28. package/dist/Input/input-number.d.ts +7 -0
  29. package/dist/Input/input-number.js +50 -0
  30. package/dist/Input/input-opt.d.ts +16 -0
  31. package/dist/Input/input-opt.js +87 -0
  32. package/dist/Input/input-password.d.ts +8 -0
  33. package/dist/Input/input-password.js +49 -0
  34. package/dist/Input/input.d.ts +3 -0
  35. package/dist/Input/input.js +7 -0
  36. package/dist/Input/taro-input.d.ts +8 -0
  37. package/dist/Input/taro-input.js +54 -0
  38. package/dist/Input/textarea.d.ts +15 -0
  39. package/dist/Input/textarea.js +52 -0
  40. package/dist/Input/types.d.ts +19 -0
  41. package/dist/Input/types.js +2 -0
  42. package/dist/Popup/Popup.d.ts +3 -0
  43. package/dist/Popup/Popup.js +29 -0
  44. package/dist/Popup/index.d.ts +2 -1
  45. package/dist/Popup/index.js +1 -1
  46. package/dist/Progress/Progress.d.ts +2 -1
  47. package/dist/Progress/Progress.js +3 -0
  48. package/dist/Progress/ProgressCircle.d.ts +1 -1
  49. package/dist/Progress/ProgressCircle.js +21 -26
  50. package/dist/Progress/ProgressLine.d.ts +1 -1
  51. package/dist/Progress/types.d.ts +2 -0
  52. package/dist/SideBar/style.scss +6 -6
  53. package/dist/VerificationCodeInput/index.d.ts +2 -2
  54. package/dist/VerificationCodeInput/index.js +1 -1
  55. package/dist/VerificationCodeInput/style.scss +20 -0
  56. package/dist/VerificationCodeInput/verification-code-input.d.ts +24 -0
  57. package/dist/VerificationCodeInput/verification-code-input.js +99 -0
  58. package/dist/index.d.ts +1 -1
  59. package/dist/style/variable.scss +19 -0
  60. package/dist/types.d.ts +0 -1
  61. package/package.json +21 -21
@@ -2,6 +2,7 @@ import { ButtonProps as TaroButtonProps } from '@tarojs/components';
2
2
  import React, { FC, PropsWithChildren } from 'react';
3
3
  import './style.scss';
4
4
  import { CommonEventFunction } from '@tarojs/components/types/common';
5
+ import { SizeType } from "@trionesdev/antd-mobile-base-react";
5
6
  export type ButtonProps = {
6
7
  /**
7
8
  * @description block 按钮宽高自适应
@@ -45,7 +46,7 @@ export type ButtonProps = {
45
46
  * @description 按钮样式
46
47
  */
47
48
  variant?: 'outlined' | 'dashed' | 'solid' | 'filled' | 'text' | 'link';
48
- size?: 'small' | 'middle' | 'large';
49
+ size?: SizeType;
49
50
  /**
50
51
  * @description 点击事件
51
52
  */
@@ -1,4 +1,4 @@
1
- @use "../style/variable" as *;
1
+ @use "../style/variable" as variable;
2
2
 
3
3
  $trionesButtonPendingInlineSm: 7Px;
4
4
  $trionesButtonHeightSm: 24Px;
@@ -6,10 +6,14 @@ $trionesButtonHeightSm: 24Px;
6
6
  $trionesButtonPendingInline: 15Px;
7
7
  $trionesButtonHeight: 32Px;
8
8
 
9
- $trionesButtonContentFontSizeLg: $trionesFontSizeLg;
9
+ $trionesButtonContentFontSizeLg: variable.$trionesFontSizeLg;
10
10
  $trionesButtonPendingInlineLg: 15Px;
11
11
  $trionesButtonHeightLg: 40Px;
12
12
 
13
+ $colorPrimary: variable.$trionesColorPrimary;
14
+ $colorError: variable.$trionesColorErrorText;
15
+ $colorWhite: variable.$trionesColorBgBase;
16
+
13
17
  button::after {
14
18
  content: none;
15
19
  width: 100%;
@@ -40,7 +44,7 @@ $buttonCls: 'triones-antm-button';
40
44
  content: none;
41
45
  }
42
46
 
43
- &[disabled] {
47
+ &[disabled=true] {
44
48
  opacity: 0.4;
45
49
 
46
50
  &:active {
@@ -51,12 +55,12 @@ $buttonCls: 'triones-antm-button';
51
55
 
52
56
  &-color {
53
57
  &-default {
54
- background-color: #ffffff;
58
+ background-color: $colorWhite;
55
59
 
56
60
  &.#{$buttonCls} {
57
61
  &-variant {
58
62
  &-solid {
59
- color: #ffffff;
63
+ color: $colorWhite;
60
64
  background-color: rgba(0, 0, 0, 0.75);
61
65
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75);
62
66
  }
@@ -64,13 +68,13 @@ $buttonCls: 'triones-antm-button';
64
68
  &-outlined {
65
69
  color: rgba(0, 0, 0, 0.75);
66
70
  border: 1px solid rgba(0, 0, 0, 0.75);
67
- background-color: white;
71
+ background-color: $colorWhite;
68
72
  }
69
73
 
70
74
  &-dashed {
71
75
  color: rgba(0, 0, 0, 0.75);
72
76
  border: 1px dashed rgba(0, 0, 0, 0.75);
73
- background-color: #ffffff;
77
+ background-color: $colorWhite;
74
78
  }
75
79
 
76
80
  &-filled {
@@ -80,12 +84,12 @@ $buttonCls: 'triones-antm-button';
80
84
 
81
85
  &-text {
82
86
  color: rgba(0, 0, 0, 0.75);
83
- background-color: #ffffff;
87
+ background-color: $colorWhite;
84
88
  }
85
89
 
86
90
  &-link {
87
91
  color: rgba(0, 0, 0, 0.75);
88
- background-color: #ffffff;
92
+ background-color: $colorWhite;
89
93
 
90
94
  &:active {
91
95
  filter: none;
@@ -99,36 +103,36 @@ $buttonCls: 'triones-antm-button';
99
103
  &.#{$buttonCls} {
100
104
  &-variant {
101
105
  &-solid {
102
- color: #ffffff;
103
- background-color: $trionesColorPrimaryText;
104
- box-shadow: inset 0 0 0 1px $trionesColorPrimaryText;
106
+ color: $colorWhite;
107
+ background-color: $colorPrimary;
108
+ box-shadow: inset 0 0 0 1px $colorPrimary;
105
109
  }
106
110
 
107
111
  &-outlined {
108
- color: #1677ff;
112
+ color: $colorPrimary;
109
113
  background-color: white;
110
- border: 1px solid $trionesColorPrimaryText;
114
+ border: 1px solid $colorPrimary;
111
115
  }
112
116
 
113
117
  &-dashed {
114
- color: $trionesColorPrimaryText;
115
- border: 1px dashed $trionesColorPrimaryText;
116
- background-color: #ffffff;
118
+ color: $colorPrimary;
119
+ border: 1px dashed $colorPrimary;
120
+ background-color: $colorWhite;
117
121
  }
118
122
 
119
123
  &-filled {
120
- color: $trionesColorPrimaryText;
121
- background-color: $trionesColorPrimaryBg;
124
+ color: $colorPrimary;
125
+ background-color: variable.$trionesColorPrimaryBg;
122
126
  }
123
127
 
124
128
  &-text {
125
- color: $trionesColorPrimaryText;
126
- background-color: #ffffff;
129
+ color: $colorPrimary;
130
+ background-color: $colorWhite;
127
131
  }
128
132
 
129
133
  &-link {
130
- color: $trionesColorPrimaryText;
131
- background-color: #ffffff;
134
+ color: $colorPrimary;
135
+ background-color: $colorWhite;
132
136
 
133
137
  &:active {
134
138
  filter: none;
@@ -142,36 +146,36 @@ $buttonCls: 'triones-antm-button';
142
146
  &.#{$buttonCls} {
143
147
  &-variant {
144
148
  &-solid {
145
- color: #ffffff;
146
- background-color: $trionesColorErrorText;
147
- box-shadow: inset 0 0 0 1px $trionesColorErrorText;
149
+ color: $colorWhite;
150
+ background-color:$colorError;
151
+ box-shadow: inset 0 0 0 1px $colorError;
148
152
  }
149
153
 
150
154
  &-outlined {
151
- color: $trionesColorErrorText;
152
- background-color: #ffffff;
153
- border: 1px solid $trionesColorErrorText;
155
+ color: $colorError;
156
+ background-color: $colorWhite;
157
+ border: 1px solid $colorError;
154
158
  }
155
159
 
156
160
  &-dashed {
157
- color: $trionesColorErrorText;
158
- border: 1px dashed $trionesColorErrorText;
159
- background-color: #ffffff;
161
+ color: $colorError;
162
+ border: 1px dashed $colorError;
163
+ background-color: $colorWhite;
160
164
  }
161
165
 
162
166
  &-filled {
163
- color: $trionesColorErrorText;
167
+ color: $colorError;
164
168
  background-color: #ffdfdc;
165
169
  }
166
170
 
167
171
  &-text {
168
- color: $trionesColorErrorText;
169
- background-color: #ffffff;
172
+ color: $colorError;
173
+ background-color: $colorWhite;
170
174
  }
171
175
 
172
176
  &-link {
173
- color: $trionesColorErrorText;
174
- background-color: #ffffff;
177
+ color: $colorError;
178
+ background-color: $colorWhite;
175
179
 
176
180
  &:active {
177
181
  filter: none;
@@ -187,20 +191,20 @@ $buttonCls: 'triones-antm-button';
187
191
  }
188
192
 
189
193
  &-outlined {
190
- background-color: #ffffff;
194
+ background-color: $colorWhite;
191
195
  }
192
196
 
193
197
  &-dashed {
194
198
  border: 1px dashed #d9d9d9;
195
- background-color: #ffffff;
199
+ background-color: $colorWhite;
196
200
  }
197
201
 
198
202
  &-text {
199
- background-color: #ffffff;
203
+ background-color: $colorWhite;
200
204
  }
201
205
 
202
206
  &-link {
203
- background-color: #ffffff;
207
+ background-color: $colorWhite;
204
208
  }
205
209
  }
206
210
 
@@ -210,22 +214,22 @@ $buttonCls: 'triones-antm-button';
210
214
  }
211
215
 
212
216
  &-small {
213
- font-size: $trionesFontSizeSm;
217
+ font-size: variable.$trionesFontSizeSm;
214
218
  padding-inline: $trionesButtonPendingInlineSm;
215
219
  height: $trionesButtonHeightSm;
216
- border-radius: $trionesBorderRadiusSm;
220
+ border-radius: variable.$trionesBorderRadiusSm;
217
221
  }
218
222
 
219
223
  &-middle {
220
224
  padding-inline: $trionesButtonPendingInline;
221
225
  height: $trionesButtonHeight;
222
- border-radius: $trionesBorderRadius;
226
+ border-radius: variable.$trionesBorderRadius;
223
227
  }
224
228
 
225
229
  &-large {
226
230
  font-size: $trionesButtonContentFontSizeLg;
227
231
  padding-inline: $trionesButtonPendingInlineLg;
228
232
  height: $trionesButtonHeightLg;
229
- border-radius: $trionesBorderRadiusLg;
233
+ border-radius: variable.$trionesBorderRadiusLg;
230
234
  }
231
235
  }
@@ -1,4 +1,4 @@
1
- @use "../style/variable" as *;
1
+ @use "../style/variable" as variable;
2
2
 
3
3
  $calendarCls: 'triones-antm-calendar';
4
4
 
@@ -14,7 +14,7 @@ $calendarCls: 'triones-antm-calendar';
14
14
  display: flex;
15
15
  justify-content: center;
16
16
  align-items: center;
17
- border-radius: $trionesBorderRadius;
17
+ border-radius: variable.$trionesBorderRadius;
18
18
  cursor: default;
19
19
  flex-direction: column;
20
20
 
@@ -39,13 +39,13 @@ $calendarCls: 'triones-antm-calendar';
39
39
  }
40
40
 
41
41
  &-selected {
42
- background-color: $trionesColorPrimary;
42
+ background-color: variable.$trionesColorPrimary;
43
43
  color: white;
44
44
  }
45
45
 
46
46
  &-selected-range {
47
47
  border-radius: 0;
48
- background-color: $trionesColorPrimaryBg;
48
+ background-color: variable.$trionesColorPrimaryBg;
49
49
  color: black;
50
50
  }
51
51
  }
@@ -8,19 +8,18 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
8
8
  function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
9
9
  function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
10
10
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
11
- import { CustomWrapper } from '@tarojs/components';
11
+ import { CustomWrapper, PickerView, PickerViewColumn, View } from '@tarojs/components';
12
12
  import Taro from '@tarojs/taro';
13
13
  import classNames from 'classnames';
14
14
  import React, { useEffect, useRef, useState } from 'react';
15
15
  import Calendar from "../Calendar";
16
16
  import ConfigProvider from "../ConfigProvider";
17
- import { useTaro } from "../hooks/useTaro";
18
- import PickerView from "../PickerView";
17
+ import { useTaro } from "../hooks";
19
18
  import Popup from "../Popup";
20
- import { DatetimeUtils } from "../utils/datetime-utils";
21
19
  import { DateTimeSwitch } from "./DateTimeSwitch";
22
20
  import "./style.scss";
23
21
  import { cls, Mode } from "./types";
22
+ import { DatetimeUtils } from "../utils/datetime-utils";
24
23
  export var CalendarDatetimePicker = function CalendarDatetimePicker(_ref) {
25
24
  var _bodyRef$current;
26
25
  var open = _ref.open,
@@ -123,25 +122,29 @@ export var CalendarDatetimePicker = function CalendarDatetimePicker(_ref) {
123
122
  height: bodyHeight
124
123
  }
125
124
  }, /*#__PURE__*/React.createElement(PickerView, {
126
- columns: [Array(24).fill(0).map(function (_, i) {
127
- return {
128
- label: "".concat(DatetimeUtils.twoDigits(i)),
129
- value: "".concat(i)
130
- };
131
- }), Array(60).fill(0).map(function (_, i) {
132
- return {
133
- label: "".concat(DatetimeUtils.twoDigits(i)),
134
- value: "".concat(i)
135
- };
136
- })],
137
- labelInValue: false,
138
- value: ["".concat(valueRef === null || valueRef === void 0 ? void 0 : valueRef.current.getHours()), "".concat(valueRef === null || valueRef === void 0 ? void 0 : valueRef.current.getMinutes())],
139
- onChange: function onChange(v) {
125
+ className: "time-picker",
126
+ indicatorStyle: "height: 32Px;",
127
+ style: {
128
+ height: bodyHeight
129
+ },
130
+ value: [valueRef === null || valueRef === void 0 ? void 0 : valueRef.current.getHours(), valueRef === null || valueRef === void 0 ? void 0 : valueRef.current.getMinutes()],
131
+ onChange: function onChange(e) {
140
132
  var _datetimeSwitchRef$cu2;
133
+ var v = e.detail.value;
141
134
  valueRef.current = new Date(valueRef.current.getFullYear(), valueRef.current.getMonth(), valueRef.current.getDate(), v[0], v[1]);
142
135
  (_datetimeSwitchRef$cu2 = datetimeSwitchRef.current) === null || _datetimeSwitchRef$cu2 === void 0 || _datetimeSwitchRef$cu2.setDatetime(valueRef.current);
143
136
  }
144
- })));
137
+ }, /*#__PURE__*/React.createElement(PickerViewColumn, null, Array(24).fill(0).map(function (_, i) {
138
+ return /*#__PURE__*/React.createElement(View, {
139
+ key: "hour-".concat(i),
140
+ className: "time-item"
141
+ }, DatetimeUtils.twoDigits(i));
142
+ })), /*#__PURE__*/React.createElement(PickerViewColumn, null, Array(60).fill(0).map(function (_, i) {
143
+ return /*#__PURE__*/React.createElement(View, {
144
+ key: "minute-".concat(i),
145
+ className: "time-item"
146
+ }, DatetimeUtils.twoDigits(i));
147
+ })))));
145
148
  };
146
149
  return /*#__PURE__*/React.createElement(Popup, {
147
150
  open: innerOpen,
@@ -40,15 +40,23 @@ $calendarDatetimePickerCls: 'triones-antm-calendar-datetime-picker';
40
40
  &-button {
41
41
  padding: 12Px 16Px;
42
42
 
43
- &-cancel {
44
- }
43
+ &-cancel {}
45
44
 
46
45
  &-ok {
47
46
  color: variable.$trionesColorPrimary;
48
47
  }
49
48
  }
50
49
  }
51
- &-body {
52
50
 
51
+ &-body {
52
+ .time-picker {
53
+ .time-item {
54
+ flex-shrink: 0;
55
+ display: flex;
56
+ align-items: center;
57
+ justify-content: center;
58
+ height: 32Px;
59
+ }
60
+ }
53
61
  }
54
- }
62
+ }
@@ -16,7 +16,8 @@ export var CalendarPicker = /*#__PURE__*/memo(function (_ref) {
16
16
  open = _ref.open,
17
17
  title = _ref.title,
18
18
  afterOpenChange = _ref.afterOpenChange,
19
- value = _ref.value,
19
+ _ref$value = _ref.value,
20
+ value = _ref$value === void 0 ? new Date() : _ref$value,
20
21
  onOk = _ref.onOk,
21
22
  onCancel = _ref.onCancel,
22
23
  _onClose = _ref.onClose;
@@ -1,15 +1,15 @@
1
- @use "../style/variable" as *;
1
+ @use "../style/variable" as variable;
2
2
 
3
3
  $calendarPickerCls: 'triones-antm-calendar-picker';
4
4
 
5
5
  .#{$calendarPickerCls} {
6
- border-top-left-radius: $trionesBorderRadius;
7
- border-top-right-radius: $trionesBorderRadius;
6
+ border-top-left-radius: variable.$trionesBorderRadius;
7
+ border-top-right-radius: variable.$trionesBorderRadius;
8
8
 
9
9
  &-header {
10
10
  display: flex;
11
11
  justify-content: space-between;
12
- border-bottom: 1Px solid $trionesBorderColor;
12
+ border-bottom: 1Px solid variable.$trionesBorderColor;
13
13
  padding: 4Px;
14
14
  &-button {
15
15
  padding: 8Px 12Px;
@@ -18,7 +18,7 @@ $calendarPickerCls: 'triones-antm-calendar-picker';
18
18
  }
19
19
 
20
20
  &-ok {
21
- color: $trionesColorPrimary;
21
+ color: variable.$trionesColorPrimary;
22
22
  }
23
23
  }
24
24
 
@@ -0,0 +1,15 @@
1
+ import { Rule } from 'rc-field-form/lib/interface';
2
+ import React, { FC } from 'react';
3
+ type FormItemInputProps = {
4
+ children?: React.ReactElement;
5
+ className?: string;
6
+ name?: string;
7
+ rules?: Rule[];
8
+ initialValue?: any;
9
+ valuePropName?: string;
10
+ errors?: React.ReactNode[];
11
+ errorRender?: (errors?: any[]) => React.ReactNode;
12
+ hiddenError?: boolean;
13
+ };
14
+ export declare const FormItemInput: FC<FormItemInputProps>;
15
+ export {};
@@ -0,0 +1,39 @@
1
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
4
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
5
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
6
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
+ import classNames from 'classnames';
8
+ import { isEmpty } from 'lodash-es';
9
+ import { Field } from 'rc-field-form';
10
+ import React, { useState } from 'react';
11
+ export var FormItemInput = function FormItemInput(_ref) {
12
+ var children = _ref.children,
13
+ className = _ref.className,
14
+ name = _ref.name,
15
+ rules = _ref.rules,
16
+ initialValue = _ref.initialValue,
17
+ valuePropName = _ref.valuePropName,
18
+ errorRender = _ref.errorRender,
19
+ hiddenError = _ref.hiddenError;
20
+ var _useState = useState(),
21
+ _useState2 = _slicedToArray(_useState, 2),
22
+ meta = _useState2[0],
23
+ setMeta = _useState2[1];
24
+ var clsPrefix = 'triones-antm-form-item';
25
+ return /*#__PURE__*/React.createElement("div", {
26
+ className: classNames(className)
27
+ }, /*#__PURE__*/React.createElement(Field, {
28
+ name: name,
29
+ rules: rules,
30
+ valuePropName: valuePropName,
31
+ trigger: 'onChange',
32
+ onMetaChange: function onMetaChange(meta) {
33
+ setMeta(meta);
34
+ },
35
+ initialValue: initialValue
36
+ }, children), !hiddenError && !isEmpty(meta === null || meta === void 0 ? void 0 : meta.errors) && /*#__PURE__*/React.createElement("div", {
37
+ className: classNames("".concat(clsPrefix, "-error"))
38
+ }, (errorRender === null || errorRender === void 0 ? void 0 : errorRender(meta === null || meta === void 0 ? void 0 : meta.errors)) || (meta === null || meta === void 0 ? void 0 : meta.errors.join(','))));
39
+ };
@@ -0,0 +1,13 @@
1
+ import React, { CSSProperties, FC } from "react";
2
+ import { NamePath } from "rc-field-form/lib/interface";
3
+ import { FormItemLayout } from "@trionesdev/antd-mobile-base-react";
4
+ type FormItemLabelProps = {
5
+ className?: string;
6
+ style?: CSSProperties;
7
+ label?: React.ReactNode;
8
+ layout?: FormItemLayout;
9
+ name?: NamePath;
10
+ required?: boolean;
11
+ };
12
+ export declare const FormItemLabel: FC<FormItemLabelProps>;
13
+ export {};
@@ -0,0 +1,35 @@
1
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
3
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
4
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
5
+ import React from "react";
6
+ import classNames from "classnames";
7
+ import { isFunction } from "lodash-es";
8
+ import { useFormContext } from "@trionesdev/antd-mobile-base-react";
9
+ import { useTaro } from "../../hooks";
10
+ export var FormItemLabel = function FormItemLabel(_ref) {
11
+ var className = _ref.className,
12
+ style = _ref.style,
13
+ label = _ref.label,
14
+ layout = _ref.layout,
15
+ required = _ref.required;
16
+ var _useTaro = useTaro(),
17
+ isTaroWeApp = _useTaro.isTaroWeApp,
18
+ isTaroWeb = _useTaro.isTaroWeb;
19
+ var _useFormContext = useFormContext(),
20
+ requiredMark = _useFormContext.requiredMark,
21
+ colon = _useFormContext.colon;
22
+ var clsPrefix = "triones-antm-form-item-label";
23
+ return /*#__PURE__*/React.createElement("div", {
24
+ className: classNames(className, {
25
+ required: "".concat(clsPrefix, "-required")
26
+ }),
27
+ style: style
28
+ }, /*#__PURE__*/React.createElement("div", {
29
+ className: classNames("".concat(clsPrefix, "-wrapper"), _defineProperty(_defineProperty({}, "h5", isTaroWeb), "wx", isTaroWeApp))
30
+ }, required && /*#__PURE__*/React.createElement("div", {
31
+ className: "".concat(clsPrefix, "-required-mark")
32
+ }, isFunction(requiredMark) ? requiredMark(label, {
33
+ required: required
34
+ }) : '*'), label, layout == 'horizontal' && colon && ':'));
35
+ };
@@ -0,0 +1,22 @@
1
+ import React, { CSSProperties, FC, ReactElement, ReactNode } from "react";
2
+ import { NamePath, Rule } from "rc-field-form/lib/interface";
3
+ import { FormItemLayout, FormLayoutAlign } from "@trionesdev/antd-mobile-base-react";
4
+ export type FormItemProps = {
5
+ className?: string;
6
+ style?: CSSProperties;
7
+ children?: ReactElement;
8
+ layout?: FormItemLayout;
9
+ label?: ReactNode;
10
+ labelAlign?: FormLayoutAlign;
11
+ labelWidth?: number;
12
+ name?: NamePath;
13
+ required?: boolean;
14
+ hidden?: boolean;
15
+ noStyle?: boolean;
16
+ rules?: Rule[];
17
+ initialValue?: any;
18
+ valuePropName?: string;
19
+ errorRender?: (errors?: any[]) => React.ReactNode;
20
+ extra?: ReactNode;
21
+ };
22
+ export declare const FormItem: FC<FormItemProps>;
@@ -0,0 +1,73 @@
1
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
+ var _excluded = ["className", "style", "children", "layout", "label", "labelAlign", "labelWidth", "name", "required", "hidden", "noStyle", "rules", "initialValue", "valuePropName", "errorRender", "extra"];
3
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
5
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
6
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
7
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
8
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
9
+ import React from "react";
10
+ import { FormItemLabel } from "./form-item-label";
11
+ import { FormItemInput } from "./form-item-input";
12
+ import classNames from "classnames";
13
+ import { Field } from "rc-field-form";
14
+ import { useFormContext } from "@trionesdev/antd-mobile-base-react";
15
+ export var FormItem = function FormItem(_ref) {
16
+ var className = _ref.className,
17
+ style = _ref.style,
18
+ children = _ref.children,
19
+ layout = _ref.layout,
20
+ label = _ref.label,
21
+ labelAlign = _ref.labelAlign,
22
+ labelWidth = _ref.labelWidth,
23
+ name = _ref.name,
24
+ required = _ref.required,
25
+ _ref$hidden = _ref.hidden,
26
+ hidden = _ref$hidden === void 0 ? false : _ref$hidden,
27
+ _ref$noStyle = _ref.noStyle,
28
+ noStyle = _ref$noStyle === void 0 ? false : _ref$noStyle,
29
+ rules = _ref.rules,
30
+ initialValue = _ref.initialValue,
31
+ valuePropName = _ref.valuePropName,
32
+ errorRender = _ref.errorRender,
33
+ extra = _ref.extra,
34
+ props = _objectWithoutProperties(_ref, _excluded);
35
+ var _useFormContext = useFormContext(),
36
+ formLayout = _useFormContext.layout,
37
+ formLayoutAlign = _useFormContext.labelAlign,
38
+ formLabelWidth = _useFormContext.labelWidth,
39
+ hiddenError = _useFormContext.hiddenError,
40
+ formExtra = _useFormContext.extra;
41
+ var formItemLayout = layout ? layout : formLayout === 'inline' ? 'horizontal' : formLayout;
42
+ var formItemAlign = labelAlign ? labelAlign : formLayoutAlign || 'left';
43
+ var formItemLabelWidth = labelWidth ? labelWidth : formLabelWidth;
44
+ var itemExtra = extra !== undefined ? extra : formExtra;
45
+ var clsPrefix = "triones-antm-form-item";
46
+ if (noStyle) {
47
+ return /*#__PURE__*/React.createElement(Field, {
48
+ name: name,
49
+ rules: rules,
50
+ trigger: 'onChange',
51
+ initialValue: initialValue
52
+ }, children);
53
+ }
54
+ return /*#__PURE__*/React.createElement("div", {
55
+ className: classNames(clsPrefix, "".concat(clsPrefix, "-").concat(formItemLayout), className, _defineProperty({}, "".concat(clsPrefix, "-hidden"), hidden)),
56
+ style: style
57
+ }, label && /*#__PURE__*/React.createElement(FormItemLabel, {
58
+ className: classNames("".concat(clsPrefix, "-label"), "".concat(clsPrefix, "-label-").concat(formItemAlign)),
59
+ style: {
60
+ width: formItemLabelWidth
61
+ },
62
+ label: label,
63
+ required: required
64
+ }), /*#__PURE__*/React.createElement(FormItemInput, _extends({
65
+ className: "".concat(clsPrefix, "-input")
66
+ }, props, {
67
+ name: name,
68
+ rules: rules,
69
+ errorRender: errorRender,
70
+ initialValue: initialValue,
71
+ hiddenError: hiddenError
72
+ }), children), formExtra);
73
+ };
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ import { FormItemProps } from "./form-item";
3
+ declare const FormItem: import("react").FC<FormItemProps>;
4
+ export type { FormItemProps };
5
+ export default FormItem;
@@ -0,0 +1,3 @@
1
+ import { FormItem as InternalFromItem } from "./form-item";
2
+ var FormItem = InternalFromItem;
3
+ export default FormItem;
@@ -1,3 +1,10 @@
1
- import { Form, FormProps, FormItemProps } from "@trionesdev/antd-mobile-base-react";
1
+ import { Form as InternalForm, FormProps } from "@trionesdev/antd-mobile-base-react";
2
+ import FormItem, { FormItemProps } from "./FormItem";
3
+ import "./style.scss";
4
+ type InternalFormType = typeof InternalForm;
5
+ type CompoundedComponent = InternalFormType & {
6
+ Item: typeof FormItem;
7
+ };
8
+ declare const Form: CompoundedComponent;
2
9
  export type { FormProps, FormItemProps };
3
10
  export default Form;
@@ -1,2 +1,6 @@
1
- import { Form } from "@trionesdev/antd-mobile-base-react";
1
+ import { Form as InternalForm } from "@trionesdev/antd-mobile-base-react";
2
+ import FormItem from "./FormItem";
3
+ import "./style.scss";
4
+ var Form = InternalForm;
5
+ Form.Item = FormItem;
2
6
  export default Form;