@coorpacademy/components 11.2.6 → 11.2.7

package/lib/organism/review-stacked-slides/index.native.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = exports.TOTAL_SLIDES_STACK = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -19,9 +19,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-const TOTAL_SLIDES_STACK = 5;
-exports.TOTAL_SLIDES_STACK = TOTAL_SLIDES_STACK;
-
 const style = _reactNative.StyleSheet.create({
   slides: {
     flex: 1,
@@ -29,19 +26,6 @@ const style = _reactNative.StyleSheet.create({
     width: '100%'
   }
 });
-
-const FakeSlide = ({
-  position,
-  validateButton
-}) => /*#__PURE__*/_react.default.createElement(_index.default, {
-  num: position,
-  slide: {
-    loading: true,
-    position
-  },
-  slideIndex: `${position}`,
-  validateButton: validateButton
-});
 /*
    - slides are ordered to be played from left to right: [0,1,2,3]
    - slides are piled on the view, so we need to reverse the order:
@@ -60,7 +44,8 @@ const StackedSlides = props => {
     correctionPopinProps
   } = props;
   const [unstacked, setUnstacked] = (0, _react.useState)([]);
-  const [restacked, setRestacked] = (0, _react.useState)();
+  const [restacking, setRestacking] = (0, _react.useState)(null);
+  const [restackingDone, setRestackingDone] = (0, _react.useState)(false);
   const hideSlides = (0, _reactNativeAnimation.useTranslateY)({
     fromValue: 0,
     toValue: windowHeight,
@@ -72,6 +57,12 @@ const StackedSlides = props => {
     duration: 500,
     easing: _reactNative.Easing.cubic
   });
+  const restackTranslation = (0, _reactNativeAnimation.useTranslateY)({
+    toValue: 0,
+    fromValue: -windowHeight,
+    duration: 1200,
+    easing: _reactNative.Easing.out(_reactNative.Easing.cubic)
+  });
   (0, _react.useEffect)(() => {
     if (endReview) {
       hideSlides.start();
@@ -81,10 +72,12 @@ const StackedSlides = props => {
   const unstackingSlide = (0, _keys.default)(slides).find(k => slides[k].animationType === 'unstack');
   const remainingKeys = (0, _keys.default)(slides).filter(k => slides[k].position >= 0 && !slides[k].animationType);
   const orderedKeys = remainingKeys.sort((k1, k2) => slides[k2].position > slides[k1].position ? 1 : -1);
-  const animatedSlide = restackingSlide || unstackingSlide;
+  const animatedFrontSlide = unstackingSlide || (restackingSlide && restacking === null ? restackingSlide : undefined);
+  const animatedRestackedSlide = restacking !== null;
   (0, _react.useEffect)(() => {
-    if (restacked && orderedKeys.includes(restacked)) {
-      setRestacked(null);
+    if (restacking !== null && orderedKeys.includes(restacking)) {
+      setRestacking(null);
+      setRestackingDone(false);
     } // this effect is required only when the list orderedKeys changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
 
@@ -99,18 +92,24 @@ const StackedSlides = props => {
     }
   }, [unstackingSlide, unstacked, setUnstacked, translateDown]);
   (0, _react.useEffect)(() => {
-    const restacking = restackingSlide && restacked !== restackingSlide;
+    const startRestacking = !restackingDone && restackingSlide && restacking !== restackingSlide;
 
-    if (restacking) {
+    if (startRestacking) {
       translateDown.start(() => {
-        setRestacked(restackingSlide);
+        setRestacking(restackingSlide);
+        restackTranslation.start(() => {
+          setRestackingDone(true);
+        });
       });
-    }
-  }, [restackingSlide, restacked, setRestacked, translateDown]);
+    } // this effect is required only to trigger the restack animation when a new restackingSlide is set
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [restackingSlide, restacking]);
   const stackedSlides = orderedKeys.map((slideIndex, index) => {
     const slide = slides[slideIndex];
+    const num = orderedKeys.length - index;
     return /*#__PURE__*/_react.default.createElement(_index.default, {
-      num: orderedKeys.length - index,
+      num,
       slideIndex,
       slide,
       validateButton,
@@ -119,23 +118,28 @@ const StackedSlides = props => {
     });
   });
 
-  if (animatedSlide) {
+  if (animatedFrontSlide) {
     stackedSlides.push( /*#__PURE__*/_react.default.createElement(_index.default, {
       num: 0,
-      slideIndex: animatedSlide,
-      slide: slides[animatedSlide],
+      slideIndex: animatedFrontSlide,
+      slide: slides[animatedFrontSlide],
       validateButton,
       correctionPopinProps,
       animatedStyle: [translateDown.animatedStyle],
-      key: animatedSlide
+      key: animatedFrontSlide
     }));
   }
 
   return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
     style: [style.slides, hideSlides.animatedStyle]
-  }, restacked ? /*#__PURE__*/_react.default.createElement(FakeSlide, {
-    position: orderedKeys.length + 1,
-    validateButton: validateButton
+  }, animatedRestackedSlide ? /*#__PURE__*/_react.default.createElement(_index.default, {
+    num: orderedKeys.length + 1,
+    slideIndex: restacking,
+    slide: slides[restacking],
+    validateButton,
+    correctionPopinProps,
+    animatedStyle: [restackTranslation.animatedStyle],
+    key: restacking
   }) : null, stackedSlides);
 };
 

