实现半圆

.travis.yml

@@ -8,7 +8,7 @@ notifications:
   - afc163@gmail.com
 
 node_js:
-- 4.0.0
+- 6.0.0
 
 before_install:
 - |

HISTORY.md

@@ -2,6 +2,9 @@
 
 ---
 
+## 2.1.0
+- Add `gapWidth` `gapPosition` props.
+
 ## 2.0.0
 
 - refactor code

README.md

@@ -111,6 +111,24 @@ ReactDOM.render(<div>
       <td></td>
       <td>style object will be added to svg element</td>
     </tr>
+    <tr>
+      <td>percent</td>
+      <td>Number</td>
+      <td>0</td>
+      <td>the percent of the progress</td>
+    </tr>
+    <tr>
+      <td>gapWidth</td>
+      <td>Number</td>
+      <td>0</td>
+      <td>the gap width of half circle</td>
+    </tr>
+    <tr>
+      <td>gapPosition</td>
+      <td>String</td>
+      <td>top</td>
+      <td>the gap position, value: top, bottom, left, right. </td>
+    </tr>
   </tbody>
 </table>
 

examples/simple.js

@@ -13,8 +13,9 @@ const Example = React.createClass({
   },
   changeState() {
     const colorMap = ['#3FC7FA', '#85D262', '#FE8C6A'];
+    const value = parseInt(Math.random() * 100, 10);
     this.setState({
-      percent: parseInt(Math.random() * 100, 10),
+      percent: value,
       color: colorMap[parseInt(Math.random() * 3, 10)],
     });
   },
@@ -25,6 +26,7 @@ const Example = React.createClass({
     const circleContainerStyle = {
       width: '250px',
       height: '250px',
+      display: 'inline-block',
     };
     return (
       <div>
@@ -41,6 +43,45 @@ const Example = React.createClass({
             strokeColor={this.state.color}
           />
         </div>
+        <div style={circleContainerStyle}>
+          <Circle
+            percent={this.state.percent}
+            gapWidth={70}
+            strokeWidth="6"
+            strokeLinecap="square"
+            strokeColor={this.state.color}
+          />
+        </div>
+        <div style={circleContainerStyle}>
+          <Circle
+            percent={this.state.percent}
+            gapWidth={70}
+            strokeWidth="6"
+            strokeLinecap="square"
+            strokeColor={this.state.color}
+            gapPosition="bottom"
+          />
+        </div>
+        <div style={circleContainerStyle}>
+          <Circle
+            percent={this.state.percent}
+            gapWidth={70}
+            strokeWidth="6"
+            strokeLinecap="square"
+            strokeColor={this.state.color}
+            gapPosition="left"
+          />
+        </div>
+        <div style={circleContainerStyle}>
+          <Circle
+            percent={this.state.percent}
+            gapWidth={70}
+            strokeWidth="6"
+            strokeLinecap="square"
+            strokeColor={this.state.color}
+            gapPosition="right"
+          />
+        </div>
         <p>
           <button onClick={this.changeState}>Change State</button>
         </p>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-progress",
-  "version": "2.0.6",
+  "version": "2.1.0",
   "description": "progress ui component for react",
   "keywords": [
     "react",

src/Circle.js

@@ -1,27 +1,60 @@
 /* eslint-disable react/prop-types */
-import React from 'react';
+import React, { PropTypes } from 'react';
 import mixin from './mixin';
 
 export default React.createClass({
+  propTypes: {
+    gapPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  },
   mixins: [mixin],
+
   render() {
     const {
       prefixCls, strokeWidth, trailWidth, strokeColor,
       trailColor, strokeLinecap, percent, style, className,
+      gapWidth = 0, gapPosition,
       ...restProps,
     } = this.props;
 
     const radius = (50 - strokeWidth / 2);
-    const pathString = `M 50,50 m 0,-${radius}
-     a ${radius},${radius} 0 1 1 0,${2 * radius}
-     a ${radius},${radius} 0 1 1 0,-${2 * radius}`;
+    let beginPositionX = 0;
+    let beginPositionY = -radius;
+    let endPositionX = 0;
+    let endPositionY = -2 * radius;
+    switch (gapPosition) {
+      case 'left':
+        beginPositionX = -radius;
+        beginPositionY = 0;
+        endPositionX = 2 * radius;
+        endPositionY = 0;
+        break;
+      case 'right':
+        beginPositionX = radius;
+        beginPositionY = 0;
+        endPositionX = -2 * radius;
+        endPositionY = 0;
+        break;
+      case 'bottom':
+        beginPositionY = radius;
+        endPositionY = 2 * radius;
+        break;
+      default:
+    }
+    const pathString = `M 50,50 m ${beginPositionX},${beginPositionY}
+     a ${radius},${radius} 0 1 1 ${endPositionX},${-endPositionY}
+     a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}`;
     const len = Math.PI * 2 * radius;
-    const pathStyle = {
-      strokeDasharray: `${len}px ${len}px`,
-      strokeDashoffset: `${((100 - percent) / 100 * len)}px`,
+    const trailPathStyle = {
+      strokeDasharray: `${len - gapWidth}px ${len}px`,
+      strokeDashoffset: `-${gapWidth / 2}px`,
       transition: 'stroke-dashoffset 0.3s ease 0s, stroke 0.3s ease',
     };
 
+    const strokePathStyle = {
+      strokeDasharray: `${percent / 100 * (len - gapWidth)}px ${len}px`,
+      strokeDashoffset: `-${gapWidth / 2}px`,
+      transition: 'stroke-dashoffset 0.3s ease 0s, stroke 0.3s ease',
+    };
     return (
       <svg
         className={`${prefixCls}-circle ${className}`}
@@ -35,6 +68,7 @@ export default React.createClass({
           stroke={trailColor}
           strokeWidth={trailWidth || strokeWidth}
           fillOpacity="0"
+          style={trailPathStyle}
         />
         <path
           className={`${prefixCls}-circle-path`}
@@ -43,8 +77,10 @@ export default React.createClass({
           stroke={strokeColor}
           strokeWidth={strokeWidth}
           fillOpacity="0"
-          ref={(path) => { this.path = path; }}
-          style={pathStyle}
+          ref={(path) => {
+            this.path = path;
+          }}
+          style={strokePathStyle}
         />
       </svg>
     );

tests/index.js

@@ -23,3 +23,39 @@ describe('circle progress', () => {
     ReactDOM.unmountComponentAtNode(div);
   });
 });
+
+describe('half circle progress', () => {
+  it('work', () => {
+    const div = document.createElement(div);
+    document.body.appendChild(div);
+    const circle = ReactDOM.render(
+      <Circle percent="30" strokeWidth="1" gapWidth={70} gapPosition="bottom"/>,
+      div);
+    expect(circle.props.percent).to.be('30');
+    ReactDOM.unmountComponentAtNode(div);
+  });
+});
+
+describe('half circle progress', () => {
+  it('work', () => {
+    const div = document.createElement(div);
+    document.body.appendChild(div);
+    const circle = ReactDOM.render(
+      <Circle percent="30" strokeWidth="1" gapWidth={70} gapPosition="left"/>,
+      div);
+    expect(circle.props.percent).to.be('30');
+    ReactDOM.unmountComponentAtNode(div);
+  });
+});
+
+describe('half circle progress', () => {
+  it('work', () => {
+    const div = document.createElement(div);
+    document.body.appendChild(div);
+    const circle = ReactDOM.render(
+      <Circle percent="30" strokeWidth="1" gapWidth={70} gapPosition="right"/>,
+      div);
+    expect(circle.props.percent).to.be('30');
+    ReactDOM.unmountComponentAtNode(div);
+  });
+});