@coorpacademy/components 10.22.4 → 10.22.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (90) hide show
  1. package/README.md +11 -5
  2. package/es/atom/choice/index.native.js +132 -0
  3. package/es/atom/choice/index.native.js.map +1 -0
  4. package/es/atom/gradient/index.native.js +46 -0
  5. package/es/atom/gradient/index.native.js.map +1 -0
  6. package/es/atom/html/index.native.js +9 -16
  7. package/es/atom/html/index.native.js.map +1 -1
  8. package/es/atom/image-background/index.native.js +90 -0
  9. package/es/atom/image-background/index.native.js.map +1 -0
  10. package/es/atom/input-switch/index.js +43 -6
  11. package/es/atom/input-switch/index.js.map +1 -1
  12. package/es/atom/input-switch/style.css +56 -6
  13. package/es/atom/select-modal/index.native.js +6 -6
  14. package/es/atom/select-modal/index.native.js.map +1 -1
  15. package/es/atom/text/index.native.js +3 -1
  16. package/es/atom/text/index.native.js.map +1 -1
  17. package/es/hoc/modal/select/index.native.js +4 -3
  18. package/es/hoc/modal/select/index.native.js.map +1 -1
  19. package/es/molecule/answer/index.js +39 -32
  20. package/es/molecule/answer/index.js.map +1 -1
  21. package/es/molecule/cm-popin/index.js +101 -14
  22. package/es/molecule/cm-popin/index.js.map +1 -1
  23. package/es/molecule/cm-popin/style.css +153 -9
  24. package/es/molecule/questions/free-text/index.native.js +8 -8
  25. package/es/molecule/questions/free-text/index.native.js.map +1 -1
  26. package/es/molecule/questions/mobile/template/index.native.js +222 -0
  27. package/es/molecule/questions/mobile/template/index.native.js.map +1 -0
  28. package/es/template/app-review/template-context.js +1 -0
  29. package/es/template/app-review/template-context.js.map +1 -1
  30. package/es/template/common/dashboard/index.js +6 -3
  31. package/es/template/common/dashboard/index.js.map +1 -1
  32. package/es/types/app-review.d.js +2 -0
  33. package/es/types/app-review.d.js.map +1 -0
  34. package/es/types/translations.js +2 -0
  35. package/es/types/translations.js.map +1 -0
  36. package/es/util/build-query-string.js +9 -0
  37. package/es/util/build-query-string.js.map +1 -0
  38. package/es/util/get-clean-uri.js +4 -0
  39. package/es/util/get-clean-uri.js.map +1 -0
  40. package/es/util/get-resized-image.js +39 -0
  41. package/es/util/get-resized-image.js.map +1 -0
  42. package/es/util/parse-template-string.js +4 -2
  43. package/es/util/parse-template-string.js.map +1 -1
  44. package/es/variables/colors.css +1 -0
  45. package/es/variables/theme.native.js.map +1 -1
  46. package/lib/atom/choice/index.native.js +150 -0
  47. package/lib/atom/choice/index.native.js.map +1 -0
  48. package/lib/atom/gradient/index.native.js +56 -0
  49. package/lib/atom/gradient/index.native.js.map +1 -0
  50. package/lib/atom/html/index.native.js +8 -15
  51. package/lib/atom/html/index.native.js.map +1 -1
  52. package/lib/atom/image-background/index.native.js +105 -0
  53. package/lib/atom/image-background/index.native.js.map +1 -0
  54. package/lib/atom/input-switch/index.js +43 -6
  55. package/lib/atom/input-switch/index.js.map +1 -1
  56. package/lib/atom/input-switch/style.css +56 -6
  57. package/lib/atom/select-modal/index.native.js +5 -5
  58. package/lib/atom/select-modal/index.native.js.map +1 -1
  59. package/lib/atom/text/index.native.js +3 -1
  60. package/lib/atom/text/index.native.js.map +1 -1
  61. package/lib/hoc/modal/select/index.native.js +7 -5
  62. package/lib/hoc/modal/select/index.native.js.map +1 -1
  63. package/lib/molecule/answer/index.js +39 -32
  64. package/lib/molecule/answer/index.js.map +1 -1
  65. package/lib/molecule/cm-popin/index.js +102 -13
  66. package/lib/molecule/cm-popin/index.js.map +1 -1
  67. package/lib/molecule/cm-popin/style.css +153 -9
  68. package/lib/molecule/questions/free-text/index.native.js +7 -7
  69. package/lib/molecule/questions/free-text/index.native.js.map +1 -1
  70. package/lib/molecule/questions/mobile/template/index.native.js +243 -0
  71. package/lib/molecule/questions/mobile/template/index.native.js.map +1 -0
  72. package/lib/template/app-review/template-context.js +1 -0
  73. package/lib/template/app-review/template-context.js.map +1 -1
  74. package/lib/template/common/dashboard/index.js +7 -3
  75. package/lib/template/common/dashboard/index.js.map +1 -1
  76. package/lib/types/app-review.d.js +2 -0
  77. package/lib/types/app-review.d.js.map +1 -0
  78. package/lib/types/translations.js +2 -0
  79. package/lib/types/translations.js.map +1 -0
  80. package/lib/util/build-query-string.js +17 -0
  81. package/lib/util/build-query-string.js.map +1 -0
  82. package/lib/util/get-clean-uri.js +10 -0
  83. package/lib/util/get-clean-uri.js.map +1 -0
  84. package/lib/util/get-resized-image.js +49 -0
  85. package/lib/util/get-resized-image.js.map +1 -0
  86. package/lib/util/parse-template-string.js +4 -2
  87. package/lib/util/parse-template-string.js.map +1 -1
  88. package/lib/variables/colors.css +1 -0
  89. package/lib/variables/theme.native.js.map +1 -1
  90. package/package.json +5 -3
@@ -32,7 +32,9 @@ const InputSwitch = props => {
32
32
  description,
33
33
  modified = false,
34
34
  theme = 'default',
35
- titlePosition = 'left'
35
+ titlePosition = 'left',
36
+ details = '',
37
+ requiredSelection = false
36
38
  } = props;
37
39
  const idSwitch = id || (0, _uniqueId2.default)('input-switch-');
38
40
  const isDisabled = disabled ? 'disabled' : '';
@@ -43,13 +45,42 @@ const InputSwitch = props => {
43
45
  const descriptionView = description ? /*#__PURE__*/_react.default.createElement("div", {
44
46
  className: _style.default.description
45
47
  }, description) : null;
46
- const defaultClass = theme === 'coorpmanager' ? _style.default.coorpmanager : _style.default.default;
47
- const modifiedClass = theme === 'coorpmanager' ? _style.default.coorpmanagerModified : _style.default.modified;
48
+
49
+ const getClass = () => {
50
+ switch (theme) {
51
+ case 'coorpmanager':
52
+ return {
53
+ defaultClass: _style.default.coorpmanager,
54
+ modifiedClass: _style.default.coorpmanagerModified
55
+ };
56
+
57
+ case 'mooc':
58
+ return {
59
+ defaultClass: _style.default.partielUncheck,
60
+ modifiedClass: _style.default.coorpmanagerModified
61
+ };
62
+
63
+ default:
64
+ return {
65
+ defaultClass: _style.default.default,
66
+ modifiedClass: _style.default.modified
67
+ };
68
+ }
69
+ };
70
+
71
+ const {
72
+ defaultClass,
73
+ modifiedClass
74
+ } = getClass();
48
75
  const className = (0, _getClassState.default)(defaultClass, modifiedClass, null, modified);
49
76
  return /*#__PURE__*/_react.default.createElement("div", {
50
77
  className: className,
51
78
  "data-name": `switch-input-${theme}`
52
- }, titlePosition === 'left' ? titleView : null, /*#__PURE__*/_react.default.createElement("input", {
79
+ }, titlePosition === 'left' ? titleView : null, /*#__PURE__*/_react.default.createElement("div", {
80
+ className: requiredSelection ? _style.default.requiredSelection : null
81
+ }, /*#__PURE__*/_react.default.createElement("div", {
82
+ className: _style.default.btnSwitchContainer
83
+ }, /*#__PURE__*/_react.default.createElement("input", {
53
84
  type: "checkbox",
54
85
  id: idSwitch,
55
86
  name: name,
@@ -60,7 +91,11 @@ const InputSwitch = props => {
60
91
  }), /*#__PURE__*/_react.default.createElement("label", {
61
92
  htmlFor: idSwitch,
62
93
  "data-name": "input-switch-label"
63
- }), titlePosition === 'right' ? titleView : null, descriptionView);
94
+ }))), /*#__PURE__*/_react.default.createElement("div", {
95
+ className: !details ? _style.default.alignedTextContainer : null
96
+ }, titlePosition === 'right' ? titleView : null, details ? /*#__PURE__*/_react.default.createElement("div", {
97
+ className: _style.default.detailsTxt
98
+ }, details) : null), descriptionView);
64
99
  };
