@rc-component/cascader 1.0.0

package/lib/Cascader.js

@@ -0,0 +1,239 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _select = require("@rc-component/select");
+var _useId = _interopRequireDefault(require("@rc-component/select/lib/hooks/useId"));
+var _useEvent = _interopRequireDefault(require("@rc-component/util/lib/hooks/useEvent"));
+var _useMergedState = _interopRequireDefault(require("@rc-component/util/lib/hooks/useMergedState"));
+var React = _interopRequireWildcard(require("react"));
+var _context = _interopRequireDefault(require("./context"));
+var _useDisplayValues = _interopRequireDefault(require("./hooks/useDisplayValues"));
+var _useMissingValues = _interopRequireDefault(require("./hooks/useMissingValues"));
+var _useOptions = _interopRequireDefault(require("./hooks/useOptions"));
+var _useSearchConfig = _interopRequireDefault(require("./hooks/useSearchConfig"));
+var _useSearchOptions = _interopRequireDefault(require("./hooks/useSearchOptions"));
+var _useSelect = _interopRequireDefault(require("./hooks/useSelect"));
+var _useValues = _interopRequireDefault(require("./hooks/useValues"));
+var _OptionList = _interopRequireDefault(require("./OptionList"));
+var _Panel = _interopRequireDefault(require("./Panel"));
+var _commonUtil = require("./utils/commonUtil");
+var _treeUtil = require("./utils/treeUtil");
+var _warningPropsUtil = _interopRequireWildcard(require("./utils/warningPropsUtil"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    // MISC
+    id,
+    prefixCls = 'rc-cascader',
+    fieldNames,
+    // Value
+    defaultValue,
+    value,
+    changeOnSelect,
+    onChange,
+    displayRender,
+    checkable,
+    // Search
+    autoClearSearchValue = true,
+    searchValue,
+    onSearch,
+    showSearch,
+    // Trigger
+    expandTrigger,
+    // Options
+    options,
+    dropdownPrefixCls,
+    loadData,
+    // Open
+    popupVisible,
+    open,
+    popupClassName,
+    dropdownMenuColumnStyle,
+    popupStyle: customPopupStyle,
+    popupPlacement,
+    placement,
+    onPopupVisibleChange,
+    // Icon
+    expandIcon = '>',
+    loadingIcon,
+    // Children
+    children,
+    popupMatchSelectWidth = false,
+    showCheckedStrategy = _commonUtil.SHOW_PARENT,
+    optionRender,
+    ...restProps
+  } = props;
+  const mergedId = (0, _useId.default)(id);
+  const multiple = !!checkable;
+
+  // =========================== Values ===========================
+  const [rawValues, setRawValues] = (0, _useMergedState.default)(defaultValue, {
+    value,
+    postState: _commonUtil.toRawValues
+  });
+
+  // ========================= FieldNames =========================
+  const mergedFieldNames = React.useMemo(() => (0, _commonUtil.fillFieldNames)(fieldNames), /* eslint-disable react-hooks/exhaustive-deps */
+  [JSON.stringify(fieldNames)]
+  /* eslint-enable react-hooks/exhaustive-deps */);
+
+  // =========================== Option ===========================
+  const [mergedOptions, getPathKeyEntities, getValueByKeyPath] = (0, _useOptions.default)(mergedFieldNames, options);
+
+  // =========================== Search ===========================
+  const [mergedSearchValue, setSearchValue] = (0, _useMergedState.default)('', {
+    value: searchValue,
+    postState: search => search || ''
+  });
+  const onInternalSearch = (searchText, info) => {
+    setSearchValue(searchText);
+    if (info.source !== 'blur' && onSearch) {
+      onSearch(searchText);
+    }
+  };
+  const [mergedShowSearch, searchConfig] = (0, _useSearchConfig.default)(showSearch);
+  const searchOptions = (0, _useSearchOptions.default)(mergedSearchValue, mergedOptions, mergedFieldNames, dropdownPrefixCls || prefixCls, searchConfig, changeOnSelect || multiple);
+
+  // =========================== Values ===========================
+  const getMissingValues = (0, _useMissingValues.default)(mergedOptions, mergedFieldNames);
+
+  // Fill `rawValues` with checked conduction values
+  const [checkedValues, halfCheckedValues, missingCheckedValues] = (0, _useValues.default)(multiple, rawValues, getPathKeyEntities, getValueByKeyPath, getMissingValues);
+  const deDuplicatedValues = React.useMemo(() => {
+    const checkedKeys = (0, _commonUtil.toPathKeys)(checkedValues);
+    const deduplicateKeys = (0, _treeUtil.formatStrategyValues)(checkedKeys, getPathKeyEntities, showCheckedStrategy);
+    return [...missingCheckedValues, ...getValueByKeyPath(deduplicateKeys)];
+  }, [checkedValues, getPathKeyEntities, getValueByKeyPath, missingCheckedValues, showCheckedStrategy]);
+  const displayValues = (0, _useDisplayValues.default)(deDuplicatedValues, mergedOptions, mergedFieldNames, multiple, displayRender);
+
+  // =========================== Change ===========================
+  const triggerChange = (0, _useEvent.default)(nextValues => {
+    setRawValues(nextValues);
+
+    // Save perf if no need trigger event
+    if (onChange) {
+      const nextRawValues = (0, _commonUtil.toRawValues)(nextValues);
+      const valueOptions = nextRawValues.map(valueCells => (0, _treeUtil.toPathOptions)(valueCells, mergedOptions, mergedFieldNames).map(valueOpt => valueOpt.option));
+      const triggerValues = multiple ? nextRawValues : nextRawValues[0];
+      const triggerOptions = multiple ? valueOptions : valueOptions[0];
+      onChange(triggerValues, triggerOptions);
+    }
+  });
+
+  // =========================== Select ===========================
+  const handleSelection = (0, _useSelect.default)(multiple, triggerChange, checkedValues, halfCheckedValues, missingCheckedValues, getPathKeyEntities, getValueByKeyPath, showCheckedStrategy);
+  const onInternalSelect = (0, _useEvent.default)(valuePath => {
+    if (!multiple || autoClearSearchValue) {
+      setSearchValue('');
+    }
+    handleSelection(valuePath);
+  });
+
+  // Display Value change logic
+  const onDisplayValuesChange = (_, info) => {
+    if (info.type === 'clear') {
+      triggerChange([]);
+      return;
+    }
+
+    // Cascader do not support `add` type. Only support `remove`
+    const {
+      valueCells
+    } = info.values[0];
+    onInternalSelect(valueCells);
+  };
+
+  // ============================ Open ============================
+  const mergedOpen = open !== undefined ? open : popupVisible;
+  const mergedPlacement = placement || popupPlacement;
+  const onInternalPopupVisibleChange = nextVisible => {
+    onPopupVisibleChange?.(nextVisible);
+  };
+
+  // ========================== Warning ===========================
+  if (process.env.NODE_ENV !== 'production') {
+    (0, _warningPropsUtil.default)(props);
+    (0, _warningPropsUtil.warningNullOptions)(mergedOptions, mergedFieldNames);
+  }
+
+  // ========================== Context ===========================
+  const cascaderContext = React.useMemo(() => ({
+    options: mergedOptions,
+    fieldNames: mergedFieldNames,
+    values: checkedValues,
+    halfValues: halfCheckedValues,
+    changeOnSelect,
+    onSelect: onInternalSelect,
+    checkable,
+    searchOptions,
+    dropdownPrefixCls,
+    loadData,
+    expandTrigger,
+    expandIcon,
+    loadingIcon,
+    dropdownMenuColumnStyle,
+    optionRender
+  }), [mergedOptions, mergedFieldNames, checkedValues, halfCheckedValues, changeOnSelect, onInternalSelect, checkable, searchOptions, dropdownPrefixCls, loadData, expandTrigger, expandIcon, loadingIcon, dropdownMenuColumnStyle, optionRender]);
+
+  // ==============================================================
+  // ==                          Render                          ==
+  // ==============================================================
+  const emptyOptions = !(mergedSearchValue ? searchOptions : mergedOptions).length;
+  const popupStyle =
+  // Search to match width
+  mergedSearchValue && searchConfig.matchInputWidth ||
+  // Empty keep the width
+  emptyOptions ? {} : {
+    minWidth: 'auto'
+  };
+  return /*#__PURE__*/React.createElement(_context.default.Provider, {
+    value: cascaderContext
+  }, /*#__PURE__*/React.createElement(_select.BaseSelect, _extends({}, restProps, {
+    // MISC
+    ref: ref,
+    id: mergedId,
+    prefixCls: prefixCls,
+    autoClearSearchValue: autoClearSearchValue,
+    popupMatchSelectWidth: popupMatchSelectWidth,
+    popupStyle: {
+      ...popupStyle,
+      ...customPopupStyle
+    }
+    // Value
+    ,
+    displayValues: displayValues,
+    onDisplayValuesChange: onDisplayValuesChange,
+    mode: multiple ? 'multiple' : undefined
+    // Search
+    ,
+    searchValue: mergedSearchValue,
+    onSearch: onInternalSearch,
+    showSearch: mergedShowSearch
+    // Options
+    ,
+    OptionList: _OptionList.default,
+    emptyOptions: emptyOptions
+    // Open
+    ,
+    open: mergedOpen,
+    popupClassName: popupClassName,
+    placement: mergedPlacement,
+    onPopupVisibleChange: onInternalPopupVisibleChange
+    // Children
+    ,
+    getRawInputElement: () => children
+  })));
+});
+if (process.env.NODE_ENV !== 'production') {
+  Cascader.displayName = 'Cascader';
+}
+Cascader.SHOW_PARENT = _commonUtil.SHOW_PARENT;
+Cascader.SHOW_CHILD = _commonUtil.SHOW_CHILD;
+Cascader.Panel = _Panel.default;
+var _default = exports.default = Cascader;

