@kdcloudjs/kdesign 1.6.16 → 1.6.18

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 (50) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/kdesign-complete.less +38 -7
  3. package/dist/kdesign.css +46 -24
  4. package/dist/kdesign.css.map +1 -1
  5. package/dist/kdesign.js +134 -177
  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/_utils/usePopper.js +2 -0
  11. package/es/checkbox/checkbox.d.ts +1 -4
  12. package/es/checkbox/checkbox.js +26 -19
  13. package/es/checkbox/group.d.ts +11 -1
  14. package/es/checkbox/group.js +43 -71
  15. package/es/checkbox/index.d.ts +2 -1
  16. package/es/checkbox/index.js +1 -1
  17. package/es/checkbox/style/index.css +3 -0
  18. package/es/checkbox/style/index.less +3 -0
  19. package/es/config-provider/compDefaultProps.d.ts +4 -1
  20. package/es/config-provider/compDefaultProps.js +4 -1
  21. package/es/message/index.js +1 -1
  22. package/es/select/select.js +4 -7
  23. package/es/select/style/index.css +32 -23
  24. package/es/select/style/index.less +23 -7
  25. package/es/stepper/style/index.css +2 -0
  26. package/es/stepper/style/index.less +3 -0
  27. package/es/tag/style/index.css +8 -0
  28. package/es/tag/style/index.less +9 -0
  29. package/es/tag/tag.js +5 -1
  30. package/lib/_utils/usePopper.js +2 -0
  31. package/lib/checkbox/checkbox.d.ts +1 -4
  32. package/lib/checkbox/checkbox.js +32 -25
  33. package/lib/checkbox/group.d.ts +11 -1
  34. package/lib/checkbox/group.js +49 -75
  35. package/lib/checkbox/index.d.ts +2 -1
  36. package/lib/checkbox/index.js +4 -4
  37. package/lib/checkbox/style/index.css +3 -0
  38. package/lib/checkbox/style/index.less +3 -0
  39. package/lib/config-provider/compDefaultProps.d.ts +4 -1
  40. package/lib/config-provider/compDefaultProps.js +4 -1
  41. package/lib/message/index.js +1 -1
  42. package/lib/select/select.js +4 -7
  43. package/lib/select/style/index.css +32 -23
  44. package/lib/select/style/index.less +23 -7
  45. package/lib/stepper/style/index.css +2 -0
  46. package/lib/stepper/style/index.less +3 -0
  47. package/lib/tag/style/index.css +8 -0
  48. package/lib/tag/style/index.less +9 -0
  49. package/lib/tag/tag.js +5 -1
  50. package/package.json +1 -1
@@ -10,7 +10,6 @@
10
10
  box-sizing: border-box;
11
11
  background-color: transparent;
12
12
  cursor: pointer;
13
- margin: 0 8px 2px 0;
14
13
  vertical-align: middle;
15
14
 
