taro-uno-ui 1.0.0 → 1.0.2

package/src/components/form/TimePicker/TimePicker.test.tsx

@@ -1,306 +0,0 @@
-import React from 'react'
-import { render, screen, fireEvent, waitFor, act } from '@testing-library/react'
-import { vi } from 'vitest'
-import { TimePicker } from './TimePicker'
-import type { TimePickerProps, TimePickerRef, TimeValue } from './TimePicker.types'
-
-describe('TimePicker Component', () => {
-  const defaultProps: TimePickerProps = {
-    placeholder: '请选择时间',
-    onChange: vi.fn()
-  }
-
-  const mockTimeValue: TimeValue = {
-    hours: 10,
-    minutes: 30,
-    seconds: 45
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('renders timepicker with default props', () => {
-      render(<TimePicker {...defaultProps} />)
-
-      const input = screen.getByRole('textbox')
-      expect(input).toBeInTheDocument()
-      expect(input).toHaveAttribute('placeholder', '请选择时间')
-    })
-
-    it('renders timepicker with disabled state', () => {
-      render(<TimePicker {...defaultProps} disabled={true} />)
-
-      const input = screen.getByRole('textbox')
-      expect(input).toBeInTheDocument()
-    })
-
-    it('renders timepicker with readonly state', () => {
-      render(<TimePicker {...defaultProps} readonly={true} />)
-
-      const input = screen.getByRole('textbox')
-      expect(input).toBeInTheDocument()
-    })
-
-    it('renders timepicker with loading state', () => {
-      render(<TimePicker {...defaultProps} loading={true} />)
-
-      expect(screen.getByTestId('loading-icon')).toBeInTheDocument()
-    })
-
-    it('renders timepicker with custom suffix icon', () => {
-      render(<TimePicker {...defaultProps} suffixIcon="⏰" />)
-
-      expect(screen.getByText('⏰')).toBeInTheDocument()
-    })
-  })
-
-  describe('Value Handling', () => {
-    it('handles controlled value', () => {
-      const { rerender } = render(<TimePicker {...defaultProps} value={mockTimeValue} readOnly />)
-
-      const input = screen.getByRole('textbox')
-      expect(input).toBeInTheDocument()
-
-      rerender(<TimePicker {...defaultProps} value={{ ...mockTimeValue, hours: 15 }} readOnly />)
-      expect(input).toBeInTheDocument()
-    })
-
-    it('handles uncontrolled value with defaultValue', () => {
-      render(<TimePicker {...defaultProps} defaultValue={mockTimeValue} />)
-
-      const input = screen.getByRole('textbox')
-      expect(input).toBeInTheDocument()
-    })
-
-    it('calls onChange when value changes', () => {
-      render(<TimePicker {...defaultProps} />)
-
-      const input = screen.getByRole('textbox')
-      fireEvent.change(input, { target: { value: '10:30:45' } })
-
-      expect(defaultProps.onChange).toHaveBeenCalled()
-    })
-  })
-
-  describe('Time Format', () => {
-    it('renders with HH:mm format', () => {
-      render(<TimePicker {...defaultProps} format="HH:mm" value={mockTimeValue} readOnly />)
-
-      const input = screen.getByRole('textbox')
-      expect(input).toBeInTheDocument()
-    })
-
-    it('renders with 12-hour format', () => {
-      render(<TimePicker {...defaultProps} use12Hours={true} value={mockTimeValue} readOnly />)
-
-      const input = screen.getByRole('textbox')
-      expect(input).toBeInTheDocument()
-    })
-
-    it('renders with custom format', () => {
-      render(<TimePicker {...defaultProps} format="mm:ss" value={mockTimeValue} readOnly />)
-
-      const input = screen.getByRole('textbox')
-      expect(input).toBeInTheDocument()
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('handles focus event', () => {
-      const onFocus = vi.fn()
-      render(<TimePicker {...defaultProps} onFocus={onFocus} />)
-
-      const input = screen.getByRole('textbox')
-      fireEvent.focus(input)
-
-      expect(onFocus).toHaveBeenCalled()
-    })
-
-    it('handles blur event', () => {
-      const onBlur = vi.fn()
-      render(<TimePicker {...defaultProps} onBlur={onBlur} />)
-
-      const input = screen.getByRole('textbox')
-      fireEvent.blur(input)
-
-      expect(onBlur).toHaveBeenCalled()
-    })
-
-    it('handles clear action when allowClear is true', () => {
-      const onClear = vi.fn()
-      render(<TimePicker {...defaultProps} value={mockTimeValue} allowClear={true} onClear={onClear} />)
-
-      const clearButton = screen.getByTestId('clear-button')
-      act(() => {
-        fireEvent.click(clearButton)
-      })
-
-      expect(onClear).toHaveBeenCalled()
-      expect(defaultProps.onChange).toHaveBeenCalledWith(null, '')
-    })
-
-    it('does not show clear button when allowClear is false', () => {
-      render(<TimePicker {...defaultProps} value={mockTimeValue} allowClear={false} />)
-
-      const clearButton = screen.queryByTestId('clear-button')
-      expect(clearButton).not.toBeInTheDocument()
-    })
-  })
-
-  describe('Ref Methods', () => {
-    it('provides ref methods', () => {
-      const ref = React.createRef<TimePickerRef>()
-      render(<TimePicker {...defaultProps} ref={ref} />)
-
-      expect(ref.current).toBeTruthy()
-      expect(ref.current?.getValue).toBeDefined()
-      expect(ref.current?.setValue).toBeDefined()
-      expect(ref.current?.focus).toBeDefined()
-      expect(ref.current?.blur).toBeDefined()
-    })
-
-    it('getValue returns current value', () => {
-      const ref = React.createRef<TimePickerRef>()
-      render(<TimePicker {...defaultProps} value={mockTimeValue} ref={ref} />)
-
-      expect(ref.current?.getValue()).toEqual(mockTimeValue)
-    })
-
-    it('setValue updates value', () => {
-      const ref = React.createRef<TimePickerRef>()
-      const onChange = vi.fn()
-      render(<TimePicker {...defaultProps} ref={ref} onChange={onChange} />)
-
-      act(() => {
-        ref.current?.setValue(mockTimeValue)
-      })
-      expect(onChange).toHaveBeenCalledWith(mockTimeValue, '10:30:45')
-    })
-
-    it('clear method works', () => {
-      const ref = React.createRef<TimePickerRef>()
-      const onChange = vi.fn()
-      render(<TimePicker {...defaultProps} value={mockTimeValue} readOnly ref={ref} onChange={onChange} />)
-
-      act(() => {
-        ref.current?.clear()
-      })
-      expect(onChange).toHaveBeenCalledWith(null, '')
-    })
-
-    it('setNow method works', () => {
-      const ref = React.createRef<TimePickerRef>()
-      const onChange = vi.fn()
-      render(<TimePicker {...defaultProps} ref={ref} onChange={onChange} />)
-
-      act(() => {
-        ref.current?.setNow()
-      })
-      expect(onChange).toHaveBeenCalled()
-    })
-
-    it('open and close methods work', () => {
-      const ref = React.createRef<TimePickerRef>()
-      const onOpenChange = vi.fn()
-      render(<TimePicker {...defaultProps} ref={ref} onOpenChange={onOpenChange} />)
-
-      act(() => {
-        ref.current?.open()
-      })
-      expect(onOpenChange).toHaveBeenCalledWith(true)
-
-      act(() => {
-        ref.current?.close()
-      })
-      expect(onOpenChange).toHaveBeenCalledWith(false)
-    })
-
-    it('disable and enable methods work', () => {
-      const ref = React.createRef<TimePickerRef>()
-      render(<TimePicker {...defaultProps} ref={ref} />)
-
-      act(() => {
-        ref.current?.disable()
-      })
-      expect(ref.current?.isDisabled()).toBe(true)
-
-      act(() => {
-        ref.current?.enable()
-      })
-      expect(ref.current?.isDisabled()).toBe(false)
-    })
-
-    it('validateTime method works', () => {
-      const ref = React.createRef<TimePickerRef>()
-      render(<TimePicker {...defaultProps} ref={ref} />)
-
-      expect(ref.current?.validateTime({ hours: 10, minutes: 30, seconds: 45 })).toBe(true)
-      expect(ref.current?.validateTime({ hours: 25, minutes: 30, seconds: 45 })).toBe(false)
-    })
-
-    it('formatTime method works', () => {
-      const ref = React.createRef<TimePickerRef>()
-      render(<TimePicker {...defaultProps} ref={ref} />)
-
-      expect(ref.current?.formatTime(mockTimeValue)).toBe('10:30:45')
-    })
-
-    it('parseTimeString method works', () => {
-      const ref = React.createRef<TimePickerRef>()
-      render(<TimePicker {...defaultProps} ref={ref} />)
-
-      expect(ref.current?.parseTimeString('10:30:45')).toEqual(mockTimeValue)
-      expect(ref.current?.parseTimeString('invalid')).toBeNull()
-    })
-  })
-
-  describe('Accessibility', () => {
-    it('has proper accessibility attributes', () => {
-      render(<TimePicker {...defaultProps} />)
-
-      const container = screen.getByRole('combobox')
-      expect(container).toBeInTheDocument()
-    })
-
-    it('supports custom accessibility props', () => {
-      render(
-        <TimePicker
-          {...defaultProps}
-          accessibilityLabel="Select time"
-          accessibilityRole="combobox"
-          accessible={true}
-        />
-      )
-
-      const container = screen.getByRole('combobox')
-      expect(container).toBeInTheDocument()
-    })
-
-    it('handles accessibility state', () => {
-      render(<TimePicker {...defaultProps} disabled={true} />)
-
-      const container = screen.getByRole('combobox')
-      expect(container).toBeInTheDocument()
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('handles empty value', () => {
-      render(<TimePicker {...defaultProps} value={null} />)
-
-      const input = screen.getByRole('textbox')
-      expect(input).toBeInTheDocument()
-    })
-
-    it('handles invalid time format input', () => {
-      render(<TimePicker {...defaultProps} />)
-
-      const input = screen.getByRole('textbox')
-      fireEvent.change(input, { target: { value: 'invalid-time' } })
-
-      expect(defaultProps.onChange).not.toHaveBeenCalled()
-    })
-  })
-})

package/src/components/form/TimePicker/TimePicker.tsx

@@ -1,250 +0,0 @@
-import * as React from 'react';
-import { forwardRef, useRef, useState, useCallback } from 'react';
-import { View, Text } from '@tarojs/components';
-import { Input } from '../Input';
-import type { TimePickerProps, TimePickerRef, TimeValue } from './TimePicker.types';
-
-/** 时间选择器组件 */
-export const TimePickerComponent = forwardRef<TimePickerRef, TimePickerProps>((props, ref) => {
-  const {
-    placeholder = '请选择时间',
-    value: controlledValue,
-    defaultValue = null,
-    format = 'HH:mm:ss',
-    disabled = false,
-    readonly = false,
-    allowClear = false,
-    size = 'md',
-    status = 'normal',
-    variant = 'outlined',
-    onChange,
-    onFocus,
-    onBlur,
-    onClear,
-    className,
-    style,
-    ...restProps
-  } = props;
-
-  const inputRef = useRef(null);
-  const [internalValue, setInternalValue] = useState<TimeValue | null>(defaultValue);
-  const [isOpened, setIsOpened] = useState(false);
-
-  const isControlled = controlledValue !== undefined;
-  const value = isControlled ? controlledValue : internalValue;
-
-  const formatTime = useCallback(
-    (timeValue: TimeValue | null): string => {
-      if (!timeValue) return '';
-
-      const { hours = 0, minutes = 0, seconds = 0 } = timeValue;
-      const formatValue = (val: number) => val.toString().padStart(2, '0');
-
-      let timeString = `${formatValue(hours)}:${formatValue(minutes)}`;
-      if (format.includes('ss')) {
-        timeString += `:${formatValue(seconds)}`;
-      }
-
-      return timeString;
-    },
-    [format],
-  );
-
-  const parseTime = useCallback((input: string): TimeValue | null => {
-    const parts = input.split(':').map((part) => parseInt(part, 10));
-    if (parts.length < 2 || parts.some(isNaN)) return null;
-
-    return {
-      hours: Math.min(23, Math.max(0, parts[0] || 0)),
-      minutes: Math.min(59, Math.max(0, parts[1] || 0)),
-      seconds: parts.length > 2 ? Math.min(59, Math.max(0, parts[2] || 0)) : 0,
-    };
-  }, []);
-
-  const handleInputChange = useCallback(
-    (event: any) => {
-      const inputValue = event.detail?.value || event.target?.value || '';
-      const parsedValue = parseTime(inputValue);
-
-      if (parsedValue) {
-        if (!isControlled) {
-          setInternalValue(parsedValue);
-        }
-        onChange?.(parsedValue, formatTime(parsedValue));
-      }
-    },
-    [isControlled, parseTime, onChange, formatTime],
-  );
-
-  const handleClear = useCallback(
-    (event: any) => {
-      if (event && event.stopPropagation) {
-        event.stopPropagation();
-      }
-
-      if (!isControlled) {
-        setInternalValue(null);
-      }
-
-      onClear?.();
-      onChange?.(null, '');
-    },
-    [isControlled, onClear, onChange],
-  );
-
-  const togglePicker = useCallback(() => {
-    if (disabled || readonly) return;
-    setIsOpened(!isOpened);
-  }, [isOpened, disabled, readonly]);
-
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      getValue: () => value,
-      setValue: (newValue: TimeValue | null) => {
-        if (!isControlled) {
-          setInternalValue(newValue);
-        }
-        onChange?.(newValue, newValue ? formatTime(newValue) : '');
-      },
-      getRangeValue: () => null,
-      setRangeValue: () => {},
-      getTimeString: () => (value ? formatTime(value) : ''),
-      getRangeTimeString: () => null,
-      focus: () => {
-        if (!disabled && !readonly) {
-          (inputRef.current as any)?.focus?.();
-        }
-      },
-      blur: () => {
-        (inputRef.current as any)?.blur?.();
-      },
-      open: () => setIsOpened(true),
-      close: () => setIsOpened(false),
-      clear: () => {
-        if (!isControlled) {
-          setInternalValue(null);
-        }
-        onChange?.(null, '');
-      },
-      setNow: () => {
-        const now = new Date();
-        const newTime: TimeValue = {
-          hours: now.getHours(),
-          minutes: now.getMinutes(),
-          seconds: now.getSeconds(),
-        };
-        if (!isControlled) {
-          setInternalValue(newTime);
-        }
-        onChange?.(newTime, formatTime(newTime));
-      },
-      confirm: () => setIsOpened(false),
-      disable: () => {},
-      enable: () => {},
-      isOpen: () => isOpened,
-      isDisabled: () => disabled,
-      isReadOnly: () => readonly,
-      element: inputRef.current,
-      getCurrentTime: () => {
-        const now = new Date();
-        return {
-          hours: now.getHours(),
-          minutes: now.getMinutes(),
-          seconds: now.getSeconds(),
-        };
-      },
-      validateTime: (time: TimeValue) => {
-        return (
-          time.hours >= 0 &&
-          time.hours <= 23 &&
-          time.minutes >= 0 &&
-          time.minutes <= 59 &&
-          time.seconds >= 0 &&
-          time.seconds <= 59
-        );
-      },
-      formatTime,
-      parseTimeString: parseTime,
-    }),
-    [value, isControlled, isOpened, disabled, readonly, onChange, formatTime, parseTime],
-  );
-
-  const baseStyle = {
-    display: 'flex',
-    alignItems: 'center',
-    position: 'relative' as const,
-    ...style,
-  };
-
-  return (
-    <View
-      style={baseStyle}
-      className={`taro-uno-timepicker taro-uno-timepicker--${size} ${className || ''}`}
-      {...restProps}
-    >
-      <Input
-        ref={inputRef}
-        value={formatTime(value)}
-        placeholder={placeholder}
-        disabled={disabled}
-        readonly={readonly}
-        onInput={handleInputChange}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        onClick={togglePicker}
-        style={{ flex: 1 }}
-      />
-
-      {allowClear && value && !disabled && !readonly && (
-        <Text
-          onClick={handleClear}
-          style={{
-            position: 'absolute',
-            right: '30px',
-            cursor: 'pointer',
-            fontSize: '16px',
-          }}
-        >
-          ×
-        </Text>
-      )}
-
-      <Text
-        style={{
-          position: 'absolute',
-          right: '8px',
-          fontSize: '14px',
-          color: disabled ? '#ccc' : '#666',
-        }}
-      >
-        🕐
-      </Text>
-
-      {isOpened && (
-        <View
-          style={{
-            position: 'absolute',
-            top: '100%',
-            left: 0,
-            right: 0,
-            backgroundColor: 'white',
-            border: '1px solid #d9d9d9',
-            borderRadius: '4px',
-            boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
-            zIndex: 1000,
-            marginTop: '4px',
-            padding: '8px',
-          }}
-        >
-          <Text>时间选择面板</Text>
-        </View>
-      )}
-    </View>
-  );
-});
-
-TimePickerComponent.displayName = 'TimePicker';
-
-export const TimePicker = TimePickerComponent;
-export default TimePicker;