@kdcloudjs/kdesign 1.7.8 → 1.7.10

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 (28) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/dist/kdesign-complete.less +8 -1
  3. package/dist/kdesign.css +14 -2
  4. package/dist/kdesign.css.map +1 -1
  5. package/dist/kdesign.js +104 -123
  6. package/dist/kdesign.js.map +1 -1
  7. package/dist/kdesign.min.css +2 -2
  8. package/dist/kdesign.min.js +5 -5
  9. package/dist/kdesign.min.js.map +1 -1
  10. package/es/collapse/collapse.d.ts +2 -2
  11. package/es/collapse/collapse.js +42 -67
  12. package/es/collapse/panel.d.ts +3 -3
  13. package/es/collapse/panel.js +15 -9
  14. package/es/input/ClearableLabeledInput.js +4 -3
  15. package/es/input/style/index.css +13 -1
  16. package/es/input/style/index.less +5 -1
  17. package/es/input/style/mixin.less +3 -0
  18. package/es/tree-select/tree-select.js +3 -3
  19. package/lib/collapse/collapse.d.ts +2 -2
  20. package/lib/collapse/collapse.js +47 -67
  21. package/lib/collapse/panel.d.ts +3 -3
  22. package/lib/collapse/panel.js +14 -8
  23. package/lib/input/ClearableLabeledInput.js +4 -3
  24. package/lib/input/style/index.css +13 -1
  25. package/lib/input/style/index.less +5 -1
  26. package/lib/input/style/mixin.less +3 -0
  27. package/lib/tree-select/tree-select.js +3 -3
  28. package/package.json +1 -1
package/es/collapse/collapse.d.ts CHANGED
@@ -2,8 +2,8 @@ import React from 'react';
2
2
  import { PanelProps } from './panel';
3
3
  export declare const IconPositionTypes: ["left", "right"];
4
4
  export declare type IconPositionType = typeof IconPositionTypes[number];
