@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.
- package/dist/Button/button.d.ts +2 -1
- package/dist/Button/style.scss +49 -45
- package/dist/Calendar/style.scss +4 -4
- package/dist/CalendarDatetimePicker/CalendarDatetimePicker.js +22 -19
- package/dist/CalendarDatetimePicker/style.scss +12 -4
- package/dist/CalendarPicker/calendar-picker.js +2 -1
- package/dist/CalendarPicker/style.scss +5 -5
- package/dist/Form/FormItem/form-item-input.d.ts +15 -0
- package/dist/Form/FormItem/form-item-input.js +39 -0
- package/dist/Form/FormItem/form-item-label.d.ts +13 -0
- package/dist/Form/FormItem/form-item-label.js +35 -0
- package/dist/Form/FormItem/form-item.d.ts +22 -0
- package/dist/Form/FormItem/form-item.js +73 -0
- package/dist/Form/FormItem/index.d.ts +5 -0
- package/dist/Form/FormItem/index.js +3 -0
- package/dist/Form/index.d.ts +8 -1
- package/dist/Form/index.js +5 -1
- package/dist/Form/style.scss +78 -0
- package/dist/ImagesPreview/ImagesPreview.js +2 -1
- package/dist/ImagesWall/ImagesWall.js +1 -1
- package/dist/Input/index.d.ts +17 -2
- package/dist/Input/index.js +13 -1
- package/dist/Input/index.scss +267 -0
- package/dist/Input/input-affix-wrapper.d.ts +13 -0
- package/dist/Input/input-affix-wrapper.js +37 -0
- package/dist/Input/input-digit.d.ts +7 -0
- package/dist/Input/input-digit.js +53 -0
- package/dist/Input/input-number.d.ts +7 -0
- package/dist/Input/input-number.js +50 -0
- package/dist/Input/input-opt.d.ts +16 -0
- package/dist/Input/input-opt.js +87 -0
- package/dist/Input/input-password.d.ts +8 -0
- package/dist/Input/input-password.js +49 -0
- package/dist/Input/input.d.ts +3 -0
- package/dist/Input/input.js +7 -0
- package/dist/Input/taro-input.d.ts +8 -0
- package/dist/Input/taro-input.js +54 -0
- package/dist/Input/textarea.d.ts +15 -0
- package/dist/Input/textarea.js +52 -0
- package/dist/Input/types.d.ts +19 -0
- package/dist/Input/types.js +2 -0
- package/dist/Popup/Popup.d.ts +3 -0
- package/dist/Popup/Popup.js +29 -0
- package/dist/Popup/index.d.ts +2 -1
- package/dist/Popup/index.js +1 -1
- package/dist/Progress/Progress.d.ts +2 -1
- package/dist/Progress/Progress.js +3 -0
- package/dist/Progress/ProgressCircle.d.ts +1 -1
- package/dist/Progress/ProgressCircle.js +21 -26
- package/dist/Progress/ProgressLine.d.ts +1 -1
- package/dist/Progress/types.d.ts +2 -0
- package/dist/SideBar/style.scss +6 -6
- package/dist/VerificationCodeInput/index.d.ts +2 -2
- package/dist/VerificationCodeInput/index.js +1 -1
- package/dist/VerificationCodeInput/style.scss +20 -0
- package/dist/VerificationCodeInput/verification-code-input.d.ts +24 -0
- package/dist/VerificationCodeInput/verification-code-input.js +99 -0
- package/dist/index.d.ts +1 -1
- package/dist/style/variable.scss +19 -0
- package/dist/types.d.ts +0 -1
- package/package.json +21 -21
package/dist/Button/button.d.ts
CHANGED
|
@@ -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?:
|
|
49
|
+
size?: SizeType;
|
|
49
50
|
/**
|
|
50
51
|
* @description 点击事件
|
|
51
52
|
*/
|
package/dist/Button/style.scss
CHANGED
|
@@ -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:
|
|
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:
|
|
58
|
+
background-color: $colorWhite;
|
|
55
59
|
|
|
56
60
|
&.#{$buttonCls} {
|
|
57
61
|
&-variant {
|
|
58
62
|
&-solid {
|
|
59
|
-
color:
|
|
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:
|
|
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:
|
|
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:
|
|
87
|
+
background-color: $colorWhite;
|
|
84
88
|
}
|
|
85
89
|
|
|
86
90
|
&-link {
|
|
87
91
|
color: rgba(0, 0, 0, 0.75);
|
|
88
|
-
background-color:
|
|
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:
|
|
103
|
-
background-color: $
|
|
104
|
-
box-shadow: inset 0 0 0 1px $
|
|
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:
|
|
112
|
+
color: $colorPrimary;
|
|
109
113
|
background-color: white;
|
|
110
|
-
border: 1px solid $
|
|
114
|
+
border: 1px solid $colorPrimary;
|
|
111
115
|
}
|
|
112
116
|
|
|
113
117
|
&-dashed {
|
|
114
|
-
color: $
|
|
115
|
-
border: 1px dashed $
|
|
116
|
-
background-color:
|
|
118
|
+
color: $colorPrimary;
|
|
119
|
+
border: 1px dashed $colorPrimary;
|
|
120
|
+
background-color: $colorWhite;
|
|
117
121
|
}
|
|
118
122
|
|
|
119
123
|
&-filled {
|
|
120
|
-
color: $
|
|
121
|
-
background-color:
|
|
124
|
+
color: $colorPrimary;
|
|
125
|
+
background-color: variable.$trionesColorPrimaryBg;
|
|
122
126
|
}
|
|
123
127
|
|
|
124
128
|
&-text {
|
|
125
|
-
color: $
|
|
126
|
-
background-color:
|
|
129
|
+
color: $colorPrimary;
|
|
130
|
+
background-color: $colorWhite;
|
|
127
131
|
}
|
|
128
132
|
|
|
129
133
|
&-link {
|
|
130
|
-
color: $
|
|
131
|
-
background-color:
|
|
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:
|
|
146
|
-
background-color
|
|
147
|
-
box-shadow: inset 0 0 0 1px $
|
|
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: $
|
|
152
|
-
background-color:
|
|
153
|
-
border: 1px solid $
|
|
155
|
+
color: $colorError;
|
|
156
|
+
background-color: $colorWhite;
|
|
157
|
+
border: 1px solid $colorError;
|
|
154
158
|
}
|
|
155
159
|
|
|
156
160
|
&-dashed {
|
|
157
|
-
color: $
|
|
158
|
-
border: 1px dashed $
|
|
159
|
-
background-color:
|
|
161
|
+
color: $colorError;
|
|
162
|
+
border: 1px dashed $colorError;
|
|
163
|
+
background-color: $colorWhite;
|
|
160
164
|
}
|
|
161
165
|
|
|
162
166
|
&-filled {
|
|
163
|
-
color: $
|
|
167
|
+
color: $colorError;
|
|
164
168
|
background-color: #ffdfdc;
|
|
165
169
|
}
|
|
166
170
|
|
|
167
171
|
&-text {
|
|
168
|
-
color: $
|
|
169
|
-
background-color:
|
|
172
|
+
color: $colorError;
|
|
173
|
+
background-color: $colorWhite;
|
|
170
174
|
}
|
|
171
175
|
|
|
172
176
|
&-link {
|
|
173
|
-
color: $
|
|
174
|
-
background-color:
|
|
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:
|
|
194
|
+
background-color: $colorWhite;
|
|
191
195
|
}
|
|
192
196
|
|
|
193
197
|
&-dashed {
|
|
194
198
|
border: 1px dashed #d9d9d9;
|
|
195
|
-
background-color:
|
|
199
|
+
background-color: $colorWhite;
|
|
196
200
|
}
|
|
197
201
|
|
|
198
202
|
&-text {
|
|
199
|
-
background-color:
|
|
203
|
+
background-color: $colorWhite;
|
|
200
204
|
}
|
|
201
205
|
|
|
202
206
|
&-link {
|
|
203
|
-
background-color:
|
|
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:
|
|
217
|
+
font-size: variable.$trionesFontSizeSm;
|
|
214
218
|
padding-inline: $trionesButtonPendingInlineSm;
|
|
215
219
|
height: $trionesButtonHeightSm;
|
|
216
|
-
border-radius:
|
|
220
|
+
border-radius: variable.$trionesBorderRadiusSm;
|
|
217
221
|
}
|
|
218
222
|
|
|
219
223
|
&-middle {
|
|
220
224
|
padding-inline: $trionesButtonPendingInline;
|
|
221
225
|
height: $trionesButtonHeight;
|
|
222
|
-
border-radius:
|
|
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:
|
|
233
|
+
border-radius: variable.$trionesBorderRadiusLg;
|
|
230
234
|
}
|
|
231
235
|
}
|
package/dist/Calendar/style.scss
CHANGED
|
@@ -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:
|
|
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:
|
|
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:
|
|
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
|
|
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
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
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:
|
|
7
|
-
border-top-right-radius:
|
|
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
|
|
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:
|
|
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
|
+
};
|
package/dist/Form/index.d.ts
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
-
import { Form, FormProps
|
|
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;
|
package/dist/Form/index.js
CHANGED
|
@@ -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;
|