taro-uno-ui 0.9.0-beta

package/src/components/form/Cascader/hooks/useCascaderOptions.ts

@@ -0,0 +1,109 @@
+import { useMemo, useCallback } from 'react';
+import type { CascaderOption, CascaderValue, CascaderProps } from '../Cascader.types';
+import { useCascaderFieldNames } from './useCascaderFieldNames';
+
+/**
+ * 级联选择器选项处理Hook
+ * 提供高性能的选项查找和路径处理
+ */
+export function useCascaderOptions(
+  options: CascaderOption[],
+  fieldNames?: CascaderProps['fieldNames']
+) {
+  const fields = useCascaderFieldNames(fieldNames);
+
+  // 查找选项路径 - 使用深度优先搜索优化
+  const findOptionPath = useCallback((targetValue: CascaderValue): CascaderOption[] => {
+    if (!targetValue || targetValue.length === 0) return [];
+
+    const findPath = (
+      currentOptions: CascaderOption[],
+      valuePath: CascaderValue,
+      currentPath: CascaderOption[] = []
+    ): CascaderOption[] | null => {
+      for (const option of currentOptions) {
+        const currentPathOption = [...currentPath, option];
+        
+        if (option[fields.value as keyof typeof option] === valuePath[0]) {
+          if (valuePath.length === 1) {
+            return currentPathOption;
+          }
+          
+          const children = option[fields.children as keyof typeof option] as CascaderOption[] | undefined;
+          if (children) {
+            const found = findPath(children, valuePath.slice(1), currentPathOption);
+            if (found) return found;
+          }
+        }
+      }
+      return null;
+    };
+
+    return findPath(options, targetValue) || [];
+  }, [options, fields]);
+
+  // 获取选项值
+  const getOptionValue = useCallback((option: CascaderOption): CascaderValue => {
+    const value = option[fields.value as keyof typeof option] as string | number;
+    return Array.isArray(value) ? value : [value];
+  }, [fields]);
+
+  // 获取选项标签
+  const getOptionLabel = useCallback((option: CascaderOption) => {
+    return option[fields.label as keyof typeof option];
+  }, [fields]);
+
+  // 检查选项是否有子项
+  const hasChildren = useCallback((option: CascaderOption) => {
+    const children = option[fields.children as keyof typeof option] as CascaderOption[] | undefined;
+    return children && children.length > 0;
+  }, [fields]);
+
+  // 检查选项是否禁用
+  const isOptionDisabled = useCallback((option: CascaderOption) => {
+    return !!option[fields.disabled as keyof typeof option];
+  }, [fields]);
+
+  // 检查选项是否为叶子节点
+  const isOptionLeaf = useCallback((option: CascaderOption) => {
+    return !!option[fields.isLeaf as keyof typeof option];
+  }, [fields]);
+
+  // 展平选项用于搜索
+  const flattenOptions = useMemo(() => {
+    const flatten = (currentOptions: CascaderOption[]): CascaderOption[] => {
+      return currentOptions.reduce<CascaderOption[]>((acc, option) => {
+        acc.push(option);
+        const children = option[fields.children as keyof typeof option] as CascaderOption[] | undefined;
+        if (children) {
+          acc.push(...flatten(children));
+        }
+        return acc;
+      }, []);
+    };
+
+    return flatten(options);
+  }, [options, fields]);
+
+  // 过滤选项
+  const filterOptions = useCallback((searchTerm: string): CascaderOption[] => {
+    if (!searchTerm.trim()) return [];
+
+    const term = searchTerm.toLowerCase();
+    return flattenOptions.filter(option => {
+      const label = String(getOptionLabel(option)).toLowerCase();
+      return label.includes(term);
+    });
+  }, [flattenOptions, getOptionLabel]);
+
+  return {
+    findOptionPath,
+    getOptionValue,
+    getOptionLabel,
+    hasChildren,
+    isOptionDisabled,
+    isOptionLeaf,
+    flattenOptions,
+    filterOptions,
+  };
+}

package/src/components/form/Cascader/hooks/useCascaderState.ts

