@hero-design/rn 8.2.3 → 8.3.1

package/src/components/Carousel/CarouselPaginator/StyledCarouselPaginator.tsx

@@ -0,0 +1,20 @@
+import { Animated, View } from 'react-native';
+import styled from '@emotion/native';
+
+const StyledCarouselPaginator = styled(View)(() => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  marginStart: 'auto',
+}));
+
+const StyledCarouselPaginatorAnimatedView = styled(Animated.View)(
+  ({ theme }) => ({
+    height: theme.__hd__.carousel.sizes.paginatorHeight,
+    width: theme.__hd__.carousel.sizes.paginatorWidth,
+    borderRadius: theme.__hd__.carousel.radii.paginatorBorderRadius,
+    backgroundColor: theme.__hd__.carousel.colors.paginatorBackgroundColor,
+    marginHorizontal: theme.__hd__.carousel.space.paginatorMarginHorizontal,
+  })
+);
+
+export { StyledCarouselPaginator, StyledCarouselPaginatorAnimatedView };

package/src/components/Carousel/CarouselPaginator/index.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Animated, useWindowDimensions } from 'react-native';
+
+import {
+  StyledCarouselPaginatorAnimatedView,
+  StyledCarouselPaginator,
+} from './StyledCarouselPaginator';
+import { useTheme } from '../../../theme';
+
+interface CarouselPaginatorProps {
+  numberOfSlides: number;
+  scrollX: Animated.Value;
+}
+const CarouselPaginator = ({
+  numberOfSlides,
+  scrollX,
+}: CarouselPaginatorProps) => {
+  const { width } = useWindowDimensions();
+  const theme = useTheme();
+
+  return (
+    <StyledCarouselPaginator>
+      {new Array(numberOfSlides).fill('').map((_, index) => {
+        const inputRange = [
+          (index - 1) * width - 1,
+          index * width - 1,
+          (index + 1) * width,
+        ];
+
+        const indicatorWidth = scrollX.interpolate({
+          inputRange,
+          outputRange: [
+            theme.space.small,
+            theme.space.large,
+            theme.space.small,
+          ],
+          extrapolate: 'clamp',
+        });
+
+        const opacity = scrollX.interpolate({
+          inputRange,
+          outputRange: [0.5, 1, 0.5],
+          extrapolate: 'clamp',
+        });
+
+        return (
+          <StyledCarouselPaginatorAnimatedView
+            style={[{ width: indicatorWidth, opacity }]}
+            key={index.toString()}
+          />
+        );
+      })}
+    </StyledCarouselPaginator>
+  );
+};
+
+export default CarouselPaginator;

package/src/components/Carousel/StyledCarousel.tsx

@@ -0,0 +1,58 @@
+import { View } from 'react-native';
+import styled from '@emotion/native';
+import Typography from '../Typography';
+import Image from '../Image';
+import Box from '../Box';
+
+const StyledBackDrop = styled(View)<{
+  themeSlideBackground: string;
+}>(({ themeSlideBackground }) => ({
+  position: 'absolute',
+  backgroundColor: themeSlideBackground,
+  top: 0,
+  bottom: 0,
+  right: 0,
+  left: 0,
+}));
+
+const StyledCarouselView = styled(View)(() => ({
+  flexGrow: 2,
+  justifyContent: 'space-between',
+}));
+
+const StyledCarouselHeading = styled(Typography.Text)(({ theme }) => ({
+  marginTop: theme.__hd__.carousel.space.headingMarginTop,
+  marginBottom: theme.__hd__.carousel.space.headingMarginBottom,
+  fontFamily: theme.__hd__.carousel.fonts.heading,
+  fontSize: theme.__hd__.carousel.fontSizes.heading,
+  lineHeight: theme.__hd__.carousel.lineHeights.heading,
+}));
+
+const StyledCarouselImage = styled(Image)(() => ({
+  flex: 1,
+  width: '100%',
+  resizeMode: 'contain',
+}));
+
+const StyledCarouselContentWrapper = styled(Box)<{
+  width: number;
+}>(({ width }) => ({
+  width,
+}));
+
+const StyledCarouselFooterWrapper = styled(View)(({ theme }) => ({
+  paddingHorizontal: theme.__hd__.carousel.space.footerPaddingHorizontal,
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  paddingVertical: theme.__hd__.carousel.space.footerPaddingVertical,
+  marginBottom: theme.__hd__.carousel.space.footerMarginBottom,
+}));
+
+export {
+  StyledBackDrop,
+  StyledCarouselView,
+  StyledCarouselHeading,
+  StyledCarouselImage,
+  StyledCarouselContentWrapper,
+  StyledCarouselFooterWrapper,
+};

package/src/components/Carousel/__tests__/StyledCarousel.spec.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { StyledBackDrop } from '../StyledCarousel';
+import theme from '../../../theme';
+
+describe('StyledBackDrop', () => {
+  it('renders correct basic style', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledBackDrop themeSlideBackground={theme.colors.highlightedSurface} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Carousel/__tests__/__snapshots__/StyledCarousel.spec.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledBackDrop renders correct basic style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ece8ef",
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      },
+      undefined,
+    ]
+  }
+  themeSlideBackground="#ece8ef"
+/>
+`;