@hero-design/rn 7.16.1 → 7.17.0

package/src/components/Select/types.ts

@@ -0,0 +1,99 @@
+import { ReactElement } from 'react';
+import {
+  ListRenderItemInfo,
+  SectionListData,
+  SectionListRenderItemInfo,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { TextInputProps } from '../TextInput';
+
+export type OptionType<V> = {
+  value: V;
+  text: string;
+  key?: string;
+  disabled?: boolean;
+};
+
+export type SectionType = { category: string };
+export type SectionData<V, T extends OptionType<V>> = SectionListData<
+  T,
+  SectionType
+>;
+
+export type CombinedOptionsType<V, T extends OptionType<V>> =
+  | T[]
+  | SectionData<V, T>[];
+
+export type ListRenderOptionInfo<
+  V,
+  T extends OptionType<V>
+> = ListRenderItemInfo<T> & { selected: boolean; onPress: () => void };
+
+export type SectionListRenderOptionInfo<
+  V,
+  T extends OptionType<V>
+> = SectionListRenderItemInfo<T, SectionType> & {
+  selected: boolean;
+  onPress: () => void;
+};
+
+export interface SelectProps<V, T extends OptionType<V>>
+  extends Pick<
+    TextInputProps,
+    'editable' | 'disabled' | 'numberOfLines' | 'error'
+  > {
+  /**
+   * An array of options to be selected.
+   */
+  options: CombinedOptionsType<V, T>;
+  /**
+   * Customize option renderer.
+   */
+  renderOption?:
+    | ((info: ListRenderOptionInfo<V, T>) => ReactElement)
+    | ((info: SectionListRenderOptionInfo<V, T>) => ReactElement);
+  /**
+   * Used to extract a unique key for a given option at the specified index. Key is used for caching and as the react key to track item re-ordering.
+   * The default extractor checks option.key, and then falls back to using the index, like React does.
+   */
+  keyExtractor?: (option: T, index?: number) => string;
+  /**
+   * Current search value.
+   */
+  query?: string;
+  /**
+   * Search bar onChangeText event handler
+   */
+  onQueryChange?: (value: string) => void;
+  /**
+   * Event handler when selection dismiss
+   */
+  onDimiss?: () => void;
+  /**
+   * Event handler when end of the list reached
+   */
+  onEndReached?: () => void;
+  /**
+   * Show loading indicator at bottom of option list
+   */
+  loading?: boolean;
+  /**
+   * Props that are passed to TextInput.
+   */
+  inputProps?: {
+    loading?: boolean;
+  };
+  /**
+   * Field label.
+   */
+  label: string;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}

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

@@ -1754,6 +1754,162 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
 </View>
 `;
 
+exports[`TextInput loading renders correctly 1`] = `
+<View
+  pointerEvents="none"
+  style={
+    Array [
+      Object {
+        "marginVertical": 8,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#8b8d92",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="readonly"
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "alignSelf": "stretch",
+            "flexDirection": "row",
+            "flexGrow": 2,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        pointerEvents="none"
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "bottom": 0,
+              "flexDirection": "row",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "zIndex": 9999,
+            },
+            undefined,
+          ]
+        }
+      />
+      <TextInput
+        accessibilityState={
+          Object {
+            "disabled": true,
+          }
+        }
+        editable={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        style={
+          Array [
+            Object {
+              "alignSelf": "stretch",
+              "flexGrow": 2,
+              "fontSize": 14,
+              "marginHorizontal": 8,
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#292a2b",
+            },
+          ]
+        }
+        testID="text-input"
+      />
+    </View>
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Object {
+          "transform": Array [
+            Object {
+              "rotate": "0deg",
+            },
+          ],
+        }
+      }
+    >
+      <HeroIcon
+        name="loading"
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontSize": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="input-suffix"
+        themeIntent="text"
+        themeSize="xsmall"
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "paddingLeft": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          undefined,
+        ]
+      }
+    />
+  </View>
+</View>
+`;
+
 exports[`TextInput max length renders correctly 1`] = `
 <View
   pointerEvents="auto"
@@ -2392,7 +2548,7 @@ exports[`TextInput readonly renders correctly 1`] = `
       <TextInput
         accessibilityState={
           Object {
-            "disabled": false,
+            "disabled": true,
           }
         }
         editable={false}

package/src/components/TextInput/__tests__/index.spec.tsx

@@ -6,21 +6,30 @@ import TextInput, { getVariant } from '../index';
 
 describe('getVariant', () => {
   it.each`
