taro-uno-ui 0.9.0 → 1.0.0

package/src/components/form/Cascader/Cascader.tsx

@@ -61,14 +61,14 @@ export const CascaderComponent = forwardRef<CascaderRef, CascaderProps>((props,
 
   const inputRef = useRef<HTMLInputElement>(null);
   const fields = useCascaderFieldNames(fieldNames);
-  const { 
-    findOptionPath, 
-    getOptionValue, 
-    getOptionLabel, 
-    hasChildren, 
-    isOptionDisabled, 
+  const {
+    findOptionPath,
+    getOptionValue,
+    getOptionLabel,
+    hasChildren,
+    isOptionDisabled,
     isOptionLeaf,
-    filterOptions: filterOptionsUtil 
+    filterOptions: filterOptionsUtil,
   } = useCascaderOptions(options, fieldNames);
 
   const state = useCascaderState(options, props as CascaderProps);
@@ -117,7 +117,7 @@ export const CascaderComponent = forwardRef<CascaderRef, CascaderProps>((props,
         setFilteredOptions([]);
       }
     },
-    [showSearch, filterOptionsUtil, onSearch, setSearchValue]
+    [showSearch, filterOptionsUtil, onSearch, setSearchValue],
   );
 
   // 处理选项点击
@@ -176,7 +176,7 @@ export const CascaderComponent = forwardRef<CascaderRef, CascaderProps>((props,
       isOptionDisabled,
       isOptionLeaf,
       hasChildren,
-    ]
+    ],
   );
 
   // 处理清除
@@ -186,7 +186,7 @@ export const CascaderComponent = forwardRef<CascaderRef, CascaderProps>((props,
       clearAll();
       onClear?.();
     },
-    [clearAll, onClear]
+    [clearAll, onClear],
   );
 
   // 处理聚焦
@@ -198,7 +198,7 @@ export const CascaderComponent = forwardRef<CascaderRef, CascaderProps>((props,
       setOpen(true);
       onFocus?.(event);
     },
-    [internalDisabled, internalReadonly, setOpen, onFocus]
+    [internalDisabled, internalReadonly, setOpen, onFocus],
   );
 
   // 处理失焦
@@ -207,7 +207,7 @@ export const CascaderComponent = forwardRef<CascaderRef, CascaderProps>((props,
       setFocused(false);
       onBlur?.(event);
     },
-    [onBlur]
+    [onBlur],
   );
 
   // 处理下拉框显示状态变化
@@ -216,7 +216,7 @@ export const CascaderComponent = forwardRef<CascaderRef, CascaderProps>((props,
       if (internalDisabled || internalReadonly) return;
       setOpen(visible);
     },
-    [internalDisabled, internalReadonly, setOpen]
+    [internalDisabled, internalReadonly, setOpen],
   );
 
   // 渲染菜单项
@@ -225,7 +225,7 @@ export const CascaderComponent = forwardRef<CascaderRef, CascaderProps>((props,
       const optionValue = getOptionValue(option);
       const optionLabel = getOptionLabel(option);
       const isSelected = selectedOptions[level] && getOptionValue(selectedOptions[level]!) === optionValue;
-      const isExpanded = expandedValues.some(value => value === optionValue);
+      const isExpanded = expandedValues.some((value) => value === optionValue);
       const optionHasChildren = hasChildren(option);
 
       const itemStyle = {
@@ -239,19 +239,19 @@ export const CascaderComponent = forwardRef<CascaderRef, CascaderProps>((props,
           style={itemStyle}
           className={option.className}
           onClick={() => handleOptionClick(option, level)}
-                  >
+        >
           <Text>{optionRender ? optionRender(option, level) : optionLabel}</Text>
           {optionHasChildren && (
-            <Text style={{
-              ...CascaderStyles['getMenuItemExpandIconStyle'](),
-              ...(isExpanded ? CascaderStyles['getMenuItemExpandIconRotatedStyle']() : {}),
-            }}>
+            <Text
+              style={{
+                ...CascaderStyles['getMenuItemExpandIconStyle'](),
+                ...(isExpanded ? CascaderStyles['getMenuItemExpandIconRotatedStyle']() : {}),
+              }}
+            >
               ▶
             </Text>
           )}
-          {option.loading && (
-            <Text style={CascaderStyles['getLoadingIconStyle']()}>⏳</Text>
-          )}
+          {option.loading && <Text style={CascaderStyles['getLoadingIconStyle']()}>⏳</Text>}
         </View>
       );
     },
@@ -267,7 +267,7 @@ export const CascaderComponent = forwardRef<CascaderRef, CascaderProps>((props,
       getOptionLabel,
       hasChildren,
       isOptionDisabled,
-    ]
+    ],
   );
 
   // 渲染菜单列
@@ -280,7 +280,7 @@ export const CascaderComponent = forwardRef<CascaderRef, CascaderProps>((props,
 
       return (
         <View key={level} style={columnStyle}>
-          {columnOptions.map(option => renderMenuItem(option, level))}
+          {columnOptions.map((option) => renderMenuItem(option, level))}
           {columnOptions.length === 0 && (
             <View style={CascaderStyles['getEmptyStyle']()}>
               <Text>无数据</Text>
@@ -289,7 +289,7 @@ export const CascaderComponent = forwardRef<CascaderRef, CascaderProps>((props,
         </View>
       );
     },
-    [expandedValues.length, renderMenuItem]
+    [expandedValues.length, renderMenuItem],
   );
 
   // 渲染菜单
@@ -305,16 +305,14 @@ export const CascaderComponent = forwardRef<CascaderRef, CascaderProps>((props,
         columns.push(currentOptions);
       }
 
-        if (i < expandedValues.length) {
+      if (i < expandedValues.length) {
         const levelValue = expandedValues[i];
         if (levelValue && levelValue.length > 0) {
           const optionValue = levelValue[levelValue.length - 1];
-          const nextOption = currentOptions.find(
-            (opt: CascaderOption) => {
-              const currentValue = getOptionValue(opt);
-              return currentValue.length > 0 && currentValue[0] === optionValue;
-            }
-          );
+          const nextOption = currentOptions.find((opt: CascaderOption) => {
+            const currentValue = getOptionValue(opt);
+            return currentValue.length > 0 && currentValue[0] === optionValue;
+          });
 
           if (nextOption && hasChildren(nextOption)) {
             currentOptions = nextOption[fields.children as keyof typeof nextOption] as CascaderOption[];
@@ -329,10 +327,12 @@ export const CascaderComponent = forwardRef<CascaderRef, CascaderProps>((props,
       }
     }
 
-    const menuContent = dropdownRender ? dropdownRender(
-      <View style={{ display: 'flex' }}>
-        {columns.map((columnOptions, level) => renderMenuColumn(columnOptions, level))}
-      </View>
+    const menuContent = dropdownRender ? (
+      dropdownRender(
+        <View style={{ display: 'flex' }}>
+          {columns.map((columnOptions, level) => renderMenuColumn(columnOptions, level))}
+        </View>,
+      )
     ) : (
       <View style={{ display: 'flex' }}>
         {columns.map((columnOptions, level) => renderMenuColumn(columnOptions, level))}
@@ -361,13 +361,9 @@ export const CascaderComponent = forwardRef<CascaderRef, CascaderProps>((props,
           <View style={CascaderStyles['getPathStyle']()}>
             {selectedOptions.map((option, index) => (
               <React.Fragment key={index}>
-                <Text style={CascaderStyles['getPathItemStyle']()}>
-                  {String(getOptionLabel(option))}
-                </Text>
+                <Text style={CascaderStyles['getPathItemStyle']()}>{String(getOptionLabel(option))}</Text>
                 {index < selectedOptions.length - 1 && (
-                  <Text style={CascaderStyles['getPathSeparatorStyle']()}>
-                    {pathSeparator}
-                  </Text>
+                  <Text style={CascaderStyles['getPathSeparatorStyle']()}>{pathSeparator}</Text>
                 )}
               </React.Fragment>
             ))}
@@ -399,8 +395,8 @@ export const CascaderComponent = forwardRef<CascaderRef, CascaderProps>((props,
   const formatDisplayValue = useCallback(() => {
     if (!selectedOptions.length) return '';
 
-    const labels = selectedOptions.map(option => String(getOptionLabel(option)));
-    
+    const labels = selectedOptions.map((option) => String(getOptionLabel(option)));
+
     if (displayRender) {
       return displayRender(labels, selectedOptions);
     }
@@ -471,7 +467,7 @@ export const CascaderComponent = forwardRef<CascaderRef, CascaderProps>((props,
       setExpandedValues,
       setSearchValue,
       reset,
-    ]
+    ],
   );
 
   // 生成输入框样式
@@ -486,35 +482,44 @@ export const CascaderComponent = forwardRef<CascaderRef, CascaderProps>((props,
   }, [size, internalDisabled, focused, style]);
 
   // 生成容器样式
-  const containerStyle = useMemo(() => ({
-    ...CascaderStyles['getStyle']({
-      size,
-      variant,
-      status,
-      disabled: internalDisabled,
-      readonly: internalReadonly,
-      loading,
-      style: {},
+  const containerStyle = useMemo(
+    () => ({
+      ...CascaderStyles['getStyle']({
+        size,
+        variant,
+        status,
+        disabled: internalDisabled,
+        readonly: internalReadonly,
+        loading,
+        style: {},
+      }),
+      ...style,
     }),
-    ...style,
-  }), [size, variant, status, internalDisabled, internalReadonly, loading, style]);
+    [size, variant, status, internalDisabled, internalReadonly, loading, style],
+  );
 
   // 生成输入框包装器样式
-  const inputWrapperStyle = useMemo(() => ({
-    position: 'relative' as const,
-    display: 'flex' as const,
-    alignItems: 'center' as const,
-    ...CascaderStyles['getSizeStyle'](size),
-  }), [size]);
+  const inputWrapperStyle = useMemo(
+    () => ({
+      position: 'relative' as const,
+      display: 'flex' as const,
+      alignItems: 'center' as const,
+      ...CascaderStyles['getSizeStyle'](size),
+    }),
+    [size],
+  );
 
   // 无障碍状态
-  const finalAccessibilityState = useMemo(() => ({
-    disabled: internalDisabled,
-    readonly: internalReadonly,
-    expanded: open,
-    busy: loading,
-    ...accessibilityState,
-  }), [internalDisabled, internalReadonly, open, loading, accessibilityState]);
+  const finalAccessibilityState = useMemo(
+    () => ({
+      disabled: internalDisabled,
+      readonly: internalReadonly,
+      expanded: open,
+      busy: loading,
+      ...accessibilityState,
+    }),
+    [internalDisabled, internalReadonly, open, loading, accessibilityState],
+  );
 
   return (
     <View
@@ -534,11 +539,7 @@ export const CascaderComponent = forwardRef<CascaderRef, CascaderProps>((props,
       {...restProps}
     >
       <View style={inputWrapperStyle}>
-        {prefix && (
-          <View style={{ position: 'absolute', left: '12px', zIndex: 1 }}>
-            {prefix}
-          </View>
-        )}
+        {prefix && <View style={{ position: 'absolute', left: '12px', zIndex: 1 }}>{prefix}</View>}
 
         <Input
           ref={inputRef}
@@ -552,23 +553,18 @@ export const CascaderComponent = forwardRef<CascaderRef, CascaderProps>((props,
         />
 
         {allowClear && value && (
-          <View
-            style={CascaderStyles['getClearStyle']()}
-            onClick={handleClear}
-                      >
+          <View style={CascaderStyles['getClearStyle']()} onClick={handleClear}>
             <Text>{clearIcon || '×'}</Text>
           </View>
         )}
 
-        <View style={{
-          ...CascaderStyles['getSuffixStyle'](),
-          ...(open ? CascaderStyles['getSuffixExpandedStyle']() : {}),
-        }}>
-          {loading ? (
-            <Text style={CascaderStyles['getLoadingIconStyle']()}>⏳</Text>
-          ) : (
-            <Text>{suffixIcon || '▼'}</Text>
-          )}
+        <View
+          style={{
+            ...CascaderStyles['getSuffixStyle'](),
+            ...(open ? CascaderStyles['getSuffixExpandedStyle']() : {}),
+          }}
+        >
+          {loading ? <Text style={CascaderStyles['getLoadingIconStyle']()}>⏳</Text> : <Text>{suffixIcon || '▼'}</Text>}
         </View>
       </View>
 
@@ -582,4 +578,4 @@ CascaderComponent.displayName = 'Cascader';
 
 /** 导出级联选择器组件 */
 export const Cascader = CascaderComponent;
-export default Cascader;
+export default Cascader;

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

@@ -262,13 +262,29 @@ export interface CascaderConfig {
 /** 级联选择器工具函数接口 */
 export interface CascaderUtils {
   /** 查找选项路径 */
-  findOptionPath: (_options: CascaderOption[], value: CascaderValue, fieldNames?: CascaderProps['fieldNames']) => CascaderOption[];
+  findOptionPath: (
+    _options: CascaderOption[],
+    value: CascaderValue,
+    fieldNames?: CascaderProps['fieldNames'],
+  ) => CascaderOption[];
   /** 过滤选项 */
-  filterOptions: (_options: CascaderOption[], inputValue: string, filterOption?: CascaderProps['filterOption']) => CascaderOption[];
+  filterOptions: (
+    _options: CascaderOption[],
+    inputValue: string,
+    filterOption?: CascaderProps['filterOption'],
+  ) => CascaderOption[];
   /** 格式化显示值 */
-  formatDisplayValue: (_labels: ReactNode[], selectedOptions: CascaderOption[], config?: { showPath?: boolean; pathSeparator?: string }) => ReactNode;
+  formatDisplayValue: (
+    _labels: ReactNode[],
+    selectedOptions: CascaderOption[],
+    config?: { showPath?: boolean; pathSeparator?: string },
+  ) => ReactNode;
   /** 验证值 */
-  validateValue: (_value: CascaderValue, options: CascaderOption[], fieldNames?: CascaderProps['fieldNames']) => boolean;
+  validateValue: (
+    _value: CascaderValue,
+    options: CascaderOption[],
+    fieldNames?: CascaderProps['fieldNames'],
+  ) => boolean;
   /** 展平选项 */
   flattenOptions: (_options: CascaderOption[], fieldNames?: CascaderProps['fieldNames']) => CascaderOption[];
   /** 生成选项树 */
@@ -376,7 +392,11 @@ export interface CascaderStyles {
   /** 获取动画关键帧 */
   getAnimations: () => Record<string, CSSProperties>;
   /** 格式化显示值 */
-  formatDisplayValue: (_labels: ReactNode[], selectedOptions: CascaderOption[], config?: { showPath?: boolean; pathSeparator?: string }) => ReactNode;
+  formatDisplayValue: (
+    _labels: ReactNode[],
+    selectedOptions: CascaderOption[],
+    config?: { showPath?: boolean; pathSeparator?: string },
+  ) => ReactNode;
   /** 获取完整样式 */
   getStyle: (_config: {
     size?: CascaderSize;
@@ -405,30 +425,27 @@ export class CascaderTools {
   static findOptionPath(
     options: CascaderOption[],
     value: CascaderValue,
-    fieldNames: CascaderProps['fieldNames'] = {}
+    fieldNames: CascaderProps['fieldNames'] = {},
   ): CascaderOption[] {
-    const {
-      value: valueKey = 'value',
-      children: childrenKey = 'children',
-    } = fieldNames;
+    const { value: valueKey = 'value', children: childrenKey = 'children' } = fieldNames;
 
     const findPath = (
       currentOptions: CascaderOption[],
       targetValue: CascaderValue,
-      path: CascaderOption[] = []
+      path: CascaderOption[] = [],
     ): CascaderOption[] | null => {
       for (const option of currentOptions) {
         const currentPath = [...path, option];
-        
+
         if (option[valueKey as keyof typeof option] === targetValue[targetValue.length - 1]) {
           return currentPath;
         }
-        
+
         if (option[childrenKey as keyof typeof option]) {
           const found = findPath(
             option[childrenKey as keyof typeof option] as CascaderOption[],
             targetValue,
-            currentPath
+            currentPath,
           );
           if (found) return found;
         }
@@ -443,17 +460,14 @@ export class CascaderTools {
   static filterOptions(
     options: CascaderOption[],
     inputValue: string,
-    filterOption?: CascaderProps['filterOption']
+    filterOption?: CascaderProps['filterOption'],
   ): CascaderOption[] {
     const filtered: CascaderOption[] = [];
-    
-    const filter = (
-      currentOptions: CascaderOption[],
-      path: CascaderOption[] = []
-    ) => {
+
+    const filter = (currentOptions: CascaderOption[], path: CascaderOption[] = []) => {
       for (const option of currentOptions) {
         const currentPath = [...path, option];
-        
+
         if (filterOption) {
           if (filterOption(inputValue, option, currentPath)) {
             filtered.push(option);
@@ -461,12 +475,12 @@ export class CascaderTools {
         } else {
           const label = String(option.label).toLowerCase();
           const search = inputValue.toLowerCase();
-          
+
           if (label.includes(search)) {
             filtered.push(option);
           }
         }
-        
+
         if (option.children) {
           filter(option.children, currentPath);
         }
@@ -481,14 +495,14 @@ export class CascaderTools {
   static formatDisplayValue(
     labels: ReactNode[],
     _selectedOptions: CascaderOption[],
-    config: { showPath?: boolean; pathSeparator?: string } = {}
+    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);
   }
 
@@ -496,20 +510,15 @@ export class CascaderTools {
   static validateValue(
     value: CascaderValue,
     options: CascaderOption[],
-    fieldNames: CascaderProps['fieldNames'] = {}
+    fieldNames: CascaderProps['fieldNames'] = {},
   ): boolean {
     const path = this.findOptionPath(options, value, fieldNames);
     return path.length > 0;
   }
 
   /** 展平选项 */
-  static flattenOptions(
-    options: CascaderOption[],
-    fieldNames: CascaderProps['fieldNames'] = {}
-  ): CascaderOption[] {
-    const {
-      children: childrenKey = 'children',
-    } = fieldNames;
+  static flattenOptions(options: CascaderOption[], fieldNames: CascaderProps['fieldNames'] = {}): CascaderOption[] {
+    const { children: childrenKey = 'children' } = fieldNames;
 
     const flatten = (currentOptions: CascaderOption[]): CascaderOption[] => {
       return currentOptions.reduce<CascaderOption[]>((acc, option) => {
@@ -527,20 +536,15 @@ export class CascaderTools {
   /** 生成选项树 */
   static generateOptionTree(
     options: CascaderOption[],
-    _fieldNames: CascaderProps['fieldNames'] = {}
+    _fieldNames: CascaderProps['fieldNames'] = {},
   ): CascaderOption[] {
     // 这里可以实现更复杂的树生成逻辑
     return options;
   }
 
   /** 获取叶子节点 */
-  static getLeafOptions(
-    options: CascaderOption[],
-    fieldNames: CascaderProps['fieldNames'] = {}
-  ): CascaderOption[] {
-    const {
-      children: childrenKey = 'children',
-    } = fieldNames;
+  static getLeafOptions(options: CascaderOption[], fieldNames: CascaderProps['fieldNames'] = {}): CascaderOption[] {
+    const { children: childrenKey = 'children' } = fieldNames;
 
     const getLeaves = (currentOptions: CascaderOption[]): CascaderOption[] => {
       return currentOptions.reduce<CascaderOption[]>((acc, option) => {
@@ -557,13 +561,8 @@ export class CascaderTools {
   }
 
   /** 获取禁用选项 */
-  static getDisabledOptions(
-    options: CascaderOption[],
-    fieldNames: CascaderProps['fieldNames'] = {}
-  ): CascaderOption[] {
-    const {
-      children: childrenKey = 'children',
-    } = fieldNames;
+  static getDisabledOptions(options: CascaderOption[], fieldNames: CascaderProps['fieldNames'] = {}): CascaderOption[] {
+    const { children: childrenKey = 'children' } = fieldNames;
 
     const getDisabled = (currentOptions: CascaderOption[]): CascaderOption[] => {
       return currentOptions.reduce<CascaderOption[]>((acc, option) => {
@@ -579,4 +578,4 @@ export class CascaderTools {
 
     return getDisabled(options);
   }
-}
+}

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

@@ -6,11 +6,14 @@ import type { CascaderProps } from '../Cascader.types';
  * 提供类型安全的字段名称映射
  */
 export function useCascaderFieldNames(fieldNames?: CascaderProps['fieldNames']) {
-  return useMemo(() => ({
-    value: fieldNames?.value || 'value',
-    label: fieldNames?.label || 'label',
-    children: fieldNames?.children || 'children',
-    disabled: fieldNames?.disabled || 'disabled',
-    isLeaf: fieldNames?.isLeaf || 'isLeaf',
-  }), [fieldNames]);
-}
+  return useMemo(
+    () => ({
+      value: fieldNames?.value || 'value',
+      label: fieldNames?.label || 'label',
+      children: fieldNames?.children || 'children',
+      disabled: fieldNames?.disabled || 'disabled',
+      isLeaf: fieldNames?.isLeaf || 'isLeaf',
+    }),
+    [fieldNames],
+  );
+}