@hero-design/rn 7.16.2 → 7.17.1

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

@@ -6,8 +6,8 @@ exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
     Array [
       Object {
         "alignItems": "center",
-        "backgroundColor": "#fafbfb",
-        "borderTopColor": "#dadbde",
+        "backgroundColor": "#f6f6f7",
+        "borderTopColor": "#e8e9ea",
         "borderTopWidth": 0.5,
         "flexDirection": "row",
         "paddingHorizontal": 8,
@@ -46,7 +46,7 @@ exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontSize": 20,
           },
           undefined,
@@ -85,7 +85,7 @@ exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontSize": 20,
           },
           undefined,
@@ -124,7 +124,7 @@ exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontSize": 20,
           },
           undefined,
@@ -139,7 +139,7 @@ exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
       Array [
         Object {
           "alignItems": "center",
-          "backgroundColor": "#dadbde",
+          "backgroundColor": "#e8e9ea",
           "flexDirection": "row",
           "height": 16,
           "marginHorizontal": 8,
@@ -178,7 +178,7 @@ exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontSize": 20,
           },
           undefined,
@@ -217,7 +217,7 @@ exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontSize": 20,
           },
           undefined,
@@ -232,7 +232,7 @@ exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
       Array [
         Object {
           "alignItems": "center",
-          "backgroundColor": "#dadbde",
+          "backgroundColor": "#e8e9ea",
           "flexDirection": "row",
           "height": 16,
           "marginHorizontal": 8,
@@ -271,7 +271,7 @@ exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontSize": 20,
           },
           undefined,
@@ -310,7 +310,7 @@ exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontSize": 20,
           },
           undefined,

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

@@ -79,7 +79,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 14,
                 "letterSpacing": 0.42,
@@ -89,7 +89,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
                 Object {
                   "alignContent": "center",
                   "alignItems": "center",
-                  "color": "#292a2b",
+                  "color": "#001f23",
                   "fontSize": 14,
                   "textAlignVertical": "center",
                 },
@@ -234,7 +234,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 14,
                 "letterSpacing": 0.42,