16
15
  &-selector:hover {
@@ -158,10 +157,15 @@
158
157
  min-width: 75px;
159
158
 
160
159
  &-content {
161
- display: flex;
162
- align-items: center;
163
- flex: auto;
164
160
  .over();
161
+
162
+ .@{kd-prefix}-checkbox {
163
+ width: 100%;
164
+
165
+ .@{kd-prefix}-checkbox-children {
166
+ display: inline-block;
167
+ }
168
+ }
165
169
  }
166
170
 
167
171
  &:hover:not(&-selected):not(&-disabled) {
@@ -208,7 +212,7 @@
208
212
  justify-content: center;
209
213
  margin-left: 8px;
210
214
  }
211
- &-single {
215
+ .@{select-prefix-cls}-single {
212
216
  .@{select-prefix-cls}-selection {
213
217
  &-search {
214
218
  position: absolute;
@@ -224,6 +228,10 @@
224
228
  width: 100%;
225
229
  }
226
230
  }
231
+ &-item {
232
+ display: inline-block;
233
+ .over();
234
+ }
227
235
  }
228
236
  &-focused {
229
237
  .focusColor();
@@ -270,14 +278,14 @@
270
278
  cursor: default;
271
279
  user-select: none;
272
280
  &-small {
273
- height: 18px;
281
+ height: 20px;
274
282
  line-height: 18px;
275
283
  font-size: 12px;
276
284
  }
277
285
 
278
286
  &-middle {
279
287
  font-size: 12px;
280
- height: 18px;
288
+ height: 20px;
281
289
  line-height: 18px;
282
290
  }
283
291
 
@@ -320,6 +328,14 @@
320
328
  // 多选
321
329
  &-multiple {
322
330
  .@{select-prefix-cls}-selection {
331
+ &-tag {
332
+ max-width: calc(100% - 5px);
333
+
334
+ .@{kd-prefix}-tag {
335
+ margin: 2px 8px 2px 0;
336
+ max-width: 100%;
337
+ }
338
+ }
323
339
  &-search {
324
340
  position: relative;
325
341
  max-width: 100%;
@@ -104,6 +104,8 @@
104
104
  .kd-inputNumber {
105
105
  width: 100px;
106
106
  height: var(--kd-c-stepper-input-middle-sizing-height, 28px);
107
+ --kd-c-input-wrapper-padding-left: 9px;
108
+ --kd-c-input-padding-left: 0;
107
109
  }
108
110
  .kd-inputNumber input {
109
111
  text-align: center;
@@ -2,10 +2,13 @@
2
2
  @import './mixin.less';
3
3
 
4
4
  @inputNumber-prefix-cls: ~'@{kd-prefix}-inputNumber';
5
+ @inputWrapper-prefix-cls: ~'@{kd-prefix}-wrapper';
5
6
  .@{inputNumber-prefix-cls} {
6
7
  width: 100px;
7
8
  height: @stepper-input-middle-sizing-height;
8
9
 
10
+ --kd-c-input-wrapper-padding-left: 9px;
11
+ --kd-c-input-padding-left: 0;
9
12
  input {
10
13
  text-align: center;
11
14
  color: @stepper-input-color;
@@ -105,6 +105,11 @@
105
105
  -webkit-transition: all var(--kd-c-tag-motion-duration, var(--kd-g-duration, 0.3s));
106
106
  transition: all var(--kd-c-tag-motion-duration, var(--kd-g-duration, 0.3s));
107
107
  }
108
+ .kd-tag-ellipsis {
109
+ white-space: nowrap;
110
+ overflow: hidden;
111
+ text-overflow: ellipsis;
112
+ }
108
113
  .kd-tag-size-small {
109
114
  font-size: var(--kd-c-tag-font-size-small, var(--kd-g-font-size-small, 12px));
110
115
  height: var(--kd-c-tag-sizing-height-small, 20px);
@@ -468,6 +473,9 @@
468
473
  }
469
474
  .kd-tag-text {
470
475
  margin-left: 6px;
476
+ white-space: nowrap;
477
+ overflow: hidden;
478
+ text-overflow: ellipsis;
471
479
  }
472
480
  .kd-tag-closable-disabled {
473
481
  background-color: var(--kd-c-tag-edit-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
@@ -7,6 +7,12 @@
7
7
  @colors: @tag-process-color, @tag-success-color, @tag-warning-color, @tag-error-color, @tag-end-color, @tag-expired-color;
8
8
 
9
9
  .@{tag-prefix-cls} {
10
+ &-ellipsis {
11
+ white-space: nowrap;
12
+ overflow: hidden;
13
+ text-overflow: ellipsis;
14
+ }
15
+
10
16
  &-size-small {
11
17
  .tag-size(@tag-small-font-size, @tag-small-height, @tag-small-padding-horizontal);
12
18
  }
@@ -89,6 +95,9 @@
89
95
  // 图标设置外边距
90
96
  &-text {
91
97
  margin-left: 6px;
98
+ white-space: nowrap;
99
+ overflow: hidden;
100
+ text-overflow: ellipsis;
92
101
  }
93
102
 
94
103
  &-closable-disabled {
package/es/tag/tag.js CHANGED
@@ -81,13 +81,17 @@ var InteranalTag = function InteranalTag(props, ref) {
81
81
  var tagRef = ref || thisTagRef; // 对children进行进一步处理 当标签包含图标时 文本内容需要用标签包裹设置外边距
82
82
 
83
83
  var handleChild = function handleChild(child) {
84
+ if (!child) return null;
85
+
84
86
  if (typeof child === 'string' && icon) {
85
87
  return /*#__PURE__*/React.createElement("span", {
86
88
  className: "".concat(tagPrefixCls, "-text")
87
89
  }, child);
88
90
  }
89
91
 
90
- return child;
92
+ return /*#__PURE__*/React.createElement("span", {
93
+ className: "".concat(tagPrefixCls, "-ellipsis")
94
+ }, child);
91
95
  }; // 预设的颜色值
92
96
 
93
97
 
@@ -590,10 +590,12 @@ function usePopper(locatorElement, popperElement, props) {
590
590
  focus: 'mousedown',
591
591
  contextMenu: 'mousedown'
592
592
  };
593
+ popperNode === null || popperNode === void 0 ? void 0 : popperNode.addEventListener('mouseleave', debounceHidePopper);
593
594
  Array.isArray(trigger) ? trigger.forEach(function (action) {
594
595
  return document.addEventListener(mapEvent[action], debounceHidePopper);
595
596
  }) : document.addEventListener(mapEvent[trigger], debounceHidePopper);
596
597
  return function () {
598
+ popperNode === null || popperNode === void 0 ? void 0 : popperNode.removeEventListener('mouseleave', debounceHidePopper);
597
599
  Array.isArray(trigger) ? trigger.forEach(function (action) {
598
600
  return document.removeEventListener(mapEvent[action], debounceHidePopper);
599
601
  }) : document.removeEventListener(mapEvent[trigger], debounceHidePopper);
@@ -1,8 +1,5 @@
1
1
  import React from 'react';
2
- export declare const CheckboxTypes: ["default", "square"];
3
- export declare type CheckboxType = typeof CheckboxTypes[number];
4
- export declare const CheckboxSizes: ["large", "middle", "small"];
5
- export declare type CheckboxSize = typeof CheckboxSizes[number];
2
+ import type { CheckboxType, CheckboxSize } from './group';
6
3
  export interface CheckboxProps {
7
4
  checked?: boolean;
8
5
  defaultChecked?: boolean;
@@ -11,7 +11,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
11
11
  Object.defineProperty(exports, "__esModule", {
12
12
  value: true
13
13
  });
14
- exports.default = exports.CheckboxTypes = exports.CheckboxSizes = void 0;
14
+ exports.default = void 0;
15
15
 
16
16
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
17
17
 
@@ -27,12 +27,12 @@ var _react = _interopRequireWildcard(require("react"));
27
27
 
28
28
  var _classnames = _interopRequireDefault(require("classnames"));
29
29
 
30
+ var _group = require("./group");
31
+
30
32
  var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
31
33
 
32
34
  var _utils = require("../_utils");
33
35
 
34
- var _type = require("../_utils/type");
35
-
36
36
  var _isBoolean = _interopRequireDefault(require("lodash/isBoolean"));
37
37
 
38
38
  var _icon = _interopRequireDefault(require("../icon"));
@@ -56,11 +56,6 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
56
56
  return t;
57
57
  };
58
58
 
59
- var CheckboxTypes = (0, _type.tuple)('default', 'square');
60
- exports.CheckboxTypes = CheckboxTypes;
61
- var CheckboxSizes = (0, _type.tuple)('large', 'middle', 'small');
62
- exports.CheckboxSizes = CheckboxSizes;
63
-
64
59
  var InternalCheckbox = function InternalCheckbox(props, ref) {
65
60
  var _context, _context2, _context3, _classNames, _context4, _context5, _context6, _classNames2, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _classNames4, _context15, _context16, _context17, _classNames5, _context18;
66
61
 
@@ -86,38 +81,50 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
86
81
  name = CheckboxProps.name,
87
82
  rest = __rest(CheckboxProps, ["checkboxType", "className", "prefixCls", "defaultChecked", "checked", "size", "onChange", "disabled", "children", "style", "value", "indeterminate", "name"]);
88
83
 
89
- var getChecked = function getChecked() {
90
- return (0, _isBoolean.default)(checked) ? checked : defaultChecked;
91
- };
84
+ var checkboxGroup = _react.default.useContext(_group.GroupContext);
92
85
 
93
- var _useState = (0, _react.useState)(getChecked()),
86
+ var mergedDisabled = (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.disabled) || disabled;
87
+ var mergedCheckboxType = (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.checkboxType) || checkboxType;
88
+ var mergedName = (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.name) || name;
89
+ var initChecked = (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.groupValue) ? (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.groupValue.indexOf(value)) > -1 : (0, _isBoolean.default)(checked) ? checked : defaultChecked;
90
+
91
+ var _useState = (0, _react.useState)(initChecked),
94
92
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
95
93
  selected = _useState2[0],
96
94
  setSelected = _useState2[1];
97
95
 
98
96
  var labelRef = (0, _react.useRef)(null);
99
- (0, _devwarning.default)(CheckboxTypes.indexOf(checkboxType) === -1, 'checkbox', "cannot found checkbox type '".concat(checkboxType, "'"));
100
- (0, _devwarning.default)(CheckboxSizes.indexOf(size) === -1, 'checkbox', "cannot found size type '".concat(size, "'"));
97
+
98
+ _react.default.useEffect(function () {
99
+ setSelected((checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.groupValue) ? (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.groupValue.indexOf(value)) > -1 : (0, _isBoolean.default)(checked) ? checked : defaultChecked);
100
+ }, [checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.groupValue, checked, defaultChecked]);
101
+
102
+ (0, _devwarning.default)(_group.CheckboxTypes.indexOf(mergedCheckboxType) === -1, 'checkbox', "cannot found checkbox type '".concat(mergedCheckboxType, "'"));
103
+ (0, _devwarning.default)(_group.CheckboxSizes.indexOf(size) === -1, 'checkbox', "cannot found size type '".concat(size, "'"));
101
104
  var checkboxPrefixCls = getPrefixCls(prefixCls, 'checkbox', customPrefixcls);
102
105
 
103
106
  var isDefaultType = function isDefaultType() {
104
- return checkboxType === 'default';
107
+ return mergedCheckboxType === 'default';
105
108
  };
106
109
 
107
110
  var getIndeterminate = function getIndeterminate() {
108
111
  return selected ? false : indeterminate;
109
112
  };
110
113
 
111
- var getDefaultClassName = (0, _classnames.default)(className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(checkboxPrefixCls), true), (0, _defineProperty2.default)(_classNames, "".concat(checkboxPrefixCls, "-no-child"), !children), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(checkboxPrefixCls, "-")).call(_context, size), true && !!children), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context2 = "".concat(checkboxPrefixCls, "-")).call(_context2, checkboxType), true), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context3 = "".concat(checkboxPrefixCls, "-")).call(_context3, checkboxType, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "checked", selected), _classNames));
112
- var getSquareClassName = (0, _classnames.default)(className, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(checkboxPrefixCls), true), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context4 = "".concat(checkboxPrefixCls, "-")).call(_context4, checkboxType), true), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context5 = "".concat(checkboxPrefixCls, "-")).call(_context5, checkboxType, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context6 = "".concat(checkboxPrefixCls, "-")).call(_context6, checkboxType, "-checked"), selected && !disabled), (0, _defineProperty2.default)(_classNames2, "checked", selected), _classNames2));
114
+ var getDefaultClassName = (0, _classnames.default)(className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(checkboxPrefixCls), true), (0, _defineProperty2.default)(_classNames, "".concat(checkboxPrefixCls, "-no-child"), !children), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(checkboxPrefixCls, "-")).call(_context, size), true && !!children), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context2 = "".concat(checkboxPrefixCls, "-")).call(_context2, mergedCheckboxType), true), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context3 = "".concat(checkboxPrefixCls, "-")).call(_context3, mergedCheckboxType, "-disabled"), mergedDisabled), (0, _defineProperty2.default)(_classNames, "checked", selected), _classNames));
115
+ var getSquareClassName = (0, _classnames.default)(className, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(checkboxPrefixCls), true), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context4 = "".concat(checkboxPrefixCls, "-")).call(_context4, mergedCheckboxType), true), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context5 = "".concat(checkboxPrefixCls, "-")).call(_context5, mergedCheckboxType, "-disabled"), mergedDisabled), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context6 = "".concat(checkboxPrefixCls, "-")).call(_context6, mergedCheckboxType, "-checked"), selected && !mergedDisabled), (0, _defineProperty2.default)(_classNames2, "checked", selected), _classNames2));
113
116
  var getRootClassName = isDefaultType() ? getDefaultClassName : getSquareClassName;
