@hero-design/rn 7.16.1 → 7.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.16.1",
+  "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.1",
+    "@hero-design/colors": "7.17.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.9"

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -23,7 +23,7 @@ const DatePickerIOS = ({
   style,
   testID,
 }: DatePickerProps) => {
-  const [selectingDate, setSelectingDate] = useState<Date | undefined>(value);
+  const [selectingDate, setSelectingDate] = useState<Date>(value || new Date());
   const [open, setOpen] = useState(false);
 
   const displayValue = value ? formatDate(displayFormat, value) : '';
@@ -70,7 +70,7 @@ const DatePickerIOS = ({
         <StyledPickerWrapper>
           <DateTimePicker
             testID="datePickerIOS"
-            value={selectingDate || new Date()}
+            value={selectingDate}
             mode="date"
             onChange={(_: any, date: Date | undefined) => {
               if (date) {

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/List/StyledBasicListItem.tsx

@@ -18,8 +18,8 @@ const StyledListItemContainer = styled(TouchableHighlight)<{
   alignItems: 'center',
   flexDirection: 'row',
   backgroundColor: themeSelected
-    ? theme.__hd__.select.colors.checkedOption
-    : theme.__hd__.select.colors.option,
+    ? theme.__hd__.list.colors.checkedListItemContainerBackground
+    : theme.__hd__.list.colors.listItemContainerBackground,
   padding: theme.__hd__.list.space.listItemContainerPadding,
   opacity: themeDisabled
     ? theme.__hd__.list.opacity.disabled

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

@@ -1,25 +1,31 @@
-import React from 'react';
-import { View } from 'react-native';
-import Icon from '../../Icon';
-
-import Typography from '../../Typography';
-import { OptionWrapper } from '../StyledSelect';
+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;
-}) => (
-  <OptionWrapper themeSelected={selected} onPress={onPress}>
-    <View style={{ flex: 1 }}>
-      <Typography.Text fontSize="large">{text}</Typography.Text>
-    </View>
-    {selected && <Icon icon="checkmark" size="small" />}
-  </OptionWrapper>
-);
+}) => {
+  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

@@ -2,10 +2,13 @@
 
 exports[`Option renders correctly 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
   accessible={true}
-  collapsable={false}
   focusable={true}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -14,22 +17,28 @@ exports[`Option renders correctly 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#f1e9fb",
-      "borderRadius": 4,
-      "flexDirection": "row",
-      "justifyContent": "space-between",
-      "opacity": 1,
-      "padding": 16,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#f1e9fb",
+        "flexDirection": "row",
+        "opacity": 1,
+        "padding": 16,
+      },
+      Object {
+        "marginHorizontal": 12,
+      },
+    ]
   }
 >
   <View
     style={
-      Object {
-        "flex": 1,
-      }
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
     }
   >
     <Text
@@ -52,19 +61,30 @@ exports[`Option renders correctly 1`] = `
       testOption
     </Text>
   </View>
-  <HeroIcon
-    name="checkmark"
+  <View
     style={
       Array [
         Object {
-          "color": "#292a2b",
-          "fontSize": 20,
+          "marginLeft": 8,
         },
         undefined,
       ]
     }
-    themeIntent="text"
-    themeSize="small"
-  />
+  >
+    <HeroIcon
+      name="checkmark"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    />
+  </View>
 </View>
 `;