@coorpacademy/components 11.32.23 → 11.32.24-alpha.1

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.
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/circular-progress-bar/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,6BAA6B,EAA+B,MAAM,SAAS,CAAC;AAmBpF,QAAA,MAAM,mBAAmB;gGAOtB,6BAA6B;;;;;;;;;CAgD/B,CAAC;AAIF,eAAe,mBAAmB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/circular-progress-bar/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,6BAA6B,EAA+B,MAAM,SAAS,CAAC;AAmBpF,QAAA,MAAM,mBAAmB;gGAOtB,6BAA6B;;;;;;;;;CAqD/B,CAAC;AAIF,eAAe,mBAAmB,CAAC"}
@@ -1,5 +1,5 @@
1
1
  import _isNull from "lodash/fp/isNull";
2
- import React, { useMemo, useState, useEffect } from 'react';
2
+ import React, { useMemo, useState, useEffect, useRef } from 'react';
3
3
  import { CircularProgressBarPropTypes } from './types';
4
4
  import style from './style.css';
5
5
 
@@ -26,6 +26,7 @@ const CircularProgressBar = ({
26
26
  'data-name': dataName
27
27
  }) => {
28
28
  const [offset, setOffset] = useState(null);
29
+ const prevProgressionRef = useRef(null);
29
30
  const {
30
31
  center,
31
32
  radius,
@@ -40,7 +41,13 @@ const CircularProgressBar = ({
40
41
  length: length_
41
42
  };
42
43
  }, [size, strokeWidth]);
43
- useEffect(() => setOffset(Math.ceil(length * ((100 - progression) / 100))), [length, progression]);
44
+ useEffect(() => {
45
+ if (prevProgressionRef.current !== progression) {
46
+ setOffset(Math.ceil(length * ((100 - progression) / 100)));
47
+ prevProgressionRef.current = progression;
48
+ }
49
+ }, [length, progression]);
50
+ console.log('test progress bar');
44
51
  return /*#__PURE__*/React.createElement("div", {
45
52
  className: style.container,
46
53
  "aria-label": ariaLabel,
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","useMemo","useState","useEffect","CircularProgressBarPropTypes","style","ProgressionGradient","CircularProgressBar","label","progression","size","strokeWidth","ariaLabel","dataName","offset","setOffset","center","radius","length","center_","radius_","length_","Math","ceil","PI","container","svg","mainCircle","progressionCircle","infos","propTypes"],"sources":["../../../src/atom/circular-progress-bar/index.tsx"],"sourcesContent":["import React, {useMemo, useState, useEffect} from 'react';\nimport {isNull} from 'lodash/fp';\nimport {LearningPriorityCardPropTypes, CircularProgressBarPropTypes} from './types';\nimport style from './style.css';\n\nconst ProgressionGradient = () => (\n <defs>\n <linearGradient\n id=\"gradient-stroke-progression\"\n x1=\"81\"\n y1=\"0\"\n x2=\"81\"\n y2=\"162\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"#35CC7F\" />\n <stop offset=\"1\" stopColor=\"#55F2A7\" />\n </linearGradient>\n </defs>\n);\n\nconst CircularProgressBar = ({\n label,\n progression,\n size,\n strokeWidth,\n 'aria-label': ariaLabel,\n 'data-name': dataName\n}: LearningPriorityCardPropTypes) => {\n const [offset, setOffset] = useState<null | number>(null);\n\n const {center, radius, length} = useMemo(() => {\n const center_ = size / 2;\n const radius_ = center_ - strokeWidth;\n const length_ = Math.ceil(2 * Math.PI * radius_);\n\n return {center: center_, radius: radius_, length: length_};\n }, [size, strokeWidth]);\n\n useEffect(\n () => setOffset(Math.ceil(length * ((100 - progression) / 100))),\n [length, progression]\n );\n\n return (\n <div className={style.container} aria-label={ariaLabel} data-name={dataName}>\n <svg className={style.svg} width={size} height={size}>\n <ProgressionGradient />\n <circle\n className={style.mainCircle}\n cx={center}\n cy={center}\n r={radius}\n strokeWidth={3}\n fill=\"transparent\"\n />\n <circle cx={center} cy={center} r={radius - (10 / radius) * 100} fill=\"#fafafa\" />\n <circle\n className={style.progressionCircle}\n cx={center}\n cy={center}\n r={radius}\n stroke={`url(#gradient-stroke-progression)`}\n strokeWidth={strokeWidth}\n strokeDasharray={length}\n strokeDashoffset={isNull(offset) ? length : offset}\n fill=\"transparent\"\n strokeLinecap=\"round\"\n />\n </svg>\n <div className={style.infos}>\n <span className={style.progression}>{progression}%</span>\n <span className={style.label}>{label}</span>\n </div>\n </div>\n );\n};\n\nCircularProgressBar.propTypes = CircularProgressBarPropTypes;\n\nexport default CircularProgressBar;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["React","useMemo","useState","useEffect","useRef","CircularProgressBarPropTypes","style","ProgressionGradient","CircularProgressBar","label","progression","size","strokeWidth","ariaLabel","dataName","offset","setOffset","prevProgressionRef","center","radius","length","center_","radius_","length_","Math","ceil","PI","current","console","log","container","svg","mainCircle","progressionCircle","infos","propTypes"],"sources":["../../../src/atom/circular-progress-bar/index.tsx"],"sourcesContent":["import React, {useMemo, useState, useEffect, useRef} from 'react';\nimport {isNull} from 'lodash/fp';\nimport {LearningPriorityCardPropTypes, CircularProgressBarPropTypes} from './types';\nimport style from './style.css';\n\nconst ProgressionGradient = () => (\n <defs>\n <linearGradient\n id=\"gradient-stroke-progression\"\n x1=\"81\"\n y1=\"0\"\n x2=\"81\"\n y2=\"162\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"#35CC7F\" />\n <stop offset=\"1\" stopColor=\"#55F2A7\" />\n </linearGradient>\n </defs>\n);\n\nconst CircularProgressBar = ({\n label,\n progression,\n size,\n strokeWidth,\n 'aria-label': ariaLabel,\n 'data-name': dataName\n}: LearningPriorityCardPropTypes) => {\n const [offset, setOffset] = useState<null | number>(null);\n const prevProgressionRef = useRef<number | null>(null);\n\n const {center, radius, length} = useMemo(() => {\n const center_ = size / 2;\n const radius_ = center_ - strokeWidth;\n const length_ = Math.ceil(2 * Math.PI * radius_);\n\n return {center: center_, radius: radius_, length: length_};\n }, [size, strokeWidth]);\n\n useEffect(() => {\n if (prevProgressionRef.current !== progression) {\n setOffset(Math.ceil(length * ((100 - progression) / 100)));\n prevProgressionRef.current = progression;\n }\n }, [length, progression]);\n\n console.log('test progress bar');\n\n return (\n <div className={style.container} aria-label={ariaLabel} data-name={dataName}>\n <svg className={style.svg} width={size} height={size}>\n <ProgressionGradient />\n <circle\n className={style.mainCircle}\n cx={center}\n cy={center}\n r={radius}\n strokeWidth={3}\n fill=\"transparent\"\n />\n <circle cx={center} cy={center} r={radius - (10 / radius) * 100} fill=\"#fafafa\" />\n <circle\n className={style.progressionCircle}\n cx={center}\n cy={center}\n r={radius}\n stroke={`url(#gradient-stroke-progression)`}\n strokeWidth={strokeWidth}\n strokeDasharray={length}\n strokeDashoffset={isNull(offset) ? length : offset}\n fill=\"transparent\"\n strokeLinecap=\"round\"\n />\n </svg>\n <div className={style.infos}>\n <span className={style.progression}>{progression}%</span>\n <span className={style.label}>{label}</span>\n </div>\n </div>\n );\n};\n\nCircularProgressBar.propTypes = CircularProgressBarPropTypes;\n\nexport default CircularProgressBar;\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/circular-progress-bar/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,6BAA6B,EAA+B,MAAM,SAAS,CAAC;AAmBpF,QAAA,MAAM,mBAAmB;gGAOtB,6BAA6B;;;;;;;;;CAgD/B,CAAC;AAIF,eAAe,mBAAmB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/circular-progress-bar/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,6BAA6B,EAA+B,MAAM,SAAS,CAAC;AAmBpF,QAAA,MAAM,mBAAmB;gGAOtB,6BAA6B;;;;;;;;;CAqD/B,CAAC;AAIF,eAAe,mBAAmB,CAAC"}
@@ -40,6 +40,7 @@ const CircularProgressBar = ({
40
40
  'data-name': dataName
41
41
  }) => {
42
42
  const [offset, setOffset] = (0, _react.useState)(null);
43
+ const prevProgressionRef = (0, _react.useRef)(null);
43
44
  const {
44
45
  center,
45
46
  radius,
@@ -54,7 +55,13 @@ const CircularProgressBar = ({
54
55
  length: length_
55
56
  };
56
57
  }, [size, strokeWidth]);
57
- (0, _react.useEffect)(() => setOffset(Math.ceil(length * ((100 - progression) / 100))), [length, progression]);
58
+ (0, _react.useEffect)(() => {
59
+ if (prevProgressionRef.current !== progression) {
60
+ setOffset(Math.ceil(length * ((100 - progression) / 100)));
61
+ prevProgressionRef.current = progression;
62
+ }
63
+ }, [length, progression]);
64
+ console.log('test progress bar');
58
65
  return /*#__PURE__*/_react.default.createElement("div", {
59
66
  className: _style.default.container,
60
67
  "aria-label": ariaLabel,
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["ProgressionGradient","CircularProgressBar","label","progression","size","strokeWidth","ariaLabel","dataName","offset","setOffset","useState","center","radius","length","useMemo","center_","radius_","length_","Math","ceil","PI","useEffect","style","container","svg","mainCircle","progressionCircle","infos","propTypes","CircularProgressBarPropTypes"],"sources":["../../../src/atom/circular-progress-bar/index.tsx"],"sourcesContent":["import React, {useMemo, useState, useEffect} from 'react';\nimport {isNull} from 'lodash/fp';\nimport {LearningPriorityCardPropTypes, CircularProgressBarPropTypes} from './types';\nimport style from './style.css';\n\nconst ProgressionGradient = () => (\n <defs>\n <linearGradient\n id=\"gradient-stroke-progression\"\n x1=\"81\"\n y1=\"0\"\n x2=\"81\"\n y2=\"162\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"#35CC7F\" />\n <stop offset=\"1\" stopColor=\"#55F2A7\" />\n </linearGradient>\n </defs>\n);\n\nconst CircularProgressBar = ({\n label,\n progression,\n size,\n strokeWidth,\n 'aria-label': ariaLabel,\n 'data-name': dataName\n}: LearningPriorityCardPropTypes) => {\n const [offset, setOffset] = useState<null | number>(null);\n\n const {center, radius, length} = useMemo(() => {\n const center_ = size / 2;\n const radius_ = center_ - strokeWidth;\n const length_ = Math.ceil(2 * Math.PI * radius_);\n\n return {center: center_, radius: radius_, length: length_};\n }, [size, strokeWidth]);\n\n useEffect(\n () => setOffset(Math.ceil(length * ((100 - progression) / 100))),\n [length, progression]\n );\n\n return (\n <div className={style.container} aria-label={ariaLabel} data-name={dataName}>\n <svg className={style.svg} width={size} height={size}>\n <ProgressionGradient />\n <circle\n className={style.mainCircle}\n cx={center}\n cy={center}\n r={radius}\n strokeWidth={3}\n fill=\"transparent\"\n />\n <circle cx={center} cy={center} r={radius - (10 / radius) * 100} fill=\"#fafafa\" />\n <circle\n className={style.progressionCircle}\n cx={center}\n cy={center}\n r={radius}\n stroke={`url(#gradient-stroke-progression)`}\n strokeWidth={strokeWidth}\n strokeDasharray={length}\n strokeDashoffset={isNull(offset) ? length : offset}\n fill=\"transparent\"\n strokeLinecap=\"round\"\n />\n </svg>\n <div className={style.infos}>\n <span className={style.progression}>{progression}%</span>\n <span className={style.label}>{label}</span>\n </div>\n </div>\n );\n};\n\nCircularProgressBar.propTypes = CircularProgressBarPropTypes;\n\nexport default CircularProgressBar;\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;;;;;;;AAEA,MAAMA,mBAAmB,GAAG,mBAC1B,wDACE;EACE,EAAE,EAAC,6BADL;EAEE,EAAE,EAAC,IAFL;EAGE,EAAE,EAAC,GAHL;EAIE,EAAE,EAAC,IAJL;EAKE,EAAE,EAAC,KALL;EAME,aAAa,EAAC;AANhB,gBAQE;EAAM,SAAS,EAAC;AAAhB,EARF,eASE;EAAM,MAAM,EAAC,GAAb;EAAiB,SAAS,EAAC;AAA3B,EATF,CADF,CADF;;AAgBA,MAAMC,mBAAmB,GAAG,CAAC;EAC3BC,KAD2B;EAE3BC,WAF2B;EAG3BC,IAH2B;EAI3BC,WAJ2B;EAK3B,cAAcC,SALa;EAM3B,aAAaC;AANc,CAAD,KAOS;EACnC,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsB,IAAAC,eAAA,EAAwB,IAAxB,CAA5B;EAEA,MAAM;IAACC,MAAD;IAASC,MAAT;IAAiBC;EAAjB,IAA2B,IAAAC,cAAA,EAAQ,MAAM;IAC7C,MAAMC,OAAO,GAAGX,IAAI,GAAG,CAAvB;IACA,MAAMY,OAAO,GAAGD,OAAO,GAAGV,WAA1B;IACA,MAAMY,OAAO,GAAGC,IAAI,CAACC,IAAL,CAAU,IAAID,IAAI,CAACE,EAAT,GAAcJ,OAAxB,CAAhB;IAEA,OAAO;MAACL,MAAM,EAAEI,OAAT;MAAkBH,MAAM,EAAEI,OAA1B;MAAmCH,MAAM,EAAEI;IAA3C,CAAP;EACD,CANgC,EAM9B,CAACb,IAAD,EAAOC,WAAP,CAN8B,CAAjC;EAQA,IAAAgB,gBAAA,EACE,MAAMZ,SAAS,CAACS,IAAI,CAACC,IAAL,CAAUN,MAAM,IAAI,CAAC,MAAMV,WAAP,IAAsB,GAA1B,CAAhB,CAAD,CADjB,EAEE,CAACU,MAAD,EAASV,WAAT,CAFF;EAKA,oBACE;IAAK,SAAS,EAAEmB,cAAA,CAAMC,SAAtB;IAAiC,cAAYjB,SAA7C;IAAwD,aAAWC;EAAnE,gBACE;IAAK,SAAS,EAAEe,cAAA,CAAME,GAAtB;IAA2B,KAAK,EAAEpB,IAAlC;IAAwC,MAAM,EAAEA;EAAhD,gBACE,6BAAC,mBAAD,OADF,eAEE;IACE,SAAS,EAAEkB,cAAA,CAAMG,UADnB;IAEE,EAAE,EAAEd,MAFN;IAGE,EAAE,EAAEA,MAHN;IAIE,CAAC,EAAEC,MAJL;IAKE,WAAW,EAAE,CALf;IAME,IAAI,EAAC;EANP,EAFF,eAUE;IAAQ,EAAE,EAAED,MAAZ;IAAoB,EAAE,EAAEA,MAAxB;IAAgC,CAAC,EAAEC,MAAM,GAAI,KAAKA,MAAN,GAAgB,GAA5D;IAAiE,IAAI,EAAC;EAAtE,EAVF,eAWE;IACE,SAAS,EAAEU,cAAA,CAAMI,iBADnB;IAEE,EAAE,EAAEf,MAFN;IAGE,EAAE,EAAEA,MAHN;IAIE,CAAC,EAAEC,MAJL;IAKE,MAAM,EAAG,mCALX;IAME,WAAW,EAAEP,WANf;IAOE,eAAe,EAAEQ,MAPnB;IAQE,gBAAgB,EAAE,sBAAOL,MAAP,IAAiBK,MAAjB,GAA0BL,MAR9C;IASE,IAAI,EAAC,aATP;IAUE,aAAa,EAAC;EAVhB,EAXF,CADF,eAyBE;IAAK,SAAS,EAAEc,cAAA,CAAMK;EAAtB,gBACE;IAAM,SAAS,EAAEL,cAAA,CAAMnB;EAAvB,GAAqCA,WAArC,MADF,eAEE;IAAM,SAAS,EAAEmB,cAAA,CAAMpB;EAAvB,GAA+BA,KAA/B,CAFF,CAzBF,CADF;AAgCD,CAvDD;;AAyDAD,mBAAmB,CAAC2B,SAApB,2CAAgCC,mCAAhC;eAEe5B,mB"}
1
+ {"version":3,"file":"index.js","names":["ProgressionGradient","CircularProgressBar","label","progression","size","strokeWidth","ariaLabel","dataName","offset","setOffset","useState","prevProgressionRef","useRef","center","radius","length","useMemo","center_","radius_","length_","Math","ceil","PI","useEffect","current","console","log","style","container","svg","mainCircle","progressionCircle","infos","propTypes","CircularProgressBarPropTypes"],"sources":["../../../src/atom/circular-progress-bar/index.tsx"],"sourcesContent":["import React, {useMemo, useState, useEffect, useRef} from 'react';\nimport {isNull} from 'lodash/fp';\nimport {LearningPriorityCardPropTypes, CircularProgressBarPropTypes} from './types';\nimport style from './style.css';\n\nconst ProgressionGradient = () => (\n <defs>\n <linearGradient\n id=\"gradient-stroke-progression\"\n x1=\"81\"\n y1=\"0\"\n x2=\"81\"\n y2=\"162\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"#35CC7F\" />\n <stop offset=\"1\" stopColor=\"#55F2A7\" />\n </linearGradient>\n </defs>\n);\n\nconst CircularProgressBar = ({\n label,\n progression,\n size,\n strokeWidth,\n 'aria-label': ariaLabel,\n 'data-name': dataName\n}: LearningPriorityCardPropTypes) => {\n const [offset, setOffset] = useState<null | number>(null);\n const prevProgressionRef = useRef<number | null>(null);\n\n const {center, radius, length} = useMemo(() => {\n const center_ = size / 2;\n const radius_ = center_ - strokeWidth;\n const length_ = Math.ceil(2 * Math.PI * radius_);\n\n return {center: center_, radius: radius_, length: length_};\n }, [size, strokeWidth]);\n\n useEffect(() => {\n if (prevProgressionRef.current !== progression) {\n setOffset(Math.ceil(length * ((100 - progression) / 100)));\n prevProgressionRef.current = progression;\n }\n }, [length, progression]);\n\n console.log('test progress bar');\n\n return (\n <div className={style.container} aria-label={ariaLabel} data-name={dataName}>\n <svg className={style.svg} width={size} height={size}>\n <ProgressionGradient />\n <circle\n className={style.mainCircle}\n cx={center}\n cy={center}\n r={radius}\n strokeWidth={3}\n fill=\"transparent\"\n />\n <circle cx={center} cy={center} r={radius - (10 / radius) * 100} fill=\"#fafafa\" />\n <circle\n className={style.progressionCircle}\n cx={center}\n cy={center}\n r={radius}\n stroke={`url(#gradient-stroke-progression)`}\n strokeWidth={strokeWidth}\n strokeDasharray={length}\n strokeDashoffset={isNull(offset) ? length : offset}\n fill=\"transparent\"\n strokeLinecap=\"round\"\n />\n </svg>\n <div className={style.infos}>\n <span className={style.progression}>{progression}%</span>\n <span className={style.label}>{label}</span>\n </div>\n </div>\n );\n};\n\nCircularProgressBar.propTypes = CircularProgressBarPropTypes;\n\nexport default CircularProgressBar;\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coorpacademy/components",
3
- "version": "11.32.23",
3
+ "version": "11.32.24-alpha.1+92703af9b",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
@@ -177,5 +177,5 @@
177
177
  "last 2 versions",
178
178
  "IE 11"
179
179
  ],
180
- "gitHead": "03a036360e1f90e8e2639720b11b4c44cd205dfa"
180
+ "gitHead": "92703af9b19a3683f61129e2d95909a5859aa80f"
181
181
  }