@coorpacademy/components 10.22.24 → 10.22.25-alpha.16

package/lib/molecule/answer/prop-types.js

@@ -38,12 +38,34 @@ const MediaViewPropTypes = {
   media: _propTypes.default.oneOfType([videoPropType, imgPropType, audioPropType])
 };
 exports.MediaViewPropTypes = MediaViewPropTypes;
-var _default = {
+
+const SelectOptionsPropTypes = _propTypes.default.shape({
+  name: _propTypes.default.string,
+  selected: _propTypes.default.bool,
+  validOption: _propTypes.default.bool,
+  value: _propTypes.default.string
+});
+
+const AnswerPropTypes = _propTypes.default.shape({
+  title: _propTypes.default.string.isRequired,
+  'aria-label': _propTypes.default.string,
+  onClick: _propTypes.default.func,
+  onChange: _propTypes.default.func,
+  selected: _propTypes.default.bool,
+  image: _propTypes.default.string,
+  options: _propTypes.default.arrayOf(SelectOptionsPropTypes),
+  type: _propTypes.default.oneOf(['text', 'select']),
+  name: _propTypes.default.string
+});
+
+const propTypes = {
   model: _propTypes.default.shape({
-    type: _propTypes.default.oneOf(['qcmDrag', 'qcm', 'qcmGraphic', 'freeText', 'dropDown', 'slider', 'template']).isRequired
-  }),
+    type: _propTypes.default.oneOf(['qcmDrag', 'qcm', 'qcmGraphic', 'freeText', 'dropDown', 'slider', 'template']).isRequired,
+    answer: _propTypes.default.arrayOf(AnswerPropTypes)
+  }).isRequired,
   help: _propTypes.default.string,
   media: MediaViewPropTypes.media
 };
+var _default = propTypes;
 exports.default = _default;
 //# sourceMappingURL=prop-types.js.map

