add review changes

Expensify · Feb 5, 2024 · 39e42d8 · 39e42d8
1 parent 8c65023
commit 39e42d8
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 70 deletions.
diff --git a/src/MarkdownTextInput.tsx b/src/MarkdownTextInput.tsx
@@ -1,4 +1,4 @@
-import {StyleSheet, TextInput} from 'react-native';
+import {StyleSheet, TextInput, processColor} from 'react-native';
 import React from 'react';
 import type {TextInputProps} from 'react-native';
 import MarkdownTextInputDecoratorViewNativeComponent from './MarkdownTextInputDecoratorViewNativeComponent';
@@ -13,8 +13,25 @@ interface MarkdownTextInputProps extends TextInputProps {
   markdownStyle?: PartialMarkdownStyle;
 }
 
+function processColorsInMarkdownStyle(input: MarkdownStyle): MarkdownStyle {
+  const output = JSON.parse(JSON.stringify(input));
+
+  Object.keys(output).forEach((key) => {
+    const obj = output[key];
+    Object.keys(obj).forEach((prop) => {
+      // TODO: use ReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes'
+      if (!(prop === 'color' || prop.endsWith('Color'))) {
+        return;
+      }
+      obj[prop] = processColor(obj[prop]);
+    });
+  });
+
+  return output as MarkdownStyle;
+}
+
 function processMarkdownStyle(input: PartialMarkdownStyle | undefined): MarkdownStyle {
-  return StyleUtils.processColorsInMarkdownStyle(StyleUtils.mergeMarkdownStyleWithDefault(input));
+  return processColorsInMarkdownStyle(StyleUtils.mergeMarkdownStyleWithDefault(input));
 }
 
 const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>((props, ref) => {

diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx
@@ -17,7 +17,7 @@ import * as CursorUtils from './web/cursorUtils';
 import * as StyleUtils from './styleUtils';
 import type * as MarkdownTextInputDecoratorViewNativeComponent from './MarkdownTextInputDecoratorViewNativeComponent';
 import './web/MarkdownTextInput.css';
-import MarkdownInputHistory from './web/historyClass';
+import InputHistory from './web/InputHistory';
 
 require('../parser/react-native-live-markdown-parser.js');
 
@@ -39,6 +39,15 @@ try {
   throw new Error('[react-native-live-markdown] Function `preprocessStyle` from react-native-web not found.');
 }
 
+let dangerousStyleValue: (name: string, value: any, isCustomProperty: boolean) => any;
+try {
+  dangerousStyleValue =
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    require('react-native-web/dist/modules/setValueForStyles/dangerousStyleValue').default;
+} catch (e) {
+  throw new Error('[react-native-live-markdown] Function `dangerousStyleValue` from react-native-web not found.');
+}
+
 type MarkdownStyle = MarkdownTextInputDecoratorViewNativeComponent.MarkdownStyle;
 
 interface MarkdownTextInputProps extends TextInputProps {
@@ -78,8 +87,21 @@ function getPlaceholderValue(placeholder: string | undefined) {
   return placeholder.length ? placeholder : ZERO_WIDTH_SPACE;
 }
 
+function processUnitsInMarkdownStyle(input: MarkdownStyle): MarkdownStyle {
+  const output = JSON.parse(JSON.stringify(input));
+
+  Object.keys(output).forEach((key) => {
+    const obj = output[key];
+    Object.keys(obj).forEach((prop) => {
+      obj[prop] = dangerousStyleValue(prop, obj[prop], false);
+    });
+  });
+
+  return output as MarkdownStyle;
+}
+
 function processMarkdownStyle(input: MarkdownStyle | undefined): MarkdownStyle {
-  return StyleUtils.processUnitsInMarkdownStyle(StyleUtils.mergeMarkdownStyleWithDefault(input));
+  return processUnitsInMarkdownStyle(StyleUtils.mergeMarkdownStyleWithDefault(input));
 }
 
 const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
@@ -116,9 +138,9 @@ 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' : 'singleline'}`;
-    const history = useRef<MarkdownInputHistory>();
+    const history = useRef<InputHistory>();
     if (!history.current) {
-      history.current = new MarkdownInputHistory(20);
+      history.current = new InputHistory(20);
     }
 
     const flattenedStyle = useMemo(() => StyleSheet.flatten(style), [style]);

diff --git a/src/__tests__/index.test.tsx b/src/__tests__/index.test.tsx
@@ -10,7 +10,7 @@ type MarkdownType = MarkdownTypes.MarkdownType;
 
 const toBeParsedAsHTML: MatcherFunction<[expectedHTML: string]> = function (actual, expectedHTML) {
   if (typeof actual !== 'string') {
-    throw new Error('These must be of type number!');
+    throw new Error('Actual value must be a string');
   }
   let expected = expectedHTML;
   const ranges = global.parseExpensiMarkToRanges(actual);

diff --git a/src/styleUtils.ts b/src/styleUtils.ts
@@ -1,16 +1,6 @@
-import {processColor, Platform} from 'react-native';
+import {Platform} from 'react-native';
 import type * as MarkdownTextInputDecoractorView from './MarkdownTextInputDecoratorViewNativeComponent';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let dangerousStyleValue: (name: string, value: any, isCustomProperty: boolean) => any;
-try {
-  dangerousStyleValue =
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    require('react-native-web/dist/modules/setValueForStyles/dangerousStyleValue').default;
-} catch (e) {
-  throw new Error('[react-native-live-markdown] Function `dangerousStyleValue` from react-native-web not found.');
-}
-
 type MarkdownStyle = MarkdownTextInputDecoractorView.MarkdownStyle;
 
 type PartialMarkdownStyle = Partial<{
@@ -75,36 +65,6 @@ function mergeMarkdownStyleWithDefault(input: PartialMarkdownStyle | undefined):
   return output;
 }
 
-function processUnitsInMarkdownStyle(input: MarkdownStyle): MarkdownStyle {
-  const output = JSON.parse(JSON.stringify(input));
-
-  Object.keys(output).forEach((key) => {
-    const obj = output[key];
-    Object.keys(obj).forEach((prop) => {
-      obj[prop] = dangerousStyleValue(prop, obj[prop], false);
-    });
-  });
-
-  return output as MarkdownStyle;
-}
-
-function processColorsInMarkdownStyle(input: MarkdownStyle): MarkdownStyle {
-  const output = JSON.parse(JSON.stringify(input));
-
-  Object.keys(output).forEach((key) => {
-    const obj = output[key];
-    Object.keys(obj).forEach((prop) => {
-      // TODO: use ReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes'
-      if (!(prop === 'color' || prop.endsWith('Color'))) {
-        return;
-      }
-      obj[prop] = processColor(obj[prop]);
-    });
-  });
-
-  return output as MarkdownStyle;
-}
-
 export type {PartialMarkdownStyle};
 
-export {mergeMarkdownStyleWithDefault, processColorsInMarkdownStyle, processUnitsInMarkdownStyle};
+export {mergeMarkdownStyleWithDefault};
diff --git a/src/web/historyClass.ts → src/web/InputHistory.ts b/src/web/historyClass.ts → src/web/InputHistory.ts
@@ -3,39 +3,39 @@ type HistoryItem = {
   cursorPosition: number | null;
 };
 
-export default class MarkdownInputHistory {
+export default class InputHistory {
   depth: number;
 
   history: HistoryItem[];
 
-  pointerIndex: number;
+  historyIndex: number;
 
-  currentlyWritten: string | null = null;
+  currentText: string | null = null;
 
   timeout: NodeJS.Timeout | null = null;
 
   debounceTime: number;
 
-  constructor(historyDepth: number, debounceTime = 200) {
-    this.depth = historyDepth;
+  constructor(depth: number, debounceTime = 200) {
+    this.depth = depth;
     this.history = [];
-    this.pointerIndex = 0;
+    this.historyIndex = 0;
     this.debounceTime = debounceTime;
   }
 
   debouncedAdd(text: string, cursorPosition: number): void {
-    this.currentlyWritten = text;
+    this.currentText = text;
 
     if (this.timeout) {
       clearTimeout(this.timeout);
     }
 
     this.timeout = setTimeout(() => {
-      if (this.currentlyWritten == null) {
+      if (this.currentText == null) {
         return;
       }
-      this.add(this.currentlyWritten, cursorPosition);
-      this.currentlyWritten = null;
+      this.add(this.currentText, cursorPosition);
+      this.currentText = null;
     }, this.debounceTime);
   }
 
@@ -47,20 +47,20 @@ export default class MarkdownInputHistory {
       }
     }
 
-    if (this.pointerIndex < this.history.length - 1) {
-      this.history.splice(this.pointerIndex + 1);
+    if (this.historyIndex < this.history.length - 1) {
+      this.history.splice(this.historyIndex + 1);
     }
 
     this.history.push({text, cursorPosition});
     if (this.history.length > this.depth) {
       this.history.shift();
     }
 
-    this.pointerIndex = this.history.length - 1;
+    this.historyIndex = this.history.length - 1;
   }
 
   undo(): HistoryItem | null {
-    if (this.currentlyWritten !== null && this.timeout) {
+    if (this.currentText !== null && this.timeout) {
       clearTimeout(this.timeout);
       return this.history[this.history.length - 1] || null;
     }
@@ -69,22 +69,22 @@ export default class MarkdownInputHistory {
       return null;
     }
 
-    if (this.pointerIndex > 0) {
-      this.pointerIndex -= 1;
+    if (this.historyIndex > 0) {
+      this.historyIndex -= 1;
     }
-    return this.history[this.pointerIndex] || null;
+    return this.history[this.historyIndex] || null;
   }
 
   redo(): HistoryItem | null {
-    if (this.history.length === 0 || (this.currentlyWritten !== null && this.timeout)) {
+    if (this.history.length === 0 || (this.currentText !== null && this.timeout)) {
       return null;
     }
 
-    if (this.pointerIndex < this.history.length - 1) {
-      this.pointerIndex += 1;
+    if (this.historyIndex < this.history.length - 1) {
+      this.historyIndex += 1;
     } else {
       return null;
     }
-    return this.history[this.pointerIndex] || null;
+    return this.history[this.historyIndex] || null;
   }
 }