Column.js 6.5 KB

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