@kdcloudjs/kdesign 1.2.2 → 1.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 (78) hide show
  1. package/CHANGELOG.md +47 -0
  2. package/dist/kdesign-complete.less +42 -81
  3. package/dist/kdesign.css +56 -119
  4. package/dist/kdesign.css.map +1 -1
  5. package/dist/kdesign.js +165 -117
  6. package/dist/kdesign.js.map +1 -1
  7. package/dist/kdesign.min.css +3 -3
  8. package/dist/kdesign.min.js +8 -8
  9. package/dist/kdesign.min.js.map +1 -1
  10. package/es/badge/style/index.css +3 -4
  11. package/es/badge/style/index.less +3 -4
  12. package/es/badge/style/token.less +1 -0
  13. package/es/button/style/index.css +3 -3
  14. package/es/button/style/token.less +3 -3
  15. package/es/carousel/style/index.css +11 -86
  16. package/es/carousel/style/index.less +3 -60
  17. package/es/checkbox/checkbox.js +4 -2
  18. package/es/checkbox/style/index.css +7 -0
  19. package/es/checkbox/style/index.less +7 -0
  20. package/es/config-provider/compDefaultProps.d.ts +1 -0
  21. package/es/config-provider/compDefaultProps.js +2 -1
  22. package/es/dropdown/style/index.css +5 -5
  23. package/es/form/Field.d.ts +2 -1
  24. package/es/form/Field.js +39 -22
  25. package/es/form/Form.js +7 -2
  26. package/es/form/hooks/useForm.js +1 -0
  27. package/es/form/interface.d.ts +5 -0
  28. package/es/input-number/inputNumber.d.ts +1 -0
  29. package/es/input-number/inputNumber.js +3 -2
  30. package/es/locale/locale.d.ts +1 -0
  31. package/es/locale/zh-CN.d.ts +1 -0
  32. package/es/locale/zh-CN.js +2 -1
  33. package/es/menu/subMenu.js +6 -2
  34. package/es/popconfirm/style/index.css +5 -5
  35. package/es/select/index.d.ts +2 -2
  36. package/es/select/interface.d.ts +7 -7
  37. package/es/select/select.js +12 -1
  38. package/es/select/style/index.css +13 -7
  39. package/es/select/style/index.less +14 -6
  40. package/es/select/style/token.less +4 -1
  41. package/es/style/mixins/index.less +5 -5
  42. package/es/tooltip/style/index.css +8 -8
  43. package/es/tooltip/style/index.less +2 -2
  44. package/lib/badge/style/index.css +3 -4
  45. package/lib/badge/style/index.less +3 -4
  46. package/lib/badge/style/token.less +1 -0
  47. package/lib/button/style/index.css +3 -3
  48. package/lib/button/style/token.less +3 -3
  49. package/lib/carousel/style/index.css +11 -86
  50. package/lib/carousel/style/index.less +3 -60
  51. package/lib/checkbox/checkbox.js +4 -2
  52. package/lib/checkbox/style/index.css +7 -0
  53. package/lib/checkbox/style/index.less +7 -0
  54. package/lib/config-provider/compDefaultProps.d.ts +1 -0
  55. package/lib/config-provider/compDefaultProps.js +2 -1
  56. package/lib/dropdown/style/index.css +5 -5
  57. package/lib/form/Field.d.ts +2 -1
  58. package/lib/form/Field.js +42 -24
  59. package/lib/form/Form.js +7 -2
  60. package/lib/form/hooks/useForm.js +1 -0
  61. package/lib/form/interface.d.ts +5 -0
  62. package/lib/input-number/inputNumber.d.ts +1 -0
  63. package/lib/input-number/inputNumber.js +3 -2
  64. package/lib/locale/locale.d.ts +1 -0
  65. package/lib/locale/zh-CN.d.ts +1 -0
  66. package/lib/locale/zh-CN.js +2 -1
  67. package/lib/menu/subMenu.js +6 -2
  68. package/lib/popconfirm/style/index.css +5 -5
  69. package/lib/select/index.d.ts +2 -2
  70. package/lib/select/interface.d.ts +7 -7
  71. package/lib/select/select.js +12 -1
  72. package/lib/select/style/index.css +13 -7
  73. package/lib/select/style/index.less +14 -6
  74. package/lib/select/style/token.less +4 -1
  75. package/lib/style/mixins/index.less +5 -5
  76. package/lib/tooltip/style/index.css +8 -8
  77. package/lib/tooltip/style/index.less +2 -2
  78. package/package.json +1 -1
