@coorpacademy/components 11.6.1 → 11.7.3

package/lib/template/activity/index.js

@@ -3,19 +3,19 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _omit2 = _interopRequireDefault(require("lodash/fp/omit"));
+var _get = _interopRequireDefault(require("lodash/fp/get"));
 
-var _get2 = _interopRequireDefault(require("lodash/fp/get"));
+var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
 
-var _react = _interopRequireDefault(require("react"));
+var _omit = _interopRequireDefault(require("lodash/fp/omit"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _provider = _interopRequireDefault(require("../../atom/provider"));
+var _provider = _interopRequireWildcard(require("../../atom/provider"));
 
 var _button = _interopRequireDefault(require("../../atom/button"));
 
@@ -33,114 +33,99 @@ var _style = _interopRequireDefault(require("./style.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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); }
+
+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; }
+
 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); }
 
-class Progression extends _react.default.Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.handleClick = e => {
-      const {
-        recommendation
-      } = this.props;
-      e.stopPropagation();
-      e.preventDefault();
-      const {
-        onClick
-      } = recommendation;
-      onClick && onClick(e);
-    };
-
-    this.handleSelectTheme = e => {
-      const {
-        themeFilter: {
-          onChange
-        }
-      } = this.props;
-      onChange && onChange(e);
-    };
-
-    this.handleClick = this.handleClick.bind(this);
-    this.handleSelectTheme = this.handleSelectTheme.bind(this);
-  }
-
-  render() {
+const Progression = (props, legacyContext) => {
+  const {
+    mainTitle,
+    mainSubtitle,
+    recommendation = {},
+    progressions = [],
+    adaptiveAriaLabel,
+    total,
+    engines = [],
+    themeFilter = {},
+    loading
+  } = props;
+  const skin = (0, _provider.GetSkinFromContext)(legacyContext);
+  const {
+    onChange: themeFilterOnChange
+  } = themeFilter;
+  const handleClick = (0, _react.useCallback)(e => {
+    e.stopPropagation();
+    e.preventDefault();
     const {
-      mainTitle,
-      mainSubtitle,
-      recommendation = {},
-      progressions = [],
-      adaptiveAriaLabel,
-      total,
-      engines = [],
-      themeFilter = {},
-      loading
-    } = this.props;
-    const {
-      skin
-    } = this.context;
-    const primary = (0, _get2.default)('common.primary', skin);
-    const loader = loading ? /*#__PURE__*/_react.default.createElement("div", {
-      className: _style.default.loader
-    }, /*#__PURE__*/_react.default.createElement(_loader.default, null)) : null;
-    const allProgressions = progressions.map(progression => /*#__PURE__*/_react.default.createElement(_progressionItem.default, _extends({}, (0, _omit2.default)(['ref'], progression), {
-      key: progression.ref,
-      adaptiveAriaLabel: adaptiveAriaLabel
-    })));
-
-    const coreProgression = /*#__PURE__*/_react.default.createElement("div", {
-      "data-name": "activityCore",
-      className: _style.default.core
-    }, allProgressions);
-
-    const themeSelect = !(0, _isEmpty2.default)(themeFilter.options) ? /*#__PURE__*/_react.default.createElement(_select.default, {
-      borderClassName: _style.default.selectBorder,
-      className: _style.default.select,
-      theme: "thematiques",
-      options: themeFilter.options,
-      onChange: this.handleSelectTheme
-    }) : null;
-    const recommendationSection = !(0, _isEmpty2.default)(recommendation) ? /*#__PURE__*/_react.default.createElement("div", {
-      className: _style.default.recommendationWrapper
-    }, /*#__PURE__*/_react.default.createElement("p", {
-      className: _style.default.recommendationSection
-    }, recommendation.title, " "), /*#__PURE__*/_react.default.createElement("p", {
-      className: _style.default.recommendationSection
-    }, /*#__PURE__*/_react.default.createElement("span", null, recommendation.subtitle, " "), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(_style.default.course, _style.default.innerHTML) // eslint-disable-next-line react/no-danger
-      ,
-      dangerouslySetInnerHTML: {
-        __html: recommendation.courseTitle
-      }
-    })), /*#__PURE__*/_react.default.createElement(_button.default, {
-      type: "link",
-      onClick: this.handleClick,
-      submitValue: recommendation.cta,
-      style: {
-        backgroundColor: primary
-      },
-      className: _style.default.cta
-    })) : null;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: _style.default.default
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      "data-name": "activity-header"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: _style.default.mainTitle
-    }, /*#__PURE__*/_react.default.createElement("span", null, mainTitle), " ", mainSubtitle), /*#__PURE__*/_react.default.createElement("div", {
-      className: _style.default.headerProgression
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: _style.default.wrapperCta
-    }, themeSelect, recommendationSection), /*#__PURE__*/_react.default.createElement(_starsSummary.default, {
-      engines: engines,
-      total: total
-    }))), /*#__PURE__*/_react.default.createElement("div", {
-      className: _style.default.wrapperProgression,
-      "data-name": "activityList"
-    }, coreProgression, loader));
-  }
-
-}
+      onClick
+    } = recommendation;
+    onClick && onClick(e);
+  }, [recommendation]);
+  const handleSelectTheme = (0, _react.useCallback)(e => {
+    themeFilterOnChange && themeFilterOnChange(e);
+  }, [themeFilterOnChange]);
+  const primary = (0, _get.default)('common.primary', skin);
+  const loader = loading ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.loader
+  }, /*#__PURE__*/_react.default.createElement(_loader.default, null)) : null;
+  const allProgressions = progressions.map(progression => /*#__PURE__*/_react.default.createElement(_progressionItem.default, _extends({}, (0, _omit.default)(['ref'], progression), {
+    key: progression.ref,
+    adaptiveAriaLabel: adaptiveAriaLabel
+  })));
+
+  const coreProgression = /*#__PURE__*/_react.default.createElement("div", {
+    "data-name": "activityCore",
+    className: _style.default.core
+  }, allProgressions);
+
+  const themeSelect = !(0, _isEmpty.default)(themeFilter.options) ? /*#__PURE__*/_react.default.createElement(_select.default, {
+    borderClassName: _style.default.selectBorder,
+    className: _style.default.select,
+    theme: "thematiques",
+    options: themeFilter.options,
+    onChange: handleSelectTheme
+  }) : null;
+  const recommendationSection = !(0, _isEmpty.default)(recommendation) ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.recommendationWrapper
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: _style.default.recommendationSection
+  }, recommendation.title, " "), /*#__PURE__*/_react.default.createElement("p", {
+    className: _style.default.recommendationSection
+  }, /*#__PURE__*/_react.default.createElement("span", null, recommendation.subtitle, " "), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)(_style.default.course, _style.default.innerHTML) // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: recommendation.courseTitle
+    }
+  })), /*#__PURE__*/_react.default.createElement(_button.default, {
+    type: "link",
+    onClick: handleClick,
+    submitValue: recommendation.cta,
+    style: {
+      backgroundColor: primary
+    },
+    className: _style.default.cta
+  })) : null;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.default
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-name": "activity-header"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.mainTitle
+  }, /*#__PURE__*/_react.default.createElement("span", null, mainTitle), " ", mainSubtitle), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.headerProgression
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.wrapperCta
+  }, themeSelect, recommendationSection), /*#__PURE__*/_react.default.createElement(_starsSummary.default, {
+    engines: engines,
+    total: total
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.wrapperProgression,
+    "data-name": "activityList"
+  }, coreProgression, loader));
+};
 
 Progression.contextTypes = {
   skin: _provider.default.childContextTypes.skin

package/lib/template/activity/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Progression","React","Component","constructor","props","context","handleClick","e","recommendation","stopPropagation","preventDefault","onClick","handleSelectTheme","themeFilter","onChange","bind","render","mainTitle","mainSubtitle","progressions","adaptiveAriaLabel","total","engines","loading","skin","primary","loader","style","allProgressions","map","progression","ref","coreProgression","core","themeSelect","options","selectBorder","select","recommendationSection","recommendationWrapper","title","subtitle","classnames","course","innerHTML","__html","courseTitle","cta","backgroundColor","default","headerProgression","wrapperCta","wrapperProgression","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","isRequired","shape","label","stars","number","arrayOf","EngineStars","bool","ProgressionItem","Select","func"],"sources":["../../../src/template/activity/index.js"],"sourcesContent":["import React from 'react';\nimport {get, omit, isEmpty} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider from '../../atom/provider';\nimport Button from '../../atom/button';\nimport Select from '../../atom/select';\nimport Loader from '../../atom/loader';\nimport ProgressionItem from './progression-item';\nimport EngineStars from './engine-stars';\nimport StarsSummary from './stars-summary';\nimport style from './style.css';\n\nclass Progression extends React.Component {\n  static propTypes = {\n    mainTitle: PropTypes.string.isRequired,\n    mainSubtitle: PropTypes.string.isRequired,\n    adaptiveAriaLabel: PropTypes.string,\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    loading: PropTypes.bool.isRequired,\n    progressions: PropTypes.arrayOf(\n      PropTypes.shape({...ProgressionItem.propTypes, ref: PropTypes.string.isRequired})\n    ),\n    themeFilter: PropTypes.shape({\n      options: Select.propTypes.options.isRequired,\n      onChange: Select.propTypes.onChange\n    }),\n    recommendation: PropTypes.shape({\n      cta: PropTypes.string.isRequired,\n      title: PropTypes.string.isRequired,\n      subtitle: PropTypes.string.isRequired,\n      courseTitle: PropTypes.string.isRequired,\n      onClick: PropTypes.func\n    })\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  constructor(props, context) {\n    super(props, context);\n    this.handleClick = this.handleClick.bind(this);\n    this.handleSelectTheme = this.handleSelectTheme.bind(this);\n  }\n\n  handleClick = e => {\n    const {recommendation} = this.props;\n    e.stopPropagation();\n    e.preventDefault();\n    const {onClick} = recommendation;\n    onClick && onClick(e);\n  };\n\n  handleSelectTheme = e => {\n    const {\n      themeFilter: {onChange}\n    } = this.props;\n    onChange && onChange(e);\n  };\n\n  render() {\n    const {\n      mainTitle,\n      mainSubtitle,\n      recommendation = {},\n      progressions = [],\n      adaptiveAriaLabel,\n      total,\n      engines = [],\n      themeFilter = {},\n      loading\n    } = this.props;\n    const {skin} = this.context;\n\n    const primary = get('common.primary', skin);\n    const loader = loading ? (\n      <div className={style.loader}>\n        <Loader />\n      </div>\n    ) : null;\n    const allProgressions = progressions.map(progression => (\n      <ProgressionItem\n        {...omit(['ref'], progression)}\n        key={progression.ref}\n        adaptiveAriaLabel={adaptiveAriaLabel}\n      />\n    ));\n\n    const coreProgression = (\n      <div data-name=\"activityCore\" className={style.core}>\n        {allProgressions}\n      </div>\n    );\n    const themeSelect = !isEmpty(themeFilter.options) ? (\n      <Select\n        borderClassName={style.selectBorder}\n        className={style.select}\n        theme=\"thematiques\"\n        options={themeFilter.options}\n        onChange={this.handleSelectTheme}\n      />\n    ) : null;\n    const recommendationSection = !isEmpty(recommendation) ? (\n      <div className={style.recommendationWrapper}>\n        <p className={style.recommendationSection}>{recommendation.title} </p>\n        <p className={style.recommendationSection}>\n          <span>{recommendation.subtitle} </span>\n          <span\n            className={classnames(style.course, style.innerHTML)}\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: recommendation.courseTitle}}\n          />\n        </p>\n        <Button\n          type=\"link\"\n          onClick={this.handleClick}\n          submitValue={recommendation.cta}\n          style={{\n            backgroundColor: primary\n          }}\n          className={style.cta}\n        />\n      </div>\n    ) : null;\n    return (\n      <div className={style.default}>\n        <div data-name=\"activity-header\">\n          <div className={style.mainTitle}>\n            <span>{mainTitle}</span> {mainSubtitle}\n          </div>\n          <div className={style.headerProgression}>\n            <div className={style.wrapperCta}>\n              {themeSelect}\n              {recommendationSection}\n            </div>\n            <StarsSummary engines={engines} total={total} />\n          </div>\n        </div>\n        <div className={style.wrapperProgression} data-name=\"activityList\">\n          {coreProgression}\n          {loader}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default Progression;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Progression","props","legacyContext","mainTitle","mainSubtitle","recommendation","progressions","adaptiveAriaLabel","total","engines","themeFilter","loading","skin","GetSkinFromContext","onChange","themeFilterOnChange","handleClick","useCallback","e","stopPropagation","preventDefault","onClick","handleSelectTheme","primary","get","loader","style","allProgressions","map","progression","omit","ref","coreProgression","core","themeSelect","isEmpty","options","selectBorder","select","recommendationSection","recommendationWrapper","title","subtitle","classnames","course","innerHTML","__html","courseTitle","cta","backgroundColor","default","headerProgression","wrapperCta","wrapperProgression","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","isRequired","shape","label","stars","number","arrayOf","EngineStars","bool","ProgressionItem","Select","func"],"sources":["../../../src/template/activity/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport get from 'lodash/fp/get';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport omit from 'lodash/fp/omit';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\nimport Button from '../../atom/button';\nimport Select from '../../atom/select';\nimport Loader from '../../atom/loader';\nimport ProgressionItem from './progression-item';\nimport EngineStars from './engine-stars';\nimport StarsSummary from './stars-summary';\nimport style from './style.css';\n\nconst Progression = (props, legacyContext) => {\n  const {\n    mainTitle,\n    mainSubtitle,\n    recommendation = {},\n    progressions = [],\n    adaptiveAriaLabel,\n    total,\n    engines = [],\n    themeFilter = {},\n    loading\n  } = props;\n  const skin = GetSkinFromContext(legacyContext);\n  const {onChange: themeFilterOnChange} = themeFilter;\n\n  const handleClick = useCallback(\n    e => {\n      e.stopPropagation();\n      e.preventDefault();\n      const {onClick} = recommendation;\n      onClick && onClick(e);\n    },\n    [recommendation]\n  );\n\n  const handleSelectTheme = useCallback(\n    e => {\n      themeFilterOnChange && themeFilterOnChange(e);\n    },\n    [themeFilterOnChange]\n  );\n\n  const primary = get('common.primary', skin);\n  const loader = loading ? (\n    <div className={style.loader}>\n      <Loader />\n    </div>\n  ) : null;\n  const allProgressions = progressions.map(progression => (\n    <ProgressionItem\n      {...omit(['ref'], progression)}\n      key={progression.ref}\n      adaptiveAriaLabel={adaptiveAriaLabel}\n    />\n  ));\n\n  const coreProgression = (\n    <div data-name=\"activityCore\" className={style.core}>\n      {allProgressions}\n    </div>\n  );\n  const themeSelect = !isEmpty(themeFilter.options) ? (\n    <Select\n      borderClassName={style.selectBorder}\n      className={style.select}\n      theme=\"thematiques\"\n      options={themeFilter.options}\n      onChange={handleSelectTheme}\n    />\n  ) : null;\n  const recommendationSection = !isEmpty(recommendation) ? (\n    <div className={style.recommendationWrapper}>\n      <p className={style.recommendationSection}>{recommendation.title} </p>\n      <p className={style.recommendationSection}>\n        <span>{recommendation.subtitle} </span>\n        <span\n          className={classnames(style.course, style.innerHTML)}\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: recommendation.courseTitle}}\n        />\n      </p>\n      <Button\n        type=\"link\"\n        onClick={handleClick}\n        submitValue={recommendation.cta}\n        style={{\n          backgroundColor: primary\n        }}\n        className={style.cta}\n      />\n    </div>\n  ) : null;\n\n  return (\n    <div className={style.default}>\n      <div data-name=\"activity-header\">\n        <div className={style.mainTitle}>\n          <span>{mainTitle}</span> {mainSubtitle}\n        </div>\n        <div className={style.headerProgression}>\n          <div className={style.wrapperCta}>\n            {themeSelect}\n            {recommendationSection}\n          </div>\n          <StarsSummary engines={engines} total={total} />\n        </div>\n      </div>\n      <div className={style.wrapperProgression} data-name=\"activityList\">\n        {coreProgression}\n        {loader}\n      </div>\n    </div>\n  );\n};\n\nProgression.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nProgression.propTypes = {\n  mainTitle: PropTypes.string.isRequired,\n  mainSubtitle: PropTypes.string.isRequired,\n  adaptiveAriaLabel: PropTypes.string,\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  loading: PropTypes.bool.isRequired,\n  progressions: PropTypes.arrayOf(\n    PropTypes.shape({...ProgressionItem.propTypes, ref: PropTypes.string.isRequired})\n  ),\n  themeFilter: PropTypes.shape({\n    options: Select.propTypes.options.isRequired,\n    onChange: Select.propTypes.onChange\n  }),\n  recommendation: PropTypes.shape({\n    cta: PropTypes.string.isRequired,\n    title: PropTypes.string.isRequired,\n    subtitle: PropTypes.string.isRequired,\n    courseTitle: PropTypes.string.isRequired,\n    onClick: PropTypes.func\n  })\n};\n\nexport default Progression;\n"],"mappings":"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"}

package/lib/template/activity/stars-summary.d.ts

@@ -1,11 +1,12 @@
 export default StarsSummary;
-declare class StarsSummary extends React.Component<any, any, any> {
-    static propTypes: {
-        total: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+declare function StarsSummary(props: any, legacyContext: any): JSX.Element | null;
+declare namespace StarsSummary {
+    namespace propTypes {
+        const total: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
             label: PropTypes.Validator<string>;
             stars: PropTypes.Validator<number>;
         }>>>;
-        engines: PropTypes.Requireable<(PropTypes.InferProps<{
+        const engines: PropTypes.Validator<(PropTypes.InferProps<{
             type: PropTypes.Validator<string>;
             stars: PropTypes.Validator<number>;
             title: PropTypes.Validator<string>;
@@ -19,9 +20,9 @@ declare class StarsSummary extends React.Component<any, any, any> {
                 onClick: PropTypes.Requireable<(...args: any[]) => any>;
             }>>;
         }> | null | undefined)[]>;
-    };
-    static contextTypes: {
-        skin: PropTypes.Requireable<PropTypes.InferProps<{
+    }
+    namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
             common: PropTypes.Requireable<{
                 [x: string]: any;
             }>;
@@ -42,17 +43,7 @@ declare class StarsSummary extends React.Component<any, any, any> {
                 [x: string]: any;
             }>;
         }>>;
-    };
-    constructor(props: any);
-    state: {
-        firstItem: number;
-        totalItems: any;
-    };
-    handleOnLeft(): void;
-    handleOnRight(): void;
-    scrollTo(page: any): void;
-    render(): JSX.Element | null;
+    }
 }
-import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=stars-summary.d.ts.map

package/lib/template/activity/stars-summary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stars-summary.d.ts","sourceRoot":"","sources":["../../../src/template/activity/stars-summary.js"],"names":[],"mappings":";AAkDA;IACE;;;;;;;;;;;;;;;;;;;MAME;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IAEF,wBAYC;IARC;;;MAGC;IAOH,qBAGC;IAED,sBAGC;IAED,0BAIC;IAED,6BAiDC;CACF"}
+{"version":3,"file":"stars-summary.d.ts","sourceRoot":"","sources":["../../../src/template/activity/stars-summary.js"],"names":[],"mappings":";AA0DA,kFAiFC"}

package/lib/template/activity/stars-summary.js

@@ -17,7 +17,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _novaIcons = require("@coorpacademy/nova-icons");
 
-var _provider = _interopRequireDefault(require("../../atom/provider"));
+var _provider = _interopRequireWildcard(require("../../atom/provider"));
 
 var _engineStars = _interopRequireDefault(require("./engine-stars"));
 
@@ -34,165 +34,136 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 const EngineTab = ({
   engine,
   engineIndex,
-  firstItem
+  firstItemIndex
 }) => {
   const {
     type
   } = engine;
-  const state = engineIndex < firstItem ? 'hidden' : 'active';
+  const state = (0, _react.useMemo)(() => engineIndex < firstItemIndex ? 'hidden' : 'active', [engineIndex, firstItemIndex]);
+  const dataName = (0, _react.useMemo)(() => `${type}_total_${state}`, [state, type]);
   return /*#__PURE__*/_react.default.createElement("li", {
     className: _starsSummary.default[state],
     key: type,
-    "data-name": `${type}_total_${state}`
+    "data-name": dataName
   }, /*#__PURE__*/_react.default.createElement(_engineStars.default, _extends({}, engine, {
-    className: engineIndex < firstItem ? _starsSummary.default.hidden : _starsSummary.default.active
+    className: engineIndex < firstItemIndex ? _starsSummary.default.hidden : _starsSummary.default.active
   })));
 };
 
 EngineTab.propTypes = process.env.NODE_ENV !== "production" ? {
   engine: _propTypes.default.shape(_engineStars.default.propTypes),
   engineIndex: _propTypes.default.number,
-  firstItem: _propTypes.default.number
+  firstItemIndex: _propTypes.default.number
 } : {};
 
 const EngineTabs = ({
   engines,
-  firstItem
+  firstItemIndex
 }) => {
   return (0, _react.useMemo)(() => _map2.default.convert({
     cap: false
   })((engine, index) => /*#__PURE__*/_react.default.createElement(EngineTab, {
     engine: engine,
     key: `engineTab_${index}`,
-    firstItem: firstItem,
+    firstItemIndex: firstItemIndex,
     engineIndex: index
-  }), engines), [engines, firstItem]);
+  }), engines), [engines, firstItemIndex]);
 };
 
 EngineTabs.propTypes = process.env.NODE_ENV !== "production" ? {
   engines: _propTypes.default.arrayOf(_propTypes.default.shape(_engineStars.default.propTypes)),
-  firstItem: _propTypes.default.number
+  firstItemIndex: _propTypes.default.number
 } : {};
 
