@hero-design/rn 7.16.2 → 7.17.1

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

@@ -2,6 +2,9 @@ import { fireEvent } from '@testing-library/react-native';
 import React from 'react';
 import renderWithTheme from '../../../../testHelpers/renderWithTheme';
 import MultiSelect from '..';
+import Typography from '../../../Typography';
+import List from '../../../List';
+import { ListRenderOptionInfo } from '../../types';
 
 const options = [
   { text: 'Monday', value: 'mon' },
@@ -10,9 +13,65 @@ const options = [
   { text: 'Thursday', value: 'thu' },
   { text: 'Friday', value: 'fri' },
   { text: 'Saturday', value: 'sat' },
-  { text: 'Sunday', value: 'sun' },
+  { text: 'Sunday', value: 'sun', disabled: true },
 ];
 
+const sections = [
+  { category: 'A', data: [{ text: 'A1', value: 'a1' }] },
+  {
+    category: 'B',
+    data: [
+      { text: 'B1', value: 'b1' },
+      { text: 'B2', value: 'b2' },
+    ],
+  },
+];
+
+type CustomOptionType = {
+  text: string;
+  value: string;
+  role: string;
+};
+
+const collaboratorSections = [
+  {
+    category: 'D',
+    data: [
+      { text: 'Daniel', value: 'daniel', role: 'Senior Developer' },
+      { text: 'Daemon', value: 'daemon', role: 'Manager' },
+    ],
+  },
+  {
+    category: 'J',
+    data: [
+      { text: 'Jennifer', value: 'jennifer', role: 'UX Designer' },
+      { text: 'Josh ', value: 'josh', role: 'Junior Developer' },
+    ],
+  },
+];
+
+const renderMultipleOption = ({
+  item,
+  selected,
+  onPress,
+}: ListRenderOptionInfo<string, CustomOptionType>) => (
+  <List.BasicItem
+    selected={selected}
+    suffix={selected ? 'checkmark' : undefined}
+    onPress={onPress}
+    title={
+      <>
+        <Typography.Text fontSize="large" fontWeight="semi-bold">
+          {item.text}
+        </Typography.Text>
+        <Typography.Text fontSize="large" intent="subdued">
+          {item.role}
+        </Typography.Text>
+      </>
+    }
+  />
+);
+
 describe('rendering', () => {
   it('renders correctly when bottom sheet is NOT visible', () => {
     const { queryAllByText, toJSON, getByTestId } = renderWithTheme(
@@ -53,6 +112,68 @@ describe('rendering', () => {
     expect(getByText('Sunday')).toBeDefined();
     expect(getByText('Confirm')).toBeDefined();
   });
+
+  it('renders correctly when input is loading', () => {
+    const { toJSON, getByTestId } = renderWithTheme(
+      <MultiSelect
+        label="Allow notifications"
+        footerLabel="Confirm"
+        options={options}
+        value={['mon', 'tue']}
+        inputProps={{ loading: true }}
+        onConfirm={jest.fn()}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByTestId('input-suffix')).toHaveProp('name', 'loading');
+  });
+
+  it('renders correctly when receives sections', () => {
+    const { queryAllByText, getByText, toJSON, getByTestId } = renderWithTheme(
+      <MultiSelect
+        label="Allow notifications"
+        footerLabel="Confirm"
+        options={sections}
+        value={['b1', 'b2']}
+        onConfirm={jest.fn()}
+      />
+    );
+    fireEvent.press(getByTestId('text-input'));
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(queryAllByText('Allow notifications')).toHaveLength(2);
+    expect(getByText('A')).toBeTruthy();
+    expect(getByText('A1')).toBeTruthy();
+    expect(getByText('B')).toBeTruthy();
+    expect(getByText('B1')).toBeTruthy();
+    expect(getByText('B2')).toBeTruthy();
+    expect(getByText('Confirm')).toBeDefined();
+  });
+
+  it('allows custom renderer', () => {
+    const { getByText, toJSON, getByTestId } = renderWithTheme(
+      <MultiSelect<string, CustomOptionType>
+        label="Choose collaborators"
+        footerLabel="Confirm"
+        options={collaboratorSections}
+        renderOption={renderMultipleOption}
+        value={[]}
+        onConfirm={jest.fn()}
+      />
+    );
+    fireEvent.press(getByTestId('text-input'));
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Daniel')).toBeTruthy();
+    expect(getByText('Senior Developer')).toBeTruthy();
+    expect(getByText('Daemon')).toBeTruthy();
+    expect(getByText('Manager')).toBeTruthy();
+    expect(getByText('Jennifer')).toBeTruthy();
+    expect(getByText('UX Designer')).toBeTruthy();
+    expect(getByText('Josh')).toBeTruthy();
+    expect(getByText('Junior Developer')).toBeTruthy();
+  });
 });
 
 describe('behavior', () => {

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

@@ -1,37 +1,41 @@
-import React, { useEffect, useState } from 'react';
-import { TouchableOpacity, Keyboard, KeyboardEvent, View } from 'react-native';
+import React, { useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
 
-import { SelectProps } from '../types';
+import { OptionType, SelectProps } from '../types';
 import BottomSheet from '../../BottomSheet';
 import Footer from '../Footer';
 import OptionList from './OptionList';
 import TextInput from '../../TextInput';
 import { StyledSearchBar } from '../StyledSelect';
+import { toFlatOptions, toSections, useKeyboard } from '../helpers';
 
-export interface MultiSelectProps<T> extends SelectProps<T> {
+export interface MultiSelectProps<V, T extends OptionType<V> = OptionType<V>>
+  extends SelectProps<V, T> {
   /**
    * Current selected value.
    */
-  value: T[];
+  value: V[];
   /**
    * event handler for footer button.
    */
-  onConfirm: (value: T[]) => void;
+  onConfirm: (value: V[]) => void;
   /**
    * Footer label.
    */
   footerLabel: string;
 }
 
-function MultiSelect<T>({
+function MultiSelect<V, T extends OptionType<V>>({
   footerLabel,
   label,
-  loading,
+  loading = false,
+  inputProps,
   onConfirm,
   onDimiss,
   onEndReached,
   onQueryChange,
   options,
+  renderOption,
   query,
   error,
   editable = true,
@@ -40,41 +44,24 @@ function MultiSelect<T>({
   style,
   testID,
   value,
-}: MultiSelectProps<T>) {
+}: MultiSelectProps<V, T>) {
+  const { isKeyboardVisible, keyboardHeight } = useKeyboard();
   const [open, setOpen] = useState(false);
   const [selectingValue, setSelectingValue] = useState(value);
-  const displayedValue = options
+  const sections = toSections(options);
+  const flatOptions = toFlatOptions(options);
+  const displayedValue = flatOptions
     .filter(opt => value.includes(opt.value))
     .map(opt => opt.text)
     .join(', ');
 
-  const [isKeyboardVisible, setKeyboardVisible] = useState(false);
-  const [keyboardHeight, setKeyboardHeight] = useState(0);
-
-  useEffect(() => {
-    const keyboardDidShowListener = Keyboard.addListener(
-      'keyboardDidShow',
-      (e: KeyboardEvent) => {
-        setKeyboardVisible(true);
-        setKeyboardHeight(e.endCoordinates.height);
-      }
-    );
-    const keyboardDidHideListener = Keyboard.addListener(
-      'keyboardDidHide',
-      () => {
-        setKeyboardVisible(false);
-      }
-    );
-
-    return () => {
-      keyboardDidHideListener.remove();
-      keyboardDidShowListener.remove();
-    };
-  }, []);
-
   return (
     <>
-      <View pointerEvents={!editable || disabled ? 'none' : 'auto'}>
+      <View
+        pointerEvents={
+          !editable || disabled || inputProps?.loading ? 'none' : 'auto'
+        }
+      >
         <TouchableOpacity onPress={() => setOpen(true)}>
           <TextInput
             label={label}
@@ -84,6 +71,7 @@ function MultiSelect<T>({
             error={error}
             editable={editable}
             disabled={disabled}
+            loading={inputProps?.loading}
             numberOfLines={numberOfLines}
             pointerEvents="none"
             style={style}
@@ -124,9 +112,11 @@ function MultiSelect<T>({
           </StyledSearchBar>
         )}
         <OptionList
+          onQueryChange={onQueryChange}
           onEndReached={onEndReached}
           loading={loading}
-          options={options}
+          sections={sections}
+          renderOption={renderOption}
           value={selectingValue}
           onPress={setSelectingValue}
         />

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

@@ -1,14 +1,30 @@
-import React from 'react';
+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} />;
+}) => {
+  const theme = useTheme();
+  return (
+    <List.BasicItem
+      selected={selected}
+      disabled={disabled}
+      onPress={onPress}
+      title={text}
+      style={{
+        marginHorizontal: theme.__hd__.select.space.optionHorizontalMargin,
+      }}
+    />
+  );
+};
 
 export default Option;

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

@@ -1,60 +1,68 @@
 import React from 'react';
+import { SectionListRenderItemInfo } from 'react-native';
 import { SingleSelectProps } 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 SingleSelectProps<T> {
-  /**
-   * event handler for select
-   */
-  onPress: (value: T | null) => void;
-}
+type OptionListProps<V, T extends OptionType<V>> = Pick<
+  SingleSelectProps<V, T>,
+  | 'keyExtractor'
+  | 'loading'
+  | 'onEndReached'
+  | 'onQueryChange'
+  | 'value'
+  | 'renderOption'
+> & {
+  onPress: (value: V | null) => 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'
->) => {
-  const rawScrollIndex = options.findIndex(option => option.value === value);
-  const scrollIndex = rawScrollIndex - 2 >= 0 ? rawScrollIndex - 2 : 0;
+}: OptionListProps<V, T>) => {
+  const scrollParams = getScrollParams(value, sections);
 
-  const RenderItem = React.memo(({ item }: RenderItemProps<T>) => (
-    <Option
-      selected={value === item.value}
-      text={item.text}
-      onPress={() => {
-        if (value === item.value) {
-          onPress(null);
-        } else {
-          onPress(item.value);
-        }
-      }}
-    />
-  ));
+  const renderItem = (info: SectionListRenderItemInfo<T, SectionType>) => {
+    const { item } = info;
+    const selected = item.value === value;
+    const onItemPress = () => {
+      if (value === item.value) {
+        onPress(null);
+      } else {
+        onPress(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/SingleSelect/__tests__/OptionList.spec.tsx

@@ -3,39 +3,50 @@ 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 new 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('b');
+    expect(pressFn).toHaveBeenCalledWith('b1');
   });
 
   it('trigger onPress correctly on unselect current 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('A'));
+    fireEvent.press(getByText('A1'));
     expect(pressFn).toBeCalledTimes(1);
     expect(pressFn).toHaveBeenCalledWith(null);
   });
@@ -43,7 +54,7 @@ describe('OptionList', () => {
   it('render isLoading correctly', () => {
     const pressFn = jest.fn();
     const { toJSON } = renderWithTheme(
-      <OptionList value="a" options={mockOptions} onPress={pressFn} loading />
+      <OptionList value="a1" sections={sections} onPress={pressFn} loading />
     );
     expect(toJSON()).toMatchSnapshot();
   });

package/src/components/Select/SingleSelect/__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,