react-resizable - npm Package Compare versions

Comparing version 1.6.0 to 1.7.0

build/cloneElement.js

@@ -12,3 +12,3 @@ 'use strict';
 // React.addons.cloneWithProps look-alike that merges style & className.
-module.exports = function cloneElement(element /*: React.Element<any>*/, props /*: Object*/) /*: React.Element<any>*/ {
+module.exports = function cloneElement(element, props) {
   if (props.style && element.props.style) {
@@ -15,0 +15,0 @@ props.style = _extends({}, element.props.style, props.style);

build/Resizable.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _reactDraggable = require('react-draggable');
@@ -28,36 +32,2 @@
 
-/*:: export type Props = {
-  children: React.Element<any>,
-  width: number,
-  height: number,
-  handleSize: [number, number],
-  lockAspectRatio: boolean,
-  axis: Axis,
-  minConstraints: [number, number],
-  maxConstraints: [number, number],
-  onResizeStop?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
-  onResizeStart?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
-  onResize?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
-  draggableOpts?: ?Object
-};*/
-/*:: type Axis = 'both' | 'x' | 'y' | 'none';*/
-/*:: type Position = {
-
-};*/
-/*:: type State = {
-  resizing: boolean,
-  width: number, height: number,
-  slackW: number, slackH: number
-};*/
-/*:: type DragCallbackData = {
-  node: HTMLElement,
-  x: number, y: number,
-  deltaX: number, deltaY: number,
-  lastX: number, lastY: number
-};*/
-/*:: type ResizeCallbackData = {
-  node: HTMLElement,
-  size: {width: number, height: number}
-};*/
-
 var Resizable = function (_React$Component) {
@@ -82,3 +52,3 @@ _inherits(Resizable, _React$Component);
 
-  Resizable.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps /*: Object*/) {
+  Resizable.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
     // If parent changes height/width, set that in our state.
@@ -93,3 +63,3 @@ if (!this.state.resizing && (nextProps.width !== this.props.width || nextProps.height !== this.props.height)) {
 
-  Resizable.prototype.lockAspectRatio = function lockAspectRatio(width /*: number*/, height /*: number*/, aspectRatio /*: number*/) /*: [number, number]*/ {
+  Resizable.prototype.lockAspectRatio = function lockAspectRatio(width, height, aspectRatio) {
     height = width / aspectRatio;
@@ -103,3 +73,3 @@ width = height * aspectRatio;
 
-  Resizable.prototype.runConstraints = function runConstraints(width /*: number*/, height /*: number*/) /*: [number, number]*/ {
+  Resizable.prototype.runConstraints = function runConstraints(width, height) {
     var _ref = [this.props.minConstraints, this.props.maxConstraints],
@@ -159,6 +129,6 @@ min = _ref[0],
 
-  Resizable.prototype.resizeHandler = function resizeHandler(handlerName /*: string*/) /*: Function*/ {
+  Resizable.prototype.resizeHandler = function resizeHandler(handlerName) {
     var _this2 = this;
 
-    return function (e /*: SyntheticEvent | MouseEvent*/, _ref2) {
+    return function (e, _ref2) {
       var node = _ref2.node,
@@ -212,3 +182,3 @@ deltaX = _ref2.deltaX,
 
-  Resizable.prototype.render = function render() /*: React.Element<any>*/ {
+  Resizable.prototype.render = function render() {
     // eslint-disable-next-line no-unused-vars
@@ -260,7 +230,7 @@ var _props = this.props,
   // Require that one and only one child be present.
-  children: _react.PropTypes.element.isRequired,
+  children: _propTypes2.default.element.isRequired,
 
   // Initial w/h
-  width: _react.PropTypes.number.isRequired,
-  height: _react.PropTypes.number.isRequired,
+  width: _propTypes2.default.number.isRequired,
+  height: _propTypes2.default.number.isRequired,
 
@@ -272,6 +242,6 @@ //
   // If you change this, be sure to update your css
-  handleSize: _react.PropTypes.array,
+  handleSize: _propTypes2.default.array,
 
   // If true, will only allow width/height to move in lockstep
-  lockAspectRatio: _react.PropTypes.bool,
+  lockAspectRatio: _propTypes2.default.bool,
 
@@ -283,15 +253,15 @@ // Restricts resizing to a particular axis (default: 'both')
   // 'none' - disables resizing altogether
-  axis: _react.PropTypes.oneOf(['both', 'x', 'y', 'none']),
+  axis: _propTypes2.default.oneOf(['both', 'x', 'y', 'none']),
 
   // Min/max size
-  minConstraints: _react.PropTypes.arrayOf(_react.PropTypes.number),
-  maxConstraints: _react.PropTypes.arrayOf(_react.PropTypes.number),
+  minConstraints: _propTypes2.default.arrayOf(_propTypes2.default.number),
+  maxConstraints: _propTypes2.default.arrayOf(_propTypes2.default.number),
 
   // Callbacks
-  onResizeStop: _react.PropTypes.func,
-  onResizeStart: _react.PropTypes.func,
-  onResize: _react.PropTypes.func,
+  onResizeStop: _propTypes2.default.func,
+  onResizeStart: _propTypes2.default.func,
+  onResize: _propTypes2.default.func,
 
   // These will be passed wholesale to react-draggable's DraggableCore
-  draggableOpts: _react.PropTypes.object
+  draggableOpts: _propTypes2.default.object
 };
@@ -298,0 +268,0 @@ Resizable.defaultProps = {

build/ResizableBox.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _Resizable = require('./Resizable');
@@ -26,10 +30,3 @@
 
-/*:: import type {Props as ResizableProps} from './Resizable';*/
-/*:: type State = {width: number, height: number};*/
-/*:: type Size = {width: number, height: number};*/
-
-
 // An example use of Resizable.
-/*:: type ResizeData = {element: Element, size: Size};*/
-
 var ResizableBox = function (_React$Component) {
@@ -50,3 +47,3 @@ _inherits(ResizableBox, _React$Component);
       height: _this.props.height
-    }, _this.onResize = function (e /*: Event*/, _ref) {
+    }, _this.onResize = function (e, _ref) {
       var element = _ref.element,
@@ -69,3 +66,3 @@ size = _ref.size;
 
-  ResizableBox.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps /*: ResizableProps*/) {
+  ResizableBox.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
     if (nextProps.width !== this.props.width || nextProps.height !== this.props.height) {
@@ -79,3 +76,3 @@ this.setState({
 
-  ResizableBox.prototype.render = function render() /*: React.Element<any>*/ {
+  ResizableBox.prototype.render = function render() {
     // Basic wrapper around a Resizable instance.
@@ -121,4 +118,4 @@ // If you use Resizable directly, you are responsible for updating the child component
 ResizableBox.propTypes = {
-  height: _react.PropTypes.number,
-  width: _react.PropTypes.number
+  height: _propTypes2.default.number,
+  width: _propTypes2.default.number
 };
@@ -125,0 +122,0 @@ ResizableBox.defaultProps = {

CHANGELOG.md

 # Changelog
 
+### 1.7.0 (May 1, 2017)
+
+- Deprecation: `React.PropTypes` now deprecated in React 15.5, moved to `prop-types` package
+- Internal: Update devDeps, upgrade to webpack 2
+- Internal: Remove babel `stage-1` and `transform-flow-comments`, bring in only selected plugins, makes for leaner dev/build.
+
 ### 1.6.0 (Jan 23, 2017)
@@ -4,0 +10,0 @@

package.json

 {
   "name": "react-resizable",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "A component that is resizable with handles.",
@@ -11,3 +11,3 @@ "main": "index.js",
     "build-example": "webpack",
-    "dev": "echo 'Open http://localhost:4003/examples/1.html' && cross-env NODE_ENV=test webpack-dev-server --config webpack-dev-server.config.js --hot --progress --colors --port 4003 --content-base .",
+    "dev": "echo 'Open http://localhost:4003/examples/1.html' && cross-env NODE_ENV=test webpack-dev-server --config webpack-dev-server.config.js --progress --hot --inline",
     "prepublish": "npm run build",
@@ -35,25 +35,26 @@ "validate": "yarn list",
   "devDependencies": {
-    "babel-cli": "^6.5.1",
-    "babel-core": "^6.5.1",
-    "babel-eslint": "^7.1.1",
-    "babel-loader": "^6.2.2",
-    "babel-plugin-transform-flow-comments": "^6.7.0",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-react": "^6.5.0",
-    "babel-preset-stage-1": "^6.5.0",
-    "cross-env": "^3.1.4",
-    "css-loader": "^0.26.1",
-    "eslint": "^3.14.0",
-    "eslint-plugin-react": "^6.9.0",
-    "flow-bin": "^0.38.0",
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.24.1",
+    "babel-eslint": "^7.2.3",
+    "babel-loader": "^7.0.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "cross-env": "^4.0.0",
+    "css-loader": "^0.28.0",
+    "eslint": "^3.19.0",
+    "eslint-plugin-react": "^6.10.3",
+    "flow-bin": "^0.45.0",
     "lodash": "^4.3.0",
     "pre-commit": "^1.1.2",
-    "react": "^15.0.0",
-    "react-dom": "^15.0.0",
-    "style-loader": "^0.13.0",
-    "webpack": "^1.12.13",
-    "webpack-dev-server": "^1.14.1"
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "style-loader": "^0.17.0",
+    "webpack": "^2.4.1",
+    "webpack-dev-server": "^2.4.5"
   },
   "dependencies": {
-    "react-draggable": "^2.1.0"
+    "prop-types": "^15.5.8",
+    "react-draggable": "^2.2.6"
   },
@@ -60,0 +61,0 @@ "peerDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

212863

18.58%

Worsened metrics

Dependency count

4

33.33%

Lines of code

340

-8.6%

Dependency changes

• + Added

  prop-types@^15.5.8

• Updated

  react-draggable@^2.2.6