feat: getTranslateDOMPositionXY support enableTransform option

rsuite · Jan 11, 2024 · 725086c · 725086c
1 parent b318827
commit 725086c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/src/translateDOMPositionXY.ts b/src/translateDOMPositionXY.ts
@@ -12,12 +12,11 @@ const TRANSFORM = getVendorPrefixedName('transform');
 const BACKFACE_VISIBILITY = getVendorPrefixedName('backfaceVisibility');
 
 export interface Options {
+  enableTransform?: boolean;
   enable3DTransform?: boolean;
   forceUseTransform?: boolean;
 }
 
-const defaultConfig = { enable3DTransform: true };
-
 const appendLeftAndTop = (style: CSSStyleDeclaration, x = 0, y = 0) => {
   style.left = `${x}px`;
   style.top = `${y}px`;
@@ -38,20 +37,21 @@ const appendTranslate3d = (style: CSSStyleDeclaration, x = 0, y = 0) => {
   return style;
 };
 
-export const getTranslateDOMPositionXY = (conf: Options = defaultConfig) => {
-  if (conf.forceUseTransform) {
+export const getTranslateDOMPositionXY = (conf?: Options) => {
+  const { enableTransform = true, enable3DTransform = true, forceUseTransform } = conf || {};
+  if (forceUseTransform) {
     return conf.enable3DTransform ? appendTranslate3d : appendTranslate;
   }
 
-  if (BrowserSupportCore.hasCSSTransforms()) {
+  if (BrowserSupportCore.hasCSSTransforms() && enableTransform) {
     const ua = g.window ? g.window.navigator.userAgent : 'UNKNOWN';
     const isSafari = /Safari\//.test(ua) && !/Chrome\//.test(ua);
 
     // It appears that Safari messes up the composition order
     // of GPU-accelerated layers
     // (see bug https://bugs.webkit.org/show_bug.cgi?id=61824).
     // Use 2D translation instead.
-    if (!isSafari && BrowserSupportCore.hasCSS3DTransforms() && conf.enable3DTransform) {
+    if (!isSafari && BrowserSupportCore.hasCSS3DTransforms() && enable3DTransform) {
       return appendTranslate3d;
     }
 

diff --git a/test/styleSpec.js b/test/styleSpec.js
@@ -102,5 +102,15 @@ describe('Style', () => {
 
       expect(style.transform).to.contain('translate(10px,20px)');
     });
+    it('Should be use position', () => {
+      const translateDOMPositionXY = getTranslateDOMPositionXY({
+        enableTransform: false
+      });
+      const style = {};
+      translateDOMPositionXY(style, 10, 20);
+
+      expect(style.left).to.contain('10px');
+      expect(style.top).to.contain('20px');
+    });
   });
 });