@hero-design/rn 7.5.0 → 7.6.1-alpha.0

package/playground/src/Switch.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { Switch, Typography, useTheme } from '@hero-design/rn';
+
+type StateIndex = 'switchOne' | 'switchTwo' | 'switchThree' | 'switchFour';
+
+type SwitchStates = {
+  switchOne: boolean;
+  switchTwo: boolean;
+  switchThree: boolean;
+  switchFour: boolean;
+};
+
+const SwitchPlayground = () => {
+  const theme = useTheme();
+
+  const [isChecked, setIsChecked] = React.useState<SwitchStates>({
+    switchOne: true,
+    switchTwo: false,
+    switchThree: true,
+    switchFour: false,
+  });
+
+  const toggleState = React.useCallback(
+    (switchId: StateIndex) =>
+      setIsChecked({
+        ...isChecked,
+        [switchId]: !isChecked[switchId],
+      }),
+    [isChecked]
+  );
+
+  return (
+    <View
+      style={{
+        margin: theme.space.medium,
+      }}
+    >
+      <Typography.Text style={{ marginVertical: theme.space.xsmall }}>
+        Medium size
+      </Typography.Text>
+      <Switch
+        checked={isChecked.switchOne}
+        onPress={() => toggleState('switchOne')}
+      />
+      <Switch
+        style={{ marginTop: theme.space.small }}
+        checked={isChecked.switchTwo}
+        onPress={() => toggleState('switchTwo')}
+      />
+      <Switch checked disabled style={{ marginTop: theme.space.small }} />
+      <Switch disabled style={{ marginTop: theme.space.small }} />
+
+      <Typography.Text style={{ marginVertical: theme.space.xsmall }}>
+        Small size
+      </Typography.Text>
+      <Switch
+        size="small"
+        checked={isChecked.switchThree}
+        onPress={() => toggleState('switchThree')}
+      />
+      <Switch
+        style={{ marginTop: theme.space.small }}
+        size="small"
+        checked={isChecked.switchFour}
+        onPress={() => toggleState('switchFour')}
+      />
+      <Switch
+        checked
+        disabled
+        style={{ marginTop: theme.space.small }}
+        size="small"
+      />
+      <Switch disabled style={{ marginTop: theme.space.small }} size="small" />
+    </View>
+  );
+};
+
+export default SwitchPlayground;

package/rollup.config.js

@@ -22,7 +22,13 @@ export default {
       format: 'esm',
     },
   ],
