@micromag/screen-slideshow 0.1.29 → 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 +241 -223
  3. package/lib/index.js +251 -222
  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,260 +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
- slides: {
27
- "id": "screens.slideshow.schema.properties.slides",
28
- "defaultMessage": "Slides"
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
- slides: PropTypes.slides,
40
- button: PropTypes.slides,
41
- box: PropTypes.boxElement,
42
- background: PropTypes.backgroundElement,
43
- textAlign: PropTypes.textAlign,
44
- visible: PropTypes$1.bool,
45
- active: PropTypes$1.bool,
46
- renderFormat: PropTypes.renderFormat,
47
- 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
48
32
  };
49
33
  var defaultProps = {
34
+ layout: 'middle',
35
+ withCaptions: false,
50
36
  slides: [],
51
- button: null,
52
- box: null,
37
+ spacing: 20,
38
+ captionMaxLines: 2,
53
39
  background: null,
54
- textAlign: 'left',
55
- visible: true,
56
- active: false,
57
- renderFormat: 'view',
40
+ callToAction: null,
41
+ current: true,
42
+ transitions: null,
43
+ // transitionStagger: 50,
58
44
  className: null
59
45
  };
60
46
 
61
- var SlideshowScreen = function SlideshowScreen(_ref) {
62
- var _ref3;
47
+ function SlideshowScreen(_ref) {
48
+ var _ref4;
63
49
 
64
- var slides = _ref.slides,
65
- button = _ref.button,
66
- box = _ref.box,
50
+ _ref.layout;
51
+ var slides = _ref.slides,
52
+ withCaptions = _ref.withCaptions,
67
53
  background = _ref.background,
68
- textAlign = _ref.textAlign,
69
- visible = _ref.visible,
70
- active = _ref.active,
71
- renderFormat = _ref.renderFormat,
54
+ callToAction = _ref.callToAction,
55
+ current = _ref.current,
56
+ spacing = _ref.spacing,
57
+ captionMaxLines = _ref.captionMaxLines,
58
+ transitions = _ref.transitions,
72
59
  className = _ref.className;
73
60
 
74
- var _useState = useState(0),
75
- _useState2 = _slicedToArray(_useState, 2),
76
- parallelIndex = _useState2[0],
77
- setParallelIndex = _useState2[1];
78
-
79
61
  var _useScreenSize = useScreenSize(),
80
62
  width = _useScreenSize.width,
81
63
  height = _useScreenSize.height,
82
- screens = _useScreenSize.screens;
64
+ menuOverScreen = _useScreenSize.menuOverScreen;
83
65
 
84
- var _getRenderFormat = getRenderFormat(renderFormat),
85
- isPlaceholder = _getRenderFormat.isPlaceholder,
86
- isSimple = _getRenderFormat.isSimple,
87
- isEditor = _getRenderFormat.isEditor,
88
- isView = _getRenderFormat.isView;
66
+ var _useViewer = useViewer(),
67
+ menuSize = _useViewer.menuSize;
89
68
 
90
- 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;
91
76
 
92
- var _useSwipe = useSwipe({
93
- width: maxWidth,
94
- items: slides,
95
- disabled: isSimple
96
- }),
97
- items = _useSwipe.items,
98
- bind = _useSwipe.bind,
99
- setIndex = _useSwipe.setIndex;
77
+ var backgroundPlaying = current && (isView || isEdit);
78
+ var finalSpacing = isPlaceholder ? 5 : spacing;
100
79
 
101
- var onClickNext = useCallback(function () {
102
- if (parallelIndex < items.length - 1) {
103
- // setIndex(parallelIndex + 1);
104
- setParallelIndex(parallelIndex + 1);
105
- } else {
106
- setParallelIndex(0);
107
- }
108
- }, [items, parallelIndex, setParallelIndex]);
109
- var onClickPrevious = useCallback(function () {
110
- if (parallelIndex > 0) {
111
- setParallelIndex(parallelIndex - 1);
112
- } else {
113
- setParallelIndex(items.length - 1);
114
- }
115
- }, [items, parallelIndex, setParallelIndex]);
116
- useEffect(function () {
117
- setIndex(parallelIndex);
118
- }, [parallelIndex, setIndex]);
119
- console.log(button);
120
- var inner = isEditor && slides.length === 0 ? /*#__PURE__*/React.createElement(Empty, {
121
- className: styles.empty
122
- }, /*#__PURE__*/React.createElement(FormattedMessage, schemas.schemaTitle)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", Object.assign({}, bind(), {
123
- type: "button",
124
- className: styles.slides
125
- }), items.map(function (_ref2, i) {
126
- var display = _ref2.display,
127
- visibility = _ref2.visibility,
128
- x = _ref2.x;
129
- if (isSimple && i > 0) return null;
130
- var item = slides[i];
131
- return /*#__PURE__*/React.createElement(animated.div, {
132
- key: i,
133
- style: {
134
- display: display,
135
- visibility: visibility,
136
- x: x
137
- },
138
- className: styles.slide
139
- }, item.image ? /*#__PURE__*/React.createElement(ImageElement, {
140
- image: item.image,
141
- fit: {
142
- size: 'cover'
143
- }
144
- }) : null, item.text ? /*#__PURE__*/React.createElement(TextElement, {
145
- body: item.text
146
- }) : null);
147
- })), items.length > 1 ? /*#__PURE__*/React.createElement("div", {
148
- className: styles.controls
149
- }, /*#__PURE__*/React.createElement(ButtonElement, Object.assign({}, button, {
150
- disabled: isSimple,
151
- onClick: onClickPrevious,
152
- className: styles.previous
153
- }), "Previous"), /*#__PURE__*/React.createElement(ButtonElement, Object.assign({}, button, {
154
- disabled: isSimple,
155
- onClick: onClickNext,
156
- className: styles.next
157
- }), "Next")) : null);
158
- return /*#__PURE__*/React.createElement("div", {
159
- className: classNames([styles.container, screens.map(function (size) {
160
- return styles["screen-".concat(size)];
161
- }), (_ref3 = {}, _defineProperty(_ref3, styles.disabled, isSimple), _defineProperty(_ref3, styles[textAlign], textAlign !== null), _defineProperty(_ref3, className, className), _ref3)])
162
- }, /*#__PURE__*/React.createElement(Background, Object.assign({}, !isPlaceholder ? background : null, {
163
- width: width,
164
- height: height,
165
- playing: isView && visible || isEditor && active,
166
- className: styles.background
167
- }), /*#__PURE__*/React.createElement(Frame, {
168
- width: maxWidth,
169
- height: height,
170
- visible: visible
171
- }, /*#__PURE__*/React.createElement(Box, Object.assign({}, box, {
172
- withSmallSpacing: isSimple
173
- }), isPlaceholder ? /*#__PURE__*/React.createElement(Placeholders.Slideshow, null) : inner))));
174
- };
80
+ var _useState = useState(0),
81
+ _useState2 = _slicedToArray(_useState, 2),
82
+ imagesLoaded = _useState2[0],
83
+ setImagesLoaded = _useState2[1];
175
84
 
