diff --git a/.babelrc b/.babelrc index 554d2ac..e05fb29 100644 --- a/.babelrc +++ b/.babelrc @@ -1,5 +1,5 @@ { - "presets": ["react"], + "presets": ["react", "stage-1"], "plugins": [ ["transform-es2015-modules-commonjs", { "loose": true }], "transform-es2015-block-scoping", diff --git a/.travis.yml b/.travis.yml index e79f833..5a837d9 100644 --- a/.travis.yml +++ b/.travis.yml @@ -20,7 +20,7 @@ before_script: script: # --silent surpresses that big ol' NPM script error - - npm run-script lint --silent + - npm run-script lint --silent - npm run-script test --silent cache: @@ -32,6 +32,7 @@ cache: env: - CXX=g++-4.8 addons: + firefox: latest apt: sources: - ubuntu-toolchain-r-test diff --git a/README.md b/README.md index 83d9567..875811e 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,4 @@ -# react-spin - -[![Build Status](https://travis-ci.org/thomasboyt/react-spin.svg?branch=master)](https://travis-ci.org/thomasboyt/react-spin) [![npm](https://img.shields.io/npm/v/react-spin.svg)](https://www.npmjs.com/package/react-spin) +# react-tiny-spin Tiny React wrapper around [spin.js](http://fgnass.github.io/spin.js/). @@ -8,18 +6,19 @@ Tiny React wrapper around [spin.js](http://fgnass.github.io/spin.js/). ```javascript import React from 'react'; -import Spinner from 'react-spin'; +import Spinner from 'react-tiny-spin'; + +const spinCfg = { + width: 12, + radius: 35, + // ... +}; -const MyComponent = React.createClass({ - render: function() { - var spinCfg = { - width: 12, - radius: 35, - // ... - }; +class MyComponent extends React.Component { + render() { return } -}); +} ``` ## Properties diff --git a/package.json b/package.json index 974f909..fcd2b1f 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { - "name": "react-spin", - "version": "0.6.2", + "name": "react-tiny-spin", + "version": "0.6.3", "description": "A React component wrapper for spin.js", "main": "lib/main.js", "scripts": { - "test": "karma start --single-run --browsers Firefox", + "test": "karma start --single-run --browsers Chrome", "lint": "eslint src/", "build": "rimraf lib && babel src --out-dir lib --ignore *.spec.js", "prepublish": "npm run build" @@ -13,7 +13,7 @@ "license": "MIT", "repository": { "type": "git", - "url": "https://github.com/thomasboyt/react-spin" + "url": "https://github.com/captDaylight/react-tiny-spin" }, "devDependencies": { "babel-cli": "^6.6.0", @@ -25,19 +25,21 @@ "babel-plugin-transform-es2015-modules-commonjs": "^6.7.0", "babel-plugin-transform-es3-property-literals": "^6.5.0", "babel-preset-react": "^6.5.0", + "babel-preset-stage-1": "^6.24.1", "eslint": "^1.10.3", "eslint-plugin-react": "^4.1.0", "expect": "^1.14.0", "karma": "^0.13.21", "karma-chrome-launcher": "^0.2.2", - "karma-firefox-launcher": "^0.1.7", + "karma-firefox-launcher": "^1.0.1", "karma-mocha": "^0.2.2", "karma-mocha-reporter": "^1.2.3", "karma-sourcemap-loader": "^0.3.7", "karma-webpack": "^1.7.0", "mocha": "^2.4.5", - "react": "^15.0.0", - "react-addons-test-utils": "^15.0.0", + "prop-types": "^15.6.0", + "react": "^16.0.0", + "react-dom": "^16.0.0", "rimraf": "^2.5.2", "webpack": "^1.12.14" }, diff --git a/src/__tests__/main.spec.js b/src/__tests__/main.spec.js index b42efce..f11e873 100644 --- a/src/__tests__/main.spec.js +++ b/src/__tests__/main.spec.js @@ -1,6 +1,6 @@ import expect from 'expect'; import React from 'react'; -import TestUtils from 'react-addons-test-utils'; +import TestUtils from 'react-dom/test-utils'; import ReactSpinner from '../main'; diff --git a/src/main.js b/src/main.js index 5bca4ac..363cd09 100644 --- a/src/main.js +++ b/src/main.js @@ -1,36 +1,37 @@ -import React from 'react'; +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; import Spinner from 'spin.js'; -const ReactSpinner = React.createClass({ - propTypes: { - config: React.PropTypes.object, - stopped: React.PropTypes.bool - }, +class ReactSpinner extends PureComponent { + static propTypes = { + config: PropTypes.object, + stopped: PropTypes.bool + }; - componentDidMount: function() { + componentDidMount() { this.spinner = new Spinner(this.props.config); if (!this.props.stopped) { - this.spinner.spin(this.refs.container); + this.spinner.spin(this.container); } - }, + } - componentWillReceiveProps: function(newProps) { + componentWillReceiveProps(newProps) { if (newProps.stopped === true && !this.props.stopped) { this.spinner.stop(); } else if (!newProps.stopped && this.props.stopped === true) { - this.spinner.spin(this.refs.container); + this.spinner.spin(this.container); } - }, + } - componentWillUnmount: function() { + componentWillUnmount() { this.spinner.stop(); - }, + } - render: function() { + render() { return ( - + (this.container = container)} /> ); } -}); +} export default ReactSpinner;