Collapse.js 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. Object.defineProperty(exports, "collapseProps", {
  7. enumerable: true,
  8. get: function get() {
  9. return _commonProps.collapseProps;
  10. }
  11. });
  12. exports.default = void 0;
  13. var _vue = require("vue");
  14. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  15. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  16. var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
  17. var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
  18. var _propsUtil = require("../_util/props-util");
  19. var _vnode = require("../_util/vnode");
  20. var _commonProps = require("./commonProps");
  21. var _util = require("../_util/util");
  22. var _RightOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/RightOutlined"));
  23. var _firstNotUndefined = _interopRequireDefault(require("../_util/firstNotUndefined"));
  24. var _classNames2 = _interopRequireDefault(require("../_util/classNames"));
  25. var _useConfigInject2 = _interopRequireDefault(require("../_util/hooks/useConfigInject"));
  26. var _collapseMotion = _interopRequireDefault(require("../_util/collapseMotion"));
  27. function getActiveKeysArray(activeKey) {
  28. var currentActiveKey = activeKey;
  29. if (!Array.isArray(currentActiveKey)) {
  30. var activeKeyType = (0, _typeof2.default)(currentActiveKey);
  31. currentActiveKey = activeKeyType === 'number' || activeKeyType === 'string' ? [currentActiveKey] : [];
  32. }
  33. return currentActiveKey.map(function (key) {
  34. return String(key);
  35. });
  36. }
  37. var _default = (0, _vue.defineComponent)({
  38. compatConfig: {
  39. MODE: 3
  40. },
  41. name: 'ACollapse',
  42. inheritAttrs: false,
  43. props: (0, _propsUtil.initDefaultProps)((0, _commonProps.collapseProps)(), {
  44. accordion: false,
  45. destroyInactivePanel: false,
  46. bordered: true,
  47. openAnimation: (0, _collapseMotion.default)('ant-motion-collapse', false),
  48. expandIconPosition: 'left'
  49. }),
  50. slots: ['expandIcon'],
  51. // emits: ['change', 'update:activeKey'],
  52. setup: function setup(props, _ref) {
  53. var attrs = _ref.attrs,
  54. slots = _ref.slots,
  55. emit = _ref.emit;
  56. var stateActiveKey = (0, _vue.ref)(getActiveKeysArray((0, _firstNotUndefined.default)([props.activeKey, props.defaultActiveKey])));
  57. (0, _vue.watch)(function () {
  58. return props.activeKey;
  59. }, function () {
  60. stateActiveKey.value = getActiveKeysArray(props.activeKey);
  61. }, {
  62. deep: true
  63. });
  64. var _useConfigInject = (0, _useConfigInject2.default)('collapse', props),
  65. prefixCls = _useConfigInject.prefixCls,
  66. direction = _useConfigInject.direction;
  67. var iconPosition = (0, _vue.computed)(function () {
  68. var expandIconPosition = props.expandIconPosition;
  69. if (expandIconPosition !== undefined) {
  70. return expandIconPosition;
  71. }
  72. return direction.value === 'rtl' ? 'right' : 'left';
  73. });
  74. var renderExpandIcon = function renderExpandIcon(panelProps) {
  75. var _props$expandIcon = props.expandIcon,
  76. expandIcon = _props$expandIcon === void 0 ? slots.expandIcon : _props$expandIcon;
  77. var icon = expandIcon ? expandIcon(panelProps) : (0, _vue.createVNode)(_RightOutlined.default, {
  78. "rotate": panelProps.isActive ? 90 : undefined
  79. }, null);
  80. return (0, _vue.createVNode)("div", null, [(0, _propsUtil.isValidElement)(Array.isArray(expandIcon) ? icon[0] : icon) ? (0, _vnode.cloneElement)(icon, {
  81. class: "".concat(prefixCls.value, "-arrow")
  82. }, false) : icon]);
  83. };
  84. var setActiveKey = function setActiveKey(activeKey) {
  85. if (props.activeKey === undefined) {
  86. stateActiveKey.value = activeKey;
  87. }
  88. var newKey = props.accordion ? activeKey[0] : activeKey;
  89. emit('update:activeKey', newKey);
  90. emit('change', newKey);
  91. };
  92. var onClickItem = function onClickItem(key) {
  93. var activeKey = stateActiveKey.value;
  94. if (props.accordion) {
  95. activeKey = activeKey[0] === key ? [] : [key];
  96. } else {
  97. activeKey = (0, _toConsumableArray2.default)(activeKey);
  98. var index = activeKey.indexOf(key);
  99. var isActive = index > -1;
  100. if (isActive) {
  101. // remove active state
  102. activeKey.splice(index, 1);
  103. } else {
  104. activeKey.push(key);
  105. }
  106. }
  107. setActiveKey(activeKey);
  108. };
  109. var getNewChild = function getNewChild(child, index) {
  110. var _child$key, _child$children, _child$children$heade;
  111. if ((0, _propsUtil.isEmptyElement)(child)) return;
  112. var activeKey = stateActiveKey.value;
  113. var accordion = props.accordion,
  114. destroyInactivePanel = props.destroyInactivePanel,
  115. collapsible = props.collapsible,
  116. openAnimation = props.openAnimation;
  117. // If there is no key provide, use the panel order as default key
  118. var key = String((_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : index);
  119. var _ref2 = child.props || {},
  120. _ref2$header = _ref2.header,
  121. header = _ref2$header === void 0 ? (_child$children = child.children) === null || _child$children === void 0 ? void 0 : (_child$children$heade = _child$children.header) === null || _child$children$heade === void 0 ? void 0 : _child$children$heade.call(_child$children) : _ref2$header,
  122. headerClass = _ref2.headerClass,
  123. childCollapsible = _ref2.collapsible,
  124. disabled = _ref2.disabled;
  125. var isActive = false;
  126. if (accordion) {
  127. isActive = activeKey[0] === key;
  128. } else {
  129. isActive = activeKey.indexOf(key) > -1;
  130. }
  131. var mergeCollapsible = childCollapsible !== null && childCollapsible !== void 0 ? childCollapsible : collapsible;
  132. // legacy 2.x
  133. if (disabled || disabled === '') {
  134. mergeCollapsible = 'disabled';
  135. }
  136. var newProps = {
  137. key: key,
  138. panelKey: key,
  139. header: header,
  140. headerClass: headerClass,
  141. isActive: isActive,
  142. prefixCls: prefixCls.value,
  143. destroyInactivePanel: destroyInactivePanel,
  144. openAnimation: openAnimation,
  145. accordion: accordion,
  146. onItemClick: mergeCollapsible === 'disabled' ? null : onClickItem,
  147. expandIcon: renderExpandIcon,
  148. collapsible: mergeCollapsible
  149. };
  150. return (0, _vnode.cloneElement)(child, newProps);
  151. };
  152. var getItems = function getItems() {
  153. var _slots$default;
  154. return (0, _propsUtil.flattenChildren)((_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)).map(getNewChild);
  155. };
  156. return function () {
  157. var _classNames;
  158. var accordion = props.accordion,
  159. bordered = props.bordered,
  160. ghost = props.ghost;
  161. var collapseClassName = (0, _classNames2.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, prefixCls.value, true), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "-borderless"), !bordered), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "-icon-position-").concat(iconPosition.value), true), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "-rtl"), direction.value === 'rtl'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "-ghost"), !!ghost), (0, _defineProperty2.default)(_classNames, attrs.class, !!attrs.class), _classNames));
  162. return (0, _vue.createVNode)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({
  163. "class": collapseClassName
  164. }, (0, _util.getDataAndAriaProps)(attrs)), {}, {
  165. "style": attrs.style,
  166. "role": accordion ? 'tablist' : null
  167. }), [getItems()]);
  168. };
  169. }
  170. });
  171. exports.default = _default;