From 30cf0d2dd1873b7b0fc67cfa55323c4d0f6628a1 Mon Sep 17 00:00:00 2001 From: Wendell Date: Tue, 6 Aug 2019 15:07:51 +0800 Subject: [PATCH 1/9] =?UTF-8?q?=F0=9F=90=9B=20fix=20gradient=20for=20circl?= =?UTF-8?q?e=20progress=20does=20not=20have=20unique=20id?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/gradient-circle.js | 4 ++-- src/Circle.js | 16 ++++++++++++++-- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/examples/gradient-circle.js b/examples/gradient-circle.js index bbf7cef..156bb68 100644 --- a/examples/gradient-circle.js +++ b/examples/gradient-circle.js @@ -30,8 +30,8 @@ const Example = () => { strokeWidth="6" strokeLinecap="round" strokeColor={{ - '100%': '#87d068', - '0%': '#108ee9', + '0%': '#87d068', + '100%': '#108ee9', }} /> diff --git a/src/Circle.js b/src/Circle.js index f3b446d..78b9e51 100644 --- a/src/Circle.js +++ b/src/Circle.js @@ -4,6 +4,8 @@ import PropTypes from 'prop-types'; import enhancer from './enhancer'; import { propTypes, defaultProps } from './types'; +let gradientSeed = 0; + function getPathStyles(offset, percent, strokeColor, strokeWidth, gapDegree = 0, gapPosition) { const radius = 50 - strokeWidth / 2; let beginPositionX = 0; @@ -51,6 +53,13 @@ function getPathStyles(offset, percent, strokeColor, strokeWidth, gapDegree = 0, class Circle extends Component { paths = {}; + gradientId = 0; + + constructor() { + super(); + this.gradientId = gradientSeed++; + } + getStokeList() { const { prefixCls, @@ -64,8 +73,11 @@ class Circle extends Component { const percentList = Array.isArray(percent) ? percent : [percent]; const strokeColorList = Array.isArray(strokeColor) ? strokeColor : [strokeColor]; + const gradientId = this.gradientId; const stroke = - Object.prototype.toString.call(strokeColor) === '[object Object]' ? 'url(#gradient)' : ''; + Object.prototype.toString.call(strokeColor) === '[object Object]' + ? `url(#gradient-${gradientId})` + : ''; let stackPtg = 0; return percentList.map((ptg, index) => { @@ -132,7 +144,7 @@ class Circle extends Component { > {isGradient && ( - + {Object.keys(strokeColor).map((key, index) => ( ))} From 74ca208042d89cae84697a2b9f1afa53466193b7 Mon Sep 17 00:00:00 2001 From: Wendell Date: Tue, 6 Aug 2019 15:11:21 +0800 Subject: [PATCH 2/9] =?UTF-8?q?=F0=9F=92=AC=20beautify=20code?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Circle.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/Circle.js b/src/Circle.js index 78b9e51..70068cf 100644 --- a/src/Circle.js +++ b/src/Circle.js @@ -72,11 +72,9 @@ class Circle extends Component { } = this.props; const percentList = Array.isArray(percent) ? percent : [percent]; const strokeColorList = Array.isArray(strokeColor) ? strokeColor : [strokeColor]; - - const gradientId = this.gradientId; const stroke = Object.prototype.toString.call(strokeColor) === '[object Object]' - ? `url(#gradient-${gradientId})` + ? `url(#gradient-${this.gradientId})` : ''; let stackPtg = 0; From accef1b7bd8f236bfdcb838e7e7ec12986c53d17 Mon Sep 17 00:00:00 2001 From: Wendell Date: Mon, 12 Aug 2019 17:11:37 +0800 Subject: [PATCH 3/9] sort gradient color and support stroke color array with gradient --- examples/gradient-circle.js | 17 ++++++++++++++++- src/Circle.js | 36 +++++++++++++++++++++++++----------- src/types.js | 2 +- 3 files changed, 42 insertions(+), 13 deletions(-) diff --git a/examples/gradient-circle.js b/examples/gradient-circle.js index 156bb68..c41d401 100644 --- a/examples/gradient-circle.js +++ b/examples/gradient-circle.js @@ -30,11 +30,26 @@ const Example = () => { strokeWidth="6" strokeLinecap="round" strokeColor={{ - '0%': '#87d068', '100%': '#108ee9', + '0%': '#87d068', }} /> +

Circle With Success {20}%

+
+ +
); }; diff --git a/src/Circle.js b/src/Circle.js index 70068cf..7ca56c3 100644 --- a/src/Circle.js +++ b/src/Circle.js @@ -6,6 +6,14 @@ import { propTypes, defaultProps } from './types'; let gradientSeed = 0; +function stripPercentToNumber(percent) { + return +percent.replace('%', ''); +} + +function toArray(symArray) { + return Array.isArray(symArray) ? symArray : [symArray]; +} + function getPathStyles(offset, percent, strokeColor, strokeWidth, gapDegree = 0, gapPosition) { const radius = 50 - strokeWidth / 2; let beginPositionX = 0; @@ -70,16 +78,16 @@ class Circle extends Component { gapDegree, gapPosition, } = this.props; - const percentList = Array.isArray(percent) ? percent : [percent]; - const strokeColorList = Array.isArray(strokeColor) ? strokeColor : [strokeColor]; - const stroke = - Object.prototype.toString.call(strokeColor) === '[object Object]' - ? `url(#gradient-${this.gradientId})` - : ''; + const percentList = toArray(percent); + const strokeColorList = toArray(strokeColor); let stackPtg = 0; return percentList.map((ptg, index) => { const color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1]; + const stroke = + Object.prototype.toString.call(color) === '[object Object]' + ? `url(#gradient-${this.gradientId})` + : ''; const { pathString, pathStyle } = getPathStyles( stackPtg, ptg, @@ -132,7 +140,11 @@ class Circle extends Component { gapPosition, ); delete restProps.percent; - const isGradient = Object.prototype.toString.call(strokeColor) === '[object Object]'; + const strokeColorList = toArray(strokeColor); + const gradient = strokeColorList.find( + color => Object.prototype.toString.call(color) === '[object Object]', + ); + return ( - {isGradient && ( + {gradient && ( - {Object.keys(strokeColor).map((key, index) => ( - - ))} + {Object.keys(gradient) + .sort((a, b) => stripPercentToNumber(a) - stripPercentToNumber(b)) + .map((key, index) => ( + + ))} )} diff --git a/src/types.js b/src/types.js index 0b5ac5e..36ae6db 100644 --- a/src/types.js +++ b/src/types.js @@ -20,7 +20,7 @@ export const propTypes = { prefixCls: PropTypes.string, strokeColor: PropTypes.oneOfType([ PropTypes.string, - PropTypes.arrayOf(PropTypes.string), + PropTypes.arrayOf(PropTypes.any), PropTypes.object, ]), strokeLinecap: PropTypes.oneOf(['butt', 'round', 'square']), From f7e1615bc15b9a51dc8ca353ea0c772ddd543c06 Mon Sep 17 00:00:00 2001 From: Wendell Date: Mon, 12 Aug 2019 17:12:01 +0800 Subject: [PATCH 4/9] fix doc --- examples/gradient-circle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/gradient-circle.js b/examples/gradient-circle.js index c41d401..9acefee 100644 --- a/examples/gradient-circle.js +++ b/examples/gradient-circle.js @@ -35,7 +35,7 @@ const Example = () => { }} /> -

Circle With Success {20}%

+

Circle With Success Percent {65}%

Date: Mon, 12 Aug 2019 17:22:30 +0800 Subject: [PATCH 5/9] fix code style --- src/Circle.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Circle.js b/src/Circle.js index 7ca56c3..39b28ca 100644 --- a/src/Circle.js +++ b/src/Circle.js @@ -65,7 +65,8 @@ class Circle extends Component { constructor() { super(); - this.gradientId = gradientSeed++; + this.gradientId = gradientSeed; + gradientSeed += 1; } getStokeList() { From e0b9efa8283b6fc91c42c09aa0f07d3b5a365daa Mon Sep 17 00:00:00 2001 From: Wendell Date: Wed, 14 Aug 2019 10:58:52 +0800 Subject: [PATCH 6/9] add prefix --- src/Circle.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/Circle.js b/src/Circle.js index 39b28ca..582b2b4 100644 --- a/src/Circle.js +++ b/src/Circle.js @@ -87,7 +87,7 @@ class Circle extends Component { const color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1]; const stroke = Object.prototype.toString.call(color) === '[object Object]' - ? `url(#gradient-${this.gradientId})` + ? `url(#${prefixCls}-gradient-${this.gradientId})` : ''; const { pathString, pathStyle } = getPathStyles( stackPtg, @@ -155,7 +155,13 @@ class Circle extends Component { > {gradient && ( - + {Object.keys(gradient) .sort((a, b) => stripPercentToNumber(a) - stripPercentToNumber(b)) .map((key, index) => ( From 4c311c0c07ab8a4892396fce087195b1d5a3e4aa Mon Sep 17 00:00:00 2001 From: Wendell Date: Wed, 14 Aug 2019 11:11:16 +0800 Subject: [PATCH 7/9] more strict prop type --- src/types.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/types.js b/src/types.js index 36ae6db..75297e1 100644 --- a/src/types.js +++ b/src/types.js @@ -20,7 +20,7 @@ export const propTypes = { prefixCls: PropTypes.string, strokeColor: PropTypes.oneOfType([ PropTypes.string, - PropTypes.arrayOf(PropTypes.any), + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])), PropTypes.object, ]), strokeLinecap: PropTypes.oneOf(['butt', 'round', 'square']), From d3cf70af7a5f38bfe40510250b088120bc80bcbb Mon Sep 17 00:00:00 2001 From: Wendell Date: Wed, 14 Aug 2019 11:35:30 +0800 Subject: [PATCH 8/9] test: add test of gradient --- tests/index.spec.js | 48 ++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 43 insertions(+), 5 deletions(-) diff --git a/tests/index.spec.js b/tests/index.spec.js index 7d97269..d94e6b6 100644 --- a/tests/index.spec.js +++ b/tests/index.spec.js @@ -3,6 +3,10 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { Line, Circle } from '../src'; +function getGradientIdFromDef(def) { + return def.firstElementChild.attributes.getNamedItem('id').value; +} + describe('Progress', () => { let div = null; beforeEach(() => { @@ -80,7 +84,7 @@ describe('Progress', () => { }); it('circle support gradient color', () => { - const circle = ReactDOM.render( + ReactDOM.render( { '0%': '#108ee9', '100%': '#87d068', }} - /> - , div); - expect(circle.props.percent).toBe(90); - }) + />, + div, + ); + + // Since it's the 7th circle. + expect(getGradientIdFromDef(div.querySelector('defs'))).toBe(`rc-progress-gradient-6`); + }); + + it('should circles have different gradient IDs', () => { + ReactDOM.render( + <> + + + , + div, + ); + + const gradientDefs = div.querySelectorAll('defs'); + const idFirst = getGradientIdFromDef(gradientDefs[0]); + const idSecond = getGradientIdFromDef(gradientDefs[1]); + expect(idFirst === idSecond).toBeFalsy(); + }); }); }); From 9a34d82b0d06a3e6d60f05d9266a9468e25b521d Mon Sep 17 00:00:00 2001 From: Wendell Date: Wed, 14 Aug 2019 14:42:17 +0800 Subject: [PATCH 9/9] fix test --- tests/index.spec.js | 23 ++++------------------- 1 file changed, 4 insertions(+), 19 deletions(-) diff --git a/tests/index.spec.js b/tests/index.spec.js index d94e6b6..7950839 100644 --- a/tests/index.spec.js +++ b/tests/index.spec.js @@ -83,25 +83,7 @@ describe('Progress', () => { expect(circle.state.percent).toBe('30'); }); - it('circle support gradient color', () => { - ReactDOM.render( - , - div, - ); - - // Since it's the 7th circle. - expect(getGradientIdFromDef(div.querySelector('defs'))).toBe(`rc-progress-gradient-6`); - }); - - it('should circles have different gradient IDs', () => { + it('should gradient works and circles have different gradient IDs', () => { ReactDOM.render( <> { const gradientDefs = div.querySelectorAll('defs'); const idFirst = getGradientIdFromDef(gradientDefs[0]); const idSecond = getGradientIdFromDef(gradientDefs[1]); + const idRE = /^rc-progress-gradient-\d{1,}$/; + expect(idFirst).toMatch(idRE); + expect(idSecond).toMatch(idRE); expect(idFirst === idSecond).toBeFalsy(); }); });