65
100
 
66
101
  InputSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -73,7 +108,9 @@ InputSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
73
108
  description: _propTypes.default.string,
74
109
  modified: _propTypes.default.bool,
75
110
  titlePosition: _propTypes.default.oneOf(['right', 'left']),
76
- theme: _propTypes.default.oneOf(['default', 'coorpmanager'])
111
+ theme: _propTypes.default.oneOf(['default', 'coorpmanager', 'mooc']),
112
+ details: _propTypes.default.string,
113
+ requiredSelection: _propTypes.default.bool
77
114
  } : {};
78
115
  var _default = InputSwitch;
79
116
  exports.default = _default;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/atom/input-switch/index.js"],"names":["InputSwitch","props","title","name","id","value","disabled","onChange","description","modified","theme","titlePosition","idSwitch","isDisabled","handleChange","e","target","checked","titleView","style","descriptionView","defaultClass","coorpmanager","default","modifiedClass","coorpmanagerModified","className","checkbox","propTypes","PropTypes","string","bool","func","oneOf"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AAEA,MAAMA,WAAW,GAAGC,KAAK,IAAI;AAC3B,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,IAFI;AAGJC,IAAAA,EAHI;AAIJC,IAAAA,KAJI;AAKJC,IAAAA,QALI;AAMJC,IAAAA,QAAQ,iBANJ;AAOJC,IAAAA,WAPI;AAQJC,IAAAA,QAAQ,GAAG,KARP;AASJC,IAAAA,KAAK,GAAG,SATJ;AAUJC,IAAAA,aAAa,GAAG;AAVZ,MAWFV,KAXJ;AAaA,QAAMW,QAAQ,GAAGR,EAAE,IAAI,wBAAS,eAAT,CAAvB;AACA,QAAMS,UAAU,GAAGP,QAAQ,GAAG,UAAH,GAAgB,EAA3C;AACA,QAAMQ,YAAY,GAAG,oBAAQ,MAAMC,CAAC,IAAIR,QAAQ,CAACQ,CAAC,CAACC,MAAF,CAASC,OAAV,CAA3B,EAA+C,CAACV,QAAD,CAA/C,CAArB;AAEA,QAAMW,SAAS,GAAGhB,KAAK,gBAAG;AAAM,IAAA,SAAS,EAAEiB,eAAMjB;AAAvB,KAAgC,GAAEA,KAAM,GAAxC,CAAH,GAAwD,IAA/E;AAEA,QAAMkB,eAAe,GAAGZ,WAAW,gBACjC;AAAK,IAAA,SAAS,EAAEW,eAAMX;AAAtB,KAAoCA,WAApC,CADiC,GAE/B,IAFJ;AAIA,QAAMa,YAAY,GAAGX,KAAK,KAAK,cAAV,GAA2BS,eAAMG,YAAjC,GAAgDH,eAAMI,OAA3E;AACA,QAAMC,aAAa,GAAGd,KAAK,KAAK,cAAV,GAA2BS,eAAMM,oBAAjC,GAAwDN,eAAMV,QAApF;AACA,QAAMiB,SAAS,GAAG,4BAAcL,YAAd,EAA4BG,aAA5B,EAA2C,IAA3C,EAAiDf,QAAjD,CAAlB;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEiB,SAAhB;AAA2B,iBAAY,gBAAehB,KAAM;AAA5D,KACGC,aAAa,KAAK,MAAlB,GAA2BO,SAA3B,GAAuC,IAD1C,eAEE;AACE,IAAA,IAAI,EAAC,UADP;AAEE,IAAA,EAAE,EAAEN,QAFN;AAGE,IAAA,IAAI,EAAET,IAHR;AAIE,IAAA,QAAQ,EAAEW,YAJZ;AAKE,IAAA,OAAO,EAAET,KALX;AAME,IAAA,QAAQ,EAAEQ,UANZ;AAOE,IAAA,SAAS,EAAEM,eAAMQ;AAPnB,IAFF,eAWE;AAAO,IAAA,OAAO,EAAEf,QAAhB;AAA0B,iBAAU;AAApC,IAXF,EAYGD,aAAa,KAAK,OAAlB,GAA4BO,SAA5B,GAAwC,IAZ3C,EAaGE,eAbH,CADF;AAiBD,CA7CD;;AA+CApB,WAAW,CAAC4B,SAAZ,2CAAwB;AACtB1B,EAAAA,KAAK,EAAE2B,mBAAUC,MADK;AAEtB3B,EAAAA,IAAI,EAAE0B,mBAAUC,MAFM;AAGtB1B,EAAAA,EAAE,EAAEyB,mBAAUC,MAHQ;AAItBzB,EAAAA,KAAK,EAAEwB,mBAAUE,IAJK;AAKtBzB,EAAAA,QAAQ,EAAEuB,mBAAUE,IALE;AAMtBxB,EAAAA,QAAQ,EAAEsB,mBAAUG,IANE;AAOtBxB,EAAAA,WAAW,EAAEqB,mBAAUC,MAPD;AAQtBrB,EAAAA,QAAQ,EAAEoB,mBAAUE,IARE;AAStBpB,EAAAA,aAAa,EAAEkB,mBAAUI,KAAV,CAAgB,CAAC,OAAD,EAAU,MAAV,CAAhB,CATO;AAUtBvB,EAAAA,KAAK,EAAEmB,mBAAUI,KAAV,CAAgB,CAAC,SAAD,EAAY,cAAZ,CAAhB;AAVe,CAAxB;eAYejC,W","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst InputSwitch = props => {\n const {\n title,\n name,\n id,\n value,\n disabled,\n onChange = noop,\n description,\n modified = false,\n theme = 'default',\n titlePosition = 'left'\n } = props;\n\n const idSwitch = id || uniqueId('input-switch-');\n const isDisabled = disabled ? 'disabled' : '';\n const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n const titleView = title ? <span className={style.title}>{`${title} `}</span> : null;\n\n const descriptionView = description ? (\n <div className={style.description}>{description}</div>\n ) : null;\n\n const defaultClass = theme === 'coorpmanager' ? style.coorpmanager : style.default;\n const modifiedClass = theme === 'coorpmanager' ? style.coorpmanagerModified : style.modified;\n const className = getClassState(defaultClass, modifiedClass, null, modified);\n\n return (\n <div className={className} data-name={`switch-input-${theme}`}>\n {titlePosition === 'left' ? titleView : null}\n <input\n type=\"checkbox\"\n id={idSwitch}\n name={name}\n onChange={handleChange}\n checked={value}\n disabled={isDisabled}\n className={style.checkbox}\n />\n <label htmlFor={idSwitch} data-name=\"input-switch-label\" />\n {titlePosition === 'right' ? titleView : null}\n {descriptionView}\n </div>\n );\n};\n\nInputSwitch.propTypes = {\n title: PropTypes.string,\n name: PropTypes.string,\n id: PropTypes.string,\n value: PropTypes.bool,\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n description: PropTypes.string,\n modified: PropTypes.bool,\n titlePosition: PropTypes.oneOf(['right', 'left']),\n theme: PropTypes.oneOf(['default', 'coorpmanager'])\n};\nexport default InputSwitch;\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../src/atom/input-switch/index.js"],"names":["InputSwitch","props","title","name","id","value","disabled","onChange","description","modified","theme","titlePosition","details","requiredSelection","idSwitch","isDisabled","handleChange","e","target","checked","titleView","style","descriptionView","getClass","defaultClass","coorpmanager","modifiedClass","coorpmanagerModified","partielUncheck","default","className","btnSwitchContainer","checkbox","alignedTextContainer","detailsTxt","propTypes","PropTypes","string","bool","func","oneOf"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst InputSwitch = props => {\n const {\n title,\n name,\n id,\n value,\n disabled,\n onChange = noop,\n description,\n modified = false,\n theme = 'default',\n titlePosition = 'left',\n details = '',\n requiredSelection = false\n } = props;\n\n const idSwitch = id || uniqueId('input-switch-');\n const isDisabled = disabled ? 'disabled' : '';\n const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n const titleView = title ? <span className={style.title}>{`${title} `}</span> : null;\n\n const descriptionView = description ? (\n <div className={style.description}>{description}</div>\n ) : null;\n\n const getClass = () => {\n switch (theme) {\n case 'coorpmanager':\n return {\n defaultClass: style.coorpmanager,\n modifiedClass: style.coorpmanagerModified\n };\n case 'mooc':\n return {\n defaultClass: style.partielUncheck,\n modifiedClass: style.coorpmanagerModified\n };\n default:\n return {defaultClass: style.default, modifiedClass: style.modified};\n }\n };\n const {defaultClass, modifiedClass} = getClass();\n const className = getClassState(defaultClass, modifiedClass, null, modified);\n\n return (\n <div className={className} data-name={`switch-input-${theme}`}>\n {titlePosition === 'left' ? titleView : null}\n <div className={requiredSelection ? style.requiredSelection : null}>\n <div className={style.btnSwitchContainer}>\n <input\n type=\"checkbox\"\n id={idSwitch}\n name={name}\n onChange={handleChange}\n checked={value}\n disabled={isDisabled}\n className={style.checkbox}\n />\n <label htmlFor={idSwitch} data-name=\"input-switch-label\" />\n </div>\n </div>\n <div className={!details ? style.alignedTextContainer : null}>\n {titlePosition === 'right' ? titleView : null}\n {details ? <div className={style.detailsTxt}>{details}</div> : null}\n </div>\n {descriptionView}\n </div>\n );\n};\n\nInputSwitch.propTypes = {\n title: PropTypes.string,\n name: PropTypes.string,\n id: PropTypes.string,\n value: PropTypes.bool,\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n description: PropTypes.string,\n modified: PropTypes.bool,\n titlePosition: PropTypes.oneOf(['right', 'left']),\n theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),\n details: PropTypes.string,\n requiredSelection: PropTypes.bool\n};\nexport default InputSwitch;\n"],"file":"index.js"}
@@ -8,11 +8,10 @@
8
8
  @value cm_grey_200 from colors;
9
9
  @value black from colors;
10
10
  @value cm_primary_blue from colors;
11
+ @value light_blue from colors;
11
12
 
12
13
  .default {
13
14
  display: flex;
14
- align-items: center;
15
- align-content: center;
16
15
  }
17
16
 
18
17
  .modified {
@@ -27,6 +26,10 @@
27
26
  composes: modified;
28
27
  }
29
28
 
29
+ .partielUncheck {
30
+ composes: coorpmanager;
31
+ }
32
+
30
33
  .default label {
31
34
  height: 30px;
32
35
  position: relative;
@@ -97,12 +100,11 @@
97
100
  font-size: 15px;
98
101
  text-transform: none;
99
102
  color: dark;
100
- width: 180px;
101
103
  margin-right: 20px;
102
- min-height: 50px;
103
104
  display: flex;
104
105
  align-items: center;
105
106
  align-content: center;
107
+ min-height: 24px;
106
108
  }
107
109
 
108
110
  .description {
@@ -118,7 +120,7 @@
118
120
  width: 48px;
119
121
  height: 24px;
120
122
  border: solid 2px cm_grey_200;
121
- margin-right: 8px;
123
+ margin-right: 16px;
122
124
  background: cm_grey_200;
123
125
  }
124
126
 
@@ -148,4 +150,52 @@
148
150
 
149
151
  .coorpmanager .checkbox:disabled ~ label::after {
150
152
  background: white;
151
- }
153
+ }
154
+
155
+ .partielUncheck label::after {
156
+ width: 19px;
157
+ height: 19px;
158
+ border: 3px solid cm_primary_blue;
159
+ margin-left: 8px;
160
+ }
161
+ .partielUncheck label {
162
+ width: 50px;
163
+ height: 26px;
164
+ background: light_blue;
165
+ border: 0px;
166
+ }
167
+ .partielUncheck .checkbox:checked ~ label {
168
+ background-color: cm_primary_blue;
169
+ border: 0px;
170
+ width: 50px;
171
+ height: 26px;
172
+ }
173
+
174
+ .partielUncheck .checkbox:checked ~ label::after {
175
+ margin-left: 0px;
176
+ }
177
+
178
+ .btnSwitchContainer {
179
+ display: flex;
180
+ align-items: center;
181
+ }
182
+ .alignedTextContainer {
183
+ display: flex;
184
+ align-items: center;
185
+ align-content: center;
186
+ }
187
+ .detailsTxt {
188
+ font-family: Gilroy;
189
+ font-weight: 500;
190
+ font-size: 14px;
191
+ line-height: 22px;
192
+ color: black;
193
+ font-style: normal;
194
+ white-space: pre-line;
195
+ margin-right: 24px;
196
+ }
197
+ .requiredSelection label, .requiredSelection .checkbox:disabled ~ label {
198
+ background-color: cm_primary_blue;
199
+ border-color: cm_primary_blue;
200
+ opacity: 0.4;
201
+ }
@@ -78,20 +78,20 @@ const Select = props => {
78
78
  isDisabled = false,
79
79
  testID = 'select'
80
80
  } = props;
