@hero-design/rn 8.74.1 → 8.75.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.74.1",
+  "version": "8.75.0-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

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

@@ -3,169 +3,33 @@ import React from 'react';
 import { Button, Text } from 'react-native';
 import BottomSheet from '..';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import { setOrientation } from '../../../testHelpers/utils';
 
 const Content = () => <Text>Content</Text>;
 
-describe('BottomSheet', () => {
-  it('renders correctly with open state', () => {
-    const { toJSON, getByText } = renderWithTheme(
+const Test = () => {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <>
       <BottomSheet
-        open
-        header="Title"
-        footer={<Button title="Footer CTA" />}
-        onRequestClose={jest.fn()}
+        header="Header title"
+        open={open}
+        onRequestClose={() => setOpen(false)}
       >
         <Content />
       </BottomSheet>
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-    expect(getByText('Title')).toBeDefined();
-    expect(getByText('Footer CTA')).toBeDefined();
-    expect(getByText('Content')).toBeDefined();
-  });
-
-  it('renders floating BottomSheet correctly', () => {
-    const { toJSON, getByText } = renderWithTheme(
-      <BottomSheet
-        variant="floating"
-        open
-        header="Title"
-        footer={<Button title="Footer CTA" />}
-        onRequestClose={jest.fn()}
-      >
-        <Content />
-      </BottomSheet>
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-    expect(getByText('Title')).toBeDefined();
-    expect(getByText('Footer CTA')).toBeDefined();
-    expect(getByText('Content')).toBeDefined();
-  });
-
-  it('renders correctly with close state', () => {
-    const { toJSON } = renderWithTheme(
-      <BottomSheet
-        open={false}
-        header="Title"
-        footer={<Button title="Footer CTA" />}
-        onRequestClose={jest.fn()}
-      >
-        <Content />
-      </BottomSheet>
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('renders correctly with BottomSheet.ScrollView', () => {
-    const { toJSON } = renderWithTheme(
-      <BottomSheet
-        open={false}
-        header="Title"
-        footer={<Button title="Footer CTA" />}
-        onRequestClose={jest.fn()}
-      >
-        <BottomSheet.ScrollView>
-          <Content />
-        </BottomSheet.ScrollView>
-      </BottomSheet>
-    );
+      <Button title="test" onPress={() => setOpen(true)} />
+    </>
+  );
+};
 
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('renders correctly in landscape mode', () => {
-    const { getByText } = renderWithTheme(
-      <BottomSheet
-        open
-        header="Title"
-        onRequestClose={jest.fn()}
-        supportedOrientations={['landscape', 'portrait']}
-      >
-        <Content />
-      </BottomSheet>
-    );
-    setOrientation('landscape');
-    expect(getByText('Title')).toBeDefined();
-    expect(getByText('Content')).toBeDefined();
-  });
-
-  describe('Header', () => {
-    it('renders default header correctly', () => {
-      const { getByText } = renderWithTheme(
-        <BottomSheet open header="Title">
-          <Content />
-        </BottomSheet>
-      );
-
-      expect(getByText('Title')).toBeDefined();
-      expect(getByText('Content')).toBeDefined();
-    });
-
-    it('renders floating header correctly', () => {
-      const { getByText } = renderWithTheme(
-        <BottomSheet open header="Title" variant="floating">
-          <Content />
-        </BottomSheet>
-      );
-
-      expect(getByText('Title')).toBeDefined();
-      expect(getByText('Content')).toBeDefined();
-    });
-
-    it('renders custom header correctly', () => {
-      const { getByText } = renderWithTheme(
-        <BottomSheet open header={<Text>Custom Title</Text>}>
-          <Content />
-        </BottomSheet>
-      );
-
-      expect(getByText('Custom Title')).toBeDefined();
-      expect(getByText('Content')).toBeDefined();
-    });
-
-    it('renders header close button correctly', () => {
-      const onRequestClose = jest.fn();
-
-      const { getByText, getByTestId } = renderWithTheme(
-        <BottomSheet open header="Title" onRequestClose={onRequestClose}>
-          <Content />
-        </BottomSheet>
-      );
-
-      expect(getByText('Content')).toBeDefined();
-      expect(getByTestId('bottom-sheet-close-icon')).toBeDefined();
-
-      // Invoke onRequestClose when pressed
-      fireEvent.press(getByTestId('bottom-sheet-close-icon'));
-      expect(onRequestClose).toBeCalled();
-    });
-
-    it('not render header close button', () => {
-      const { getByText, queryByTestId } = renderWithTheme(
-        <BottomSheet open header="Title" showCloseButton={false}>
-          <Content />
-        </BottomSheet>
-      );
+describe('BottomSheet', () => {
+  it('test', () => {
+    const { getByText, queryByText } = renderWithTheme(<Test />);
 
-      expect(queryByTestId('bottom-sheet-close-icon')).toBeNull();
-      expect(getByText('Content')).toBeDefined();
-    });
-  });
+    expect(queryByText('Content')).toBeFalsy();
 
-  describe('Footer', () => {
-    it('renders footer correctly', () => {
-      const { getByText } = renderWithTheme(
-        <BottomSheet open footer={<Button title="Footer Button" />}>
-          <Content />
-        </BottomSheet>
-      );
+    fireEvent.press(getByText('test'));
 
-      expect(getByText('Footer Button')).toBeDefined();
-      expect(getByText('Content')).toBeDefined();
-    });
+    expect(getByText('Content')).toBeVisible();
   });
 });

package/src/components/BottomSheet/index.tsx

@@ -145,6 +145,8 @@ const BottomSheet = ({
 
       onAnimationEnd?.();
     });
+
+    return () => animation.stop();
   }, [open]);
 
   const interpolateY = animatedValue.current.interpolate({

package/src/components/Collapse/__tests__/index.spec.tsx

@@ -6,14 +6,11 @@ import Collapse from '..';
 describe('Collapse', () => {
   it('renders correctly', () => {
     const wrapper = renderWithTheme(
-      <Collapse open testID="collapse">
+      <Collapse open={false} testID="collapse">
         <Text>Sample Text</Text>
       </Collapse>
     );
-    expect(wrapper.queryAllByTestId('collapse')).toHaveLength(1);
-    expect(wrapper.getByText('Sample Text')).toBeDefined();
-
-    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(wrapper.getByText('Sample Text')).not.toBeVisible();
   });
 
   it('should render Sample Text but not visible', () => {

package/src/components/FloatingIsland/StyledFloatingIsland.tsx

@@ -0,0 +1,32 @@
+import styled from '@emotion/native';
+import Box from '../Box';
+import Icon from '../Icon';
+
+const StyledWrapper = styled.TouchableOpacity(({ theme }) => ({
+  alignSelf: 'flex-start',
+  position: 'absolute',
+  left: '50%',
+  zIndex: 9999,
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: theme.__hd__.floatingIsland.space.wrapperPadding,
+  borderRadius: theme.__hd__.floatingIsland.radii.wrapper,
+  backgroundColor: theme.__hd__.floatingIsland.colors.wrapperBackground,
+  top: theme.__hd__.floatingIsland.space.wrapperTop,
+  ...theme.__hd__.floatingIsland.shadows.wrapper,
+}));
+
+const StyledPrefixWrapper = styled(Box)(({ theme }) => ({
+  marginRight: theme.__hd__.floatingIsland.space.prefixMarginRight,
+}));
+
+const StyledSuffixWrapper = styled(Box)(({ theme }) => ({
+  marginLeft: theme.__hd__.floatingIsland.space.suffixMarginLeft,
+}));
+
+const StyledIcon = styled(Icon)(({ theme }) => ({
+  padding: theme.__hd__.floatingIsland.space.iconPadding,
+}));
+
+export { StyledWrapper, StyledPrefixWrapper, StyledSuffixWrapper, StyledIcon };