@hero-design/rn-work-uikit 1.3.0 → 1.4.0

package/src/components/Select/__tests__/index.spec.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import Select from '..';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+import { noop } from '../../../utils/functions';
+
+const options = [
+  { text: 'Monday', value: 'mon' },
+  { text: 'Tuesday', value: 'tue' },
+  { text: 'Wednesday', value: 'wed' },
+  { text: 'Thursday', value: 'thu' },
+  { text: 'Friday', value: 'fri' },
+  { text: 'Saturday', value: 'sat' },
+  { text: 'Sunday', value: 'sun', disabled: true },
+];
+
+describe('Select', () => {
+  it('renders correctly (snapshot)', () => {
+    const { toJSON } = renderWithTheme(
+      <Select
+        value="mon"
+        onConfirm={noop}
+        options={options}
+        label="Select Label"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('MultiSelect', () => {
+  it('renders correctly (snapshot)', () => {
+    const { toJSON } = renderWithTheme(
+      <Select.Multi
+        value={['tue', 'wed']}
+        onConfirm={noop}
+        options={options}
+        label="Select Label"
+        footerLabel="Confirm"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/TextInput/Group/__tests__/__snapshots__/index.spec.tsx.snap

@@ -91,7 +91,6 @@ exports[`TextInputGroup should render: xxx 1`] = `
               {
                 "alignItems": "center",
                 "backgroundColor": "transparent",
-                "flex": 1,
                 "flexDirection": "row",
               },
             ],
@@ -344,7 +343,6 @@ exports[`TextInputGroup should render: xxx 1`] = `
               {
                 "alignItems": "center",
                 "backgroundColor": "transparent",
-                "flex": 1,
                 "flexDirection": "row",
               },
             ],
@@ -706,7 +704,6 @@ exports[`TextInputGroup should render: xxx 1`] = `
               {
                 "alignItems": "center",
                 "backgroundColor": "transparent",
-                "flex": 1,
                 "flexDirection": "row",
               },
             ],

package/src/components/TextInput/InputComponent.tsx

@@ -1,9 +1,52 @@
-import React from 'react';
-import { TextInput as RNTextInput } from 'react-native';
-import type { TextInputProps as NativeTextInputProps } from 'react-native';
+import React, { useImperativeHandle, useRef } from 'react';
+import {
+  TextInput as RNTextInput,
+  TextInputProps as RNTextInputProps,
+} from 'react-native';
 import { StyledTextInput } from './StyledTextInput';
 import { useTheme } from '../../theme';
-import type { TextInputVariant } from './types';
+import type {
+  NativeTextInputProps,
+  TextInputRef,
+  TextInputVariant,
+} from './types';
+
+interface DefaultTextInputProps {
+  variant: TextInputVariant;
+  /** Native TextInput props */
+  nativeInputProps: NativeTextInputProps;
+}
+
+const DefaultTextInput = React.forwardRef<TextInputRef, DefaultTextInputProps>(
+  ({ variant, nativeInputProps }, ref) => {
+    const theme = useTheme();
+    const inputRef = useRef<RNTextInput>(null);
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
+        clear: () => inputRef.current?.clear(),
+        isFocused: () => inputRef.current?.isFocused() ?? false,
+        setNativeProps: (props: RNTextInputProps) => {
+          inputRef.current?.setNativeProps(props);
+        },
+      }),
+      []
+    );
+
+    // Default styled input with theme and variant support
+    return (
+      <StyledTextInput
+        {...nativeInputProps}
+        themeVariant={variant}
+        multiline={variant === 'textarea' || nativeInputProps.multiline}
+        ref={inputRef}
+        placeholderTextColor={theme.__hd__.textInput.colors.placeholder}
+      />
+    );
+  }
+);
 
 export interface InputComponentProps {
   /** Input type ('text' or 'textarea') */
@@ -11,7 +54,10 @@ export interface InputComponentProps {
   /** All props passed to the underlying TextInput */
   nativeInputProps: NativeTextInputProps;
   /** Optional custom input renderer function */
-  renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
+  renderInputValue?: (
+    inputProps: NativeTextInputProps,
+    ref?: React.ForwardedRef<TextInputRef>
+  ) => React.ReactNode;
 }
 
 /**
@@ -36,21 +82,16 @@ export interface InputComponentProps {
  *
  * @param props - The component props (see InputComponentProps interface for details)
  */
-const InputComponent = React.forwardRef<RNTextInput, InputComponentProps>(
+const InputComponent = React.forwardRef<TextInputRef, InputComponentProps>(
   ({ variant, nativeInputProps, renderInputValue }, ref) => {
-    const theme = useTheme();
-
-    return renderInputValue ? (
-      // Custom input renderer provided
-      <>{renderInputValue(nativeInputProps)}</>
-    ) : (
-      // Default styled input with theme and variant support
-      <StyledTextInput
-        {...nativeInputProps}
-        themeVariant={variant}
-        multiline={variant === 'textarea' || nativeInputProps.multiline}
+    if (renderInputValue) {
+      return <>{renderInputValue({ ...nativeInputProps }, ref)}</>;
+    }
+    return (
+      <DefaultTextInput
+        variant={variant}
+        nativeInputProps={nativeInputProps}
         ref={ref}
-        placeholderTextColor={theme.__hd__.textInput.colors.placeholder}
       />
     );
   }

package/src/components/TextInput/InputRow.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback, useState } from 'react';
-import { TextInput as RNTextInput, View } from 'react-native';
+import { View } from 'react-native';
 import type {
   NativeSyntheticEvent,
-  TextInputProps as NativeTextInputProps,
   TextInputFocusEventData,
 } from 'react-native';
 import { IconName } from '@hero-design/rn';
@@ -10,7 +9,11 @@ import { StyledInputRow } from './StyledTextInput';
 import PrefixComponent from './PrefixComponent';
 import InputComponent from './InputComponent';
 import type { State } from './StyledTextInput';
-import type { TextInputVariant } from './types';
+import type {
+  NativeTextInputProps,
+  TextInputRef,
+  TextInputVariant,
+} from './types';
 
 interface InputRowProps {
   /** Current state of the input (focused, error, disabled, etc.) */
@@ -22,7 +25,10 @@ interface InputRowProps {
   /** Native TextInput props passed to the input component */
   nativeInputProps: NativeTextInputProps;
   /** Optional custom render function for input value */
-  renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
+  renderInputValue?: (
+    inputProps: NativeTextInputProps,
+    ref?: React.ForwardedRef<TextInputRef>
+  ) => React.ReactNode;
   /** Whether the input value is empty */
   isEmptyValue: boolean;
   /** Whether the input should be visible when not focused and empty. Defaults to true. */
@@ -52,7 +58,7 @@ interface InputRowProps {
  * 1. Conditionally visible prefix component (icon or custom element)
  * 2. Conditionally visible input component (TextInput or custom rendered input)
  */
-const InputRow = React.forwardRef<RNTextInput, InputRowProps>(
+const InputRow = React.forwardRef<TextInputRef, InputRowProps>(
   (
     {
       state,
@@ -75,7 +81,7 @@ const InputRow = React.forwardRef<RNTextInput, InputRowProps>(
 
     // Simplified callback functions (removed unnecessary memoization for simple cases)
     const handleFocus = useCallback(
-      (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      (event?: NativeSyntheticEvent<TextInputFocusEventData>) => {
         setIsFocused(true);
         nativeInputProps.onFocus?.(event);
       },
@@ -83,7 +89,7 @@ const InputRow = React.forwardRef<RNTextInput, InputRowProps>(
     );
 
     const handleBlur = useCallback(
-      (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      (event?: NativeSyntheticEvent<TextInputFocusEventData>) => {
         setIsFocused(false);
         nativeInputProps.onBlur?.(event);
       },

package/src/components/TextInput/StyledTextInput.tsx

@@ -42,7 +42,6 @@ const StyledFloatingLabelContainer = styled(Animated.View)<{
   themeVariant: Variant;
 }>(({ themeVariant }) => ({
   flexDirection: 'row',
-  flex: 1,
   alignItems: themeVariant === 'text' ? 'center' : 'flex-start',
   backgroundColor: 'transparent',
 }));

package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap

@@ -75,7 +75,6 @@ exports[`TextInput when user applies custom styling should respect user-provided
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -432,7 +431,6 @@ exports[`TextInput when user chooses textarea variant should provide multiline t
             {
               "alignItems": "flex-start",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -712,7 +710,6 @@ exports[`TextInput when user encounters a disabled field should display content
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -991,7 +988,6 @@ exports[`TextInput when user encounters a read-only field should display content
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -1354,7 +1350,6 @@ exports[`TextInput when user has entered text should show the input content and
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -1717,7 +1712,6 @@ exports[`TextInput when user interacts with placeholder text starting from empty
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -2037,7 +2031,6 @@ exports[`TextInput when user needs programmatic control should provide ref metho
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -2316,7 +2309,6 @@ exports[`TextInput when user provides default values starting with pre-filled co
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -2672,7 +2664,6 @@ exports[`TextInput when user provides default values when both default and contr
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -3029,7 +3020,6 @@ exports[`TextInput when user sees a loading state should show loading indicator
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -3411,7 +3401,6 @@ exports[`TextInput when user sees a required field should indicate the field is
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -3744,7 +3733,6 @@ exports[`TextInput when user sees a textarea with character count should display
             {
               "alignItems": "flex-start",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -4144,7 +4132,6 @@ exports[`TextInput when user sees a textarea with character count should hide ch
             {
               "alignItems": "flex-start",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -4511,7 +4498,6 @@ exports[`TextInput when user sees an empty input field should display label and
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -4873,7 +4859,6 @@ exports[`TextInput when user sees an error state should display error message to
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -5251,7 +5236,6 @@ exports[`TextInput when user sees helper text should display guidance text to as
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],
@@ -5571,7 +5555,6 @@ exports[`TextInput when user sees input with custom prefix and suffix elements s
             {
               "alignItems": "center",
               "backgroundColor": "transparent",
-              "flex": 1,
               "flexDirection": "row",
             },
           ],

package/src/components/TextInput/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef, useCallback } from 'react';
-import { StyleSheet, TextInput as RNTextInput } from 'react-native';
+import { StyleSheet } from 'react-native';
 import type {
-  TextInputProps as NativeTextInputProps,
   StyleProp,
   ViewStyle,
   NativeSyntheticEvent,
   TextInputFocusEventData,
+  ColorValue,
 } from 'react-native';
 import {
   StyledInputWrapper,
@@ -23,8 +23,10 @@ import FloatingLabel from './FloatingLabel';
 import InputRow from './InputRow';
 import type {
   InternalTextInputProps,
+  NativeTextInputProps,
   TextInputHandles,
   TextInputProps,
+  TextInputRef,
 } from './types';
 import Group from './Group';
 
@@ -89,6 +91,17 @@ const extractBorderStyles = (style: StyleProp<ViewStyle>) => {
   return borderStyles;
 };
 
+// Create container style without background color using a helper function
+const getContainerStyle = (
+  style: StyleProp<ViewStyle>,
+  customBackgroundColor?: ColorValue
+) => {
+  const flattenedStyle = style ? { ...StyleSheet.flatten(style) } : {};
+  if (customBackgroundColor) {
+    delete flattenedStyle.backgroundColor;
+  }
+  return flattenedStyle;
+};
 /**
  * TextInput Layout Structure:
  *
@@ -171,7 +184,7 @@ export const InternalTextInput = forwardRef<
 
     const theme = useTheme();
 
-    const innerTextInput = React.useRef<RNTextInput | null>(null);
+    const innerTextInput = React.useRef<TextInputRef | null>(null);
     React.useImperativeHandle(
       ref,
       () => ({
@@ -182,7 +195,7 @@ export const InternalTextInput = forwardRef<
         },
         clear: () => innerTextInput.current?.clear(),
         setNativeProps: (args: NativeTextInputProps) =>
-          innerTextInput.current?.setNativeProps(args),
+          innerTextInput.current?.setNativeProps?.(args),
         isFocused: () => innerTextInput.current?.isFocused() || false,
         blur: () => innerTextInput.current?.blur(),
       }),
@@ -198,7 +211,7 @@ export const InternalTextInput = forwardRef<
 
     // Simplified callback functions (removed unnecessary memoization for simple cases)
     const handleFocus = useCallback(
-      (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      (event?: NativeSyntheticEvent<TextInputFocusEventData>) => {
         setIsFocused(true);
         onFocus?.(event);
       },
@@ -206,7 +219,7 @@ export const InternalTextInput = forwardRef<
     );
 
     const handleBlur = useCallback(
-      (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      (event?: NativeSyntheticEvent<TextInputFocusEventData>) => {
         setIsFocused(false);
         onBlur?.(event);
       },
@@ -265,11 +278,7 @@ export const InternalTextInput = forwardRef<
       accessibilityLabel,
     };
 
-    // Create container style without background color
-    const containerStyle = style ? { ...StyleSheet.flatten(style) } : {};
-    if (customBackgroundColor) {
-      delete containerStyle.backgroundColor;
-    }
+    const containerStyle = getContainerStyle(style, customBackgroundColor);
 
     const isDisabledOrReadonly = state === 'disabled' || state === 'readonly';
 

package/src/components/TextInput/types.ts

@@ -1,9 +1,11 @@
 import type {
-  TextInputProps as NativeTextInputProps,
+  TextInputProps as RNTextInputProps,
   StyleProp,
   ViewStyle,
   TextStyle,
   TextInput as RNTextInput,
+  NativeSyntheticEvent,
+  TextInputFocusEventData,
 } from 'react-native';
 import type { IconName } from '@hero-design/rn';
 
@@ -14,7 +16,27 @@ export type TextInputHandles = Pick<
 
 export type TextInputVariant = 'text' | 'textarea';
 
-export interface TextInputProps extends NativeTextInputProps {
+export type NativeTextInputProps = Omit<
+  RNTextInputProps,
+  'onFocus' | 'onBlur'
+> & {
+  onFocus?: (
+    event?: NativeSyntheticEvent<TextInputFocusEventData>
+  ) => void | undefined;
+  onBlur?: (
+    event?: NativeSyntheticEvent<TextInputFocusEventData>
+  ) => void | undefined;
+};
+
+export interface TextInputRef {
+  focus: () => void;
+  blur: () => void;
+  clear: () => void;
+  isFocused: () => boolean;
+  setNativeProps?: (props: RNTextInputProps) => void;
+}
+
+export type TextInputProps = NativeTextInputProps & {
   /**
    * Field label.
    */
@@ -83,7 +105,10 @@ export interface TextInputProps extends NativeTextInputProps {
   /**
    * Customise input value renderer
    */
-  renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
+  renderInputValue?: (
+    inputProps: NativeTextInputProps,
+    ref?: React.ForwardedRef<TextInputRef>
+  ) => React.ReactNode;
   /**
    * Component ref.
    */
@@ -92,7 +117,7 @@ export interface TextInputProps extends NativeTextInputProps {
    * Component variant.
    */
   variant?: TextInputVariant;
-}
+};
 
 export interface InternalTextInputProps extends TextInputProps {
   /**

package/src/components/TimePicker/__tests__/index.spec.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import TimePicker from '..';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+
+describe('TimePicker', () => {
+  it('renders TimePickerIOS when OS is iOS', () => {
+    Platform.OS = 'ios';
+    const { getByTestId } = renderWithTheme(
+      <TimePicker
+        label="Start time"
+        value={new Date('December 17, 1995 03:24:00')}
+        confirmLabel="Confirm"
+        onChange={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('timePickerInputIOS')).toBeDefined();
+  });
+
+  it('renders TimePickerAndroid when OS is android', () => {
+    Platform.OS = 'android';
+    const { getByTestId } = renderWithTheme(
+      <TimePicker
+        label="Start time"
+        value={new Date('December 17, 1995 03:24:00')}
+        confirmLabel="Confirm"
+        onChange={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('timePickerInputAndroid')).toBeDefined();
+  });
+});

package/src/components/TimePicker/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import {
+  TimePicker as InternalTimePicker,
+  TimePickerProps,
+} from '@hero-design/rn';
+import TextInput from '../TextInput';
+
+const TimePicker = (props: TimePickerProps) => {
+  return <InternalTimePicker {...props} TextInputComponent={TextInput} />;
+};
+
+export default TimePicker;

package/src/index.ts

@@ -1,6 +1,9 @@
 // Re-export everything from @hero-design/rn except theme exports we want to override
 import TextInput from './components/TextInput';
 import Select from './components/Select';
+import DatePicker from './components/DatePicker';
+import TimePicker from './components/TimePicker';
+import RichTextEditor from './components/RichTextEditor';
 
 export * from '@hero-design/rn';
 
@@ -15,4 +18,4 @@ export {
 } from './theme';
 
 export { default as theme } from './theme';
-export { TextInput, Select };
+export { TextInput, Select, DatePicker, TimePicker, RichTextEditor };

package/src/utils/functions.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export const noop = (): void => {};