Merge pull request #8 from ssi02014/dev

v2.2.0
ssi02014 · Jun 20, 2023 · 80d0edc · 80d0edc
2 parents 62938d6 + 7deb3cb
commit 80d0edc
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
 # 💻 React Step Parallax
+### 내가 쉽게 활용하려고 만든 Parallax 컴포넌트 💪
 
 <br />
 
@@ -57,18 +58,28 @@ import { FixedStepParallax } from 'react-step-parallax';
 const App = () => {
   return (
     <div>
+      {/* Parallax public setting */}
       <FixedStepParallax
-        easing={'ease'} // 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out'
-        duration={500} // number
         background={'#fff'} // css background property (string)
-        startX={100} // number, start position
-        startY={0} // number, start position
-        endX={0} // number, end position
-        endY={0} // number, end position
-        rotate={0} // number
+        startX={100} // number(px), start position
+        startY={0} // number(px), start position
+        endX={0} // number(px), end position
+        endY={0} // number(px), end position
+        rotate={0} // number(deg)
+        easing={'ease'} // 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out'
+        duration={500} // number (millisecond 500 -> 0.5)
         extra={/* extra ReactNode(Required position: absolute) */}
       >
-        <FixedStepParallax.Item>
+        <FixedStepParallax.Item
+          // Each Item Props Overriding
+          startX={200} 
+          startY={-200}
+          endX={100} 
+          endY={100}
+          rotate={30}
+          easing={'ease-in'} 
+          duration={300} 
+        >
           {/* STEP1 ReactNode */}
         </FixedStepParallax.Item>
         <FixedStepParallax.Item>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-step-parallax",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "react-step-parallax",
   "main": "dist/index.js",
   "module": "dist/index.js",

diff --git a/src/components/FixedStepParallax/index.tsx b/src/components/FixedStepParallax/index.tsx
@@ -31,6 +31,13 @@ export interface FixedStepParallaxContextProps {
 
 export interface FixedStepParallaxItemProps {
   children: React.ReactNode;
+  rotate?: number;
+  endX?: number;
+  endY?: number;
+  startX?: number;
+  startY?: number;
+  easing?: Easing;
+  duration?: number;
 }
 
 const FixedStepParallaxContext = createContext<FixedStepParallaxContextProps>({
@@ -46,9 +53,9 @@ const FixedStepParallaxContext = createContext<FixedStepParallaxContextProps>({
 const FixedStepParallax = ({
   children,
   extra,
-  rotate = 0,
   background = '#fff',
   duration = 500,
+  rotate = 0,
   endX = 0,
   endY = 0,
   startX = 0,
@@ -133,13 +140,31 @@ const FixedStepParallax = ({
   );
 };
 
-FixedStepParallax.Item = ({ children }: FixedStepParallaxItemProps) => {
+FixedStepParallax.Item = ({
+  children,
+  endX,
+  endY,
+  startX,
+  startY,
+  rotate,
+  easing,
+  duration,
+}: FixedStepParallaxItemProps) => {
   const context = useContext(FixedStepParallaxContext);
+  const overridingContextProps = {
+    endX: endX ?? context.endX,
+    endY: endY ?? context.endY,
+    startX: startX ?? context.startX,
+    startY: startY ?? context.startY,
+    rotate: rotate ?? context.rotate,
+    easing: easing ?? context.easing,
+    duration: duration ?? context.duration,
+  };
 
   return (
     <FixedStepParallaxItemWrapper
       className={'fixed-step-parallax-item'}
-      {...context}>
+      {...overridingContextProps}>
       {children}
     </FixedStepParallaxItemWrapper>
   );

diff --git a/src/components/FixedStepParallax/style.tsx b/src/components/FixedStepParallax/style.tsx
@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import { FixedStepParallaxContextProps } from '.';
-import { getConvertedImageSize } from '@utils/common';
 
 export const FixedStepParallaxMainWrapper = styled.div<{
   count: number;
@@ -35,9 +34,7 @@ export const FixedStepParallaxItemWrapper = styled.div<FixedStepParallaxContextP
   opacity: 0;
   transition: ${({ duration, easing }) => `all ${duration / 1000}s ${easing}`};
   transform: ${({ startX, startY, rotate }) =>
-    `translate(${getConvertedImageSize(startX)}, ${getConvertedImageSize(
-      startY
-    )}) rotate(${rotate}deg)`};
+    `translate(${startX}px, ${startY}px) rotate(${rotate}deg)`};
   z-index: 9999;
 
   &.active {

diff --git a/src/components/FlyInItemParallax/index.tsx b/src/components/FlyInItemParallax/index.tsx
@@ -9,7 +9,7 @@ import { Align, Easing, FlexWrap, Justify } from '@interfaces/style';
 export interface FlyInItemParallaxProps {
   children: React.ReactNode;
   extra?: React.ReactNode;
-  screenHeight?: string | number;
+  screenHeight?: number;
   direction?: 'column' | 'row';
   justify?: Justify;
   align?: Align;
@@ -37,6 +37,12 @@ export interface FlyInItemParallaxContextProps {
 export interface FlyInItemParallaxItemProps {
   children: React.ReactNode;
   idx?: number;
+  duration?: number;
+  startX?: number;
+  startY?: number;
+  easing?: Easing;
+  delay?: number;
+  rotate?: number;
 }
 
 const FlyInItemParallaxContext = createContext<FlyInItemParallaxContextProps>({
@@ -126,12 +132,29 @@ const FlyInItemParallax = ({
 
 FlyInItemParallax.Item = ({
   children,
+  startX,
+  startY,
+  easing,
+  duration,
+  delay,
+  rotate,
   idx = 0,
 }: FlyInItemParallaxItemProps) => {
   const context = useContext(FlyInItemParallaxContext);
+  const overridingContextProps = {
+    startX: startX ?? context.startX,
+    startY: startY ?? context.startY,
+    duration: duration ?? context.duration,
+    easing: easing ?? context.easing,
+    delay: delay ?? context.delay,
+    rotate: rotate ?? context.rotate,
+  };
 
   return (
-    <FlyInItemWrapper className={'fly-in-parallax-item'} idx={idx} {...context}>
+    <FlyInItemWrapper
+      className={'fly-in-parallax-item'}
+      idx={idx}
+      {...overridingContextProps}>
       {children}
     </FlyInItemWrapper>
   );

diff --git a/src/components/FlyInItemParallax/style.tsx b/src/components/FlyInItemParallax/style.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { FlyInItemParallaxContextProps } from '.';
 import { Align, FlexWrap, Justify } from '@interfaces/style';
-import { getConvertedImageSize } from '@utils/common';
+import { getConvertedCssSize } from '@utils/common';
 
 export const FlyInItemParallaxMainWrapper = styled.div<{
   background: string;
@@ -14,7 +14,7 @@ export const FlyInItemParallaxMainWrapper = styled.div<{
   width: 100%;
   height: ${({ screenHeight }) =>
     screenHeight
-      ? getConvertedImageSize(screenHeight)
+      ? getConvertedCssSize(screenHeight)
       : `calc((var(--vh, 1vh) * 100))`};
   background: ${({ background }) => background};
 `;
@@ -46,9 +46,7 @@ export const FlyInItemWrapper = styled.div<
     `all ${duration / 1000}s ${easing} ${(delay / 1000) * idx}s`};
 
   transform: ${({ startX, startY, rotate }) =>
-    `translate(${getConvertedImageSize(startX)}, ${getConvertedImageSize(
-      startY
-    )}) rotate(${rotate}deg)`};
+    `translate(${startX}px, ${startY}px) rotate(${rotate}deg)`};
 
   &.active {
     opacity: 1;

diff --git a/src/stories/components/FixedStepParallax.stories.tsx b/src/stories/components/FixedStepParallax.stories.tsx
@@ -43,35 +43,35 @@ const Template: StoryFn<FixedStepParallaxProps> = ({ ...args }) => {
           <h2 style={{ fontSize: '32px', textAlign: 'center' }}>
             React FullScreen Step Parallax
           </h2>
-          <h3>Step1</h3>
+          <h3>Default Step1</h3>
           <button>Start</button>
         </FixedStepParallax.Item>
-        <FixedStepParallax.Item>
+        <FixedStepParallax.Item startX={0} startY={100}>
           <h2 style={{ fontSize: '32px', textAlign: 'center' }}>
             React FullScreen Step Parallax
           </h2>
-          <h3>Step2</h3>
+          <h3>Overriding(startX: 0, startY: 100) Step2</h3>
           <button>Start</button>
         </FixedStepParallax.Item>
-        <FixedStepParallax.Item>
+        <FixedStepParallax.Item startX={-100}>
           <h2 style={{ fontSize: '32px', textAlign: 'center' }}>
             React FullScreen Step Parallax
           </h2>
-          <h3>Step3</h3>
+          <h3>Overriding(startX: -100) Step3</h3>
           <button>Start</button>
         </FixedStepParallax.Item>
         <FixedStepParallax.Item>
           <h2 style={{ fontSize: '32px', textAlign: 'center' }}>
             React FullScreen Step Parallax
           </h2>
-          <h3>Step4</h3>
+          <h3>Default Step4</h3>
           <button>Start</button>
         </FixedStepParallax.Item>
         <FixedStepParallax.Item>
           <h2 style={{ fontSize: '32px', textAlign: 'center' }}>
             React FullScreen Step Parallax
           </h2>
-          <h3>Step5</h3>
+          <h3>Default Step5</h3>
           <button>Start</button>
         </FixedStepParallax.Item>
       </FixedStepParallax>

diff --git a/src/stories/components/FlyInItemParallax.stories.tsx b/src/stories/components/FlyInItemParallax.stories.tsx
@@ -88,10 +88,16 @@ const Template: StoryFn<FlyInItemParallaxProps> = ({ ...args }) => {
             <p>Description</p>
           </Box>
         </FlyInItemParallax.Item>
-        <FlyInItemParallax.Item>
+        <FlyInItemParallax.Item rotate={30}>
           <Box>
             <h3>Item1</h3>
-            <p>Description</p>
+            <p>Overriding(Rotate: 30)</p>
+          </Box>
+        </FlyInItemParallax.Item>
+        <FlyInItemParallax.Item startY={-100}>
+          <Box>
+            <h3>Item1</h3>
+            <p>Overriding(startY: -100)</p>
           </Box>
         </FlyInItemParallax.Item>
         <FlyInItemParallax.Item>
@@ -124,21 +130,23 @@ const Template: StoryFn<FlyInItemParallaxProps> = ({ ...args }) => {
 };
 
 const Box = styled.div`
-  padding: 20px;
+  padding: 30px 40px;
+  background-color: #bf5f5f;
+  color: #fff;
 `;
 
 export const Default = {
   render: Template,
 
   args: {
-    screenHeight: null,
+    screenHeight: 0,
     delay: 100,
     background: '#fff',
     duration: 300,
     rotate: 0,
     startX: 0,
     startY: 100,
-    gap: 0,
+    gap: 10,
     threshold: 0.3,
     justify: 'center',
     align: 'center',

diff --git a/src/utils/common.ts b/src/utils/common.ts
@@ -1,8 +1,4 @@
-export const getConvertedImageSize = (size?: string | number) => {
-  if (typeof size === 'number') {
-    return `${size}px`;
-  }
-
+export const getConvertedCssSize = (size?: string | number) => {
   if (!size) return null;
   if (isNaN(+size)) return null;
   return `${size}px`;