-  external: ['react', 'react-native', 'react-native-safe-area-context'],
+  external: [
+    'react',
+    'react-native',
+    'react-native-safe-area-context',
+    'react-native-vector-icons',
+    'react-native-pager-view',
+  ],
   plugins: [
     replace({
       'process.env.NODE_ENV': JSON.stringify('production'),

package/src/components/BottomSheet/Header.tsx

@@ -24,7 +24,7 @@ const Header = ({
     <StyledHeaderWrapper>
       {typeof content === 'string' ? (
         <StyledHeader adjacentIcon={showCloseButton}>
-          <Typography.Text fontSize="xlarge" fontWeight="semi-bold">
+          <Typography.Text fontSize="large" fontWeight="semi-bold">
             {content}
           </Typography.Text>
         </StyledHeader>

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

@@ -111,14 +111,14 @@ exports[`BottomSheet renders correctly with close state 1`] = `
                 Object {
                   "color": "#292a2b",
                   "fontFamily": "BeVietnamPro-SemiBold",
-                  "fontSize": 18,
-                  "letterSpacing": 0.54,
-                  "lineHeight": 26,
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
                 },
                 undefined,
               ]
             }
-            themeFontSize="xlarge"
+            themeFontSize="large"
             themeFontWeight="semi-bold"
             themeIntent="body"
           >
@@ -376,14 +376,14 @@ exports[`BottomSheet renders correctly with open state 1`] = `
                 Object {
                   "color": "#292a2b",
                   "fontFamily": "BeVietnamPro-SemiBold",
-                  "fontSize": 18,
-                  "letterSpacing": 0.54,
-                  "lineHeight": 26,
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
                 },
                 undefined,
               ]
             }
-            themeFontSize="xlarge"
+            themeFontSize="large"
             themeFontWeight="semi-bold"
             themeIntent="body"
           >

package/src/components/BottomSheet/index.tsx

@@ -40,6 +40,10 @@ interface BottomSheetProps {
    * is being dismiss by interacting outside of the bottom sheet.
    */
   onRequestClose?: () => void;
+  /**
+   * Callback that is called once the bottom sheet has been dismissed.
+   */
+  onDismiss?: () => void;
   /**
    * Displays an X button on bottom sheet header that will invoke onRequestClose callback on press.
    */
@@ -69,6 +73,7 @@ const BottomSheet = ({
   children,
   onOpen,
   onRequestClose,
+  onDismiss,
   showCloseButton = true,
   hasBackdrop = true,
   showDivider = true,
@@ -93,6 +98,7 @@ const BottomSheet = ({
       const endValueOfTransition = open ? 1 : 0;
       if (endValueOfTransition === 0 && value === endValueOfTransition) {
         setVisibility(false);
+        onDismiss?.();
       }
     });
 

package/src/components/Radio/RadioGroup.tsx

@@ -2,20 +2,26 @@ import React, { ReactElement } from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 import Radio from './Radio';
 import { Spacer } from './StyledRadio';
+import { OptionType } from './types';
 
-export interface RadioGroupProps {
+export interface RadioGroupProps<T> {
   /**
    * An array of radio options to be selected.
    */
-  options: { text: string; value: string }[];
+  options: OptionType<T>[];
   /**
    * Radio input value.
    */
-  value: string;
+  value: T;
   /**
    * Press event handler receiving selected radio's value.
    */
-  onPress: (value: string) => void;
+  onPress: (value: T) => void;
+  /**
+   * 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.
    */
@@ -26,16 +32,34 @@ export interface RadioGroupProps {
   testID?: string;
 }
 
-const RadioGroup = ({
+function getKey<T>(
+  option: OptionType<T>,
+  index: number,
+  keyExtractor?: (opt: OptionType<T>, i?: number) => string
+) {
+  let key: React.Key = '';
+  if (keyExtractor !== undefined) {
+    key = keyExtractor(option, index);
+  } else if (option.key !== undefined) {
+    key = option.key;
+  } else {
+    key = index;
+  }
+
+  return key;
+}
+
+const RadioGroup = <T,>({
   value,
   onPress,
   options,
+  keyExtractor,
   style,
   testID,
-}: RadioGroupProps): ReactElement => (
+}: RadioGroupProps<T>): ReactElement => (
   <View style={style} testID={testID}>
     {options.map((option, index) => (
-      <React.Fragment key={option.value}>
+      <React.Fragment key={getKey(option, index, keyExtractor)}>
         {index !== 0 && <Spacer />}
         <Radio
           text={option.text}

package/src/components/Radio/types.ts

@@ -0,0 +1 @@
+export type OptionType<T> = { value: T; text: string; key?: string };

package/src/components/SectionHeading/StyledHeading.tsx

@@ -2,10 +2,10 @@ import styled from '@emotion/native';
 import { View } from 'react-native';
 
 const StyledHeading = styled(View)(({ theme }) => ({
-  paddingVertical: theme.space.small,
-  paddingHorizontal: theme.space.medium,
-  backgroundColor: theme.colors.outline,
-  marginBottom: theme.space.medium,
+  paddingVertical: theme.__hd__.sectionHeading.space.headingVerticalPadding,
+  paddingHorizontal: theme.__hd__.sectionHeading.space.headingHorizontalPadding,
+  backgroundColor: theme.__hd__.sectionHeading.colors.background,
+  marginBottom: theme.__hd__.sectionHeading.space.headingMarginBottom,
   display: 'flex',
   flexDirection: 'row',
   alignContent: 'center',
@@ -13,7 +13,7 @@ const StyledHeading = styled(View)(({ theme }) => ({
 }));
 
 const StyledIconWrapper = styled(View)(({ theme }) => ({
-  marginRight: theme.space.small,
+  marginRight: theme.__hd__.sectionHeading.space.iconMarginRight,
 }));
 
 const StyledWrapper = styled(View)(() => ({

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { FooterText } from './StyledMultiSelect';
+
+function Footer({ label, onPress }: { label: string; onPress: () => void }) {
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <FooterText fontSize="large" fontWeight="semi-bold">
+        {label}
+      </FooterText>
+    </TouchableOpacity>
+  );
+}
+
+export default Footer;

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import { View } from 'react-native';
+import { MultiSelectProps } from '.';
+import Icon from '../../Icon';
+import Typography from '../../Typography';
+import { OptionListWrapper, OptionWrapper, Spacer } from './StyledMultiSelect';
+import { OptionType } from './types';
+
+function Option({
+  text,
+  selected,
+  onPress,
+}: {
+  text: string;
+  selected: boolean;
+  onPress: () => void;
+}) {
+  return (
+    <OptionWrapper themeSelected={selected} onPress={onPress}>
+      <View style={{ flex: 1 }}>
+        <Typography.Text fontSize="large">{text}</Typography.Text>
+      </View>
+      {selected && <Icon icon="checkmark" size="small" />}
+    </OptionWrapper>
+  );
+}
+
+function getKey<T>(
+  option: OptionType<T>,
+  index: number,
+  keyExtractor?: (opt: OptionType<T>, i?: number) => string
+) {
+  let key: React.Key = '';
+  if (keyExtractor !== undefined) {
+    key = keyExtractor(option, index);
+  } else if (option.key !== undefined) {
+    key = option.key;
+  } else {
+    key = index;
+  }
+
+  return key;
+}
+
+function OptionList<T>({
+  value,
+  options,
+  onPress,
+  keyExtractor,
+}: Pick<
+  MultiSelectProps<T>,
+  'value' | 'options' | 'onPress' | 'keyExtractor'
+>) {
+  return (
+    <OptionListWrapper>
+      {options.map((opt, index) => (
+        <React.Fragment key={getKey(opt, index, keyExtractor)}>
+          {index !== 0 && <Spacer />}
+          <Option
+            text={opt.text}
+            selected={value.includes(opt.value)}
+            onPress={() => {
+              if (value.includes(opt.value)) {
+                onPress(value.filter(val => val !== opt.value));
+              } else {
+                onPress([...value, opt.value]);
+              }
+            }}
+          />
+        </React.Fragment>
+      ))}
+    </OptionListWrapper>
+  );
+}
+
+export default OptionList;

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

@@ -0,0 +1,30 @@
+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 Spacer = styled(View)(({ theme }) => ({
+  marginTop: theme.__hd__.select.space.optionListSpacing,
+}));
+
+const FooterText = styled(Typography.Text)(({ theme }) => ({
+  color: theme.__hd__.select.colors.footerText,
+}));
+
+export { OptionWrapper, OptionListWrapper, Spacer, FooterText };

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import {
+  OptionWrapper,
+  OptionListWrapper,
+  Spacer,
+  FooterText,
+} from '../StyledMultiSelect';
+
+describe('OptionWrapper', () => {
+  it.each`
+    themeSelected
+    ${true}
+    ${false}
+  `('has selected style: $themeSelected', ({ themeSelected }) => {
+    const { toJSON } = renderWithTheme(
+      <OptionWrapper themeSelected={themeSelected} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('OptionListWrapper', () => {
+  it('has correct style', () => {
+    const { toJSON } = renderWithTheme(<OptionListWrapper />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('Spacer', () => {
+  it('has correct style', () => {
+    const { toJSON } = renderWithTheme(<Spacer />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('FooterText', () => {
+  it('has correct style', () => {
+    const { toJSON, getByText } = renderWithTheme(
+      <FooterText>Confirm</FooterText>
+    );
+
+    expect(getByText('Confirm')).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Select/MultiSelect/__tests__/__snapshots__/StyledMultiSelect.spec.tsx.snap

@@ -0,0 +1,108 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FooterText has correct style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#7622d7",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+>
+  Confirm
+</Text>
+`;
+
+exports[`OptionListWrapper has correct style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "padding": 16,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`OptionWrapper has selected style: false 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#ffffff",
+      "borderRadius": 4,
+      "flexDirection": "row",
+      "justifyContent": "space-between",
+      "opacity": 1,
+      "padding": 16,
+    }
+  }
+/>
+`;
+
+exports[`OptionWrapper has selected style: true 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#f1e9fb",
+      "borderRadius": 4,
+      "flexDirection": "row",
+      "justifyContent": "space-between",
+      "opacity": 1,
+      "padding": 16,
+    }
+  }
+/>
+`;
+
+exports[`Spacer has correct style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "marginTop": 4,
+      },
+      undefined,
+    ]
+  }
+/>
+`;