refactor progress

react-component · May 13, 2020 · 9e6160f · 9e6160f
1 parent ce8124e
commit 9e6160f
Show file tree

Hide file tree

Showing 9 changed files with 236 additions and 319 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -2,6 +2,10 @@
 
 ---
 
+## 2.6.0
+
+- Refactor to hooks.
+
 ## 2.5.0
 
 - Progress.Circle supports gradient color now. #73

diff --git a/README.md b/README.md
@@ -12,8 +12,10 @@ Progress Bar.
 
 [npm-image]: http://img.shields.io/npm/v/rc-progress.svg?style=flat-square
 [npm-url]: http://npmjs.org/package/rc-progress
-[travis-image]: https://img.shields.io/travis/react-component/progress.svg?style=flat-square
+[travis-image]: https://img.shields.io/travis/react-component/progress/master?style=flat-square
 [travis-url]: https://travis-ci.org/react-component/progress
+[circleci-image]: https://img.shields.io/circleci/react-component/progress/master?style=flat-square
+[circleci-url]: https://circleci.com/gh/react-component/progress
 [coveralls-image]: https://img.shields.io/coveralls/react-component/progress.svg?style=flat-square
 [coveralls-url]: https://coveralls.io/r/react-component/progress?branch=master
 [david-url]: https://david-dm.org/react-component/progress
@@ -43,15 +45,23 @@ http://react-component.github.io/progress/
 
 ## Usage
 
-```jsx
+```js
 import { Line, Circle } from 'rc-progress';
 
-ReactDOM.render(<div>
-  <Line percent="10" strokeWidth="4" strokeColor="#D3D3D3" />
-  <Circle percent="10" strokeWidth="4" strokeColor="#D3D3D3" />
-</div>, container);
+export default () => (
+  <>
+     <Line percent="10" strokeWidth="4" strokeColor="#D3D3D3" />
+     <Circle percent="10" strokeWidth="4" strokeColor="#D3D3D3" /> 
+  </>
+);
 ```
 
+## Compatibility
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
+| --- | --- | --- | --- | --- |
+| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+
 ## API
 
 ### props

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-progress",
-  "version": "2.5.3",
+  "version": "2.6.0",
   "description": "progress ui component for react",
   "keywords": [
     "react",
@@ -9,15 +9,14 @@
     "progress"
   ],
   "homepage": "http://github.com/react-component/progress",
-  "author": "[email protected]",
   "repository": {
     "type": "git",
     "url": "[email protected]:react-component/progress.git"
   },
   "bugs": {
     "url": "http://github.com/react-component/progress/issues"
   },
-  "licenses": "MIT",
+  "license": "MIT",
   "main": "lib/index",
   "module": "es/index",
   "types": "./typings/index.d.ts",
@@ -42,8 +41,8 @@
     "build": "rc-tools run build",
     "gh-pages": "rc-tools run gh-pages",
     "start": "rc-tools run server",
-    "compile": "rc-tools run compile --babel-runtime",
-    "pub": "rc-tools run pub --babel-runtime",
+    "compile": "rc-tools run compile",
+    "pub": "rc-tools run pub",
     "lint": "rc-tools run lint",
     "lint:fix": "rc-tools run lint --fix",
     "prettier": "rc-tools run prettier",
@@ -69,7 +68,6 @@
     ]
   },
   "dependencies": {
-    "babel-runtime": "6.x",
-    "prop-types": "^15.5.8"
+    "classnames": "^2.2.6"
   }
 }
diff --git a/src/Circle.js b/src/Circle.js
@@ -1,8 +1,7 @@
 /* eslint react/prop-types: 0 */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import enhancer from './enhancer';
-import { propTypes, defaultProps } from './types';
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { useTransitionDuration, defaultProps } from './common';
 
 let gradientSeed = 0;
 
@@ -58,142 +57,105 @@ function getPathStyles(offset, percent, strokeColor, strokeWidth, gapDegree = 0,
   };
 }
 
-class Circle extends Component {
-  paths = {};
-
-  gradientId = 0;
-
-  constructor() {
-    super();
-    this.gradientId = gradientSeed;
+const Circle = ({
+  prefixCls,
+  strokeWidth,
+  trailWidth,
+  gapDegree,
+  gapPosition,
+  trailColor,
+  strokeLinecap,
+  style,
+  className,
+  strokeColor,
+  percent,
+  ...restProps
+}) => {
+  const gradientId = useMemo(() => {
     gradientSeed += 1;
-  }
-
-  getStokeList() {
-    const {
-      prefixCls,
-      percent,
-      strokeColor,
-      strokeWidth,
-      strokeLinecap,
-      gapDegree,
-      gapPosition,
-    } = this.props;
-    const percentList = toArray(percent);
-    const strokeColorList = toArray(strokeColor);
-
+    return gradientSeed;
+  }, []);
+  const { pathString, pathStyle } = getPathStyles(
+    0,
+    100,
+    trailColor,
+    strokeWidth,
+    gapDegree,
+    gapPosition,
+  );
+  const percentList = toArray(percent);
+  const strokeColorList = toArray(strokeColor);
+  const gradient = strokeColorList.find(
+    color => Object.prototype.toString.call(color) === '[object Object]',
+  );
+
+  const [paths] = useTransitionDuration(percentList);
+
+  const getStokeList = () => {
     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(#${prefixCls}-gradient-${this.gradientId})`