@@ -172,7 +172,6 @@
172
172
  background-color: var(--kd-c-badge-color-success, var(--kd-g-color-success, #1ba854));
173
173
  }
174
174
  .kd-badge-status-processing {
175
- position: relative;
176
175
  background-color: var(--kd-c-badge-color-ongoing, var(--kd-g-color-ongoing, #276ff5));
177
176
  }
178
177
  .kd-badge-status-processing::after {
@@ -188,13 +187,13 @@
188
187
  content: '';
189
188
  }
190
189
  .kd-badge-status-error {
191
- background-color: var(--kd-c-badge-color-warning, var(--kd-g-color-warning, #ff991c));
190
+ background-color: var(--kd-c-badge-color-error, var(--kd-g-color-error, #fb2323));
192
191
  }
193
192
  .kd-badge-status-default {
194
- background-color: var(--kd-c-badge-color-success, var(--kd-g-color-success, #1ba854));
193
+ background-color: var(--kd-c-badge-color-default, #d9d9d9);
195
194
  }
196
195
  .kd-badge-status-warning {
197
- background-color: var(--kd-c-badge-color-error, var(--kd-g-color-error, #fb2323));
196
+ background-color: var(--kd-c-badge-color-warning, var(--kd-g-color-warning, #ff991c));
198
197
  }
199
198
  .kd-badge-not-a-wrapper:not(.kd-badge-status) {
200
199
  vertical-align: middle;
@@ -74,7 +74,6 @@
74
74
  background-color: @badge-color-success;
75
75
  }
76
76
  &-processing {
77
- position: relative;
78
77
  background-color: @badge-color-ongoing;
79
78
  &::after {
80
79
  position: absolute;
@@ -89,13 +88,13 @@
89
88
  }
90
89
  }
91
90
  &-error {
92
- background-color: @badge-color-warning;
91
+ background-color: @badge-color-error;
93
92
  }
94
93
  &-default {
95
- background-color: @badge-color-success;
94
+ background-color: @badge-color-default;
96
95
  }
97
96
  &-warning {
98
- background-color: @badge-color-error;
97
+ background-color: @badge-color-warning;
99
98
  }
100
99
  }
101
100
 
@@ -21,3 +21,4 @@
21
21
  @badge-color-ongoing: var(~'@{badge-prefix}-color-ongoing', @color-ongoing);
22
22
  @badge-color-warning: var(~'@{badge-prefix}-color-warning', @color-warning);
23
23
  @badge-color-error: var(~'@{badge-prefix}-color-error', @color-error);
24
+ @badge-color-default: var(~'@{badge-prefix}-color-default', #d9d9d9);
@@ -178,13 +178,13 @@
178
178
  background-color: var(--kd-c-button-primary-color-background-active, var(--kd-g-color-theme-7, #375cca));
179
179
  }
180
180
  .kd-btn-primary:disabled {
181
- background-color: var(--kd-c-button-primary-color-background-disabled, var(--kd-g-color-theme-3, #e3eeff)) !important;
182
- border-color: var(--kd-c-button-primary-color-border-disabled, var(--kd-g-color-theme-3, #e3eeff)) !important;
181
+ background-color: var(--kd-c-button-primary-color-background-disabled, var(--kd-g-color-theme-4, #b5cfff)) !important;
182
+ border-color: var(--kd-c-button-primary-color-border-disabled, var(--kd-g-color-theme-4, #b5cfff)) !important;
183
183
  }
184
184
  .kd-btn-ghost {
185
185
  border-color: var(--kd-c-button-ghost-color-border, var(--kd-g-color-theme-6, #5582f3));
186
186
  background-color: var(--kd-c-button-ghost-color-background, transparent);
187
- color: var(--kd-c-button-ghost-color-text, #5582F3);
187
+ color: var(--kd-c-button-ghost-color-text, var(--kd-g-color-theme, #5582f3));
188
188
  }
189
189
  .kd-btn-ghost:hover:not(.kd-btn-loading) {
190
190
  background-color: var(--kd-c-button-ghost-color-background-hover, var(--kd-g-color-theme-5, #87adff));
@@ -10,12 +10,12 @@
10
10
  @btn-primary-border-color-hover: var(~'@{button-custom-prefix}-primary-color-border-hover', @color-theme-hover); // 基础hover边框颜色
11
11
  @btn-primary-background-color-active: var(~'@{button-custom-prefix}-primary-color-background-active', @color-theme-click); // 基础active背景颜色
12
12
  @btn-primary-border-color-active: var(~'@{button-custom-prefix}-primary-color-border-active', @color-theme); // 基础active边框颜色
13
- @btn-primary-background-color-disabled: var(~'@{button-custom-prefix}-primary-color-background-disabled', @color-theme-disabled); // 基础disabled背景颜色 禁用状态
14
- @btn-primary-border-color-disabled: var(~'@{button-custom-prefix}-primary-color-border-disabled', @color-theme-disabled); // 基础disabled边框颜色
13
+ @btn-primary-background-color-disabled: var(~'@{button-custom-prefix}-primary-color-background-disabled', @color-theme-4); // 基础disabled背景颜色 禁用状态
14
+ @btn-primary-border-color-disabled: var(~'@{button-custom-prefix}-primary-color-border-disabled', @color-theme-4); // 基础disabled边框颜色
15
15
 
16
16
  @btn-ghost-background-color: var(~'@{button-custom-prefix}-ghost-color-background', transparent); // 幽灵背景颜色
17
17
  @btn-ghost-border-color: var(~'@{button-custom-prefix}-ghost-color-border', @color-theme-6); //幽灵边框颜色
18
- @btn-ghost-font-color: var(~'@{button-custom-prefix}-ghost-color-text', #5582F3); // 幽灵按钮文字颜色
18
+ @btn-ghost-font-color: var(~'@{button-custom-prefix}-ghost-color-text', @color-theme); // 幽灵按钮文字颜色
19
19
  @btn-ghost-background-color-hover: var(~'@{button-custom-prefix}-ghost-color-background-hover', @color-theme-5); //幽灵hover背景颜色
20
20
  @btn-ghost-border-color-hover: var(~'@{button-custom-prefix}-ghost-color-border-hover', transparent); //幽灵hover边框颜色
21
21
  @btn-ghost-font-color-hover: var(~'@{button-custom-prefix}-ghost-color-text-hover',#ffffff); // 幽灵hover按钮文字颜色
@@ -107,89 +107,6 @@
107
107
  -ms-flex: 1;
108
108
  flex: 1;
109
109
  }
110
- .kd-carousel-slidelist {
111
- list-style: none;
112
- display: -webkit-box;
113
- display: -ms-flexbox;
114
- display: flex;
115
- -webkit-box-orient: horizontal;
116
- -webkit-box-direction: normal;
117
- -ms-flex-direction: row;
118
- flex-direction: row;
119
- width: 100%;
120
- }
121
- .kd-carousel-slidelist-item {
122
- -ms-flex-negative: 0;
123
- flex-shrink: 0;
124
- height: 100%;
125
- width: 100%;
126
- overflow: hidden;
127
- border-radius: var(--kd-c-carousel-border-radius, 0px);
128
- }
129
- .kd-carousel-fadelist {
130
- list-style: none;
131
- display: -webkit-box;
132
- display: -ms-flexbox;
133
- display: flex;
134
- -webkit-box-orient: horizontal;
135
- -webkit-box-direction: normal;
136
- -ms-flex-direction: row;
137
- flex-direction: row;
138
- -webkit-box-flex: 1;
139
- -ms-flex: 1;
140
- flex: 1;
141
- position: relative;
142
- }
143
- .kd-carousel-fadelist-item {
144
- opacity: 1;
145
- position: relative;
146
- -ms-flex-negative: 0;
147
- flex-shrink: 0;
148
- height: 100%;
149
- width: 100%;
150
- }
151
- .kd-carousel-fadelist-item-animation {
152
- -webkit-transition: opacity 0.3s ease;
153
- transition: opacity 0.3s ease;
154
- }
155
- .kd-carousel-fadelist-item-none-animation {
156
- -webkit-transition: none;
157
- transition: none;
158
- }
159
- .kd-carousel-fadelist-item-not-hidden {
160
- opacity: 1;
161
- }
162
- .kd-carousel-fadelist-item-hidden {
163
- opacity: 0;
164
- }
165
- .kd-carousel-displaylist {
166
- list-style: none;
167
- display: -webkit-box;
168
- display: -ms-flexbox;
169
- display: flex;
170
- -webkit-box-orient: horizontal;
171
- -webkit-box-direction: normal;
172
- -ms-flex-direction: row;
173
- flex-direction: row;
174
- -webkit-box-flex: 1;
175
- -ms-flex: 1;
176
- flex: 1;
177
- position: relative;
178
- }
179
- .kd-carousel-displaylist-item {
180
- display: block;
181
- position: relative;
182
- -ms-flex-negative: 0;
183
- flex-shrink: 0;
184
- height: 100%;
185
- width: 100%;
186
- }
187
- .kd-carousel-displaylist-item-not-hidden {
188
- display: block;
189
- }
190
- .kd-carousel-displaylist-item-hidden {
191
- display: none;
192
- }
193
110
  .kd-carousel-list {
194
111
  list-style: none;
195
112
  display: -webkit-box;
@@ -199,9 +116,6 @@
199
116
  -webkit-box-direction: normal;
200
117
  -ms-flex-direction: row;
201
118
  flex-direction: row;
202
- -webkit-box-flex: 1;
203
- -ms-flex: 1;
204
- flex: 1;
205
119
  position: relative;
206
120
  }
207
121
  .kd-carousel-list-item {
@@ -211,6 +125,9 @@
211
125
  height: 100%;
212
126
  width: 100%;
213
127
  }
128
+ .kd-carousel-list-slide {
129
+ width: 100%;
130
+ }
214
131
  .kd-carousel-list-slide .kd-carousel-list-item {
215
132
  opacity: 1;
216
133
  border-radius: var(--kd-c-carousel-border-radius, 0px);
@@ -229,6 +146,11 @@
229
146
  .kd-carousel-list-slide .kd-carousel-list-item-hidden {
230
147
  opacity: 0;
231
148
  }
149
+ .kd-carousel-list-fade {
150
+ -webkit-box-flex: 1;
151
+ -ms-flex: 1;
152
+ flex: 1;
153
+ }
232
154
  .kd-carousel-list-fade .kd-carousel-list-item {
233
155
  opacity: 1;
234
156
  }
@@ -246,6 +168,9 @@
246
168
  .kd-carousel-list-fade .kd-carousel-list-item-hidden {
247
169
  opacity: 0;
248
170
  }
171
+ .kd-carousel-list-display {
172
+ width: 100%;
173
+ }
249
174
  .kd-carousel-list-display .kd-carousel-list-item {
250
175
  display: block;
251
176
  }
@@ -10,71 +10,11 @@
10
10
  overflow: hidden;
11
11
  flex: 1;
12
12
  }
13
- &-slidelist {
14
- list-style: none;
15
- display: flex;
16
- flex-direction: row;
17
- width: 100%;
18
- &-item {
19
- flex-shrink: 0;
20
- height: 100%;
21
- width: 100%;
22
- overflow: hidden;
23
- border-radius: @carousel-boder-radius;
24
- }
25
- }
26
- &-fadelist {
27
- list-style: none;
28
- display: flex;
29
- flex-direction: row;
30
- flex: 1;
31
- position: relative;
32
- &-item {
33
- opacity: 1;
34
- position: relative;
35
- flex-shrink: 0;
36
- height: 100%;
37
- width: 100%;
38
- &-animation {
39
- transition: opacity 0.3s ease;
40
- }
41
- &-none-animation {
42
- transition: none;
43
- }
44
- &-not-hidden {
45
- opacity: 1;
46
- }
47
- &-hidden {
48
- opacity: 0;
49
- }
50
- }
51
- }
52
- &-displaylist {
53
- list-style: none;
54
- display: flex;
55
- flex-direction: row;
56
- flex: 1;
57
- position: relative;
58
- &-item {
59
- display: block;
60
- position: relative;
61
- flex-shrink: 0;
62
- height: 100%;
63
- width: 100%;
64
- &-not-hidden {
65
- display: block;
66
- }
67
- &-hidden {
68
- display: none;
69
- }
70
- }
71
- }
72
13
 
73
14
  &-list {
74
15
  list-style: none;
75
16
  display: flex;
76
17
  flex-direction: row;
77
- flex: 1;
78
18
  position: relative;
79
19
 
80
20
  &-item {
@@ -85,6 +25,7 @@
85
25
  }
86
26
 
87
27
  &-slide {
28
+ width: 100%;
88
29
  .@{carousel-prefix-cls}-list-item {
89
30
  opacity: 1;
90
31
  border-radius: @carousel-boder-radius;
@@ -104,6 +45,7 @@
104
45
  }
105
46
 
106
47
  &-fade {
48
+ flex: 1;
107
49
  .@{carousel-prefix-cls}-list-item {
108
50
  opacity: 1;
109
51
  &-animation {
@@ -122,6 +64,7 @@
122
64
  }
123
65
 
124
66
  &-display {
67
+ width: 100%;
125
68
  .@{carousel-prefix-cls}-list-item {
126
69
  display: block;
127
70
  &-not-hidden {
@@ -32,7 +32,8 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
32
32
  children = CheckboxProps.children,
33
33
  style = CheckboxProps.style,
34
34
  value = CheckboxProps.value,
35
- indeterminate = CheckboxProps.indeterminate;
35
+ indeterminate = CheckboxProps.indeterminate,
36
+ name = CheckboxProps.name;
36
37
 
37
38
  var getChecked = function getChecked() {
38
39
  return isBoolean(checked) ? checked : defaultChecked;
@@ -102,7 +103,8 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
102
103
  ref: ref,
103
104
  value: value,
104
105
  checked: selected,
105
- disabled: disabled
106
+ disabled: disabled,
107
+ name: name
106
108
  })), children && /*#__PURE__*/React.createElement("span", {
107
109
  className: "".concat(checkboxPrefixCls, "-children")
108
110
  }, children), !isDefaultType() && /*#__PURE__*/React.createElement("span", {
@@ -151,6 +151,10 @@
151
151
  -ms-flex-align: center;
152
152
  align-items: center;
153
153
  z-index: 999;
154
+ -webkit-user-select: none;
155
+ -moz-user-select: none;
156
+ -ms-user-select: none;
157
+ user-select: none;
154
158
  }
155
159
  .kd-checkbox-children .kd-input-underline {
156
160
  background-color: transparent;
@@ -383,3 +387,6 @@
383
387
  .kd-checkbox-default.checked .kd-checkbox-children {
384
388
  color: var(--kd-c-checkbox-color-text-primary, #212121);
385
389
  }
390
+ .kd-checkbox-default-indeterminate .kd-checkbox-children {
391
+ color: var(--kd-c-checkbox-color-text-primary, #212121);
392
+ }
@@ -38,6 +38,8 @@
38
38
  justify-content: center;
39
39
  align-items: center;
40
40
  z-index: 999;
41
+ user-select: none;
42
+
41
43
  .kd-input-underline {
42
44
  background-color: transparent;
43
45
  border-bottom: none;
@@ -249,4 +251,9 @@
249
251
  color: @checkbox-font-color;
250
252
  }
251
253
  }
254
+ &-indeterminate {
255
+ .@{checkbox-prefix-cls}-children {
256
+ color: @checkbox-font-color;
257
+ }
258
+ }
252
259
  }
@@ -383,6 +383,7 @@ declare const compDefaultProps: {
383
383
  minMark: string;
384
384
  maxMark: string;
385
385
  mustInScope: boolean;
386
+ zeroShow: boolean;
386
387
  };
387
388
  BaseData: {
388
389
  mode: string;
@@ -397,7 +397,8 @@ var compDefaultProps = {
397
397
  borderType: 'bordered',
398
398
  minMark: '[',
399
399
  maxMark: ']',
400
- mustInScope: false
400
+ mustInScope: false,
401
+ zeroShow: true
401
402
  },
402
403
  BaseData: {
403
404
  mode: 'single',
@@ -151,7 +151,7 @@
151
151
  .kd-dropdown.arrow::before {
152
152
  position: absolute;
153
153
  z-index: -2;
154
- background: transparent;
154
+ background: var(--kd-g-color-background, #fff);
155
155
  border-style: solid;
156
156
  border-width: var(--arrowSize);
157
157
  -webkit-transform: rotate(45deg);
@@ -176,7 +176,7 @@
176
176
  top: var(--arrowSpill);
177
177
  -webkit-box-shadow: -2px -2px calc(10px - 1px) rgba(0, 0, 0, 0.1);
178
178
  box-shadow: -2px -2px calc(10px - 1px) rgba(0, 0, 0, 0.1);
179
- border-color: var(--kd-g-color-white, #fff) transparent transparent var(--kd-g-color-white, #fff);
179
+ border-color: var(--kd-g-color-background, #fff) transparent transparent var(--kd-g-color-background, #fff);
180
180
  }
181
181
  .kd-dropdown.arrow.topLeft::before,
182
182
  .kd-dropdown.arrow.top::before,
@@ -185,7 +185,7 @@
185
185
  bottom: var(--arrowSpill);
186
186
  -webkit-box-shadow: 3px 3px calc(10px + 1px) rgba(0, 0, 0, 0.15);
187
187
  box-shadow: 3px 3px calc(10px + 1px) rgba(0, 0, 0, 0.15);
188
- border-color: transparent var(--kd-g-color-white, #fff) var(--kd-g-color-white, #fff) transparent;
188
+ border-color: transparent var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff) transparent;
189
189
  }
190
190
  .kd-dropdown.arrow.leftTop::before,
191
191
  .kd-dropdown.arrow.left::before,
@@ -194,7 +194,7 @@
194
194
  right: var(--arrowSpill);
195
195
  -webkit-box-shadow: 3px 0 10px rgba(0, 0, 0, 0.12), 0 -2px 10px rgba(204, 149, 149, 0.12);
196
196
  box-shadow: 3px 0 10px rgba(0, 0, 0, 0.12), 0 -2px 10px rgba(204, 149, 149, 0.12);
197
- border-color: var(--kd-g-color-white, #fff) var(--kd-g-color-white, #fff) transparent transparent;
197
+ border-color: var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff) transparent transparent;
198
198
  }
199
199
  .kd-dropdown.arrow.rightTop::before,
200
200
  .kd-dropdown.arrow.right::before,
@@ -203,7 +203,7 @@
203
203
  left: var(--arrowSpill);
204
204
  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), -2px 0 10px rgba(0, 0, 0, 0.1);
205
205
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), -2px 0 10px rgba(0, 0, 0, 0.1);
206
- border-color: transparent transparent var(--kd-g-color-white, #fff) var(--kd-g-color-white, #fff);
206
+ border-color: transparent transparent var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff);
207
207
  }
208
208
  .kd-dropdown-menu {
209
209
  max-height: var(--kd-c-dropdown-menu-sizing-max-height, 336px);
@@ -3,7 +3,7 @@ import { NamePath, LabelAlign, Rule } from './interface';
3
3
  export interface FormItemProps {
4
4
  children?: React.ReactNode;
5
5
  className?: string;
6
- defaultValue?: string;
6
+ defaultValue?: any;
7
7
  disabled?: boolean;
8
8
  hidden?: boolean;
9
9
  label?: string | number;
@@ -15,6 +15,7 @@ export interface FormItemProps {
15
15
  rules?: Rule[];
16
16
  validateTrigger?: string | string[];
17
17
  wrapperWidth?: string | number;
18
+ valuePropName?: string;
18
19
  }
19
20
  declare const Field: React.FC<FormItemProps>;
20
21
  export default Field;
package/es/form/Field.js CHANGED
@@ -3,7 +3,9 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
3
3
  import _typeof from "@babel/runtime-corejs3/helpers/typeof";
4
4
  import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
5
5
  import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
6
+ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
6
7
  import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
8
+ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
7
9
 
8
10
  var __rest = this && this.__rest || function (s, e) {
9
11
  var t = {};
@@ -30,6 +32,7 @@ import { toArray } from '../_utils/react-children';
30
32
  import FieldContext from './FieldContext';
31
33
  import { INTERNAL_HOOK_KEY } from './hooks/useForm';
32
34
  var DEFAULT_TRIGGER = 'onChange';
35
+ var FormEventValuePropNames = ['value', 'checked'];
33
36
 
34
37
  var generateEventHandler = function generateEventHandler(handler, validateTrigger) {
35
38
  var eventHandler = {};
@@ -50,7 +53,7 @@ var generateEventHandler = function generateEventHandler(handler, validateTrigge
50
53
  };
51
54
 
52
55
  var Field = function Field(props) {
53
- var _classnames, _context;
56
+ var _classnames, _context2;
54
57
 
55
58
  devwarning(! /*#__PURE__*/React.isValidElement(props.children), 'Form.Item', 'Children of Form.Item is not a valid element');
56
59
  devwarning(!props.name, 'Form.Item', 'Form.Item must have a name');
@@ -71,7 +74,8 @@ var Field = function Field(props) {
71
74
  getFieldError = fieldContext.getFieldError,
72
75
  getInternalHooks = fieldContext.getInternalHooks,
73
76
  vertical = fieldContext.vertical,
74
- getDefaultValue = fieldContext.getDefaultValue;
77
+ getDefaultValue = fieldContext.getDefaultValue,
78
+ local = fieldContext.local;
75
79
 
76
80
  var _getInternalHooks = getInternalHooks(INTERNAL_HOOK_KEY),
77
81
  registerField = _getInternalHooks.registerField,
@@ -92,7 +96,9 @@ var Field = function Field(props) {
92
96
  rules = _props$rules === void 0 ? [] : _props$rules,
93
97
  wrapperWidth = props.wrapperWidth,
94
98
  validateTrigger = props.validateTrigger,
95
- defaultValue = props.defaultValue;
99
+ defaultValue = props.defaultValue,
100
+ _props$valuePropName = props.valuePropName,
101
+ valuePropName = _props$valuePropName === void 0 ? 'value' : _props$valuePropName;
96
102
 
97
103
  var onStoreChange = function onStoreChange(stores, _namePathList, source) {
98
104
  var prev = stores.prev,
@@ -126,8 +132,11 @@ var Field = function Field(props) {
126
132
  if (Array.isArray(rules) && !rules.some(function (rule) {
127
133
  return Object.prototype.hasOwnProperty.call(rule, 'required');
128
134
  }) && required) {
135
+ var _context;
136
+
129
137
  rules.push({
130
- required: true
138
+ required: true,
139
+ message: _concatInstanceProperty(_context = "".concat(local && local.requiredMessage)).call(_context, label)
131
140
  });
132
141
  }
133
142
 
@@ -162,10 +171,23 @@ var Field = function Field(props) {
162
171
  var formItemClassName = classnames((_classnames = {}, _defineProperty(_classnames, "".concat(formPrefixCls), true), _defineProperty(_classnames, "".concat(formPrefixCls, "-field"), true), _defineProperty(_classnames, "".concat(formPrefixCls, "-field-hidden"), hidden), _defineProperty(_classnames, "".concat(formPrefixCls, "-field-vertical"), vertical), _classnames), className);
163
172
  var value = getFieldValue(name);
164
173
  var validateMessage = getFieldError(name);
165
- var handleValueChange = React.useCallback(function (evt) {
174
+
175
+ var getInputValueFormProp = function getInputValueFormProp(evt) {
166
176
  var _a;
167
177
 
168
- var inputValue = typeof evt === 'string' ? evt : (_a = evt.target) === null || _a === void 0 ? void 0 : _a.value;
178
+ var inputValue;
179
+
180
+ if (Object.prototype.hasOwnProperty.call(evt, 'target') && _includesInstanceProperty(FormEventValuePropNames).call(FormEventValuePropNames, valuePropName)) {
181
+ inputValue = (_a = evt.target) === null || _a === void 0 ? void 0 : _a[valuePropName];
182
+ } else {
183
+ inputValue = evt;
184
+ }
185
+
186
+ return inputValue;
187
+ };
188
+
189
+ var handleValueChange = React.useCallback(function (evt) {
190
+ var inputValue = getInputValueFormProp(evt);
169
191
  dispatch({
170
192
  type: 'updateValue',
171
193
  namePath: name,
@@ -182,6 +204,8 @@ var Field = function Field(props) {
182
204
  var trigger = _extends(_defineProperty({}, DEFAULT_TRIGGER, handleValueChange), generateEventHandler(handleValueValidate, validateTrigger));
183
205
 
184
206
  var mergeProps = function mergeProps(fa, ch) {
207
+ var _extends3;
208
+
185
209
  if (!ch) {
186
210
  return {};
187
211
  }
@@ -192,17 +216,13 @@ var Field = function Field(props) {
192
216
 
193
217
  var _ch$props = ch.props,
194
218
  chChange = _ch$props.onChange,
195
- chValue = _ch$props.value,
219
+ chValue = _ch$props[valuePropName],
196
220
  chDisabled = _ch$props.disabled,
197
221
  chDefaultValue = _ch$props.defaultValue;
198
222
 
199
223
  var onChange = function onChange(evt) {
200
224
  if (chValue === undefined) {
201
- if (typeof evt === 'string') {
202
- setFieldValue(evt);
203
- } else {
204
- setFieldValue(evt.target.value);
205
- }
225
+ setFieldValue(getInputValueFormProp(evt));
206
226
  }
207
227
 
208
228
  if (typeof faChange === 'function') {
@@ -225,12 +245,10 @@ var Field = function Field(props) {
225
245
  forceUpdate();
226
246
  }
227
247
 
228
- return _extends(_extends({}, rest), {
248
+ return _extends(_extends({}, rest), (_extends3 = {
229
249
  onChange: onChange,
230
- defaultValue: defaultValue,
231
- value: fieldValue,
232
- disabled: chDisabled || faDisabled
233
- });
250
+ defaultValue: defaultValue
251
+ }, _defineProperty(_extends3, valuePropName, fieldValue), _defineProperty(_extends3, "disabled", chDisabled || faDisabled), _extends3));
234
252
  };
235
253
 
236
254
  return /*#__PURE__*/React.createElement("div", {
@@ -243,11 +261,10 @@ var Field = function Field(props) {
243
261
  }), /*#__PURE__*/React.createElement(FieldWrapper, {
244
262
  width: wrapperWidth,
245
263
  validateMessage: validateMessage
246
- }, _mapInstanceProperty(_context = toArray(children)).call(_context, function (child, index) {
247
- var keys = mergeProps(_extends(_extends({
248
- disabled: disabled,
249
- value: value
250
- }, trigger), {
264
+ }, _mapInstanceProperty(_context2 = toArray(children)).call(_context2, function (child, index) {
265
+ var keys = mergeProps(_extends(_extends(_defineProperty({
266
+ disabled: disabled
267
+ }, valuePropName, value), trigger), {
251
268
  key: index
252
269
  }), child);
253
270
  return child ? /*#__PURE__*/React.cloneElement(child, keys) : child;
package/es/form/Form.js CHANGED
@@ -31,9 +31,13 @@ var Form = function Form(props, ref) {
31
31
  var _useContext = useContext(ConfigContext),
32
32
  getPrefixCls = _useContext.getPrefixCls,
33
33
  prefixCls = _useContext.prefixCls,
34
- userDefaultProps = _useContext.compDefaultProps;
34
+ userDefaultProps = _useContext.compDefaultProps,
35
+ globalLocale = _useContext.locale;
35
36
 
36
37
  var formProps = getCompProps('Form', userDefaultProps, props);
38
+ var formLang = globalLocale.getCompLangMsg({
39
+ componentName: 'Form'
40
+ });
37
41
 
38
42
  var children = formProps.children,
39
43
  defaultValues = formProps.defaultValues,
@@ -85,9 +89,10 @@ var Form = function Form(props, ref) {
85
89
  labelAlign: labelAlign,
86
90
  labelWidth: labelWidth,
87
91
  wrapperWidth: wrapperWidth,
92
+ local: formLang,
88
93
  vertical: layout === 'vertical'
89
94
  });
90
- }, [formInstance, labelAlign, labelWidth, wrapperWidth, layout]);
95
+ }, [formInstance, labelAlign, labelWidth, wrapperWidth, layout, formLang]);
91
96
 
92
97
  var handleSubmit = function handleSubmit(evt) {
93
98
  evt.preventDefault();
@@ -206,6 +206,7 @@ var FormStore = /*#__PURE__*/_createClass(function FormStore() {
206
206
  }
207
207
 
208
208
  _this.store = newStore;
209
+ _this.errorMessages = {};
209
210
 
210
211
  _this.notifyObservers(prevStore, null, 'reset');
211
212
  };
@@ -25,11 +25,16 @@ export interface FormInstance<Values = any> {
25
25
  submit: () => void;
26
26
  getInternalHooks: (secret: string) => InternalHooks | null;
27
27
  }
28
+ export interface InnerLocale {
29
+ locale: string;
30
+ requiredMessage: string;
31
+ }
28
32
  export interface InternalFormInstance extends FormInstance {
29
33
  labelWidth?: string | number;
30
34
  labelAlign?: LabelAlign;
31
35
  wrapperWidth?: string | number;
32
36
  vertical?: boolean;
37
+ local?: InnerLocale;
33
38
  getInternalHooks: (key: string) => InternalHooks | null;
34
39
  }
35
40
  export declare type Stores = {
@@ -21,6 +21,7 @@ export interface InputNumberProps extends InputProps {
21
21
  mustInPrecisionScope?: boolean;
22
22
  stepOption?: StepOption;
23
23
  stepperrref?: any;
24
+ formatter?: (value: string | undefined) => string;
24
25
  }
25
26
  declare const InputNumber: React.ForwardRefExoticComponent<InputNumberProps & React.RefAttributes<unknown>>;
26
27
  export default InputNumber;