package/lib/molecule/answer/prop-types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecule/answer/prop-types.js"],"names":["TYPE_IMAGE","TYPE_VIDEO","TYPE_AUDIO","isType","name","PropTypes","oneOf","videoPropType","shape","VideoPlayerPropTypes","type","isRequired","imgPropType","url","string","audioPropType","mediaUrl","MediaViewPropTypes","media","oneOfType","model","help"],"mappings":";;;;;AAAA;;AACA;;;;;;AAEO,MAAMA,UAAU,GAAG,KAAnB;;AACA,MAAMC,UAAU,GAAG,OAAnB;;AACA,MAAMC,UAAU,GAAG,OAAnB;;;AAEP,MAAMC,MAAM,GAAGC,IAAI,IAAIC,mBAAUC,KAAV,CAAgB,CAACF,IAAD,CAAhB,CAAvB;;AAEA,MAAMG,aAAa,GAAGF,mBAAUG,KAAV,uBACjBC,mBADiB;AAEpBC,EAAAA,IAAI,EAAEP,MAAM,CAACF,UAAD,CAAN,CAAmBU;AAFL,GAAtB;;AAKA,MAAMC,WAAW,GAAGP,mBAAUG,KAAV,CAAgB;AAClCE,EAAAA,IAAI,EAAEP,MAAM,CAACH,UAAD,CAAN,CAAmBW,UADS;AAElCE,EAAAA,GAAG,EAAER,mBAAUS,MAAV,CAAiBH;AAFY,CAAhB,CAApB;;AAKA,MAAMI,aAAa,GAAGV,mBAAUG,KAAV,CAAgB;AACpCE,EAAAA,IAAI,EAAEP,MAAM,CAACD,UAAD,CAAN,CAAmBS,UADW;AAEpCK,EAAAA,QAAQ,EAAEX,mBAAUS,MAAV,CAAiBH;AAFS,CAAhB,CAAtB;;AAKO,MAAMM,kBAAkB,GAAG;AAChCC,EAAAA,KAAK,EAAEb,mBAAUc,SAAV,CAAoB,CAACZ,aAAD,EAAgBK,WAAhB,EAA6BG,aAA7B,CAApB;AADyB,CAA3B;;eAIQ;AACbK,EAAAA,KAAK,EAAEf,mBAAUG,KAAV,CAAgB;AACrBE,IAAAA,IAAI,EAAEL,mBAAUC,KAAV,CAAgB,CACpB,SADoB,EAEpB,KAFoB,EAGpB,YAHoB,EAIpB,UAJoB,EAKpB,UALoB,EAMpB,QANoB,EAOpB,UAPoB,CAAhB,EAQHK;AATkB,GAAhB,CADM;AAYbU,EAAAA,IAAI,EAAEhB,mBAAUS,MAZH;AAabI,EAAAA,KAAK,EAAED,kBAAkB,CAACC;AAbb,C","sourcesContent":["import PropTypes from 'prop-types';\nimport VideoPlayerPropTypes from '../video-player/prop-types';\n\nexport const TYPE_IMAGE = 'img';\nexport const TYPE_VIDEO = 'video';\nexport const TYPE_AUDIO = 'audio';\n\nconst isType = name => PropTypes.oneOf([name]);\n\nconst videoPropType = PropTypes.shape({\n  ...VideoPlayerPropTypes,\n  type: isType(TYPE_VIDEO).isRequired\n});\n\nconst imgPropType = PropTypes.shape({\n  type: isType(TYPE_IMAGE).isRequired,\n  url: PropTypes.string.isRequired\n});\n\nconst audioPropType = PropTypes.shape({\n  type: isType(TYPE_AUDIO).isRequired,\n  mediaUrl: PropTypes.string.isRequired\n});\n\nexport const MediaViewPropTypes = {\n  media: PropTypes.oneOfType([videoPropType, imgPropType, audioPropType])\n};\n\nexport default {\n  model: PropTypes.shape({\n    type: PropTypes.oneOf([\n      'qcmDrag',\n      'qcm',\n      'qcmGraphic',\n      'freeText',\n      'dropDown',\n      'slider',\n      'template'\n    ]).isRequired\n  }),\n  help: PropTypes.string,\n  media: MediaViewPropTypes.media\n};\n"],"file":"prop-types.js"}
+{"version":3,"sources":["../../../src/molecule/answer/prop-types.ts"],"names":["TYPE_IMAGE","TYPE_VIDEO","TYPE_AUDIO","isType","name","PropTypes","oneOf","videoPropType","shape","VideoPlayerPropTypes","type","isRequired","imgPropType","url","string","audioPropType","mediaUrl","MediaViewPropTypes","media","oneOfType","SelectOptionsPropTypes","selected","bool","validOption","value","AnswerPropTypes","title","onClick","func","onChange","image","options","arrayOf","propTypes","model","answer","help"],"mappings":";;;;;AAAA;;AACA;;;;;;AAEO,MAAMA,UAAU,GAAG,KAAnB;;AACA,MAAMC,UAAU,GAAG,OAAnB;;AACA,MAAMC,UAAU,GAAG,OAAnB;;;AAEP,MAAMC,MAAM,GAAIC,IAAD,IAAkBC,mBAAUC,KAAV,CAAgB,CAACF,IAAD,CAAhB,CAAjC;;AAEA,MAAMG,aAAa,GAAGF,mBAAUG,KAAV,uBACjBC,mBADiB;AAEpBC,EAAAA,IAAI,EAAEP,MAAM,CAACF,UAAD,CAAN,CAAmBU;AAFL,GAAtB;;AAKA,MAAMC,WAAW,GAAGP,mBAAUG,KAAV,CAAgB;AAClCE,EAAAA,IAAI,EAAEP,MAAM,CAACH,UAAD,CAAN,CAAmBW,UADS;AAElCE,EAAAA,GAAG,EAAER,mBAAUS,MAAV,CAAiBH;AAFY,CAAhB,CAApB;;AAKA,MAAMI,aAAa,GAAGV,mBAAUG,KAAV,CAAgB;AACpCE,EAAAA,IAAI,EAAEP,MAAM,CAACD,UAAD,CAAN,CAAmBS,UADW;AAEpCK,EAAAA,QAAQ,EAAEX,mBAAUS,MAAV,CAAiBH;AAFS,CAAhB,CAAtB;;AAKO,MAAMM,kBAAkB,GAAG;AAChCC,EAAAA,KAAK,EAAEb,mBAAUc,SAAV,CAAoB,CAACZ,aAAD,EAAgBK,WAAhB,EAA6BG,aAA7B,CAApB;AADyB,CAA3B;;;AAIP,MAAMK,sBAAsB,GAAGf,mBAAUG,KAAV,CAAgB;AAC7CJ,EAAAA,IAAI,EAAEC,mBAAUS,MAD6B;AAE7CO,EAAAA,QAAQ,EAAEhB,mBAAUiB,IAFyB;AAG7CC,EAAAA,WAAW,EAAElB,mBAAUiB,IAHsB;AAI7CE,EAAAA,KAAK,EAAEnB,mBAAUS;AAJ4B,CAAhB,CAA/B;;AAOA,MAAMW,eAAe,GAAGpB,mBAAUG,KAAV,CAAgB;AACtCkB,EAAAA,KAAK,EAAErB,mBAAUS,MAAV,CAAiBH,UADc;AAEtC,gBAAcN,mBAAUS,MAFc;AAGtCa,EAAAA,OAAO,EAAEtB,mBAAUuB,IAHmB;AAItCC,EAAAA,QAAQ,EAAExB,mBAAUuB,IAJkB;AAKtCP,EAAAA,QAAQ,EAAEhB,mBAAUiB,IALkB;AAMtCQ,EAAAA,KAAK,EAAEzB,mBAAUS,MANqB;AAOtCiB,EAAAA,OAAO,EAAE1B,mBAAU2B,OAAV,CAAkBZ,sBAAlB,CAP6B;AAQtCV,EAAAA,IAAI,EAAEL,mBAAUC,KAAV,CAAgB,CAAC,MAAD,EAAS,QAAT,CAAhB,CARgC;AAStCF,EAAAA,IAAI,EAAEC,mBAAUS;AATsB,CAAhB,CAAxB;;AAYA,MAAMmB,SAAS,GAAG;AAChBC,EAAAA,KAAK,EAAE7B,mBAAUG,KAAV,CAAgB;AACrBE,IAAAA,IAAI,EAAEL,mBAAUC,KAAV,CAAgB,CACpB,SADoB,EAEpB,KAFoB,EAGpB,YAHoB,EAIpB,UAJoB,EAKpB,UALoB,EAMpB,QANoB,EAOpB,UAPoB,CAAhB,EAQHK,UATkB;AAUrBwB,IAAAA,MAAM,EAAE9B,mBAAU2B,OAAV,CAAkBP,eAAlB;AAVa,GAAhB,EAWJd,UAZa;AAahByB,EAAAA,IAAI,EAAE/B,mBAAUS,MAbA;AAchBI,EAAAA,KAAK,EAAED,kBAAkB,CAACC;AAdV,CAAlB;eAmDee,S","sourcesContent":["import PropTypes from 'prop-types';\nimport VideoPlayerPropTypes from '../video-player/prop-types';\n\nexport const TYPE_IMAGE = 'img';\nexport const TYPE_VIDEO = 'video';\nexport const TYPE_AUDIO = 'audio';\n\nconst isType = (name: string) => PropTypes.oneOf([name]);\n\nconst videoPropType = PropTypes.shape({\n  ...VideoPlayerPropTypes,\n  type: isType(TYPE_VIDEO).isRequired\n});\n\nconst imgPropType = PropTypes.shape({\n  type: isType(TYPE_IMAGE).isRequired,\n  url: PropTypes.string.isRequired\n});\n\nconst audioPropType = PropTypes.shape({\n  type: isType(TYPE_AUDIO).isRequired,\n  mediaUrl: PropTypes.string.isRequired\n});\n\nexport const MediaViewPropTypes = {\n  media: PropTypes.oneOfType([videoPropType, imgPropType, audioPropType])\n};\n\nconst SelectOptionsPropTypes = PropTypes.shape({\n  name: PropTypes.string,\n  selected: PropTypes.bool,\n  validOption: PropTypes.bool,\n  value: PropTypes.string\n});\n\nconst AnswerPropTypes = PropTypes.shape({\n  title: PropTypes.string.isRequired,\n  'aria-label': PropTypes.string,\n  onClick: PropTypes.func,\n  onChange: PropTypes.func,\n  selected: PropTypes.bool,\n  image: PropTypes.string,\n  options: PropTypes.arrayOf(SelectOptionsPropTypes),\n  type: PropTypes.oneOf(['text', 'select']),\n  name: PropTypes.string\n});\n\nconst propTypes = {\n  model: PropTypes.shape({\n    type: PropTypes.oneOf([\n      'qcmDrag',\n      'qcm',\n      'qcmGraphic',\n      'freeText',\n      'dropDown',\n      'slider',\n      'template'\n    ]).isRequired,\n    answer: PropTypes.arrayOf(AnswerPropTypes)\n  }).isRequired,\n  help: PropTypes.string,\n  media: MediaViewPropTypes.media\n};\n\ntype SelectOptions = {\n  name: string;\n  selected: boolean;\n  validOption: boolean;\n  value: string;\n};\n\ntype Answer = {\n  title?: string;\n  'aria-label'?: string;\n  onClick?: () => void;\n  onChange?: (value: string) => void;\n  selected?: boolean;\n  image?: string;\n  options?: SelectOptions[];\n  type?: 'text' | 'select';\n  name?: string;\n};\n\nexport type Props = {\n  model: {\n    type: 'qcmDrag' | 'qcm' | 'qcmGraphic' | 'freeText' | 'dropDown' | 'slider' | 'template';\n    answers?: Answer[];\n    template?: string;\n    onChange?: (value: string | number) => void;\n    onSliderChange?: (value: number) => void;\n    minLabel?: string;\n    maxLabel?: string;\n    title?: string;\n  };\n  help: string;\n  media: any;\n};\n\nexport default propTypes;\n"],"file":"prop-types.js"}

