@coorpacademy/components 11.32.24-alpha.0 → 11.32.24-alpha.2

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;;;;;;;;;CAqD/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;;;;;;;;;CAuD/B,CAAC;AAIF,eAAe,mBAAmB,CAAC"}
@@ -26,6 +26,8 @@ const CircularProgressBar = ({
26
26
  'data-name': dataName
27
27
  }) => {
28
28
  const [offset, setOffset] = useState(null);
29
+ const prevProgressionRef = useRef(null);
30
+ console.log('TCL ------> ~ prevProgressionRef:', prevProgressionRef, 'progression', progression);
29
31
  const {
30
32
  center,
31
33
  radius,
@@ -40,14 +42,17 @@ const CircularProgressBar = ({
40
42
  length: length_
41
43
  };
42
44
  }, [size, strokeWidth]);
43
- const animationTriggered = useRef(false);
44
45
  useEffect(() => {
45
- if (!animationTriggered.current) {
46
+ console.log('in use effect -->');
47
+
48
+ if (prevProgressionRef.current !== progression) {
49
+ console.log('prevProgressionRef.current !== progression');
46
50
  setOffset(Math.ceil(length * ((100 - progression) / 100)));
47
- animationTriggered.current = true;
51
+ prevProgressionRef.current = progression;
48
52
  }
53
+
54
+ console.log('prevProgressionRef === progression');
49
55
  }, [length, progression]);
50
- console.log('in progress bar ---->');
51
56
  return /*#__PURE__*/React.createElement("div", {
52
57
  className: style.container,
53
58
  "aria-label": ariaLabel,
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","useMemo","useState","useEffect","useRef","CircularProgressBarPropTypes","style","ProgressionGradient","CircularProgressBar","label","progression","size","strokeWidth","ariaLabel","dataName","offset","setOffset","center","radius","length","center_","radius_","length_","Math","ceil","PI","animationTriggered","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\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 const animationTriggered = useRef(false);\n useEffect(() => {\n if (!animationTriggered.current) {\n setOffset(Math.ceil(length * ((100 - progression) / 100)));\n animationTriggered.current = true;\n }\n }, [length, progression]);\n\n console.log('in 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
+ {"version":3,"file":"index.js","names":["React","useMemo","useState","useEffect","useRef","CircularProgressBarPropTypes","style","ProgressionGradient","CircularProgressBar","label","progression","size","strokeWidth","ariaLabel","dataName","offset","setOffset","prevProgressionRef","console","log","center","radius","length","center_","radius_","length_","Math","ceil","PI","current","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 console.log('TCL ------> ~ prevProgressionRef:', prevProgressionRef, 'progression', progression);\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 console.log('in use effect -->');\n if (prevProgressionRef.current !== progression) {\n console.log('prevProgressionRef.current !== progression');\n setOffset(Math.ceil(length * ((100 - progression) / 100)));\n prevProgressionRef.current = progression;\n }\n console.log('prevProgressionRef === progression');\n }, [length, progression]);\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;;;;;;;;;CAqD/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;;;;;;;;;CAuD/B,CAAC;AAIF,eAAe,mBAAmB,CAAC"}
@@ -40,6 +40,8 @@ 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);
44
+ console.log('TCL ------> ~ prevProgressionRef:', prevProgressionRef, 'progression', progression);
43
45
  const {
44
46
  center,
45
47
  radius,
@@ -54,14 +56,17 @@ const CircularProgressBar = ({
54
56
  length: length_
55
57
  };
56
58
  }, [size, strokeWidth]);
57
- const animationTriggered = (0, _react.useRef)(false);
58
59
  (0, _react.useEffect)(() => {
59
- if (!animationTriggered.current) {
60
+ console.log('in use effect -->');
61
+
62
+ if (prevProgressionRef.current !== progression) {
63
+ console.log('prevProgressionRef.current !== progression');
60
64
  setOffset(Math.ceil(length * ((100 - progression) / 100)));
61
- animationTriggered.current = true;
65
+ prevProgressionRef.current = progression;
62
66
  }
67
+
68
+ console.log('prevProgressionRef === progression');
63
69
  }, [length, progression]);
64
- console.log('in progress bar ---->');
65
70
  return /*#__PURE__*/_react.default.createElement("div", {
66
71
  className: _style.default.container,
67
72
  "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","animationTriggered","useRef","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\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 const animationTriggered = useRef(false);\n useEffect(() => {\n if (!animationTriggered.current) {\n setOffset(Math.ceil(length * ((100 - progression) / 100)));\n animationTriggered.current = true;\n }\n }, [length, progression]);\n\n console.log('in 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
+ {"version":3,"file":"index.js","names":["ProgressionGradient","CircularProgressBar","label","progression","size","strokeWidth","ariaLabel","dataName","offset","setOffset","useState","prevProgressionRef","useRef","console","log","center","radius","length","useMemo","center_","radius_","length_","Math","ceil","PI","useEffect","current","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 console.log('TCL ------> ~ prevProgressionRef:', prevProgressionRef, 'progression', progression);\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 console.log('in use effect -->');\n if (prevProgressionRef.current !== progression) {\n console.log('prevProgressionRef.current !== progression');\n setOffset(Math.ceil(length * ((100 - progression) / 100)));\n prevProgressionRef.current = progression;\n }\n console.log('prevProgressionRef === progression');\n }, [length, progression]);\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;EACA,MAAMC,kBAAkB,GAAG,IAAAC,aAAA,EAAsB,IAAtB,CAA3B;EACAC,OAAO,CAACC,GAAR,CAAY,oCAAZ,EAAkDH,kBAAlD,EAAsE,aAAtE,EAAqFR,WAArF;EAEA,MAAM;IAACY,MAAD;IAASC,MAAT;IAAiBC;EAAjB,IAA2B,IAAAC,cAAA,EAAQ,MAAM;IAC7C,MAAMC,OAAO,GAAGf,IAAI,GAAG,CAAvB;IACA,MAAMgB,OAAO,GAAGD,OAAO,GAAGd,WAA1B;IACA,MAAMgB,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,CAACjB,IAAD,EAAOC,WAAP,CAN8B,CAAjC;EAQA,IAAAoB,gBAAA,EAAU,MAAM;IACdZ,OAAO,CAACC,GAAR,CAAY,mBAAZ;;IACA,IAAIH,kBAAkB,CAACe,OAAnB,KAA+BvB,WAAnC,EAAgD;MAC9CU,OAAO,CAACC,GAAR,CAAY,4CAAZ;MACAL,SAAS,CAACa,IAAI,CAACC,IAAL,CAAUN,MAAM,IAAI,CAAC,MAAMd,WAAP,IAAsB,GAA1B,CAAhB,CAAD,CAAT;MACAQ,kBAAkB,CAACe,OAAnB,GAA6BvB,WAA7B;IACD;;IACDU,OAAO,CAACC,GAAR,CAAY,oCAAZ;EACD,CARD,EAQG,CAACG,MAAD,EAASd,WAAT,CARH;EAUA,oBACE;IAAK,SAAS,EAAEwB,cAAA,CAAMC,SAAtB;IAAiC,cAAYtB,SAA7C;IAAwD,aAAWC;EAAnE,gBACE;IAAK,SAAS,EAAEoB,cAAA,CAAME,GAAtB;IAA2B,KAAK,EAAEzB,IAAlC;IAAwC,MAAM,EAAEA;EAAhD,gBACE,6BAAC,mBAAD,OADF,eAEE;IACE,SAAS,EAAEuB,cAAA,CAAMG,UADnB;IAEE,EAAE,EAAEf,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,EAAEW,cAAA,CAAMI,iBADnB;IAEE,EAAE,EAAEhB,MAFN;IAGE,EAAE,EAAEA,MAHN;IAIE,CAAC,EAAEC,MAJL;IAKE,MAAM,EAAG,mCALX;IAME,WAAW,EAAEX,WANf;IAOE,eAAe,EAAEY,MAPnB;IAQE,gBAAgB,EAAE,sBAAOT,MAAP,IAAiBS,MAAjB,GAA0BT,MAR9C;IASE,IAAI,EAAC,aATP;IAUE,aAAa,EAAC;EAVhB,EAXF,CADF,eAyBE;IAAK,SAAS,EAAEmB,cAAA,CAAMK;EAAtB,gBACE;IAAM,SAAS,EAAEL,cAAA,CAAMxB;EAAvB,GAAqCA,WAArC,MADF,eAEE;IAAM,SAAS,EAAEwB,cAAA,CAAMzB;EAAvB,GAA+BA,KAA/B,CAFF,CAzBF,CADF;AAgCD,CA9DD;;AAgEAD,mBAAmB,CAACgC,SAApB,2CAAgCC,mCAAhC;eAEejC,mB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coorpacademy/components",
3
- "version": "11.32.24-alpha.0+7adae6412",
3
+ "version": "11.32.24-alpha.2+26acb4eb5",
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": "7adae6412bc9adcbb79817819c30ad38f676017c"
180
+ "gitHead": "26acb4eb5b966d752bfa0d62f319fede434ec3ab"
181
181
  }