@coorpacademy/components 10.30.12-alpha.3 → 10.30.12-alpha.7

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.
@@ -161,7 +161,7 @@
161
161
  height: auto;
162
162
  max-width: 100%;
163
163
  }
164
-
164
+
165
165
  .allStars {
166
166
  height: auto;
167
167
  min-width: 100%;
@@ -1 +1 @@
1
- {"version":3,"file":"stars-summary.d.ts","sourceRoot":"","sources":["../../../src/template/activity/stars-summary.js"],"names":[],"mappings":";AAYA;IACE;;;;;;;;;;;;;;;;;;;MAME;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IAEF,wBAYC;IARC;;;MAGC;IAOH,qBAGC;IAED,sBAGC;IAED,0BAIC;IAED,6BA2DC;CACF"}
1
+ {"version":3,"file":"stars-summary.d.ts","sourceRoot":"","sources":["../../../src/template/activity/stars-summary.js"],"names":[],"mappings":";AAoCA;IACE;;;;;;;;;;;;;;;;;;;MAME;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IAEF,wBAYC;IARC;;;MAGC;IAOH,qBAGC;IAED,sBAGC;IAED,0BAIC;IAED,6BAiDC;CACF"}
@@ -1,16 +1,42 @@
1
+ import _map from "lodash/fp/map";
1
2
  import _isEmpty from "lodash/fp/isEmpty";
2
3
  import _getOr from "lodash/fp/getOr";
3
4
  import _get from "lodash/fp/get";
4
5
 
5
6
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
6
7
 
7
- import React from 'react';
8
+ import React, { useCallback, useMemo } from 'react';
8
9
  import PropTypes from 'prop-types';
9
10
  import { NovaCompositionNavigationArrowLeft as ArrowLeft, NovaCompositionNavigationArrowRight as ArrowRight, NovaCompositionCoorpacademyStar as StarIcon } from '@coorpacademy/nova-icons';
10
11
  import Provider from '../../atom/provider';
11
12
  import EngineStars from './engine-stars';
12
13
  import style from './stars-summary.css';
13
14
 
15
+ const EngineTabs = ({
16
+ engines,
17
+ state,
18
+ firstItem
19
+ }) => {
20
+ const buildEngineTab = useCallback((engine, index) => {
21
+ return /*#__PURE__*/React.createElement("div", {
22
+ className: style[state],
23
+ key: engine.type,
24
+ "data-name": `${engine.type}_total_${state}`
25
+ }, /*#__PURE__*/React.createElement(EngineStars, _extends({}, engine, {
26
+ className: index < firstItem ? style.hidden : style.active
27
+ })));
28
+ }, [firstItem, state]);
29
+ return useMemo(() => _map.convert({
30
+ cap: false
31
+ })(buildEngineTab, engines), [buildEngineTab, engines]);
32
+ };
33
+
34
+ EngineTabs.propTypes = process.env.NODE_ENV !== "production" ? {
35
+ engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)),
36
+ state: PropTypes.oneOf(['hidden', 'active']),
37
+ firstItem: PropTypes.number
38
+ } : {};
39
+
14
40
  class StarsSummary extends React.Component {
15
41
  constructor(props) {
16
42
  super(props);
@@ -67,16 +93,6 @@ class StarsSummary extends React.Component {
67
93
  return null;
68
94
  }
69
95
 
70
- const engineTabs = engines.map((engine, index) => {
71
- const state = index < firstItem ? 'hidden' : 'active';
72
- return /*#__PURE__*/React.createElement("div", {
73
- className: style[state],
74
- key: engine.type,
75
- "data-name": `${engine.type}_total_${state}`
76
- }, /*#__PURE__*/React.createElement(EngineStars, _extends({}, engine, {
77
- className: index < firstItem ? style.hidden : style.active
78
- })));
79
- });
80
96
  const leftArrowView = totalItems > 6 && firstItem > 0 ? /*#__PURE__*/React.createElement("div", {
81
97
  className: style.circle,
82
98
  onClick: this.handleOnLeft,
@@ -106,7 +122,11 @@ class StarsSummary extends React.Component {
106
122
  }, /*#__PURE__*/React.createElement("div", {
107
123
  className: style.allStars,
108
124
  "data-name": "engineList"
109
- }, engineTabs), /*#__PURE__*/React.createElement("div", {
125
+ }, /*#__PURE__*/React.createElement(EngineStars, {
126
+ engines: engines,
127
+ state: this.state,
128
+ firstItem: firstItem
129
+ })), /*#__PURE__*/React.createElement("div", {
110
130
  className: style.footerSummaryStars,
111
131
  style: {
112
132
  backgroundColor: primary
@@ -1 +1 @@
1
- {"version":3,"file":"stars-summary.js","names":["React","PropTypes","NovaCompositionNavigationArrowLeft","ArrowLeft","NovaCompositionNavigationArrowRight","ArrowRight","NovaCompositionCoorpacademyStar","StarIcon","Provider","EngineStars","style","StarsSummary","Component","constructor","props","engines","state","firstItem","totalItems","length","handleOnLeft","bind","handleOnRight","scrollTo","page","setState","render","total","skin","context","dark","primary","engineTabs","map","engine","index","type","hidden","active","leftArrowView","circle","left","rightArrowView","right","myStars","myStarsWrapper","allStars","footerSummaryStars","backgroundColor","totalStars","label","stars","iconBubble","iconHeader","navigationLeft","navigationRight","contextTypes","childContextTypes","propTypes","shape","string","isRequired","number","arrayOf"],"sources":["../../../src/template/activity/stars-summary.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {get, getOr, isEmpty} from 'lodash/fp';\nimport {\n NovaCompositionNavigationArrowLeft as ArrowLeft,\n NovaCompositionNavigationArrowRight as ArrowRight,\n NovaCompositionCoorpacademyStar as StarIcon\n} from '@coorpacademy/nova-icons';\nimport Provider from '../../atom/provider';\nimport EngineStars from './engine-stars';\nimport style from './stars-summary.css';\n\nclass StarsSummary extends React.Component {\n static propTypes = {\n total: PropTypes.shape({\n label: PropTypes.string.isRequired,\n stars: PropTypes.number.isRequired\n }).isRequired,\n engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes))\n };\n\n static contextTypes = {\n skin: Provider.childContextTypes.skin\n };\n\n constructor(props) {\n super(props);\n\n const {engines = []} = props;\n this.state = {\n firstItem: 0,\n totalItems: engines.length\n };\n\n this.handleOnLeft = this.handleOnLeft.bind(this);\n this.handleOnRight = this.handleOnRight.bind(this);\n this.scrollTo = this.scrollTo.bind(this);\n }\n\n handleOnLeft() {\n const {firstItem} = this.state;\n this.scrollTo(firstItem - 1);\n }\n\n handleOnRight() {\n const {firstItem} = this.state;\n this.scrollTo(firstItem + 1);\n }\n\n scrollTo(page) {\n this.setState({\n firstItem: page\n });\n }\n\n render() {\n const {total, engines = []} = this.props;\n const {skin} = this.context;\n const {firstItem, totalItems} = this.state;\n const dark = getOr('#90A4AE', 'common.dark', skin);\n const primary = get('common.primary', skin);\n\n if (isEmpty(engines)) {\n return null;\n }\n\n const engineTabs = engines.map((engine, index) => {\n const state = index < firstItem ? 'hidden' : 'active';\n return (\n <div className={style[state]} key={engine.type} data-name={`${engine.type}_total_${state}`}>\n <EngineStars {...engine} className={index < firstItem ? style.hidden : style.active} />\n </div>\n );\n });\n\n const leftArrowView =\n totalItems > 6 && firstItem > 0 ? (\n <div className={style.circle} onClick={this.handleOnLeft} data-name=\"left-arrow\">\n <ArrowLeft color={dark} className={style.left} width={10} height={10} />\n </div>\n ) : null;\n\n const rightArrowView =\n totalItems > 6 && firstItem < totalItems - 6 ? (\n <div className={style.circle} onClick={this.handleOnRight} data-name=\"right-arrow\">\n <ArrowRight color={dark} className={style.right} width={10} height={10} />\n </div>\n ) : null;\n\n return (\n <div data-name=\"myStars\" className={style.myStars}>\n <div data-name=\"myStars-wrapper\" className={style.myStarsWrapper}>\n <div className={style.allStars} data-name=\"engineList\">\n {engineTabs}\n </div>\n <div\n className={style.footerSummaryStars}\n style={{\n backgroundColor: primary\n }}\n >\n <div className={style.totalStars}>\n <span>{total.label}</span>\n <p data-name=\"star-counter\">{total.stars}</p>\n <div className={style.iconBubble}>\n <StarIcon className={style.iconHeader} color={primary} />\n </div>\n </div>\n <div className={style.navigationLeft}>{leftArrowView}</div>\n <div className={style.navigationRight}>{rightArrowView}</div>\n </div>\n </div>\n </div>\n );\n }\n}\n\nexport default StarsSummary;\n"],"mappings":"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"}
1
+ {"version":3,"file":"stars-summary.js","names":["React","useCallback","useMemo","PropTypes","NovaCompositionNavigationArrowLeft","ArrowLeft","NovaCompositionNavigationArrowRight","ArrowRight","NovaCompositionCoorpacademyStar","StarIcon","Provider","EngineStars","style","EngineTabs","engines","state","firstItem","buildEngineTab","engine","index","type","hidden","active","convert","cap","propTypes","arrayOf","shape","oneOf","number","StarsSummary","Component","constructor","props","totalItems","length","handleOnLeft","bind","handleOnRight","scrollTo","page","setState","render","total","skin","context","dark","primary","leftArrowView","circle","left","rightArrowView","right","myStars","myStarsWrapper","allStars","footerSummaryStars","backgroundColor","totalStars","label","stars","iconBubble","iconHeader","navigationLeft","navigationRight","contextTypes","childContextTypes","string","isRequired"],"sources":["../../../src/template/activity/stars-summary.js"],"sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {get, getOr, isEmpty, map} from 'lodash/fp';\nimport {\n NovaCompositionNavigationArrowLeft as ArrowLeft,\n NovaCompositionNavigationArrowRight as ArrowRight,\n NovaCompositionCoorpacademyStar as StarIcon\n} from '@coorpacademy/nova-icons';\nimport Provider from '../../atom/provider';\nimport EngineStars from './engine-stars';\nimport style from './stars-summary.css';\n\nconst EngineTabs = ({engines, state, firstItem}) => {\n const buildEngineTab = useCallback(\n (engine, index) => {\n return (\n <div className={style[state]} key={engine.type} data-name={`${engine.type}_total_${state}`}>\n <EngineStars {...engine} className={index < firstItem ? style.hidden : style.active} />\n </div>\n );\n },\n [firstItem, state]\n );\n\n return useMemo(\n () => map.convert({cap: false})(buildEngineTab, engines),\n [buildEngineTab, engines]\n );\n};\n\nEngineTabs.propTypes = {\n engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)),\n state: PropTypes.oneOf(['hidden', 'active']),\n firstItem: PropTypes.number\n};\n\nclass StarsSummary extends React.Component {\n static propTypes = {\n total: PropTypes.shape({\n label: PropTypes.string.isRequired,\n stars: PropTypes.number.isRequired\n }).isRequired,\n engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes))\n };\n\n static contextTypes = {\n skin: Provider.childContextTypes.skin\n };\n\n constructor(props) {\n super(props);\n\n const {engines = []} = props;\n this.state = {\n firstItem: 0,\n totalItems: engines.length\n };\n\n this.handleOnLeft = this.handleOnLeft.bind(this);\n this.handleOnRight = this.handleOnRight.bind(this);\n this.scrollTo = this.scrollTo.bind(this);\n }\n\n handleOnLeft() {\n const {firstItem} = this.state;\n this.scrollTo(firstItem - 1);\n }\n\n handleOnRight() {\n const {firstItem} = this.state;\n this.scrollTo(firstItem + 1);\n }\n\n scrollTo(page) {\n this.setState({\n firstItem: page\n });\n }\n\n render() {\n const {total, engines = []} = this.props;\n const {skin} = this.context;\n const {firstItem, totalItems} = this.state;\n const dark = getOr('#90A4AE', 'common.dark', skin);\n const primary = get('common.primary', skin);\n\n if (isEmpty(engines)) {\n return null;\n }\n const leftArrowView =\n totalItems > 6 && firstItem > 0 ? (\n <div className={style.circle} onClick={this.handleOnLeft} data-name=\"left-arrow\">\n <ArrowLeft color={dark} className={style.left} width={10} height={10} />\n </div>\n ) : null;\n\n const rightArrowView =\n totalItems > 6 && firstItem < totalItems - 6 ? (\n <div className={style.circle} onClick={this.handleOnRight} data-name=\"right-arrow\">\n <ArrowRight color={dark} className={style.right} width={10} height={10} />\n </div>\n ) : null;\n\n return (\n <div data-name=\"myStars\" className={style.myStars}>\n <div data-name=\"myStars-wrapper\" className={style.myStarsWrapper}>\n <div className={style.allStars} data-name=\"engineList\">\n <EngineStars engines={engines} state={this.state} firstItem={firstItem} />\n </div>\n <div\n className={style.footerSummaryStars}\n style={{\n backgroundColor: primary\n }}\n >\n <div className={style.totalStars}>\n <span>{total.label}</span>\n <p data-name=\"star-counter\">{total.stars}</p>\n <div className={style.iconBubble}>\n <StarIcon className={style.iconHeader} color={primary} />\n </div>\n </div>\n <div className={style.navigationLeft}>{leftArrowView}</div>\n <div className={style.navigationRight}>{rightArrowView}</div>\n </div>\n </div>\n </div>\n );\n }\n}\n\nexport default StarsSummary;\n"],"mappings":"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"}
@@ -146,6 +146,7 @@
146
146
  margin-right: 40px;
147
147
  margin-top: 30px;
148
148
  padding-bottom: 0;
149
+ z-index: 1;
149
150
  }
150
151
 
151
152
  .selectBorder {
@@ -161,7 +161,7 @@
161
161
  height: auto;
162
162
  max-width: 100%;
163
163
  }
164
-
164
+
165
165
  .allStars {
166
166
  height: auto;
167
167
  min-width: 100%;
@@ -1 +1 @@
1
- {"version":3,"file":"stars-summary.d.ts","sourceRoot":"","sources":["../../../src/template/activity/stars-summary.js"],"names":[],"mappings":";AAYA;IACE;;;;;;;;;;;;;;;;;;;MAME;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IAEF,wBAYC;IARC;;;MAGC;IAOH,qBAGC;IAED,sBAGC;IAED,0BAIC;IAED,6BA2DC;CACF"}
1
+ {"version":3,"file":"stars-summary.d.ts","sourceRoot":"","sources":["../../../src/template/activity/stars-summary.js"],"names":[],"mappings":";AAoCA;IACE;;;;;;;;;;;;;;;;;;;MAME;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IAEF,wBAYC;IARC;;;MAGC;IAOH,qBAGC;IAED,sBAGC;IAED,0BAIC;IAED,6BAiDC;CACF"}
@@ -3,13 +3,15 @@
3
3
  exports.__esModule = true;
4
4
  exports.default = void 0;
5
5
 
6
+ var _map2 = _interopRequireDefault(require("lodash/fp/map"));
7
+
6
8
  var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
7
9
 
8
10
  var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
9
11
 
10
12
  var _get2 = _interopRequireDefault(require("lodash/fp/get"));
11
13
 
12
- var _react = _interopRequireDefault(require("react"));
14
+ var _react = _interopRequireWildcard(require("react"));
13
15
 
14
16
  var _propTypes = _interopRequireDefault(require("prop-types"));
15
17
 
@@ -21,10 +23,39 @@ var _engineStars = _interopRequireDefault(require("./engine-stars"));
21
23
 
22
24
  var _starsSummary = _interopRequireDefault(require("./stars-summary.css"));
23
25
 
26
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
27
+
28
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
29
+
24
30
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
31
 
26
32
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
27
33
 
34
+ const EngineTabs = ({
35
+ engines,
36
+ state,
37
+ firstItem
38
+ }) => {
39
+ const buildEngineTab = (0, _react.useCallback)((engine, index) => {
40
+ return /*#__PURE__*/_react.default.createElement("div", {
41
+ className: _starsSummary.default[state],
42
+ key: engine.type,
43
+ "data-name": `${engine.type}_total_${state}`
44
+ }, /*#__PURE__*/_react.default.createElement(_engineStars.default, _extends({}, engine, {
45
+ className: index < firstItem ? _starsSummary.default.hidden : _starsSummary.default.active
46
+ })));
47
+ }, [firstItem, state]);
48
+ return (0, _react.useMemo)(() => _map2.default.convert({
49
+ cap: false
50
+ })(buildEngineTab, engines), [buildEngineTab, engines]);
51
+ };
52
+
53
+ EngineTabs.propTypes = process.env.NODE_ENV !== "production" ? {
54
+ engines: _propTypes.default.arrayOf(_propTypes.default.shape(_engineStars.default.propTypes)),
55
+ state: _propTypes.default.oneOf(['hidden', 'active']),
56
+ firstItem: _propTypes.default.number
57
+ } : {};
58
+
28
59
  class StarsSummary extends _react.default.Component {
29
60
  constructor(props) {
30
61
  super(props);
@@ -79,16 +110,6 @@ class StarsSummary extends _react.default.Component {
79
110
  return null;
80
111
  }
81
112
 
82
- const engineTabs = engines.map((engine, index) => {
83
- const state = index < firstItem ? 'hidden' : 'active';
84
- return /*#__PURE__*/_react.default.createElement("div", {
85
- className: _starsSummary.default[state],
86
- key: engine.type,
87
- "data-name": `${engine.type}_total_${state}`
88
- }, /*#__PURE__*/_react.default.createElement(_engineStars.default, _extends({}, engine, {
89
- className: index < firstItem ? _starsSummary.default.hidden : _starsSummary.default.active
90
- })));
91
- });
92
113
  const leftArrowView = totalItems > 6 && firstItem > 0 ? /*#__PURE__*/_react.default.createElement("div", {
93
114
  className: _starsSummary.default.circle,
94
115
  onClick: this.handleOnLeft,
@@ -118,7 +139,11 @@ class StarsSummary extends _react.default.Component {
118
139
  }, /*#__PURE__*/_react.default.createElement("div", {
119
140
  className: _starsSummary.default.allStars,
120
141
  "data-name": "engineList"
121
- }, engineTabs), /*#__PURE__*/_react.default.createElement("div", {
142
+ }, /*#__PURE__*/_react.default.createElement(_engineStars.default, {
143
+ engines: engines,
144
+ state: this.state,
145
+ firstItem: firstItem
146
+ })), /*#__PURE__*/_react.default.createElement("div", {
122
147
  className: _starsSummary.default.footerSummaryStars,
123
148
  style: {
124
149
  backgroundColor: primary
@@ -1 +1 @@
1
- {"version":3,"file":"stars-summary.js","names":["StarsSummary","React","Component","constructor","props","engines","state","firstItem","totalItems","length","handleOnLeft","bind","handleOnRight","scrollTo","page","setState","render","total","skin","context","dark","primary","engineTabs","map","engine","index","style","type","hidden","active","leftArrowView","circle","left","rightArrowView","right","myStars","myStarsWrapper","allStars","footerSummaryStars","backgroundColor","totalStars","label","stars","iconBubble","iconHeader","navigationLeft","navigationRight","contextTypes","Provider","childContextTypes","propTypes","PropTypes","shape","string","isRequired","number","arrayOf","EngineStars"],"sources":["../../../src/template/activity/stars-summary.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {get, getOr, isEmpty} from 'lodash/fp';\nimport {\n NovaCompositionNavigationArrowLeft as ArrowLeft,\n NovaCompositionNavigationArrowRight as ArrowRight,\n NovaCompositionCoorpacademyStar as StarIcon\n} from '@coorpacademy/nova-icons';\nimport Provider from '../../atom/provider';\nimport EngineStars from './engine-stars';\nimport style from './stars-summary.css';\n\nclass StarsSummary extends React.Component {\n static propTypes = {\n total: PropTypes.shape({\n label: PropTypes.string.isRequired,\n stars: PropTypes.number.isRequired\n }).isRequired,\n engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes))\n };\n\n static contextTypes = {\n skin: Provider.childContextTypes.skin\n };\n\n constructor(props) {\n super(props);\n\n const {engines = []} = props;\n this.state = {\n firstItem: 0,\n totalItems: engines.length\n };\n\n this.handleOnLeft = this.handleOnLeft.bind(this);\n this.handleOnRight = this.handleOnRight.bind(this);\n this.scrollTo = this.scrollTo.bind(this);\n }\n\n handleOnLeft() {\n const {firstItem} = this.state;\n this.scrollTo(firstItem - 1);\n }\n\n handleOnRight() {\n const {firstItem} = this.state;\n this.scrollTo(firstItem + 1);\n }\n\n scrollTo(page) {\n this.setState({\n firstItem: page\n });\n }\n\n render() {\n const {total, engines = []} = this.props;\n const {skin} = this.context;\n const {firstItem, totalItems} = this.state;\n const dark = getOr('#90A4AE', 'common.dark', skin);\n const primary = get('common.primary', skin);\n\n if (isEmpty(engines)) {\n return null;\n }\n\n const engineTabs = engines.map((engine, index) => {\n const state = index < firstItem ? 'hidden' : 'active';\n return (\n <div className={style[state]} key={engine.type} data-name={`${engine.type}_total_${state}`}>\n <EngineStars {...engine} className={index < firstItem ? style.hidden : style.active} />\n </div>\n );\n });\n\n const leftArrowView =\n totalItems > 6 && firstItem > 0 ? (\n <div className={style.circle} onClick={this.handleOnLeft} data-name=\"left-arrow\">\n <ArrowLeft color={dark} className={style.left} width={10} height={10} />\n </div>\n ) : null;\n\n const rightArrowView =\n totalItems > 6 && firstItem < totalItems - 6 ? (\n <div className={style.circle} onClick={this.handleOnRight} data-name=\"right-arrow\">\n <ArrowRight color={dark} className={style.right} width={10} height={10} />\n </div>\n ) : null;\n\n return (\n <div data-name=\"myStars\" className={style.myStars}>\n <div data-name=\"myStars-wrapper\" className={style.myStarsWrapper}>\n <div className={style.allStars} data-name=\"engineList\">\n {engineTabs}\n </div>\n <div\n className={style.footerSummaryStars}\n style={{\n backgroundColor: primary\n }}\n >\n <div className={style.totalStars}>\n <span>{total.label}</span>\n <p data-name=\"star-counter\">{total.stars}</p>\n <div className={style.iconBubble}>\n <StarIcon className={style.iconHeader} color={primary} />\n </div>\n </div>\n <div className={style.navigationLeft}>{leftArrowView}</div>\n <div className={style.navigationRight}>{rightArrowView}</div>\n </div>\n </div>\n </div>\n );\n }\n}\n\nexport default StarsSummary;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AAKA;;AACA;;AACA;;;;;;AAEA,MAAMA,YAAN,SAA2BC,cAAA,CAAMC,SAAjC,CAA2C;EAazCC,WAAW,CAACC,KAAD,EAAQ;IACjB,MAAMA,KAAN;IAEA,MAAM;MAACC,OAAO,GAAG;IAAX,IAAiBD,KAAvB;IACA,KAAKE,KAAL,GAAa;MACXC,SAAS,EAAE,CADA;MAEXC,UAAU,EAAEH,OAAO,CAACI;IAFT,CAAb;IAKA,KAAKC,YAAL,GAAoB,KAAKA,YAAL,CAAkBC,IAAlB,CAAuB,IAAvB,CAApB;IACA,KAAKC,aAAL,GAAqB,KAAKA,aAAL,CAAmBD,IAAnB,CAAwB,IAAxB,CAArB;IACA,KAAKE,QAAL,GAAgB,KAAKA,QAAL,CAAcF,IAAd,CAAmB,IAAnB,CAAhB;EACD;;EAEDD,YAAY,GAAG;IACb,MAAM;MAACH;IAAD,IAAc,KAAKD,KAAzB;IACA,KAAKO,QAAL,CAAcN,SAAS,GAAG,CAA1B;EACD;;EAEDK,aAAa,GAAG;IACd,MAAM;MAACL;IAAD,IAAc,KAAKD,KAAzB;IACA,KAAKO,QAAL,CAAcN,SAAS,GAAG,CAA1B;EACD;;EAEDM,QAAQ,CAACC,IAAD,EAAO;IACb,KAAKC,QAAL,CAAc;MACZR,SAAS,EAAEO;IADC,CAAd;EAGD;;EAEDE,MAAM,GAAG;IACP,MAAM;MAACC,KAAD;MAAQZ,OAAO,GAAG;IAAlB,IAAwB,KAAKD,KAAnC;IACA,MAAM;MAACc;IAAD,IAAS,KAAKC,OAApB;IACA,MAAM;MAACZ,SAAD;MAAYC;IAAZ,IAA0B,KAAKF,KAArC;IACA,MAAMc,IAAI,GAAG,qBAAM,SAAN,EAAiB,aAAjB,EAAgCF,IAAhC,CAAb;IACA,MAAMG,OAAO,GAAG,mBAAI,gBAAJ,EAAsBH,IAAtB,CAAhB;;IAEA,IAAI,uBAAQb,OAAR,CAAJ,EAAsB;MACpB,OAAO,IAAP;IACD;;IAED,MAAMiB,UAAU,GAAGjB,OAAO,CAACkB,GAAR,CAAY,CAACC,MAAD,EAASC,KAAT,KAAmB;MAChD,MAAMnB,KAAK,GAAGmB,KAAK,GAAGlB,SAAR,GAAoB,QAApB,GAA+B,QAA7C;MACA,oBACE;QAAK,SAAS,EAAEmB,qBAAA,CAAMpB,KAAN,CAAhB;QAA8B,GAAG,EAAEkB,MAAM,CAACG,IAA1C;QAAgD,aAAY,GAAEH,MAAM,CAACG,IAAK,UAASrB,KAAM;MAAzF,gBACE,6BAAC,oBAAD,eAAiBkB,MAAjB;QAAyB,SAAS,EAAEC,KAAK,GAAGlB,SAAR,GAAoBmB,qBAAA,CAAME,MAA1B,GAAmCF,qBAAA,CAAMG;MAA7E,GADF,CADF;IAKD,CAPkB,CAAnB;IASA,MAAMC,aAAa,GACjBtB,UAAU,GAAG,CAAb,IAAkBD,SAAS,GAAG,CAA9B,gBACE;MAAK,SAAS,EAAEmB,qBAAA,CAAMK,MAAtB;MAA8B,OAAO,EAAE,KAAKrB,YAA5C;MAA0D,aAAU;IAApE,gBACE,6BAAC,6CAAD;MAAW,KAAK,EAAEU,IAAlB;MAAwB,SAAS,EAAEM,qBAAA,CAAMM,IAAzC;MAA+C,KAAK,EAAE,EAAtD;MAA0D,MAAM,EAAE;IAAlE,EADF,CADF,GAII,IALN;IAOA,MAAMC,cAAc,GAClBzB,UAAU,GAAG,CAAb,IAAkBD,SAAS,GAAGC,UAAU,GAAG,CAA3C,gBACE;MAAK,SAAS,EAAEkB,qBAAA,CAAMK,MAAtB;MAA8B,OAAO,EAAE,KAAKnB,aAA5C;MAA2D,aAAU;IAArE,gBACE,6BAAC,8CAAD;MAAY,KAAK,EAAEQ,IAAnB;MAAyB,SAAS,EAAEM,qBAAA,CAAMQ,KAA1C;MAAiD,KAAK,EAAE,EAAxD;MAA4D,MAAM,EAAE;IAApE,EADF,CADF,GAII,IALN;IAOA,oBACE;MAAK,aAAU,SAAf;MAAyB,SAAS,EAAER,qBAAA,CAAMS;IAA1C,gBACE;MAAK,aAAU,iBAAf;MAAiC,SAAS,EAAET,qBAAA,CAAMU;IAAlD,gBACE;MAAK,SAAS,EAAEV,qBAAA,CAAMW,QAAtB;MAAgC,aAAU;IAA1C,GACGf,UADH,CADF,eAIE;MACE,SAAS,EAAEI,qBAAA,CAAMY,kBADnB;MAEE,KAAK,EAAE;QACLC,eAAe,EAAElB;MADZ;IAFT,gBAME;MAAK,SAAS,EAAEK,qBAAA,CAAMc;IAAtB,gBACE,2CAAOvB,KAAK,CAACwB,KAAb,CADF,eAEE;MAAG,aAAU;IAAb,GAA6BxB,KAAK,CAACyB,KAAnC,CAFF,eAGE;MAAK,SAAS,EAAEhB,qBAAA,CAAMiB;IAAtB,gBACE,6BAAC,0CAAD;MAAU,SAAS,EAAEjB,qBAAA,CAAMkB,UAA3B;MAAuC,KAAK,EAAEvB;IAA9C,EADF,CAHF,CANF,eAaE;MAAK,SAAS,EAAEK,qBAAA,CAAMmB;IAAtB,GAAuCf,aAAvC,CAbF,eAcE;MAAK,SAAS,EAAEJ,qBAAA,CAAMoB;IAAtB,GAAwCb,cAAxC,CAdF,CAJF,CADF,CADF;EAyBD;;AAtGwC;;AAArCjC,Y,CASG+C,Y,GAAe;EACpB7B,IAAI,EAAE8B,iBAAA,CAASC,iBAAT,CAA2B/B;AADb,C;AATlBlB,Y,CACGkD,S,2CAAY;EACjBjC,KAAK,EAAEkC,kBAAA,CAAUC,KAAV,CAAgB;IACrBX,KAAK,EAAEU,kBAAA,CAAUE,MAAV,CAAiBC,UADH;IAErBZ,KAAK,EAAES,kBAAA,CAAUI,MAAV,CAAiBD;EAFH,CAAhB,EAGJA,UAJc;EAKjBjD,OAAO,EAAE8C,kBAAA,CAAUK,OAAV,CAAkBL,kBAAA,CAAUC,KAAV,CAAgBK,oBAAA,CAAYP,SAA5B,CAAlB;AALQ,C;eAwGNlD,Y"}
1
+ {"version":3,"file":"stars-summary.js","names":["EngineTabs","engines","state","firstItem","buildEngineTab","useCallback","engine","index","style","type","hidden","active","useMemo","convert","cap","propTypes","PropTypes","arrayOf","shape","EngineStars","oneOf","number","StarsSummary","React","Component","constructor","props","totalItems","length","handleOnLeft","bind","handleOnRight","scrollTo","page","setState","render","total","skin","context","dark","primary","leftArrowView","circle","left","rightArrowView","right","myStars","myStarsWrapper","allStars","footerSummaryStars","backgroundColor","totalStars","label","stars","iconBubble","iconHeader","navigationLeft","navigationRight","contextTypes","Provider","childContextTypes","string","isRequired"],"sources":["../../../src/template/activity/stars-summary.js"],"sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {get, getOr, isEmpty, map} from 'lodash/fp';\nimport {\n NovaCompositionNavigationArrowLeft as ArrowLeft,\n NovaCompositionNavigationArrowRight as ArrowRight,\n NovaCompositionCoorpacademyStar as StarIcon\n} from '@coorpacademy/nova-icons';\nimport Provider from '../../atom/provider';\nimport EngineStars from './engine-stars';\nimport style from './stars-summary.css';\n\nconst EngineTabs = ({engines, state, firstItem}) => {\n const buildEngineTab = useCallback(\n (engine, index) => {\n return (\n <div className={style[state]} key={engine.type} data-name={`${engine.type}_total_${state}`}>\n <EngineStars {...engine} className={index < firstItem ? style.hidden : style.active} />\n </div>\n );\n },\n [firstItem, state]\n );\n\n return useMemo(\n () => map.convert({cap: false})(buildEngineTab, engines),\n [buildEngineTab, engines]\n );\n};\n\nEngineTabs.propTypes = {\n engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)),\n state: PropTypes.oneOf(['hidden', 'active']),\n firstItem: PropTypes.number\n};\n\nclass StarsSummary extends React.Component {\n static propTypes = {\n total: PropTypes.shape({\n label: PropTypes.string.isRequired,\n stars: PropTypes.number.isRequired\n }).isRequired,\n engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes))\n };\n\n static contextTypes = {\n skin: Provider.childContextTypes.skin\n };\n\n constructor(props) {\n super(props);\n\n const {engines = []} = props;\n this.state = {\n firstItem: 0,\n totalItems: engines.length\n };\n\n this.handleOnLeft = this.handleOnLeft.bind(this);\n this.handleOnRight = this.handleOnRight.bind(this);\n this.scrollTo = this.scrollTo.bind(this);\n }\n\n handleOnLeft() {\n const {firstItem} = this.state;\n this.scrollTo(firstItem - 1);\n }\n\n handleOnRight() {\n const {firstItem} = this.state;\n this.scrollTo(firstItem + 1);\n }\n\n scrollTo(page) {\n this.setState({\n firstItem: page\n });\n }\n\n render() {\n const {total, engines = []} = this.props;\n const {skin} = this.context;\n const {firstItem, totalItems} = this.state;\n const dark = getOr('#90A4AE', 'common.dark', skin);\n const primary = get('common.primary', skin);\n\n if (isEmpty(engines)) {\n return null;\n }\n const leftArrowView =\n totalItems > 6 && firstItem > 0 ? (\n <div className={style.circle} onClick={this.handleOnLeft} data-name=\"left-arrow\">\n <ArrowLeft color={dark} className={style.left} width={10} height={10} />\n </div>\n ) : null;\n\n const rightArrowView =\n totalItems > 6 && firstItem < totalItems - 6 ? (\n <div className={style.circle} onClick={this.handleOnRight} data-name=\"right-arrow\">\n <ArrowRight color={dark} className={style.right} width={10} height={10} />\n </div>\n ) : null;\n\n return (\n <div data-name=\"myStars\" className={style.myStars}>\n <div data-name=\"myStars-wrapper\" className={style.myStarsWrapper}>\n <div className={style.allStars} data-name=\"engineList\">\n <EngineStars engines={engines} state={this.state} firstItem={firstItem} />\n </div>\n <div\n className={style.footerSummaryStars}\n style={{\n backgroundColor: primary\n }}\n >\n <div className={style.totalStars}>\n <span>{total.label}</span>\n <p data-name=\"star-counter\">{total.stars}</p>\n <div className={style.iconBubble}>\n <StarIcon className={style.iconHeader} color={primary} />\n </div>\n </div>\n <div className={style.navigationLeft}>{leftArrowView}</div>\n <div className={style.navigationRight}>{rightArrowView}</div>\n </div>\n </div>\n </div>\n );\n }\n}\n\nexport default StarsSummary;\n"],"mappings":"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"}
@@ -146,6 +146,7 @@
146
146
  margin-right: 40px;
147
147
  margin-top: 30px;
148
148
  padding-bottom: 0;
149
+ z-index: 1;
149
150
  }
150
151
 
151
152
  .selectBorder {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coorpacademy/components",
3
- "version": "10.30.12-alpha.3+47e583b42",
3
+ "version": "10.30.12-alpha.7+6a7968a03",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
@@ -158,5 +158,5 @@
158
158
  "last 2 versions",
159
159
  "IE 11"
160
160
  ],
161
- "gitHead": "47e583b42c0a20c6cf5e82fef007189cf92cbae0"
161
+ "gitHead": "6a7968a03a83dc4fe57d3874f323d12acab5d5d3"
162
162
  }