package/lib/molecule/questions/mobile/draggable/index.native.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = exports.extractSelectedChoices = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -52,7 +52,6 @@ const DropZone = props => {
   const {
     onPress
   } = props;
-  const handlePress = (0, _react.useCallback)(item => () => onPress(item), [onPress]);
   const [styleSheet, setStylesheet] = (0, _react.useState)(null);
   (0, _react.useEffect)(() => {
     const _stylesheet = createDropZoneStyle(theme);
@@ -73,7 +72,7 @@ const DropZone = props => {
     squeezed: true,
     isSelected: true,
     testID: `choice-${item._id}`,
-    onPress: handlePress(item),
+    onPress: onPress(item),
     questionType: "qcmDrag"
   }, item.label));
   const hasNoSelectedChoices = mappedSortedChoices.length === 0;
@@ -85,7 +84,6 @@ const DropZone = props => {
 };
 
 const createStyleSheet = theme => _reactNative.StyleSheet.create({
-  container: {},
   pickableChoices: {
     flexDirection: 'row',
     flexWrap: 'wrap'
@@ -93,24 +91,7 @@ const createStyleSheet = theme => _reactNative.StyleSheet.create({
   choice: {
     margin: theme.spacing.micro
   }
-}); // this algo could be improve using a  single reduce fuction
-
-
-const extractSelectedChoices = (availableChoices, userChoices) => {
-  const selectedChoices = userChoices.reduce((accumulator, currentValue) => {
-    const foundItem = availableChoices.find(availableChoice => availableChoice.label === currentValue);
-
-    if (foundItem) {
-      return [...accumulator, foundItem];
-    }
-
-    return accumulator;
-  }, []);
-  const notSelectedChoices = availableChoices.filter(availableChoice => !userChoices.includes(availableChoice.label));
-  return [selectedChoices, notSelectedChoices];
-};
-
-exports.extractSelectedChoices = extractSelectedChoices;
+});
 
 const QuestionDraggable = props => {
   const templateContext = (0, _templateContext.useTemplateContext)();
@@ -128,32 +109,28 @@ const QuestionDraggable = props => {
     return null;
   }
 
-  const handlePress = item => () => props.onPress(item);
-
   const {
     choices,
     onPress,
-    testID,
-    userChoices
+    testID
   } = props;
-  const [selectedChoices, notSelectedChoices] = extractSelectedChoices(choices, userChoices);
-  const mappedunselectedChoices = notSelectedChoices.map((item, index) => /*#__PURE__*/_react.default.createElement(_index.default, {
+  const selectedChoices = choices.filter(item => item.selected);
+  const pickableChoices = choices.filter(item => !item.selected).map((item, index) => /*#__PURE__*/_react.default.createElement(_index.default, {
     style: styleSheet.choice,
     key: item._id,
     squeezed: true,
     testID: `choice-${item._id}-unselected`,
-    onPress: handlePress(item),
+    onPress: onPress(item),
     questionType: "qcmDrag"
   }, item.label));
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styleSheet.container,
     testID: testID
   }, /*#__PURE__*/_react.default.createElement(DropZone, {
     choices: selectedChoices,
     onPress: onPress
   }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styleSheet.pickableChoices
-  }, mappedunselectedChoices));
+  }, pickableChoices));
 };
 
 var _default = QuestionDraggable;

