@hero-design/rn 7.13.0 → 7.14.0

package/src/components/List/__tests__/__snapshots__/StyledBasicListItem.spec.tsx.snap

@@ -1,11 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ListItemContainer renders correctly themeSelected false themeDisabled false 1`] = `
+exports[`StyledListItemContainer renders correctly themeSelected false themeDisabled false 1`] = `
 <View
   accessible={true}
-  collapsable={false}
   focusable={false}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -14,24 +12,44 @@ exports[`ListItemContainer renders correctly themeSelected false themeDisabled f
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#ffffff",
-      "flex": 1,
-      "flexDirection": "row",
-      "opacity": 1,
-      "padding": 16,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "flexDirection": "row",
+        "opacity": 1,
+        "padding": 16,
+      },
+      undefined,
+    ]
   }
-/>
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    StyledListItemContainer
+  </Text>
+</View>
 `;
 
-exports[`ListItemContainer renders correctly themeSelected false themeDisabled true 1`] = `
+exports[`StyledListItemContainer renders correctly themeSelected false themeDisabled true 1`] = `
 <View
   accessible={true}
-  collapsable={false}
   focusable={false}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -40,24 +58,44 @@ exports[`ListItemContainer renders correctly themeSelected false themeDisabled t
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#ffffff",
-      "flex": 1,
-      "flexDirection": "row",
-      "opacity": 0.38,
-      "padding": 16,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "flexDirection": "row",
+        "opacity": 0.38,
+        "padding": 16,
+      },
+      undefined,
+    ]
   }
-/>
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    StyledListItemContainer
+  </Text>
+</View>
 `;
 
-exports[`ListItemContainer renders correctly themeSelected true themeDisabled false 1`] = `
+exports[`StyledListItemContainer renders correctly themeSelected true themeDisabled false 1`] = `
 <View
   accessible={true}
-  collapsable={false}
   focusable={false}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -66,24 +104,44 @@ exports[`ListItemContainer renders correctly themeSelected true themeDisabled fa
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#f1e9fb",
-      "flex": 1,
-      "flexDirection": "row",
-      "opacity": 1,
-      "padding": 16,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#f1e9fb",
+        "flexDirection": "row",
+        "opacity": 1,
+        "padding": 16,
+      },
+      undefined,
+    ]
   }
-/>
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    StyledListItemContainer
+  </Text>
+</View>
 `;
 
-exports[`ListItemContainer renders correctly themeSelected true themeDisabled true 1`] = `
+exports[`StyledListItemContainer renders correctly themeSelected true themeDisabled true 1`] = `
 <View
   accessible={true}
-  collapsable={false}
   focusable={false}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -92,14 +150,36 @@ exports[`ListItemContainer renders correctly themeSelected true themeDisabled tr
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#f1e9fb",
-      "flex": 1,
-      "flexDirection": "row",
-      "opacity": 0.38,
-      "padding": 16,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#f1e9fb",
+        "flexDirection": "row",
+        "opacity": 0.38,
+        "padding": 16,
+      },
+      undefined,
+    ]
   }
-/>
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    StyledListItemContainer
+  </Text>
+</View>
 `;

package/src/components/List/__tests__/__snapshots__/StyledListItem.spec.tsx.snap

@@ -88,9 +88,7 @@ exports[`LeadingStatus renders correctly themeLeadingStausIntent warning 1`] = `
 exports[`ListItemContainer renders correctly themeSelected false themeVariant card 1`] = `
 <View
   accessible={true}
-  collapsable={false}
   focusable={false}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -99,31 +97,51 @@ exports[`ListItemContainer renders correctly themeSelected false themeVariant ca
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#ffffff",
-      "borderRadius": 8,
-      "flexDirection": "row",
-      "opacity": 1,
-      "padding": 16,
-      "shadowColor": "#dadbde",
-      "shadowOffset": Object {
-        "height": 2,
-        "width": 0,
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderRadius": 8,
+        "flexDirection": "row",
+        "padding": 16,
+        "shadowColor": "#dadbde",
+        "shadowOffset": Object {
+          "height": 2,
+          "width": 0,
+        },
+        "shadowOpacity": 1,
+        "shadowRadius": 4,
       },
-      "shadowOpacity": 1,
-      "shadowRadius": 4,
-    }
+      undefined,
+    ]
   }
-/>
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    StyledListItemContainer
+  </Text>
+</View>
 `;
 
 exports[`ListItemContainer renders correctly themeSelected false themeVariant full-width 1`] = `
 <View
   accessible={true}
