From 74907a4517c1310e499ed97f9dcbd37540a0f4fc Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Tue, 8 Sep 2015 01:05:08 +0200 Subject: [PATCH] Migrate progress bars to es6 --- .eslintrc | 1 + .../progress_bar/__test__/index.spec.cjsx | 48 ---------- .../progress_bar/__test__/index.spec.jsx | 63 +++++++++++++ components/progress_bar/index.cjsx | 68 -------------- components/progress_bar/index.jsx | 91 +++++++++++++++++++ karma.conf.coffee | 4 +- spec/index.cjsx | 2 +- tests.webpack.js | 2 +- 8 files changed, 159 insertions(+), 120 deletions(-) delete mode 100644 components/progress_bar/__test__/index.spec.cjsx create mode 100644 components/progress_bar/__test__/index.spec.jsx delete mode 100644 components/progress_bar/index.cjsx create mode 100644 components/progress_bar/index.jsx diff --git a/.eslintrc b/.eslintrc index ea68877d..fdaf2a6e 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,6 +2,7 @@ "env": { "browser": true, "node": true, + "mocha": true, "es6": true }, diff --git a/components/progress_bar/__test__/index.spec.cjsx b/components/progress_bar/__test__/index.spec.cjsx deleted file mode 100644 index cc35a961..00000000 --- a/components/progress_bar/__test__/index.spec.cjsx +++ /dev/null @@ -1,48 +0,0 @@ -TestUtils = React.addons.TestUtils -expect = require('expect') -utils = require('../../utils/testing') -ProgressBar = require('../index') - -describe 'ProgressBar', -> - describe '#calculateRatio', -> - before -> - @progressBar = utils.renderComponent(ProgressBar, { min: 100, max: 300 }) - - it 'calculates the right ratio', -> - expect(@progressBar.calculateRatio(150)).toEqual(0.25) - - it 'gets 0 when value is less than min', -> - expect(@progressBar.calculateRatio(10)).toEqual(0) - - it 'gets 1 when value is more than max', -> - expect(@progressBar.calculateRatio(400)).toEqual(1) - - describe '#render', -> - it 'renders the value and buffer bars when it is linear', -> - progressBarWrapper = utils.shallowRenderComponent(ProgressBar).props.children - expect(progressBarWrapper.props.children.length).toEqual(2) - expect(progressBarWrapper.props.children[0].ref).toEqual('buffer') - expect(progressBarWrapper.props.children[1].ref).toEqual('value') - - it 'renders the proper scaleX for buffer and value when its linear and determinate', -> - progressBar = utils.shallowRenderComponent(ProgressBar, {mode: 'determinate', value: 30, buffer: 60}) - buffer = (progressBar.props.children.props.children[0]) - value = (progressBar.props.children.props.children[1]) - expect(buffer.props.style.transform).toEqual("scaleX(#{0.6})") - expect(value.props.style.transform).toEqual("scaleX(#{0.3})") - - it 'renders the svg circle when it is circular', -> - progressBar = utils.shallowRenderComponent(ProgressBar, {type: 'circular'}) - expect(progressBar.props.children.type).toEqual('svg') - expect(progressBar.props.children.props.children.type).toEqual('circle') - - it 'renders the proper circle length style when it is circular and determinate', -> - progressBar = utils.shallowRenderComponent(ProgressBar, {type: 'circular', mode: 'determinate', value: 30}) - circle = progressBar.props.children.props.children - strokeLength = 2 * Math.PI * circle.props.r * 0.3 - expect(circle.props.style.strokeDasharray).toEqual("#{strokeLength}, 400") - - it 'contains mode and className in its className', -> - progressBar = utils.shallowRenderComponent(ProgressBar, {mode: 'determinate', className: 'tight'}) - expect(progressBar.props.className).toContain('determinate') - expect(progressBar.props.className).toContain('tight') diff --git a/components/progress_bar/__test__/index.spec.jsx b/components/progress_bar/__test__/index.spec.jsx new file mode 100644 index 00000000..abb1137c --- /dev/null +++ b/components/progress_bar/__test__/index.spec.jsx @@ -0,0 +1,63 @@ +const expect = require('expect'); +const utils = require('../../utils/testing'); +const ProgressBar = require('../index'); + +describe('ProgressBar', function () { + describe('#calculateRatio', function () { + before(function () { + this.progressBar = utils.renderComponent(ProgressBar, {min: 100, max: 300}); + }); + + it('calculates the right ratio', function () { + expect(this.progressBar.calculateRatio(150)).toEqual(0.25); + }); + + it('gets 0 when value is less than min', function () { + expect(this.progressBar.calculateRatio(10)).toEqual(0); + }); + + it('gets 1 when value is more than max', function () { + expect(this.progressBar.calculateRatio(400)).toEqual(1); + }); + }); + + describe('#render', function () { + it('renders the value and buffer bars when it is linear', function () { + const progressBarWrapper = utils.shallowRenderComponent(ProgressBar).props.children; + expect(progressBarWrapper.props.children.length).toEqual(2); + expect(progressBarWrapper.props.children[0].ref).toEqual('buffer'); + expect(progressBarWrapper.props.children[1].ref).toEqual('value'); + }); + + it('renders the value and buffer bars when it is linear', function () { + const progressBar = utils.shallowRenderComponent(ProgressBar, { + mode: 'determinate', value: 30, buffer: 60 + }); + const buffer = (progressBar.props.children.props.children[0]); + const value = (progressBar.props.children.props.children[1]); + expect(buffer.props.style.transform).toEqual(`scaleX(${0.6})`); + expect(value.props.style.transform).toEqual(`scaleX(${0.3})`); + }); + + it('renders the svg circle when it is circular', function () { + const progressBar = utils.shallowRenderComponent(ProgressBar, {type: 'circular'}); + expect(progressBar.props.children.type).toEqual('svg'); + expect(progressBar.props.children.props.children.type).toEqual('circle'); + }); + + it('renders the proper circle length style when it is circular and determinate', function () { + const progressBar = utils.shallowRenderComponent(ProgressBar, { + type: 'circular', mode: 'determinate', value: 30}); + const circle = progressBar.props.children.props.children; + const strokeLength = 2 * Math.PI * circle.props.r * 0.3; + expect(circle.props.style.strokeDasharray).toEqual(`${strokeLength}, 400`); + }); + + it('contains mode and className in its className', function () { + const progressBar = utils.shallowRenderComponent(ProgressBar, { + mode: 'determinate', className: 'tight'}); + expect(progressBar.props.className).toContain('determinate'); + expect(progressBar.props.className).toContain('tight'); + }); + }); +}); diff --git a/components/progress_bar/index.cjsx b/components/progress_bar/index.cjsx deleted file mode 100644 index 6ebffd66..00000000 --- a/components/progress_bar/index.cjsx +++ /dev/null @@ -1,68 +0,0 @@ -localCSS = require './style' -prefixer = require '../utils/prefixer' - -module.exports = React.createClass - - # -- Properties - propTypes: - buffer : React.PropTypes.number - className : React.PropTypes.string - max : React.PropTypes.number - min : React.PropTypes.number - mode : React.PropTypes.string - multicolor : React.PropTypes.bool - type : React.PropTypes.string - value : React.PropTypes.number - - getDefaultProps: -> - buffer : 0 - className : '' - max : 100 - min : 0 - mode : 'indeterminate' - multicolor : false - type : 'linear' - value : 0 - - # -- Helper methods - calculateRatio: (value) -> - return 0 if value < @props.min - return 1 if value > @props.max - return (value - @props.min) / (@props.max - @props.min) - - # -- Render - render: -> - className = if @props.type == 'linear' then localCSS.linearBar else localCSS.circularBar - className += " #{@props.className}" if @props.className - className += " #{@props.mode}" if @props.mode - className += " multicolor" if @props.multicolor - -
- { if @props.type == 'circular' then @renderCircular() else @renderLinear() } -
- - renderCircular: -> - - - - - circularStyle: -> - _transformDasharray(@calculateRatio(@props.value)) unless @props.mode == 'indeterminate' - - renderLinear: -> -
- - -
- - linearStyles: -> - unless @props.mode == 'indeterminate' - buffer: prefixer(transform: "scaleX(#{@calculateRatio(@props.buffer)})") - value: prefixer(transform: "scaleX(#{@calculateRatio(@props.value)})") - -# -- Private methods -_transformDasharray = (ratio) -> - strokeDasharray: "#{2 * Math.PI * 25 * ratio}, 400" diff --git a/components/progress_bar/index.jsx b/components/progress_bar/index.jsx new file mode 100644 index 00000000..579f17b2 --- /dev/null +++ b/components/progress_bar/index.jsx @@ -0,0 +1,91 @@ +const React = window.React; +const PureRenderMixin = require('react/addons').addons.PureRenderMixin; +const css = require('./style'); +const prefixer = require('../utils/prefixer'); + +module.exports = React.createClass({ + mixins: [PureRenderMixin], + + propTypes: { + buffer: React.PropTypes.number, + className: React.PropTypes.string, + max: React.PropTypes.number, + min: React.PropTypes.number, + mode: React.PropTypes.string, + multicolor: React.PropTypes.bool, + type: React.PropTypes.string, + value: React.PropTypes.number + }, + + getDefaultProps () { + return { + buffer: 0, + className: '', + max: 100, + min: 0, + mode: 'indeterminate', + multicolor: false, + type: 'linear', + value: 0 + }; + }, + + calculateRatio (value) { + if (value < this.props.min) return 0; + if (value > this.props.max) return 1; + return (value - this.props.min) / (this.props.max - this.props.min); + }, + + circularStyle () { + if (this.props.mode !== 'indeterminate') { + return {strokeDasharray: `${2 * Math.PI * 25 * this.calculateRatio(this.props.value)}, 400`}; + } + }, + + renderCircular () { + return ( + + + + ); + }, + + linearStyle () { + if (this.props.mode !== 'indeterminate') { + return { + buffer: prefixer({transform: `scaleX(${this.calculateRatio(this.props.buffer)})`}), + value: prefixer({transform: `scaleX(${this.calculateRatio(this.props.value)})`}) + }; + } else { + return {}; + } + }, + + renderLinear () { + const {buffer, value} = this.linearStyle(); + return ( +
+ + +
+ ); + }, + + render () { + let className = this.props.type === 'linear' ? css.linearBar : css.circularBar; + if (this.props.className) className += ` ${this.props.className}`; + if (this.props.mode) className += ` ${this.props.mode}`; + if (this.props.multicolor) className += ` multicolor`; + + return ( +
+ { this.props.type === 'circular' ? this.renderCircular() : this.renderLinear() } +
+ ); + } +}); diff --git a/karma.conf.coffee b/karma.conf.coffee index 64b88149..76105826 100644 --- a/karma.conf.coffee +++ b/karma.conf.coffee @@ -16,11 +16,11 @@ module.exports = (config) -> 'tests.webpack.js' : ['webpack'] webpack: - resolve : extensions: ['', '.cjsx', '.coffee', '.js', '.json', '.styl'] + resolve : extensions: ['', '.jsx', '.cjsx', '.coffee', '.js', '.json', '.styl'] module: loaders: [ - test : /\.js$/, exclude:/(node_modules)/, loader: 'babel?optional=runtime' + test : /(\.js|\.jsx)$/, exclude:/(node_modules)/, loader: 'babel?optional=runtime' , test : /\.cjsx$/, loader: 'coffee-jsx-loader' , diff --git a/spec/index.cjsx b/spec/index.cjsx index 3d0a1f85..87093483 100644 --- a/spec/index.cjsx +++ b/spec/index.cjsx @@ -25,7 +25,7 @@ Test = React.createClass render: ->

React-Toolbox New way for create

- + React.render , document.body diff --git a/tests.webpack.js b/tests.webpack.js index e77fcfda..1a1549d3 100644 --- a/tests.webpack.js +++ b/tests.webpack.js @@ -1,2 +1,2 @@ -var context = require.context('./components', true, /.spec\.cjsx?$/); +var context = require.context('./components', true, /(.spec\.cjsx?|.spec\.jsx?)$/); context.keys().forEach(context);