81
- const handleFocus = (0, _react.useMemo)(() => () => {
81
+ const handleFocus = (0, _react.useCallback)(() => {
82
82
  if (!onFocus) return;
83
83
  analytics && logEvent(_analytics.ANALYTICS_EVENT_TYPE.OPEN_SELECT, analyticsID, analytics, questionType);
84
84
  onFocus();
85
85
  }, [analytics, analyticsID, onFocus, questionType]);
86
- const handleBlur = (0, _react.useMemo)(() => () => {
86
+ const handleBlur = (0, _react.useCallback)(() => {
87
87
  if (!onBlur) return;
88
88
  analytics && logEvent(_analytics.ANALYTICS_EVENT_TYPE.CLOSE_SELECT, analyticsID, analytics, questionType);
89
89
  onBlur();
90
90
  }, [analytics, analyticsID, onBlur, questionType]);
91
- const handleChange = (0, _react.useMemo)(() => () => {
92
- onChange(value);
91
+ const handleChange = (0, _react.useCallback)(_value => {
92
+ onChange(_value);
93
93
  handleBlur();
94
- }, [value, onChange, handleBlur]);
94
+ }, [onChange, handleBlur]);
95
95
 
96
96
  if (!styleSheet) {
97
97
  return null;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/atom/select-modal/index.native.tsx"],"names":["ICON_WIDTH","createStyleSheet","theme","StyleSheet","create","container","alignItems","flexDirection","text","flex","color","colors","gray","medium","textAlign","logEvent","eventName","analyticsID","analytics","questionType","id","Select","props","templateContext","styleSheet","setStylesheet","_stylesheet","onBlur","onFocus","onChange","values","placeholder","value","style","textStyle","isFocused","isDisabled","testID","handleFocus","ANALYTICS_EVENT_TYPE","OPEN_SELECT","handleBlur","CLOSE_SELECT","handleChange","selectedItem","find","item","dark"],"mappings":"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","sourcesContent":["import React, {useState, useEffect, useMemo} from 'react';\nimport {View, StyleSheet, ViewStyle, TextStyle, FlexAlignType, FlexStyle} from 'react-native';\nimport {NovaCompositionNavigationArrowDown as ArrowDown} from '@coorpacademy/nova-icons';\nimport Modal from 'react-native-modal';\nimport Touchable from '../../hoc/touchable/index.native';\nimport type {QuestionType} from '../../types/progression-engine';\nimport {Theme} from '../../variables/theme.native';\n\nimport {ANALYTICS_EVENT_TYPE, Analytics} from '../../variables/analytics';\nimport Space from '../space/index.native';\nimport Text from '../text/index.native';\nimport ModalSelect, {OnChangeFunction} from '../../hoc/modal/select/index.native';\nimport type {Props as ModalSelectProps} from '../../hoc/modal/select/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\n\nexport type Props = {\n analyticsID: string;\n questionType: QuestionType;\n isDisabled?: boolean;\n isFocused?: boolean;\n values: Pick<ModalSelectProps, 'values'>;\n value?: Pick<ModalSelectProps, 'value'>;\n placeholder?: string;\n color?: string;\n onChange: OnChangeFunction;\n onFocus: () => void;\n onBlur: () => void;\n style?: ViewStyle;\n textStyle?: ViewStyle;\n testID?: string;\n};\n\ntype StyleSheetType = {\n container: {\n alignItems: FlexAlignType;\n flexDirection: 'row' | 'column' | 'row-reverse' | 'column-reverse' | undefined;\n };\n text: {\n flex: number;\n color: string;\n textAlign: string;\n };\n};\n\nconst ICON_WIDTH = 15;\n\nconst createStyleSheet = (theme: Theme) =>\n StyleSheet.create({\n container: {\n alignItems: 'center',\n flexDirection: 'row'\n },\n text: {\n flex: 1,\n color: theme.colors.gray.medium,\n textAlign: 'center'\n }\n });\n\nconst logEvent = (\n eventName: string,\n analyticsID: String,\n analytics: Analytics,\n questionType: QuestionType\n) => {\n analytics &&\n analytics.logEvent(eventName, {\n id: analyticsID,\n questionType\n });\n};\n\nconst Select = (props: Props) => {\n const templateContext = useTemplateContext();\n const {theme, analytics} = templateContext;\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n const {\n analyticsID,\n onBlur,\n onFocus,\n onChange,\n values,\n placeholder,\n value,\n style,\n textStyle,\n color,\n questionType,\n isFocused = false,\n isDisabled = false,\n testID = 'select'\n } = props;\n\n const handleFocus = useMemo(\n () => () => {\n if (!onFocus) return;\n\n analytics && logEvent(ANALYTICS_EVENT_TYPE.OPEN_SELECT, analyticsID, analytics, questionType);\n onFocus();\n },\n [analytics, analyticsID, onFocus, questionType]\n );\n\n const handleBlur = useMemo(\n () => () => {\n if (!onBlur) return;\n\n analytics &&\n logEvent(ANALYTICS_EVENT_TYPE.CLOSE_SELECT, analyticsID, analytics, questionType);\n onBlur();\n },\n [analytics, analyticsID, onBlur, questionType]\n );\n\n const handleChange = useMemo(\n () => () => {\n onChange(value);\n handleBlur();\n },\n [value, onChange, handleBlur]\n );\n\n if (!styleSheet) {\n return null;\n }\n\n const selectedItem = values.find(item => item.text === value);\n const text = (selectedItem && selectedItem.text) || placeholder || null;\n\n return (\n <>\n <Touchable\n disabled={isDisabled}\n onPress={handleFocus}\n analyticsID={analyticsID}\n testID={`${testID}-input`}\n >\n <View style={[styleSheet.container, style]}>\n <Text style={[styleSheet.text, textStyle, color && {color}]}>{text}</Text>\n <Space type=\"tiny\" />\n <ArrowDown\n color={color || theme.colors.gray.dark}\n height={ICON_WIDTH}\n width={ICON_WIDTH}\n />\n </View>\n </Touchable>\n <Modal\n isVisible={isFocused}\n onSwipeComplete={handleBlur}\n onBackdropPress={handleBlur}\n testID={testID}\n >\n <ModalSelect\n value={value}\n values={values}\n onChange={handleChange}\n onClose={handleBlur}\n testID={`${testID}-modal`}\n />\n </Modal>\n </>\n );\n};\n\nexport default Select;\n"],"file":"index.native.js"}
1
+ {"version":3,"sources":["../../../src/atom/select-modal/index.native.tsx"],"names":["ICON_WIDTH","createStyleSheet","theme","StyleSheet","create","container","alignItems","flexDirection","text","flex","color","colors","gray","medium","textAlign","logEvent","eventName","analyticsID","analytics","questionType","id","Select","props","templateContext","styleSheet","setStylesheet","_stylesheet","onBlur","onFocus","onChange","values","placeholder","value","style","textStyle","isFocused","isDisabled","testID","handleFocus","ANALYTICS_EVENT_TYPE","OPEN_SELECT","handleBlur","CLOSE_SELECT","handleChange","_value","selectedItem","find","item","dark"],"mappings":"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","sourcesContent":["import React, {useState, useEffect, useCallback} from 'react';\nimport {View, StyleSheet, ViewStyle, FlexAlignType} from 'react-native';\nimport {NovaCompositionNavigationArrowDown as ArrowDown} from '@coorpacademy/nova-icons';\nimport Modal from 'react-native-modal';\nimport Touchable from '../../hoc/touchable/index.native';\nimport type {ChoiceItem, QuestionType} from '../../types/progression-engine.d';\nimport {Theme} from '../../variables/theme.native';\n\nimport {ANALYTICS_EVENT_TYPE, Analytics} from '../../variables/analytics';\nimport Space from '../space/index.native';\nimport Text from '../text/index.native';\nimport ModalSelect, {OnChangeFunction} from '../../hoc/modal/select/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\n\nexport type Props = {\n analyticsID: string;\n questionType: QuestionType;\n isDisabled?: boolean;\n isFocused?: boolean;\n values: Array<ChoiceItem>;\n value?: string;\n placeholder?: string;\n color?: string;\n onChange: OnChangeFunction;\n onFocus: () => void;\n onBlur: () => void;\n style?: ViewStyle;\n textStyle?: ViewStyle;\n testID?: string;\n};\n\ntype StyleSheetType = {\n container: {\n alignItems: FlexAlignType;\n flexDirection: 'row' | 'column' | 'row-reverse' | 'column-reverse' | undefined;\n };\n text: {\n flex: number;\n color: string;\n textAlign: string;\n };\n};\n\nconst ICON_WIDTH = 15;\n\nconst createStyleSheet = (theme: Theme) =>\n StyleSheet.create({\n container: {\n alignItems: 'center',\n flexDirection: 'row'\n },\n text: {\n flex: 1,\n color: theme.colors.gray.medium,\n textAlign: 'center'\n }\n });\n\nconst logEvent = (\n eventName: string,\n analyticsID: String,\n analytics: Analytics,\n questionType: QuestionType\n) => {\n analytics &&\n analytics.logEvent(eventName, {\n id: analyticsID,\n questionType\n });\n};\n\nconst Select = (props: Props) => {\n const templateContext = useTemplateContext();\n const {theme, analytics} = templateContext;\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n const {\n analyticsID,\n onBlur,\n onFocus,\n onChange,\n values,\n placeholder,\n value,\n style,\n textStyle,\n color,\n questionType,\n isFocused = false,\n isDisabled = false,\n testID = 'select'\n } = props;\n\n const handleFocus = useCallback(() => {\n if (!onFocus) return;\n\n analytics && logEvent(ANALYTICS_EVENT_TYPE.OPEN_SELECT, analyticsID, analytics, questionType);\n onFocus();\n }, [analytics, analyticsID, onFocus, questionType]);\n\n const handleBlur = useCallback(() => {\n if (!onBlur) return;\n\n analytics && logEvent(ANALYTICS_EVENT_TYPE.CLOSE_SELECT, analyticsID, analytics, questionType);\n onBlur();\n }, [analytics, analyticsID, onBlur, questionType]);\n\n const handleChange = useCallback(\n _value => {\n onChange(_value);\n handleBlur();\n },\n [onChange, handleBlur]\n );\n\n if (!styleSheet) {\n return null;\n }\n\n const selectedItem = values.find(item => item.text === value);\n const text = (selectedItem && selectedItem.text) || placeholder || null;\n\n return (\n <>\n <Touchable\n disabled={isDisabled}\n onPress={handleFocus}\n analyticsID={analyticsID}\n testID={`${testID}-input`}\n >\n <View style={[styleSheet.container, style]}>\n <Text style={[styleSheet.text, textStyle, color && {color}]}>{text}</Text>\n <Space type=\"tiny\" />\n <ArrowDown\n color={color || theme.colors.gray.dark}\n height={ICON_WIDTH}\n width={ICON_WIDTH}\n />\n </View>\n </Touchable>\n <Modal\n isVisible={isFocused}\n onSwipeComplete={handleBlur}\n onBackdropPress={handleBlur}\n testID={testID}\n >\n <ModalSelect\n value={value}\n values={values}\n onChange={handleChange}\n onClose={handleBlur}\n testID={`${testID}-modal`}\n />\n </Modal>\n </>\n );\n};\n\nexport default Select;\n"],"file":"index.native.js"}
@@ -30,9 +30,11 @@ const Text = props => {
30
30
  children,
31
31
  style,
32
32
  testID,
33
- numberOfLines
33
+ numberOfLines,
34
+ allowFontScaling = true
34
35
  } = props;
35
36
  return /*#__PURE__*/React.createElement(_reactNative.Text, {
37
+ allowFontScaling: allowFontScaling,
36
38
  style: [styles.text, style],
37
39
  testID: testID,
38
40
  numberOfLines: numberOfLines
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/atom/text/index.native.tsx"],"names":["DEFAULT_STYLE","Platform","select","android","fontFamily","styles","StyleSheet","create","text","Text","props","children","style","testID","numberOfLines"],"mappings":";;;;;AAAA;;AACA;;;;;;;;AAUO,MAAMA,aAAa,gBACrBC,sBAASC,MAAT,CAAgB;AACjBC,EAAAA,OAAO,EAAE;AACPC,IAAAA,UAAU,EAAE;AADL;AADQ,CAAhB,CADqB,CAAnB;;;;AAQP,MAAMC,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,IAAI,eACCR,aADD;AAD2B,CAAlB,CAAf;;AAMA,MAAMS,IAAI,GAAIC,KAAD,IAAkB;AAC7B,QAAM;AAACC,IAAAA,QAAD;AAAWC,IAAAA,KAAX;AAAkBC,IAAAA,MAAlB;AAA0BC,IAAAA;AAA1B,MAA2CJ,KAAjD;AAEA,sBACE,oBAAC,iBAAD;AAAU,IAAA,KAAK,EAAE,CAACL,MAAM,CAACG,IAAR,EAAcI,KAAd,CAAjB;AAAuC,IAAA,MAAM,EAAEC,MAA/C;AAAuD,IAAA,aAAa,EAAEC;AAAtE,KACGH,QADH,CADF;AAKD,CARD;;eAUeF,I","sourcesContent":["import * as React from 'react';\nimport {Text as TextBase, Platform, StyleSheet, ViewStyle} from 'react-native';\n\nexport type Props = {\n // copied from node_modules/react-native/Libraries/Text/TextProps.js\n children: React.ReactNode;\n style?: ViewStyle | ViewStyle[];\n testID?: string;\n numberOfLines?: number;\n};\n\nexport const DEFAULT_STYLE = {\n ...Platform.select({\n android: {\n fontFamily: 'Roboto'\n }\n })\n};\n\nconst styles = StyleSheet.create({\n text: {\n ...DEFAULT_STYLE\n }\n});\n\nconst Text = (props: Props) => {\n const {children, style, testID, numberOfLines} = props;\n\n return (\n <TextBase style={[styles.text, style]} testID={testID} numberOfLines={numberOfLines}>\n {children}\n </TextBase>\n );\n};\n\nexport default Text;\n"],"file":"index.native.js"}
1
+ {"version":3,"sources":["../../../src/atom/text/index.native.tsx"],"names":["DEFAULT_STYLE","Platform","select","android","fontFamily","styles","StyleSheet","create","text","Text","props","children","style","testID","numberOfLines","allowFontScaling"],"mappings":";;;;;AAAA;;AACA;;;;;;;;AAWO,MAAMA,aAAa,gBACrBC,sBAASC,MAAT,CAAgB;AACjBC,EAAAA,OAAO,EAAE;AACPC,IAAAA,UAAU,EAAE;AADL;AADQ,CAAhB,CADqB,CAAnB;;;;AAQP,MAAMC,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,IAAI,eACCR,aADD;AAD2B,CAAlB,CAAf;;AAMA,MAAMS,IAAI,GAAIC,KAAD,IAAkB;AAC7B,QAAM;AAACC,IAAAA,QAAD;AAAWC,IAAAA,KAAX;AAAkBC,IAAAA,MAAlB;AAA0BC,IAAAA,aAA1B;AAAyCC,IAAAA,gBAAgB,GAAG;AAA5D,MAAoEL,KAA1E;AAEA,sBACE,oBAAC,iBAAD;AACE,IAAA,gBAAgB,EAAEK,gBADpB;AAEE,IAAA,KAAK,EAAE,CAACV,MAAM,CAACG,IAAR,EAAcI,KAAd,CAFT;AAGE,IAAA,MAAM,EAAEC,MAHV;AAIE,IAAA,aAAa,EAAEC;AAJjB,KAMGH,QANH,CADF;AAUD,CAbD;;eAeeF,I","sourcesContent":["import * as React from 'react';\nimport {Text as TextBase, Platform, StyleSheet, ViewStyle} from 'react-native';\n\nexport type Props = {\n // copied from node_modules/react-native/Libraries/Text/TextProps.js\n children: React.ReactNode;\n style?: ViewStyle | ViewStyle[];\n testID?: string;\n numberOfLines?: number;\n allowFontScaling?: boolean;\n};\n\nexport const DEFAULT_STYLE = {\n ...Platform.select({\n android: {\n fontFamily: 'Roboto'\n }\n })\n};\n\nconst styles = StyleSheet.create({\n text: {\n ...DEFAULT_STYLE\n }\n});\n\nconst Text = (props: Props) => {\n const {children, style, testID, numberOfLines, allowFontScaling = true} = props;\n\n return (\n <TextBase\n allowFontScaling={allowFontScaling}\n style={[styles.text, style]}\n testID={testID}\n numberOfLines={numberOfLines}\n >\n {children}\n </TextBase>\n );\n};\n\nexport default Text;\n"],"file":"index.native.js"}
@@ -3,6 +3,8 @@
3
3
  exports.__esModule = true;
4
4
  exports.default = void 0;
5
5
 
6
+ var _noop2 = _interopRequireDefault(require("lodash/fp/noop"));
7
+
6
8
  var _react = _interopRequireWildcard(require("react"));
7
9
 
8
10
  var _reactNative = require("react-native");
@@ -13,12 +15,12 @@ var _index = _interopRequireDefault(require("../index.native"));
13
15
 
14
16
  var _index2 = _interopRequireDefault(require("../select-item/index.native"));
15
17
 
16
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
-
18
18
  function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
19
19
 
20
20
  function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
21
21
 
22
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
+
22
24
  const createStyleSheet = theme => _reactNative.StyleSheet.create({
23
25
  content: {
24
26
  paddingHorizontal: 0
@@ -63,10 +65,10 @@ const ModalSelect = props => {
63
65
  theme
64
66
  } = templateContext;
65
67
  const {
66
- value,
68
+ value = '',
67
69
  values,
68
70
  onChange,
69
- onClose,
71
+ onClose = _noop2.default,
70
72
  testID = 'modal-select'
71
73
  } = props;
72
74
  (0, _react.useEffect)(() => {
@@ -75,7 +77,7 @@ const ModalSelect = props => {
75
77
  setStylesheet(_stylesheet);
76
78
  }, [theme]);
77
79
  const renderItem = (0, _react.useMemo)(() => createRenderItem(value, testID, onChange), [value, testID, onChange]);
78
- const renderSeparator = (0, _react.useMemo)(() => createSeparator(styleSheet), [styleSheet]);
80
+ const renderSeparator = (0, _react.useMemo)(() => styleSheet ? createSeparator(styleSheet) : null, [styleSheet]);
79
81
 
80
82
  if (!styleSheet) {
81
83
  return null;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/hoc/modal/select/index.native.tsx"],"names":["createStyleSheet","theme","StyleSheet","create","content","paddingHorizontal","separator","borderTopWidth","borderColor","colors","border","list","width","keyExtractor","item","index","createRenderItem","value","testID","onChange","handleChange","_value","text","createSeparator","styleSheet","ModalSelect","props","templateContext","setStylesheet","values","onClose","_stylesheet","renderItem","renderSeparator"],"mappings":"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","sourcesContent":["import React, {useState, useEffect, useMemo} from 'react';\nimport {View, FlatList, StyleSheet} from 'react-native';\nimport type {Choice} from '../../../types/progression-engine.d';\n\nimport {Theme} from '../../../variables/theme.native';\nimport {useTemplateContext} from '../../../template/app-review/template-context';\n\nimport Modal from '../index.native';\nimport ModalSelectItem from '../select-item/index.native';\n\ntype ChoiceValue = Pick<Choice, 'value'>;\ntype ChoiceItem = Pick<Choice, 'items'>;\nexport type OnChangeFunction = (value: ChoiceValue) => void;\n\nexport type Props = {\n value?: ChoiceValue;\n values: Array<ChoiceItem>;\n onChange: OnChangeFunction;\n onClose?: () => void;\n testID?: string;\n};\n\ntype StyleSheetType = {\n content: {\n paddingHorizontal: number;\n };\n separator: {\n borderTopWidth: number;\n borderColor: string;\n };\n list: {\n width: string;\n };\n};\n\nconst createStyleSheet = (theme: Theme) =>\n StyleSheet.create({\n content: {\n paddingHorizontal: 0\n },\n separator: {\n borderTopWidth: 1,\n borderColor: theme.colors.border\n },\n list: {\n width: '100%'\n }\n });\n\nconst keyExtractor = (item: ChoiceItem, index: number): string => {\n return `modal-select-item-${index + 1}`;\n};\n\nconst createRenderItem = (value: ChoiceValue, testID: String, onChange: OnChangeFunction) => ({\n item,\n index\n}: {\n item: ChoiceItem;\n index: number;\n}) => {\n // eslint-disable-next-line unicorn/consistent-function-scoping\n const handleChange = (_value: ChoiceValue | void) => () => onChange(_value);\n\n return (\n <ModalSelectItem\n onPress={handleChange(item.text)}\n isSelected={value === item.text}\n testID={`${testID}-item-${index + 1}`}\n >\n {item.text}\n </ModalSelectItem>\n );\n};\n\nconst createSeparator = (styleSheet: StyleSheetType) => () => {\n return <View style={styleSheet?.separator} />;\n};\n\nconst ModalSelect = (props: Props) => {\n const templateContext = useTemplateContext();\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n const {theme} = templateContext;\n const {value, values, onChange, onClose, testID = 'modal-select'} = props;\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n const renderItem = useMemo(() => createRenderItem(value, testID, onChange), [\n value,\n testID,\n onChange\n ]);\n const renderSeparator = useMemo(() => createSeparator(styleSheet), [styleSheet]);\n\n if (!styleSheet) {\n return null;\n }\n\n return (\n <Modal onClose={onClose} contentStyle={styleSheet?.content} testID={testID}>\n <FlatList\n data={values}\n renderItem={renderItem}\n keyExtractor={keyExtractor}\n showsVerticalScrollIndicator={false}\n ItemSeparatorComponent={renderSeparator}\n style={styleSheet?.list}\n testID={`${testID}-items`}\n />\n </Modal>\n );\n};\n\nexport default ModalSelect;\n"],"file":"index.native.js"}
1
+ {"version":3,"sources":["../../../../src/hoc/modal/select/index.native.tsx"],"names":["createStyleSheet","theme","StyleSheet","create","content","paddingHorizontal","separator","borderTopWidth","borderColor","colors","border","list","width","keyExtractor","item","index","createRenderItem","value","testID","onChange","handleChange","_value","text","createSeparator","styleSheet","ModalSelect","props","templateContext","setStylesheet","values","onClose","_stylesheet","renderItem","renderSeparator"],"mappings":"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","sourcesContent":["import React, {useState, useEffect, useMemo} from 'react';\nimport {View, FlatList, StyleSheet} from 'react-native';\nimport {noop} from 'lodash/fp';\nimport type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';\n\nimport type {ChoiceItem} from '../../../types/progression-engine.d';\nimport {Theme} from '../../../variables/theme.native';\nimport {useTemplateContext} from '../../../template/app-review/template-context';\n\nimport Modal from '../index.native';\nimport ModalSelectItem from '../select-item/index.native';\n\nexport type OnChangeFunction = (value: string) => void;\n\nexport type Props = {\n value?: string;\n values: Array<ChoiceItem>;\n onChange: OnChangeFunction;\n onClose?: (event: PressEvent) => void;\n testID?: string;\n};\n\ntype StyleSheetType = {\n content: {\n paddingHorizontal: number;\n };\n separator: {\n borderTopWidth: number;\n borderColor: string;\n };\n list: {\n width: string;\n };\n};\n\nconst createStyleSheet = (theme: Theme) =>\n StyleSheet.create({\n content: {\n paddingHorizontal: 0\n },\n separator: {\n borderTopWidth: 1,\n borderColor: theme.colors.border\n },\n list: {\n width: '100%'\n }\n });\n\nconst keyExtractor = (item: ChoiceItem, index: number): string => {\n return `modal-select-item-${index + 1}`;\n};\n\nconst createRenderItem = (value: string, testID: String, onChange: OnChangeFunction) => ({\n item,\n index\n}: {\n item: ChoiceItem;\n index: number;\n}) => {\n // eslint-disable-next-line unicorn/consistent-function-scoping\n const handleChange = (_value: string) => () => onChange(_value);\n\n return (\n <ModalSelectItem\n onPress={handleChange(item.text)}\n isSelected={value === item.text}\n testID={`${testID}-item-${index + 1}`}\n >\n {item.text}\n </ModalSelectItem>\n );\n};\n\nconst createSeparator = (styleSheet: StyleSheetType) => () => {\n return <View style={styleSheet?.separator} />;\n};\n\nconst ModalSelect = (props: Props) => {\n const templateContext = useTemplateContext();\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n const {theme} = templateContext;\n const {value = '', values, onChange, onClose = noop, testID = 'modal-select'} = props;\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n const renderItem = useMemo(() => createRenderItem(value, testID, onChange), [\n value,\n testID,\n onChange\n ]);\n\n const renderSeparator = useMemo(() => (styleSheet ? createSeparator(styleSheet) : null), [\n styleSheet\n ]);\n\n if (!styleSheet) {\n return null;\n }\n\n return (\n <Modal onClose={onClose} contentStyle={styleSheet?.content} testID={testID}>\n <FlatList\n data={values}\n renderItem={renderItem}\n keyExtractor={keyExtractor}\n showsVerticalScrollIndicator={false}\n ItemSeparatorComponent={renderSeparator}\n style={styleSheet?.list}\n testID={`${testID}-items`}\n />\n </Modal>\n );\n};\n\nexport default ModalSelect;\n"],"file":"index.native.js"}
@@ -81,53 +81,60 @@ const MediaView = ({
81
81
 
82
82
  MediaView.propTypes = process.env.NODE_ENV !== "production" ? _propTypes.MediaViewPropTypes : {};
83
83
 
84
- const Answer = props => {
84
+ const Switch = ({
85
+ model,
86
+ help
87
+ }) => {
85
88
  const {
86
- model,
87
- media,
88
- help
89
- } = props;
89
+ type
90
+ } = model;
90
91
 
91
- const buildAnswer = () => {
92
- // (propTypes model.type is properly defined)
93
- // eslint-disable-next-line react/prop-types
94
- const {
95
- type
96
- } = model;
92
+ switch (type) {
93
+ case 'qcmDrag':
94
+ return /*#__PURE__*/_react.default.createElement(_qcmDrag.default, _extends({}, model, {
95
+ help: help
96
+ }));
97
97
 
98
- switch (type) {
99
- case 'qcmDrag':
100
- return /*#__PURE__*/_react.default.createElement(_qcmDrag.default, _extends({}, model, {
101
- help: help
102
- }));
98
+ case 'qcm':
99
+ return /*#__PURE__*/_react.default.createElement(_qcm.default, model);
103
100
 
104
- case 'qcm':
105
- return /*#__PURE__*/_react.default.createElement(_qcm.default, model);
101
+ case 'qcmGraphic':
102
+ return /*#__PURE__*/_react.default.createElement(_qcmGraphic.default, model);
106
103
 
107
- case 'qcmGraphic':
108
- return /*#__PURE__*/_react.default.createElement(_qcmGraphic.default, model);
104
+ case 'freeText':
105
+ return /*#__PURE__*/_react.default.createElement(_freeText.default, model);
109
106
 
110
- case 'freeText':
111
- return /*#__PURE__*/_react.default.createElement(_freeText.default, model);
107
+ case 'dropDown':
108
+ return /*#__PURE__*/_react.default.createElement(_dropDown.default, model);
112
109
 
113
- case 'dropDown':
114
- return /*#__PURE__*/_react.default.createElement(_dropDown.default, model);
110
+ case 'slider':
111
+ return /*#__PURE__*/_react.default.createElement(_questionRange.default, model);
115
112
 
116
- case 'slider':
117
- return /*#__PURE__*/_react.default.createElement(_questionRange.default, model);
113
+ case 'template':
114
+ return /*#__PURE__*/_react.default.createElement(_template.default, model);
115
+ }
116
+ };
118
117
 
119
- case 'template':
120
- return /*#__PURE__*/_react.default.createElement(_template.default, model);
121
- }
122
- };
118
+ Switch.propTypes = process.env.NODE_ENV !== "production" ? {
119
+ model: _propTypes.default.model,
120
+ help: _propTypes.default.help
121
+ } : {};
123
122
 
124
- const answerView = buildAnswer(model);
123
+ const Answer = props => {
124
+ const {
125
+ model,
126
+ media,
127
+ help
128
+ } = props;
125
129
  return /*#__PURE__*/_react.default.createElement("div", {
126
130
  "data-name": "answer",
127
131
  className: _style.default.wrapper
128
132
  }, media ? /*#__PURE__*/_react.default.createElement(MediaView, {
129
133
  media: media
130
- }) : null, answerView);
134
+ }) : null, /*#__PURE__*/_react.default.createElement(Switch, {
135
+ model: model,
136
+ help: help
137
+ }));
131
138
  };
132
139
 
133
140
  Answer.propTypes = process.env.NODE_ENV !== "production" ? _propTypes.default : {};
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/molecule/answer/index.js"],"names":["MediaView","media","videoId","type","childProps","TYPE_IMAGE","style","backgroundImage","url","TYPE_VIDEO","video","TYPE_AUDIO","audio","propTypes","MediaViewPropTypes","Answer","props","model","help","buildAnswer","answerView","wrapper"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,MAAMA,SAAS,GAAG,CAAC;AAACC,EAAAA;AAAD,CAAD,KAAa;AAC7B,QAAM;AAACC,IAAAA,OAAD;AAAUC,IAAAA;AAAV,MAAiCF,KAAvC;AAAA,QAAyBG,UAAzB,iCAAuCH,KAAvC;;AACA,UAAQE,IAAR;AACE,SAAKE,qBAAL;AACE,0BACE;AACE,QAAA,SAAS,EAAEC,eAAML,KADnB;AAEE,QAAA,KAAK,EAAE;AACLM,UAAAA,eAAe,EAAG,OAAMN,KAAK,CAACO,GAAI;AAD7B;AAFT,QADF;;AAQF,SAAKC,qBAAL;AACE,0BACE;AAAK,QAAA,SAAS,EAAEH,eAAMI;AAAtB,sBACE,6BAAC,oBAAD,eAAiB,oBAAK,IAAL,EAAWN,UAAX,CAAjB;AAAyC,QAAA,EAAE,EAAEF,OAA7C;AAAsD,QAAA,MAAM,EAAC,MAA7D;AAAoE,QAAA,KAAK,EAAC;AAA1E,SADF,CADF;;AAKF,SAAKS,qBAAL;AACE,0BACE;AAAK,QAAA,SAAS,EAAEL,eAAMM;AAAtB,sBACE,6BAAC,cAAD,eAAW,oBAAK,IAAL,EAAWR,UAAX,CAAX;AAAmC,QAAA,MAAM,EAAC,MAA1C;AAAiD,QAAA,KAAK,EAAC;AAAvD,SADF,CADF;;AAKF;AACE,aAAO,IAAP;AAvBJ;AAyBD,CA3BD;;AA6BAJ,SAAS,CAACa,SAAV,2CAAsBC,6BAAtB;;AAEA,MAAMC,MAAM,GAAGC,KAAK,IAAI;AACtB,QAAM;AAACC,IAAAA,KAAD;AAAQhB,IAAAA,KAAR;AAAeiB,IAAAA;AAAf,MAAuBF,KAA7B;;AACA,QAAMG,WAAW,GAAG,MAAM;AACxB;AACA;AACA,UAAM;AAAChB,MAAAA;AAAD,QAASc,KAAf;;AAEA,YAAQd,IAAR;AACE,WAAK,SAAL;AACE,4BAAO,6BAAC,gBAAD,eAAac,KAAb;AAAoB,UAAA,IAAI,EAAEC;AAA1B,WAAP;;AACF,WAAK,KAAL;AACE,4BAAO,6BAAC,YAAD,EAASD,KAAT,CAAP;;AACF,WAAK,YAAL;AACE,4BAAO,6BAAC,mBAAD,EAAgBA,KAAhB,CAAP;;AACF,WAAK,UAAL;AACE,4BAAO,6BAAC,iBAAD,EAAcA,KAAd,CAAP;;AACF,WAAK,UAAL;AACE,4BAAO,6BAAC,iBAAD,EAAcA,KAAd,CAAP;;AACF,WAAK,QAAL;AACE,4BAAO,6BAAC,sBAAD,EAAmBA,KAAnB,CAAP;;AACF,WAAK,UAAL;AACE,4BAAO,6BAAC,iBAAD,EAAcA,KAAd,CAAP;AAdJ;AAgBD,GArBD;;AAsBA,QAAMG,UAAU,GAAGD,WAAW,CAACF,KAAD,CAA9B;AAEA,sBACE;AAAK,iBAAU,QAAf;AAAwB,IAAA,SAAS,EAAEX,eAAMe;AAAzC,KACGpB,KAAK,gBAAG,6BAAC,SAAD;AAAW,IAAA,KAAK,EAAEA;AAAlB,IAAH,GAAiC,IADzC,EAEGmB,UAFH,CADF;AAMD,CAhCD;;AAkCAL,MAAM,CAACF,SAAP,2CAAmBA,kBAAnB;eAEeE,M","sourcesContent":["import React from 'react';\nimport {omit} from 'lodash/fp';\nimport VideoPlayer from '../video-player';\nimport DropDown from '../questions/drop-down';\nimport FreeText from '../questions/free-text';\nimport QcmDrag from '../questions/qcm-drag';\nimport Qcm from '../questions/qcm';\nimport QcmGraphic from '../questions/qcm-graphic';\nimport QuestionRange from '../questions/question-range';\nimport Template from '../questions/template';\nimport Audio from '../audio';\nimport style from './style.css';\nimport propTypes, {MediaViewPropTypes, TYPE_AUDIO, TYPE_IMAGE, TYPE_VIDEO} from './prop-types';\n\nconst MediaView = ({media}) => {\n const {videoId, type, ...childProps} = media;\n switch (type) {\n case TYPE_IMAGE:\n return (\n <div\n className={style.media}\n style={{\n backgroundImage: `url(${media.url})`\n }}\n />\n );\n case TYPE_VIDEO:\n return (\n <div className={style.video}>\n <VideoPlayer {...omit('id', childProps)} id={videoId} height=\"100%\" width=\"100%\" />\n </div>\n );\n case TYPE_AUDIO:\n return (\n <div className={style.audio}>\n <Audio {...omit('id', childProps)} height=\"100%\" width=\"100%\" />\n </div>\n );\n default:\n return null;\n }\n};\n\nMediaView.propTypes = MediaViewPropTypes;\n\nconst Answer = props => {\n const {model, media, help} = props;\n const buildAnswer = () => {\n // (propTypes model.type is properly defined)\n // eslint-disable-next-line react/prop-types\n const {type} = model;\n\n switch (type) {\n case 'qcmDrag':\n return <QcmDrag {...model} help={help} />;\n case 'qcm':\n return <Qcm {...model} />;\n case 'qcmGraphic':\n return <QcmGraphic {...model} />;\n case 'freeText':\n return <FreeText {...model} />;\n case 'dropDown':\n return <DropDown {...model} />;\n case 'slider':\n return <QuestionRange {...model} />;\n case 'template':\n return <Template {...model} />;\n }\n };\n const answerView = buildAnswer(model);\n\n return (\n <div data-name=\"answer\" className={style.wrapper}>\n {media ? <MediaView media={media} /> : null}\n {answerView}\n </div>\n );\n};\n\nAnswer.propTypes = propTypes;\n\nexport default Answer;\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../src/molecule/answer/index.js"],"names":["MediaView","media","videoId","type","childProps","TYPE_IMAGE","style","backgroundImage","url","TYPE_VIDEO","video","TYPE_AUDIO","audio","propTypes","MediaViewPropTypes","Switch","model","help","Answer","props","wrapper"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,MAAMA,SAAS,GAAG,CAAC;AAACC,EAAAA;AAAD,CAAD,KAAa;AAC7B,QAAM;AAACC,IAAAA,OAAD;AAAUC,IAAAA;AAAV,MAAiCF,KAAvC;AAAA,QAAyBG,UAAzB,iCAAuCH,KAAvC;;AACA,UAAQE,IAAR;AACE,SAAKE,qBAAL;AACE,0BACE;AACE,QAAA,SAAS,EAAEC,eAAML,KADnB;AAEE,QAAA,KAAK,EAAE;AACLM,UAAAA,eAAe,EAAG,OAAMN,KAAK,CAACO,GAAI;AAD7B;AAFT,QADF;;AAQF,SAAKC,qBAAL;AACE,0BACE;AAAK,QAAA,SAAS,EAAEH,eAAMI;AAAtB,sBACE,6BAAC,oBAAD,eAAiB,oBAAK,IAAL,EAAWN,UAAX,CAAjB;AAAyC,QAAA,EAAE,EAAEF,OAA7C;AAAsD,QAAA,MAAM,EAAC,MAA7D;AAAoE,QAAA,KAAK,EAAC;AAA1E,SADF,CADF;;AAKF,SAAKS,qBAAL;AACE,0BACE;AAAK,QAAA,SAAS,EAAEL,eAAMM;AAAtB,sBACE,6BAAC,cAAD,eAAW,oBAAK,IAAL,EAAWR,UAAX,CAAX;AAAmC,QAAA,MAAM,EAAC,MAA1C;AAAiD,QAAA,KAAK,EAAC;AAAvD,SADF,CADF;;AAKF;AACE,aAAO,IAAP;AAvBJ;AAyBD,CA3BD;;AA6BAJ,SAAS,CAACa,SAAV,2CAAsBC,6BAAtB;;AAEA,MAAMC,MAAM,GAAG,CAAC;AAACC,EAAAA,KAAD;AAAQC,EAAAA;AAAR,CAAD,KAAmB;AAChC,QAAM;AAACd,IAAAA;AAAD,MAASa,KAAf;;AAEA,UAAQb,IAAR;AACE,SAAK,SAAL;AACE,0BAAO,6BAAC,gBAAD,eAAaa,KAAb;AAAoB,QAAA,IAAI,EAAEC;AAA1B,SAAP;;AACF,SAAK,KAAL;AACE,0BAAO,6BAAC,YAAD,EAASD,KAAT,CAAP;;AACF,SAAK,YAAL;AACE,0BAAO,6BAAC,mBAAD,EAAgBA,KAAhB,CAAP;;AACF,SAAK,UAAL;AACE,0BAAO,6BAAC,iBAAD,EAAcA,KAAd,CAAP;;AACF,SAAK,UAAL;AACE,0BAAO,6BAAC,iBAAD,EAAcA,KAAd,CAAP;;AACF,SAAK,QAAL;AACE,0BAAO,6BAAC,sBAAD,EAAmBA,KAAnB,CAAP;;AACF,SAAK,UAAL;AACE,0BAAO,6BAAC,iBAAD,EAAcA,KAAd,CAAP;AAdJ;AAgBD,CAnBD;;AAqBAD,MAAM,CAACF,SAAP,2CAAmB;AACjBG,EAAAA,KAAK,EAAEH,mBAAUG,KADA;AAEjBC,EAAAA,IAAI,EAAEJ,mBAAUI;AAFC,CAAnB;;AAKA,MAAMC,MAAM,GAAGC,KAAK,IAAI;AACtB,QAAM;AAACH,IAAAA,KAAD;AAAQf,IAAAA,KAAR;AAAegB,IAAAA;AAAf,MAAuBE,KAA7B;AAEA,sBACE;AAAK,iBAAU,QAAf;AAAwB,IAAA,SAAS,EAAEb,eAAMc;AAAzC,KACGnB,KAAK,gBAAG,6BAAC,SAAD;AAAW,IAAA,KAAK,EAAEA;AAAlB,IAAH,GAAiC,IADzC,eAEE,6BAAC,MAAD;AAAQ,IAAA,KAAK,EAAEe,KAAf;AAAsB,IAAA,IAAI,EAAEC;AAA5B,IAFF,CADF;AAMD,CATD;;AAWAC,MAAM,CAACL,SAAP,2CAAmBA,kBAAnB;eAEeK,M","sourcesContent":["import React from 'react';\nimport {omit} from 'lodash/fp';\nimport VideoPlayer from '../video-player';\nimport DropDown from '../questions/drop-down';\nimport FreeText from '../questions/free-text';\nimport QcmDrag from '../questions/qcm-drag';\nimport Qcm from '../questions/qcm';\nimport QcmGraphic from '../questions/qcm-graphic';\nimport QuestionRange from '../questions/question-range';\nimport Template from '../questions/template';\nimport Audio from '../audio';\nimport style from './style.css';\nimport propTypes, {MediaViewPropTypes, TYPE_AUDIO, TYPE_IMAGE, TYPE_VIDEO} from './prop-types';\n\nconst MediaView = ({media}) => {\n const {videoId, type, ...childProps} = media;\n switch (type) {\n case TYPE_IMAGE:\n return (\n <div\n className={style.media}\n style={{\n backgroundImage: `url(${media.url})`\n }}\n />\n );\n case TYPE_VIDEO:\n return (\n <div className={style.video}>\n <VideoPlayer {...omit('id', childProps)} id={videoId} height=\"100%\" width=\"100%\" />\n </div>\n );\n case TYPE_AUDIO:\n return (\n <div className={style.audio}>\n <Audio {...omit('id', childProps)} height=\"100%\" width=\"100%\" />\n </div>\n );\n default:\n return null;\n }\n};\n\nMediaView.propTypes = MediaViewPropTypes;\n\nconst Switch = ({model, help}) => {\n const {type} = model;\n\n switch (type) {\n case 'qcmDrag':\n return <QcmDrag {...model} help={help} />;\n case 'qcm':\n return <Qcm {...model} />;\n case 'qcmGraphic':\n return <QcmGraphic {...model} />;\n case 'freeText':\n return <FreeText {...model} />;\n case 'dropDown':\n return <DropDown {...model} />;\n case 'slider':\n return <QuestionRange {...model} />;\n case 'template':\n return <Template {...model} />;\n }\n};\n\nSwitch.propTypes = {\n model: propTypes.model,\n help: propTypes.help\n};\n\nconst Answer = props => {\n const {model, media, help} = props;\n\n return (\n <div data-name=\"answer\" className={style.wrapper}>\n {media ? <MediaView media={media} /> : null}\n <Switch model={model} help={help} />\n </div>\n );\n};\n\nAnswer.propTypes = propTypes;\n\nexport default Answer;\n"],"file":"index.js"}