From 9da84faeab713aa2adc6e3ffeb831b4b06ae0b7f Mon Sep 17 00:00:00 2001 From: Song Date: Mon, 13 May 2024 21:59:33 +0800 Subject: [PATCH 1/2] fix safari zoom issue --- .gitignore | 2 +- dist/CircularProgressbar.d.ts | 10 ++ dist/CircularProgressbarWithChildren.d.ts | 7 + dist/Path.d.ts | 10 ++ dist/buildStyles.d.ts | 12 ++ dist/constants.d.ts | 5 + dist/index.d.ts | 4 + dist/index.esm.js | 195 +++++++++++++++++++++ dist/index.esm.js.map | 1 + dist/index.js | 201 ++++++++++++++++++++++ dist/index.js.map | 1 + dist/styles.css | 66 +++++++ dist/types.d.ts | 50 ++++++ src/Path.tsx | 4 +- 14 files changed, 565 insertions(+), 3 deletions(-) create mode 100644 dist/CircularProgressbar.d.ts create mode 100644 dist/CircularProgressbarWithChildren.d.ts create mode 100644 dist/Path.d.ts create mode 100644 dist/buildStyles.d.ts create mode 100644 dist/constants.d.ts create mode 100644 dist/index.d.ts create mode 100644 dist/index.esm.js create mode 100644 dist/index.esm.js.map create mode 100644 dist/index.js create mode 100644 dist/index.js.map create mode 100644 dist/styles.css create mode 100644 dist/types.d.ts diff --git a/.gitignore b/.gitignore index 447ea93..540cbc2 100644 --- a/.gitignore +++ b/.gitignore @@ -2,7 +2,7 @@ /node_modules # distribution folder -/dist +# /dist # coverage /coverage diff --git a/dist/CircularProgressbar.d.ts b/dist/CircularProgressbar.d.ts new file mode 100644 index 0000000..f1fbc0c --- /dev/null +++ b/dist/CircularProgressbar.d.ts @@ -0,0 +1,10 @@ +import * as React from 'react'; +import { CircularProgressbarDefaultProps, CircularProgressbarProps } from './types'; +declare class CircularProgressbar extends React.Component { + static defaultProps: CircularProgressbarDefaultProps; + getBackgroundPadding(): number; + getPathRadius(): number; + getPathRatio(): number; + render(): JSX.Element; +} +export default CircularProgressbar; diff --git a/dist/CircularProgressbarWithChildren.d.ts b/dist/CircularProgressbarWithChildren.d.ts new file mode 100644 index 0000000..9d7bded --- /dev/null +++ b/dist/CircularProgressbarWithChildren.d.ts @@ -0,0 +1,7 @@ +import * as React from 'react'; +import { CircularProgressbarWrapperProps } from './types'; +declare type CircularProgressbarWithChildrenProps = CircularProgressbarWrapperProps & { + children?: React.ReactNode; +}; +declare function CircularProgressbarWithChildren(props: CircularProgressbarWithChildrenProps): JSX.Element; +export default CircularProgressbarWithChildren; diff --git a/dist/Path.d.ts b/dist/Path.d.ts new file mode 100644 index 0000000..a87dbfb --- /dev/null +++ b/dist/Path.d.ts @@ -0,0 +1,10 @@ +/// +declare function Path({ className, counterClockwise, dashRatio, pathRadius, strokeWidth, style, }: { + className?: string; + counterClockwise: boolean; + dashRatio: number; + pathRadius: number; + strokeWidth: number; + style?: object; +}): JSX.Element; +export default Path; diff --git a/dist/buildStyles.d.ts b/dist/buildStyles.d.ts new file mode 100644 index 0000000..6892aee --- /dev/null +++ b/dist/buildStyles.d.ts @@ -0,0 +1,12 @@ +import { CircularProgressbarStyles } from './types'; +export default function buildStyles({ rotation, strokeLinecap, textColor, textSize, pathColor, pathTransition, pathTransitionDuration, trailColor, backgroundColor, }: { + rotation?: number; + strokeLinecap?: any; + textColor?: string; + textSize?: string | number; + pathColor?: string; + pathTransition?: string; + pathTransitionDuration?: number; + trailColor?: string; + backgroundColor?: string; +}): CircularProgressbarStyles; diff --git a/dist/constants.d.ts b/dist/constants.d.ts new file mode 100644 index 0000000..2967a6a --- /dev/null +++ b/dist/constants.d.ts @@ -0,0 +1,5 @@ +export declare const VIEWBOX_WIDTH = 100; +export declare const VIEWBOX_HEIGHT = 100; +export declare const VIEWBOX_HEIGHT_HALF = 50; +export declare const VIEWBOX_CENTER_X = 50; +export declare const VIEWBOX_CENTER_Y = 50; diff --git a/dist/index.d.ts b/dist/index.d.ts new file mode 100644 index 0000000..675389f --- /dev/null +++ b/dist/index.d.ts @@ -0,0 +1,4 @@ +import CircularProgressbar from './CircularProgressbar'; +import CircularProgressbarWithChildren from './CircularProgressbarWithChildren'; +import buildStyles from './buildStyles'; +export { CircularProgressbar, CircularProgressbarWithChildren, buildStyles }; diff --git a/dist/index.esm.js b/dist/index.esm.js new file mode 100644 index 0000000..a3fd886 --- /dev/null +++ b/dist/index.esm.js @@ -0,0 +1,195 @@ +import { createElement, Component } from 'react'; + +/*! ***************************************************************************** +Copyright (c) Microsoft Corporation. All rights reserved. +Licensed under the Apache License, Version 2.0 (the "License"); you may not use +this file except in compliance with the License. You may obtain a copy of the +License at http://www.apache.org/licenses/LICENSE-2.0 + +THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED +WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, +MERCHANTABLITY OR NON-INFRINGEMENT. + +See the Apache Version 2.0 License for specific language governing permissions +and limitations under the License. +***************************************************************************** */ +/* global Reflect, Promise */ + +var extendStatics = function(d, b) { + extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; + return extendStatics(d, b); +}; + +function __extends(d, b) { + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +} + +var __assign = function() { + __assign = Object.assign || function __assign(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; + +function __rest(s, e) { + var t = {}; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) + t[p] = s[p]; + if (s != null && typeof Object.getOwnPropertySymbols === "function") + for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0) + t[p[i]] = s[p[i]]; + return t; +} + +var VIEWBOX_WIDTH = 100; +var VIEWBOX_HEIGHT = 100; +var VIEWBOX_HEIGHT_HALF = 50; +var VIEWBOX_CENTER_X = 50; +var VIEWBOX_CENTER_Y = 50; + +function Path(_a) { + var className = _a.className, counterClockwise = _a.counterClockwise, dashRatio = _a.dashRatio, pathRadius = _a.pathRadius, strokeWidth = _a.strokeWidth, style = _a.style; + return (createElement("path", { className: className, style: Object.assign({}, style, getDashStyle({ pathRadius: pathRadius, dashRatio: dashRatio, counterClockwise: counterClockwise })), d: getPathDescription({ + pathRadius: pathRadius, + counterClockwise: counterClockwise, + }), strokeWidth: strokeWidth, fillOpacity: 0 })); +} +function getPathDescription(_a) { + var pathRadius = _a.pathRadius, counterClockwise = _a.counterClockwise; + var radius = pathRadius; + var rotation = counterClockwise ? 1 : 0; + return "\n M " + VIEWBOX_CENTER_X + "," + VIEWBOX_CENTER_Y + "\n m 0,-" + radius + "\n a " + radius + "," + radius + " " + rotation + " 1 1 0," + 2 * radius + "\n a " + radius + "," + radius + " " + rotation + " 1 1 0,-" + 2 * radius + "\n "; +} +function getDashStyle(_a) { + var counterClockwise = _a.counterClockwise, dashRatio = _a.dashRatio, pathRadius = _a.pathRadius; + var diameter = Math.PI * 2 * pathRadius; + var gapLength = (1 - dashRatio) * diameter; + return { + strokeDasharray: diameter, + strokeDashoffset: counterClockwise ? -gapLength : gapLength, + }; +} + +var CircularProgressbar = (function (_super) { + __extends(CircularProgressbar, _super); + function CircularProgressbar() { + return _super !== null && _super.apply(this, arguments) || this; + } + CircularProgressbar.prototype.getBackgroundPadding = function () { + if (!this.props.background) { + return 0; + } + return this.props.backgroundPadding; + }; + CircularProgressbar.prototype.getPathRadius = function () { + return VIEWBOX_HEIGHT_HALF - this.props.strokeWidth / 2 - this.getBackgroundPadding(); + }; + CircularProgressbar.prototype.getPathRatio = function () { + var _a = this.props, value = _a.value, minValue = _a.minValue, maxValue = _a.maxValue; + var boundedValue = Math.min(Math.max(value, minValue), maxValue); + return (boundedValue - minValue) / (maxValue - minValue); + }; + CircularProgressbar.prototype.render = function () { + var _a = this.props, circleRatio = _a.circleRatio, className = _a.className, classes = _a.classes, counterClockwise = _a.counterClockwise, styles = _a.styles, strokeWidth = _a.strokeWidth, text = _a.text; + var pathRadius = this.getPathRadius(); + var pathRatio = this.getPathRatio(); + return (createElement("svg", { className: classes.root + " " + className, style: styles.root, viewBox: "0 0 " + VIEWBOX_WIDTH + " " + VIEWBOX_HEIGHT, "data-test-id": "CircularProgressbar" }, + this.props.background ? (createElement("circle", { className: classes.background, style: styles.background, cx: VIEWBOX_CENTER_X, cy: VIEWBOX_CENTER_Y, r: VIEWBOX_HEIGHT_HALF })) : null, + createElement(Path, { className: classes.trail, counterClockwise: counterClockwise, dashRatio: circleRatio, pathRadius: pathRadius, strokeWidth: strokeWidth, style: styles.trail }), + createElement(Path, { className: classes.path, counterClockwise: counterClockwise, dashRatio: pathRatio * circleRatio, pathRadius: pathRadius, strokeWidth: strokeWidth, style: styles.path }), + text ? (createElement("text", { className: classes.text, style: styles.text, x: VIEWBOX_CENTER_X, y: VIEWBOX_CENTER_Y }, text)) : null)); + }; + CircularProgressbar.defaultProps = { + background: false, + backgroundPadding: 0, + circleRatio: 1, + classes: { + root: 'CircularProgressbar', + trail: 'CircularProgressbar-trail', + path: 'CircularProgressbar-path', + text: 'CircularProgressbar-text', + background: 'CircularProgressbar-background', + }, + counterClockwise: false, + className: '', + maxValue: 100, + minValue: 0, + strokeWidth: 8, + styles: { + root: {}, + trail: {}, + path: {}, + text: {}, + background: {}, + }, + text: '', + }; + return CircularProgressbar; +}(Component)); + +function CircularProgressbarWithChildren(props) { + var children = props.children, circularProgressbarProps = __rest(props, ["children"]); + return (createElement("div", { "data-test-id": "CircularProgressbarWithChildren" }, + createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } }, + createElement(CircularProgressbar, __assign({}, circularProgressbarProps)), + props.children ? (createElement("div", { "data-test-id": "CircularProgressbarWithChildren__children", style: { + position: 'absolute', + width: '100%', + height: '100%', + marginTop: '-100%', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + } }, props.children)) : null))); +} + +function buildStyles(_a) { + var rotation = _a.rotation, strokeLinecap = _a.strokeLinecap, textColor = _a.textColor, textSize = _a.textSize, pathColor = _a.pathColor, pathTransition = _a.pathTransition, pathTransitionDuration = _a.pathTransitionDuration, trailColor = _a.trailColor, backgroundColor = _a.backgroundColor; + var rotationTransform = rotation == null ? undefined : "rotate(" + rotation + "turn)"; + var rotationTransformOrigin = rotation == null ? undefined : 'center center'; + return { + root: {}, + path: removeUndefinedValues({ + stroke: pathColor, + strokeLinecap: strokeLinecap, + transform: rotationTransform, + transformOrigin: rotationTransformOrigin, + transition: pathTransition, + transitionDuration: pathTransitionDuration == null ? undefined : pathTransitionDuration + "s", + }), + trail: removeUndefinedValues({ + stroke: trailColor, + strokeLinecap: strokeLinecap, + transform: rotationTransform, + transformOrigin: rotationTransformOrigin, + }), + text: removeUndefinedValues({ + fill: textColor, + fontSize: textSize, + }), + background: removeUndefinedValues({ + fill: backgroundColor, + }), + }; +} +function removeUndefinedValues(obj) { + Object.keys(obj).forEach(function (key) { + if (obj[key] == null) { + delete obj[key]; + } + }); + return obj; +} + +export { CircularProgressbar, CircularProgressbarWithChildren, buildStyles }; +//# sourceMappingURL=index.esm.js.map diff --git a/dist/index.esm.js.map b/dist/index.esm.js.map new file mode 100644 index 0000000..effa439 --- /dev/null +++ b/dist/index.esm.js.map @@ -0,0 +1 @@ +{"version":3,"file":"index.esm.js","sources":["../src/constants.ts","../src/Path.tsx","../src/CircularProgressbar.tsx","../src/CircularProgressbarWithChildren.tsx","../src/buildStyles.ts"],"sourcesContent":["export const VIEWBOX_WIDTH = 100;\nexport const VIEWBOX_HEIGHT = 100;\nexport const VIEWBOX_HEIGHT_HALF = 50;\nexport const VIEWBOX_CENTER_X = 50;\nexport const VIEWBOX_CENTER_Y = 50;\n","import * as React from 'react';\nimport { VIEWBOX_CENTER_X, VIEWBOX_CENTER_Y } from './constants';\n\nfunction Path({\n className,\n counterClockwise,\n dashRatio,\n pathRadius,\n strokeWidth,\n style,\n}: {\n className?: string;\n counterClockwise: boolean;\n dashRatio: number;\n pathRadius: number;\n strokeWidth: number;\n style?: object;\n}) {\n return (\n \n );\n}\n\n// SVG path description specifies how the path should be drawn\nfunction getPathDescription({\n pathRadius,\n counterClockwise,\n}: {\n pathRadius: number;\n counterClockwise: boolean;\n}) {\n const radius = pathRadius;\n const rotation = counterClockwise ? 1 : 0;\n\n // Move to center of canvas\n // Relative move to top canvas\n // Relative arc to bottom of canvas\n // Relative arc to top of canvas\n return `\n M ${VIEWBOX_CENTER_X},${VIEWBOX_CENTER_Y}\n m 0,-${radius}\n a ${radius},${radius} ${rotation} 1 1 0,${2 * radius}\n a ${radius},${radius} ${rotation} 1 1 0,-${2 * radius}\n `;\n}\n\nfunction getDashStyle({\n counterClockwise,\n dashRatio,\n pathRadius,\n}: {\n counterClockwise: boolean;\n dashRatio: number;\n pathRadius: number;\n}) {\n const diameter = Math.PI * 2 * pathRadius;\n const gapLength = (1 - dashRatio) * diameter;\n\n return {\n // Have dash be full diameter, and gap be full diameter\n strokeDasharray: diameter,\n // Shift dash backward by gapLength, so gap starts appearing at correct distance\n strokeDashoffset: counterClockwise ? -gapLength : gapLength,\n };\n}\n\nexport default Path;\n","import * as React from 'react';\n\nimport {\n VIEWBOX_WIDTH,\n VIEWBOX_HEIGHT,\n VIEWBOX_HEIGHT_HALF,\n VIEWBOX_CENTER_X,\n VIEWBOX_CENTER_Y,\n} from './constants';\nimport Path from './Path';\nimport { CircularProgressbarDefaultProps, CircularProgressbarProps } from './types';\n\nclass CircularProgressbar extends React.Component {\n static defaultProps: CircularProgressbarDefaultProps = {\n background: false,\n backgroundPadding: 0,\n circleRatio: 1,\n classes: {\n root: 'CircularProgressbar',\n trail: 'CircularProgressbar-trail',\n path: 'CircularProgressbar-path',\n text: 'CircularProgressbar-text',\n background: 'CircularProgressbar-background',\n },\n counterClockwise: false,\n className: '',\n maxValue: 100,\n minValue: 0,\n strokeWidth: 8,\n styles: {\n root: {},\n trail: {},\n path: {},\n text: {},\n background: {},\n },\n text: '',\n };\n\n getBackgroundPadding() {\n if (!this.props.background) {\n // Don't add padding if not displaying background\n return 0;\n }\n return this.props.backgroundPadding;\n }\n\n getPathRadius() {\n // The radius of the path is defined to be in the middle, so in order for the path to\n // fit perfectly inside the 100x100 viewBox, need to subtract half the strokeWidth\n return VIEWBOX_HEIGHT_HALF - this.props.strokeWidth / 2 - this.getBackgroundPadding();\n }\n\n // Ratio of path length to trail length, as a value between 0 and 1\n getPathRatio() {\n const { value, minValue, maxValue } = this.props;\n const boundedValue = Math.min(Math.max(value, minValue), maxValue);\n return (boundedValue - minValue) / (maxValue - minValue);\n }\n\n render() {\n const {\n circleRatio,\n className,\n classes,\n counterClockwise,\n styles,\n strokeWidth,\n text,\n } = this.props;\n\n const pathRadius = this.getPathRadius();\n const pathRatio = this.getPathRatio();\n\n return (\n \n {this.props.background ? (\n \n ) : null}\n\n \n\n \n\n {text ? (\n \n {text}\n \n ) : null}\n \n );\n }\n}\n\nexport default CircularProgressbar;\n","import * as React from 'react';\n\nimport CircularProgressbar from './CircularProgressbar';\nimport { CircularProgressbarWrapperProps } from './types';\n\ntype CircularProgressbarWithChildrenProps = CircularProgressbarWrapperProps & {\n children?: React.ReactNode;\n};\n\n// This is a wrapper around CircularProgressbar that allows passing children,\n// which will be vertically and horizontally centered inside the progressbar automatically.\nfunction CircularProgressbarWithChildren(props: CircularProgressbarWithChildrenProps) {\n const { children, ...circularProgressbarProps } = props;\n\n return (\n
\n {/* Has an extra div wrapper because otherwise, adding content after\n this progressbar is spaced weirdly. */}\n
\n {/* Progressbar is not positioned absolutely, so that it can establish\n intrinsic size for props.children's content. */}\n \n\n {/* Children are positioned absolutely, and height adapts to the\n progressbar's intrinsic size. It appears below the progressbar,\n but negative margin moves it back up. */}\n {props.children ? (\n \n {props.children}\n
\n ) : null}\n
\n \n );\n}\n\nexport default CircularProgressbarWithChildren;\n","import { CircularProgressbarStyles } from './types';\n\nexport default function buildStyles({\n rotation,\n strokeLinecap,\n textColor,\n textSize,\n pathColor,\n pathTransition,\n pathTransitionDuration,\n trailColor,\n backgroundColor,\n}: {\n rotation?: number; // Number of turns, 0-1\n strokeLinecap?: any;\n textColor?: string;\n textSize?: string | number;\n pathColor?: string;\n pathTransition?: string;\n pathTransitionDuration?: number; // Measured in seconds\n trailColor?: string;\n backgroundColor?: string;\n}): CircularProgressbarStyles {\n const rotationTransform = rotation == null ? undefined : `rotate(${rotation}turn)`;\n const rotationTransformOrigin = rotation == null ? undefined : 'center center';\n\n return {\n root: {},\n path: removeUndefinedValues({\n stroke: pathColor,\n strokeLinecap: strokeLinecap,\n transform: rotationTransform,\n transformOrigin: rotationTransformOrigin,\n transition: pathTransition,\n transitionDuration: pathTransitionDuration == null ? undefined : `${pathTransitionDuration}s`,\n }),\n trail: removeUndefinedValues({\n stroke: trailColor,\n strokeLinecap: strokeLinecap,\n transform: rotationTransform,\n transformOrigin: rotationTransformOrigin,\n }),\n text: removeUndefinedValues({\n fill: textColor,\n fontSize: textSize,\n }),\n background: removeUndefinedValues({\n fill: backgroundColor,\n }),\n };\n}\n\nfunction removeUndefinedValues(obj: { [key: string]: any }) {\n Object.keys(obj).forEach((key: string) => {\n if (obj[key] == null) {\n delete obj[key];\n }\n });\n return obj;\n}\n"],"names":["React.createElement","React.Component"],"mappings":"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"} \ No newline at end of file diff --git a/dist/index.js b/dist/index.js new file mode 100644 index 0000000..fc0f7a3 --- /dev/null +++ b/dist/index.js @@ -0,0 +1,201 @@ +'use strict'; + +Object.defineProperty(exports, '__esModule', { value: true }); + +var React = require('react'); + +/*! ***************************************************************************** +Copyright (c) Microsoft Corporation. All rights reserved. +Licensed under the Apache License, Version 2.0 (the "License"); you may not use +this file except in compliance with the License. You may obtain a copy of the +License at http://www.apache.org/licenses/LICENSE-2.0 + +THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED +WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, +MERCHANTABLITY OR NON-INFRINGEMENT. + +See the Apache Version 2.0 License for specific language governing permissions +and limitations under the License. +***************************************************************************** */ +/* global Reflect, Promise */ + +var extendStatics = function(d, b) { + extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; + return extendStatics(d, b); +}; + +function __extends(d, b) { + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +} + +var __assign = function() { + __assign = Object.assign || function __assign(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; + +function __rest(s, e) { + var t = {}; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) + t[p] = s[p]; + if (s != null && typeof Object.getOwnPropertySymbols === "function") + for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0) + t[p[i]] = s[p[i]]; + return t; +} + +var VIEWBOX_WIDTH = 100; +var VIEWBOX_HEIGHT = 100; +var VIEWBOX_HEIGHT_HALF = 50; +var VIEWBOX_CENTER_X = 50; +var VIEWBOX_CENTER_Y = 50; + +function Path(_a) { + var className = _a.className, counterClockwise = _a.counterClockwise, dashRatio = _a.dashRatio, pathRadius = _a.pathRadius, strokeWidth = _a.strokeWidth, style = _a.style; + return (React.createElement("path", { className: className, style: Object.assign({}, style, getDashStyle({ pathRadius: pathRadius, dashRatio: dashRatio, counterClockwise: counterClockwise })), d: getPathDescription({ + pathRadius: pathRadius, + counterClockwise: counterClockwise, + }), strokeWidth: strokeWidth, fillOpacity: 0 })); +} +function getPathDescription(_a) { + var pathRadius = _a.pathRadius, counterClockwise = _a.counterClockwise; + var radius = pathRadius; + var rotation = counterClockwise ? 1 : 0; + return "\n M " + VIEWBOX_CENTER_X + "," + VIEWBOX_CENTER_Y + "\n m 0,-" + radius + "\n a " + radius + "," + radius + " " + rotation + " 1 1 0," + 2 * radius + "\n a " + radius + "," + radius + " " + rotation + " 1 1 0,-" + 2 * radius + "\n "; +} +function getDashStyle(_a) { + var counterClockwise = _a.counterClockwise, dashRatio = _a.dashRatio, pathRadius = _a.pathRadius; + var diameter = Math.PI * 2 * pathRadius; + var gapLength = (1 - dashRatio) * diameter; + return { + strokeDasharray: diameter, + strokeDashoffset: counterClockwise ? -gapLength : gapLength, + }; +} + +var CircularProgressbar = (function (_super) { + __extends(CircularProgressbar, _super); + function CircularProgressbar() { + return _super !== null && _super.apply(this, arguments) || this; + } + CircularProgressbar.prototype.getBackgroundPadding = function () { + if (!this.props.background) { + return 0; + } + return this.props.backgroundPadding; + }; + CircularProgressbar.prototype.getPathRadius = function () { + return VIEWBOX_HEIGHT_HALF - this.props.strokeWidth / 2 - this.getBackgroundPadding(); + }; + CircularProgressbar.prototype.getPathRatio = function () { + var _a = this.props, value = _a.value, minValue = _a.minValue, maxValue = _a.maxValue; + var boundedValue = Math.min(Math.max(value, minValue), maxValue); + return (boundedValue - minValue) / (maxValue - minValue); + }; + CircularProgressbar.prototype.render = function () { + var _a = this.props, circleRatio = _a.circleRatio, className = _a.className, classes = _a.classes, counterClockwise = _a.counterClockwise, styles = _a.styles, strokeWidth = _a.strokeWidth, text = _a.text; + var pathRadius = this.getPathRadius(); + var pathRatio = this.getPathRatio(); + return (React.createElement("svg", { className: classes.root + " " + className, style: styles.root, viewBox: "0 0 " + VIEWBOX_WIDTH + " " + VIEWBOX_HEIGHT, "data-test-id": "CircularProgressbar" }, + this.props.background ? (React.createElement("circle", { className: classes.background, style: styles.background, cx: VIEWBOX_CENTER_X, cy: VIEWBOX_CENTER_Y, r: VIEWBOX_HEIGHT_HALF })) : null, + React.createElement(Path, { className: classes.trail, counterClockwise: counterClockwise, dashRatio: circleRatio, pathRadius: pathRadius, strokeWidth: strokeWidth, style: styles.trail }), + React.createElement(Path, { className: classes.path, counterClockwise: counterClockwise, dashRatio: pathRatio * circleRatio, pathRadius: pathRadius, strokeWidth: strokeWidth, style: styles.path }), + text ? (React.createElement("text", { className: classes.text, style: styles.text, x: VIEWBOX_CENTER_X, y: VIEWBOX_CENTER_Y }, text)) : null)); + }; + CircularProgressbar.defaultProps = { + background: false, + backgroundPadding: 0, + circleRatio: 1, + classes: { + root: 'CircularProgressbar', + trail: 'CircularProgressbar-trail', + path: 'CircularProgressbar-path', + text: 'CircularProgressbar-text', + background: 'CircularProgressbar-background', + }, + counterClockwise: false, + className: '', + maxValue: 100, + minValue: 0, + strokeWidth: 8, + styles: { + root: {}, + trail: {}, + path: {}, + text: {}, + background: {}, + }, + text: '', + }; + return CircularProgressbar; +}(React.Component)); + +function CircularProgressbarWithChildren(props) { + var children = props.children, circularProgressbarProps = __rest(props, ["children"]); + return (React.createElement("div", { "data-test-id": "CircularProgressbarWithChildren" }, + React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } }, + React.createElement(CircularProgressbar, __assign({}, circularProgressbarProps)), + props.children ? (React.createElement("div", { "data-test-id": "CircularProgressbarWithChildren__children", style: { + position: 'absolute', + width: '100%', + height: '100%', + marginTop: '-100%', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + } }, props.children)) : null))); +} + +function buildStyles(_a) { + var rotation = _a.rotation, strokeLinecap = _a.strokeLinecap, textColor = _a.textColor, textSize = _a.textSize, pathColor = _a.pathColor, pathTransition = _a.pathTransition, pathTransitionDuration = _a.pathTransitionDuration, trailColor = _a.trailColor, backgroundColor = _a.backgroundColor; + var rotationTransform = rotation == null ? undefined : "rotate(" + rotation + "turn)"; + var rotationTransformOrigin = rotation == null ? undefined : 'center center'; + return { + root: {}, + path: removeUndefinedValues({ + stroke: pathColor, + strokeLinecap: strokeLinecap, + transform: rotationTransform, + transformOrigin: rotationTransformOrigin, + transition: pathTransition, + transitionDuration: pathTransitionDuration == null ? undefined : pathTransitionDuration + "s", + }), + trail: removeUndefinedValues({ + stroke: trailColor, + strokeLinecap: strokeLinecap, + transform: rotationTransform, + transformOrigin: rotationTransformOrigin, + }), + text: removeUndefinedValues({ + fill: textColor, + fontSize: textSize, + }), + background: removeUndefinedValues({ + fill: backgroundColor, + }), + }; +} +function removeUndefinedValues(obj) { + Object.keys(obj).forEach(function (key) { + if (obj[key] == null) { + delete obj[key]; + } + }); + return obj; +} + +exports.CircularProgressbar = CircularProgressbar; +exports.CircularProgressbarWithChildren = CircularProgressbarWithChildren; +exports.buildStyles = buildStyles; +//# sourceMappingURL=index.js.map diff --git a/dist/index.js.map b/dist/index.js.map new file mode 100644 index 0000000..3fd1731 --- /dev/null +++ b/dist/index.js.map @@ -0,0 +1 @@ +{"version":3,"file":"index.js","sources":["../src/constants.ts","../src/Path.tsx","../src/CircularProgressbar.tsx","../src/CircularProgressbarWithChildren.tsx","../src/buildStyles.ts"],"sourcesContent":["export const VIEWBOX_WIDTH = 100;\nexport const VIEWBOX_HEIGHT = 100;\nexport const VIEWBOX_HEIGHT_HALF = 50;\nexport const VIEWBOX_CENTER_X = 50;\nexport const VIEWBOX_CENTER_Y = 50;\n","import * as React from 'react';\nimport { VIEWBOX_CENTER_X, VIEWBOX_CENTER_Y } from './constants';\n\nfunction Path({\n className,\n counterClockwise,\n dashRatio,\n pathRadius,\n strokeWidth,\n style,\n}: {\n className?: string;\n counterClockwise: boolean;\n dashRatio: number;\n pathRadius: number;\n strokeWidth: number;\n style?: object;\n}) {\n return (\n \n );\n}\n\n// SVG path description specifies how the path should be drawn\nfunction getPathDescription({\n pathRadius,\n counterClockwise,\n}: {\n pathRadius: number;\n counterClockwise: boolean;\n}) {\n const radius = pathRadius;\n const rotation = counterClockwise ? 1 : 0;\n\n // Move to center of canvas\n // Relative move to top canvas\n // Relative arc to bottom of canvas\n // Relative arc to top of canvas\n return `\n M ${VIEWBOX_CENTER_X},${VIEWBOX_CENTER_Y}\n m 0,-${radius}\n a ${radius},${radius} ${rotation} 1 1 0,${2 * radius}\n a ${radius},${radius} ${rotation} 1 1 0,-${2 * radius}\n `;\n}\n\nfunction getDashStyle({\n counterClockwise,\n dashRatio,\n pathRadius,\n}: {\n counterClockwise: boolean;\n dashRatio: number;\n pathRadius: number;\n}) {\n const diameter = Math.PI * 2 * pathRadius;\n const gapLength = (1 - dashRatio) * diameter;\n\n return {\n // Have dash be full diameter, and gap be full diameter\n strokeDasharray: diameter,\n // Shift dash backward by gapLength, so gap starts appearing at correct distance\n strokeDashoffset: counterClockwise ? -gapLength : gapLength,\n };\n}\n\nexport default Path;\n","import * as React from 'react';\n\nimport {\n VIEWBOX_WIDTH,\n VIEWBOX_HEIGHT,\n VIEWBOX_HEIGHT_HALF,\n VIEWBOX_CENTER_X,\n VIEWBOX_CENTER_Y,\n} from './constants';\nimport Path from './Path';\nimport { CircularProgressbarDefaultProps, CircularProgressbarProps } from './types';\n\nclass CircularProgressbar extends React.Component {\n static defaultProps: CircularProgressbarDefaultProps = {\n background: false,\n backgroundPadding: 0,\n circleRatio: 1,\n classes: {\n root: 'CircularProgressbar',\n trail: 'CircularProgressbar-trail',\n path: 'CircularProgressbar-path',\n text: 'CircularProgressbar-text',\n background: 'CircularProgressbar-background',\n },\n counterClockwise: false,\n className: '',\n maxValue: 100,\n minValue: 0,\n strokeWidth: 8,\n styles: {\n root: {},\n trail: {},\n path: {},\n text: {},\n background: {},\n },\n text: '',\n };\n\n getBackgroundPadding() {\n if (!this.props.background) {\n // Don't add padding if not displaying background\n return 0;\n }\n return this.props.backgroundPadding;\n }\n\n getPathRadius() {\n // The radius of the path is defined to be in the middle, so in order for the path to\n // fit perfectly inside the 100x100 viewBox, need to subtract half the strokeWidth\n return VIEWBOX_HEIGHT_HALF - this.props.strokeWidth / 2 - this.getBackgroundPadding();\n }\n\n // Ratio of path length to trail length, as a value between 0 and 1\n getPathRatio() {\n const { value, minValue, maxValue } = this.props;\n const boundedValue = Math.min(Math.max(value, minValue), maxValue);\n return (boundedValue - minValue) / (maxValue - minValue);\n }\n\n render() {\n const {\n circleRatio,\n className,\n classes,\n counterClockwise,\n styles,\n strokeWidth,\n text,\n } = this.props;\n\n const pathRadius = this.getPathRadius();\n const pathRatio = this.getPathRatio();\n\n return (\n \n {this.props.background ? (\n \n ) : null}\n\n \n\n \n\n {text ? (\n \n {text}\n \n ) : null}\n \n );\n }\n}\n\nexport default CircularProgressbar;\n","import * as React from 'react';\n\nimport CircularProgressbar from './CircularProgressbar';\nimport { CircularProgressbarWrapperProps } from './types';\n\ntype CircularProgressbarWithChildrenProps = CircularProgressbarWrapperProps & {\n children?: React.ReactNode;\n};\n\n// This is a wrapper around CircularProgressbar that allows passing children,\n// which will be vertically and horizontally centered inside the progressbar automatically.\nfunction CircularProgressbarWithChildren(props: CircularProgressbarWithChildrenProps) {\n const { children, ...circularProgressbarProps } = props;\n\n return (\n
\n {/* Has an extra div wrapper because otherwise, adding content after\n this progressbar is spaced weirdly. */}\n
\n {/* Progressbar is not positioned absolutely, so that it can establish\n intrinsic size for props.children's content. */}\n \n\n {/* Children are positioned absolutely, and height adapts to the\n progressbar's intrinsic size. It appears below the progressbar,\n but negative margin moves it back up. */}\n {props.children ? (\n \n {props.children}\n
\n ) : null}\n
\n \n );\n}\n\nexport default CircularProgressbarWithChildren;\n","import { CircularProgressbarStyles } from './types';\n\nexport default function buildStyles({\n rotation,\n strokeLinecap,\n textColor,\n textSize,\n pathColor,\n pathTransition,\n pathTransitionDuration,\n trailColor,\n backgroundColor,\n}: {\n rotation?: number; // Number of turns, 0-1\n strokeLinecap?: any;\n textColor?: string;\n textSize?: string | number;\n pathColor?: string;\n pathTransition?: string;\n pathTransitionDuration?: number; // Measured in seconds\n trailColor?: string;\n backgroundColor?: string;\n}): CircularProgressbarStyles {\n const rotationTransform = rotation == null ? undefined : `rotate(${rotation}turn)`;\n const rotationTransformOrigin = rotation == null ? undefined : 'center center';\n\n return {\n root: {},\n path: removeUndefinedValues({\n stroke: pathColor,\n strokeLinecap: strokeLinecap,\n transform: rotationTransform,\n transformOrigin: rotationTransformOrigin,\n transition: pathTransition,\n transitionDuration: pathTransitionDuration == null ? undefined : `${pathTransitionDuration}s`,\n }),\n trail: removeUndefinedValues({\n stroke: trailColor,\n strokeLinecap: strokeLinecap,\n transform: rotationTransform,\n transformOrigin: rotationTransformOrigin,\n }),\n text: removeUndefinedValues({\n fill: textColor,\n fontSize: textSize,\n }),\n background: removeUndefinedValues({\n fill: backgroundColor,\n }),\n };\n}\n\nfunction removeUndefinedValues(obj: { [key: string]: any }) {\n Object.keys(obj).forEach((key: string) => {\n if (obj[key] == null) {\n delete obj[key];\n }\n });\n return obj;\n}\n"],"names":["React.createElement","React.Component"],"mappings":"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"} \ No newline at end of file diff --git a/dist/styles.css b/dist/styles.css new file mode 100644 index 0000000..3efc691 --- /dev/null +++ b/dist/styles.css @@ -0,0 +1,66 @@ +/* + * react-circular-progressbar styles + * All of the styles in this file are configurable! + */ + +.CircularProgressbar { + /* + * This fixes an issue where the CircularProgressbar svg has + * 0 width inside a "display: flex" container, and thus not visible. + */ + width: 100%; + /* + * This fixes a centering issue with CircularProgressbarWithChildren: + * https://github.com/kevinsqi/react-circular-progressbar/issues/94 + */ + vertical-align: middle; +} + +.CircularProgressbar .CircularProgressbar-path { + stroke: #3e98c7; + stroke-linecap: round; + -webkit-transition: stroke-dashoffset 0.5s ease 0s; + transition: stroke-dashoffset 0.5s ease 0s; +} + +.CircularProgressbar .CircularProgressbar-trail { + stroke: #d6d6d6; + /* Used when trail is not full diameter, i.e. when props.circleRatio is set */ + stroke-linecap: round; +} + +.CircularProgressbar .CircularProgressbar-text { + fill: #3e98c7; + font-size: 20px; + dominant-baseline: middle; + text-anchor: middle; +} + +.CircularProgressbar .CircularProgressbar-background { + fill: #d6d6d6; +} + +/* + * Sample background styles. Use these with e.g.: + * + * + */ +.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background { + fill: #3e98c7; +} + +.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text { + fill: #fff; +} + +.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path { + stroke: #fff; +} + +.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail { + stroke: transparent; +} diff --git a/dist/types.d.ts b/dist/types.d.ts new file mode 100644 index 0000000..2ddb5b1 --- /dev/null +++ b/dist/types.d.ts @@ -0,0 +1,50 @@ +import * as React from 'react'; +export declare type CircularProgressbarStyles = { + root?: React.CSSProperties; + trail?: React.CSSProperties; + path?: React.CSSProperties; + text?: React.CSSProperties; + background?: React.CSSProperties; +}; +export declare type CircularProgressbarDefaultProps = { + background: boolean; + backgroundPadding: number; + circleRatio: number; + classes: { + root: string; + trail: string; + path: string; + text: string; + background: string; + }; + className: string; + counterClockwise: boolean; + maxValue: number; + minValue: number; + strokeWidth: number; + styles: CircularProgressbarStyles; + text: string; +}; +export declare type CircularProgressbarWrapperProps = { + background?: boolean; + backgroundPadding?: number; + circleRatio?: number; + classes?: { + root: string; + trail: string; + path: string; + text: string; + background: string; + }; + className?: string; + counterClockwise?: boolean; + maxValue?: number; + minValue?: number; + strokeWidth?: number; + styles?: CircularProgressbarStyles; + text?: string; + value: number; +}; +export declare type CircularProgressbarProps = CircularProgressbarDefaultProps & { + value: number; +}; diff --git a/src/Path.tsx b/src/Path.tsx index c275f40..cf99457 100644 --- a/src/Path.tsx +++ b/src/Path.tsx @@ -67,9 +67,9 @@ function getDashStyle({ return { // Have dash be full diameter, and gap be full diameter - strokeDasharray: `${diameter}px ${diameter}px`, + strokeDasharray: diameter, // Shift dash backward by gapLength, so gap starts appearing at correct distance - strokeDashoffset: `${counterClockwise ? -gapLength : gapLength}px`, + strokeDashoffset: counterClockwise ? -gapLength : gapLength, }; } From f26549a2ae4254bfb133d548a7e85011eaf7c53b Mon Sep 17 00:00:00 2001 From: Song Date: Tue, 14 May 2024 10:10:23 +0800 Subject: [PATCH 2/2] remove dist --- .gitignore | 2 +- dist/CircularProgressbar.d.ts | 10 -- dist/CircularProgressbarWithChildren.d.ts | 7 - dist/Path.d.ts | 10 -- dist/buildStyles.d.ts | 12 -- dist/constants.d.ts | 5 - dist/index.d.ts | 4 - dist/index.esm.js | 195 --------------------- dist/index.esm.js.map | 1 - dist/index.js | 201 ---------------------- dist/index.js.map | 1 - dist/styles.css | 66 ------- dist/types.d.ts | 50 ------ 13 files changed, 1 insertion(+), 563 deletions(-) delete mode 100644 dist/CircularProgressbar.d.ts delete mode 100644 dist/CircularProgressbarWithChildren.d.ts delete mode 100644 dist/Path.d.ts delete mode 100644 dist/buildStyles.d.ts delete mode 100644 dist/constants.d.ts delete mode 100644 dist/index.d.ts delete mode 100644 dist/index.esm.js delete mode 100644 dist/index.esm.js.map delete mode 100644 dist/index.js delete mode 100644 dist/index.js.map delete mode 100644 dist/styles.css delete mode 100644 dist/types.d.ts diff --git a/.gitignore b/.gitignore index 540cbc2..447ea93 100644 --- a/.gitignore +++ b/.gitignore @@ -2,7 +2,7 @@ /node_modules # distribution folder -# /dist +/dist # coverage /coverage diff --git a/dist/CircularProgressbar.d.ts b/dist/CircularProgressbar.d.ts deleted file mode 100644 index f1fbc0c..0000000 --- a/dist/CircularProgressbar.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -import * as React from 'react'; -import { CircularProgressbarDefaultProps, CircularProgressbarProps } from './types'; -declare class CircularProgressbar extends React.Component { - static defaultProps: CircularProgressbarDefaultProps; - getBackgroundPadding(): number; - getPathRadius(): number; - getPathRatio(): number; - render(): JSX.Element; -} -export default CircularProgressbar; diff --git a/dist/CircularProgressbarWithChildren.d.ts b/dist/CircularProgressbarWithChildren.d.ts deleted file mode 100644 index 9d7bded..0000000 --- a/dist/CircularProgressbarWithChildren.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -import * as React from 'react'; -import { CircularProgressbarWrapperProps } from './types'; -declare type CircularProgressbarWithChildrenProps = CircularProgressbarWrapperProps & { - children?: React.ReactNode; -}; -declare function CircularProgressbarWithChildren(props: CircularProgressbarWithChildrenProps): JSX.Element; -export default CircularProgressbarWithChildren; diff --git a/dist/Path.d.ts b/dist/Path.d.ts deleted file mode 100644 index a87dbfb..0000000 --- a/dist/Path.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -/// -declare function Path({ className, counterClockwise, dashRatio, pathRadius, strokeWidth, style, }: { - className?: string; - counterClockwise: boolean; - dashRatio: number; - pathRadius: number; - strokeWidth: number; - style?: object; -}): JSX.Element; -export default Path; diff --git a/dist/buildStyles.d.ts b/dist/buildStyles.d.ts deleted file mode 100644 index 6892aee..0000000 --- a/dist/buildStyles.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { CircularProgressbarStyles } from './types'; -export default function buildStyles({ rotation, strokeLinecap, textColor, textSize, pathColor, pathTransition, pathTransitionDuration, trailColor, backgroundColor, }: { - rotation?: number; - strokeLinecap?: any; - textColor?: string; - textSize?: string | number; - pathColor?: string; - pathTransition?: string; - pathTransitionDuration?: number; - trailColor?: string; - backgroundColor?: string; -}): CircularProgressbarStyles; diff --git a/dist/constants.d.ts b/dist/constants.d.ts deleted file mode 100644 index 2967a6a..0000000 --- a/dist/constants.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -export declare const VIEWBOX_WIDTH = 100; -export declare const VIEWBOX_HEIGHT = 100; -export declare const VIEWBOX_HEIGHT_HALF = 50; -export declare const VIEWBOX_CENTER_X = 50; -export declare const VIEWBOX_CENTER_Y = 50; diff --git a/dist/index.d.ts b/dist/index.d.ts deleted file mode 100644 index 675389f..0000000 --- a/dist/index.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -import CircularProgressbar from './CircularProgressbar'; -import CircularProgressbarWithChildren from './CircularProgressbarWithChildren'; -import buildStyles from './buildStyles'; -export { CircularProgressbar, CircularProgressbarWithChildren, buildStyles }; diff --git a/dist/index.esm.js b/dist/index.esm.js deleted file mode 100644 index a3fd886..0000000 --- a/dist/index.esm.js +++ /dev/null @@ -1,195 +0,0 @@ -import { createElement, Component } from 'react'; - -/*! ***************************************************************************** -Copyright (c) Microsoft Corporation. All rights reserved. -Licensed under the Apache License, Version 2.0 (the "License"); you may not use -this file except in compliance with the License. You may obtain a copy of the -License at http://www.apache.org/licenses/LICENSE-2.0 - -THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED -WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, -MERCHANTABLITY OR NON-INFRINGEMENT. - -See the Apache Version 2.0 License for specific language governing permissions -and limitations under the License. -***************************************************************************** */ -/* global Reflect, Promise */ - -var extendStatics = function(d, b) { - extendStatics = Object.setPrototypeOf || - ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || - function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; - return extendStatics(d, b); -}; - -function __extends(d, b) { - extendStatics(d, b); - function __() { this.constructor = d; } - d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); -} - -var __assign = function() { - __assign = Object.assign || function __assign(t) { - for (var s, i = 1, n = arguments.length; i < n; i++) { - s = arguments[i]; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; - } - return t; - }; - return __assign.apply(this, arguments); -}; - -function __rest(s, e) { - var t = {}; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) - t[p] = s[p]; - if (s != null && typeof Object.getOwnPropertySymbols === "function") - for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0) - t[p[i]] = s[p[i]]; - return t; -} - -var VIEWBOX_WIDTH = 100; -var VIEWBOX_HEIGHT = 100; -var VIEWBOX_HEIGHT_HALF = 50; -var VIEWBOX_CENTER_X = 50; -var VIEWBOX_CENTER_Y = 50; - -function Path(_a) { - var className = _a.className, counterClockwise = _a.counterClockwise, dashRatio = _a.dashRatio, pathRadius = _a.pathRadius, strokeWidth = _a.strokeWidth, style = _a.style; - return (createElement("path", { className: className, style: Object.assign({}, style, getDashStyle({ pathRadius: pathRadius, dashRatio: dashRatio, counterClockwise: counterClockwise })), d: getPathDescription({ - pathRadius: pathRadius, - counterClockwise: counterClockwise, - }), strokeWidth: strokeWidth, fillOpacity: 0 })); -} -function getPathDescription(_a) { - var pathRadius = _a.pathRadius, counterClockwise = _a.counterClockwise; - var radius = pathRadius; - var rotation = counterClockwise ? 1 : 0; - return "\n M " + VIEWBOX_CENTER_X + "," + VIEWBOX_CENTER_Y + "\n m 0,-" + radius + "\n a " + radius + "," + radius + " " + rotation + " 1 1 0," + 2 * radius + "\n a " + radius + "," + radius + " " + rotation + " 1 1 0,-" + 2 * radius + "\n "; -} -function getDashStyle(_a) { - var counterClockwise = _a.counterClockwise, dashRatio = _a.dashRatio, pathRadius = _a.pathRadius; - var diameter = Math.PI * 2 * pathRadius; - var gapLength = (1 - dashRatio) * diameter; - return { - strokeDasharray: diameter, - strokeDashoffset: counterClockwise ? -gapLength : gapLength, - }; -} - -var CircularProgressbar = (function (_super) { - __extends(CircularProgressbar, _super); - function CircularProgressbar() { - return _super !== null && _super.apply(this, arguments) || this; - } - CircularProgressbar.prototype.getBackgroundPadding = function () { - if (!this.props.background) { - return 0; - } - return this.props.backgroundPadding; - }; - CircularProgressbar.prototype.getPathRadius = function () { - return VIEWBOX_HEIGHT_HALF - this.props.strokeWidth / 2 - this.getBackgroundPadding(); - }; - CircularProgressbar.prototype.getPathRatio = function () { - var _a = this.props, value = _a.value, minValue = _a.minValue, maxValue = _a.maxValue; - var boundedValue = Math.min(Math.max(value, minValue), maxValue); - return (boundedValue - minValue) / (maxValue - minValue); - }; - CircularProgressbar.prototype.render = function () { - var _a = this.props, circleRatio = _a.circleRatio, className = _a.className, classes = _a.classes, counterClockwise = _a.counterClockwise, styles = _a.styles, strokeWidth = _a.strokeWidth, text = _a.text; - var pathRadius = this.getPathRadius(); - var pathRatio = this.getPathRatio(); - return (createElement("svg", { className: classes.root + " " + className, style: styles.root, viewBox: "0 0 " + VIEWBOX_WIDTH + " " + VIEWBOX_HEIGHT, "data-test-id": "CircularProgressbar" }, - this.props.background ? (createElement("circle", { className: classes.background, style: styles.background, cx: VIEWBOX_CENTER_X, cy: VIEWBOX_CENTER_Y, r: VIEWBOX_HEIGHT_HALF })) : null, - createElement(Path, { className: classes.trail, counterClockwise: counterClockwise, dashRatio: circleRatio, pathRadius: pathRadius, strokeWidth: strokeWidth, style: styles.trail }), - createElement(Path, { className: classes.path, counterClockwise: counterClockwise, dashRatio: pathRatio * circleRatio, pathRadius: pathRadius, strokeWidth: strokeWidth, style: styles.path }), - text ? (createElement("text", { className: classes.text, style: styles.text, x: VIEWBOX_CENTER_X, y: VIEWBOX_CENTER_Y }, text)) : null)); - }; - CircularProgressbar.defaultProps = { - background: false, - backgroundPadding: 0, - circleRatio: 1, - classes: { - root: 'CircularProgressbar', - trail: 'CircularProgressbar-trail', - path: 'CircularProgressbar-path', - text: 'CircularProgressbar-text', - background: 'CircularProgressbar-background', - }, - counterClockwise: false, - className: '', - maxValue: 100, - minValue: 0, - strokeWidth: 8, - styles: { - root: {}, - trail: {}, - path: {}, - text: {}, - background: {}, - }, - text: '', - }; - return CircularProgressbar; -}(Component)); - -function CircularProgressbarWithChildren(props) { - var children = props.children, circularProgressbarProps = __rest(props, ["children"]); - return (createElement("div", { "data-test-id": "CircularProgressbarWithChildren" }, - createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } }, - createElement(CircularProgressbar, __assign({}, circularProgressbarProps)), - props.children ? (createElement("div", { "data-test-id": "CircularProgressbarWithChildren__children", style: { - position: 'absolute', - width: '100%', - height: '100%', - marginTop: '-100%', - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - } }, props.children)) : null))); -} - -function buildStyles(_a) { - var rotation = _a.rotation, strokeLinecap = _a.strokeLinecap, textColor = _a.textColor, textSize = _a.textSize, pathColor = _a.pathColor, pathTransition = _a.pathTransition, pathTransitionDuration = _a.pathTransitionDuration, trailColor = _a.trailColor, backgroundColor = _a.backgroundColor; - var rotationTransform = rotation == null ? undefined : "rotate(" + rotation + "turn)"; - var rotationTransformOrigin = rotation == null ? undefined : 'center center'; - return { - root: {}, - path: removeUndefinedValues({ - stroke: pathColor, - strokeLinecap: strokeLinecap, - transform: rotationTransform, - transformOrigin: rotationTransformOrigin, - transition: pathTransition, - transitionDuration: pathTransitionDuration == null ? undefined : pathTransitionDuration + "s", - }), - trail: removeUndefinedValues({ - stroke: trailColor, - strokeLinecap: strokeLinecap, - transform: rotationTransform, - transformOrigin: rotationTransformOrigin, - }), - text: removeUndefinedValues({ - fill: textColor, - fontSize: textSize, - }), - background: removeUndefinedValues({ - fill: backgroundColor, - }), - }; -} -function removeUndefinedValues(obj) { - Object.keys(obj).forEach(function (key) { - if (obj[key] == null) { - delete obj[key]; - } - }); - return obj; -} - -export { CircularProgressbar, CircularProgressbarWithChildren, buildStyles }; -//# sourceMappingURL=index.esm.js.map diff --git a/dist/index.esm.js.map b/dist/index.esm.js.map deleted file mode 100644 index effa439..0000000 --- a/dist/index.esm.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.esm.js","sources":["../src/constants.ts","../src/Path.tsx","../src/CircularProgressbar.tsx","../src/CircularProgressbarWithChildren.tsx","../src/buildStyles.ts"],"sourcesContent":["export const VIEWBOX_WIDTH = 100;\nexport const VIEWBOX_HEIGHT = 100;\nexport const VIEWBOX_HEIGHT_HALF = 50;\nexport const VIEWBOX_CENTER_X = 50;\nexport const VIEWBOX_CENTER_Y = 50;\n","import * as React from 'react';\nimport { VIEWBOX_CENTER_X, VIEWBOX_CENTER_Y } from './constants';\n\nfunction Path({\n className,\n counterClockwise,\n dashRatio,\n pathRadius,\n strokeWidth,\n style,\n}: {\n className?: string;\n counterClockwise: boolean;\n dashRatio: number;\n pathRadius: number;\n strokeWidth: number;\n style?: object;\n}) {\n return (\n \n );\n}\n\n// SVG path description specifies how the path should be drawn\nfunction getPathDescription({\n pathRadius,\n counterClockwise,\n}: {\n pathRadius: number;\n counterClockwise: boolean;\n}) {\n const radius = pathRadius;\n const rotation = counterClockwise ? 1 : 0;\n\n // Move to center of canvas\n // Relative move to top canvas\n // Relative arc to bottom of canvas\n // Relative arc to top of canvas\n return `\n M ${VIEWBOX_CENTER_X},${VIEWBOX_CENTER_Y}\n m 0,-${radius}\n a ${radius},${radius} ${rotation} 1 1 0,${2 * radius}\n a ${radius},${radius} ${rotation} 1 1 0,-${2 * radius}\n `;\n}\n\nfunction getDashStyle({\n counterClockwise,\n dashRatio,\n pathRadius,\n}: {\n counterClockwise: boolean;\n dashRatio: number;\n pathRadius: number;\n}) {\n const diameter = Math.PI * 2 * pathRadius;\n const gapLength = (1 - dashRatio) * diameter;\n\n return {\n // Have dash be full diameter, and gap be full diameter\n strokeDasharray: diameter,\n // Shift dash backward by gapLength, so gap starts appearing at correct distance\n strokeDashoffset: counterClockwise ? -gapLength : gapLength,\n };\n}\n\nexport default Path;\n","import * as React from 'react';\n\nimport {\n VIEWBOX_WIDTH,\n VIEWBOX_HEIGHT,\n VIEWBOX_HEIGHT_HALF,\n VIEWBOX_CENTER_X,\n VIEWBOX_CENTER_Y,\n} from './constants';\nimport Path from './Path';\nimport { CircularProgressbarDefaultProps, CircularProgressbarProps } from './types';\n\nclass CircularProgressbar extends React.Component {\n static defaultProps: CircularProgressbarDefaultProps = {\n background: false,\n backgroundPadding: 0,\n circleRatio: 1,\n classes: {\n root: 'CircularProgressbar',\n trail: 'CircularProgressbar-trail',\n path: 'CircularProgressbar-path',\n text: 'CircularProgressbar-text',\n background: 'CircularProgressbar-background',\n },\n counterClockwise: false,\n className: '',\n maxValue: 100,\n minValue: 0,\n strokeWidth: 8,\n styles: {\n root: {},\n trail: {},\n path: {},\n text: {},\n background: {},\n },\n text: '',\n };\n\n getBackgroundPadding() {\n if (!this.props.background) {\n // Don't add padding if not displaying background\n return 0;\n }\n return this.props.backgroundPadding;\n }\n\n getPathRadius() {\n // The radius of the path is defined to be in the middle, so in order for the path to\n // fit perfectly inside the 100x100 viewBox, need to subtract half the strokeWidth\n return VIEWBOX_HEIGHT_HALF - this.props.strokeWidth / 2 - this.getBackgroundPadding();\n }\n\n // Ratio of path length to trail length, as a value between 0 and 1\n getPathRatio() {\n const { value, minValue, maxValue } = this.props;\n const boundedValue = Math.min(Math.max(value, minValue), maxValue);\n return (boundedValue - minValue) / (maxValue - minValue);\n }\n\n render() {\n const {\n circleRatio,\n className,\n classes,\n counterClockwise,\n styles,\n strokeWidth,\n text,\n } = this.props;\n\n const pathRadius = this.getPathRadius();\n const pathRatio = this.getPathRatio();\n\n return (\n \n {this.props.background ? (\n \n ) : null}\n\n \n\n \n\n {text ? (\n \n {text}\n \n ) : null}\n \n );\n }\n}\n\nexport default CircularProgressbar;\n","import * as React from 'react';\n\nimport CircularProgressbar from './CircularProgressbar';\nimport { CircularProgressbarWrapperProps } from './types';\n\ntype CircularProgressbarWithChildrenProps = CircularProgressbarWrapperProps & {\n children?: React.ReactNode;\n};\n\n// This is a wrapper around CircularProgressbar that allows passing children,\n// which will be vertically and horizontally centered inside the progressbar automatically.\nfunction CircularProgressbarWithChildren(props: CircularProgressbarWithChildrenProps) {\n const { children, ...circularProgressbarProps } = props;\n\n return (\n
\n {/* Has an extra div wrapper because otherwise, adding content after\n this progressbar is spaced weirdly. */}\n
\n {/* Progressbar is not positioned absolutely, so that it can establish\n intrinsic size for props.children's content. */}\n \n\n {/* Children are positioned absolutely, and height adapts to the\n progressbar's intrinsic size. It appears below the progressbar,\n but negative margin moves it back up. */}\n {props.children ? (\n \n {props.children}\n
\n ) : null}\n
\n \n );\n}\n\nexport default CircularProgressbarWithChildren;\n","import { CircularProgressbarStyles } from './types';\n\nexport default function buildStyles({\n rotation,\n strokeLinecap,\n textColor,\n textSize,\n pathColor,\n pathTransition,\n pathTransitionDuration,\n trailColor,\n backgroundColor,\n}: {\n rotation?: number; // Number of turns, 0-1\n strokeLinecap?: any;\n textColor?: string;\n textSize?: string | number;\n pathColor?: string;\n pathTransition?: string;\n pathTransitionDuration?: number; // Measured in seconds\n trailColor?: string;\n backgroundColor?: string;\n}): CircularProgressbarStyles {\n const rotationTransform = rotation == null ? undefined : `rotate(${rotation}turn)`;\n const rotationTransformOrigin = rotation == null ? undefined : 'center center';\n\n return {\n root: {},\n path: removeUndefinedValues({\n stroke: pathColor,\n strokeLinecap: strokeLinecap,\n transform: rotationTransform,\n transformOrigin: rotationTransformOrigin,\n transition: pathTransition,\n transitionDuration: pathTransitionDuration == null ? undefined : `${pathTransitionDuration}s`,\n }),\n trail: removeUndefinedValues({\n stroke: trailColor,\n strokeLinecap: strokeLinecap,\n transform: rotationTransform,\n transformOrigin: rotationTransformOrigin,\n }),\n text: removeUndefinedValues({\n fill: textColor,\n fontSize: textSize,\n }),\n background: removeUndefinedValues({\n fill: backgroundColor,\n }),\n };\n}\n\nfunction removeUndefinedValues(obj: { [key: string]: any }) {\n Object.keys(obj).forEach((key: string) => {\n if (obj[key] == null) {\n delete obj[key];\n }\n });\n return obj;\n}\n"],"names":["React.createElement","React.Component"],"mappings":"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"} \ No newline at end of file diff --git a/dist/index.js b/dist/index.js deleted file mode 100644 index fc0f7a3..0000000 --- a/dist/index.js +++ /dev/null @@ -1,201 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, '__esModule', { value: true }); - -var React = require('react'); - -/*! ***************************************************************************** -Copyright (c) Microsoft Corporation. All rights reserved. -Licensed under the Apache License, Version 2.0 (the "License"); you may not use -this file except in compliance with the License. You may obtain a copy of the -License at http://www.apache.org/licenses/LICENSE-2.0 - -THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED -WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, -MERCHANTABLITY OR NON-INFRINGEMENT. - -See the Apache Version 2.0 License for specific language governing permissions -and limitations under the License. -***************************************************************************** */ -/* global Reflect, Promise */ - -var extendStatics = function(d, b) { - extendStatics = Object.setPrototypeOf || - ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || - function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; - return extendStatics(d, b); -}; - -function __extends(d, b) { - extendStatics(d, b); - function __() { this.constructor = d; } - d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); -} - -var __assign = function() { - __assign = Object.assign || function __assign(t) { - for (var s, i = 1, n = arguments.length; i < n; i++) { - s = arguments[i]; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; - } - return t; - }; - return __assign.apply(this, arguments); -}; - -function __rest(s, e) { - var t = {}; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) - t[p] = s[p]; - if (s != null && typeof Object.getOwnPropertySymbols === "function") - for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0) - t[p[i]] = s[p[i]]; - return t; -} - -var VIEWBOX_WIDTH = 100; -var VIEWBOX_HEIGHT = 100; -var VIEWBOX_HEIGHT_HALF = 50; -var VIEWBOX_CENTER_X = 50; -var VIEWBOX_CENTER_Y = 50; - -function Path(_a) { - var className = _a.className, counterClockwise = _a.counterClockwise, dashRatio = _a.dashRatio, pathRadius = _a.pathRadius, strokeWidth = _a.strokeWidth, style = _a.style; - return (React.createElement("path", { className: className, style: Object.assign({}, style, getDashStyle({ pathRadius: pathRadius, dashRatio: dashRatio, counterClockwise: counterClockwise })), d: getPathDescription({ - pathRadius: pathRadius, - counterClockwise: counterClockwise, - }), strokeWidth: strokeWidth, fillOpacity: 0 })); -} -function getPathDescription(_a) { - var pathRadius = _a.pathRadius, counterClockwise = _a.counterClockwise; - var radius = pathRadius; - var rotation = counterClockwise ? 1 : 0; - return "\n M " + VIEWBOX_CENTER_X + "," + VIEWBOX_CENTER_Y + "\n m 0,-" + radius + "\n a " + radius + "," + radius + " " + rotation + " 1 1 0," + 2 * radius + "\n a " + radius + "," + radius + " " + rotation + " 1 1 0,-" + 2 * radius + "\n "; -} -function getDashStyle(_a) { - var counterClockwise = _a.counterClockwise, dashRatio = _a.dashRatio, pathRadius = _a.pathRadius; - var diameter = Math.PI * 2 * pathRadius; - var gapLength = (1 - dashRatio) * diameter; - return { - strokeDasharray: diameter, - strokeDashoffset: counterClockwise ? -gapLength : gapLength, - }; -} - -var CircularProgressbar = (function (_super) { - __extends(CircularProgressbar, _super); - function CircularProgressbar() { - return _super !== null && _super.apply(this, arguments) || this; - } - CircularProgressbar.prototype.getBackgroundPadding = function () { - if (!this.props.background) { - return 0; - } - return this.props.backgroundPadding; - }; - CircularProgressbar.prototype.getPathRadius = function () { - return VIEWBOX_HEIGHT_HALF - this.props.strokeWidth / 2 - this.getBackgroundPadding(); - }; - CircularProgressbar.prototype.getPathRatio = function () { - var _a = this.props, value = _a.value, minValue = _a.minValue, maxValue = _a.maxValue; - var boundedValue = Math.min(Math.max(value, minValue), maxValue); - return (boundedValue - minValue) / (maxValue - minValue); - }; - CircularProgressbar.prototype.render = function () { - var _a = this.props, circleRatio = _a.circleRatio, className = _a.className, classes = _a.classes, counterClockwise = _a.counterClockwise, styles = _a.styles, strokeWidth = _a.strokeWidth, text = _a.text; - var pathRadius = this.getPathRadius(); - var pathRatio = this.getPathRatio(); - return (React.createElement("svg", { className: classes.root + " " + className, style: styles.root, viewBox: "0 0 " + VIEWBOX_WIDTH + " " + VIEWBOX_HEIGHT, "data-test-id": "CircularProgressbar" }, - this.props.background ? (React.createElement("circle", { className: classes.background, style: styles.background, cx: VIEWBOX_CENTER_X, cy: VIEWBOX_CENTER_Y, r: VIEWBOX_HEIGHT_HALF })) : null, - React.createElement(Path, { className: classes.trail, counterClockwise: counterClockwise, dashRatio: circleRatio, pathRadius: pathRadius, strokeWidth: strokeWidth, style: styles.trail }), - React.createElement(Path, { className: classes.path, counterClockwise: counterClockwise, dashRatio: pathRatio * circleRatio, pathRadius: pathRadius, strokeWidth: strokeWidth, style: styles.path }), - text ? (React.createElement("text", { className: classes.text, style: styles.text, x: VIEWBOX_CENTER_X, y: VIEWBOX_CENTER_Y }, text)) : null)); - }; - CircularProgressbar.defaultProps = { - background: false, - backgroundPadding: 0, - circleRatio: 1, - classes: { - root: 'CircularProgressbar', - trail: 'CircularProgressbar-trail', - path: 'CircularProgressbar-path', - text: 'CircularProgressbar-text', - background: 'CircularProgressbar-background', - }, - counterClockwise: false, - className: '', - maxValue: 100, - minValue: 0, - strokeWidth: 8, - styles: { - root: {}, - trail: {}, - path: {}, - text: {}, - background: {}, - }, - text: '', - }; - return CircularProgressbar; -}(React.Component)); - -function CircularProgressbarWithChildren(props) { - var children = props.children, circularProgressbarProps = __rest(props, ["children"]); - return (React.createElement("div", { "data-test-id": "CircularProgressbarWithChildren" }, - React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } }, - React.createElement(CircularProgressbar, __assign({}, circularProgressbarProps)), - props.children ? (React.createElement("div", { "data-test-id": "CircularProgressbarWithChildren__children", style: { - position: 'absolute', - width: '100%', - height: '100%', - marginTop: '-100%', - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - } }, props.children)) : null))); -} - -function buildStyles(_a) { - var rotation = _a.rotation, strokeLinecap = _a.strokeLinecap, textColor = _a.textColor, textSize = _a.textSize, pathColor = _a.pathColor, pathTransition = _a.pathTransition, pathTransitionDuration = _a.pathTransitionDuration, trailColor = _a.trailColor, backgroundColor = _a.backgroundColor; - var rotationTransform = rotation == null ? undefined : "rotate(" + rotation + "turn)"; - var rotationTransformOrigin = rotation == null ? undefined : 'center center'; - return { - root: {}, - path: removeUndefinedValues({ - stroke: pathColor, - strokeLinecap: strokeLinecap, - transform: rotationTransform, - transformOrigin: rotationTransformOrigin, - transition: pathTransition, - transitionDuration: pathTransitionDuration == null ? undefined : pathTransitionDuration + "s", - }), - trail: removeUndefinedValues({ - stroke: trailColor, - strokeLinecap: strokeLinecap, - transform: rotationTransform, - transformOrigin: rotationTransformOrigin, - }), - text: removeUndefinedValues({ - fill: textColor, - fontSize: textSize, - }), - background: removeUndefinedValues({ - fill: backgroundColor, - }), - }; -} -function removeUndefinedValues(obj) { - Object.keys(obj).forEach(function (key) { - if (obj[key] == null) { - delete obj[key]; - } - }); - return obj; -} - -exports.CircularProgressbar = CircularProgressbar; -exports.CircularProgressbarWithChildren = CircularProgressbarWithChildren; -exports.buildStyles = buildStyles; -//# sourceMappingURL=index.js.map diff --git a/dist/index.js.map b/dist/index.js.map deleted file mode 100644 index 3fd1731..0000000 --- a/dist/index.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.js","sources":["../src/constants.ts","../src/Path.tsx","../src/CircularProgressbar.tsx","../src/CircularProgressbarWithChildren.tsx","../src/buildStyles.ts"],"sourcesContent":["export const VIEWBOX_WIDTH = 100;\nexport const VIEWBOX_HEIGHT = 100;\nexport const VIEWBOX_HEIGHT_HALF = 50;\nexport const VIEWBOX_CENTER_X = 50;\nexport const VIEWBOX_CENTER_Y = 50;\n","import * as React from 'react';\nimport { VIEWBOX_CENTER_X, VIEWBOX_CENTER_Y } from './constants';\n\nfunction Path({\n className,\n counterClockwise,\n dashRatio,\n pathRadius,\n strokeWidth,\n style,\n}: {\n className?: string;\n counterClockwise: boolean;\n dashRatio: number;\n pathRadius: number;\n strokeWidth: number;\n style?: object;\n}) {\n return (\n \n );\n}\n\n// SVG path description specifies how the path should be drawn\nfunction getPathDescription({\n pathRadius,\n counterClockwise,\n}: {\n pathRadius: number;\n counterClockwise: boolean;\n}) {\n const radius = pathRadius;\n const rotation = counterClockwise ? 1 : 0;\n\n // Move to center of canvas\n // Relative move to top canvas\n // Relative arc to bottom of canvas\n // Relative arc to top of canvas\n return `\n M ${VIEWBOX_CENTER_X},${VIEWBOX_CENTER_Y}\n m 0,-${radius}\n a ${radius},${radius} ${rotation} 1 1 0,${2 * radius}\n a ${radius},${radius} ${rotation} 1 1 0,-${2 * radius}\n `;\n}\n\nfunction getDashStyle({\n counterClockwise,\n dashRatio,\n pathRadius,\n}: {\n counterClockwise: boolean;\n dashRatio: number;\n pathRadius: number;\n}) {\n const diameter = Math.PI * 2 * pathRadius;\n const gapLength = (1 - dashRatio) * diameter;\n\n return {\n // Have dash be full diameter, and gap be full diameter\n strokeDasharray: diameter,\n // Shift dash backward by gapLength, so gap starts appearing at correct distance\n strokeDashoffset: counterClockwise ? -gapLength : gapLength,\n };\n}\n\nexport default Path;\n","import * as React from 'react';\n\nimport {\n VIEWBOX_WIDTH,\n VIEWBOX_HEIGHT,\n VIEWBOX_HEIGHT_HALF,\n VIEWBOX_CENTER_X,\n VIEWBOX_CENTER_Y,\n} from './constants';\nimport Path from './Path';\nimport { CircularProgressbarDefaultProps, CircularProgressbarProps } from './types';\n\nclass CircularProgressbar extends React.Component {\n static defaultProps: CircularProgressbarDefaultProps = {\n background: false,\n backgroundPadding: 0,\n circleRatio: 1,\n classes: {\n root: 'CircularProgressbar',\n trail: 'CircularProgressbar-trail',\n path: 'CircularProgressbar-path',\n text: 'CircularProgressbar-text',\n background: 'CircularProgressbar-background',\n },\n counterClockwise: false,\n className: '',\n maxValue: 100,\n minValue: 0,\n strokeWidth: 8,\n styles: {\n root: {},\n trail: {},\n path: {},\n text: {},\n background: {},\n },\n text: '',\n };\n\n getBackgroundPadding() {\n if (!this.props.background) {\n // Don't add padding if not displaying background\n return 0;\n }\n return this.props.backgroundPadding;\n }\n\n getPathRadius() {\n // The radius of the path is defined to be in the middle, so in order for the path to\n // fit perfectly inside the 100x100 viewBox, need to subtract half the strokeWidth\n return VIEWBOX_HEIGHT_HALF - this.props.strokeWidth / 2 - this.getBackgroundPadding();\n }\n\n // Ratio of path length to trail length, as a value between 0 and 1\n getPathRatio() {\n const { value, minValue, maxValue } = this.props;\n const boundedValue = Math.min(Math.max(value, minValue), maxValue);\n return (boundedValue - minValue) / (maxValue - minValue);\n }\n\n render() {\n const {\n circleRatio,\n className,\n classes,\n counterClockwise,\n styles,\n strokeWidth,\n text,\n } = this.props;\n\n const pathRadius = this.getPathRadius();\n const pathRatio = this.getPathRatio();\n\n return (\n \n {this.props.background ? (\n \n ) : null}\n\n \n\n \n\n {text ? (\n \n {text}\n \n ) : null}\n \n );\n }\n}\n\nexport default CircularProgressbar;\n","import * as React from 'react';\n\nimport CircularProgressbar from './CircularProgressbar';\nimport { CircularProgressbarWrapperProps } from './types';\n\ntype CircularProgressbarWithChildrenProps = CircularProgressbarWrapperProps & {\n children?: React.ReactNode;\n};\n\n// This is a wrapper around CircularProgressbar that allows passing children,\n// which will be vertically and horizontally centered inside the progressbar automatically.\nfunction CircularProgressbarWithChildren(props: CircularProgressbarWithChildrenProps) {\n const { children, ...circularProgressbarProps } = props;\n\n return (\n
\n {/* Has an extra div wrapper because otherwise, adding content after\n this progressbar is spaced weirdly. */}\n
\n {/* Progressbar is not positioned absolutely, so that it can establish\n intrinsic size for props.children's content. */}\n \n\n {/* Children are positioned absolutely, and height adapts to the\n progressbar's intrinsic size. It appears below the progressbar,\n but negative margin moves it back up. */}\n {props.children ? (\n \n {props.children}\n
\n ) : null}\n
\n \n );\n}\n\nexport default CircularProgressbarWithChildren;\n","import { CircularProgressbarStyles } from './types';\n\nexport default function buildStyles({\n rotation,\n strokeLinecap,\n textColor,\n textSize,\n pathColor,\n pathTransition,\n pathTransitionDuration,\n trailColor,\n backgroundColor,\n}: {\n rotation?: number; // Number of turns, 0-1\n strokeLinecap?: any;\n textColor?: string;\n textSize?: string | number;\n pathColor?: string;\n pathTransition?: string;\n pathTransitionDuration?: number; // Measured in seconds\n trailColor?: string;\n backgroundColor?: string;\n}): CircularProgressbarStyles {\n const rotationTransform = rotation == null ? undefined : `rotate(${rotation}turn)`;\n const rotationTransformOrigin = rotation == null ? undefined : 'center center';\n\n return {\n root: {},\n path: removeUndefinedValues({\n stroke: pathColor,\n strokeLinecap: strokeLinecap,\n transform: rotationTransform,\n transformOrigin: rotationTransformOrigin,\n transition: pathTransition,\n transitionDuration: pathTransitionDuration == null ? undefined : `${pathTransitionDuration}s`,\n }),\n trail: removeUndefinedValues({\n stroke: trailColor,\n strokeLinecap: strokeLinecap,\n transform: rotationTransform,\n transformOrigin: rotationTransformOrigin,\n }),\n text: removeUndefinedValues({\n fill: textColor,\n fontSize: textSize,\n }),\n background: removeUndefinedValues({\n fill: backgroundColor,\n }),\n };\n}\n\nfunction removeUndefinedValues(obj: { [key: string]: any }) {\n Object.keys(obj).forEach((key: string) => {\n if (obj[key] == null) {\n delete obj[key];\n }\n });\n return obj;\n}\n"],"names":["React.createElement","React.Component"],"mappings":"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"} \ No newline at end of file diff --git a/dist/styles.css b/dist/styles.css deleted file mode 100644 index 3efc691..0000000 --- a/dist/styles.css +++ /dev/null @@ -1,66 +0,0 @@ -/* - * react-circular-progressbar styles - * All of the styles in this file are configurable! - */ - -.CircularProgressbar { - /* - * This fixes an issue where the CircularProgressbar svg has - * 0 width inside a "display: flex" container, and thus not visible. - */ - width: 100%; - /* - * This fixes a centering issue with CircularProgressbarWithChildren: - * https://github.com/kevinsqi/react-circular-progressbar/issues/94 - */ - vertical-align: middle; -} - -.CircularProgressbar .CircularProgressbar-path { - stroke: #3e98c7; - stroke-linecap: round; - -webkit-transition: stroke-dashoffset 0.5s ease 0s; - transition: stroke-dashoffset 0.5s ease 0s; -} - -.CircularProgressbar .CircularProgressbar-trail { - stroke: #d6d6d6; - /* Used when trail is not full diameter, i.e. when props.circleRatio is set */ - stroke-linecap: round; -} - -.CircularProgressbar .CircularProgressbar-text { - fill: #3e98c7; - font-size: 20px; - dominant-baseline: middle; - text-anchor: middle; -} - -.CircularProgressbar .CircularProgressbar-background { - fill: #d6d6d6; -} - -/* - * Sample background styles. Use these with e.g.: - * - * - */ -.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background { - fill: #3e98c7; -} - -.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text { - fill: #fff; -} - -.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path { - stroke: #fff; -} - -.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail { - stroke: transparent; -} diff --git a/dist/types.d.ts b/dist/types.d.ts deleted file mode 100644 index 2ddb5b1..0000000 --- a/dist/types.d.ts +++ /dev/null @@ -1,50 +0,0 @@ -import * as React from 'react'; -export declare type CircularProgressbarStyles = { - root?: React.CSSProperties; - trail?: React.CSSProperties; - path?: React.CSSProperties; - text?: React.CSSProperties; - background?: React.CSSProperties; -}; -export declare type CircularProgressbarDefaultProps = { - background: boolean; - backgroundPadding: number; - circleRatio: number; - classes: { - root: string; - trail: string; - path: string; - text: string; - background: string; - }; - className: string; - counterClockwise: boolean; - maxValue: number; - minValue: number; - strokeWidth: number; - styles: CircularProgressbarStyles; - text: string; -}; -export declare type CircularProgressbarWrapperProps = { - background?: boolean; - backgroundPadding?: number; - circleRatio?: number; - classes?: { - root: string; - trail: string; - path: string; - text: string; - background: string; - }; - className?: string; - counterClockwise?: boolean; - maxValue?: number; - minValue?: number; - strokeWidth?: number; - styles?: CircularProgressbarStyles; - text?: string; - value: number; -}; -export declare type CircularProgressbarProps = CircularProgressbarDefaultProps & { - value: number; -};