114
117
  var inputClassName = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(checkboxPrefixCls, "-input"), true));
115
- var checkedWrapperClassName = (0, _classnames.default)((_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context7 = "".concat(checkboxPrefixCls, "-")).call(_context7, checkboxType, "-no-child"), !children), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context8 = "".concat(checkboxPrefixCls, "-")).call(_context8, checkboxType, "-wrapper"), true), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context9 = "".concat(checkboxPrefixCls, "-")).call(_context9, checkboxType, "-wrapper-size"), !!children), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context10 = "".concat(checkboxPrefixCls, "-")).call(_context10, checkboxType, "-margin"), !!children), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context11 = "".concat(checkboxPrefixCls, "-")).call(_context11, checkboxType, "-checked"), selected), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context12 = "".concat(checkboxPrefixCls, "-")).call(_context12, checkboxType, "-indeterminate"), getIndeterminate()), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context13 = "".concat(checkboxPrefixCls, "-")).call(_context13, checkboxType, "-disabled"), disabled && !selected), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context14 = "".concat(checkboxPrefixCls, "-")).call(_context14, checkboxType, "-checked-disabled"), disabled && selected), _classNames4));
116
- var triangleClassName = (0, _classnames.default)((_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, (0, _concat.default)(_context15 = "".concat(checkboxPrefixCls, "-")).call(_context15, checkboxType, "-triangle"), !selected), (0, _defineProperty2.default)(_classNames5, (0, _concat.default)(_context16 = "".concat(checkboxPrefixCls, "-")).call(_context16, checkboxType, "-triangle-checked"), selected), (0, _defineProperty2.default)(_classNames5, (0, _concat.default)(_context17 = "".concat(checkboxPrefixCls, "-")).call(_context17, checkboxType, "-triangle-disabled"), disabled), _classNames5));
117
- var innerIconClassName = (0, _classnames.default)((0, _defineProperty2.default)({}, (0, _concat.default)(_context18 = "".concat(checkboxPrefixCls, "-")).call(_context18, checkboxType, "-inner"), true));
118
+ var checkedWrapperClassName = (0, _classnames.default)((_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context7 = "".concat(checkboxPrefixCls, "-")).call(_context7, mergedCheckboxType, "-no-child"), !children), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context8 = "".concat(checkboxPrefixCls, "-")).call(_context8, mergedCheckboxType, "-wrapper"), true), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context9 = "".concat(checkboxPrefixCls, "-")).call(_context9, mergedCheckboxType, "-wrapper-size"), !!children), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context10 = "".concat(checkboxPrefixCls, "-")).call(_context10, mergedCheckboxType, "-margin"), !!children), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context11 = "".concat(checkboxPrefixCls, "-")).call(_context11, mergedCheckboxType, "-checked"), selected), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context12 = "".concat(checkboxPrefixCls, "-")).call(_context12, mergedCheckboxType, "-indeterminate"), getIndeterminate()), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context13 = "".concat(checkboxPrefixCls, "-")).call(_context13, mergedCheckboxType, "-disabled"), mergedDisabled && !selected), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context14 = "".concat(checkboxPrefixCls, "-")).call(_context14, mergedCheckboxType, "-checked-disabled"), mergedDisabled && selected), _classNames4));
119
+ var triangleClassName = (0, _classnames.default)((_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, (0, _concat.default)(_context15 = "".concat(checkboxPrefixCls, "-")).call(_context15, mergedCheckboxType, "-triangle"), !selected), (0, _defineProperty2.default)(_classNames5, (0, _concat.default)(_context16 = "".concat(checkboxPrefixCls, "-")).call(_context16, mergedCheckboxType, "-triangle-checked"), selected), (0, _defineProperty2.default)(_classNames5, (0, _concat.default)(_context17 = "".concat(checkboxPrefixCls, "-")).call(_context17, mergedCheckboxType, "-triangle-disabled"), mergedDisabled), _classNames5));
120
+ var innerIconClassName = (0, _classnames.default)((0, _defineProperty2.default)({}, (0, _concat.default)(_context18 = "".concat(checkboxPrefixCls, "-")).call(_context18, mergedCheckboxType, "-inner"), true));
118
121
  var handleChange = (0, _react.useCallback)(function (e) {
119
122
  onChange && onChange(e);
120
- setSelected(e.target.checked);
123
+ (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.onCheckboxGroupChange) && (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.onCheckboxGroupChange(value, e.target.checked));
124
+
125
+ if (!(checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.isControlled)) {
126
+ setSelected(e.target.checked);
127
+ }
121
128
  }, [onChange]);
