Panel.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  3. import classNames from 'classnames';
  4. import { useEvent, useMergedState } from 'rc-util';
  5. import * as React from 'react';
  6. import CascaderContext from "./context";
  7. import useMissingValues from "./hooks/useMissingValues";
  8. import useOptions from "./hooks/useOptions";
  9. import useSelect from "./hooks/useSelect";
  10. import useValues from "./hooks/useValues";
  11. import RawOptionList from "./OptionList/List";
  12. import { fillFieldNames, toRawValues } from "./utils/commonUtil";
  13. import { toPathOptions } from "./utils/treeUtil";
  14. function noop() {}
  15. export default function Panel(props) {
  16. var _classNames;
  17. var _ref = props,
  18. _ref$prefixCls = _ref.prefixCls,
  19. prefixCls = _ref$prefixCls === void 0 ? 'rc-cascader' : _ref$prefixCls,
  20. style = _ref.style,
  21. className = _ref.className,
  22. options = _ref.options,
  23. checkable = _ref.checkable,
  24. defaultValue = _ref.defaultValue,
  25. value = _ref.value,
  26. fieldNames = _ref.fieldNames,
  27. changeOnSelect = _ref.changeOnSelect,
  28. onChange = _ref.onChange,
  29. showCheckedStrategy = _ref.showCheckedStrategy,
  30. loadData = _ref.loadData,
  31. expandTrigger = _ref.expandTrigger,
  32. _ref$expandIcon = _ref.expandIcon,
  33. expandIcon = _ref$expandIcon === void 0 ? '>' : _ref$expandIcon,
  34. loadingIcon = _ref.loadingIcon,
  35. direction = _ref.direction,
  36. _ref$notFoundContent = _ref.notFoundContent,
  37. notFoundContent = _ref$notFoundContent === void 0 ? 'Not Found' : _ref$notFoundContent,
  38. disabled = _ref.disabled;
  39. // ======================== Multiple ========================
  40. var multiple = !!checkable;
  41. // ========================= Values =========================
  42. var _useMergedState = useMergedState(defaultValue, {
  43. value: value,
  44. postState: toRawValues
  45. }),
  46. _useMergedState2 = _slicedToArray(_useMergedState, 2),
  47. rawValues = _useMergedState2[0],
  48. setRawValues = _useMergedState2[1];
  49. // ========================= FieldNames =========================
  50. var mergedFieldNames = React.useMemo(function () {
  51. return fillFieldNames(fieldNames);
  52. }, /* eslint-disable react-hooks/exhaustive-deps */
  53. [JSON.stringify(fieldNames)]
  54. /* eslint-enable react-hooks/exhaustive-deps */);
  55. // =========================== Option ===========================
  56. var _useOptions = useOptions(mergedFieldNames, options),
  57. _useOptions2 = _slicedToArray(_useOptions, 3),
  58. mergedOptions = _useOptions2[0],
  59. getPathKeyEntities = _useOptions2[1],
  60. getValueByKeyPath = _useOptions2[2];
  61. // ========================= Values =========================
  62. var getMissingValues = useMissingValues(mergedOptions, mergedFieldNames);
  63. // Fill `rawValues` with checked conduction values
  64. var _useValues = useValues(multiple, rawValues, getPathKeyEntities, getValueByKeyPath, getMissingValues),
  65. _useValues2 = _slicedToArray(_useValues, 3),
  66. checkedValues = _useValues2[0],
  67. halfCheckedValues = _useValues2[1],
  68. missingCheckedValues = _useValues2[2];
  69. // =========================== Change ===========================
  70. var triggerChange = useEvent(function (nextValues) {
  71. setRawValues(nextValues);
  72. // Save perf if no need trigger event
  73. if (onChange) {
  74. var nextRawValues = toRawValues(nextValues);
  75. var valueOptions = nextRawValues.map(function (valueCells) {
  76. return toPathOptions(valueCells, mergedOptions, mergedFieldNames).map(function (valueOpt) {
  77. return valueOpt.option;
  78. });
  79. });
  80. var triggerValues = multiple ? nextRawValues : nextRawValues[0];
  81. var triggerOptions = multiple ? valueOptions : valueOptions[0];
  82. onChange(triggerValues, triggerOptions);
  83. }
  84. });
  85. // =========================== Select ===========================
  86. var handleSelection = useSelect(multiple, triggerChange, checkedValues, halfCheckedValues, missingCheckedValues, getPathKeyEntities, getValueByKeyPath, showCheckedStrategy);
  87. var onInternalSelect = useEvent(function (valuePath) {
  88. handleSelection(valuePath);
  89. });
  90. // ======================== Context =========================
  91. var cascaderContext = React.useMemo(function () {
  92. return {
  93. options: mergedOptions,
  94. fieldNames: mergedFieldNames,
  95. values: checkedValues,
  96. halfValues: halfCheckedValues,
  97. changeOnSelect: changeOnSelect,
  98. onSelect: onInternalSelect,
  99. checkable: checkable,
  100. searchOptions: [],
  101. dropdownPrefixCls: undefined,
  102. loadData: loadData,
  103. expandTrigger: expandTrigger,
  104. expandIcon: expandIcon,
  105. loadingIcon: loadingIcon,
  106. dropdownMenuColumnStyle: undefined
  107. };
  108. }, [mergedOptions, mergedFieldNames, checkedValues, halfCheckedValues, changeOnSelect, onInternalSelect, checkable, loadData, expandTrigger, expandIcon, loadingIcon]);
  109. // ========================= Render =========================
  110. var panelPrefixCls = "".concat(prefixCls, "-panel");
  111. var isEmpty = !mergedOptions.length;
  112. return /*#__PURE__*/React.createElement(CascaderContext.Provider, {
  113. value: cascaderContext
  114. }, /*#__PURE__*/React.createElement("div", {
  115. className: classNames(panelPrefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(panelPrefixCls, "-rtl"), direction === 'rtl'), _defineProperty(_classNames, "".concat(panelPrefixCls, "-empty"), isEmpty), _classNames), className),
  116. style: style
  117. }, isEmpty ? notFoundContent : /*#__PURE__*/React.createElement(RawOptionList, {
  118. prefixCls: prefixCls,
  119. searchValue: "",
  120. multiple: multiple,
  121. toggleOpen: noop,
  122. open: true,
  123. direction: direction,
  124. disabled: disabled
  125. })));
  126. }