176
- SlideshowScreen.propTypes = propTypes;
177
- SlideshowScreen.defaultProps = defaultProps;
178
- var SlideshowScreen$1 = React.memo(SlideshowScreen);
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
179
92
 
180
- var propTypes$1 = {
181
- box: PropTypes$1.shape({
182
- direction: PropTypes.flexDirection
183
- })
184
- };
185
- var defaultProps$1 = {
186
- box: {
187
- direction: 'column',
188
- axisAlign: 'center'
189
- }
190
- };
93
+ var hasCallToAction = callToAction !== null && callToAction.active === true;
191
94
 
192
- var SlideshowCenter = function SlideshowCenter(_ref) {
193
- var box = _ref.box,
194
- otherProps = _objectWithoutProperties(_ref, ["box"]);
95
+ var _useResizeObserver = useResizeObserver(),
96
+ callToActionRef = _useResizeObserver.ref,
97
+ callToActionRect = _useResizeObserver.entry.contentRect;
195
98
 
196
- return /*#__PURE__*/React.createElement(SlideshowScreen$1, Object.assign({
197
- box: box
198
- }, otherProps));
199
- };
99
+ var _ref2 = callToActionRect || {},
100
+ _ref2$height = _ref2.height,
101
+ callToActionHeight = _ref2$height === void 0 ? 0 : _ref2$height; // console.log(transitionDisabled);
200
102
 
201
- SlideshowCenter.propTypes = propTypes$1;
202
- SlideshowCenter.defaultProps = defaultProps$1;
203
103
 
204
- // 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;
205
110
 
206
- var LayoutComponents = /*#__PURE__*/Object.freeze({
207
- __proto__: null,
208
- Center: SlideshowCenter
209
- });
111
+ var imageSize = {
112
+ width: width / 2,
113
+ height: height / 2
114
+ }; // const { caption = null } = finalImage || {};
210
115
 