122
129
  (0, _react.useEffect)(function () {
123
130
  (0, _isBoolean.default)(checked) && checked !== selected && setSelected(checked);
@@ -158,7 +165,7 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
158
165
  className: innerIconClassName
159
166
  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
160
167
  type: "right-bold",
161
- className: (0, _concat.default)(_context19 = "".concat(checkboxPrefixCls, "-")).call(_context19, checkboxType, "-inner-icon")
168
+ className: (0, _concat.default)(_context19 = "".concat(checkboxPrefixCls, "-")).call(_context19, mergedCheckboxType, "-inner-icon")
162
169
  })), /*#__PURE__*/_react.default.createElement("input", {
163
170
  type: "checkbox",
164
171
  className: inputClassName,
@@ -166,8 +173,8 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
166
173
  ref: ref,
167
174
  value: value,
168
175
  checked: selected,
169
- disabled: disabled,
170
- name: name
176
+ disabled: mergedDisabled,
177
+ name: mergedName
171
178
  })), children && /*#__PURE__*/_react.default.createElement("span", {
172
179
  className: "".concat(checkboxPrefixCls, "-children")
173
180
  }, children), !isDefaultType() && /*#__PURE__*/_react.default.createElement("span", {
@@ -176,7 +183,7 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
176
183
  className: innerIconClassName
177
184
  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
178
185
  type: "right-bold",
179
- className: (0, _concat.default)(_context20 = "".concat(checkboxPrefixCls, "-")).call(_context20, checkboxType, "-inner-icon")
186
+ className: (0, _concat.default)(_context20 = "".concat(checkboxPrefixCls, "-")).call(_context20, mergedCheckboxType, "-inner-icon")
180
187
  }))))
