@coorpacademy/components 10.19.13-alpha.8 → 10.21.0

package/README.md

@@ -160,6 +160,11 @@ Build modifications:
 [@coorpacademy-components] > npm run build:es
 ```
 
+
+## Use in mobile app
+Run `npm run build:watch``
+For more info see the mobile documentaion (`docs/local-sync.md`)
+
 ## Troubleshooting
 
 Error when trying to launch the storybook:

package/es/molecule/review-header-steps/index.js

@@ -10,8 +10,10 @@ const ReviewHeaderSteps = props => {
   const {
     steps
   } = props;
-  const items = map(step => /*#__PURE__*/React.createElement(ReviewHeaderStepItem, _extends({}, step, {
-    key: step.value
+  const items = map.convert({
+    cap: false
+  })((step, index) => /*#__PURE__*/React.createElement(ReviewHeaderStepItem, _extends({}, step, {
+    key: index
   })), steps);
   return /*#__PURE__*/React.createElement("div", {
     className: style.wrapper,

package/es/molecule/review-header-steps/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecule/review-header-steps/index.js"],"names":["React","PropTypes","map","ReviewHeaderStepItem","style","ReviewHeaderSteps","props","steps","items","step","value","wrapper","propTypes","arrayOf","shape"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,GAAP,MAAgB,eAAhB;AACA,OAAOC,oBAAP,MAAiC,oCAAjC;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,iBAAiB,GAAGC,KAAK,IAAI;AACjC,QAAM;AAACC,IAAAA;AAAD,MAAUD,KAAhB;AAEA,QAAME,KAAK,GAAGN,GAAG,CAACO,IAAI,iBAAI,oBAAC,oBAAD,eAA0BA,IAA1B;AAAgC,IAAA,GAAG,EAAEA,IAAI,CAACC;AAA1C,KAAT,EAA8DH,KAA9D,CAAjB;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEH,KAAK,CAACO,OAAtB;AAA+B,iBAAU;AAAzC,KACGH,KADH,CADF;AAKD,CAVD;;AAYAH,iBAAiB,CAACO,SAAlB,2CAA8B;AAC5BL,EAAAA,KAAK,EAAEN,SAAS,CAACY,OAAV,CAAkBZ,SAAS,CAACa,KAAV,CAAgBX,oBAAoB,CAACG,KAArC,CAAlB;AADqB,CAA9B;AAIA,eAAeD,iBAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport map from 'lodash/fp/map';\nimport ReviewHeaderStepItem from '../../atom/review-header-step-item';\nimport style from './style.css';\n\nconst ReviewHeaderSteps = props => {\n  const {steps} = props;\n\n  const items = map(step => <ReviewHeaderStepItem {...step} key={step.value} />, steps);\n\n  return (\n    <div className={style.wrapper} data-name=\"header-steps\">\n      {items}\n    </div>\n  );\n};\n\nReviewHeaderSteps.propTypes = {\n  steps: PropTypes.arrayOf(PropTypes.shape(ReviewHeaderStepItem.props))\n};\n\nexport default ReviewHeaderSteps;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/molecule/review-header-steps/index.js"],"names":["React","PropTypes","map","ReviewHeaderStepItem","style","ReviewHeaderSteps","props","steps","items","convert","cap","step","index","wrapper","propTypes","arrayOf","shape"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,GAAP,MAAgB,eAAhB;AACA,OAAOC,oBAAP,MAAiC,oCAAjC;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,iBAAiB,GAAGC,KAAK,IAAI;AACjC,QAAM;AAACC,IAAAA;AAAD,MAAUD,KAAhB;AAEA,QAAME,KAAK,GAAGN,GAAG,CAACO,OAAJ,CAAY;AAACC,IAAAA,GAAG,EAAE;AAAN,GAAZ,EACZ,CAACC,IAAD,EAAOC,KAAP,kBAAiB,oBAAC,oBAAD,eAA0BD,IAA1B;AAAgC,IAAA,GAAG,EAAEC;AAArC,KADL,EAEZL,KAFY,CAAd;AAKA,sBACE;AAAK,IAAA,SAAS,EAAEH,KAAK,CAACS,OAAtB;AAA+B,iBAAU;AAAzC,KACGL,KADH,CADF;AAKD,CAbD;;AAeAH,iBAAiB,CAACS,SAAlB,2CAA8B;AAC5BP,EAAAA,KAAK,EAAEN,SAAS,CAACc,OAAV,CAAkBd,SAAS,CAACe,KAAV,CAAgBb,oBAAoB,CAACG,KAArC,CAAlB;AADqB,CAA9B;AAIA,eAAeD,iBAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport map from 'lodash/fp/map';\nimport ReviewHeaderStepItem from '../../atom/review-header-step-item';\nimport style from './style.css';\n\nconst ReviewHeaderSteps = props => {\n  const {steps} = props;\n\n  const items = map.convert({cap: false})(\n    (step, index) => <ReviewHeaderStepItem {...step} key={index} />,\n    steps\n  );\n\n  return (\n    <div className={style.wrapper} data-name=\"header-steps\">\n      {items}\n    </div>\n  );\n};\n\nReviewHeaderSteps.propTypes = {\n  steps: PropTypes.arrayOf(PropTypes.shape(ReviewHeaderStepItem.props))\n};\n\nexport default ReviewHeaderSteps;\n"],"file":"index.js"}

package/es/template/app-review/slides/index.js

@@ -5,6 +5,10 @@ import classnames from 'classnames';
 import get from 'lodash/fp/get';
 import getOr from 'lodash/fp/getOr';
 import isNil from 'lodash/fp/isNil';
+import map from 'lodash/fp/map';
+import omit from 'lodash/fp/omit';
+import pipe from 'lodash/fp/pipe';
+import size from 'lodash/fp/size';
 import { ICON_VALUES } from '../../../atom/review-header-step-item';
 import ReviewBackground from '../../../atom/review-background';
 import ReviewCongrats from '../../../organism/review-congrats';
@@ -26,9 +30,12 @@ export const HIGHEST_INDEX = TOTAL_SLIDES_STACK - 1;
 
 const getSlideAnimation = (action, position, hidden) => {
   switch (action) {
+    /* istanbul ignore next */
     case 'unstack':
       return style.slideOutHideAndIn;
 
+    /* istanbul ignore next */
+
     case 'restack':
       return style.slideOutAndIn;
 
@@ -39,45 +46,37 @@ const getSlideAnimation = (action, position, hidden) => {
 
 const Slide = ({
   slideNumber,
-  slidesState,
+  slides,
   primarySkinColor,
   validate,
   validateSlide,
   finishedSlides,
-  updateSlidesOnValidation,
+  finishedSlidesSize,
   updateSlidesOnNext,
   updateReviewStatus,
-  updateStepItemsOnValidation,
   updateStepItemsOnNext,
-  updateFinishedSlides,
   slideValidationResult,
-  correctionPopinProps = {}
+  correctionPopinProps
 }) => {
-  const result = get('result', slideValidationResult);
-  const exitNode = get('exitNode', slideValidationResult);
-  const nextSlide = get('nextSlide', slideValidationResult); // const validatedSlideNumber = get('slideNumber', slideValidationResult);
-
-  const {
-    hidden,
-    endReview,
-    position,
-    animationType,
-    validationResult,
-    questionText,
-    answerUI
-  } = slidesState.get(slideNumber);
-  const {
-    label: validateLabel
-  } = validate;
+  const hidden = getOr(false, `${slideNumber}.hidden`, slides);
+  const endReview = getOr(false, `${slideNumber}.endReview`, slides);
+  const position = get(`${slideNumber}.position`, slides);
+  const animationType = getOr(false, `${slideNumber}.animationType`, slides);
+  const validationResult = getOr(null, `${slideNumber}.validationResult`, slides);
+  const questionText = get(`${slideNumber}.questionText`, slides);
+  const answerUI = get(`${slideNumber}.answerUI`, slides);
+  const validateLabel = getOr('', 'label', validate);
   const validateButtonProps = {
     customStyle: {
       backgroundColor: primarySkinColor
     },
 
     /*
-      slide validation action, this will trigger the correction popin but will not trigger any
-      animations unless the endReview signal is received (all slides will disappear),
-      if there is a nextSlide content, it will be loaded here
+      slide validation action, this will trigger the correction popin
+      (with the useEffect that fires the dispatchers, if there is a nextSlide content,
+      it will be loaded here) but will not trigger any animations unless the endReview
+      signal is received (all slides will disappear, also fired in a useEffect),
+      
       if it is the last slide and the content needs to be different, then that update will
       be handled on the next slide logic but the content will be carried from here.
     */
@@ -85,26 +84,6 @@ const Slide = ({
       // result: 'success' | 'failure'
       // endReview based on nextContent ref exit node values: 'successExitNode' : 'failExitNode'
       await validateSlide();
-      updateSlidesOnValidation({
-        slideNumber,
-        newSlideContent: {
-          hidden,
-          position,
-          validationResult: result,
-          endReview: !!exitNode
-        },
-        numberOfFinishedSlides: finishedSlides.size,
-        nextSlide
-      });
-      updateStepItemsOnValidation({
-        stepNumber: slideNumber,
-        icon: result === 'success' ? ICON_VALUES.right : ICON_VALUES.wrong
-      });
-      if (result === 'success') updateFinishedSlides([slideNumber, true]);
-
-      if (endReview) {
-        updateReviewStatus('finished');
-      }
     },
     'aria-label': validateLabel,
     label: validateLabel,
@@ -112,16 +91,14 @@ const Slide = ({
     className: style.validateButton,
     disabled: !isNil(validationResult)
   };
-  const {
-    klf = {},
-    information = {
-      label: '',
-      message: ''
-    },
-    next,
-    successLabel = '',
-    failureLabel = ''
-  } = correctionPopinProps;
+  const klf = getOr({}, 'klf', correctionPopinProps);
+  const information = getOr({
+    label: '',
+    message: ''
+  }, 'information', correctionPopinProps);
+  const next = get('next', correctionPopinProps);
+  const successLabel = getOr('', 'successLabel', correctionPopinProps);
+  const failureLabel = getOr('', 'failureLabel', correctionPopinProps);
   const _correctionPopinProps = {
     next: {
       /*
@@ -131,28 +108,29 @@ const Slide = ({
         from the content carried from the validate action.
       */
       onClick: () => {
+        const exitNode = get('exitNode', slideValidationResult);
         updateSlidesOnNext({
           slideNumber,
           newSlideContent: {
             hidden: validationResult === 'success',
-            position: HIGHEST_INDEX - finishedSlides.size,
+            position: HIGHEST_INDEX - finishedSlidesSize,
+            // to restack the slide
             animationType: validationResult === 'success' ? 'unstack' : 'restack',
             validationResult,
             endReview: !!exitNode,
             answerUI,
             questionText
           },
-          numberOfFinishedSlides: finishedSlides.size
+          numberOfFinishedSlides: finishedSlidesSize
         });
         updateStepItemsOnNext({
           stepNumber: slideNumber,
           finishedSlides,
-          current: finishedSlides.size === HIGHEST_INDEX && validationResult !== 'success'
+          current: finishedSlidesSize === HIGHEST_INDEX &&
+          /* istanbul ignore next */
+          validationResult !== 'success'
         });
-
-        if (finishedSlides.size === TOTAL_SLIDES_STACK) {
-          updateReviewStatus('finished');
-        }
+        if (finishedSlidesSize === TOTAL_SLIDES_STACK) updateReviewStatus('finished');
       },
       label: next && next.label,
       'data-name': `next-question-button-${slideNumber}`,
@@ -164,7 +142,9 @@ const Slide = ({
     resultLabel: validationResult === 'success' ? successLabel : failureLabel
   };
   const questionOrigin = 'From "Master Design Thinking to become more agile" course';
-  const answerProps = get(['model', 'choices'], answerUI) ? _extends(_extends({}, answerUI), {}, {
+  const answerProps = get(['model', 'choices'], answerUI) ?
+  /* istanbul ignore next */
+  _extends(_extends({}, answerUI), {}, {
     model: _extends(_extends({}, answerUI.model), {}, {
       answers: answerUI.model.choices
     })
@@ -195,7 +175,7 @@ const Slide = ({
     className: style.validateButtonWrapper
   }, /*#__PURE__*/React.createElement(ButtonLink, validateButtonProps)), /*#__PURE__*/React.createElement("div", {
     className: validationResult ? style.correctionPopinWrapper : style.hiddenCorrectionPopinWrapper,
-    style: _extends({}, finishedSlides.size !== HIGHEST_INDEX && !validationResult && {
+    style: _extends({}, finishedSlidesSize !== HIGHEST_INDEX && !validationResult && {
       display: 'none'
     })
   }, /*#__PURE__*/React.createElement(ReviewCorrectionPopin, _correctionPopinProps)));
@@ -209,12 +189,10 @@ const StackedSlides = ({
   validate,
   validateSlide,
   finishedSlides,
-  updateSlidesOnValidation,
+  finishedSlidesSize,
   updateSlidesOnNext,
   updateReviewStatus,
-  updateStepItemsOnValidation,
   updateStepItemsOnNext,
-  updateFinishedSlides,
   slideValidationResult,
   correctionPopinProps
 }) => {
@@ -228,12 +206,10 @@ const StackedSlides = ({
       validate,
       validateSlide,
       finishedSlides,
-      updateSlidesOnValidation,
+      finishedSlidesSize,
       updateSlidesOnNext,
       updateReviewStatus,
-      updateStepItemsOnValidation,
       updateStepItemsOnNext,
-      updateFinishedSlides,
       slideValidationResult,
       correctionPopinProps
     }, {
@@ -264,30 +240,69 @@ const SlidesReview = ({
   updateStepItemsOnValidation,
   updateStepItemsOnNext,
   updateFinishedSlides,
-  slideValidationResult = {}
+  slideValidationResult
 }, context) => {
   const {
     skin
   } = context;
   const primarySkinColor = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);
+  const finishedSlidesSize = useMemo(() => pipe(omit('slideNumbers'), size)(finishedSlides), [finishedSlides]);
   /*
     ||-------> the slides have an slightly longer lifespan than the "ongoing" review State,
     after reviewState changes to "finished" the slides don't have to unmount until the last
-    slide-out animation is finished, the slides have to be unmounted to be RGAA complaint
-    (if they are only invisible but still mounted, then they will be found the assisting tools & clutter it)
+    slide-out animation is finished, the slides have to be unmounted to be RGAA complaint.
+    (if they are only invisible -but- still mounted, then they will be found by the assisting
+    tools & clutter them)
   */
 
   const [shouldMountSlides, updateShouldMountSlides] = useState(true);
-  useEffect(() => {
-    if (reviewStatus === 'finished' || finishedSlides.size === TOTAL_SLIDES_STACK) {
+  useEffect(
+  /* istanbul ignore next */
+  () => {
+    const slideNumber = get('slideNumber', slideValidationResult);
+
+    if (slideValidationResult) {
+      const hidden = getOr(false, `${slideNumber}.hidden`, slides);
+      const endReview = getOr(false, `${slideNumber}.endReview`, slides);
+      const position = get(`${slideNumber}.position`, slides);
+      const result = get('result', slideValidationResult);
+      const exitNode = get('exitNode', slideValidationResult);
+      const nextSlide = get('nextSlide', slideValidationResult);
+      updateSlidesOnValidation({
+        slideNumber,
+        newSlideContent: {
+          hidden,
+          position,
+          validationResult: result,
+          endReview: !!exitNode
+        },
+        numberOfFinishedSlides: finishedSlidesSize,
+        nextSlide
+      });
+      updateStepItemsOnValidation({
+        stepNumber: slideNumber,
+        icon: result === 'success' ? ICON_VALUES.right : ICON_VALUES.wrong
+      });
+      if (result === 'success') updateFinishedSlides({
+        slideNumber,
+        value: true
+      });
+
+      if (endReview) {
+        updateReviewStatus('finished');
+      }
+    }
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [slideValidationResult]);
+  useEffect(
+  /* istanbul ignore next */
+  () => {
+    if (reviewStatus === 'finished') {
       setTimeout(() => updateShouldMountSlides(false), 2000);
     }
-  }, [finishedSlides.size, reviewStatus, updateReviewStatus]); // ||-------> transform the step items state (Map structure) to an Array
+  }, [finishedSlidesSize, reviewStatus, updateReviewStatus]); // ||-------> transform the step items state to Array
 
-  const stepItemsArray = useMemo(() => {
-    // eslint-disable-next-line unicorn/prefer-spread
-    return Array.from(stepItems.values());
-  }, [stepItems]);
+  const stepItemsArray = useMemo(() => pipe(omit('slideNumbers'), map(stepItem => stepItem))(stepItems), [stepItems]);
 
   const _headerProps = _extends(_extends({}, headerProps), {}, {
     steps: stepItemsArray,
@@ -320,16 +335,17 @@ const SlidesReview = ({
     validate,
     validateSlide,
     finishedSlides,
-    updateSlidesOnValidation,
+    finishedSlidesSize,
     updateSlidesOnNext,
     updateReviewStatus,
-    updateStepItemsOnValidation,
     updateStepItemsOnNext,
-    updateFinishedSlides,
     slideValidationResult,
     correctionPopinProps
-  }))) : null, reviewStatus === 'finished' ? /*#__PURE__*/React.createElement("div", {
-    className: style.congrats
+  }))) :
+  /* istanbul ignore next */
+  null, reviewStatus === 'finished' ? /*#__PURE__*/React.createElement("div", {
+    className: style.congrats,
+    "data-name": "congrats-container"
   }, /*#__PURE__*/React.createElement(ReviewCongrats, congratsProps)) : null);
 };
 

package/es/template/app-review/slides/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/template/app-review/slides/index.js"],"names":["React","useState","useMemo","useEffect","classnames","get","getOr","isNil","ICON_VALUES","ReviewBackground","ReviewCongrats","ReviewHeader","ReviewCorrectionPopin","Answer","ButtonLink","style","SlidesReviewPropTypes","SlidePropTypes","StackedSlidesPropTypes","stylesByPosition","position0","position1","position2","position3","position4","TOTAL_SLIDES_STACK","HIGHEST_INDEX","getSlideAnimation","action","position","hidden","slideOutHideAndIn","slideOutAndIn","hiddenSlide","Slide","slideNumber","slidesState","primarySkinColor","validate","validateSlide","finishedSlides","updateSlidesOnValidation","updateSlidesOnNext","updateReviewStatus","updateStepItemsOnValidation","updateStepItemsOnNext","updateFinishedSlides","slideValidationResult","correctionPopinProps","result","exitNode","nextSlide","endReview","animationType","validationResult","questionText","answerUI","label","validateLabel","validateButtonProps","customStyle","backgroundColor","onClick","newSlideContent","numberOfFinishedSlides","size","stepNumber","icon","right","wrong","className","validateButton","disabled","klf","information","message","next","successLabel","failureLabel","_correctionPopinProps","current","type","resultLabel","questionOrigin","answerProps","model","answers","choices","slideBase","slideContentContainer","question","help","answerContainer","validateButtonWrapper","correctionPopinWrapper","hiddenCorrectionPopinWrapper","display","propTypes","StackedSlides","slides","stackedSlides","slide","push","SlidesReview","headerProps","reviewBackgroundAriaLabel","stepItems","reviewStatus","congratsProps","context","skin","shouldMountSlides","updateShouldMountSlides","setTimeout","stepItemsArray","Array","from","values","_headerProps","steps","key","hiddenSteps","slidesRevisionContainer","playerBackground","reviewHeaderContainer","stackedSlidesYAxisOverflowContainer","stackedSlidesContainer","congrats"],"mappings":"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","sourcesContent":["import React, {useState, useMemo, useEffect} from 'react';\nimport classnames from 'classnames';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport isNil from 'lodash/fp/isNil';\nimport {ICON_VALUES} from '../../../atom/review-header-step-item';\nimport ReviewBackground from '../../../atom/review-background';\nimport ReviewCongrats from '../../../organism/review-congrats';\nimport ReviewHeader from '../../../organism/review-header';\nimport ReviewCorrectionPopin from '../../../molecule/review-correction-popin';\nimport Answer from '../../../molecule/answer';\nimport ButtonLink from '../../../atom/button-link';\nimport style from './style.css';\nimport {SlidesReviewPropTypes, SlidePropTypes, StackedSlidesPropTypes} from './prop-types';\n\nconst stylesByPosition = {\n  0: style.position0,\n  1: style.position1,\n  2: style.position2,\n  3: style.position3,\n  4: style.position4\n};\n\nexport const TOTAL_SLIDES_STACK = 5;\nexport const HIGHEST_INDEX = TOTAL_SLIDES_STACK - 1;\n\nconst getSlideAnimation = (action, position, hidden) => {\n  switch (action) {\n    case 'unstack':\n      return style.slideOutHideAndIn;\n    case 'restack':\n      return style.slideOutAndIn;\n    default:\n      return hidden ? style.hiddenSlide : stylesByPosition[position];\n  }\n};\n\nconst Slide = ({\n  slideNumber,\n  slidesState,\n  primarySkinColor,\n  validate,\n  validateSlide,\n  finishedSlides,\n  updateSlidesOnValidation,\n  updateSlidesOnNext,\n  updateReviewStatus,\n  updateStepItemsOnValidation,\n  updateStepItemsOnNext,\n  updateFinishedSlides,\n  slideValidationResult,\n  correctionPopinProps = {}\n}) => {\n  const result = get('result', slideValidationResult);\n  const exitNode = get('exitNode', slideValidationResult);\n  const nextSlide = get('nextSlide', slideValidationResult);\n  // const validatedSlideNumber = get('slideNumber', slideValidationResult);\n\n  const {\n    hidden,\n    endReview,\n    position,\n    animationType,\n    validationResult,\n    questionText,\n    answerUI\n  } = slidesState.get(slideNumber);\n\n  const {label: validateLabel} = validate;\n\n  const validateButtonProps = {\n    customStyle: {\n      backgroundColor: primarySkinColor\n    },\n    /*\n      slide validation action, this will trigger the correction popin but will not trigger any\n      animations unless the endReview signal is received (all slides will disappear),\n      if there is a nextSlide content, it will be loaded here\n      if it is the last slide and the content needs to be different, then that update will\n      be handled on the next slide logic but the content will be carried from here.\n    */\n    onClick: async () => {\n      // result: 'success' | 'failure'\n      // endReview based on nextContent ref exit node values: 'successExitNode' : 'failExitNode'\n      await validateSlide();\n      updateSlidesOnValidation({\n        slideNumber,\n        newSlideContent: {\n          hidden,\n          position,\n          validationResult: result,\n          endReview: !!exitNode\n        },\n        numberOfFinishedSlides: finishedSlides.size,\n        nextSlide\n      });\n      updateStepItemsOnValidation({\n        stepNumber: slideNumber,\n        icon: result === 'success' ? ICON_VALUES.right : ICON_VALUES.wrong\n      });\n      if (result === 'success') updateFinishedSlides([slideNumber, true]);\n      if (endReview) {\n        updateReviewStatus('finished');\n      }\n    },\n    'aria-label': validateLabel,\n    label: validateLabel,\n    'data-name': `slide-validate-button-${slideNumber}`,\n    className: style.validateButton,\n    disabled: !isNil(validationResult)\n  };\n\n  const {\n    klf = {},\n    information = {label: '', message: ''},\n    next,\n    successLabel = '',\n    failureLabel = ''\n  } = correctionPopinProps;\n\n  const _correctionPopinProps = {\n    next: {\n      /*\n        next slide action, this will trigger the slides animations\n        if it is the last slide AND the content needs to be different, then that update\n        of the content will be handled here (and in the validate as it happens normally )\n        from the content carried from the validate action.\n      */\n      onClick: () => {\n        updateSlidesOnNext({\n          slideNumber,\n          newSlideContent: {\n            hidden: validationResult === 'success',\n            position: HIGHEST_INDEX - finishedSlides.size,\n            animationType: validationResult === 'success' ? 'unstack' : 'restack',\n            validationResult,\n            endReview: !!exitNode,\n            answerUI,\n            questionText\n          },\n          numberOfFinishedSlides: finishedSlides.size\n        });\n        updateStepItemsOnNext({\n          stepNumber: slideNumber,\n          finishedSlides,\n          current: finishedSlides.size === HIGHEST_INDEX && validationResult !== 'success'\n        });\n        if (finishedSlides.size === TOTAL_SLIDES_STACK) {\n          updateReviewStatus('finished');\n        }\n      },\n      label: next && next.label,\n      'data-name': `next-question-button-${slideNumber}`,\n      'aria-label': next && next['aria-label']\n    },\n    klf,\n    information,\n    type: validationResult === 'success' ? 'right' : 'wrong',\n    resultLabel: validationResult === 'success' ? successLabel : failureLabel\n  };\n\n  const questionOrigin = 'From \"Master Design Thinking to become more agile\" course';\n  const answerProps = get(['model', 'choices'], answerUI)\n    ? {\n        ...answerUI,\n        model: {\n          ...answerUI.model,\n          answers: answerUI.model.choices\n        }\n      }\n    : answerUI;\n\n  return (\n    <div\n      key={`slide-${slideNumber}`}\n      data-name={`slide-${slideNumber}`}\n      className={classnames(\n        style.slideBase,\n        getSlideAnimation(animationType, position, hidden),\n        endReview ? style.endReview : null\n      )}\n    >\n      {answerUI && questionText ? (\n        <div key=\"content-container\" className={style.slideContentContainer}>\n          <div key=\"from-course\" className={style.questionOrigin}>\n            {questionOrigin}\n          </div>\n          <div key=\"title\" className={style.question}>\n            {questionText}\n          </div>\n          <div key=\"help\" className={style.help}>\n            {answerUI.help}\n          </div>\n          <div key=\"answer-container\" className={style.answerContainer}>\n            <Answer {...answerProps} key=\"answer\" />\n          </div>\n        </div>\n      ) : null}\n\n      <div key=\"button-wrapper\" className={style.validateButtonWrapper}>\n        <ButtonLink {...validateButtonProps} />\n      </div>\n      <div\n        className={\n          validationResult ? style.correctionPopinWrapper : style.hiddenCorrectionPopinWrapper\n        }\n        style={{\n          ...(finishedSlides.size !== HIGHEST_INDEX &&\n            !validationResult && {\n              display: 'none'\n            })\n        }}\n      >\n        <ReviewCorrectionPopin {..._correctionPopinProps} />\n      </div>\n    </div>\n  );\n};\n\nSlide.propTypes = SlidePropTypes;\n\nconst StackedSlides = ({\n  slides,\n  primarySkinColor,\n  validate,\n  validateSlide,\n  finishedSlides,\n  updateSlidesOnValidation,\n  updateSlidesOnNext,\n  updateReviewStatus,\n  updateStepItemsOnValidation,\n  updateStepItemsOnNext,\n  updateFinishedSlides,\n  slideValidationResult,\n  correctionPopinProps\n}) => {\n  const stackedSlides = [];\n  // eslint-disable-next-line fp/no-loops\n  for (let slideNumber = 0; slideNumber < TOTAL_SLIDES_STACK; slideNumber++) {\n    const slide = (\n      <Slide\n        {...{\n          slideNumber,\n          slides,\n          primarySkinColor,\n          validate,\n          validateSlide,\n          finishedSlides,\n          updateSlidesOnValidation,\n          updateSlidesOnNext,\n          updateReviewStatus,\n          updateStepItemsOnValidation,\n          updateStepItemsOnNext,\n          updateFinishedSlides,\n          slideValidationResult,\n          correctionPopinProps\n        }}\n        key={slideNumber}\n      />\n    );\n    stackedSlides.push(slide);\n  }\n\n  return stackedSlides;\n};\n\nStackedSlides.propTypes = StackedSlidesPropTypes;\n\nconst SlidesReview = (\n  {\n    headerProps,\n    reviewBackgroundAriaLabel,\n    validate,\n    correctionPopinProps,\n    slides,\n    finishedSlides,\n    stepItems,\n    reviewStatus,\n    congratsProps,\n    validateSlide,\n    updateSlidesOnValidation,\n    updateSlidesOnNext,\n    updateReviewStatus,\n    updateStepItemsOnValidation,\n    updateStepItemsOnNext,\n    updateFinishedSlides,\n    slideValidationResult = {}\n  },\n  context\n) => {\n  const {skin} = context;\n  const primarySkinColor = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n\n  /*\n    ||-------> the slides have an slightly longer lifespan than the \"ongoing\" review State,\n    after reviewState changes to \"finished\" the slides don't have to unmount until the last\n    slide-out animation is finished, the slides have to be unmounted to be RGAA complaint\n    (if they are only invisible but still mounted, then they will be found the assisting tools & clutter it)\n  */\n  const [shouldMountSlides, updateShouldMountSlides] = useState(true);\n\n  useEffect(() => {\n    if (reviewStatus === 'finished' || finishedSlides.size === TOTAL_SLIDES_STACK) {\n      setTimeout(() => updateShouldMountSlides(false), 2000);\n    }\n  }, [finishedSlides.size, reviewStatus, updateReviewStatus]);\n\n  // ||-------> transform the step items state (Map structure) to an Array\n  const stepItemsArray = useMemo(() => {\n    // eslint-disable-next-line unicorn/prefer-spread\n    return Array.from(stepItems.values());\n  }, [stepItems]);\n\n  const _headerProps = {\n    ...headerProps,\n    steps: stepItemsArray,\n    key: 'review-header',\n    hiddenSteps: reviewStatus !== 'ongoing'\n  };\n\n  return (\n    <div\n      key=\"slides-revision-container\"\n      data-name=\"slides-revision-container\"\n      className={style.slidesRevisionContainer}\n    >\n      <div key=\"player-background-container\" className={style.playerBackground}>\n        <ReviewBackground aria-label={reviewBackgroundAriaLabel} />\n      </div>\n\n      <div key=\"review-header-wrapper\" className={style.reviewHeaderContainer}>\n        <ReviewHeader {..._headerProps} />\n      </div>\n\n      {shouldMountSlides ? (\n        <div\n          key=\"stacked-slides-container-y-overflow\"\n          className={style.stackedSlidesYAxisOverflowContainer}\n        >\n          <div\n            key=\"stacked-slides-container\"\n            data-name=\"stacked-slides-container\"\n            className={style.stackedSlidesContainer}\n          >\n            <StackedSlides\n              {...{\n                slides,\n                primarySkinColor,\n                validate,\n                validateSlide,\n                finishedSlides,\n                updateSlidesOnValidation,\n                updateSlidesOnNext,\n                updateReviewStatus,\n                updateStepItemsOnValidation,\n                updateStepItemsOnNext,\n                updateFinishedSlides,\n                slideValidationResult,\n                correctionPopinProps\n              }}\n            />\n          </div>\n        </div>\n      ) : null}\n\n      {reviewStatus === 'finished' ? (\n        <div className={style.congrats}>\n          <ReviewCongrats {...congratsProps} />\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nSlidesReview.propTypes = SlidesReviewPropTypes;\n\nexport default SlidesReview;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/template/app-review/slides/index.js"],"names":["React","useState","useMemo","useEffect","classnames","get","getOr","isNil","map","omit","pipe","size","ICON_VALUES","ReviewBackground","ReviewCongrats","ReviewHeader","ReviewCorrectionPopin","Answer","ButtonLink","style","SlidesReviewPropTypes","SlidePropTypes","StackedSlidesPropTypes","stylesByPosition","position0","position1","position2","position3","position4","TOTAL_SLIDES_STACK","HIGHEST_INDEX","getSlideAnimation","action","position","hidden","slideOutHideAndIn","slideOutAndIn","hiddenSlide","Slide","slideNumber","slides","primarySkinColor","validate","validateSlide","finishedSlides","finishedSlidesSize","updateSlidesOnNext","updateReviewStatus","updateStepItemsOnNext","slideValidationResult","correctionPopinProps","endReview","animationType","validationResult","questionText","answerUI","validateLabel","validateButtonProps","customStyle","backgroundColor","onClick","label","className","validateButton","disabled","klf","information","message","next","successLabel","failureLabel","_correctionPopinProps","exitNode","newSlideContent","numberOfFinishedSlides","stepNumber","current","type","resultLabel","questionOrigin","answerProps","model","answers","choices","slideBase","slideContentContainer","question","help","answerContainer","validateButtonWrapper","correctionPopinWrapper","hiddenCorrectionPopinWrapper","display","propTypes","StackedSlides","stackedSlides","slide","push","SlidesReview","headerProps","reviewBackgroundAriaLabel","stepItems","reviewStatus","congratsProps","updateSlidesOnValidation","updateStepItemsOnValidation","updateFinishedSlides","context","skin","shouldMountSlides","updateShouldMountSlides","result","nextSlide","icon","right","wrong","value","setTimeout","stepItemsArray","stepItem","_headerProps","steps","key","hiddenSteps","slidesRevisionContainer","playerBackground","reviewHeaderContainer","stackedSlidesYAxisOverflowContainer","stackedSlidesContainer","congrats"],"mappings":"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","sourcesContent":["import React, {useState, useMemo, useEffect} from 'react';\nimport classnames from 'classnames';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport isNil from 'lodash/fp/isNil';\nimport map from 'lodash/fp/map';\nimport omit from 'lodash/fp/omit';\nimport pipe from 'lodash/fp/pipe';\nimport size from 'lodash/fp/size';\nimport {ICON_VALUES} from '../../../atom/review-header-step-item';\nimport ReviewBackground from '../../../atom/review-background';\nimport ReviewCongrats from '../../../organism/review-congrats';\nimport ReviewHeader from '../../../organism/review-header';\nimport ReviewCorrectionPopin from '../../../molecule/review-correction-popin';\nimport Answer from '../../../molecule/answer';\nimport ButtonLink from '../../../atom/button-link';\nimport style from './style.css';\nimport {SlidesReviewPropTypes, SlidePropTypes, StackedSlidesPropTypes} from './prop-types';\n\nconst stylesByPosition = {\n  0: style.position0,\n  1: style.position1,\n  2: style.position2,\n  3: style.position3,\n  4: style.position4\n};\n\nexport const TOTAL_SLIDES_STACK = 5;\nexport const HIGHEST_INDEX = TOTAL_SLIDES_STACK - 1;\n\nconst getSlideAnimation = (action, position, hidden) => {\n  switch (action) {\n    /* istanbul ignore next */\n    case 'unstack':\n      return style.slideOutHideAndIn;\n    /* istanbul ignore next */\n    case 'restack':\n      return style.slideOutAndIn;\n    default:\n      return hidden ? style.hiddenSlide : stylesByPosition[position];\n  }\n};\n\nconst Slide = ({\n  slideNumber,\n  slides,\n  primarySkinColor,\n  validate,\n  validateSlide,\n  finishedSlides,\n  finishedSlidesSize,\n  updateSlidesOnNext,\n  updateReviewStatus,\n  updateStepItemsOnNext,\n  slideValidationResult,\n  correctionPopinProps\n}) => {\n  const hidden = getOr(false, `${slideNumber}.hidden`, slides);\n  const endReview = getOr(false, `${slideNumber}.endReview`, slides);\n  const position = get(`${slideNumber}.position`, slides);\n  const animationType = getOr(false, `${slideNumber}.animationType`, slides);\n  const validationResult = getOr(null, `${slideNumber}.validationResult`, slides);\n  const questionText = get(`${slideNumber}.questionText`, slides);\n  const answerUI = get(`${slideNumber}.answerUI`, slides);\n\n  const validateLabel = getOr('', 'label', validate);\n\n  const validateButtonProps = {\n    customStyle: {\n      backgroundColor: primarySkinColor\n    },\n    /*\n      slide validation action, this will trigger the correction popin\n      (with the useEffect that fires the dispatchers, if there is a nextSlide content,\n      it will be loaded here) but will not trigger any animations unless the endReview\n      signal is received (all slides will disappear, also fired in a useEffect),\n      \n      if it is the last slide and the content needs to be different, then that update will\n      be handled on the next slide logic but the content will be carried from here.\n    */\n    onClick: async () => {\n      // result: 'success' | 'failure'\n      // endReview based on nextContent ref exit node values: 'successExitNode' : 'failExitNode'\n      await validateSlide();\n    },\n    'aria-label': validateLabel,\n    label: validateLabel,\n    'data-name': `slide-validate-button-${slideNumber}`,\n    className: style.validateButton,\n    disabled: !isNil(validationResult)\n  };\n\n  const klf = getOr({}, 'klf', correctionPopinProps);\n  const information = getOr({label: '', message: ''}, 'information', correctionPopinProps);\n  const next = get('next', correctionPopinProps);\n  const successLabel = getOr('', 'successLabel', correctionPopinProps);\n  const failureLabel = getOr('', 'failureLabel', correctionPopinProps);\n\n  const _correctionPopinProps = {\n    next: {\n      /*\n        next slide action, this will trigger the slides animations\n        if it is the last slide AND the content needs to be different, then that update\n        of the content will be handled here (and in the validate as it happens normally )\n        from the content carried from the validate action.\n      */\n      onClick: () => {\n        const exitNode = get('exitNode', slideValidationResult);\n\n        updateSlidesOnNext({\n          slideNumber,\n          newSlideContent: {\n            hidden: validationResult === 'success',\n            position: HIGHEST_INDEX - finishedSlidesSize, // to restack the slide\n            animationType: validationResult === 'success' ? 'unstack' : 'restack',\n            validationResult,\n            endReview: !!exitNode,\n            answerUI,\n            questionText\n          },\n          numberOfFinishedSlides: finishedSlidesSize\n        });\n        updateStepItemsOnNext({\n          stepNumber: slideNumber,\n          finishedSlides,\n          current:\n            finishedSlidesSize === HIGHEST_INDEX &&\n            /* istanbul ignore next */ validationResult !== 'success'\n        });\n\n        if (finishedSlidesSize === TOTAL_SLIDES_STACK) updateReviewStatus('finished');\n      },\n      label: next && next.label,\n      'data-name': `next-question-button-${slideNumber}`,\n      'aria-label': next && next['aria-label']\n    },\n    klf,\n    information,\n    type: validationResult === 'success' ? 'right' : 'wrong',\n    resultLabel: validationResult === 'success' ? successLabel : failureLabel\n  };\n\n  const questionOrigin = 'From \"Master Design Thinking to become more agile\" course';\n  const answerProps = get(['model', 'choices'], answerUI)\n    ? /* istanbul ignore next */ {\n        ...answerUI,\n        model: {\n          ...answerUI.model,\n          answers: answerUI.model.choices\n        }\n      }\n    : answerUI;\n\n  return (\n    <div\n      key={`slide-${slideNumber}`}\n      data-name={`slide-${slideNumber}`}\n      className={classnames(\n        style.slideBase,\n        getSlideAnimation(animationType, position, hidden),\n        endReview ? style.endReview : null\n      )}\n    >\n      {answerUI && questionText ? (\n        <div key=\"content-container\" className={style.slideContentContainer}>\n          <div key=\"from-course\" className={style.questionOrigin}>\n            {questionOrigin}\n          </div>\n          <div key=\"title\" className={style.question}>\n            {questionText}\n          </div>\n          <div key=\"help\" className={style.help}>\n            {answerUI.help}\n          </div>\n          <div key=\"answer-container\" className={style.answerContainer}>\n            <Answer {...answerProps} key=\"answer\" />\n          </div>\n        </div>\n      ) : null}\n\n      <div key=\"button-wrapper\" className={style.validateButtonWrapper}>\n        <ButtonLink {...validateButtonProps} />\n      </div>\n      <div\n        className={\n          validationResult ? style.correctionPopinWrapper : style.hiddenCorrectionPopinWrapper\n        }\n        style={{\n          ...(finishedSlidesSize !== HIGHEST_INDEX &&\n            !validationResult && {\n              display: 'none'\n            })\n        }}\n      >\n        <ReviewCorrectionPopin {..._correctionPopinProps} />\n      </div>\n    </div>\n  );\n};\n\nSlide.propTypes = SlidePropTypes;\n\nconst StackedSlides = ({\n  slides,\n  primarySkinColor,\n  validate,\n  validateSlide,\n  finishedSlides,\n  finishedSlidesSize,\n  updateSlidesOnNext,\n  updateReviewStatus,\n  updateStepItemsOnNext,\n  slideValidationResult,\n  correctionPopinProps\n}) => {\n  const stackedSlides = [];\n  // eslint-disable-next-line fp/no-loops\n  for (let slideNumber = 0; slideNumber < TOTAL_SLIDES_STACK; slideNumber++) {\n    const slide = (\n      <Slide\n        {...{\n          slideNumber,\n          slides,\n          primarySkinColor,\n          validate,\n          validateSlide,\n          finishedSlides,\n          finishedSlidesSize,\n          updateSlidesOnNext,\n          updateReviewStatus,\n          updateStepItemsOnNext,\n          slideValidationResult,\n          correctionPopinProps\n        }}\n        key={slideNumber}\n      />\n    );\n    stackedSlides.push(slide);\n  }\n\n  return stackedSlides;\n};\n\nStackedSlides.propTypes = StackedSlidesPropTypes;\n\nconst SlidesReview = (\n  {\n    headerProps,\n    reviewBackgroundAriaLabel,\n    validate,\n    correctionPopinProps,\n    slides,\n    finishedSlides,\n    stepItems,\n    reviewStatus,\n    congratsProps,\n    validateSlide,\n    updateSlidesOnValidation,\n    updateSlidesOnNext,\n    updateReviewStatus,\n    updateStepItemsOnValidation,\n    updateStepItemsOnNext,\n    updateFinishedSlides,\n    slideValidationResult\n  },\n  context\n) => {\n  const {skin} = context;\n  const primarySkinColor = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n\n  const finishedSlidesSize = useMemo(() => pipe(omit('slideNumbers'), size)(finishedSlides), [\n    finishedSlides\n  ]);\n\n  /*\n    ||-------> the slides have an slightly longer lifespan than the \"ongoing\" review State,\n    after reviewState changes to \"finished\" the slides don't have to unmount until the last\n    slide-out animation is finished, the slides have to be unmounted to be RGAA complaint.\n    (if they are only invisible -but- still mounted, then they will be found by the assisting\n    tools & clutter them)\n  */\n  const [shouldMountSlides, updateShouldMountSlides] = useState(true);\n\n  useEffect(\n    /* istanbul ignore next */ () => {\n      const slideNumber = get('slideNumber', slideValidationResult);\n      if (slideValidationResult) {\n        const hidden = getOr(false, `${slideNumber}.hidden`, slides);\n        const endReview = getOr(false, `${slideNumber}.endReview`, slides);\n        const position = get(`${slideNumber}.position`, slides);\n        const result = get('result', slideValidationResult);\n        const exitNode = get('exitNode', slideValidationResult);\n        const nextSlide = get('nextSlide', slideValidationResult);\n        updateSlidesOnValidation({\n          slideNumber,\n          newSlideContent: {\n            hidden,\n            position,\n            validationResult: result,\n            endReview: !!exitNode\n          },\n          numberOfFinishedSlides: finishedSlidesSize,\n          nextSlide\n        });\n        updateStepItemsOnValidation({\n          stepNumber: slideNumber,\n          icon: result === 'success' ? ICON_VALUES.right : ICON_VALUES.wrong\n        });\n        if (result === 'success') updateFinishedSlides({slideNumber, value: true});\n        if (endReview) {\n          updateReviewStatus('finished');\n        }\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [slideValidationResult]\n  );\n\n  useEffect(\n    /* istanbul ignore next */ () => {\n      if (reviewStatus === 'finished') {\n        setTimeout(() => updateShouldMountSlides(false), 2000);\n      }\n    },\n    [finishedSlidesSize, reviewStatus, updateReviewStatus]\n  );\n\n  // ||-------> transform the step items state to Array\n  const stepItemsArray = useMemo(\n    () =>\n      pipe(\n        omit('slideNumbers'),\n        map(stepItem => stepItem)\n      )(stepItems),\n    [stepItems]\n  );\n\n  const _headerProps = {\n    ...headerProps,\n    steps: stepItemsArray,\n    key: 'review-header',\n    hiddenSteps: reviewStatus !== 'ongoing'\n  };\n\n  return (\n    <div\n      key=\"slides-revision-container\"\n      data-name=\"slides-revision-container\"\n      className={style.slidesRevisionContainer}\n    >\n      <div key=\"player-background-container\" className={style.playerBackground}>\n        <ReviewBackground aria-label={reviewBackgroundAriaLabel} />\n      </div>\n\n      <div key=\"review-header-wrapper\" className={style.reviewHeaderContainer}>\n        <ReviewHeader {..._headerProps} />\n      </div>\n\n      {shouldMountSlides ? (\n        <div\n          key=\"stacked-slides-container-y-overflow\"\n          className={style.stackedSlidesYAxisOverflowContainer}\n        >\n          <div\n            key=\"stacked-slides-container\"\n            data-name=\"stacked-slides-container\"\n            className={style.stackedSlidesContainer}\n          >\n            <StackedSlides\n              {...{\n                slides,\n                primarySkinColor,\n                validate,\n                validateSlide,\n                finishedSlides,\n                finishedSlidesSize,\n                updateSlidesOnNext,\n                updateReviewStatus,\n                updateStepItemsOnNext,\n                slideValidationResult,\n                correctionPopinProps\n              }}\n            />\n          </div>\n        </div>\n      ) : /* istanbul ignore next */ null}\n\n      {reviewStatus === 'finished' ? (\n        <div className={style.congrats} data-name=\"congrats-container\">\n          <ReviewCongrats {...congratsProps} />\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nSlidesReview.propTypes = SlidesReviewPropTypes;\n\nexport default SlidesReview;\n"],"file":"index.js"}

package/es/template/app-review/slides/index.native.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { View, StyleSheet, Text, useWindowDimensions, Button } from 'react-native';
-import propTypes from './prop-types'; // import theme from '../../../modules/theme';
+import { SlidesReviewPropTypes } from './prop-types'; // import theme from '../../../modules/theme';
 // import translations from '../../../translations';
 // import {BrandThemeContext} from '../../../app-shared/components/brand-theme-provider';
 // import Button from '../../../app-shared/components/button';
@@ -185,8 +185,8 @@ const Slide = ({
 };
 
 Slide.propTypes = process.env.NODE_ENV !== "production" ? {
-  slide: propTypes.slide,
-  validateSlide: propTypes.validateSlide,
+  slide: SlidesReviewPropTypes.slide,
+  validateSlide: SlidesReviewPropTypes.validateSlide,
   num: PropTypes.number
 } : {}; // -----------------------------------------------------------------------------
 // const Slides = ({slide}: Props) => {
@@ -206,7 +206,7 @@ const Slides = ({
   })));
 };
 
-Slides.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {}; // -----------------------------------------------------------------------------
+Slides.propTypes = process.env.NODE_ENV !== "production" ? SlidesReviewPropTypes : {}; // -----------------------------------------------------------------------------
 
 export default Slides;
 //# sourceMappingURL=index.native.js.map

package/es/template/app-review/slides/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/template/app-review/slides/index.native.js"],"names":["React","PropTypes","View","StyleSheet","Text","useWindowDimensions","Button","propTypes","quizzerStyle","create","container","flex","padding","justifyContent","alignItems","SLIDE_HEIGHT","height","creatSlideStyle","num","width","slide","position","top","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","borderRadius","category","fontSize","lineHeight","textAlign","question","fontWeight","instruction","button","createOptionStyle","selected","box","marginTop","marginBottom","text","choicesStyle","Choices","choices","map","index","optionStyle","arrayOf","bool","Slide","validateSlide","slideStyle","validateLabel","number","Slides","slides","reverse","_slide","length"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport {View, StyleSheet, Text, useWindowDimensions, Button} from 'react-native';\n\nimport propTypes from './prop-types';\n\n// import theme from '../../../modules/theme';\n// import translations from '../../../translations';\n// import {BrandThemeContext} from '../../../app-shared/components/brand-theme-provider';\n// import Button from '../../../app-shared/components/button';\n// import {HEADER_HEIGHT} from '../../../app-shared/components/header-v2';\n\n// export type _Choice_ = {\n//   text?: string,\n//   selected: boolean\n// };\n\n// export type _Slide_ = {\n//   category: string,\n//   question: string,\n//   instruction: string,\n//   type: 'multiSelection' | 'singleSelection' | 'trueOrFalse',\n//   choices?: _Choice_[]\n// };\n\n// interface Props {\n//   slide: _Slide_;\n//   num: number;\n// }\n\nconst quizzerStyle = StyleSheet.create({\n  container: {\n    flex: 1,\n    padding: 20,\n    // paddingTop: HEADER_HEIGHT + 20,      @todo with props\n    // backgroundColor: theme.colors.white, @todo with props\n    justifyContent: 'space-between',\n    alignItems: 'center'\n  }\n});\n\nconst SLIDE_HEIGHT = () => useWindowDimensions().height * 0.75;\n\n// const creatSlideStyle = (num: number) =>\nconst creatSlideStyle = (num, width, height) =>\n  StyleSheet.create({\n    slide: {\n      position: 'absolute',\n      // backgroundColor: theme.colors.white, @todo with props\n      top: height / 2 - SLIDE_HEIGHT() / 2 - num * 4,\n      flex: 1,\n      height: SLIDE_HEIGHT(),\n      width: width - 40 - num * 8,\n      justifyContent: 'space-between',\n      alignItems: 'center',\n      padding: 25,\n      shadowColor: '#000',\n      shadowOffset: {width: 0, height: -1},\n      shadowOpacity: 0.05,\n      shadowRadius: 16,\n      elevation: 10 - num * 1,\n      borderRadius: 16\n    },\n    category: {\n      fontSize: 12,\n      lineHeight: 16,\n      // color: theme.colors.text.primary, @todo with props\n      // marginBottom: theme.spacing.tiny, @todo with props\n      // marginTop: theme.spacing.small,   @todo with props\n      textAlign: 'center'\n    },\n    question: {\n      fontSize: 16,\n      lineHeight: 22,\n      fontWeight: '700',\n      // color: theme.colors.text.primary, @todo with props\n      textAlign: 'center'\n    },\n    instruction: {\n      fontSize: 12,\n      lineHeight: 16,\n      // color: theme.colors.gray.medium,  @todo with props\n      // marginBottom: theme.spacing.base, @todo with props\n      // marginTop: theme.spacing.small,   @todo with props\n      textAlign: 'center'\n    },\n    button: {\n      width: 287,\n      height: 52,\n      borderRadius: 7\n      // marginTop: theme.spacing.base  @todo with props\n    }\n  });\n\nconst createOptionStyle = selected => {\n  // const brandTheme = React.useContext(BrandThemeContext); @todo with props\n\n  return StyleSheet.create({\n    box: {\n      width: '100%',\n      // https://stackoverflow.com/a/66561995/959219\n      shadowColor: '#000',\n      shadowOffset: {width: 0, height: -1},\n      shadowOpacity: 0.2,\n      shadowRadius: 16,\n      elevation: 8,\n      // backgroundColor: selected ? brandTheme.colors.primary : theme.colors.white, @todo with props\n      padding: 12,\n      marginTop: 4,\n      marginBottom: 4,\n      borderRadius: 8\n    },\n    text: {\n      fontSize: 15,\n      fontWeight: 'bold',\n      lineHeight: 24,\n      // color: selected ? theme.colors.white : theme.colors.text.primary, @todo with props\n      textAlign: 'center'\n    }\n  });\n};\n\nconst choicesStyle = StyleSheet.create({\n  container: {\n    flex: 1,\n    width: '100%',\n    justifyContent: 'center',\n    alignItems: 'center'\n  }\n});\n\n// -----------------------------------------------------------------------------\n\n/* {choices.map(({text, selected = false}: _Choice_) => { */\nconst Choices = ({choices}) => (\n  <View style={choicesStyle.container}>\n    {choices.map(({text, selected = false}, index) => {\n      const optionStyle = createOptionStyle(selected);\n      return (\n        <View style={optionStyle.box} key={`choice-${index}`}>\n          <Text style={optionStyle.text}>\n            {text} {selected}\n          </Text>\n        </View>\n      );\n    })}\n  </View>\n);\n\nChoices.propTypes = {\n  choices: PropTypes.arrayOf({\n    text: PropTypes.text,\n    selected: PropTypes.bool\n  })\n};\n\n// -----------------------------------------------------------------------------\n\n// const Slide = ({slide, num}: Props) => {\nconst Slide = ({validateSlide, slide, num}) => {\n  const {width, height} = useWindowDimensions();\n  const slideStyle = creatSlideStyle(num, width, height);\n  const validateLabel = '__validate'; // translations.validate\n\n  // TODO replace choices with <Answer>; move mobile answers in the package..\n  return (\n    <View style={slideStyle.slide}>\n      <Text style={slideStyle.category}>\n        {slide.category} {num}\n      </Text>\n      <Text style={slideStyle.question}>{slide.question}</Text>\n      <Text style={slideStyle.instruction}>{slide.instruction}</Text>\n\n      <Choices choices={slide.choices} />\n\n      <Button style={slideStyle.button} onPress={validateSlide} testID={`button-quizzer-validate`}>\n        {validateLabel}\n      </Button>\n    </View>\n  );\n};\n\nSlide.propTypes = {\n  slide: propTypes.slide,\n  validateSlide: propTypes.validateSlide,\n  num: PropTypes.number\n};\n\n// -----------------------------------------------------------------------------\n\n// const Slides = ({slide}: Props) => {\nconst Slides = ({slide, validateSlide}) => {\n  const slides = [slide, slide, slide, slide, slide];\n  return (\n    <View style={quizzerStyle.container}>\n      {slides.reverse().map((_slide, index) => (\n        <Slide\n          validateSlide={validateSlide}\n          slide={_slide}\n          num={slides.length - index}\n          key={`slide-${index}`}\n        />\n      ))}\n    </View>\n  );\n};\n\nSlides.propTypes = propTypes;\n\n// -----------------------------------------------------------------------------\n\nexport default Slides;\n"],"file":"index.native.js"}
+{"version":3,"sources":["../../../../src/template/app-review/slides/index.native.js"],"names":["React","PropTypes","View","StyleSheet","Text","useWindowDimensions","Button","SlidesReviewPropTypes","quizzerStyle","create","container","flex","padding","justifyContent","alignItems","SLIDE_HEIGHT","height","creatSlideStyle","num","width","slide","position","top","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","borderRadius","category","fontSize","lineHeight","textAlign","question","fontWeight","instruction","button","createOptionStyle","selected","box","marginTop","marginBottom","text","choicesStyle","Choices","choices","map","index","optionStyle","propTypes","arrayOf","bool","Slide","validateSlide","slideStyle","validateLabel","number","Slides","slides","reverse","_slide","length"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport {View, StyleSheet, Text, useWindowDimensions, Button} from 'react-native';\n\nimport {SlidesReviewPropTypes} from './prop-types';\n\n// import theme from '../../../modules/theme';\n// import translations from '../../../translations';\n// import {BrandThemeContext} from '../../../app-shared/components/brand-theme-provider';\n// import Button from '../../../app-shared/components/button';\n// import {HEADER_HEIGHT} from '../../../app-shared/components/header-v2';\n\n// export type _Choice_ = {\n//   text?: string,\n//   selected: boolean\n// };\n\n// export type _Slide_ = {\n//   category: string,\n//   question: string,\n//   instruction: string,\n//   type: 'multiSelection' | 'singleSelection' | 'trueOrFalse',\n//   choices?: _Choice_[]\n// };\n\n// interface Props {\n//   slide: _Slide_;\n//   num: number;\n// }\n\nconst quizzerStyle = StyleSheet.create({\n  container: {\n    flex: 1,\n    padding: 20,\n    // paddingTop: HEADER_HEIGHT + 20,      @todo with props\n    // backgroundColor: theme.colors.white, @todo with props\n    justifyContent: 'space-between',\n    alignItems: 'center'\n  }\n});\n\nconst SLIDE_HEIGHT = () => useWindowDimensions().height * 0.75;\n\n// const creatSlideStyle = (num: number) =>\nconst creatSlideStyle = (num, width, height) =>\n  StyleSheet.create({\n    slide: {\n      position: 'absolute',\n      // backgroundColor: theme.colors.white, @todo with props\n      top: height / 2 - SLIDE_HEIGHT() / 2 - num * 4,\n      flex: 1,\n      height: SLIDE_HEIGHT(),\n      width: width - 40 - num * 8,\n      justifyContent: 'space-between',\n      alignItems: 'center',\n      padding: 25,\n      shadowColor: '#000',\n      shadowOffset: {width: 0, height: -1},\n      shadowOpacity: 0.05,\n      shadowRadius: 16,\n      elevation: 10 - num * 1,\n      borderRadius: 16\n    },\n    category: {\n      fontSize: 12,\n      lineHeight: 16,\n      // color: theme.colors.text.primary, @todo with props\n      // marginBottom: theme.spacing.tiny, @todo with props\n      // marginTop: theme.spacing.small,   @todo with props\n      textAlign: 'center'\n    },\n    question: {\n      fontSize: 16,\n      lineHeight: 22,\n      fontWeight: '700',\n      // color: theme.colors.text.primary, @todo with props\n      textAlign: 'center'\n    },\n    instruction: {\n      fontSize: 12,\n      lineHeight: 16,\n      // color: theme.colors.gray.medium,  @todo with props\n      // marginBottom: theme.spacing.base, @todo with props\n      // marginTop: theme.spacing.small,   @todo with props\n      textAlign: 'center'\n    },\n    button: {\n      width: 287,\n      height: 52,\n      borderRadius: 7\n      // marginTop: theme.spacing.base  @todo with props\n    }\n  });\n\nconst createOptionStyle = selected => {\n  // const brandTheme = React.useContext(BrandThemeContext); @todo with props\n\n  return StyleSheet.create({\n    box: {\n      width: '100%',\n      // https://stackoverflow.com/a/66561995/959219\n      shadowColor: '#000',\n      shadowOffset: {width: 0, height: -1},\n      shadowOpacity: 0.2,\n      shadowRadius: 16,\n      elevation: 8,\n      // backgroundColor: selected ? brandTheme.colors.primary : theme.colors.white, @todo with props\n      padding: 12,\n      marginTop: 4,\n      marginBottom: 4,\n      borderRadius: 8\n    },\n    text: {\n      fontSize: 15,\n      fontWeight: 'bold',\n      lineHeight: 24,\n      // color: selected ? theme.colors.white : theme.colors.text.primary, @todo with props\n      textAlign: 'center'\n    }\n  });\n};\n\nconst choicesStyle = StyleSheet.create({\n  container: {\n    flex: 1,\n    width: '100%',\n    justifyContent: 'center',\n    alignItems: 'center'\n  }\n});\n\n// -----------------------------------------------------------------------------\n\n/* {choices.map(({text, selected = false}: _Choice_) => { */\nconst Choices = ({choices}) => (\n  <View style={choicesStyle.container}>\n    {choices.map(({text, selected = false}, index) => {\n      const optionStyle = createOptionStyle(selected);\n      return (\n        <View style={optionStyle.box} key={`choice-${index}`}>\n          <Text style={optionStyle.text}>\n            {text} {selected}\n          </Text>\n        </View>\n      );\n    })}\n  </View>\n);\n\nChoices.propTypes = {\n  choices: PropTypes.arrayOf({\n    text: PropTypes.text,\n    selected: PropTypes.bool\n  })\n};\n\n// -----------------------------------------------------------------------------\n\n// const Slide = ({slide, num}: Props) => {\nconst Slide = ({validateSlide, slide, num}) => {\n  const {width, height} = useWindowDimensions();\n  const slideStyle = creatSlideStyle(num, width, height);\n  const validateLabel = '__validate'; // translations.validate\n\n  // TODO replace choices with <Answer>; move mobile answers in the package..\n  return (\n    <View style={slideStyle.slide}>\n      <Text style={slideStyle.category}>\n        {slide.category} {num}\n      </Text>\n      <Text style={slideStyle.question}>{slide.question}</Text>\n      <Text style={slideStyle.instruction}>{slide.instruction}</Text>\n\n      <Choices choices={slide.choices} />\n\n      <Button style={slideStyle.button} onPress={validateSlide} testID={`button-quizzer-validate`}>\n        {validateLabel}\n      </Button>\n    </View>\n  );\n};\n\nSlide.propTypes = {\n  slide: SlidesReviewPropTypes.slide,\n  validateSlide: SlidesReviewPropTypes.validateSlide,\n  num: PropTypes.number\n};\n\n// -----------------------------------------------------------------------------\n\n// const Slides = ({slide}: Props) => {\nconst Slides = ({slide, validateSlide}) => {\n  const slides = [slide, slide, slide, slide, slide];\n  return (\n    <View style={quizzerStyle.container}>\n      {slides.reverse().map((_slide, index) => (\n        <Slide\n          validateSlide={validateSlide}\n          slide={_slide}\n          num={slides.length - index}\n          key={`slide-${index}`}\n        />\n      ))}\n    </View>\n  );\n};\n\nSlides.propTypes = SlidesReviewPropTypes;\n\n// -----------------------------------------------------------------------------\n\nexport default Slides;\n"],"file":"index.native.js"}