@rc-component/cascader 1.0.0

package/es/Cascader.js

@@ -0,0 +1,230 @@
+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); }
+import { BaseSelect } from '@rc-component/select';
+import useId from "@rc-component/select/es/hooks/useId";
+import useEvent from "@rc-component/util/es/hooks/useEvent";
+import useMergedState from "@rc-component/util/es/hooks/useMergedState";
+import * as React from 'react';
+import CascaderContext from "./context";
+import useDisplayValues from "./hooks/useDisplayValues";
+import useMissingValues from "./hooks/useMissingValues";
+import useOptions from "./hooks/useOptions";
+import useSearchConfig from "./hooks/useSearchConfig";
+import useSearchOptions from "./hooks/useSearchOptions";
+import useSelect from "./hooks/useSelect";
+import useValues from "./hooks/useValues";
+import OptionList from "./OptionList";
+import Panel from "./Panel";
+import { fillFieldNames, SHOW_CHILD, SHOW_PARENT, toPathKeys, toRawValues } from "./utils/commonUtil";
+import { formatStrategyValues, toPathOptions } from "./utils/treeUtil";
+import warningProps, { warningNullOptions } from "./utils/warningPropsUtil";
+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 = SHOW_PARENT,
+    optionRender,
+    ...restProps
+  } = props;
+  const mergedId = useId(id);
+  const multiple = !!checkable;
+
+  // =========================== Values ===========================
+  const [rawValues, setRawValues] = useMergedState(defaultValue, {
+    value,
+    postState: toRawValues
+  });
+
+  // ========================= FieldNames =========================
+  const mergedFieldNames = React.useMemo(() => fillFieldNames(fieldNames), /* eslint-disable react-hooks/exhaustive-deps */
+  [JSON.stringify(fieldNames)]
+  /* eslint-enable react-hooks/exhaustive-deps */);
+
+  // =========================== Option ===========================
+  const [mergedOptions, getPathKeyEntities, getValueByKeyPath] = useOptions(mergedFieldNames, options);
+
+  // =========================== Search ===========================
+  const [mergedSearchValue, setSearchValue] = useMergedState('', {
+    value: searchValue,
+    postState: search => search || ''
+  });
+  const onInternalSearch = (searchText, info) => {
+    setSearchValue(searchText);
+    if (info.source !== 'blur' && onSearch) {
+      onSearch(searchText);
+    }
+  };
+  const [mergedShowSearch, searchConfig] = useSearchConfig(showSearch);
+  const searchOptions = useSearchOptions(mergedSearchValue, mergedOptions, mergedFieldNames, dropdownPrefixCls || prefixCls, searchConfig, changeOnSelect || multiple);
+
+  // =========================== Values ===========================
+  const getMissingValues = useMissingValues(mergedOptions, mergedFieldNames);
+
+  // Fill `rawValues` with checked conduction values
+  const [checkedValues, halfCheckedValues, missingCheckedValues] = useValues(multiple, rawValues, getPathKeyEntities, getValueByKeyPath, getMissingValues);
+  const deDuplicatedValues = React.useMemo(() => {
+    const checkedKeys = toPathKeys(checkedValues);
+    const deduplicateKeys = formatStrategyValues(checkedKeys, getPathKeyEntities, showCheckedStrategy);
+    return [...missingCheckedValues, ...getValueByKeyPath(deduplicateKeys)];
+  }, [checkedValues, getPathKeyEntities, getValueByKeyPath, missingCheckedValues, showCheckedStrategy]);
+  const displayValues = useDisplayValues(deDuplicatedValues, mergedOptions, mergedFieldNames, multiple, displayRender);
+
+  // =========================== Change ===========================
+  const triggerChange = useEvent(nextValues => {
+    setRawValues(nextValues);
+
+    // Save perf if no need trigger event
+    if (onChange) {
+      const nextRawValues = toRawValues(nextValues);
+      const valueOptions = nextRawValues.map(valueCells => 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 = useSelect(multiple, triggerChange, checkedValues, halfCheckedValues, missingCheckedValues, getPathKeyEntities, getValueByKeyPath, showCheckedStrategy);
+  const onInternalSelect = useEvent(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') {
+    warningProps(props);
+    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(CascaderContext.Provider, {
+    value: cascaderContext
+  }, /*#__PURE__*/React.createElement(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,
+    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 = SHOW_PARENT;
+Cascader.SHOW_CHILD = SHOW_CHILD;
+Cascader.Panel = Panel;
+export default Cascader;

package/es/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/es/OptionList/CacheContent.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+const CacheContent = /*#__PURE__*/React.memo(({
+  children
+}) => children, (_, next) => !next.open);
+if (process.env.NODE_ENV !== 'production') {
+  CacheContent.displayName = 'CacheContent';
+}
+export default CacheContent;

package/es/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/es/OptionList/Checkbox.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import CascaderContext from "../context";
+export default function Checkbox({
+  prefixCls,
+  checked,
+  halfChecked,
+  disabled,
+  onClick,
+  disableCheckbox
+}) {
+  const {
+    checkable
+  } = React.useContext(CascaderContext);
+  const customCheckbox = typeof checkable !== 'boolean' ? checkable : null;
+  return /*#__PURE__*/React.createElement("span", {
+    className: classNames(`${prefixCls}`, {
+      [`${prefixCls}-checked`]: checked,
+      [`${prefixCls}-indeterminate`]: !checked && halfChecked,
+      [`${prefixCls}-disabled`]: disabled || disableCheckbox
+    }),
+    onClick: onClick
+  }, customCheckbox);
+}

package/es/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/es/OptionList/Column.js

@@ -0,0 +1,175 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import CascaderContext from "../context";
+import { SEARCH_MARK } from "../hooks/useSearchOptions";
+import { isLeaf, toPathKey } from "../utils/commonUtil";
+import Checkbox from "./Checkbox";
+export const FIX_LABEL = '__cascader_fix_label__';
+export default 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(CascaderContext);
+  const hoverOpen = expandTrigger === 'hover';
+  const isOptionDisabled = disabled => propsDisabled || disabled;
+
+  // ============================ Option ============================
+  const optionInfoList = React.useMemo(() => options.map(option => {
+    const {
+      disabled,
+      disableCheckbox
+    } = option;
+    const searchOptions = option[SEARCH_MARK];
+    const label = option[FIX_LABEL] ?? option[fieldNames.label];
+    const value = option[fieldNames.value];
+    const isMergedLeaf = 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 = 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: classNames(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, {
+      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/es/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;