181
188
  );
182
189
  };
@@ -3,10 +3,20 @@ export declare const CheckboxTypes: ["default", "square"];
3
3
  export declare type CheckboxType = typeof CheckboxTypes[number];
4
4
  export declare const CheckboxSizes: ["large", "middle", "small"];
5
5
  export declare type CheckboxSize = typeof CheckboxSizes[number];
6
+ export declare type CheckboxValueType = string | number;
7
+ export interface CheckboxGroupContext {
8
+ name?: string;
9
+ isControlled?: boolean;
10
+ groupValue?: Array<CheckboxValueType>;
11
+ checkboxType?: CheckboxType;
12
+ disabled?: boolean;
13
+ onCheckboxGroupChange?: (checkedValue: CheckboxValueType, isChecked: boolean) => void;
14
+ }
15
+ export declare const GroupContext: React.Context<CheckboxGroupContext | null>;
6
16
  export interface CheckboxGroupProps {
7
17
  name?: string;
8
18
  size?: CheckboxSize;
9
- value?: string[];
19
+ value?: Array<CheckboxValueType>;
10
20
  checkboxType?: CheckboxType;
11
21
  disabled?: boolean;
12
22
  defaultValue?: string[] | string;
@@ -11,18 +11,14 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
11
11
  Object.defineProperty(exports, "__esModule", {
12
12
  value: true
13
13
  });
14
- exports.default = exports.CheckboxTypes = exports.CheckboxSizes = void 0;
14
+ exports.default = exports.GroupContext = exports.CheckboxTypes = exports.CheckboxSizes = void 0;
15
15
 
16
- var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
17
-
18
- var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
16
+ var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
19
17
 
20
18
  var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
21
19
 
22
20
  var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
23
21
 
24
- var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
25
-
26
22
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
27
23
 
28
24
  var _react = _interopRequireWildcard(require("react"));
@@ -37,12 +33,8 @@ var _type = require("../_utils/type");
37
33
 
38
34
  var _arrayUtil = require("../_utils/arrayUtil");
39
35
 
40
- var _isArray = _interopRequireDefault(require("lodash/isArray"));
41
-
42
36
  var _checkbox = _interopRequireDefault(require("./checkbox"));
43
37
 
44
- var _isBoolean = _interopRequireDefault(require("lodash/isBoolean"));
45
-
46
38
  var _devwarning = _interopRequireDefault(require("../_utils/devwarning"));
47
39
 
48
40
  function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -55,6 +47,10 @@ exports.CheckboxTypes = CheckboxTypes;
55
47
  var CheckboxSizes = (0, _type.tuple)('large', 'middle', 'small');
56
48
  exports.CheckboxSizes = CheckboxSizes;
57
49
 
50
+ var GroupContext = /*#__PURE__*/_react.default.createContext(null);
51
+
52
+ exports.GroupContext = GroupContext;
53
+
58
54
  var CheckboxGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
59
55
  // const CheckboxGroup = (props: CheckboxGroupProps): FunctionComponentElement<CheckboxGroupProps> => {
60
56
  var _useContext = (0, _react.useContext)(_ConfigContext.default),
@@ -76,111 +72,89 @@ var CheckboxGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
76
72
  defaultValue = CheckboxProps.defaultValue,
77
73
  value = CheckboxProps.value,
78
74
  name = CheckboxProps.name;
75
+ var initData = value || (Array.isArray(defaultValue) ? defaultValue : typeof defaultValue !== 'undefined' ? [defaultValue] : []);
79
76
 
80
- var _React$useState = _react.default.useState(defaultValue),
77
+ var _React$useState = _react.default.useState([]),
81
78
  _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
82
79
  groupValue = _React$useState2[0],
83
80
  setGroupValue = _React$useState2[1];
84
81
 
82
+ var innerValue = _react.default.useRef(initData);
83
+
85
84
  _react.default.useEffect(function () {
86
- if (value) {
87
- setGroupValue(value);
88
- }
89
- }, [value]);
85
+ innerValue.current = value || (Array.isArray(defaultValue) ? defaultValue : typeof defaultValue !== 'undefined' ? [defaultValue] : []);
86
+ setGroupValue(innerValue.current);
87
+ }, [value, defaultValue]);
90
88
 
