Column.js 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. "use strict";
  2. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  4. Object.defineProperty(exports, "__esModule", {
  5. value: true
  6. });
  7. exports.FIX_LABEL = void 0;
  8. exports.default = Column;
  9. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  10. var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
  11. var _classnames = _interopRequireDefault(require("classnames"));
  12. var React = _interopRequireWildcard(require("react"));
  13. var _context = _interopRequireDefault(require("../context"));
  14. var _useSearchOptions = require("../hooks/useSearchOptions");
  15. var _commonUtil = require("../utils/commonUtil");
  16. var _Checkbox = _interopRequireDefault(require("./Checkbox"));
  17. var FIX_LABEL = exports.FIX_LABEL = '__cascader_fix_label__';
  18. function Column(_ref) {
  19. var prefixCls = _ref.prefixCls,
  20. multiple = _ref.multiple,
  21. options = _ref.options,
  22. activeValue = _ref.activeValue,
  23. prevValuePath = _ref.prevValuePath,
  24. onToggleOpen = _ref.onToggleOpen,
  25. onSelect = _ref.onSelect,
  26. onActive = _ref.onActive,
  27. checkedSet = _ref.checkedSet,
  28. halfCheckedSet = _ref.halfCheckedSet,
  29. loadingKeys = _ref.loadingKeys,
  30. isSelectable = _ref.isSelectable,
  31. propsDisabled = _ref.disabled;
  32. var menuPrefixCls = "".concat(prefixCls, "-menu");
  33. var menuItemPrefixCls = "".concat(prefixCls, "-menu-item");
  34. var _React$useContext = React.useContext(_context.default),
  35. fieldNames = _React$useContext.fieldNames,
  36. changeOnSelect = _React$useContext.changeOnSelect,
  37. expandTrigger = _React$useContext.expandTrigger,
  38. expandIcon = _React$useContext.expandIcon,
  39. loadingIcon = _React$useContext.loadingIcon,
  40. dropdownMenuColumnStyle = _React$useContext.dropdownMenuColumnStyle,
  41. optionRender = _React$useContext.optionRender;
  42. var hoverOpen = expandTrigger === 'hover';
  43. var isOptionDisabled = function isOptionDisabled(disabled) {
  44. return propsDisabled || disabled;
  45. };
  46. // ============================ Option ============================
  47. var optionInfoList = React.useMemo(function () {
  48. return options.map(function (option) {
  49. var _option$FIX_LABEL;
  50. var disabled = option.disabled,
  51. disableCheckbox = option.disableCheckbox;
  52. var searchOptions = option[_useSearchOptions.SEARCH_MARK];
  53. var label = (_option$FIX_LABEL = option[FIX_LABEL]) !== null && _option$FIX_LABEL !== void 0 ? _option$FIX_LABEL : option[fieldNames.label];
  54. var value = option[fieldNames.value];
  55. var isMergedLeaf = (0, _commonUtil.isLeaf)(option, fieldNames);
  56. // Get real value of option. Search option is different way.
  57. var fullPath = searchOptions ? searchOptions.map(function (opt) {
  58. return opt[fieldNames.value];
  59. }) : [].concat((0, _toConsumableArray2.default)(prevValuePath), [value]);
  60. var fullPathKey = (0, _commonUtil.toPathKey)(fullPath);
  61. var isLoading = loadingKeys.includes(fullPathKey);
  62. // >>>>> checked
  63. var checked = checkedSet.has(fullPathKey);
  64. // >>>>> halfChecked
  65. var halfChecked = halfCheckedSet.has(fullPathKey);
  66. return {
  67. disabled: disabled,
  68. label: label,
  69. value: value,
  70. isLeaf: isMergedLeaf,
  71. isLoading: isLoading,
  72. checked: checked,
  73. halfChecked: halfChecked,
  74. option: option,
  75. disableCheckbox: disableCheckbox,
  76. fullPath: fullPath,
  77. fullPathKey: fullPathKey
  78. };
  79. });
  80. }, [options, checkedSet, fieldNames, halfCheckedSet, loadingKeys, prevValuePath]);
  81. // ============================ Render ============================
  82. return /*#__PURE__*/React.createElement("ul", {
  83. className: menuPrefixCls,
  84. role: "menu"
  85. }, optionInfoList.map(function (_ref2) {
  86. var _classNames;
  87. var disabled = _ref2.disabled,
  88. label = _ref2.label,
  89. value = _ref2.value,
  90. isMergedLeaf = _ref2.isLeaf,
  91. isLoading = _ref2.isLoading,
  92. checked = _ref2.checked,
  93. halfChecked = _ref2.halfChecked,
  94. option = _ref2.option,
  95. fullPath = _ref2.fullPath,
  96. fullPathKey = _ref2.fullPathKey,
  97. disableCheckbox = _ref2.disableCheckbox;
  98. // >>>>> Open
  99. var triggerOpenPath = function triggerOpenPath() {
  100. if (isOptionDisabled(disabled)) {
  101. return;
  102. }
  103. var nextValueCells = (0, _toConsumableArray2.default)(fullPath);
  104. if (hoverOpen && isMergedLeaf) {
  105. nextValueCells.pop();
  106. }
  107. onActive(nextValueCells);
  108. };
  109. // >>>>> Selection
  110. var triggerSelect = function triggerSelect() {
  111. if (isSelectable(option) && !isOptionDisabled(disabled)) {
  112. onSelect(fullPath, isMergedLeaf);
  113. }
  114. };
  115. // >>>>> Title
  116. var title;
  117. if (typeof option.title === 'string') {
  118. title = option.title;
  119. } else if (typeof label === 'string') {
  120. title = label;
  121. }
  122. // >>>>> Render
  123. return /*#__PURE__*/React.createElement("li", {
  124. key: fullPathKey,
  125. className: (0, _classnames.default)(menuItemPrefixCls, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(menuItemPrefixCls, "-expand"), !isMergedLeaf), (0, _defineProperty2.default)(_classNames, "".concat(menuItemPrefixCls, "-active"), activeValue === value || activeValue === fullPathKey), (0, _defineProperty2.default)(_classNames, "".concat(menuItemPrefixCls, "-disabled"), isOptionDisabled(disabled)), (0, _defineProperty2.default)(_classNames, "".concat(menuItemPrefixCls, "-loading"), isLoading), _classNames)),
  126. style: dropdownMenuColumnStyle,
  127. role: "menuitemcheckbox",
  128. title: title,
  129. "aria-checked": checked,
  130. "data-path-key": fullPathKey,
  131. onClick: function onClick() {
  132. triggerOpenPath();
  133. if (disableCheckbox) {
  134. return;
  135. }
  136. if (!multiple || isMergedLeaf) {
  137. triggerSelect();
  138. }
  139. },
  140. onDoubleClick: function onDoubleClick() {
  141. if (changeOnSelect) {
  142. onToggleOpen(false);
  143. }
  144. },
  145. onMouseEnter: function onMouseEnter() {
  146. if (hoverOpen) {
  147. triggerOpenPath();
  148. }
  149. },
  150. onMouseDown: function onMouseDown(e) {
  151. // Prevent selector from blurring
  152. e.preventDefault();
  153. }
  154. }, multiple && /*#__PURE__*/React.createElement(_Checkbox.default, {
  155. prefixCls: "".concat(prefixCls, "-checkbox"),
  156. checked: checked,
  157. halfChecked: halfChecked,
  158. disabled: isOptionDisabled(disabled) || disableCheckbox,
  159. disableCheckbox: disableCheckbox,
  160. onClick: function onClick(e) {
  161. if (disableCheckbox) {
  162. return;
  163. }
  164. e.stopPropagation();
  165. triggerSelect();
  166. }
  167. }), /*#__PURE__*/React.createElement("div", {
  168. className: "".concat(menuItemPrefixCls, "-content")
  169. }, optionRender ? optionRender(option) : label), !isLoading && expandIcon && !isMergedLeaf && /*#__PURE__*/React.createElement("div", {
  170. className: "".concat(menuItemPrefixCls, "-expand-icon")
  171. }, expandIcon), isLoading && loadingIcon && /*#__PURE__*/React.createElement("div", {
  172. className: "".concat(menuItemPrefixCls, "-loading-icon")
  173. }, loadingIcon));
  174. }));
  175. }