Column.js 4.5 KB

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