@hero-design/rn 7.20.1 → 7.22.0

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { SectionListRenderItemInfo } from 'react-native';
-import { getScrollParams } from '../helpers';
+import type { SectionListRenderItemInfo, SectionList } from 'react-native';
 import StyledOptionList from '../StyledOptionList';
 import Option from './Option';
 import type { MultiSelectProps } from '.';
@@ -17,6 +16,7 @@ type OptionListProps<V, T extends OptionType<V>> = Pick<
 > & {
   onPress: (value: V[]) => void;
   sections: SectionData<V, T>[];
+  sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 };
 
 const OptionList = <V, T extends OptionType<V>>({
@@ -28,16 +28,14 @@ const OptionList = <V, T extends OptionType<V>>({
   sections,
   renderOption,
   value,
+  sectionListRef,
 }: OptionListProps<V, T>) => {
-  const firstValue = value?.[0];
-  const scrollParams = getScrollParams(firstValue, sections);
-
   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));
+        onPress(value.filter((val) => val !== info.item.value));
       } else {
         onPress([...value, info.item.value]);
       }
@@ -63,7 +61,7 @@ const OptionList = <V, T extends OptionType<V>>({
       onQueryChange={onQueryChange}
       sections={sections}
       renderItem={renderItem}
-      scrollParams={scrollParams}
+      sectionListRef={sectionListRef}
     />
   );
 };

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

@@ -174,6 +174,27 @@ describe('rendering', () => {
     expect(getByText('Josh')).toBeTruthy();
     expect(getByText('Junior Developer')).toBeTruthy();
   });
