perf: refactor code into reusable hooks

nerdyman · Jan 4, 2020 · 684c8b3 · 684c8b3
1 parent b104f14
commit 684c8b3
Show file tree

Hide file tree

Showing 6 changed files with 290 additions and 242 deletions.
diff --git a/docs/demos/Images.story.tsx b/docs/demos/Images.story.tsx
@@ -3,6 +3,19 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { ReactCompareSlider, ReactCompareSliderImage } from '../../src';
 
+const Note: React.FC<any> = props => (
+  <p
+    style={{
+      fontFamily: 'sans-serif',
+      padding: '0.5rem',
+      borderRadius: '0.25rem',
+      backgroundColor: 'rgba(0, 0, 0, 0.85)',
+      color: 'white',
+    }}
+    {...props}
+  />
+);
+
 storiesOf('Demos|Images', module)
   .add(
     'Default',
@@ -53,23 +66,29 @@ storiesOf('Demos|Images', module)
     'onChange',
     () => (
       /** @NOTE `action` in Storybook makes this a little bit laggy */
-      <ReactCompareSlider
-        onChange={action('onChange')}
-        portrait
-        itemOne={
-          <ReactCompareSliderImage
-            src="https://images.pexels.com/photos/1834396/pexels-photo-1834396.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
-            alt="Image one"
-          />
-        }
-        itemTwo={
-          <ReactCompareSliderImage
-            src="https://images.pexels.com/photos/1834396/pexels-photo-1834396.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
-            alt="Image one"
-            style={{ filter: 'blur(10px) brightness(1.25)' }}
-          />
-        }
-      />
+      <>
+        <Note>
+          <em>Note:</em> The demo&rsquo;s action logging may cause some slight
+          lag.
+        </Note>
+        <ReactCompareSlider
+          onPositionChange={action('onChange')}
+          portrait
+          itemOne={
+            <ReactCompareSliderImage
+              src="https://images.pexels.com/photos/1834396/pexels-photo-1834396.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
+              alt="Image one"
+            />
+          }
+          itemTwo={
+            <ReactCompareSliderImage
+              src="https://images.pexels.com/photos/1834396/pexels-photo-1834396.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
+              alt="Image one"
+              style={{ filter: 'blur(10px) brightness(1.25)' }}
+            />
+          }
+        />
+      </>
     ),
     { options: { showPanel: true } }
   );
diff --git a/example/index.tsx b/example/index.tsx
@@ -32,7 +32,9 @@ const App = () => {
               alt="two"
             />
           }
-          onChange={position => console.log(`Portrait position: ${position}`)}
+          onPositionChange={position =>
+            console.log(`Portrait position: ${position}`)
+          }
           portrait
         />
       </DemoSection>
@@ -55,7 +57,9 @@ const App = () => {
               alt="two"
             />
           }
-          onChange={position => console.log(`Landscape position: ${position}`)}
+          onPositionChange={position =>
+            console.log(`Landscape position: ${position}`)
+          }
         />
       </DemoSection>
     </>

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,2 +1,3 @@
 export * from './react-compare-slider-image';
 export * from './react-compare-slider';
+export { styleFitContainer } from './utils';
diff --git a/src/react-compare-slider-image.tsx b/src/react-compare-slider-image.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { styleFitContainer } from './react-compare-slider';
+import { styleFitContainer } from './utils';
 
 /**
  * Whether client supports the CSS `object-fit` property
@@ -22,9 +22,10 @@ export interface ReactCompareSliderImageProps {
  * Image with fallback background for browsers that don't support the
  * `object-fit` CSS property
  */
-export const ReactCompareSliderImage: React.FC<
-  React.ImgHTMLAttributes<HTMLImageElement> & ReactCompareSliderImageProps
-> = ({
+export const ReactCompareSliderImage: React.FC<React.ImgHTMLAttributes<
+  HTMLImageElement
+> &
+  ReactCompareSliderImageProps> = ({
   className,
   fallbackEnable = true,
   style,