use StyleSheet.flatten to change style array to object

Expensify · Jan 31, 2024 · f7d3b9b · f7d3b9b
1 parent 93c3caa
commit f7d3b9b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 24 deletions.
diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx
@@ -9,7 +9,7 @@ import type {
   TextInputKeyPressEventData,
   TextInputFocusEventData,
 } from 'react-native';
-import React, {useEffect, useRef, useCallback} from 'react';
+import React, {useEffect, useRef, useCallback, useMemo} from 'react';
 import type {CSSProperties, MutableRefObject, ReactEventHandler, FocusEventHandler, MouseEvent, KeyboardEvent, SyntheticEvent} from 'react';
 import {StyleSheet} from 'react-native';
 import * as ParseUtils from './web/parserUtils';
@@ -97,7 +97,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       placeholderTextColor = '#ccc',
       selectTextOnFocus,
       spellCheck,
-      style,
+      style = {},
       value,
     },
     ref,
@@ -106,9 +106,8 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
     const currentlyFocusedField = useRef<HTMLDivElement | null>(null);
     const contentSelection = useRef<Selection | null>(null);
     const className = `react-native-live-markdown-input-${multiline ? 'multiline' : 'single-line'}`;
-
-    const history = useRef(new MarkdownInputHistory(50));
-
+    const history = useRef(new MarkdownInputHistory(20));
+    const flattenStyle = useMemo(() => StyleSheet.flatten(style), [style]);
     const parseText = useCallback(
       (target: HTMLDivElement, text: string | null, customMarkdownStyles: MarkdownStyle, cursorPosition: number | null = null, shouldAddToHistory = true) => {
         if (text === null) {
@@ -394,10 +393,10 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         style={
           StyleSheet.flatten([
             styles.defaultInputStyles,
-            style && {
-              caretColor: (style as TextStyle).color || 'black',
+            flattenStyle && {
+              caretColor: (flattenStyle as TextStyle).color || 'black',
             },
-            createReactDOMStyle(preprocessStyle(StyleUtils.parseStyleArrayToObject(style))),
+            createReactDOMStyle(preprocessStyle(flattenStyle)),
           ]) as CSSProperties
         }
         role={accessibilityRole || 'textbox'}
@@ -432,6 +431,7 @@ const styles = StyleSheet.create({
     whiteSpace: 'pre-wrap',
     overflow: 'scroll',
     scrollbarWidth: 'none',
+    paddingHorizontal: 100,
   },
 });
 

diff --git a/src/styleUtils.ts b/src/styleUtils.ts
@@ -1,5 +1,4 @@
 import {processColor, Platform} from 'react-native';
-import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import type * as MarkdownTextInputDecoractorView from './MarkdownTextInputDecoratorViewNativeComponent';
 
 type MarkdownStyle = MarkdownTextInputDecoractorView.MarkdownStyle;
@@ -94,24 +93,10 @@ function processColorsInMarkdownStyle(input: MarkdownStyle): MarkdownStyle {
   return output as MarkdownStyle;
 }
 
-function parseStyleArrayToObject<T extends TextStyle | ViewStyle | object>(style: StyleProp<T>): T {
-  const isArray = Array.isArray(style);
-  if (!isArray) {
-    return style as T;
-  }
-  return style.reduce((acc, val) => {
-    const isNestedArray = Array.isArray(val);
-    if (isNestedArray) {
-      return {...acc, ...parseStyleArrayToObject(val)};
-    }
-    return {...acc, ...val};
-  }, {});
-}
-
 function processMarkdownStyle(input: PartialMarkdownStyle | undefined): MarkdownStyle {
   return processColorsInMarkdownStyle(mergeMarkdownStyleWithDefault(input));
 }
 
 export type {PartialMarkdownStyle};
 
-export {processMarkdownStyle, mergeMarkdownStyleWithDefault, parseStyleArrayToObject};
+export {processMarkdownStyle, mergeMarkdownStyleWithDefault};