@hero-design/rn-work-uikit 1.3.0 → 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}, '*');`);
+};