@hero-design/rn 7.10.2 → 7.12.0

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

@@ -1,55 +1,64 @@
-import React, { useState } from 'react';
-import { StyleProp, ViewStyle, TouchableOpacity, View } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { TouchableOpacity, Keyboard, KeyboardEvent, View } from 'react-native';
 
-import { OptionType } from '../types';
+import { SelectProps } from '../types';
 import BottomSheet from '../../BottomSheet';
 import OptionList from './OptionList';
 import TextInput from '../../TextInput';
+import { StyledSearchBar } from '../StyledSelect';
 
-export interface SingleSelectProps<T> {
-  /**
-   * An array of options to be selected.
-   */
-  options: OptionType<T>[];
+export interface SingleSelectProps<T> extends SelectProps<T> {
   /**
    * Current selected value.
    */
   value: T | null;
   /**
-   * event handler for confirm button
+   * on select event handler
    */
   onConfirm: (value: T | null) => void;
-  /**
-   * Field label.
-   */
-  label: string;
-  /**
-   * 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: OptionType<T>, index?: number) => string;
-  /**
-   * Additional style.
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * Testing id of the component.
-   */
-  testID?: string;
 }
 
 const SingleSelect = <T,>({
-  options,
-  value,
-  testID,
-  style,
   label,
+  loading,
   onConfirm,
+  onDimiss,
+  onEndReached,
+  onQueryChange,
+  options,
+  query,
+  style,
+  testID,
+  value,
 }: SingleSelectProps<T>) => {
   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();
+    };
+  }, []);
+
   return (
     <TouchableOpacity onPress={() => setOpen(true)}>
       <View pointerEvents="none">
@@ -65,10 +74,30 @@ const SingleSelect = <T,>({
       <BottomSheet
         open={open}
         onRequestClose={() => setOpen(false)}
-        onDismiss={() => setSelectingValue(value)}
+        onDismiss={() => {
+          setSelectingValue(value);
+          if (onDimiss) onDimiss();
+        }}
         header={label}
+        style={{
+          paddingBottom: isKeyboardVisible ? keyboardHeight : 0,
+        }}
       >
+        {onQueryChange && (
+          <StyledSearchBar>
+            <TextInput
+              editable
+              placeholder="Search"
+              suffix="search-outlined"
+              onChangeText={onQueryChange}
+              value={query}
+            />
+          </StyledSearchBar>
+        )}
         <OptionList
+          onQueryChange={onQueryChange}
+          onEndReached={onEndReached}
+          loading={loading}
           options={options}
           value={selectingValue}
           onPress={selectedValue => {

package/src/components/Select/StyledOptionList.tsx

@@ -0,0 +1,88 @@
+import { useTheme } from '@emotion/react';
+import React, { useRef, useState } from 'react';
+import { Dimensions, FlatList, ListRenderItemInfo, View } from 'react-native';
+import Spinner from '../Spinner';
+import { getKey } from './helpers';
+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;
+}
+
+const StyledOptionList = <T,>({
+  keyExtractor,
+  loading,
+  onEndReached,
+  onQueryChange,
+  options,
+  RenderItem,
+  scrollIndex = 0,
+}: Pick<
+  OptionListProps<T>,
+  | 'scrollIndex'
+  | 'keyExtractor'
+  | 'loading'
+  | 'onEndReached'
+  | 'options'
+  | 'RenderItem'
+  | 'onQueryChange'
+>) => {
+  const theme = useTheme();
+  const flatListRef = useRef<FlatList>(null);
+
+  const [onEndReachedCalled, setOnEndReachedCalled] = useState(false);
+
+  return (
+    <FlatList
+      ref={flatListRef}
+      style={{
+        paddingHorizontal: theme.__hd__.select.space.optionListPadding,
+        ...(onQueryChange ? { height: Dimensions.get('screen').height } : {}),
+      }}
+      data={options}
+      keyExtractor={keyExtractor}
+      onEndReachedThreshold={0.1}
+      onEndReached={() => setOnEndReachedCalled(true)}
+      onScrollToIndexFailed={() => {}}
+      onContentSizeChange={() =>
+        options.length &&
+        flatListRef.current?.scrollToIndex({ index: scrollIndex })
+      }
+      onMomentumScrollBegin={() => {
+        if (onEndReached && onEndReachedCalled && !loading) onEndReached();
+        setOnEndReachedCalled(false);
+      }}
+      ListFooterComponent={
+        loading ? (
+          <View
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              height: theme.space.xxxxlarge,
+            }}
+          >
+            <Spinner />
+          </View>
+        ) : null
+      }
+      renderItem={({ item, index }: ListRenderItemInfo<OptionType<T>>) => (
+        <View key={getKey(item, index, keyExtractor)}>
+          <RenderItem item={item} />
+        </View>
+      )}
+    />
+  );
+};
+
+export default StyledOptionList;

package/src/components/Select/StyledSelect.tsx

@@ -2,21 +2,17 @@ import { View, TouchableOpacity } 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 OptionListWrapper = styled(View)(({ theme }) => ({
-  padding: theme.__hd__.select.space.optionListPadding,
+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 Spacer = styled(View)(({ theme }) => ({
@@ -27,4 +23,10 @@ const FooterText = styled(Typography.Text)(({ theme }) => ({
   color: theme.__hd__.select.colors.footerText,
 }));
 
-export { OptionWrapper, OptionListWrapper, Spacer, FooterText };
+const StyledSearchBar = styled(View)(({ theme }) => ({
+  marginTop: theme.__hd__.select.space.searchBarMarginTopSpacing,
+  paddingHorizontal: theme.__hd__.select.space.searchBarHorizontalSpacing,
+  paddingBottom: theme.__hd__.select.space.searchBarBottomSpacing,
+}));
+
+export { OptionWrapper, Spacer, FooterText, StyledSearchBar };

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

@@ -1,11 +1,6 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import {
-  OptionWrapper,
-  OptionListWrapper,
-  Spacer,
-  FooterText,
-} from '../StyledSelect';
+import { OptionWrapper, Spacer, FooterText } from '../StyledSelect';
 
 describe('OptionWrapper', () => {
   it.each`
@@ -21,14 +16,6 @@ describe('OptionWrapper', () => {
   });
 });
 
-describe('OptionListWrapper', () => {
-  it('has correct style', () => {
-    const { toJSON } = renderWithTheme(<OptionListWrapper />);
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
-
 describe('Spacer', () => {
   it('has correct style', () => {
     const { toJSON } = renderWithTheme(<Spacer />);

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

@@ -27,19 +27,6 @@ exports[`FooterText has correct style 1`] = `
 </Text>
 `;
 
-exports[`OptionListWrapper has correct style 1`] = `
-<View
-  style={
-    Array [
-      Object {
-        "padding": 16,
-      },
-      undefined,
-    ]
-  }
-/>
-`;
-
 exports[`OptionWrapper has selected style: false 1`] = `
 <View
   accessible={true}

package/src/components/Select/types.tsx

@@ -0,0 +1,47 @@
+import { StyleProp, ViewStyle } from 'react-native';
+
+export type OptionType<T> = { value: T; text: string; key?: string };
+
+export interface SelectProps<T> {
+  /**
+   * An array of options to be selected.
+   */
+  options: OptionType<T>[];
+  /**
+   * 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: OptionType<T>, index?: number) => string;
+  /**
+   * Current search value.
+   */
+  query?: string;
+  /**
+   * Search bar onChangeText event handler
+   */
+  onQueryChange?: (value: string) => void;
+  /**
+   * Event handler when selection dimiss
+   */
+  onDimiss?: () => void;
+  /**
+   * Event handler when end of the list reached
+   */
+  onEndReached?: () => void;
+  /**
+   * Show indicator at bottom of option list
+   */
+  loading?: boolean;
+  /**
+   * Field label.
+   */
+  label: string;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}

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

@@ -60,6 +60,21 @@ describe('TextInput', () => {
       ).toHaveLength(1);
     });
 
+    it('should not render input-label if label is empty', () => {
+      const { getByTestId } = renderWithTheme(
+        <TextInput
+          prefix="dollar-sign"
+          suffix="arrow-down"
+          testID="idle-text-input"
+        />
+      );
+
+      expect(getByTestId('idle-text-input')).toBeTruthy();
+      expect(
+        within(getByTestId('idle-text-input')).queryAllByTestId('input-label')
+      ).toHaveLength(0);
+    });
+
     it('onChangeText, onBlur, onFocus', () => {
       const onChangeText = jest.fn();
       const onBlur = jest.fn();

package/src/components/TextInput/index.tsx

@@ -171,14 +171,16 @@ const TextInput = ({
                 *
               </StyledAsteriskLabel>
             )}
-            <StyledLabel
-              nativeID={accessibilityLabelledBy}
-              testID="input-label"
-              fontSize="small"
-              themeVariant={variant}
-            >
-              {label}
-            </StyledLabel>
+            {!!label && (
+              <StyledLabel
+                nativeID={accessibilityLabelledBy}
+                testID="input-label"
+                fontSize="small"
+                themeVariant={variant}
+              >
+                {label}
+              </StyledLabel>
+            )}
           </StyledLabelContainer>
         )}
         {typeof prefix === 'string' ? (
@@ -200,14 +202,16 @@ const TextInput = ({
                   *
                 </StyledAsteriskLabelInsideTextInput>
               )}
-              <StyledLabelInsideTextInput
-                nativeID={accessibilityLabelledBy}
-                testID="input-label"
-                fontSize="medium"
-                themeVariant={variant}
-              >
-                {label}
-              </StyledLabelInsideTextInput>
+              {!!label && (
+                <StyledLabelInsideTextInput
+                  nativeID={accessibilityLabelledBy}
+                  testID="input-label"
+                  fontSize="medium"
+                  themeVariant={variant}
+                >
+                  {label}
+                </StyledLabelInsideTextInput>
+              )}
             </StyledLabelContainerInsideTextInput>
           )}
           <StyledTextInput

package/src/components/TimePicker/StyledTimePicker.tsx

@@ -0,0 +1,8 @@
+import styled from '@emotion/native';
+import { View, ViewProps } from 'react-native';
+
+const StyledPickerWrapper = styled(View)<ViewProps>(({ theme }) => ({
+  height: theme.__hd__.timePicker.sizes.height,
+}));
+
+export { StyledPickerWrapper };

package/src/components/TimePicker/TimePickerAndroid.tsx

@@ -0,0 +1,61 @@
+import DateTimePicker from '@react-native-community/datetimepicker';
+import React, { useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import formatTime from 'date-fns/fp/format';
+
+import TextInput from '../TextInput';
+import { TimePickerProps } from './types';
+
+const TimePickerAndroid = ({
+  value,
+  label,
+  placeholder,
+  onChange,
+  displayFormat = 'hh:mm aa',
+  disabled = false,
+  required,
+  error,
+  style,
+  testID,
+}: TimePickerProps) => {
+  const [open, setOpen] = useState(false);
+
+  const is12Hour = displayFormat.includes('hh');
+  const displayValue = value ? formatTime(displayFormat, value) : '';
+  const pickerInitValue = value || new Date();
+
+  return (
+    <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
+      <View pointerEvents="none" testID="timePickerInputAndroid">
+        <TextInput
+          label={label}
+          value={displayValue}
+          suffix="clock-3"
+          placeholder={placeholder || displayFormat}
+          disabled={disabled}
+          error={error}
+          required={required}
+          style={style}
+          testID={testID}
+        />
+      </View>
+      {open ? (
+        <DateTimePicker
+          testID="timePickerAndroid"
+          mode="time"
+          value={pickerInitValue}
+          display="default"
+          onChange={(_: any, date: Date | undefined) => {
+            setOpen(false);
+            if (date) {
+              onChange(date);
+            }
+          }}
+          is24Hour={!is12Hour}
+        />
+      ) : null}
+    </TouchableOpacity>
+  );
+};
+
+export default TimePickerAndroid;

package/src/components/TimePicker/TimePickerIOS.tsx

@@ -0,0 +1,91 @@
+import DateTimePicker from '@react-native-community/datetimepicker';
+import React, { useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import formatTime from 'date-fns/fp/format';
+
+import BottomSheet from '../BottomSheet';
+import TextInput from '../TextInput';
+import Typography from '../Typography';
+import { StyledPickerWrapper } from './StyledTimePicker';
+import { TimePickerProps } from './types';
+
+const TimePickerIOS = ({
+  value,
+  label,
+  placeholder,
+  onChange,
+  confirmLabel,
+  displayFormat = 'hh:mm aa',
+  disabled = false,
+  required,
+  error,
+  style,
+  testID,
+}: TimePickerProps) => {
+  const [selectingDate, setSelectingDate] = useState<Date | null>(value);
+  const [open, setOpen] = useState(false);
+
+  const is12Hour = displayFormat.includes('hh');
+  const displayValue = value ? formatTime(displayFormat, value) : '';
+
+  return (
+    <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
+      <View pointerEvents="none" testID="timePickerInputIOS">
+        <TextInput
+          label={label}
+          value={displayValue}
+          suffix="clock-3"
+          placeholder={placeholder || displayFormat}
+          disabled={disabled}
+          error={error}
+          required={required}
+          testID={testID}
+          style={style}
+        />
+      </View>
+      <BottomSheet
+        open={open}
+        onRequestClose={() => setOpen(false)}
+        header={label}
+        footer={
+          <TouchableOpacity
+            onPress={() => {
+              if (selectingDate) {
+                onChange(selectingDate);
+              }
+              setOpen(false);
+            }}
+          >
+            <Typography.Text
+              fontSize="large"
+              fontWeight="semi-bold"
+              intent="primary"
+            >
+              {confirmLabel}
+            </Typography.Text>
+          </TouchableOpacity>
+        }
+      >
+        <StyledPickerWrapper>
+          <DateTimePicker
+            testID="timePickerIOS"
+            value={selectingDate || new Date()}
+            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.
+            locale={is12Hour ? undefined : 'en-GB'}
+            onChange={(_: any, date: Date | undefined) => {
+              if (date) {
+                setSelectingDate(date);
+              }
+            }}
+            display="spinner"
+            style={{ flex: 1 }}
+          />
+        </StyledPickerWrapper>
+      </BottomSheet>
+    </TouchableOpacity>
+  );
+};
+
+export default TimePickerIOS;

package/src/components/TimePicker/__tests__/TimePicker.spec.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import TimePicker from '..';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+
+describe('TimePicker', () => {
+  it('renders TimePickerIOS when OS is iOS', () => {
+    Platform.OS = 'ios';
+    const { getByTestId } = renderWithTheme(
+      <TimePicker
+        label="Start time"
+        value={new Date('December 17, 1995 03:24:00')}
+        confirmLabel="Confirm"
+        onChange={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('timePickerInputIOS')).toBeDefined();
+  });
+
+  it('renders TimePickerAndroid when OS is android', () => {
+    Platform.OS = 'android';
+    const { getByTestId } = renderWithTheme(
+      <TimePicker
+        label="Start time"
+        value={new Date('December 17, 1995 03:24:00')}
+        confirmLabel="Confirm"
+        onChange={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('timePickerInputAndroid')).toBeDefined();
+  });
+});

package/src/components/TimePicker/__tests__/TimePickerAndroid.spec.tsx

@@ -0,0 +1,39 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import TimePickerAndroid from '../TimePickerAndroid';
+
+describe('TimePickerAndroid', () => {
+  it('renders correctly', () => {
+    const onChange = jest.fn();
+
+    const { getByText, queryByTestId, toJSON } = renderWithTheme(
+      <TimePickerAndroid
+        value={new Date('December 17, 1995 03:24:00')}
+        label="Break time"
+        confirmLabel="Confirm"
+        onChange={onChange}
+      />
+    );
+
+    expect(getByText('Break time')).toBeDefined();
+    expect(queryByTestId('text-input').props.value).toBe('03:24 AM');
+    expect(queryByTestId('timePickerAndroid')).toBeNull();
+
+    // Open time picker
+    fireEvent.press(getByText('Break time'));
+    expect(queryByTestId('timePickerAndroid')).toBeTruthy();
+
+    expect(toJSON()).toMatchSnapshot();
+
+    // Change time
+    fireEvent(
+      queryByTestId('timePickerAndroid'),
+      'onChange',
+      null,
+      new Date('December 17, 1995 05:30:00')
+    );
+
+    expect(onChange).toBeCalledWith(new Date('December 17, 1995 05:30:00'));
+  });
+});