@@ -342,7 +342,7 @@ exports[`RichTextEditor should render correctly 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 14,
                 "letterSpacing": 0.42,
@@ -352,7 +352,7 @@ exports[`RichTextEditor should render correctly 1`] = `
                 Object {
                   "alignContent": "center",
                   "alignItems": "center",
-                  "color": "#292a2b",
+                  "color": "#001f23",
                   "fontSize": 14,
                   "textAlignVertical": "center",
                 },
@@ -496,7 +496,7 @@ exports[`RichTextEditor should render correctly 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 14,
                 "letterSpacing": 0.42,

package/src/components/SectionHeading/__tests__/__snapshots__/StyledHeading.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`StyledHeading renders correct style 1`] = `
     Array [
       Object {
         "alignContent": "center",
-        "backgroundColor": "#dadbde",
+        "backgroundColor": "#e8e9ea",
         "display": "flex",
         "flexDirection": "row",
         "justifyContent": "space-between",

package/src/components/SectionHeading/__tests__/__snapshots__/index.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`SectionHeading allows to customise the icon 1`] = `
     Array [
       Object {
         "alignContent": "center",
-        "backgroundColor": "#dadbde",
+        "backgroundColor": "#e8e9ea",
         "display": "flex",
         "flexDirection": "row",
         "justifyContent": "space-between",
@@ -58,7 +58,7 @@ exports[`SectionHeading allows to customise the icon 1`] = `
       style={
         Array [
           Object {
-            "color": "#7622d7",
+            "color": "#8505a2",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 16,
             "letterSpacing": 0.48,
@@ -83,7 +83,7 @@ exports[`SectionHeading render icon correctly 1`] = `
     Array [
       Object {
         "alignContent": "center",
-        "backgroundColor": "#dadbde",
+        "backgroundColor": "#e8e9ea",
         "display": "flex",
         "flexDirection": "row",
         "justifyContent": "space-between",
@@ -122,7 +122,7 @@ exports[`SectionHeading render icon correctly 1`] = `
         style={
           Array [
             Object {
-              "color": "#292a2b",
+              "color": "#001f23",
               "fontSize": 24,
             },
             undefined,
@@ -136,7 +136,7 @@ exports[`SectionHeading render icon correctly 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 16,
             "letterSpacing": 0.48,
@@ -161,7 +161,7 @@ exports[`SectionHeading render right children correctly 1`] = `
     Array [
       Object {
         "alignContent": "center",
-        "backgroundColor": "#dadbde",
+        "backgroundColor": "#e8e9ea",
         "display": "flex",
         "flexDirection": "row",
         "justifyContent": "space-between",
@@ -199,7 +199,7 @@ exports[`SectionHeading render right children correctly 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 16,
             "letterSpacing": 0.48,
@@ -227,7 +227,7 @@ exports[`SectionHeading renders correctly 1`] = `
     Array [
       Object {
         "alignContent": "center",
-        "backgroundColor": "#dadbde",
+        "backgroundColor": "#e8e9ea",
         "display": "flex",
         "flexDirection": "row",
         "justifyContent": "space-between",
@@ -265,7 +265,7 @@ exports[`SectionHeading renders correctly 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 16,
             "letterSpacing": 0.48,

package/src/components/Select/MultiSelect/Option.tsx

@@ -1,22 +1,31 @@
-import React from 'react';
-import Icon from '../../Icon';
+import React, { ReactElement } from 'react';
+import { useTheme } from '../../../theme';
 import List from '../../List';
 
 const Option = ({
   text,
+  disabled = false,
   selected,
   onPress,
 }: {
-  text: string;
+  text: string | ReactElement;
+  disabled?: boolean;
   selected: boolean;
   onPress: () => void;
-}) => (
-  <List.BasicItem
-    selected={selected}
-    onPress={onPress}
-    title={text}
-    suffix={selected ? <Icon icon="checkmark" size="small" /> : undefined}
-  />
-);
+}) => {
+  const theme = useTheme();
+  return (
+    <List.BasicItem
+      selected={selected}
+      disabled={disabled}
+      onPress={onPress}
+      title={text}
+      suffix={selected ? 'checkmark' : undefined}
+      style={{
+        marginHorizontal: theme.__hd__.select.space.optionHorizontalMargin,
+      }}
+    />
+  );
+};
 
 export default Option;

package/src/components/Select/MultiSelect/OptionList.tsx

@@ -1,63 +1,69 @@
 import React from 'react';
+import { SectionListRenderItemInfo } from 'react-native';
 import { MultiSelectProps } from '.';
-
-import StyledOptionList, { RenderItemProps } from '../StyledOptionList';
+import { getScrollParams } from '../helpers';
+import StyledOptionList from '../StyledOptionList';
+import { OptionType, SectionData, SectionType } from '../types';
 import Option from './Option';
 
-interface OptionListProps<T> extends MultiSelectProps<T> {
-  /**
-   * event handler for select
-   */
-  onPress: (value: T[]) => void;
-}
+type OptionListProps<V, T extends OptionType<V>> = Pick<
+  MultiSelectProps<V, T>,
+  | 'keyExtractor'
+  | 'loading'
+  | 'onEndReached'
+  | 'onQueryChange'
+  | 'value'
+  | 'renderOption'
+> & {
+  onPress: (value: V[]) => void;
+  sections: SectionData<V, T>[];
+};
 
-const OptionList = <T,>({
+const OptionList = <V, T extends OptionType<V>>({
   keyExtractor,
   loading,
   onEndReached,
   onPress,
   onQueryChange,
-  options,
+  sections,
+  renderOption,
   value,
-}: Pick<
-  OptionListProps<T>,
-  | 'keyExtractor'
-  | 'loading'
-  | 'onEndReached'
-  | 'onPress'
-  | 'onQueryChange'
-  | 'options'
-  | 'value'
->) => {
+}: OptionListProps<V, T>) => {
   const firstValue = value?.[0];
-  const rawScrollIndex = firstValue
-    ? options.findIndex(option => option.value === firstValue)
-    : 0;
-  const scrollIndex = rawScrollIndex - 2 >= 0 ? rawScrollIndex - 2 : 0;
+  const scrollParams = getScrollParams(firstValue, sections);
 
-  const RenderItem = React.memo(({ item }: RenderItemProps<T>) => (
-    <Option
-      text={item.text}
-      selected={value.includes(item.value)}
-      onPress={() => {
-        if (value.includes(item.value)) {
-          onPress(value.filter(val => val !== item.value));
-        } else {
-          onPress([...value, item.value]);
-        }
-      }}
-    />
-  ));
+  const renderItem = (info: SectionListRenderItemInfo<T, SectionType>) => {
+    const { item } = info;
+    const selected = value.includes(info.item.value);
+    const onItemPress = () => {
+      if (value.includes(info.item.value)) {
+        onPress(value.filter(val => val !== info.item.value));
+      } else {
+        onPress([...value, info.item.value]);
+      }
+    };
+
+    return renderOption ? (
+      renderOption({ ...info, selected, onPress: onItemPress })
+    ) : (
+      <Option
+        selected={selected}
+        text={item.text}
+        disabled={item.disabled}
+        onPress={onItemPress}
+      />
+    );
+  };
 
   return (
-    <StyledOptionList<T>
+    <StyledOptionList
       keyExtractor={keyExtractor}
       loading={loading}
       onEndReached={onEndReached}
       onQueryChange={onQueryChange}
-      options={options}
-      RenderItem={RenderItem}
-      scrollIndex={scrollIndex}
+      sections={sections}
+      renderItem={renderItem}
+      scrollParams={scrollParams}
     />
   );
 };

package/src/components/Select/MultiSelect/__tests__/OptionList.spec.tsx

@@ -3,49 +3,60 @@ import { fireEvent } from '@testing-library/react-native';
 import OptionList from '../OptionList';
 import renderWithTheme from '../../../../testHelpers/renderWithTheme';
 
-const mockOptions = [
-  { text: 'A', value: 'a' },
-  { text: 'B', value: 'b' },
-  { text: 'C', value: 'c' },
+const sections = [
+  { category: 'A', data: [{ text: 'A1', value: 'a1' }] },
+  {
+    category: 'B',
+    data: [
+      { text: 'B1', value: 'b1' },
+      { text: 'B2', value: 'b2' },
+    ],
+  },
 ];
 
 describe('OptionList', () => {
   it('renders correctly', () => {
     const pressFn = jest.fn();
-    const { toJSON } = renderWithTheme(
-      <OptionList value={['a']} options={mockOptions} onPress={pressFn} />
+    const { toJSON, getByText } = renderWithTheme(
+      <OptionList value={['a1']} sections={sections} onPress={pressFn} />
     );
+
+    expect(getByText('A')).toBeTruthy();
+    expect(getByText('A1')).toBeTruthy();
+    expect(getByText('B')).toBeTruthy();
+    expect(getByText('B1')).toBeTruthy();
+    expect(getByText('B2')).toBeTruthy();
     expect(toJSON()).toMatchSnapshot();
   });
 
   it('trigger onPress correctly on select additional value', () => {
     const pressFn = jest.fn();
     const { toJSON, getByText } = renderWithTheme(
-      <OptionList value={['a']} options={mockOptions} onPress={pressFn} />
+      <OptionList value={['a1']} sections={sections} onPress={pressFn} />
     );
     expect(toJSON()).toMatchSnapshot();
-    fireEvent.press(getByText('B'));
+    fireEvent.press(getByText('B1'));
     expect(pressFn).toBeCalledTimes(1);
-    expect(pressFn).toHaveBeenCalledWith(['a', 'b']);
+    expect(pressFn).toHaveBeenCalledWith(['a1', 'b1']);
   });
 
   it('trigger onPress correctly on changing selection', () => {
     const pressFn = jest.fn();
     const { toJSON, getByText } = renderWithTheme(
-      <OptionList value={['a', 'b']} options={mockOptions} onPress={pressFn} />
+      <OptionList value={['a1', 'b1']} sections={sections} onPress={pressFn} />
     );
     expect(toJSON()).toMatchSnapshot();
-    fireEvent.press(getByText('A'));
+    fireEvent.press(getByText('A1'));
     expect(pressFn).toBeCalledTimes(1);
-    expect(pressFn).toHaveBeenCalledWith(['b']);
+    expect(pressFn).toHaveBeenCalledWith(['b1']);
   });
 
   it('render isLoading correctly', () => {
     const pressFn = jest.fn();
     const { toJSON } = renderWithTheme(
       <OptionList
-        value={['a']}
-        options={mockOptions}
+        value={['a1']}
+        sections={sections}
         onPress={pressFn}
         loading
       />

package/src/components/Select/MultiSelect/__tests__/__snapshots__/Option.spec.tsx.snap

@@ -20,12 +20,14 @@ exports[`Option renders correctly 1`] = `
     Array [
       Object {
         "alignItems": "center",
-        "backgroundColor": "#f1e9fb",
+        "backgroundColor": "#f3e6f6",
         "flexDirection": "row",
         "opacity": 1,
         "padding": 16,
       },
-      undefined,
+      Object {
+        "marginHorizontal": 12,
+      },
     ]
   }
 >
@@ -43,7 +45,7 @@ exports[`Option renders correctly 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 16,
             "letterSpacing": 0.48,
@@ -74,7 +76,7 @@ exports[`Option renders correctly 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontSize": 20,
           },
           undefined,