feat: timing function in skeleton

daangn · Sep 10, 2024 · 383c013 · 383c013
1 parent b07d7da
commit 383c013
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 3 deletions.
diff --git a/component-docs/activities/skeleton/SkeletonWaveActivity.tsx b/component-docs/activities/skeleton/SkeletonWaveActivity.tsx
@@ -3,7 +3,11 @@ import * as React from "react";
 
 import Layout from "@/activities/ActivityLayout";
 import { Skeleton } from "@/seed-design/ui/skeleton";
-import { useSkeletonDuration, useSkeletonLoading } from "@/stores/skeleton";
+import {
+  useSkeletonDuration,
+  useSkeletonLoading,
+  useSkeletonTimingFunction,
+} from "@/stores/skeleton";
 
 declare module "@stackflow/config" {
   interface Register {
@@ -27,6 +31,7 @@ const Fallback = () => {
 const SkeletonWaveActivity: ActivityComponentType<"SkeletonWave"> = () => {
   const isLoading = useSkeletonLoading();
   const animationDuration = useSkeletonDuration();
+  const animationTiming = useSkeletonTimingFunction();
 
   return (
     <Layout>
@@ -35,6 +40,7 @@ const SkeletonWaveActivity: ActivityComponentType<"SkeletonWave"> = () => {
           {
             padding: "16px",
             "--skeleton-animation-duration": animationDuration,
+            "--skeleton-animation-timing-function": animationTiming,
           } as React.CSSProperties
         }
       >

diff --git a/component-docs/components/SkeletonControls.tsx b/component-docs/components/SkeletonControls.tsx
@@ -4,6 +4,7 @@ import {
   useSkeletonDuration,
   useSkeletonGradient,
   useSkeletonLoading,
+  useSkeletonTimingFunction,
 } from "@/stores/skeleton";
 import * as React from "react";
 import { controlBlock, controlInput, controlLabel } from "./SkeletonControls.css";
@@ -13,6 +14,7 @@ export const SkeletonControls = () => {
   const { toggleLoading, setControls } = useSkeletonActions();
   const [duration, setDuration] = React.useState(useSkeletonDuration());
   const [gradient, setGradient] = React.useState(useSkeletonGradient());
+  const [timingFunction, setTimingFunction] = React.useState(useSkeletonTimingFunction());
 
   return (
     <div>
@@ -32,7 +34,7 @@ export const SkeletonControls = () => {
           />
         </div>
         <div className={controlBlock}>
-          <label className={controlLabel} htmlFor="duration">
+          <label className={controlLabel} htmlFor="gradient">
             Gradient
           </label>
           <input
@@ -42,6 +44,17 @@ export const SkeletonControls = () => {
             onChange={(e) => setGradient(e.target.value)}
           />
         </div>
+        <div className={controlBlock}>
+          <label className={controlLabel} htmlFor="timing-function">
+            Timing Function
+          </label>
+          <input
+            className={controlInput}
+            id="timing-function"
+            value={timingFunction}
+            onChange={(e) => setTimingFunction(e.target.value)}
+          />
+        </div>
         <BoxButton type="button" onClick={() => setControls({ duration, gradient })}>
           적용
         </BoxButton>

diff --git a/component-docs/seed-design/ui/skeleton.css.ts b/component-docs/seed-design/ui/skeleton.css.ts
@@ -30,7 +30,7 @@ export const skeleton = recipe({
 
         animationName: wave,
         animationDuration: "var(--skeleton-animation-duration, 1.5s)",
-        animationTimingFunction: "ease-in-out",
+        animationTimingFunction: "var(--skeleton-animation-timing-function, ease-in-out)",
         animationIterationCount: "infinite",
       },
     },

diff --git a/component-docs/stores/skeleton.ts b/component-docs/stores/skeleton.ts
@@ -4,6 +4,7 @@ interface SkeletonState {
   isLoading: boolean;
   duration: string;
   gradient: string;
+  timingFunction: string;
   actions: {
     toggleLoading: () => void;
     setControls: (state: { duration: string; gradient: string }) => void;
@@ -14,6 +15,7 @@ const useSkeleton = create<SkeletonState>((set) => ({
   isLoading: true,
   duration: "1.5s",
   gradient: "linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)",
+  timingFunction: "ease-in-out",
   actions: {
     toggleLoading: () => set((state) => ({ isLoading: !state.isLoading })),
     setControls: set,
@@ -24,3 +26,4 @@ export const useSkeletonLoading = () => useSkeleton((state) => state.isLoading);
 export const useSkeletonActions = () => useSkeleton((state) => state.actions);
 export const useSkeletonDuration = () => useSkeleton((state) => state.duration);
 export const useSkeletonGradient = () => useSkeleton((state) => state.gradient);
+export const useSkeletonTimingFunction = () => useSkeleton((state) => state.timingFunction);