89
+ var isControlled = typeof value !== 'undefined';
91
90
  var checkboxGroupPrefixCls = getPrefixCls(prefixCls, 'checkbox-group', customPrefixcls); // 按钮样式前缀
92
91
 
93
- (0, _devwarning.default)((0, _arrayUtil.isArrayValueRepeat)(value), 'checkboxGroup', "variable value's value should be unique ");
94
-
95
- var getDisabled = function getDisabled(optionDisabled) {
96
- return (0, _isBoolean.default)(optionDisabled) ? optionDisabled : disabled;
97
- };
98
-
99
- var getChecked = function getChecked(props, value) {
100
- return (0, _isArray.default)(value) ? (0, _includes.default)(value).call(value, (props === null || props === void 0 ? void 0 : props.value) || props) || (0, _includes.default)(value).call(value, String((props === null || props === void 0 ? void 0 : props.value) || props)) : String(value) === String((props === null || props === void 0 ? void 0 : props.value) || props);
101
- };
92
+ (0, _devwarning.default)((0, _arrayUtil.isArrayValueRepeat)(groupValue), 'checkboxGroup', "variable value's value should be unique ");
102
93
 
103
94
  var getReduceItem = function getReduceItem(targetValue) {
104
- var index = value.indexOf(targetValue);
105
- (0, _splice.default)(value).call(value, index, 1);
106
- return value;
95
+ var _context;
96
+
97
+ return (0, _filter.default)(_context = innerValue.current).call(_context, function (d) {
98
+ return d !== targetValue;
99
+ });
107
100
  };
