Refactor Carousel

packages/components/src/components/Carousel/Carousel.style.ts

@@ -1,33 +1,38 @@
-import { css } from "@emotion/core"
+import { css } from "@emotion/core";
+import { StyleFn, makeStyles } from "../../utils";
 
 export type CarouselStyleProps = {
-  navTopPosition?: string
-}
+	navTopPosition?: string;
+};
 
-export let makeStyles = ({
-  navTopPosition = "0"
-}: CarouselStyleProps) => {
-  return {
-    wrapper: css`
-      position: relative;
-    `,
-    container: css`
-      display: flex;
-      width: 100%;
-      overflow: hidden;
-    `,
-    item: css`
-      display: inline-block;
-    `,
-    navLeft: css`
-      position: absolute;
-      left: 0;
-      top: ${navTopPosition};
-    `,
-    navRight: css`
-      position: absolute;
-      right: 0;
-      top: ${navTopPosition};
-    `
-  }
-}
+const wrapper: StyleFn = () => ({
+	position: "relative",
+});
+const container: StyleFn = () => ({
+	display: "flex",
+	width: "100%",
+	overflow: "hidden",
+});
+
+const item: StyleFn = () => ({
+	display: "inline-block",
+});
+const navLeft: StyleFn = (_, { navTopPosition = 0 }) => ({
+	position: "absolute",
+	left: 0,
+	top: `${navTopPosition}`,
+});
+
+const navRight: StyleFn = (_, { navTopPosition = 0 }) => ({
+	position: "absolute",
+	right: 0,
+	top: `${navTopPosition}`,
+});
+
+export const useCSS = (props: CarouselStyleProps) => ({
+	wrapper: makeStyles([wrapper])(props),
+	container: makeStyles([container])(props),
+	item: makeStyles([item])(props),
+	navLeft: makeStyles([navLeft])(props),
+	navRight: makeStyles([navRight])(props),
+});

packages/components/src/components/Carousel/Carousel.tsx

@@ -1,40 +1,39 @@
-import React, { ReactNode, useRef } from "react"
-import { makeStyles, CarouselStyleProps } from "./Carousel.style"
-import { NavButton } from "./../../"
+import React, { ReactNode, useRef } from "react";
+import { useCSS, CarouselStyleProps } from "./Carousel.style";
+import { NavButton } from "./../../";
 
 type CarouselProps = {
-  children: Array<ReactNode>
-  scrollAmount?: Number
-} & CarouselStyleProps
+	children: Array<ReactNode>;
+	scrollAmount?: Number;
+} & CarouselStyleProps;
 
-export default function Carousel({
-  children,
-  scrollAmount = 200,
-  ...styleProps
-}: CarouselProps) {
+export default function Carousel({ children, scrollAmount = 200, ...styleProps }: CarouselProps) {
+	const container = useRef(null);
 
-  const container = useRef(null)
+	function onScroll(direction: "right" | "left") {
+		container.current.scrollBy({
+			left: direction === "left" ? -scrollAmount : scrollAmount,
+			behavior: "smooth",
+		});
+	}
 
-  function onScroll(direction: "right" | "left") {
-    container.current.scrollBy({
-      left: direction === "left" ? -(scrollAmount) : scrollAmount,
-      behavior: 'smooth'
-    })
-  }
+	let styles = useCSS(styleProps);
 
-  let styles = makeStyles(styleProps)
-
-  return (
-    <div css={styles.wrapper}>
-      <div ref={container} css={styles.container}>
-        {children.map((item, index) => <div key={`carousel-${index}`} css={styles.item}>{item}</div>)}
-      </div>
-      <div css={styles.navLeft}>
-        <NavButton type="primary" direction="left" onClick={() => onScroll("left")} />
-      </div>
-      <div css={styles.navRight}>
-        <NavButton type="primary" direction="right" onClick={() => onScroll("right")} />
-      </div>
-    </div>
-  )
+	return (
+		<div css={styles.wrapper}>
+			<div ref={container} css={styles.container}>
+				{children.map((item, index) => (
+					<div key={`carousel-${index}`} css={styles.item}>
+						{item}
+					</div>
+				))}
+			</div>
+			<div css={styles.navLeft}>
+				<NavButton type="primary" direction="left" onClick={() => onScroll("left")} />
+			</div>
+			<div css={styles.navRight}>
+				<NavButton type="primary" direction="right" onClick={() => onScroll("right")} />
+			</div>
+		</div>
+	);
 }