@hero-design/rn 7.13.0 → 7.14.0

package/src/components/RichTextEditor/__tests__/__snapshots__/MentionList.spec.tsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MentionList when search string is not empty should render mention list showing filtered results 1`] = `
+<View>
+  <RCTScrollView
+    data={
+      Array [
+        Object {
+          "id": "3",
+          "name": "Hieu Pham",
+        },
+      ]
+    }
+    getItem={[Function]}
+    getItemCount={[Function]}
+    keyExtractor={[Function]}
+    keyboardShouldPersistTaps="handled"
+    onContentSizeChange={[Function]}
+    onLayout={[Function]}
+    onMomentumScrollBegin={[Function]}
+    onMomentumScrollEnd={[Function]}
+    onScroll={[Function]}
+    onScrollBeginDrag={[Function]}
+    onScrollEndDrag={[Function]}
+    removeClippedSubviews={false}
+    renderItem={[Function]}
+    scrollEventThrottle={50}
+    stickyHeaderIndices={Array []}
+    viewabilityConfigCallbackPairs={Array []}
+  >
+    <View>
+      <View
+        onLayout={[Function]}
+        style={null}
+      >
+        <Text
+          onPress={[Function]}
+        >
+          Hieu Pham
+        </Text>
+      </View>
+    </View>
+  </RCTScrollView>
+</View>
+`;

package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap

@@ -0,0 +1,526 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RichTextEditor onMessage recevied event editor-layout should update height 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "marginVertical": 8,
+        "width": "100%",
+      },
+      Object {
+        "backgroundColor": "yellow",
+      },
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#de350b",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="error"
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "alignSelf": "stretch",
+            "flexDirection": "row",
+            "flexGrow": 2,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        pointerEvents="none"
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "bottom": 0,
+              "flexDirection": "row",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "zIndex": 9999,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.42,
+                "lineHeight": 22,
+              },
+              Array [
+                Object {
+                  "alignContent": "center",
+                  "alignItems": "center",
+                  "color": "#292a2b",
+                  "fontSize": 14,
+                  "textAlignVertical": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="input-label"
+          themeFontSize="medium"
+          themeFontWeight="regular"
+          themeIntent="body"
+          themeVariant="error"
+        >
+          Rich Text Editor
+        </Text>
+      </View>
+      <View
+        accessible={true}
+        focusable={true}
+        height={480}
+        hideKeyboardAccessoryView={true}
+        keyboardDisplayRequiresUserAction={false}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        originWhitelist={
+          Array [
+            "*",
+          ]
+        }
+        scrollEnabled={false}
+        source={
+          Object {
+            "html": "
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <meta charset=\\"utf-8\\">
+          <meta name=\\"viewport\\" content=\\"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0\\">
+          <style>
+            body {
+              margin: 0;
+            }
+          </style>
+        </head>
+        <body>
+          <div id=\\"root\\"></div>
+          <script>
+            window.__editorConfigs = {
+              placeholder: \\"\\",
+              initialValue: [{\\"type\\":\\"paragraph\\",\\"children\\":[{\\"text\\":\\"\\"}]}],
+              isAndroid: false,
+              autoFocus: true,
+              style: {
+                padding: '0 !important',
+                fontSize: 14
+              }
+            };
+            [object Object]
+          </script>
+        </body>
+      </html>
+      ",
+          }
+        }
+        style={
+          Array [
+            Object {
+              "alignSelf": "stretch",
+              "backgroundColor": "transparent",
+              "flexGrow": 2,
+              "fontSize": 14,
+              "height": 480,
+              "marginHorizontal": 8,
+              "minHeight": 21,
+              "textAlignVertical": "center",
+            },
+            Object {
+              "backgroundColor": "yellow",
+            },
+          ]
+        }
+        testID="webview"
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "paddingLeft": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flex": 1,
+              "flexDirection": "row",
+              "flexGrow": 4,
+              "marginRight": 4,
+            },
+            undefined,
+          ]
+        }
+      >
+        <HeroIcon
+          name="circle-info"
+          style={
+            Array [
+              Object {
+                "color": "#de350b",
+                "fontSize": 16,
+              },
+              undefined,
+            ]
+          }
+          testID="input-error-icon"
+          themeIntent="danger"
+          themeSize="xsmall"
+        />
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.42,
+                "lineHeight": 22,
+              },
+              Array [
+                Object {
+                  "color": "#de350b",
+                  "fontSize": 12,
+                  "marginLeft": 4,
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="input-error-message"
+          themeFontSize="medium"
+          themeFontWeight="regular"
+          themeIntent="body"
+        >
+          this is error
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`RichTextEditor should render correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "marginVertical": 8,
+        "width": "100%",
+      },
+      Object {
+        "backgroundColor": "yellow",
+      },
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#de350b",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="error"
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "alignSelf": "stretch",
+            "flexDirection": "row",
+            "flexGrow": 2,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        pointerEvents="none"
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "bottom": 0,
+              "flexDirection": "row",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "zIndex": 9999,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.42,
+                "lineHeight": 22,
+              },
+              Array [
+                Object {
+                  "alignContent": "center",
+                  "alignItems": "center",
+                  "color": "#292a2b",
+                  "fontSize": 14,
+                  "textAlignVertical": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="input-label"
+          themeFontSize="medium"
+          themeFontWeight="regular"
+          themeIntent="body"
+          themeVariant="error"
+        >
+          Rich Text Editor
+        </Text>
+      </View>
+      <View
+        accessible={true}
+        focusable={true}
+        hideKeyboardAccessoryView={true}
+        keyboardDisplayRequiresUserAction={false}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        originWhitelist={
+          Array [
+            "*",
+          ]
+        }
+        scrollEnabled={false}
+        source={
+          Object {
+            "html": "
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <meta charset=\\"utf-8\\">
+          <meta name=\\"viewport\\" content=\\"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0\\">
+          <style>
+            body {
+              margin: 0;
+            }
+          </style>
+        </head>
+        <body>
+          <div id=\\"root\\"></div>
+          <script>
+            window.__editorConfigs = {
+              placeholder: \\"\\",
+              initialValue: [{\\"type\\":\\"paragraph\\",\\"children\\":[{\\"text\\":\\"\\"}]}],
+              isAndroid: false,
+              autoFocus: true,
+              style: {
+                padding: '0 !important',
+                fontSize: 14
+              }
+            };
+            [object Object]
+          </script>
+        </body>
+      </html>
+      ",
+          }
+        }
+        style={
+          Array [
+            Object {
+              "alignSelf": "stretch",
+              "backgroundColor": "transparent",
+              "flexGrow": 2,
+              "fontSize": 14,
+              "height": undefined,
+              "marginHorizontal": 8,
+              "minHeight": 21,
+              "textAlignVertical": "center",
+            },
+            Object {
+              "backgroundColor": "yellow",
+            },
+          ]
+        }
+        testID="webview"
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "paddingLeft": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flex": 1,
+              "flexDirection": "row",
+              "flexGrow": 4,
+              "marginRight": 4,
+            },
+            undefined,
+          ]
+        }
+      >
+        <HeroIcon
+          name="circle-info"
+          style={
+            Array [
+              Object {
+                "color": "#de350b",
+                "fontSize": 16,
+              },
+              undefined,
+            ]
+          }
+          testID="input-error-icon"
+          themeIntent="danger"
+          themeSize="xsmall"
+        />
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.42,
+                "lineHeight": 22,
+              },
+              Array [
+                Object {
+                  "color": "#de350b",
+                  "fontSize": 12,
+                  "marginLeft": 4,
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="input-error-message"
+          themeFontSize="medium"
+          themeFontWeight="regular"
+          themeIntent="body"
+        >
+          this is error
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;

package/src/components/RichTextEditor/constants.ts

@@ -0,0 +1,20 @@
+export enum ToolbarEvents {
+  Bold = 'bold',
+  Italic = 'italic',
+  Underline = 'underline',
+  BulletedList = 'bulleted-list',
+  NumberedList = 'numbered-list',
+  HeadingOne = 'heading-one',
+  HeadingTwo = 'heading-two',
+}
+
+export enum ToolbarButtonName {
+  Bold = 'bold',
+  Italic = 'italic',
+  Underline = 'underline',
+  BulletedList = 'bulletedList',
+  NumberedList = 'numberedList',
+  HeadingOne = 'headingOne',
+  HeadingTwo = 'headingTwo',
+  Seperator = '|',
+}

package/src/components/RichTextEditor/hero-editor.d.ts

@@ -0,0 +1,8 @@
+declare module 'hero-editor/dist/app.js' {
+  const script: string;
+  export default script;
+}
+
+declare module 'hero-editor' {
+  export function isEmptyContent(content: any): boolean;
+}

package/src/components/RichTextEditor/index.tsx

@@ -0,0 +1,8 @@
+import RichTextEditor from './RichTextEditor';
+import MentionList from './MentionList';
+import Toolbar from './EditorToolbar';
+
+export default Object.assign(RichTextEditor, {
+  MentionList,
+  Toolbar,
+});

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

@@ -0,0 +1,19 @@
+import WebView from 'react-native-webview';
+
+export const requestBlurEditor = (element: WebView): void => {
+  element.injectJavaScript(
+    '\n    window.document.activeElement && window.document.activeElement.blur();\n    '
+  );
+};
+
+export interface WebViewEventMessage {
+  type: string;
+  data: any;
+}
+export const postMessage = (
+  element: WebView,
+  message: WebViewEventMessage
+): void => {
+  const messageString = JSON.stringify(message);
+  element.injectJavaScript(`window.postMessage(${messageString}, '*');`);
+};