@@ -0,0 +1,133 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import type { CascaderValue, CascaderOption, CascaderProps } from '../Cascader.types';
+import { useCascaderOptions } from './useCascaderOptions';
+
+/**
+ * 级联选择器状态管理Hook
+ * 提供统一的状态管理逻辑
+ */
+export function useCascaderState(
+  options: CascaderOption[],
+  props: CascaderProps
+) {
+  const {
+    value: controlledValue,
+    defaultValue = null,
+    defaultOpen = false,
+    open: controlledOpen,
+    fieldNames,
+    onChange,
+    onMultipleChange,
+    onDropdownVisibleChange,
+  } = props;
+
+  const { findOptionPath } = useCascaderOptions(options, fieldNames);
+
+  // 受控/非受控状态
+  const isControlled = controlledValue !== undefined;
+  const isOpenControlled = controlledOpen !== undefined;
+
+  // 内部状态
+  const [internalValue, setInternalValue] = useState<CascaderValue | null>(defaultValue);
+  const [internalMultipleValues, setInternalMultipleValues] = useState<CascaderValue[]>([]);
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const [selectedOptions, setSelectedOptions] = useState<CascaderOption[]>([]);
+  const [expandedValues, setExpandedValues] = useState<CascaderValue[]>([]);
+  const [searchValue, setSearchValue] = useState('');
+
+  // 当前值
+  const value = useMemo(() => {
+    return isControlled ? controlledValue : internalValue;
+  }, [isControlled, controlledValue, internalValue]);
+
+  // 当前展开状态
+  const open = useMemo(() => {
+    return isOpenControlled ? controlledOpen : internalOpen;
+  }, [isOpenControlled, controlledOpen, internalOpen]);
+
+  // 更新选中选项
+  useEffect(() => {
+    if (value) {
+      const path = findOptionPath(value);
+      setSelectedOptions(path);
+    } else {
+      setSelectedOptions([]);
+    }
+  }, [value, findOptionPath]);
+
+  // 处理下拉框状态变化
+  useEffect(() => {
+    onDropdownVisibleChange?.(open);
+  }, [open, onDropdownVisibleChange]);
+
+  // 设置值
+  const setValue = useCallback((newValue: CascaderValue | null, newSelectedOptions: CascaderOption[]) => {
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onChange?.(newValue, newSelectedOptions);
+  }, [isControlled, onChange]);
+
+  // 设置多选值
+  const setMultipleValue = useCallback((newValues: CascaderValue[], newSelectedOptions: CascaderOption[][]) => {
+    if (!isControlled) {
+      setInternalMultipleValues(newValues);
+    }
+    onMultipleChange?.(newValues, newSelectedOptions);
+  }, [isControlled, onMultipleChange]);
+
+  // 设置展开状态
+  const setOpen = useCallback((newOpen: boolean) => {
+    if (!isOpenControlled) {
+      setInternalOpen(newOpen);
+    }
+    onDropdownVisibleChange?.(newOpen);
+  }, [isOpenControlled, onDropdownVisibleChange]);
+
+  // 清除所有状态
+  const clearAll = useCallback(() => {
+    if (!isControlled) {
+      setInternalValue(null);
+      setInternalMultipleValues([]);
+    }
+    setSelectedOptions([]);
+    setExpandedValues([]);
+    setSearchValue('');
+    onChange?.(null, []);
+    onMultipleChange?.([], []);
+  }, [isControlled, onChange, onMultipleChange]);
+
+  // 重置状态
+  const reset = useCallback(() => {
+    if (!isControlled) {
+      setInternalValue(defaultValue);
+    }
+    setSelectedOptions(defaultValue ? findOptionPath(defaultValue) : []);
+    setExpandedValues(defaultValue ? [defaultValue] : []);
+    setSearchValue('');
+  }, [isControlled, defaultValue, findOptionPath]);
+
+  return {
+    // 状态值
+    value,
+    open,
+    selectedOptions,
+    expandedValues,
+    searchValue,
+    internalMultipleValues,
+    
+    // 状态设置函数
+    setValue,
+    setMultipleValue,
+    setOpen,
+    setSelectedOptions,
+    setExpandedValues,
+    setSearchValue,
+    clearAll,
+    reset,
+    
+    // 受控状态标记
+    isControlled,
+    isOpenControlled,
+  };
+}

package/src/components/form/Cascader/index.ts

@@ -0,0 +1,25 @@
+export { Cascader } from './Cascader';
+export type {
+  CascaderProps,
+  CascaderRef,
+  CascaderOption,
+  CascaderValue,
+  CascaderSize,
+  CascaderStatus,
+  CascaderVariant,
+  CascaderExpandTrigger,
+  CascaderDirection,
+  CascaderNativeProps,
+  CascaderConfig,
+  CascaderUtils,
+  CascaderEvents,
+  CascaderStyles,
+} from './Cascader.types';
+export { CascaderStyles as CascaderStylesClass } from './Cascader.styles';
+export { CascaderTools } from './Cascader.types';
+
+// Hooks
+export { useCascaderFieldNames, useCascaderOptions, useCascaderState } from './hooks';
+
+// Utils
+export { formatDisplayValue } from './utils';

package/src/components/form/Cascader/utils/formatDisplayValue.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import type { CascaderOption } from '../Cascader.types';
+
+/**
+ * 格式化级联选择器显示值
+ */
+export function formatDisplayValue(
+  labels: ReactNode[],
+  _selectedOptions: CascaderOption[],
+  config: { showPath?: boolean; pathSeparator?: string } = {}
+): ReactNode {
+  const { showPath = false, pathSeparator = ' / ' } = config;
+  
+  if (!showPath || labels.length === 0) {
+    return labels[labels.length - 1] || '';
+  }
+  
+  return labels.join(pathSeparator);
+}

package/src/components/form/Cascader/utils/index.ts

@@ -0,0 +1 @@
+export { formatDisplayValue } from './formatDisplayValue';