package/lib/organism/review-stacked-slides/index.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["TOTAL_SLIDES_STACK","style","StyleSheet","create","slides","flex","height","width","FakeSlide","position","validateButton","loading","StackedSlides","props","windowHeight","useWindowDimensions","endReview","correctionPopinProps","unstacked","setUnstacked","useState","restacked","setRestacked","hideSlides","useTranslateY","fromValue","toValue","duration","translateDown","easing","Easing","cubic","useEffect","start","restackingSlide","keys","find","k","animationType","unstackingSlide","remainingKeys","filter","orderedKeys","sort","k1","k2","animatedSlide","includes","toString","unstacking","restacking","stackedSlides","map","slideIndex","index","slide","num","length","push","animatedStyle"],"sources":["../../../src/organism/review-stacked-slides/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {Animated, Easing, StyleSheet, useWindowDimensions} from 'react-native';\nimport keys from 'lodash/fp/keys';\nimport {useTranslateY} from '@coorpacademy/react-native-animation';\nimport Slide from '../review-slide/index.native';\nimport type {ReviewSlideProps} from '../review-slide/prop-types';\nimport type {ReviewStackProps} from './prop-types';\n\nexport const TOTAL_SLIDES_STACK = 5;\n\nconst style = StyleSheet.create({\n  slides: {\n    flex: 1,\n    height: '100%',\n    width: '100%'\n  }\n});\n\ntype FakeSlideProps = {position: number; validateButton: ReviewSlideProps['validateButton']};\nconst FakeSlide = ({position, validateButton}: FakeSlideProps) => (\n  <Slide\n    num={position}\n    slide={{loading: true, position}}\n    slideIndex={`${position}`}\n    validateButton={validateButton}\n  />\n);\n\n/*\n   - slides are ordered to be played from left to right: [0,1,2,3]\n   - slides are piled on the view, so we need to reverse the order:\n   -> it's like our eye is looking from the right [3,2,1,0] <-- oO\n*/\nconst StackedSlides = (props: ReviewStackProps) => {\n  const {height: windowHeight} = useWindowDimensions();\n  const {endReview, slides, validateButton, correctionPopinProps} = props;\n  const [unstacked, setUnstacked] = useState<string[]>([]);\n  const [restacked, setRestacked] = useState<string | null>();\n\n  const hideSlides = useTranslateY({\n    fromValue: 0,\n    toValue: windowHeight,\n    duration: 800\n  });\n\n  const translateDown = useTranslateY({\n    fromValue: 0,\n    toValue: windowHeight - 100,\n    duration: 500,\n    easing: Easing.cubic\n  });\n\n  useEffect(() => {\n    if (endReview) {\n      hideSlides.start();\n    }\n  }, [endReview, hideSlides]);\n\n  const restackingSlide = keys(slides).find(k => slides[k].animationType === 'restack');\n  const unstackingSlide = keys(slides).find(k => slides[k].animationType === 'unstack');\n\n  const remainingKeys = keys(slides).filter(\n    k => slides[k].position >= 0 && !slides[k].animationType\n  );\n\n  const orderedKeys = remainingKeys.sort((k1, k2) =>\n    slides[k2].position > slides[k1].position ? 1 : -1\n  );\n\n  const animatedSlide = restackingSlide || unstackingSlide;\n\n  useEffect(() => {\n    if (restacked && orderedKeys.includes(restacked)) {\n      setRestacked(null);\n    }\n    // this effect is required only when the list orderedKeys changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [orderedKeys.toString()]);\n\n  useEffect(() => {\n    const unstacking = unstackingSlide && !unstacked.includes(unstackingSlide);\n\n    if (unstacking) {\n      translateDown.start(() => {\n        setUnstacked([...unstacked, unstackingSlide]);\n      });\n    }\n  }, [unstackingSlide, unstacked, setUnstacked, translateDown]);\n\n  useEffect(() => {\n    const restacking = restackingSlide && restacked !== restackingSlide;\n\n    if (restacking) {\n      translateDown.start(() => {\n        setRestacked(restackingSlide);\n      });\n    }\n  }, [restackingSlide, restacked, setRestacked, translateDown]);\n\n  const stackedSlides = orderedKeys.map((slideIndex, index) => {\n    const slide = slides[slideIndex];\n\n    return (\n      <Slide\n        {...{\n          num: orderedKeys.length - index,\n          slideIndex,\n          slide,\n          validateButton,\n          correctionPopinProps\n        }}\n        key={slideIndex}\n      />\n    );\n  });\n\n  if (animatedSlide) {\n    stackedSlides.push(\n      <Slide\n        {...{\n          num: 0,\n          slideIndex: animatedSlide,\n          slide: slides[animatedSlide],\n          validateButton,\n          correctionPopinProps\n        }}\n        animatedStyle={[translateDown.animatedStyle]}\n        key={animatedSlide}\n      />\n    );\n  }\n\n  return (\n    <Animated.View style={[style.slides, hideSlides.animatedStyle]}>\n      {restacked ? (\n        <FakeSlide position={orderedKeys.length + 1} validateButton={validateButton} />\n      ) : null}\n      {stackedSlides}\n    </Animated.View>\n  );\n};\n\nexport default StackedSlides;\n"],"mappings":"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"}
+{"version":3,"file":"index.native.js","names":["style","StyleSheet","create","slides","flex","height","width","StackedSlides","props","windowHeight","useWindowDimensions","endReview","validateButton","correctionPopinProps","unstacked","setUnstacked","useState","restacking","setRestacking","restackingDone","setRestackingDone","hideSlides","useTranslateY","fromValue","toValue","duration","translateDown","easing","Easing","cubic","restackTranslation","out","useEffect","start","restackingSlide","keys","find","k","animationType","unstackingSlide","remainingKeys","filter","position","orderedKeys","sort","k1","k2","animatedFrontSlide","undefined","animatedRestackedSlide","includes","toString","unstacking","startRestacking","stackedSlides","map","slideIndex","index","slide","num","length","push","animatedStyle"],"sources":["../../../src/organism/review-stacked-slides/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {Animated, Easing, StyleSheet, useWindowDimensions} from 'react-native';\nimport keys from 'lodash/fp/keys';\nimport {useTranslateY} from '@coorpacademy/react-native-animation';\nimport Slide from '../review-slide/index.native';\nimport type {ReviewStackProps} from './prop-types';\n\nconst style = StyleSheet.create({\n  slides: {\n    flex: 1,\n    height: '100%',\n    width: '100%'\n  }\n});\n\n/*\n   - slides are ordered to be played from left to right: [0,1,2,3]\n   - slides are piled on the view, so we need to reverse the order:\n   -> it's like our eye is looking from the right [3,2,1,0] <-- oO\n*/\nconst StackedSlides = (props: ReviewStackProps) => {\n  const {height: windowHeight} = useWindowDimensions();\n  const {endReview, slides, validateButton, correctionPopinProps} = props;\n  const [unstacked, setUnstacked] = useState<string[]>([]);\n  const [restacking, setRestacking] = useState<string | null>(null);\n  const [restackingDone, setRestackingDone] = useState<boolean>(false);\n\n  const hideSlides = useTranslateY({\n    fromValue: 0,\n    toValue: windowHeight,\n    duration: 800\n  });\n\n  const translateDown = useTranslateY({\n    fromValue: 0,\n    toValue: windowHeight - 100,\n    duration: 500,\n    easing: Easing.cubic\n  });\n\n  const restackTranslation = useTranslateY({\n    toValue: 0,\n    fromValue: -windowHeight,\n    duration: 1200,\n    easing: Easing.out(Easing.cubic)\n  });\n\n  useEffect(() => {\n    if (endReview) {\n      hideSlides.start();\n    }\n  }, [endReview, hideSlides]);\n\n  const restackingSlide = keys(slides).find(k => slides[k].animationType === 'restack');\n  const unstackingSlide = keys(slides).find(k => slides[k].animationType === 'unstack');\n\n  const remainingKeys = keys(slides).filter(\n    k => slides[k].position >= 0 && !slides[k].animationType\n  );\n\n  const orderedKeys = remainingKeys.sort((k1, k2) =>\n    slides[k2].position > slides[k1].position ? 1 : -1\n  );\n\n  const animatedFrontSlide =\n    unstackingSlide || (restackingSlide && restacking === null ? restackingSlide : undefined);\n\n  const animatedRestackedSlide = restacking !== null;\n\n  useEffect(() => {\n    if (restacking !== null && orderedKeys.includes(restacking)) {\n      setRestacking(null);\n      setRestackingDone(false);\n    }\n    // this effect is required only when the list orderedKeys changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [orderedKeys.toString()]);\n\n  useEffect(() => {\n    const unstacking = unstackingSlide && !unstacked.includes(unstackingSlide);\n\n    if (unstacking) {\n      translateDown.start(() => {\n        setUnstacked([...unstacked, unstackingSlide]);\n      });\n    }\n  }, [unstackingSlide, unstacked, setUnstacked, translateDown]);\n\n  useEffect(() => {\n    const startRestacking = !restackingDone && restackingSlide && restacking !== restackingSlide;\n\n    if (startRestacking) {\n      translateDown.start(() => {\n        setRestacking(restackingSlide);\n        restackTranslation.start(() => {\n          setRestackingDone(true);\n        });\n      });\n    }\n    // this effect is required only to trigger the restack animation when a new restackingSlide is set\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [restackingSlide, restacking]);\n\n  const stackedSlides = orderedKeys.map((slideIndex, index) => {\n    const slide = slides[slideIndex];\n    const num = orderedKeys.length - index;\n\n    return (\n      <Slide\n        {...{\n          num,\n          slideIndex,\n          slide,\n          validateButton,\n          correctionPopinProps\n        }}\n        key={slideIndex}\n      />\n    );\n  });\n\n  if (animatedFrontSlide) {\n    stackedSlides.push(\n      <Slide\n        {...{\n          num: 0,\n          slideIndex: animatedFrontSlide,\n          slide: slides[animatedFrontSlide],\n          validateButton,\n          correctionPopinProps\n        }}\n        animatedStyle={[translateDown.animatedStyle]}\n        key={animatedFrontSlide}\n      />\n    );\n  }\n\n  return (\n    <Animated.View style={[style.slides, hideSlides.animatedStyle]}>\n      {animatedRestackedSlide ? (\n        <Slide\n          {...{\n            num: orderedKeys.length + 1,\n            slideIndex: restacking,\n            slide: slides[restacking],\n            validateButton,\n            correctionPopinProps\n          }}\n          animatedStyle={[restackTranslation.animatedStyle]}\n          key={restacking}\n        />\n      ) : null}\n      {stackedSlides}\n    </Animated.View>\n  );\n};\n\nexport default StackedSlides;\n"],"mappings":"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"}

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

