@coorpacademy/components 11.32.23-alpha.2 → 11.32.23-alpha.3
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/es/molecule/playlist-detail-cover/index.d.ts +1 -1
- package/es/molecule/playlist-detail-cover/index.js +3 -3
- package/es/molecule/playlist-detail-cover/index.js.map +1 -1
- package/es/template/playlist-detail/index.d.ts +1 -1
- package/es/template/playlist-detail/index.js +1 -4
- package/es/template/playlist-detail/index.js.map +1 -1
- package/lib/molecule/playlist-detail-cover/index.d.ts +1 -1
- package/lib/molecule/playlist-detail-cover/index.js +3 -3
- package/lib/molecule/playlist-detail-cover/index.js.map +1 -1
- package/lib/template/playlist-detail/index.d.ts +1 -1
- package/lib/template/playlist-detail/index.js +1 -4
- package/lib/template/playlist-detail/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -6,7 +6,7 @@ declare namespace PlaylistDetailCover {
|
|
|
6
6
|
namespace propTypes {
|
|
7
7
|
const images: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
8
8
|
type: PropTypes.Requireable<string>;
|
|
9
|
-
|
|
9
|
+
image: PropTypes.Requireable<string>;
|
|
10
10
|
}> | null | undefined)[]>;
|
|
11
11
|
}
|
|
12
12
|
}
|
|
@@ -13,9 +13,9 @@ const PlaylistDetailCover = ({
|
|
|
13
13
|
}, [images]);
|
|
14
14
|
const buildImageStyle = useCallback(({
|
|
15
15
|
type,
|
|
16
|
-
|
|
16
|
+
image
|
|
17
17
|
}) => {
|
|
18
|
-
const imageUrl =
|
|
18
|
+
const imageUrl = image || FALLBACK_PATH.replace('$TYPE', type);
|
|
19
19
|
return {
|
|
20
20
|
backgroundImage: `url(${imageUrl})`,
|
|
21
21
|
backgroundSize: 'cover',
|
|
@@ -45,7 +45,7 @@ const PlaylistDetailCover = ({
|
|
|
45
45
|
PlaylistDetailCover.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
46
46
|
images: PropTypes.arrayOf(PropTypes.shape({
|
|
47
47
|
type: PropTypes.oneOf(COURSE_TYPES),
|
|
48
|
-
|
|
48
|
+
image: PropTypes.string
|
|
49
49
|
}))
|
|
50
50
|
} : {};
|
|
51
51
|
export default PlaylistDetailCover;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useMemo","useCallback","PropTypes","COURSE_TYPES","style","FALLBACK_PATH","PlaylistDetailCover","images","firstColumnImages","secondColumnImages","imagesClone","splice","length","buildImageStyle","type","
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useMemo","useCallback","PropTypes","COURSE_TYPES","style","FALLBACK_PATH","PlaylistDetailCover","images","firstColumnImages","secondColumnImages","imagesClone","splice","length","buildImageStyle","type","image","imageUrl","replace","backgroundImage","backgroundSize","backgroundPosition","container","imagesWrapper","map","index","propTypes","arrayOf","shape","oneOf","string"],"sources":["../../../src/molecule/playlist-detail-cover/index.js"],"sourcesContent":["import React, {useMemo, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {COURSE_TYPES} from '../../variables/courses';\nimport style from './style.css';\n\nconst FALLBACK_PATH =\n 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/cover-fallback-external-$TYPE.png';\n\nconst PlaylistDetailCover = ({images}) => {\n const [firstColumnImages, secondColumnImages] = useMemo(() => {\n const imagesClone = [...images];\n return [imagesClone.splice(0, imagesClone.length / 2), imagesClone];\n }, [images]);\n\n const buildImageStyle = useCallback(({type, image}) => {\n const imageUrl = image || FALLBACK_PATH.replace('$TYPE', type);\n\n return {\n backgroundImage: `url(${imageUrl})`,\n backgroundSize: 'cover',\n backgroundPosition: 'center'\n };\n });\n\n return (\n <div className={style.container}>\n {images.length === 1 ? (\n <img className={style.image} style={buildImageStyle(images[0])} />\n ) : (\n <>\n <div className={style.imagesWrapper}>\n {firstColumnImages.map((image, index) => (\n <img key={index} className={style.image} style={buildImageStyle(image)} />\n ))}\n </div>\n <div className={style.imagesWrapper}>\n {secondColumnImages.map((image, index) => (\n <img key={index} className={style.image} style={buildImageStyle(image)} />\n ))}\n </div>\n </>\n )}\n </div>\n );\n};\n\nPlaylistDetailCover.propTypes = {\n images: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.oneOf(COURSE_TYPES),\n image: PropTypes.string\n })\n )\n};\n\nexport default PlaylistDetailCover;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAeC,OAAf,EAAwBC,WAAxB,QAA0C,OAA1C;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAAQC,YAAR,QAA2B,yBAA3B;AACA,OAAOC,KAAP,MAAkB,aAAlB;AAEA,MAAMC,aAAa,GACjB,4GADF;;AAGA,MAAMC,mBAAmB,GAAG,CAAC;EAACC;AAAD,CAAD,KAAc;EACxC,MAAM,CAACC,iBAAD,EAAoBC,kBAApB,IAA0CT,OAAO,CAAC,MAAM;IAC5D,MAAMU,WAAW,GAAG,CAAC,GAAGH,MAAJ,CAApB;IACA,OAAO,CAACG,WAAW,CAACC,MAAZ,CAAmB,CAAnB,EAAsBD,WAAW,CAACE,MAAZ,GAAqB,CAA3C,CAAD,EAAgDF,WAAhD,CAAP;EACD,CAHsD,EAGpD,CAACH,MAAD,CAHoD,CAAvD;EAKA,MAAMM,eAAe,GAAGZ,WAAW,CAAC,CAAC;IAACa,IAAD;IAAOC;EAAP,CAAD,KAAmB;IACrD,MAAMC,QAAQ,GAAGD,KAAK,IAAIV,aAAa,CAACY,OAAd,CAAsB,OAAtB,EAA+BH,IAA/B,CAA1B;IAEA,OAAO;MACLI,eAAe,EAAG,OAAMF,QAAS,GAD5B;MAELG,cAAc,EAAE,OAFX;MAGLC,kBAAkB,EAAE;IAHf,CAAP;EAKD,CARkC,CAAnC;EAUA,oBACE;IAAK,SAAS,EAAEhB,KAAK,CAACiB;EAAtB,GACGd,MAAM,CAACK,MAAP,KAAkB,CAAlB,gBACC;IAAK,SAAS,EAAER,KAAK,CAACW,KAAtB;IAA6B,KAAK,EAAEF,eAAe,CAACN,MAAM,CAAC,CAAD,CAAP;EAAnD,EADD,gBAGC,uDACE;IAAK,SAAS,EAAEH,KAAK,CAACkB;EAAtB,GACGd,iBAAiB,CAACe,GAAlB,CAAsB,CAACR,KAAD,EAAQS,KAAR,kBACrB;IAAK,GAAG,EAAEA,KAAV;IAAiB,SAAS,EAAEpB,KAAK,CAACW,KAAlC;IAAyC,KAAK,EAAEF,eAAe,CAACE,KAAD;EAA/D,EADD,CADH,CADF,eAME;IAAK,SAAS,EAAEX,KAAK,CAACkB;EAAtB,GACGb,kBAAkB,CAACc,GAAnB,CAAuB,CAACR,KAAD,EAAQS,KAAR,kBACtB;IAAK,GAAG,EAAEA,KAAV;IAAiB,SAAS,EAAEpB,KAAK,CAACW,KAAlC;IAAyC,KAAK,EAAEF,eAAe,CAACE,KAAD;EAA/D,EADD,CADH,CANF,CAJJ,CADF;AAoBD,CApCD;;AAsCAT,mBAAmB,CAACmB,SAApB,2CAAgC;EAC9BlB,MAAM,EAAEL,SAAS,CAACwB,OAAV,CACNxB,SAAS,CAACyB,KAAV,CAAgB;IACdb,IAAI,EAAEZ,SAAS,CAAC0B,KAAV,CAAgBzB,YAAhB,CADQ;IAEdY,KAAK,EAAEb,SAAS,CAAC2B;EAFH,CAAhB,CADM;AADsB,CAAhC;AASA,eAAevB,mBAAf"}
|
|
@@ -29,7 +29,7 @@ declare namespace PlaylistDetail {
|
|
|
29
29
|
const title: PropTypes.Validator<string>;
|
|
30
30
|
const coverImages: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
31
31
|
type: PropTypes.Requireable<string>;
|
|
32
|
-
|
|
32
|
+
image: PropTypes.Requireable<string>;
|
|
33
33
|
}> | null | undefined)[]>;
|
|
34
34
|
const playlistRef: PropTypes.Validator<string>;
|
|
35
35
|
const description: PropTypes.Requireable<string>;
|
|
@@ -91,10 +91,7 @@ PlaylistDetail.contextTypes = {
|
|
|
91
91
|
};
|
|
92
92
|
PlaylistDetail.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
93
93
|
title: PropTypes.string.isRequired,
|
|
94
|
-
coverImages:
|
|
95
|
-
type: PropTypes.oneOf(['podcast', 'video', 'interactive', 'document']),
|
|
96
|
-
url: PropTypes.string
|
|
97
|
-
})),
|
|
94
|
+
coverImages: PlaylistDetailCover.propTypes.images,
|
|
98
95
|
playlistRef: PropTypes.string.isRequired,
|
|
99
96
|
description: PropTypes.string,
|
|
100
97
|
ongoingCourses: PropTypes.shape(CardsGrid.propTypes),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","classnames","Provider","Tag","Select","SelectOptionPropTypes","Icon","CardsGrid","AllCourses","ContinueLearning","PlaylistDetailCover","ContinueLearningButton","style","DESCRIPTION_BREAKPOINT","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCourses","playlistCourses","totalCourses","filters","sorting","onBackClick","onContinueLearningClick","translate","showMore","setShowMore","handleShowMore","Description","truncate","backgroundContainer","container","backButtonWrapper","faSize","wrapperSize","ctaContainer","coverWrapper","length","showMoreWrapper","continueLearningButton","list","contextTypes","skin","childContextTypes","propTypes","string","isRequired","
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useCallback","useState","PropTypes","classnames","Provider","Tag","Select","SelectOptionPropTypes","Icon","CardsGrid","AllCourses","ContinueLearning","PlaylistDetailCover","ContinueLearningButton","style","DESCRIPTION_BREAKPOINT","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCourses","playlistCourses","totalCourses","filters","sorting","onBackClick","onContinueLearningClick","translate","showMore","setShowMore","handleShowMore","Description","truncate","backgroundContainer","container","backButtonWrapper","faSize","wrapperSize","ctaContainer","coverWrapper","length","showMoreWrapper","continueLearningButton","list","contextTypes","skin","childContextTypes","propTypes","string","isRequired","images","shape","number","onChange","func","options","arrayOf"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport ContinueLearning from '../skill-detail/continue-learning';\nimport PlaylistDetailCover from '../../molecule/playlist-detail-cover';\nimport {ContinueLearningButton} from '../skill-detail';\nimport style from './style.css';\n\nconst DESCRIPTION_BREAKPOINT = 382;\n\nconst PlaylistDetail = (props, context) => {\n const {\n title,\n coverImages,\n playlistRef,\n description,\n ongoingCourses,\n playlistCourses,\n totalCourses,\n filters,\n sorting,\n onBackClick,\n onContinueLearningClick\n } = props;\n const {translate} = context;\n\n const [showMore, setShowMore] = useState(false);\n\n const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n const Description = useCallback(() => {\n return (\n <div className={classnames(style.description, !showMore && style.truncate)}>\n {description}\n </div>\n );\n }, [showMore, description]);\n\n return (\n <div className={style.backgroundContainer}>\n <div className={style.container} data-name={playlistRef}>\n <div className={style.backButtonWrapper} onClick={onBackClick}>\n <Icon iconName=\"arrow-left\" size={{faSize: 14, wrapperSize: 14}} />\n </div>\n <div className={style.ctaContainer}>\n <div className={style.coverWrapper}>\n <PlaylistDetailCover images={coverImages} />\n </div>\n <div>\n <Tag label={translate('playlist')} />\n <div className={style.title}>{title}</div>\n {description ? (\n <>\n <Description />\n {description.length >= DESCRIPTION_BREAKPOINT ? (\n <div className={style.showMoreWrapper} onClick={handleShowMore}>\n {translate(showMore ? 'Show less' : 'Show more')}\n <Icon\n iconName={showMore ? 'chevron-up' : 'chevron-down'}\n size={{faSize: 14, wrapperSize: 16}}\n />\n </div>\n ) : null}\n </>\n ) : null}\n <div className={style.continueLearningButton}>\n <ContinueLearningButton\n ongoingCoursesAvailable={!!ongoingCourses.list.length}\n onClick={onContinueLearningClick}\n />\n </div>\n </div>\n </div>\n <ContinueLearning ongoingCourses={ongoingCourses} />\n <AllCourses\n courses={playlistCourses}\n totalCourses={totalCourses}\n filters={filters}\n sorting={sorting}\n />\n </div>\n </div>\n );\n};\n\nPlaylistDetail.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nPlaylistDetail.propTypes = {\n title: PropTypes.string.isRequired,\n coverImages: PlaylistDetailCover.propTypes.images,\n playlistRef: PropTypes.string.isRequired,\n description: PropTypes.string,\n ongoingCourses: PropTypes.shape(CardsGrid.propTypes),\n playlistCourses: PropTypes.shape(CardsGrid.propTypes),\n totalCourses: PropTypes.number,\n filters: PropTypes.shape({\n onChange: PropTypes.func,\n options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n }),\n sorting: PropTypes.shape(Select.propTypes),\n onBackClick: PropTypes.func,\n onContinueLearningClick: PropTypes.func\n};\n\nexport default PlaylistDetail;\n"],"mappings":"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"}
|
|
@@ -6,7 +6,7 @@ declare namespace PlaylistDetailCover {
|
|
|
6
6
|
namespace propTypes {
|
|
7
7
|
const images: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
8
8
|
type: PropTypes.Requireable<string>;
|
|
9
|
-
|
|
9
|
+
image: PropTypes.Requireable<string>;
|
|
10
10
|
}> | null | undefined)[]>;
|
|
11
11
|
}
|
|
12
12
|
}
|
|
@@ -28,9 +28,9 @@ const PlaylistDetailCover = ({
|
|
|
28
28
|
}, [images]);
|
|
29
29
|
const buildImageStyle = (0, _react.useCallback)(({
|
|
30
30
|
type,
|
|
31
|
-
|
|
31
|
+
image
|
|
32
32
|
}) => {
|
|
33
|
-
const imageUrl =
|
|
33
|
+
const imageUrl = image || FALLBACK_PATH.replace('$TYPE', type);
|
|
34
34
|
return {
|
|
35
35
|
backgroundImage: `url(${imageUrl})`,
|
|
36
36
|
backgroundSize: 'cover',
|
|
@@ -60,7 +60,7 @@ const PlaylistDetailCover = ({
|
|
|
60
60
|
PlaylistDetailCover.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
61
61
|
images: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
62
62
|
type: _propTypes.default.oneOf(_courses.COURSE_TYPES),
|
|
63
|
-
|
|
63
|
+
image: _propTypes.default.string
|
|
64
64
|
}))
|
|
65
65
|
} : {};
|
|
66
66
|
var _default = PlaylistDetailCover;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["FALLBACK_PATH","PlaylistDetailCover","images","firstColumnImages","secondColumnImages","useMemo","imagesClone","splice","length","buildImageStyle","useCallback","type","
|
|
1
|
+
{"version":3,"file":"index.js","names":["FALLBACK_PATH","PlaylistDetailCover","images","firstColumnImages","secondColumnImages","useMemo","imagesClone","splice","length","buildImageStyle","useCallback","type","image","imageUrl","replace","backgroundImage","backgroundSize","backgroundPosition","style","container","imagesWrapper","map","index","propTypes","PropTypes","arrayOf","shape","oneOf","COURSE_TYPES","string"],"sources":["../../../src/molecule/playlist-detail-cover/index.js"],"sourcesContent":["import React, {useMemo, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {COURSE_TYPES} from '../../variables/courses';\nimport style from './style.css';\n\nconst FALLBACK_PATH =\n 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/cover-fallback-external-$TYPE.png';\n\nconst PlaylistDetailCover = ({images}) => {\n const [firstColumnImages, secondColumnImages] = useMemo(() => {\n const imagesClone = [...images];\n return [imagesClone.splice(0, imagesClone.length / 2), imagesClone];\n }, [images]);\n\n const buildImageStyle = useCallback(({type, image}) => {\n const imageUrl = image || FALLBACK_PATH.replace('$TYPE', type);\n\n return {\n backgroundImage: `url(${imageUrl})`,\n backgroundSize: 'cover',\n backgroundPosition: 'center'\n };\n });\n\n return (\n <div className={style.container}>\n {images.length === 1 ? (\n <img className={style.image} style={buildImageStyle(images[0])} />\n ) : (\n <>\n <div className={style.imagesWrapper}>\n {firstColumnImages.map((image, index) => (\n <img key={index} className={style.image} style={buildImageStyle(image)} />\n ))}\n </div>\n <div className={style.imagesWrapper}>\n {secondColumnImages.map((image, index) => (\n <img key={index} className={style.image} style={buildImageStyle(image)} />\n ))}\n </div>\n </>\n )}\n </div>\n );\n};\n\nPlaylistDetailCover.propTypes = {\n images: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.oneOf(COURSE_TYPES),\n image: PropTypes.string\n })\n )\n};\n\nexport default PlaylistDetailCover;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,aAAa,GACjB,4GADF;;AAGA,MAAMC,mBAAmB,GAAG,CAAC;EAACC;AAAD,CAAD,KAAc;EACxC,MAAM,CAACC,iBAAD,EAAoBC,kBAApB,IAA0C,IAAAC,cAAA,EAAQ,MAAM;IAC5D,MAAMC,WAAW,GAAG,CAAC,GAAGJ,MAAJ,CAApB;IACA,OAAO,CAACI,WAAW,CAACC,MAAZ,CAAmB,CAAnB,EAAsBD,WAAW,CAACE,MAAZ,GAAqB,CAA3C,CAAD,EAAgDF,WAAhD,CAAP;EACD,CAH+C,EAG7C,CAACJ,MAAD,CAH6C,CAAhD;EAKA,MAAMO,eAAe,GAAG,IAAAC,kBAAA,EAAY,CAAC;IAACC,IAAD;IAAOC;EAAP,CAAD,KAAmB;IACrD,MAAMC,QAAQ,GAAGD,KAAK,IAAIZ,aAAa,CAACc,OAAd,CAAsB,OAAtB,EAA+BH,IAA/B,CAA1B;IAEA,OAAO;MACLI,eAAe,EAAG,OAAMF,QAAS,GAD5B;MAELG,cAAc,EAAE,OAFX;MAGLC,kBAAkB,EAAE;IAHf,CAAP;EAKD,CARuB,CAAxB;EAUA,oBACE;IAAK,SAAS,EAAEC,cAAA,CAAMC;EAAtB,GACGjB,MAAM,CAACM,MAAP,KAAkB,CAAlB,gBACC;IAAK,SAAS,EAAEU,cAAA,CAAMN,KAAtB;IAA6B,KAAK,EAAEH,eAAe,CAACP,MAAM,CAAC,CAAD,CAAP;EAAnD,EADD,gBAGC,yEACE;IAAK,SAAS,EAAEgB,cAAA,CAAME;EAAtB,GACGjB,iBAAiB,CAACkB,GAAlB,CAAsB,CAACT,KAAD,EAAQU,KAAR,kBACrB;IAAK,GAAG,EAAEA,KAAV;IAAiB,SAAS,EAAEJ,cAAA,CAAMN,KAAlC;IAAyC,KAAK,EAAEH,eAAe,CAACG,KAAD;EAA/D,EADD,CADH,CADF,eAME;IAAK,SAAS,EAAEM,cAAA,CAAME;EAAtB,GACGhB,kBAAkB,CAACiB,GAAnB,CAAuB,CAACT,KAAD,EAAQU,KAAR,kBACtB;IAAK,GAAG,EAAEA,KAAV;IAAiB,SAAS,EAAEJ,cAAA,CAAMN,KAAlC;IAAyC,KAAK,EAAEH,eAAe,CAACG,KAAD;EAA/D,EADD,CADH,CANF,CAJJ,CADF;AAoBD,CApCD;;AAsCAX,mBAAmB,CAACsB,SAApB,2CAAgC;EAC9BrB,MAAM,EAAEsB,kBAAA,CAAUC,OAAV,CACND,kBAAA,CAAUE,KAAV,CAAgB;IACdf,IAAI,EAAEa,kBAAA,CAAUG,KAAV,CAAgBC,qBAAhB,CADQ;IAEdhB,KAAK,EAAEY,kBAAA,CAAUK;EAFH,CAAhB,CADM;AADsB,CAAhC;eASe5B,mB"}
|
|
@@ -29,7 +29,7 @@ declare namespace PlaylistDetail {
|
|
|
29
29
|
const title: PropTypes.Validator<string>;
|
|
30
30
|
const coverImages: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
31
31
|
type: PropTypes.Requireable<string>;
|
|
32
|
-
|
|
32
|
+
image: PropTypes.Requireable<string>;
|
|
33
33
|
}> | null | undefined)[]>;
|
|
34
34
|
const playlistRef: PropTypes.Validator<string>;
|
|
35
35
|
const description: PropTypes.Requireable<string>;
|
|
@@ -115,10 +115,7 @@ PlaylistDetail.contextTypes = {
|
|
|
115
115
|
};
|
|
116
116
|
PlaylistDetail.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
117
117
|
title: _propTypes.default.string.isRequired,
|
|
118
|
-
coverImages:
|
|
119
|
-
type: _propTypes.default.oneOf(['podcast', 'video', 'interactive', 'document']),
|
|
120
|
-
url: _propTypes.default.string
|
|
121
|
-
})),
|
|
118
|
+
coverImages: _playlistDetailCover.default.propTypes.images,
|
|
122
119
|
playlistRef: _propTypes.default.string.isRequired,
|
|
123
120
|
description: _propTypes.default.string,
|
|
124
121
|
ongoingCourses: _propTypes.default.shape(_cardsGrid.default.propTypes),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["DESCRIPTION_BREAKPOINT","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCourses","playlistCourses","totalCourses","filters","sorting","onBackClick","onContinueLearningClick","translate","showMore","setShowMore","useState","handleShowMore","useCallback","Description","classnames","style","truncate","backgroundContainer","container","backButtonWrapper","faSize","wrapperSize","ctaContainer","coverWrapper","length","showMoreWrapper","continueLearningButton","list","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","string","isRequired","
|
|
1
|
+
{"version":3,"file":"index.js","names":["DESCRIPTION_BREAKPOINT","PlaylistDetail","props","context","title","coverImages","playlistRef","description","ongoingCourses","playlistCourses","totalCourses","filters","sorting","onBackClick","onContinueLearningClick","translate","showMore","setShowMore","useState","handleShowMore","useCallback","Description","classnames","style","truncate","backgroundContainer","container","backButtonWrapper","faSize","wrapperSize","ctaContainer","coverWrapper","length","showMoreWrapper","continueLearningButton","list","contextTypes","skin","Provider","childContextTypes","propTypes","PropTypes","string","isRequired","PlaylistDetailCover","images","shape","CardsGrid","number","onChange","func","options","arrayOf","SelectOptionPropTypes","Select"],"sources":["../../../src/template/playlist-detail/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport Select, {SelectOptionPropTypes} from '../../atom/select';\nimport Icon from '../../atom/icon';\nimport CardsGrid from '../../organism/cards-grid';\nimport AllCourses from '../skill-detail/all-courses';\nimport ContinueLearning from '../skill-detail/continue-learning';\nimport PlaylistDetailCover from '../../molecule/playlist-detail-cover';\nimport {ContinueLearningButton} from '../skill-detail';\nimport style from './style.css';\n\nconst DESCRIPTION_BREAKPOINT = 382;\n\nconst PlaylistDetail = (props, context) => {\n const {\n title,\n coverImages,\n playlistRef,\n description,\n ongoingCourses,\n playlistCourses,\n totalCourses,\n filters,\n sorting,\n onBackClick,\n onContinueLearningClick\n } = props;\n const {translate} = context;\n\n const [showMore, setShowMore] = useState(false);\n\n const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);\n\n const Description = useCallback(() => {\n return (\n <div className={classnames(style.description, !showMore && style.truncate)}>\n {description}\n </div>\n );\n }, [showMore, description]);\n\n return (\n <div className={style.backgroundContainer}>\n <div className={style.container} data-name={playlistRef}>\n <div className={style.backButtonWrapper} onClick={onBackClick}>\n <Icon iconName=\"arrow-left\" size={{faSize: 14, wrapperSize: 14}} />\n </div>\n <div className={style.ctaContainer}>\n <div className={style.coverWrapper}>\n <PlaylistDetailCover images={coverImages} />\n </div>\n <div>\n <Tag label={translate('playlist')} />\n <div className={style.title}>{title}</div>\n {description ? (\n <>\n <Description />\n {description.length >= DESCRIPTION_BREAKPOINT ? (\n <div className={style.showMoreWrapper} onClick={handleShowMore}>\n {translate(showMore ? 'Show less' : 'Show more')}\n <Icon\n iconName={showMore ? 'chevron-up' : 'chevron-down'}\n size={{faSize: 14, wrapperSize: 16}}\n />\n </div>\n ) : null}\n </>\n ) : null}\n <div className={style.continueLearningButton}>\n <ContinueLearningButton\n ongoingCoursesAvailable={!!ongoingCourses.list.length}\n onClick={onContinueLearningClick}\n />\n </div>\n </div>\n </div>\n <ContinueLearning ongoingCourses={ongoingCourses} />\n <AllCourses\n courses={playlistCourses}\n totalCourses={totalCourses}\n filters={filters}\n sorting={sorting}\n />\n </div>\n </div>\n );\n};\n\nPlaylistDetail.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nPlaylistDetail.propTypes = {\n title: PropTypes.string.isRequired,\n coverImages: PlaylistDetailCover.propTypes.images,\n playlistRef: PropTypes.string.isRequired,\n description: PropTypes.string,\n ongoingCourses: PropTypes.shape(CardsGrid.propTypes),\n playlistCourses: PropTypes.shape(CardsGrid.propTypes),\n totalCourses: PropTypes.number,\n filters: PropTypes.shape({\n onChange: PropTypes.func,\n options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n }),\n sorting: PropTypes.shape(Select.propTypes),\n onBackClick: PropTypes.func,\n onContinueLearningClick: PropTypes.func\n};\n\nexport default PlaylistDetail;\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-alpha.
|
|
3
|
+
"version": "11.32.23-alpha.3+7cb02cf2e",
|
|
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": "
|
|
180
|
+
"gitHead": "7cb02cf2e9c22ed76cabb3c081bd426997e3cd76"
|
|
181
181
|
}
|