@coorpacademy/components 10.16.4-alpha.1 → 10.17.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/README.md +54 -0
- package/es/atom/drag-and-drop/index.js +6 -3
- package/es/atom/drag-and-drop/index.js.map +1 -1
- package/es/atom/drag-and-drop/style.css +5 -0
- package/es/atom/drag-and-drop/test/fixtures/disabled.js +12 -0
- package/es/atom/drag-and-drop/test/fixtures/disabled.js.map +1 -0
- package/es/atom/drag-and-drop/test/fixtures.js +2 -0
- package/es/atom/drag-and-drop/test/fixtures.js.map +1 -1
- package/es/atom/image-upload/index.js +3 -1
- package/es/atom/image-upload/index.js.map +1 -1
- package/es/atom/image-upload/test/fixtures/disabled.js +12 -0
- package/es/atom/image-upload/test/fixtures/disabled.js.map +1 -0
- package/es/atom/image-upload/test/fixtures.js +2 -0
- package/es/atom/image-upload/test/fixtures.js.map +1 -1
- package/es/atom/lottie-wrapper/index.js +158 -0
- package/es/atom/lottie-wrapper/index.js.map +1 -0
- package/es/atom/lottie-wrapper/style.css +15 -0
- package/es/atom/lottie-wrapper/test/fixtures/confetti.js +19 -0
- package/es/atom/lottie-wrapper/test/fixtures/confetti.js.map +1 -0
- package/es/atom/lottie-wrapper/test/fixtures/controls.js +10 -0
- package/es/atom/lottie-wrapper/test/fixtures/controls.js.map +1 -0
- package/es/atom/lottie-wrapper/test/fixtures/default.js +19 -0
- package/es/atom/lottie-wrapper/test/fixtures/default.js.map +1 -0
- package/es/atom/lottie-wrapper/test/fixtures/rank.js +15 -0
- package/es/atom/lottie-wrapper/test/fixtures/rank.js.map +1 -0
- package/es/atom/lottie-wrapper/test/fixtures.js +19 -0
- package/es/atom/lottie-wrapper/test/fixtures.js.map +1 -0
- package/es/atom/lottie-wrapper/test/lottie.js +119 -0
- package/es/atom/lottie-wrapper/test/lottie.js.map +1 -0
- package/es/molecule/drag-and-drop-wrapper/test/fixtures/{without-checkbox.js → disabled.js} +3 -2
- package/es/molecule/drag-and-drop-wrapper/test/fixtures/disabled.js.map +1 -0
- package/es/molecule/drag-and-drop-wrapper/test/fixtures.js +2 -2
- package/es/molecule/drag-and-drop-wrapper/test/fixtures.js.map +1 -1
- package/es/molecule/teams-popin/test/fixtures/loading-background.js +1 -1
- package/es/molecule/teams-popin/test/fixtures/loading-background.js.map +1 -1
- package/es/molecule/teams-popin/test/fixtures/login-background.js +1 -1
- package/es/molecule/teams-popin/test/fixtures/login-background.js.map +1 -1
- package/es/organism/rewards-form/test/fixtures/default.js +3 -2
- package/es/organism/rewards-form/test/fixtures/default.js.map +1 -1
- package/lib/atom/drag-and-drop/index.js +7 -3
- package/lib/atom/drag-and-drop/index.js.map +1 -1
- package/lib/atom/drag-and-drop/style.css +5 -0
- package/lib/atom/drag-and-drop/test/fixtures/disabled.js +21 -0
- package/lib/atom/drag-and-drop/test/fixtures/disabled.js.map +1 -0
- package/lib/atom/drag-and-drop/test/fixtures.js +3 -0
- package/lib/atom/drag-and-drop/test/fixtures.js.map +1 -1
- package/lib/atom/image-upload/index.js +3 -1
- package/lib/atom/image-upload/index.js.map +1 -1
- package/lib/atom/image-upload/test/fixtures/disabled.js +21 -0
- package/lib/atom/image-upload/test/fixtures/disabled.js.map +1 -0
- package/lib/atom/image-upload/test/fixtures.js +3 -0
- package/lib/atom/image-upload/test/fixtures.js.map +1 -1
- package/lib/atom/lottie-wrapper/index.js +184 -0
- package/lib/atom/lottie-wrapper/index.js.map +1 -0
- package/lib/atom/lottie-wrapper/style.css +15 -0
- package/lib/atom/lottie-wrapper/test/fixtures/confetti.js +24 -0
- package/lib/atom/lottie-wrapper/test/fixtures/confetti.js.map +1 -0
- package/lib/atom/lottie-wrapper/test/fixtures/controls.js +19 -0
- package/lib/atom/lottie-wrapper/test/fixtures/controls.js.map +1 -0
- package/lib/atom/lottie-wrapper/test/fixtures/default.js +24 -0
- package/lib/atom/lottie-wrapper/test/fixtures/default.js.map +1 -0
- package/lib/atom/lottie-wrapper/test/fixtures/rank.js +20 -0
- package/lib/atom/lottie-wrapper/test/fixtures/rank.js.map +1 -0
- package/lib/atom/lottie-wrapper/test/fixtures.js +31 -0
- package/lib/atom/lottie-wrapper/test/fixtures.js.map +1 -0
- package/lib/atom/lottie-wrapper/test/lottie.js +136 -0
- package/lib/atom/lottie-wrapper/test/lottie.js.map +1 -0
- package/lib/molecule/drag-and-drop-wrapper/test/fixtures/{without-checkbox.js → disabled.js} +3 -2
- package/lib/molecule/drag-and-drop-wrapper/test/fixtures/disabled.js.map +1 -0
- package/lib/molecule/drag-and-drop-wrapper/test/fixtures.js +3 -3
- package/lib/molecule/drag-and-drop-wrapper/test/fixtures.js.map +1 -1
- package/lib/molecule/teams-popin/test/fixtures/loading-background.js +1 -1
- package/lib/molecule/teams-popin/test/fixtures/loading-background.js.map +1 -1
- package/lib/molecule/teams-popin/test/fixtures/login-background.js +1 -1
- package/lib/molecule/teams-popin/test/fixtures/login-background.js.map +1 -1
- package/lib/organism/rewards-form/test/fixtures/default.js +4 -3
- package/lib/organism/rewards-form/test/fixtures/default.js.map +1 -1
- package/package.json +7 -4
- package/es/molecule/drag-and-drop-wrapper/test/fixtures/without-checkbox.js.map +0 -1
- package/lib/molecule/drag-and-drop-wrapper/test/fixtures/without-checkbox.js.map +0 -1
package/README.md
CHANGED
|
@@ -91,6 +91,60 @@ example:
|
|
|
91
91
|
...
|
|
92
92
|
```
|
|
93
93
|
|
|
94
|
+
### Using a Lottie Animation
|
|
95
|
+
|
|
96
|
+
To use a lottie animation, you need to use the LottieWrapper Atom.
|
|
97
|
+
|
|
98
|
+
Among the Lottie Atom's props, there are two *important* props: animationSrc & ie11ImageBackup,
|
|
99
|
+
that need an additional step, the ie11ImageBackup is needed as it's name implies because ie11 doesn't
|
|
100
|
+
support Lottie (more specifically Web Components due to the Shadow DOM).
|
|
101
|
+
|
|
102
|
+
First, you must upload to AWS S3 any new animation, in one of the static buckets (depending on the desired env), ex:
|
|
103
|
+
`https://static-staging.coorpacademy.com/animations/review/`.
|
|
104
|
+
|
|
105
|
+
This animation must be paired with a backup image (svg) that'll be used for the ie11 scenario.
|
|
106
|
+
|
|
107
|
+
Then, use the urls as props for animationSrc & ie11ImageBackup, ex:
|
|
108
|
+
|
|
109
|
+
```javascript
|
|
110
|
+
const props = {
|
|
111
|
+
'aria-label': 'aria lottie',
|
|
112
|
+
'data-name': 'default-lottie',
|
|
113
|
+
className: undefined,
|
|
114
|
+
animationSrc: 'https://static-staging.coorpacademy.com/animations/review/rank.json',
|
|
115
|
+
loop: true,
|
|
116
|
+
height: 200,
|
|
117
|
+
width: 200,
|
|
118
|
+
ie11ImageBackup:
|
|
119
|
+
'https://static-staging.coorpacademy.com/animations/review/rank_icon_congrats.svg',
|
|
120
|
+
// autoplay: true // autoplay is true by default
|
|
121
|
+
}
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
If you need to control the animation (play/pause/stop), then you must set autoplay to false &
|
|
125
|
+
add your desired state, among the available states: `play, pause, stop, loading`
|
|
126
|
+
|
|
127
|
+
```javascript
|
|
128
|
+
const props = {
|
|
129
|
+
'aria-label': 'aria lottie',
|
|
130
|
+
'data-name': 'default-lottie',
|
|
131
|
+
className: undefined,
|
|
132
|
+
animationSrc: 'https://static-staging.coorpacademy.com/animations/review/rank.json',
|
|
133
|
+
loop: true,
|
|
134
|
+
height: 200,
|
|
135
|
+
width: 200,
|
|
136
|
+
ie11ImageBackup:
|
|
137
|
+
'https://static-staging.coorpacademy.com/animations/review/rank_icon_congrats.svg',
|
|
138
|
+
autoplay: false,
|
|
139
|
+
animationControl: 'loading' // play can be passed directly without using loading first
|
|
140
|
+
}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
#### Additional information:
|
|
144
|
+
|
|
145
|
+
The props include classNames && size control to handle additional styling.
|
|
146
|
+
|
|
147
|
+
|
|
94
148
|
## Locally use in an external project
|
|
95
149
|
|
|
96
150
|
Link your dependencies:
|
|
@@ -7,6 +7,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
7
7
|
import React from 'react';
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
9
|
import { NovaSolidStatusClose as Close, NovaSolidFilesBasicFileUpload2 as FileUploadIcon, NovaSolidFilesBasicFileBlock2 as FileUploadBlockedIcon } from '@coorpacademy/nova-icons';
|
|
10
|
+
import classnames from 'classnames';
|
|
10
11
|
import Loader from '../loader';
|
|
11
12
|
import Button from '../button-link';
|
|
12
13
|
import getClassState from '../../util/get-class-state';
|
|
@@ -51,7 +52,8 @@ class DragAndDrop extends React.Component {
|
|
|
51
52
|
onReset = null,
|
|
52
53
|
error = '',
|
|
53
54
|
buttonAriaLabel = '',
|
|
54
|
-
errorButtonLabel = ''
|
|
55
|
+
errorButtonLabel = '',
|
|
56
|
+
disabled = false
|
|
55
57
|
} = this.props;
|
|
56
58
|
const {
|
|
57
59
|
dragging
|
|
@@ -138,9 +140,9 @@ class DragAndDrop extends React.Component {
|
|
|
138
140
|
}, /*#__PURE__*/React.createElement("div", {
|
|
139
141
|
className: style.title
|
|
140
142
|
}, title), !_isEmpty(previewContent) || loading ? /*#__PURE__*/React.createElement("div", {
|
|
141
|
-
className: previewContainer
|
|
143
|
+
className: classnames(previewContainer, disabled && style.disabled)
|
|
142
144
|
}, previewView) : /*#__PURE__*/React.createElement("div", {
|
|
143
|
-
className: dragging ? style.dragging : inputWrapper,
|
|
145
|
+
className: classnames(dragging ? style.dragging : inputWrapper, disabled && style.disabled),
|
|
144
146
|
id: idBox
|
|
145
147
|
}, /*#__PURE__*/React.createElement("div", {
|
|
146
148
|
className: style.infosContainer
|
|
@@ -171,6 +173,7 @@ DragAndDrop.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
171
173
|
}),
|
|
172
174
|
loading: PropTypes.bool,
|
|
173
175
|
modified: PropTypes.bool,
|
|
176
|
+
disabled: PropTypes.bool,
|
|
174
177
|
children: PropTypes.func,
|
|
175
178
|
onReset: PropTypes.func,
|
|
176
179
|
error: PropTypes.string,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/atom/drag-and-drop/index.js"],"names":["React","PropTypes","NovaSolidStatusClose","Close","NovaSolidFilesBasicFileUpload2","FileUploadIcon","NovaSolidFilesBasicFileBlock2","FileUploadBlockedIcon","Loader","Button","getClassState","style","constantNull","DragAndDrop","Component","constructor","props","state","dragging","handleDragStart","bind","handleDragStop","setState","render","idBox","children","title","description","uploadLabel","previewLabel","previewContent","loading","modified","onReset","error","buttonAriaLabel","errorButtonLabel","previewView","type","preview","src","loaderWrapper","loadingCancel","closeIcon","loader","loaderText","resetContent","resetUploadWrapper","resetSrcLabel","label","buildButton","defaultButtonProps","icon","position","button","previewContainer","modifiedPreviewContainer","inputWrapper","modifiedInputWrapper","errorInputWrapper","wrapper","infosContainer","iconError","dragAndDropLabel","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 NovaSolidStatusClose as Close,\n NovaSolidFilesBasicFileUpload2 as FileUploadIcon,\n NovaSolidFilesBasicFileBlock2 as FileUploadBlockedIcon\n} from '@coorpacademy/nova-icons';\nimport Loader from '../loader';\nimport Button from '../button-link';\nimport getClassState from '../../util/get-class-state';\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 label: PropTypes.string\n }),\n loading: PropTypes.bool,\n modified: PropTypes.bool,\n children: PropTypes.func,\n onReset: PropTypes.func,\n error: PropTypes.string,\n buttonAriaLabel: PropTypes.string,\n errorButtonLabel: 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 = '',\n buttonAriaLabel = '',\n errorButtonLabel = ''\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={12}\n width={12}\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 ? (\n <div className={style.resetUploadWrapper}>\n <div className={style.resetSrcLabel}>\n {previewContent.label ? previewContent.label : previewContent.src}\n </div>\n {onReset ? (\n <Close\n data-name=\"reset-content-icon\"\n height={12}\n width={12}\n className={style.closeIcon}\n onClick={onReset}\n />\n ) : null}\n </div>\n ) : null;\n\n const buildButton = () => {\n const defaultButtonProps = {\n label: uploadLabel,\n 'aria-label': buttonAriaLabel,\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 return <Button {...defaultButtonProps} label={errorButtonLabel} icon={{}} />;\n } else {\n return <Button {...defaultButtonProps} />;\n }\n };\n\n const button = buildButton(dragging, error);\n\n const previewContainer = getClassState(\n style.previewContainer,\n style.modifiedPreviewContainer,\n null,\n modified,\n error\n );\n const inputWrapper = getClassState(\n style.inputWrapper,\n style.modifiedInputWrapper,\n style.errorInputWrapper,\n modified,\n error\n );\n\n return (\n <div className={style.wrapper} data-name=\"drag-and-drop-wrapper\">\n <div className={style.title}>{title}</div>\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 ? (\n <FileUploadBlockedIcon className={style.iconError} />\n ) : (\n <FileUploadIcon className={style.icon} />\n )}\n {description ? <div className={style.description}>{description}</div> : null}\n {error ? null : <div className={style.dragAndDropLabel}>{'Drag & Drop here'}</div>}\n </div>\n {button}\n <div>{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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/atom/drag-and-drop/index.js"],"names":["React","PropTypes","NovaSolidStatusClose","Close","NovaSolidFilesBasicFileUpload2","FileUploadIcon","NovaSolidFilesBasicFileBlock2","FileUploadBlockedIcon","classnames","Loader","Button","getClassState","style","constantNull","DragAndDrop","Component","constructor","props","state","dragging","handleDragStart","bind","handleDragStop","setState","render","idBox","children","title","description","uploadLabel","previewLabel","previewContent","loading","modified","onReset","error","buttonAriaLabel","errorButtonLabel","disabled","previewView","type","preview","src","loaderWrapper","loadingCancel","closeIcon","loader","loaderText","resetContent","resetUploadWrapper","resetSrcLabel","label","buildButton","defaultButtonProps","icon","position","button","previewContainer","modifiedPreviewContainer","inputWrapper","modifiedInputWrapper","errorInputWrapper","wrapper","infosContainer","iconError","dragAndDropLabel","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 NovaSolidStatusClose as Close,\n NovaSolidFilesBasicFileUpload2 as FileUploadIcon,\n NovaSolidFilesBasicFileBlock2 as FileUploadBlockedIcon\n} from '@coorpacademy/nova-icons';\nimport classnames from 'classnames';\nimport Loader from '../loader';\nimport Button from '../button-link';\nimport getClassState from '../../util/get-class-state';\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 label: PropTypes.string\n }),\n loading: PropTypes.bool,\n modified: PropTypes.bool,\n disabled: PropTypes.bool,\n children: PropTypes.func,\n onReset: PropTypes.func,\n error: PropTypes.string,\n buttonAriaLabel: PropTypes.string,\n errorButtonLabel: 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 = '',\n buttonAriaLabel = '',\n errorButtonLabel = '',\n disabled = 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={12}\n width={12}\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 ? (\n <div className={style.resetUploadWrapper}>\n <div className={style.resetSrcLabel}>\n {previewContent.label ? previewContent.label : previewContent.src}\n </div>\n {onReset ? (\n <Close\n data-name=\"reset-content-icon\"\n height={12}\n width={12}\n className={style.closeIcon}\n onClick={onReset}\n />\n ) : null}\n </div>\n ) : null;\n\n const buildButton = () => {\n const defaultButtonProps = {\n label: uploadLabel,\n 'aria-label': buttonAriaLabel,\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 return <Button {...defaultButtonProps} label={errorButtonLabel} icon={{}} />;\n } else {\n return <Button {...defaultButtonProps} />;\n }\n };\n\n const button = buildButton(dragging, error);\n\n const previewContainer = getClassState(\n style.previewContainer,\n style.modifiedPreviewContainer,\n null,\n modified,\n error\n );\n const inputWrapper = getClassState(\n style.inputWrapper,\n style.modifiedInputWrapper,\n style.errorInputWrapper,\n modified,\n error\n );\n\n return (\n <div className={style.wrapper} data-name=\"drag-and-drop-wrapper\">\n <div className={style.title}>{title}</div>\n {!isEmpty(previewContent) || loading ? (\n <div className={classnames(previewContainer, disabled && style.disabled)}>\n {previewView}\n </div>\n ) : (\n <div\n className={classnames(\n dragging ? style.dragging : inputWrapper,\n disabled && style.disabled\n )}\n id={idBox}\n >\n <div className={style.infosContainer}>\n {error ? (\n <FileUploadBlockedIcon className={style.iconError} />\n ) : (\n <FileUploadIcon className={style.icon} />\n )}\n {description ? <div className={style.description}>{description}</div> : null}\n {error ? null : <div className={style.dragAndDropLabel}>{'Drag & Drop here'}</div>}\n </div>\n {button}\n <div>{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"}
|
|
@@ -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
|
+
disabled: true
|
|
10
|
+
})
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=disabled.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/atom/drag-and-drop/test/fixtures/disabled.js"],"names":["defaultProps","props","disabled"],"mappings":";;AAAA,OAAOA,YAAP,MAAyB,WAAzB;AAEA,MAAM;AAACC,EAAAA;AAAD,IAAUD,YAAhB;AAEA,eAAe;AACbC,EAAAA,KAAK,wBACAA,KADA;AAEHC,IAAAA,QAAQ,EAAE;AAFP;AADQ,CAAf","sourcesContent":["import defaultProps from './default';\n\nconst {props} = defaultProps;\n\nexport default {\n props: {\n ...props,\n disabled: true\n }\n};\n"],"file":"disabled.js"}
|
|
@@ -4,6 +4,7 @@ import renderComponentMacro from '../../../test/helpers/render-component';
|
|
|
4
4
|
import AtomDragAndDrop from '..';
|
|
5
5
|
import fixtureCleanAndModified from './fixtures/clean-and-modified';
|
|
6
6
|
import fixtureDefault from './fixtures/default';
|
|
7
|
+
import fixtureDisabled from './fixtures/disabled';
|
|
7
8
|
import fixtureError from './fixtures/error';
|
|
8
9
|
import fixtureLoading from './fixtures/loading';
|
|
9
10
|
import fixtureModified from './fixtures/modified';
|
|
@@ -20,6 +21,7 @@ test('Atom › AtomDragAndDrop > should have valid propTypes', t => {
|
|
|
20
21
|
});
|
|
21
22
|
test('Atom › AtomDragAndDrop › CleanAndModified › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureCleanAndModified);
|
|
22
23
|
test('Atom › AtomDragAndDrop › Default › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureDefault);
|
|
24
|
+
test('Atom › AtomDragAndDrop › Disabled › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureDisabled);
|
|
23
25
|
test('Atom › AtomDragAndDrop › Error › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureError);
|
|
24
26
|
test('Atom › AtomDragAndDrop › Loading › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureLoading);
|
|
25
27
|
test('Atom › AtomDragAndDrop › Modified › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureModified);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/atom/drag-and-drop/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","AtomDragAndDrop","fixtureCleanAndModified","fixtureDefault","fixtureError","fixtureLoading","fixtureModified","fixtureWithChildren","fixtureWithImageReset","fixtureWithImage","fixtureWithLongDescription","fixtureWithVideo","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,eAAP,MAA4B,IAA5B;AACA,OAAOC,uBAAP,MAAoC,+BAApC;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,eAAP,MAA4B,qBAA5B;AACA,OAAOC,mBAAP,MAAgC,0BAAhC;AACA,OAAOC,qBAAP,MAAkC,6BAAlC;AACA,OAAOC,gBAAP,MAA6B,uBAA7B;AACA,OAAOC,0BAAP,MAAuC,kCAAvC;AACA,OAAOC,gBAAP,MAA6B,uBAA7B;
|
|
1
|
+
{"version":3,"sources":["../../../../src/atom/drag-and-drop/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","AtomDragAndDrop","fixtureCleanAndModified","fixtureDefault","fixtureDisabled","fixtureError","fixtureLoading","fixtureModified","fixtureWithChildren","fixtureWithImageReset","fixtureWithImage","fixtureWithLongDescription","fixtureWithVideo","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,eAAP,MAA4B,IAA5B;AACA,OAAOC,uBAAP,MAAoC,+BAApC;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,eAAP,MAA4B,qBAA5B;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,eAAP,MAA4B,qBAA5B;AACA,OAAOC,mBAAP,MAAgC,0BAAhC;AACA,OAAOC,qBAAP,MAAkC,6BAAlC;AACA,OAAOC,gBAAP,MAA6B,uBAA7B;AACA,OAAOC,0BAAP,MAAuC,kCAAvC;AACA,OAAOC,gBAAP,MAA6B,uBAA7B;AAEAd,IAAI,CAAC,sDAAD,EAAyDe,CAAC,IAAI;AAChEA,EAAAA,CAAC,CAACC,IAAF;AACAf,EAAAA,OAAO,CAACE,eAAe,CAACc,SAAjB,EAA4B,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACjDJ,IAAAA,CAAC,CAACK,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,gDAA+CF,GAAI,mEAA5E;AACD,GAFM,CAAP;AAGD,CALG,CAAJ;AAOAnB,IAAI,CAAC,gEAAD,EAAmEE,oBAAnE,EAAyFC,eAAzF,EAA0GC,uBAA1G,CAAJ;AACAJ,IAAI,CAAC,uDAAD,EAA0DE,oBAA1D,EAAgFC,eAAhF,EAAiGE,cAAjG,CAAJ;AACAL,IAAI,CAAC,wDAAD,EAA2DE,oBAA3D,EAAiFC,eAAjF,EAAkGG,eAAlG,CAAJ;AACAN,IAAI,CAAC,qDAAD,EAAwDE,oBAAxD,EAA8EC,eAA9E,EAA+FI,YAA/F,CAAJ;AACAP,IAAI,CAAC,uDAAD,EAA0DE,oBAA1D,EAAgFC,eAAhF,EAAiGK,cAAjG,CAAJ;AACAR,IAAI,CAAC,wDAAD,EAA2DE,oBAA3D,EAAiFC,eAAjF,EAAkGM,eAAlG,CAAJ;AACAT,IAAI,CAAC,4DAAD,EAA+DE,oBAA/D,EAAqFC,eAArF,EAAsGO,mBAAtG,CAAJ;AACAV,IAAI,CAAC,8DAAD,EAAiEE,oBAAjE,EAAuFC,eAAvF,EAAwGQ,qBAAxG,CAAJ;AACAX,IAAI,CAAC,yDAAD,EAA4DE,oBAA5D,EAAkFC,eAAlF,EAAmGS,gBAAnG,CAAJ;AACAZ,IAAI,CAAC,mEAAD,EAAsEE,oBAAtE,EAA4FC,eAA5F,EAA6GU,0BAA7G,CAAJ;AACAb,IAAI,CAAC,yDAAD,EAA4DE,oBAA5D,EAAkFC,eAAlF,EAAmGW,gBAAnG,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport AtomDragAndDrop from '..';\nimport fixtureCleanAndModified from './fixtures/clean-and-modified';\nimport fixtureDefault from './fixtures/default';\nimport fixtureDisabled from './fixtures/disabled';\nimport fixtureError from './fixtures/error';\nimport fixtureLoading from './fixtures/loading';\nimport fixtureModified from './fixtures/modified';\nimport fixtureWithChildren from './fixtures/with-children';\nimport fixtureWithImageReset from './fixtures/with-image-reset';\nimport fixtureWithImage from './fixtures/with-image';\nimport fixtureWithLongDescription from './fixtures/with-long-description';\nimport fixtureWithVideo from './fixtures/with-video';\n\ntest('Atom › AtomDragAndDrop > should have valid propTypes', t => {\n t.pass();\n forEach(AtomDragAndDrop.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Atom.AtomDragAndDrop.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Atom › AtomDragAndDrop › CleanAndModified › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureCleanAndModified);\ntest('Atom › AtomDragAndDrop › Default › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureDefault);\ntest('Atom › AtomDragAndDrop › Disabled › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureDisabled);\ntest('Atom › AtomDragAndDrop › Error › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureError);\ntest('Atom › AtomDragAndDrop › Loading › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureLoading);\ntest('Atom › AtomDragAndDrop › Modified › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureModified);\ntest('Atom › AtomDragAndDrop › WithChildren › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureWithChildren);\ntest('Atom › AtomDragAndDrop › WithImageReset › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureWithImageReset);\ntest('Atom › AtomDragAndDrop › WithImage › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureWithImage);\ntest('Atom › AtomDragAndDrop › WithLongDescription › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureWithLongDescription);\ntest('Atom › AtomDragAndDrop › WithVideo › should be rendered', renderComponentMacro, AtomDragAndDrop, fixtureWithVideo);\n"],"file":"fixtures.js"}
|
|
@@ -19,6 +19,7 @@ const ImageUpload = ({
|
|
|
19
19
|
uploadLabel,
|
|
20
20
|
loading,
|
|
21
21
|
modified,
|
|
22
|
+
disabled = false,
|
|
22
23
|
onChange,
|
|
23
24
|
onReset = null,
|
|
24
25
|
name,
|
|
@@ -46,13 +47,14 @@ const ImageUpload = ({
|
|
|
46
47
|
modified: modified,
|
|
47
48
|
onReset: handleReset,
|
|
48
49
|
error: error,
|
|
50
|
+
disabled: disabled,
|
|
49
51
|
buttonAriaLabel: buttonAriaLabel,
|
|
50
52
|
errorButtonLabel: errorButtonLabel
|
|
51
53
|
}, (onDragStart, onDragStop) => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
|
|
52
54
|
type: "file",
|
|
53
55
|
name: name,
|
|
54
56
|
accept: acceptedImages,
|
|
55
|
-
disabled: loading,
|
|
57
|
+
disabled: loading || disabled,
|
|
56
58
|
className: style.input,
|
|
57
59
|
onChange: onChange,
|
|
58
60
|
onDragEnter: onDragStart,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/atom/image-upload/index.js"],"names":["React","useCallback","PropTypes","DragAndDrop","ImagePropType","style","ImageUpload","title","description","previewLabel","previewContent","uploadLabel","loading","modified","onChange","onReset","name","imageTypes","error","buttonAriaLabel","errorButtonLabel","handleReset","e","preventDefault","acceptedImages","t","onDragStart","onDragStop","input","propTypes","string","func","arrayOf"],"mappings":";;;;;;;AAAA,OAAOA,KAAP,IAAeC,WAAf,QAAiC,OAAjC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,WAAP,MAAwB,kBAAxB;AACA,SAAQC,aAAR,QAA4B,sBAA5B;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,WAAW,GAAG,CAAC;AACnBC,EAAAA,KADmB;AAEnBC,EAAAA,WAFmB;AAGnBC,EAAAA,YAHmB;AAInBC,EAAAA,cAJmB;AAKnBC,EAAAA,WALmB;AAMnBC,EAAAA,OANmB;AAOnBC,EAAAA,QAPmB;AAQnBC,EAAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/atom/image-upload/index.js"],"names":["React","useCallback","PropTypes","DragAndDrop","ImagePropType","style","ImageUpload","title","description","previewLabel","previewContent","uploadLabel","loading","modified","disabled","onChange","onReset","name","imageTypes","error","buttonAriaLabel","errorButtonLabel","handleReset","e","preventDefault","acceptedImages","t","onDragStart","onDragStop","input","propTypes","string","func","arrayOf"],"mappings":";;;;;;;AAAA,OAAOA,KAAP,IAAeC,WAAf,QAAiC,OAAjC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,WAAP,MAAwB,kBAAxB;AACA,SAAQC,aAAR,QAA4B,sBAA5B;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,WAAW,GAAG,CAAC;AACnBC,EAAAA,KADmB;AAEnBC,EAAAA,WAFmB;AAGnBC,EAAAA,YAHmB;AAInBC,EAAAA,cAJmB;AAKnBC,EAAAA,WALmB;AAMnBC,EAAAA,OANmB;AAOnBC,EAAAA,QAPmB;AAQnBC,EAAAA,QAAQ,GAAG,KARQ;AASnBC,EAAAA,QATmB;AAUnBC,EAAAA,OAAO,GAAG,IAVS;AAWnBC,EAAAA,IAXmB;AAYnB;AACAC,EAAAA,UAAU,GAAG,CAAC,GAAD,CAbM;AAcnBC,EAAAA,KAAK,GAAG,EAdW;AAenBC,EAAAA,eAfmB;AAgBnBC,EAAAA;AAhBmB,CAAD,KAiBd;AACJ,QAAMC,WAAW,GAAGrB,WAAW,CAC7BsB,CAAC,IAAI;AACH,QAAI,OAAMP,OAAN,CAAJ,EAAoB;AACpBO,IAAAA,CAAC,CAACC,cAAF;AACA,WAAOR,OAAO,CAACO,CAAD,CAAd;AACD,GAL4B,EAM7B,CAACP,OAAD,CAN6B,CAA/B;;AASA,QAAMS,cAAc,GAAG,MACrB,KAAIC,CAAC,IAAK,SAAQA,CAAE,EAApB,CADqB,EAErB,MAAK,GAAL,CAFqB,EAGrBR,UAHqB,CAAvB;;AAKA,sBACE,oBAAC,WAAD;AACE,IAAA,KAAK,EAAEX,KADT;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,YAAY,EAAEC,YAHhB;AAIE,IAAA,cAAc,EAAEC,cAJlB;AAKE,IAAA,WAAW,EAAEC,WALf;AAME,IAAA,OAAO,EAAEC,OANX;AAOE,IAAA,QAAQ,EAAEC,QAPZ;AAQE,IAAA,OAAO,EAAES,WARX;AASE,IAAA,KAAK,EAAEH,KATT;AAUE,IAAA,QAAQ,EAAEL,QAVZ;AAWE,IAAA,eAAe,EAAEM,eAXnB;AAYE,IAAA,gBAAgB,EAAEC;AAZpB,KAcG,CAACM,WAAD,EAAcC,UAAd,kBACC,8CACE;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,IAAI,EAAEX,IAFR;AAGE,IAAA,MAAM,EAAEQ,cAHV;AAIE,IAAA,QAAQ,EAAEb,OAAO,IAAIE,QAJvB;AAKE,IAAA,SAAS,EAAET,KAAK,CAACwB,KALnB;AAME,IAAA,QAAQ,EAAEd,QANZ;AAOE,IAAA,WAAW,EAAEY,WAPf;AAQE,IAAA,MAAM,EAAEC,UARV;AASE,IAAA,WAAW,EAAEA;AATf,IADF,CAfJ,CADF;AAgCD,CAhED;;AAkEAtB,WAAW,CAACwB,SAAZ,iEACK3B,WAAW,CAAC2B,SADjB;AAEEb,EAAAA,IAAI,EAAEf,SAAS,CAAC6B,MAFlB;AAGEhB,EAAAA,QAAQ,EAAEb,SAAS,CAAC8B,IAHtB;AAIEhB,EAAAA,OAAO,EAAEd,SAAS,CAAC8B,IAJrB;AAKEd,EAAAA,UAAU,EAAEhB,SAAS,CAAC+B,OAAV,CAAkB7B,aAAlB,CALd;AAMEe,EAAAA,KAAK,EAAEjB,SAAS,CAAC6B,MANnB;AAOEX,EAAAA,eAAe,EAAElB,SAAS,CAAC6B,MAP7B;AAQEV,EAAAA,gBAAgB,EAAEnB,SAAS,CAAC6B;AAR9B;AAWA,eAAezB,WAAf","sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {join, map, pipe, isNil} from 'lodash/fp';\nimport DragAndDrop from '../drag-and-drop';\nimport {ImagePropType} from '../../util/proptypes';\nimport style from './style.css';\n\nconst ImageUpload = ({\n title,\n description,\n previewLabel,\n previewContent,\n uploadLabel,\n loading,\n modified,\n disabled = false,\n onChange,\n onReset = null,\n name,\n // See ImagePropType for accepted values\n imageTypes = ['*'],\n error = '',\n buttonAriaLabel,\n errorButtonLabel\n}) => {\n const handleReset = useCallback(\n e => {\n if (isNil(onReset)) return;\n e.preventDefault();\n return onReset(e);\n },\n [onReset]\n );\n\n const acceptedImages = pipe(\n map(t => `image/${t}`),\n join(',')\n )(imageTypes);\n\n return (\n <DragAndDrop\n title={title}\n description={description}\n previewLabel={previewLabel}\n previewContent={previewContent}\n uploadLabel={uploadLabel}\n loading={loading}\n modified={modified}\n onReset={handleReset}\n error={error}\n disabled={disabled}\n buttonAriaLabel={buttonAriaLabel}\n errorButtonLabel={errorButtonLabel}\n >\n {(onDragStart, onDragStop) => (\n <div>\n <input\n type=\"file\"\n name={name}\n accept={acceptedImages}\n disabled={loading || disabled}\n className={style.input}\n onChange={onChange}\n onDragEnter={onDragStart}\n onDrop={onDragStop}\n onDragLeave={onDragStop}\n />\n </div>\n )}\n </DragAndDrop>\n );\n};\n\nImageUpload.propTypes = {\n ...DragAndDrop.propTypes,\n name: PropTypes.string,\n onChange: PropTypes.func,\n onReset: PropTypes.func,\n imageTypes: PropTypes.arrayOf(ImagePropType),\n error: PropTypes.string,\n buttonAriaLabel: PropTypes.string,\n errorButtonLabel: PropTypes.string\n};\n\nexport default ImageUpload;\n"],"file":"index.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
|
+
disabled: true
|
|
10
|
+
})
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=disabled.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/atom/image-upload/test/fixtures/disabled.js"],"names":["defaultProps","props","disabled"],"mappings":";;AAAA,OAAOA,YAAP,MAAyB,WAAzB;AAEA,MAAM;AAACC,EAAAA;AAAD,IAAUD,YAAhB;AAEA,eAAe;AACbC,EAAAA,KAAK,wBAAMA,KAAN;AAAaC,IAAAA,QAAQ,EAAE;AAAvB;AADQ,CAAf","sourcesContent":["import defaultProps from './default';\n\nconst {props} = defaultProps;\n\nexport default {\n props: {...props, disabled: true}\n};\n"],"file":"disabled.js"}
|
|
@@ -9,6 +9,7 @@ import fixtureDesktopResetDescriptionOnlyPng from './fixtures/desktop-reset-desc
|
|
|
9
9
|
import fixtureDesktopResetDescription from './fixtures/desktop-reset-description';
|
|
10
10
|
import fixtureDesktopResetNoDescription from './fixtures/desktop-reset-no-description';
|
|
11
11
|
import fixtureDesktop from './fixtures/desktop';
|
|
12
|
+
import fixtureDisabled from './fixtures/disabled';
|
|
12
13
|
import fixtureEmail from './fixtures/email';
|
|
13
14
|
import fixtureMobile from './fixtures/mobile';
|
|
14
15
|
import fixtureModified from './fixtures/modified';
|
|
@@ -25,6 +26,7 @@ test('Atom › AtomImageUpload › DesktopResetDescriptionOnlyPng › should be
|
|
|
25
26
|
test('Atom › AtomImageUpload › DesktopResetDescription › should be rendered', renderComponentMacro, AtomImageUpload, fixtureDesktopResetDescription);
|
|
26
27
|
test('Atom › AtomImageUpload › DesktopResetNoDescription › should be rendered', renderComponentMacro, AtomImageUpload, fixtureDesktopResetNoDescription);
|
|
27
28
|
test('Atom › AtomImageUpload › Desktop › should be rendered', renderComponentMacro, AtomImageUpload, fixtureDesktop);
|
|
29
|
+
test('Atom › AtomImageUpload › Disabled › should be rendered', renderComponentMacro, AtomImageUpload, fixtureDisabled);
|
|
28
30
|
test('Atom › AtomImageUpload › Email › should be rendered', renderComponentMacro, AtomImageUpload, fixtureEmail);
|
|
29
31
|
test('Atom › AtomImageUpload › Mobile › should be rendered', renderComponentMacro, AtomImageUpload, fixtureMobile);
|
|
30
32
|
test('Atom › AtomImageUpload › Modified › should be rendered', renderComponentMacro, AtomImageUpload, fixtureModified);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/atom/image-upload/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","AtomImageUpload","fixtureCleanModified","fixtureDefault","fixtureDesktopResetDescriptionMultiple","fixtureDesktopResetDescriptionOnlyPng","fixtureDesktopResetDescription","fixtureDesktopResetNoDescription","fixtureDesktop","fixtureEmail","fixtureMobile","fixtureModified","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,eAAP,MAA4B,IAA5B;AACA,OAAOC,oBAAP,MAAiC,2BAAjC;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,sCAAP,MAAmD,+CAAnD;AACA,OAAOC,qCAAP,MAAkD,+CAAlD;AACA,OAAOC,8BAAP,MAA2C,sCAA3C;AACA,OAAOC,gCAAP,MAA6C,yCAA7C;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,aAAP,MAA0B,mBAA1B;AACA,OAAOC,eAAP,MAA4B,qBAA5B;
|
|
1
|
+
{"version":3,"sources":["../../../../src/atom/image-upload/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","AtomImageUpload","fixtureCleanModified","fixtureDefault","fixtureDesktopResetDescriptionMultiple","fixtureDesktopResetDescriptionOnlyPng","fixtureDesktopResetDescription","fixtureDesktopResetNoDescription","fixtureDesktop","fixtureDisabled","fixtureEmail","fixtureMobile","fixtureModified","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,eAAP,MAA4B,IAA5B;AACA,OAAOC,oBAAP,MAAiC,2BAAjC;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,sCAAP,MAAmD,+CAAnD;AACA,OAAOC,qCAAP,MAAkD,+CAAlD;AACA,OAAOC,8BAAP,MAA2C,sCAA3C;AACA,OAAOC,gCAAP,MAA6C,yCAA7C;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,eAAP,MAA4B,qBAA5B;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,aAAP,MAA0B,mBAA1B;AACA,OAAOC,eAAP,MAA4B,qBAA5B;AAEAd,IAAI,CAAC,sDAAD,EAAyDe,CAAC,IAAI;AAChEA,EAAAA,CAAC,CAACC,IAAF;AACAf,EAAAA,OAAO,CAACE,eAAe,CAACc,SAAjB,EAA4B,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACjDJ,IAAAA,CAAC,CAACK,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,gDAA+CF,GAAI,mEAA5E;AACD,GAFM,CAAP;AAGD,CALG,CAAJ;AAOAnB,IAAI,CAAC,6DAAD,EAAgEE,oBAAhE,EAAsFC,eAAtF,EAAuGC,oBAAvG,CAAJ;AACAJ,IAAI,CAAC,uDAAD,EAA0DE,oBAA1D,EAAgFC,eAAhF,EAAiGE,cAAjG,CAAJ;AACAL,IAAI,CAAC,+EAAD,EAAkFE,oBAAlF,EAAwGC,eAAxG,EAAyHG,sCAAzH,CAAJ;AACAN,IAAI,CAAC,8EAAD,EAAiFE,oBAAjF,EAAuGC,eAAvG,EAAwHI,qCAAxH,CAAJ;AACAP,IAAI,CAAC,uEAAD,EAA0EE,oBAA1E,EAAgGC,eAAhG,EAAiHK,8BAAjH,CAAJ;AACAR,IAAI,CAAC,yEAAD,EAA4EE,oBAA5E,EAAkGC,eAAlG,EAAmHM,gCAAnH,CAAJ;AACAT,IAAI,CAAC,uDAAD,EAA0DE,oBAA1D,EAAgFC,eAAhF,EAAiGO,cAAjG,CAAJ;AACAV,IAAI,CAAC,wDAAD,EAA2DE,oBAA3D,EAAiFC,eAAjF,EAAkGQ,eAAlG,CAAJ;AACAX,IAAI,CAAC,qDAAD,EAAwDE,oBAAxD,EAA8EC,eAA9E,EAA+FS,YAA/F,CAAJ;AACAZ,IAAI,CAAC,sDAAD,EAAyDE,oBAAzD,EAA+EC,eAA/E,EAAgGU,aAAhG,CAAJ;AACAb,IAAI,CAAC,wDAAD,EAA2DE,oBAA3D,EAAiFC,eAAjF,EAAkGW,eAAlG,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport AtomImageUpload from '..';\nimport fixtureCleanModified from './fixtures/clean-modified';\nimport fixtureDefault from './fixtures/default';\nimport fixtureDesktopResetDescriptionMultiple from './fixtures/desktop-reset-description-multiple';\nimport fixtureDesktopResetDescriptionOnlyPng from './fixtures/desktop-reset-description-only-png';\nimport fixtureDesktopResetDescription from './fixtures/desktop-reset-description';\nimport fixtureDesktopResetNoDescription from './fixtures/desktop-reset-no-description';\nimport fixtureDesktop from './fixtures/desktop';\nimport fixtureDisabled from './fixtures/disabled';\nimport fixtureEmail from './fixtures/email';\nimport fixtureMobile from './fixtures/mobile';\nimport fixtureModified from './fixtures/modified';\n\ntest('Atom › AtomImageUpload > should have valid propTypes', t => {\n t.pass();\n forEach(AtomImageUpload.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Atom.AtomImageUpload.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Atom › AtomImageUpload › CleanModified › should be rendered', renderComponentMacro, AtomImageUpload, fixtureCleanModified);\ntest('Atom › AtomImageUpload › Default › should be rendered', renderComponentMacro, AtomImageUpload, fixtureDefault);\ntest('Atom › AtomImageUpload › DesktopResetDescriptionMultiple › should be rendered', renderComponentMacro, AtomImageUpload, fixtureDesktopResetDescriptionMultiple);\ntest('Atom › AtomImageUpload › DesktopResetDescriptionOnlyPng › should be rendered', renderComponentMacro, AtomImageUpload, fixtureDesktopResetDescriptionOnlyPng);\ntest('Atom › AtomImageUpload › DesktopResetDescription › should be rendered', renderComponentMacro, AtomImageUpload, fixtureDesktopResetDescription);\ntest('Atom › AtomImageUpload › DesktopResetNoDescription › should be rendered', renderComponentMacro, AtomImageUpload, fixtureDesktopResetNoDescription);\ntest('Atom › AtomImageUpload › Desktop › should be rendered', renderComponentMacro, AtomImageUpload, fixtureDesktop);\ntest('Atom › AtomImageUpload › Disabled › should be rendered', renderComponentMacro, AtomImageUpload, fixtureDisabled);\ntest('Atom › AtomImageUpload › Email › should be rendered', renderComponentMacro, AtomImageUpload, fixtureEmail);\ntest('Atom › AtomImageUpload › Mobile › should be rendered', renderComponentMacro, AtomImageUpload, fixtureMobile);\ntest('Atom › AtomImageUpload › Modified › should be rendered', renderComponentMacro, AtomImageUpload, fixtureModified);\n"],"file":"fixtures.js"}
|
|
@@ -0,0 +1,158 @@
|
|
|
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 React, { useMemo, useRef, useEffect, useState } from 'react';
|
|
4
|
+
import PropTypes from 'prop-types';
|
|
5
|
+
import classnames from 'classnames';
|
|
6
|
+
import lottie from 'lottie-web';
|
|
7
|
+
import get from 'lodash/fp/get';
|
|
8
|
+
import has from 'lodash/fp/has';
|
|
9
|
+
import includes from 'lodash/fp/includes';
|
|
10
|
+
import keys from 'lodash/fp/keys';
|
|
11
|
+
import omit from 'lodash/fp/omit';
|
|
12
|
+
import unfetch from 'isomorphic-unfetch';
|
|
13
|
+
import style from './style.css';
|
|
14
|
+
export const ANIMATION_CONTROL = {
|
|
15
|
+
play: 'play',
|
|
16
|
+
pause: 'pause',
|
|
17
|
+
stop: 'stop',
|
|
18
|
+
loading: 'loading'
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
const isIE11 = () => {
|
|
22
|
+
if (typeof window === 'undefined') return;
|
|
23
|
+
const userAgent = get('navigator.userAgent', window);
|
|
24
|
+
const hasMsCrypto = has('msCrypto', window);
|
|
25
|
+
const hasRevision = includes('rv:', userAgent);
|
|
26
|
+
const hasTrident = includes('Trident/', userAgent);
|
|
27
|
+
return hasMsCrypto || hasRevision && hasTrident;
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export const fetchAndLoadAnimation = async (_lottie, _fetch, animationSrc, containerRef, loop, animationClassnames, hideOnTransparent, autoplay) => {
|
|
31
|
+
const animationUrl = new URL(animationSrc).toString();
|
|
32
|
+
const fetchResult = await _fetch(animationUrl, {
|
|
33
|
+
headers: {
|
|
34
|
+
'X-Requested-With': 'XMLHttpRequest',
|
|
35
|
+
'Content-Type': 'application/json'
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
const animationData = await fetchResult.json();
|
|
39
|
+
|
|
40
|
+
const animation = _lottie.loadAnimation({
|
|
41
|
+
container: containerRef.current,
|
|
42
|
+
// the dom element that will contain the animation
|
|
43
|
+
renderer: 'svg',
|
|
44
|
+
autoplay,
|
|
45
|
+
loop,
|
|
46
|
+
animationData,
|
|
47
|
+
rendererSettings: {
|
|
48
|
+
className: animationClassnames,
|
|
49
|
+
hideOnTransparent,
|
|
50
|
+
preserveAspectRatio: 'xMidYMid meet' // same options as a preserveAspectRatio prop
|
|
51
|
+
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
return animation;
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
const LottieWrapper = props => {
|
|
59
|
+
const {
|
|
60
|
+
className,
|
|
61
|
+
'data-name': dataName,
|
|
62
|
+
'aria-label': ariaLabel,
|
|
63
|
+
animationSrc,
|
|
64
|
+
loop = false,
|
|
65
|
+
rendererSettings = {},
|
|
66
|
+
width,
|
|
67
|
+
height,
|
|
68
|
+
ie11ImageBackup,
|
|
69
|
+
backupImageClassName,
|
|
70
|
+
autoplay = true,
|
|
71
|
+
animationControl
|
|
72
|
+
} = props;
|
|
73
|
+
const {
|
|
74
|
+
className: animationClassName,
|
|
75
|
+
hideOnTransparent = true
|
|
76
|
+
} = rendererSettings;
|
|
77
|
+
const containerRef = useRef(null); // lottie's animation instance
|
|
78
|
+
|
|
79
|
+
const [animationItem, setAnimationItem] = useState(null);
|
|
80
|
+
const [isAnimationVisible, setIsAnimationVisible] = useState(autoplay);
|
|
81
|
+
|
|
82
|
+
const _isIE11 = useMemo(() => isIE11(), []);
|
|
83
|
+
|
|
84
|
+
const wrapperClassName = useMemo(() => classnames(className, style.lottieContainer), [className]);
|
|
85
|
+
const lottieAnimationClassName = useMemo(() => classnames(animationClassName, style.animation), [animationClassName]);
|
|
86
|
+
const ie11BackupImageClassName = useMemo(() => classnames(backupImageClassName, style.backupImage), [backupImageClassName]);
|
|
87
|
+
useEffect(() => {
|
|
88
|
+
// enzyme does not handle well the state update after an async useEffect in tests
|
|
89
|
+
// to remove when the migration towards @testing-library/react is done
|
|
90
|
+
|
|
91
|
+
/* istanbul ignore next */
|
|
92
|
+
if (animationItem && includes(animationControl, keys(omit('loading', ANIMATION_CONTROL))) && !autoplay) {
|
|
93
|
+
setIsAnimationVisible(true);
|
|
94
|
+
animationItem[animationControl]();
|
|
95
|
+
if (animationControl === ANIMATION_CONTROL.stop) setIsAnimationVisible(false);
|
|
96
|
+
}
|
|
97
|
+
}, [animationControl, animationItem, autoplay]);
|
|
98
|
+
useEffect(() => {
|
|
99
|
+
const loadAnimation = async () => {
|
|
100
|
+
if (!_isIE11 && !animationItem) {
|
|
101
|
+
/* istanbul ignore else */
|
|
102
|
+
if (typeof window !== 'undefined') {
|
|
103
|
+
window.lottie = lottie;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
const animation = await fetchAndLoadAnimation(lottie, unfetch, animationSrc, containerRef, loop, lottieAnimationClassName, hideOnTransparent, autoplay);
|
|
107
|
+
/* istanbul ignore next */
|
|
108
|
+
|
|
109
|
+
setAnimationItem(animation);
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
loadAnimation();
|
|
114
|
+
return () => animationItem &&
|
|
115
|
+
/* istanbul ignore next */
|
|
116
|
+
lottie.destroy(animationItem.name);
|
|
117
|
+
}, [lottieAnimationClassName, containerRef, hideOnTransparent, loop, animationSrc, _isIE11, animationItem, autoplay]);
|
|
118
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
119
|
+
ref: containerRef,
|
|
120
|
+
"aria-label": ariaLabel,
|
|
121
|
+
"data-name": dataName,
|
|
122
|
+
className: wrapperClassName,
|
|
123
|
+
style: _extends(_extends(_extends({}, width && {
|
|
124
|
+
width: `${width}px`,
|
|
125
|
+
maxWidth: `${width}px`
|
|
126
|
+
}), height && {
|
|
127
|
+
height: `${height}px`,
|
|
128
|
+
maxHeight: `${height}px`
|
|
129
|
+
}), {}, {
|
|
130
|
+
opacity: isAnimationVisible ? 1 : 0,
|
|
131
|
+
transition: 'opacity 0.25s ease-in'
|
|
132
|
+
})
|
|
133
|
+
}, _isIE11 ? /*#__PURE__*/React.createElement("img", {
|
|
134
|
+
src: ie11ImageBackup,
|
|
135
|
+
className: ie11BackupImageClassName,
|
|
136
|
+
"data-name": "ie11-backup-image"
|
|
137
|
+
}) : null);
|
|
138
|
+
};
|
|
139
|
+
|
|
140
|
+
LottieWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
141
|
+
'aria-label': PropTypes.string.isRequired,
|
|
142
|
+
'data-name': PropTypes.string,
|
|
143
|
+
animationSrc: PropTypes.string.isRequired,
|
|
144
|
+
loop: PropTypes.bool,
|
|
145
|
+
rendererSettings: PropTypes.shape({
|
|
146
|
+
hideOnTransparent: PropTypes.bool,
|
|
147
|
+
className: PropTypes.string
|
|
148
|
+
}),
|
|
149
|
+
height: PropTypes.number,
|
|
150
|
+
width: PropTypes.number,
|
|
151
|
+
className: PropTypes.string,
|
|
152
|
+
ie11ImageBackup: PropTypes.string.isRequired,
|
|
153
|
+
backupImageClassName: PropTypes.string,
|
|
154
|
+
autoplay: PropTypes.bool,
|
|
155
|
+
animationControl: PropTypes.oneOf(keys(ANIMATION_CONTROL))
|
|
156
|
+
} : {};
|
|
157
|
+
export default LottieWrapper;
|
|
158
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/atom/lottie-wrapper/index.js"],"names":["React","useMemo","useRef","useEffect","useState","PropTypes","classnames","lottie","get","has","includes","keys","omit","unfetch","style","ANIMATION_CONTROL","play","pause","stop","loading","isIE11","window","userAgent","hasMsCrypto","hasRevision","hasTrident","fetchAndLoadAnimation","_lottie","_fetch","animationSrc","containerRef","loop","animationClassnames","hideOnTransparent","autoplay","animationUrl","URL","toString","fetchResult","headers","animationData","json","animation","loadAnimation","container","current","renderer","rendererSettings","className","preserveAspectRatio","LottieWrapper","props","dataName","ariaLabel","width","height","ie11ImageBackup","backupImageClassName","animationControl","animationClassName","animationItem","setAnimationItem","isAnimationVisible","setIsAnimationVisible","_isIE11","wrapperClassName","lottieContainer","lottieAnimationClassName","ie11BackupImageClassName","backupImage","destroy","name","maxWidth","maxHeight","opacity","transition","propTypes","string","isRequired","bool","shape","number","oneOf"],"mappings":"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","sourcesContent":["import React, {useMemo, useRef, useEffect, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport lottie from 'lottie-web';\nimport get from 'lodash/fp/get';\nimport has from 'lodash/fp/has';\nimport includes from 'lodash/fp/includes';\nimport keys from 'lodash/fp/keys';\nimport omit from 'lodash/fp/omit';\nimport unfetch from 'isomorphic-unfetch';\nimport style from './style.css';\n\nexport const ANIMATION_CONTROL = {\n play: 'play',\n pause: 'pause',\n stop: 'stop',\n loading: 'loading'\n};\n\nconst isIE11 = () => {\n if (typeof window === 'undefined') return;\n const userAgent = get('navigator.userAgent', window);\n const hasMsCrypto = has('msCrypto', window);\n const hasRevision = includes('rv:', userAgent);\n const hasTrident = includes('Trident/', userAgent);\n\n return hasMsCrypto || (hasRevision && hasTrident);\n};\n\nexport const fetchAndLoadAnimation = async (\n _lottie,\n _fetch,\n animationSrc,\n containerRef,\n loop,\n animationClassnames,\n hideOnTransparent,\n autoplay\n) => {\n const animationUrl = new URL(animationSrc).toString();\n const fetchResult = await _fetch(animationUrl, {\n headers: {\n 'X-Requested-With': 'XMLHttpRequest',\n 'Content-Type': 'application/json'\n }\n });\n\n const animationData = await fetchResult.json();\n\n const animation = _lottie.loadAnimation({\n container: containerRef.current, // the dom element that will contain the animation\n renderer: 'svg',\n autoplay,\n loop,\n animationData,\n rendererSettings: {\n className: animationClassnames,\n hideOnTransparent,\n preserveAspectRatio: 'xMidYMid meet' // same options as a preserveAspectRatio prop\n }\n });\n return animation;\n};\n\nconst LottieWrapper = props => {\n const {\n className,\n 'data-name': dataName,\n 'aria-label': ariaLabel,\n animationSrc,\n loop = false,\n rendererSettings = {},\n width,\n height,\n ie11ImageBackup,\n backupImageClassName,\n autoplay = true,\n animationControl\n } = props;\n\n const {className: animationClassName, hideOnTransparent = true} = rendererSettings;\n\n const containerRef = useRef(null);\n\n // lottie's animation instance\n const [animationItem, setAnimationItem] = useState(null);\n\n const [isAnimationVisible, setIsAnimationVisible] = useState(autoplay);\n\n const _isIE11 = useMemo(() => isIE11(), []);\n\n const wrapperClassName = useMemo(() => classnames(className, style.lottieContainer), [className]);\n\n const lottieAnimationClassName = useMemo(() => classnames(animationClassName, style.animation), [\n animationClassName\n ]);\n\n const ie11BackupImageClassName = useMemo(\n () => classnames(backupImageClassName, style.backupImage),\n [backupImageClassName]\n );\n\n useEffect(() => {\n // enzyme does not handle well the state update after an async useEffect in tests\n // to remove when the migration towards @testing-library/react is done\n /* istanbul ignore next */\n if (\n animationItem &&\n includes(animationControl, keys(omit('loading', ANIMATION_CONTROL))) &&\n !autoplay\n ) {\n setIsAnimationVisible(true);\n animationItem[animationControl]();\n if (animationControl === ANIMATION_CONTROL.stop) setIsAnimationVisible(false);\n }\n }, [animationControl, animationItem, autoplay]);\n\n useEffect(() => {\n const loadAnimation = async () => {\n if (!_isIE11 && !animationItem) {\n /* istanbul ignore else */\n if (typeof window !== 'undefined') {\n window.lottie = lottie;\n }\n const animation = await fetchAndLoadAnimation(\n lottie,\n unfetch,\n animationSrc,\n containerRef,\n loop,\n lottieAnimationClassName,\n hideOnTransparent,\n autoplay\n );\n\n /* istanbul ignore next */\n setAnimationItem(animation);\n }\n };\n\n loadAnimation();\n return () => animationItem && /* istanbul ignore next */ lottie.destroy(animationItem.name);\n }, [\n lottieAnimationClassName,\n containerRef,\n hideOnTransparent,\n loop,\n animationSrc,\n _isIE11,\n animationItem,\n autoplay\n ]);\n\n return (\n <div\n ref={containerRef}\n aria-label={ariaLabel}\n data-name={dataName}\n className={wrapperClassName}\n style={{\n ...(width && {\n width: `${width}px`,\n maxWidth: `${width}px`\n }),\n ...(height && {\n height: `${height}px`,\n maxHeight: `${height}px`\n }),\n opacity: isAnimationVisible ? 1 : 0,\n transition: 'opacity 0.25s ease-in'\n }}\n >\n {_isIE11 ? (\n <img\n src={ie11ImageBackup}\n className={ie11BackupImageClassName}\n data-name=\"ie11-backup-image\"\n />\n ) : null}\n </div>\n );\n};\n\nLottieWrapper.propTypes = {\n 'aria-label': PropTypes.string.isRequired,\n 'data-name': PropTypes.string,\n animationSrc: PropTypes.string.isRequired,\n loop: PropTypes.bool,\n rendererSettings: PropTypes.shape({\n hideOnTransparent: PropTypes.bool,\n className: PropTypes.string\n }),\n height: PropTypes.number,\n width: PropTypes.number,\n className: PropTypes.string,\n ie11ImageBackup: PropTypes.string.isRequired,\n backupImageClassName: PropTypes.string,\n autoplay: PropTypes.bool,\n animationControl: PropTypes.oneOf(keys(ANIMATION_CONTROL))\n};\n\nexport default LottieWrapper;\n"],"file":"index.js"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
props: {
|
|
3
|
+
'aria-label': 'aria lottie',
|
|
4
|
+
'data-name': 'default-lottie',
|
|
5
|
+
className: undefined,
|
|
6
|
+
animationSrc: 'https://static-staging.coorpacademy.com/animations/review/confetti.json',
|
|
7
|
+
loop: undefined,
|
|
8
|
+
autoplay: true,
|
|
9
|
+
rendererSettings: {
|
|
10
|
+
hideOnTransparent: false,
|
|
11
|
+
animationClassName: ''
|
|
12
|
+
},
|
|
13
|
+
height: 600,
|
|
14
|
+
width: 1000,
|
|
15
|
+
ie11ImageBackup: 'https://static-staging.coorpacademy.com/animations/review/conffeti_congrats.svg',
|
|
16
|
+
animationControl: undefined
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=confetti.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/atom/lottie-wrapper/test/fixtures/confetti.js"],"names":["props","className","undefined","animationSrc","loop","autoplay","rendererSettings","hideOnTransparent","animationClassName","height","width","ie11ImageBackup","animationControl"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACL,kBAAc,aADT;AAEL,iBAAa,gBAFR;AAGLC,IAAAA,SAAS,EAAEC,SAHN;AAILC,IAAAA,YAAY,EAAE,yEAJT;AAKLC,IAAAA,IAAI,EAAEF,SALD;AAMLG,IAAAA,QAAQ,EAAE,IANL;AAOLC,IAAAA,gBAAgB,EAAE;AAChBC,MAAAA,iBAAiB,EAAE,KADH;AAEhBC,MAAAA,kBAAkB,EAAE;AAFJ,KAPb;AAWLC,IAAAA,MAAM,EAAE,GAXH;AAYLC,IAAAA,KAAK,EAAE,IAZF;AAaLC,IAAAA,eAAe,EACb,iFAdG;AAeLC,IAAAA,gBAAgB,EAAEV;AAfb;AADM,CAAf","sourcesContent":["export default {\n props: {\n 'aria-label': 'aria lottie',\n 'data-name': 'default-lottie',\n className: undefined,\n animationSrc: 'https://static-staging.coorpacademy.com/animations/review/confetti.json',\n loop: undefined,\n autoplay: true,\n rendererSettings: {\n hideOnTransparent: false,\n animationClassName: ''\n },\n height: 600,\n width: 1000,\n ie11ImageBackup:\n 'https://static-staging.coorpacademy.com/animations/review/conffeti_congrats.svg',\n animationControl: undefined\n }\n};\n"],"file":"confetti.js"}
|
|
@@ -0,0 +1,10 @@
|
|
|
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
|
+
export default {
|
|
5
|
+
props: _extends(_extends({}, defaultProps.props), {}, {
|
|
6
|
+
autoplay: false,
|
|
7
|
+
animationControl: 'loading'
|
|
8
|
+
})
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=controls.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/atom/lottie-wrapper/test/fixtures/controls.js"],"names":["defaultProps","props","autoplay","animationControl"],"mappings":";;AAAA,OAAOA,YAAP,MAAyB,WAAzB;AAEA,eAAe;AACbC,EAAAA,KAAK,wBACAD,YAAY,CAACC,KADb;AAEHC,IAAAA,QAAQ,EAAE,KAFP;AAGHC,IAAAA,gBAAgB,EAAE;AAHf;AADQ,CAAf","sourcesContent":["import defaultProps from './default';\n\nexport default {\n props: {\n ...defaultProps.props,\n autoplay: false,\n animationControl: 'loading'\n }\n};\n"],"file":"controls.js"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
props: {
|
|
3
|
+
'aria-label': 'aria lottie',
|
|
4
|
+
'data-name': 'default-lottie',
|
|
5
|
+
className: undefined,
|
|
6
|
+
animationSrc: 'https://static-staging.coorpacademy.com/animations/review/star.json',
|
|
7
|
+
loop: false,
|
|
8
|
+
autoplay: undefined,
|
|
9
|
+
rendererSettings: {
|
|
10
|
+
hideOnTransparent: false,
|
|
11
|
+
animationClassName: ''
|
|
12
|
+
},
|
|
13
|
+
height: 200,
|
|
14
|
+
width: 200,
|
|
15
|
+
ie11ImageBackup: 'https://static-staging.coorpacademy.com/animations/review/stars_icon_congrats.svg',
|
|
16
|
+
animationControl: undefined
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=default.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/atom/lottie-wrapper/test/fixtures/default.js"],"names":["props","className","undefined","animationSrc","loop","autoplay","rendererSettings","hideOnTransparent","animationClassName","height","width","ie11ImageBackup","animationControl"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACL,kBAAc,aADT;AAEL,iBAAa,gBAFR;AAGLC,IAAAA,SAAS,EAAEC,SAHN;AAILC,IAAAA,YAAY,EAAE,qEAJT;AAKLC,IAAAA,IAAI,EAAE,KALD;AAMLC,IAAAA,QAAQ,EAAEH,SANL;AAOLI,IAAAA,gBAAgB,EAAE;AAChBC,MAAAA,iBAAiB,EAAE,KADH;AAEhBC,MAAAA,kBAAkB,EAAE;AAFJ,KAPb;AAWLC,IAAAA,MAAM,EAAE,GAXH;AAYLC,IAAAA,KAAK,EAAE,GAZF;AAaLC,IAAAA,eAAe,EACb,mFAdG;AAeLC,IAAAA,gBAAgB,EAAEV;AAfb;AADM,CAAf","sourcesContent":["export default {\n props: {\n 'aria-label': 'aria lottie',\n 'data-name': 'default-lottie',\n className: undefined,\n animationSrc: 'https://static-staging.coorpacademy.com/animations/review/star.json',\n loop: false,\n autoplay: undefined,\n rendererSettings: {\n hideOnTransparent: false,\n animationClassName: ''\n },\n height: 200,\n width: 200,\n ie11ImageBackup:\n 'https://static-staging.coorpacademy.com/animations/review/stars_icon_congrats.svg',\n animationControl: undefined\n }\n};\n"],"file":"default.js"}
|