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

This reverts commit aa0a6b4.
react-grid-layout · Mar 1, 2019 · 8b1449c · 8b1449c
1 parent 5b363ef
commit 8b1449c
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 53 deletions.
diff --git a/example/example.js b/example/example.js
@@ -137,11 +137,6 @@ 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 />

diff --git a/lib/Draggable.js b/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, DefaultControlPosition, DraggableBounds, DraggableCoreProps} from './DraggableCore';
+import type {ControlPosition, 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: DefaultControlPosition,
+  defaultPosition: ControlPosition,
   position: ControlPosition,
   scale: number
 };
@@ -118,8 +118,8 @@ export default class Draggable extends React.Component<DraggableProps, Draggable
      * ```
      */
     defaultPosition: PropTypes.shape({
-      x: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-      y: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+      x: PropTypes.number,
+      y: PropTypes.number
     }),
 
     /**
@@ -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 : 0,
-      y: props.position ? props.position.y : 0,
+      x: props.position ? props.position.x : props.defaultPosition.x,
+      y: props.position ? props.position.y : props.defaultPosition.y,
 
       // 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 || {x:0, y:0};
+    const position = this.props.position || this.props.defaultPosition;
     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, this.props.defaultPosition);
+      svgTransform = createSVGTransform(transformOpts);
     } 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, this.props.defaultPosition);
+      style = createCSSTransform(transformOpts);
     }
 
     const {

diff --git a/lib/DraggableCore.js b/lib/DraggableCore.js
@@ -52,7 +52,6 @@ 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,

diff --git a/lib/utils/domFns.js b/lib/utils/domFns.js
@@ -2,7 +2,7 @@
 import {findInArray, isFunction, int} from './shims';
 import browserPrefix, {browserPrefixToKey} from './getPrefix';
 
-import type {ControlPosition, DefaultControlPosition, MouseTouchEvent} from './types';
+import type {ControlPosition, MouseTouchEvent} from './types';
 
 let matchesSelectorFunc = '';
 export function matchesSelector(el: Node, selector: string): boolean {
@@ -109,28 +109,13 @@ export function offsetXYFromParent(evt: {clientX: number, clientY: number}, offs
   return {x, y};
 }
 
-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 createCSSTransform({x, y}: {x: number, y: number}): Object {
+  // Replace unitless items with px
+  return {[browserPrefixToKey('transform', browserPrefix)]: 'translate(' + x + 'px,' + y + 'px)'};
 }
 
-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 createSVGTransform({x, y}: {x: number, y: number}): string {
+  return 'translate(' + x + ',' + y + ')';
 }
 
 export function getTouch(e: MouseTouchEvent, identifier: number): ?{clientX: number, clientY: number} {

diff --git a/lib/utils/types.js b/lib/utils/types.js
@@ -14,7 +14,6 @@ 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

diff --git a/specs/draggable.spec.jsx b/specs/draggable.spec.jsx
@@ -257,22 +257,6 @@ 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(