feat(defaultPosition): now allows strings (#361)

* defaultPosition now allows strings

* fixing flow linting by adding new DefaultControlPosition type, fixing createSVGTransform to use calc with defaultPosition, adding a test for the new functionality

* updating createCSSTransform and createSVGTransform to use two translates instead of a calc function do to IE incompatibility; updating spec to reflect changes

* using DefaultControlPosition; fixing svg transform units issue; improving readability

* types(domFns): use `ControlPosition`

Author: tnrich

example/example.js

@@ -137,6 +137,11 @@ var App = React.createClass({
             {"I have a default position of {x: 25, y: 25}, so I'm slightly offset."}
           </div>
         </Draggable>
+        <Draggable defaultPosition={{x: '-10%', y: '-10%'}} {...dragHandlers}>
+          <div className="box">
+            {'I have a default position based on percents {x: \'-10%\', y: \'-10%\'}, so I\'m slightly offset.'}
+          </div>
+        </Draggable>
         <Draggable position={controlledPosition} {...dragHandlers} onDrag={this.onControlledDrag}>
           <div className="box">
             My position can be changed programmatically. <br />

lib/Draggable.js

@@ -7,7 +7,7 @@ import {createCSSTransform, createSVGTransform} from './utils/domFns';
 import {canDragX, canDragY, createDraggableData, getBoundPosition} from './utils/positionFns';
 import {dontSetMe} from './utils/shims';
 import DraggableCore from './DraggableCore';
-import type {ControlPosition, DraggableBounds, DraggableCoreProps} from './DraggableCore';
+import type {ControlPosition, DefaultControlPosition, DraggableBounds, DraggableCoreProps} from './DraggableCore';
 import log from './utils/log';
 import type {DraggableEventHandler} from './utils/types';
 import type {Element as ReactElement} from 'react';
@@ -27,7 +27,7 @@ export type DraggableProps = {
   defaultClassName: string,
   defaultClassNameDragging: string,
   defaultClassNameDragged: string,
-  defaultPosition: ControlPosition,
+  defaultPosition: DefaultControlPosition,
   position: ControlPosition,
   scale: number
 };
@@ -118,8 +118,8 @@ export default class Draggable extends React.Component<DraggableProps, Draggable
      * ```
      */
     defaultPosition: PropTypes.shape({
-      x: PropTypes.number,
-      y: PropTypes.number
+      x: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      y: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
     }),
 
     /**
@@ -178,8 +178,8 @@ export default class Draggable extends React.Component<DraggableProps, Draggable
       dragged: false,
 
       // Current transform x and y.
-      x: props.position ? props.position.x : props.defaultPosition.x,
-      y: props.position ? props.position.y : props.defaultPosition.y,
+      x: props.position ? props.position.x : 0,
+      y: props.position ? props.position.y : 0,
 
       // Used for compensating for out-of-bounds drags
       slackX: 0, slackY: 0,
@@ -311,7 +311,7 @@ export default class Draggable extends React.Component<DraggableProps, Draggable
     const controlled = Boolean(this.props.position);
     const draggable = !controlled || this.state.dragging;
 
-    const position = this.props.position || this.props.defaultPosition;
+    const position = this.props.position || {x:0, y:0};
     const transformOpts = {
       // Set left if horizontal drag is enabled
       x: canDragX(this) && draggable ?
@@ -326,13 +326,13 @@ export default class Draggable extends React.Component<DraggableProps, Draggable
 
     // If this element was SVG, we use the `transform` attribute.
     if (this.state.isElementSVG) {
-      svgTransform = createSVGTransform(transformOpts);
+      svgTransform = createSVGTransform(transformOpts, this.props.defaultPosition);
     } else {
       // Add a CSS transform to move the element around. This allows us to move the element around
       // without worrying about whether or not it is relatively or absolutely positioned.
       // If the item you are dragging already has a transform set, wrap it in a <span> so <Draggable>
       // has a clean slate.
-      style = createCSSTransform(transformOpts);
+      style = createCSSTransform(transformOpts, this.props.defaultPosition);
     }
 
     const {

lib/DraggableCore.js

@@ -52,6 +52,7 @@ export type DraggableData = {
 export type DraggableEventHandler = (e: MouseEvent, data: DraggableData) => void;
 
 export type ControlPosition = {x: number, y: number};
+export type DefaultControlPosition = {x: number|string, y: number|string};
 
 export type DraggableCoreProps = {
   allowAnyClick: boolean,

lib/utils/domFns.js

@@ -2,7 +2,7 @@
 import {findInArray, isFunction, int} from './shims';
 import browserPrefix, {browserPrefixToKey} from './getPrefix';
 
-import type {ControlPosition, MouseTouchEvent} from './types';
+import type {ControlPosition, DefaultControlPosition, MouseTouchEvent} from './types';
 
 let matchesSelectorFunc = '';
 export function matchesSelector(el: Node, selector: string): boolean {
@@ -109,13 +109,28 @@ export function offsetXYFromParent(evt: {clientX: number, clientY: number}, offs
   return {x, y};
 }
 
-export function createCSSTransform({x, y}: {x: number, y: number}): Object {
-  // Replace unitless items with px
-  return {[browserPrefixToKey('transform', browserPrefix)]: 'translate(' + x + 'px,' + y + 'px)'};
+export function createCSSTransform({x, y}: ControlPosition, defaultPosition: DefaultControlPosition): Object {
+  let translation;
+  if (defaultPosition && (defaultPosition.x !== 0 || defaultPosition.y !== 0)) {
+    const defaultX = `${(typeof defaultPosition.x === 'string') ? defaultPosition.x : defaultPosition.x + 'px'}`;
+    const defaultY = `${(typeof defaultPosition.y === 'string') ? defaultPosition.y : defaultPosition.y + 'px'}`;
+    translation = `translate(${defaultX}, ${defaultY}) translate(${x}px,${y}px)`;
+  } else {
+    translation = `translate(${x}px,${y}px)`;
+  }
+  return {[browserPrefixToKey('transform', browserPrefix)]: translation };
 }
 
-export function createSVGTransform({x, y}: {x: number, y: number}): string {
-  return 'translate(' + x + ',' + y + ')';
+export function createSVGTransform({x, y}: ControlPosition, defaultPosition: DefaultControlPosition): string {
+  let translation;
+  if (defaultPosition && (defaultPosition.x !== 0 || defaultPosition.y !== 0)) {
+    const defaultX = (typeof defaultPosition.x === 'string') ? defaultPosition.x : defaultPosition.x;
+    const defaultY = (typeof defaultPosition.y === 'string') ? defaultPosition.y : defaultPosition.y;
+    translation = `translate(${defaultX}, ${defaultY}) translate(${x},${y})`;
+  } else {
+    translation = `translate(${x},${y})`;
+  }
+  return translation;
 }
 
 export function getTouch(e: MouseTouchEvent, identifier: number): ?{clientX: number, clientY: number} {

lib/utils/types.js

@@ -14,6 +14,7 @@ export type Bounds = {
   left: number, top: number, right: number, bottom: number
 };
 export type ControlPosition = {x: number, y: number};
+export type DefaultControlPosition = {x: number|string, y: number|string};
 export type EventHandler<T> = (e: T) => void | false;
 
 // Missing in Flow

specs/draggable.spec.jsx

@@ -257,6 +257,22 @@ describe('react-draggable', function () {
       assert(style.indexOf('transform: translate(100px, 100px);') >= 0);
     });
 
+    it('should render with defaultPosition set as string transform and handle subsequent translate() for DOM nodes', function () {
+      let dragged = false;
+      drag = TestUtils.renderIntoDocument(
+        <Draggable defaultPosition={{x: '10%', y: '10%'}} onDrag={function() { dragged = true; }}>
+          <div />
+        </Draggable>
+      );
+
+      const node = ReactDOM.findDOMNode(drag);
+      simulateMovementFromTo(drag, 0, 0, 100, 100);
+
+      const style = node.getAttribute('style');
+      assert(dragged === true);
+      assert(style.indexOf('translate(10%, 10%) translate(100px, 100px);') >= 0);
+    });
+
     it('should honor "x" axis', function () {
       let dragged = false;
       drag = TestUtils.renderIntoDocument(