+          ? `url(#${prefixCls}-gradient-${gradientId})`
           : '';
-      const { pathString, pathStyle } = getPathStyles(
-        stackPtg,
-        ptg,
-        color,
-        strokeWidth,
-        gapDegree,
-        gapPosition,
-      );
-
+      const pathStyles = getPathStyles(stackPtg, ptg, color, strokeWidth, gapDegree, gapPosition);
       stackPtg += ptg;
-
       return (
         <path
           key={index}
           className={`${prefixCls}-circle-path`}
-          d={pathString}
+          d={pathStyles.pathString}
           stroke={stroke}
           strokeLinecap={strokeLinecap}
           strokeWidth={strokeWidth}
           opacity={ptg === 0 ? 0 : 1}
           fillOpacity="0"
-          style={pathStyle}
-          ref={path => {
-            this.paths[index] = path;
-          }}
+          style={pathStyles.pathStyle}
+          ref={paths[index]}
         />
       );
     });
-  }
-
-  render() {
-    const {
-      prefixCls,
-      strokeWidth,
-      trailWidth,
-      gapDegree,
-      gapPosition,
-      trailColor,
-      strokeLinecap,
-      style,
-      className,
-      strokeColor,
-      ...restProps
-    } = this.props;
-    const { pathString, pathStyle } = getPathStyles(
-      0,
-      100,
-      trailColor,
-      strokeWidth,
-      gapDegree,
-      gapPosition,
-    );
-    delete restProps.percent;
-    const strokeColorList = toArray(strokeColor);
-    const gradient = strokeColorList.find(
-      color => Object.prototype.toString.call(color) === '[object Object]',
-    );
-
-    return (
-      <svg
-        className={`${prefixCls}-circle ${className}`}
-        viewBox="0 0 100 100"
-        style={style}
-        {...restProps}
-      >
-        {gradient && (
-          <defs>
-            <linearGradient
-              id={`${prefixCls}-gradient-${this.gradientId}`}
-              x1="100%"
-              y1="0%"
-              x2="0%"
-              y2="0%"
-            >
-              {Object.keys(gradient)
-                .sort((a, b) => stripPercentToNumber(a) - stripPercentToNumber(b))
-                .map((key, index) => (
-                  <stop key={index} offset={key} stopColor={gradient[key]} />
-                ))}
-            </linearGradient>
-          </defs>
-        )}
-        <path
-          className={`${prefixCls}-circle-trail`}
-          d={pathString}
-          stroke={trailColor}
-          strokeLinecap={strokeLinecap}
-          strokeWidth={trailWidth || strokeWidth}
-          fillOpacity="0"
-          style={pathStyle}
-        />
-        {this.getStokeList().reverse()}
-      </svg>
-    );
-  }
-}
+  };
 
-Circle.propTypes = {
-  ...propTypes,
-  gapPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  return (
+    <svg
+      className={classNames(`${prefixCls}-circle`, className)}
+      viewBox="0 0 100 100"
+      style={style}
+      {...restProps}
+    >
+      {gradient && (
+        <defs>
+          <linearGradient
+            id={`${prefixCls}-gradient-${gradientId}`}
+            x1="100%"
+            y1="0%"
+            x2="0%"
+            y2="0%"
+          >
+            {Object.keys(gradient)
+              .sort((a, b) => stripPercentToNumber(a) - stripPercentToNumber(b))
+              .map((key, index) => (
+                <stop key={index} offset={key} stopColor={gradient[key]} />
+              ))}
+          </linearGradient>
+        </defs>
+      )}
+      <path
+        className={`${prefixCls}-circle-trail`}
+        d={pathString}
+        stroke={trailColor}
+        strokeLinecap={strokeLinecap}
+        strokeWidth={trailWidth || strokeWidth}
+        fillOpacity="0"
+        style={pathStyle}
+      />
+      {getStokeList().reverse()}
+    </svg>
+  );
 };
 
-Circle.defaultProps = {
-  ...defaultProps,
-  gapPosition: 'top',
-};
+Circle.defaultProps = defaultProps;
 
-export default enhancer(Circle);
+export default Circle;