@nutui/nutui-react-taro 3.0.1 → 3.0.2

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 (82) hide show
  1. package/dist/cjs/hooks/use-client-rect.js +1 -0
  2. package/dist/cjs/packages/datepicker/style/style.css +70 -0
  3. package/dist/cjs/packages/datepickerview/style/index.js +1 -0
  4. package/dist/cjs/packages/datepickerview/style/style.css +70 -0
  5. package/dist/cjs/packages/fixednav/fixednav.js +20 -14
  6. package/dist/cjs/packages/fixednav/style/fixednav.scss +0 -15
  7. package/dist/cjs/packages/fixednav/style/style.css +0 -14
  8. package/dist/cjs/packages/fixednav/style/style.harmony.css +0 -14
  9. package/dist/cjs/packages/form/form.d.ts +2 -0
  10. package/dist/cjs/packages/form/form.js +11 -2
  11. package/dist/cjs/packages/form/index.d.ts +2 -1
  12. package/dist/cjs/packages/form/index.js +1 -0
  13. package/dist/cjs/packages/form/style/form.scss +0 -66
  14. package/dist/cjs/packages/form/style/style.css +31 -21
  15. package/dist/cjs/packages/form/style/style.harmony.css +1 -67
  16. package/dist/cjs/packages/form/types.d.ts +2 -1
  17. package/dist/cjs/packages/form/useform.d.ts +2 -1
  18. package/dist/cjs/packages/form/useform.js +338 -247
  19. package/dist/cjs/packages/formitem/formitem.d.ts +1 -0
  20. package/dist/cjs/packages/formitem/formitem.js +57 -45
  21. package/dist/cjs/packages/formitem/style/formitem.scss +101 -21
  22. package/dist/cjs/packages/formitem/style/style.css +89 -12
  23. package/dist/cjs/packages/formitem/style/style.harmony.css +89 -12
  24. package/dist/cjs/packages/input/input.js +3 -1
  25. package/dist/cjs/packages/picker/style/index.js +1 -0
  26. package/dist/cjs/packages/picker/style/style.css +70 -0
  27. package/dist/cjs/packages/signature/signature.js +1 -1
  28. package/dist/cjs/packages/swipe/style/style.css +3 -3
  29. package/dist/cjs/packages/swipe/style/style.harmony.css +3 -3
  30. package/dist/cjs/packages/swipe/style/swipe.scss +7 -3
  31. package/dist/cjs/packages/swipe/swipe.js +14 -15
  32. package/dist/cjs/utils/get-rect-by-taro.d.ts +1 -1
  33. package/dist/cjs/utils/get-rect-by-taro.js +4 -1
  34. package/dist/cjs/utils/get-system-info.js +4 -5
  35. package/dist/cjs/utils/merge.d.ts +14 -0
  36. package/dist/cjs/utils/merge.js +98 -0
  37. package/dist/cjs/utils/platform-taro.js +4 -5
  38. package/dist/cjs/utils/to-array.d.ts +1 -0
  39. package/dist/cjs/utils/to-array.js +18 -0
  40. package/dist/es/hooks/use-client-rect.js +1 -0
  41. package/dist/es/packages/datepicker/style/style.css +70 -0
  42. package/dist/es/packages/datepickerview/style/index.js +1 -0
  43. package/dist/es/packages/datepickerview/style/style.css +70 -0
  44. package/dist/es/packages/fixednav/fixednav.js +20 -14
  45. package/dist/es/packages/fixednav/style/fixednav.scss +0 -15
  46. package/dist/es/packages/fixednav/style/style.css +0 -14
  47. package/dist/es/packages/fixednav/style/style.harmony.css +0 -14
  48. package/dist/es/packages/form/form.d.ts +10 -0
  49. package/dist/es/packages/form/form.js +11 -2
  50. package/dist/es/packages/form/index.d.ts +2 -1
  51. package/dist/es/packages/form/index.js +2 -1
  52. package/dist/es/packages/form/style/form.scss +0 -66
  53. package/dist/es/packages/form/style/style.css +31 -21
  54. package/dist/es/packages/form/style/style.harmony.css +1 -67
  55. package/dist/es/packages/form/types.d.ts +2 -1
  56. package/dist/es/packages/form/useform.d.ts +2 -1
  57. package/dist/es/packages/form/useform.js +336 -248
  58. package/dist/es/packages/formitem/formitem.d.ts +1 -0
  59. package/dist/es/packages/formitem/formitem.js +58 -46
  60. package/dist/es/packages/formitem/style/formitem.scss +101 -21
  61. package/dist/es/packages/formitem/style/style.css +89 -12
  62. package/dist/es/packages/formitem/style/style.harmony.css +89 -12
  63. package/dist/es/packages/input/input.js +3 -1
  64. package/dist/es/packages/picker/style/index.js +1 -0
  65. package/dist/es/packages/picker/style/style.css +70 -0
  66. package/dist/es/packages/signature/signature.js +2 -2
  67. package/dist/es/packages/swipe/style/style.css +3 -3
  68. package/dist/es/packages/swipe/style/style.harmony.css +3 -3
  69. package/dist/es/packages/swipe/style/swipe.scss +7 -3
  70. package/dist/es/packages/swipe/swipe.js +14 -15
  71. package/dist/es/utils/get-rect-by-taro.d.ts +1 -1
  72. package/dist/es/utils/get-rect-by-taro.js +4 -1
  73. package/dist/es/utils/get-system-info.js +4 -4
  74. package/dist/es/utils/merge.d.ts +14 -0
  75. package/dist/es/utils/merge.js +68 -0
  76. package/dist/es/utils/platform-taro.js +4 -4
  77. package/dist/es/utils/to-array.d.ts +1 -0
  78. package/dist/es/utils/to-array.js +8 -0
  79. package/dist/nutui.react.umd.js +4301 -4084
  80. package/dist/style.css +1 -1
  81. package/dist/style.scss +34 -34
  82. package/package.json +1 -1
