@activecollab/components 2.0.159 → 2.0.160
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.
- package/dist/cjs/components/ProgressRing/ProgressRing.js +3 -1
- package/dist/cjs/components/ProgressRing/ProgressRing.js.map +1 -1
- package/dist/esm/components/ProgressRing/ProgressRing.d.ts.map +1 -1
- package/dist/esm/components/ProgressRing/ProgressRing.js +3 -1
- package/dist/esm/components/ProgressRing/ProgressRing.js.map +1 -1
- package/dist/index.js +3 -1
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -57,7 +57,9 @@ var ProgressCircle = exports.ProgressCircle = function ProgressCircle(_ref) {
|
|
|
57
57
|
return /*#__PURE__*/_react.default.createElement(_Styles.StyledSvg, {
|
|
58
58
|
height: radius * 2,
|
|
59
59
|
width: radius * 2,
|
|
60
|
-
className: className
|
|
60
|
+
className: className,
|
|
61
|
+
"data-progress": progressNumber,
|
|
62
|
+
"data-testid": "progress-circle"
|
|
61
63
|
}, /*#__PURE__*/_react.default.createElement(_Styles.StyledBackgroundCircle, {
|
|
62
64
|
$color: backgroundColor,
|
|
63
65
|
$strokeDashOffset: -strokeDashoffsetOuter,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressRing.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","_excluded","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","key","getOwnPropertySymbols","sourceSymbolKeys","length","indexOf","propertyIsEnumerable","sourceKeys","keys","ProgressCircle","exports","_ref","backgroundColor","progressColor","_ref$progress","progress","_ref$radius","radius","_ref$stroke","stroke","_ref$roundStroke","roundStroke","className","_ref$showPercentage","showPercentage","fontSize","console","warn","progressNumber","useMemo","width","normalizedRadius","circumference","Math","PI","strokeDashoffsetOuter","strokeDashoffsetInner","createElement","StyledSvg","height","StyledBackgroundCircle","$color","$strokeDashOffset","strokeWidth","strokeDasharray","concat","cx","cy","StyledForegroundCircle","$roundStroke","StyledProgressRingPercentage","$fontSize","x","y","dominantBaseline","textAnchor","ProgressRing","_ref2","children","rest","StyledWrapper","classNames","StyledChildrenWrapper","displayName"],"sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from \"react\";\n\nimport classNames from \"classnames\";\n\nimport {\n StyledWrapper,\n StyledChildrenWrapper,\n StyledBackgroundCircle,\n StyledForegroundCircle,\n StyledSvg,\n StyledProgressRingPercentage,\n} from \"./Styles\";\n\nexport interface ProgressCircleProps {\n /** Progress prop can be number */\n progress?: number;\n /** Background color */\n backgroundColor?: string;\n /** Progress color */\n progressColor?: string;\n /** Radius size */\n radius?: number;\n /** Stroke size */\n stroke?: number;\n /** Should stroke line be rounded */\n roundStroke?: boolean;\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 interface ProgressRingProps extends ProgressCircleProps {\n children?: ReactNode;\n}\n\nexport const ProgressCircle = ({\n backgroundColor,\n progressColor,\n progress = 0,\n radius = 20,\n stroke = 3,\n roundStroke = false,\n className,\n showPercentage = false,\n fontSize,\n}: ProgressCircleProps) => {\n if (stroke > radius) {\n console.warn(\"Stroke can not have value greater than the radius.\");\n stroke = radius;\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 return (\n <StyledSvg
|
|
1
|
+
{"version":3,"file":"ProgressRing.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","_excluded","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","key","getOwnPropertySymbols","sourceSymbolKeys","length","indexOf","propertyIsEnumerable","sourceKeys","keys","ProgressCircle","exports","_ref","backgroundColor","progressColor","_ref$progress","progress","_ref$radius","radius","_ref$stroke","stroke","_ref$roundStroke","roundStroke","className","_ref$showPercentage","showPercentage","fontSize","console","warn","progressNumber","useMemo","width","normalizedRadius","circumference","Math","PI","strokeDashoffsetOuter","strokeDashoffsetInner","createElement","StyledSvg","height","StyledBackgroundCircle","$color","$strokeDashOffset","strokeWidth","strokeDasharray","concat","cx","cy","StyledForegroundCircle","$roundStroke","StyledProgressRingPercentage","$fontSize","x","y","dominantBaseline","textAnchor","ProgressRing","_ref2","children","rest","StyledWrapper","classNames","StyledChildrenWrapper","displayName"],"sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from \"react\";\n\nimport classNames from \"classnames\";\n\nimport {\n StyledWrapper,\n StyledChildrenWrapper,\n StyledBackgroundCircle,\n StyledForegroundCircle,\n StyledSvg,\n StyledProgressRingPercentage,\n} from \"./Styles\";\n\nexport interface ProgressCircleProps {\n /** Progress prop can be number */\n progress?: number;\n /** Background color */\n backgroundColor?: string;\n /** Progress color */\n progressColor?: string;\n /** Radius size */\n radius?: number;\n /** Stroke size */\n stroke?: number;\n /** Should stroke line be rounded */\n roundStroke?: boolean;\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 interface ProgressRingProps extends ProgressCircleProps {\n children?: ReactNode;\n}\n\nexport const ProgressCircle = ({\n backgroundColor,\n progressColor,\n progress = 0,\n radius = 20,\n stroke = 3,\n roundStroke = false,\n className,\n showPercentage = false,\n fontSize,\n}: ProgressCircleProps) => {\n if (stroke > radius) {\n console.warn(\"Stroke can not have value greater than the radius.\");\n stroke = radius;\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 return (\n <StyledSvg\n height={radius * 2}\n width={radius * 2}\n className={className}\n data-progress={progressNumber}\n data-testid=\"progress-circle\"\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 $roundStroke={roundStroke}\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\nexport const ProgressRing = ({\n className,\n children,\n ...rest\n}: ProgressRingProps) => {\n return (\n <StyledWrapper\n className={classNames(className)}\n data-testid=\"progress-ring\"\n >\n <ProgressCircle {...rest} />\n {children ? (\n <StyledChildrenWrapper>{children}</StyledChildrenWrapper>\n ) : null}\n </StyledWrapper>\n );\n};\n\nProgressRing.displayName = \"ProgressRing\";\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,OAAA,GAAAH,OAAA;AAOkB,IAAAI,SAAA;AAAA,SAAAF,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAV,wBAAAU,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAH,UAAA,SAAAG,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAF,OAAA,EAAAE,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAJ,CAAA,UAAAG,CAAA,CAAAE,GAAA,CAAAL,CAAA,OAAAM,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAZ,CAAA,oBAAAY,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAY,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAX,CAAA,EAAAY,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAZ,CAAA,CAAAY,CAAA,YAAAN,CAAA,CAAAR,OAAA,GAAAE,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAc,GAAA,CAAAjB,CAAA,EAAAM,CAAA,GAAAA,CAAA;AAAA,SAAAY,yBAAAC,MAAA,EAAAC,QAAA,QAAAD,MAAA,yBAAAE,MAAA,GAAAC,6BAAA,CAAAH,MAAA,EAAAC,QAAA,OAAAG,GAAA,EAAAP,CAAA,MAAAP,MAAA,CAAAe,qBAAA,QAAAC,gBAAA,GAAAhB,MAAA,CAAAe,qBAAA,CAAAL,MAAA,QAAAH,CAAA,MAAAA,CAAA,GAAAS,gBAAA,CAAAC,MAAA,EAAAV,CAAA,MAAAO,GAAA,GAAAE,gBAAA,CAAAT,CAAA,OAAAI,QAAA,CAAAO,OAAA,CAAAJ,GAAA,uBAAAd,MAAA,CAAAI,SAAA,CAAAe,oBAAA,CAAAb,IAAA,CAAAI,MAAA,EAAAI,GAAA,aAAAF,MAAA,CAAAE,GAAA,IAAAJ,MAAA,CAAAI,GAAA,cAAAF,MAAA;AAAA,SAAAC,8BAAAH,MAAA,EAAAC,QAAA,QAAAD,MAAA,yBAAAE,MAAA,WAAAQ,UAAA,GAAApB,MAAA,CAAAqB,IAAA,CAAAX,MAAA,OAAAI,GAAA,EAAAP,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAa,UAAA,CAAAH,MAAA,EAAAV,CAAA,MAAAO,GAAA,GAAAM,UAAA,CAAAb,CAAA,OAAAI,QAAA,CAAAO,OAAA,CAAAJ,GAAA,kBAAAF,MAAA,CAAAE,GAAA,IAAAJ,MAAA,CAAAI,GAAA,YAAAF,MAAA;AA2BX,IAAMU,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAG,SAAjBA,cAAcA,CAAAE,IAAA,EAUA;EAAA,IATzBC,eAAe,GAAAD,IAAA,CAAfC,eAAe;IACfC,aAAa,GAAAF,IAAA,CAAbE,aAAa;IAAAC,aAAA,GAAAH,IAAA,CACbI,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,CAAC,GAAAA,aAAA;IAAAE,WAAA,GAAAL,IAAA,CACZM,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,EAAE,GAAAA,WAAA;IAAAE,WAAA,GAAAP,IAAA,CACXQ,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,CAAC,GAAAA,WAAA;IAAAE,gBAAA,GAAAT,IAAA,CACVU,WAAW;IAAXA,WAAW,GAAAD,gBAAA,cAAG,KAAK,GAAAA,gBAAA;IACnBE,SAAS,GAAAX,IAAA,CAATW,SAAS;IAAAC,mBAAA,GAAAZ,IAAA,CACTa,cAAc;IAAdA,cAAc,GAAAD,mBAAA,cAAG,KAAK,GAAAA,mBAAA;IACtBE,QAAQ,GAAAd,IAAA,CAARc,QAAQ;EAER,IAAIN,MAAM,GAAGF,MAAM,EAAE;IACnBS,OAAO,CAACC,IAAI,CAAC,oDAAoD,CAAC;IAClER,MAAM,GAAGF,MAAM;EACjB;EACA,IAAMW,cAAc,GAAG,IAAAC,cAAO,EAAC,YAAM;IACnC,IAAIC,KAAK,GAAGf,QAAQ;IACpB,IAAIA,QAAQ,GAAG,GAAG,EAAE;MAClBe,KAAK,GAAG,GAAG;IACb;IACA,IAAIf,QAAQ,GAAG,CAAC,EAAE;MAChBe,KAAK,GAAG,CAAC;IACX;IACA,OAAOA,KAAK;EACd,CAAC,EAAE,CAACf,QAAQ,CAAC,CAAC;EAEd,IAAMgB,gBAAgB,GAAG,IAAAF,cAAO,EAAC;IAAA,OAAMZ,MAAM,GAAGE,MAAM,GAAG,CAAC;EAAA,GAAE,CAACF,MAAM,EAAEE,MAAM,CAAC,CAAC;EAC7E,IAAMa,aAAa,GAAG,IAAAH,cAAO,EAC3B;IAAA,OAAME,gBAAgB,GAAG,CAAC,GAAGE,IAAI,CAACC,EAAE;EAAA,GACpC,CAACH,gBAAgB,CACnB,CAAC;EACD,IAAMI,qBAAqB,GAAG,IAAAN,cAAO,EACnC;IAAA,OAAMG,aAAa,GAAI,CAAC,GAAG,GAAGJ,cAAc,IAAI,GAAG,GAAII,aAAa;EAAA,GACpE,CAACA,aAAa,EAAEJ,cAAc,CAChC,CAAC;EACD,IAAMQ,qBAAqB,GAAG,IAAAP,cAAO,EACnC;IAAA,OAAMG,aAAa,GAAIJ,cAAc,GAAG,GAAG,GAAII,aAAa;EAAA,GAC5D,CAACA,aAAa,EAAEJ,cAAc,CAChC,CAAC;EACD,oBACE7D,MAAA,CAAAS,OAAA,CAAA6D,aAAA,CAACjE,OAAA,CAAAkE,SAAS;IACRC,MAAM,EAAEtB,MAAM,GAAG,CAAE;IACnBa,KAAK,EAAEb,MAAM,GAAG,CAAE;IAClBK,SAAS,EAAEA,SAAU;IACrB,iBAAeM,cAAe;IAC9B,eAAY;EAAiB,gBAE7B7D,MAAA,CAAAS,OAAA,CAAA6D,aAAA,CAACjE,OAAA,CAAAoE,sBAAsB;IACrBC,MAAM,EAAE7B,eAAgB;IACxB8B,iBAAiB,EAAE,CAACP,qBAAsB;IAC1CQ,WAAW,EAAExB,MAAO;IACpByB,eAAe,KAAAC,MAAA,CAAKb,aAAa,OAAAa,MAAA,CAAIb,aAAa,CAAG;IACrDpD,CAAC,EAAEmD,gBAAiB;IACpBe,EAAE,EAAE7B,MAAO;IACX8B,EAAE,EAAE9B;EAAO,CACZ,CAAC,eACFlD,MAAA,CAAAS,OAAA,CAAA6D,aAAA,CAACjE,OAAA,CAAA4E,sBAAsB;IACrBP,MAAM,EAAE5B,aAAc;IACtB6B,iBAAiB,EAAEN,qBAAsB;IACzCO,WAAW,EAAExB,MAAO;IACpByB,eAAe,KAAAC,MAAA,CAAKb,aAAa,OAAAa,MAAA,CAAIb,aAAa,CAAG;IACrDiB,YAAY,EAAE5B,WAAY;IAC1BzC,CAAC,EAAEmD,gBAAiB;IACpBe,EAAE,EAAE7B,MAAO;IACX8B,EAAE,EAAE9B;EAAO,CACZ,CAAC,EACDO,cAAc,gBACbzD,MAAA,CAAAS,OAAA,CAAA6D,aAAA,CAACjE,OAAA,CAAA8E,4BAA4B;IAC3BT,MAAM,EAAE5B,aAAc;IACtBsC,SAAS,EAAE1B,QAAS;IACpB2B,CAAC,EAAC,KAAK;IACPC,CAAC,EAAC,MAAM;IACRC,gBAAgB,EAAC,SAAS;IAC1BC,UAAU,EAAC;EAAQ,GAElB3B,cAAc,EAAC,GACY,CAAC,GAC7B,IACK,CAAC;AAEhB,CAAC;AAEM,IAAM4B,YAAY,GAAA9C,OAAA,CAAA8C,YAAA,GAAG,SAAfA,YAAYA,CAAAC,KAAA,EAIA;EAAA,IAHvBnC,SAAS,GAAAmC,KAAA,CAATnC,SAAS;IACToC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IACLC,IAAI,GAAA/D,wBAAA,CAAA6D,KAAA,EAAApF,SAAA;EAEP,oBACEN,MAAA,CAAAS,OAAA,CAAA6D,aAAA,CAACjE,OAAA,CAAAwF,aAAa;IACZtC,SAAS,EAAE,IAAAuC,mBAAU,EAACvC,SAAS,CAAE;IACjC,eAAY;EAAe,gBAE3BvD,MAAA,CAAAS,OAAA,CAAA6D,aAAA,CAAC5B,cAAc,EAAKkD,IAAO,CAAC,EAC3BD,QAAQ,gBACP3F,MAAA,CAAAS,OAAA,CAAA6D,aAAA,CAACjE,OAAA,CAAA0F,qBAAqB,QAAEJ,QAAgC,CAAC,GACvD,IACS,CAAC;AAEpB,CAAC;AAEDF,YAAY,CAACO,WAAW,GAAG,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressRing.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAalD,MAAM,WAAW,mBAAmB;IAClC,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qBAAqB;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,iBAAkB,SAAQ,mBAAmB;IAC5D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,oHAUxB,mBAAmB,
|
|
1
|
+
{"version":3,"file":"ProgressRing.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAalD,MAAM,WAAW,mBAAmB;IAClC,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qBAAqB;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,iBAAkB,SAAQ,mBAAmB;IAC5D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,oHAUxB,mBAAmB,sBAsErB,CAAC;AAEF,eAAO,MAAM,YAAY;uCAItB,iBAAiB;;CAYnB,CAAC"}
|
|
@@ -34,7 +34,9 @@ export const ProgressCircle = _ref => {
|
|
|
34
34
|
return /*#__PURE__*/React.createElement(StyledSvg, {
|
|
35
35
|
height: radius * 2,
|
|
36
36
|
width: radius * 2,
|
|
37
|
-
className: className
|
|
37
|
+
className: className,
|
|
38
|
+
"data-progress": progressNumber,
|
|
39
|
+
"data-testid": "progress-circle"
|
|
38
40
|
}, /*#__PURE__*/React.createElement(StyledBackgroundCircle, {
|
|
39
41
|
$color: backgroundColor,
|
|
40
42
|
$strokeDashOffset: -strokeDashoffsetOuter,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressRing.js","names":["React","useMemo","classNames","StyledWrapper","StyledChildrenWrapper","StyledBackgroundCircle","StyledForegroundCircle","StyledSvg","StyledProgressRingPercentage","ProgressCircle","_ref","backgroundColor","progressColor","progress","radius","stroke","roundStroke","className","showPercentage","fontSize","console","warn","progressNumber","width","normalizedRadius","circumference","Math","PI","strokeDashoffsetOuter","strokeDashoffsetInner","createElement","height","$color","$strokeDashOffset","strokeWidth","strokeDasharray","r","cx","cy","$roundStroke","$fontSize","x","y","dominantBaseline","textAnchor","ProgressRing","_ref2","children","rest","displayName"],"sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from \"react\";\n\nimport classNames from \"classnames\";\n\nimport {\n StyledWrapper,\n StyledChildrenWrapper,\n StyledBackgroundCircle,\n StyledForegroundCircle,\n StyledSvg,\n StyledProgressRingPercentage,\n} from \"./Styles\";\n\nexport interface ProgressCircleProps {\n /** Progress prop can be number */\n progress?: number;\n /** Background color */\n backgroundColor?: string;\n /** Progress color */\n progressColor?: string;\n /** Radius size */\n radius?: number;\n /** Stroke size */\n stroke?: number;\n /** Should stroke line be rounded */\n roundStroke?: boolean;\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 interface ProgressRingProps extends ProgressCircleProps {\n children?: ReactNode;\n}\n\nexport const ProgressCircle = ({\n backgroundColor,\n progressColor,\n progress = 0,\n radius = 20,\n stroke = 3,\n roundStroke = false,\n className,\n showPercentage = false,\n fontSize,\n}: ProgressCircleProps) => {\n if (stroke > radius) {\n console.warn(\"Stroke can not have value greater than the radius.\");\n stroke = radius;\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 return (\n <StyledSvg
|
|
1
|
+
{"version":3,"file":"ProgressRing.js","names":["React","useMemo","classNames","StyledWrapper","StyledChildrenWrapper","StyledBackgroundCircle","StyledForegroundCircle","StyledSvg","StyledProgressRingPercentage","ProgressCircle","_ref","backgroundColor","progressColor","progress","radius","stroke","roundStroke","className","showPercentage","fontSize","console","warn","progressNumber","width","normalizedRadius","circumference","Math","PI","strokeDashoffsetOuter","strokeDashoffsetInner","createElement","height","$color","$strokeDashOffset","strokeWidth","strokeDasharray","r","cx","cy","$roundStroke","$fontSize","x","y","dominantBaseline","textAnchor","ProgressRing","_ref2","children","rest","displayName"],"sources":["../../../../src/components/ProgressRing/ProgressRing.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from \"react\";\n\nimport classNames from \"classnames\";\n\nimport {\n StyledWrapper,\n StyledChildrenWrapper,\n StyledBackgroundCircle,\n StyledForegroundCircle,\n StyledSvg,\n StyledProgressRingPercentage,\n} from \"./Styles\";\n\nexport interface ProgressCircleProps {\n /** Progress prop can be number */\n progress?: number;\n /** Background color */\n backgroundColor?: string;\n /** Progress color */\n progressColor?: string;\n /** Radius size */\n radius?: number;\n /** Stroke size */\n stroke?: number;\n /** Should stroke line be rounded */\n roundStroke?: boolean;\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 interface ProgressRingProps extends ProgressCircleProps {\n children?: ReactNode;\n}\n\nexport const ProgressCircle = ({\n backgroundColor,\n progressColor,\n progress = 0,\n radius = 20,\n stroke = 3,\n roundStroke = false,\n className,\n showPercentage = false,\n fontSize,\n}: ProgressCircleProps) => {\n if (stroke > radius) {\n console.warn(\"Stroke can not have value greater than the radius.\");\n stroke = radius;\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 return (\n <StyledSvg\n height={radius * 2}\n width={radius * 2}\n className={className}\n data-progress={progressNumber}\n data-testid=\"progress-circle\"\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 $roundStroke={roundStroke}\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\nexport const ProgressRing = ({\n className,\n children,\n ...rest\n}: ProgressRingProps) => {\n return (\n <StyledWrapper\n className={classNames(className)}\n data-testid=\"progress-ring\"\n >\n <ProgressCircle {...rest} />\n {children ? (\n <StyledChildrenWrapper>{children}</StyledChildrenWrapper>\n ) : null}\n </StyledWrapper>\n );\n};\n\nProgressRing.displayName = \"ProgressRing\";\n"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -19417,7 +19417,9 @@
|
|
|
19417
19417
|
return /*#__PURE__*/React__default["default"].createElement(StyledSvg, {
|
|
19418
19418
|
height: radius * 2,
|
|
19419
19419
|
width: radius * 2,
|
|
19420
|
-
className: className
|
|
19420
|
+
className: className,
|
|
19421
|
+
"data-progress": progressNumber,
|
|
19422
|
+
"data-testid": "progress-circle"
|
|
19421
19423
|
}, /*#__PURE__*/React__default["default"].createElement(StyledBackgroundCircle, {
|
|
19422
19424
|
$color: backgroundColor,
|
|
19423
19425
|
$strokeDashOffset: -strokeDashoffsetOuter,
|