211
- var SlideshowScreen$2 = createLayoutSwitcher(LayoutComponents);
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
+ }
212
208
 
213
- var schema = {
214
- $id: 'https://schemas.micromag.ca/0.1/screens/slideshow.json',
215
- title: 'Slideshow',
216
- group: 'Gallery',
217
- type: 'object',
218
- intl: {
219
- title: schemas.schemaTitle
209
+ SlideshowScreen.propTypes = propTypes;
210
+ SlideshowScreen.defaultProps = defaultProps;
211
+ var SlideshowScreen$1 = /*#__PURE__*/React.memo(SlideshowScreen);
212
+
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
220
225
  },
221
- allOf: [{
222
- $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
+ })
223
247
  }, {
224
- properties: {
225
- // layout: {
226
- // $ref: 'https://schemas.micromag.ca/0.1/fields/screen-layout.json',
227
- // title: 'Layout',
228
- // screenType: 'slideshow',
229
- // enum: names,
230
- // intl: {
231
- // title: messages.layout,
232
- // },
233
- // },
234
- slides: {
235
- $ref: 'https://schemas.micromag.ca/0.1/fields/slides.json',
236
- title: 'Slide',
237
- intl: {
238
- title: schemas.slides
239
- }
240
- },
241
- button: {
242
- $ref: 'https://schemas.micromag.ca/0.1/elements/button.json',
243
- title: 'Button style',
244
- intl: {
245
- title: schemas.buttonStyle
246
- }
247
- },
248
- background: {
249
- $ref: 'https://schemas.micromag.ca/0.1/elements/background.json',
250
- title: 'Background',
251
- intl: {
252
- title: schemas.background
253
- }
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'
254
273
  }
255
274
  }
256
275
  }]
257
- };
276
+ }];
258
277
 
259
- export default SlideshowScreen$2;
260
- export { schema };
278
+ export { SlideshowScreen$1 as SlideshowScreen, definition as default };
package/lib/index.js CHANGED
@@ -2,266 +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
- slides: {
34
- "id": "screens.slideshow.schema.properties.slides",
35
- "defaultMessage": "Slides"
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
- slides: core.PropTypes.slides,
47
- button: core.PropTypes.slides,
48
- 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,
49
43
  background: core.PropTypes.backgroundElement,
50
- textAlign: core.PropTypes.textAlign,
51
- visible: PropTypes.bool,
52
- active: PropTypes.bool,
53
- renderFormat: core.PropTypes.renderFormat,
54
- 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
55
49
  };
56
50
  var defaultProps = {
51
+ layout: 'middle',
52
+ withCaptions: false,
57
53
  slides: [],
58
- button: null,
59
- box: null,
54
+ spacing: 20,
55
+ captionMaxLines: 2,
60
56
  background: null,
61
- textAlign: 'left',
62
- visible: true,
63
- active: false,
64
- renderFormat: 'view',
57
+ callToAction: null,
58
+ current: true,
59
+ transitions: null,
60
+ // transitionStagger: 50,
65
61
  className: null
66
62
  };
67
63
 
