Panel.js 6.3 KB

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