@hero-design/rn 7.10.2 → 7.12.0

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

@@ -1,17 +1,14 @@
-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 Footer from '../Footer';
 import OptionList from './OptionList';
 import TextInput from '../../TextInput';
+import { StyledSearchBar } from '../StyledSelect';
 
-export interface MultiSelectProps<T> {
-  /**
-   * An array of options to be selected.
-   */
-  options: OptionType<T>[];
+export interface MultiSelectProps<T> extends SelectProps<T> {
   /**
    * Current selected value.
    */
@@ -20,37 +17,25 @@ export interface MultiSelectProps<T> {
    * event handler for footer button.
    */
   onConfirm: (value: T[]) => void;
-  /**
-   * Field label.
-   */
-  label: string;
   /**
    * Footer label.
    */
   footerLabel: 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;
 }
 
 function MultiSelect<T>({
-  options,
-  value,
-  testID,
-  style,
-  label,
   footerLabel,
+  label,
+  loading,
   onConfirm,
+  onDimiss,
+  onEndReached,
+  onQueryChange,
+  options,
+  query,
+  style,
+  testID,
+  value,
 }: MultiSelectProps<T>) {
   const [open, setOpen] = useState(false);
   const [selectingValue, setSelectingValue] = useState(value);
@@ -59,6 +44,30 @@ function MultiSelect<T>({
     .map(opt => opt.text)
     .join(', ');
 
+  const [isKeyboardVisible, setKeyboardVisible] = useState(false);
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener(
+      'keyboardDidShow',
+      (e: KeyboardEvent) => {
+        setKeyboardVisible(true);
+        setKeyboardHeight(e.endCoordinates.height);
+      }
+    );
+    const keyboardDidHideListener = Keyboard.addListener(
+      'keyboardDidHide',
+      () => {
+        setKeyboardVisible(false);
+      }
+    );
+
+    return () => {
+      keyboardDidHideListener.remove();
+      keyboardDidShowListener.remove();
+    };
+  }, []);
+
   return (
     <TouchableOpacity onPress={() => setOpen(true)}>
       <View pointerEvents="none">
@@ -74,8 +83,14 @@ function MultiSelect<T>({
       <BottomSheet
         open={open}
         onRequestClose={() => setOpen(false)}
-        onDismiss={() => setSelectingValue(value)}
+        onDismiss={() => {
+          setSelectingValue(value);
+          if (onDimiss) onDimiss();
+        }}
         header={label}
+        style={{
+          paddingBottom: isKeyboardVisible ? keyboardHeight : 0,
+        }}
         footer={
           <Footer
             label={footerLabel}
@@ -86,7 +101,20 @@ function MultiSelect<T>({
           />
         }
       >
+        {onQueryChange && (
+          <StyledSearchBar>
+            <TextInput
+              editable
+              placeholder="Search"
+              suffix="search-outlined"
+              onChangeText={onQueryChange}
+              value={query}
+            />
+          </StyledSearchBar>
+        )}
         <OptionList
+          onEndReached={onEndReached}
+          loading={loading}
           options={options}
           value={selectingValue}
           onPress={setSelectingValue}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SingleSelectProps } from '.';
-import { getKey } from '../helpers';
-import { OptionListWrapper, Spacer } from '../StyledSelect';
+
+import StyledOptionList, { RenderItemProps } from '../StyledOptionList';
 import Option from './Option';
 
 interface OptionListProps<T> extends SingleSelectProps<T> {
@@ -12,32 +12,51 @@ interface OptionListProps<T> extends SingleSelectProps<T> {
 }
 
 const OptionList = <T,>({
-  value,
-  options,
-  onPress,
   keyExtractor,
+  loading,
+  onEndReached,
+  onPress,
+  onQueryChange,
+  options,
+  value,
 }: Pick<
   OptionListProps<T>,
-  'value' | 'options' | 'onPress' | 'keyExtractor'
->) => (
-  <OptionListWrapper>
-    {options.map((opt, index) => (
-      <React.Fragment key={getKey(opt, index, keyExtractor)}>
-        {index !== 0 && <Spacer />}
-        <Option
-          text={opt.text}
-          selected={value === opt.value}
-          onPress={() => {
-            if (value === opt.value) {
-              onPress(null);
-            } else {
-              onPress(opt.value);
-            }
-          }}
-        />
-      </React.Fragment>
-    ))}
-  </OptionListWrapper>
-);
+  | 'keyExtractor'
+  | 'loading'
+  | 'onEndReached'
+  | 'onPress'
+  | 'onQueryChange'
+  | 'options'
+  | 'value'
+>) => {
+  const rawScrollIndex = options.findIndex(option => option.value === value);
+  const scrollIndex = rawScrollIndex - 2 >= 0 ? rawScrollIndex - 2 : 0;
+
+  const RenderItem = React.memo(({ item }: RenderItemProps<T>) => (
+    <Option
+      selected={value === item.value}
+      text={item.text}
+      onPress={() => {
+        if (value === item.value) {
+          onPress(null);
+        } else {
+          onPress(item.value);
+        }
+      }}
+    />
+  ));
+
+  return (
+    <StyledOptionList<T>
+      keyExtractor={keyExtractor}
+      loading={loading}
+      onEndReached={onEndReached}
+      onQueryChange={onQueryChange}
+      options={options}
+      RenderItem={RenderItem}
+      scrollIndex={scrollIndex}
+    />
+  );
+};
 
 export default OptionList;

package/src/components/Select/SingleSelect/__tests__/OptionList.spec.tsx

@@ -39,4 +39,12 @@ describe('OptionList', () => {
     expect(pressFn).toBeCalledTimes(1);
     expect(pressFn).toHaveBeenCalledWith(null);
   });
+
+  it('render isLoading correctly', () => {
+    const pressFn = jest.fn();
+    const { toJSON } = renderWithTheme(
+      <OptionList value="a" options={mockOptions} onPress={pressFn} loading />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
 });