@hero-design/rn 7.4.0 → 7.6.1-alpha

package/src/components/Icon/IconList.ts

@@ -125,6 +125,7 @@ const IconList = [
   'stopwatch',
   'suitcase',
   'survey',
+  'swag',
   'switch',
   'tag',
   'target',
@@ -299,6 +300,7 @@ const IconList = [
   'video-1-outlined',
   'video-2-outlined',
   'wallet-outlined',
+  'warning',
 ] as const;
 
 export default IconList;

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,
+    ]
+  }
+/>
+`;