Column.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
  3. import { createVNode as _createVNode } from "vue";
  4. import { isLeaf, toPathKey } from '../utils/commonUtil';
  5. import Checkbox from './Checkbox';
  6. import { SEARCH_MARK } from '../hooks/useSearchOptions';
  7. import { useInjectCascader } from '../context';
  8. export var FIX_LABEL = '__cascader_fix_label__';
  9. export default function Column(_ref) {
  10. var _expandIconRef$value, _customSlots$value$ex, _customSlots$value, _loadingIconRef$value, _customSlots$value$lo, _customSlots$value2;
  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. var menuPrefixCls = "".concat(prefixCls, "-menu");
  24. var menuItemPrefixCls = "".concat(prefixCls, "-menu-item");
  25. var _useInjectCascader = useInjectCascader(),
  26. fieldNames = _useInjectCascader.fieldNames,
  27. changeOnSelect = _useInjectCascader.changeOnSelect,
  28. expandTrigger = _useInjectCascader.expandTrigger,
  29. expandIconRef = _useInjectCascader.expandIcon,
  30. loadingIconRef = _useInjectCascader.loadingIcon,
  31. dropdownMenuColumnStyle = _useInjectCascader.dropdownMenuColumnStyle,
  32. customSlots = _useInjectCascader.customSlots;
  33. var expandIcon = (_expandIconRef$value = expandIconRef.value) !== null && _expandIconRef$value !== void 0 ? _expandIconRef$value : (_customSlots$value$ex = (_customSlots$value = customSlots.value).expandIcon) === null || _customSlots$value$ex === void 0 ? void 0 : _customSlots$value$ex.call(_customSlots$value);
  34. var loadingIcon = (_loadingIconRef$value = loadingIconRef.value) !== null && _loadingIconRef$value !== void 0 ? _loadingIconRef$value : (_customSlots$value$lo = (_customSlots$value2 = customSlots.value).loadingIcon) === null || _customSlots$value$lo === void 0 ? void 0 : _customSlots$value$lo.call(_customSlots$value2);
  35. var hoverOpen = expandTrigger.value === 'hover';
  36. // ============================ Render ============================
  37. return _createVNode("ul", {
  38. "class": menuPrefixCls,
  39. "role": "menu"
  40. }, [options.map(function (option) {
  41. var _option$FIX_LABEL, _ref2;
  42. var disabled = option.disabled;
  43. var searchOptions = option[SEARCH_MARK];
  44. var label = (_option$FIX_LABEL = option[FIX_LABEL]) !== null && _option$FIX_LABEL !== void 0 ? _option$FIX_LABEL : option[fieldNames.value.label];
  45. var value = option[fieldNames.value.value];
  46. var isMergedLeaf = isLeaf(option, fieldNames.value);
  47. // Get real value of option. Search option is different way.
  48. var fullPath = searchOptions ? searchOptions.map(function (opt) {
  49. return opt[fieldNames.value.value];
  50. }) : [].concat(_toConsumableArray(prevValuePath), [value]);
  51. var fullPathKey = toPathKey(fullPath);
  52. var isLoading = loadingKeys.includes(fullPathKey);
  53. // >>>>> checked
  54. var checked = checkedSet.has(fullPathKey);
  55. // >>>>> halfChecked
  56. var halfChecked = halfCheckedSet.has(fullPathKey);
  57. // >>>>> Open
  58. var triggerOpenPath = function triggerOpenPath() {
  59. if (!disabled && (!hoverOpen || !isMergedLeaf)) {
  60. onActive(fullPath);
  61. }
  62. };
  63. // >>>>> Selection
  64. var triggerSelect = function triggerSelect() {
  65. if (isSelectable(option)) {
  66. onSelect(fullPath, isMergedLeaf);
  67. }
  68. };
  69. // >>>>> Title
  70. var title;
  71. if (typeof option.title === 'string') {
  72. title = option.title;
  73. } else if (typeof label === 'string') {
  74. title = label;
  75. }
  76. // >>>>> Render
  77. return _createVNode("li", {
  78. "key": fullPathKey,
  79. "class": [menuItemPrefixCls, (_ref2 = {}, _defineProperty(_ref2, "".concat(menuItemPrefixCls, "-expand"), !isMergedLeaf), _defineProperty(_ref2, "".concat(menuItemPrefixCls, "-active"), activeValue === value), _defineProperty(_ref2, "".concat(menuItemPrefixCls, "-disabled"), disabled), _defineProperty(_ref2, "".concat(menuItemPrefixCls, "-loading"), isLoading), _ref2)],
  80. "style": dropdownMenuColumnStyle.value,
  81. "role": "menuitemcheckbox",
  82. "title": title,
  83. "aria-checked": checked,
  84. "data-path-key": fullPathKey,
  85. "onClick": function onClick() {
  86. triggerOpenPath();
  87. if (!multiple || isMergedLeaf) {
  88. triggerSelect();
  89. }
  90. },
  91. "onDblclick": function onDblclick() {
  92. if (changeOnSelect.value) {
  93. onToggleOpen(false);
  94. }
  95. },
  96. "onMouseenter": function onMouseenter() {
  97. if (hoverOpen) {
  98. triggerOpenPath();
  99. }
  100. },
  101. "onMousedown": function onMousedown(e) {
  102. // Prevent selector from blurring
  103. e.preventDefault();
  104. }
  105. }, [multiple && _createVNode(Checkbox, {
  106. "prefixCls": "".concat(prefixCls, "-checkbox"),
  107. "checked": checked,
  108. "halfChecked": halfChecked,
  109. "disabled": disabled,
  110. "onClick": function onClick(e) {
  111. e.stopPropagation();
  112. triggerSelect();
  113. }
  114. }, null), _createVNode("div", {
  115. "class": "".concat(menuItemPrefixCls, "-content")
  116. }, [label]), !isLoading && expandIcon && !isMergedLeaf && _createVNode("div", {
  117. "class": "".concat(menuItemPrefixCls, "-expand-icon")
  118. }, [expandIcon]), isLoading && loadingIcon && _createVNode("div", {
  119. "class": "".concat(menuItemPrefixCls, "-loading-icon")
  120. }, [loadingIcon])]);
  121. })]);
  122. }
  123. Column.props = ['prefixCls', 'multiple', 'options', 'activeValue', 'prevValuePath', 'onToggleOpen', 'onSelect', 'onActive', 'checkedSet', 'halfCheckedSet', 'loadingKeys', 'isSelectable'];
  124. Column.displayName = 'Column';
  125. Column.inheritAttrs = false;