Shaded Lens: Convert Translate to Offset

ethanselzer · Apr 15, 2018 · 6f010ad · 6f010ad
1 parent 3fac554
commit 6f010ad
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 42 deletions.
diff --git a/src/shaded-lens/Lens.js b/src/shaded-lens/Lens.js
@@ -7,13 +7,9 @@ const Lens = (props) => {
         fadeDurationInMs,
         isActive,
         isPositionOutside,
-        style: parentSpecifiedStyle,
-        translateX,
-        translateY
+        style: parentSpecifiedStyle
     } = props;
 
-    const translate = `translate(${translateX}px, ${translateY}px)`;
-
     const defaultStyle = {
         width: 'auto',
         height: 'auto',
@@ -26,9 +22,6 @@ const Lens = (props) => {
 
     const computedStyle = {
         position: 'absolute',
-        transform: translate,
-        WebkitTransform: translate,
-        msTransform: translate,
         opacity: (isActive && !isPositionOutside) ? 1 : 0,
         transition: `opacity ${fadeDurationInMs}ms ease-in`
     };

diff --git a/src/shaded-lens/LensBottom.js b/src/shaded-lens/LensBottom.js
@@ -23,7 +23,7 @@ const LensBottom = ({
     const computedStyle = {
         height: `${height}px`,
         width: '100%',
-        top
+        top: `${top}px`
     };
 
     return (

diff --git a/src/shaded-lens/LensLeft.js b/src/shaded-lens/LensLeft.js
@@ -19,11 +19,11 @@ const LensLeft = ({
     const maxWidth = smallImage.width - clearLensWidth;
     const height = clearLensHeight;
     const width = clamp(position.x - cursorOffset.x, 0, maxWidth);
-    const translateY = clamp(position.y - cursorOffset.y, 0, maxHeight);
+    const top = clamp(position.y - cursorOffset.y, 0, maxHeight);
     const computedStyle = {
         height: `${height}px`,
         width: `${width}px`,
-        top: '0px',
+        top: `${top}px`,
         left: '0px'
     };
 
@@ -36,8 +36,7 @@ const LensLeft = ({
                 {},
                 parentSpecifiedStyle,
                 computedStyle
-            ),
-            translateY
+            )
         }}/>
     );
 };

diff --git a/src/shaded-lens/LensRight.js b/src/shaded-lens/LensRight.js
@@ -19,11 +19,11 @@ const LensRight = ({
     const maxWidth = smallImage.width - clearLensWidth;
     const height = clearLensHeight;
     const width = clamp(smallImage.width - position.x - cursorOffset.x, 0, maxWidth);
-    const translateY = clamp(position.y - cursorOffset.y, 0, maxHeight);
+    const top = clamp(position.y - cursorOffset.y, 0, maxHeight);
     const computedStyle = {
         height: `${height}px`,
         width: `${width}px`,
-        top: '0px',
+        top: `${top}px`,
         right: '0px'
     };
 
@@ -36,8 +36,7 @@ const LensRight = ({
                 {},
                 parentSpecifiedStyle,
                 computedStyle
-            ),
-            translateY
+            )
         }}/>
     );
 };

diff --git a/test/lens/lens.spec.js b/test/lens/lens.spec.js
@@ -5,7 +5,7 @@ import Lens from '../../src/shaded-lens/Lens';
 
 describe('Image Lens', () => {
     it('applies computed style', () => {
-        const expected = 'width:auto;height:auto;top:auto;right:auto;bottom:auto;left:auto;display:block;position:absolute;transform:translate(0px, 0px);-webkit-transform:translate(0px, 0px);-ms-transform:translate(0px, 0px);opacity:0;transition:opacity 0ms ease-in';
+        const expected = 'width:auto;height:auto;top:auto;right:auto;bottom:auto;left:auto;display:block;position:absolute;opacity:0;transition:opacity 0ms ease-in';
 
         const c = render(<Lens />);
 
@@ -34,30 +34,6 @@ describe('Image Lens', () => {
         expect(c.attr('style').startsWith(expected)).to.be.true;
     });
 
-    it('applies translateX and translateY props to CSS transform translate function', () => {
-        const c = render(
-            <Lens {...{
-                translateX: 1,
-                translateY: 2
-            }}/>
-        );
-
-        expect(c.css('transform')).to.equal('translate(1px, 2px)');
-    });
-
-    it('applies vendor prefixes to inline CSS transform property', () => {
-        const c = render(
-            <Lens {...{
-                translateX: 1,
-                translateY: 2
-            }}/>
-        );
-
-        expect(c.css('transform')).to.equal('translate(1px, 2px)');
-        expect(c.css('-ms-transform')).to.equal('translate(1px, 2px)');
-        expect(c.css('-webkit-transform')).to.equal('translate(1px, 2px)');
-    });
-
     it('applies a value of 0 to CSS opacity property when isActive is unset', () => {
         const c = render(<Lens />);