-class StarsSummary extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    const {
-      engines = []
-    } = props;
-    this.state = {
-      firstItem: 0,
-      totalItems: engines.length
-    };
-    this.handleOnLeft = this.handleOnLeft.bind(this);
-    this.handleOnRight = this.handleOnRight.bind(this);
-    this.scrollTo = this.scrollTo.bind(this);
-  }
-
-  handleOnLeft() {
-    const {
-      firstItem
-    } = this.state;
-    this.scrollTo(firstItem - 1);
-  }
-
-  handleOnRight() {
-    const {
-      firstItem
-    } = this.state;
-    this.scrollTo(firstItem + 1);
-  }
-
-  scrollTo(page) {
-    this.setState({
-      firstItem: page
-    });
+const StarsSummary = (props, legacyContext) => {
+  const {
+    total,
+    engines
+  } = props;
+  const skin = (0, _provider.GetSkinFromContext)(legacyContext);
+  const [firstItemIndex, setFirstItemIndex] = (0, _react.useState)(0);
+  const [totalItems] = (0, _react.useState)(engines.length);
+  const dark = (0, _getOr2.default)('#90A4AE', 'common.dark', skin);
+  const primary = (0, _get2.default)('common.primary', skin);
+  const scrollTo = (0, _react.useCallback)(page => setFirstItemIndex(page), []);
+  const handleOnLeft = (0, _react.useCallback)(() => {
+    scrollTo(firstItemIndex - 1);
+  }, [firstItemIndex, scrollTo]);
+  const handleOnRight = (0, _react.useCallback)(() => {
+    scrollTo(firstItemIndex + 1);
+  }, [firstItemIndex, scrollTo]);
+
+  if ((0, _isEmpty2.default)(engines)) {
+    return null;
   }
 
-  render() {
-    const {
-      total,
-      engines = []
-    } = this.props;
-    const {
-      skin
-    } = this.context;
-    const {
-      firstItem,
-      totalItems
-    } = this.state;
-    const dark = (0, _getOr2.default)('#90A4AE', 'common.dark', skin);
-    const primary = (0, _get2.default)('common.primary', skin);
-
-    if ((0, _isEmpty2.default)(engines)) {
-      return null;
+  const leftArrowView = totalItems > 6 && firstItemIndex > 0 ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _starsSummary.default.circle,
+    onClick: handleOnLeft,
+    "data-name": "left-arrow",
+    "data-testid": "stars-summary-left-arrow"
+  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowLeft, {
+    color: dark,
+    className: _starsSummary.default.left,
+    width: 10,
+    height: 10
+  })) : null;
+  const rightArrowView = totalItems > 6 && firstItemIndex < totalItems - 6 ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _starsSummary.default.circle,
+    onClick: handleOnRight,
+    "data-name": "right-arrow",
+    "data-testid": "stars-summary-right-arrow"
+  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowRight, {
+    color: dark,
+    className: _starsSummary.default.right,
+    width: 10,
+    height: 10
+  })) : null;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-name": "myStars",
+    className: _starsSummary.default.myStars
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-name": "myStars-wrapper",
+    className: _starsSummary.default.myStarsWrapper,
+    "data-testid": `stars-summary-engine-index-${firstItemIndex}`
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: _starsSummary.default.allStars,
+    "data-name": "engineList",
+    "data-testid": "stars-summary-engine-tabs"
+  }, /*#__PURE__*/_react.default.createElement(EngineTabs, {
+    engines: engines,
+    firstItemIndex: firstItemIndex
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _starsSummary.default.footerSummaryStars,
+    style: {
+      backgroundColor: primary
     }
-
-    const leftArrowView = totalItems > 6 && firstItem > 0 ? /*#__PURE__*/_react.default.createElement("div", {
-      className: _starsSummary.default.circle,
-      onClick: this.handleOnLeft,
-      "data-name": "left-arrow"
-    }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowLeft, {
-      color: dark,
-      className: _starsSummary.default.left,
-      width: 10,
-      height: 10
-    })) : null;
-    const rightArrowView = totalItems > 6 && firstItem < totalItems - 6 ? /*#__PURE__*/_react.default.createElement("div", {
-      className: _starsSummary.default.circle,
-      onClick: this.handleOnRight,
-      "data-name": "right-arrow"
-    }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowRight, {
-      color: dark,
-      className: _starsSummary.default.right,
-      width: 10,
-      height: 10
-    })) : null;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      "data-name": "myStars",
-      className: _starsSummary.default.myStars
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      "data-name": "myStars-wrapper",
-      className: _starsSummary.default.myStarsWrapper
-    }, /*#__PURE__*/_react.default.createElement("ul", {
-      className: _starsSummary.default.allStars,
-      "data-name": "engineList"
-    }, /*#__PURE__*/_react.default.createElement(EngineTabs, {
-      engines: engines,
-      firstItem: firstItem
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: _starsSummary.default.footerSummaryStars,
-      style: {
-        backgroundColor: primary
-      }
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: _starsSummary.default.totalStars
-    }, /*#__PURE__*/_react.default.createElement("span", null, total.label), /*#__PURE__*/_react.default.createElement("p", {
-      "data-name": "star-counter"
-    }, total.stars), /*#__PURE__*/_react.default.createElement("div", {
-      className: _starsSummary.default.iconBubble
-    }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyStar, {
-      className: _starsSummary.default.iconHeader,
-      color: primary
-    }))), /*#__PURE__*/_react.default.createElement("div", {
-      className: _starsSummary.default.navigationLeft
-    }, leftArrowView), /*#__PURE__*/_react.default.createElement("div", {
-      className: _starsSummary.default.navigationRight
-    }, rightArrowView))));
-  }
-
-}
-
-StarsSummary.contextTypes = {
-  skin: _provider.default.childContextTypes.skin
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _starsSummary.default.totalStars
+  }, /*#__PURE__*/_react.default.createElement("span", null, total.label), /*#__PURE__*/_react.default.createElement("p", {
+    "data-name": "star-counter"
+  }, total.stars), /*#__PURE__*/_react.default.createElement("div", {
+    className: _starsSummary.default.iconBubble
+  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyStar, {
+    className: _starsSummary.default.iconHeader,
+    color: primary
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _starsSummary.default.navigationLeft
+  }, leftArrowView), /*#__PURE__*/_react.default.createElement("div", {
+    className: _starsSummary.default.navigationRight
+  }, rightArrowView))));
 };
+
 StarsSummary.propTypes = process.env.NODE_ENV !== "production" ? {
   total: _propTypes.default.shape({
     label: _propTypes.default.string.isRequired,
     stars: _propTypes.default.number.isRequired
   }).isRequired,
-  engines: _propTypes.default.arrayOf(_propTypes.default.shape(_engineStars.default.propTypes))
+  engines: _propTypes.default.arrayOf(_propTypes.default.shape(_engineStars.default.propTypes)).isRequired
 } : {};
+StarsSummary.contextTypes = {
+  skin: _provider.default.childContextTypes.skin
+};
 var _default = StarsSummary;
 exports.default = _default;
 //# sourceMappingURL=stars-summary.js.map