feat(component): progress添加circle类型

components/Progress/Progress.tsx

@@ -12,11 +12,27 @@ export interface IProgressProps extends IBaseComponent {
   /**
    * 进度条颜色
    */
-  barColor?: string;
+  strokeColor?: string;
   /**
    * 当前百分比
    */
   percent: number;
+  /**
+   * 进度条类型
+   */
+  type?: 'line' | 'circle';
+  /**
+   * 直径
+   */
+  diameter?: number;
+  /**
+   * 进度条宽度
+   */
+  strokeWidth?: number;
+  /**
+   * 内容模板
+   */
+  format?: (percent: number) => string;
 }
 
 export interface IProgressState {
@@ -27,25 +43,85 @@ export interface IProgressState {
  * **进度条**-展示当前操作流程进度。
  */
 export class Progress extends Component<IProgressProps, IProgressState> {
+  preCls = 'yoshino-progress';
+
   static defaultProps = {
     percent: 0,
+    type: 'line',
+    diameter: 120,
   };
 
+  getPercent = () => {
+    const { percent } = this.props;
+    if (percent < 0) {
+      return 0;
+    }
+    if (percent > 100) {
+      return 100;
+    }
+    return percent;
+  }
+
+  renderCircle = () => {
+    const { diameter, strokeWidth = 8,
+      strokeColor, bgColor, format } = this.props;
+    const percent = this.getPercent();
+    const o = diameter! / 2;
+    const r = (diameter! - strokeWidth!) / 2;
+    const strokeDashArray = 2 * Math.PI * r;
+    const strokeDashOffset = (strokeDashArray * (100 - percent)) / 100;
+
+    return (
+      <>
+        <svg className={`${this.preCls}-svg`} viewBox={`0 0 ${diameter} ${diameter}`}>
+        <circle cx={o} cy={o} r={r} fill='none' strokeWidth={strokeWidth} stroke={bgColor}/>
+        <circle
+          className={`${this.preCls}-svg-circle`}
+          cx={o}
+          cy={o}
+          r={r}
+          fill='none'
+          style={strokeColor ? {stroke: strokeColor} : {}}
+          stroke={strokeColor}
+          strokeWidth={strokeWidth}
+          strokeDasharray={strokeDashArray}
+          strokeDashoffset={strokeDashOffset}
+        />
+      </svg>
+      <span
+        className={`${this.preCls}-circle-value`}
+        style={{fontSize: (diameter as number) / 5}}
+      >
+        {format ? format(percent) : `${percent}%`}
+      </span>
+      </>
+    );
+  }
+
   render() {
-    const {className, style, percent, barColor, bgColor, ...otherProps} = this.props;
-    const preCls = 'yoshino-progress';
+    const {
+      className, style,
+      strokeColor, bgColor, type,
+      strokeWidth = 6, diameter,
+      ...otherProps} = this.props;
+    const preCls = this.preCls;
     const clsName = classNames(
-      preCls, className,
+      preCls, className, `${preCls}-${type}`
     );
     const bgColorStyle = bgColor ? {backgroundColor: bgColor} : {};
-    const barColorStyle = barColor ? {backgroundColor: barColor} : {};
+    const strokeColorStyle = strokeColor ? {backgroundColor: strokeColor} : {};
+    const circleStyle = type === 'circle' ? {width: diameter, height: diameter} : {};
+    const lineHeightStyle = type === 'line' ? {height: strokeWidth} : {};
+    const percent = this.getPercent();
+    delete otherProps.percent;
     return (
       <div
         className={clsName}
-        style={{...style, ...bgColorStyle}}
+        style={{...style, ...bgColorStyle, ...circleStyle, ...lineHeightStyle}}
         {...otherProps}
       >
-        <div className={`${preCls}-bar`} style={{width: `${percent}%`, ...barColorStyle}}/>
+        {type === 'line' ? <div className={`${preCls}-bar`} style={{width: `${percent}%`, ...strokeColorStyle}}/> : null}
+        {type === 'circle' ? this.renderCircle() : null}
       </div>
     );
   }

components/Progress/style/index.less

@@ -2,32 +2,61 @@
 
 @progress-prefix-cls:  ~"@{css-prefix}-progress";
 
-.@{progress-prefix-cls} {
+.@{progress-prefix-cls}-line {
   position: relative;
   width: 100%;
-  height: 8px;
   background-color: @color-unactive;
   border-radius: 100px;
 
-  &-bar {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    background-color: @primary-color;
-    border-radius: 100px;
-    transition: @transition-base;
-
-    &::before {
-      content: "";
-      opacity: 0;
+  .@{progress-prefix-cls} {
+    &-bar {
       position: absolute;
-      height: 100%;
-      top: 0;
       left: 0;
-      background: white;
+      top: 0;
+      height: 100%;
+      background-color: @primary-color;
       border-radius: 100px;
-      animation: progress-animation 1.5s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
+      transition: @transition-base;
+
+      &::before {
+        content: "";
+        opacity: 0;
+        position: absolute;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background: white;
+        border-radius: 100px;
+        animation: progress-animation 1.5s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
+      }
+    }
+  }
+}
+
+.@{progress-prefix-cls}-circle {
+  display: inline-block;
+  position: relative;
+
+  &-value {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    white-space: nowrap;
+  }
+
+  .@{progress-prefix-cls} {
+    &-svg {
+      transform: rotate(-90deg);
+      stroke: @color-unactive;
+      width: 100%;
+      height: 100%;
+
+      &-circle {
+        stroke: @primary-color;
+        transition: @transition-base;
+        border-radius: 100px;
+      }
     }
   }
 }

components/Progress/style/var.less

@@ -1,3 +1,6 @@
 @import '../../styles/var.less';
 @import '../../styles/common/reset.less';
 @import '../../styles/animation/progress.less';
+
+@progress-circle-radius: 60px;
+@progress-circle-value: 24px;

docs/pages/components/Progress/api.tsx

@@ -2,6 +2,12 @@ export default [
   {
     title: 'API',
     json: [
+      {
+        props: 'type',
+        intro: '进度条类型线性、圆形',
+        type: '`line` | `circle`',
+        defaultValue: 'line',
+      },
       {
         props: 'percent',
         intro: '当前百分比',
@@ -15,11 +21,35 @@ export default [
         defaultValue: '-',
       },
       {
-        props: 'barColor',
+        props: 'strokeColor',
         intro: '进度条颜色',
         type: 'string',
         defaultValue: '-',
       },
+      {
+        props: 'diameter',
+        intro: '圆形进度条直径',
+        type: 'number',
+        defaultValue: '120',
+      },
+      {
+        props: 'strokeWidth\r\n type=\'line\'',
+        intro: '进度条宽度',
+        type: 'number',
+        defaultValue: '6',
+      },
+      {
+        props: 'strokeWidth\r\n type=\'circle\'',
+        intro: '进度条宽度',
+        type: 'number',
+        defaultValue: '8',
+      },
+      {
+        props: 'format',
+        intro: '内容的模板函数',
+        type: '(percent: number) => string',
+        defaultValue: '-',
+      },
     ]
   }
 ];

docs/pages/components/Progress/demo/progressCircle.md

@@ -0,0 +1,2 @@
+#### 圆形进度条
+圆形进度的条，可以通过`format`指定进度值显示格式

docs/pages/components/Progress/demo/progressCircle.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Progress, Slider } from '@yoshino/components/';
+
+export default class App extends React.Component {
+  state = {
+    percent: 10,
+  };
+
+  render() {
+    const { percent } = this.state;
+    return (
+      <div>
+        <div>
+          <Progress type='circle' percent={percent} diameter={200} format={(v) => `${v} km/h`} />
+          <Progress type='circle' percent={percent} />
+          <Progress type='circle' percent={percent} diameter={80} strokeColor={`rgb(255, 85, 0)`} />
+        </div>
+        <div style={{width: 300}}>
+          <Slider max={100} min={0} value={percent} onChange={(v) => this.setState({percent: v})}/>
+        </div>
+      </div>
+    );
+  }
+}

docs/pages/components/Progress/demo/progressDemo.tsx

@@ -6,7 +6,7 @@ export default function() {
     <div>
       <div>
         <Progress percent={10} style={{margin: '10px 0'}}/>
-        <Progress percent={80} bgColor='#ccc' barColor='red'/>
+        <Progress percent={80} bgColor='#ccc' strokeColor='red'/>
       </div>
     </div>
   );

docs/pages/components/Progress/index.tsx

@@ -10,13 +10,19 @@ import ProgressDemo from './demo/progressDemo';
 import * as progressDemoMd from './demo/progressDemo.md';
 const progressDemoCode = require('!raw-loader!./demo/progressDemo');
 
+import ProgressCircle from './demo/progressCircle';
+import * as progressCircleMd from './demo/progressCircle.md';
+const progressCircleCode = require('!raw-loader!./demo/progressCircle');
+
 export default class ProgressPage extends Component {
   render() {
     return (
       <div>
         <Markdown text={md}/>
         <CodeBox text={progressDemoMd} demo={<ProgressDemo/>} code={progressDemoCode}/>
 
+        <CodeBox text={progressCircleMd} demo={<ProgressCircle/>} code={progressCircleCode}/>
+
         <ApiBox api={Api}/>
       </div>
     );

docs/pages/components/routes.tsx

@@ -178,7 +178,7 @@ export default [
   },
   {
     component: getComponentAsyncLoading(
-      () => import(/* webpackChunkName: "yoshino-progress" */ './progress')
+      () => import(/* webpackChunkName: "yoshino-progress" */ './Progress')
     ),
     path: '/docs/components/progress'
   },