taro-uno-ui 0.9.0-beta

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

@@ -0,0 +1,306 @@
+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

@@ -0,0 +1,228 @@
+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;