@micromag/screen-slideshow 0.1.24 → 0.2.401

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +243 -209
  3. package/lib/index.js +253 -208
  4. package/package.json +23 -23
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-slideshow-slides{display:inline-block;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-screen-slideshow-slides:focus{outline:none}.micromag-screen-slideshow-container{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-slideshow-container .micromag-screen-slideshow-empty{border:2px dashed #383551;color:#383551}.micromag-screen-slideshow-container.micromag-screen-slideshow-center .micromag-screen-slideshow-placeholder{margin-right:auto;margin-left:auto}.micromag-screen-slideshow-container.micromag-screen-slideshow-left .micromag-screen-slideshow-placeholder{float:left;clear:both}.micromag-screen-slideshow-container.micromag-screen-slideshow-right .micromag-screen-slideshow-placeholder{float:right;clear:both}.micromag-screen-slideshow-container.micromag-screen-slideshow-center .micromag-screen-slideshow-slide{text-align:center}.micromag-screen-slideshow-container.micromag-screen-slideshow-left .micromag-screen-slideshow-slide{text-align:left}.micromag-screen-slideshow-container.micromag-screen-slideshow-right .micromag-screen-slideshow-slide{text-align:right}.micromag-screen-slideshow-container .micromag-screen-slideshow-empty{width:100%;height:50%;margin:5px auto}.micromag-screen-slideshow-slides{position:relative;width:100%;height:80%;overflow:hidden}.micromag-screen-slideshow-controls{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%;height:20%}.micromag-screen-slideshow-controls .micromag-screen-slideshow-next,.micromag-screen-slideshow-controls .micromag-screen-slideshow-previous{margin:2px}.micromag-screen-slideshow-slide{display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;pointer-events:none}.micromag-screen-slideshow-screen-small .micromag-screen-slideshow-slides{width:100%}
1
+ .micromag-screen-slideshow-container .micromag-screen-slideshow-content{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-slideshow-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-slideshow-disabled.micromag-screen-slideshow-container{overflow:hidden;pointer-events:none}.micromag-screen-slideshow-hidden.micromag-screen-slideshow-container{display:none;visibility:hidden}.micromag-screen-slideshow-placeholder.micromag-screen-slideshow-container .micromag-screen-slideshow-content{position:relative;padding:6px}
package/es/index.js CHANGED
@@ -1,244 +1,278 @@
1
- import { PropTypes, Empty, Placeholders, createLayoutSwitcher } from '@micromag/core';
2
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
3
- import React, { useState, useCallback, useEffect } from 'react';
4
- import PropTypes$1 from 'prop-types';
5
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
6
- import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
7
- import classNames from 'classnames';
8
- import { defineMessages, FormattedMessage } from 'react-intl';
9
- import { animated } from 'react-spring';
1
+ import { FormattedMessage, defineMessage } from 'react-intl';
2
+ import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
+ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
4
+ import { PropTypes as PropTypes$1 } from '@micromag/core';
5
+ import { Transitions, ScreenElement } from '@micromag/core/components';
6
+ import { useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
7
+ import { useResizeObserver } from '@micromag/core/hooks';
8
+ import { isTextFilled } from '@micromag/core/utils';
10
9
  import Background from '@micromag/element-background';
11
- import Frame from '@micromag/element-frame';
12
- import Box from '@micromag/element-box';
13
- import ImageElement from '@micromag/element-image';
14
- import ButtonElement from '@micromag/element-button';
15
- import TextElement from '@micromag/element-text';
16
- import { useScreenSize } from '@micromag/core/contexts';
17
- import { getRenderFormat } from '@micromag/core/utils';
18
- import { useSwipe } from '@micromag/core/hooks';
19
-
20
- var messages = defineMessages({});
21
- var schemas = defineMessages({
22
- schemaTitle: {
23
- "id": "screens.slideshow.schema.title",
24
- "defaultMessage": "Slideshow"
25
- },
26
- cards: {
27
- "id": "screens.slideshow.schema.properties.cards",
28
- "defaultMessage": "Cards"
29
- },
30
- background: {
31
- "id": "screens.slideshow.schema.properties.background",
32
- "defaultMessage": "Background"
33
- }
34
- });
10
+ import CallToAction from '@micromag/element-call-to-action';
11
+ import Container from '@micromag/element-container';
12
+ import Text from '@micromag/element-text';
13
+ import Visual from '@micromag/element-visual';
14
+ import classNames from 'classnames';
15
+ import PropTypes from 'prop-types';
16
+ import React, { useState, useCallback, useRef } from 'react';
35
17
 
36
- var styles = {"slides":"micromag-screen-slideshow-slides","container":"micromag-screen-slideshow-container","empty":"micromag-screen-slideshow-empty","center":"micromag-screen-slideshow-center","placeholder":"micromag-screen-slideshow-placeholder","left":"micromag-screen-slideshow-left","right":"micromag-screen-slideshow-right","slide":"micromag-screen-slideshow-slide","controls":"micromag-screen-slideshow-controls","previous":"micromag-screen-slideshow-previous","next":"micromag-screen-slideshow-next","screen-small":"micromag-screen-slideshow-screen-small"};
18
+ var styles = {"container":"micromag-screen-slideshow-container","content":"micromag-screen-slideshow-content","disabled":"micromag-screen-slideshow-disabled","hidden":"micromag-screen-slideshow-hidden","placeholder":"micromag-screen-slideshow-placeholder"};
37
19
 
38
20
  var propTypes = {
39
- cards: PropTypes.slides,
40
- box: PropTypes.boxElement,
41
- background: PropTypes.backgroundElement,
42
- textAlign: PropTypes.textAlign,
43
- visible: PropTypes$1.bool,
44
- active: PropTypes$1.bool,
45
- renderFormat: PropTypes.renderFormat,
46
- className: PropTypes$1.string
21
+ layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
22
+ slides: PropTypes.oneOfType([PropTypes$1.imageMedias, PropTypes$1.imageElements]),
23
+ withCaptions: PropTypes.bool,
24
+ spacing: PropTypes.number,
25
+ captionMaxLines: PropTypes.number,
26
+ background: PropTypes$1.backgroundElement,
27
+ callToAction: PropTypes$1.callToAction,
28
+ current: PropTypes.bool,
29
+ transitions: PropTypes$1.transitions,
30
+ // transitionStagger: PropTypes.number,
31
+ className: PropTypes.string
47
32
  };
48
33
  var defaultProps = {
49
- cards: [],
50
- box: null,
34
+ layout: 'middle',
35
+ withCaptions: false,
36
+ slides: [],
37
+ spacing: 20,
38
+ captionMaxLines: 2,
51
39
  background: null,
52
- textAlign: 'left',
53
- visible: true,
54
- active: false,
55
- renderFormat: 'view',
40
+ callToAction: null,
41
+ current: true,
42
+ transitions: null,
43
+ // transitionStagger: 50,
56
44
  className: null
57
45
  };
58
46
 
59
- var SlideshowScreen = function SlideshowScreen(_ref) {
60
- var _ref3;
47
+ function SlideshowScreen(_ref) {
48
+ var _ref4;
61
49
 
62
- var box = _ref.box,
63
- slides = _ref.cards,
50
+ _ref.layout;
51
+ var slides = _ref.slides,
52
+ withCaptions = _ref.withCaptions,
64
53
  background = _ref.background,
65
- textAlign = _ref.textAlign,
66
- visible = _ref.visible,
67
- active = _ref.active,
68
- renderFormat = _ref.renderFormat,
54
+ callToAction = _ref.callToAction,
55
+ current = _ref.current,
56
+ spacing = _ref.spacing,
57
+ captionMaxLines = _ref.captionMaxLines,
58
+ transitions = _ref.transitions,
69
59
  className = _ref.className;
70
60
 
71
- var _useState = useState(0),
72
- _useState2 = _slicedToArray(_useState, 2),
73
- parallelIndex = _useState2[0],
74
- setParallelIndex = _useState2[1];
75
-
76
61
  var _useScreenSize = useScreenSize(),
77
62
  width = _useScreenSize.width,
78
63
  height = _useScreenSize.height,
79
- screens = _useScreenSize.screens;
64
+ menuOverScreen = _useScreenSize.menuOverScreen;
80
65
 
81
- var _getRenderFormat = getRenderFormat(renderFormat),
82
- isPlaceholder = _getRenderFormat.isPlaceholder,
83
- isSimple = _getRenderFormat.isSimple,
84
- isEditor = _getRenderFormat.isEditor,
85
- isView = _getRenderFormat.isView;
66
+ var _useViewer = useViewer(),
67
+ menuSize = _useViewer.menuSize;
86
68
 
87
- var maxWidth = Math.min(width, 500);
69
+ var _useScreenRenderConte = useScreenRenderContext(),
70
+ isView = _useScreenRenderConte.isView,
71
+ isPreview = _useScreenRenderConte.isPreview,
72
+ isPlaceholder = _useScreenRenderConte.isPlaceholder,
73
+ isEdit = _useScreenRenderConte.isEdit,
74
+ isStatic = _useScreenRenderConte.isStatic,
75
+ isCapture = _useScreenRenderConte.isCapture;
88
76
 
89
- var _useSwipe = useSwipe({
90
- width: maxWidth,
91
- items: slides,
92
- disabled: isSimple
93
- }),
94
- items = _useSwipe.items,
95
- bind = _useSwipe.bind,
96
- setIndex = _useSwipe.setIndex;
97
-
98
- var onClickNext = useCallback(function () {
99
- if (parallelIndex < items.length - 1) {
100
- // setIndex(parallelIndex + 1);
101
- setParallelIndex(parallelIndex + 1);
102
- } else {
103
- setParallelIndex(0);
104
- }
105
- }, [items, parallelIndex, setParallelIndex]);
106
- var onClickPrevious = useCallback(function () {
107
- if (parallelIndex > 0) {
108
- setParallelIndex(parallelIndex - 1);
109
- } else {
110
- setParallelIndex(items.length - 1);
111
- }
112
- }, [items, parallelIndex, setParallelIndex]);
113
- useEffect(function () {
114
- setIndex(parallelIndex);
115
- }, [parallelIndex, setIndex]);
116
- var inner = isEditor && slides.length === 0 ? /*#__PURE__*/React.createElement(Empty, {
117
- className: styles.empty
118
- }, /*#__PURE__*/React.createElement(FormattedMessage, schemas.schemaTitle)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", Object.assign({}, bind(), {
119
- type: "button",
120
- className: styles.slides
121
- }), items.map(function (_ref2, i) {
122
- var display = _ref2.display,
123
- visibility = _ref2.visibility,
124
- x = _ref2.x;
125
- if (isSimple && i > 0) return null;
126
- var item = slides[i];
127
- return /*#__PURE__*/React.createElement(animated.div, {
128
- key: i,
129
- style: {
130
- display: display,
131
- visibility: visibility,
132
- x: x
133
- },
134
- className: styles.slide
135
- }, item.image ? /*#__PURE__*/React.createElement(ImageElement, Object.assign({}, item.image, {
136
- maxWidth: width
137
- })) : null, item.text ? /*#__PURE__*/React.createElement(TextElement, item.text) : null);
138
- })), items.length > 1 ? /*#__PURE__*/React.createElement("div", {
139
- className: styles.controls
140
- }, /*#__PURE__*/React.createElement(ButtonElement, {
141
- className: styles.previous,
142
- disabled: isSimple,
143
- onClick: onClickPrevious
144
- }, "Previous"), /*#__PURE__*/React.createElement(ButtonElement, {
145
- className: styles.next,
146
- disabled: isSimple,
147
- onClick: onClickNext
148
- }, "Next")) : null);
149
- return /*#__PURE__*/React.createElement("div", {
150
- className: classNames([styles.container, screens.map(function (size) {
151
- return styles["screen-".concat(size)];
152
- }), (_ref3 = {}, _defineProperty(_ref3, styles.disabled, isSimple), _defineProperty(_ref3, styles[textAlign], textAlign !== null), _defineProperty(_ref3, className, className), _ref3)])
153
- }, /*#__PURE__*/React.createElement(Background, Object.assign({}, !isPlaceholder ? background : null, {
154
- width: width,
155
- height: height,
156
- playing: isView && visible || isEditor && active,
157
- className: styles.background
158
- }), /*#__PURE__*/React.createElement(Frame, {
159
- width: maxWidth,
160
- height: height,
161
- visible: visible
162
- }, /*#__PURE__*/React.createElement(Box, Object.assign({}, box, {
163
- withSmallSpacing: isSimple
164
- }), isPlaceholder ? /*#__PURE__*/React.createElement(Placeholders.Slideshow, null) : inner))));
165
- };
77
+ var backgroundPlaying = current && (isView || isEdit);
78
+ var finalSpacing = isPlaceholder ? 5 : spacing;
166
79
 
167
- SlideshowScreen.propTypes = propTypes;
168
- SlideshowScreen.defaultProps = defaultProps;
169
- var SlideshowScreen$1 = React.memo(SlideshowScreen);
80
+ var _useState = useState(0),
81
+ _useState2 = _slicedToArray(_useState, 2),
82
+ imagesLoaded = _useState2[0],
83
+ setImagesLoaded = _useState2[1];
170
84
 
171
- var propTypes$1 = {
172
- box: PropTypes$1.shape({
173
- direction: PropTypes.flexDirection
174
- })
175
- };
176
- var defaultProps$1 = {
177
- box: {
178
- direction: 'column',
179
- axisAlign: 'center'
180
- }
181
- };
85
+ var ready = true;
86
+ var transitionPlaying = current && ready;
87
+ var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
88
+ var onImageLoaded = useCallback(function () {
89
+ setImagesLoaded(imagesLoaded + 1);
90
+ }, [imagesLoaded, setImagesLoaded]);
91
+ var imagesEl = useRef([]); // Call to Action
182
92
 
183
- var SlideshowCenter = function SlideshowCenter(_ref) {
184
- var box = _ref.box,
185
- otherProps = _objectWithoutProperties(_ref, ["box"]);
93
+ var hasCallToAction = callToAction !== null && callToAction.active === true;
186
94
 
187
- return /*#__PURE__*/React.createElement(SlideshowScreen$1, Object.assign({
188
- box: box
189
- }, otherProps));
190
- };
95
+ var _useResizeObserver = useResizeObserver(),
96
+ callToActionRef = _useResizeObserver.ref,
97
+ callToActionRect = _useResizeObserver.entry.contentRect;
98
+
99
+ var _ref2 = callToActionRect || {},
100
+ _ref2$height = _ref2.height,
101
+ callToActionHeight = _ref2$height === void 0 ? 0 : _ref2$height; // console.log(transitionDisabled);
191
102
 
192
- SlideshowCenter.propTypes = propTypes$1;
193
- SlideshowCenter.defaultProps = defaultProps$1;
194
103
 
195
- // eslint-disable-next-line import/prefer-default-export
104
+ var items = (slides || []).map(function (item, itemI) {
105
+ var _ref3 = item || {},
106
+ _ref3$visual = _ref3.visual,
107
+ visual = _ref3$visual === void 0 ? null : _ref3$visual,
108
+ _ref3$caption = _ref3.caption,
109
+ caption = _ref3$caption === void 0 ? null : _ref3$caption;
196
110
 
197
- var LayoutComponents = /*#__PURE__*/Object.freeze({
198
- __proto__: null,
199
- Center: SlideshowCenter
200
- });
111
+ var imageSize = {
112
+ width: width / 2,
113
+ height: height / 2
114
+ }; // const { caption = null } = finalImage || {};
115
+
116
+ var hasImage = visual !== null;
117
+ var hasCaption = isTextFilled(caption);
118
+ return /*#__PURE__*/React.createElement("div", {
119
+ key: "item-".concat(itemI),
120
+ className: styles.gridItem
121
+ }, /*#__PURE__*/React.createElement("div", {
122
+ className: styles.imageContainer,
123
+ ref: function ref(el) {
124
+ imagesEl.current[itemI] = el;
125
+ }
126
+ }, /*#__PURE__*/React.createElement(Transitions, {
127
+ transitions: transitions,
128
+ delay: 1,
129
+ playing: transitionPlaying,
130
+ disabled: transitionDisabled,
131
+ fullscreen: true
132
+ }, /*#__PURE__*/React.createElement(ScreenElement, {
133
+ placeholder: "image",
134
+ placeholderProps: {
135
+ className: styles.placeholder,
136
+ height: '100%'
137
+ },
138
+ emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
139
+ id: "ebsPd4",
140
+ defaultMessage: [{
141
+ "type": 0,
142
+ "value": "Image"
143
+ }]
144
+ }),
145
+ emptyClassName: styles.emptyImage,
146
+ isEmpty: !hasImage
147
+ }, /*#__PURE__*/React.createElement(Visual, Object.assign({
148
+ className: styles.image,
149
+ media: visual
150
+ }, imageSize, {
151
+ objectFit: {
152
+ fit: 'cover'
153
+ },
154
+ playing: backgroundPlaying,
155
+ onLoaded: onImageLoaded
156
+ }))))), withCaptions ? /*#__PURE__*/React.createElement(Transitions, {
157
+ transitions: transitions,
158
+ delay: 1,
159
+ playing: transitionPlaying,
160
+ disabled: transitionDisabled
161
+ }, /*#__PURE__*/React.createElement(ScreenElement, {
162
+ placeholder: "line",
163
+ emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
164
+ id: "6tIigB",
165
+ defaultMessage: [{
166
+ "type": 0,
167
+ "value": "Caption"
168
+ }]
169
+ }),
170
+ emptyClassName: styles.emptyCaption,
171
+ isEmpty: !hasCaption
172
+ }, /*#__PURE__*/React.createElement("div", {
173
+ className: styles.caption
174
+ }, /*#__PURE__*/React.createElement(Text, Object.assign({}, caption, {
175
+ className: styles.captionText,
176
+ lineClamp: captionMaxLines
177
+ }))))) : null);
178
+ });
179
+ return /*#__PURE__*/React.createElement("div", {
180
+ className: classNames([styles.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles.isPlaceholder, isPlaceholder), _ref4)]),
181
+ "data-screen-ready": ready
182
+ }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
183
+ background: background,
184
+ width: width,
185
+ height: height,
186
+ playing: backgroundPlaying
187
+ }) : null, /*#__PURE__*/React.createElement(Container, {
188
+ width: width,
189
+ height: height
190
+ }, /*#__PURE__*/React.createElement("div", {
191
+ className: styles.content,
192
+ style: {
193
+ paddingTop: menuOverScreen && !isPreview ? menuSize : null,
194
+ paddingBottom: hasCallToAction ? callToActionHeight - finalSpacing : 0
195
+ }
196
+ }, items, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
197
+ style: {
198
+ marginTop: -finalSpacing
199
+ }
200
+ }, /*#__PURE__*/React.createElement(CallToAction, {
201
+ ref: callToActionRef,
202
+ className: styles.callToAction,
203
+ callToAction: callToAction,
204
+ animationDisabled: isPreview,
205
+ focusable: current && isView
206
+ })) : null)));
207
+ }
201
208
 
