@fibery/ui-kit 1.0.0

package/src/loading-sausage.tsx

@@ -0,0 +1,171 @@
+import {css} from "@linaria/core";
+import {styled} from "@linaria/react";
+import cn from "classnames";
+import _ from "lodash";
+import {useRef, memo} from "react";
+import {space, themeVars} from "./designSystem";
+
+const getRandomWithSeed = _.memoize((seed: number) => {
+  const x = Math.sin(seed + 1) * 10000;
+  return x - Math.floor(x);
+});
+
+export const getRandomInt = (min: number, max: number, seed?: number): number => {
+  const random = seed ? getRandomWithSeed(seed) : process.env.NODE_ENV === "test" ? 0.5 : Math.random();
+  return Math.floor(random * (max - min + 1)) + min;
+};
+
+const blackGradient1 = `linear-gradient(90deg, ${themeVars.shades.opacity5} 0%, ${themeVars.shades.opacity10} 100%)`;
+const blackGradient2 = `linear-gradient(90deg, ${themeVars.shades.opacity10} 0%, ${themeVars.shades.opacity5} 100%)`;
+
+const whiteGradient1 = `linear-gradient(90deg, ${themeVars.lights.opacity5} 0%, ${themeVars.lights.opacity10} 100%)`;
+const whiteGradient2 = `linear-gradient(90deg, ${themeVars.lights.opacity10} 0%, ${themeVars.lights.opacity5} 100%)`;
+
+const loadingSausageStyle = css`
+  vertical-align: middle;
+  position: relative;
+  background: none;
+
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  @keyframes OpacityAnim {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  &::before {
+    animation: OpacityAnim 2s ease-in-out 0s infinite alternate;
+  }
+
+  &::after {
+    animation: OpacityAnim 2s ease-in-out -2s infinite alternate;
+  }
+`;
+
+const light = css`
+  &::before {
+    background-image: ${blackGradient1};
+  }
+
+  &::after {
+    background-image: ${blackGradient2};
+  }
+`;
+
+const dark = css`
+  &::before {
+    background-image: ${whiteGradient1};
+  }
+
+  &::after {
+    background-image: ${whiteGradient2};
+  }
+`;
+
+const marginStyle = css`
+  ${{
+    marginTop: space.xs,
+    marginBottom: space.xs,
+  }}
+`;
+
+const loadingSausageWithAnimatedAppearanceStyle = css`
+  @keyframes OpacityAnim {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  animation: OpacityAnim 1s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1;
+`;
+
+const Container = styled.div<{height: number}>`
+  &::before,
+  &::after {
+    border-radius: ${(props) => `${props.height / 2}px`};
+  }
+`;
+
+type Props = {
+  minWidth?: number;
+  maxWidth?: number;
+  height?: number;
+  inverted?: boolean;
+  animateAppearance?: boolean;
+  margins?: boolean;
+  index?: number;
+};
+
+export const LoadingSausage = memo(function LoadingSausage({
+  minWidth = 80,
+  maxWidth = 120,
+  index,
+  height = 12,
+  inverted = false,
+  margins = true,
+  animateAppearance = false,
+}: Props): JSX.Element {
+  const widthRef = useRef(getRandomInt(minWidth, maxWidth, index));
+  return (
+    <Container
+      height={height}
+      style={{width: widthRef.current, height}}
+      className={cn(
+        loadingSausageStyle,
+        inverted ? light : dark,
+        margins && marginStyle,
+        animateAppearance && loadingSausageWithAnimatedAppearanceStyle
+      )}
+    />
+  );
+});
+
+type SausageListProps = {
+  amount?: number;
+  minAmount?: number;
+  maxAmount?: number;
+  WrapperComponent?: ({children}: {children: JSX.Element}) => JSX.Element;
+} & Omit<Props, "index">;
+export const LoadingSausageList = memo<SausageListProps>(function LoadingSausageList({
+  amount,
+  minAmount = 1,
+  maxAmount = 1,
+  WrapperComponent,
+  ...restProps
+}: SausageListProps) {
+  const calculatedAmount = amount || getRandomInt(minAmount, maxAmount);
+  const list = new Array(calculatedAmount).fill(null);
+  return (
+    <>
+      {list.map((_, index) => {
+        const style = {opacity: (calculatedAmount - index) / calculatedAmount};
+        return (
+          <div style={style} key={index}>
+            {WrapperComponent ? (
+              <WrapperComponent>
+                <LoadingSausage index={index + 1} {...restProps} />
+              </WrapperComponent>
+            ) : (
+              <LoadingSausage index={index + 1} {...restProps} />
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});