Unify prefix handling; note that user-select and transform may have different vendor prefixes

Author: STRML

lib/utils/domFns.es6

@@ -1,6 +1,6 @@
 // @flow
 import {findInArray, isFunction, isNum, int} from './shims';
-import browserPrefix from './getPrefix';
+import browserPrefix, {getPrefix, browserPrefixToStyle, browserPrefixToKey} from './getPrefix';
 import ReactDOM from 'react-dom';
 
 import type Draggable from '../Draggable';
@@ -103,12 +103,7 @@ export function innerWidth(node: HTMLElement): number {
 
 export function createCSSTransform({x, y}: {x: number, y: number}): Object {
   // Replace unitless items with px
-  let out = {transform: 'translate(' + x + 'px,' + y + 'px)'};
-  // Add single prefixed property as well
-  if (browserPrefix) {
-    out[browserPrefix + 'Transform'] = out.transform;
-  }
-  return out;
+  return {[browserPrefixToKey('transform', browserPrefix)]: 'translate(' + x + 'px,' + y + 'px)'};
 }
 
 export function createSVGTransform({x, y}: {x: number, y: number}): string {
@@ -118,7 +113,9 @@ export function createSVGTransform({x, y}: {x: number, y: number}): string {
 // User-select Hacks:
 //
 // Useful for preventing blue highlights all over everything when dragging.
-const userSelectStyle = `;${browserPrefix ? `-${browserPrefix.toLowerCase()}-` : ''}user-select: none;`;
+const userSelectPrefix = getPrefix('user-select');
+const userSelect = browserPrefixToStyle('user-select', userSelectPrefix);
+const userSelectStyle = `;${userSelect}: none;`;
 
 export function addUserSelectStyles() {
   let style = document.body.getAttribute('style') || '';

lib/utils/getPrefix.es6

@@ -1,23 +1,47 @@
 // @flow
-export function generatePrefix(): string {
+const prefixes = ['Moz', 'Webkit', 'O', 'ms'];
+export function getPrefix(prop: string='transform'): string {
   // Checking specifically for 'window.document' is for pseudo-browser server-side
   // environments that define 'window' as the global context.
   // E.g. React-rails (see https://github.com/reactjs/react-rails/pull/84)
   if (typeof window === 'undefined' || typeof window.document === 'undefined') return '';
 
-  const prefixes = ['Moz', 'Webkit', 'O', 'ms'];
   const style = window.document.documentElement.style;
 
-  if ('transform' in style) {
-    return '';
+  if (prop in style) return '';
+
+  for (let i = 0; i < prefixes.length; i++) {
+    if (browserPrefixToStyle(prop, prefixes[i]) in style) return prefixes[i];
   }
 
-  for (let i = 0; i < prefixes.length; ++i) {
-    if (prefixes[i] + 'Transform' in style) {
-      return prefixes[i];
+  return '';
+}
+
+export function browserPrefixToKey(prop: string, prefix: string): string {
+  return prefix ? `${prefix}${kebabToTitleCase(prop)}` : prop;
+}
+
+export function browserPrefixToStyle(prop: string, prefix: string): string {
+  return prefix ? `-${prefix.toLowerCase()}-${prop}` : prop;
+}
+
+function kebabToTitleCase(str: string): string {
+  let out = '';
+  let shouldCapitalize = true;
+  for (let i = 0; i < str.length; i++) {
+    if (shouldCapitalize) {
+      out += str[i].toUpperCase();
+      shouldCapitalize = false;
+    } else if (str[i] === '-') {
+      shouldCapitalize = true;
+    } else {
+      out += str[i];
     }
   }
-  return '';
+  return out;
 }
 
-export default generatePrefix();
+// Default export is the prefix itself, like 'Moz', 'Webkit', etc
+// Note that you may have to re-test for certain things; for instance, Chrome 50
+// can handle unprefixed `transform`, but not unprefixed `user-select`
+export default getPrefix();

specs/draggable.spec.jsx

@@ -1,12 +1,13 @@
 /*eslint no-unused-vars:0*/
-var React = require('react');
-var ReactDOM = require('react-dom');
-var TestUtils = require('react/lib/ReactTestUtils');
-var Draggable = require('../index');
-var DraggableCore = require('../index').DraggableCore;
-var _ = require('lodash');
-var browserPrefix = require('../lib/utils/getPrefix.es6').default;
-var dashedBrowserPrefix = browserPrefix ? '-' + browserPrefix.toLowerCase() + '-' : '';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import TestUtils from 'react/lib/ReactTestUtils';
+import Draggable, {DraggableCore} from '../index';
+import _ from 'lodash';
+import {getPrefix, browserPrefixToKey, browserPrefixToStyle} from '../lib/utils/getPrefix';
+const transformStyle = browserPrefixToStyle('transform', getPrefix('transform'));
+const transformKey = browserPrefixToKey('transform', getPrefix('transform'));
+const userSelectStyle = browserPrefixToStyle('user-select', getPrefix('user-select'));
 
 /*global describe,it,expect,afterEach */
 describe('react-draggable', function () {
@@ -45,7 +46,7 @@ describe('react-draggable', function () {
         expect(node.getAttribute('style')).toMatch('touch-action: none');
       }
       expect(node.getAttribute('style')).toMatch('color: black');
-      expect(node.getAttribute('style')).toMatch(dashedBrowserPrefix + 'transform: translate\\\(0px, 0px\\\)');
+      expect(node.getAttribute('style')).toMatch(transformStyle + ': translate\\\(0px, 0px\\\)');
       expect(node.getAttribute('class')).toEqual('foo react-draggable');
     });
 
@@ -61,7 +62,7 @@ describe('react-draggable', function () {
           <div
             className="react-draggable"
             style={{
-              [browserPrefix + 'Transform']: 'translate(0px, 0px)'
+              [transformKey]: 'translate(0px, 0px)'
             }}
             transform={null} />
         </DraggableCore>
@@ -267,8 +268,7 @@ describe('react-draggable', function () {
     });
 
     it('should add and remove user-select styles', function () {
-      // Karma runs in firefox in our tests
-      var userSelectStyle = ';' + dashedBrowserPrefix + 'user-select: none;';
+      var userSelectStyleStr = `;${userSelectStyle}: none;`;
 
       drag = TestUtils.renderIntoDocument(
         <Draggable>
@@ -280,14 +280,12 @@ describe('react-draggable', function () {
 
       expect(document.body.getAttribute('style')).toEqual('');
       TestUtils.Simulate.mouseDown(node, {clientX: 0, clientY: 0});
-      expect(document.body.getAttribute('style')).toEqual(userSelectStyle);
+      expect(document.body.getAttribute('style')).toEqual(userSelectStyleStr);
       TestUtils.Simulate.mouseUp(node);
       expect(document.body.getAttribute('style')).toEqual('');
     });
 
     it('should not add and remove user-select styles when disabled', function () {
-      // Karma runs in firefox in our tests
-      var userSelectStyle = ';' + dashedBrowserPrefix + 'user-select: none;';
 
       drag = TestUtils.renderIntoDocument(
         <Draggable enableUserSelectHack={false}>