@hero-design/rn 8.16.0 → 8.17.0

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

@@ -0,0 +1,498 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Skeleton renders correctly by default 1`] = `
+<View
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {},
+      Array [
+        Object {
+          "backgroundColor": "#f6f6f7",
+          "borderRadius": 16,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="light"
+  themeVariant="rounded"
+>
+  <View
+    style={
+      Array [
+        Object {},
+        Array [
+          Object {
+            "borderRadius": 16,
+            "overflow": "hidden",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeVariant="rounded"
+  >
+    <BVLinearGradient
+      collapsable={false}
+      colors={
+        Array [
+          4294375159,
+          4294046451,
+          4294375159,
+        ]
+      }
+      endPoint={
+        Object {
+          "x": 1,
+          "y": 0,
+        }
+      }
+      locations={null}
+      startPoint={
+        Object {
+          "x": 0,
+          "y": 0,
+        }
+      }
+      style={
+        Object {
+          "height": 0,
+          "transform": Array [
+            Object {
+              "translateX": -0,
+            },
+          ],
+          "width": 0,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`Skeleton renders correctly when intent is dark and variant is circular 1`] = `
+<View
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {},
+      Array [
+        Object {
+          "backgroundColor": "#ffffff",
+          "borderRadius": 999,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="dark"
+  themeVariant="circular"
+>
+  <View
+    style={
+      Array [
+        Object {},
+        Array [
+          Object {
+            "borderRadius": 999,
+            "overflow": "hidden",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeVariant="circular"
+  >
+    <BVLinearGradient
+      collapsable={false}
+      colors={
+        Array [
+          4294967295,
+          4294046451,
+          4294967295,
+        ]
+      }
+      endPoint={
+        Object {
+          "x": 1,
+          "y": 0,
+        }
+      }
+      locations={null}
+      startPoint={
+        Object {
+          "x": 0,
+          "y": 0,
+        }
+      }
+      style={
+        Object {
+          "height": 0,
+          "transform": Array [
+            Object {
+              "translateX": -0,
+            },
+          ],
+          "width": 0,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`Skeleton renders correctly when intent is dark and variant is rectangular 1`] = `
+<View
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {},
+      Array [
+        Object {
+          "backgroundColor": "#ffffff",
+          "borderRadius": 0,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="dark"
+  themeVariant="rectangular"
+>
+  <View
+    style={
+      Array [
+        Object {},
+        Array [
+          Object {
+            "borderRadius": 0,
+            "overflow": "hidden",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeVariant="rectangular"
+  >
+    <BVLinearGradient
+      collapsable={false}
+      colors={
+        Array [
+          4294967295,
+          4294046451,
+          4294967295,
+        ]
+      }
+      endPoint={
+        Object {
+          "x": 1,
+          "y": 0,
+        }
+      }
+      locations={null}
+      startPoint={
+        Object {
+          "x": 0,
+          "y": 0,
+        }
+      }
+      style={
+        Object {
+          "height": 0,
+          "transform": Array [
+            Object {
+              "translateX": -0,
+            },
+          ],
+          "width": 0,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`Skeleton renders correctly when intent is dark and variant is rounded 1`] = `
+<View
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {},
+      Array [
+        Object {
+          "backgroundColor": "#ffffff",
+          "borderRadius": 16,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="dark"
+  themeVariant="rounded"
+>
+  <View
+    style={
+      Array [
+        Object {},
+        Array [
+          Object {
+            "borderRadius": 16,
+            "overflow": "hidden",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeVariant="rounded"
+  >
+    <BVLinearGradient
+      collapsable={false}
+      colors={
+        Array [
+          4294967295,
+          4294046451,
+          4294967295,
+        ]
+      }
+      endPoint={
+        Object {
+          "x": 1,
+          "y": 0,
+        }
+      }
+      locations={null}
+      startPoint={
+        Object {
+          "x": 0,
+          "y": 0,
+        }
+      }
+      style={
+        Object {
+          "height": 0,
+          "transform": Array [
+            Object {
+              "translateX": -0,
+            },
+          ],
+          "width": 0,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`Skeleton renders correctly when intent is light and variant is circular 1`] = `
+<View
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {},
+      Array [
+        Object {
+          "backgroundColor": "#f6f6f7",
+          "borderRadius": 999,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="light"
+  themeVariant="circular"
+>
+  <View
+    style={
+      Array [
+        Object {},
+        Array [
+          Object {
+            "borderRadius": 999,
+            "overflow": "hidden",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeVariant="circular"
+  >
+    <BVLinearGradient
+      collapsable={false}
+      colors={
+        Array [
+          4294375159,
+          4294046451,
+          4294375159,
+        ]
+      }
+      endPoint={
+        Object {
+          "x": 1,
+          "y": 0,
+        }
+      }
+      locations={null}
+      startPoint={
+        Object {
+          "x": 0,
+          "y": 0,
+        }
+      }
+      style={
+        Object {
+          "height": 0,
+          "transform": Array [
+            Object {
+              "translateX": -0,
+            },
+          ],
+          "width": 0,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`Skeleton renders correctly when intent is light and variant is rectangular 1`] = `
+<View
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {},
+      Array [
+        Object {
+          "backgroundColor": "#f6f6f7",
+          "borderRadius": 0,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="light"
+  themeVariant="rectangular"
+>
+  <View
+    style={
+      Array [
+        Object {},
+        Array [
+          Object {
+            "borderRadius": 0,
+            "overflow": "hidden",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeVariant="rectangular"
+  >
+    <BVLinearGradient
+      collapsable={false}
+      colors={
+        Array [
+          4294375159,
+          4294046451,
+          4294375159,
+        ]
+      }
+      endPoint={
+        Object {
+          "x": 1,
+          "y": 0,
+        }
+      }
+      locations={null}
+      startPoint={
+        Object {
+          "x": 0,
+          "y": 0,
+        }
+      }
+      style={
+        Object {
+          "height": 0,
+          "transform": Array [
+            Object {
+              "translateX": -0,
+            },
+          ],
+          "width": 0,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`Skeleton renders correctly when intent is light and variant is rounded 1`] = `
+<View
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {},
+      Array [
+        Object {
+          "backgroundColor": "#f6f6f7",
+          "borderRadius": 16,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="light"
+  themeVariant="rounded"
+>
+  <View
+    style={
+      Array [
+        Object {},
+        Array [
+          Object {
+            "borderRadius": 16,
+            "overflow": "hidden",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeVariant="rounded"
+  >
+    <BVLinearGradient
+      collapsable={false}
+      colors={
+        Array [
+          4294375159,
+          4294046451,
+          4294375159,
+        ]
+      }
+      endPoint={
+        Object {
+          "x": 1,
+          "y": 0,
+        }
+      }
+      locations={null}
+      startPoint={
+        Object {
+          "x": 0,
+          "y": 0,
+        }
+      }
+      style={
+        Object {
+          "height": 0,
+          "transform": Array [
+            Object {
+              "translateX": -0,
+            },
+          ],
+          "width": 0,
+        }
+      }
+    />
+  </View>
+</View>
+`;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Skeleton from '..';
+
+describe('Skeleton', () => {
+  it('renders correctly by default', () => {
+    const { toJSON } = renderWithTheme(<Skeleton />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    variant          | intent
+    ${'circular'}    | ${'light'}
+    ${'circular'}    | ${'dark'}
+    ${'rectangular'} | ${'light'}
+    ${'rectangular'} | ${'dark'}
+    ${'rounded'}     | ${'light'}
+    ${'rounded'}     | ${'dark'}
+  `(
+    'renders correctly when intent is $intent and variant is $variant',
+    ({ variant, intent }) => {
+      const { toJSON } = renderWithTheme(
+        <Skeleton intent={intent} variant={variant} />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+});

package/src/components/Skeleton/index.tsx

@@ -0,0 +1,134 @@
+import LinearGradient from 'react-native-linear-gradient';
+import React, {
+  useEffect,
+  useMemo,
+  useState,
+  useCallback,
+  useRef,
+} from 'react';
+import {
+  Animated,
+  Easing,
+  LayoutChangeEvent,
+  ViewProps,
+  Platform,
+  StyleSheet,
+} from 'react-native';
+import { Theme, useTheme } from '../../theme';
+import { StyledContainer, StyledGradientContainer } from './StyledSkeleton';
+
+export interface SkeletonProps extends ViewProps {
+  /**
+   * Intent of the component.
+   */
+  intent?: 'light' | 'dark';
+  /**
+   * Variant of the component.
+   */
+  variant?: 'circular' | 'rectangular' | 'rounded';
+}
+
+const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
+
+const gradientPositions = {
+  start: { x: 0, y: 0 },
+  end: { x: 1, y: 0 },
+};
+
+const getGradientColors = (theme: Theme, intent: 'light' | 'dark') => {
+  switch (intent) {
+    case 'light': {
+      return [
+        theme.__hd__.skeleton.colors.lightGradientStart,
+        theme.__hd__.skeleton.colors.lightGradientEnd,
+        theme.__hd__.skeleton.colors.lightGradientStart,
+      ];
+    }
+    case 'dark': {
+      return [
+        theme.__hd__.skeleton.colors.darkGradientStart,
+        theme.__hd__.skeleton.colors.darkGradientEnd,
+        theme.__hd__.skeleton.colors.darkGradientStart,
+      ];
+    }
+  }
+};
+
+const Skeleton = ({
+  intent = 'light',
+  variant = 'rounded',
+  style,
+  onLayout,
+  ...props
+}: SkeletonProps) => {
+  const theme = useTheme();
+  const colors = useMemo(
+    () => getGradientColors(theme, intent),
+    [theme, intent]
+  );
+  const [containerWidth, setContainerWidth] = useState(
+    Number(StyleSheet.flatten(style)?.width) || 0
+  );
+  const [containerHeight, setContainerHeight] = useState(
+    Number(StyleSheet.flatten(style)?.height) || 0
+  );
+
+  const [shouldStartAnimation, setShouldStartAnimation] = useState(false);
+
+  const animatedValue = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (shouldStartAnimation) {
+      Animated.loop(
+        Animated.timing(animatedValue, {
+          toValue: 1,
+          duration: 1000,
+          easing: Easing.linear,
+          useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
+        })
+      ).start();
+    }
+  }, [shouldStartAnimation]);
+
+  const translateX = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-containerWidth, containerWidth],
+  });
+
+  const onContainerLayout = useCallback((e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    setContainerHeight(height);
+    setContainerWidth(width);
+
+    if (!shouldStartAnimation) {
+      setShouldStartAnimation(true);
+    }
+
+    onLayout?.(e);
+  }, []);
+
+  return (
+    <StyledContainer
+      style={style}
+      themeVariant={variant}
+      themeIntent={intent}
+      onLayout={onContainerLayout}
+      {...props}
+    >
+      <StyledGradientContainer themeVariant={variant}>
+        <AnimatedLinearGradient
+          start={gradientPositions.start}
+          end={gradientPositions.end}
+          style={{
+            width: containerWidth,
+            height: containerHeight,
+            transform: [{ translateX }],
+          }}
+          colors={colors}
+        />
+      </StyledGradientContainer>
+    </StyledContainer>
+  );
+};
+
+export default Skeleton;

package/src/index.ts

@@ -45,6 +45,7 @@ import Swipeable from './components/Swipeable';
 import Radio from './components/Radio';
 import SectionHeading from './components/SectionHeading';
 import Select from './components/Select';
+import Skeleton from './components/Skeleton';
 import Switch from './components/Switch';
 import Tabs from './components/Tabs';
 import Tag from './components/Tag';
@@ -99,6 +100,7 @@ export {
   PinInput,
   Progress,
   PageControl,
+  Skeleton,
   Slider,
   Spinner,
   Swipeable,

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -737,6 +737,21 @@ Object {
         "suffixMarginRight": 12,
       },
     },
+    "skeleton": Object {
+      "colors": Object {
+        "darkBackground": "#ffffff",
+        "darkGradientEnd": "#f1f2f3",
+        "darkGradientStart": "#ffffff",
+        "lightBackground": "#f6f6f7",
+        "lightGradientEnd": "#f1f2f3",
+        "lightGradientStart": "#f6f6f7",
+      },
+      "radii": Object {
+        "circular": 999,
+        "rectangular": 0,
+        "rounded": 16,
+      },
+    },
     "slider": Object {
       "colors": Object {
         "maximumTrackTint": "#ece8ef",

package/src/theme/components/skeleton.ts

@@ -0,0 +1,22 @@
+import type { GlobalTheme } from '../global';
+
+const getSkeletonTheme = (theme: GlobalTheme) => {
+  const colors = {
+    lightBackground: theme.colors.neutralGlobalSurface,
+    darkBackground: theme.colors.defaultGlobalSurface,
+    lightGradientStart: theme.colors.neutralGlobalSurface,
+    lightGradientEnd: theme.colors.archivedSurface,
+    darkGradientStart: theme.colors.defaultGlobalSurface,
+    darkGradientEnd: theme.colors.archivedSurface,
+  };
+
+  const radii = {
+    rectangular: 0,
+    circular: theme.radii.rounded,
+    rounded: theme.radii.xlarge,
+  };
+
+  return { colors, radii };
+};
+
+export default getSkeletonTheme;