@activecollab/components 1.0.130 → 1.0.131

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -46,7 +46,7 @@ var ProgressRing = function ProgressRing(_ref) {
46
46
  return width;
47
47
  }, [progress]);
48
48
  var normalizedRadius = (0, _react.useMemo)(function () {
49
- return radius - stroke;
49
+ return radius - stroke / 2;
50
50
  }, [radius, stroke]);
51
51
  var circumference = (0, _react.useMemo)(function () {
52
52
  return normalizedRadius * 2 * Math.PI;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"names":["ProgressRing","backgroundColor","progressColor","progress","radius","stroke","className","showPercentage","fontSize","progressNumber","width","normalizedRadius","circumference","Math","PI","strokeDashoffsetOuter","strokeDashoffsetInner","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AAMA;;;;;;;;AAqBO,IAAMA,YAAoC,GAAG,SAAvCA,YAAuC,OAS9C;AAAA,MARJC,eAQI,QARJA,eAQI;AAAA,MAPJC,aAOI,QAPJA,aAOI;AAAA,2BANJC,QAMI;AAAA,MANJA,QAMI,8BANO,CAMP;AAAA,yBALJC,MAKI;AAAA,MALJA,MAKI,4BALK,EAKL;AAAA,yBAJJC,MAII;AAAA,MAJJA,MAII,4BAJK,CAIL;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,iCAFJC,cAEI;AAAA,MAFJA,cAEI,oCAFa,KAEb;AAAA,MADJC,QACI,QADJA,QACI;AACJ,MAAMC,cAAc,GAAG,oBAAQ,YAAM;AACnC,QAAIC,KAAK,GAAGP,QAAZ;;AACA,QAAIA,QAAQ,GAAG,GAAf,EAAoB;AAClBO,MAAAA,KAAK,GAAG,GAAR;AACD;;AACD,QAAIP,QAAQ,GAAG,CAAf,EAAkB;AAChBO,MAAAA,KAAK,GAAG,CAAR;AACD;;AACD,WAAOA,KAAP;AACD,GATsB,EASpB,CAACP,QAAD,CAToB,CAAvB;AAWA,MAAMQ,gBAAgB,GAAG,oBAAQ;AAAA,WAAMP,MAAM,GAAGC,MAAf;AAAA,GAAR,EAA+B,CAACD,MAAD,EAASC,MAAT,CAA/B,CAAzB;AACA,MAAMO,aAAa,GAAG,oBACpB;AAAA,WAAMD,gBAAgB,GAAG,CAAnB,GAAuBE,IAAI,CAACC,EAAlC;AAAA,GADoB,EAEpB,CAACH,gBAAD,CAFoB,CAAtB;AAIA,MAAMI,qBAAqB,GAAG,oBAC5B;AAAA,WAAMH,aAAa,GAAI,CAAC,MAAMH,cAAP,IAAyB,GAA1B,GAAiCG,aAAvD;AAAA,GAD4B,EAE5B,CAACA,aAAD,EAAgBH,cAAhB,CAF4B,CAA9B;AAIA,MAAMO,qBAAqB,GAAG,oBAC5B;AAAA,WAAMJ,aAAa,GAAIH,cAAc,GAAG,GAAlB,GAAyBG,aAA/C;AAAA,GAD4B,EAE5B,CAACA,aAAD,EAAgBH,cAAhB,CAF4B,CAA9B;AAKA,sBACE,6BAAC,iBAAD;AACE,IAAA,MAAM,EAAEL,MAAM,GAAG,CADnB;AAEE,IAAA,KAAK,EAAEA,MAAM,GAAG,CAFlB;AAGE,IAAA,SAAS,EAAE,yBAAWE,SAAX;AAHb,kBAKE,6BAAC,8BAAD;AACE,IAAA,MAAM,EAAEL,eADV;AAEE,IAAA,iBAAiB,EAAE,CAACc,qBAFtB;AAGE,IAAA,WAAW,EAAEV,MAHf;AAIE,IAAA,eAAe,YAAKO,aAAL,cAAsBA,aAAtB,CAJjB;AAKE,IAAA,CAAC,EAAED,gBALL;AAME,IAAA,EAAE,EAAEP,MANN;AAOE,IAAA,EAAE,EAAEA;AAPN,IALF,eAcE,6BAAC,8BAAD;AACE,IAAA,MAAM,EAAEF,aADV;AAEE,IAAA,iBAAiB,EAAEc,qBAFrB;AAGE,IAAA,WAAW,EAAEX,MAHf;AAIE,IAAA,eAAe,YAAKO,aAAL,cAAsBA,aAAtB,CAJjB;AAKE,IAAA,CAAC,EAAED,gBALL;AAME,IAAA,EAAE,EAAEP,MANN;AAOE,IAAA,EAAE,EAAEA;AAPN,IAdF,EAuBGG,cAAc,gBACb,6BAAC,oCAAD;AACE,IAAA,MAAM,EAAEL,aADV;AAEE,IAAA,SAAS,EAAEM,QAFb;AAGE,IAAA,CAAC,EAAC,KAHJ;AAIE,IAAA,CAAC,EAAC,MAJJ;AAKE,IAAA,gBAAgB,EAAC,SALnB;AAME,IAAA,UAAU,EAAC;AANb,KAQGC,cARH,MADa,GAWX,IAlCN,CADF;AAsCD,CAzEM;;;AA2EPT,YAAY,CAACiB,WAAb,GAA2B,cAA3B","sourcesContent":["import React, { FC, useMemo } from \"react\";\nimport {\n StyledBackgroundCircle,\n StyledForegroundCircle,\n StyledSvg,\n StyledProgressRingPercentage,\n} from \"./Styles\";\nimport classNames from \"classnames\";\n\nexport interface IProgressRingProps {\n /** Progress prop can be number. */\n progress?: number;\n /** Custom classname for styling. */\n backgroundColor?: string;\n /** Custom classname for styling. */\n progressColor?: string;\n /** Custom classname for styling. */\n radius?: number;\n /** Custom classname for styling. */\n stroke?: number;\n /** Applies passed classes */\n className?: string;\n /** Should the percentage be displayed inside ring or not */\n showPercentage?: boolean;\n /** Size of displayed percentage */\n fontSize?: number;\n}\n\nexport const ProgressRing: FC<IProgressRingProps> = ({\n backgroundColor,\n progressColor,\n progress = 0,\n radius = 20,\n stroke = 3,\n className,\n showPercentage = false,\n fontSize,\n}) => {\n const progressNumber = useMemo(() => {\n let width = progress;\n if (progress > 100) {\n width = 100;\n }\n if (progress < 0) {\n width = 0;\n }\n return width;\n }, [progress]);\n\n const normalizedRadius = useMemo(() => radius - stroke, [radius, stroke]);\n const circumference = useMemo(\n () => normalizedRadius * 2 * Math.PI,\n [normalizedRadius]\n );\n const strokeDashoffsetOuter = useMemo(\n () => circumference - ((100 - progressNumber) / 100) * circumference,\n [circumference, progressNumber]\n );\n const strokeDashoffsetInner = useMemo(\n () => circumference - (progressNumber / 100) * circumference,\n [circumference, progressNumber]\n );\n\n return (\n <StyledSvg\n height={radius * 2}\n width={radius * 2}\n className={classNames(className)}\n >\n <StyledBackgroundCircle\n $color={backgroundColor}\n $strokeDashOffset={-strokeDashoffsetOuter}\n strokeWidth={stroke}\n strokeDasharray={`${circumference} ${circumference}`}\n r={normalizedRadius}\n cx={radius}\n cy={radius}\n />\n <StyledForegroundCircle\n $color={progressColor}\n $strokeDashOffset={strokeDashoffsetInner}\n strokeWidth={stroke}\n strokeDasharray={`${circumference} ${circumference}`}\n r={normalizedRadius}\n cx={radius}\n cy={radius}\n />\n {showPercentage ? (\n <StyledProgressRingPercentage\n $color={progressColor}\n $fontSize={fontSize}\n x=\"50%\"\n y=\"-50%\"\n dominantBaseline=\"central\"\n textAnchor=\"middle\"\n >\n {progressNumber}%\n </StyledProgressRingPercentage>\n ) : null}\n </StyledSvg>\n );\n};\n\nProgressRing.displayName = \"ProgressRing\";\n"],"file":"ProgressRing.js"}
1
+ {"version":3,"sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"names":["ProgressRing","backgroundColor","progressColor","progress","radius","stroke","className","showPercentage","fontSize","progressNumber","width","normalizedRadius","circumference","Math","PI","strokeDashoffsetOuter","strokeDashoffsetInner","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AAMA;;;;;;;;AAqBO,IAAMA,YAAoC,GAAG,SAAvCA,YAAuC,OAS9C;AAAA,MARJC,eAQI,QARJA,eAQI;AAAA,MAPJC,aAOI,QAPJA,aAOI;AAAA,2BANJC,QAMI;AAAA,MANJA,QAMI,8BANO,CAMP;AAAA,yBALJC,MAKI;AAAA,MALJA,MAKI,4BALK,EAKL;AAAA,yBAJJC,MAII;AAAA,MAJJA,MAII,4BAJK,CAIL;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,iCAFJC,cAEI;AAAA,MAFJA,cAEI,oCAFa,KAEb;AAAA,MADJC,QACI,QADJA,QACI;AACJ,MAAMC,cAAc,GAAG,oBAAQ,YAAM;AACnC,QAAIC,KAAK,GAAGP,QAAZ;;AACA,QAAIA,QAAQ,GAAG,GAAf,EAAoB;AAClBO,MAAAA,KAAK,GAAG,GAAR;AACD;;AACD,QAAIP,QAAQ,GAAG,CAAf,EAAkB;AAChBO,MAAAA,KAAK,GAAG,CAAR;AACD;;AACD,WAAOA,KAAP;AACD,GATsB,EASpB,CAACP,QAAD,CAToB,CAAvB;AAWA,MAAMQ,gBAAgB,GAAG,oBAAQ;AAAA,WAAMP,MAAM,GAAGC,MAAM,GAAG,CAAxB;AAAA,GAAR,EAAmC,CAACD,MAAD,EAASC,MAAT,CAAnC,CAAzB;AACA,MAAMO,aAAa,GAAG,oBACpB;AAAA,WAAMD,gBAAgB,GAAG,CAAnB,GAAuBE,IAAI,CAACC,EAAlC;AAAA,GADoB,EAEpB,CAACH,gBAAD,CAFoB,CAAtB;AAIA,MAAMI,qBAAqB,GAAG,oBAC5B;AAAA,WAAMH,aAAa,GAAI,CAAC,MAAMH,cAAP,IAAyB,GAA1B,GAAiCG,aAAvD;AAAA,GAD4B,EAE5B,CAACA,aAAD,EAAgBH,cAAhB,CAF4B,CAA9B;AAIA,MAAMO,qBAAqB,GAAG,oBAC5B;AAAA,WAAMJ,aAAa,GAAIH,cAAc,GAAG,GAAlB,GAAyBG,aAA/C;AAAA,GAD4B,EAE5B,CAACA,aAAD,EAAgBH,cAAhB,CAF4B,CAA9B;AAKA,sBACE,6BAAC,iBAAD;AACE,IAAA,MAAM,EAAEL,MAAM,GAAG,CADnB;AAEE,IAAA,KAAK,EAAEA,MAAM,GAAG,CAFlB;AAGE,IAAA,SAAS,EAAE,yBAAWE,SAAX;AAHb,kBAKE,6BAAC,8BAAD;AACE,IAAA,MAAM,EAAEL,eADV;AAEE,IAAA,iBAAiB,EAAE,CAACc,qBAFtB;AAGE,IAAA,WAAW,EAAEV,MAHf;AAIE,IAAA,eAAe,YAAKO,aAAL,cAAsBA,aAAtB,CAJjB;AAKE,IAAA,CAAC,EAAED,gBALL;AAME,IAAA,EAAE,EAAEP,MANN;AAOE,IAAA,EAAE,EAAEA;AAPN,IALF,eAcE,6BAAC,8BAAD;AACE,IAAA,MAAM,EAAEF,aADV;AAEE,IAAA,iBAAiB,EAAEc,qBAFrB;AAGE,IAAA,WAAW,EAAEX,MAHf;AAIE,IAAA,eAAe,YAAKO,aAAL,cAAsBA,aAAtB,CAJjB;AAKE,IAAA,CAAC,EAAED,gBALL;AAME,IAAA,EAAE,EAAEP,MANN;AAOE,IAAA,EAAE,EAAEA;AAPN,IAdF,EAuBGG,cAAc,gBACb,6BAAC,oCAAD;AACE,IAAA,MAAM,EAAEL,aADV;AAEE,IAAA,SAAS,EAAEM,QAFb;AAGE,IAAA,CAAC,EAAC,KAHJ;AAIE,IAAA,CAAC,EAAC,MAJJ;AAKE,IAAA,gBAAgB,EAAC,SALnB;AAME,IAAA,UAAU,EAAC;AANb,KAQGC,cARH,MADa,GAWX,IAlCN,CADF;AAsCD,CAzEM;;;AA2EPT,YAAY,CAACiB,WAAb,GAA2B,cAA3B","sourcesContent":["import React, { FC, useMemo } from \"react\";\nimport {\n StyledBackgroundCircle,\n StyledForegroundCircle,\n StyledSvg,\n StyledProgressRingPercentage,\n} from \"./Styles\";\nimport classNames from \"classnames\";\n\nexport interface IProgressRingProps {\n /** Progress prop can be number. */\n progress?: number;\n /** Custom classname for styling. */\n backgroundColor?: string;\n /** Custom classname for styling. */\n progressColor?: string;\n /** Custom classname for styling. */\n radius?: number;\n /** Custom classname for styling. */\n stroke?: number;\n /** Applies passed classes */\n className?: string;\n /** Should the percentage be displayed inside ring or not */\n showPercentage?: boolean;\n /** Size of displayed percentage */\n fontSize?: number;\n}\n\nexport const ProgressRing: FC<IProgressRingProps> = ({\n backgroundColor,\n progressColor,\n progress = 0,\n radius = 20,\n stroke = 3,\n className,\n showPercentage = false,\n fontSize,\n}) => {\n const progressNumber = useMemo(() => {\n let width = progress;\n if (progress > 100) {\n width = 100;\n }\n if (progress < 0) {\n width = 0;\n }\n return width;\n }, [progress]);\n\n const normalizedRadius = useMemo(() => radius - stroke / 2, [radius, stroke]);\n const circumference = useMemo(\n () => normalizedRadius * 2 * Math.PI,\n [normalizedRadius]\n );\n const strokeDashoffsetOuter = useMemo(\n () => circumference - ((100 - progressNumber) / 100) * circumference,\n [circumference, progressNumber]\n );\n const strokeDashoffsetInner = useMemo(\n () => circumference - (progressNumber / 100) * circumference,\n [circumference, progressNumber]\n );\n\n return (\n <StyledSvg\n height={radius * 2}\n width={radius * 2}\n className={classNames(className)}\n >\n <StyledBackgroundCircle\n $color={backgroundColor}\n $strokeDashOffset={-strokeDashoffsetOuter}\n strokeWidth={stroke}\n strokeDasharray={`${circumference} ${circumference}`}\n r={normalizedRadius}\n cx={radius}\n cy={radius}\n />\n <StyledForegroundCircle\n $color={progressColor}\n $strokeDashOffset={strokeDashoffsetInner}\n strokeWidth={stroke}\n strokeDasharray={`${circumference} ${circumference}`}\n r={normalizedRadius}\n cx={radius}\n cy={radius}\n />\n {showPercentage ? (\n <StyledProgressRingPercentage\n $color={progressColor}\n $fontSize={fontSize}\n x=\"50%\"\n y=\"-50%\"\n dominantBaseline=\"central\"\n textAnchor=\"middle\"\n >\n {progressNumber}%\n </StyledProgressRingPercentage>\n ) : null}\n </StyledSvg>\n );\n};\n\nProgressRing.displayName = \"ProgressRing\";\n"],"file":"ProgressRing.js"}
@@ -28,7 +28,7 @@ export var ProgressRing = function ProgressRing(_ref) {
28
28
  return width;
29
29
  }, [progress]);
