@hero-design/rn 7.20.1 → 7.21.0

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/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;
+}
+
+export 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/StyledSwitch.tsx

@@ -13,8 +13,8 @@ const StyledWrapper = styled(View)<{
   themeVariant: Variant;
   themeSize: ThemeSize;
 }>(({ theme, themeVariant, themeSize }) => ({
-  height: theme.__hd__.switch.heights[themeSize],
-  width: theme.__hd__.switch.widths[themeSize],
+  height: theme.__hd__.switch.sizes.heights[themeSize],
+  width: theme.__hd__.switch.sizes.widths[themeSize],
   paddingHorizontal: theme.__hd__.switch.spaces[themeSize],
   borderRadius: theme.__hd__.switch.radii.rounded,
   backgroundColor: theme.__hd__.switch.colors.backgroundColors[themeVariant],
@@ -25,8 +25,8 @@ const StyledWrapper = styled(View)<{
 const StyledKnot = styled(Animated.View)<{
   themeSize: ThemeSize;
 }>(({ theme, themeSize }) => ({
-  width: theme.__hd__.switch.thumbSizes[themeSize],
-  height: theme.__hd__.switch.thumbSizes[themeSize],
+  width: theme.__hd__.switch.sizes.thumbs[themeSize],
+  height: theme.__hd__.switch.sizes.thumbs[themeSize],
   backgroundColor: theme.__hd__.switch.colors.thumb,
   borderRadius: theme.__hd__.switch.radii.rounded,
 }));

package/src/components/Switch/__tests__/__snapshots__/StyledSwitch.spec.tsx.snap

@@ -8,8 +8,8 @@ exports[`StyledKnot renders correct style 1`] = `
     Object {
       "backgroundColor": "#ffffff",
       "borderRadius": 999,
-      "height": 20.8,
-      "width": 20.8,
+      "height": 24,
+      "width": 24,
     }
   }
   themeSize="medium"
@@ -24,10 +24,10 @@ exports[`StyledWrapper renders correct style with variant checked 1`] = `
         "backgroundColor": "#8505a2",
         "borderRadius": 999,
         "display": "flex",
-        "height": 28.799999999999997,
+        "height": 32,
         "justifyContent": "center",
         "paddingHorizontal": 4,
-        "width": 56,
+        "width": 64,
       },
       undefined,
     ]
@@ -45,10 +45,10 @@ exports[`StyledWrapper renders correct style with variant disabled-checked 1`] =
         "backgroundColor": "#c282d1",
         "borderRadius": 999,
         "display": "flex",
-        "height": 28.799999999999997,
+        "height": 32,
         "justifyContent": "center",
         "paddingHorizontal": 4,
-        "width": 56,
+        "width": 64,
       },
       undefined,
     ]
@@ -66,10 +66,10 @@ exports[`StyledWrapper renders correct style with variant disabled-unchecked 1`]
         "backgroundColor": "#ccced1",
         "borderRadius": 999,
         "display": "flex",
-        "height": 28.799999999999997,
+        "height": 32,
         "justifyContent": "center",
         "paddingHorizontal": 4,
-        "width": 56,
+        "width": 64,
       },
       undefined,
     ]
@@ -87,10 +87,10 @@ exports[`StyledWrapper renders correct style with variant unchecked 1`] = `
         "backgroundColor": "#808f91",
         "borderRadius": 999,
         "display": "flex",
-        "height": 28.799999999999997,
+        "height": 32,
         "justifyContent": "center",
         "paddingHorizontal": 4,
-        "width": 56,
+        "width": 64,
       },
       undefined,
     ]

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

@@ -22,10 +22,10 @@ exports[`Switch renders correctly 1`] = `
         "backgroundColor": "#808f91",
         "borderRadius": 999,
         "display": "flex",
-        "height": 28.799999999999997,
+        "height": 32,
         "justifyContent": "center",
         "paddingHorizontal": 4,