5
- export declare type keyType = string[] | string | number[] | number | NONE_KEY_TYPE;
6
- export declare type NONE_KEY_TYPE = undefined;
5
+ export declare type PanelKeyType = string | number;
6
+ export declare type keyType = string[] | string | number[] | number | undefined;
7
7
  export interface CollapseProps {
8
8
  accordion?: boolean;
9
9
  activeKey?: keyType;
package/es/collapse/collapse.js CHANGED
@@ -6,16 +6,13 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/ins
6
6
  import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
7
7
  import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
8
8
  import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
9
- import React from 'react';
9
+ import React, { useEffect, useState } from 'react';
10
10
  import ConfigContext from '../config-provider/ConfigContext';
11
11
  import { getCompProps } from '../_utils';
12
12
  import classNames from 'classnames';
13
13
  import { tuple } from '../_utils/type';
14
- import isArray from 'lodash/isArray';
15
- import isBoolean from 'lodash/isBoolean';
16
14
  import devwarning from '../_utils/devwarning';
17
15
  export var IconPositionTypes = tuple('left', 'right');
18
- var NONE_KEY = undefined;
19
16
  var InternalCollapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
20
17
  var _React$useContext = React.useContext(ConfigContext),
21
18
  getPrefixCls = _React$useContext.getPrefixCls,
@@ -34,91 +31,69 @@ var InternalCollapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
34
31
  children = _getCompProps.children,
35
32
  customPrefixcls = _getCompProps.prefixCls;
36
33
  var CollapsePrefixCls = getPrefixCls(prefixCls, 'collapse', customPrefixcls); // 样式前缀
37
- var getDefaultActivePanelKey = function getDefaultActivePanelKey() {
38
- // const _defaultActiveKey =
39
- // defaultActiveKey !== NONE_KEY
40
- // ? defaultActiveKey
41
- // : React.Children.map(children, (item, index) => {
42
- // if (index === 0) return item.props?.panelKey
43
- // })
44
- // return isBoolean(activeKey) ? activeKey : _defaultActiveKey
45
- return isBoolean(activeKey) ? activeKey : defaultActiveKey;
46
- };
47
- var _React$useState = React.useState(getDefaultActivePanelKey()),
48
- _React$useState2 = _slicedToArray(_React$useState, 2),
49
- activePanelKey = _React$useState2[0],
50
- setActivePanelKey = _React$useState2[1];
51
- var getPanelExpand = function getPanelExpand(panelKey, accordion, activeKey) {
52
- var _activeKey = getActiveKey(accordion, activeKey);
53
- return isInclude(_activeKey, panelKey);
54
- };
55
- var getActiveKey = function getActiveKey(accordion, activeKey) {
56
- var _activeKey = activeKey;
57
- if (accordion) {
58
- if (isArray(activeKey)) {
59
- _activeKey = activeKey[0]; // accordion 模式下默认第一个元素
60
- }
34
+ var _useState = useState([]),
35
+ _useState2 = _slicedToArray(_useState, 2),
36
+ innerKey = _useState2[0],
37
+ setInnerKey = _useState2[1];
38
+ var convertActiveKey = function convertActiveKey(newKey) {
39
+ var ret = [];
40
+ if (Array.isArray(newKey)) {
41
+ ret = newKey;
42
+ } else if (typeof newKey === 'string' || typeof newKey === 'number') {
43
+ ret = [newKey];
61
44
  }
62
-
63
- return _activeKey;
64
- };
65
- var isInclude = function isInclude(activePanelKey, key) {
66
- if (isArray(activePanelKey)) {
67
- return _includesInstanceProperty(activePanelKey).call(activePanelKey, key) || _includesInstanceProperty(activePanelKey).call(activePanelKey, String(key));
68
- } else {
69
- return String(activePanelKey) === String(key);
45
+ if (accordion && ret.length) {
46
+ ret = [ret[0]];
70
47
  }
48
+ return ret;
71
49
  };
72
- var getRemoveKey = function getRemoveKey(key) {
73
- if (isArray(activePanelKey)) {
74
- return _filterInstanceProperty(activePanelKey).call(activePanelKey, function (element) {
75
- return element !== key;
76
- });
50
+ useEffect(function () {
51
+ if (typeof activeKey !== 'undefined') {
52
+ setInnerKey(convertActiveKey(activeKey));
77
53
  }
78
- return NONE_KEY;
79
- };
80
- var getAddKey = function getAddKey(key) {
81
- if (isArray(activePanelKey)) {
82
- var _context;
83
- return _concatInstanceProperty(_context = []).call(_context, _toConsumableArray(activePanelKey), [key]);
54
+ }, [activeKey]);
55
+ useEffect(function () {
56
+ if (typeof activeKey !== 'undefined' || typeof defaultActiveKey !== 'undefined') {
57
+ setInnerKey(convertActiveKey(typeof activeKey !== 'undefined' ? activeKey : defaultActiveKey));
84
58
  }
85
- return activePanelKey ? [activePanelKey, key] : key;
86
- };
87
- var getNewActiveKey = function getNewActiveKey(key) {
88
- if (isInclude(activePanelKey, key)) {
89
- if (accordion) {
90
- return NONE_KEY;
59
+ }, []);
60
+ var onPanelChange = function onPanelChange(key) {
61
+ var newKey = [];
62
+ if (accordion) {
63
+ if (_includesInstanceProperty(innerKey).call(innerKey, key)) {
64
+ newKey = [];
65
+ } else {
66
+ newKey = [key];
91
67
  }
92
- return getRemoveKey(key);
93
68
  } else {
94
- if (accordion) {
95
- return key;
69
+ if (_includesInstanceProperty(innerKey).call(innerKey, key)) {
70
+ newKey = _filterInstanceProperty(innerKey).call(innerKey, function (d) {
71
+ return d !== key;
72
+ });
73
+ } else {
74
+ var _context;
75
+ newKey = _concatInstanceProperty(_context = []).call(_context, _toConsumableArray(innerKey), [key]);
96
76
  }
97
- return getAddKey(key);
98
77
  }
78
+ if (typeof activeKey === 'undefined') {
79
+ setInnerKey(newKey);
80
+ }
81
+ onChange && onChange(newKey);
99
82
  };
100
- var onPanelChange = React.useCallback(function (key) {
101
- key = getNewActiveKey(key);
102
- setActivePanelKey(key);
103
- onChange && onChange();
104
- }, [onChange, activePanelKey, accordion]);
105
83
  var renderPanel = function renderPanel() {
106
84
  var _context2;
107
85
  return _mapInstanceProperty(_context2 = React.Children).call(_context2, children, function (item) {
108
- var _a, _b, _c;
86
+ var _a;
109
87
  if (((_a = item === null || item === void 0 ? void 0 : item.type) === null || _a === void 0 ? void 0 : _a.displayName) !== 'Panel') {
110
88
  devwarning(true, 'Collapse', 'children必须为Collapse.Panel');
111
89
  return item;
112
90
  }
113
- var expand = getPanelExpand((_b = item.props) === null || _b === void 0 ? void 0 : _b.panelKey, accordion, activePanelKey);
114
- var defaultExpand = getPanelExpand((_c = item.props) === null || _c === void 0 ? void 0 : _c.panelKey, accordion, defaultActiveKey);
115
91
  return /*#__PURE__*/React.cloneElement(item, _extends({
116
92
  expandIcon: expandIcon,
117
93
  expandIconPosition: expandIconPosition,
118
94
  onChange: onPanelChange,
119
95
  bordered: bordered,
120
- expand: expand,
121
- defaultExpand: defaultExpand
96
+ innerKey: innerKey
122
97
  }, item.props));
123
98
  });
124
99
  };
package/es/collapse/panel.d.ts CHANGED
@@ -1,18 +1,18 @@
1
1
  import React from 'react';
2
- import { IconPositionType, keyType } from './collapse';
2
+ import { IconPositionType, PanelKeyType } from './collapse';
3
3
  export interface PanelProps {
4
4
  disabled?: boolean;
5
5
  header?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
6
6
  expandIcon?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
7
7
  bordered?: boolean;
8
8
  expandIconPosition?: IconPositionType;
9
- onChange?: (key: keyType) => void;
9
+ onChange?: (key: PanelKeyType) => void;
10
10
  extra?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
11
11
  assist?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
12
12
  expand?: boolean;
13
13
  defaultExpand?: boolean;
14
14
  children?: React.ReactNode;
15
- panelKey?: any;
15
+ panelKey?: PanelKeyType;
16
16
  style?: React.CSSProperties;
17
17
  className?: string;
18
18
  }
package/es/collapse/panel.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
2
2
  import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
3
- import React, { useRef, useState } from 'react';
3
+ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
4
+ import React, { useEffect, useRef, useState } from 'react';
4
5
  import classNames from 'classnames';
5
6
  import ConfigContext from '../config-provider/ConfigContext';
6
7
  import { getCompProps } from '../_utils';
7
8
  import Icon from '../icon';
8
- import isBoolean from 'lodash/isBoolean';
9
9
  var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
10
10
  var _classNames6, _classNames7, _classNames8;
11
11
  var _React$useContext = React.useContext(ConfigContext),
@@ -19,8 +19,7 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
19
19
  header = _getCompProps.header,
20
20
  onChange = _getCompProps.onChange,
21
21
  panelKey = _getCompProps.panelKey,
22
- defaultExpand = _getCompProps.defaultExpand,
23
- expand = _getCompProps.expand,
22
+ innerKey = _getCompProps.innerKey,
24
23
  bordered = _getCompProps.bordered,
25
24
  expandIcon = _getCompProps.expandIcon,
26
25
  expandIconPosition = _getCompProps.expandIconPosition,
@@ -36,17 +35,24 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
36
35
  _useState2 = _slicedToArray(_useState, 2),
37
36
  expandAnimation = _useState2[0],
38
37
  setExpandAnimation = _useState2[1];
39
- var getExpand = function getExpand() {
40
- return isBoolean(expand) ? expand : defaultExpand;
41
- };
38
+ var _useState3 = useState(false),
39
+ _useState4 = _slicedToArray(_useState3, 2),
40
+ expand = _useState4[0],
41
+ setExpand = _useState4[1];
42
+ useEffect(function () {
43
+ var newValue = _includesInstanceProperty(innerKey).call(innerKey, panelKey);
44
+ if (newValue !== expand) {
45
+ setExpand(newValue);
46
+ setExpandAnimation(true);
47
+ }
48
+ }, [innerKey]);
42
49
  var handleClick = function handleClick() {
43
50
  if (disabled) return;
44
- setExpandAnimation(true);
45
51
  onChange && onChange(panelKey);
46
52
  };
47
53
  var renderIcon = function renderIcon() {
48
54
  var _classNames;
49
- var iconClassName = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(panelPrefixCls, "-icon"), true), _defineProperty(_classNames, "".concat(panelPrefixCls, "-animation-expand"), !getExpand()), _defineProperty(_classNames, "".concat(panelPrefixCls, "-animation-collapse"), getExpand()), _defineProperty(_classNames, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames));
55
+ var iconClassName = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(panelPrefixCls, "-icon"), true), _defineProperty(_classNames, "".concat(panelPrefixCls, "-animation-expand"), !expand), _defineProperty(_classNames, "".concat(panelPrefixCls, "-animation-collapse"), expand), _defineProperty(_classNames, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames));
50
56
  return /*#__PURE__*/React.createElement("span", {
51
57
  className: iconClassName,
52
58
  onClick: handleClick
package/es/input/ClearableLabeledInput.js CHANGED
@@ -52,6 +52,7 @@ var ClearableInput = function ClearableInput(props) {
52
52
  var needClear = !disabled && value && isMouseEnter;
53
53
  var clearIconclasses = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-textarea-clear-icon"), inputType === ClearableInputType[1]), _defineProperty(_classNames, "".concat(prefixCls, "-clear-icon"), inputType === ClearableInputType[0]), _defineProperty(_classNames, "".concat(prefixCls, "-clear-icon-hidden"), !needClear), _defineProperty(_classNames, "".concat(prefixCls, "-clear-icon-rightSpace"), suffix), _classNames));
54
54
  return /*#__PURE__*/React.createElement("span", {
55
+ onMouseDown: mouseDownHandle,
55
56
  onClick: handleReset,
56
57
  className: clearIconclasses
57
58
  }, typeof allowClear === 'boolean' ? /*#__PURE__*/React.createElement(Icon, {
@@ -59,11 +60,11 @@ var ClearableInput = function ClearableInput(props) {
59
60
  }) : allowClear);
60
61
  };
61
62
  var renderSuffix = function renderSuffix() {
62
- if (suffix || !disabled && !!allowClear || inputCount) {
63
+ if (suffix || inputCount) {
63
64
  return /*#__PURE__*/React.createElement("span", {
64
65
  className: "".concat(prefixCls, "-suffix"),
65
66
  onMouseDown: mouseDownHandle
66
- }, renderClearIcon(), inputCount && /*#__PURE__*/React.createElement("span", {
67
+ }, inputCount && /*#__PURE__*/React.createElement("span", {
67
68
  style: {
68
69
  marginRight: suffix ? 9 : 0
69
70
  }
@@ -89,7 +90,7 @@ var ClearableInput = function ClearableInput(props) {
89
90
  onMouseLeave: mouseLeaveHandle
90
91
  }, prefixNode, /*#__PURE__*/React.cloneElement(originElement, {
91
92
  style: null
92
- }), suffixNode);
93
+ }), renderClearIcon(), suffixNode);
93
94
  };
94
95
  var renderInputWithLabel = function renderInputWithLabel(originElement) {
95
96
  var _classNames4, _context2, _classNames5;
package/es/input/style/index.css CHANGED
@@ -367,10 +367,12 @@ textarea {
367
367
  border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
368
368
  }
369
369
  .kd-input-wrapper-disabled {
370
- background-color: var(--kd-c-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
371
370
  border-color: var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
372
371
  cursor: not-allowed;
373
372
  }
373
+ .kd-input-wrapper-disabled:not(.kd-input-wrapper-underline) {
374
+ background-color: var(--kd-c-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
375
+ }
374
376
  .kd-input-wrapper-disabled .kd-input-suffix,
375
377
  .kd-input-wrapper-disabled .kd-input-prefix {
376
378
  color: var(--kd-c-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
@@ -425,6 +427,15 @@ textarea {
425
427
  .kd-input-textarea-clear-icon {
426
428
  cursor: pointer;
427
429
  color: var(--kd-c-input-clear-color, #d9d9d9);
430
+ display: -webkit-inline-box;
431
+ display: -ms-inline-flexbox;
432
+ display: inline-flex;
433
+ -webkit-box-align: center;
434
+ -ms-flex-align: center;
435
+ align-items: center;
436
+ -webkit-box-pack: center;
437
+ -ms-flex-pack: center;
438
+ justify-content: center;
428
439
  }
429
440
  .kd-input-clear-icon:hover,
430
441
  .kd-input-textarea-clear-icon:hover {
@@ -437,6 +448,7 @@ textarea {
437
448
  }
438
449
  .kd-input-clear-icon-hidden {
439
450
  visibility: hidden;
451
+ display: none;
440
452
  }
441
453
  .kd-input-clear-icon-rightSpace {
442
454
  margin-right: 4px;
package/es/input/style/index.less CHANGED
@@ -157,10 +157,13 @@ textarea {
157
157
  }
158
158
 
159
159
  &-disabled {
160
- background-color: @input-background-color-disabled-inner;
161
160
  border-color: @input-border-color-disabled-inner;
162
161
  cursor: not-allowed;
163
162
 
163
+ &:not(.@{input-prefix-cls}-wrapper-underline) {
164
+ background-color: @input-background-color-disabled-inner;
165
+ }
166
+
164
167
  .@{input-prefix-cls}-suffix,
165
168
  .@{input-prefix-cls}-prefix {
166
169
  color: @input-color-disabled-inner;
@@ -192,6 +195,7 @@ textarea {
192
195
 
193
196
  &-clear-icon-hidden {
194
197
  visibility: hidden;
198
+ display: none;
195
199
  }
196
200
 
197
201
  &-clear-icon-rightSpace {
package/es/input/style/mixin.less CHANGED
@@ -51,6 +51,9 @@
51
51
  .input-clear-icon() {
52
52
  cursor: pointer;
53
53
  color: @input-clear-color;
54
+ display: inline-flex;
55
+ align-items: center;
56
+ justify-content: center;
54
57
 
55
58
  &:hover {
56
59
  color: @input-clear-color-hover;
package/es/tree-select/tree-select.js CHANGED
@@ -94,7 +94,8 @@ var InternalTreeSelect = function InternalTreeSelect(props, ref) {
94
94
  treeLoadData = treeSelectProps.treeLoadData,
95
95
  onTreeExpand = treeSelectProps.onTreeExpand,
96
96
  onSelect = treeSelectProps.onSelect,
97
- onCheck = treeSelectProps.onCheck;
97
+ onCheck = treeSelectProps.onCheck,
98
+ dropdownRender = treeSelectProps.dropdownRender;
98
99
  var isMultiple = mode === 'multiple'; // 是否多选
99
100
  var _useMergedState = useMergedState(isMultiple ? [] : undefined, {
100
101
  value: value,
@@ -253,7 +254,6 @@ var InternalTreeSelect = function InternalTreeSelect(props, ref) {
253
254
  };
254
255
  var handleCheck = function handleCheck(keys, state) {
255
256
  onCheck === null || onCheck === void 0 ? void 0 : onCheck(keys, state);
256
- console.log(1111, state);
257
257
  onChange === null || onChange === void 0 ? void 0 : onChange(keys);
258
258
  !Object.hasOwnProperty.call(treeSelectProps, 'value') && setInitValue(keys);
259
259
  };
@@ -346,7 +346,7 @@ var InternalTreeSelect = function InternalTreeSelect(props, ref) {
346
346
  className: dropDownCls,
347
347
  style: dropDownStyle,
348
348
  ref: dropDownRef
349
- }, dropRender()));
349
+ }, dropdownRender ? dropdownRender === null || dropdownRender === void 0 ? void 0 : dropdownRender(dropRender()) : dropRender()));
350
350
  };
351
351
  // 处理多选tag
352
352
  var handleMaxTagHolder = useCallback(function () {
package/lib/collapse/collapse.d.ts CHANGED
@@ -2,8 +2,8 @@ import React from 'react';
2
2
  import { PanelProps } from './panel';
3
3
  export declare const IconPositionTypes: ["left", "right"];
4
4
  export declare type IconPositionType = typeof IconPositionTypes[number];
5
- export declare type keyType = string[] | string | number[] | number | NONE_KEY_TYPE;
6
- export declare type NONE_KEY_TYPE = undefined;
5
+ export declare type PanelKeyType = string | number;
6
+ export declare type keyType = string[] | string | number[] | number | undefined;
7
7
  export interface CollapseProps {
8
8
  accordion?: boolean;
9
9
  activeKey?: keyType;
package/lib/collapse/collapse.js CHANGED
@@ -1,5 +1,8 @@
1
1
  "use strict";
2
2
 
3
+ var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
4
+ var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
5
+ var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
3
6
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
7
  Object.defineProperty(exports, "__esModule", {
5
8
  value: true
@@ -13,17 +16,16 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
13
16
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
14
17
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
15
18
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
16
- var _react = _interopRequireDefault(require("react"));
19
+ var _react = _interopRequireWildcard(require("react"));
17
20
  var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
18
21
  var _utils = require("../_utils");
19
22
  var _classnames = _interopRequireDefault(require("classnames"));
20
23
  var _type = require("../_utils/type");
21
- var _isArray = _interopRequireDefault(require("lodash/isArray"));
22
- var _isBoolean = _interopRequireDefault(require("lodash/isBoolean"));
23
24
  var _devwarning = _interopRequireDefault(require("../_utils/devwarning"));
25
+ 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); }
26
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
24
27
  var IconPositionTypes = (0, _type.tuple)('left', 'right');
25
28
  exports.IconPositionTypes = IconPositionTypes;
26
- var NONE_KEY = undefined;
27
29
  var InternalCollapse = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
28
30
  var _React$useContext = _react.default.useContext(_ConfigContext.default),
29
31
  getPrefixCls = _React$useContext.getPrefixCls,
@@ -42,91 +44,69 @@ var InternalCollapse = /*#__PURE__*/_react.default.forwardRef(function (props, r
42
44
  children = _getCompProps.children,
43
45
  customPrefixcls = _getCompProps.prefixCls;
44
46
  var CollapsePrefixCls = getPrefixCls(prefixCls, 'collapse', customPrefixcls); // 样式前缀
45
- var getDefaultActivePanelKey = function getDefaultActivePanelKey() {
46
- // const _defaultActiveKey =
47
- // defaultActiveKey !== NONE_KEY
48
- // ? defaultActiveKey
49
- // : React.Children.map(children, (item, index) => {
50
- // if (index === 0) return item.props?.panelKey
51
- // })
52
- // return isBoolean(activeKey) ? activeKey : _defaultActiveKey
53
- return (0, _isBoolean.default)(activeKey) ? activeKey : defaultActiveKey;
54
- };
55
- var _React$useState = _react.default.useState(getDefaultActivePanelKey()),
56
- _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
57
- activePanelKey = _React$useState2[0],
58
- setActivePanelKey = _React$useState2[1];
59
- var getPanelExpand = function getPanelExpand(panelKey, accordion, activeKey) {
60
- var _activeKey = getActiveKey(accordion, activeKey);
61
- return isInclude(_activeKey, panelKey);
62
- };
63
- var getActiveKey = function getActiveKey(accordion, activeKey) {
64
- var _activeKey = activeKey;
65
- if (accordion) {
66
- if ((0, _isArray.default)(activeKey)) {
67
- _activeKey = activeKey[0]; // accordion 模式下默认第一个元素
68
- }
47
+ var _useState = (0, _react.useState)([]),
48
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
49
+ innerKey = _useState2[0],
50
+ setInnerKey = _useState2[1];
51
+ var convertActiveKey = function convertActiveKey(newKey) {
52
+ var ret = [];
53
+ if (Array.isArray(newKey)) {
54
+ ret = newKey;
55
+ } else if (typeof newKey === 'string' || typeof newKey === 'number') {
56
+ ret = [newKey];
69
57
  }
70
-
71
- return _activeKey;
72
- };
73
- var isInclude = function isInclude(activePanelKey, key) {
74
- if ((0, _isArray.default)(activePanelKey)) {
75
- return (0, _includes.default)(activePanelKey).call(activePanelKey, key) || (0, _includes.default)(activePanelKey).call(activePanelKey, String(key));
76
- } else {
77
- return String(activePanelKey) === String(key);
58
+ if (accordion && ret.length) {
59
+ ret = [ret[0]];
78
60
  }
61
+ return ret;
79
62
  };
80
- var getRemoveKey = function getRemoveKey(key) {
81
- if ((0, _isArray.default)(activePanelKey)) {
82
- return (0, _filter.default)(activePanelKey).call(activePanelKey, function (element) {
83
- return element !== key;
84
- });
63
+ (0, _react.useEffect)(function () {
64
+ if (typeof activeKey !== 'undefined') {
65
+ setInnerKey(convertActiveKey(activeKey));
85
66
  }
86
- return NONE_KEY;
87
- };
88
- var getAddKey = function getAddKey(key) {
89
- if ((0, _isArray.default)(activePanelKey)) {
90
- var _context;
91
- return (0, _concat.default)(_context = []).call(_context, (0, _toConsumableArray2.default)(activePanelKey), [key]);
67
+ }, [activeKey]);
68
+ (0, _react.useEffect)(function () {
69
+ if (typeof activeKey !== 'undefined' || typeof defaultActiveKey !== 'undefined') {
70
+ setInnerKey(convertActiveKey(typeof activeKey !== 'undefined' ? activeKey : defaultActiveKey));
92
71
  }
93
- return activePanelKey ? [activePanelKey, key] : key;
94
- };
95
- var getNewActiveKey = function getNewActiveKey(key) {
96
- if (isInclude(activePanelKey, key)) {
97
- if (accordion) {
98
- return NONE_KEY;
72
+ }, []);
73
+ var onPanelChange = function onPanelChange(key) {
74
+ var newKey = [];
75
+ if (accordion) {
76
+ if ((0, _includes.default)(innerKey).call(innerKey, key)) {
77
+ newKey = [];
78
+ } else {
79
+ newKey = [key];
99
80
  }
100
- return getRemoveKey(key);
101
81
  } else {
102
- if (accordion) {
103
- return key;
82
+ if ((0, _includes.default)(innerKey).call(innerKey, key)) {
83
+ newKey = (0, _filter.default)(innerKey).call(innerKey, function (d) {
84
+ return d !== key;
85
+ });
86
+ } else {
87
+ var _context;
88
+ newKey = (0, _concat.default)(_context = []).call(_context, (0, _toConsumableArray2.default)(innerKey), [key]);
104
89
  }
105
- return getAddKey(key);
106
90
  }
91
+ if (typeof activeKey === 'undefined') {
92
+ setInnerKey(newKey);
93
+ }
94
+ onChange && onChange(newKey);
107
95
  };
108
- var onPanelChange = _react.default.useCallback(function (key) {
109
- key = getNewActiveKey(key);
110
- setActivePanelKey(key);
111
- onChange && onChange();
112
- }, [onChange, activePanelKey, accordion]);
113
96
  var renderPanel = function renderPanel() {
114
97
  var _context2;
115
98
  return (0, _map.default)(_context2 = _react.default.Children).call(_context2, children, function (item) {
116
- var _a, _b, _c;
99
+ var _a;
117
100
  if (((_a = item === null || item === void 0 ? void 0 : item.type) === null || _a === void 0 ? void 0 : _a.displayName) !== 'Panel') {
118
101
  (0, _devwarning.default)(true, 'Collapse', 'children必须为Collapse.Panel');
119
102
  return item;
120
103
  }
121
- var expand = getPanelExpand((_b = item.props) === null || _b === void 0 ? void 0 : _b.panelKey, accordion, activePanelKey);
122
- var defaultExpand = getPanelExpand((_c = item.props) === null || _c === void 0 ? void 0 : _c.panelKey, accordion, defaultActiveKey);
123
104
  return /*#__PURE__*/_react.default.cloneElement(item, (0, _extends2.default)({
124
105
  expandIcon: expandIcon,
125
106
  expandIconPosition: expandIconPosition,
126
107
  onChange: onPanelChange,
127
108
  bordered: bordered,
128
- expand: expand,
129
- defaultExpand: defaultExpand
109
+ innerKey: innerKey
130
110
  }, item.props));
131
111
  });
132
112
  };
package/lib/collapse/panel.d.ts CHANGED
@@ -1,18 +1,18 @@
1
1
  import React from 'react';
2
- import { IconPositionType, keyType } from './collapse';
2
+ import { IconPositionType, PanelKeyType } from './collapse';
3
3
  export interface PanelProps {
4
4
  disabled?: boolean;
5
5
  header?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
6
6
  expandIcon?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
7
7
  bordered?: boolean;
8
8
  expandIconPosition?: IconPositionType;
9
- onChange?: (key: keyType) => void;
9
+ onChange?: (key: PanelKeyType) => void;
10
10
  extra?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
11
11
  assist?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
12
12
  expand?: boolean;
13
13
  defaultExpand?: boolean;
14
14
  children?: React.ReactNode;
15
- panelKey?: any;
15
+ panelKey?: PanelKeyType;
16
16
  style?: React.CSSProperties;
17
17
  className?: string;
18
18
  }
package/lib/collapse/panel.js CHANGED
@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
8
8
  value: true
9
9
  });
10
10
  exports.default = void 0;
11
+ var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
11
12
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
12
13
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
13
14
  var _react = _interopRequireWildcard(require("react"));
@@ -15,7 +16,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
15
16
  var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
16
17
  var _utils = require("../_utils");
17
18
  var _icon = _interopRequireDefault(require("../icon"));
18
- var _isBoolean = _interopRequireDefault(require("lodash/isBoolean"));
19
19
  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); }
20
20
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
21
21
  var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
@@ -31,8 +31,7 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
31
31
  header = _getCompProps.header,
32
32
  onChange = _getCompProps.onChange,
33
33
  panelKey = _getCompProps.panelKey,
34
- defaultExpand = _getCompProps.defaultExpand,
35
- expand = _getCompProps.expand,
34
+ innerKey = _getCompProps.innerKey,
36
35
  bordered = _getCompProps.bordered,
37
36
  expandIcon = _getCompProps.expandIcon,
38
37
  expandIconPosition = _getCompProps.expandIconPosition,
@@ -48,17 +47,24 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
48
47
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
49
48
  expandAnimation = _useState2[0],
50
49
  setExpandAnimation = _useState2[1];
51
- var getExpand = function getExpand() {
52
- return (0, _isBoolean.default)(expand) ? expand : defaultExpand;
53
- };
50
+ var _useState3 = (0, _react.useState)(false),
51
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
52
+ expand = _useState4[0],
53
+ setExpand = _useState4[1];
54
+ (0, _react.useEffect)(function () {
55
+ var newValue = (0, _includes.default)(innerKey).call(innerKey, panelKey);
56
+ if (newValue !== expand) {
57
+ setExpand(newValue);
58
+ setExpandAnimation(true);
59
+ }
60
+ }, [innerKey]);
54
61
  var handleClick = function handleClick() {
55
62
  if (disabled) return;
56
- setExpandAnimation(true);
57
63
  onChange && onChange(panelKey);
58
64
  };
59
65
  var renderIcon = function renderIcon() {
60
66
  var _classNames;
61
- var iconClassName = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(panelPrefixCls, "-icon"), true), (0, _defineProperty2.default)(_classNames, "".concat(panelPrefixCls, "-animation-expand"), !getExpand()), (0, _defineProperty2.default)(_classNames, "".concat(panelPrefixCls, "-animation-collapse"), getExpand()), (0, _defineProperty2.default)(_classNames, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames));
67
+ var iconClassName = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(panelPrefixCls, "-icon"), true), (0, _defineProperty2.default)(_classNames, "".concat(panelPrefixCls, "-animation-expand"), !expand), (0, _defineProperty2.default)(_classNames, "".concat(panelPrefixCls, "-animation-collapse"), expand), (0, _defineProperty2.default)(_classNames, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames));
62
68
  return /*#__PURE__*/_react.default.createElement("span", {
63
69
  className: iconClassName,
64
70
  onClick: handleClick