feat: support forceUse3DTransform in translateDOMPositionXY (#34)

rsuite · Feb 10, 2022 · 8224e45 · 8224e45
1 parent 8cf7cc7
commit 8224e45
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 26 deletions.
diff --git a/src/translateDOMPositionXY.ts b/src/translateDOMPositionXY.ts
@@ -13,9 +13,36 @@ const BACKFACE_VISIBILITY = getVendorPrefixedName('backfaceVisibility');
 
 export interface Options {
   enable3DTransform?: boolean;
+  forceUse3DTransform?: boolean;
 }
 
-export const getTranslateDOMPositionXY = (conf: Options = { enable3DTransform: true }) => {
+const defaultConfig = { enable3DTransform: true };
+
+const appendLeftAndTop = (style: CSSStyleDeclaration, x = 0, y = 0) => {
+  style.left = `${x}px`;
+  style.top = `${y}px`;
+
+  return style;
+};
+
+const appendTranslate = (style: CSSStyleDeclaration, x = 0, y = 0) => {
+  style[TRANSFORM] = `translate(${x}px,${y}px)`;
+
+  return style;
+};
+
+const appendTranslate3d = (style: CSSStyleDeclaration, x = 0, y = 0) => {
+  style[TRANSFORM] = `translate3d(${x}px,${y}px,0)`;
+  style[BACKFACE_VISIBILITY] = 'hidden';
+
+  return style;
+};
+
+export const getTranslateDOMPositionXY = (conf: Options = defaultConfig) => {
+  if (conf.forceUse3DTransform) {
+    return appendTranslate3d;
+  }
+
   if (BrowserSupportCore.hasCSSTransforms()) {
     const ua = g.window ? g.window.navigator.userAgent : 'UNKNOWN';
     const isSafari = /Safari\//.test(ua) && !/Chrome\//.test(ua);
@@ -25,27 +52,13 @@ export const getTranslateDOMPositionXY = (conf: Options = { enable3DTransform: t
     // (see bug https://bugs.webkit.org/show_bug.cgi?id=61824).
     // Use 2D translation instead.
     if (!isSafari && BrowserSupportCore.hasCSS3DTransforms() && conf.enable3DTransform) {
-      return (style: CSSStyleDeclaration, x = 0, y = 0) => {
-        style[TRANSFORM] = `translate3d(${x}px,${y}px,0)`;
-        style[BACKFACE_VISIBILITY] = 'hidden';
-
-        return style;
-      };
+      return appendTranslate3d;
     }
 
-    return (style: CSSStyleDeclaration, x = 0, y = 0) => {
-      style[TRANSFORM] = `translate(${x}px,${y}px)`;
-
-      return style;
-    };
+    return appendTranslate;
   }
 
-  return (style: CSSStyleDeclaration, x = 0, y = 0) => {
-    style.left = `${x}px`;
-    style.top = `${y}px`;
-
-    return style;
-  };
+  return appendLeftAndTop;
 };
 
 const translateDOMPositionXY = getTranslateDOMPositionXY();

diff --git a/test/html/style.html b/test/html/style.html
@@ -4,4 +4,3 @@
 <div style='color:#ff0000'>
     <div id='case-4'></div>
 </div>
-
diff --git a/test/styleSpec.js b/test/styleSpec.js
@@ -1,35 +1,36 @@
-import { getStyle, removeStyle, addStyle } from '../src';
+import { getStyle, removeStyle, addStyle, translateDOMPositionXY } from '../src';
+import { getTranslateDOMPositionXY } from '../src/translateDOMPositionXY';
 
 describe('Style', () => {
   beforeEach(() => {
     document.body.innerHTML = window.__html__['test/html/style.html'];
   });
 
   describe('getStyle', () => {
-    it('should return complete style text', () => {
+    it('Should return complete style text', () => {
       const el = document.getElementById('case-1');
       const style = getStyle(el);
       expect(style.color).to.contain('rgb(255, 0, 0)');
       expect(style.marginLeft).to.contain('1px');
     });
 
-    it('should return style value of specific property', () => {
+    it('Should return style value of specific property', () => {
       const el = document.getElementById('case-1');
       const color = getStyle(el, 'color');
       expect(color).to.contain('rgb(255, 0, 0)');
     });
   });
 
   describe('addStyle', () => {
-    it('should add a single style property with specific value', () => {
+    it('Should add a single style property with specific value', () => {
       const el = document.getElementById('case-2');
       addStyle(el, 'color', '#ffffff');
 
       const style = getStyle(el);
       expect(style.color).to.contain('rgb(255, 255, 255)');
     });
 
-    it('should add multiple style properties with specific values', () => {
+    it('Should add multiple style properties with specific values', () => {
       const el = document.getElementById('case-2');
       addStyle(el, {
         background: '#ff0000',
@@ -43,15 +44,15 @@ describe('Style', () => {
   });
 
   describe('removeStyle', () => {
-    it('should remove a single style property', () => {
+    it('Should remove a single style property', () => {
       const el = document.getElementById('case-3');
       removeStyle(el, 'color');
       const style = getStyle(el);
       expect(style.color).to.be.empty;
       expect(style.background).to.contain('rgb(255, 0, 0)');
     });
 
-    it('should remove multiple style properties', () => {
+    it('Should remove multiple style properties', () => {
       const el = document.getElementById('case-3');
       removeStyle(el, ['margin-left', 'margin-right']);
 
@@ -61,4 +62,33 @@ describe('Style', () => {
       expect(style.background).to.contain('rgb(255, 0, 0)');
     });
   });
+
+  describe('translateDOMPositionXY', () => {
+    it('Should use translate3d by default', () => {
+      const style = {};
+      translateDOMPositionXY(style, 10, 20);
+
+      expect(style.transform).to.contain('translate3d(10px,20px,0)');
+      expect(style.backfaceVisibility).to.contain('hidden');
+    });
+
+    it('Should be disable translate3d', () => {
+      const translateDOMPositionXY = getTranslateDOMPositionXY({ enable3DTransform: false });
+      const style = {};
+      translateDOMPositionXY(style, 10, 20);
+
+      expect(style.transform).to.contain('translate(10px,20px)');
+    });
+
+    it('Should be forced to use translate3d', () => {
+      const translateDOMPositionXY = getTranslateDOMPositionXY({
+        forceUse3DTransform: true
+      });
+      const style = {};
+      translateDOMPositionXY(style, 10, 20);
+
+      expect(style.transform).to.contain('translate3d(10px,20px,0)');
+      expect(style.backfaceVisibility).to.contain('hidden');
+    });
+  });
 });