@hero-design/rn 8.16.1 → 8.17.0

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;

package/src/theme/getTheme.ts

@@ -31,6 +31,7 @@ import getRefreshControlTheme from './components/refreshControl';
 import getRichTextEditorTheme from './components/richTextEditor';
 import getSectionHeadingTheme from './components/sectionHeading';
 import getSelectTheme from './components/select';
+import getSkeletonTheme from './components/skeleton';
 import getSliderTheme from './components/slider';
 import getSpinnerTheme from './components/spinner';
 import getSwipeableTheme from './components/swipeable';
@@ -78,6 +79,7 @@ type Theme = GlobalTheme & {
     richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
     sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
     select: ReturnType<typeof getSelectTheme>;
+    skeleton: ReturnType<typeof getSkeletonTheme>;
     slider: ReturnType<typeof getSliderTheme>;
     spinner: ReturnType<typeof getSpinnerTheme>;
     swipeable: ReturnType<typeof getSwipeableTheme>;
@@ -131,6 +133,7 @@ const getTheme = (
       richTextEditor: getRichTextEditorTheme(globalTheme),
       sectionHeading: getSectionHeadingTheme(globalTheme),
       select: getSelectTheme(globalTheme),
+      skeleton: getSkeletonTheme(globalTheme),
       slider: getSliderTheme(globalTheme),
       spinner: getSpinnerTheme(globalTheme),
       swipeable: getSwipeableTheme(globalTheme),

package/types/components/Skeleton/StyledSkeleton.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+declare type ThemeIntent = 'light' | 'dark';
+declare type ThemeVariant = 'circular' | 'rectangular' | 'rounded';
+declare const StyledContainer: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeIntent: ThemeIntent;
+    themeVariant: ThemeVariant;
+}, {}, {}>;
+declare const StyledGradientContainer: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeVariant: ThemeVariant;
+}, {}, {}>;
+export { StyledContainer, StyledGradientContainer };

package/types/components/Skeleton/index.d.ts

@@ -0,0 +1,13 @@
+import { ViewProps } from 'react-native';
+export interface SkeletonProps extends ViewProps {
+    /**
+     * Intent of the component.
+     */
+    intent?: 'light' | 'dark';
+    /**
+     * Variant of the component.
+     */
+    variant?: 'circular' | 'rectangular' | 'rounded';
+}
+declare const Skeleton: ({ intent, variant, style, onLayout, ...props }: SkeletonProps) => JSX.Element;
+export default Skeleton;

package/types/index.d.ts

@@ -32,6 +32,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';
@@ -43,5 +44,5 @@ import Typography from './components/Typography';
 import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
 import PageControl from './components/PageControl';
-export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, Icon, Image, List, PinInput, Progress, PageControl, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RefreshControl, RichTextEditor, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, Icon, Image, List, PinInput, Progress, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RefreshControl, RichTextEditor, };
 export * from './types';

package/types/theme/components/skeleton.d.ts

@@ -0,0 +1,17 @@
+import type { GlobalTheme } from '../global';
+declare const getSkeletonTheme: (theme: GlobalTheme) => {
+    colors: {
+        lightBackground: string;
+        darkBackground: string;
+        lightGradientStart: string;
+        lightGradientEnd: string;
+        darkGradientStart: string;
+        darkGradientEnd: string;
+    };
+    radii: {
+        rectangular: number;
+        circular: number;
+        rounded: number;
+    };
+};
+export default getSkeletonTheme;

package/types/theme/getTheme.d.ts

@@ -29,6 +29,7 @@ import getRefreshControlTheme from './components/refreshControl';
 import getRichTextEditorTheme from './components/richTextEditor';
 import getSectionHeadingTheme from './components/sectionHeading';
 import getSelectTheme from './components/select';
+import getSkeletonTheme from './components/skeleton';
 import getSliderTheme from './components/slider';
 import getSpinnerTheme from './components/spinner';
 import getSwipeableTheme from './components/swipeable';
@@ -74,6 +75,7 @@ declare type Theme = GlobalTheme & {
         richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
         sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
         select: ReturnType<typeof getSelectTheme>;
+        skeleton: ReturnType<typeof getSkeletonTheme>;
         slider: ReturnType<typeof getSliderTheme>;
         spinner: ReturnType<typeof getSpinnerTheme>;
         swipeable: ReturnType<typeof getSwipeableTheme>;