68
- var SlideshowScreen = function SlideshowScreen(_ref) {
69
- var _ref3;
64
+ function SlideshowScreen(_ref) {
65
+ var _ref4;
70
66
 
71
- var slides = _ref.slides,
72
- button = _ref.button,
73
- box = _ref.box,
67
+ _ref.layout;
68
+ var slides = _ref.slides,
69
+ withCaptions = _ref.withCaptions,
74
70
  background = _ref.background,
75
- textAlign = _ref.textAlign,
76
- visible = _ref.visible,
77
- active = _ref.active,
78
- renderFormat = _ref.renderFormat,
71
+ callToAction = _ref.callToAction,
72
+ current = _ref.current,
73
+ spacing = _ref.spacing,
74
+ captionMaxLines = _ref.captionMaxLines,
75
+ transitions = _ref.transitions,
79
76
  className = _ref.className;
80
77
 
81
- var _useState = React.useState(0),
82
- _useState2 = _slicedToArray(_useState, 2),
83
- parallelIndex = _useState2[0],
84
- setParallelIndex = _useState2[1];
85
-
86
78
  var _useScreenSize = contexts.useScreenSize(),
87
79
  width = _useScreenSize.width,
88
80
  height = _useScreenSize.height,
89
- screens = _useScreenSize.screens;
81
+ menuOverScreen = _useScreenSize.menuOverScreen;
90
82
 
91
- var _getRenderFormat = utils.getRenderFormat(renderFormat),
92
- isPlaceholder = _getRenderFormat.isPlaceholder,
93
- isSimple = _getRenderFormat.isSimple,
94
- isEditor = _getRenderFormat.isEditor,
95
- isView = _getRenderFormat.isView;
83
+ var _useViewer = contexts.useViewer(),
84
+ menuSize = _useViewer.menuSize;
96
85
 
97
- 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;
98
93
 
99
- var _useSwipe = hooks.useSwipe({
100
- width: maxWidth,
101
- items: slides,
102
- disabled: isSimple
103
- }),
104
- items = _useSwipe.items,
105
- bind = _useSwipe.bind,
106
- setIndex = _useSwipe.setIndex;
94
+ var backgroundPlaying = current && (isView || isEdit);
95
+ var finalSpacing = isPlaceholder ? 5 : spacing;
107
96
 
108
- var onClickNext = React.useCallback(function () {
109
- if (parallelIndex < items.length - 1) {
110
- // setIndex(parallelIndex + 1);
111
- setParallelIndex(parallelIndex + 1);
112
- } else {
113
- setParallelIndex(0);
114
- }
115
- }, [items, parallelIndex, setParallelIndex]);
116
- var onClickPrevious = React.useCallback(function () {
117
- if (parallelIndex > 0) {
118
- setParallelIndex(parallelIndex - 1);
119
- } else {
120
- setParallelIndex(items.length - 1);
121
- }
122
- }, [items, parallelIndex, setParallelIndex]);
123
- React.useEffect(function () {
124
- setIndex(parallelIndex);
125
- }, [parallelIndex, setIndex]);
126
- console.log(button);
127
- var inner = isEditor && slides.length === 0 ? /*#__PURE__*/React__default.createElement(core.Empty, {
128
- className: styles.empty
129
- }, /*#__PURE__*/React__default.createElement(reactIntl.FormattedMessage, schemas.schemaTitle)) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", Object.assign({}, bind(), {
130
- type: "button",
131
- className: styles.slides
132
- }), items.map(function (_ref2, i) {
133
- var display = _ref2.display,
134
- visibility = _ref2.visibility,
135
- x = _ref2.x;
136
- if (isSimple && i > 0) return null;
137
- var item = slides[i];
138
- return /*#__PURE__*/React__default.createElement(reactSpring.animated.div, {
139
- key: i,
140
- style: {
141
- display: display,
142
- visibility: visibility,
143
- x: x
144
- },
145
- className: styles.slide
146
- }, item.image ? /*#__PURE__*/React__default.createElement(ImageElement, {
147
- image: item.image,
148
- fit: {
149
- size: 'cover'
150
- }
151
- }) : null, item.text ? /*#__PURE__*/React__default.createElement(TextElement, {
152
- body: item.text
153
- }) : null);
154
- })), items.length > 1 ? /*#__PURE__*/React__default.createElement("div", {
155
- className: styles.controls
156
- }, /*#__PURE__*/React__default.createElement(ButtonElement, Object.assign({}, button, {
157
- disabled: isSimple,
158
- onClick: onClickPrevious,
159
- className: styles.previous
160
- }), "Previous"), /*#__PURE__*/React__default.createElement(ButtonElement, Object.assign({}, button, {
161
- disabled: isSimple,
162
- onClick: onClickNext,
163
- className: styles.next
164
- }), "Next")) : null);
165
- return /*#__PURE__*/React__default.createElement("div", {
166
- className: classNames([styles.container, screens.map(function (size) {
167
- return styles["screen-".concat(size)];
168
- }), (_ref3 = {}, _defineProperty(_ref3, styles.disabled, isSimple), _defineProperty(_ref3, styles[textAlign], textAlign !== null), _defineProperty(_ref3, className, className), _ref3)])
169
- }, /*#__PURE__*/React__default.createElement(Background, Object.assign({}, !isPlaceholder ? background : null, {
170
- width: width,
171
- height: height,
172
- playing: isView && visible || isEditor && active,
173
- className: styles.background
174
- }), /*#__PURE__*/React__default.createElement(Frame, {
175
- width: maxWidth,
176
- height: height,
177
- visible: visible
178
- }, /*#__PURE__*/React__default.createElement(Box, Object.assign({}, box, {
179
- withSmallSpacing: isSimple
180
- }), isPlaceholder ? /*#__PURE__*/React__default.createElement(core.Placeholders.Slideshow, null) : inner))));
181
- };
97
+ var _useState = React.useState(0),
98
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
99
+ imagesLoaded = _useState2[0],
100
+ setImagesLoaded = _useState2[1];
182
101
 