108
101
 
109
102
  var getAddItem = function getAddItem(targetValue) {
110
- return (0, _concat.default)(value).call(value, targetValue);
111
- };
103
+ var _context2;
112
104
 
113
- var onCheckboxChange = function onCheckboxChange(ev, item) {
114
- var _a;
105
+ return innerValue.current.indexOf(targetValue) > -1 ? innerValue.current : (0, _concat.default)(_context2 = innerValue.current).call(_context2, targetValue);
106
+ };
115
107
 
116
- var val = ev.target.value;
117
- var checked = ev.target.checked;
108
+ var onCheckboxChange = function onCheckboxChange(checkedValue, isChecked) {
118
109
  var newVal = [];
119
110
 
120
- if (checked) {
121
- newVal = getAddItem(val);
111
+ if (isChecked) {
112
+ newVal = getAddItem(checkedValue);
122
113
  } else {
123
- newVal = getReduceItem(val);
114
+ newVal = getReduceItem(checkedValue);
115
+ }
116
+
117
+ if (!isControlled) {
118
+ innerValue.current = newVal;
124
119
  }
125
120
 
126
- setGroupValue(newVal);
127
121
  onChange && onChange(newVal);
128
- ((_a = item.props) === null || _a === void 0 ? void 0 : _a.onChange) && item.props.onChange(ev);
122
+ };
123
+
124
+ var context = {
125
+ groupValue: groupValue,
126
+ disabled: disabled,
127
+ name: name,
128
+ isControlled: isControlled,
129
+ checkboxType: checkboxType,
130
+ onCheckboxGroupChange: function onCheckboxGroupChange(checkedValue, isChecked) {
131
+ onCheckboxChange(checkedValue, isChecked);
132
+ }
129
133
  };
130
134
 
131
135
  var renderByOptions = function renderByOptions() {
132
136
  return (0, _map.default)(options).call(options, function (option, index) {
133
137
  return /*#__PURE__*/_react.default.createElement(_checkbox.default, {
134
138
  size: size,
135
- disabled: getDisabled(option.disabled),
139
+ disabled: option.disabled,
136
140
  key: index,
137
141
  name: name,
138
- defaultChecked: getChecked(option, defaultValue),
139
- checked: getChecked(option, groupValue),
142
+ defaultChecked: option.defaultValue,
143
+ checked: option.checked,
140
144
  checkboxType: checkboxType,
141
145
  value: (option === null || option === void 0 ? void 0 : option.value) || option,
142
- onChange: function onChange(e) {
143
- return onCheckboxChange(e, option);
144
- }
146
+ onChange: option.onChange
145
147
  }, option.label || option);
146
148
  });
147
149
  };
148
150
 
149
- var renderChildren = function renderChildren() {
150
- var _context;
151
-
152
- return (0, _map.default)(_context = _react.default.Children).call(_context, children, function (item) {
153
- var _a, _b;
154
-
155
- var groupProps = {};
156
- groupProps = {
157
- name: name,
158
- size: size,
159
- onChange: function onChange(e) {
160
- return onCheckboxChange(e, item);
161
- },
162
- checkboxType: checkboxType || ((_a = item.props) === null || _a === void 0 ? void 0 : _a.checkboxType),
163
- disabled: (0, _isBoolean.default)(disabled) ? disabled : (_b = item.props) === null || _b === void 0 ? void 0 : _b.disabled,
164
- checked: getChecked(item.props, groupValue),
165
- defaultChecked: getChecked(item.props, defaultValue)
166
- };
167
- return /*#__PURE__*/_react.default.cloneElement(item, (0, _extends2.default)((0, _extends2.default)({}, item.props), groupProps));
168
- });
169
- };
170
-
171
- var renderCheckbox = function renderCheckbox() {
172
- if ((0, _isArray.default)(options)) {
173
- return renderByOptions();
174
- } else if (children) {
175
- return renderChildren();
176
- }
177
- };
178
-
179
151
  return /*#__PURE__*/_react.default.createElement("ul", {
180
152
  className: (0, _classnames.default)(checkboxGroupPrefixCls, className),
181
153
  style: style,
182
154
  ref: ref
183
- }, renderCheckbox());
155
+ }, /*#__PURE__*/_react.default.createElement(GroupContext.Provider, {
156
+ value: context
157
+ }, options && options.length > 0 ? renderByOptions() : children));
184
158
  });