-    disabled | error                       | editable | isFocused | isEmptyValue | expected
-    ${false} | ${undefined}                | ${true}  | ${false}  | ${true}      | ${'default'}
-    ${false} | ${undefined}                | ${true}  | ${false}  | ${false}     | ${'filled'}
-    ${false} | ${undefined}                | ${true}  | ${true}   | ${true}      | ${'focused'}
-    ${false} | ${undefined}                | ${false} | ${true}   | ${true}      | ${'readonly'}
-    ${false} | ${'This field is required'} | ${false} | ${true}   | ${true}      | ${'error'}
-    ${true}  | ${'This field is required'} | ${false} | ${true}   | ${true}      | ${'disabled'}
+    disabled | error                       | editable | loading  | isFocused | isEmptyValue | expected
+    ${false} | ${undefined}                | ${true}  | ${false} | ${false}  | ${true}      | ${'default'}
+    ${false} | ${undefined}                | ${true}  | ${false} | ${false}  | ${false}     | ${'filled'}
+    ${false} | ${undefined}                | ${true}  | ${false} | ${true}   | ${true}      | ${'focused'}
+    ${false} | ${undefined}                | ${false} | ${true}  | ${true}   | ${true}      | ${'readonly'}
+    ${false} | ${'This field is required'} | ${false} | ${false} | ${true}   | ${true}      | ${'error'}
+    ${true}  | ${'This field is required'} | ${false} | ${false} | ${true}   | ${true}      | ${'disabled'}
   `(
     'should return the correct variant when disabled $disabled, errorMessage $errorMessage, editable $false, isFocused $isFocused, isEmptyValue $isEmptyValue',
-    ({ disabled, error, editable, isFocused, isEmptyValue, expected }) => {
+    ({
+      disabled,
+      error,
+      editable,
+      loading,
+      isFocused,
+      isEmptyValue,
+      expected,
+    }) => {
       expect(
         getVariant({
           disabled,
           error,
           editable,
+          loading,
           isFocused,
           isEmptyValue,
         })
@@ -206,6 +215,18 @@ describe('TextInput', () => {
     });
   });
 
+  describe('loading', () => {
+    it('renders correctly', () => {
+      const { toJSON, queryAllByTestId, getByTestId } = renderWithTheme(
+        <TextInput suffix="arrow-down" loading />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
+      expect(getByTestId('input-suffix')).toHaveProp('name', 'loading');
+    });
+  });
+
   describe('max length', () => {
     it('renders correctly', () => {
       const {

package/src/components/TextInput/index.tsx

@@ -79,6 +79,10 @@ export interface TextInputProps extends NativeTextInputProps {
    * Whether the input is disabled.
    */
   disabled?: boolean;
+  /*
+   * Whether the input is loading.
+   */
+  loading?: boolean;
   /*
    * The max length of the input.
    * If the max length is set, the input will display the current length and the max length.
@@ -94,12 +98,14 @@ export const getVariant = ({
   disabled,
   error,
   editable,
+  loading,
   isFocused,
   isEmptyValue,
 }: {
   disabled?: boolean;
   error?: string;
   editable?: boolean;
+  loading: boolean;
   isFocused?: boolean;
   isEmptyValue?: boolean;
 }): Variant => {
@@ -109,7 +115,7 @@ export const getVariant = ({
   if (error) {
     return 'error';
   }
-  if (!editable) {
+  if (!editable || loading) {
     return 'readonly';
   }
   if (isFocused) {
@@ -133,6 +139,7 @@ const TextInput = ({
   required,
   editable = true,
   disabled = false,
+  loading = false,
   maxLength,
   helpText,
   value,
@@ -142,6 +149,7 @@ const TextInput = ({
   const textInputReference = useRef<RNTextInput | null>(null);
   const displayText = (value !== undefined ? value : defaultValue) ?? '';
   const isEmptyValue = displayText.length === 0;
+  const actualSuffix = loading ? 'loading' : suffix;
 
   const [isFocused, setIsFocused] = React.useState(false);
 
@@ -149,6 +157,7 @@ const TextInput = ({
     disabled,
     error,
     editable,
+    loading,
     isFocused,
     isEmptyValue,
   });
@@ -187,7 +196,7 @@ const TextInput = ({
         )}
         {typeof prefix === 'string' ? (
           <Icon
-            intent={disabled ? 'disabled-text' : 'text'}
+            intent={variant === 'disabled' ? 'disabled-text' : 'text'}
             testID="input-prefix"
             icon={prefix}
             size="xsmall"
@@ -195,7 +204,6 @@ const TextInput = ({
         ) : (
           prefix
         )}
-
         <StyledTextInputAndLabelContainer>
           {!isFocused && isEmptyValue && (
             <StyledLabelContainerInsideTextInput pointerEvents="none">
@@ -224,7 +232,9 @@ const TextInput = ({
               textStyle,
             ])}
             testID="text-input"
-            accessibilityState={{ disabled }}
+            accessibilityState={{
+              disabled: variant === 'disabled' || variant === 'readonly',
+            }}
             // @ts-ignore
             accessibilityLabelledBy={accessibilityLabelledBy}
             {...nativeProps}
@@ -249,11 +259,12 @@ const TextInput = ({
             }
           />
         </StyledTextInputAndLabelContainer>
-        {typeof suffix === 'string' ? (
+        {typeof actualSuffix === 'string' ? (
           <Icon
-            intent={disabled ? 'disabled-text' : 'text'}
+            intent={variant === 'disabled' ? 'disabled-text' : 'text'}
             testID="input-suffix"
-            icon={suffix}
+            icon={actualSuffix}
+            spin={actualSuffix === 'loading'}
             size="xsmall"
           />
         ) : (

package/src/components/TimePicker/TimePickerIOS.tsx

@@ -23,7 +23,7 @@ const TimePickerIOS = ({
   style,
   testID,
 }: TimePickerProps) => {
-  const [selectingDate, setSelectingDate] = useState<Date | undefined>(value);
+  const [selectingDate, setSelectingDate] = useState<Date>(value || new Date());
   const [open, setOpen] = useState(false);
 
   const is12Hour = displayFormat.includes('hh');
@@ -71,7 +71,7 @@ const TimePickerIOS = ({
         <StyledPickerWrapper>
           <DateTimePicker
             testID="timePickerIOS"
-            value={selectingDate || new Date()}
+            value={selectingDate}
             mode="time"
             // Current prop is24Hour config only available for Android.
             // This is a work around to get the picker to display 24 hour format for iOS.

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -552,21 +552,19 @@ Object {
     },
     "select": Object {
       "colors": Object {
-        "checkedOption": "#f1e9fb",
         "footerText": "#7622d7",
-        "option": "#ffffff",
       },
       "radii": Object {
         "option": 4,
       },
       "space": Object {
         "minimumOptionListHeight": 280,
-        "optionListPadding": 16,
-        "optionListSpacing": 4,
-        "optionPadding": 16,
+        "optionHorizontalMargin": 12,
+        "optionSpacing": 4,
         "searchBarBottomSpacing": 8,
         "searchBarHorizontalSpacing": 16,
         "searchBarMarginTopSpacing": 8,
+        "sectionSpacing": 12,
       },
     },
     "spinner": Object {

package/src/theme/components/select.ts

@@ -2,16 +2,14 @@ import { GlobalTheme } from '../global';
 
 const getSelectTheme = (theme: GlobalTheme) => {
   const colors = {
-    option: theme.colors.platformBackground,
-    checkedOption: theme.colors.primaryBackground,
     footerText: theme.colors.primary,
   };
 
   const space = {
     minimumOptionListHeight: theme.space.xxxxlarge * 5,
-    optionPadding: theme.space.medium,
-    optionListPadding: theme.space.medium, // left padding should be 12 according to the design
-    optionListSpacing: theme.space.xsmall,
+    sectionSpacing: theme.space.smallMedium,
+    optionSpacing: theme.space.xsmall,
+    optionHorizontalMargin: theme.space.smallMedium,
     searchBarMarginTopSpacing: theme.space.small,
     searchBarHorizontalSpacing: theme.space.medium,
     searchBarBottomSpacing: theme.space.small,

package/src/types.ts

@@ -10,14 +10,20 @@ import {
 } from './components/RichTextEditor';
 
 import { Theme } from './theme';
+import {
+  ListRenderOptionInfo,
+  SectionListRenderOptionInfo,
+} from './components/Select/types';
 
 export type {
   BottomNavigationTabType,
   IconName,
+  SingleSelectProps,
   MultiSelectProps,
+  ListRenderOptionInfo,
+  SectionListRenderOptionInfo,
   RichTextEditorProps,
   RichTextEditorRef,
-  SingleSelectProps,
   TabType,
   TextInputProps,
   Theme,

package/types/components/List/BasicListItem.d.ts

@@ -13,7 +13,7 @@ export interface ListItemProps {
     /**
      * The title of the component.
      */
-    title: string;
+    title: string | React.ReactElement;
     /**
      * The subtile title of the component.
      */

package/types/components/Select/MultiSelect/Option.d.ts

@@ -1,5 +1,7 @@
-declare const Option: ({ text, selected, onPress, }: {
-    text: string;
+import { ReactElement } from 'react';
+declare const Option: ({ text, disabled, selected, onPress, }: {
+    text: string | ReactElement;
+    disabled?: boolean | undefined;
     selected: boolean;
     onPress: () => void;
 }) => JSX.Element;

package/types/components/Select/MultiSelect/OptionList.d.ts

@@ -1,9 +1,8 @@
 import { MultiSelectProps } from '.';
-interface OptionListProps<T> extends MultiSelectProps<T> {
-    /**
-     * event handler for select
-     */
-    onPress: (value: T[]) => void;
-}
-declare const OptionList: <T>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, options, value, }: Pick<OptionListProps<T>, "value" | "onPress" | "loading" | "options" | "keyExtractor" | "onQueryChange" | "onEndReached">) => JSX.Element;
+import { OptionType, SectionData } from '../types';
+declare 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>[];
+};
+declare const OptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, sections, renderOption, value, }: OptionListProps<V, T>) => JSX.Element;
 export default OptionList;

package/types/components/Select/MultiSelect/index.d.ts

@@ -1,17 +1,17 @@
-import { SelectProps } from '../types';
-export interface MultiSelectProps<T> extends SelectProps<T> {
+import { OptionType, SelectProps } from '../types';
+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;
 }
-declare function MultiSelect<T>({ footerLabel, label, loading, onConfirm, onDimiss, onEndReached, onQueryChange, options, query, error, editable, disabled, numberOfLines, style, testID, value, }: MultiSelectProps<T>): JSX.Element;
+declare function MultiSelect<V, T extends OptionType<V>>({ footerLabel, label, loading, inputProps, onConfirm, onDimiss, onEndReached, onQueryChange, options, renderOption, query, error, editable, disabled, numberOfLines, style, testID, value, }: MultiSelectProps<V, T>): JSX.Element;
 export default MultiSelect;

package/types/components/Select/SingleSelect/Option.d.ts

@@ -1,5 +1,7 @@
-declare const Option: ({ text, selected, onPress, }: {
-    text: string;
+import { ReactElement } from 'react';
+declare const Option: ({ text, disabled, selected, onPress, }: {
+    text: string | ReactElement;
+    disabled?: boolean | undefined;
     selected: boolean;
     onPress: () => void;
 }) => JSX.Element;

package/types/components/Select/SingleSelect/OptionList.d.ts

@@ -1,9 +1,8 @@
 import { SingleSelectProps } from '.';
-interface OptionListProps<T> extends SingleSelectProps<T> {
-    /**
-     * event handler for select
-     */
-    onPress: (value: T | null) => void;
-}
-declare const OptionList: <T>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, options, value, }: Pick<OptionListProps<T>, "value" | "onPress" | "loading" | "options" | "keyExtractor" | "onQueryChange" | "onEndReached">) => JSX.Element;
+import { OptionType, SectionData } from '../types';
+declare 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>[];
+};
+declare const OptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, sections, renderOption, value, }: OptionListProps<V, T>) => JSX.Element;
 export default OptionList;

package/types/components/Select/SingleSelect/index.d.ts

@@ -1,13 +1,13 @@
-import { SelectProps } from '../types';
-export interface SingleSelectProps<T> extends SelectProps<T> {
+import { OptionType, SelectProps } from '../types';
+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;
 }
-declare const SingleSelect: <T>({ label, loading, onConfirm, onDimiss, onEndReached, onQueryChange, options, query, error, editable, disabled, numberOfLines, style, testID, value, }: SingleSelectProps<T>) => JSX.Element;
+declare const SingleSelect: <V, T extends OptionType<V>>({ label, loading, inputProps, onConfirm, onDimiss, onEndReached, onQueryChange, options, renderOption, query, error, editable, disabled, numberOfLines, style, testID, value, }: SingleSelectProps<V, T>) => JSX.Element;
 export default SingleSelect;

package/types/components/Select/StyledOptionList.d.ts

@@ -1,17 +1,11 @@
-import React from 'react';
-import { OptionType, SelectProps } 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;
-}
-declare const StyledOptionList: <T>({ keyExtractor, loading, onEndReached, onQueryChange, options, RenderItem, scrollIndex, }: Pick<OptionListProps<T>, "loading" | "options" | "keyExtractor" | "onQueryChange" | "onEndReached" | "scrollIndex" | "RenderItem">) => JSX.Element;
+import { ReactElement } from 'react';
+import { SectionListRenderItemInfo } from 'react-native';
+import { ScrollParams } from './helpers';
+import { SectionData, OptionType, SelectProps, SectionType } from './types';
+export declare 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;
+};
+declare const StyledOptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onQueryChange, sections, renderItem, scrollParams, }: StyledOptionListProps<V, T>) => JSX.Element;
 export default StyledOptionList;