@hero-design/rn 7.7.0 → 7.9.0

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

@@ -0,0 +1,627 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OptionList renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "padding": 16,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    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,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="large"
+        themeFontWeight="regular"
+        themeIntent="body"
+      >
+        A
+      </Text>
+    </View>
+    <HeroIcon
+      name="checkmark"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    />
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginTop": 4,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    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,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="large"
+        themeFontWeight="regular"
+        themeIntent="body"
+      >
+        B
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginTop": 4,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    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,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="large"
+        themeFontWeight="regular"
+        themeIntent="body"
+      >
+        C
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`OptionList trigger onPress correctly on changing selection 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "padding": 16,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    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,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="large"
+        themeFontWeight="regular"
+        themeIntent="body"
+      >
+        A
+      </Text>
+    </View>
+    <HeroIcon
+      name="checkmark"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    />
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginTop": 4,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    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,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="large"
+        themeFontWeight="regular"
+        themeIntent="body"
+      >
+        B
+      </Text>
+    </View>
+    <HeroIcon
+      name="checkmark"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    />
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginTop": 4,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    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,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="large"
+        themeFontWeight="regular"
+        themeIntent="body"
+      >
+        C
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`OptionList trigger onPress correctly on select additional value 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "padding": 16,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    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,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="large"
+        themeFontWeight="regular"
+        themeIntent="body"
+      >
+        A
+      </Text>
+    </View>
+    <HeroIcon
+      name="checkmark"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    />
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginTop": 4,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    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,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="large"
+        themeFontWeight="regular"
+        themeIntent="body"
+      >
+        B
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginTop": 4,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    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,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="large"
+        themeFontWeight="regular"
+        themeIntent="body"
+      >
+        C
+      </Text>
+    </View>
+  </View>
+</View>
+`;

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

@@ -21,7 +21,7 @@ describe('rendering', () => {
         footerLabel="Confirm"
         options={options}
         value={['mon', 'tue']}
-        onPress={jest.fn()}
+        onConfirm={jest.fn()}
       />
     );
 
@@ -37,7 +37,7 @@ describe('rendering', () => {
         footerLabel="Confirm"
         options={options}
         value={['mon', 'tue']}
-        onPress={jest.fn()}
+        onConfirm={jest.fn()}
       />
     );
     fireEvent.press(getByTestId('text-input'));
@@ -56,7 +56,7 @@ describe('rendering', () => {
 });
 
 describe('behavior', () => {
-  it('calls onPress when pressing footer of bottom sheet', () => {
+  it('calls onConfirm when pressing footer of bottom sheet', () => {
     const onPress = jest.fn();
     const { getByText, getByTestId } = renderWithTheme(
       <MultiSelect
@@ -64,7 +64,7 @@ describe('behavior', () => {
         footerLabel="Confirm"
         options={options}
         value={['mon', 'tue']}
-        onPress={onPress}
+        onConfirm={onPress}
         testID="multi-select"
       />
     );
@@ -74,7 +74,7 @@ describe('behavior', () => {
     expect(onPress).toBeCalledTimes(1);
   });
 
-  it('does NOT call onPress when pressing closing button of bottom sheet', () => {
+  it('does NOT call onConfirm when pressing closing button of bottom sheet', () => {
     const onPress = jest.fn();
     const { getByTestId } = renderWithTheme(
       <MultiSelect
@@ -82,7 +82,7 @@ describe('behavior', () => {
         footerLabel="Confirm"
         options={options}
         value={['mon', 'tue']}
-        onPress={onPress}
+        onConfirm={onPress}
         testID="multi-select"
       />
     );

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

@@ -1,11 +1,12 @@
 import { useTheme } from '@emotion/react';
 import React, { useState } from 'react';
 import { StyleProp, ViewStyle, TouchableOpacity } from 'react-native';
+
+import { OptionType } from '../types';
 import BottomSheet from '../../BottomSheet';
-import TextInput from '../../TextInput';
-import Footer from './Footer';
+import Footer from '../Footer';
 import OptionList from './OptionList';
-import { OptionType } from './types';
+import TextInput from '../../TextInput';
 
 export interface MultiSelectProps<T> {
   /**
@@ -17,9 +18,9 @@ export interface MultiSelectProps<T> {
    */
   value: T[];
   /**
-   * onPress event handler.
+   * event handler for footer button.
    */
-  onPress: (value: T[]) => void;
+  onConfirm: (value: T[]) => void;
   /**
    * Field label.
    */
@@ -50,7 +51,7 @@ function MultiSelect<T>({
   style,
   label,
   footerLabel,
-  onPress,
+  onConfirm,
 }: MultiSelectProps<T>) {
   const theme = useTheme();
   const [open, setOpen] = useState(false);
@@ -85,7 +86,7 @@ function MultiSelect<T>({
             label={footerLabel}
             onPress={() => {
               setOpen(false);
-              onPress(selectingValue);
+              onConfirm(selectingValue);
             }}
           />
         }