package/lib/OptionList/CacheContent.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface CacheContentProps {
+    children?: React.ReactNode;
+    open?: boolean;
+}
+declare const CacheContent: React.MemoExoticComponent<({ children }: CacheContentProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>>;
+export default CacheContent;

package/lib/OptionList/CacheContent.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const CacheContent = /*#__PURE__*/React.memo(({
+  children
+}) => children, (_, next) => !next.open);
+if (process.env.NODE_ENV !== 'production') {
+  CacheContent.displayName = 'CacheContent';
+}
+var _default = exports.default = CacheContent;

package/lib/OptionList/Checkbox.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface CheckboxProps {
+    prefixCls: string;
+    checked?: boolean;
+    halfChecked?: boolean;
+    disabled?: boolean;
+    onClick?: React.MouseEventHandler;
+    disableCheckbox?: boolean;
+}
+export default function Checkbox({ prefixCls, checked, halfChecked, disabled, onClick, disableCheckbox, }: CheckboxProps): React.JSX.Element;

package/lib/OptionList/Checkbox.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Checkbox;
+var React = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _context = _interopRequireDefault(require("../context"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function Checkbox({
+  prefixCls,
+  checked,
+  halfChecked,
+  disabled,
+  onClick,
+  disableCheckbox
+}) {
+  const {
+    checkable
+  } = React.useContext(_context.default);
+  const customCheckbox = typeof checkable !== 'boolean' ? checkable : null;
+  return /*#__PURE__*/React.createElement("span", {
+    className: (0, _classnames.default)(`${prefixCls}`, {
+      [`${prefixCls}-checked`]: checked,
+      [`${prefixCls}-indeterminate`]: !checked && halfChecked,
+      [`${prefixCls}-disabled`]: disabled || disableCheckbox
+    }),
+    onClick: onClick
+  }, customCheckbox);
+}

package/lib/OptionList/Column.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { DefaultOptionType, SingleValueType } from '../Cascader';
+export declare const FIX_LABEL = "__cascader_fix_label__";
+export interface ColumnProps<OptionType extends DefaultOptionType = DefaultOptionType> {
+    prefixCls: string;
+    multiple?: boolean;
+    options: OptionType[];
+    /** Current Column opened item key */
+    activeValue?: React.Key;
+    /** The value path before current column */
+    prevValuePath: React.Key[];
+    onToggleOpen: (open: boolean) => void;
+    onSelect: (valuePath: SingleValueType, leaf: boolean) => void;
+    onActive: (valuePath: SingleValueType) => void;
+    checkedSet: Set<React.Key>;
+    halfCheckedSet: Set<React.Key>;
+    loadingKeys: React.Key[];
+    isSelectable: (option: DefaultOptionType) => boolean;
+    disabled?: boolean;
+}
+export default function Column<OptionType extends DefaultOptionType = DefaultOptionType>({ prefixCls, multiple, options, activeValue, prevValuePath, onToggleOpen, onSelect, onActive, checkedSet, halfCheckedSet, loadingKeys, isSelectable, disabled: propsDisabled, }: ColumnProps<OptionType>): React.JSX.Element;

package/lib/OptionList/Column.js

@@ -0,0 +1,185 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FIX_LABEL = void 0;
+exports.default = Column;
+var _classnames = _interopRequireDefault(require("classnames"));
+var React = _interopRequireWildcard(require("react"));
+var _context = _interopRequireDefault(require("../context"));
+var _useSearchOptions = require("../hooks/useSearchOptions");
+var _commonUtil = require("../utils/commonUtil");
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const FIX_LABEL = exports.FIX_LABEL = '__cascader_fix_label__';
+function Column({
+  prefixCls,
+  multiple,
+  options,
+  activeValue,
+  prevValuePath,
+  onToggleOpen,
+  onSelect,
+  onActive,
+  checkedSet,
+  halfCheckedSet,
+  loadingKeys,
+  isSelectable,
+  disabled: propsDisabled
+}) {
+  const menuPrefixCls = `${prefixCls}-menu`;
+  const menuItemPrefixCls = `${prefixCls}-menu-item`;
+  const {
+    fieldNames,
+    changeOnSelect,
+    expandTrigger,
+    expandIcon,
+    loadingIcon,
+    dropdownMenuColumnStyle,
+    optionRender
+  } = React.useContext(_context.default);
+  const hoverOpen = expandTrigger === 'hover';
+  const isOptionDisabled = disabled => propsDisabled || disabled;
+
+  // ============================ Option ============================
+  const optionInfoList = React.useMemo(() => options.map(option => {
+    const {
+      disabled,
+      disableCheckbox
+    } = option;
+    const searchOptions = option[_useSearchOptions.SEARCH_MARK];
+    const label = option[FIX_LABEL] ?? option[fieldNames.label];
+    const value = option[fieldNames.value];
+    const isMergedLeaf = (0, _commonUtil.isLeaf)(option, fieldNames);
+
+    // Get real value of option. Search option is different way.
+    const fullPath = searchOptions ? searchOptions.map(opt => opt[fieldNames.value]) : [...prevValuePath, value];
+    const fullPathKey = (0, _commonUtil.toPathKey)(fullPath);
+    const isLoading = loadingKeys.includes(fullPathKey);
+
+    // >>>>> checked
+    const checked = checkedSet.has(fullPathKey);
+
+    // >>>>> halfChecked
+    const halfChecked = halfCheckedSet.has(fullPathKey);
+    return {
+      disabled,
+      label,
+      value,
+      isLeaf: isMergedLeaf,
+      isLoading,
+      checked,
+      halfChecked,
+      option,
+      disableCheckbox,
+      fullPath,
+      fullPathKey
+    };
+  }), [options, checkedSet, fieldNames, halfCheckedSet, loadingKeys, prevValuePath]);
+
+  // ============================ Render ============================
+  return /*#__PURE__*/React.createElement("ul", {
+    className: menuPrefixCls,
+    role: "menu"
+  }, optionInfoList.map(({
+    disabled,
+    label,
+    value,
+    isLeaf: isMergedLeaf,
+    isLoading,
+    checked,
+    halfChecked,
+    option,
+    fullPath,
+    fullPathKey,
+    disableCheckbox
+  }) => {
+    // >>>>> Open
+    const triggerOpenPath = () => {
+      if (isOptionDisabled(disabled)) {
+        return;
+      }
+      const nextValueCells = [...fullPath];
+      if (hoverOpen && isMergedLeaf) {
+        nextValueCells.pop();
+      }
+      onActive(nextValueCells);
+    };
+
+    // >>>>> Selection
+    const triggerSelect = () => {
+      if (isSelectable(option) && !isOptionDisabled(disabled)) {
+        onSelect(fullPath, isMergedLeaf);
+      }
+    };
+
+    // >>>>> Title
+    let title;
+    if (typeof option.title === 'string') {
+      title = option.title;
+    } else if (typeof label === 'string') {
+      title = label;
+    }
+
+    // >>>>> Render
+    return /*#__PURE__*/React.createElement("li", {
+      key: fullPathKey,
+      className: (0, _classnames.default)(menuItemPrefixCls, {
+        [`${menuItemPrefixCls}-expand`]: !isMergedLeaf,
+        [`${menuItemPrefixCls}-active`]: activeValue === value || activeValue === fullPathKey,
+        [`${menuItemPrefixCls}-disabled`]: isOptionDisabled(disabled),
+        [`${menuItemPrefixCls}-loading`]: isLoading
+      }),
+      style: dropdownMenuColumnStyle,
+      role: "menuitemcheckbox",
+      title: title,
+      "aria-checked": checked,
+      "data-path-key": fullPathKey,
+      onClick: () => {
+        triggerOpenPath();
+        if (disableCheckbox) {
+          return;
+        }
+        if (!multiple || isMergedLeaf) {
+          triggerSelect();
+        }
+      },
+      onDoubleClick: () => {
+        if (changeOnSelect) {
+          onToggleOpen(false);
+        }
+      },
+      onMouseEnter: () => {
+        if (hoverOpen) {
+          triggerOpenPath();
+        }
+      },
+      onMouseDown: e => {
+        // Prevent selector from blurring
+        e.preventDefault();
+      }
+    }, multiple && /*#__PURE__*/React.createElement(_Checkbox.default, {
+      prefixCls: `${prefixCls}-checkbox`,
+      checked: checked,
+      halfChecked: halfChecked,
+      disabled: isOptionDisabled(disabled) || disableCheckbox,
+      disableCheckbox: disableCheckbox,
+      onClick: e => {
+        if (disableCheckbox) {
+          return;
+        }
+        e.stopPropagation();
+        triggerSelect();
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: `${menuItemPrefixCls}-content`
+    }, optionRender ? optionRender(option) : label), !isLoading && expandIcon && !isMergedLeaf && /*#__PURE__*/React.createElement("div", {
+      className: `${menuItemPrefixCls}-expand-icon`
+    }, expandIcon), isLoading && loadingIcon && /*#__PURE__*/React.createElement("div", {
+      className: `${menuItemPrefixCls}-loading-icon`
+    }, loadingIcon));
+  }));
+}

package/lib/OptionList/List.d.ts

@@ -0,0 +1,6 @@
+import type { useBaseProps } from '@rc-component/select';
+import type { RefOptionListProps } from '@rc-component/select/lib/OptionList';
+import * as React from 'react';
+export type RawOptionListProps = Pick<ReturnType<typeof useBaseProps>, 'prefixCls' | 'multiple' | 'searchValue' | 'toggleOpen' | 'notFoundContent' | 'direction' | 'open' | 'disabled'>;
+declare const RawOptionList: React.ForwardRefExoticComponent<RawOptionListProps & React.RefAttributes<RefOptionListProps>>;
+export default RawOptionList;