@coorpacademy/components 10.28.0 → 10.28.1-alpha.0

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 (9) hide show
  1. package/es/organism/review-stacked-slides/index.d.ts.map +1 -1
  2. package/es/organism/review-stacked-slides/index.js +10 -3
  3. package/es/organism/review-stacked-slides/index.js.map +1 -1
  4. package/es/organism/review-stacked-slides/style.css +117 -6
  5. package/lib/organism/review-stacked-slides/index.d.ts.map +1 -1
  6. package/lib/organism/review-stacked-slides/index.js +10 -3
  7. package/lib/organism/review-stacked-slides/index.js.map +1 -1
  8. package/lib/organism/review-stacked-slides/style.css +117 -6
  9. package/package.json +2 -2
package/es/organism/review-stacked-slides/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/review-stacked-slides/index.js"],"names":[],"mappings":"AAOA,mCAAoC;;AAqBpC;;;;;gBA6CC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/review-stacked-slides/index.js"],"names":[],"mappings":"AAOA,mCAAoC;;AA6BpC;;;;;gBA8CC"}
package/es/organism/review-stacked-slides/index.js CHANGED
@@ -12,6 +12,13 @@ const stylesByPosition = {
12
12
  3: style.position3,
13
13
  4: style.position4
14
14
  };
15
+ const unstackByPosition = {
16
+ 0: style.slideOutAndIn0,
17
+ 1: style.slideOutAndIn1,
18
+ 2: style.slideOutAndIn2,
19
+ 3: style.slideOutAndIn3,
20
+ 4: style.slideOutAndIn4
21
+ };
15
22
 