185
159
 
186
160
  var _default = /*#__PURE__*/_react.default.memo(CheckboxGroup);
@@ -1,8 +1,9 @@
1
1
  /// <reference types="react" />
2
2
  import { CheckboxProps } from './checkbox';
3
3
  import Group from './group';
4
- export { CheckboxProps, CheckboxSizes, CheckboxTypes } from './checkbox';
4
+ export { CheckboxSizes, CheckboxTypes, CheckboxSize, CheckboxType, CheckboxValueType } from './group';
5
5
  export { CheckboxGroupProps } from './group';
6
+ export { CheckboxProps } from './checkbox';
6
7
  interface CompoundedComponent extends React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLElement>> {
7
8
  Group: typeof Group;
8
9
  }
@@ -14,13 +14,13 @@ Object.defineProperty(exports, "__esModule", {
14
14
  Object.defineProperty(exports, "CheckboxSizes", {
15
15
  enumerable: true,
16
16
  get: function get() {
17
- return _checkbox.CheckboxSizes;
17
+ return _group.CheckboxSizes;
18
18
  }
19
19
  });
20
20
  Object.defineProperty(exports, "CheckboxTypes", {
21
21
  enumerable: true,
22
22
  get: function get() {
23
- return _checkbox.CheckboxTypes;
23
+ return _group.CheckboxTypes;
24
24
  }
25
25
  });
26
26
  Object.defineProperty(exports, "Group", {
@@ -31,9 +31,9 @@ Object.defineProperty(exports, "Group", {
31
31
  });
32
32
  exports.default = void 0;
33
33
 
34
- var _checkbox = _interopRequireWildcard(require("./checkbox"));
34
+ var _checkbox = _interopRequireDefault(require("./checkbox"));
35
35
 
36
- var _group = _interopRequireDefault(require("./group"));
36
+ var _group = _interopRequireWildcard(require("./group"));
37
37
 
38
38
  function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
39
39
 
@@ -155,6 +155,9 @@
155
155
  -moz-user-select: none;
156
156
  -ms-user-select: none;
157
157
  user-select: none;
158
+ overflow: hidden;
159
+ white-space: nowrap;
160
+ text-overflow: ellipsis;
158
161
  }
159
162
  .kd-checkbox-children .kd-input-underline {
160
163
  background-color: transparent;
@@ -39,6 +39,9 @@
39
39
  align-items: center;
40
40
  z-index: 999;
41
41
  user-select: none;
42
+ overflow: hidden;
43
+ white-space: nowrap;
44
+ text-overflow: ellipsis;
42
45
 
43
46
  .kd-input-underline {
44
47
  background-color: transparent;
@@ -188,7 +188,10 @@ declare const compDefaultProps: {
188
188
  disabled: boolean;
189
189
  popupOffset: number[];
190
190
  };
191
- Message: {};
191
+ Message: {
192
+ closable: boolean;
193
+ duration: number;
194
+ };
192
195
  Notice: {};
193
196
  Notification: {};
194
197
  Pagination: {
@@ -212,7 +212,10 @@ var compDefaultProps = {
212
212
  disabled: false,
213
213
  popupOffset: [0, 0]
214
214
  },
215
- Message: {},
215
+ Message: {
216
+ closable: false,
217
+ duration: 3000
218
+ },
216
219
  Notice: {},
217
220
  Notification: {},
218
221
  Pagination: {
@@ -17,7 +17,7 @@ var _content = _interopRequireDefault(require("./content"));
17
17
 
18
18
  var defaultStyle = {};
19
19
  var defaultDuration = 3000;
20
- var defaultClosable = true;
20
+ var defaultClosable = false;
21
21
  var defaultOffset = '40px';
22
22
  var defaultSuffixCls = 'message';
23
23
  var defaultPlacement = 'message';