@@ -7,6 +7,7 @@ import { View } from "@tarojs/components";
7
7
  import Overlay from "../overlay/index";
8
8
  import { useConfig } from "../configprovider/index";
9
9
  import { defaultOverlayProps } from "../overlay/overlay";
10
+ import Badge from "../badge/index";
10
11
  var defaultProps = _object_spread_props(_object_spread({}, defaultOverlayProps), {
11
12
  activeText: '',
12
13
  inactiveText: '',
@@ -28,6 +29,20 @@ export var FixedNav = function(props) {
28
29
  var classes = classNames(classPrefix, {
29
30
  active: visible
30
31
  }, type, className);
32
+ var renderListItem = function(item, index) {
33
+ return /*#__PURE__*/ React.createElement(View, {
34
+ className: "".concat(classPrefix, "-list-item"),
35
+ onClick: function(event) {
36
+ return onSelect(item, event);
37
+ },
38
+ key: item.id || index
39
+ }, /*#__PURE__*/ React.isValidElement(item.icon) ? item.icon : /*#__PURE__*/ React.createElement("img", {
40
+ src: item.icon,
41
+ alt: ""
42
+ }), /*#__PURE__*/ React.createElement(View, {
43
+ className: "".concat(classPrefix, "-list-text")
44
+ }, item.text));
45
+ };
31
46
  return /*#__PURE__*/ React.createElement(View, {
32
47
  className: classes,
33
48
  style: _object_spread({}, position, style)
@@ -42,20 +57,11 @@ export var FixedNav = function(props) {
42
57
  }, children || /*#__PURE__*/ React.createElement(View, {
43
58
  className: "".concat(classPrefix, "-list")
44
59
  }, list.map(function(item, index) {
45
- return /*#__PURE__*/ React.createElement(View, {
46
- className: "".concat(classPrefix, "-list-item"),
47
- onClick: function(event) {
48
- return onSelect(item, event);
49
- },
50
- key: item.id || index
51
- }, /*#__PURE__*/ React.isValidElement(item.icon) ? item.icon : /*#__PURE__*/ React.createElement("img", {
52
- src: item.icon,
53
- alt: ""
54
- }), /*#__PURE__*/ React.createElement(View, {
55
- className: "".concat(classPrefix, "-list-text")
56
- }, item.text), item.num && /*#__PURE__*/ React.createElement(View, {
57
- className: "b"
58
- }, item.num));
60
+ return /*#__PURE__*/ React.createElement(React.Fragment, null, item.num ? /*#__PURE__*/ React.createElement(Badge, {
61
+ value: item.num,
62
+ top: 8,
63
+ right: 6
64
+ }, renderListItem(item, index)) : /*#__PURE__*/ React.createElement(React.Fragment, null, renderListItem(item, index)));
59
65
  }))), /*#__PURE__*/ React.createElement(View, {
60
66
  className: "".concat(classPrefix, "-btn"),
61
67
  onClick: function() {
@@ -95,21 +95,6 @@
95
95
  .nut-fixednav-list-text {
96
96
  font-size: 10px;
97
97
  }
98
-
99
- .b {
100
- position: absolute;
101
- right: 0;
102
- top: 1px;
103
- height: 14px;
104
- line-height: 14px;
105
- font-size: 10px;
106
- padding: 0 3px;
107
- color: white;
108
- background: $color-primary;
109
- border-radius: 7px;
110
- text-align: center;
111
- min-width: 12px;
112
- }
113
98
  }
114
99
  }
115
100
 
@@ -136,20 +136,6 @@
136
136
  .nut-fixednav-list-item .nut-fixednav-list-text {
137
137
  font-size: 10px;
138
138
  }
139
- .nut-fixednav-list-item .b {
140
- position: absolute;
141
- right: 0;
142
- top: 1px;
143
- height: 14px;
144
- line-height: 14px;
145
- font-size: 10px;
146
- padding: 0 3px;
147
- color: white;
148
- background: var(--nutui-color-primary, #ff0f23);
149
- border-radius: 7px;
150
- text-align: center;
151
- min-width: 12px;
152
- }
153
139
  .nut-fixednav.left {
154
140
  right: auto;
155
141
  left: 0;
@@ -81,20 +81,6 @@
81
81
  .nut-fixednav-list-item .nut-fixednav-list-text {
82
82
  font-size: 10px;
83
83
  }
84
- .nut-fixednav-list-item .b {
85
- position: absolute;
86
- right: 0;
87
- top: 1px;
88
- height: 14px;
89
- line-height: 14px;
90
- font-size: 10px;
91
- padding: 0 3px;
92
- color: white;
93
- background: #ff0f23;
94
- border-radius: 7px;
95
- text-align: center;
96
- min-width: 12px;
97
- }
98
84
  .nut-fixednav.left {
99
85
  right: auto;
100
86
  left: 0;
@@ -22,8 +22,18 @@ export interface FormProps extends TFormProps {
22
22
  * @default -
23
23
  */
24
24
  form: any
25
+ /**
26
+ * 是否禁用
27
+ * @default false
28
+ */
29
+ disabled: boolean
25
30
  divider: boolean;
26
31
  /**
32
+ * 统一设置字段触发验证的时机
33
+ * @default onChange
34
+ */
35
+ validateTrigger: string | string[] | false
36
+ /**
27
37
  * 表单项 label 的位置
28
38
  * @default 'left'\
29
39
  */
@@ -12,7 +12,9 @@ import Cell from "../cell/index";
12
12
  var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
13
13
  labelPosition: 'right',
14
14
  starPosition: 'left',
15
+ disabled: false,
15
16
  divider: false,
17
+ validateTrigger: 'onChange',
16
18
  onFinish: function(values) {},
17
19
  onFinishFailed: function(values, errorFields) {}
18
20
  });
@@ -23,15 +25,17 @@ var PositionInfo = {
23
25
  };
24
26
  export var Form = /*#__PURE__*/ React.forwardRef(function(props, ref) {
25
27
  var classPrefix = 'nut-form';
26
- var _ref = _object_spread({}, defaultProps, props), className = _ref.className, style = _ref.style, footer = _ref.footer, children = _ref.children, initialValues = _ref.initialValues, divider = _ref.divider, onFinish = _ref.onFinish, onFinishFailed = _ref.onFinishFailed, labelPosition = _ref.labelPosition, starPosition = _ref.starPosition, form = _ref.form, rest = _object_without_properties(_ref, [
28
+ var _ref = _object_spread({}, defaultProps, props), className = _ref.className, style = _ref.style, footer = _ref.footer, children = _ref.children, initialValues = _ref.initialValues, divider = _ref.divider, disabled = _ref.disabled, onFinish = _ref.onFinish, onFinishFailed = _ref.onFinishFailed, validateTrigger = _ref.validateTrigger, labelPosition = _ref.labelPosition, starPosition = _ref.starPosition, form = _ref.form, rest = _object_without_properties(_ref, [
27
29
  "className",
28
30
  "style",
29
31
  "footer",
30
32
  "children",
31
33
  "initialValues",
32
34
  "divider",
35
+ "disabled",
33
36
  "onFinish",
34
37
  "onFinishFailed",
38
+ "validateTrigger",
35
39
  "labelPosition",
36
40
  "starPosition",
37
41
  "form"
@@ -78,7 +82,12 @@ export var Form = /*#__PURE__*/ React.forwardRef(function(props, ref) {
78
82
  }), /*#__PURE__*/ React.createElement(Cell.Group, {
79
83
  divider: divider
80
84
  }, /*#__PURE__*/ React.createElement(Context.Provider, {
81
- value: formInstance
85
+ value: {
86
+ formInstance: formInstance,
87
+ labelPosition: labelPosition,
88
+ disabled: disabled,
89
+ validateTrigger: validateTrigger
90
+ }
82
91
  }, children), footer ? /*#__PURE__*/ React.createElement(Cell, {
83
92
  className: "".concat(classPrefix, "-footer")
84
93
  }, footer) : null));
@@ -2,11 +2,12 @@ import React from 'react';
2
2
  import { FormProps } from "./form";
3
3
  import { FormItem } from "../formitem/formitem";
4
4
  import { FormInstance } from './types';
5
- import { useForm } from "./useform";
5
+ import { useForm, useWatch } from "./useform";
6
6
  export type { FormItemRuleWithoutValidator, FormInstance, FormFieldEntity, } from './types';
7
7
  type CompoundedComponent = React.ForwardRefExoticComponent<Partial<FormProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & React.RefAttributes<FormInstance>> & {
8
8
  Item: typeof FormItem;
9
9
  useForm: typeof useForm;
10
+ useWatch: typeof useWatch;
10
11
  };
11
12
  declare const InnerForm: CompoundedComponent;
12
13
  export default InnerForm;
@@ -1,8 +1,9 @@
1
1
  import React from "react";
2
2
  import { Form } from "./form";
3
3
  import { FormItem } from "../formitem/formitem";
4
- import { useForm } from "./useform";
4
+ import { useForm, useWatch } from "./useform";
5
5
  var InnerForm = Form;
6
6
  InnerForm.Item = FormItem;
7
7
  InnerForm.useForm = useForm;
8
+ InnerForm.useWatch = useWatch;
8
9
  export default InnerForm;
@@ -1,67 +1 @@
1
- .form-layout-right .nut-form-item-label {
2
- text-align: right;
3
- padding-right: 24px;
4
- white-space: nowrap;
5
- }
6
1
 
7
- .form-layout-left .nut-form-item-label {
8
- position: relative;
9
- text-align: left;
10
- padding-left: 12px;
11
- white-space: nowrap;
12
-
13
- .required {
14
- display: block;
15
- line-height: 1.5;
16
- position: absolute;
17
- left: 0.1em;
18
- }
19
- }
20
-
21
- .form-layout-top .nut-form-item {
22
- flex-direction: column;
23
- align-items: flex-start;
24
- white-space: nowrap;
25
- }
26
-
27
- .form-layout-top .nut-form-item-label {
28
- padding-bottom: 4px;
29
- display: block;
30
- padding-right: 24px;
31
- }
32
-
33
- .form-layout-top .nut-form-item-body {
34
- margin-left: 0;
35
- width: 100%;
36
- }
37
-
38
- [dir='rtl'] .form-layout-right .nut-form-item-label,
39
- .nut-rtl .form-layout-right .nut-form-item-label {
40
- text-align: left;
41
- padding-right: 0;
42
- padding-left: 24px;
43
- }
44
-
45
- [dir='rtl'] .form-layout-left .nut-form-item-label,
46
- .nut-rtl .form-layout-left .nut-form-item-label {
47
- text-align: right;
48
- padding-left: 0;
49
- padding-right: 12px;
50
-
51
- .required {
52
- left: auto;
53
- right: 0.1em;
54
- }
55
- }
56
-
57
- [dir='rtl'] .form-layout-top .nut-form-item-label,
58
- .nut-rtl .form-layout-top .nut-form-item-label {
59
- padding-right: 0;
60
- padding-left: 24px;
61
- }
62
-
63
- [dir='rtl'] .form-layout-top .nut-form-item-body,
64
- .nut-rtl .form-layout-top .nut-form-item-body {
65
- margin-left: 0;
66
- margin-right: 0;
67
- }
@@ -142,32 +142,38 @@
142
142
 
143
143
  .nut-form-item {
144
144
  display: flex;
145
- align-items: center;
146
- padding: 4px 12px;
145
+ line-height: unset;
147
146
  }
148
- .nut-form-item.error.line::before {
149
- border-bottom: 1px solid var(--nutui-form-item-error-line-color, var(--nutui-color-primary, #ff0f23));
150
- transform: scaleX(1);
151
- transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
147
+ .nut-form-item-disabled {
148
+ opacity: 0.4;
149
+ pointer-events: none;
152
150
  }
153
151
  .nut-form-item-label {
152
+ display: flex;
153
+ flex-direction: row;
154
154
  font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-size-base, 14px));
155
155
  font-weight: normal;
156
156
  width: var(--nutui-form-item-label-width, 90px);
157
157
  margin-right: var(--nutui-form-item-label-margin-right, 10px);
158
- flex: none !important;
159
- display: inline-block !important;
158
+ flex: 0 0 auto;
160
159
  word-wrap: break-word;
161
160
  text-align: var(--nutui-form-item-label-text-align, left);
161
+ line-height: unset;
162
162
  }
163
- .nut-form-item-label .required::before {
164
- content: "*";
163
+ .nut-form-item-label-required {
165
164
  color: var(--nutui-form-item-required-color, var(--nutui-color-primary, #ff0f23));
166
165
  margin-right: var(--nutui-form-item-required-margin-right, 4px);
166
+ display: block;
167
+ position: absolute;
168
+ left: -10px;
169
+ }
170
+ .nut-form-item .nut-form-item-labeltxt {
171
+ position: relative;
172
+ font-size: 12px;
167
173
  }
168
174
  .nut-form-item-body {
169
175
  flex: 1;
170
- display: flex !important;
176
+ display: flex;
171
177
  flex-direction: column;
172
178
  }
173
179
  .nut-form-item-body-slots {
@@ -177,6 +183,9 @@
177
183
  padding: 0;
178
184
  border: 0;
179
185
  }
186
+ .nut-form-item-body-slots .nut-input-container {
187
+ height: auto;
188
+ }
180
189
  .nut-form-item-body-slots .nut-input-text {
181
190
  font-size: var(--nutui-form-item-body-font-size, var(--nutui-font-size-base, 14px));
182
191
  text-align: var(--nutui-form-item-body-input-text-align, left);
@@ -191,7 +200,7 @@
191
200
  min-height: 24px;
192
201
  }
193
202
  .nut-form-item-body-slots .nut-textarea {
194
- padding: 0 !important;
203
+ padding: 0;
195
204
  }
196
205
  .nut-form-item-body-slots .nut-textarea .nut-textarea-textarea {
197
206
  font: inherit;
@@ -237,38 +246,39 @@
237
246
  text-align: right;
238
247
  }
239
248
 
240
- .form-layout-right .nut-form-item-label {
241
- text-align: right;
249
+ /* position */
250
+ .nut-form-item-label-right {
251
+ justify-content: flex-end;
242
252
  padding-right: 24px;
243
253
  white-space: nowrap;
244
254
  }
245
255
 
246
- .form-layout-left .nut-form-item-label {
256
+ .nut-form-item-label-left {
247
257
  position: relative;
248
- text-align: left;
249
258
  padding-left: 12px;
250
259
  white-space: nowrap;
251
260
  }
252
- .form-layout-left .nut-form-item-label .required {
261
+
262
+ .nut-form-item-label-left-required {
253
263
  display: block;
254
264
  line-height: 1.5;
255
265
  position: absolute;
256
266
  left: 0.1em;
257
267
  }
258
268
 
259
- .form-layout-top .nut-form-item {
269
+ .nut-form-item-top {
260
270
  flex-direction: column;
261
271
  align-items: flex-start;
262
272
  white-space: nowrap;
263
273
  }
264
274
 
265
- .form-layout-top .nut-form-item-label {
266
- padding-bottom: 4px;
275
+ .nut-form-item-label-top {
267
276
  display: block;
277
+ padding-bottom: 4px;
268
278
  padding-right: 24px;
269
279
  }
270
280
 
271
- .form-layout-top .nut-form-item-body {
281
+ .nut-form-item-body-top {
272
282
  margin-left: 0;
273
283
  width: 100%;
274
284
  }
@@ -1,70 +1,4 @@
1
1
  /* #ifdef harmony */
2
2
  /* #endif */
3
3
  /* #ifndef harmony */
4
- /* #endif */
5
- .form-layout-right .nut-form-item-label {
6
- text-align: right;
7
- padding-right: 24px;
8
- white-space: nowrap;
9
- }
10
-
11
- .form-layout-left .nut-form-item-label {
12
- position: relative;
13
- text-align: left;
14
- padding-left: 12px;
15
- white-space: nowrap;
16
- }
17
- .form-layout-left .nut-form-item-label .required {
18
- display: block;
19
- line-height: 1.5;
20
- position: absolute;
21
- left: 0.1em;
22
- }
23
-
24
- .form-layout-top .nut-form-item {
25
- flex-direction: column;
26
- align-items: flex-start;
27
- white-space: nowrap;
28
- }
29
-
30
- .form-layout-top .nut-form-item-label {
31
- padding-bottom: 4px;
32
- display: block;
33
- padding-right: 24px;
34
- }
35
-
36
- .form-layout-top .nut-form-item-body {
37
- margin-left: 0;
38
- width: 100%;
39
- }
40
-
41
- [dir=rtl] .form-layout-right .nut-form-item-label,
42
- .nut-rtl .form-layout-right .nut-form-item-label {
43
- text-align: left;
44
- padding-right: 0;
45
- padding-left: 24px;
46
- }
47
-
48
- [dir=rtl] .form-layout-left .nut-form-item-label,
49
- .nut-rtl .form-layout-left .nut-form-item-label {
50
- text-align: right;
51
- padding-left: 0;
52
- padding-right: 12px;
53
- }
54
- [dir=rtl] .form-layout-left .nut-form-item-label .required,
55
- .nut-rtl .form-layout-left .nut-form-item-label .required {
56
- left: auto;
57
- right: 0.1em;
58
- }
59
-
60
- [dir=rtl] .form-layout-top .nut-form-item-label,
61
- .nut-rtl .form-layout-top .nut-form-item-label {
62
- padding-right: 0;
63
- padding-left: 24px;
64
- }
65
-
66
- [dir=rtl] .form-layout-top .nut-form-item-body,
67
- .nut-rtl .form-layout-top .nut-form-item-body {
68
- margin-left: 0;
69
- margin-right: 0;
70
- }
4
+ /* #endif */
@@ -16,10 +16,11 @@ export interface Store {
16
16
  }
17
17
  export interface FormInstance<Values = any> {
18
18
  getFieldValue: (name: NamePath) => StoreValue;
19
+ setFieldValue: <T = any>(name: NamePath, value: T) => void;
19
20
  getFieldsValue: (nameList: NamePath[] | true) => {
20
21
  [key: NamePath]: any;
21
22
  };
22
- setFieldsValue: (value: any) => void;
23
+ setFieldsValue: (value: Store) => void;
23
24
  resetFields: (fields?: NamePath[]) => void;
24
25
  submit: () => void;
25
26
  getInternal: (secret: string) => any;
@@ -1,3 +1,4 @@
1
- import { FormInstance } from './types';
1
+ import { FormInstance, NamePath } from './types';
2
2
  export declare const SECRET = "NUT_FORM_INTERNAL";
3
3
  export declare const useForm: (form?: FormInstance) => [FormInstance];
4
+ export declare const useWatch: (path: NamePath, form: FormInstance) => any;