-  collapsable={false}
   focusable={false}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -132,22 +150,42 @@ exports[`ListItemContainer renders correctly themeSelected false themeVariant fu
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "backgroundColor": "#ffffff",
-      "flexDirection": "row",
-      "opacity": 1,
-      "padding": 16,
-    }
+    Array [
+      Object {
+        "backgroundColor": "#ffffff",
+        "flexDirection": "row",
+        "padding": 16,
+      },
+      undefined,
+    ]
   }
-/>
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    StyledListItemContainer
+  </Text>
+</View>
 `;
 
 exports[`ListItemContainer renders correctly themeSelected true themeVariant card 1`] = `
 <View
   accessible={true}
-  collapsable={false}
   focusable={false}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -156,31 +194,51 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant car
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#f1e9fb",
-      "borderRadius": 8,
-      "flexDirection": "row",
-      "opacity": 1,
-      "padding": 16,
-      "shadowColor": "#dadbde",
-      "shadowOffset": Object {
-        "height": 2,
-        "width": 0,
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#f1e9fb",
+        "borderRadius": 8,
+        "flexDirection": "row",
+        "padding": 16,
+        "shadowColor": "#dadbde",
+        "shadowOffset": Object {
+          "height": 2,
+          "width": 0,
+        },
+        "shadowOpacity": 1,
+        "shadowRadius": 4,
       },
-      "shadowOpacity": 1,
-      "shadowRadius": 4,
-    }
+      undefined,
+    ]
   }
-/>
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    StyledListItemContainer
+  </Text>
+</View>
 `;
 
 exports[`ListItemContainer renders correctly themeSelected true themeVariant full-width 1`] = `
 <View
   accessible={true}
-  collapsable={false}
   focusable={false}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -189,12 +247,34 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant ful
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "backgroundColor": "#f1e9fb",
-      "flexDirection": "row",
-      "opacity": 1,
-      "padding": 16,
-    }
+    Array [
+      Object {
+        "backgroundColor": "#f1e9fb",
+        "flexDirection": "row",
+        "padding": 16,
+      },
+      undefined,
+    ]
   }
-/>
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    StyledListItemContainer
+  </Text>
+</View>
 `;

package/src/components/RichTextEditor/EditorEvent.ts

@@ -0,0 +1,7 @@
+import { EventEmitter } from 'events';
+
+const emitter = new EventEmitter();
+
+emitter.setMaxListeners(20);
+
+export { emitter };

package/src/components/RichTextEditor/EditorToolbar.tsx

@@ -0,0 +1,220 @@
+import React, {
+  ComponentType,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import Icon, { IconProps } from '../Icon';
+import { ToolbarButtonName, ToolbarEvents } from './constants';
+import { emitter } from './EditorEvent';
+import {
+  StyledSeparator,
+  StyledToolbar,
+  StyledToolbarButton,
+} from './StyledToolbar';
+import * as Events from './utils/events';
+
+type ToolbarButtonProps = {
+  icon: IconProps['icon'];
+  onPress: () => void;
+  testID?: string;
+  selected: boolean;
+};
+const ToolbarButton: ComponentType<ToolbarButtonProps> = ({
+  icon,
+  onPress,
+  testID,
+  selected,
+}: ToolbarButtonProps) => (
+  <StyledToolbarButton selected={selected} onPress={onPress} testID={testID}>
+    <Icon size="small" icon={icon} />
+  </StyledToolbarButton>
+);
+
+interface ButtonConfig {
+  icon: IconProps['icon'];
+  eventName: ToolbarEvents;
+  standalone?: boolean;
+}
+
+const buttonConfigs: Partial<Record<ToolbarButtonName, ButtonConfig>> = {
+  [ToolbarButtonName.Bold]: {
+    icon: 'format-bold',
+    eventName: ToolbarEvents.Bold,
+  },
+  [ToolbarButtonName.Italic]: {
+    icon: 'format-italic',
+    eventName: ToolbarEvents.Italic,
+  },
+  [ToolbarButtonName.Underline]: {
+    icon: 'format-underlined',
+    eventName: ToolbarEvents.Underline,
+  },
+  [ToolbarButtonName.BulletedList]: {
+    icon: 'format-list-bulleted',
+    eventName: ToolbarEvents.BulletedList,
+    standalone: true,
+  },
+  [ToolbarButtonName.NumberedList]: {
+    icon: 'format-list-numbered',
+    eventName: ToolbarEvents.NumberedList,
+    standalone: true,
+  },
+  [ToolbarButtonName.HeadingOne]: {
+    icon: 'format-heading1',
+    eventName: ToolbarEvents.HeadingOne,
+    standalone: true,
+  },
+  [ToolbarButtonName.HeadingTwo]: {
+    icon: 'format-heading2',
+    eventName: ToolbarEvents.HeadingTwo,
+    standalone: true,
+  },
+};
+
+const defaultButtons: ToolbarButtonName[] = [
+  ToolbarButtonName.Bold,
+  ToolbarButtonName.Italic,
+  ToolbarButtonName.Underline,
+  ToolbarButtonName.Seperator,
+  ToolbarButtonName.BulletedList,
+  ToolbarButtonName.NumberedList,
+  ToolbarButtonName.Seperator,
+  ToolbarButtonName.HeadingOne,
+  ToolbarButtonName.HeadingTwo,
+];
+
+export interface EditorToolbarProps {
+  /**
+   * List of buttons to display in toolbar
+   */
+  buttons?: ToolbarButtonName[];
+  /**
+   * Unique name used to communicate with webview, should be the same with the RichTextEditor component it used with
+   */
+  name: string;
+  /**
+   * Testing ID of the component
+   */
+  testID?: string;
+}
+
+type ButtonType = {
+  id: number;
+  buttonName: ToolbarButtonName;
+  selected: boolean;
+};
+
+const EditorToolbar = ({
+  name,
+  buttons = defaultButtons,
+  testID,
+}: EditorToolbarProps) => {
+  const [show, setShow] = useState(false);
+
+  const initialToolbarButtonArray: ButtonType[] = buttons.map(
+    (button, index) => ({
+      id: index + 1,
+      buttonName: button,
+      selected: false,
+    })
+  );
+
+  const [toolbarButtonArray, setToolbarButtonArray] = useState<ButtonType[]>(
+    initialToolbarButtonArray
+  );
+
+  const normalizeEventName = useCallback(
+    (event: string): string => `${name}/${event}`,
+    [name]
+  );
+
+  useEffect(() => {
+    const removeFocusListener = Events.on(
+      emitter,
+      normalizeEventName('editor-focus'),
+      () => setShow(true)
+    );
+
+    const removeBlurListener = Events.on(
+      emitter,
+      normalizeEventName('editor-blur'),
+      () => setShow(false)
+    );
+
+    return () => {
+      removeFocusListener();
+      removeBlurListener();
+    };
+  }, []);
+
+  const toggleToolbarButton = useCallback(
+    ({ buttonName: currentButtonName, selected: prevSelected }: ButtonType) => {
+      const currentButtonConfig = buttonConfigs[currentButtonName];
+      const isStandalone =
+        currentButtonConfig && currentButtonConfig.standalone;
+
+      setToolbarButtonArray(prevState =>
+        prevState.map(updatingButton => {
+          if (updatingButton.buttonName === currentButtonName) {
+            return {
+              ...updatingButton,
+              selected: !prevSelected,
+            };
+          }
+
+          const updatingButtonConfig = buttonConfigs[updatingButton.buttonName];
+          const shouldToggleOff =
+            !prevSelected &&
+            isStandalone &&
+            updatingButtonConfig &&
+            updatingButtonConfig.standalone;
+
+          return {
+            ...updatingButton,
+            selected: shouldToggleOff ? false : updatingButton.selected,
+          };
+        })
+      );
+    },
+    []
+  );
+
+  const toolbarButtons = useMemo(
+    () =>
+      toolbarButtonArray.map(button => {
+        if (button.buttonName === ToolbarButtonName.Seperator) {
+          return <StyledSeparator key={button.id} />;
+        }
+        const config = buttonConfigs[button.buttonName];
+        if (config) {
+          return (
+            <ToolbarButton
+              key={button.id}
+              testID={config.icon}
+              icon={config.icon}
+              onPress={() => {
+                toggleToolbarButton(button);
+                Events.emit(
+                  emitter,
+                  normalizeEventName(config.eventName),
+                  null
+                );
+              }}
+              selected={button.selected}
+            />
+          );
+        }
+        return null;
+      }),
+    [toolbarButtonArray]
+  );
+
+  if (show) {
+    return <StyledToolbar testID={testID}>{toolbarButtons}</StyledToolbar>;
+  }
+  return null;
+};
+
+export default EditorToolbar;