From 99d5001fe4ff4259475c2d994002df65feb764ad Mon Sep 17 00:00:00 2001 From: Kevin Qi Date: Sun, 21 Apr 2019 14:01:01 -0700 Subject: [PATCH] port demo from /docs to /demo, with some slight modifications (remove codesandbox iframe, etc) --- demo/public/index.html | 10 +-- demo/src/App.css | 24 +++++++ demo/src/App.tsx | 3 +- demo/src/ChangingProgressbar.tsx | 71 ++++++++++++++++++++ demo/src/Demo.tsx | 111 +++++++++++++++++++++++++++++++ src/index.tsx | 14 ++++ 6 files changed, 228 insertions(+), 5 deletions(-) create mode 100644 demo/src/ChangingProgressbar.tsx create mode 100644 demo/src/Demo.tsx diff --git a/demo/public/index.html b/demo/public/index.html index 75980d5..a42f91f 100644 --- a/demo/public/index.html +++ b/demo/public/index.html @@ -3,10 +3,7 @@ - + React App + + diff --git a/demo/src/App.css b/demo/src/App.css index 8b13789..8f33f5e 100644 --- a/demo/src/App.css +++ b/demo/src/App.css @@ -1 +1,25 @@ +.bg-yellow { + background-color: #f8e8d5; +} +/* bootstrap overrides */ +a { + color: #3e98c7; +} +a:hover { + text-decoration: none; +} + +/* demo style overrides */ +.CircularProgressbar.incomplete .CircularProgressbar-path { + stroke: #f66; +} +.CircularProgressbar.incomplete .CircularProgressbar-text { + fill: #f66; +} +.CircularProgressbar.complete .CircularProgressbar-path { + stroke: #99f; +} +.CircularProgressbar.complete .CircularProgressbar-text { + fill: #99f; +} diff --git a/demo/src/App.tsx b/demo/src/App.tsx index 777b685..86f1733 100644 --- a/demo/src/App.tsx +++ b/demo/src/App.tsx @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import CircularProgressbar from 'react-circular-progressbar'; +import Demo from './Demo'; // Stylesheets import 'react-circular-progressbar/dist/styles.css'; @@ -9,7 +10,7 @@ class App extends Component { render() { return (
- +
); } diff --git a/demo/src/ChangingProgressbar.tsx b/demo/src/ChangingProgressbar.tsx new file mode 100644 index 0000000..0964393 --- /dev/null +++ b/demo/src/ChangingProgressbar.tsx @@ -0,0 +1,71 @@ +import React from 'react'; +import CircularProgressbar from 'react-circular-progressbar'; + +type CircularProgressbarProps = { + counterClockwise?: boolean; + strokeWidth?: number; +}; + +type Props = CircularProgressbarProps & + typeof ChangingProgressbar.defaultProps & { + percentages: number[]; + classForPercentage?: (percentage: number) => string; + stylesForPercentage?: (percentage: number) => {}; + textForPercentage?: (percentage: number) => string; + }; + +type State = { + currentPercentageIndex: number; +}; + +class ChangingProgressbar extends React.Component { + static defaultProps = { + interval: 1000, + classForPercentage: (percentage: number) => '', + stylesForPercentage: (percentage: number) => ({}), + textForPercentage: (percentage: number) => `${percentage}%`, + }; + + state = { + currentPercentageIndex: 0, + }; + + componentDidMount() { + setInterval(() => { + this.setState({ + currentPercentageIndex: + (this.state.currentPercentageIndex + 1) % this.props.percentages.length, + }); + }, this.props.interval); + } + + getCurrentPercentage() { + return this.props.percentages[this.state.currentPercentageIndex]; + } + + getClassName() { + return this.props.classForPercentage(this.getCurrentPercentage()); + } + + getStyles(): any { + return this.props.stylesForPercentage(this.getCurrentPercentage()); + } + + getText() { + return this.props.textForPercentage(this.getCurrentPercentage()); + } + + render() { + return ( + + ); + } +} + +export default ChangingProgressbar; diff --git a/demo/src/Demo.tsx b/demo/src/Demo.tsx new file mode 100644 index 0000000..8b986db --- /dev/null +++ b/demo/src/Demo.tsx @@ -0,0 +1,111 @@ +import React from 'react'; +import CircularProgressbar from 'react-circular-progressbar'; +import ChangingProgressbar from './ChangingProgressbar'; + +const githubURL = 'https://github.com/kevinsqi/react-circular-progressbar'; + +const Example: React.FunctionComponent<{ description: string }> = ({ description, children }) => ( +
+
+
{children}
+
+

{description}

+
+); + +function Demo() { + return ( +
+
+
+
+

react-circular-progressbar

+

A circular progress indicator component

+
+
+
+ +
+
+ { + const alpha = (100 + percentage) / 200; + return { + path: { + stroke: `rgba(62, 152, 199, ${alpha})`, + }, + }; + }} + /> +
+
+ +
+
+
+

Built with SVG and styled with plain CSS.

+
+ + + { + return percentage === 100 ? 'complete' : 'incomplete'; + }} + textForPercentage={(percentage: number) => { + return percentage === 100 ? `${percentage}!!` : `${percentage}`; + }} + /> + + + + + + + + + + + +
+
+ +
+
+ doge +
+
+ +
+ +
+
+

Installation

+
+

Install with yarn or npm:

+

+ yarn add react-circular-progressbar +

+ + View docs on Github + +
+
+
+ Built by @kevinsqi +
+
+
+
+ ); +} + +export default Demo; diff --git a/src/index.tsx b/src/index.tsx index 23e5634..01d52ef 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -11,6 +11,20 @@ const CENTER_Y = 50; type CircularProgressbarProps = typeof CircularProgressbar.defaultProps & { percentage: number; + classes?: { + root?: string; + trail?: string; + path?: string; + text?: string; + background?: string; + }; + styles?: { + root?: object; + trail?: object; + path?: object; + text?: object; + background?: object; + }; }; type CircularProgressbarState = {