Adds support for changing direction of progressbar

Adds a 'direction' prop, that allows you to control the direction of the progressbar being draw. Default is 'right', meaning it draws from left to right.
ThomasBem · Apr 4, 2018 · 6527793 · 6527793
1 parent 3a73055
commit 6527793
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -3,6 +3,7 @@
 > Progress bar component in the shape of a semicircle - [Try it out!](https://thomasbem.github.io/react-progressbar-semicircle/)
 
 [![NPM](https://img.shields.io/npm/v/react-progressbar-semicircle.svg)](https://www.npmjs.com/package/react-progressbar-semicircle) ![GZip Size](http://img.badgesize.io/https://unpkg.com/react-progressbar-semicircle/dist/index.js?compression=gzip&label=gzip%20size)
+
 ## Install
 
 ```bash
@@ -34,6 +35,7 @@ class Example extends Component {
 | background       | Background color for the progress bar                         | string  | false    | ![#D0D0CE](https://placehold.it/15/D0D0CE/000000?text=+) `#D0D0CE` |
 | diameter         | Diameter of the semicircle                                    | number  | false    | `200`                                                              |
 | orientation      | Orientation of the semicircle. Supports `'up'` and `'down'`   | string  | false    | `'up'`                                                             |
+| direction        | Direction of the progressbar. Supports `'left'` and `'right'` | string  | false    | `'right'`                                                          |
 | percentage       | Percentage to be drawn on the bar                             | number  | true     |
 | showPercentValue | Show percentage value as a number in the middle of semicircle | boolean | false    | `false`                                                            |
 

diff --git a/example/src/App.js b/example/src/App.js
@@ -16,6 +16,7 @@ export default class App extends Component {
       background: "#D0D0CE",
       diameter: 300,
       orientation: "up",
+      direction: "right",
       showPercentValue: true,
       percentage: 75
     };
@@ -34,6 +35,13 @@ export default class App extends Component {
       this.setState({ orientation: "up" });
     }
   };
+  handleDirectionToggle = event => {
+    if (event.target.checked) {
+      this.setState({ direction: "left" });
+    } else {
+      this.setState({ direction: "right" });
+    }
+  };
 
   render() {
     return (
@@ -45,6 +53,7 @@ export default class App extends Component {
             background={this.state.background}
             diameter={this.state.diameter}
             orientation={this.state.orientation}
+            direction={this.state.direction}
             showPercentValue={this.state.showPercentValue}
             percentage={this.state.percentage}
           />
@@ -102,6 +111,13 @@ export default class App extends Component {
             />
             <span>Flip progress bar</span>
           </div>
+          <div className="direction-toggle">
+            <Toggle
+              defaultChecked={false}
+              onChange={event => this.handleDirectionToggle(event)}
+            />
+            <span>Switch direction</span>
+          </div>
         </div>
       </div>
     );

diff --git a/example/src/index.css b/example/src/index.css
@@ -52,7 +52,16 @@
 .orientation-toggle {
   display: flex;
   align-items: center;
+  margin-bottom: 10px;
 }
 .orientation-toggle span {
   margin-left: 10px;
 }
+
+.direction-toggle {
+  display: flex;
+  align-items: center;
+}
+.direction-toggle span {
+  margin-left: 10px;
+}
diff --git a/src/index.js b/src/index.js
@@ -7,16 +7,28 @@ const SemiCircleProgress = ({
   background = "#D0D0CE",
   diameter = 200,
   orientation = "up",
+  direction = "right",
   showPercentValue = false,
   percentage
 }) => {
   const coordinateForCircle = diameter / 2;
   const radius = (diameter - 2 * strokeWidth) / 2;
   const circumference = Math.PI * radius;
-  const rotation =
-    orientation === "down" ? "rotate(180deg)" : "rotateY(180deg)";
   const semiCirclePercentage = percentage * (circumference / 100);
 
+  let rotation;
+  if (orientation === "down") {
+    if (direction === "left") {
+      rotation = "rotate(180deg) rotateY(180deg)";
+    } else {
+      rotation = "rotate(180deg)";
+    }
+  } else {
+    if (direction === "right") {
+      rotation = "rotateY(180deg)";
+    }
+  }
+
   return (
     <div className="semicircle-container" style={{ position: "relative" }}>
       <svg
@@ -75,6 +87,7 @@ SemiCircleProgress.propTypes = {
   background: PropTypes.string,
   diameter: PropTypes.number,
   orientation: PropTypes.string,
+  direction: PropTypes.string,
   showPercentValue: PropTypes.bool,
   percentage: PropTypes.number
 };