30
30
  var normalizedRadius = useMemo(function () {
31
- return radius - stroke;
31
+ return radius - stroke / 2;
32
32
  }, [radius, stroke]);
33
33
  var circumference = useMemo(function () {
34
34
  return normalizedRadius * 2 * Math.PI;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"names":["React","useMemo","StyledBackgroundCircle","StyledForegroundCircle","StyledSvg","StyledProgressRingPercentage","classNames","ProgressRing","backgroundColor","progressColor","progress","radius","stroke","className","showPercentage","fontSize","progressNumber","width","normalizedRadius","circumference","Math","PI","strokeDashoffsetOuter","strokeDashoffsetInner","displayName"],"mappings":"AAAA,OAAOA,KAAP,IAAoBC,OAApB,QAAmC,OAAnC;AACA,SACEC,sBADF,EAEEC,sBAFF,EAGEC,SAHF,EAIEC,4BAJF,QAKO,UALP;AAMA,OAAOC,UAAP,MAAuB,YAAvB;AAqBA,OAAO,IAAMC,YAAoC,GAAG,SAAvCA,YAAuC,OAS9C;AAAA,MARJC,eAQI,QARJA,eAQI;AAAA,MAPJC,aAOI,QAPJA,aAOI;AAAA,2BANJC,QAMI;AAAA,MANJA,QAMI,8BANO,CAMP;AAAA,yBALJC,MAKI;AAAA,MALJA,MAKI,4BALK,EAKL;AAAA,yBAJJC,MAII;AAAA,MAJJA,MAII,4BAJK,CAIL;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,iCAFJC,cAEI;AAAA,MAFJA,cAEI,oCAFa,KAEb;AAAA,MADJC,QACI,QADJA,QACI;AACJ,MAAMC,cAAc,GAAGf,OAAO,CAAC,YAAM;AACnC,QAAIgB,KAAK,GAAGP,QAAZ;;AACA,QAAIA,QAAQ,GAAG,GAAf,EAAoB;AAClBO,MAAAA,KAAK,GAAG,GAAR;AACD;;AACD,QAAIP,QAAQ,GAAG,CAAf,EAAkB;AAChBO,MAAAA,KAAK,GAAG,CAAR;AACD;;AACD,WAAOA,KAAP;AACD,GAT6B,EAS3B,CAACP,QAAD,CAT2B,CAA9B;AAWA,MAAMQ,gBAAgB,GAAGjB,OAAO,CAAC;AAAA,WAAMU,MAAM,GAAGC,MAAf;AAAA,GAAD,EAAwB,CAACD,MAAD,EAASC,MAAT,CAAxB,CAAhC;AACA,MAAMO,aAAa,GAAGlB,OAAO,CAC3B;AAAA,WAAMiB,gBAAgB,GAAG,CAAnB,GAAuBE,IAAI,CAACC,EAAlC;AAAA,GAD2B,EAE3B,CAACH,gBAAD,CAF2B,CAA7B;AAIA,MAAMI,qBAAqB,GAAGrB,OAAO,CACnC;AAAA,WAAMkB,aAAa,GAAI,CAAC,MAAMH,cAAP,IAAyB,GAA1B,GAAiCG,aAAvD;AAAA,GADmC,EAEnC,CAACA,aAAD,EAAgBH,cAAhB,CAFmC,CAArC;AAIA,MAAMO,qBAAqB,GAAGtB,OAAO,CACnC;AAAA,WAAMkB,aAAa,GAAIH,cAAc,GAAG,GAAlB,GAAyBG,aAA/C;AAAA,GADmC,EAEnC,CAACA,aAAD,EAAgBH,cAAhB,CAFmC,CAArC;AAKA,sBACE,oBAAC,SAAD;AACE,IAAA,MAAM,EAAEL,MAAM,GAAG,CADnB;AAEE,IAAA,KAAK,EAAEA,MAAM,GAAG,CAFlB;AAGE,IAAA,SAAS,EAAEL,UAAU,CAACO,SAAD;AAHvB,kBAKE,oBAAC,sBAAD;AACE,IAAA,MAAM,EAAEL,eADV;AAEE,IAAA,iBAAiB,EAAE,CAACc,qBAFtB;AAGE,IAAA,WAAW,EAAEV,MAHf;AAIE,IAAA,eAAe,EAAKO,aAAL,SAAsBA,aAJvC;AAKE,IAAA,CAAC,EAAED,gBALL;AAME,IAAA,EAAE,EAAEP,MANN;AAOE,IAAA,EAAE,EAAEA;AAPN,IALF,eAcE,oBAAC,sBAAD;AACE,IAAA,MAAM,EAAEF,aADV;AAEE,IAAA,iBAAiB,EAAEc,qBAFrB;AAGE,IAAA,WAAW,EAAEX,MAHf;AAIE,IAAA,eAAe,EAAKO,aAAL,SAAsBA,aAJvC;AAKE,IAAA,CAAC,EAAED,gBALL;AAME,IAAA,EAAE,EAAEP,MANN;AAOE,IAAA,EAAE,EAAEA;AAPN,IAdF,EAuBGG,cAAc,gBACb,oBAAC,4BAAD;AACE,IAAA,MAAM,EAAEL,aADV;AAEE,IAAA,SAAS,EAAEM,QAFb;AAGE,IAAA,CAAC,EAAC,KAHJ;AAIE,IAAA,CAAC,EAAC,MAJJ;AAKE,IAAA,gBAAgB,EAAC,SALnB;AAME,IAAA,UAAU,EAAC;AANb,KAQGC,cARH,MADa,GAWX,IAlCN,CADF;AAsCD,CAzEM;AA2EPT,YAAY,CAACiB,WAAb,GAA2B,cAA3B","sourcesContent":["import React, { FC, useMemo } from \"react\";\nimport {\n StyledBackgroundCircle,\n StyledForegroundCircle,\n StyledSvg,\n StyledProgressRingPercentage,\n} from \"./Styles\";\nimport classNames from \"classnames\";\n\nexport interface IProgressRingProps {\n /** Progress prop can be number. */\n progress?: number;\n /** Custom classname for styling. */\n backgroundColor?: string;\n /** Custom classname for styling. */\n progressColor?: string;\n /** Custom classname for styling. */\n radius?: number;\n /** Custom classname for styling. */\n stroke?: number;\n /** Applies passed classes */\n className?: string;\n /** Should the percentage be displayed inside ring or not */\n showPercentage?: boolean;\n /** Size of displayed percentage */\n fontSize?: number;\n}\n\nexport const ProgressRing: FC<IProgressRingProps> = ({\n backgroundColor,\n progressColor,\n progress = 0,\n radius = 20,\n stroke = 3,\n className,\n showPercentage = false,\n fontSize,\n}) => {\n const progressNumber = useMemo(() => {\n let width = progress;\n if (progress > 100) {\n width = 100;\n }\n if (progress < 0) {\n width = 0;\n }\n return width;\n }, [progress]);\n\n const normalizedRadius = useMemo(() => radius - stroke, [radius, stroke]);\n const circumference = useMemo(\n () => normalizedRadius * 2 * Math.PI,\n [normalizedRadius]\n );\n const strokeDashoffsetOuter = useMemo(\n () => circumference - ((100 - progressNumber) / 100) * circumference,\n [circumference, progressNumber]\n );\n const strokeDashoffsetInner = useMemo(\n () => circumference - (progressNumber / 100) * circumference,\n [circumference, progressNumber]\n );\n\n return (\n <StyledSvg\n height={radius * 2}\n width={radius * 2}\n className={classNames(className)}\n >\n <StyledBackgroundCircle\n $color={backgroundColor}\n $strokeDashOffset={-strokeDashoffsetOuter}\n strokeWidth={stroke}\n strokeDasharray={`${circumference} ${circumference}`}\n r={normalizedRadius}\n cx={radius}\n cy={radius}\n />\n <StyledForegroundCircle\n $color={progressColor}\n $strokeDashOffset={strokeDashoffsetInner}\n strokeWidth={stroke}\n strokeDasharray={`${circumference} ${circumference}`}\n r={normalizedRadius}\n cx={radius}\n cy={radius}\n />\n {showPercentage ? (\n <StyledProgressRingPercentage\n $color={progressColor}\n $fontSize={fontSize}\n x=\"50%\"\n y=\"-50%\"\n dominantBaseline=\"central\"\n textAnchor=\"middle\"\n >\n {progressNumber}%\n </StyledProgressRingPercentage>\n ) : null}\n </StyledSvg>\n );\n};\n\nProgressRing.displayName = \"ProgressRing\";\n"],"file":"ProgressRing.js"}
1
+ {"version":3,"sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"names":["React","useMemo","StyledBackgroundCircle","StyledForegroundCircle","StyledSvg","StyledProgressRingPercentage","classNames","ProgressRing","backgroundColor","progressColor","progress","radius","stroke","className","showPercentage","fontSize","progressNumber","width","normalizedRadius","circumference","Math","PI","strokeDashoffsetOuter","strokeDashoffsetInner","displayName"],"mappings":"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","sourcesContent":["import React, { FC, useMemo } from \"react\";\nimport {\n StyledBackgroundCircle,\n StyledForegroundCircle,\n StyledSvg,\n StyledProgressRingPercentage,\n} from \"./Styles\";\nimport classNames from \"classnames\";\n\nexport interface IProgressRingProps {\n /** Progress prop can be number. */\n progress?: number;\n /** Custom classname for styling. */\n backgroundColor?: string;\n /** Custom classname for styling. */\n progressColor?: string;\n /** Custom classname for styling. */\n radius?: number;\n /** Custom classname for styling. */\n stroke?: number;\n /** Applies passed classes */\n className?: string;\n /** Should the percentage be displayed inside ring or not */\n showPercentage?: boolean;\n /** Size of displayed percentage */\n fontSize?: number;\n}\n\nexport const ProgressRing: FC<IProgressRingProps> = ({\n backgroundColor,\n progressColor,\n progress = 0,\n radius = 20,\n stroke = 3,\n className,\n showPercentage = false,\n fontSize,\n}) => {\n const progressNumber = useMemo(() => {\n let width = progress;\n if (progress > 100) {\n width = 100;\n }\n if (progress < 0) {\n width = 0;\n }\n return width;\n }, [progress]);\n\n const normalizedRadius = useMemo(() => radius - stroke / 2, [radius, stroke]);\n const circumference = useMemo(\n () => normalizedRadius * 2 * Math.PI,\n [normalizedRadius]\n );\n const strokeDashoffsetOuter = useMemo(\n () => circumference - ((100 - progressNumber) / 100) * circumference,\n [circumference, progressNumber]\n );\n const strokeDashoffsetInner = useMemo(\n () => circumference - (progressNumber / 100) * circumference,\n [circumference, progressNumber]\n );\n\n return (\n <StyledSvg\n height={radius * 2}\n width={radius * 2}\n className={classNames(className)}\n >\n <StyledBackgroundCircle\n $color={backgroundColor}\n $strokeDashOffset={-strokeDashoffsetOuter}\n strokeWidth={stroke}\n strokeDasharray={`${circumference} ${circumference}`}\n r={normalizedRadius}\n cx={radius}\n cy={radius}\n />\n <StyledForegroundCircle\n $color={progressColor}\n $strokeDashOffset={strokeDashoffsetInner}\n strokeWidth={stroke}\n strokeDasharray={`${circumference} ${circumference}`}\n r={normalizedRadius}\n cx={radius}\n cy={radius}\n />\n {showPercentage ? (\n <StyledProgressRingPercentage\n $color={progressColor}\n $fontSize={fontSize}\n x=\"50%\"\n y=\"-50%\"\n dominantBaseline=\"central\"\n textAnchor=\"middle\"\n >\n {progressNumber}%\n </StyledProgressRingPercentage>\n ) : null}\n </StyledSvg>\n );\n};\n\nProgressRing.displayName = \"ProgressRing\";\n"],"file":"ProgressRing.js"}
package/dist/index.js CHANGED
@@ -11044,7 +11044,7 @@
11044
11044
  return width;
11045
11045
  }, [progress]);
11046
11046
  var normalizedRadius = React.useMemo(function () {
11047
- return radius - stroke;
11047
+ return radius - stroke / 2;
11048
11048
  }, [radius, stroke]);
11049
11049
  var circumference = React.useMemo(function () {
11050
11050
  return normalizedRadius * 2 * Math.PI;