@coorpacademy/components 10.22.8 → 10.22.11
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.
- package/README.md +1 -0
- package/es/atom/choice/index.native.js +6 -3
- package/es/atom/choice/index.native.js.map +1 -1
- package/es/molecule/cm-popin/index.js +4 -2
- package/es/molecule/cm-popin/index.js.map +1 -1
- package/es/molecule/questions/mobile/draggable/index.native.js +144 -0
- package/es/molecule/questions/mobile/draggable/index.native.js.map +1 -0
- package/es/molecule/questions/mobile/slide/index.native.js +119 -0
- package/es/molecule/questions/mobile/slide/index.native.js.map +1 -0
- package/es/molecule/review-correction-popin/prop-types.js +0 -1
- package/es/molecule/review-correction-popin/prop-types.js.map +1 -1
- package/es/organism/review-congrats/style.css +1 -1
- package/es/organism/review-slide/index.js +194 -0
- package/es/organism/review-slide/index.js.map +1 -0
- package/es/organism/review-slide/prop-types.js +39 -0
- package/es/organism/review-slide/prop-types.js.map +1 -0
- package/es/organism/review-slide/style.css +173 -0
- package/es/organism/review-stacked-slides/index.js +74 -0
- package/es/organism/review-stacked-slides/index.js.map +1 -0
- package/es/organism/review-stacked-slides/prop-types.js +15 -0
- package/es/organism/review-stacked-slides/prop-types.js.map +1 -0
- package/es/organism/review-stacked-slides/style.css +174 -0
- package/es/template/app-review/index.js +7 -8
- package/es/template/app-review/index.js.map +1 -1
- package/es/template/app-review/index.native.js +6 -10
- package/es/template/app-review/index.native.js.map +1 -1
- package/es/template/app-review/player/index.js +36 -0
- package/es/template/app-review/player/index.js.map +1 -0
- package/es/template/app-review/{slides → player}/index.native.js +15 -13
- package/es/template/app-review/player/index.native.js.map +1 -0
- package/es/template/app-review/player/prop-types.js +12 -0
- package/es/template/app-review/player/prop-types.js.map +1 -0
- package/es/template/app-review/player/style.css +41 -0
- package/es/template/app-review/prop-types.js +3 -3
- package/es/template/app-review/prop-types.js.map +1 -1
- package/es/types/styles.d.js +2 -0
- package/es/types/styles.d.js.map +1 -0
- package/es/variables/shadow.js +13 -0
- package/es/variables/shadow.js.map +1 -0
- package/lib/atom/choice/index.native.js +6 -3
- package/lib/atom/choice/index.native.js.map +1 -1
- package/lib/molecule/cm-popin/index.js +4 -2
- package/lib/molecule/cm-popin/index.js.map +1 -1
- package/lib/molecule/questions/mobile/draggable/index.native.js +161 -0
- package/lib/molecule/questions/mobile/draggable/index.native.js.map +1 -0
- package/lib/molecule/questions/mobile/slide/index.native.js +136 -0
- package/lib/molecule/questions/mobile/slide/index.native.js.map +1 -0
- package/lib/molecule/review-correction-popin/prop-types.js +0 -1
- package/lib/molecule/review-correction-popin/prop-types.js.map +1 -1
- package/lib/organism/review-congrats/style.css +1 -1
- package/lib/organism/review-slide/index.js +217 -0
- package/lib/organism/review-slide/index.js.map +1 -0
- package/lib/organism/review-slide/prop-types.js +52 -0
- package/lib/organism/review-slide/prop-types.js.map +1 -0
- package/lib/organism/review-slide/style.css +173 -0
- package/lib/organism/review-stacked-slides/index.js +90 -0
- package/lib/organism/review-stacked-slides/index.js.map +1 -0
- package/lib/organism/review-stacked-slides/prop-types.js +29 -0
- package/lib/organism/review-stacked-slides/prop-types.js.map +1 -0
- package/lib/organism/review-stacked-slides/style.css +174 -0
- package/lib/template/app-review/index.js +6 -8
- package/lib/template/app-review/index.js.map +1 -1
- package/lib/template/app-review/index.native.js +6 -11
- package/lib/template/app-review/index.native.js.map +1 -1
- package/lib/template/app-review/player/index.js +51 -0
- package/lib/template/app-review/player/index.js.map +1 -0
- package/lib/template/app-review/{slides → player}/index.native.js +14 -12
- package/lib/template/app-review/player/index.native.js.map +1 -0
- package/lib/template/app-review/player/prop-types.js +25 -0
- package/lib/template/app-review/player/prop-types.js.map +1 -0
- package/lib/template/app-review/player/style.css +41 -0
- package/lib/template/app-review/prop-types.js +3 -3
- package/lib/template/app-review/prop-types.js.map +1 -1
- package/lib/types/styles.d.js +2 -0
- package/lib/types/styles.d.js.map +1 -0
- package/lib/variables/shadow.js +18 -0
- package/lib/variables/shadow.js.map +1 -0
- package/package.json +3 -2
- package/es/template/app-review/slides/index.js +0 -352
- package/es/template/app-review/slides/index.js.map +0 -1
- package/es/template/app-review/slides/index.native.js.map +0 -1
- package/es/template/app-review/slides/prop-types.js +0 -111
- package/es/template/app-review/slides/prop-types.js.map +0 -1
- package/es/template/app-review/slides/style.css +0 -409
- package/lib/template/app-review/slides/index.js +0 -385
- package/lib/template/app-review/slides/index.js.map +0 -1
- package/lib/template/app-review/slides/index.native.js.map +0 -1
- package/lib/template/app-review/slides/prop-types.js +0 -131
- package/lib/template/app-review/slides/prop-types.js.map +0 -1
- package/lib/template/app-review/slides/style.css +0 -409
|
@@ -0,0 +1,217 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
|
|
6
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
7
|
+
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
|
|
10
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
|
+
|
|
12
|
+
var _get = _interopRequireDefault(require("lodash/fp/get"));
|
|
13
|
+
|
|
14
|
+
var _getOr = _interopRequireDefault(require("lodash/fp/getOr"));
|
|
15
|
+
|
|
16
|
+
var _answer = _interopRequireDefault(require("../../molecule/answer"));
|
|
17
|
+
|
|
18
|
+
var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
|
|
19
|
+
|
|
20
|
+
var _loader = _interopRequireDefault(require("../../atom/loader"));
|
|
21
|
+
|
|
22
|
+
var _provider = _interopRequireDefault(require("../../atom/provider"));
|
|
23
|
+
|
|
24
|
+
var _reviewCorrectionPopin = _interopRequireDefault(require("../../molecule/review-correction-popin"));
|
|
25
|
+
|
|
26
|
+
var _propTypes2 = _interopRequireDefault(require("./prop-types"));
|
|
27
|
+
|
|
28
|
+
var _style = _interopRequireDefault(require("./style.css"));
|
|
29
|
+
|
|
30
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
31
|
+
|
|
32
|
+
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
|
|
33
|
+
|
|
34
|
+
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; }
|
|
35
|
+
|
|
36
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
37
|
+
|
|
38
|
+
const CorrectionPopin = ({
|
|
39
|
+
correctionPopinProps,
|
|
40
|
+
slideIndex,
|
|
41
|
+
showCorrectionPopin,
|
|
42
|
+
animateCorrectionPopin
|
|
43
|
+
}) => {
|
|
44
|
+
if (!showCorrectionPopin) return null;
|
|
45
|
+
const klf = (0, _getOr.default)({}, 'klf', correctionPopinProps);
|
|
46
|
+
const information = (0, _getOr.default)({
|
|
47
|
+
label: '',
|
|
48
|
+
message: ''
|
|
49
|
+
}, 'information', correctionPopinProps);
|
|
50
|
+
const next = (0, _get.default)('next', correctionPopinProps);
|
|
51
|
+
const _correctionPopinProps = {
|
|
52
|
+
next: {
|
|
53
|
+
onClick: () => {
|
|
54
|
+
// eslint-disable-next-line no-console
|
|
55
|
+
console.log('Next Slide');
|
|
56
|
+
},
|
|
57
|
+
label: next && next.label,
|
|
58
|
+
'data-name': `next-question-button-${slideIndex}`,
|
|
59
|
+
'aria-label': next && next['aria-label']
|
|
60
|
+
},
|
|
61
|
+
klf,
|
|
62
|
+
information,
|
|
63
|
+
type: correctionPopinProps.type,
|
|
64
|
+
resultLabel: correctionPopinProps.resultLabel
|
|
65
|
+
};
|
|
66
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
67
|
+
className: (0, _classnames.default)(_style.default.correctionPopinWrapper, animateCorrectionPopin ? _style.default.popinAnimation : null)
|
|
68
|
+
}, /*#__PURE__*/_react.default.createElement(_reviewCorrectionPopin.default, _correctionPopinProps));
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
CorrectionPopin.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
72
|
+
slideIndex: _propTypes.default.string,
|
|
73
|
+
showCorrectionPopin: _propTypes.default.bool,
|
|
74
|
+
animateCorrectionPopin: _propTypes.default.bool,
|
|
75
|
+
correctionPopinProps: _propTypes2.default.correctionPopinProps
|
|
76
|
+
} : {};
|
|
77
|
+
|
|
78
|
+
const ValidateButton = ({
|
|
79
|
+
slideIndex,
|
|
80
|
+
validateButton,
|
|
81
|
+
primarySkinColor
|
|
82
|
+
}) => {
|
|
83
|
+
const {
|
|
84
|
+
label,
|
|
85
|
+
onClick,
|
|
86
|
+
disabled
|
|
87
|
+
} = validateButton;
|
|
88
|
+
const validateButtonProps = {
|
|
89
|
+
type: 'primary',
|
|
90
|
+
label,
|
|
91
|
+
'aria-label': label,
|
|
92
|
+
'data-name': `slide-validate-button-${slideIndex}`,
|
|
93
|
+
onClick,
|
|
94
|
+
disabled,
|
|
95
|
+
className: _style.default.validateButton,
|
|
96
|
+
customStyle: {
|
|
97
|
+
backgroundColor: primarySkinColor
|
|
98
|
+
}
|
|
99
|
+
/*
|
|
100
|
+
slide validation action, this will trigger the correction popin
|
|
101
|
+
(with the useEffect that fires the dispatchers, if there is a nextContent content,
|
|
102
|
+
it will be loaded here) but will not trigger any animations unless the endReview
|
|
103
|
+
signal is received (all slide will disappear, also fired in a useEffect),
|
|
104
|
+
if it is the last slide and the content needs to be different, then that update will
|
|
105
|
+
be handled on the next slide logic but the content will be carried from here.
|
|
106
|
+
onClick: async () => {
|
|
107
|
+
// endReview based on nextContent ref exit node values: 'successExitNode' : 'failExitNode'
|
|
108
|
+
await validateSlide();
|
|
109
|
+
},
|
|
110
|
+
*/
|
|
111
|
+
|
|
112
|
+
};
|
|
113
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
114
|
+
key: "button-wrapper",
|
|
115
|
+
className: _style.default.validateButtonWrapper
|
|
116
|
+
}, /*#__PURE__*/_react.default.createElement(_buttonLink.default, validateButtonProps));
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
ValidateButton.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
120
|
+
slideIndex: _propTypes.default.string,
|
|
121
|
+
validateButton: _propTypes2.default.validateButton,
|
|
122
|
+
primarySkinColor: _propTypes.default.string
|
|
123
|
+
} : {};
|
|
124
|
+
|
|
125
|
+
const QuestionContainer = props => {
|
|
126
|
+
const {
|
|
127
|
+
answerUI,
|
|
128
|
+
questionText,
|
|
129
|
+
questionOrigin
|
|
130
|
+
} = props;
|
|
131
|
+
if (!answerUI || !questionText) return null;
|
|
132
|
+
const answerProps = (0, _get.default)(['model', 'choices'], answerUI) ?
|
|
133
|
+
/* istanbul ignore next */
|
|
134
|
+
_extends(_extends({}, answerUI), {}, {
|
|
135
|
+
model: _extends(_extends({}, answerUI.model), {}, {
|
|
136
|
+
answers: answerUI.model.choices
|
|
137
|
+
})
|
|
138
|
+
}) : answerUI;
|
|
139
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
140
|
+
key: "content-container",
|
|
141
|
+
className: _style.default.slideContentContainer
|
|
142
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
143
|
+
key: "from-course",
|
|
144
|
+
className: _style.default.questionOrigin
|
|
145
|
+
}, questionOrigin), /*#__PURE__*/_react.default.createElement("div", {
|
|
146
|
+
key: "title",
|
|
147
|
+
className: _style.default.question
|
|
148
|
+
}, questionText), /*#__PURE__*/_react.default.createElement("div", {
|
|
149
|
+
key: "help",
|
|
150
|
+
className: _style.default.help
|
|
151
|
+
}, (0, _get.default)('help', answerUI)), /*#__PURE__*/_react.default.createElement("div", {
|
|
152
|
+
key: "answer-container",
|
|
153
|
+
className: _style.default.answerContainer
|
|
154
|
+
}, /*#__PURE__*/_react.default.createElement(_answer.default, _extends({}, answerProps, {
|
|
155
|
+
key: "answer"
|
|
156
|
+
}))));
|
|
157
|
+
};
|
|
158
|
+
|
|
159
|
+
QuestionContainer.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
160
|
+
answerUI: _propTypes.default.shape(_propTypes2.default.slide.answerUI),
|
|
161
|
+
questionText: _propTypes.default.string,
|
|
162
|
+
questionOrigin: _propTypes.default.string
|
|
163
|
+
} : {};
|
|
164
|
+
|
|
165
|
+
const Slide = (props, context) => {
|
|
166
|
+
const {
|
|
167
|
+
slide,
|
|
168
|
+
validateButton,
|
|
169
|
+
correctionPopinProps,
|
|
170
|
+
slideIndex = '0'
|
|
171
|
+
} = props;
|
|
172
|
+
const {
|
|
173
|
+
skin
|
|
174
|
+
} = context;
|
|
175
|
+
const primarySkinColor = (0, _react.useMemo)(() => (0, _getOr.default)('#00B0FF', 'common.primary', skin), [skin]);
|
|
176
|
+
const {
|
|
177
|
+
loading,
|
|
178
|
+
loadingAriaLabel,
|
|
179
|
+
parentContentTitle,
|
|
180
|
+
questionText,
|
|
181
|
+
answerUI,
|
|
182
|
+
showCorrectionPopin,
|
|
183
|
+
animateCorrectionPopin
|
|
184
|
+
} = slide;
|
|
185
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
186
|
+
"data-name": `slide-container`,
|
|
187
|
+
className: _style.default.slide
|
|
188
|
+
}, loading ? /*#__PURE__*/_react.default.createElement(_loader.default, {
|
|
189
|
+
className: _style.default.loader,
|
|
190
|
+
theme: "default",
|
|
191
|
+
"aria-label": loadingAriaLabel
|
|
192
|
+
}) : [/*#__PURE__*/_react.default.createElement(QuestionContainer, {
|
|
193
|
+
questionOrigin: parentContentTitle,
|
|
194
|
+
questionText: questionText,
|
|
195
|
+
answerUI: answerUI,
|
|
196
|
+
key: "question-container"
|
|
197
|
+
}), /*#__PURE__*/_react.default.createElement(ValidateButton, {
|
|
198
|
+
slideIndex: slideIndex,
|
|
199
|
+
validateButton: validateButton,
|
|
200
|
+
primarySkinColor: primarySkinColor,
|
|
201
|
+
key: "validate-button"
|
|
202
|
+
}), /*#__PURE__*/_react.default.createElement(CorrectionPopin, {
|
|
203
|
+
correctionPopinProps: correctionPopinProps,
|
|
204
|
+
slideIndex: slideIndex,
|
|
205
|
+
showCorrectionPopin: showCorrectionPopin,
|
|
206
|
+
animateCorrectionPopin: animateCorrectionPopin,
|
|
207
|
+
key: "correction-popin"
|
|
208
|
+
})]);
|
|
209
|
+
};
|
|
210
|
+
|
|
211
|
+
Slide.propTypes = process.env.NODE_ENV !== "production" ? _propTypes2.default : {};
|
|
212
|
+
Slide.contextTypes = {
|
|
213
|
+
skin: _provider.default.childContextTypes.skin
|
|
214
|
+
};
|
|
215
|
+
var _default = Slide;
|
|
216
|
+
exports.default = _default;
|
|
217
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/organism/review-slide/index.js"],"names":["CorrectionPopin","correctionPopinProps","slideIndex","showCorrectionPopin","animateCorrectionPopin","klf","information","label","message","next","_correctionPopinProps","onClick","console","log","type","resultLabel","style","correctionPopinWrapper","popinAnimation","propTypes","PropTypes","string","bool","ValidateButton","validateButton","primarySkinColor","disabled","validateButtonProps","className","customStyle","backgroundColor","validateButtonWrapper","QuestionContainer","props","answerUI","questionText","questionOrigin","answerProps","model","answers","choices","slideContentContainer","question","help","answerContainer","shape","slide","Slide","context","skin","loading","loadingAriaLabel","parentContentTitle","loader","contextTypes","Provider","childContextTypes"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport Answer from '../../molecule/answer';\nimport ButtonLink from '../../atom/button-link';\nimport Loader from '../../atom/loader';\nimport Provider from '../../atom/provider';\nimport ReviewCorrectionPopin from '../../molecule/review-correction-popin';\nimport propTypes from './prop-types';\nimport style from './style.css';\n\nconst CorrectionPopin = ({\n correctionPopinProps,\n slideIndex,\n showCorrectionPopin,\n animateCorrectionPopin\n}) => {\n if (!showCorrectionPopin) return null;\n\n const klf = getOr({}, 'klf', correctionPopinProps);\n const information = getOr({label: '', message: ''}, 'information', correctionPopinProps);\n const next = get('next', correctionPopinProps);\n\n const _correctionPopinProps = {\n next: {\n onClick: () => {\n // eslint-disable-next-line no-console\n console.log('Next Slide');\n },\n label: next && next.label,\n 'data-name': `next-question-button-${slideIndex}`,\n 'aria-label': next && next['aria-label']\n },\n klf,\n information,\n type: correctionPopinProps.type,\n resultLabel: correctionPopinProps.resultLabel\n };\n\n return (\n <div\n className={classnames(\n style.correctionPopinWrapper,\n animateCorrectionPopin ? style.popinAnimation : null\n )}\n >\n <ReviewCorrectionPopin {..._correctionPopinProps} />\n </div>\n );\n};\n\nCorrectionPopin.propTypes = {\n slideIndex: PropTypes.string,\n showCorrectionPopin: PropTypes.bool,\n animateCorrectionPopin: PropTypes.bool,\n correctionPopinProps: propTypes.correctionPopinProps\n};\n\nconst ValidateButton = ({slideIndex, validateButton, primarySkinColor}) => {\n const {label, onClick, disabled} = validateButton;\n const validateButtonProps = {\n type: 'primary',\n label,\n 'aria-label': label,\n 'data-name': `slide-validate-button-${slideIndex}`,\n onClick,\n disabled,\n className: style.validateButton,\n customStyle: {\n backgroundColor: primarySkinColor\n }\n /*\n slide validation action, this will trigger the correction popin\n (with the useEffect that fires the dispatchers, if there is a nextContent content,\n it will be loaded here) but will not trigger any animations unless the endReview\n signal is received (all slide will disappear, also fired in a useEffect),\n\n if it is the last slide and the content needs to be different, then that update will\n be handled on the next slide logic but the content will be carried from here.\n onClick: async () => {\n // endReview based on nextContent ref exit node values: 'successExitNode' : 'failExitNode'\n await validateSlide();\n },\n */\n };\n\n return (\n <div key=\"button-wrapper\" className={style.validateButtonWrapper}>\n <ButtonLink {...validateButtonProps} />\n </div>\n );\n};\n\nValidateButton.propTypes = {\n slideIndex: PropTypes.string,\n validateButton: propTypes.validateButton,\n primarySkinColor: PropTypes.string\n};\n\nconst QuestionContainer = props => {\n const {answerUI, questionText, questionOrigin} = props;\n if (!answerUI || !questionText) return null;\n\n const answerProps = get(['model', 'choices'], answerUI)\n ? /* istanbul ignore next */ {\n ...answerUI,\n model: {\n ...answerUI.model,\n answers: answerUI.model.choices\n }\n }\n : answerUI;\n\n return (\n <div key=\"content-container\" className={style.slideContentContainer}>\n <div key=\"from-course\" className={style.questionOrigin}>\n {questionOrigin}\n </div>\n <div key=\"title\" className={style.question}>\n {questionText}\n </div>\n <div key=\"help\" className={style.help}>\n {get('help', answerUI)}\n </div>\n <div key=\"answer-container\" className={style.answerContainer}>\n <Answer {...answerProps} key=\"answer\" />\n </div>\n </div>\n );\n};\n\nQuestionContainer.propTypes = {\n answerUI: PropTypes.shape(propTypes.slide.answerUI),\n questionText: PropTypes.string,\n questionOrigin: PropTypes.string\n};\n\nconst Slide = (props, context) => {\n const {slide, validateButton, correctionPopinProps, slideIndex = '0'} = props;\n\n const {skin} = context;\n const primarySkinColor = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n const {\n loading,\n loadingAriaLabel,\n parentContentTitle,\n questionText,\n answerUI,\n showCorrectionPopin,\n animateCorrectionPopin\n } = slide;\n\n return (\n <div data-name={`slide-container`} className={style.slide}>\n {loading ? (\n <Loader className={style.loader} theme=\"default\" aria-label={loadingAriaLabel} />\n ) : (\n [\n <QuestionContainer\n questionOrigin={parentContentTitle}\n questionText={questionText}\n answerUI={answerUI}\n key=\"question-container\"\n />,\n <ValidateButton\n slideIndex={slideIndex}\n validateButton={validateButton}\n primarySkinColor={primarySkinColor}\n key=\"validate-button\"\n />,\n <CorrectionPopin\n correctionPopinProps={correctionPopinProps}\n slideIndex={slideIndex}\n showCorrectionPopin={showCorrectionPopin}\n animateCorrectionPopin={animateCorrectionPopin}\n key=\"correction-popin\"\n />\n ]\n )}\n </div>\n );\n};\n\nSlide.propTypes = propTypes;\n\nSlide.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nexport default Slide;\n"],"file":"index.js"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = exports.SlideProp = void 0;
|
|
5
|
+
|
|
6
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
7
|
+
|
|
8
|
+
var _propTypes2 = _interopRequireDefault(require("../../molecule/review-correction-popin/prop-types"));
|
|
9
|
+
|
|
10
|
+
var _propTypes3 = _interopRequireDefault(require("../../molecule/answer/prop-types"));
|
|
11
|
+
|
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
+
|
|
14
|
+
const SlideProp = _propTypes.default.shape({
|
|
15
|
+
hidden: _propTypes.default.bool,
|
|
16
|
+
position: _propTypes.default.number,
|
|
17
|
+
loading: _propTypes.default.bool,
|
|
18
|
+
loadingAriaLabel: _propTypes.default.string,
|
|
19
|
+
animationType: _propTypes.default.string,
|
|
20
|
+
// 'unstack' | 'restack'
|
|
21
|
+
isCorrect: _propTypes.default.bool,
|
|
22
|
+
animateCorrectionPopin: _propTypes.default.bool,
|
|
23
|
+
showCorrectionPopin: _propTypes.default.bool,
|
|
24
|
+
parentContentTitle: _propTypes.default.string,
|
|
25
|
+
questionText: _propTypes.default.string,
|
|
26
|
+
answerUI: _propTypes.default.shape(_propTypes3.default)
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
exports.SlideProp = SlideProp;
|
|
30
|
+
var _default = {
|
|
31
|
+
slideIndex: _propTypes.default.string,
|
|
32
|
+
slide: SlideProp,
|
|
33
|
+
validateButton: _propTypes.default.shape({
|
|
34
|
+
label: _propTypes.default.string.isRequired,
|
|
35
|
+
onClick: _propTypes.default.func.isRequired,
|
|
36
|
+
disabled: _propTypes.default.bool
|
|
37
|
+
}),
|
|
38
|
+
correctionPopinProps: _propTypes.default.shape({
|
|
39
|
+
klf: _propTypes2.default.klf,
|
|
40
|
+
information: _propTypes2.default.information,
|
|
41
|
+
next: _propTypes.default.shape({
|
|
42
|
+
label: _propTypes.default.string,
|
|
43
|
+
'aria-label': _propTypes.default.string // Pourquoi le onClick du next n'est pas ici !
|
|
44
|
+
// updateSlidesOnNext: PropTypes.func.isRequired ???
|
|
45
|
+
|
|
46
|
+
}),
|
|
47
|
+
resultLabel: _propTypes2.default.resultLabel,
|
|
48
|
+
type: _propTypes2.default.type
|
|
49
|
+
})
|
|
50
|
+
};
|
|
51
|
+
exports.default = _default;
|
|
52
|
+
//# sourceMappingURL=prop-types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/organism/review-slide/prop-types.js"],"names":["SlideProp","PropTypes","shape","hidden","bool","position","number","loading","loadingAriaLabel","string","animationType","isCorrect","animateCorrectionPopin","showCorrectionPopin","parentContentTitle","questionText","answerUI","AnswerPropTypes","slideIndex","slide","validateButton","label","isRequired","onClick","func","disabled","correctionPopinProps","klf","ReviewCorrectionPopinPropTypes","information","next","resultLabel","type"],"mappings":";;;;;AAAA;;AACA;;AACA;;;;AAEO,MAAMA,SAAS,GAAGC,mBAAUC,KAAV,CAAgB;AACvCC,EAAAA,MAAM,EAAEF,mBAAUG,IADqB;AAEvCC,EAAAA,QAAQ,EAAEJ,mBAAUK,MAFmB;AAGvCC,EAAAA,OAAO,EAAEN,mBAAUG,IAHoB;AAIvCI,EAAAA,gBAAgB,EAAEP,mBAAUQ,MAJW;AAKvCC,EAAAA,aAAa,EAAET,mBAAUQ,MALc;AAKN;AACjCE,EAAAA,SAAS,EAAEV,mBAAUG,IANkB;AAOvCQ,EAAAA,sBAAsB,EAAEX,mBAAUG,IAPK;AAQvCS,EAAAA,mBAAmB,EAAEZ,mBAAUG,IARQ;AASvCU,EAAAA,kBAAkB,EAAEb,mBAAUQ,MATS;AAUvCM,EAAAA,YAAY,EAAEd,mBAAUQ,MAVe;AAWvCO,EAAAA,QAAQ,EAAEf,mBAAUC,KAAV,CAAgBe,mBAAhB;AAX6B,CAAhB,CAAlB;;;eAcQ;AACbC,EAAAA,UAAU,EAAEjB,mBAAUQ,MADT;AAEbU,EAAAA,KAAK,EAAEnB,SAFM;AAGboB,EAAAA,cAAc,EAAEnB,mBAAUC,KAAV,CAAgB;AAC9BmB,IAAAA,KAAK,EAAEpB,mBAAUQ,MAAV,CAAiBa,UADM;AAE9BC,IAAAA,OAAO,EAAEtB,mBAAUuB,IAAV,CAAeF,UAFM;AAG9BG,IAAAA,QAAQ,EAAExB,mBAAUG;AAHU,GAAhB,CAHH;AAQbsB,EAAAA,oBAAoB,EAAEzB,mBAAUC,KAAV,CAAgB;AACpCyB,IAAAA,GAAG,EAAEC,oBAA+BD,GADA;AAEpCE,IAAAA,WAAW,EAAED,oBAA+BC,WAFR;AAGpCC,IAAAA,IAAI,EAAE7B,mBAAUC,KAAV,CAAgB;AACpBmB,MAAAA,KAAK,EAAEpB,mBAAUQ,MADG;AAEpB,oBAAcR,mBAAUQ,MAFJ,CAEW;AAC/B;;AAHoB,KAAhB,CAH8B;AAQpCsB,IAAAA,WAAW,EAAEH,oBAA+BG,WARR;AASpCC,IAAAA,IAAI,EAAEJ,oBAA+BI;AATD,GAAhB;AART,C","sourcesContent":["import PropTypes from 'prop-types';\nimport ReviewCorrectionPopinPropTypes from '../../molecule/review-correction-popin/prop-types';\nimport AnswerPropTypes from '../../molecule/answer/prop-types';\n\nexport const SlideProp = PropTypes.shape({\n hidden: PropTypes.bool,\n position: PropTypes.number,\n loading: PropTypes.bool,\n loadingAriaLabel: PropTypes.string,\n animationType: PropTypes.string, // 'unstack' | 'restack'\n isCorrect: PropTypes.bool,\n animateCorrectionPopin: PropTypes.bool,\n showCorrectionPopin: PropTypes.bool,\n parentContentTitle: PropTypes.string,\n questionText: PropTypes.string,\n answerUI: PropTypes.shape(AnswerPropTypes)\n});\n\nexport default {\n slideIndex: PropTypes.string,\n slide: SlideProp,\n validateButton: PropTypes.shape({\n label: PropTypes.string.isRequired,\n onClick: PropTypes.func.isRequired,\n disabled: PropTypes.bool\n }),\n correctionPopinProps: PropTypes.shape({\n klf: ReviewCorrectionPopinPropTypes.klf,\n information: ReviewCorrectionPopinPropTypes.information,\n next: PropTypes.shape({\n label: PropTypes.string,\n 'aria-label': PropTypes.string // Pourquoi le onClick du next n'est pas ici !\n // updateSlidesOnNext: PropTypes.func.isRequired ???\n }),\n resultLabel: ReviewCorrectionPopinPropTypes.resultLabel,\n type: ReviewCorrectionPopinPropTypes.type\n })\n};\n"],"file":"prop-types.js"}
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
@value colors: "../../variables/colors.css";
|
|
2
|
+
@value black from colors;
|
|
3
|
+
@value white from colors;
|
|
4
|
+
@value cm_blue_900 from colors;
|
|
5
|
+
@value cm_grey_400 from colors;
|
|
6
|
+
@value breakpoints: "../../variables/breakpoints.css";
|
|
7
|
+
@value mobile from breakpoints;
|
|
8
|
+
@value tablet from breakpoints;
|
|
9
|
+
|
|
10
|
+
.fontBase {
|
|
11
|
+
font-family: "Gilroy";
|
|
12
|
+
user-select: none;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.slide{
|
|
16
|
+
align-items: center;
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
justify-content: flex-start;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.slideContentContainer {
|
|
23
|
+
margin-top: 15px;
|
|
24
|
+
height: 563px;
|
|
25
|
+
display: flex;
|
|
26
|
+
justify-items: center;
|
|
27
|
+
align-items: center;
|
|
28
|
+
flex-direction: column;
|
|
29
|
+
overflow-y: auto;
|
|
30
|
+
position: relative;
|
|
31
|
+
width: 100%;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.validateButtonWrapper {
|
|
35
|
+
position: absolute;
|
|
36
|
+
bottom: 64px;
|
|
37
|
+
background-color: black;
|
|
38
|
+
border-radius: 7px;
|
|
39
|
+
min-width: 250px;
|
|
40
|
+
width: min-content;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* ie fallback */
|
|
44
|
+
_:-ms-fullscreen, :root .validateButtonWrapper {
|
|
45
|
+
width: 300px;
|
|
46
|
+
left: 40%;
|
|
47
|
+
right: 40%;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.answerContainer {
|
|
51
|
+
max-width: 95%;
|
|
52
|
+
display: flex;
|
|
53
|
+
justify-content: center;
|
|
54
|
+
height: 100%;
|
|
55
|
+
/*
|
|
56
|
+
To break wrappers layout (to enclose large answers in the scroll bar), works like
|
|
57
|
+
display: contents for this use case but w ie11 support
|
|
58
|
+
*/
|
|
59
|
+
display: grid;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.question {
|
|
63
|
+
composes: fontBase;
|
|
64
|
+
font-size: 20px;
|
|
65
|
+
font-weight: bold;
|
|
66
|
+
color: cm_blue_900;
|
|
67
|
+
text-align: center;
|
|
68
|
+
margin: 24px 0 4px;
|
|
69
|
+
max-width: 85%;
|
|
70
|
+
box-sizing: border-box;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.questionOrigin {
|
|
74
|
+
composes: fontBase;
|
|
75
|
+
font-size: 15px;
|
|
76
|
+
color: cm_blue_900;
|
|
77
|
+
margin-top: 49px;
|
|
78
|
+
text-align: center;
|
|
79
|
+
max-width: 95%;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.questionOrigin:empty:after {
|
|
83
|
+
content: "\a0";
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.help {
|
|
87
|
+
composes: fontBase;
|
|
88
|
+
font-size: 15px;
|
|
89
|
+
color: cm_grey_400;
|
|
90
|
+
flex-grow: 0.1;
|
|
91
|
+
margin: 4px 0 10px;
|
|
92
|
+
text-align: center;
|
|
93
|
+
max-width: 95%;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* to keep the content space even if the help label is empty */
|
|
97
|
+
.help:empty:after {
|
|
98
|
+
content: "\a0";
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
@keyframes popInAnimation {
|
|
102
|
+
from {
|
|
103
|
+
transform: translate3d(0, 200px, 0);
|
|
104
|
+
}
|
|
105
|
+
to {
|
|
106
|
+
transform: translate3d(0, 0, 0);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.correctionPopinWrapper {
|
|
111
|
+
position: absolute;
|
|
112
|
+
bottom: 0px;
|
|
113
|
+
border-radius: 7px;
|
|
114
|
+
margin: 0 15px 40px;
|
|
115
|
+
width: 95%;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.popinAnimation {
|
|
119
|
+
animation: popInAnimation 0.5s ease-out forwards;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* ie fallback */
|
|
123
|
+
_:-ms-fullscreen, :root .correctionPopinWrapper {
|
|
124
|
+
left: 15px;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.validateButton {
|
|
128
|
+
color: white;
|
|
129
|
+
transition: opacity 0.25s ease-in;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.validateButton:hover {
|
|
133
|
+
opacity: 0.8;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.loader {
|
|
137
|
+
height: 60px;
|
|
138
|
+
width: 60px;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
@media tablet {
|
|
142
|
+
.slideContentContainer {
|
|
143
|
+
height: 473px;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
@keyframes popInAnimation {
|
|
147
|
+
from {
|
|
148
|
+
transform: translate3d(0, 400px, 0);
|
|
149
|
+
}
|
|
150
|
+
to {
|
|
151
|
+
transform: translate3d(0, 0, 0);
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
@media mobile {
|
|
157
|
+
.slideContentContainer {
|
|
158
|
+
height: 511px;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.questionOrigin, .question, .help, .answerContainer {
|
|
162
|
+
max-width: 90%;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
@keyframes popInAnimation {
|
|
166
|
+
from {
|
|
167
|
+
transform: translate3d(0, 500px, 0);
|
|
168
|
+
}
|
|
169
|
+
to {
|
|
170
|
+
transform: translate3d(0, 0, 0);
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = exports.TOTAL_SLIDES_STACK = void 0;
|
|
5
|
+
|
|
6
|
+
var _react = _interopRequireDefault(require("react"));
|
|
7
|
+
|
|
8
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
9
|
+
|
|
10
|
+
var _toString2 = _interopRequireDefault(require("lodash/fp/toString"));
|
|
11
|
+
|
|
12
|
+
var _reviewSlide = _interopRequireDefault(require("../review-slide"));
|
|
13
|
+
|
|
14
|
+
var _propTypes = _interopRequireDefault(require("./prop-types"));
|
|
15
|
+
|
|
16
|
+
var _style = _interopRequireDefault(require("./style.css"));
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
|
|
20
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
21
|
+
|
|
22
|
+
const TOTAL_SLIDES_STACK = 5;
|
|
23
|
+
exports.TOTAL_SLIDES_STACK = TOTAL_SLIDES_STACK;
|
|
24
|
+
const stylesByPosition = {
|
|
25
|
+
0: _style.default.position0,
|
|
26
|
+
1: _style.default.position1,
|
|
27
|
+
2: _style.default.position2,
|
|
28
|
+
3: _style.default.position3,
|
|
29
|
+
4: _style.default.position4
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
const getSlideAnimation = (action, position, hidden) => {
|
|
33
|
+
switch (action) {
|
|
34
|
+
case 'unstack':
|
|
35
|
+
return _style.default.slideOutHideAndIn;
|
|
36
|
+
|
|
37
|
+
case 'restack':
|
|
38
|
+
return _style.default.slideOutAndIn;
|
|
39
|
+
|
|
40
|
+
default:
|
|
41
|
+
return hidden ? _style.default.hiddenSlide : stylesByPosition[position];
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
const StackedSlides = ({
|
|
46
|
+
slides,
|
|
47
|
+
endReview,
|
|
48
|
+
validateButton,
|
|
49
|
+
correctionPopinProps
|
|
50
|
+
}) => {
|
|
51
|
+
const stackedSlides = []; // eslint-disable-next-line fp/no-loops
|
|
52
|
+
|
|
53
|
+
for (let slideIndex = 0; slideIndex < TOTAL_SLIDES_STACK; slideIndex++) {
|
|
54
|
+
const slide = slides[(0, _toString2.default)(slideIndex)];
|
|
55
|
+
const {
|
|
56
|
+
animationType,
|
|
57
|
+
hidden,
|
|
58
|
+
position
|
|
59
|
+
} = slide;
|
|
60
|
+
|
|
61
|
+
const slideView = /*#__PURE__*/_react.default.createElement("div", {
|
|
62
|
+
key: `slide-${slideIndex}`,
|
|
63
|
+
"data-name": `slide-${slideIndex}`,
|
|
64
|
+
className: (0, _classnames.default)(_style.default.slideBase, getSlideAnimation(animationType, position, hidden), endReview ? _style.default.endReview : null)
|
|
65
|
+
}, /*#__PURE__*/_react.default.createElement(_reviewSlide.default, _extends({
|
|
66
|
+
slideIndex: (0, _toString2.default)(slideIndex),
|
|
67
|
+
slide,
|
|
68
|
+
validateButton,
|
|
69
|
+
correctionPopinProps
|
|
70
|
+
}, {
|
|
71
|
+
key: slideIndex
|
|
72
|
+
})));
|
|
73
|
+
|
|
74
|
+
stackedSlides.push(slideView);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
78
|
+
key: "stacked-slides-container-y-overflow",
|
|
79
|
+
className: _style.default.stackedSlidesYAxisOverflowContainer
|
|
80
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
81
|
+
key: "stacked-slides-container",
|
|
82
|
+
"data-name": "stacked-slides-container",
|
|
83
|
+
className: _style.default.stackedSlidesContainer
|
|
84
|
+
}, stackedSlides));
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
StackedSlides.propTypes = process.env.NODE_ENV !== "production" ? _propTypes.default : {};
|
|
88
|
+
var _default = StackedSlides;
|
|
89
|
+
exports.default = _default;
|
|
90
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/organism/review-stacked-slides/index.js"],"names":["TOTAL_SLIDES_STACK","stylesByPosition","style","position0","position1","position2","position3","position4","getSlideAnimation","action","position","hidden","slideOutHideAndIn","slideOutAndIn","hiddenSlide","StackedSlides","slides","endReview","validateButton","correctionPopinProps","stackedSlides","slideIndex","slide","animationType","slideView","slideBase","push","stackedSlidesYAxisOverflowContainer","stackedSlidesContainer","propTypes"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEO,MAAMA,kBAAkB,GAAG,CAA3B;;AAEP,MAAMC,gBAAgB,GAAG;AACvB,KAAGC,eAAMC,SADc;AAEvB,KAAGD,eAAME,SAFc;AAGvB,KAAGF,eAAMG,SAHc;AAIvB,KAAGH,eAAMI,SAJc;AAKvB,KAAGJ,eAAMK;AALc,CAAzB;;AAQA,MAAMC,iBAAiB,GAAG,CAACC,MAAD,EAASC,QAAT,EAAmBC,MAAnB,KAA8B;AACtD,UAAQF,MAAR;AACE,SAAK,SAAL;AACE,aAAOP,eAAMU,iBAAb;;AACF,SAAK,SAAL;AACE,aAAOV,eAAMW,aAAb;;AACF;AACE,aAAOF,MAAM,GAAGT,eAAMY,WAAT,GAAuBb,gBAAgB,CAACS,QAAD,CAApD;AANJ;AAQD,CATD;;AAWA,MAAMK,aAAa,GAAG,CAAC;AAACC,EAAAA,MAAD;AAASC,EAAAA,SAAT;AAAoBC,EAAAA,cAApB;AAAoCC,EAAAA;AAApC,CAAD,KAA+D;AACnF,QAAMC,aAAa,GAAG,EAAtB,CADmF,CAEnF;;AACA,OAAK,IAAIC,UAAU,GAAG,CAAtB,EAAyBA,UAAU,GAAGrB,kBAAtC,EAA0DqB,UAAU,EAApE,EAAwE;AACtE,UAAMC,KAAK,GAAGN,MAAM,CAAC,wBAAUK,UAAV,CAAD,CAApB;AACA,UAAM;AAACE,MAAAA,aAAD;AAAgBZ,MAAAA,MAAhB;AAAwBD,MAAAA;AAAxB,QAAoCY,KAA1C;;AAEA,UAAME,SAAS,gBACb;AACE,MAAA,GAAG,EAAG,SAAQH,UAAW,EAD3B;AAEE,mBAAY,SAAQA,UAAW,EAFjC;AAGE,MAAA,SAAS,EAAE,yBACTnB,eAAMuB,SADG,EAETjB,iBAAiB,CAACe,aAAD,EAAgBb,QAAhB,EAA0BC,MAA1B,CAFR,EAGTM,SAAS,GAAGf,eAAMe,SAAT,GAAqB,IAHrB;AAHb,oBASE,6BAAC,oBAAD,WACM;AACFI,MAAAA,UAAU,EAAE,wBAAUA,UAAV,CADV;AAEFC,MAAAA,KAFE;AAGFJ,MAAAA,cAHE;AAIFC,MAAAA;AAJE,KADN;AAOE,MAAA,GAAG,EAAEE;AAPP,OATF,CADF;;AAqBAD,IAAAA,aAAa,CAACM,IAAd,CAAmBF,SAAnB;AACD;;AAED,sBACE;AACE,IAAA,GAAG,EAAC,qCADN;AAEE,IAAA,SAAS,EAAEtB,eAAMyB;AAFnB,kBAIE;AACE,IAAA,GAAG,EAAC,0BADN;AAEE,iBAAU,0BAFZ;AAGE,IAAA,SAAS,EAAEzB,eAAM0B;AAHnB,KAKGR,aALH,CAJF,CADF;AAcD,CA7CD;;AA+CAL,aAAa,CAACc,SAAd,2CAA0BA,kBAA1B;eAEed,a","sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport _toString from 'lodash/fp/toString';\nimport ReviewSlide from '../review-slide';\nimport propTypes from './prop-types';\nimport style from './style.css';\n\nexport const TOTAL_SLIDES_STACK = 5;\n\nconst stylesByPosition = {\n 0: style.position0,\n 1: style.position1,\n 2: style.position2,\n 3: style.position3,\n 4: style.position4\n};\n\nconst getSlideAnimation = (action, position, hidden) => {\n switch (action) {\n case 'unstack':\n return style.slideOutHideAndIn;\n case 'restack':\n return style.slideOutAndIn;\n default:\n return hidden ? style.hiddenSlide : stylesByPosition[position];\n }\n};\n\nconst StackedSlides = ({slides, endReview, validateButton, correctionPopinProps}) => {\n const stackedSlides = [];\n // eslint-disable-next-line fp/no-loops\n for (let slideIndex = 0; slideIndex < TOTAL_SLIDES_STACK; slideIndex++) {\n const slide = slides[_toString(slideIndex)];\n const {animationType, hidden, position} = slide;\n\n const slideView = (\n <div\n key={`slide-${slideIndex}`}\n data-name={`slide-${slideIndex}`}\n className={classnames(\n style.slideBase,\n getSlideAnimation(animationType, position, hidden),\n endReview ? style.endReview : null\n )}\n >\n <ReviewSlide\n {...{\n slideIndex: _toString(slideIndex),\n slide,\n validateButton,\n correctionPopinProps\n }}\n key={slideIndex}\n />\n </div>\n );\n stackedSlides.push(slideView);\n }\n\n return (\n <div\n key=\"stacked-slides-container-y-overflow\"\n className={style.stackedSlidesYAxisOverflowContainer}\n >\n <div\n key=\"stacked-slides-container\"\n data-name=\"stacked-slides-container\"\n className={style.stackedSlidesContainer}\n >\n {stackedSlides}\n </div>\n </div>\n );\n};\n\nStackedSlides.propTypes = propTypes;\n\nexport default StackedSlides;\n"],"file":"index.js"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
|
|
6
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
7
|
+
|
|
8
|
+
var _propTypes2 = _interopRequireWildcard(require("../review-slide/prop-types"));
|
|
9
|
+
|
|
10
|
+
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
|
|
11
|
+
|
|
12
|
+
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; }
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
|
|
16
|
+
var _default = {
|
|
17
|
+
validateButton: _propTypes2.default.validateButton,
|
|
18
|
+
correctionPopinProps: _propTypes2.default.correctionPopinProps,
|
|
19
|
+
slides: _propTypes.default.shape({
|
|
20
|
+
'0': _propTypes2.SlideProp,
|
|
21
|
+
'1': _propTypes2.SlideProp,
|
|
22
|
+
'2': _propTypes2.SlideProp,
|
|
23
|
+
'3': _propTypes2.SlideProp,
|
|
24
|
+
'4': _propTypes2.SlideProp
|
|
25
|
+
}),
|
|
26
|
+
endReview: _propTypes.default.bool
|
|
27
|
+
};
|
|
28
|
+
exports.default = _default;
|
|
29
|
+
//# sourceMappingURL=prop-types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/organism/review-stacked-slides/prop-types.js"],"names":["validateButton","ReviewSlideProps","correctionPopinProps","slides","PropTypes","shape","SlideProp","endReview","bool"],"mappings":";;;;;AAAA;;AACA;;;;;;;;eAEe;AACbA,EAAAA,cAAc,EAAEC,oBAAiBD,cADpB;AAEbE,EAAAA,oBAAoB,EAAED,oBAAiBC,oBAF1B;AAGbC,EAAAA,MAAM,EAAEC,mBAAUC,KAAV,CAAgB;AACtB,SAAKC,qBADiB;AAEtB,SAAKA,qBAFiB;AAGtB,SAAKA,qBAHiB;AAItB,SAAKA,qBAJiB;AAKtB,SAAKA;AALiB,GAAhB,CAHK;AAUbC,EAAAA,SAAS,EAAEH,mBAAUI;AAVR,C","sourcesContent":["import PropTypes from 'prop-types';\nimport ReviewSlideProps, {SlideProp} from '../review-slide/prop-types';\n\nexport default {\n validateButton: ReviewSlideProps.validateButton,\n correctionPopinProps: ReviewSlideProps.correctionPopinProps,\n slides: PropTypes.shape({\n '0': SlideProp,\n '1': SlideProp,\n '2': SlideProp,\n '3': SlideProp,\n '4': SlideProp\n }),\n endReview: PropTypes.bool\n};\n"],"file":"prop-types.js"}
|