react-resizable 1.7.1 → 1.7.5

package/.babelrc

@@ -1,6 +1,6 @@
 {
   "presets": [
-    ["es2015", {loose: true}],
+    ["es2015", {"loose": true}],
     "react"
   ],
   "plugins": [

package/.eslintrc

@@ -24,9 +24,6 @@
     "browser": true,
     "node": true
   },
-  "ecmaFeatures": {
-    "jsx": true
-  },
   "globals": {
     // For Flow
     "ReactElement",

package/.flowconfig

@@ -1,8 +1,12 @@
+[version]
+0.55.0
+
 [ignore]
 .*/node_modules/babel.*
 .*/node_modules/fbjs/.*
 .*/node_modules/express/.*
 .*/node_modules/serve-index/.*
+<PROJECT_ROOT>/build/.*
 
 [include]
 

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+### 1.7.5 (Sep 26, 2017)
+
+- Support for React 16 (no changes required, updated `peerDependencies`)
+- Minor dep updates.
+
+### 1.7.4 (Sep 5, 2017)
+
+- Minor Flow & dependency updates.
+
+### 1.7.3 (Aug 31, 2017)
+
+- Fix React deprecation warnings from `import *`
+  - https://github.com/facebook/react/issues/10583
+
+### 1.7.2 (Aug 21, 2017)
+
+- Pkg: Add `react-draggable@3.0.0` to version range.
+  - This package is compatible with both `@2` and `@3` versions.
+
 ### 1.7.1 (May 23, 2017)
 
 - Bugfix: Some flow types were improperly specified.

package/build/Resizable.js.flow

@@ -3,6 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {DraggableCore} from 'react-draggable';
 import cloneElement from './cloneElement';
+import type {Element as ReactElement, Node as ReactNode} from 'react';
 
 type Axis = 'both' | 'x' | 'y' | 'none';
 type State = {
@@ -21,7 +22,8 @@ export type ResizeCallbackData = {
   size: {width: number, height: number}
 };
 export type Props = {
-  children: React.Element<any>,
+  children: ReactElement<any>,
+  className?: ?string,
   width: number,
   height: number,
   handleSize: [number, number],
@@ -29,14 +31,13 @@ export type Props = {
   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,
+  onResizeStop?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
+  onResizeStart?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
+  onResize?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
   draggableOpts?: ?Object
 };
 
-export default class Resizable extends React.Component {
-
+export default class Resizable extends React.Component<Props, State> {
   static propTypes = {
     //
     // Required Props
@@ -78,7 +79,6 @@ export default class Resizable extends React.Component {
     // These will be passed wholesale to react-draggable's DraggableCore
     draggableOpts: PropTypes.object
   };
-  props: Props;
 
   static defaultProps =  {
     handleSize: [20, 20],
@@ -158,7 +158,7 @@ export default class Resizable extends React.Component {
    * @return {Function}           Handler function.
    */
   resizeHandler(handlerName: string): Function {
-    return (e: SyntheticEvent | MouseEvent, {node, deltaX, deltaY}: DragCallbackData) => {
+    return (e: SyntheticEvent<> | MouseEvent, {node, deltaX, deltaY}: DragCallbackData) => {
 
       // Axis restrictions
       const canDragX = this.props.axis === 'both' || this.props.axis === 'x';
@@ -198,7 +198,7 @@ export default class Resizable extends React.Component {
     };
   }
 
-  render(): React.Element<any> {
+  render(): ReactNode {
     // eslint-disable-next-line no-unused-vars
     const {children, draggableOpts, width, height, handleSize,
         lockAspectRatio, axis, minConstraints, maxConstraints, onResize,

package/build/ResizableBox.js

@@ -86,25 +86,22 @@ var ResizableBox = function (_React$Component) {
         height = _props.height,
         props = _objectWithoutProperties(_props, ['handleSize', 'onResize', 'onResizeStart', 'onResizeStop', 'draggableOpts', 'minConstraints', 'maxConstraints', 'lockAspectRatio', 'axis', 'width', 'height']);
 
-    return (
-      // $FlowIgnore children & defaultProps bug (https://github.com/facebook/flow/issues/1964)
-      _react2.default.createElement(
-        _Resizable2.default,
-        {
-          handleSize: handleSize,
-          width: this.state.width,
-          height: this.state.height,
-          onResizeStart: onResizeStart,
-          onResize: this.onResize,
-          onResizeStop: onResizeStop,
-          draggableOpts: draggableOpts,
-          minConstraints: minConstraints,
-          maxConstraints: maxConstraints,
-          lockAspectRatio: lockAspectRatio,
-          axis: axis
-        },
-        _react2.default.createElement('div', _extends({ style: { width: this.state.width + 'px', height: this.state.height + 'px' } }, props))
-      )
+    return _react2.default.createElement(
+      _Resizable2.default,
+      {
+        handleSize: handleSize,
+        width: this.state.width,
+        height: this.state.height,
+        onResizeStart: onResizeStart,
+        onResize: this.onResize,
+        onResizeStop: onResizeStop,
+        draggableOpts: draggableOpts,
+        minConstraints: minConstraints,
+        maxConstraints: maxConstraints,
+        lockAspectRatio: lockAspectRatio,
+        axis: axis
+      },
+      _react2.default.createElement('div', _extends({ style: { width: this.state.width + 'px', height: this.state.height + 'px' } }, props))
     );
   };
 

package/build/ResizableBox.js.flow

@@ -3,16 +3,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Resizable from './Resizable';
 import type {Props as ResizableProps, ResizeCallbackData} from './Resizable';
+import type {Node as ReactNode} from 'react';
 
 type State = {width: number, height: number};
 
 // An example use of Resizable.
-export default class ResizableBox extends React.Component {
+export default class ResizableBox extends React.Component<ResizableProps, State> {
   static propTypes = {
     height: PropTypes.number,
     width: PropTypes.number
   };
-  props: ResizableProps;
 
   static defaultProps = {
     handleSize: [20,20]
@@ -23,7 +23,7 @@ export default class ResizableBox extends React.Component {
     height: this.props.height,
   };
 
-  onResize = (e: SyntheticEvent, data: ResizeCallbackData) => {
+  onResize = (e: SyntheticEvent<>, data: ResizeCallbackData) => {
     const {size} = data;
     const {width, height} = size;
 
@@ -44,14 +44,13 @@ export default class ResizableBox extends React.Component {
     }
   }
 
-  render(): React.Element<any> {
+  render(): ReactNode {
     // Basic wrapper around a Resizable instance.
     // If you use Resizable directly, you are responsible for updating the child component
     // with a new width and height.
     const {handleSize, onResize, onResizeStart, onResizeStop, draggableOpts,
          minConstraints, maxConstraints, lockAspectRatio, axis, width, height, ...props} = this.props;
     return (
-      // $FlowIgnore children & defaultProps bug (https://github.com/facebook/flow/issues/1964)
       <Resizable
         handleSize={handleSize}
         width={this.state.width}

package/build/cloneElement.js.flow

@@ -1,8 +1,9 @@
 // @flow
 import React from 'react';
+import type {Element as ReactElement} from 'react';
 
 // 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: ReactElement<any>, props: Object): ReactElement<any> {
   if (props.style && element.props.style) {
     props.style = {...element.props.style, ...props.style};
   }

package/css/styles.css

@@ -7,7 +7,7 @@
   height: 20px;
   bottom: 0;
   right: 0;
-  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=');
+  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
   background-position: bottom right;
   padding: 0 3px 3px 0;
   background-repeat: no-repeat;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable",
-  "version": "1.7.1",
+  "version": "1.7.5",
   "description": "A component that is resizable with handles.",
   "main": "index.js",
   "scripts": {
@@ -8,12 +8,14 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "bash build.sh",
     "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 --progress --hot --inline",
-    "prepublish": "npm run build",
-    "validate": "yarn list",
+    "dev": "webpack-dev-server --open --open-page=examples/1.html",
+    "watch": "webpack --progress --watch",
+    "prepare": "npm run build",
+    "validate": "yarn check",
     "preversion": "npm run lint",
     "version": "git add CHANGELOG.md",
-    "postversion": "git push && git push --tags"
+    "postversion": "git push && git push --tags",
+    "flow": "flow"
   },
   "repository": {
     "type": "git",
@@ -31,34 +33,34 @@
   },
   "homepage": "https://github.com/STRML/react-resizable",
   "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.24.1",
-    "babel-eslint": "^7.2.3",
-    "babel-loader": "^7.0.0",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.0.1",
+    "babel-loader": "^7.1.2",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
-    "cross-env": "^5.0.0",
-    "css-loader": "^0.28.0",
-    "eslint": "^3.19.0",
-    "eslint-plugin-react": "^7.0.1",
-    "flow-bin": "^0.46.0",
+    "cross-env": "^5.0.5",
+    "css-loader": "^0.28.7",
+    "eslint": "^4.7.2",
+    "eslint-plugin-react": "^7.4.0",
+    "flow-bin": "^0.55.0",
     "lodash": "^4.3.0",
     "pre-commit": "^1.1.2",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
-    "style-loader": "^0.18.1",
-    "webpack": "^2.4.1",
-    "webpack-dev-server": "^2.4.5"
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "style-loader": "^0.18.2",
+    "webpack": "^3.6.0",
+    "webpack-dev-server": "^2.8.2"
   },
   "dependencies": {
-    "prop-types": "^15.5.8",
-    "react-draggable": "^2.2.6"
+    "prop-types": "15.x",
+    "react-draggable": "^2.2.6 || ^3.0.3"
   },
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0",
-    "react-dom": "^0.14.0 || ^15.0.0"
+    "react": "0.14.x || 15.x || 16.x",
+    "react-dom": "0.14.x || 15.x || 16.x"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

package/.npmignore

@@ -1,5 +0,0 @@
-examples/
-test/
-lib/
-build.sh
-*.config.js