+
+  it('allows custom selected value', () => {
+    const { getByText } = renderWithTheme(
+      <MultiSelect<string, CustomOptionType>
+        label="Choose collaborators"
+        footerLabel="Confirm"
+        options={collaboratorSections}
+        value={['daniel', 'daemon']}
+        onConfirm={jest.fn()}
+        renderSelectedValue={(selectedValue, _inputProps) => (
+          <>
+            {selectedValue.map((value) => (
+              <Typography.Text>Custom {value}</Typography.Text>
+            ))}
+          </>
+        )}
+      />
+    );
+    expect(getByText('Custom daniel')).toBeTruthy();
+    expect(getByText('Custom daemon')).toBeTruthy();
+  });
 });
 
 describe('behavior', () => {

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

@@ -1,12 +1,21 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { TouchableOpacity, View } from 'react-native';
+import type {
+  SectionList,
+  TextInputProps as NativeTextInputProps,
+} from 'react-native';
 import BottomSheet from '../../BottomSheet';
 import Footer from '../Footer';
 import OptionList from './OptionList';
 import TextInput from '../../TextInput';
 import { StyledSearchBar } from '../StyledSelect';
-import { toFlatOptions, toSections, useKeyboard } from '../helpers';
-import type { OptionType, SelectProps } from '../types';
+import {
+  getScrollParams,
+  toFlatOptions,
+  toSections,
+  useKeyboard,
+} from '../helpers';
+import type { OptionType, SectionType, SelectProps } from '../types';
 
 export interface MultiSelectProps<V, T extends OptionType<V> = OptionType<V>>
   extends SelectProps<V, T> {
@@ -22,6 +31,13 @@ export interface MultiSelectProps<V, T extends OptionType<V> = OptionType<V>>
    * Footer label.
    */
   footerLabel: string;
+  /**
+   * Customise the selected value rendering.
+   */
+  renderSelectedValue?: (
+    selectedValue: V[],
+    inputProps: NativeTextInputProps
+  ) => React.ReactNode;
 }
 
 function MultiSelect<V, T extends OptionType<V>>({
@@ -35,6 +51,7 @@ function MultiSelect<V, T extends OptionType<V>>({
   onQueryChange,
   options,
   renderOption,
+  renderSelectedValue,
   query,
   error,
   editable = true,
@@ -47,11 +64,12 @@ function MultiSelect<V, T extends OptionType<V>>({
   const { isKeyboardVisible, keyboardHeight } = useKeyboard();
   const [open, setOpen] = useState(false);
   const [selectingValue, setSelectingValue] = useState(value);
+  const sectionListRef = useRef<SectionList<T, SectionType>>(null);
   const sections = toSections(options);
   const flatOptions = toFlatOptions(options);
   const displayedValue = flatOptions
-    .filter(opt => value.includes(opt.value))
-    .map(opt => opt.text)
+    .filter((opt) => value.includes(opt.value))
+    .map((opt) => opt.text)
     .join(', ');
 
   return (
@@ -79,6 +97,11 @@ function MultiSelect<V, T extends OptionType<V>>({
               pointerEvents="none"
               style={style}
               testID={testID}
+              renderInputValue={
+                renderSelectedValue !== undefined
+                  ? (props) => renderSelectedValue(value, props)
+                  : undefined
+              }
             />
           </View>
         </TouchableOpacity>
@@ -100,6 +123,12 @@ function MultiSelect<V, T extends OptionType<V>>({
             }}
           />
         }
+        onAnimationEnd={() => {
+          if (open === true) {
+            const scrollParams = getScrollParams(value?.[0], sections);
+            sectionListRef.current?.scrollToLocation(scrollParams);
+          }
+        }}
       >
         {onQueryChange && (
           <StyledSearchBar>
@@ -120,6 +149,7 @@ function MultiSelect<V, T extends OptionType<V>>({
           renderOption={renderOption}
           value={selectingValue}
           onPress={setSelectingValue}
+          sectionListRef={sectionListRef}
         />
       </BottomSheet>
     </>

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { SectionListRenderItemInfo } from 'react-native';
-import { getScrollParams } from '../helpers';
+import type { SectionListRenderItemInfo, SectionList } from 'react-native';
 import StyledOptionList from '../StyledOptionList';
 import Option from './Option';
 import type { SingleSelectProps } from '.';
@@ -17,6 +16,7 @@ type OptionListProps<V, T extends OptionType<V>> = Pick<
 > & {
   onPress: (value: V | null) => void;
   sections: SectionData<V, T>[];
+  sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 };
 
 const OptionList = <V, T extends OptionType<V>>({
@@ -28,9 +28,8 @@ const OptionList = <V, T extends OptionType<V>>({
   sections,
   renderOption,
   value,
+  sectionListRef,
 }: OptionListProps<V, T>) => {
-  const scrollParams = getScrollParams(value, sections);
-
   const renderItem = (info: SectionListRenderItemInfo<T, SectionType>) => {
     const { item } = info;
     const selected = item.value === value;
@@ -62,7 +61,7 @@ const OptionList = <V, T extends OptionType<V>>({
       onQueryChange={onQueryChange}
       sections={sections}
       renderItem={renderItem}
-      scrollParams={scrollParams}
+      sectionListRef={sectionListRef}
     />
   );
 };

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

@@ -166,6 +166,22 @@ describe('rendering', () => {
     expect(getByText('Josh')).toBeTruthy();
     expect(getByText('Junior Developer')).toBeTruthy();
   });
+
+  it('allows custom selected value', () => {
+    const { getByText } = renderWithTheme(
+      <SingleSelect<string, CustomOptionType>
+        label="Choose collaborators"
+        options={collaboratorSections}
+        renderOption={renderSingleOption}
+        value="daniel"
+        onConfirm={jest.fn()}
+        renderSelectedValue={(selectedValue, _inputProps) => (
+          <Typography.Text>Custom {selectedValue}</Typography.Text>
+        )}
+      />
+    );
+    expect(getByText('Custom daniel')).toBeTruthy();
+  });
 });
 
 describe('behavior', () => {

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

@@ -1,11 +1,20 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { TouchableOpacity, View } from 'react-native';
+import type {
+  SectionList,
+  TextInputProps as NativeTextInputProps,
+} from 'react-native';
 import BottomSheet from '../../BottomSheet';
 import OptionList from './OptionList';
 import TextInput from '../../TextInput';
 import { StyledSearchBar } from '../StyledSelect';
-import { toFlatOptions, toSections, useKeyboard } from '../helpers';
-import type { OptionType, SelectProps } from '../types';
+import {
+  getScrollParams,
+  toFlatOptions,
+  toSections,
+  useKeyboard,
+} from '../helpers';
+import type { OptionType, SectionType, SelectProps } from '../types';
 
 export interface SingleSelectProps<V, T extends OptionType<V> = OptionType<V>>
   extends SelectProps<V, T> {
@@ -14,9 +23,16 @@ export interface SingleSelectProps<V, T extends OptionType<V> = OptionType<V>>
    */
   value: V | null;
   /**
-   * on select event handler
+   * On select event handler
    */
   onConfirm: (value: V | null) => void;
+  /**
+   * Customise the selected value rendering.
+   */
+  renderSelectedValue?: (
+    selectedValue: V | null,
+    inputProps: NativeTextInputProps
+  ) => React.ReactNode;
 }
 
 const SingleSelect = <V, T extends OptionType<V>>({
@@ -29,6 +45,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
   onQueryChange,
   options,
   renderOption,
+  renderSelectedValue,
   query,
   error,
   editable = true,
@@ -40,9 +57,10 @@ const SingleSelect = <V, T extends OptionType<V>>({
 }: SingleSelectProps<V, T>) => {
   const { isKeyboardVisible, keyboardHeight } = useKeyboard();
   const [open, setOpen] = useState(false);
+  const sectionListRef = useRef<SectionList<T, SectionType>>(null);
   const sections = toSections(options);
   const flatOptions = toFlatOptions(options);
-  const displayedValue = flatOptions.find(opt => value === opt.value)?.text;
+  const displayedValue = flatOptions.find((opt) => value === opt.value)?.text;
 
   return (
     <>
@@ -69,6 +87,11 @@ const SingleSelect = <V, T extends OptionType<V>>({
               pointerEvents="none"
               style={style}
               testID={testID}
+              renderInputValue={
+                renderSelectedValue !== undefined
+                  ? (props) => renderSelectedValue(value, props)
+                  : undefined
+              }
             />
           </View>
         </TouchableOpacity>
@@ -81,6 +104,12 @@ const SingleSelect = <V, T extends OptionType<V>>({
         style={{
           paddingBottom: isKeyboardVisible ? keyboardHeight : 0,
         }}
+        onAnimationEnd={() => {
+          if (open === true) {
+            const scrollParams = getScrollParams(value, sections);
+            sectionListRef.current?.scrollToLocation(scrollParams);
+          }
+        }}
       >
         {onQueryChange && (
           <StyledSearchBar>
@@ -100,10 +129,11 @@ const SingleSelect = <V, T extends OptionType<V>>({
           sections={sections}
           renderOption={renderOption}
           value={value}
-          onPress={selectedValue => {
+          onPress={(selectedValue) => {
             setOpen(false);
             onConfirm(selectedValue);
           }}
+          sectionListRef={sectionListRef}
         />
       </BottomSheet>
     </>

package/src/components/Select/StyledOptionList.tsx

@@ -1,12 +1,11 @@
 import { useTheme } from '@emotion/react';
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 import { Dimensions, SectionList, View } from 'react-native';
 import type { ReactElement } from 'react';
 import type { SectionListRenderItemInfo } from 'react-native';
 import SectionHeading from '../SectionHeading';
 import Spinner from '../Spinner';
 import { OptionSpacer, SectionSpacer } from './StyledSelect';
-import type { ScrollParams } from './helpers';
 import type {
   SectionData,
   OptionType,
@@ -18,9 +17,9 @@ export 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;
+  sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 };
 
 const StyledOptionList = <V, T extends OptionType<V>>({
@@ -30,10 +29,9 @@ const StyledOptionList = <V, T extends OptionType<V>>({
   onQueryChange,
   sections,
   renderItem,
-  scrollParams,
+  sectionListRef,
 }: StyledOptionListProps<V, T>) => {
   const theme = useTheme();
-  const sectionListRef = useRef<SectionList<T, SectionType>>(null);
 
   const [onEndReachedCalled, setOnEndReachedCalled] = useState(false);
 
@@ -48,10 +46,6 @@ const StyledOptionList = <V, T extends OptionType<V>>({
       onEndReachedThreshold={0.1}
       onEndReached={() => setOnEndReachedCalled(true)}
       onScrollToIndexFailed={() => {}}
-      onContentSizeChange={() =>
-        sections.length &&
-        sectionListRef.current?.scrollToLocation(scrollParams)
-      }
       onMomentumScrollBegin={() => {
         if (onEndReached && onEndReachedCalled && !loading) onEndReached();
         setOnEndReachedCalled(false);

package/src/components/Select/helpers.tsx

@@ -44,7 +44,7 @@ export const toFlatOptions = <V, T extends OptionType<V>>(
   options: CombinedOptionsType<V, T>
 ): OptionType<V>[] => {
   if (isSections(options)) {
-    return options.flatMap(opt => opt.data);
+    return options.flatMap((opt) => opt.data);
   }
 
   return options;
@@ -61,8 +61,8 @@ export const getScrollParams = <V, T extends OptionType<V>>(
 ): ScrollParams => {
   let itemIndex = -1;
 
-  const sectionIndex = sections.findIndex(section => {
-    itemIndex = section.data.findIndex(opt => opt.value === value);
+  const sectionIndex = sections.findIndex((section) => {
+    itemIndex = section.data.findIndex((opt) => opt.value === value);
     return itemIndex !== -1;
   });
 
@@ -79,7 +79,7 @@ export const useKeyboard = () => {
   useEffect(() => {
     const keyboardWillShowListener = Keyboard.addListener(
       'keyboardWillShow',
-      e => {
+      (e) => {
         setKeyboardVisible(true);
         setKeyboardHeight(e.endCoordinates.height);
       }

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

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Slider renders correctly by default 1`] = `
+<Slider
+  disabled={false}
+  maximumTrackTintColor="#ece8ef"
+  maximumValue={1}
+  minimumTrackTintColor="#401960"
+  minimumValue={0}
+  step={0}
+  thumbTintColor="#e6e9e9"
+  value={0}
+/>
+`;
+
+exports[`Slider renders correctly when disabled 1`] = `
+<Slider
+  disabled={true}
+  maximumTrackTintColor="#ece8ef"
+  maximumValue={1}
+  minimumTrackTintColor="#401960"
+  minimumValue={0}
+  step={0}
+  thumbTintColor="#e6e9e9"
+  value={0}
+/>
+`;
+
+exports[`Slider renders correctly with props 1`] = `
+<Slider
+  disabled={false}
+  maximumTrackTintColor="#ece8ef"
+  maximumValue={2}
+  minimumTrackTintColor="#401960"
+  minimumValue={-1}
+  onSlidingComplete={[MockFunction]}
+  onSlidingStart={[MockFunction]}
+  onValueChange={[MockFunction]}
+  step={0.25}
+  thumbTintColor="#e6e9e9"
+  value={0.5}
+/>
+`;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Slider from '..';
+
+describe('Slider', () => {
+  it('renders correctly by default', () => {
+    const { toJSON } = renderWithTheme(<Slider />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly when disabled', () => {
+    const { toJSON } = renderWithTheme(<Slider disabled />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with props', () => {
+    const { toJSON } = renderWithTheme(
+      <Slider
+        value={0.5}
+        minimumValue={-1}
+        maximumValue={2}
+        step={0.25}
+        onValueChange={jest.fn()}
+        onSlidingStart={jest.fn()}
+        onSlidingComplete={jest.fn()}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Slider/index.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import RnSlider from '@react-native-community/slider';
+import { StyleProp, ViewStyle } from 'react-native';
+import { useTheme } from '../../theme';
+
+export interface SliderProps {
+  /**
+   * Minimum value of the slider.
+   * Defaults to 0.
+   */
+  minimumValue?: number;
+  /**
+   * Maximum value of the slider.
+   * Defaults to 1.
+   */
+  maximumValue?: number;
+  /**
+   * Step value of the slider.
+   * The value should be between 0 and (maximumValue - minimumValue).
+   * Defaults to 0.
+   */
+  step?: number;
+  /**
+   * Value of the slider.
+   * Defaults to 0.
+   */
+  value?: number;
+  /**
+   * Callback continuously called while the user is dragging the slider.
+   */
+  onValueChange?: (value: number) => void;
+  /**
+   * Callback that is called when the user picks up the slider.
+   * The initial value is passed as an argument to the callback handler.
+   */
+  onSlidingStart?: (value: number) => void;
+  /**
+   * Callback that is called when the user releases the slider, regardless if the value has changed.
+   * The current value is passed as an argument to the callback handler.
+   */
+  onSlidingComplete?: (value: number) => void;
+  /**
+   * Whether the slider is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Slider = ({
+  minimumValue = 0,
+  maximumValue = 1,
+  step = 0,
+  value = 0,
+  onValueChange,
+  onSlidingStart,
+  onSlidingComplete,
+  disabled = false,
+  style,
+  testID,
+}: SliderProps) => {
+  const theme = useTheme();
+
+  return (
+    <RnSlider
+      minimumValue={minimumValue}
+      maximumValue={maximumValue}
+      step={step}
+      value={value}
+      onValueChange={onValueChange}
+      onSlidingStart={onSlidingStart}
+      onSlidingComplete={onSlidingComplete}
+      disabled={disabled}
+      minimumTrackTintColor={theme.__hd__.slider.colors.minimumTrackTint}
+      thumbTintColor={theme.__hd__.slider.colors.thumbTint}
+      maximumTrackTintColor={theme.__hd__.slider.colors.maximumTrackTint}
+      style={style}
+      testID={testID}
+    />
+  );
+};
+
+export default Slider;

package/src/components/Switch/SelectorSwitch/Option.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import type { BadgeConfigType, OptionType } from '.';
+import { useTheme } from '../../../theme';
+import { StyledIconWrapper, StyledTextWrapper } from './StyledSelectorSwitch';
+import Typography from '../../Typography';
+import Badge from '../../Badge';
+import Icon from '../../Icon';
+
+export const OptionContent = ({
+  content,
+  badge,
+}: {
+  content: ReactElement;
+  badge?: BadgeConfigType;
+}) => {
+  const theme = useTheme();
+  if (!badge) {
+    return content;
+  }
+
+  if (badge.type === 'status') {
+    return (
+      <Badge.Status
+        visible
+        style={{ paddingHorizontal: theme.space.small }}
+        testID="selector-switch-status-badge"
+      >
+        {content}
+      </Badge.Status>
+    );
+  }
+
+  return content;
+};
+
+const Option = <T,>({
+  text,
+  icon,
+  badge,
+  selected,
+}: Pick<OptionType<T>, 'text' | 'icon' | 'badge'> & {
+  selected: boolean;
+}): ReactElement => {
+  if (selected) {
+    return (
+      <StyledTextWrapper>
+        <OptionContent
+          content={
+            <Typography.Text fontSize="large" intent="inverted">
+              {text}
+            </Typography.Text>
+          }
+          badge={badge}
+        />
+      </StyledTextWrapper>
+    );
+  }
+
+  return (
+    <StyledIconWrapper>
+      <OptionContent content={<Icon icon={icon} />} badge={badge} />
+    </StyledIconWrapper>
+  );
+};
+
+export default Option;

package/src/components/Switch/SelectorSwitch/StyledSelectorSwitch.tsx

@@ -0,0 +1,25 @@
+import styled from '@emotion/native';
+import { View } from 'react-native';
+
+export const StyledWrapper = styled(View)(({ theme }) => ({
+  flexDirection: 'row',
+  width: '100%',
+  height: theme.__hd__.switch.sizes.selector.height,
+  borderRadius: theme.__hd__.switch.radii.selector.default,
+  backgroundColor: theme.__hd__.switch.colors.selector.background,
+  padding: theme.__hd__.switch.spaces.selector.wrapperPadding,
+}));
+
+export const StyledTextWrapper = styled(View)(({ theme }) => ({
+  flex: 1,
+  borderRadius: theme.__hd__.switch.radii.selector.default,
+  backgroundColor: theme.__hd__.switch.colors.selector.textBackground,
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
+export const StyledIconWrapper = styled(View)(({ theme }) => ({
+  paddingHorizontal: theme.__hd__.switch.spaces.selector.iconPadding,
+  justifyContent: 'center',
+  alignItems: 'center',
+}));