Added track width as optional props (#34)

Co-authored-by: Andreas Berg <[email protected]>
mnkhouri · Dec 1, 2023 · f8a4502 · f8a4502
1 parent e56e97f
commit f8a4502
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -25,6 +25,7 @@ export default () => {
   return (
     <CircularSlider
       size={200}
+      trackWidth={4}
       minValue={0}
       maxValue={100}
       startAngle={40}

diff --git a/docs-src/api.tsx b/docs-src/api.tsx
@@ -9,6 +9,13 @@ export const ApiDocs: React.FunctionComponent = () => {
       type: "number",
       description: "Width and height of slider",
     },
+    {
+      name: "trackWidth",
+      required: false,
+      default: "4",
+      type: "number",
+      description: "Width of the track",
+    },
     {
       name: "handle1",
       required: true,

diff --git a/package.json b/package.json
@@ -22,7 +22,8 @@
     "postpublish": "PACKAGE_VERSION=$(echo 'const p = require(\"./package.json\"); process.stdout.write(p.version)' | node) && git tag v$PACKAGE_VERSION && git push --tags",
     "test": "eslint src/** && prettier --check src/**",
     "build": "rm -rf ./dist ./docs && prettier --write src/** docs-src/** && webpack && tsc",
-    "watch-docs": "webpack serve"
+    "watch-docs": "webpack serve",
+    "prepare": "npm run build"
   },
   "repository": {
     "type": "git",

diff --git a/src/index.tsx b/src/index.tsx
@@ -10,6 +10,7 @@ import { arcPathWithRoundedEnds } from "./svgPaths";
 
 type Props = {
   size: number;
+  trackWidth: number;
   minValue: number;
   maxValue: number;
   startAngle: number; // 0 - 360 degrees
@@ -38,6 +39,7 @@ export class CircularSlider extends React.Component<
   static defaultProps: Pick<
     Props,
     | "size"
+    | "trackWidth"
     | "minValue"
     | "maxValue"
     | "startAngle"
@@ -47,6 +49,7 @@ export class CircularSlider extends React.Component<
     | "handleSize"
   > = {
     size: 200,
+    trackWidth: 4,
     minValue: 0,
     maxValue: 100,
     startAngle: 0,
@@ -185,6 +188,7 @@ export class CircularSlider extends React.Component<
   render() {
     const {
       size,
+      trackWidth,
       handle1,
       handle2,
       handleSize,
@@ -198,7 +202,6 @@ export class CircularSlider extends React.Component<
       arcBackgroundColor,
       outerShadow,
     } = this.props;
-    const trackWidth = 4;
     const shadowWidth = 20;
     const trackInnerRadius = size / 2 - trackWidth - shadowWidth;
     const handle1Angle = valueToAngle({