-        "width": 56,
+        "width": 64,
       },
       undefined,
     ]
@@ -41,9 +41,9 @@ exports[`Switch renders correctly 1`] = `
       Object {
         "backgroundColor": "#ffffff",
         "borderRadius": 999,
-        "height": 20.8,
+        "height": 24,
         "left": 0,
-        "width": 20.8,
+        "width": 24,
       }
     }
     themeSize="medium"
@@ -73,10 +73,10 @@ exports[`Switch trigger press function correctly 1`] = `
         "backgroundColor": "#808f91",
         "borderRadius": 999,
         "display": "flex",
-        "height": 28.799999999999997,
+        "height": 32,
         "justifyContent": "center",
         "paddingHorizontal": 4,
-        "width": 56,
+        "width": 64,
       },
       undefined,
     ]
@@ -92,9 +92,9 @@ exports[`Switch trigger press function correctly 1`] = `
       Object {
         "backgroundColor": "#ffffff",
         "borderRadius": 999,
-        "height": 20.8,
+        "height": 24,
         "left": 0,
-        "width": 20.8,
+        "width": 24,
       }
     }
     themeSize="medium"

package/src/components/Switch/index.tsx

@@ -60,10 +60,11 @@ const Switch = ({
   const variant = getVariant({ disabled, checked });
 
   const offset = checked
-    ? theme.__hd__.switch.widths[size] -
-      theme.__hd__.switch.thumbSizes[size] -
-      theme.__hd__.switch.spaces[size] * 2
-    : theme.__hd__.switch.spaces.inactive;
+    ? (theme.__hd__.switch.sizes.widths[size] -
+        theme.__hd__.switch.sizes.thumbs[size]) /
+        2 +
+      theme.__hd__.switch.sizes.thumbs[size] / 2
+    : 0;
 
   const [animatedOffset] = useState(() => new Animated.Value(offset));
 

package/src/components/TextInput/index.tsx

@@ -1,5 +1,5 @@
-import React, { useRef } from 'react';
-import { TextInput as RNTextInput, StyleSheet } from 'react-native';
+import React from 'react';
+import { StyleSheet } from 'react-native';
 import type {
   TextInputProps as NativeTextInputProps,
   StyleProp,
@@ -92,6 +92,10 @@ export interface TextInputProps extends NativeTextInputProps {
    * The helper text to display.
    */
   helpText?: string;
+  /*
+   * Customise input value renderer
+   */
+  renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
 }
 
 export const getVariant = ({
@@ -144,9 +148,9 @@ const TextInput = ({
   helpText,
   value,
   defaultValue,
+  renderInputValue,
   ...nativeProps
 }: TextInputProps): JSX.Element => {
-  const textInputReference = useRef<RNTextInput | null>(null);
   const displayText = (value !== undefined ? value : defaultValue) ?? '';
   const isEmptyValue = displayText.length === 0;
   const actualSuffix = loading ? 'loading' : suffix;
@@ -165,6 +169,37 @@ const TextInput = ({
   const shouldShowMaxLength = maxLength !== undefined;
 
   const theme = useTheme();
+
+  const nativeInputProps: NativeTextInputProps = {
+    style: StyleSheet.flatten([
+      { color: theme.__hd__.textInput.colors.text },
+      textStyle,
+    ]),
+    testID: 'text-input',
+    accessibilityState: {
+      disabled: variant === 'disabled' || variant === 'readonly',
+    },
+    // @ts-ignore
+    accessibilityLabelledBy,
+    ...nativeProps,
+    onFocus: event => {
+      setIsFocused(true);
+      nativeProps.onFocus?.(event);
+    },
+    onBlur: event => {
+      setIsFocused(false);
+      nativeProps.onBlur?.(event);
+    },
+    editable,
+    maxLength,
+    value,
+    onChangeText: text => {
+      nativeProps.onChangeText?.(text);
+    },
+    defaultValue,
+    placeholder: variant === 'focused' ? nativeProps.placeholder : undefined,
+  };
+
   return (
     <StyledContainer
       style={style}
@@ -224,40 +259,11 @@ const TextInput = ({
               )}
             </StyledLabelContainerInsideTextInput>
           )}
-          <StyledTextInput
-            // when input is not editable on Android, the text color is gray
-            // hence, adding this to make the text color the same as iOS
-            style={StyleSheet.flatten([
-              { color: theme.__hd__.textInput.colors.text },
-              textStyle,
-            ])}
-            testID="text-input"
-            accessibilityState={{
-              disabled: variant === 'disabled' || variant === 'readonly',
-            }}
-            // @ts-ignore
-            accessibilityLabelledBy={accessibilityLabelledBy}
-            {...nativeProps}
-            onFocus={event => {
-              setIsFocused(true);
-              nativeProps.onFocus?.(event);
-            }}
-            onBlur={event => {
-              setIsFocused(false);
-              nativeProps.onBlur?.(event);
-            }}
-            ref={textInputReference}
-            editable={editable}
-            maxLength={maxLength}
-            value={value}
-            onChangeText={text => {
-              nativeProps.onChangeText?.(text);
-            }}
-            defaultValue={defaultValue}
-            placeholder={
-              variant === 'focused' ? nativeProps.placeholder : undefined
-            }
-          />
+          {renderInputValue ? (
+            renderInputValue(nativeInputProps)
+          ) : (
+            <StyledTextInput {...nativeInputProps} />
+          )}
         </StyledTextInputAndLabelContainer>
         {typeof actualSuffix === 'string' ? (
           <Icon

package/src/index.ts

@@ -26,9 +26,11 @@ import Drawer from './components/Drawer';
 import Empty from './components/Empty';
 import FAB from './components/FAB';
 import Icon from './components/Icon';
+import Image from './components/Image';
 import List from './components/List';
 import PinInput from './components/PinInput';
 import Progress from './components/Progress';
+import Slider from './components/Slider';
 import Spinner from './components/Spinner';
 import Radio from './components/Radio';
 import SectionHeading from './components/SectionHeading';
@@ -70,9 +72,11 @@ export {
   Empty,
   FAB,
   Icon,
+  Image,
   List,
   PinInput,
   Progress,
+  Slider,
   Spinner,
   Radio,
   SectionHeading,

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

@@ -262,11 +262,11 @@ Object {
         "wrapper": 8,
       },
       "sizes": Object {
-        "icon": 20,
+        "icon": 24,
       },
       "space": Object {
         "iconDescriptionPadding": 12,
-        "iconTop": -3,
+        "iconTop": 0,
         "wrapperPadding": 16,
       },
     },
@@ -338,14 +338,11 @@ Object {
         "description": "BeVietnamPro-Light",
         "title": "BeVietnamPro-SemiBold",
       },
-      "radii": Object {
-        "illustration": 999,
-      },
       "sizes": Object {
-        "illustration": 168,
+        "image": 168,
       },
       "space": Object {
-        "illustrationMargin": 24,
+        "imageMargin": 24,
         "titleMargin": 16,
         "wrapperPadding": 16,
       },
@@ -419,6 +416,12 @@ Object {
         "xsmall": 16,
       },
     },
+    "image": Object {
+      "sizes": Object {
+        "15xlarge": 144,
+        "6xlarge": 72,
+      },
+    },
     "list": Object {
       "colors": Object {
         "checkedListItemContainerBackground": "#f3e6f6",
@@ -507,7 +510,7 @@ Object {
       },
       "sizes": Object {
         "barHeight": 4,
-        "circleWidth": 76,
+        "circleWidth": 72,
       },
     },
     "radio": Object {
@@ -539,10 +542,10 @@ Object {
         "editor": 14,
       },
       "sizes": Object {
-        "editorMinHeight": 21,
+        "editorMinHeight": 24,
         "toolbarButtonSize": 48,
         "toolbarSeparatorHeight": 16,
-        "toolbarSeparatorWidth": 1,
+        "toolbarSeparatorWidth": 2,
       },
       "space": Object {
         "editorPadding": 16,
@@ -578,6 +581,13 @@ Object {
         "sectionSpacing": 12,
       },
     },
+    "slider": Object {
+      "colors": Object {
+        "maximumTrackTint": "#ece8ef",
+        "minimumTrackTint": "#401960",
+        "thumbTint": "#e6e9e9",
+      },
+    },
     "spinner": Object {
       "colors": Object {
         "dot1": "#795e90",
@@ -620,8 +630,21 @@ Object {
       "radii": Object {
         "rounded": 999,
       },
+      "sizes": Object {
+        "heights": Object {
+          "medium": 32,
+          "small": 24,
+        },
+        "thumbs": Object {
+          "medium": 24,
+          "small": 16,
+        },
+        "widths": Object {
+          "medium": 64,
+          "small": 48,
+        },
+      },
       "spaces": Object {
-        "inactive": 0,
         "medium": 4,
         "small": 4,
       },
@@ -888,6 +911,8 @@ Object {
     "__alpha__globalNeutral3": "#f6f6f7",
     "__alpha__globalPrimary": "#001f23",
     "__alpha__globalSecondary1": "#4d6265",
+    "__alpha__globalSecondary4": "#e6e9e9",
+    "__alpha__primary1": "#401960",
     "__alpha__primary2": "#c38cee",
     "__alpha__secondary1": "#795e90",
     "__alpha__secondary2": "#a08cb0",
@@ -971,6 +996,26 @@ Object {
     "rounded": 999,
     "xlarge": 16,
   },
+  "sizes": Object {
+    "14xlarge": 136,
+    "15xlarge": 144,
+    "18xlarge": 168,
+    "19xlarge": 176,
+    "6xlarge": 72,
+    "7xlarge": 80,
+    "9xlarge": 96,
+    "large": 24,
+    "medium": 16,
+    "small": 8,
+    "smallMedium": 12,
+    "xlarge": 32,
+    "xsmall": 4,
+    "xxlarge": 40,
+    "xxsmall": 2,
+    "xxxlarge": 48,
+    "xxxxlarge": 56,
+    "xxxxxlarge": 64,
+  },
   "space": Object {
     "large": 24,
     "medium": 16,

package/src/theme/components/alert.ts

@@ -1,4 +1,3 @@
-import { scale } from '../../utils/scale';
 import type { GlobalTheme } from '../global';
 
 const getAlertTheme = (theme: GlobalTheme) => {
@@ -12,7 +11,7 @@ const getAlertTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    height: scale(48),
+    height: theme.sizes.xxxlarge,
   };
 
   const space = {

package/src/theme/components/avatar.ts

@@ -10,14 +10,14 @@ const getAvatarTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    small: theme.space.xlarge,
-    medium: theme.space.xxlarge,
-    large: theme.space.xxxlarge,
-    xlarge: theme.space.xxxxlarge,
-    xxlarge: theme.space.xlarge * 2,
-    xxxlarge: theme.space.xxlarge * 2,
-    xxxxlarge: theme.space.xxxlarge * 2,
-    xxxxxlarge: theme.space.small * 17,
+    small: theme.sizes.xlarge,
+    medium: theme.sizes.xxlarge,
+    large: theme.sizes.xxxlarge,
+    xlarge: theme.sizes.xxxxlarge,
+    xxlarge: theme.sizes.xxxxxlarge,
+    xxxlarge: theme.sizes['7xlarge'],
+    xxxxlarge: theme.sizes['9xlarge'],
+    xxxxxlarge: theme.sizes['14xlarge'],
   };
 
   const fontSizes = {