@hero-design/rn 7.16.2 → 7.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.16.2",
+  "version": "7.17.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.16.2",
+    "@hero-design/colors": "7.17.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.9"

package/src/components/List/BasicListItem.tsx

@@ -23,7 +23,7 @@ export interface ListItemProps {
   /**
    * The title of the component.
    */
-  title: string;
+  title: string | React.ReactElement;
   /**
    * The subtile title of the component.
    */
@@ -82,9 +82,13 @@ const BasicListItem = ({
           </StyledPrefixContainer>
         )}
         <StyledTitleContainer>
-          <Typography.Text intent="body" fontSize="large">
-            {title}
-          </Typography.Text>
+          {typeof title === 'string' ? (
+            <Typography.Text intent="body" fontSize="large">
+              {title}
+            </Typography.Text>
+          ) : (
+            title
+          )}
           {subtitle && (
             <Typography.Text intent="subdued" fontSize="small">
               {subtitle}

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

@@ -25,7 +25,9 @@ exports[`Option renders correctly 1`] = `
         "opacity": 1,
         "padding": 16,
       },
-      undefined,
+      Object {
+        "marginHorizontal": 12,
+      },
     ]
   }
 >