@@ -21,6 +21,8 @@
     display: flex;
     flex-direction: row;
     overflow: hidden;
+    margin: auto;
+    padding-left: 0;
 }
 
 .myStars {

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

@@ -40,7 +40,7 @@ const EngineTab = ({
     type
   } = engine;
   const state = engineIndex < firstItem ? 'hidden' : 'active';
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("li", {
     className: _starsSummary.default[state],
     key: type,
     "data-name": `${type}_total_${state}`
@@ -154,7 +154,7 @@ class StarsSummary extends _react.default.Component {
     }, /*#__PURE__*/_react.default.createElement("div", {
       "data-name": "myStars-wrapper",
       className: _starsSummary.default.myStarsWrapper
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/_react.default.createElement("ul", {
       className: _starsSummary.default.allStars,
       "data-name": "engineList"
     }, /*#__PURE__*/_react.default.createElement(EngineTabs, {

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

@@ -1 +1 @@
-{"version":3,"file":"stars-summary.js","names":["EngineTab","engine","engineIndex","firstItem","type","state","style","hidden","active","propTypes","PropTypes","shape","EngineStars","number","EngineTabs","engines","useMemo","convert","cap","index","arrayOf","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, {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 EngineTab = ({engine, engineIndex, firstItem}) => {\n  const {type} = engine;\n  const state = engineIndex < firstItem ? 'hidden' : 'active';\n  return (\n    <div className={style[state]} key={type} data-name={`${type}_total_${state}`}>\n      <EngineStars {...engine} className={engineIndex < firstItem ? style.hidden : style.active} />\n    </div>\n  );\n};\nEngineTab.propTypes = {\n  engine: PropTypes.shape(EngineStars.propTypes),\n  engineIndex: PropTypes.number,\n  firstItem: PropTypes.number\n};\n\nconst EngineTabs = ({engines, firstItem}) => {\n  return useMemo(\n    () =>\n      map.convert({cap: false})(\n        (engine, index) => (\n          <EngineTab\n            engine={engine}\n            key={`engineTab_${index}`}\n            firstItem={firstItem}\n            engineIndex={index}\n          />\n        ),\n        engines\n      ),\n    [engines, firstItem]\n  );\n};\n\nEngineTabs.propTypes = {\n  engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)),\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            <EngineTabs engines={engines} 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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"}
+{"version":3,"file":"stars-summary.js","names":["EngineTab","engine","engineIndex","firstItem","type","state","style","hidden","active","propTypes","PropTypes","shape","EngineStars","number","EngineTabs","engines","useMemo","convert","cap","index","arrayOf","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, {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 EngineTab = ({engine, engineIndex, firstItem}) => {\n  const {type} = engine;\n  const state = engineIndex < firstItem ? 'hidden' : 'active';\n  return (\n    <li className={style[state]} key={type} data-name={`${type}_total_${state}`}>\n      <EngineStars {...engine} className={engineIndex < firstItem ? style.hidden : style.active} />\n    </li>\n  );\n};\nEngineTab.propTypes = {\n  engine: PropTypes.shape(EngineStars.propTypes),\n  engineIndex: PropTypes.number,\n  firstItem: PropTypes.number\n};\n\nconst EngineTabs = ({engines, firstItem}) => {\n  return useMemo(\n    () =>\n      map.convert({cap: false})(\n        (engine, index) => (\n          <EngineTab\n            engine={engine}\n            key={`engineTab_${index}`}\n            firstItem={firstItem}\n            engineIndex={index}\n          />\n        ),\n        engines\n      ),\n    [engines, firstItem]\n  );\n};\n\nEngineTabs.propTypes = {\n  engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)),\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          <ul className={style.allStars} data-name=\"engineList\">\n            <EngineTabs engines={engines} firstItem={firstItem} />\n          </ul>\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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"}

package/lib/template/common/search-page/index.d.ts

@@ -62,6 +62,8 @@ declare namespace SearchPage {
             onSearch: PropTypes.Requireable<(...args: any[]) => any>;
             onToggleFilters: PropTypes.Requireable<(...args: any[]) => any>;
             onToggleSorts: PropTypes.Requireable<(...args: any[]) => any>;
+            moreSortAriaLabel: PropTypes.Requireable<string>;
+            moreFilterAriaLabel: PropTypes.Requireable<string>;
         }>>;
         const cards: PropTypes.Requireable<PropTypes.InferProps<{
             list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
@@ -96,6 +98,8 @@ declare namespace SearchPage {
                 showMoreOnRightAriaLabel: PropTypes.Requireable<string>;
             }>>;
         }>>;
+        const moreSortAriaLabel: PropTypes.Requireable<string>;
+        const moreFilterAriaLabel: PropTypes.Requireable<string>;
     }
 }
 import PropTypes from "prop-types";

package/lib/template/common/search-page/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/common/search-page/index.js"],"names":[],"mappings":";AAUA,mEAmCC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/common/search-page/index.js"],"names":[],"mappings":";AAUA,mEAgDC"}

package/lib/template/common/search-page/index.js

@@ -34,7 +34,9 @@ const SearchPage = (props, context) => {
     cards,
     noresultsfound,
     clearFilters,
-    recommendations
+    recommendations,
+    moreSortAriaLabel,
+    moreFilterAriaLabel
   } = props;
   const {
     skin
@@ -53,7 +55,10 @@ const SearchPage = (props, context) => {
     },
     type: "link"
   }))), recommendationsView) : /*#__PURE__*/_react.default.createElement(_cardsGrid.default, cards);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_filters.default, searchFilters), /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_filters.default, _extends({}, searchFilters, {
+    moreSortAriaLabel: moreSortAriaLabel,
+    moreFilterAriaLabel: moreFilterAriaLabel
+  })), /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "searchResult",
     className: _style.default.cardsWrapper
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -70,7 +75,9 @@ SearchPage.propTypes = process.env.NODE_ENV !== "production" ? {
   searchFilters: _propTypes.default.shape(_filters.default.propTypes),
   cards: _propTypes.default.shape(_cardsGrid.default.propTypes),
   clearFilters: _propTypes.default.shape(_button.default.propTypes),
-  recommendations: _propTypes.default.shape(_cardsList.default.propTypes)
+  recommendations: _propTypes.default.shape(_cardsList.default.propTypes),
+  moreSortAriaLabel: _propTypes.default.string,
+  moreFilterAriaLabel: _propTypes.default.string
 } : {};
 var _default = SearchPage;
 exports.default = _default;

package/lib/template/common/search-page/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["SearchPage","props","context","title","searchFilters","cards","noresultsfound","clearFilters","recommendations","skin","defaultColor","recommendationsView","cardsView","list","style","noresults","noresultstxt","clear","background","cardsWrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","shape","Filters","CardsGrid","Button","CardsList"],"sources":["../../../../src/template/common/search-page/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, isEmpty} from 'lodash/fp';\nimport Provider from '../../../atom/provider';\nimport Button from '../../../atom/button';\nimport Filters from '../../../molecule/filters';\nimport CardsGrid from '../../../organism/cards-grid';\nimport CardsList from '../../../molecule/dashboard/cards-list';\nimport style from './style.css';\n\nconst SearchPage = (props, context) => {\n  const {title, searchFilters, cards, noresultsfound, clearFilters, recommendations} = props;\n\n  const {skin} = context;\n  const defaultColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const recommendationsView = isEmpty(recommendations) ? null : <CardsList {...recommendations} />;\n\n  const cardsView = isEmpty(cards.list) ? (\n    <div>\n      <div className={style.noresults}>\n        <div className={style.noresultstxt}>{noresultsfound}</div>\n        <Button\n          {...clearFilters}\n          data-name=\"searchPageClear\"\n          className={style.clear}\n          style={{background: defaultColor}}\n          type=\"link\"\n        />\n      </div>\n      {recommendationsView}\n    </div>\n  ) : (\n    <CardsGrid {...cards} />\n  );\n\n  return (\n    <div>\n      <Filters {...searchFilters} />\n      <div data-name=\"searchResult\" className={style.cardsWrapper}>\n        <div className={style.title}>{title}</div>\n        {cardsView}\n      </div>\n    </div>\n  );\n};\n\nSearchPage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSearchPage.propTypes = {\n  noresultsfound: PropTypes.string,\n  title: PropTypes.string,\n  searchFilters: PropTypes.shape(Filters.propTypes),\n  cards: PropTypes.shape(CardsGrid.propTypes),\n  clearFilters: PropTypes.shape(Button.propTypes),\n  recommendations: PropTypes.shape(CardsList.propTypes)\n};\n\nexport default SearchPage;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,UAAU,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACrC,MAAM;IAACC,KAAD;IAAQC,aAAR;IAAuBC,KAAvB;IAA8BC,cAA9B;IAA8CC,YAA9C;IAA4DC;EAA5D,IAA+EP,KAArF;EAEA,MAAM;IAACQ;EAAD,IAASP,OAAf;EACA,MAAMQ,YAAY,GAAG,qBAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;EAEA,MAAME,mBAAmB,GAAG,uBAAQH,eAAR,IAA2B,IAA3B,gBAAkC,6BAAC,kBAAD,EAAeA,eAAf,CAA9D;EAEA,MAAMI,SAAS,GAAG,uBAAQP,KAAK,CAACQ,IAAd,iBAChB,uDACE;IAAK,SAAS,EAAEC,cAAA,CAAMC;EAAtB,gBACE;IAAK,SAAS,EAAED,cAAA,CAAME;EAAtB,GAAqCV,cAArC,CADF,eAEE,6BAAC,eAAD,eACMC,YADN;IAEE,aAAU,iBAFZ;IAGE,SAAS,EAAEO,cAAA,CAAMG,KAHnB;IAIE,KAAK,EAAE;MAACC,UAAU,EAAER;IAAb,CAJT;IAKE,IAAI,EAAC;EALP,GAFF,CADF,EAWGC,mBAXH,CADgB,gBAehB,6BAAC,kBAAD,EAAeN,KAAf,CAfF;EAkBA,oBACE,uDACE,6BAAC,gBAAD,EAAaD,aAAb,CADF,eAEE;IAAK,aAAU,cAAf;IAA8B,SAAS,EAAEU,cAAA,CAAMK;EAA/C,gBACE;IAAK,SAAS,EAAEL,cAAA,CAAMX;EAAtB,GAA8BA,KAA9B,CADF,EAEGS,SAFH,CAFF,CADF;AASD,CAnCD;;AAqCAZ,UAAU,CAACoB,YAAX,GAA0B;EACxBX,IAAI,EAAEY,iBAAA,CAASC,iBAAT,CAA2Bb;AADT,CAA1B;AAIAT,UAAU,CAACuB,SAAX,2CAAuB;EACrBjB,cAAc,EAAEkB,kBAAA,CAAUC,MADL;EAErBtB,KAAK,EAAEqB,kBAAA,CAAUC,MAFI;EAGrBrB,aAAa,EAAEoB,kBAAA,CAAUE,KAAV,CAAgBC,gBAAA,CAAQJ,SAAxB,CAHM;EAIrBlB,KAAK,EAAEmB,kBAAA,CAAUE,KAAV,CAAgBE,kBAAA,CAAUL,SAA1B,CAJc;EAKrBhB,YAAY,EAAEiB,kBAAA,CAAUE,KAAV,CAAgBG,eAAA,CAAON,SAAvB,CALO;EAMrBf,eAAe,EAAEgB,kBAAA,CAAUE,KAAV,CAAgBI,kBAAA,CAAUP,SAA1B;AANI,CAAvB;eASevB,U"}
+{"version":3,"file":"index.js","names":["SearchPage","props","context","title","searchFilters","cards","noresultsfound","clearFilters","recommendations","moreSortAriaLabel","moreFilterAriaLabel","skin","defaultColor","recommendationsView","cardsView","list","style","noresults","noresultstxt","clear","background","cardsWrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","shape","Filters","CardsGrid","Button","CardsList"],"sources":["../../../../src/template/common/search-page/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, isEmpty} from 'lodash/fp';\nimport Provider from '../../../atom/provider';\nimport Button from '../../../atom/button';\nimport Filters from '../../../molecule/filters';\nimport CardsGrid from '../../../organism/cards-grid';\nimport CardsList from '../../../molecule/dashboard/cards-list';\nimport style from './style.css';\n\nconst SearchPage = (props, context) => {\n  const {\n    title,\n    searchFilters,\n    cards,\n    noresultsfound,\n    clearFilters,\n    recommendations,\n    moreSortAriaLabel,\n    moreFilterAriaLabel\n  } = props;\n\n  const {skin} = context;\n  const defaultColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const recommendationsView = isEmpty(recommendations) ? null : <CardsList {...recommendations} />;\n\n  const cardsView = isEmpty(cards.list) ? (\n    <div>\n      <div className={style.noresults}>\n        <div className={style.noresultstxt}>{noresultsfound}</div>\n        <Button\n          {...clearFilters}\n          data-name=\"searchPageClear\"\n          className={style.clear}\n          style={{background: defaultColor}}\n          type=\"link\"\n        />\n      </div>\n      {recommendationsView}\n    </div>\n  ) : (\n    <CardsGrid {...cards} />\n  );\n\n  return (\n    <div>\n      <Filters\n        {...searchFilters}\n        moreSortAriaLabel={moreSortAriaLabel}\n        moreFilterAriaLabel={moreFilterAriaLabel}\n      />\n      <div data-name=\"searchResult\" className={style.cardsWrapper}>\n        <div className={style.title}>{title}</div>\n        {cardsView}\n      </div>\n    </div>\n  );\n};\n\nSearchPage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSearchPage.propTypes = {\n  noresultsfound: PropTypes.string,\n  title: PropTypes.string,\n  searchFilters: PropTypes.shape(Filters.propTypes),\n  cards: PropTypes.shape(CardsGrid.propTypes),\n  clearFilters: PropTypes.shape(Button.propTypes),\n  recommendations: PropTypes.shape(CardsList.propTypes),\n  moreSortAriaLabel: PropTypes.string,\n  moreFilterAriaLabel: PropTypes.string\n};\n\nexport default SearchPage;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,UAAU,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACrC,MAAM;IACJC,KADI;IAEJC,aAFI;IAGJC,KAHI;IAIJC,cAJI;IAKJC,YALI;IAMJC,eANI;IAOJC,iBAPI;IAQJC;EARI,IASFT,KATJ;EAWA,MAAM;IAACU;EAAD,IAAST,OAAf;EACA,MAAMU,YAAY,GAAG,qBAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;EAEA,MAAME,mBAAmB,GAAG,uBAAQL,eAAR,IAA2B,IAA3B,gBAAkC,6BAAC,kBAAD,EAAeA,eAAf,CAA9D;EAEA,MAAMM,SAAS,GAAG,uBAAQT,KAAK,CAACU,IAAd,iBAChB,uDACE;IAAK,SAAS,EAAEC,cAAA,CAAMC;EAAtB,gBACE;IAAK,SAAS,EAAED,cAAA,CAAME;EAAtB,GAAqCZ,cAArC,CADF,eAEE,6BAAC,eAAD,eACMC,YADN;IAEE,aAAU,iBAFZ;IAGE,SAAS,EAAES,cAAA,CAAMG,KAHnB;IAIE,KAAK,EAAE;MAACC,UAAU,EAAER;IAAb,CAJT;IAKE,IAAI,EAAC;EALP,GAFF,CADF,EAWGC,mBAXH,CADgB,gBAehB,6BAAC,kBAAD,EAAeR,KAAf,CAfF;EAkBA,oBACE,uDACE,6BAAC,gBAAD,eACMD,aADN;IAEE,iBAAiB,EAAEK,iBAFrB;IAGE,mBAAmB,EAAEC;EAHvB,GADF,eAME;IAAK,aAAU,cAAf;IAA8B,SAAS,EAAEM,cAAA,CAAMK;EAA/C,gBACE;IAAK,SAAS,EAAEL,cAAA,CAAMb;EAAtB,GAA8BA,KAA9B,CADF,EAEGW,SAFH,CANF,CADF;AAaD,CAhDD;;AAkDAd,UAAU,CAACsB,YAAX,GAA0B;EACxBX,IAAI,EAAEY,iBAAA,CAASC,iBAAT,CAA2Bb;AADT,CAA1B;AAIAX,UAAU,CAACyB,SAAX,2CAAuB;EACrBnB,cAAc,EAAEoB,kBAAA,CAAUC,MADL;EAErBxB,KAAK,EAAEuB,kBAAA,CAAUC,MAFI;EAGrBvB,aAAa,EAAEsB,kBAAA,CAAUE,KAAV,CAAgBC,gBAAA,CAAQJ,SAAxB,CAHM;EAIrBpB,KAAK,EAAEqB,kBAAA,CAAUE,KAAV,CAAgBE,kBAAA,CAAUL,SAA1B,CAJc;EAKrBlB,YAAY,EAAEmB,kBAAA,CAAUE,KAAV,CAAgBG,eAAA,CAAON,SAAvB,CALO;EAMrBjB,eAAe,EAAEkB,kBAAA,CAAUE,KAAV,CAAgBI,kBAAA,CAAUP,SAA1B,CANI;EAOrBhB,iBAAiB,EAAEiB,kBAAA,CAAUC,MAPR;EAQrBjB,mBAAmB,EAAEgB,kBAAA,CAAUC;AARV,CAAvB;eAWe3B,U"}

package/locales/.mtslconfig.json

@@ -0,0 +1 @@
+{"ignore_dirs":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.2.6",
+  "version": "11.2.7",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -159,5 +159,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "6431110dca2ece7b3421ec37913c10205fc8440d"
+  "gitHead": "59ef4c9b320af26fd9f25764770e75c927d43d2e"
 }