Merge pull request #19 from tnormington/feature/transition

Add transition props
cedricdelpoux · Apr 26, 2018 · 9992119 · 9992119
2 parents 0aaf431 + 6ffbc7f
commit 9992119
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -61,22 +61,24 @@ const MyCompo = () => (
 
 ### Props
 
-| Name           | PropType              | Description                                                                                                  | Default |
-| -------------- | --------------------- | ------------------------------------------------------------------------------------------------------------ | ------- |
-| data           | Array of data Objects | One data is {value: number (required), color: string, title: string, expanded: bool}                         | []      |
-| expandOnHover  | Boolean               | Active hover and touch (mobile) effetcs                                                                      | false   |
-| onSectorHover  | Function              | Callback when one sector is hovered or touched (mobile) - ex: `(data, index, event) => {}`                   | null    |
-| expandSize     | Number                | expand size, in pixels. Used if `expandOnHover` is active or one data has `expanded` attribute set to `true` |
-| strokeColor    | String                | Sector stroke color                                                                                          | "#fff"  |
-| strokeLinejoin | String                | Sector stroke line join (One of `miter`, `round`, `bevel`)                                                   | "round" |
-| strokeWidth    | Number                | Sector width, in pixels (0 to disable stroke)                                                                | 1       |
-| viewBoxSize    | Number                | SVG viewbox width and height                                                                                 | 100     |
+| Name                     | PropType              | Description                                                                                                  | Default    |
+| ------------------------ | --------------------- | ------------------------------------------------------------------------------------------------------------ | ---------- |
+| data                     | Array of data Objects | One data is {value: number (required), color: string, title: string, expanded: bool}                         | []         |
+| expandOnHover            | Boolean               | Active hover and touch (mobile) effetcs                                                                      | false      |
+| onSectorHover            | Function              | Callback when one sector is hovered or touched (mobile) - ex: `(data, index, event) => {}`                   | null       |
+| expandSize               | Number                | expand size, in pixels. Used if `expandOnHover` is active or one data has `expanded` attribute set to `true` |
+| strokeColor              | String                | Sector stroke color                                                                                          | "#fff"     |
+| strokeLinejoin           | String                | Sector stroke line join (One of `miter`, `round`, `bevel`)                                                   | "round"    |
+| strokeWidth              | Number                | Sector width, in pixels (0 to disable stroke)                                                                | 1          |
+| viewBoxSize              | Number                | SVG viewbox width and height                                                                                 | 100        |
+| transitionDuration       | String                | CSS property for transition-duration, set to `0s` to disable transition                                      | "0s"       |
+| transitionTimingFunction | String                | CSS Property for transition-timing-function                                                                  | "ease-out" |
 
 ## Contributing
 
-* ⇄ Pull/Merge requests and ★ Stars are always welcome.
-* For bugs and feature requests, please [create an issue][github-issue].
-* Pull requests must be accompanied by passing automated tests (`npm test`).
+*   ⇄ Pull/Merge requests and ★ Stars are always welcome.
+*   For bugs and feature requests, please [create an issue][github-issue].
+*   Pull requests must be accompanied by passing automated tests (`npm test`).
 
 See [CONTRIBUTING.md](./CONTRIBUTING.md) guidelines
 

diff --git a/src/Sector/index.js b/src/Sector/index.js
@@ -12,6 +12,8 @@ const Sector = ({
   onMouseLeave,
   path,
   title,
+  transitionDuration,
+  transitionTimingFunction,
 }) => {
   return (
     <path
@@ -24,6 +26,11 @@ const Sector = ({
       onTouchEnd={onTouchEnd}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
+      style={{
+        transitionProperty: "all",
+        transitionTimingFunction: transitionTimingFunction,
+        transitionDuration: transitionDuration,
+      }}
     >
       {title && <title>{title}</title>}
     </path>
@@ -41,13 +48,17 @@ Sector.propTypes = {
   strokeLinejoin: PropTypes.string,
   strokeWidth: PropTypes.number,
   title: PropTypes.string,
+  transitionDuration: PropTypes.string,
+  transitionTimingFunction: PropTypes.string,
 }
 
 Sector.defaultProps = {
   strokeColor: "#fff",
   strokeWidth: 1,
   strokeLinejoin: "round",
   title: null,
+  transitionDuration: "0s",
+  transitionTimingFunction: "ease-out",
 }
 
 export default Sector
diff --git a/src/index.js b/src/index.js
@@ -101,6 +101,8 @@ PieChart.propTypes = {
   strokeLinejoin: Sector.propTypes.strokeLinejoin,
   strokeWidth: Sector.propTypes.strokeWidth,
   viewBoxSize: PropTypes.number,
+  transitionDuration: Sector.propTypes.transitionDuration,
+  transitionTimingFunction: Sector.propTypes.transitionTimingFunction,
 }
 
 PieChart.defaultProps = {
@@ -113,6 +115,8 @@ PieChart.defaultProps = {
   strokeLinejoin: Sector.defaultProps.strokeLinejoin,
   strokeWidth: Sector.defaultProps.strokeWidth,
   viewBoxSize: 100,
+  transitionDuration: Sector.defaultProps.transitionDuration,
+  transitionTimingFunction: Sector.defaultProps.transitionTimingFunction,
 }
 
 export default PieChart