16
23
  const getSlideAnimation = (action, position) => {
17
24
  switch (action) {
@@ -19,10 +26,10 @@ const getSlideAnimation = (action, position) => {
19
26
  return style.slideOutHideAndIn;
20
27
 
21
28
  case 'restack':
22
- return style.slideOutAndIn;
29
+ return unstackByPosition[position];
23
30
 
24
31
  default:
25
- return position < 0 ? style.hiddenSlide : stylesByPosition[position];
32
+ return null;
26
33
  }
27
34
  };
28
35
 
@@ -44,7 +51,7 @@ const StackedSlides = ({
44
51
  const slideView = /*#__PURE__*/React.createElement("div", {
45
52
  key: `slide-${slideIndex}`,
46
53
  "data-name": `slide-${slideIndex}`,
47
- className: classnames(style.slideBase, getSlideAnimation(animationType, position), endReview ? style.endReview : null)
54
+ className: classnames(style.slideBase, getSlideAnimation(animationType, position), position < 0 ? style.hiddenSlide : stylesByPosition[position], endReview ? style.endReview : null)
48
55
  }, /*#__PURE__*/React.createElement(ReviewSlide, {
49
56
  slideIndex: _toString(slideIndex),
50
57
  slide,
package/es/organism/review-stacked-slides/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","classnames","_toString","ReviewSlide","propTypes","style","TOTAL_SLIDES_STACK","stylesByPosition","position0","position1","position2","position3","position4","getSlideAnimation","action","position","slideOutHideAndIn","slideOutAndIn","hiddenSlide","StackedSlides","slides","endReview","validateButton","correctionPopinProps","stackedSlides","slideIndex","slide","animationType","slideView","slideBase","push","stackedSlidesYAxisOverflowContainer","stackedSlidesContainer"],"sources":["../../../src/organism/review-stacked-slides/index.js"],"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) => {\n switch (action) {\n case 'unstack':\n return style.slideOutHideAndIn;\n case 'restack':\n return style.slideOutAndIn;\n default:\n return position < 0 ? 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, 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),\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"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,SAAP,MAAsB,oBAAtB;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AACA,OAAOC,SAAP,MAAsB,cAAtB;AACA,OAAOC,KAAP,MAAkB,aAAlB;AAEA,OAAO,MAAMC,kBAAkB,GAAG,CAA3B;AAEP,MAAMC,gBAAgB,GAAG;EACvB,GAAGF,KAAK,CAACG,SADc;EAEvB,GAAGH,KAAK,CAACI,SAFc;EAGvB,GAAGJ,KAAK,CAACK,SAHc;EAIvB,GAAGL,KAAK,CAACM,SAJc;EAKvB,GAAGN,KAAK,CAACO;AALc,CAAzB;;AAQA,MAAMC,iBAAiB,GAAG,CAACC,MAAD,EAASC,QAAT,KAAsB;EAC9C,QAAQD,MAAR;IACE,KAAK,SAAL;MACE,OAAOT,KAAK,CAACW,iBAAb;;IACF,KAAK,SAAL;MACE,OAAOX,KAAK,CAACY,aAAb;;IACF;MACE,OAAOF,QAAQ,GAAG,CAAX,GAAeV,KAAK,CAACa,WAArB,GAAmCX,gBAAgB,CAACQ,QAAD,CAA1D;EANJ;AAQD,CATD;;AAWA,MAAMI,aAAa,GAAG,CAAC;EAACC,MAAD;EAASC,SAAT;EAAoBC,cAApB;EAAoCC;AAApC,CAAD,KAA+D;EACnF,MAAMC,aAAa,GAAG,EAAtB,CADmF,CAEnF;;EACA,KAAK,IAAIC,UAAU,GAAG,CAAtB,EAAyBA,UAAU,GAAGnB,kBAAtC,EAA0DmB,UAAU,EAApE,EAAwE;IACtE,MAAMC,KAAK,GAAGN,MAAM,CAAClB,SAAS,CAACuB,UAAD,CAAV,CAApB;;IACA,MAAM;MAACE,aAAD;MAAgBZ;IAAhB,IAA4BW,KAAlC;IAEA,MAAME,SAAS,gBACb;MACE,GAAG,EAAG,SAAQH,UAAW,EAD3B;MAEE,aAAY,SAAQA,UAAW,EAFjC;MAGE,SAAS,EAAExB,UAAU,CACnBI,KAAK,CAACwB,SADa,EAEnBhB,iBAAiB,CAACc,aAAD,EAAgBZ,QAAhB,CAFE,EAGnBM,SAAS,GAAGhB,KAAK,CAACgB,SAAT,GAAqB,IAHX;IAHvB,gBASE,oBAAC,WAAD;MAEII,UAAU,EAAEvB,SAAS,CAACuB,UAAD,CAFzB;MAGIC,KAHJ;MAIIJ,cAJJ;MAKIC,oBALJ;MAOE,GAAG,EAAEE;IAPP,EATF,CADF;IAqBAD,aAAa,CAACM,IAAd,CAAmBF,SAAnB;EACD;;EAED,oBACE;IACE,GAAG,EAAC,qCADN;IAEE,SAAS,EAAEvB,KAAK,CAAC0B;EAFnB,gBAIE;IACE,GAAG,EAAC,0BADN;IAEE,aAAU,0BAFZ;IAGE,SAAS,EAAE1B,KAAK,CAAC2B;EAHnB,GAKGR,aALH,CAJF,CADF;AAcD,CA7CD;;AA+CAL,aAAa,CAACf,SAAd,2CAA0BA,SAA1B;AAEA,eAAee,aAAf"}
1
+ {"version":3,"file":"index.js","names":["React","classnames","_toString","ReviewSlide","propTypes","style","TOTAL_SLIDES_STACK","stylesByPosition","position0","position1","position2","position3","position4","unstackByPosition","slideOutAndIn0","slideOutAndIn1","slideOutAndIn2","slideOutAndIn3","slideOutAndIn4","getSlideAnimation","action","position","slideOutHideAndIn","StackedSlides","slides","endReview","validateButton","correctionPopinProps","stackedSlides","slideIndex","slide","animationType","slideView","slideBase","hiddenSlide","push","stackedSlidesYAxisOverflowContainer","stackedSlidesContainer"],"sources":["../../../src/organism/review-stacked-slides/index.js"],"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 unstackByPosition = {\n 0: style.slideOutAndIn0,\n 1: style.slideOutAndIn1,\n 2: style.slideOutAndIn2,\n 3: style.slideOutAndIn3,\n 4: style.slideOutAndIn4\n};\n\nconst getSlideAnimation = (action, position) => {\n switch (action) {\n case 'unstack':\n return style.slideOutHideAndIn;\n case 'restack':\n return unstackByPosition[position];\n default:\n return null;\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, 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),\n position < 0 ? style.hiddenSlide : stylesByPosition[position],\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"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,SAAP,MAAsB,oBAAtB;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AACA,OAAOC,SAAP,MAAsB,cAAtB;AACA,OAAOC,KAAP,MAAkB,aAAlB;AAEA,OAAO,MAAMC,kBAAkB,GAAG,CAA3B;AAEP,MAAMC,gBAAgB,GAAG;EACvB,GAAGF,KAAK,CAACG,SADc;EAEvB,GAAGH,KAAK,CAACI,SAFc;EAGvB,GAAGJ,KAAK,CAACK,SAHc;EAIvB,GAAGL,KAAK,CAACM,SAJc;EAKvB,GAAGN,KAAK,CAACO;AALc,CAAzB;AAQA,MAAMC,iBAAiB,GAAG;EACxB,GAAGR,KAAK,CAACS,cADe;EAExB,GAAGT,KAAK,CAACU,cAFe;EAGxB,GAAGV,KAAK,CAACW,cAHe;EAIxB,GAAGX,KAAK,CAACY,cAJe;EAKxB,GAAGZ,KAAK,CAACa;AALe,CAA1B;;AAQA,MAAMC,iBAAiB,GAAG,CAACC,MAAD,EAASC,QAAT,KAAsB;EAC9C,QAAQD,MAAR;IACE,KAAK,SAAL;MACE,OAAOf,KAAK,CAACiB,iBAAb;;IACF,KAAK,SAAL;MACE,OAAOT,iBAAiB,CAACQ,QAAD,CAAxB;;IACF;MACE,OAAO,IAAP;EANJ;AAQD,CATD;;AAWA,MAAME,aAAa,GAAG,CAAC;EAACC,MAAD;EAASC,SAAT;EAAoBC,cAApB;EAAoCC;AAApC,CAAD,KAA+D;EACnF,MAAMC,aAAa,GAAG,EAAtB,CADmF,CAEnF;;EACA,KAAK,IAAIC,UAAU,GAAG,CAAtB,EAAyBA,UAAU,GAAGvB,kBAAtC,EAA0DuB,UAAU,EAApE,EAAwE;IACtE,MAAMC,KAAK,GAAGN,MAAM,CAACtB,SAAS,CAAC2B,UAAD,CAAV,CAApB;;IACA,MAAM;MAACE,aAAD;MAAgBV;IAAhB,IAA4BS,KAAlC;IAEA,MAAME,SAAS,gBACb;MACE,GAAG,EAAG,SAAQH,UAAW,EAD3B;MAEE,aAAY,SAAQA,UAAW,EAFjC;MAGE,SAAS,EAAE5B,UAAU,CACnBI,KAAK,CAAC4B,SADa,EAEnBd,iBAAiB,CAACY,aAAD,EAAgBV,QAAhB,CAFE,EAGnBA,QAAQ,GAAG,CAAX,GAAehB,KAAK,CAAC6B,WAArB,GAAmC3B,gBAAgB,CAACc,QAAD,CAHhC,EAInBI,SAAS,GAAGpB,KAAK,CAACoB,SAAT,GAAqB,IAJX;IAHvB,gBAUE,oBAAC,WAAD;MAEII,UAAU,EAAE3B,SAAS,CAAC2B,UAAD,CAFzB;MAGIC,KAHJ;MAIIJ,cAJJ;MAKIC,oBALJ;MAOE,GAAG,EAAEE;IAPP,EAVF,CADF;IAsBAD,aAAa,CAACO,IAAd,CAAmBH,SAAnB;EACD;;EAED,oBACE;IACE,GAAG,EAAC,qCADN;IAEE,SAAS,EAAE3B,KAAK,CAAC+B;EAFnB,gBAIE;IACE,GAAG,EAAC,0BADN;IAEE,aAAU,0BAFZ;IAGE,SAAS,EAAE/B,KAAK,CAACgC;EAHnB,GAKGT,aALH,CAJF,CADF;AAcD,CA9CD;;AAgDAL,aAAa,CAACnB,SAAd,2CAA0BA,SAA1B;AAEA,eAAemB,aAAf"}
package/es/organism/review-stacked-slides/style.css CHANGED
@@ -43,7 +43,6 @@
43
43
  width: 100%;
44
44
  transform: translate(0, 0);
45
45
  transition: transform 0.5s ease-in;
46
-
47
46
  }
48
47
 
49
48
  .position1 {
@@ -97,7 +96,12 @@
97
96
  }
98
97
  }
99
98
 
100
- @keyframes slideOutAndIn {
99
+ .slideOutHideAndIn {
100
+ pointer-events: none;
101
+ animation: slideOutHideAndSlideIn 2s ease forwards;
102
+ }
103
+
104
+ @keyframes slideOutAndInPosition4 {
101
105
  0% {
102
106
  width: 100%;
103
107
  z-index: 55;
@@ -120,14 +124,121 @@
120
124
  }
121
125
  }
122
126
 
123
- .slideOutHideAndIn {
127
+ .slideOutAndIn4 {
124
128
  pointer-events: none;
125
- animation: slideOutHideAndSlideIn 2s ease forwards;
129
+ animation: slideOutAndInPosition4 2s ease forwards;
130
+ }
131
+
132
+ @keyframes slideOutAndInPosition3 {
133
+ 0% {
134
+ width: 100%;
135
+ z-index: 55;
136
+ transform: translate(0, 0);
137
+ }
138
+ 50% {
139
+ width: 97%;
140
+ z-index: 50;
141
+ transform: translate(0, 1000px);
142
+ }
143
+ 60% {
144
+ width: 95%;
145
+ z-index: 30;
146
+ transform: translate(3.2%, 900px);
147
+ }
148
+ 100% {
149
+ z-index: 35;
150
+ width: 94%;
151
+ transform: translate(2.4%, -24px);
152
+ }
153
+ }
154
+
155
+ .slideOutAndIn3 {
156
+ pointer-events: none;
157
+ animation: slideOutAndInPosition3 2s ease forwards;
158
+ }
159
+
160
+ @keyframes slideOutAndInPosition2 {
161
+ 0% {
162
+ width: 100%;
163
+ z-index: 55;
164
+ transform: translate(0, 0);
165
+ }
166
+ 50% {
167
+ width: 97%;
168
+ z-index: 50;
169
+ transform: translate(0, 1000px);
170
+ }
171
+ 60% {
172
+ width: 95%;
173
+ z-index: 30;
174
+ transform: translate(3.2%, 900px);
175
+ }
176
+ 100% {
177
+ z-index: 40;
178
+ width: 96%;
179
+ transform: translate(1.6%, -16px);
180
+ }
181
+ }
182
+
183
+ .slideOutAndIn2 {
184
+ pointer-events: none;
185
+ animation: slideOutAndInPosition2 2s ease forwards;
186
+ }
187
+
188
+ @keyframes slideOutAndInPosition1 {
189
+ 0% {
190
+ width: 100%;
191
+ z-index: 55;
192
+ transform: translate(0, 0);
193
+ }
194
+ 50% {
195
+ width: 97%;
196
+ z-index: 50;
197
+ transform: translate(0, 1000px);
198
+ }
199
+ 60% {
200
+ width: 95%;
201
+ z-index: 30;
202
+ transform: translate(3.2%, 900px);
203
+ }
204
+ 100% {
205
+ z-index: 45;
206
+ width: 98%;
207
+ transform: translate(0.8%, -8px);
208
+ }
209
+ }
210
+
211
+ .slideOutAndIn1 {
212
+ pointer-events: none;
213
+ animation: slideOutAndInPosition1 2s ease forwards;
214
+ }
215
+
216
+ @keyframes slideOutAndInPosition0 {
217
+ 0% {
218
+ width: 100%;
219
+ z-index: 55;
220
+ transform: translate(0, 0);
221
+ }
222
+ 50% {
223
+ width: 97%;
224
+ z-index: 50;
225
+ transform: translate(0, 1000px);
226
+ }
227
+ 60% {
228
+ width: 95%;
229
+ z-index: 30;
230
+ transform: translate(3.2%, 900px);
231
+ }
232
+ 100% {
233
+ z-index: 55;
234
+ width: 100%;
235
+ transform: translate(0, 0);
236
+ }
126
237
  }
127
238
 
128
- .slideOutAndIn {
239
+ .slideOutAndIn0 {
129
240
  pointer-events: none;
130
- animation: slideOutAndIn 2s ease forwards;
241
+ animation: slideOutAndInPosition0 2s ease forwards;
131
242
  }
132
243
 
133
244
  .hiddenSlide {
package/lib/organism/review-stacked-slides/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/review-stacked-slides/index.js"],"names":[],"mappings":"AAOA,mCAAoC;;AAqBpC;;;;;gBA6CC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/review-stacked-slides/index.js"],"names":[],"mappings":"AAOA,mCAAoC;;AA6BpC;;;;;gBA8CC"}
package/lib/organism/review-stacked-slides/index.js CHANGED
@@ -26,6 +26,13 @@ const stylesByPosition = {
26
26
  3: _style.default.position3,
27
27
  4: _style.default.position4
28
28
  };
29
+ const unstackByPosition = {
30
+ 0: _style.default.slideOutAndIn0,
31
+ 1: _style.default.slideOutAndIn1,
32
+ 2: _style.default.slideOutAndIn2,
33
+ 3: _style.default.slideOutAndIn3,
34
+ 4: _style.default.slideOutAndIn4
35
+ };
29
36
 
30
37
  const getSlideAnimation = (action, position) => {
31
38
  switch (action) {
@@ -33,10 +40,10 @@ const getSlideAnimation = (action, position) => {
33
40
  return _style.default.slideOutHideAndIn;
34
41
 
35
42
  case 'restack':
36
- return _style.default.slideOutAndIn;
43
+ return unstackByPosition[position];
37
44
 
38
45
  default:
39
- return position < 0 ? _style.default.hiddenSlide : stylesByPosition[position];
46
+ return null;
40
47
  }
41
48
  };
42
49
 
@@ -58,7 +65,7 @@ const StackedSlides = ({
58
65
  const slideView = /*#__PURE__*/_react.default.createElement("div", {
59
66
  key: `slide-${slideIndex}`,
60
67
  "data-name": `slide-${slideIndex}`,
61
- className: (0, _classnames.default)(_style.default.slideBase, getSlideAnimation(animationType, position), endReview ? _style.default.endReview : null)
68
+ className: (0, _classnames.default)(_style.default.slideBase, getSlideAnimation(animationType, position), position < 0 ? _style.default.hiddenSlide : stylesByPosition[position], endReview ? _style.default.endReview : null)
62
69
  }, /*#__PURE__*/_react.default.createElement(_reviewSlide.default, {
63
70
  slideIndex: (0, _toString2.default)(slideIndex),
64
71
  slide,
package/lib/organism/review-stacked-slides/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["TOTAL_SLIDES_STACK","stylesByPosition","style","position0","position1","position2","position3","position4","getSlideAnimation","action","position","slideOutHideAndIn","slideOutAndIn","hiddenSlide","StackedSlides","slides","endReview","validateButton","correctionPopinProps","stackedSlides","slideIndex","slide","_toString","animationType","slideView","classnames","slideBase","push","stackedSlidesYAxisOverflowContainer","stackedSlidesContainer","propTypes"],"sources":["../../../src/organism/review-stacked-slides/index.js"],"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) => {\n switch (action) {\n case 'unstack':\n return style.slideOutHideAndIn;\n case 'restack':\n return style.slideOutAndIn;\n default:\n return position < 0 ? 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, 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),\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"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEO,MAAMA,kBAAkB,GAAG,CAA3B;;AAEP,MAAMC,gBAAgB,GAAG;EACvB,GAAGC,cAAA,CAAMC,SADc;EAEvB,GAAGD,cAAA,CAAME,SAFc;EAGvB,GAAGF,cAAA,CAAMG,SAHc;EAIvB,GAAGH,cAAA,CAAMI,SAJc;EAKvB,GAAGJ,cAAA,CAAMK;AALc,CAAzB;;AAQA,MAAMC,iBAAiB,GAAG,CAACC,MAAD,EAASC,QAAT,KAAsB;EAC9C,QAAQD,MAAR;IACE,KAAK,SAAL;MACE,OAAOP,cAAA,CAAMS,iBAAb;;IACF,KAAK,SAAL;MACE,OAAOT,cAAA,CAAMU,aAAb;;IACF;MACE,OAAOF,QAAQ,GAAG,CAAX,GAAeR,cAAA,CAAMW,WAArB,GAAmCZ,gBAAgB,CAACS,QAAD,CAA1D;EANJ;AAQD,CATD;;AAWA,MAAMI,aAAa,GAAG,CAAC;EAACC,MAAD;EAASC,SAAT;EAAoBC,cAApB;EAAoCC;AAApC,CAAD,KAA+D;EACnF,MAAMC,aAAa,GAAG,EAAtB,CADmF,CAEnF;;EACA,KAAK,IAAIC,UAAU,GAAG,CAAtB,EAAyBA,UAAU,GAAGpB,kBAAtC,EAA0DoB,UAAU,EAApE,EAAwE;IACtE,MAAMC,KAAK,GAAGN,MAAM,CAAC,IAAAO,kBAAA,EAAUF,UAAV,CAAD,CAApB;IACA,MAAM;MAACG,aAAD;MAAgBb;IAAhB,IAA4BW,KAAlC;;IAEA,MAAMG,SAAS,gBACb;MACE,GAAG,EAAG,SAAQJ,UAAW,EAD3B;MAEE,aAAY,SAAQA,UAAW,EAFjC;MAGE,SAAS,EAAE,IAAAK,mBAAA,EACTvB,cAAA,CAAMwB,SADG,EAETlB,iBAAiB,CAACe,aAAD,EAAgBb,QAAhB,CAFR,EAGTM,SAAS,GAAGd,cAAA,CAAMc,SAAT,GAAqB,IAHrB;IAHb,gBASE,6BAAC,oBAAD;MAEII,UAAU,EAAE,IAAAE,kBAAA,EAAUF,UAAV,CAFhB;MAGIC,KAHJ;MAIIJ,cAJJ;MAKIC,oBALJ;MAOE,GAAG,EAAEE;IAPP,EATF,CADF;;IAqBAD,aAAa,CAACQ,IAAd,CAAmBH,SAAnB;EACD;;EAED,oBACE;IACE,GAAG,EAAC,qCADN;IAEE,SAAS,EAAEtB,cAAA,CAAM0B;EAFnB,gBAIE;IACE,GAAG,EAAC,0BADN;IAEE,aAAU,0BAFZ;IAGE,SAAS,EAAE1B,cAAA,CAAM2B;EAHnB,GAKGV,aALH,CAJF,CADF;AAcD,CA7CD;;AA+CAL,aAAa,CAACgB,SAAd,2CAA0BA,kBAA1B;eAEehB,a"}
1
+ {"version":3,"file":"index.js","names":["TOTAL_SLIDES_STACK","stylesByPosition","style","position0","position1","position2","position3","position4","unstackByPosition","slideOutAndIn0","slideOutAndIn1","slideOutAndIn2","slideOutAndIn3","slideOutAndIn4","getSlideAnimation","action","position","slideOutHideAndIn","StackedSlides","slides","endReview","validateButton","correctionPopinProps","stackedSlides","slideIndex","slide","_toString","animationType","slideView","classnames","slideBase","hiddenSlide","push","stackedSlidesYAxisOverflowContainer","stackedSlidesContainer","propTypes"],"sources":["../../../src/organism/review-stacked-slides/index.js"],"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 unstackByPosition = {\n 0: style.slideOutAndIn0,\n 1: style.slideOutAndIn1,\n 2: style.slideOutAndIn2,\n 3: style.slideOutAndIn3,\n 4: style.slideOutAndIn4\n};\n\nconst getSlideAnimation = (action, position) => {\n switch (action) {\n case 'unstack':\n return style.slideOutHideAndIn;\n case 'restack':\n return unstackByPosition[position];\n default:\n return null;\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, 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),\n position < 0 ? style.hiddenSlide : stylesByPosition[position],\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"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEO,MAAMA,kBAAkB,GAAG,CAA3B;;AAEP,MAAMC,gBAAgB,GAAG;EACvB,GAAGC,cAAA,CAAMC,SADc;EAEvB,GAAGD,cAAA,CAAME,SAFc;EAGvB,GAAGF,cAAA,CAAMG,SAHc;EAIvB,GAAGH,cAAA,CAAMI,SAJc;EAKvB,GAAGJ,cAAA,CAAMK;AALc,CAAzB;AAQA,MAAMC,iBAAiB,GAAG;EACxB,GAAGN,cAAA,CAAMO,cADe;EAExB,GAAGP,cAAA,CAAMQ,cAFe;EAGxB,GAAGR,cAAA,CAAMS,cAHe;EAIxB,GAAGT,cAAA,CAAMU,cAJe;EAKxB,GAAGV,cAAA,CAAMW;AALe,CAA1B;;AAQA,MAAMC,iBAAiB,GAAG,CAACC,MAAD,EAASC,QAAT,KAAsB;EAC9C,QAAQD,MAAR;IACE,KAAK,SAAL;MACE,OAAOb,cAAA,CAAMe,iBAAb;;IACF,KAAK,SAAL;MACE,OAAOT,iBAAiB,CAACQ,QAAD,CAAxB;;IACF;MACE,OAAO,IAAP;EANJ;AAQD,CATD;;AAWA,MAAME,aAAa,GAAG,CAAC;EAACC,MAAD;EAASC,SAAT;EAAoBC,cAApB;EAAoCC;AAApC,CAAD,KAA+D;EACnF,MAAMC,aAAa,GAAG,EAAtB,CADmF,CAEnF;;EACA,KAAK,IAAIC,UAAU,GAAG,CAAtB,EAAyBA,UAAU,GAAGxB,kBAAtC,EAA0DwB,UAAU,EAApE,EAAwE;IACtE,MAAMC,KAAK,GAAGN,MAAM,CAAC,IAAAO,kBAAA,EAAUF,UAAV,CAAD,CAApB;IACA,MAAM;MAACG,aAAD;MAAgBX;IAAhB,IAA4BS,KAAlC;;IAEA,MAAMG,SAAS,gBACb;MACE,GAAG,EAAG,SAAQJ,UAAW,EAD3B;MAEE,aAAY,SAAQA,UAAW,EAFjC;MAGE,SAAS,EAAE,IAAAK,mBAAA,EACT3B,cAAA,CAAM4B,SADG,EAEThB,iBAAiB,CAACa,aAAD,EAAgBX,QAAhB,CAFR,EAGTA,QAAQ,GAAG,CAAX,GAAed,cAAA,CAAM6B,WAArB,GAAmC9B,gBAAgB,CAACe,QAAD,CAH1C,EAITI,SAAS,GAAGlB,cAAA,CAAMkB,SAAT,GAAqB,IAJrB;IAHb,gBAUE,6BAAC,oBAAD;MAEII,UAAU,EAAE,IAAAE,kBAAA,EAAUF,UAAV,CAFhB;MAGIC,KAHJ;MAIIJ,cAJJ;MAKIC,oBALJ;MAOE,GAAG,EAAEE;IAPP,EAVF,CADF;;IAsBAD,aAAa,CAACS,IAAd,CAAmBJ,SAAnB;EACD;;EAED,oBACE;IACE,GAAG,EAAC,qCADN;IAEE,SAAS,EAAE1B,cAAA,CAAM+B;EAFnB,gBAIE;IACE,GAAG,EAAC,0BADN;IAEE,aAAU,0BAFZ;IAGE,SAAS,EAAE/B,cAAA,CAAMgC;EAHnB,GAKGX,aALH,CAJF,CADF;AAcD,CA9CD;;AAgDAL,aAAa,CAACiB,SAAd,2CAA0BA,kBAA1B;eAEejB,a"}
package/lib/organism/review-stacked-slides/style.css CHANGED
@@ -43,7 +43,6 @@
43
43
  width: 100%;
44
44
  transform: translate(0, 0);
45
45
  transition: transform 0.5s ease-in;
46
-
47
46
  }
48
47
 
49
48
  .position1 {
@@ -97,7 +96,12 @@
97
96
  }
98
97
  }
99
98
 
100
- @keyframes slideOutAndIn {
99
+ .slideOutHideAndIn {
100
+ pointer-events: none;
101
+ animation: slideOutHideAndSlideIn 2s ease forwards;
102
+ }
103
+
104
+ @keyframes slideOutAndInPosition4 {
101
105
  0% {
102
106
  width: 100%;
103
107
  z-index: 55;
@@ -120,14 +124,121 @@
120
124
  }
121
125
  }
122
126
 
123
- .slideOutHideAndIn {
127
+ .slideOutAndIn4 {
124
128
  pointer-events: none;
125
- animation: slideOutHideAndSlideIn 2s ease forwards;
129
+ animation: slideOutAndInPosition4 2s ease forwards;
130
+ }
131
+
132
+ @keyframes slideOutAndInPosition3 {
133
+ 0% {
134
+ width: 100%;
135
+ z-index: 55;
136
+ transform: translate(0, 0);
137
+ }
138
+ 50% {
139
+ width: 97%;
140
+ z-index: 50;
141
+ transform: translate(0, 1000px);
142
+ }
143
+ 60% {
144
+ width: 95%;
145
+ z-index: 30;
146
+ transform: translate(3.2%, 900px);
147
+ }
148
+ 100% {
149
+ z-index: 35;
150
+ width: 94%;
151
+ transform: translate(2.4%, -24px);
152
+ }
153
+ }
154
+
155
+ .slideOutAndIn3 {
156
+ pointer-events: none;
157
+ animation: slideOutAndInPosition3 2s ease forwards;
158
+ }
159
+
160
+ @keyframes slideOutAndInPosition2 {
161
+ 0% {
162
+ width: 100%;
163
+ z-index: 55;
164
+ transform: translate(0, 0);
165
+ }
166
+ 50% {
167
+ width: 97%;
168
+ z-index: 50;
169
+ transform: translate(0, 1000px);
170
+ }
171
+ 60% {
172
+ width: 95%;
173
+ z-index: 30;
174
+ transform: translate(3.2%, 900px);
175
+ }
176
+ 100% {
177
+ z-index: 40;
178
+ width: 96%;
179
+ transform: translate(1.6%, -16px);
180
+ }
181
+ }
182
+
183
+ .slideOutAndIn2 {
184
+ pointer-events: none;
185
+ animation: slideOutAndInPosition2 2s ease forwards;
186
+ }
187
+
188
+ @keyframes slideOutAndInPosition1 {
189
+ 0% {
190
+ width: 100%;
191
+ z-index: 55;
192
+ transform: translate(0, 0);
193
+ }
194
+ 50% {
195
+ width: 97%;
196
+ z-index: 50;
197
+ transform: translate(0, 1000px);
198
+ }
199
+ 60% {
200
+ width: 95%;
201
+ z-index: 30;
202
+ transform: translate(3.2%, 900px);
203
+ }
204
+ 100% {
205
+ z-index: 45;
206
+ width: 98%;
207
+ transform: translate(0.8%, -8px);
208
+ }
209
+ }
210
+
211
+ .slideOutAndIn1 {
212
+ pointer-events: none;
213
+ animation: slideOutAndInPosition1 2s ease forwards;
214
+ }
215
+
216
+ @keyframes slideOutAndInPosition0 {
217
+ 0% {
218
+ width: 100%;
219
+ z-index: 55;
220
+ transform: translate(0, 0);
221
+ }
222
+ 50% {
223
+ width: 97%;
224
+ z-index: 50;
225
+ transform: translate(0, 1000px);
226
+ }
227
+ 60% {
228
+ width: 95%;
229
+ z-index: 30;
230
+ transform: translate(3.2%, 900px);
231
+ }
232
+ 100% {
233
+ z-index: 55;
234
+ width: 100%;
235
+ transform: translate(0, 0);
236
+ }
126
237
  }
127
238
 
128
- .slideOutAndIn {
239
+ .slideOutAndIn0 {
129
240
  pointer-events: none;
130
- animation: slideOutAndIn 2s ease forwards;
241
+ animation: slideOutAndInPosition0 2s ease forwards;
131
242
  }
132
243
 
133
244
  .hiddenSlide {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coorpacademy/components",
3
- "version": "10.28.0",
3
+ "version": "10.28.1-alpha.0+4d8d7fb77",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
@@ -157,5 +157,5 @@
157
157
  "last 2 versions",
158
158
  "IE 11"
159
159
  ],
160
- "gitHead": "469c5b379929740760111811fcf27181d5ba7291"
160
+ "gitHead": "4d8d7fb7752675d185d05090a43f4812c72e95e8"
161
161
  }