@hero-design/rn 7.18.1 → 7.20.0

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

@@ -4,7 +4,7 @@ import renderWithTheme from '../../../../testHelpers/renderWithTheme';
 import SingleSelect from '..';
 import Typography from '../../../Typography';
 import List from '../../../List';
-import { ListRenderOptionInfo } from '../../types';
+import type { ListRenderOptionInfo } from '../../types';
 
 const options = [
   { text: 'Monday', value: 'mon' },

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

@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-
-import { OptionType, SelectProps } from '../types';
 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';
 
 export interface SingleSelectProps<V, T extends OptionType<V> = OptionType<V>>
   extends SelectProps<V, T> {
@@ -53,20 +52,25 @@ const SingleSelect = <V, T extends OptionType<V>>({
         }
       >
         <TouchableOpacity onPress={() => setOpen(true)}>
-          <TextInput
-            label={label}
-            value={displayedValue}
-            suffix="arrow-down"
-            multiline
-            error={error}
-            editable={editable}
-            disabled={disabled}
-            loading={inputProps?.loading}
-            numberOfLines={numberOfLines}
-            pointerEvents="none"
-            style={style}
-            testID={testID}
-          />
+          {
+            // prevent users from focusing TextInput
+          }
+          <View pointerEvents="none">
+            <TextInput
+              label={label}
+              value={displayedValue}
+              suffix="arrow-down"
+              multiline
+              error={error}
+              editable={editable}
+              disabled={disabled}
+              loading={inputProps?.loading}
+              numberOfLines={numberOfLines}
+              pointerEvents="none"
+              style={style}
+              testID={testID}
+            />
+          </View>
         </TouchableOpacity>
       </View>
       <BottomSheet

package/src/components/Select/StyledOptionList.tsx

@@ -1,16 +1,18 @@
 import { useTheme } from '@emotion/react';
-import React, { ReactElement, useRef, useState } from 'react';
-import {
-  Dimensions,
-  SectionList,
-  SectionListRenderItemInfo,
-  View,
-} from 'react-native';
+import React, { useRef, 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 { ScrollParams } from './helpers';
 import { OptionSpacer, SectionSpacer } from './StyledSelect';
-import { SectionData, OptionType, SelectProps, SectionType } from './types';
+import type { ScrollParams } from './helpers';
+import type {
+  SectionData,
+  OptionType,
+  SelectProps,
+  SectionType,
+} from './types';
 
 export type StyledOptionListProps<V, T extends OptionType<V>> = Pick<
   SelectProps<V, T>,

package/src/components/Select/helpers.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Keyboard } from 'react-native';
-import { SectionData, CombinedOptionsType, OptionType } from './types';
+import type { SectionData, CombinedOptionsType, OptionType } from './types';
 
 export const getKey = <V, T extends OptionType<V>>(
   option: T,

package/src/components/Select/index.tsx

@@ -1,8 +1,10 @@
-import MultiSelect, { MultiSelectProps } from './MultiSelect';
-import SingleSelect, { SingleSelectProps } from './SingleSelect';
+import MultiSelect from './MultiSelect';
+import SingleSelect from './SingleSelect';
+import type { MultiSelectProps } from './MultiSelect';
+import type { SingleSelectProps } from './SingleSelect';
+
+export type { MultiSelectProps, SingleSelectProps };
 
 export default Object.assign(SingleSelect, {
   Multi: MultiSelect,
 });
-
-export { MultiSelectProps, SingleSelectProps };

package/src/components/Select/types.ts

@@ -1,12 +1,12 @@
-import { ReactElement } from 'react';
-import {
+import type { ReactElement } from 'react';
+import type {
   ListRenderItemInfo,
   SectionListData,
   SectionListRenderItemInfo,
   StyleProp,
   ViewStyle,
 } from 'react-native';
-import { TextInputProps } from '../TextInput';
+import type { TextInputProps } from '../TextInput';
 
 export type OptionType<V> = {
   value: V;

package/src/components/Spinner/AnimatedSpinner.tsx

@@ -7,7 +7,7 @@ const AnimatedRow = Animated.createAnimatedComponent(StyledSpinnerRow);
 
 const AnimatedDot = Animated.createAnimatedComponent(StyledSpinnerDot);
 
-const AnimatedSpinner = () => {
+const AnimatedSpinner = ({ size = 'medium' }: { size: 'small' | 'medium' }) => {
   const rotateAnimation = useRef<Animated.Value>(new Animated.Value(0));
 
   useEffect(() => {
@@ -40,13 +40,13 @@ const AnimatedSpinner = () => {
         },
       ])}
     >
-      <AnimatedRow themePosition="top">
-        <AnimatedDot themePosition="topLeft" />
-        <AnimatedDot themePosition="topRight" />
+      <AnimatedRow themePosition="top" themeSize={size}>
+        <AnimatedDot themePosition="topLeft" themeSize={size} />
+        <AnimatedDot themePosition="topRight" themeSize={size} />
       </AnimatedRow>
-      <AnimatedRow themePosition="bottom">
-        <AnimatedDot themePosition="bottomLeft" />
-        <AnimatedDot themePosition="bottomRight" />
+      <AnimatedRow themePosition="bottom" themeSize={size}>
+        <AnimatedDot themePosition="bottomLeft" themeSize={size} />
+        <AnimatedDot themePosition="bottomRight" themeSize={size} />
       </AnimatedRow>
     </Animated.View>
   );

package/src/components/Spinner/StyledSpinner.tsx

@@ -1,5 +1,6 @@
-import { View, ViewProps } from 'react-native';
+import { View } from 'react-native';
 import styled from '@emotion/native';
+import type { ViewProps } from 'react-native';
 import { scale } from '../../utils/scale';
 
 const StyledView = styled(View)<ViewProps>();
@@ -10,43 +11,48 @@ const StyledSpinnerContainer = styled(View)<ViewProps>({
   alignItems: 'center',
 });
 
-const StyledSpinnerRow = styled(View)<{ themePosition: 'top' | 'bottom' }>(
-  ({ themePosition, theme }) => ({
-    flexDirection: 'row',
-    marginBottom:
-      themePosition === 'top'
-        ? theme.__hd__.spinner.space.spinnerDotPadding
-        : 0,
-  })
-);
+const StyledSpinnerRow = styled(View)<{
+  themePosition: 'top' | 'bottom';
+  themeSize: 'small' | 'medium';
+}>(({ themePosition, themeSize = 'medium', theme }) => ({
+  flexDirection: 'row',
+  marginBottom:
+    themePosition === 'top'
+      ? theme.__hd__.spinner.space.spinnerDotPadding[themeSize]
+      : 0,
+}));
 
 const StyledSpinnerDot = styled(View)<{
   themePosition: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
-}>(({ themePosition, theme }) => {
+  themeSize: 'small' | 'medium';
+}>(({ themePosition, themeSize = 'medium', theme }) => {
   const themeStyling = () => {
     switch (themePosition) {
       case 'topLeft':
-        return { opacity: 1 };
+        return {
+          backgroundColor: theme.__hd__.spinner.colors.dot1,
+        };
       case 'topRight':
         return {
-          marginLeft: theme.__hd__.spinner.space.spinnerDotPadding,
-          opacity: 0.7,
+          marginLeft: theme.__hd__.spinner.space.spinnerDotPadding[themeSize],
+          backgroundColor: theme.__hd__.spinner.colors.dot2,
         };
       case 'bottomLeft':
-        return { opacity: 0.5 };
+        return {
+          backgroundColor: theme.__hd__.spinner.colors.dot3,
+        };
       case 'bottomRight':
         return {
-          marginLeft: theme.__hd__.spinner.space.spinnerDotPadding,
-          opacity: 0.3,
+          marginLeft: theme.__hd__.spinner.space.spinnerDotPadding[themeSize],
+          backgroundColor: theme.__hd__.spinner.colors.dot4,
         };
     }
   };
 
   return {
-    height: scale(theme.__hd__.spinner.space.spinnerDot),
-    width: scale(theme.__hd__.spinner.space.spinnerDot),
+    height: scale(theme.__hd__.spinner.space.spinnerDot[themeSize]),
+    width: scale(theme.__hd__.spinner.space.spinnerDot[themeSize]),
     borderRadius: theme.__hd__.spinner.radii.default,
-    backgroundColor: theme.__hd__.spinner.color.default,
     ...themeStyling(),
   };
 });

package/src/components/Spinner/__tests__/AnimatedSpinner.spec.tsx

@@ -4,7 +4,7 @@ import { AnimatedSpinner } from '../AnimatedSpinner';
 
 describe('AnimatedSpinner', () => {
   it('renders correctly', () => {
-    const { toJSON } = renderWithTheme(<AnimatedSpinner />);
+    const { toJSON } = renderWithTheme(<AnimatedSpinner size="medium" />);
 
     expect(toJSON()).toMatchSnapshot();
   });

package/src/components/Spinner/__tests__/StyledSpinner.spec.tsx

@@ -8,10 +8,20 @@ import {
 } from '../StyledSpinner';
 
 describe('StyledSpinnerContainer', () => {
-  it('renders correctly', () => {
+  it('renders correctly in small size', () => {
     const { toJSON } = renderWithTheme(
       <StyledSpinnerContainer>
-        <AnimatedSpinner />
+        <AnimatedSpinner size="small" />
+      </StyledSpinnerContainer>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly in medium size', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledSpinnerContainer>
+        <AnimatedSpinner size="medium" />
       </StyledSpinnerContainer>
     );
 
@@ -21,14 +31,16 @@ describe('StyledSpinnerContainer', () => {
 
 describe('StyledSpinnerRow', () => {
   it.each`
-    themePosition
-    ${'top'}
-    ${'bottom'}
+    themePosition | themeSize
+    ${'top'}      | ${'small'}
+    ${'bottom'}   | ${'small'}
+    ${'top'}      | ${'medium'}
+    ${'bottom'}   | ${'medium'}
   `(
-    'renders correctly when position is $themePosition',
-    ({ themePosition }) => {
+    'renders correctly when position is $themePosition, and size is $themeSize',
+    ({ themePosition, themeSize }) => {
       const { toJSON } = renderWithTheme(
-        <StyledSpinnerRow themePosition={themePosition} />
+        <StyledSpinnerRow themePosition={themePosition} themeSize={themeSize} />
       );
 
       expect(toJSON()).toMatchSnapshot();
@@ -38,16 +50,20 @@ describe('StyledSpinnerRow', () => {
 
 describe('StyledSpinnerText', () => {
   it.each`
-    themePosition
-    ${'topLeft'}
-    ${'topRight'}
-    ${'bottomLeft'}
-    ${'bottomRight'}
+    themePosition    | themeSize
+    ${'topLeft'}     | ${'small'}
+    ${'topRight'}    | ${'small'}
+    ${'bottomLeft'}  | ${'small'}
+    ${'bottomRight'} | ${'small'}
+    ${'topLeft'}     | ${'medium'}
+    ${'topRight'}    | ${'medium'}
+    ${'bottomLeft'}  | ${'medium'}
+    ${'bottomRight'} | ${'medium'}
   `(
-    'renders correctly when position is $themePosition',
-    ({ themePosition }) => {
+    'renders correctly when position is $themePosition, size is $themeSize',
+    ({ themePosition, themeSize }) => {
       const { toJSON } = renderWithTheme(
-        <StyledSpinnerDot themePosition={themePosition} />
+        <StyledSpinnerDot themePosition={themePosition} themeSize={themeSize} />
       );
 
       expect(toJSON()).toMatchSnapshot();

package/src/components/Spinner/__tests__/__snapshots__/AnimatedSpinner.spec.tsx.snap

@@ -27,6 +27,7 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       ]
     }
     themePosition="top"
+    themeSize="medium"
   >
     <View
       collapsable={false}
@@ -34,16 +35,16 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#8505a2",
-            "borderRadius": 8,
+            "backgroundColor": "#795e90",
+            "borderRadius": 999,
             "height": 16,
-            "opacity": 1,
             "width": 16,
           },
           Object {},
         ]
       }
       themePosition="topLeft"
+      themeSize="medium"
     />
     <View
       collapsable={false}
@@ -51,17 +52,17 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#8505a2",
-            "borderRadius": 8,
+            "backgroundColor": "#a08cb0",
+            "borderRadius": 999,
             "height": 16,
             "marginLeft": 8,
-            "opacity": 0.7,
             "width": 16,
           },
           Object {},
         ]
       }
       themePosition="topRight"
+      themeSize="medium"
     />
   </View>
   <View
@@ -77,6 +78,7 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       ]
     }
     themePosition="bottom"
+    themeSize="medium"
   >
     <View
       collapsable={false}
@@ -84,16 +86,16 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#8505a2",
-            "borderRadius": 8,
+            "backgroundColor": "#d9d1df",
+            "borderRadius": 999,
             "height": 16,
-            "opacity": 0.5,
             "width": 16,
           },
           Object {},
         ]
       }
       themePosition="bottomLeft"
+      themeSize="medium"
     />
     <View
       collapsable={false}
@@ -101,17 +103,17 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#8505a2",
-            "borderRadius": 8,
+            "backgroundColor": "#ece8ef",
+            "borderRadius": 999,
             "height": 16,
             "marginLeft": 8,
-            "opacity": 0.3,
             "width": 16,
           },
           Object {},
         ]
       }
       themePosition="bottomRight"
+      themeSize="medium"
     />
   </View>
 </View>