202
- var SlideshowScreen$2 = createLayoutSwitcher(LayoutComponents);
209
+ SlideshowScreen.propTypes = propTypes;
210
+ SlideshowScreen.defaultProps = defaultProps;
211
+ var SlideshowScreen$1 = /*#__PURE__*/React.memo(SlideshowScreen);
203
212
 
204
- var schema = {
205
- $id: 'https://schemas.micromag.ca/0.1/screens/slideshow.json',
206
- title: 'Slideshow',
207
- group: 'Gallery',
208
- type: 'object',
209
- intl: {
210
- title: schemas.schemaTitle
213
+ var definition = [{
214
+ id: 'slideshow',
215
+ type: 'screen',
216
+ group: {
217
+ label: defineMessage({
218
+ "id": "6mX2ya",
219
+ "defaultMessage": [{
220
+ "type": 0,
221
+ "value": "Images"
222
+ }]
223
+ }),
224
+ order: 7
211
225
  },
212
- allOf: [{
213
- $ref: 'https://schemas.micromag.ca/0.1/screens/screen.json'
226
+ title: defineMessage({
227
+ "id": "MhGUaY",
228
+ "defaultMessage": [{
229
+ "type": 0,
230
+ "value": "Slideshow"
231
+ }]
232
+ }),
233
+ component: SlideshowScreen$1,
234
+ layouts: ['top', 'middle', 'bottom'],
235
+ // transforms,
236
+ fields: [{
237
+ name: 'layout',
238
+ type: 'screen-layout',
239
+ defaultValue: 'two-vertical-equal',
240
+ label: defineMessage({
241
+ "id": "4iBXj2",
242
+ "defaultMessage": [{
243
+ "type": 0,
244
+ "value": "Layout"
245
+ }]
246
+ })
214
247
  }, {
215
- properties: {
216
- // layout: {
217
- // $ref: 'https://schemas.micromag.ca/0.1/fields/screen-layout.json',
218
- // title: 'Layout',
219
- // screenType: 'slideshow',
220
- // enum: names,
221
- // intl: {
222
- // title: messages.layout,
223
- // },
224
- // },
225
- cards: {
226
- $ref: 'https://schemas.micromag.ca/0.1/fields/cards.json',
227
- title: 'Cards',
228
- intl: {
229
- title: schemas.cards
230
- }
231
- },
232
- background: {
233
- $ref: 'https://schemas.micromag.ca/0.1/elements/background.json',
234
- title: 'Background',
235
- intl: {
236
- title: schemas.background
237
- }
248
+ name: 'slides',
249
+ type: 'visuals-with-caption',
250
+ label: defineMessage({
251
+ "id": "muYwrB",
252
+ "defaultMessage": [{
253
+ "type": 0,
254
+ "value": "Images"
255
+ }]
256
+ })
257
+ }, {
258
+ name: 'background',
259
+ type: 'background',
260
+ label: defineMessage({
261
+ "id": "+MPZRu",
262
+ "defaultMessage": [{
263
+ "type": 0,
264
+ "value": "Background"
265
+ }]
266
+ })
267
+ }, {
268
+ name: 'callToAction',
269
+ type: 'call-to-action',
270
+ theme: {
271
+ label: {
272
+ textStyle: 'heading2'
238
273
  }
239
274
  }
240
275
  }]
241
- };
276
+ }];
242
277
 
243
- export default SlideshowScreen$2;
244
- export { schema };
278
+ export { SlideshowScreen$1 as SlideshowScreen, definition as default };
package/lib/index.js CHANGED
@@ -2,250 +2,295 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
6
-
7
- var core = require('@micromag/core');
8
- var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/esm/objectWithoutProperties'));
9
- var React = require('react');
10
- var React__default = _interopDefault(React);
11
- var PropTypes = _interopDefault(require('prop-types'));
12
- var _defineProperty = _interopDefault(require('@babel/runtime/helpers/esm/defineProperty'));
13
- var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/esm/slicedToArray'));
14
- var classNames = _interopDefault(require('classnames'));
15
5
  var reactIntl = require('react-intl');
16
- var reactSpring = require('react-spring');
17
- var Background = _interopDefault(require('@micromag/element-background'));
18
- var Frame = _interopDefault(require('@micromag/element-frame'));
19
- var Box = _interopDefault(require('@micromag/element-box'));
20
- var ImageElement = _interopDefault(require('@micromag/element-image'));
21
- var ButtonElement = _interopDefault(require('@micromag/element-button'));
22
- var TextElement = _interopDefault(require('@micromag/element-text'));
6
+ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
7
+ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
8
+ var core = require('@micromag/core');
9
+ var components = require('@micromag/core/components');
23
10
  var contexts = require('@micromag/core/contexts');
24
- var utils = require('@micromag/core/utils');
25
11
  var hooks = require('@micromag/core/hooks');
12
+ var utils = require('@micromag/core/utils');
13
+ var Background = require('@micromag/element-background');
14
+ var CallToAction = require('@micromag/element-call-to-action');
15
+ var Container = require('@micromag/element-container');
16
+ var Text = require('@micromag/element-text');
17
+ var Visual = require('@micromag/element-visual');
18
+ var classNames = require('classnames');
19
+ var PropTypes = require('prop-types');
20
+ var React = require('react');
26
21
 
27
- var messages = reactIntl.defineMessages({});
28
- var schemas = reactIntl.defineMessages({
29
- schemaTitle: {
30
- "id": "screens.slideshow.schema.title",
31
- "defaultMessage": "Slideshow"
32
- },
33
- cards: {
34
- "id": "screens.slideshow.schema.properties.cards",
35
- "defaultMessage": "Cards"
36
- },
37
- background: {
38
- "id": "screens.slideshow.schema.properties.background",
39
- "defaultMessage": "Background"
40
- }
41
- });
22
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
42
23
 
43
- var styles = {"slides":"micromag-screen-slideshow-slides","container":"micromag-screen-slideshow-container","empty":"micromag-screen-slideshow-empty","center":"micromag-screen-slideshow-center","placeholder":"micromag-screen-slideshow-placeholder","left":"micromag-screen-slideshow-left","right":"micromag-screen-slideshow-right","slide":"micromag-screen-slideshow-slide","controls":"micromag-screen-slideshow-controls","previous":"micromag-screen-slideshow-previous","next":"micromag-screen-slideshow-next","screen-small":"micromag-screen-slideshow-screen-small"};
24
+ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
25
+ var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
26
+ var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
27
+ var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
28
+ var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
29
+ var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
30
+ var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
31
+ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
32
+ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
33
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
34
+
35
+ var styles = {"container":"micromag-screen-slideshow-container","content":"micromag-screen-slideshow-content","disabled":"micromag-screen-slideshow-disabled","hidden":"micromag-screen-slideshow-hidden","placeholder":"micromag-screen-slideshow-placeholder"};
44
36
 
45
37
  var propTypes = {
46
- cards: core.PropTypes.slides,
47
- box: core.PropTypes.boxElement,
38
+ layout: PropTypes__default["default"].oneOf(['top', 'middle', 'bottom']),
39
+ slides: PropTypes__default["default"].oneOfType([core.PropTypes.imageMedias, core.PropTypes.imageElements]),
40
+ withCaptions: PropTypes__default["default"].bool,
41
+ spacing: PropTypes__default["default"].number,
42
+ captionMaxLines: PropTypes__default["default"].number,
48
43
  background: core.PropTypes.backgroundElement,
49
- textAlign: core.PropTypes.textAlign,
50
- visible: PropTypes.bool,
51
- active: PropTypes.bool,
52
- renderFormat: core.PropTypes.renderFormat,
53
- className: PropTypes.string
44
+ callToAction: core.PropTypes.callToAction,
45
+ current: PropTypes__default["default"].bool,
46
+ transitions: core.PropTypes.transitions,
47
+ // transitionStagger: PropTypes.number,
48
+ className: PropTypes__default["default"].string
54
49
  };
55
50
  var defaultProps = {
56
- cards: [],
57
- box: null,
51
+ layout: 'middle',
52
+ withCaptions: false,
53
+ slides: [],
54
+ spacing: 20,
55
+ captionMaxLines: 2,
58
56
  background: null,
59
- textAlign: 'left',
60
- visible: true,
61
- active: false,
62
- renderFormat: 'view',
57
+ callToAction: null,
58
+ current: true,
59
+ transitions: null,
60
+ // transitionStagger: 50,
63
61
  className: null
64
62
  };
65
63
 
66
- var SlideshowScreen = function SlideshowScreen(_ref) {
67
- var _ref3;
64
+ function SlideshowScreen(_ref) {
65
+ var _ref4;
68
66
 
69
- var box = _ref.box,
70
- slides = _ref.cards,
67
+ _ref.layout;
68
+ var slides = _ref.slides,
69
+ withCaptions = _ref.withCaptions,
71
70
  background = _ref.background,
72
- textAlign = _ref.textAlign,
73
- visible = _ref.visible,
74
- active = _ref.active,
75
- renderFormat = _ref.renderFormat,
71
+ callToAction = _ref.callToAction,
72
+ current = _ref.current,
73
+ spacing = _ref.spacing,
74
+ captionMaxLines = _ref.captionMaxLines,
75
+ transitions = _ref.transitions,
76
76
  className = _ref.className;
77
77
 
78
- var _useState = React.useState(0),
79
- _useState2 = _slicedToArray(_useState, 2),
80
- parallelIndex = _useState2[0],
81
- setParallelIndex = _useState2[1];
82
-
83
78
  var _useScreenSize = contexts.useScreenSize(),
84
79
  width = _useScreenSize.width,
85
80
  height = _useScreenSize.height,
86
- screens = _useScreenSize.screens;
81
+ menuOverScreen = _useScreenSize.menuOverScreen;
87
82
 
88
- var _getRenderFormat = utils.getRenderFormat(renderFormat),
89
- isPlaceholder = _getRenderFormat.isPlaceholder,
90
- isSimple = _getRenderFormat.isSimple,
91
- isEditor = _getRenderFormat.isEditor,
92
- isView = _getRenderFormat.isView;
83
+ var _useViewer = contexts.useViewer(),
84
+ menuSize = _useViewer.menuSize;
93
85
 
94
- var maxWidth = Math.min(width, 500);
86
+ var _useScreenRenderConte = contexts.useScreenRenderContext(),
87
+ isView = _useScreenRenderConte.isView,
88
+ isPreview = _useScreenRenderConte.isPreview,
89
+ isPlaceholder = _useScreenRenderConte.isPlaceholder,
90
+ isEdit = _useScreenRenderConte.isEdit,
91
+ isStatic = _useScreenRenderConte.isStatic,
92
+ isCapture = _useScreenRenderConte.isCapture;
95
93
 
96
- var _useSwipe = hooks.useSwipe({
97
- width: maxWidth,
98
- items: slides,
99
- disabled: isSimple
100
- }),
101
- items = _useSwipe.items,
102
- bind = _useSwipe.bind,
103
- setIndex = _useSwipe.setIndex;
104
-
105
- var onClickNext = React.useCallback(function () {
106
- if (parallelIndex < items.length - 1) {
107
- // setIndex(parallelIndex + 1);
108
- setParallelIndex(parallelIndex + 1);
109
- } else {
110
- setParallelIndex(0);
111
- }
112
- }, [items, parallelIndex, setParallelIndex]);
113
- var onClickPrevious = React.useCallback(function () {
114
- if (parallelIndex > 0) {
115
- setParallelIndex(parallelIndex - 1);
116
- } else {
117
- setParallelIndex(items.length - 1);
118
- }
119
- }, [items, parallelIndex, setParallelIndex]);
120
- React.useEffect(function () {
121
- setIndex(parallelIndex);
122
- }, [parallelIndex, setIndex]);
123
- var inner = isEditor && slides.length === 0 ? /*#__PURE__*/React__default.createElement(core.Empty, {
124
- className: styles.empty
125
- }, /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, schemas.schemaTitle)) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", Object.assign({}, bind(), {
126
- type: "button",
127
- className: styles.slides
128
- }), items.map(function (_ref2, i) {
129
- var display = _ref2.display,
130
- visibility = _ref2.visibility,
131
- x = _ref2.x;
132
- if (isSimple && i > 0) return null;
133
- var item = slides[i];
134
- return /*#__PURE__*/React__default.createElement(reactSpring.animated.div, {
135
- key: i,
136
- style: {
137
- display: display,
138
- visibility: visibility,
139
- x: x
140
- },
141
- className: styles.slide
142
- }, item.image ? /*#__PURE__*/React__default.createElement(ImageElement, Object.assign({}, item.image, {
143
- maxWidth: width
144
- })) : null, item.text ? /*#__PURE__*/React__default.createElement(TextElement, item.text) : null);
145
- })), items.length > 1 ? /*#__PURE__*/React__default.createElement("div", {
146
- className: styles.controls
147
- }, /*#__PURE__*/React__default.createElement(ButtonElement, {
148
- className: styles.previous,
149
- disabled: isSimple,
150
- onClick: onClickPrevious
151
- }, "Previous"), /*#__PURE__*/React__default.createElement(ButtonElement, {
152
- className: styles.next,
153
- disabled: isSimple,
154
- onClick: onClickNext
155
- }, "Next")) : null);
156
- return /*#__PURE__*/React__default.createElement("div", {
157
- className: classNames([styles.container, screens.map(function (size) {
158
- return styles["screen-".concat(size)];
159
- }), (_ref3 = {}, _defineProperty(_ref3, styles.disabled, isSimple), _defineProperty(_ref3, styles[textAlign], textAlign !== null), _defineProperty(_ref3, className, className), _ref3)])
160
- }, /*#__PURE__*/React__default.createElement(Background, Object.assign({}, !isPlaceholder ? background : null, {
161
- width: width,
162
- height: height,
163
- playing: isView && visible || isEditor && active,
164
- className: styles.background
165
- }), /*#__PURE__*/React__default.createElement(Frame, {
166
- width: maxWidth,
167
- height: height,
168
- visible: visible
169
- }, /*#__PURE__*/React__default.createElement(Box, Object.assign({}, box, {
170
- withSmallSpacing: isSimple
171
- }), isPlaceholder ? /*#__PURE__*/React__default.createElement(core.Placeholders.Slideshow, null) : inner))));
172
- };
94
+ var backgroundPlaying = current && (isView || isEdit);
95
+ var finalSpacing = isPlaceholder ? 5 : spacing;
173
96
 
174
- SlideshowScreen.propTypes = propTypes;
175
- SlideshowScreen.defaultProps = defaultProps;
176
- var SlideshowScreen$1 = React__default.memo(SlideshowScreen);
97
+ var _useState = React.useState(0),
98
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
99
+ imagesLoaded = _useState2[0],
100
+ setImagesLoaded = _useState2[1];
177
101
 
178
- var propTypes$1 = {
179
- box: PropTypes.shape({
180
- direction: core.PropTypes.flexDirection
181
- })
182
- };
183
- var defaultProps$1 = {
184
- box: {
185
- direction: 'column',
186
- axisAlign: 'center'
187
- }
188
- };
102
+ var ready = true;
103
+ var transitionPlaying = current && ready;
104
+ var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
105
+ var onImageLoaded = React.useCallback(function () {
106
+ setImagesLoaded(imagesLoaded + 1);
107
+ }, [imagesLoaded, setImagesLoaded]);
108
+ var imagesEl = React.useRef([]); // Call to Action
189
109
 
190
- var SlideshowCenter = function SlideshowCenter(_ref) {
191
- var box = _ref.box,
192
- otherProps = _objectWithoutProperties(_ref, ["box"]);
110
+ var hasCallToAction = callToAction !== null && callToAction.active === true;
193
111
 
194
- return /*#__PURE__*/React__default.createElement(SlideshowScreen$1, Object.assign({
195
- box: box
196
- }, otherProps));
197
- };
112
+ var _useResizeObserver = hooks.useResizeObserver(),
113
+ callToActionRef = _useResizeObserver.ref,
114
+ callToActionRect = _useResizeObserver.entry.contentRect;
198
115
 
199
- SlideshowCenter.propTypes = propTypes$1;
200
- SlideshowCenter.defaultProps = defaultProps$1;
116
+ var _ref2 = callToActionRect || {},
117
+ _ref2$height = _ref2.height,
118
+ callToActionHeight = _ref2$height === void 0 ? 0 : _ref2$height; // console.log(transitionDisabled);
201
119
 
202
- // eslint-disable-next-line import/prefer-default-export
203
120
 
204
- var LayoutComponents = /*#__PURE__*/Object.freeze({
205
- __proto__: null,
206
- Center: SlideshowCenter
207
- });
121
+ var items = (slides || []).map(function (item, itemI) {
122
+ var _ref3 = item || {},
123
+ _ref3$visual = _ref3.visual,
124
+ visual = _ref3$visual === void 0 ? null : _ref3$visual,
125
+ _ref3$caption = _ref3.caption,
126
+ caption = _ref3$caption === void 0 ? null : _ref3$caption;
208
127
 
209
- var SlideshowScreen$2 = core.createLayoutSwitcher(LayoutComponents);
128
+ var imageSize = {
129
+ width: width / 2,
130
+ height: height / 2
131
+ }; // const { caption = null } = finalImage || {};
210
132
 
211
- var schema = {
212
- $id: 'https://schemas.micromag.ca/0.1/screens/slideshow.json',
213
- title: 'Slideshow',
214
- group: 'Gallery',
215
- type: 'object',
216
- intl: {
217
- title: schemas.schemaTitle
133
+ var hasImage = visual !== null;
134
+ var hasCaption = utils.isTextFilled(caption);
135
+ return /*#__PURE__*/React__default["default"].createElement("div", {
136
+ key: "item-".concat(itemI),
137
+ className: styles.gridItem
138
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
139
+ className: styles.imageContainer,
140
+ ref: function ref(el) {
141
+ imagesEl.current[itemI] = el;
142
+ }
143
+ }, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
144
+ transitions: transitions,
145
+ delay: 1,
146
+ playing: transitionPlaying,
147
+ disabled: transitionDisabled,
148
+ fullscreen: true
149
+ }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
150
+ placeholder: "image",
151
+ placeholderProps: {
152
+ className: styles.placeholder,
153
+ height: '100%'
154
+ },
155
+ emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
156
+ id: "ebsPd4",
157
+ defaultMessage: [{
158
+ "type": 0,
159
+ "value": "Image"
160
+ }]
161
+ }),
162
+ emptyClassName: styles.emptyImage,
163
+ isEmpty: !hasImage
164
+ }, /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], Object.assign({
165
+ className: styles.image,
166
+ media: visual
167
+ }, imageSize, {
168
+ objectFit: {
169
+ fit: 'cover'
170
+ },
171
+ playing: backgroundPlaying,
172
+ onLoaded: onImageLoaded
173
+ }))))), withCaptions ? /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
174
+ transitions: transitions,
175
+ delay: 1,
176
+ playing: transitionPlaying,
177
+ disabled: transitionDisabled
178
+ }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
179
+ placeholder: "line",
180
+ emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
181
+ id: "6tIigB",
182
+ defaultMessage: [{
183
+ "type": 0,
184
+ "value": "Caption"
185
+ }]
186
+ }),
187
+ emptyClassName: styles.emptyCaption,
188
+ isEmpty: !hasCaption
189
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
190
+ className: styles.caption
191
+ }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, caption, {
192
+ className: styles.captionText,
193
+ lineClamp: captionMaxLines
194
+ }))))) : null);
195
+ });
196
+ return /*#__PURE__*/React__default["default"].createElement("div", {
197
+ className: classNames__default["default"]([styles.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles.isPlaceholder, isPlaceholder), _ref4)]),
198
+ "data-screen-ready": ready
199
+ }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
200
+ background: background,
201
+ width: width,
202
+ height: height,
203
+ playing: backgroundPlaying
204
+ }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
205
+ width: width,
206
+ height: height
207
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
208
+ className: styles.content,
209
+ style: {
210
+ paddingTop: menuOverScreen && !isPreview ? menuSize : null,
211
+ paddingBottom: hasCallToAction ? callToActionHeight - finalSpacing : 0
212
+ }
213
+ }, items, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
214
+ style: {
215
+ marginTop: -finalSpacing
216
+ }
217
+ }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
218
+ ref: callToActionRef,
219
+ className: styles.callToAction,
220
+ callToAction: callToAction,
221
+ animationDisabled: isPreview,
222
+ focusable: current && isView
223
+ })) : null)));
224
+ }
225
+
226
+ SlideshowScreen.propTypes = propTypes;
227
+ SlideshowScreen.defaultProps = defaultProps;
228
+ var SlideshowScreen$1 = /*#__PURE__*/React__default["default"].memo(SlideshowScreen);
229
+
230
+ var definition = [{
231
+ id: 'slideshow',
232
+ type: 'screen',
233
+ group: {
234
+ label: reactIntl.defineMessage({
235
+ "id": "6mX2ya",
236
+ "defaultMessage": [{
237
+ "type": 0,
238
+ "value": "Images"
239
+ }]
240
+ }),
241
+ order: 7
218
242
  },
219
- allOf: [{
220
- $ref: 'https://schemas.micromag.ca/0.1/screens/screen.json'
243
+ title: reactIntl.defineMessage({
244
+ "id": "MhGUaY",
245
+ "defaultMessage": [{
246
+ "type": 0,
247
+ "value": "Slideshow"
248
+ }]
249
+ }),
250
+ component: SlideshowScreen$1,
251
+ layouts: ['top', 'middle', 'bottom'],
252
+ // transforms,
253
+ fields: [{
254
+ name: 'layout',
255
+ type: 'screen-layout',
256
+ defaultValue: 'two-vertical-equal',
257
+ label: reactIntl.defineMessage({
258
+ "id": "4iBXj2",
259
+ "defaultMessage": [{
260
+ "type": 0,
261
+ "value": "Layout"
262
+ }]
263
+ })
221
264
  }, {
222
- properties: {
223
- // layout: {
224
- // $ref: 'https://schemas.micromag.ca/0.1/fields/screen-layout.json',
225
- // title: 'Layout',
226
- // screenType: 'slideshow',
227
- // enum: names,
228
- // intl: {
229
- // title: messages.layout,
230
- // },
231
- // },
232
- cards: {
233
- $ref: 'https://schemas.micromag.ca/0.1/fields/cards.json',
234
- title: 'Cards',
235
- intl: {
236
- title: schemas.cards
237
- }
238
- },
239
- background: {
240
- $ref: 'https://schemas.micromag.ca/0.1/elements/background.json',
241
- title: 'Background',
242
- intl: {
243
- title: schemas.background
244
- }
265
+ name: 'slides',
266
+ type: 'visuals-with-caption',
267
+ label: reactIntl.defineMessage({
268
+ "id": "muYwrB",
269
+ "defaultMessage": [{
270
+ "type": 0,
271
+ "value": "Images"
272
+ }]
273
+ })
274
+ }, {
275
+ name: 'background',
276
+ type: 'background',
277
+ label: reactIntl.defineMessage({
278
+ "id": "+MPZRu",
279
+ "defaultMessage": [{
280
+ "type": 0,
281
+ "value": "Background"
282
+ }]
283
+ })
284
+ }, {
285
+ name: 'callToAction',
286
+ type: 'call-to-action',
287
+ theme: {
288
+ label: {
289
+ textStyle: 'heading2'
245
290
  }
246
291
  }
247
292
  }]
248
- };
293
+ }];
249
294
 
250
- exports.default = SlideshowScreen$2;
251
- exports.schema = schema;
295
+ exports.SlideshowScreen = SlideshowScreen$1;
296
+ exports["default"] = definition;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-slideshow",
3
- "version": "0.1.24",
3
+ "version": "0.2.401",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -22,6 +22,10 @@
22
22
  {
23
23
  "name": "Nicolas Roy-Bourdages",
24
24
  "email": "nrb@folklore.email"
25
+ },
26
+ {
27
+ "name": "Julien Carignan",
28
+ "email": "jc@folklore.email"
25
29
  }
26
30
  ],
27
31
  "license": "ISC",
@@ -33,38 +37,34 @@
33
37
  "assets"
34
38
  ],
35
39
  "scripts": {
36
- "clean": "rm -rf assets && rm -rf lib && rm -rf es",
37
- "build": "NODE_ENV=production ../../node_modules/.bin/rollup --config ../../rollup.config.js",
38
- "intl": "node ../../scripts/build-package-intl-translations.js",
39
- "prepare": "npm run clean && npm run build && npm run intl"
40
+ "prepare": "../../scripts/prepare-package.sh"
40
41
  },
41
42
  "devDependencies": {
42
- "react": ">=15.0.0 || ^16.0.0",
43
- "react-dom": ">=15.0.0 || ^16.0.0"
43
+ "react": "^16.8.0 || ^17.0.0",
44
+ "react-dom": "^16.8.0 || ^17.0.0"
44
45
  },
45
46
  "peerDependencies": {
46
- "react": ">=15.0.0 || ^16.0.0",
47
- "react-dom": ">=15.0.0 || ^16.0.0"
47
+ "react": "^16.8.0 || ^17.0.0",
48
+ "react-dom": "^16.8.0 || ^17.0.0"
48
49
  },
49
50
  "dependencies": {
50
- "@babel/runtime": "^7.8.7",
51
- "@micromag/core": "^0.1.24",
52
- "@micromag/element-background": "^0.1.24",
53
- "@micromag/element-box": "^0.1.24",
54
- "@micromag/element-button": "^0.1.24",
55
- "@micromag/element-frame": "^0.1.24",
56
- "@micromag/element-image": "^0.1.24",
57
- "@micromag/element-text": "^0.1.24",
51
+ "@babel/runtime": "^7.13.10",
52
+ "@micromag/core": "^0.2.401",
53
+ "@micromag/element-background": "^0.2.401",
54
+ "@micromag/element-call-to-action": "^0.2.401",
55
+ "@micromag/element-container": "^0.2.401",
56
+ "@micromag/element-layout": "^0.2.401",
57
+ "@micromag/element-text": "^0.2.401",
58
+ "@micromag/element-visual": "^0.2.401",
59
+ "@micromag/transforms": "^0.2.401",
58
60
  "classnames": "^2.2.6",
59
- "lodash": "^4.17.15",
61
+ "lodash": "^4.17.21",
60
62
  "prop-types": "^15.7.2",
61
- "react-intl": "^4.5.0",
62
- "react-spring": "^9.0.0-canary.808.17.55c5691",
63
- "react-use-gesture": "^7.0.11",
64
- "uuid": "^7.0.2"
63
+ "react-intl": "^5.12.1",
64
+ "uuid": "^8.3.2"
65
65
  },
66
66
  "publishConfig": {
67
67
  "access": "public"
68
68
  },
69
- "gitHead": "3b03629e747ff8b78f7955c6379dba7b6c27b81f"
69
+ "gitHead": "fd03ec6d9decc9e18d6088a36e47c7b1e0e72b4c"
70
70
  }