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

package/src/components/RichTextEditor/types.ts

@@ -0,0 +1,87 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import { Ref } from 'react';
+import type { TextInputProps } from '../TextInput';
+
+export type ToolbarButtonName =
+  | 'bold'
+  | 'italic'
+  | 'underline'
+  | 'bulletedList'
+  | 'numberedList'
+  | 'headingOne'
+  | 'headingTwo'
+  | '|';
+
+export type TextUnit = 'character' | 'word' | 'line' | 'block';
+
+export interface RichTextEditorRef {
+  requestBlur: VoidFunction;
+  insertNodes: (nodes: Record<string, unknown>[]) => void;
+  deleteBackward: (unit?: TextUnit) => void;
+  setReadOnly: (readOnly: boolean) => void;
+}
+
+export type EditorValue = {
+  type: string;
+  children: unknown;
+}[];
+
+export interface RichTextEditorProps {
+  /**
+   * If true, the editor will be focused when the user enters the screen
+   */
+  autoFocus?: boolean;
+  /**
+   * Error message
+   */
+  error?: string;
+  /**
+   * Field value
+   */
+  value?: EditorValue;
+  /**
+   * Unique name used to communicate with webview
+   */
+  name: string;
+  /**
+   * Callback function called when the field value changed
+   */
+  onChange: (data: EditorValue) => void;
+  /**
+   * Callback function called when the cursor position changed
+   */
+  onCursorChange?: (params: { position: { top: number } }) => void;
+  /**
+   * Field placeholder
+   */
+  placeholder?: string;
+  /**
+   * Additional styles
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Field label
+   */
+  label: string;
+  /**
+   * Field helper text
+   */
+  helpText?: string;
+  /**
+   *  Whether the input is required, if true, an asterisk will be appended to the label.
+   * */
+  required?: boolean;
+  /**
+   * Testing ID of the component
+   */
+  testID?: string;
+  /**
+   * Imperative ref to expose the component method
+   */
+  forwardedRef?: Ref<RichTextEditorRef>;
+}
+
+export interface InternalRichTextEditorProps extends RichTextEditorProps {
+  TextInputComponent?: React.ComponentType<TextInputProps>;
+}

package/src/components/RichTextEditor/utils/events.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from 'events';
+
+export interface Listener<T> {
+  (data: T): void;
+}
+
+export const off = <T>(
+  emitter: EventEmitter,
+  eventName: string,
+  listener: Listener<T>
+) => {
+  emitter.off(eventName, listener);
+};
+
+export const emit = <T>(emitter: EventEmitter, eventName: string, data: T) =>
+  emitter.emit(eventName, data);
+
+export const setMaxListeners = (emitter: EventEmitter, n: number) => {
+  emitter.setMaxListeners(n);
+};
+
+export const on = <T>(
+  emitter: EventEmitter,
+  eventName: string,
+  listener: Listener<T>
+) => {
+  emitter.on(eventName, listener);
+  return () => {
+    emitter.off(eventName, listener);
+  };
+};

package/src/components/RichTextEditor/utils/rnWebView.tsx

@@ -0,0 +1,30 @@
+import WebView from 'react-native-webview';
+
+export const requestBlurEditor = (element: WebView): void => {
+  element.injectJavaScript(
+    '\n    window.document.activeElement && window.document.activeElement.blur();\n    '
+  );
+};
+
+export const requestFocusEditor = (element: WebView): void => {
+  element.injectJavaScript(
+    `
+\n
+ var el = window.document.querySelector('[role="textbox"]');
+        if (el) el.focus();
+\n
+    `
+  );
+};
+
+export interface WebViewEventMessage {
+  type: string;
+  data: unknown;
+}
+export const postMessage = (
+  element: WebView,
+  message: WebViewEventMessage
+): void => {
+  const messageString = JSON.stringify(message);
+  element.injectJavaScript(`window.postMessage(${messageString}, '*');`);
+};

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/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/index.ts

@@ -3,6 +3,7 @@ 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';
 
@@ -17,4 +18,4 @@ export {
 } from './theme';
 
 export { default as theme } from './theme';
-export { TextInput, Select, DatePicker, TimePicker };
+export { TextInput, Select, DatePicker, TimePicker, RichTextEditor };