@coorpacademy/components 10.5.1 → 10.5.2
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/es/atom/card-image-preview/test/fixtures.js +0 -30
- package/es/atom/card-image-preview/test/fixtures.js.map +1 -1
- package/es/molecule/draggable/index.js +56 -0
- package/es/molecule/draggable/index.js.map +1 -0
- package/es/molecule/draggable/style.css +77 -0
- package/es/molecule/draggable/test/fixtures/default.js +12 -0
- package/es/molecule/draggable/test/fixtures/default.js.map +1 -0
- package/es/molecule/draggable/test/fixtures.js +13 -0
- package/es/molecule/draggable/test/fixtures.js.map +1 -0
- package/es/molecule/search/test/fixtures.js +15 -0
- package/es/molecule/search/test/fixtures.js.map +1 -0
- package/es/molecule/setup-section/index.js +2 -23
- package/es/molecule/setup-section/index.js.map +1 -1
- package/es/molecule/setup-section/style.css +1 -26
- package/es/molecule/setup-sections/index.js +3 -55
- package/es/molecule/setup-sections/index.js.map +1 -1
- package/es/molecule/setup-sections/style.css +0 -52
- package/es/molecule/setup-sections/test/on-drop.js +1 -1
- package/es/molecule/setup-sections/test/on-drop.js.map +1 -1
- package/es/template/app-player/popin-end/test/fixtures.js +2 -0
- package/es/template/app-player/popin-end/test/fixtures.js.map +1 -1
- package/lib/atom/card-image-preview/test/fixtures.js +0 -45
- package/lib/atom/card-image-preview/test/fixtures.js.map +1 -1
- package/lib/molecule/draggable/index.js +71 -0
- package/lib/molecule/draggable/index.js.map +1 -0
- package/lib/molecule/draggable/style.css +77 -0
- package/lib/molecule/draggable/test/fixtures/default.js +17 -0
- package/lib/molecule/draggable/test/fixtures/default.js.map +1 -0
- package/lib/molecule/draggable/test/fixtures.js +22 -0
- package/lib/molecule/draggable/test/fixtures.js.map +1 -0
- package/lib/molecule/search/test/fixtures.js +25 -0
- package/lib/molecule/search/test/fixtures.js.map +1 -0
- package/lib/molecule/setup-section/index.js +2 -21
- package/lib/molecule/setup-section/index.js.map +1 -1
- package/lib/molecule/setup-section/style.css +1 -26
- package/lib/molecule/setup-sections/index.js +3 -55
- package/lib/molecule/setup-sections/index.js.map +1 -1
- package/lib/molecule/setup-sections/style.css +0 -52
- package/lib/molecule/setup-sections/test/on-drop.js +1 -1
- package/lib/molecule/setup-sections/test/on-drop.js.map +1 -1
- package/lib/template/app-player/popin-end/test/fixtures.js +3 -0
- package/lib/template/app-player/popin-end/test/fixtures.js.map +1 -1
- package/package.json +2 -2
|
@@ -2,44 +2,14 @@ import test from 'ava';
|
|
|
2
2
|
import forEach from 'lodash/forEach';
|
|
3
3
|
import renderComponentMacro from '../../../test/helpers/render-component';
|
|
4
4
|
import AtomCardImagePreview from '..';
|
|
5
|
-
import fixtureAdaptivAndDisabled from './fixtures/adaptiv-and-disabled';
|
|
6
|
-
import fixtureAdaptiv from './fixtures/adaptiv';
|
|
7
|
-
import fixtureArabic from './fixtures/arabic';
|
|
8
|
-
import fixtureArticle from './fixtures/article';
|
|
9
|
-
import fixtureCoorpmanager from './fixtures/coorpmanager';
|
|
10
5
|
import fixtureDefault from './fixtures/default';
|
|
11
|
-
import fixtureDisabled from './fixtures/disabled';
|
|
12
6
|
import fixtureEmpty from './fixtures/empty';
|
|
13
|
-
import fixtureExternalContent from './fixtures/external-content';
|
|
14
|
-
import fixtureFavorite from './fixtures/favorite';
|
|
15
|
-
import fixtureFreerunAndDisabled from './fixtures/freerun-and-disabled';
|
|
16
|
-
import fixtureFreerun from './fixtures/freerun';
|
|
17
|
-
import fixturePodcast from './fixtures/podcast';
|
|
18
|
-
import fixtureScorm from './fixtures/scorm';
|
|
19
|
-
import fixtureSelectableFalse from './fixtures/selectable-false';
|
|
20
|
-
import fixtureSelectableTrue from './fixtures/selectable-true';
|
|
21
|
-
import fixtureVideo from './fixtures/video';
|
|
22
7
|
test('Atom › AtomCardImagePreview > should have valid propTypes', t => {
|
|
23
8
|
t.pass();
|
|
24
9
|
forEach(AtomCardImagePreview.propTypes, (value, key) => {
|
|
25
10
|
t.not(value, undefined, `PropType for "Atom.AtomCardImagePreview.propTypes.${key}" may not be undefined. Did you mistype the propTypes definition?`);
|
|
26
11
|
});
|
|
27
12
|
});
|
|
28
|
-
test('Atom › AtomCardImagePreview › AdaptivAndDisabled › should be rendered', renderComponentMacro, AtomCardImagePreview, fixtureAdaptivAndDisabled);
|
|
29
|
-
test('Atom › AtomCardImagePreview › Adaptiv › should be rendered', renderComponentMacro, AtomCardImagePreview, fixtureAdaptiv);
|
|
30
|
-
test('Atom › AtomCardImagePreview › Arabic › should be rendered', renderComponentMacro, AtomCardImagePreview, fixtureArabic);
|
|
31
|
-
test('Atom › AtomCardImagePreview › Article › should be rendered', renderComponentMacro, AtomCardImagePreview, fixtureArticle);
|
|
32
|
-
test('Atom › AtomCardImagePreview › Coorpmanager › should be rendered', renderComponentMacro, AtomCardImagePreview, fixtureCoorpmanager);
|
|
33
13
|
test('Atom › AtomCardImagePreview › Default › should be rendered', renderComponentMacro, AtomCardImagePreview, fixtureDefault);
|
|
34
|
-
test('Atom › AtomCardImagePreview › Disabled › should be rendered', renderComponentMacro, AtomCardImagePreview, fixtureDisabled);
|
|
35
14
|
test('Atom › AtomCardImagePreview › Empty › should be rendered', renderComponentMacro, AtomCardImagePreview, fixtureEmpty);
|
|
36
|
-
test('Atom › AtomCardImagePreview › ExternalContent › should be rendered', renderComponentMacro, AtomCardImagePreview, fixtureExternalContent);
|
|
37
|
-
test('Atom › AtomCardImagePreview › Favorite › should be rendered', renderComponentMacro, AtomCardImagePreview, fixtureFavorite);
|
|
38
|
-
test('Atom › AtomCardImagePreview › FreerunAndDisabled › should be rendered', renderComponentMacro, AtomCardImagePreview, fixtureFreerunAndDisabled);
|
|
39
|
-
test('Atom › AtomCardImagePreview › Freerun › should be rendered', renderComponentMacro, AtomCardImagePreview, fixtureFreerun);
|
|
40
|
-
test('Atom › AtomCardImagePreview › Podcast › should be rendered', renderComponentMacro, AtomCardImagePreview, fixturePodcast);
|
|
41
|
-
test('Atom › AtomCardImagePreview › Scorm › should be rendered', renderComponentMacro, AtomCardImagePreview, fixtureScorm);
|
|
42
|
-
test('Atom › AtomCardImagePreview › SelectableFalse › should be rendered', renderComponentMacro, AtomCardImagePreview, fixtureSelectableFalse);
|
|
43
|
-
test('Atom › AtomCardImagePreview › SelectableTrue › should be rendered', renderComponentMacro, AtomCardImagePreview, fixtureSelectableTrue);
|
|
44
|
-
test('Atom › AtomCardImagePreview › Video › should be rendered', renderComponentMacro, AtomCardImagePreview, fixtureVideo);
|
|
45
15
|
//# sourceMappingURL=fixtures.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/atom/card-image-preview/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","AtomCardImagePreview","
|
|
1
|
+
{"version":3,"sources":["../../../../src/atom/card-image-preview/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","AtomCardImagePreview","fixtureDefault","fixtureEmpty","t","pass","propTypes","value","key","not","undefined"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,KAAjB;AACA,OAAOC,OAAP,MAAoB,gBAApB;AACA,OAAOC,oBAAP,MAAiC,wCAAjC;AACA,OAAOC,oBAAP,MAAiC,IAAjC;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AAEAL,IAAI,CAAC,2DAAD,EAA8DM,CAAC,IAAI;AACrEA,EAAAA,CAAC,CAACC,IAAF;AACAN,EAAAA,OAAO,CAACE,oBAAoB,CAACK,SAAtB,EAAiC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACtDJ,IAAAA,CAAC,CAACK,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,qDAAoDF,GAAI,mEAAjF;AACD,GAFM,CAAP;AAGD,CALG,CAAJ;AAOAV,IAAI,CAAC,4DAAD,EAA+DE,oBAA/D,EAAqFC,oBAArF,EAA2GC,cAA3G,CAAJ;AACAJ,IAAI,CAAC,0DAAD,EAA6DE,oBAA7D,EAAmFC,oBAAnF,EAAyGE,YAAzG,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport AtomCardImagePreview from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureEmpty from './fixtures/empty';\n\ntest('Atom › AtomCardImagePreview > should have valid propTypes', t => {\n t.pass();\n forEach(AtomCardImagePreview.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Atom.AtomCardImagePreview.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Atom › AtomCardImagePreview › Default › should be rendered', renderComponentMacro, AtomCardImagePreview, fixtureDefault);\ntest('Atom › AtomCardImagePreview › Empty › should be rendered', renderComponentMacro, AtomCardImagePreview, fixtureEmpty);\n"],"file":"fixtures.js"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import React, { useCallback } from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import classnames from 'classnames';
|
|
4
|
+
import style from './style.css';
|
|
5
|
+
|
|
6
|
+
const preventDefault = e => e.preventDefault();
|
|
7
|
+
|
|
8
|
+
const stopPropagation = e => e.stopPropagation();
|
|
9
|
+
|
|
10
|
+
const Draggable = props => {
|
|
11
|
+
const {
|
|
12
|
+
id,
|
|
13
|
+
dragging = false,
|
|
14
|
+
onDragStart,
|
|
15
|
+
onDragOver,
|
|
16
|
+
onDragLeave,
|
|
17
|
+
onDrop,
|
|
18
|
+
children
|
|
19
|
+
} = props;
|
|
20
|
+
const dragStartHandler = useCallback(e => {
|
|
21
|
+
stopPropagation(e);
|
|
22
|
+
onDragStart(id);
|
|
23
|
+
}, [id, onDragStart]);
|
|
24
|
+
const dragOverHandler = useCallback(e => {
|
|
25
|
+
preventDefault(e);
|
|
26
|
+
onDragOver(id);
|
|
27
|
+
}, [id, onDragOver]);
|
|
28
|
+
const dragLeaveHandler = useCallback(e => {
|
|
29
|
+
preventDefault(e);
|
|
30
|
+
onDragLeave(id);
|
|
31
|
+
}, [id, onDragLeave]);
|
|
32
|
+
const dropHandler = useCallback(e => {
|
|
33
|
+
preventDefault(e);
|
|
34
|
+
onDrop(id);
|
|
35
|
+
}, [id, onDrop]);
|
|
36
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
37
|
+
className: classnames(dragging ? style.dragging : null, style.section, style.draggable),
|
|
38
|
+
onDragStart: dragStartHandler,
|
|
39
|
+
onDragOver: dragOverHandler,
|
|
40
|
+
onDragLeave: dragLeaveHandler,
|
|
41
|
+
onDrop: dropHandler,
|
|
42
|
+
draggable: true
|
|
43
|
+
}, children);
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
Draggable.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
47
|
+
id: PropTypes.string,
|
|
48
|
+
dragging: PropTypes.bool,
|
|
49
|
+
onDragStart: PropTypes.func,
|
|
50
|
+
onDragOver: PropTypes.func,
|
|
51
|
+
onDragLeave: PropTypes.func,
|
|
52
|
+
onDrop: PropTypes.func,
|
|
53
|
+
children: PropTypes.element
|
|
54
|
+
} : {};
|
|
55
|
+
export default Draggable;
|
|
56
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/draggable/index.js"],"names":["React","useCallback","PropTypes","classnames","style","preventDefault","e","stopPropagation","Draggable","props","id","dragging","onDragStart","onDragOver","onDragLeave","onDrop","children","dragStartHandler","dragOverHandler","dragLeaveHandler","dropHandler","section","draggable","propTypes","string","bool","func","element"],"mappings":"AAAA,OAAOA,KAAP,IAAeC,WAAf,QAAiC,OAAjC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,cAAc,GAAGC,CAAC,IAAIA,CAAC,CAACD,cAAF,EAA5B;;AACA,MAAME,eAAe,GAAGD,CAAC,IAAIA,CAAC,CAACC,eAAF,EAA7B;;AAEA,MAAMC,SAAS,GAAGC,KAAK,IAAI;AACzB,QAAM;AAACC,IAAAA,EAAD;AAAKC,IAAAA,QAAQ,GAAG,KAAhB;AAAuBC,IAAAA,WAAvB;AAAoCC,IAAAA,UAApC;AAAgDC,IAAAA,WAAhD;AAA6DC,IAAAA,MAA7D;AAAqEC,IAAAA;AAArE,MAAiFP,KAAvF;AAEA,QAAMQ,gBAAgB,GAAGhB,WAAW,CAClCK,CAAC,IAAI;AACHC,IAAAA,eAAe,CAACD,CAAD,CAAf;AACAM,IAAAA,WAAW,CAACF,EAAD,CAAX;AACD,GAJiC,EAKlC,CAACA,EAAD,EAAKE,WAAL,CALkC,CAApC;AAOA,QAAMM,eAAe,GAAGjB,WAAW,CACjCK,CAAC,IAAI;AACHD,IAAAA,cAAc,CAACC,CAAD,CAAd;AACAO,IAAAA,UAAU,CAACH,EAAD,CAAV;AACD,GAJgC,EAKjC,CAACA,EAAD,EAAKG,UAAL,CALiC,CAAnC;AAOA,QAAMM,gBAAgB,GAAGlB,WAAW,CAClCK,CAAC,IAAI;AACHD,IAAAA,cAAc,CAACC,CAAD,CAAd;AACAQ,IAAAA,WAAW,CAACJ,EAAD,CAAX;AACD,GAJiC,EAKlC,CAACA,EAAD,EAAKI,WAAL,CALkC,CAApC;AAOA,QAAMM,WAAW,GAAGnB,WAAW,CAC7BK,CAAC,IAAI;AACHD,IAAAA,cAAc,CAACC,CAAD,CAAd;AACAS,IAAAA,MAAM,CAACL,EAAD,CAAN;AACD,GAJ4B,EAK7B,CAACA,EAAD,EAAKK,MAAL,CAL6B,CAA/B;AAQA,sBACE;AACE,IAAA,SAAS,EAAEZ,UAAU,CAACQ,QAAQ,GAAGP,KAAK,CAACO,QAAT,GAAoB,IAA7B,EAAmCP,KAAK,CAACiB,OAAzC,EAAkDjB,KAAK,CAACkB,SAAxD,CADvB;AAEE,IAAA,WAAW,EAAEL,gBAFf;AAGE,IAAA,UAAU,EAAEC,eAHd;AAIE,IAAA,WAAW,EAAEC,gBAJf;AAKE,IAAA,MAAM,EAAEC,WALV;AAME,IAAA,SAAS;AANX,KAQGJ,QARH,CADF;AAYD,CA5CD;;AA6CAR,SAAS,CAACe,SAAV,2CAAsB;AACpBb,EAAAA,EAAE,EAAER,SAAS,CAACsB,MADM;AAEpBb,EAAAA,QAAQ,EAAET,SAAS,CAACuB,IAFA;AAGpBb,EAAAA,WAAW,EAAEV,SAAS,CAACwB,IAHH;AAIpBb,EAAAA,UAAU,EAAEX,SAAS,CAACwB,IAJF;AAKpBZ,EAAAA,WAAW,EAAEZ,SAAS,CAACwB,IALH;AAMpBX,EAAAA,MAAM,EAAEb,SAAS,CAACwB,IANE;AAOpBV,EAAAA,QAAQ,EAAEd,SAAS,CAACyB;AAPA,CAAtB;AAUA,eAAenB,SAAf","sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport style from './style.css';\n\nconst preventDefault = e => e.preventDefault();\nconst stopPropagation = e => e.stopPropagation();\n\nconst Draggable = props => {\n const {id, dragging = false, onDragStart, onDragOver, onDragLeave, onDrop, children} = props;\n\n const dragStartHandler = useCallback(\n e => {\n stopPropagation(e);\n onDragStart(id);\n },\n [id, onDragStart]\n );\n const dragOverHandler = useCallback(\n e => {\n preventDefault(e);\n onDragOver(id);\n },\n [id, onDragOver]\n );\n const dragLeaveHandler = useCallback(\n e => {\n preventDefault(e);\n onDragLeave(id);\n },\n [id, onDragLeave]\n );\n const dropHandler = useCallback(\n e => {\n preventDefault(e);\n onDrop(id);\n },\n [id, onDrop]\n );\n\n return (\n <div\n className={classnames(dragging ? style.dragging : null, style.section, style.draggable)}\n onDragStart={dragStartHandler}\n onDragOver={dragOverHandler}\n onDragLeave={dragLeaveHandler}\n onDrop={dropHandler}\n draggable\n >\n {children}\n </div>\n );\n};\nDraggable.propTypes = {\n id: PropTypes.string,\n dragging: PropTypes.bool,\n onDragStart: PropTypes.func,\n onDragOver: PropTypes.func,\n onDragLeave: PropTypes.func,\n onDrop: PropTypes.func,\n children: PropTypes.element\n};\n\nexport default Draggable;\n"],"file":"index.js"}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
@value breakpoints: "../../variables/breakpoints.css";
|
|
2
|
+
@value mobile from breakpoints;
|
|
3
|
+
@value colors: "../../variables/colors.css";
|
|
4
|
+
@value medium from colors;
|
|
5
|
+
@value xtraLightGrey from colors;
|
|
6
|
+
@value dark from colors;
|
|
7
|
+
@value cm_grey_100 from colors
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
.section {
|
|
11
|
+
border-top: 1px;
|
|
12
|
+
border-left: 1px;
|
|
13
|
+
border-right: 1px;
|
|
14
|
+
border-style: solid;
|
|
15
|
+
border-color: medium;
|
|
16
|
+
border-bottom: 0;
|
|
17
|
+
display: flex;
|
|
18
|
+
justify-content: center;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.section:last-child {
|
|
22
|
+
border-bottom: 1px solid medium;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.draggable {
|
|
26
|
+
cursor: grab;
|
|
27
|
+
position: relative;
|
|
28
|
+
background: transparent;
|
|
29
|
+
margin: 8px 0;
|
|
30
|
+
border-radius: 7px;
|
|
31
|
+
}
|
|
32
|
+
.draggable:hover{
|
|
33
|
+
background: rgba(0, 0, 0, 0.3);
|
|
34
|
+
}
|
|
35
|
+
.draggable:active{
|
|
36
|
+
background: transparent;
|
|
37
|
+
}
|
|
38
|
+
.draggable:before {
|
|
39
|
+
content: '.';
|
|
40
|
+
position: absolute;
|
|
41
|
+
left: 23px;
|
|
42
|
+
top: 5px;
|
|
43
|
+
width: 12px;
|
|
44
|
+
font-size: 25px;
|
|
45
|
+
color: medium;
|
|
46
|
+
pointer-events: none;
|
|
47
|
+
text-shadow: 0 0 medium, 0 5px medium, 0 10px medium, 0 15px medium,
|
|
48
|
+
5px 0 medium , 5px 5px medium, 5px 10px medium, 5px 15px medium;
|
|
49
|
+
}
|
|
50
|
+
.dragging {
|
|
51
|
+
background: rgba(0, 0, 0, 0.1);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.dragging:after {
|
|
55
|
+
position: absolute;
|
|
56
|
+
content: "";
|
|
57
|
+
left: 0;
|
|
58
|
+
top: 0;
|
|
59
|
+
bottom: 0;
|
|
60
|
+
right: 0;
|
|
61
|
+
background: color(black lightness(95%));
|
|
62
|
+
pointer-events: none;
|
|
63
|
+
box-sizing: border-box;
|
|
64
|
+
display: flex;
|
|
65
|
+
justify-content: center;
|
|
66
|
+
align-items: center;
|
|
67
|
+
color: dark;
|
|
68
|
+
font-family: 'Open Sans';
|
|
69
|
+
font-weight: 600;
|
|
70
|
+
font-size: 14px;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@media mobile {
|
|
74
|
+
.draggable:before {
|
|
75
|
+
content: none;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
props: {
|
|
3
|
+
id: 'draggableId',
|
|
4
|
+
dragging: true,
|
|
5
|
+
onDragStart: () => console.log('onDragStart'),
|
|
6
|
+
onDragOver: () => console.log('onDragOver'),
|
|
7
|
+
onDragLeave: () => console.log('onDragLeave'),
|
|
8
|
+
onDrop: () => console.log('onDrop'),
|
|
9
|
+
children: []
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=default.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/draggable/test/fixtures/default.js"],"names":["props","id","dragging","onDragStart","console","log","onDragOver","onDragLeave","onDrop","children"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,EAAE,EAAE,aADC;AAELC,IAAAA,QAAQ,EAAE,IAFL;AAGLC,IAAAA,WAAW,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,aAAZ,CAHd;AAILC,IAAAA,UAAU,EAAE,MAAMF,OAAO,CAACC,GAAR,CAAY,YAAZ,CAJb;AAKLE,IAAAA,WAAW,EAAE,MAAMH,OAAO,CAACC,GAAR,CAAY,aAAZ,CALd;AAMLG,IAAAA,MAAM,EAAE,MAAMJ,OAAO,CAACC,GAAR,CAAY,QAAZ,CANT;AAOLI,IAAAA,QAAQ,EAAE;AAPL;AADM,CAAf","sourcesContent":["export default {\n props: {\n id: 'draggableId',\n dragging: true,\n onDragStart: () => console.log('onDragStart'),\n onDragOver: () => console.log('onDragOver'),\n onDragLeave: () => console.log('onDragLeave'),\n onDrop: () => console.log('onDrop'),\n children: []\n }\n};\n"],"file":"default.js"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import test from 'ava';
|
|
2
|
+
import forEach from 'lodash/forEach';
|
|
3
|
+
import renderComponentMacro from '../../../test/helpers/render-component';
|
|
4
|
+
import MoleculeDraggable from '..';
|
|
5
|
+
import fixtureDefault from './fixtures/default';
|
|
6
|
+
test('Molecule › MoleculeDraggable > should have valid propTypes', t => {
|
|
7
|
+
t.pass();
|
|
8
|
+
forEach(MoleculeDraggable.propTypes, (value, key) => {
|
|
9
|
+
t.not(value, undefined, `PropType for "Molecule.MoleculeDraggable.propTypes.${key}" may not be undefined. Did you mistype the propTypes definition?`);
|
|
10
|
+
});
|
|
11
|
+
});
|
|
12
|
+
test('Molecule › MoleculeDraggable › Default › should be rendered', renderComponentMacro, MoleculeDraggable, fixtureDefault);
|
|
13
|
+
//# sourceMappingURL=fixtures.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/molecule/draggable/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","MoleculeDraggable","fixtureDefault","t","pass","propTypes","value","key","not","undefined"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,KAAjB;AACA,OAAOC,OAAP,MAAoB,gBAApB;AACA,OAAOC,oBAAP,MAAiC,wCAAjC;AACA,OAAOC,iBAAP,MAA8B,IAA9B;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AAEAJ,IAAI,CAAC,4DAAD,EAA+DK,CAAC,IAAI;AACtEA,EAAAA,CAAC,CAACC,IAAF;AACAL,EAAAA,OAAO,CAACE,iBAAiB,CAACI,SAAnB,EAA8B,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACnDJ,IAAAA,CAAC,CAACK,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,sDAAqDF,GAAI,mEAAlF;AACD,GAFM,CAAP;AAGD,CALG,CAAJ;AAOAT,IAAI,CAAC,6DAAD,EAAgEE,oBAAhE,EAAsFC,iBAAtF,EAAyGC,cAAzG,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeDraggable from '..';\nimport fixtureDefault from './fixtures/default';\n\ntest('Molecule › MoleculeDraggable > should have valid propTypes', t => {\n t.pass();\n forEach(MoleculeDraggable.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Molecule.MoleculeDraggable.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Molecule › MoleculeDraggable › Default › should be rendered', renderComponentMacro, MoleculeDraggable, fixtureDefault);\n"],"file":"fixtures.js"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import test from 'ava';
|
|
2
|
+
import forEach from 'lodash/forEach';
|
|
3
|
+
import renderComponentMacro from '../../../test/helpers/render-component';
|
|
4
|
+
import MoleculeSearch from '..';
|
|
5
|
+
import fixtureDefault from './fixtures/default';
|
|
6
|
+
import fixtureWithValue from './fixtures/with-value';
|
|
7
|
+
test('Molecule › MoleculeSearch > should have valid propTypes', t => {
|
|
8
|
+
t.pass();
|
|
9
|
+
forEach(MoleculeSearch.propTypes, (value, key) => {
|
|
10
|
+
t.not(value, undefined, `PropType for "Molecule.MoleculeSearch.propTypes.${key}" may not be undefined. Did you mistype the propTypes definition?`);
|
|
11
|
+
});
|
|
12
|
+
});
|
|
13
|
+
test('Molecule › MoleculeSearch › Default › should be rendered', renderComponentMacro, MoleculeSearch, fixtureDefault);
|
|
14
|
+
test('Molecule › MoleculeSearch › WithValue › should be rendered', renderComponentMacro, MoleculeSearch, fixtureWithValue);
|
|
15
|
+
//# sourceMappingURL=fixtures.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/molecule/search/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","MoleculeSearch","fixtureDefault","fixtureWithValue","t","pass","propTypes","value","key","not","undefined"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,KAAjB;AACA,OAAOC,OAAP,MAAoB,gBAApB;AACA,OAAOC,oBAAP,MAAiC,wCAAjC;AACA,OAAOC,cAAP,MAA2B,IAA3B;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,gBAAP,MAA6B,uBAA7B;AAEAL,IAAI,CAAC,yDAAD,EAA4DM,CAAC,IAAI;AACnEA,EAAAA,CAAC,CAACC,IAAF;AACAN,EAAAA,OAAO,CAACE,cAAc,CAACK,SAAhB,EAA2B,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAChDJ,IAAAA,CAAC,CAACK,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,mDAAkDF,GAAI,mEAA/E;AACD,GAFM,CAAP;AAGD,CALG,CAAJ;AAOAV,IAAI,CAAC,0DAAD,EAA6DE,oBAA7D,EAAmFC,cAAnF,EAAmGC,cAAnG,CAAJ;AACAJ,IAAI,CAAC,4DAAD,EAA+DE,oBAA/D,EAAqFC,cAArF,EAAqGE,gBAArG,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeSearch from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureWithValue from './fixtures/with-value';\n\ntest('Molecule › MoleculeSearch > should have valid propTypes', t => {\n t.pass();\n forEach(MoleculeSearch.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Molecule.MoleculeSearch.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Molecule › MoleculeSearch › Default › should be rendered', renderComponentMacro, MoleculeSearch, fixtureDefault);\ntest('Molecule › MoleculeSearch › WithValue › should be rendered', renderComponentMacro, MoleculeSearch, fixtureWithValue);\n"],"file":"fixtures.js"}
|
|
@@ -4,7 +4,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
4
4
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import PropTypes from 'prop-types';
|
|
7
|
-
import { NovaCompositionNavigationArrowDown as ArrowDownIcon, NovaCompositionNavigationArrowTop as ArrowUpIcon } from '@coorpacademy/nova-icons';
|
|
8
7
|
import Provider from '../../atom/provider';
|
|
9
8
|
import InputSwitch from '../../atom/input-switch';
|
|
10
9
|
import RadioGroup from '../../atom/radio-group';
|
|
@@ -45,23 +44,13 @@ ContentTypesToggler.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
45
44
|
|
|
46
45
|
const SetupSection = (props, context) => {
|
|
47
46
|
const {
|
|
48
|
-
translate
|
|
49
|
-
skin
|
|
47
|
+
translate
|
|
50
48
|
} = context;
|
|
51
|
-
|
|
52
|
-
const brand = _get('common.brand', skin);
|
|
53
|
-
|
|
54
|
-
const medium = _get('common.medium', skin);
|
|
55
|
-
|
|
56
49
|
const {
|
|
57
50
|
title,
|
|
58
|
-
onUp,
|
|
59
|
-
onDown,
|
|
60
51
|
display,
|
|
61
52
|
contentTypes
|
|
62
53
|
} = props;
|
|
63
|
-
const colorUp = onDown ? brand : medium;
|
|
64
|
-
const colorDown = onUp ? brand : medium;
|
|
65
54
|
return /*#__PURE__*/React.createElement("div", {
|
|
66
55
|
className: style.wrapper
|
|
67
56
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -72,17 +61,7 @@ const SetupSection = (props, context) => {
|
|
|
72
61
|
contentTypes: contentTypes
|
|
73
62
|
}), /*#__PURE__*/React.createElement("div", {
|
|
74
63
|
className: style.label
|
|
75
|
-
}, translate('Show')), /*#__PURE__*/React.createElement(InputSwitch, display)
|
|
76
|
-
className: style.arrowSection
|
|
77
|
-
}, /*#__PURE__*/React.createElement(ArrowDownIcon, {
|
|
78
|
-
color: colorUp,
|
|
79
|
-
className: onDown ? style.arrow : style.disabled,
|
|
80
|
-
onClick: onDown
|
|
81
|
-
}), /*#__PURE__*/React.createElement(ArrowUpIcon, {
|
|
82
|
-
color: colorDown,
|
|
83
|
-
className: onUp ? style.arrow : style.disabled,
|
|
84
|
-
onClick: onUp
|
|
85
|
-
}))));
|
|
64
|
+
}, translate('Show')), /*#__PURE__*/React.createElement(InputSwitch, display)));
|
|
86
65
|
};
|
|
87
66
|
|
|
88
67
|
SetupSection.contextTypes = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/molecule/setup-section/index.js"],"names":["React","PropTypes","
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/setup-section/index.js"],"names":["React","PropTypes","Provider","InputSwitch","RadioGroup","style","ContentTypesToggler","props","context","skin","contentTypes","brand","orange","contentTypesColor","contentTypeWrapper","contextTypes","childContextTypes","propTypes","shape","modified","bool","SetupSection","translate","title","display","wrapper","settings","label","string","isRequired","onUp","func","onDown"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,WAAP,MAAwB,yBAAxB;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,mBAAmB,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AAC9C,QAAM;AAACC,IAAAA;AAAD,MAASD,OAAf;AACA,QAAM;AAACE,IAAAA;AAAD,MAAiBH,KAAvB;;AAEA,MAAI,CAACG,YAAL,EAAmB;AACjB,WAAO,IAAP;AACD;;AAED,QAAMC,KAAK,GAAG,KAAI,cAAJ,EAAoBF,IAApB,CAAd;;AACA,QAAMG,MAAM,GAAG,KAAI,eAAJ,EAAqBH,IAArB,CAAf;;AACA,QAAMI,iBAAiB,GAAG,KAAI,UAAJ,EAAgBH,YAAhB,IAAgCE,MAAhC,GAAyCD,KAAnE;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEN,KAAK,CAACS;AAAtB,kBACE,oBAAC,UAAD,eAAgBJ,YAAhB;AAA8B,IAAA,KAAK,EAAEG;AAArC,KADF,CADF;AAKD,CAjBD;;AAmBAP,mBAAmB,CAACS,YAApB,GAAmC;AACjCN,EAAAA,IAAI,EAAEP,QAAQ,CAACc,iBAAT,CAA2BP;AADA,CAAnC;AAIAH,mBAAmB,CAACW,SAApB,2CAAgC;AAC9BP,EAAAA,YAAY,EAAET,SAAS,CAACiB,KAAV,uBACTd,UAAU,CAACa,SADF;AAEZE,IAAAA,QAAQ,EAAElB,SAAS,CAACmB;AAFR;AADgB,CAAhC;;AAOA,MAAMC,YAAY,GAAG,CAACd,KAAD,EAAQC,OAAR,KAAoB;AACvC,QAAM;AAACc,IAAAA;AAAD,MAAcd,OAApB;AAEA,QAAM;AAACe,IAAAA,KAAD;AAAQC,IAAAA,OAAR;AAAiBd,IAAAA;AAAjB,MAAiCH,KAAvC;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEF,KAAK,CAACoB;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEpB,KAAK,CAACkB;AAAtB,KAA8BA,KAA9B,CADF,eAEE;AAAK,IAAA,SAAS,EAAElB,KAAK,CAACqB;AAAtB,kBACE,oBAAC,mBAAD;AAAqB,IAAA,YAAY,EAAEhB;AAAnC,IADF,eAEE;AAAK,IAAA,SAAS,EAAEL,KAAK,CAACsB;AAAtB,KAA8BL,SAAS,CAAC,MAAD,CAAvC,CAFF,eAGE,oBAAC,WAAD,EAAiBE,OAAjB,CAHF,CAFF,CADF;AAUD,CAfD;;AAiBAH,YAAY,CAACN,YAAb,GAA4B;AAC1BO,EAAAA,SAAS,EAAEpB,QAAQ,CAACc,iBAAT,CAA2BM,SADZ;AAE1Bb,EAAAA,IAAI,EAAEP,QAAQ,CAACc,iBAAT,CAA2BP;AAFP,CAA5B;AAKAY,YAAY,CAACJ,SAAb,2CAAyB;AACvBM,EAAAA,KAAK,EAAEtB,SAAS,CAAC2B,MAAV,CAAiBC,UADD;AAEvBC,EAAAA,IAAI,EAAE7B,SAAS,CAAC8B,IAFO;AAGvBC,EAAAA,MAAM,EAAE/B,SAAS,CAAC8B,IAHK;AAIvBP,EAAAA,OAAO,EAAEvB,SAAS,CAACiB,KAAV,CAAgBf,WAAW,CAACc,SAA5B,CAJc;AAKvBP,EAAAA,YAAY,EAAEJ,mBAAmB,CAACW,SAApB,CAA8BP;AALrB,CAAzB;AAQA,eAAeW,YAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {get} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport InputSwitch from '../../atom/input-switch';\nimport RadioGroup from '../../atom/radio-group';\nimport style from './style.css';\n\nconst ContentTypesToggler = (props, context) => {\n const {skin} = context;\n const {contentTypes} = props;\n\n if (!contentTypes) {\n return null;\n }\n\n const brand = get('common.brand', skin);\n const orange = get('common.orange', skin);\n const contentTypesColor = get('modified', contentTypes) ? orange : brand;\n\n return (\n <div className={style.contentTypeWrapper}>\n <RadioGroup {...contentTypes} color={contentTypesColor} />\n </div>\n );\n};\n\nContentTypesToggler.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nContentTypesToggler.propTypes = {\n contentTypes: PropTypes.shape({\n ...RadioGroup.propTypes,\n modified: PropTypes.bool\n })\n};\n\nconst SetupSection = (props, context) => {\n const {translate} = context;\n\n const {title, display, contentTypes} = props;\n\n return (\n <div className={style.wrapper}>\n <div className={style.title}>{title}</div>\n <div className={style.settings}>\n <ContentTypesToggler contentTypes={contentTypes} />\n <div className={style.label}>{translate('Show')}</div>\n <InputSwitch {...display} />\n </div>\n </div>\n );\n};\n\nSetupSection.contextTypes = {\n translate: Provider.childContextTypes.translate,\n skin: Provider.childContextTypes.skin\n};\n\nSetupSection.propTypes = {\n title: PropTypes.string.isRequired,\n onUp: PropTypes.func,\n onDown: PropTypes.func,\n display: PropTypes.shape(InputSwitch.propTypes),\n contentTypes: ContentTypesToggler.propTypes.contentTypes\n};\n\nexport default SetupSection;\n"],"file":"index.js"}
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
display: flex;
|
|
13
13
|
align-items: center;
|
|
14
14
|
justify-content: space-between;
|
|
15
|
-
padding: 0 24px;
|
|
15
|
+
padding: 0 24px 0 48px;
|
|
16
16
|
box-sizing: border-box;
|
|
17
17
|
}
|
|
18
18
|
|
|
@@ -37,32 +37,7 @@
|
|
|
37
37
|
margin-left: 30px;
|
|
38
38
|
margin-right: 16px;
|
|
39
39
|
}
|
|
40
|
-
.arrowSection {
|
|
41
|
-
display: none
|
|
42
|
-
}
|
|
43
|
-
.arrow {
|
|
44
|
-
left: 50%;
|
|
45
|
-
top: 50%;
|
|
46
|
-
margin: 0 0 0 24px;
|
|
47
|
-
width: 30px;
|
|
48
|
-
height: 30px;
|
|
49
|
-
cursor: pointer;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.arrow:hover path:last-child {
|
|
53
|
-
fill: primaryAdd1;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.disabled {
|
|
57
|
-
composes: arrow;
|
|
58
|
-
pointer-events: none;
|
|
59
|
-
}
|
|
60
40
|
|
|
61
41
|
.contentTypeWrapper {
|
|
62
42
|
width: 310px;
|
|
63
43
|
}
|
|
64
|
-
@media mobile {
|
|
65
|
-
.arrowSection {
|
|
66
|
-
display: block;
|
|
67
|
-
}
|
|
68
|
-
}
|
|
@@ -2,61 +2,11 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
2
2
|
|
|
3
3
|
import React, { useState, useCallback } from 'react';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
|
-
import
|
|
5
|
+
import Draggable from '../draggable';
|
|
6
6
|
import SetupSection from '../setup-section';
|
|
7
7
|
import Loader from '../../atom/loader';
|
|
8
8
|
import style from './style.css';
|
|
9
9
|
|
|
10
|
-
const preventDefault = e => e.preventDefault();
|
|
11
|
-
|
|
12
|
-
const stopPropagation = e => e.stopPropagation();
|
|
13
|
-
|
|
14
|
-
const Draggable = props => {
|
|
15
|
-
const {
|
|
16
|
-
id,
|
|
17
|
-
dragging = false,
|
|
18
|
-
onDragStart,
|
|
19
|
-
onDragOver,
|
|
20
|
-
onDragLeave,
|
|
21
|
-
onDrop,
|
|
22
|
-
children
|
|
23
|
-
} = props;
|
|
24
|
-
const dragStartHandler = useCallback(e => {
|
|
25
|
-
stopPropagation(e);
|
|
26
|
-
onDragStart(id);
|
|
27
|
-
}, [id, onDragStart]);
|
|
28
|
-
const dragOverHandler = useCallback(e => {
|
|
29
|
-
preventDefault(e);
|
|
30
|
-
onDragOver(id);
|
|
31
|
-
}, [id, onDragOver]);
|
|
32
|
-
const dragLeaveHandler = useCallback(e => {
|
|
33
|
-
preventDefault(e);
|
|
34
|
-
onDragLeave(id);
|
|
35
|
-
}, [id, onDragLeave]);
|
|
36
|
-
const dropHandler = useCallback(e => {
|
|
37
|
-
preventDefault(e);
|
|
38
|
-
onDrop(id);
|
|
39
|
-
}, [id, onDrop]);
|
|
40
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
41
|
-
className: classnames(dragging ? style.dragging : null, style.section, style.draggable),
|
|
42
|
-
onDragStart: dragStartHandler,
|
|
43
|
-
onDragOver: dragOverHandler,
|
|
44
|
-
onDragLeave: dragLeaveHandler,
|
|
45
|
-
onDrop: dropHandler,
|
|
46
|
-
draggable: true
|
|
47
|
-
}, children);
|
|
48
|
-
};
|
|
49
|
-
|
|
50
|
-
Draggable.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
51
|
-
id: PropTypes.string,
|
|
52
|
-
dragging: PropTypes.bool,
|
|
53
|
-
onDragStart: PropTypes.func,
|
|
54
|
-
onDragOver: PropTypes.func,
|
|
55
|
-
onDragLeave: PropTypes.func,
|
|
56
|
-
onDrop: PropTypes.func,
|
|
57
|
-
children: PropTypes.element
|
|
58
|
-
} : {};
|
|
59
|
-
|
|
60
10
|
const Loading = () => /*#__PURE__*/React.createElement("div", {
|
|
61
11
|
className: style.loading
|
|
62
12
|
}, /*#__PURE__*/React.createElement(Loader, null));
|
|
@@ -84,7 +34,7 @@ const SetupSections = ({
|
|
|
84
34
|
setDragFrom(null);
|
|
85
35
|
}, [onDrop, setDragTo, setDragFrom, dragFrom]);
|
|
86
36
|
if (loading) return /*#__PURE__*/React.createElement(Loading, null);
|
|
87
|
-
const sectionsView = sections.map(
|
|
37
|
+
const sectionsView = sections.map(section => /*#__PURE__*/React.createElement(Draggable, {
|
|
88
38
|
key: section.id,
|
|
89
39
|
id: section.id,
|
|
90
40
|
dragging: dragTo === section.id,
|
|
@@ -93,9 +43,7 @@ const SetupSections = ({
|
|
|
93
43
|
onDragLeave: dragLeaveHandler,
|
|
94
44
|
onDrop: dropHandler
|
|
95
45
|
}, /*#__PURE__*/React.createElement(SetupSection, _extends({}, section, {
|
|
96
|
-
key: section.id
|
|
97
|
-
onUp: index === 0 ? null : section.onUp,
|
|
98
|
-
onDown: index === sections.length - 1 ? null : section.onDown
|
|
46
|
+
key: section.id
|
|
99
47
|
}))));
|
|
100
48
|
return /*#__PURE__*/React.createElement("div", null, sectionsView);
|
|
101
49
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/molecule/setup-sections/index.js"],"names":["React","useState","useCallback","PropTypes","
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/setup-sections/index.js"],"names":["React","useState","useCallback","PropTypes","Draggable","SetupSection","Loader","style","Loading","loading","SetupSections","sections","onDrop","dragTo","setDragTo","dragFrom","setDragFrom","dragStartHandler","id","dragOverHandler","dragLeaveHandler","dropHandler","sectionsView","map","section","propTypes","arrayOf","shape","bool","func"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,QAAf,EAAyBC,WAAzB,QAA2C,OAA3C;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,SAAP,MAAsB,cAAtB;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,OAAO,GAAG,mBACd;AAAK,EAAA,SAAS,EAAED,KAAK,CAACE;AAAtB,gBACE,oBAAC,MAAD,OADF,CADF;;AAMA,MAAMC,aAAa,GAAG,CAAC;AAACC,EAAAA,QAAD;AAAWF,EAAAA,OAAX;AAAoBG,EAAAA;AAApB,CAAD,KAAiC;AACrD,QAAM,CAACC,MAAD,EAASC,SAAT,IAAsBb,QAAQ,CAAC,IAAD,CAApC;AACA,QAAM,CAACc,QAAD,EAAWC,WAAX,IAA0Bf,QAAQ,CAAC,IAAD,CAAxC;AAEA,QAAMgB,gBAAgB,GAAGf,WAAW,CAClCgB,EAAE,IAAI;AACJF,IAAAA,WAAW,CAACE,EAAD,CAAX;AACD,GAHiC,EAIlC,CAACF,WAAD,CAJkC,CAApC;AAOA,QAAMG,eAAe,GAAGjB,WAAW,CACjCgB,EAAE,IAAI;AACJ,QAAIL,MAAM,KAAKK,EAAf,EAAmB;AACnBJ,IAAAA,SAAS,CAACI,EAAD,CAAT;AACD,GAJgC,EAKjC,CAACL,MAAD,EAASC,SAAT,CALiC,CAAnC;AAQA,QAAMM,gBAAgB,GAAGlB,WAAW,CAClCgB,EAAE,IAAI;AACJJ,IAAAA,SAAS,CAAC,IAAD,CAAT;AACD,GAHiC,EAIlC,CAACA,SAAD,CAJkC,CAApC;AAOA,QAAMO,WAAW,GAAGnB,WAAW,CAC7BgB,EAAE,IAAI;AACJ,QAAIN,MAAM,IAAIG,QAAd,EAAwBH,MAAM,CAACG,QAAD,EAAWG,EAAX,CAAN;AAExBJ,IAAAA,SAAS,CAAC,IAAD,CAAT;AACAE,IAAAA,WAAW,CAAC,IAAD,CAAX;AACD,GAN4B,EAO7B,CAACJ,MAAD,EAASE,SAAT,EAAoBE,WAApB,EAAiCD,QAAjC,CAP6B,CAA/B;AAUA,MAAIN,OAAJ,EAAa,oBAAO,oBAAC,OAAD,OAAP;AAEb,QAAMa,YAAY,GAAGX,QAAQ,CAACY,GAAT,CAAaC,OAAO,iBACvC,oBAAC,SAAD;AACE,IAAA,GAAG,EAAEA,OAAO,CAACN,EADf;AAEE,IAAA,EAAE,EAAEM,OAAO,CAACN,EAFd;AAGE,IAAA,QAAQ,EAAEL,MAAM,KAAKW,OAAO,CAACN,EAH/B;AAIE,IAAA,WAAW,EAAED,gBAJf;AAKE,IAAA,UAAU,EAAEE,eALd;AAME,IAAA,WAAW,EAAEC,gBANf;AAOE,IAAA,MAAM,EAAEC;AAPV,kBASE,oBAAC,YAAD,eAAkBG,OAAlB;AAA2B,IAAA,GAAG,EAAEA,OAAO,CAACN;AAAxC,KATF,CADmB,CAArB;AAaA,sBAAO,iCAAMI,YAAN,CAAP;AACD,CApDD;;AAsDAZ,aAAa,CAACe,SAAd,2CAA0B;AACxBd,EAAAA,QAAQ,EAAER,SAAS,CAACuB,OAAV,CAAkBvB,SAAS,CAACwB,KAAV,CAAgBtB,YAAY,CAACoB,SAA7B,CAAlB,CADc;AAExBhB,EAAAA,OAAO,EAAEN,SAAS,CAACyB,IAFK;AAGxBhB,EAAAA,MAAM,EAAET,SAAS,CAAC0B;AAHM,CAA1B;AAMA,eAAenB,aAAf","sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport Draggable from '../draggable';\nimport SetupSection from '../setup-section';\nimport Loader from '../../atom/loader';\nimport style from './style.css';\n\nconst Loading = () => (\n <div className={style.loading}>\n <Loader />\n </div>\n);\n\nconst SetupSections = ({sections, loading, onDrop}) => {\n const [dragTo, setDragTo] = useState(null);\n const [dragFrom, setDragFrom] = useState(null);\n\n const dragStartHandler = useCallback(\n id => {\n setDragFrom(id);\n },\n [setDragFrom]\n );\n\n const dragOverHandler = useCallback(\n id => {\n if (dragTo === id) return;\n setDragTo(id);\n },\n [dragTo, setDragTo]\n );\n\n const dragLeaveHandler = useCallback(\n id => {\n setDragTo(null);\n },\n [setDragTo]\n );\n\n const dropHandler = useCallback(\n id => {\n if (onDrop && dragFrom) onDrop(dragFrom, id);\n\n setDragTo(null);\n setDragFrom(null);\n },\n [onDrop, setDragTo, setDragFrom, dragFrom]\n );\n\n if (loading) return <Loading />;\n\n const sectionsView = sections.map(section => (\n <Draggable\n key={section.id}\n id={section.id}\n dragging={dragTo === section.id}\n onDragStart={dragStartHandler}\n onDragOver={dragOverHandler}\n onDragLeave={dragLeaveHandler}\n onDrop={dropHandler}\n >\n <SetupSection {...section} key={section.id} />\n </Draggable>\n ));\n return <div>{sectionsView}</div>;\n};\n\nSetupSections.propTypes = {\n sections: PropTypes.arrayOf(PropTypes.shape(SetupSection.propTypes)),\n loading: PropTypes.bool,\n onDrop: PropTypes.func\n};\n\nexport default SetupSections;\n"],"file":"index.js"}
|
|
@@ -27,55 +27,3 @@
|
|
|
27
27
|
min-height: 60px;
|
|
28
28
|
position: relative;
|
|
29
29
|
}
|
|
30
|
-
.draggable {
|
|
31
|
-
cursor: grab;
|
|
32
|
-
position: relative;
|
|
33
|
-
background: transparent;
|
|
34
|
-
}
|
|
35
|
-
.draggable:hover{
|
|
36
|
-
background: rgba(0, 0, 0, 0.3);
|
|
37
|
-
}
|
|
38
|
-
.draggable:active{
|
|
39
|
-
background: transparent;
|
|
40
|
-
}
|
|
41
|
-
.draggable:before {
|
|
42
|
-
content: '.';
|
|
43
|
-
position: absolute;
|
|
44
|
-
left: 5px;
|
|
45
|
-
font-size: 20px;
|
|
46
|
-
line-height: 7px;
|
|
47
|
-
color: medium;
|
|
48
|
-
pointer-events: none;
|
|
49
|
-
text-shadow: 0 0 medium, 0 5px medium, 0 10px medium, 0 15px medium, 0 20px medium, 0 25px medium, 0 30px medium, 0 35px medium, 0 40px medium, 0 45px medium,
|
|
50
|
-
5px 0 medium, 5px 5px medium, 5px 10px medium, 5px 15px medium, 5px 20px medium, 5px 25px medium, 5px 30px medium, 5px 35px medium, 5px 40px medium, 5px 45px medium,
|
|
51
|
-
10px 0 medium, 10px 5px medium, 10px 10px medium, 10px 15px medium, 10px 20px medium, 10px 25px medium, 10px 30px medium, 10px 35px medium, 10px 40px medium, 10px 45px medium;
|
|
52
|
-
}
|
|
53
|
-
.dragging {
|
|
54
|
-
background: rgba(0, 0, 0, 0.1);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.dragging:after {
|
|
58
|
-
position: absolute;
|
|
59
|
-
content: "drop here";
|
|
60
|
-
left: 5px;
|
|
61
|
-
top: 5px;
|
|
62
|
-
bottom: 5px;
|
|
63
|
-
right: 5px;
|
|
64
|
-
background: color(black lightness(95%));
|
|
65
|
-
pointer-events: none;
|
|
66
|
-
border: 1px dashed medium;
|
|
67
|
-
box-sizing: border-box;
|
|
68
|
-
display: flex;
|
|
69
|
-
justify-content: center;
|
|
70
|
-
align-items: center;
|
|
71
|
-
color: dark;
|
|
72
|
-
font-family: 'Gilroy';
|
|
73
|
-
font-weight: 600;
|
|
74
|
-
font-size: 14px;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
@media mobile {
|
|
78
|
-
.draggable:before {
|
|
79
|
-
content: none;
|
|
80
|
-
}
|
|
81
|
-
}
|
|
@@ -10,7 +10,7 @@ import Adapter from 'enzyme-adapter-react-16';
|
|
|
10
10
|
import { wrappingComponent } from '../../../test/helpers/render-component';
|
|
11
11
|
import SetupSections from '..'; // eslint-disable-next-line css-modules/no-unused-class
|
|
12
12
|
|
|
13
|
-
import style from '
|
|
13
|
+
import style from '../../draggable/style.css';
|
|
14
14
|
import fixtures from './fixtures/default';
|
|
15
15
|
browserEnv();
|
|
16
16
|
configure({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/molecule/setup-sections/test/on-drop.js"],"names":["browserEnv","test","React","mount","configure","Adapter","wrappingComponent","SetupSections","style","fixtures","adapter","t","plan","elementToDrag","props","sections","id","elementToDrop","dropHandler","dragged","dropped","is","wrapper","dragStartEvent","preventDefault","pass","dragOverEvent","dragLeaveEvent","dropEvent","find","section","at","simulate","fail"],"mappings":";;;;AAAA,OAAOA,UAAP,MAAuB,aAAvB;AACA,OAAOC,IAAP,MAAiB,KAAjB;AACA,OAAOC,KAAP,MAAkB,OAAlB;AACA,SAAQC,KAAR,EAAeC,SAAf,QAA+B,QAA/B;AAEA,OAAOC,OAAP,MAAoB,yBAApB;AACA,SAAQC,iBAAR,QAAgC,wCAAhC;AACA,OAAOC,aAAP,MAA0B,IAA1B,C,CACA;;AACA,OAAOC,KAAP,MAAkB,
|
|
1
|
+
{"version":3,"sources":["../../../../src/molecule/setup-sections/test/on-drop.js"],"names":["browserEnv","test","React","mount","configure","Adapter","wrappingComponent","SetupSections","style","fixtures","adapter","t","plan","elementToDrag","props","sections","id","elementToDrop","dropHandler","dragged","dropped","is","wrapper","dragStartEvent","preventDefault","pass","dragOverEvent","dragLeaveEvent","dropEvent","find","section","at","simulate","fail"],"mappings":"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","sourcesContent":["import browserEnv from 'browser-env';\nimport test from 'ava';\nimport React from 'react';\nimport {mount, configure} from 'enzyme';\nimport {set} from 'lodash/fp';\nimport Adapter from 'enzyme-adapter-react-16';\nimport {wrappingComponent} from '../../../test/helpers/render-component';\nimport SetupSections from '..';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from '../../draggable/style.css';\nimport fixtures from './fixtures/default';\n\nbrowserEnv();\nconfigure({adapter: new Adapter()});\n\ntest('should trigger onDrop handler', t => {\n t.plan(7);\n\n const elementToDrag = fixtures.props.sections[0].id;\n const elementToDrop = fixtures.props.sections[2].id;\n\n const dropHandler = (dragged, dropped) => {\n t.is(dropped, elementToDrop);\n t.is(dragged, elementToDrag);\n };\n\n const wrapper = mount(<SetupSections {...fixtures.props} onDrop={dropHandler} />, {\n wrappingComponent\n });\n\n const dragStartEvent = {preventDefault: () => t.pass()};\n const dragOverEvent = {preventDefault: () => t.pass()};\n const dragLeaveEvent = {preventDefault: () => t.pass()};\n const dropEvent = {preventDefault: () => t.pass()};\n\n wrapper.find(`.${style.section}`).at(0).simulate('dragStart', dragStartEvent);\n wrapper.find(`.${style.section}`).at(0).simulate('dragOver', dragOverEvent);\n wrapper.find(`.${style.section}`).at(0).simulate('dragOver', dragOverEvent);\n wrapper.find(`.${style.section}`).at(0).simulate('dragLeave', dragLeaveEvent);\n wrapper.find(`.${style.section}`).at(2).simulate('dragOver', dragOverEvent);\n wrapper.find(`.${style.section}`).at(2).simulate('drop', dropEvent);\n});\n\ntest('should skip drop event if dragStart is not called', t => {\n t.plan(1);\n\n const dropHandler = (dragged, dropped) => {\n t.fail();\n };\n\n const wrapper = mount(<SetupSections {...fixtures.props} onDrop={dropHandler} />, {\n wrappingComponent\n });\n\n const dropEvent = {preventDefault: () => t.pass()};\n wrapper.find(`.${style.section}`).at(2).simulate('drop', dropEvent);\n});\n\ntest('should skip dragStart event if section id is not defined', t => {\n t.plan(0);\n\n const dropHandler = (dragged, dropped) => {\n t.fail();\n };\n\n const wrapper = mount(\n <SetupSections {...set('sections.0.id', '', fixtures.props)} onDrop={dropHandler} />,\n {\n wrappingComponent\n }\n );\n\n const dragStartEvent = {preventDefault: () => {}};\n const dragOverEvent = {preventDefault: () => {}};\n const dragLeaveEvent = {preventDefault: () => {}};\n const dropEvent = {preventDefault: () => {}};\n\n wrapper.find(`.${style.section}`).at(0).simulate('dragStart', dragStartEvent);\n wrapper.find(`.${style.section}`).at(0).simulate('dragOver', dragOverEvent);\n wrapper.find(`.${style.section}`).at(0).simulate('dragOver', dragOverEvent);\n wrapper.find(`.${style.section}`).at(0).simulate('dragLeave', dragLeaveEvent);\n wrapper.find(`.${style.section}`).at(2).simulate('dragOver', dragOverEvent);\n wrapper.find(`.${style.section}`).at(2).simulate('drop', dropEvent);\n});\n"],"file":"on-drop.js"}
|