@coorpacademy/components 10.13.2 → 10.13.3-alpha.13
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/drag-and-drop/index.js +74 -42
- package/es/atom/drag-and-drop/index.js.map +1 -1
- package/es/atom/drag-and-drop/style.css +173 -70
- package/es/atom/drag-and-drop/test/fixtures/default.js +4 -3
- package/es/atom/drag-and-drop/test/fixtures/default.js.map +1 -1
- package/es/atom/drag-and-drop/test/fixtures/error.js +12 -0
- package/es/atom/drag-and-drop/test/fixtures/error.js.map +1 -0
- package/es/atom/drag-and-drop/test/fixtures/loading.js +2 -1
- package/es/atom/drag-and-drop/test/fixtures/loading.js.map +1 -1
- package/es/atom/drag-and-drop/test/fixtures/modified.js +12 -0
- package/es/atom/drag-and-drop/test/fixtures/modified.js.map +1 -0
- package/es/atom/drag-and-drop/test/fixtures/with-children.js +1 -0
- package/es/atom/drag-and-drop/test/fixtures/with-children.js.map +1 -1
- package/es/atom/drag-and-drop/test/fixtures/with-image.js +2 -1
- package/es/atom/drag-and-drop/test/fixtures/with-image.js.map +1 -1
- package/es/atom/drag-and-drop/test/fixtures/with-video.js +3 -1
- package/es/atom/drag-and-drop/test/fixtures/with-video.js.map +1 -1
- package/es/atom/drag-and-drop/test/fixtures/withLongDescription.js +12 -0
- package/es/atom/drag-and-drop/test/fixtures/withLongDescription.js.map +1 -0
- package/es/atom/drag-and-drop/test/fixtures.js +6 -0
- package/es/atom/drag-and-drop/test/fixtures.js.map +1 -1
- package/es/atom/image-upload/test/fixtures/clean-modified.js +13 -0
- package/es/atom/image-upload/test/fixtures/clean-modified.js.map +1 -0
- package/es/atom/image-upload/test/fixtures/{without-image.js → default.js} +1 -1
- package/es/atom/image-upload/test/fixtures/default.js.map +1 -0
- package/es/atom/image-upload/test/fixtures/desktop.js +2 -1
- package/es/atom/image-upload/test/fixtures/desktop.js.map +1 -1
- package/es/atom/image-upload/test/fixtures/mobile.js +2 -1
- package/es/atom/image-upload/test/fixtures/mobile.js.map +1 -1
- package/es/atom/image-upload/test/fixtures.js +4 -2
- package/es/atom/image-upload/test/fixtures.js.map +1 -1
- package/es/atom/loader/style.css +7 -3
- package/es/atom/review-header-step-item/test/fixtures.js +19 -0
- package/es/atom/review-header-step-item/test/fixtures.js.map +1 -0
- package/es/molecule/brand-form-group/index.js +3 -1
- package/es/molecule/brand-form-group/index.js.map +1 -1
- package/es/molecule/brand-form-group/style.css +5 -0
- package/es/molecule/brand-form-group/test/fixtures/images.js +6 -2
- package/es/molecule/brand-form-group/test/fixtures/images.js.map +1 -1
- package/es/molecule/course-sections/index.js +4 -1
- package/es/molecule/course-sections/index.js.map +1 -1
- package/es/molecule/course-sections/style.css +14 -1
- package/es/molecule/review-header-steps/test/fixtures.js +23 -0
- package/es/molecule/review-header-steps/test/fixtures.js.map +1 -0
- package/es/molecule/setup-slide/index.js +3 -1
- package/es/molecule/setup-slide/index.js.map +1 -1
- package/es/molecule/setup-slide/style.css +5 -0
- package/es/organism/course-selection/index.js +2 -1
- package/es/organism/course-selection/index.js.map +1 -1
- package/es/organism/course-selection/style.css +12 -3
- package/es/organism/course-selection/test/fixtures/loading.js +9 -0
- package/es/organism/course-selection/test/fixtures/loading.js.map +1 -0
- package/es/organism/course-selection/test/fixtures.js +2 -0
- package/es/organism/course-selection/test/fixtures.js.map +1 -1
- package/es/organism/search-and-chips-results/index.js +2 -1
- package/es/organism/search-and-chips-results/index.js.map +1 -1
- package/es/organism/search-and-chips-results/style.css +10 -3
- package/es/organism/search-and-chips-results/test/fixtures/loading.js +9 -0
- package/es/organism/search-and-chips-results/test/fixtures/loading.js.map +1 -0
- package/es/organism/search-and-chips-results/test/fixtures.js +2 -0
- package/es/organism/search-and-chips-results/test/fixtures.js.map +1 -1
- package/es/template/back-office/brand-update/index.js +5 -2
- package/es/template/back-office/brand-update/index.js.map +1 -1
- package/es/template/back-office/brand-update/style.css +10 -1
- package/es/util/button-icons.js +3 -2
- package/es/util/button-icons.js.map +1 -1
- package/lib/atom/drag-and-drop/index.js +76 -41
- package/lib/atom/drag-and-drop/index.js.map +1 -1
- package/lib/atom/drag-and-drop/style.css +173 -70
- package/lib/atom/drag-and-drop/test/fixtures/default.js +4 -3
- package/lib/atom/drag-and-drop/test/fixtures/default.js.map +1 -1
- package/lib/atom/drag-and-drop/test/fixtures/error.js +21 -0
- package/lib/atom/drag-and-drop/test/fixtures/error.js.map +1 -0
- package/lib/atom/drag-and-drop/test/fixtures/loading.js +2 -1
- package/lib/atom/drag-and-drop/test/fixtures/loading.js.map +1 -1
- package/lib/atom/drag-and-drop/test/fixtures/modified.js +21 -0
- package/lib/atom/drag-and-drop/test/fixtures/modified.js.map +1 -0
- package/lib/atom/drag-and-drop/test/fixtures/with-children.js +1 -0
- package/lib/atom/drag-and-drop/test/fixtures/with-children.js.map +1 -1
- package/lib/atom/drag-and-drop/test/fixtures/with-image.js +2 -1
- package/lib/atom/drag-and-drop/test/fixtures/with-image.js.map +1 -1
- package/lib/atom/drag-and-drop/test/fixtures/with-video.js +3 -1
- package/lib/atom/drag-and-drop/test/fixtures/with-video.js.map +1 -1
- package/lib/atom/drag-and-drop/test/fixtures/withLongDescription.js +21 -0
- package/lib/atom/drag-and-drop/test/fixtures/withLongDescription.js.map +1 -0
- package/lib/atom/drag-and-drop/test/fixtures.js +9 -0
- package/lib/atom/drag-and-drop/test/fixtures.js.map +1 -1
- package/lib/atom/image-upload/test/fixtures/clean-modified.js +22 -0
- package/lib/atom/image-upload/test/fixtures/clean-modified.js.map +1 -0
- package/lib/atom/image-upload/test/fixtures/{without-image.js → default.js} +1 -1
- package/lib/atom/image-upload/test/fixtures/default.js.map +1 -0
- package/lib/atom/image-upload/test/fixtures/desktop.js +2 -1
- package/lib/atom/image-upload/test/fixtures/desktop.js.map +1 -1
- package/lib/atom/image-upload/test/fixtures/mobile.js +2 -1
- package/lib/atom/image-upload/test/fixtures/mobile.js.map +1 -1
- package/lib/atom/image-upload/test/fixtures.js +6 -3
- package/lib/atom/image-upload/test/fixtures.js.map +1 -1
- package/lib/atom/loader/style.css +7 -3
- package/lib/atom/review-header-step-item/test/fixtures.js +31 -0
- package/lib/atom/review-header-step-item/test/fixtures.js.map +1 -0
- package/lib/molecule/brand-form-group/index.js +3 -1
- package/lib/molecule/brand-form-group/index.js.map +1 -1
- package/lib/molecule/brand-form-group/style.css +5 -0
- package/lib/molecule/brand-form-group/test/fixtures/images.js +6 -2
- package/lib/molecule/brand-form-group/test/fixtures/images.js.map +1 -1
- package/lib/molecule/course-sections/index.js +4 -1
- package/lib/molecule/course-sections/index.js.map +1 -1
- package/lib/molecule/course-sections/style.css +14 -1
- package/lib/molecule/review-header-steps/test/fixtures.js +37 -0
- package/lib/molecule/review-header-steps/test/fixtures.js.map +1 -0
- package/lib/molecule/setup-slide/index.js +3 -1
- package/lib/molecule/setup-slide/index.js.map +1 -1
- package/lib/molecule/setup-slide/style.css +5 -0
- package/lib/organism/course-selection/index.js +2 -1
- package/lib/organism/course-selection/index.js.map +1 -1
- package/lib/organism/course-selection/style.css +12 -3
- package/lib/organism/course-selection/test/fixtures/loading.js +19 -0
- package/lib/organism/course-selection/test/fixtures/loading.js.map +1 -0
- package/lib/organism/course-selection/test/fixtures.js +3 -0
- package/lib/organism/course-selection/test/fixtures.js.map +1 -1
- package/lib/organism/search-and-chips-results/index.js +2 -1
- package/lib/organism/search-and-chips-results/index.js.map +1 -1
- package/lib/organism/search-and-chips-results/style.css +10 -3
- package/lib/organism/search-and-chips-results/test/fixtures/loading.js +19 -0
- package/lib/organism/search-and-chips-results/test/fixtures/loading.js.map +1 -0
- package/lib/organism/search-and-chips-results/test/fixtures.js +3 -0
- package/lib/organism/search-and-chips-results/test/fixtures.js.map +1 -1
- package/lib/template/back-office/brand-update/index.js +5 -2
- package/lib/template/back-office/brand-update/index.js.map +1 -1
- package/lib/template/back-office/brand-update/style.css +10 -1
- package/lib/util/button-icons.js +2 -1
- package/lib/util/button-icons.js.map +1 -1
- package/package.json +2 -2
- package/es/atom/image-upload/test/fixtures/without-image.js.map +0 -1
- package/lib/atom/image-upload/test/fixtures/without-image.js.map +0 -1
|
@@ -1,17 +1,16 @@
|
|
|
1
|
+
import _isEmpty from "lodash/fp/isEmpty";
|
|
1
2
|
import _constant from "lodash/fp/constant";
|
|
2
|
-
import _get from "lodash/fp/get";
|
|
3
3
|
import _uniqueId from "lodash/fp/uniqueId";
|
|
4
4
|
|
|
5
5
|
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); }
|
|
6
6
|
|
|
7
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
8
|
-
|
|
9
7
|
import React from 'react';
|
|
10
8
|
import PropTypes from 'prop-types';
|
|
11
|
-
import {
|
|
12
|
-
import Provider from '../provider';
|
|
9
|
+
import { NovaLineStatusClose as Close, NovaSolidFilesBasicFileUpload2 as FileUploadIcon, NovaSolidFilesBasicFileBlock2 as FileUploadBlockedIcon } from '@coorpacademy/nova-icons';
|
|
13
10
|
import Loader from '../loader';
|
|
14
11
|
import style from './style.css';
|
|
12
|
+
import Button from '../button-link';
|
|
13
|
+
import getClassState from '../../util/get-class-state';
|
|
15
14
|
|
|
16
15
|
const constantNull = _constant(null);
|
|
17
16
|
|
|
@@ -38,12 +37,6 @@ class DragAndDrop extends React.Component {
|
|
|
38
37
|
}
|
|
39
38
|
|
|
40
39
|
render() {
|
|
41
|
-
const {
|
|
42
|
-
skin
|
|
43
|
-
} = this.context;
|
|
44
|
-
|
|
45
|
-
const brandColor = _get('common.brand', skin);
|
|
46
|
-
|
|
47
40
|
const idBox = _uniqueId('drop-box-');
|
|
48
41
|
|
|
49
42
|
const {
|
|
@@ -55,7 +48,8 @@ class DragAndDrop extends React.Component {
|
|
|
55
48
|
previewContent,
|
|
56
49
|
loading = false,
|
|
57
50
|
modified = false,
|
|
58
|
-
onReset = null
|
|
51
|
+
onReset = null,
|
|
52
|
+
error = false
|
|
59
53
|
} = this.props;
|
|
60
54
|
const {
|
|
61
55
|
dragging
|
|
@@ -64,25 +58,36 @@ class DragAndDrop extends React.Component {
|
|
|
64
58
|
|
|
65
59
|
if (previewContent && previewContent.type === 'image') {
|
|
66
60
|
previewView = /*#__PURE__*/React.createElement("div", {
|
|
67
|
-
className: style.
|
|
61
|
+
className: style.preview
|
|
68
62
|
}, /*#__PURE__*/React.createElement("img", {
|
|
69
63
|
src: previewContent.src
|
|
70
64
|
}));
|
|
71
65
|
} else if (previewContent && previewContent.type === 'video') {
|
|
72
66
|
previewView = /*#__PURE__*/React.createElement("div", {
|
|
73
|
-
className:
|
|
74
|
-
width: '300px'
|
|
75
|
-
})
|
|
67
|
+
className: style.preview
|
|
76
68
|
}, /*#__PURE__*/React.createElement("video", {
|
|
77
|
-
width: "100%",
|
|
78
69
|
controls: true,
|
|
79
70
|
src: previewContent.src,
|
|
80
71
|
type: "video/*"
|
|
81
72
|
}));
|
|
82
73
|
} else if (loading) {
|
|
83
74
|
previewView = /*#__PURE__*/React.createElement("div", {
|
|
84
|
-
className: style.
|
|
85
|
-
}, /*#__PURE__*/React.createElement(
|
|
75
|
+
className: style.loaderWrapper
|
|
76
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
77
|
+
className: style.loadingCancel
|
|
78
|
+
}, /*#__PURE__*/React.createElement(Close, {
|
|
79
|
+
"data-name": "reset-content-icon",
|
|
80
|
+
height: 16,
|
|
81
|
+
width: 16,
|
|
82
|
+
className: style.closeIcon,
|
|
83
|
+
onClick: onReset
|
|
84
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
85
|
+
className: style.loader
|
|
86
|
+
}, /*#__PURE__*/React.createElement(Loader, {
|
|
87
|
+
theme: "coorpmanager"
|
|
88
|
+
})), /*#__PURE__*/React.createElement("span", {
|
|
89
|
+
className: style.loaderText
|
|
90
|
+
}, "Uploading"));
|
|
86
91
|
} else {
|
|
87
92
|
previewView = /*#__PURE__*/React.createElement("span", null, previewLabel);
|
|
88
93
|
}
|
|
@@ -98,38 +103,64 @@ class DragAndDrop extends React.Component {
|
|
|
98
103
|
className: style.closeIcon,
|
|
99
104
|
onClick: onReset
|
|
100
105
|
})) : null;
|
|
106
|
+
|
|
107
|
+
const buildButton = (dragging, error) => {
|
|
108
|
+
const defaultButtonProps = {
|
|
109
|
+
label: uploadLabel,
|
|
110
|
+
'aria-label': 'aria button',
|
|
111
|
+
'data-name': 'default-button',
|
|
112
|
+
icon: {
|
|
113
|
+
position: 'left',
|
|
114
|
+
type: 'folders'
|
|
115
|
+
}
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
if (dragging) {
|
|
119
|
+
return null;
|
|
120
|
+
} else if (error) {
|
|
121
|
+
const errorButtonProps = _extends(_extends({}, defaultButtonProps), {}, {
|
|
122
|
+
label: 'Try again',
|
|
123
|
+
icon: {}
|
|
124
|
+
});
|
|
125
|
+
|
|
126
|
+
return /*#__PURE__*/React.createElement(Button, errorButtonProps);
|
|
127
|
+
} else {
|
|
128
|
+
return /*#__PURE__*/React.createElement(Button, defaultButtonProps);
|
|
129
|
+
}
|
|
130
|
+
};
|
|
131
|
+
|
|
132
|
+
const button = buildButton(dragging, error);
|
|
133
|
+
const previewContainer = getClassState(style.previewContainer, style.modifiedPreviewContainer, null, modified, error);
|
|
134
|
+
const inputWrapper = getClassState(style.inputWrapper, style.modifiedInputWrapper, style.errorInputWrapper, modified, error);
|
|
101
135
|
return /*#__PURE__*/React.createElement("div", {
|
|
102
136
|
className: style.wrapper,
|
|
103
137
|
"data-name": "drag-and-drop-wrapper"
|
|
138
|
+
}, !_isEmpty(previewContent) || loading ? /*#__PURE__*/React.createElement("div", {
|
|
139
|
+
className: previewContainer
|
|
140
|
+
}, previewView) : /*#__PURE__*/React.createElement("div", {
|
|
141
|
+
className: dragging ? style.dragging : inputWrapper,
|
|
142
|
+
id: idBox
|
|
104
143
|
}, /*#__PURE__*/React.createElement("div", {
|
|
144
|
+
className: style.infosContainer
|
|
145
|
+
}, error ? /*#__PURE__*/React.createElement(FileUploadBlockedIcon, {
|
|
146
|
+
className: style.iconError
|
|
147
|
+
}) : /*#__PURE__*/React.createElement(FileUploadIcon, {
|
|
148
|
+
className: style.icon
|
|
149
|
+
}), description ? /*#__PURE__*/React.createElement("div", {
|
|
150
|
+
className: style.description
|
|
151
|
+
}, description) : null, error ? null : /*#__PURE__*/React.createElement("div", {
|
|
105
152
|
className: style.title
|
|
106
|
-
}, title), /*#__PURE__*/React.createElement("div", {
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
className: dragging ? style.dragging : style.inputWrapper,
|
|
110
|
-
id: idBox
|
|
111
|
-
}, /*#__PURE__*/React.createElement(UploadIcon, {
|
|
112
|
-
className: style.arrow,
|
|
113
|
-
color: brandColor
|
|
114
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
115
|
-
className: style.uploadLabel
|
|
116
|
-
}, uploadLabel), children(this.handleDragStart, this.handleDragStop)), resetContent, description ?
|
|
117
|
-
/*#__PURE__*/
|
|
118
|
-
// eslint-disable-next-line react/no-danger
|
|
119
|
-
React.createElement("div", {
|
|
120
|
-
className: style.description,
|
|
121
|
-
dangerouslySetInnerHTML: {
|
|
122
|
-
__html: description
|
|
153
|
+
}, title)), button, /*#__PURE__*/React.createElement("div", {
|
|
154
|
+
style: {
|
|
155
|
+
display: 'none'
|
|
123
156
|
}
|
|
124
|
-
})
|
|
157
|
+
}, children(this.handleDragStart, this.handleDragStop))), error ? /*#__PURE__*/React.createElement("span", {
|
|
158
|
+
className: style.errorMessage
|
|
159
|
+
}, error) : resetContent);
|
|
125
160
|
}
|
|
126
161
|
|
|
127
162
|
}
|
|
128
163
|
|
|
129
|
-
_defineProperty(DragAndDrop, "contextTypes", {
|
|
130
|
-
skin: Provider.childContextTypes.skin
|
|
131
|
-
});
|
|
132
|
-
|
|
133
164
|
DragAndDrop.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
134
165
|
title: PropTypes.string,
|
|
135
166
|
description: PropTypes.string,
|
|
@@ -142,7 +173,8 @@ DragAndDrop.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
142
173
|
loading: PropTypes.bool,
|
|
143
174
|
modified: PropTypes.bool,
|
|
144
175
|
children: PropTypes.func,
|
|
145
|
-
onReset: PropTypes.func
|
|
176
|
+
onReset: PropTypes.func,
|
|
177
|
+
error: PropTypes.string
|
|
146
178
|
} : {};
|
|
147
179
|
export default DragAndDrop;
|
|
148
180
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/atom/drag-and-drop/index.js"],"names":["React","PropTypes","NovaSolidDataTransferDataUpload1","UploadIcon","NovaLineStatusClose","Close","Provider","Loader","style","constantNull","DragAndDrop","Component","constructor","props","state","dragging","handleDragStart","bind","handleDragStop","setState","render","skin","context","brandColor","idBox","children","title","description","uploadLabel","previewLabel","previewContent","loading","modified","onReset","previewView","type","src","width","resetContent","resetUploadWrapper","resetSrcLabel","closeIcon","wrapper","previewWrapper","inputWrapper","arrow","__html","childContextTypes","propTypes","string","shape","bool","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {uniqueId, get, constant} from 'lodash/fp';\nimport {\n NovaSolidDataTransferDataUpload1 as UploadIcon,\n NovaLineStatusClose as Close\n} from '@coorpacademy/nova-icons';\nimport Provider from '../provider';\nimport Loader from '../loader';\nimport style from './style.css';\n\nconst constantNull = constant(null);\n\nclass DragAndDrop extends React.Component {\n static propTypes = {\n title: PropTypes.string,\n description: PropTypes.string,\n uploadLabel: PropTypes.string,\n previewLabel: PropTypes.string,\n previewContent: PropTypes.shape({\n type: PropTypes.string,\n src: PropTypes.string\n }),\n loading: PropTypes.bool,\n modified: PropTypes.bool,\n children: PropTypes.func,\n onReset: PropTypes.func\n };\n\n static contextTypes = {\n skin: Provider.childContextTypes.skin\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n dragging: false\n };\n\n this.handleDragStart = this.handleDragStart.bind(this);\n this.handleDragStop = this.handleDragStop.bind(this);\n }\n\n handleDragStart() {\n this.setState({\n dragging: true\n });\n }\n\n handleDragStop() {\n this.setState({\n dragging: false\n });\n }\n\n render() {\n const {skin} = this.context;\n const brandColor = get('common.brand', skin);\n const idBox = uniqueId('drop-box-');\n const {\n children = constantNull,\n title,\n description,\n uploadLabel,\n previewLabel = '',\n previewContent,\n loading = false,\n modified = false,\n onReset = null\n } = this.props;\n const {dragging} = this.state;\n\n let previewView = null;\n\n if (previewContent && previewContent.type === 'image') {\n previewView = (\n <div className={style.previewView}>\n <img src={previewContent.src} />\n </div>\n );\n } else if (previewContent && previewContent.type === 'video') {\n previewView = (\n <div className={{...style.previewView, width: '300px'}}>\n <video width=\"100%\" controls src={previewContent.src} type=\"video/*\" />\n </div>\n );\n } else if (loading) {\n previewView = (\n <div className={style.loading}>\n <Loader />\n </div>\n );\n } else {\n previewView = <span>{previewLabel}</span>;\n }\n\n const resetContent =\n previewContent && previewContent.src && onReset ? (\n <div className={style.resetUploadWrapper}>\n <div className={style.resetSrcLabel}>{previewContent.src}</div>\n <Close\n data-name=\"reset-content-icon\"\n height={16}\n width={16}\n className={style.closeIcon}\n onClick={onReset}\n />\n </div>\n ) : null;\n\n return (\n <div className={style.wrapper} data-name=\"drag-and-drop-wrapper\">\n <div className={style.title}>{title}</div>\n <div className={modified ? style.modified : style.previewWrapper}>{previewView}</div>\n <div className={dragging ? style.dragging : style.inputWrapper} id={idBox}>\n <UploadIcon className={style.arrow} color={brandColor} />\n <div className={style.uploadLabel}>{uploadLabel}</div>\n {children(this.handleDragStart, this.handleDragStop)}\n </div>\n {resetContent}\n {description ? (\n // eslint-disable-next-line react/no-danger\n <div className={style.description} dangerouslySetInnerHTML={{__html: description}} />\n ) : null}\n </div>\n );\n }\n}\n\nexport default DragAndDrop;\n"],"file":"index.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/atom/drag-and-drop/index.js"],"names":["React","PropTypes","NovaLineStatusClose","Close","NovaSolidFilesBasicFileUpload2","FileUploadIcon","NovaSolidFilesBasicFileBlock2","FileUploadBlockedIcon","Loader","style","Button","getClassState","constantNull","DragAndDrop","Component","constructor","props","state","dragging","handleDragStart","bind","handleDragStop","setState","render","idBox","children","title","description","uploadLabel","previewLabel","previewContent","loading","modified","onReset","error","previewView","type","preview","src","loaderWrapper","loadingCancel","closeIcon","loader","loaderText","resetContent","resetUploadWrapper","resetSrcLabel","buildButton","defaultButtonProps","label","icon","position","errorButtonProps","button","previewContainer","modifiedPreviewContainer","inputWrapper","modifiedInputWrapper","errorInputWrapper","wrapper","infosContainer","iconError","display","errorMessage","propTypes","string","shape","bool","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {uniqueId, constant, isEmpty} from 'lodash/fp';\nimport {\n NovaLineStatusClose as Close,\n NovaSolidFilesBasicFileUpload2 as FileUploadIcon,\n NovaSolidFilesBasicFileBlock2 as FileUploadBlockedIcon,\n} from '@coorpacademy/nova-icons';\nimport Loader from '../loader';\nimport style from './style.css';\nimport Button from '../button-link';\nimport getClassState from '../../util/get-class-state';\n\nconst constantNull = constant(null);\n\nclass DragAndDrop extends React.Component {\n static propTypes = {\n title: PropTypes.string,\n description: PropTypes.string,\n uploadLabel: PropTypes.string,\n previewLabel: PropTypes.string,\n previewContent: PropTypes.shape({\n type: PropTypes.string,\n src: PropTypes.string\n }),\n loading: PropTypes.bool,\n modified: PropTypes.bool,\n children: PropTypes.func,\n onReset: PropTypes.func,\n error: PropTypes.string\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n dragging: false\n };\n\n this.handleDragStart = this.handleDragStart.bind(this);\n this.handleDragStop = this.handleDragStop.bind(this);\n }\n\n handleDragStart() {\n this.setState({\n dragging: true\n });\n }\n\n handleDragStop() {\n this.setState({\n dragging: false\n });\n }\n\n render() {\n const idBox = uniqueId('drop-box-');\n const {\n children = constantNull,\n title,\n description,\n uploadLabel,\n previewLabel = '',\n previewContent,\n loading = false,\n modified = false,\n onReset = null,\n error = false\n } = this.props;\n const {dragging} = this.state;\n\n let previewView = null;\n\n if (previewContent && previewContent.type === 'image') {\n previewView = (\n <div className={style.preview}>\n <img src={previewContent.src} />\n </div>\n );\n } else if (previewContent && previewContent.type === 'video') {\n previewView = (\n <div className={style.preview}>\n <video controls src={previewContent.src} type=\"video/*\" />\n </div>\n );\n } else if (loading) {\n previewView = (\n <div className={style.loaderWrapper}>\n <div className={style.loadingCancel}>\n <Close\n data-name=\"reset-content-icon\"\n height={16}\n width={16}\n className={style.closeIcon}\n onClick={onReset}\n />\n </div>\n <div className={style.loader}>\n <Loader theme='coorpmanager'/>\n </div>\n <span className={style.loaderText}>Uploading</span>\n </div>\n );\n } else {\n previewView = <span>{previewLabel}</span>;\n }\n\n const resetContent =\n previewContent && previewContent.src && onReset ? (\n <div className={style.resetUploadWrapper}>\n <div className={style.resetSrcLabel}>{previewContent.src}</div>\n <Close\n data-name=\"reset-content-icon\"\n height={16}\n width={16}\n className={style.closeIcon}\n onClick={onReset}\n />\n </div>\n ) : null;\n\n \n const buildButton = (dragging, error) => {\n const defaultButtonProps = {\n label: uploadLabel,\n 'aria-label': 'aria button',\n 'data-name': 'default-button',\n icon: {\n position: 'left',\n type: 'folders'\n },\n };\n if (dragging) {\n return null;\n } else if (error) {\n const errorButtonProps = {...defaultButtonProps, label: 'Try again', icon: {}}\n return <Button {...errorButtonProps} />;\n } else {\n return <Button {...defaultButtonProps} />;\n }\n }\n\n const button = buildButton(dragging, error);\n\n const previewContainer = getClassState(style.previewContainer, style.modifiedPreviewContainer, null, modified, error);\n const inputWrapper = getClassState(style.inputWrapper, style.modifiedInputWrapper, style.errorInputWrapper, modified, error);\n\n return (\n <div className={style.wrapper} data-name=\"drag-and-drop-wrapper\">\n {!isEmpty(previewContent) || loading ? \n <div className={previewContainer}>{previewView}</div> \n : \n <div className={dragging ? style.dragging : inputWrapper} id={idBox}>\n <div className={style.infosContainer}>\n {error ? <FileUploadBlockedIcon className={style.iconError} /> : <FileUploadIcon className={style.icon} />}\n {description ? (\n <div className={style.description}>{description}</div>\n ) : null}\n {error ? null : <div className={style.title}>{title}</div>}\n </div>\n {button}\n <div style={{display: 'none'}}>{children(this.handleDragStart, this.handleDragStop)}</div>\n </div>\n }\n {error ? <span className={style.errorMessage}>{error}</span> : resetContent}\n </div>\n );\n }\n}\n\nexport default DragAndDrop;\n"],"file":"index.js"}
|
|
@@ -6,145 +6,248 @@
|
|
|
6
6
|
@value battle from colors;
|
|
7
7
|
@value light from colors;
|
|
8
8
|
@value xtraLightGrey from colors;
|
|
9
|
+
@value cm_grey_300 from colors;
|
|
10
|
+
@value cm_grey_700 from colors;
|
|
11
|
+
@value cm_grey_50 from colors;
|
|
12
|
+
@value cm_grey_200 from colors;
|
|
13
|
+
@value cm_grey_100 from colors;
|
|
14
|
+
@value cm_grey_400 from colors;
|
|
15
|
+
@value white from colors;
|
|
16
|
+
@value cm_negative_100 from colors;
|
|
17
|
+
@value cm_yellow_100 from colors;
|
|
9
18
|
|
|
10
19
|
.wrapper {
|
|
11
|
-
|
|
20
|
+
font-family: "Gilroy";
|
|
21
|
+
max-height: 320px;
|
|
22
|
+
max-width: 360px;
|
|
23
|
+
height: 100%;
|
|
24
|
+
width: 100%;
|
|
12
25
|
}
|
|
13
26
|
|
|
14
27
|
.title {
|
|
15
|
-
font-
|
|
16
|
-
font-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
margin-bottom: 20px;
|
|
28
|
+
font-size: 14px;
|
|
29
|
+
font-weight: 700;
|
|
30
|
+
color: cm_grey_700;
|
|
31
|
+
margin-bottom: 14px;
|
|
20
32
|
}
|
|
21
33
|
|
|
22
34
|
.description {
|
|
23
|
-
|
|
24
|
-
font-size:
|
|
35
|
+
max-height: 85px;
|
|
36
|
+
font-size: 10px;
|
|
25
37
|
font-weight: 400;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
38
|
+
color: cm_grey_300;
|
|
39
|
+
margin-bottom: 8px;
|
|
40
|
+
text-align: center;
|
|
41
|
+
padding: 8px;
|
|
30
42
|
}
|
|
31
43
|
|
|
32
|
-
.
|
|
44
|
+
.previewContainer {
|
|
33
45
|
width: 100%;
|
|
34
|
-
|
|
35
|
-
border:
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
align-items: center;
|
|
39
|
-
justify-content: center;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.modified {
|
|
43
|
-
composes: previewWrapper;
|
|
44
|
-
border: 2px solid battle;
|
|
46
|
+
height: 80%;
|
|
47
|
+
border: none;
|
|
48
|
+
border-radius: 7px;
|
|
49
|
+
background: cm_grey_50;
|
|
45
50
|
}
|
|
46
51
|
|
|
47
|
-
.
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
font-size: 15px;
|
|
51
|
-
font-weight: 700;
|
|
52
|
-
line-height: 100px;
|
|
52
|
+
.modifiedPreviewContainer {
|
|
53
|
+
composes: previewContainer;
|
|
54
|
+
border: 3px solid cm_yellow_100;
|
|
53
55
|
}
|
|
54
56
|
|
|
55
|
-
.
|
|
56
|
-
padding:
|
|
57
|
+
.preview {
|
|
58
|
+
padding: 16px;
|
|
57
59
|
width: 100%;
|
|
58
|
-
height:
|
|
60
|
+
height: 100%;
|
|
59
61
|
box-sizing: border-box;
|
|
60
62
|
display: flex;
|
|
63
|
+
justify-content: center;
|
|
64
|
+
align-items: center;
|
|
65
|
+
background-clip: content-box;
|
|
66
|
+
border-radius: 19px;
|
|
67
|
+
background-color: white;
|
|
61
68
|
}
|
|
62
69
|
|
|
63
|
-
.
|
|
70
|
+
.preview img, video {
|
|
64
71
|
max-width: 100%;
|
|
65
72
|
max-height: 100%;
|
|
66
73
|
margin: auto;
|
|
67
74
|
}
|
|
68
75
|
|
|
76
|
+
.infosContainer {
|
|
77
|
+
width: 100%;
|
|
78
|
+
height: 100%;
|
|
79
|
+
display: flex;
|
|
80
|
+
flex-direction: column;
|
|
81
|
+
align-items: center;
|
|
82
|
+
justify-content: space-evenly;
|
|
83
|
+
overflow: hidden;
|
|
84
|
+
}
|
|
85
|
+
|
|
69
86
|
.inputWrapper {
|
|
87
|
+
background: cm_grey_50;
|
|
70
88
|
width: 100%;
|
|
71
|
-
height:
|
|
89
|
+
height: 80%;
|
|
72
90
|
box-sizing: border-box;
|
|
73
|
-
border:
|
|
74
|
-
border-radius: 3px;
|
|
91
|
+
border-radius: 7px;
|
|
75
92
|
position: relative;
|
|
76
93
|
display: flex;
|
|
94
|
+
flex-direction: column;
|
|
77
95
|
align-items: center;
|
|
78
|
-
justify-content:
|
|
96
|
+
justify-content: space-between;
|
|
97
|
+
padding: 14px 8px 8px 8px;
|
|
98
|
+
overflow: hidden;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.inputWrapper:before {
|
|
102
|
+
content: "";
|
|
103
|
+
position: absolute;
|
|
104
|
+
border: 10px dashed cm_grey_200;
|
|
105
|
+
top: -8px;
|
|
106
|
+
bottom: -8px;
|
|
107
|
+
left: -8px;
|
|
108
|
+
right: -8px;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.modifiedInputWrapper {
|
|
112
|
+
composes: inputWrapper;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.modifiedInputWrapper::before {
|
|
116
|
+
content: "";
|
|
117
|
+
position: absolute;
|
|
118
|
+
border: 10px dashed cm_yellow_100;
|
|
119
|
+
top: -8px;
|
|
120
|
+
bottom: -8px;
|
|
121
|
+
left: -8px;
|
|
122
|
+
right: -8px;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.errorInputWrapper {
|
|
126
|
+
composes: inputWrapper;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.errorInputWrapper .icon {
|
|
130
|
+
color: cm_negative_100;
|
|
79
131
|
}
|
|
80
132
|
|
|
81
133
|
.resetUploadWrapper {
|
|
82
134
|
width: 100%;
|
|
83
|
-
height:
|
|
135
|
+
height: 24px;
|
|
84
136
|
box-sizing: border-box;
|
|
85
|
-
background-color:
|
|
86
|
-
border: solid 1px light;
|
|
137
|
+
background-color: cm_grey_50;
|
|
87
138
|
border-radius: 3px;
|
|
88
|
-
position: relative;
|
|
89
139
|
display: flex;
|
|
90
140
|
align-items: center;
|
|
91
141
|
justify-content: space-between;
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
font-size:
|
|
142
|
+
margin-top: 16px;
|
|
143
|
+
padding: 4px 8px;
|
|
144
|
+
font-size: 10px;
|
|
95
145
|
font-weight: 400;
|
|
96
|
-
margin-top: 15px;
|
|
97
146
|
}
|
|
98
147
|
|
|
99
148
|
.resetSrcLabel {
|
|
100
|
-
|
|
101
|
-
color: dark;
|
|
102
|
-
max-width: 220px;
|
|
149
|
+
color: cm_grey_700;
|
|
103
150
|
display: inline-block;
|
|
104
151
|
white-space: nowrap;
|
|
105
152
|
overflow: hidden;
|
|
106
153
|
text-overflow: ellipsis;
|
|
107
154
|
direction: rtl;
|
|
108
155
|
text-align: left;
|
|
109
|
-
margin-left: 9px;
|
|
110
156
|
}
|
|
111
157
|
|
|
112
158
|
.closeIcon {
|
|
113
|
-
margin-right: 9px;
|
|
114
159
|
cursor: pointer;
|
|
115
|
-
color:
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
.closeIcon:hover {
|
|
119
|
-
color: black;
|
|
160
|
+
color: cm_grey_400;
|
|
161
|
+
padding: 6px;
|
|
120
162
|
}
|
|
121
163
|
|
|
122
164
|
.dragging {
|
|
123
165
|
composes: inputWrapper;
|
|
124
|
-
border:
|
|
166
|
+
border: 1px solid cm_grey_200;
|
|
167
|
+
background: cm_grey_100;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.dragging .description .icon .title {
|
|
171
|
+
font-size: 8px;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.dragging .title {
|
|
175
|
+
font-size: 10px;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.dragging .icon {
|
|
179
|
+
transform: scale(0.85);
|
|
125
180
|
}
|
|
126
181
|
|
|
127
|
-
.
|
|
128
|
-
width:
|
|
129
|
-
height:
|
|
130
|
-
|
|
182
|
+
.icon {
|
|
183
|
+
min-width: 14px;
|
|
184
|
+
min-height: 14px;
|
|
185
|
+
height: 20%;
|
|
186
|
+
width: 20%;;
|
|
131
187
|
transition: all 0.2s cubic-bezier(0.47, 1.04, 0.46, 2.16);
|
|
188
|
+
margin-bottom: 4px;
|
|
132
189
|
}
|
|
133
190
|
|
|
134
|
-
.
|
|
135
|
-
|
|
191
|
+
.iconError {
|
|
192
|
+
composes: icon;
|
|
193
|
+
color: cm_negative_100;
|
|
136
194
|
}
|
|
137
195
|
|
|
138
196
|
.uploadLabel {
|
|
139
|
-
font-
|
|
140
|
-
font-size: 18px;
|
|
141
|
-
text-transform: uppercase;
|
|
197
|
+
font-size: 14px;
|
|
142
198
|
font-weight: 700;
|
|
143
|
-
color:
|
|
199
|
+
color: cm_grey_700;
|
|
144
200
|
}
|
|
145
201
|
|
|
146
|
-
.
|
|
147
|
-
min-height: 100px;
|
|
148
|
-
border: none;
|
|
202
|
+
.loaderWrapper {
|
|
149
203
|
position: relative;
|
|
204
|
+
height: 100%;
|
|
205
|
+
width: 100%;
|
|
206
|
+
display: flex;
|
|
207
|
+
flex-direction: column;
|
|
208
|
+
justify-content: center;
|
|
209
|
+
align-items: center;
|
|
210
|
+
border-radius: 7px;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.loader {
|
|
214
|
+
margin-bottom: 8px;
|
|
215
|
+
height: 14px;
|
|
216
|
+
width: 14px;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.loaderText {
|
|
220
|
+
font-size: 10px;
|
|
221
|
+
font-weight: 400;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.loadingCancel {
|
|
225
|
+
display: none;
|
|
226
|
+
position: absolute;
|
|
227
|
+
top: 0;
|
|
228
|
+
right: 0;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.button {
|
|
232
|
+
display: flex;
|
|
233
|
+
justify-content: center;
|
|
234
|
+
align-items: center;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.folderIcon {
|
|
238
|
+
margin-right: 8px;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.loaderWrapper:hover .loadingCancel {
|
|
242
|
+
display: block;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.loaderWrapper:hover {
|
|
246
|
+
background-color: #EAEAEB;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.errorMessage {
|
|
250
|
+
color: cm_negative_100;
|
|
251
|
+
font-size: 12px;
|
|
252
|
+
margin-top: 8px;
|
|
150
253
|
}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
props: {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
modified: false,
|
|
4
|
+
title: 'Drag & drop here',
|
|
5
|
+
description: 'JPG or PNG, smaller than 5mb',
|
|
6
|
+
uploadLabel: 'Browse',
|
|
6
7
|
previewLabel: 'File Preview'
|
|
7
8
|
}
|
|
8
9
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/atom/drag-and-drop/test/fixtures/default.js"],"names":["props","title","description","uploadLabel","previewLabel"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,
|
|
1
|
+
{"version":3,"sources":["../../../../../src/atom/drag-and-drop/test/fixtures/default.js"],"names":["props","modified","title","description","uploadLabel","previewLabel"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAE,KADL;AAELC,IAAAA,KAAK,EAAE,kBAFF;AAGLC,IAAAA,WAAW,EAAE,8BAHR;AAILC,IAAAA,WAAW,EAAE,QAJR;AAKLC,IAAAA,YAAY,EAAE;AALT;AADM,CAAf","sourcesContent":["export default {\n props: {\n modified: false,\n title: 'Drag & drop here',\n description: 'JPG or PNG, smaller than 5mb',\n uploadLabel: 'Browse',\n previewLabel: 'File Preview'\n }\n};\n"],"file":"default.js"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
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); }
|
|
2
|
+
|
|
3
|
+
import defaultProps from './default';
|
|
4
|
+
const {
|
|
5
|
+
props
|
|
6
|
+
} = defaultProps;
|
|
7
|
+
export default {
|
|
8
|
+
props: _extends(_extends({}, props), {}, {
|
|
9
|
+
error: 'The file is invalid'
|
|
10
|
+
})
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=error.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/atom/drag-and-drop/test/fixtures/error.js"],"names":["defaultProps","props","error"],"mappings":";;AAAA,OAAOA,YAAP,MAAyB,WAAzB;AAEA,MAAM;AAACC,EAAAA;AAAD,IAAUD,YAAhB;AAEA,eAAe;AACXC,EAAAA,KAAK,wBACEA,KADF;AAEDC,IAAAA,KAAK,EAAE;AAFN;AADM,CAAf","sourcesContent":["import defaultProps from './default';\n\nconst {props} = defaultProps;\n\nexport default {\n props: {\n ...props,\n error: 'The file is invalid'\n }\n}\n"],"file":"error.js"}
|
|
@@ -3,7 +3,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
3
3
|
import Default from './default';
|
|
4
4
|
export default {
|
|
5
5
|
props: _extends(_extends({}, Default.props), {}, {
|
|
6
|
-
loading: true
|
|
6
|
+
loading: true,
|
|
7
|
+
modified: false
|
|
7
8
|
})
|
|
8
9
|
};
|
|
9
10
|
//# sourceMappingURL=loading.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/atom/drag-and-drop/test/fixtures/loading.js"],"names":["Default","props","loading"],"mappings":";;AAAA,OAAOA,OAAP,MAAoB,WAApB;AAEA,eAAe;AACbC,EAAAA,KAAK,wBACAD,OAAO,CAACC,KADR;AAEHC,IAAAA,OAAO,EAAE;
|
|
1
|
+
{"version":3,"sources":["../../../../../src/atom/drag-and-drop/test/fixtures/loading.js"],"names":["Default","props","loading","modified"],"mappings":";;AAAA,OAAOA,OAAP,MAAoB,WAApB;AAEA,eAAe;AACbC,EAAAA,KAAK,wBACAD,OAAO,CAACC,KADR;AAEHC,IAAAA,OAAO,EAAE,IAFN;AAGHC,IAAAA,QAAQ,EAAE;AAHP;AADQ,CAAf","sourcesContent":["import Default from './default';\n\nexport default {\n props: {\n ...Default.props,\n loading: true,\n modified: false\n }\n};\n"],"file":"loading.js"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
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); }
|
|
2
|
+
|
|
3
|
+
import withImageReset from './with-image-reset';
|
|
4
|
+
const {
|
|
5
|
+
props
|
|
6
|
+
} = withImageReset;
|
|
7
|
+
export default {
|
|
8
|
+
props: _extends(_extends({}, props), {}, {
|
|
9
|
+
modified: true
|
|
10
|
+
})
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=modified.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/atom/drag-and-drop/test/fixtures/modified.js"],"names":["withImageReset","props","modified"],"mappings":";;AAAA,OAAOA,cAAP,MAA2B,oBAA3B;AAEA,MAAM;AAACC,EAAAA;AAAD,IAAUD,cAAhB;AAEA,eAAe;AACXC,EAAAA,KAAK,wBACEA,KADF;AAEDC,IAAAA,QAAQ,EAAE;AAFT;AADM,CAAf","sourcesContent":["import withImageReset from './with-image-reset';\n\nconst {props} = withImageReset;\n\nexport default {\n props: {\n ...props,\n modified: true\n }\n}\n"],"file":"modified.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/atom/drag-and-drop/test/fixtures/with-children.js"],"names":["React","style","props","previewContent","type","src","title","displayName","uploadLabel","children","onDragStart","onDragStop","input"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,KAAP,MAAkB,iCAAlB;AAEA,eAAe;AACbC,EAAAA,KAAK,EAAE;AACLC,IAAAA,cAAc,EAAE;AACdC,MAAAA,IAAI,EAAE,OADQ;AAEdC,MAAAA,GAAG,EAAE;AAFS,
|
|
1
|
+
{"version":3,"sources":["../../../../../src/atom/drag-and-drop/test/fixtures/with-children.js"],"names":["React","style","props","modified","previewContent","type","src","title","displayName","uploadLabel","children","onDragStart","onDragStop","input"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,KAAP,MAAkB,iCAAlB;AAEA,eAAe;AACbC,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAE,KADL;AAELC,IAAAA,cAAc,EAAE;AACdC,MAAAA,IAAI,EAAE,OADQ;AAEdC,MAAAA,GAAG,EAAE;AAFS,KAFX;AAMLC,IAAAA,KAAK,EAAE,aANF;AAOLC,IAAAA,WAAW,EAAE,cAPR;AAQLC,IAAAA,WAAW,EAAE;AARR,GADM;AAWb;AACAC,EAAAA,QAAQ,EAAE,CAACC,WAAD,EAAcC,UAAd,kBACR;AACE,IAAA,SAAS,EAAEX,KAAK,CAACY,KADnB;AAEE,IAAA,GAAG,EAAC,GAFN;AAGE,IAAA,IAAI,EAAC,MAHP;AAIE,IAAA,MAAM,EAAC,SAJT;AAKE,IAAA,QAAQ,EAAE,MAAM,IALlB;AAME,IAAA,WAAW,EAAEF,WANf;AAOE,IAAA,MAAM,EAAEC,UAPV;AAQE,IAAA,WAAW,EAAEA;AARf;AAbW,CAAf","sourcesContent":["import React from 'react';\nimport style from '../../../image-upload/style.css';\n\nexport default {\n props: {\n modified: false,\n previewContent: {\n type: 'image',\n src: 'https://static.coorpacademy.com/content/up/raw/logo_coorp-1491560495763.svg'\n },\n title: 'Desktop (*)',\n displayName: 'Upload image',\n uploadLabel: 'Upload'\n },\n // eslint-disable-next-line react/display-name\n children: (onDragStart, onDragStop) => (\n <input\n className={style.input}\n key=\"1\"\n type=\"file\"\n accept=\"image*/\"\n onChange={() => true}\n onDragEnter={onDragStart}\n onDrop={onDragStop}\n onDragLeave={onDragStop}\n />\n )\n};\n"],"file":"with-children.js"}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
props: {
|
|
3
|
+
modified: false,
|
|
3
4
|
title: 'Drag & Drop With Image',
|
|
4
5
|
description: 'Drag and drop component with an image',
|
|
5
6
|
uploadLabel: 'Upload Image(s)',
|
|
6
7
|
previewLabel: 'File Preview',
|
|
7
8
|
previewContent: {
|
|
8
9
|
type: 'image',
|
|
9
|
-
src: 'https://static.coorpacademy.com/content/up/raw/
|
|
10
|
+
src: 'https://static.coorpacademy.com/content/up/raw/logo_coorp-1491560495763.svg'
|
|
10
11
|
}
|
|
11
12
|
}
|
|
12
13
|
};
|