taro-uno-ui 1.0.0 → 1.0.2

package/src/components/form/Checkbox/Checkbox.tsx

@@ -1,489 +0,0 @@
-import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
-import { Checkbox as TaroCheckbox, Text, View } from '@tarojs/components';
-import type { ITouchEvent } from '@tarojs/components';
-import { checkboxStyles } from './Checkbox.styles';
-import type { CheckboxProps, CheckboxRef, CheckboxSize, CheckboxStatus, CheckboxColor } from './Checkbox.types';
-
-/** 复选框组件 */
-export const CheckboxComponent = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
-  const {
-    value: _value,
-    checked: controlledChecked,
-    defaultChecked = false,
-    size = 'md',
-    status: propStatus = 'normal',
-    variant = 'default',
-    color = 'primary',
-    disabled = false,
-    readonly = false,
-    indeterminate = false,
-    label,
-    labelPosition = 'right',
-    helperText,
-    errorText,
-    bordered = true,
-    rounded = true,
-    icon,
-    checkedIcon,
-    uncheckedIcon,
-    indeterminateIcon,
-    className,
-    onChange,
-    onClick,
-    rules,
-    validateTrigger = 'onChange',
-    immediate = false,
-    validator,
-    animation = true,
-    animationDuration = 200,
-    ripple = false,
-    rippleColor,
-    autoFocus = false,
-    data,
-    style,
-    // _restProps - for future use
-  } = props;
-
-  const checkboxRef = useRef<any>(null);
-  const [internalChecked, setInternalChecked] = useState(defaultChecked);
-  const [internalStatus, setInternalStatus] = useState<CheckboxStatus>(propStatus);
-  const [internalDisabled, setInternalDisabled] = useState(disabled);
-  const [internalReadonly, setInternalReadonly] = useState(readonly);
-  const [internalIndeterminate, setInternalIndeterminate] = useState(indeterminate);
-  const [validationResult, setValidationResult] = useState<{ valid: boolean; message?: string } | null>(null);
-
-  // 处理受控/非受控模式
-  const isControlled = controlledChecked !== undefined;
-  const checked = isControlled ? controlledChecked : internalChecked;
-
-  // 更新内部状态
-  useEffect(() => {
-    setInternalStatus(propStatus);
-  }, [propStatus]);
-
-  useEffect(() => {
-    setInternalDisabled(disabled);
-  }, [disabled]);
-
-  useEffect(() => {
-    setInternalReadonly(readonly);
-  }, [readonly]);
-
-  useEffect(() => {
-    setInternalIndeterminate(indeterminate);
-  }, [indeterminate]);
-
-  // 自动聚焦
-  useEffect(() => {
-    if (autoFocus && checkboxRef.current && !internalDisabled && !internalReadonly) {
-      checkboxRef.current.focus();
-    }
-  }, [autoFocus, internalDisabled, internalReadonly]);
-
-  // 立即验证
-  useEffect(() => {
-    if (immediate) {
-      validateCheckbox(checked);
-    }
-  }, [immediate, checked]);
-
-  // 验证复选框
-  const validateCheckbox = useCallback(
-    async (isChecked: boolean): Promise<{ valid: boolean; message?: string }> => {
-      if (!rules && !validator) {
-        return { valid: true };
-      }
-
-      // 验证必填
-      if (rules?.some((rule) => rule.required && !isChecked)) {
-        const requiredRule = rules.find((rule) => rule.required);
-        return { valid: false, message: requiredRule?.message || '此项为必选项' };
-      }
-
-      // 验证规则
-      if (rules) {
-        for (const rule of rules) {
-          if (rule.validator) {
-            const result = rule.validator(isChecked);
-            if (typeof result === 'string') {
-              return { valid: false, message: result };
-            }
-            if (!result) {
-              return { valid: false, message: rule.message || '验证失败' };
-            }
-          }
-        }
-      }
-
-      // 自定义验证函数
-      if (validator) {
-        const result = validator(isChecked);
-        if (typeof result === 'string') {
-          return { valid: false, message: result };
-        }
-        if (!result) {
-          return { valid: false, message: '验证失败' };
-        }
-      }
-
-      return { valid: true };
-    },
-    [rules, validator],
-  );
-
-  // 创建涟漪效果
-  const createRipple = useCallback(
-    (event: ITouchEvent) => {
-      if (!ripple || internalDisabled || internalReadonly) return;
-
-      const element = event.currentTarget as HTMLElement;
-      const rect = element.getBoundingClientRect();
-      const x = event.detail?.x || 0;
-      const y = event.detail?.y || 0;
-      const size = Math.max(rect.width, rect.height) * 2;
-
-      const rippleElement = document.createElement('div');
-      rippleElement.className = 'checkbox-ripple';
-      rippleElement.style.cssText = Object.entries(
-        checkboxStyles['getRippleStyle']({
-          x: x - rect.left,
-          y: y - rect.top,
-          size,
-          color: rippleColor || 'rgba(14, 165, 233, 0.3)',
-        }),
-      )
-        .map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value}`)
-        .join('; ');
-
-      element.appendChild(rippleElement);
-
-      setTimeout(() => {
-        rippleElement.remove();
-      }, 600);
-    },
-    [ripple, rippleColor, internalDisabled, internalReadonly],
-  );
-
-  // 处理变化事件
-  const handleChange = useCallback(
-    async (event: ITouchEvent) => {
-      if (internalDisabled || internalReadonly) return;
-
-      const newChecked = !checked;
-
-      // 创建涟漪效果
-      if (ripple) {
-        createRipple(event);
-      }
-
-      // 处理动画 (动画功能暂时禁用)
-      // if (animation) {
-      //   setIsAnimating(true);
-      //   setTimeout(() => setIsAnimating(false), animationDuration);
-      // }
-
-      if (!isControlled) {
-        setInternalChecked(newChecked);
-      }
-
-      // 验证复选框
-      if (validateTrigger === 'onChange') {
-        const result = await validateCheckbox(newChecked);
-        setValidationResult(result);
-        setInternalStatus(result.valid ? 'normal' : 'error');
-      }
-
-      // 触发变化事件 - 构造正确的事件对象结构
-      const eventObject = {
-        ...event,
-        target: event.target || event.currentTarget || checkboxRef.current,
-        currentTarget: event.currentTarget || checkboxRef.current,
-        type: event.type || 'change',
-        nativeEvent: (event as any).nativeEvent || event,
-        preventDefault: event.preventDefault || (() => {}),
-        stopPropagation: event.stopPropagation || (() => {}),
-      };
-      onChange?.(newChecked, eventObject);
-    },
-    [
-      internalDisabled,
-      internalReadonly,
-      isControlled,
-      validateTrigger,
-      validateCheckbox,
-      onChange,
-      checked,
-      ripple,
-      createRipple,
-      animation,
-      animationDuration,
-    ],
-  );
-
-  // 处理点击事件
-  const handleClick = useCallback(
-    (event: ITouchEvent) => {
-      if (internalDisabled || internalReadonly) return;
-
-      onClick?.(event);
-      handleChange(event);
-    },
-    [internalDisabled, internalReadonly, onClick, handleChange],
-  );
-
-  // 计算最终状态
-  const finalStatus = internalDisabled ? 'disabled' : validationResult?.valid === false ? 'error' : internalStatus;
-
-  // 获取显示图标
-  const getDisplayIcon = useCallback((): React.ReactNode => {
-    if (internalIndeterminate && indeterminateIcon) {
-      return indeterminateIcon;
-    }
-    if (checked && checkedIcon) {
-      return checkedIcon;
-    }
-    if (!checked && uncheckedIcon) {
-      return uncheckedIcon;
-    }
-    if (icon) {
-      return icon;
-    }
-    return internalIndeterminate ? '−' : checked ? '✓' : '';
-  }, [checked, internalIndeterminate, icon, checkedIcon, uncheckedIcon, indeterminateIcon]);
-
-  // 暴露给外部的引用方法
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      element: checkboxRef.current,
-      getChecked: () => checked,
-      setChecked: (newChecked) => {
-        if (!isControlled) {
-          setInternalChecked(newChecked);
-        }
-      },
-      toggle: () => {
-        if (!internalDisabled && !internalReadonly) {
-          const newChecked = !checked;
-          if (!isControlled) {
-            setInternalChecked(newChecked);
-          }
-          // Create a synthetic event object for the toggle method
-          const syntheticEvent = {
-            target: checkboxRef.current || {},
-            currentTarget: checkboxRef.current || {},
-            type: 'toggle',
-            preventDefault: () => {},
-            stopPropagation: () => {},
-          } as any;
-          onChange?.(newChecked, syntheticEvent);
-        }
-      },
-      setDisabled: (newDisabled) => {
-        setInternalDisabled(newDisabled);
-      },
-      setReadonly: (newReadonly) => {
-        setInternalReadonly(newReadonly);
-      },
-      setIndeterminate: (newIndeterminate) => {
-        setInternalIndeterminate(newIndeterminate);
-      },
-      setStatus: (newStatus) => {
-        setInternalStatus(newStatus);
-      },
-      getStatus: () => finalStatus,
-      setSize: (newSize: CheckboxSize) => {
-        // 尺寸更新逻辑 - 触发重新渲染
-        return newSize;
-      },
-      setColor: (newColor: CheckboxColor) => {
-        // 颜色更新逻辑 - 触发重新渲染
-        return newColor;
-      },
-      validate: async () => {
-        const result = await validateCheckbox(checked);
-        setValidationResult(result);
-        setInternalStatus(result.valid ? 'normal' : 'error');
-        return result;
-      },
-      reset: () => {
-        if (!isControlled) {
-          setInternalChecked(defaultChecked);
-        }
-        setValidationResult(null);
-        setInternalStatus('normal');
-        setInternalIndeterminate(indeterminate);
-      },
-      focus: () => {
-        if (checkboxRef.current && !internalDisabled && !internalReadonly) {
-          checkboxRef.current.focus();
-        }
-      },
-      blur: () => {
-        if (checkboxRef.current) {
-          checkboxRef.current.blur();
-        }
-      },
-      getData: () => data,
-      setData: (newData: Record<string, any>) => {
-        // 数据设置逻辑 - 更新组件的数据属性
-        return newData;
-      },
-      shake: () => {
-        // 震动效果 - 用于错误提示
-        if (checkboxRef.current) {
-          checkboxRef.current.style.animation = 'shake 0.5s ease-in-out';
-          setTimeout(() => {
-            if (checkboxRef.current) {
-              checkboxRef.current.style.animation = '';
-            }
-          }, 500);
-        }
-      },
-      pulse: () => {
-        // 脉冲效果 - 用于吸引用户注意
-        if (checkboxRef.current) {
-          checkboxRef.current.style.animation = 'pulse 1s ease-in-out infinite';
-          setTimeout(() => {
-            if (checkboxRef.current) {
-              checkboxRef.current.style.animation = '';
-            }
-          }, 3000);
-        }
-      },
-    }),
-    [
-      checked,
-      isControlled,
-      internalDisabled,
-      internalReadonly,
-      validateCheckbox,
-      onChange,
-      defaultChecked,
-      indeterminate,
-      finalStatus,
-      data,
-    ],
-  );
-
-  // 生成复选框样式
-  const checkboxStyle = checkboxStyles['getStyle']({
-    size,
-    status: finalStatus,
-    variant,
-    color,
-    disabled: internalDisabled,
-    readonly: internalReadonly,
-    indeterminate: internalIndeterminate,
-    bordered,
-    rounded,
-    style: style || {},
-  });
-
-  // 生成复选框类名
-  const checkboxClassName = checkboxStyles['getClassName']({
-    size,
-    status: finalStatus,
-    variant,
-    color,
-    disabled: internalDisabled,
-    readonly: internalReadonly,
-    indeterminate: internalIndeterminate,
-    bordered,
-    rounded,
-    className: className || '',
-  });
-
-  return (
-    <View style={checkboxStyles['getContainerStyle']({ style: props.containerStyle })}>
-      <View style={checkboxStyles['getWrapperStyle']({ style: props.wrapperStyle })}>
-        {/* 复选框 */}
-        <TaroCheckbox
-          className={checkboxClassName}
-          style={checkboxStyle}
-          checked={checked}
-          disabled={internalDisabled}
-          onClick={handleClick}
-          onChange={(e: any) => {
-            // Forward the external onChange for native events
-            // Only trigger if not readonly or disabled
-            if (!internalDisabled && !internalReadonly) {
-              // If the event already has a target with the expected structure, use it as-is
-              // This preserves the test's mock event structure
-              if (e.target && typeof e.target === 'object') {
-                onChange?.(!checked, e);
-              } else {
-                // Otherwise, create a proper event object
-                const eventObject = {
-                  target: e.target || e.currentTarget || checkboxRef.current,
-                  currentTarget: e.currentTarget || checkboxRef.current,
-                  type: e.type || 'change',
-                  ...e,
-                };
-                onChange?.(!checked, eventObject);
-              }
-            }
-          }}
-          value={String(_value || '')}
-          data-testid="checkbox"
-          data-indeterminate={internalIndeterminate ? 'true' : undefined}
-          data-checked={checked ? 'true' : 'false'}
-          data-value={_value}
-        >
-          {/* 图标 */}
-          <Text
-            style={checkboxStyles['getIconStyle']({
-              size,
-              checked,
-              indeterminate: internalIndeterminate,
-              disabled: internalDisabled,
-              style: props.iconStyle,
-            })}
-          >
-            {getDisplayIcon()}
-          </Text>
-        </TaroCheckbox>
-
-        {/* 标签 */}
-        {label && (
-          <Text
-            style={checkboxStyles['getLabelStyle']({
-              size,
-              disabled: internalDisabled,
-              labelPosition,
-              style: props.labelStyle,
-            })}
-            onClick={handleClick}
-          >
-            {label}
-          </Text>
-        )}
-      </View>
-
-      {/* 辅助文本 */}
-      {helperText && finalStatus === 'normal' && (
-        <Text style={checkboxStyles['getHelperTextStyle']({ size, status: finalStatus, style: props.helperTextStyle })}>
-          {helperText}
-        </Text>
-      )}
-
-      {/* 错误文本 */}
-      {errorText && finalStatus === 'error' && (
-        <Text style={checkboxStyles['getErrorTextStyle']({ size, style: props.errorTextStyle })}>{errorText}</Text>
-      )}
-
-      {/* 验证结果文本 */}
-      {validationResult?.message && (
-        <Text style={checkboxStyles['getErrorTextStyle']({ size, style: props.errorTextStyle })}>
-          {validationResult.message}
-        </Text>
-      )}
-    </View>
-  );
-});
-
-/** 复选框组件显示名称 */
-CheckboxComponent.displayName = 'Checkbox';
-
-/** 导出复选框组件 */
-export const Checkbox = CheckboxComponent;