183
- SlideshowScreen.propTypes = propTypes;
184
- SlideshowScreen.defaultProps = defaultProps;
185
- var SlideshowScreen$1 = React__default.memo(SlideshowScreen);
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
186
109
 
187
- var propTypes$1 = {
188
- box: PropTypes.shape({
189
- direction: core.PropTypes.flexDirection
190
- })
191
- };
192
- var defaultProps$1 = {
193
- box: {
194
- direction: 'column',
195
- axisAlign: 'center'
196
- }
197
- };
110
+ var hasCallToAction = callToAction !== null && callToAction.active === true;
198
111
 
199
- var SlideshowCenter = function SlideshowCenter(_ref) {
200
- var box = _ref.box,
201
- otherProps = _objectWithoutProperties(_ref, ["box"]);
112
+ var _useResizeObserver = hooks.useResizeObserver(),
113
+ callToActionRef = _useResizeObserver.ref,
114
+ callToActionRect = _useResizeObserver.entry.contentRect;
115
+
116
+ var _ref2 = callToActionRect || {},
117
+ _ref2$height = _ref2.height,
118
+ callToActionHeight = _ref2$height === void 0 ? 0 : _ref2$height; // console.log(transitionDisabled);
202
119
 
203
- return /*#__PURE__*/React__default.createElement(SlideshowScreen$1, Object.assign({
204
- box: box
205
- }, otherProps));
206
- };
207
120
 
208
- SlideshowCenter.propTypes = propTypes$1;
209
- SlideshowCenter.defaultProps = defaultProps$1;
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;
210
127
 
211
- // eslint-disable-next-line import/prefer-default-export
128
+ var imageSize = {
129
+ width: width / 2,
130
+ height: height / 2
131
+ }; // const { caption = null } = finalImage || {};
212
132
 
213
- var LayoutComponents = /*#__PURE__*/Object.freeze({
214
- __proto__: null,
215
- Center: SlideshowCenter
216
- });
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
+ }
217
225
 
218
- var SlideshowScreen$2 = core.createLayoutSwitcher(LayoutComponents);
226
+ SlideshowScreen.propTypes = propTypes;
227
+ SlideshowScreen.defaultProps = defaultProps;
228
+ var SlideshowScreen$1 = /*#__PURE__*/React__default["default"].memo(SlideshowScreen);
219
229
 
220
- var schema = {
221
- $id: 'https://schemas.micromag.ca/0.1/screens/slideshow.json',
222
- title: 'Slideshow',
223
- group: 'Gallery',
224
- type: 'object',
225
- intl: {
226
- title: schemas.schemaTitle
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
227
242
  },
228
- allOf: [{
229
- $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
+ })
230
264
  }, {
231
- properties: {
232
- // layout: {
233
- // $ref: 'https://schemas.micromag.ca/0.1/fields/screen-layout.json',
234
- // title: 'Layout',
235
- // screenType: 'slideshow',
236
- // enum: names,
237
- // intl: {
238
- // title: messages.layout,
239
- // },
240
- // },
241
- slides: {
242
- $ref: 'https://schemas.micromag.ca/0.1/fields/slides.json',
243
- title: 'Slide',
244
- intl: {
245
- title: schemas.slides
246
- }
247
- },
248
- button: {
249
- $ref: 'https://schemas.micromag.ca/0.1/elements/button.json',
250
- title: 'Button style',
251
- intl: {
252
- title: schemas.buttonStyle
253
- }
254
- },
255
- background: {
256
- $ref: 'https://schemas.micromag.ca/0.1/elements/background.json',
257
- title: 'Background',
258
- intl: {
259
- title: schemas.background
260
- }
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'
261
290
  }
262
291
  }
263
292
  }]
264
- };
293
+ }];
265
294
 
266
- exports.default = SlideshowScreen$2;
267
- 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.29",
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.29",
52
- "@micromag/element-background": "^0.1.29",
53
- "@micromag/element-box": "^0.1.29",
54
- "@micromag/element-button": "^0.1.29",
55
- "@micromag/element-frame": "^0.1.29",
56
- "@micromag/element-image": "^0.1.29",
57
- "@micromag/element-text": "^0.1.29",
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": "e063569a9233fcd7803590f953312d4686224da8"
69
+ "gitHead": "fd03ec6d9decc9e18d6088a36e47c7b1e0e72b4c"
70
70
  }