@coorpacademy/components 11.0.1 → 11.0.2

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

@@ -30,26 +30,86 @@ const style = _reactNative.StyleSheet.create({
   }
 });
 
+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:
+   -> it's like our eye is looking from the right [3,2,1,0] <-- oO
+*/
+
+
 const StackedSlides = props => {
   const {
     height: windowHeight
   } = (0, _reactNative.useWindowDimensions)();
   const {
+    endReview,
     slides,
     validateButton,
     correctionPopinProps
   } = props;
+  const [unstacked, setUnstacked] = (0, _react.useState)([]);
+  const [restacked, setRestacked] = (0, _react.useState)();
   const hideSlides = (0, _reactNativeAnimation.useTranslateY)({
     fromValue: 0,
     toValue: windowHeight,
     duration: 800
   });
-  (0, _react.useEffect)(() => hideSlides.start(), []);
-  const indexes = (0, _keys.default)(slides).reverse();
-  const stackedSlides = indexes.map(slideIndex => {
+  const translateDown = (0, _reactNativeAnimation.useTranslateY)({
+    fromValue: 0,
+    toValue: windowHeight - 100,
+    duration: 1000
+  });
+  (0, _react.useEffect)(() => {
+    if (endReview) {
+      hideSlides.start();
+    }
+  }, [endReview, hideSlides]);
+  const restackingSlide = (0, _keys.default)(slides).find(k => slides[k].animationType === 'restack');
+  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;
+  (0, _react.useEffect)(() => {
+    if (restacked && orderedKeys.includes(restacked)) {
+      setRestacked(null);
+    } // this effect is required only when the list orderedKeys changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [orderedKeys.toString()]);
+  (0, _react.useEffect)(() => {
+    const unstacking = unstackingSlide && !unstacked.includes(unstackingSlide);
+
+    if (unstacking) {
+      translateDown.start(() => {
+        setUnstacked([...unstacked, unstackingSlide]);
+      });
+    }
+  }, [unstackingSlide, unstacked, setUnstacked, translateDown]);
+  (0, _react.useEffect)(() => {
+    const restacking = restackingSlide && restacked !== restackingSlide;
+
+    if (restacking) {
+      translateDown.start(() => {
+        setRestacked(restackingSlide);
+      });
+    }
+  }, [restackingSlide, restacked, setRestacked, translateDown]);
+  const stackedSlides = orderedKeys.map((slideIndex, index) => {
     const slide = slides[slideIndex];
     return /*#__PURE__*/_react.default.createElement(_index.default, {
-      num: Number.parseInt(slideIndex),
+      num: orderedKeys.length - index,
       slideIndex,
       slide,
       validateButton,
@@ -57,9 +117,25 @@ const StackedSlides = props => {
       key: slideIndex
     });
   });
+
+  if (animatedSlide) {
+    stackedSlides.push( /*#__PURE__*/_react.default.createElement(_index.default, {
+      num: 0,
+      slideIndex: animatedSlide,
+      slide: slides[animatedSlide],
+      validateButton,
+      correctionPopinProps,
+      animatedStyle: [translateDown.animatedStyle],
+      key: animatedSlide
+    }));
+  }
+
   return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
     style: [style.slides, hideSlides.animatedStyle]
-  }, stackedSlides);
+  }, restacked ? /*#__PURE__*/_react.default.createElement(FakeSlide, {
+    position: orderedKeys.length + 1,
+    validateButton: validateButton
+  }) : null, stackedSlides);
 };
 
 var _default = 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","StackedSlides","props","windowHeight","useWindowDimensions","validateButton","correctionPopinProps","hideSlides","useTranslateY","fromValue","toValue","duration","useEffect","start","indexes","keys","reverse","stackedSlides","map","slideIndex","slide","num","Number","parseInt","animatedStyle"],"sources":["../../../src/organism/review-stacked-slides/index.native.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport {Animated, 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 {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\nconst StackedSlides = (props: ReviewStackProps) => {\n  const {height: windowHeight} = useWindowDimensions();\n  const {slides, validateButton, correctionPopinProps} = props;\n\n  const hideSlides = useTranslateY({\n    fromValue: 0,\n    toValue: windowHeight,\n    duration: 800\n  });\n\n  useEffect(() => hideSlides.start(), []);\n\n  const indexes = keys(slides).reverse();\n  const stackedSlides = indexes.map(slideIndex => {\n    const slide = slides[slideIndex];\n\n    return (\n      <Slide\n        {...{\n          num: Number.parseInt(slideIndex),\n          slideIndex,\n          slide,\n          validateButton,\n          correctionPopinProps\n        }}\n        key={slideIndex}\n      />\n    );\n  });\n\n  return (\n    <Animated.View style={[style.slides, hideSlides.animatedStyle]}>{stackedSlides}</Animated.View>\n  );\n};\n\nexport default StackedSlides;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAGO,MAAMA,kBAAkB,GAAG,CAA3B;;;AAEP,MAAMC,KAAK,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC9BC,MAAM,EAAE;IACNC,IAAI,EAAE,CADA;IAENC,MAAM,EAAE,MAFF;IAGNC,KAAK,EAAE;EAHD;AADsB,CAAlB,CAAd;;AAQA,MAAMC,aAAa,GAAIC,KAAD,IAA6B;EACjD,MAAM;IAACH,MAAM,EAAEI;EAAT,IAAyB,IAAAC,gCAAA,GAA/B;EACA,MAAM;IAACP,MAAD;IAASQ,cAAT;IAAyBC;EAAzB,IAAiDJ,KAAvD;EAEA,MAAMK,UAAU,GAAG,IAAAC,mCAAA,EAAc;IAC/BC,SAAS,EAAE,CADoB;IAE/BC,OAAO,EAAEP,YAFsB;IAG/BQ,QAAQ,EAAE;EAHqB,CAAd,CAAnB;EAMA,IAAAC,gBAAA,EAAU,MAAML,UAAU,CAACM,KAAX,EAAhB,EAAoC,EAApC;EAEA,MAAMC,OAAO,GAAG,IAAAC,aAAA,EAAKlB,MAAL,EAAamB,OAAb,EAAhB;EACA,MAAMC,aAAa,GAAGH,OAAO,CAACI,GAAR,CAAYC,UAAU,IAAI;IAC9C,MAAMC,KAAK,GAAGvB,MAAM,CAACsB,UAAD,CAApB;IAEA,oBACE,6BAAC,cAAD;MAEIE,GAAG,EAAEC,MAAM,CAACC,QAAP,CAAgBJ,UAAhB,CAFT;MAGIA,UAHJ;MAIIC,KAJJ;MAKIf,cALJ;MAMIC,oBANJ;MAQE,GAAG,EAAEa;IARP,EADF;EAYD,CAfqB,CAAtB;EAiBA,oBACE,6BAAC,qBAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAACzB,KAAK,CAACG,MAAP,EAAeU,UAAU,CAACiB,aAA1B;EAAtB,GAAiEP,aAAjE,CADF;AAGD,CAjCD;;eAmCehB,a"}
+{"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","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, 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: 1000\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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"}

package/lib/template/app-player/popin-end/index.d.ts

@@ -65,6 +65,7 @@ declare namespace PopinEnd {
                     avatar: PropTypes.Requireable<any>;
                     loading: PropTypes.Requireable<boolean>;
                     value: PropTypes.Requireable<string>;
+                    profileAvatarAlt: PropTypes.Requireable<string>;
                     title: PropTypes.Requireable<string>;
                     onPost: PropTypes.Requireable<(...args: any[]) => any>;
                     onChange: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/template/app-player/popin-end/summary.d.ts

@@ -71,6 +71,7 @@ declare namespace Summary {
                 avatar: PropTypes.Requireable<any>;
                 loading: PropTypes.Requireable<boolean>;
                 value: PropTypes.Requireable<string>;
+                profileAvatarAlt: PropTypes.Requireable<string>;
                 title: PropTypes.Requireable<string>;
                 onPost: PropTypes.Requireable<(...args: any[]) => any>;
                 onChange: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/template/common/discipline/index.d.ts

@@ -78,6 +78,7 @@ declare namespace Discipline {
                 avatar: PropTypes.Requireable<any>;
                 loading: PropTypes.Requireable<boolean>;
                 value: PropTypes.Requireable<string>;
+                profileAvatarAlt: PropTypes.Requireable<string>;
                 title: PropTypes.Requireable<string>;
                 onPost: PropTypes.Requireable<(...args: any[]) => any>;
                 onChange: PropTypes.Requireable<(...args: any[]) => any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.0.1",
+  "version": "11.0.2",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -57,7 +57,7 @@
   ],
   "dependencies": {
     "@coorpacademy/nova-icons": "4.0.0",
-    "@coorpacademy/react-native-animation": "1.0.1",
+    "@coorpacademy/react-native-animation": "1.0.2",
     "@jwplayer/jwplayer-react": "^1.1.0",
     "@types/react": "^17.0.50",
     "@types/react-dom": "^17.0.17",
@@ -159,5 +159,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "726c8d07a9b92a9fa28a1b754ab361ae3cb3e650"
+  "gitHead": "8f7727d8125f1538d2b683c1af2f1879186e36fe"
 }