package/lib/molecule/questions/mobile/draggable/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/molecule/questions/mobile/draggable/index.native.tsx"],"names":["createDropZoneStyle","theme","StyleSheet","create","choice","margin","spacing","micro","dropZone","flexWrap","flexDirection","borderStyle","borderWidth","padding","borderColor","colors","gray","light","backgroundColor","extra","borderRadius","radius","common","marginBottom","tiny","emptyContent","justifyContent","alignContent","alignItems","height","text","color","medium","DropZone","props","templateContext","translations","onPress","handlePress","item","styleSheet","setStylesheet","_stylesheet","choices","mappedSortedChoices","map","_id","label","hasNoSelectedChoices","length","selectSomethingBelow","createStyleSheet","container","pickableChoices","extractSelectedChoices","availableChoices","userChoices","selectedChoices","reduce","accumulator","currentValue","foundItem","find","availableChoice","notSelectedChoices","filter","includes","QuestionDraggable","testID","mappedunselectedChoices","index"],"mappings":"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","sourcesContent":["import React, {useCallback, useEffect, useState} from 'react';\nimport {View, StyleSheet, Text} from 'react-native';\nimport QuestionChoice from '../../../../atom/choice/index.native';\nimport {useTemplateContext} from '../../../../template/app-review/template-context';\nimport {Theme} from '../../../../variables/theme.native';\n\nimport type {Choice} from '../../../../types/progression-engine';\n\nexport interface DropZoneProps {\n  choices: Array<Choice>;\n  onPress: (item: Choice) => void;\n}\n\nconst createDropZoneStyle = (theme: Theme) =>\n  StyleSheet.create({\n    choice: {\n      margin: theme.spacing.micro\n    },\n    dropZone: {\n      flexWrap: 'wrap',\n      flexDirection: 'row',\n      borderStyle: 'dashed',\n      borderWidth: 2,\n      padding: theme.spacing.micro,\n      borderColor: theme.colors.gray.light,\n      backgroundColor: theme.colors.gray.extra,\n      borderRadius: theme.radius.common,\n      marginBottom: theme.spacing.tiny\n    },\n    emptyContent: {\n      justifyContent: 'center',\n      alignContent: 'center',\n      alignItems: 'center',\n      height: 60\n    },\n    text: {\n      color: theme.colors.gray.medium\n    }\n  });\n\nconst DropZone = (props: DropZoneProps) => {\n  const templateContext = useTemplateContext();\n  const {theme, translations} = templateContext;\n  const {onPress} = props;\n\n  const handlePress = useCallback((item: Choice) => () => onPress(item), [onPress]);\n  const [styleSheet, setStylesheet] = useState<any | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createDropZoneStyle(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const {choices} = props;\n  const mappedSortedChoices = choices.map(item => (\n    <QuestionChoice\n      style={styleSheet.choice}\n      key={item._id}\n      squeezed\n      isSelected\n      testID={`choice-${item._id}`}\n      onPress={handlePress(item)}\n      questionType=\"qcmDrag\"\n    >\n      {item.label}\n    </QuestionChoice>\n  ));\n\n  const hasNoSelectedChoices = mappedSortedChoices.length === 0;\n\n  return (\n    <View style={[styleSheet.dropZone, hasNoSelectedChoices && styleSheet.emptyContent]}>\n      {hasNoSelectedChoices ? (\n        <Text style={styleSheet.text}>{translations.selectSomethingBelow}</Text>\n      ) : null}\n\n      {!hasNoSelectedChoices && mappedSortedChoices}\n    </View>\n  );\n};\n\nexport interface Props {\n  choices: Array<Choice>;\n  userChoices: Array<string>;\n  testID?: string;\n  onPress: (item: Choice) => void;\n}\n\nconst createStyleSheet = (theme: Theme) =>\n  StyleSheet.create({\n    container: {},\n    pickableChoices: {\n      flexDirection: 'row',\n      flexWrap: 'wrap'\n    },\n    choice: {\n      margin: theme.spacing.micro\n    }\n  });\n\n// this algo could be improve using a  single reduce fuction\nexport const extractSelectedChoices = (\n  availableChoices: Array<Choice>,\n  userChoices: Array<string>\n): Array<Array<Choice>> => {\n  const selectedChoices: Array<Choice> = userChoices.reduce(\n    (accumulator: Array<Choice>, currentValue) => {\n      const foundItem = availableChoices.find(\n        availableChoice => availableChoice.label === currentValue\n      );\n      if (foundItem) {\n        return [...accumulator, foundItem];\n      }\n      return accumulator;\n    },\n    []\n  );\n\n  const notSelectedChoices = availableChoices.filter(\n    availableChoice => !userChoices.includes(availableChoice.label)\n  );\n\n  return [selectedChoices, notSelectedChoices];\n};\n\nconst QuestionDraggable = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const {theme} = templateContext;\n\n  const [styleSheet, setStylesheet] = useState<any | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const handlePress = (item: Choice) => () => props.onPress(item);\n\n  const {choices, onPress, testID, userChoices} = props;\n  const [selectedChoices, notSelectedChoices] = extractSelectedChoices(choices, userChoices);\n\n  const mappedunselectedChoices = notSelectedChoices.map((item, index) => (\n    <QuestionChoice\n      style={styleSheet.choice}\n      key={item._id}\n      squeezed\n      testID={`choice-${item._id}-unselected`}\n      onPress={handlePress(item)}\n      questionType=\"qcmDrag\"\n    >\n      {item.label}\n    </QuestionChoice>\n  ));\n\n  return (\n    <View style={styleSheet.container} testID={testID}>\n      <DropZone choices={selectedChoices} onPress={onPress} />\n      <View style={styleSheet.pickableChoices}>{mappedunselectedChoices}</View>\n    </View>\n  );\n};\n\nexport default QuestionDraggable;\n"],"file":"index.native.js"}
+{"version":3,"sources":["../../../../../src/molecule/questions/mobile/draggable/index.native.tsx"],"names":["createDropZoneStyle","theme","StyleSheet","create","choice","margin","spacing","micro","dropZone","flexWrap","flexDirection","borderStyle","borderWidth","padding","borderColor","colors","gray","light","backgroundColor","extra","borderRadius","radius","common","marginBottom","tiny","emptyContent","justifyContent","alignContent","alignItems","height","text","color","medium","DropZone","props","templateContext","translations","onPress","styleSheet","setStylesheet","_stylesheet","choices","mappedSortedChoices","map","item","_id","label","hasNoSelectedChoices","length","selectSomethingBelow","createStyleSheet","pickableChoices","QuestionDraggable","testID","selectedChoices","filter","selected","index"],"mappings":"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","sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {View, StyleSheet, Text} from 'react-native';\nimport QuestionChoice from '../../../../atom/choice/index.native';\nimport {useTemplateContext} from '../../../../template/app-review/template-context';\nimport {Theme} from '../../../../variables/theme.native';\n\nimport type {Choice} from '../../../../types/progression-engine';\n\nexport interface DropZoneProps {\n  choices: Array<Choice>;\n  onPress: (item: Choice) => () => void;\n}\n\nconst createDropZoneStyle = (theme: Theme) =>\n  StyleSheet.create({\n    choice: {\n      margin: theme.spacing.micro\n    },\n    dropZone: {\n      flexWrap: 'wrap',\n      flexDirection: 'row',\n      borderStyle: 'dashed',\n      borderWidth: 2,\n      padding: theme.spacing.micro,\n      borderColor: theme.colors.gray.light,\n      backgroundColor: theme.colors.gray.extra,\n      borderRadius: theme.radius.common,\n      marginBottom: theme.spacing.tiny\n    },\n    emptyContent: {\n      justifyContent: 'center',\n      alignContent: 'center',\n      alignItems: 'center',\n      height: 60\n    },\n    text: {\n      color: theme.colors.gray.medium\n    }\n  });\n\nconst DropZone = (props: DropZoneProps) => {\n  const templateContext = useTemplateContext();\n  const {theme, translations} = templateContext;\n  const {onPress} = props;\n\n  const [styleSheet, setStylesheet] = useState<any | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createDropZoneStyle(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const {choices} = props;\n  const mappedSortedChoices = choices.map(item => (\n    <QuestionChoice\n      style={styleSheet.choice}\n      key={item._id}\n      squeezed\n      isSelected\n      testID={`choice-${item._id}`}\n      onPress={onPress(item)}\n      questionType=\"qcmDrag\"\n    >\n      {item.label}\n    </QuestionChoice>\n  ));\n\n  const hasNoSelectedChoices = mappedSortedChoices.length === 0;\n\n  return (\n    <View style={[styleSheet.dropZone, hasNoSelectedChoices && styleSheet.emptyContent]}>\n      {hasNoSelectedChoices ? (\n        <Text style={styleSheet.text}>{translations.selectSomethingBelow}</Text>\n      ) : null}\n\n      {!hasNoSelectedChoices && mappedSortedChoices}\n    </View>\n  );\n};\n\nexport interface Props {\n  choices: Array<Choice>;\n  testID?: string;\n  onPress: (item: Choice) => () => void;\n}\n\nconst createStyleSheet = (theme: Theme) =>\n  StyleSheet.create({\n    pickableChoices: {\n      flexDirection: 'row',\n      flexWrap: 'wrap'\n    },\n    choice: {\n      margin: theme.spacing.micro\n    }\n  });\n\nconst QuestionDraggable = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const {theme} = templateContext;\n\n  const [styleSheet, setStylesheet] = useState<any | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const {choices, onPress, testID} = props;\n  const selectedChoices = choices.filter(item => item.selected);\n\n  const pickableChoices = choices\n    .filter(item => !item.selected)\n    .map((item, index) => (\n      <QuestionChoice\n        style={styleSheet.choice}\n        key={item._id}\n        squeezed\n        testID={`choice-${item._id}-unselected`}\n        onPress={onPress(item)}\n        questionType=\"qcmDrag\"\n      >\n        {item.label}\n      </QuestionChoice>\n    ));\n\n  return (\n    <View testID={testID}>\n      <DropZone choices={selectedChoices} onPress={onPress} />\n      <View style={styleSheet.pickableChoices}>{pickableChoices}</View>\n    </View>\n  );\n};\n\nexport default QuestionDraggable;\n"],"file":"index.native.js"}

package/lib/molecule/questions/mobile/switch/index.native.js

@@ -9,15 +9,13 @@ var _reactNative = require("react-native");
 
 var _index = _interopRequireDefault(require("../../../../atom/choice/index.native"));
 
-var _index2 = _interopRequireDefault(require("../../../../atom/space/index.native"));
+var _index2 = _interopRequireDefault(require("../draggable/index.native"));
 
-var _index3 = _interopRequireDefault(require("../draggable/index.native"));
+var _index3 = _interopRequireDefault(require("../template/index.native"));
 
-var _index4 = _interopRequireDefault(require("../template/index.native"));
+var _index4 = _interopRequireDefault(require("../slider/index.native"));
 
-var _index5 = _interopRequireDefault(require("../slider/index.native"));
-
-var _index6 = _interopRequireDefault(require("../../free-text/index.native"));
+var _index5 = _interopRequireDefault(require("../../free-text/index.native"));
 
 var _templateContext = require("../../../../template/app-review/template-context");
 
@@ -36,20 +34,30 @@ const styleSheet = _reactNative.StyleSheet.create({
   },
   card: {
     flex: 1
+  },
+  choices: {// backgroundColor: '#967' // flex-debug
+  },
+  choice: {
+    paddingVertical: 5
   }
 });
 
 const Switch = props => {
   const templateContext = (0, _templateContext.useTemplateContext)();
   const {
-    analytics
+    analytics,
+    store
   } = templateContext;
+  const {
+    focusedSelectId,
+    handleBlur,
+    handleFocus
+  } = store;
   const {
     type,
     template,
     isDisabled,
-    items,
-    userChoices,
+    choices = [],
     min,
     max,
     unit,
@@ -58,23 +66,24 @@ const Switch = props => {
     onSliderChange,
     onItemPress,
     onItemInputChange,
-    onInputValueChange,
-    focusedSelectId,
-    handleFocus,
-    handleBlur
+    onInputValueChange
   } = props;
-
-  const isSelected = choice => userChoices && userChoices.includes(choice.label);
-
-  const handleItemPress = item => () => {
-    if (onItemPress) {
-      onItemPress(item);
+  const handleChoicePress = (0, _react.useCallback)(choice => () => {
+    if (choice.onPress) {
+      // e.g. app-review
+      choice.onPress();
+    } else if (onItemPress) {
+      // e.g. learner
+      onItemPress(choice);
     }
-  };
-
-  const handleItemInputChange = (0, _react.useCallback)((item, _value) => {
-    if (onItemInputChange) {
-      onItemInputChange(item, _value);
+  }, [onItemPress]);
+  const handleItemInputChange = (0, _react.useCallback)((choice, _value) => {
+    if (choice.onPress) {
+      // e.g. app-review
+      choice.onPress(_value);
+    } else if (onItemInputChange) {
+      // e.g. learner
+      onItemInputChange(choice, _value);
     }
   }, [onItemInputChange]);
   const handleSlidingComplete = (0, _react.useCallback)(_value => {
@@ -91,35 +100,32 @@ const Switch = props => {
   switch (type) {
     case 'qcm':
       return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-        testID: "question-choices"
-      }, items.map((item, index) => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-        key: `question-choice-${item._id}`
-      }, index > 0 ? /*#__PURE__*/_react.default.createElement(_index2.default, null) : null, /*#__PURE__*/_react.default.createElement(_index.default, {
-        onPress: handleItemPress(item),
+        testID: "question-choices",
+        style: styleSheet.choices
+      }, choices.map((choice, index) => /*#__PURE__*/_react.default.createElement(_index.default, {
+        key: `question-choice-${choice._id}`,
+        onPress: handleChoicePress(choice),
         isDisabled: isDisabled,
-        isSelected: isSelected(item),
-        testID: `question-choice-${item._id}`,
+        isSelected: choice.selected,
+        testID: `question-choice-${choice._id}`,
+        style: styleSheet.choice,
         questionType: type
-      }, item.label))));
+      }, choice.label)));
 
     case 'qcmGraphic':
       return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-        testID: "question-choices"
-      }, items.map((item, index) => {
-        return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-          key: `question-choice-row-${item._id}`
-        }, index > 0 ? /*#__PURE__*/_react.default.createElement(_index2.default, null) : null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-          style: styleSheet.cards
-        }, /*#__PURE__*/_react.default.createElement(_index.default, {
-          onPress: handleItemPress(item),
-          media: item.media,
-          isDisabled: isDisabled,
-          isSelected: isSelected(item),
-          testID: `question-choice-${item._id}`,
-          style: styleSheet.card,
-          questionType: type
-        }, item.label), /*#__PURE__*/_react.default.createElement(_index2.default, null)));
-      }));
+        testID: "question-choices",
+        style: styleSheet.choices
+      }, choices.map((choice, index) => /*#__PURE__*/_react.default.createElement(_index.default, {
+        key: `question-choice-${choice._id}`,
+        onPress: handleChoicePress(choice),
+        media: choice.media,
+        isDisabled: isDisabled,
+        isSelected: choice.selected,
+        testID: `question-choice-${choice._id}`,
+        style: styleSheet.choice,
+        questionType: type
+      }, choice.label)));
 
     case 'slider':
       {
@@ -127,7 +133,7 @@ const Switch = props => {
           return /*#__PURE__*/_react.default.createElement(_reactNative.View, null);
         }
 
-        return /*#__PURE__*/_react.default.createElement(_index5.default, {
+        return /*#__PURE__*/_react.default.createElement(_index4.default, {
           min: min,
           max: max,
           unit: unit,
@@ -140,16 +146,17 @@ const Switch = props => {
 
     case 'template':
       if (handleBlur === undefined || handleFocus === undefined || focusedSelectId === undefined) {
+        // eslint-disable-next-line no-console
+        console.warn('type template must implement handleFocus etc within Context.store');
         return /*#__PURE__*/_react.default.createElement(_reactNative.View, null);
       }
 
       return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
         testID: "question-choices"
-      }, /*#__PURE__*/_react.default.createElement(_index4.default, {
+      }, /*#__PURE__*/_react.default.createElement(_index3.default, {
         isDisabled: isDisabled,
         template: template || '',
-        items: items,
-        userChoices: userChoices,
+        choices: choices,
         onInputChange: handleItemInputChange,
         handleBlur: handleBlur,
         handleFocus: handleFocus,
@@ -157,16 +164,11 @@ const Switch = props => {
       }));
 
     case 'qcmDrag':
-      if (!onItemPress) {
-        return /*#__PURE__*/_react.default.createElement(_reactNative.View, null);
-      }
-
       return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
         testID: "question-draggable"
-      }, /*#__PURE__*/_react.default.createElement(_index3.default, {
-        choices: items,
-        userChoices: userChoices,
-        onPress: onItemPress
+      }, /*#__PURE__*/_react.default.createElement(_index2.default, {
+        choices: choices,
+        onPress: handleChoicePress
       }));
 
     case 'basic':
@@ -174,7 +176,7 @@ const Switch = props => {
         return /*#__PURE__*/_react.default.createElement(_reactNative.View, null);
       }
 
-      return /*#__PURE__*/_react.default.createElement(_index6.default, {
+      return /*#__PURE__*/_react.default.createElement(_index5.default, {
         fullWidth: true,
         onChange: onInputValueChange,
         testID: "question-input-text",
@@ -183,7 +185,7 @@ const Switch = props => {
       });
 
     default:
-      return /*#__PURE__*/_react.default.createElement(_reactNative.View, null);
+      return /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.Text, null, "Unhandled type: ", type));
   }
 };
 

package/lib/molecule/questions/mobile/switch/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/molecule/questions/mobile/switch/index.native.tsx"],"names":["styleSheet","StyleSheet","create","cards","flexDirection","alignItems","card","flex","Switch","props","templateContext","analytics","type","template","isDisabled","items","userChoices","min","max","unit","value","step","onSliderChange","onItemPress","onItemInputChange","onInputValueChange","focusedSelectId","handleFocus","handleBlur","isSelected","choice","includes","label","handleItemPress","item","handleItemInputChange","_value","handleSlidingComplete","logEvent","ANALYTICS_EVENT_TYPE","SLIDE","id","questionType","map","index","_id","media","undefined"],"mappings":"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","sourcesContent":["import React, {useCallback} from 'react';\nimport {View, StyleSheet} from 'react-native';\n\nimport QuestionChoice from '../../../../atom/choice/index.native';\nimport Space from '../../../../atom/space/index.native';\nimport QuestionDraggable from '../draggable/index.native';\nimport QuestionTemplate from '../template/index.native';\nimport QuestionSlider from '../slider/index.native';\nimport FreeText from '../../free-text/index.native';\n\nimport {useTemplateContext} from '../../../../template/app-review/template-context';\nimport {ANALYTICS_EVENT_TYPE} from '../../../../variables/analytics';\n\nimport {FocusedSelectId, HandleBlur, HandleFocus} from '../../../../types/app-review';\nimport type {QuestionType, Choice} from '../../../../types/progression-engine';\n\nexport interface Props {\n  type: QuestionType;\n  isDisabled?: boolean;\n  template?: string;\n  items: Array<Choice>;\n  userChoices: Array<string>;\n  onItemPress?: (item: Choice) => void;\n  onSliderChange?: (value: number) => void;\n  min?: number;\n  max?: number;\n  unit?: string;\n  step?: number;\n  value?: number;\n  onItemInputChange?: (item: Choice, value: string) => void;\n  onInputValueChange?: (value: string) => void;\n  focusedSelectId?: FocusedSelectId;\n  handleFocus?: HandleFocus;\n  handleBlur?: HandleBlur;\n}\n\nconst styleSheet = StyleSheet.create({\n  cards: {\n    flexDirection: 'row',\n    alignItems: 'stretch'\n  },\n  card: {\n    flex: 1\n  }\n});\n\nconst Switch = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const {analytics} = templateContext;\n\n  const {\n    type,\n    template,\n    isDisabled,\n    items,\n    userChoices,\n    min,\n    max,\n    unit,\n    value,\n    step,\n    onSliderChange,\n    onItemPress,\n    onItemInputChange,\n    onInputValueChange,\n    focusedSelectId,\n    handleFocus,\n    handleBlur\n  } = props;\n\n  const isSelected = (choice: Choice): boolean => userChoices && userChoices.includes(choice.label);\n\n  const handleItemPress = (item: Choice) => () => {\n    if (onItemPress) {\n      onItemPress(item);\n    }\n  };\n\n  const handleItemInputChange = useCallback(\n    (item: Choice, _value: string) => {\n      if (onItemInputChange) {\n        onItemInputChange(item, _value);\n      }\n    },\n    [onItemInputChange]\n  );\n\n  const handleSlidingComplete = useCallback(\n    _value => {\n      analytics &&\n        analytics.logEvent(ANALYTICS_EVENT_TYPE.SLIDE, {\n          id: 'slider',\n          questionType: 'slider'\n        });\n\n      if (onSliderChange) {\n        onSliderChange(_value);\n      }\n    },\n    [analytics, onSliderChange]\n  );\n\n  switch (type) {\n    case 'qcm':\n      return (\n        <View testID=\"question-choices\">\n          {items.map((item, index) => (\n            <View key={`question-choice-${item._id}`}>\n              {index > 0 ? <Space /> : null}\n              <QuestionChoice\n                onPress={handleItemPress(item)}\n                isDisabled={isDisabled}\n                isSelected={isSelected(item)}\n                testID={`question-choice-${item._id}`}\n                questionType={type}\n              >\n                {item.label}\n              </QuestionChoice>\n            </View>\n          ))}\n        </View>\n      );\n    case 'qcmGraphic':\n      return (\n        <View testID=\"question-choices\">\n          {items.map((item, index) => {\n            return (\n              <View key={`question-choice-row-${item._id}`}>\n                {index > 0 ? <Space /> : null}\n                <View style={styleSheet.cards}>\n                  <QuestionChoice\n                    onPress={handleItemPress(item)}\n                    media={item.media}\n                    isDisabled={isDisabled}\n                    isSelected={isSelected(item)}\n                    testID={`question-choice-${item._id}`}\n                    style={styleSheet.card}\n                    questionType={type}\n                  >\n                    {item.label}\n                  </QuestionChoice>\n                  <Space />\n                </View>\n              </View>\n            );\n          })}\n        </View>\n      );\n    case 'slider': {\n      if (min === undefined || max === undefined) {\n        return <View />;\n      }\n\n      return (\n        <QuestionSlider\n          min={min}\n          max={max}\n          unit={unit}\n          value={value}\n          step={step}\n          onSlidingComplete={handleSlidingComplete}\n          testID=\"question-slider\"\n        />\n      );\n    }\n    case 'template':\n      if (handleBlur === undefined || handleFocus === undefined || focusedSelectId === undefined) {\n        return <View />;\n      }\n\n      return (\n        <View testID=\"question-choices\">\n          <QuestionTemplate\n            isDisabled={isDisabled}\n            template={template || ''}\n            items={items}\n            userChoices={userChoices}\n            onInputChange={handleItemInputChange}\n            handleBlur={handleBlur}\n            handleFocus={handleFocus}\n            focusedSelectId={focusedSelectId}\n          />\n        </View>\n      );\n    case 'qcmDrag':\n      if (!onItemPress) {\n        return <View />;\n      }\n\n      return (\n        <View testID=\"question-draggable\">\n          <QuestionDraggable choices={items} userChoices={userChoices} onPress={onItemPress} />\n        </View>\n      );\n    case 'basic':\n      if (!onInputValueChange) {\n        return <View />;\n      }\n\n      return (\n        <FreeText\n          fullWidth\n          onChange={onInputValueChange}\n          testID=\"question-input-text\"\n          questionType=\"basic\"\n          isDisabled={isDisabled}\n        />\n      );\n    default:\n      return <View />;\n  }\n};\n\nexport default Switch;\n"],"file":"index.native.js"}
+{"version":3,"sources":["../../../../../src/molecule/questions/mobile/switch/index.native.tsx"],"names":["styleSheet","StyleSheet","create","cards","flexDirection","alignItems","card","flex","choices","choice","paddingVertical","Switch","props","templateContext","analytics","store","focusedSelectId","handleBlur","handleFocus","type","template","isDisabled","min","max","unit","value","step","onSliderChange","onItemPress","onItemInputChange","onInputValueChange","handleChoicePress","onPress","handleItemInputChange","_value","handleSlidingComplete","logEvent","ANALYTICS_EVENT_TYPE","SLIDE","id","questionType","map","index","_id","selected","label","media","undefined","console","warn"],"mappings":"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","sourcesContent":["import React, {useCallback} from 'react';\nimport {View, StyleSheet, Text} from 'react-native';\n\nimport QuestionChoice from '../../../../atom/choice/index.native';\nimport QuestionDraggable from '../draggable/index.native';\nimport QuestionTemplate from '../template/index.native';\nimport QuestionSlider from '../slider/index.native';\nimport FreeText from '../../free-text/index.native';\n\nimport {useTemplateContext} from '../../../../template/app-review/template-context';\nimport {ANALYTICS_EVENT_TYPE} from '../../../../variables/analytics';\n\nimport type {QuestionType, Choice} from '../../../../types/progression-engine';\n\nexport type Props = {\n  type: QuestionType;\n  isDisabled?: boolean;\n  template?: string;\n  choices?: Array<Choice>;\n  min?: number;\n  max?: number;\n  unit?: string;\n  step?: number;\n  value?: number;\n  onInputValueChange?: (value: string) => void;\n  onSliderChange?: (value: number) => void;\n  // --- mobile learner only\n  onItemInputChange?: (item: Choice, value: string) => void;\n  onItemPress?: (item: Choice) => void;\n};\n\nconst styleSheet = StyleSheet.create({\n  cards: {\n    flexDirection: 'row',\n    alignItems: 'stretch'\n  },\n  card: {\n    flex: 1\n  },\n  choices: {\n    // backgroundColor: '#967' // flex-debug\n  },\n  choice: {\n    paddingVertical: 5\n  }\n});\n\nconst Switch = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const {analytics, store} = templateContext;\n  const {focusedSelectId, handleBlur, handleFocus} = store;\n\n  const {\n    type,\n    template,\n    isDisabled,\n    choices = [],\n    min,\n    max,\n    unit,\n    value,\n    step,\n    onSliderChange,\n    onItemPress,\n    onItemInputChange,\n    onInputValueChange\n  } = props;\n\n  const handleChoicePress = useCallback(\n    (choice: Choice) => () => {\n      if (choice.onPress) {\n        // e.g. app-review\n        choice.onPress();\n      } else if (onItemPress) {\n        // e.g. learner\n        onItemPress(choice);\n      }\n    },\n    [onItemPress]\n  );\n\n  const handleItemInputChange = useCallback(\n    (choice: Choice, _value: string) => {\n      if (choice.onPress) {\n        // e.g. app-review\n        choice.onPress(_value);\n      } else if (onItemInputChange) {\n        // e.g. learner\n        onItemInputChange(choice, _value);\n      }\n    },\n    [onItemInputChange]\n  );\n\n  const handleSlidingComplete = useCallback(\n    _value => {\n      analytics &&\n        analytics.logEvent(ANALYTICS_EVENT_TYPE.SLIDE, {\n          id: 'slider',\n          questionType: 'slider'\n        });\n\n      if (onSliderChange) {\n        onSliderChange(_value);\n      }\n    },\n    [analytics, onSliderChange]\n  );\n\n  switch (type) {\n    case 'qcm':\n      return (\n        <View testID=\"question-choices\" style={styleSheet.choices}>\n          {choices.map((choice, index) => (\n            <QuestionChoice\n              key={`question-choice-${choice._id}`}\n              onPress={handleChoicePress(choice)}\n              isDisabled={isDisabled}\n              isSelected={choice.selected}\n              testID={`question-choice-${choice._id}`}\n              style={styleSheet.choice}\n              questionType={type}\n            >\n              {choice.label}\n            </QuestionChoice>\n          ))}\n        </View>\n      );\n    case 'qcmGraphic':\n      return (\n        <View testID=\"question-choices\" style={styleSheet.choices}>\n          {choices.map((choice, index) => (\n            <QuestionChoice\n              key={`question-choice-${choice._id}`}\n              onPress={handleChoicePress(choice)}\n              media={choice.media}\n              isDisabled={isDisabled}\n              isSelected={choice.selected}\n              testID={`question-choice-${choice._id}`}\n              style={styleSheet.choice}\n              questionType={type}\n            >\n              {choice.label}\n            </QuestionChoice>\n          ))}\n        </View>\n      );\n    case 'slider': {\n      if (min === undefined || max === undefined) {\n        return <View />;\n      }\n\n      return (\n        <QuestionSlider\n          min={min}\n          max={max}\n          unit={unit}\n          value={value}\n          step={step}\n          onSlidingComplete={handleSlidingComplete}\n          testID=\"question-slider\"\n        />\n      );\n    }\n    case 'template':\n      if (handleBlur === undefined || handleFocus === undefined || focusedSelectId === undefined) {\n        // eslint-disable-next-line no-console\n        console.warn('type template must implement handleFocus etc within Context.store');\n        return <View />;\n      }\n\n      return (\n        <View testID=\"question-choices\">\n          <QuestionTemplate\n            isDisabled={isDisabled}\n            template={template || ''}\n            choices={choices}\n            onInputChange={handleItemInputChange}\n            handleBlur={handleBlur}\n            handleFocus={handleFocus}\n            focusedSelectId={focusedSelectId}\n          />\n        </View>\n      );\n    case 'qcmDrag':\n      return (\n        <View testID=\"question-draggable\">\n          <QuestionDraggable choices={choices} onPress={handleChoicePress} />\n        </View>\n      );\n    case 'basic':\n      if (!onInputValueChange) {\n        return <View />;\n      }\n\n      return (\n        <FreeText\n          fullWidth\n          onChange={onInputValueChange}\n          testID=\"question-input-text\"\n          questionType=\"basic\"\n          isDisabled={isDisabled}\n        />\n      );\n    default:\n      return (\n        <View>\n          <Text>Unhandled type: {type}</Text>\n        </View>\n      );\n  }\n};\n\nexport default Switch;\n"],"file":"index.native.js"}

package/lib/molecule/questions/mobile/template/index.native.js

@@ -31,6 +31,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const createStyleSheet = theme => ({
   section: {
+    // backgroundColor: '#188', // flex-debug
     width: '100%',
     flexDirection: 'row',
     flexWrap: 'wrap',
@@ -64,11 +65,10 @@ const createStyleSheet = theme => ({
 
 const Section = ({
   section,
-  items,
+  choices,
   index,
   focusedSelectId,
   onInputChange,
-  userChoices,
   handleBlur,
   handleFocus,
   isDisabled,
@@ -87,11 +87,10 @@ const Section = ({
     }, /*#__PURE__*/_react.default.createElement(Item, {
       prefix: prefix,
       part: part,
-      items: items,
+      choices: choices,
       index: id,
       focusedSelectId: focusedSelectId,
       isDisabled: isDisabled,
-      userChoices: userChoices,
       handleBlur: handleBlur,
       handleFocus: handleFocus,
       onInputChange: onInputChange,
@@ -109,8 +108,7 @@ const Item = props => {
     prefix,
     isDisabled = false,
     focusedSelectId,
-    items,
-    userChoices,
+    choices,
     onInputChange,
     handleBlur,
     handleFocus,
@@ -122,7 +120,7 @@ const Item = props => {
     brandTheme,
     translations
   } = templateContext;
-  const inputNames = items.map(item => item.name);
+  const inputNames = choices.map(choice => choice.name);
   const id = `${prefix}-part-${index + 1}`;
   const isFocused = focusedSelectId === id;
   const selectedStyle = brandTheme && {
@@ -131,11 +129,13 @@ const Item = props => {
   };
 
   if (part.type === 'answerField' && inputNames.includes(part.value)) {
-    const itemIndex = items.findIndex(_item => _item.name === part.value);
-    const item = items[itemIndex];
-    const value = userChoices[itemIndex];
+    const choiceIndex = choices.findIndex(choice => choice.name === part.value);
+    const choice = choices[choiceIndex];
+    const {
+      value
+    } = choice;
 
-    if (!item || !item.type || !item.name) {
+    if (!choice || !choice.type || !choice.name) {
       return null;
     }
 
@@ -144,34 +144,34 @@ const Item = props => {
 
     const handleInputChange = _item => _value => onInputChange(_item, _value);
 
-    if (item.type === 'text') {
+    if (choice.type === 'text') {
       return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
         style: styles.spaced,
         testID: id
       }, /*#__PURE__*/_react.default.createElement(_index4.default, {
         key: id,
         isDisabled: isDisabled,
-        onChange: handleInputChange(item),
+        onChange: handleInputChange(choice),
         value: value,
         testID: `${id}-text${selectedSuffix}${disabledSuffix}`,
         questionType: "template"
       }));
     }
 
-    if (item.type === 'select') {
+    if (choice.type === 'select') {
       return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
         style: styles.spaced,
         testID: id
       }, /*#__PURE__*/_react.default.createElement(_index2.default, {
         isDisabled: isDisabled,
         questionType: "template",
-        values: item.items,
+        values: choice.items,
         value: value,
         placeholder: translations.selectAnAnswer,
         isFocused: isFocused,
         onBlur: handleBlur,
         onFocus: handleFocus(id),
-        onChange: handleInputChange(item),
+        onChange: handleInputChange(choice),
         textStyle: styles.text,
         style: [styles.input, value && selectedStyle],
         testID: `${id}-select${selectedSuffix}${disabledSuffix}`
@@ -191,8 +191,7 @@ const QuestionTemplate = props => {
   const {
     template,
     onInputChange,
-    userChoices,
-    items,
+    choices,
     handleBlur,
     handleFocus,
     focusedSelectId,
@@ -219,20 +218,16 @@ const QuestionTemplate = props => {
     return result.slice(0, -1).concat([section.concat([item])]);
   }, []);
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flex: 1
-    },
     testID: "question-template"
   }, sections.map((section, index) => /*#__PURE__*/_react.default.createElement(Section, {
     key: index,
     section: section,
-    items: items,
+    choices: choices,
     index: index,
     handleBlur: handleBlur,
     handleFocus: handleFocus,
     focusedSelectId: focusedSelectId,
     onInputChange: onInputChange,
-    userChoices: userChoices,
     isDisabled: isDisabled,
     styles: styleSheet
   })));