@hero-design/rn 7.16.1 → 7.17.0

package/src/components/Select/SingleSelect/__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 SingleSelect from '..';
+import Typography from '../../../Typography';
+import List from '../../../List';
+import { ListRenderOptionInfo } from '../../types';
 
 const options = [
   { text: 'Monday', value: 'mon' },
@@ -10,9 +13,64 @@ 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 renderSingleOption = ({
+  item,
+  selected,
+  onPress,
+}: ListRenderOptionInfo<string, CustomOptionType>) => (
+  <List.BasicItem
+    selected={selected}
+    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(
@@ -50,6 +108,64 @@ describe('rendering', () => {
     expect(getByText('Saturday')).toBeDefined();
     expect(getByText('Sunday')).toBeDefined();
   });
+
+  it('renders correctly when input is loading', () => {
+    const { toJSON, getByTestId } = renderWithTheme(
+      <SingleSelect
+        label="Allow notifications"
+        options={options}
+        value="mon"
+        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(
+      <SingleSelect
+        label="Allow notifications"
+        options={sections}
+        value="a1"
+        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();
+  });
+
+  it('allows custom renderer', () => {
+    const { getByText, toJSON, getByTestId } = renderWithTheme(
+      <SingleSelect<string, CustomOptionType>
+        label="Choose collaborators"
+        options={collaboratorSections}
+        renderOption={renderSingleOption}
+        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/SingleSelect/index.tsx

@@ -1,31 +1,35 @@
-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 OptionList from './OptionList';
 import TextInput from '../../TextInput';
 import { StyledSearchBar } from '../StyledSelect';
+import { toFlatOptions, toSections, useKeyboard } from '../helpers';
 
-export interface SingleSelectProps<T> extends SelectProps<T> {
+export interface SingleSelectProps<V, T extends OptionType<V> = OptionType<V>>
+  extends SelectProps<V, T> {
   /**
    * Current selected value.
    */
-  value: T | null;
+  value: V | null;
   /**
    * on select event handler
    */
-  onConfirm: (value: T | null) => void;
+  onConfirm: (value: V | null) => void;
 }
 
-const SingleSelect = <T,>({
+const SingleSelect = <V, T extends OptionType<V>>({
   label,
-  loading,
+  loading = false,
+  inputProps,
   onConfirm,
   onDimiss,
   onEndReached,
   onQueryChange,
   options,
+  renderOption,
   query,
   error,
   editable = true,
@@ -34,38 +38,21 @@ const SingleSelect = <T,>({
   style,
   testID,
   value,
-}: SingleSelectProps<T>) => {
+}: SingleSelectProps<V, T>) => {
+  const { isKeyboardVisible, keyboardHeight } = useKeyboard();
   const [open, setOpen] = useState(false);
-  const [selectingValue, setSelectingValue] = useState<T | null>(value);
-  const displayedValue = options.find(opt => value === opt.value)?.text;
-
-  const [isKeyboardVisible, setKeyboardVisible] = useState(false);
-  const [keyboardHeight, setKeyboardHeight] = useState(0);
-
-  useEffect(() => {
-    const keyboardDidShowListener = Keyboard.addListener(
-      'keyboardWillShow',
-      (e: KeyboardEvent) => {
-        setKeyboardVisible(true);
-        setKeyboardHeight(e.endCoordinates.height);
-      }
-    );
-    const keyboardDidHideListener = Keyboard.addListener(
-      'keyboardWillHide',
-      () => {
-        setKeyboardVisible(false);
-      }
-    );
-
-    return () => {
-      keyboardDidHideListener.remove();
-      keyboardDidShowListener.remove();
-    };
-  }, []);
+  const [selectingValue, setSelectingValue] = useState<V | null>(value);
+  const sections = toSections(options);
+  const flatOptions = toFlatOptions(options);
+  const displayedValue = flatOptions.find(opt => value === opt.value)?.text;
 
   return (
     <>
-      <View pointerEvents={!editable || disabled ? 'none' : 'auto'}>
+      <View
+        pointerEvents={
+          !editable || disabled || inputProps?.loading ? 'none' : 'auto'
+        }
+      >
         <TouchableOpacity onPress={() => setOpen(true)}>
           <TextInput
             label={label}
@@ -75,6 +62,7 @@ const SingleSelect = <T,>({
             error={error}
             editable={editable}
             disabled={disabled}
+            loading={inputProps?.loading}
             numberOfLines={numberOfLines}
             pointerEvents="none"
             style={style}
@@ -109,7 +97,8 @@ const SingleSelect = <T,>({
           onQueryChange={onQueryChange}
           onEndReached={onEndReached}
           loading={loading}
-          options={options}
+          sections={sections}
+          renderOption={renderOption}
           value={selectingValue}
           onPress={selectedValue => {
             setOpen(false);

package/src/components/Select/StyledOptionList.tsx

@@ -1,63 +1,54 @@
 import { useTheme } from '@emotion/react';
-import React, { useRef, useState } from 'react';
-import { Dimensions, FlatList, ListRenderItemInfo, View } from 'react-native';
+import React, { ReactElement, useRef, useState } from 'react';
+import {
+  Dimensions,
+  SectionList,
+  SectionListRenderItemInfo,
+  View,
+} from 'react-native';
+import SectionHeading from '../SectionHeading';
 import Spinner from '../Spinner';
-import { getKey } from './helpers';
-import { OptionType, SelectProps } from './types';
+import { ScrollParams } from './helpers';
+import { OptionSpacer, SectionSpacer } from './StyledSelect';
+import { SectionData, OptionType, SelectProps, SectionType } from './types';
 
-export interface RenderItemProps<T> {
-  item: OptionType<T>;
-}
-
-export interface OptionListProps<T> extends SelectProps<T> {
-  /**
-   * FlatList renderItem Element
-   */
-  RenderItem: React.FC<RenderItemProps<T>>;
-  /**
-   * Selected scroll index
-   */
-  scrollIndex?: number;
-}
+export type StyledOptionListProps<V, T extends OptionType<V>> = Pick<
+  SelectProps<V, T>,
+  'keyExtractor' | 'loading' | 'onEndReached' | 'onQueryChange'
+> & {
+  scrollParams: ScrollParams;
+  sections: SectionData<V, T>[];
+  renderItem: (info: SectionListRenderItemInfo<T, SectionType>) => ReactElement;
+};
 
-const StyledOptionList = <T,>({
+const StyledOptionList = <V, T extends OptionType<V>>({
   keyExtractor,
   loading,
   onEndReached,
   onQueryChange,
-  options,
-  RenderItem,
-  scrollIndex = 0,
-}: Pick<
-  OptionListProps<T>,
-  | 'scrollIndex'
-  | 'keyExtractor'
-  | 'loading'
-  | 'onEndReached'
-  | 'options'
-  | 'RenderItem'
-  | 'onQueryChange'
->) => {
+  sections,
+  renderItem,
+  scrollParams,
+}: StyledOptionListProps<V, T>) => {
   const theme = useTheme();
-  const flatListRef = useRef<FlatList>(null);
+  const sectionListRef = useRef<SectionList<T, SectionType>>(null);
 
   const [onEndReachedCalled, setOnEndReachedCalled] = useState(false);
 
   return (
-    <FlatList
-      ref={flatListRef}
+    <SectionList<T, SectionType>
+      ref={sectionListRef}
       style={{
-        paddingHorizontal: theme.__hd__.select.space.optionListPadding,
         ...(onQueryChange ? { height: Dimensions.get('screen').height } : {}),
       }}
-      data={options}
+      sections={sections}
       keyExtractor={keyExtractor}
       onEndReachedThreshold={0.1}
       onEndReached={() => setOnEndReachedCalled(true)}
       onScrollToIndexFailed={() => {}}
       onContentSizeChange={() =>
-        options.length &&
-        flatListRef.current?.scrollToIndex({ index: scrollIndex })
+        sections.length &&
+        sectionListRef.current?.scrollToLocation(scrollParams)
       }
       onMomentumScrollBegin={() => {
         if (onEndReached && onEndReachedCalled && !loading) onEndReached();
@@ -76,11 +67,19 @@ const StyledOptionList = <T,>({
           </View>
         ) : null
       }
-      renderItem={({ item, index }: ListRenderItemInfo<OptionType<T>>) => (
-        <View key={getKey(item, index, keyExtractor)}>
-          <RenderItem item={item} />
-        </View>
-      )}
+      renderSectionHeader={({ section: { category } }) =>
+        category !== '' ? (
+          <SectionHeading
+            text={category}
+            style={{
+              marginBottom: 0,
+            }}
+          />
+        ) : null
+      }
+      renderItem={renderItem}
+      ItemSeparatorComponent={OptionSpacer}
+      SectionSeparatorComponent={SectionSpacer}
     />
   );
 };

package/src/components/Select/StyledSelect.tsx

@@ -1,22 +1,13 @@
-import { View, TouchableOpacity } from 'react-native';
+import { View } from 'react-native';
 import styled from '@emotion/native';
 import Typography from '../Typography';
 
-const OptionWrapper = styled(TouchableOpacity)<{
-  themeSelected: boolean;
-}>(({ theme, themeSelected }) => ({
-  flexDirection: 'row',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  borderRadius: theme.__hd__.select.radii.option,
-  padding: theme.__hd__.select.space.optionPadding,
-  backgroundColor: themeSelected
-    ? theme.__hd__.select.colors.checkedOption
-    : theme.__hd__.select.colors.option,
+const SectionSpacer = styled(View)(({ theme }) => ({
+  marginTop: theme.__hd__.select.space.sectionSpacing,
 }));
 
-const Spacer = styled(View)(({ theme }) => ({
-  marginTop: theme.__hd__.select.space.optionListSpacing,
+const OptionSpacer = styled(View)(({ theme }) => ({
+  marginTop: theme.__hd__.select.space.optionSpacing,
 }));
 
 const FooterText = styled(Typography.Text)(({ theme }) => ({
@@ -29,4 +20,4 @@ const StyledSearchBar = styled(View)(({ theme }) => ({
   paddingBottom: theme.__hd__.select.space.searchBarBottomSpacing,
 }));
 
-export { OptionWrapper, Spacer, FooterText, StyledSearchBar };
+export { SectionSpacer, OptionSpacer, FooterText, StyledSearchBar };

package/src/components/Select/__tests__/StyledSelect.spec.tsx

@@ -1,28 +1,6 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import { OptionWrapper, Spacer, FooterText } from '../StyledSelect';
-
-describe('OptionWrapper', () => {
-  it.each`
-    themeSelected
-    ${true}
-    ${false}
-  `('has selected style: $themeSelected', ({ themeSelected }) => {
-    const { toJSON } = renderWithTheme(
-      <OptionWrapper themeSelected={themeSelected} />
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
-
-describe('Spacer', () => {
-  it('has correct style', () => {
-    const { toJSON } = renderWithTheme(<Spacer />);
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
+import { FooterText } from '../StyledSelect';
 
 describe('FooterText', () => {
   it('has correct style', () => {

package/src/components/Select/__tests__/__snapshots__/StyledSelect.spec.tsx.snap

@@ -26,70 +26,3 @@ exports[`FooterText has correct style 1`] = `
   Confirm
 </Text>
 `;
-
-exports[`OptionWrapper has selected style: false 1`] = `
-<View
-  accessible={true}
-  collapsable={false}
-  focusable={false}
-  nativeID="animatedComponent"
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#ffffff",
-      "borderRadius": 4,
-      "flexDirection": "row",
-      "justifyContent": "space-between",
-      "opacity": 1,
-      "padding": 16,
-    }
-  }
-/>
-`;
-
-exports[`OptionWrapper has selected style: true 1`] = `
-<View
-  accessible={true}
-  collapsable={false}
-  focusable={false}
-  nativeID="animatedComponent"
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#f1e9fb",
-      "borderRadius": 4,
-      "flexDirection": "row",
-      "justifyContent": "space-between",
-      "opacity": 1,
-      "padding": 16,
-    }
-  }
-/>
-`;
-
-exports[`Spacer has correct style 1`] = `
-<View
-  style={
-    Array [
-      Object {
-        "marginTop": 4,
-      },
-      undefined,
-    ]
-  }
-/>
-`;

package/src/components/Select/__tests__/helpers.spec.tsx

@@ -0,0 +1,74 @@
+import {
+  getScrollParams,
+  isSections,
+  toFlatOptions,
+  toSections,
+} from '../helpers';
+
+const sections = [
+  { category: 'A', data: [{ text: 'A1', value: 'a1' }] },
+  {
+    category: 'B',
+    data: [
+      { text: 'B1', value: 'b1' },
+      { text: 'B2', value: 'b2' },
+    ],
+  },
+];
+
+const flatOptions = [
+  { text: 'A', value: 'a' },
+  { text: 'B', value: 'b' },
+];
+
+describe('isSections', () => {
+  it('returns true if receives sections', () => {
+    expect(isSections(sections)).toBe(true);
+  });
+
+  it('returns false if receives flat options', () => {
+    expect(isSections(flatOptions)).toBe(false);
+  });
+});
+
+describe('toSections', () => {
+  it('converts flat options to sections', () => {
+    expect(toSections(flatOptions)).toStrictEqual([
+      { category: '', data: flatOptions },
+    ]);
+  });
+
+  it('does not convert sections', () => {
+    expect(toSections(sections)).toStrictEqual(sections);
+  });
+});
+
+describe('toFlatOptions', () => {
+  it('converts sections to flat options', () => {
+    expect(toFlatOptions(sections)).toStrictEqual([
+      { text: 'A1', value: 'a1' },
+      { text: 'B1', value: 'b1' },
+      { text: 'B2', value: 'b2' },
+    ]);
+  });
+
+  it('does not convert flat options', () => {
+    expect(toFlatOptions(flatOptions)).toStrictEqual(flatOptions);
+  });
+});
+
+describe('getScrollParams', () => {
+  it('returns correctly when found value in sections', () => {
+    expect(getScrollParams('b2', sections)).toStrictEqual({
+      sectionIndex: 1,
+      itemIndex: 1,
+    });
+  });
+
+  it('returns 0s when not found value in sections', () => {
+    expect(getScrollParams('c', sections)).toStrictEqual({
+      sectionIndex: 0,
+      itemIndex: 0,
+    });
+  });
+});

package/src/components/Select/helpers.tsx

@@ -1,9 +1,11 @@
-import { OptionType } from './types';
+import { useEffect, useState } from 'react';
+import { Keyboard } from 'react-native';
+import { SectionData, CombinedOptionsType, OptionType } from './types';
 
-export const getKey = <T,>(
-  option: OptionType<T>,
+export const getKey = <V, T extends OptionType<V>>(
+  option: T,
   index: number,
-  keyExtractor?: (opt: OptionType<T>, i?: number) => string
+  keyExtractor?: (opt: T, i?: number) => string
 ) => {
   let key: React.Key = '';
   if (keyExtractor !== undefined) {
@@ -16,3 +18,84 @@ export const getKey = <T,>(
 
   return key;
 };
+
+export const isSections = <V, T extends OptionType<V>>(
+  options: CombinedOptionsType<V, T>
+): options is SectionData<V, T>[] => {
+  const firstOption = options[0];
+
+  return (
+    firstOption !== undefined &&
+    (firstOption as SectionData<V, T>).category !== undefined
+  );
+};
+
+export const toSections = <V, T extends OptionType<V>>(
+  options: CombinedOptionsType<V, T>
+): SectionData<V, T>[] => {
+  if (isSections(options)) {
+    return options;
+  }
+
+  return [{ category: '', data: options }];
+};
+
+export const toFlatOptions = <V, T extends OptionType<V>>(
+  options: CombinedOptionsType<V, T>
+): OptionType<V>[] => {
+  if (isSections(options)) {
+    return options.flatMap(opt => opt.data);
+  }
+
+  return options;
+};
+
+export type ScrollParams = {
+  itemIndex: number;
+  sectionIndex: number;
+};
+
+export const getScrollParams = <V, T extends OptionType<V>>(
+  value: V,
+  sections: SectionData<V, T>[]
+): ScrollParams => {
+  let itemIndex = -1;
+
+  const sectionIndex = sections.findIndex(section => {
+    itemIndex = section.data.findIndex(opt => opt.value === value);
+    return itemIndex !== -1;
+  });
+
+  return {
+    sectionIndex: sectionIndex < 0 ? 0 : sectionIndex,
+    itemIndex: itemIndex < 0 ? 0 : itemIndex,
+  };
+};
+
+export const useKeyboard = () => {
+  const [isKeyboardVisible, setKeyboardVisible] = useState(false);
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+
+  useEffect(() => {
+    const keyboardWillShowListener = Keyboard.addListener(
+      'keyboardWillShow',
+      e => {
+        setKeyboardVisible(true);
+        setKeyboardHeight(e.endCoordinates.height);
+      }
+    );
+    const keyboardWillHideListener = Keyboard.addListener(
+      'keyboardWillHide',
+      () => {
+        setKeyboardVisible(false);
+      }
+    );
+
+    return () => {
+      keyboardWillShowListener.remove();
+      keyboardWillHideListener.remove();
+    };
+  }, []);
+
+  return { isKeyboardVisible, keyboardHeight };
+};