From c5a007ef8a32931163de060fab605a8b40dff692 Mon Sep 17 00:00:00 2001 From: Samuel Reed Date: Sat, 14 Nov 2015 11:09:29 -0500 Subject: [PATCH] Full ES6 update, all examples functioning again - ready to merge --- .babelrc | 9 +++- index.js | 10 ++-- lib/Resizable.jsx | 102 +++++++++++++++++++---------------- lib/ResizableBox.jsx | 55 +++++++++---------- lib/cloneElement.js | 6 +-- package.json | 22 ++++---- test/TestLayout.jsx | 28 ++++------ test/test.js | 10 ++-- webpack-dev-server.config.js | 3 +- 9 files changed, 124 insertions(+), 121 deletions(-) diff --git a/.babelrc b/.babelrc index b0b9a96e..22af4822 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,10 @@ { - "stage": 0 + "stage": 0, + "env": { + "test": { + "plugins": [ + "typecheck" + ] + } + } } diff --git a/index.js b/index.js index 00b2f94f..f7c6ca89 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,7 @@ -'use strict'; -module.exports = function() { - throw new Error("Don't instantiate Resizable directly! Use require('react-resizable').Resizable"); +export default function() { + throw new Error("Don't instantiate Resizable directly! Use require('react-resizable').Resizable or " + + "import {Resizable} from 'react-resizable'."); }; -module.exports.Resizable = require('./build/Resizable'); -module.exports.ResizableBox = require('./build/ResizableBox'); +export Resizable from './build/Resizable'; +export ResizableBox from './build/ResizableBox'; diff --git a/lib/Resizable.jsx b/lib/Resizable.jsx index 2f4ec952..35051728 100644 --- a/lib/Resizable.jsx +++ b/lib/Resizable.jsx @@ -1,41 +1,50 @@ -'use strict'; -var React = require('react'); -var DraggableCore = require('react-draggable').DraggableCore; -var assign = require('object-assign'); -var cloneElement = require('./cloneElement'); +import {default as React, PropTypes} from 'react'; +import {DraggableCore} from 'react-draggable'; +import assign from 'object-assign'; +import cloneElement from './cloneElement'; -var Resizable = module.exports = React.createClass({ - displayName: 'Resizable', +export default class Resizable extends React.Component { + static propTypes = { + // + // Required Props + // - propTypes: { // Require that one and only one child be present. - children: React.PropTypes.element.isRequired, - // Functions - onResizeStop: React.PropTypes.func, - onResizeStart: React.PropTypes.func, - onResize: React.PropTypes.func, - - width: React.PropTypes.number.isRequired, - height: React.PropTypes.number.isRequired, + children: PropTypes.element.isRequired, + + // Initial w/h + width: PropTypes.number.isRequired, + height: PropTypes.number.isRequired, + + // + // Optional props + // + // If you change this, be sure to update your css - handleSize: React.PropTypes.array, - // These will be passed wholesale to react-draggable - draggableOpts: React.PropTypes.object - }, + handleSize: PropTypes.array, - getDefaultProps() { - return { - handleSize: [20, 20] - }; - }, + // Min/max size + minConstraints: PropTypes.arrayOf(PropTypes.number), + maxConstraints: PropTypes.arrayOf(PropTypes.number), - getInitialState() { - return { - bounds: this.constraintsToBounds(), - width: this.props.width, - height: this.props.height - }; - }, + // Callbacks + onResizeStop: PropTypes.func, + onResizeStart: PropTypes.func, + onResize: PropTypes.func, + + // These will be passed wholesale to react-draggable's DraggableCore + draggableOpts: PropTypes.object + }; + + static defaultProps = { + handleSize: [20, 20] + }; + + state = { + bounds: this.constraintsToBounds(), + width: this.props.width, + height: this.props.height + }; componentWillReceiveProps(props: Object) { if (!this.state.resizing) { @@ -45,19 +54,19 @@ var Resizable = module.exports = React.createClass({ bounds: this.constraintsToBounds() }); } - }, + } constraintsToBounds() { - var p = this.props; - var mins = p.minConstraints || p.handleSize; - var maxes = p.maxConstraints || [Infinity, Infinity]; + let p = this.props; + let mins = p.minConstraints || p.handleSize; + let maxes = p.maxConstraints || [Infinity, Infinity]; return { left: mins[0] - p.width, top: mins[1] - p.height, right: maxes[0] - p.width, bottom: maxes[1] - p.height }; - }, + } /** * Wrapper around drag events to provide more useful data. @@ -66,23 +75,22 @@ var Resizable = module.exports = React.createClass({ * @return {Function} Handler function. */ resizeHandler(handlerName: string) { - var me = this; - return function(e, {node, position}) { - let width = me.state.width + position.deltaX, height = me.state.height + position.deltaY; - me.props[handlerName] && me.props[handlerName](e, {node, size: {width, height}}); + return (e, {node, position}) => { + let width = this.state.width + position.deltaX, height = this.state.height + position.deltaY; + this.props[handlerName] && this.props[handlerName](e, {node, size: {width, height}}); if (handlerName === 'onResizeStart') { - me.setState({resizing: true}); + this.setState({resizing: true}); } else if (handlerName === 'onResizeStop') { - me.setState({resizing: false}); + this.setState({resizing: false}); } else { - me.setState({width, height}); + this.setState({width, height}); } }; - }, + } render() { - var p = this.props, s = this.state; + let p = this.props; // What we're doing here is getting the child of this element, and cloning it with this element's props. // We are then defining its children as: @@ -104,4 +112,4 @@ var Resizable = module.exports = React.createClass({ ] })); } -}); +} diff --git a/lib/ResizableBox.jsx b/lib/ResizableBox.jsx index dd2add55..b6088eaf 100644 --- a/lib/ResizableBox.jsx +++ b/lib/ResizableBox.jsx @@ -1,40 +1,35 @@ -'use strict'; -var React = require('react'); -var PropTypes = React.PropTypes; -var Resizable = require('./Resizable'); +import {default as React, PropTypes} from 'react'; +import Resizable from './Resizable'; -// An example use of Resizable. type Size = {width: number, height: number}; type ResizeData = {element: Element, size: Size}; -var ResizableBox = module.exports = React.createClass({ - displayName: 'ResizableBox', - propTypes: { +// An example use of Resizable. +export default class ResizableBox extends React.Component { + static propTypes = { lockAspectRatio: PropTypes.bool, minConstraints: PropTypes.arrayOf(PropTypes.number), maxConstraints: PropTypes.arrayOf(PropTypes.number), height: PropTypes.number, width: PropTypes.number - }, + }; - getDefaultProps() { - return { - lockAspectRatio: false, - handleSize: [20,20] - }; - }, + static defaultProps = { + lockAspectRatio: false, + handleSize: [20,20] + }; - getInitialState() { - return { - width: this.props.width, - height: this.props.height, - aspectRatio: this.props.width / this.props.height - }; - }, + state = { + width: this.props.width, + height: this.props.height, + aspectRatio: this.props.width / this.props.height + }; - onResize(event: Event, {element, size}: ResizeData) { - var {width, height} = size; - var widthChanged = width !== this.state.width, heightChanged = height !== this.state.height; + // TODO data is ResizeData type, but that doesn't work in babel-typecheck pre-babel6 + onResize = (event: Event, data: Object) => { + let {element, size} = data; + let {width, height} = size; + let widthChanged = width !== this.state.width, heightChanged = height !== this.state.height; if (!widthChanged && !heightChanged) return; [width, height] = this.runConstraints(width, height); @@ -44,11 +39,11 @@ var ResizableBox = module.exports = React.createClass({ this.props.onResize(event, {element, size: {width, height}}); } }); - }, + } // If you do this, be careful of constraints runConstraints(width: number, height: number) { - var [min, max] = [this.props.minConstraints, this.props.maxConstraints]; + let [min, max] = [this.props.minConstraints, this.props.maxConstraints]; if (this.props.lockAspectRatio) { height = width / this.state.aspectRatio; @@ -64,13 +59,13 @@ var ResizableBox = module.exports = React.createClass({ height = Math.min(max[1], height); } return [width, height]; - }, + } render() { // Basic wrapper around a Resizable instance. // If you use Resizable directly, you are responsible for updating the component // with a new width and height. - var {handleSize, minConstraints, maxConstraints, ...props} = this.props; + let {handleSize, minConstraints, maxConstraints, ...props} = this.props; return ( ); } -}); +} diff --git a/lib/cloneElement.js b/lib/cloneElement.js index 25eb1e61..45bf573c 100644 --- a/lib/cloneElement.js +++ b/lib/cloneElement.js @@ -1,7 +1,5 @@ -'use strict'; - -var assign = require('object-assign'); -var React = require('react'); +import assign from 'object-assign'; +import React from 'react'; // React.addons.cloneWithProps look-alike that merges style & className. module.exports = function cloneElement(element: React.Component, props: Object) { diff --git a/package.json b/package.json index 77f0be00..c7721793 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "test": "echo \"Error: no test specified\" && exit 1", "build": "bash build.sh", "build-example": "webpack", - "dev": "echo 'Open http://localhost:4002/examples/1.html'; webpack-dev-server --config webpack-dev-server.config.js --hot --progress --colors --port 4002 --content-base .", + "dev": "echo 'Open http://localhost:4002/examples/1.html'; NODE_ENV=test webpack-dev-server --config webpack-dev-server.config.js --hot --progress --colors --port 4002 --content-base .", "prepublish": "npm run build", "validate": "npm ls" }, @@ -33,27 +33,29 @@ "babel-eslint": "^4.1.3", "babel-loader": "^5.3.2", "babel-plugin-typecheck": "^1.3.0", - "css-loader": "^0.21.0", - "eslint": "^1.7.3", - "eslint-plugin-react": "^3.6.3", + "css-loader": "^0.23.0", + "eslint": "^1.9.0", + "eslint-plugin-react": "^3.8.0", "lodash": "^3.10.1", "pre-commit": "^1.1.2", - "react": "^0.14.0", - "react-hot-loader": "^1.3.0", + "react": "^0.14.2", + "react-dom": "^0.14.2", "style-loader": "^0.13.0", - "webpack": "^1.12.2", + "webpack": "^1.12.6", "webpack-dev-server": "^1.12.1" }, "dependencies": { + "babel-preset-es2015": "^6.1.18", + "babel-preset-react": "^6.1.18", + "babel-preset-stage-0": "^6.1.18", "object-assign": "^4.0.1", - "react-draggable": "^1.0.0" + "react-draggable": "^1.1.0" }, "publishConfig": { "registry": "https://registry.npmjs.org/" }, "pre-commit": [ "lint", - "validate", - "test" + "validate" ] } diff --git a/test/TestLayout.jsx b/test/TestLayout.jsx index 266204f1..c67f398f 100644 --- a/test/TestLayout.jsx +++ b/test/TestLayout.jsx @@ -1,24 +1,18 @@ -'use strict'; -var React = require('react'); -var _ = require('lodash'); -var ResizableBox = require('../lib/ResizableBox.jsx'); -var Resizable = require('../lib/Resizable.jsx'); -require('style!css!../css/styles.css'); +import React from 'react'; +import Resizable from '../lib/Resizable'; +import ResizableBox from '../lib/ResizableBox'; +import 'style!css!../css/styles.css'; -var TestLayout = module.exports = React.createClass({ - displayName: 'TestLayout', +export default class TestLayout extends React.Component { + state = {width: 200, height: 200}; - getInitialState() { - return {width: 200, height: 200}; - }, - - onClick() { + onClick = () => { this.setState({width: 200, height: 200}); - }, + }; - onResize(event, {element, size}) { + onResize = (event, {element, size}) => { this.setState({width: size.width, height: size.height}); - }, + }; render() { return ( @@ -51,4 +45,4 @@ var TestLayout = module.exports = React.createClass({ ); } -}); +} diff --git a/test/test.js b/test/test.js index 4e07fdb2..539c4384 100644 --- a/test/test.js +++ b/test/test.js @@ -1,8 +1,8 @@ -'use strict'; -var Layout = require('./TestLayout.jsx'); -var React = require('react'); -var ReactDOM = require('react-dom'); +import TestLayout from './TestLayout'; +import React from 'react'; +import ReactDOM from 'react-dom'; + document.addEventListener("DOMContentLoaded", function(event) { var contentDiv = document.getElementById('content'); - ReactDOM.render(React.createElement(Layout), contentDiv); + ReactDOM.render(React.createElement(TestLayout), contentDiv); }); diff --git a/webpack-dev-server.config.js b/webpack-dev-server.config.js index e4bf7ab4..976d8952 100644 --- a/webpack-dev-server.config.js +++ b/webpack-dev-server.config.js @@ -12,8 +12,7 @@ module.exports = { }, module: { loaders: [ - {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?stage=0'}, - {test: /\.jsx$/, exclude: /node_modules/, loader: 'react-hot-loader'} + {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'} ] }, debug: true,