@micromag/screen-image 0.3.420 → 0.3.429
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/assets/css/styles.css +1 -1
- package/es/index.js +1 -2
- package/lib/index.js +51 -72
- package/package.json +20 -12
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-screen-image-container .micromag-screen-image-background,.micromag-screen-image-container .micromag-screen-image-image{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-image-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-image-disabled.micromag-screen-image-container{overflow:hidden;pointer-events:none}.micromag-screen-image-hidden.micromag-screen-image-container{display:none;visibility:hidden}.micromag-screen-image-placeholder.micromag-screen-image-container .micromag-screen-image-content{padding:6px;position:relative}.micromag-screen-image-container .micromag-screen-image-emptyImage,.micromag-screen-image-container .micromag-screen-image-emptyLegend,.micromag-screen-image-container .micromag-screen-image-emptyText,.micromag-screen-image-container .micromag-screen-image-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-image-container .micromag-screen-image-background{z-index:0}.micromag-screen-image-container .micromag-screen-image-content{height:100%;position:relative;z-index:1}.micromag-screen-image-container .micromag-screen-image-emptyImage,.micromag-screen-image-container .micromag-screen-image-emptyLegend,.micromag-screen-image-container .micromag-screen-image-emptyText,.micromag-screen-image-container .micromag-screen-image-emptyTitle{margin:10px auto;width:100%}.micromag-screen-image-container .micromag-screen-image-emptyImage{height:100%}.micromag-screen-image-container .micromag-screen-image-emptyTitle{height:100px}.micromag-screen-image-container .micromag-screen-image-emptyText{height:80px}.micromag-screen-image-container .micromag-screen-image-emptyLegend{height:50px}.micromag-screen-image-container .micromag-screen-image-imageContainer{-ms-flex-positive:1;flex-grow:1;position:relative}.micromag-screen-image-container .micromag-screen-image-placeholderImage{height:100%}.micromag-screen-image-container.micromag-screen-image-isPlaceholder .micromag-screen-image-layout{padding:10px}.micromag-screen-image-container.micromag-screen-image-isCard .micromag-screen-image-placeholderImage{margin:-10px -10px 0}.micromag-screen-image-container.micromag-screen-image-isCardReverse .micromag-screen-image-placeholderImage{margin:10px -10px 0}.micromag-screen-image-container.micromag-screen-image-isCardReverse .micromag-screen-image-footer{bottom:0;left:0;position:absolute;width:100%}.micromag-screen-image-container.micromag-screen-image-isFullscreen .micromag-screen-image-layout{padding:0}.micromag-screen-image-container.micromag-screen-image-isFullscreen .micromag-screen-image-header{left:0;margin-top:0;position:absolute;top:0;width:100%;z-index:1}.micromag-screen-image-container.micromag-screen-image-isFullscreen .micromag-screen-image-footer{bottom:0;left:0;margin-top:0;position:absolute;width:100%}
|
|
1
|
+
.micromag-screen-image-container .micromag-screen-image-background,.micromag-screen-image-container .micromag-screen-image-image{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-image-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-image-disabled.micromag-screen-image-container{overflow:hidden;pointer-events:none}.micromag-screen-image-hidden.micromag-screen-image-container{display:none;visibility:hidden}.micromag-screen-image-placeholder.micromag-screen-image-container .micromag-screen-image-content{padding:6px;position:relative}.micromag-screen-image-container .micromag-screen-image-emptyImage,.micromag-screen-image-container .micromag-screen-image-emptyLegend,.micromag-screen-image-container .micromag-screen-image-emptyText,.micromag-screen-image-container .micromag-screen-image-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-image-container .micromag-screen-image-background{z-index:0}.micromag-screen-image-container .micromag-screen-image-content{height:100%;position:relative;z-index:1}.micromag-screen-image-container .micromag-screen-image-emptyImage,.micromag-screen-image-container .micromag-screen-image-emptyLegend,.micromag-screen-image-container .micromag-screen-image-emptyText,.micromag-screen-image-container .micromag-screen-image-emptyTitle{margin:10px auto;width:100%}.micromag-screen-image-container .micromag-screen-image-emptyImage{height:100%}.micromag-screen-image-container .micromag-screen-image-emptyTitle{height:100px}.micromag-screen-image-container .micromag-screen-image-emptyText{height:80px}.micromag-screen-image-container .micromag-screen-image-emptyLegend{height:50px}.micromag-screen-image-container .micromag-screen-image-imageContainer{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;position:relative}.micromag-screen-image-container .micromag-screen-image-placeholderImage{height:100%}.micromag-screen-image-container.micromag-screen-image-isPlaceholder .micromag-screen-image-layout{padding:10px}.micromag-screen-image-container.micromag-screen-image-isCard .micromag-screen-image-placeholderImage{margin:-10px -10px 0}.micromag-screen-image-container.micromag-screen-image-isCardReverse .micromag-screen-image-placeholderImage{margin:10px -10px 0}.micromag-screen-image-container.micromag-screen-image-isCardReverse .micromag-screen-image-footer{bottom:0;left:0;position:absolute;width:100%}.micromag-screen-image-container.micromag-screen-image-isFullscreen .micromag-screen-image-layout{padding:0}.micromag-screen-image-container.micromag-screen-image-isFullscreen .micromag-screen-image-header{left:0;margin-top:0;position:absolute;top:0;width:100%;z-index:1}.micromag-screen-image-container.micromag-screen-image-isFullscreen .micromag-screen-image-footer{bottom:0;left:0;margin-top:0;position:absolute;width:100%}
|
package/es/index.js
CHANGED
|
@@ -68,7 +68,6 @@ var defaultProps = {
|
|
|
68
68
|
className: null
|
|
69
69
|
};
|
|
70
70
|
var ImageScreen = function ImageScreen(_ref) {
|
|
71
|
-
var _ref2;
|
|
72
71
|
var layout = _ref.layout,
|
|
73
72
|
image = _ref.image,
|
|
74
73
|
imageFit = _ref.imageFit,
|
|
@@ -266,7 +265,7 @@ var ImageScreen = function ImageScreen(_ref) {
|
|
|
266
265
|
paddingBottom = current && !isPreview ? viewerBottomHeight : 0;
|
|
267
266
|
}
|
|
268
267
|
return /*#__PURE__*/React.createElement("div", {
|
|
269
|
-
className: classNames([styles.container, (
|
|
268
|
+
className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.isReversed, isReversed), styles.isPlaceholder, isPlaceholder), styles.isCard, isCard), styles.isCardReverse, isCardReverse), styles.isFullscreen, isFullscreen)]),
|
|
270
269
|
"data-screen-ready": ready
|
|
271
270
|
}, /*#__PURE__*/React.createElement(Container, {
|
|
272
271
|
width: width,
|
package/lib/index.js
CHANGED
|
@@ -27,49 +27,29 @@ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
|
27
27
|
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
|
|
28
28
|
var appleNews = require('@micromag/transforms/apple-news');
|
|
29
29
|
|
|
30
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
31
|
-
|
|
32
|
-
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
33
|
-
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
|
|
34
|
-
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
|
|
35
|
-
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
36
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
37
|
-
var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
|
|
38
|
-
var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
|
|
39
|
-
var Footer__default = /*#__PURE__*/_interopDefaultLegacy(Footer);
|
|
40
|
-
var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
|
|
41
|
-
var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
|
|
42
|
-
var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
|
|
43
|
-
var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
|
|
44
|
-
var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
|
|
45
|
-
var _objectDestructuringEmpty__default = /*#__PURE__*/_interopDefaultLegacy(_objectDestructuringEmpty);
|
|
46
|
-
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
|
|
47
|
-
var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
|
|
48
|
-
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
|
|
49
|
-
|
|
50
30
|
var styles = {"container":"micromag-screen-image-container","image":"micromag-screen-image-image","background":"micromag-screen-image-background","disabled":"micromag-screen-image-disabled","hidden":"micromag-screen-image-hidden","placeholder":"micromag-screen-image-placeholder","content":"micromag-screen-image-content","emptyImage":"micromag-screen-image-emptyImage","emptyTitle":"micromag-screen-image-emptyTitle","emptyText":"micromag-screen-image-emptyText","emptyLegend":"micromag-screen-image-emptyLegend","imageContainer":"micromag-screen-image-imageContainer","placeholderImage":"micromag-screen-image-placeholderImage","isPlaceholder":"micromag-screen-image-isPlaceholder","layout":"micromag-screen-image-layout","isCard":"micromag-screen-image-isCard","isCardReverse":"micromag-screen-image-isCardReverse","footer":"micromag-screen-image-footer","isFullscreen":"micromag-screen-image-isFullscreen","header":"micromag-screen-image-header"};
|
|
51
31
|
|
|
52
32
|
// NOTE: should this be a scrolling element ?
|
|
53
33
|
|
|
54
34
|
var propTypes = {
|
|
55
|
-
layout:
|
|
35
|
+
layout: PropTypes.oneOf(['normal', 'fullscreen', 'reverse', 'card', 'card-reverse', 'title-top']),
|
|
56
36
|
image: core.PropTypes.imageMedia,
|
|
57
|
-
imageFit:
|
|
58
|
-
defaultImageFit:
|
|
37
|
+
imageFit: PropTypes.oneOf(['contain', 'cover']),
|
|
38
|
+
defaultImageFit: PropTypes.string,
|
|
59
39
|
title: core.PropTypes.headingElement,
|
|
60
40
|
text: core.PropTypes.textElement,
|
|
61
41
|
legend: core.PropTypes.textElement,
|
|
62
|
-
withTitle:
|
|
63
|
-
withText:
|
|
64
|
-
withLegend:
|
|
65
|
-
spacing:
|
|
42
|
+
withTitle: PropTypes.bool,
|
|
43
|
+
withText: PropTypes.bool,
|
|
44
|
+
withLegend: PropTypes.bool,
|
|
45
|
+
spacing: PropTypes.number,
|
|
66
46
|
background: core.PropTypes.backgroundElement,
|
|
67
47
|
header: core.PropTypes.header,
|
|
68
48
|
footer: core.PropTypes.footer,
|
|
69
|
-
current:
|
|
70
|
-
active:
|
|
49
|
+
current: PropTypes.bool,
|
|
50
|
+
active: PropTypes.bool,
|
|
71
51
|
transitions: core.PropTypes.transitions,
|
|
72
|
-
className:
|
|
52
|
+
className: PropTypes.string
|
|
73
53
|
};
|
|
74
54
|
var defaultProps = {
|
|
75
55
|
layout: 'normal',
|
|
@@ -92,7 +72,6 @@ var defaultProps = {
|
|
|
92
72
|
className: null
|
|
93
73
|
};
|
|
94
74
|
var ImageScreen = function ImageScreen(_ref) {
|
|
95
|
-
var _ref2;
|
|
96
75
|
var layout = _ref.layout,
|
|
97
76
|
image = _ref.image,
|
|
98
77
|
imageFit = _ref.imageFit,
|
|
@@ -144,7 +123,7 @@ var ImageScreen = function ImageScreen(_ref) {
|
|
|
144
123
|
var hasText = utils.isTextFilled(text);
|
|
145
124
|
var hasLegend = utils.isTextFilled(legend);
|
|
146
125
|
var _useState = React.useState(!hasImage),
|
|
147
|
-
_useState2 =
|
|
126
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
148
127
|
ready = _useState2[0],
|
|
149
128
|
setReady = _useState2[1];
|
|
150
129
|
var backgroundPlaying = current && (isView || isEdit);
|
|
@@ -177,20 +156,20 @@ var ImageScreen = function ImageScreen(_ref) {
|
|
|
177
156
|
marginTop: isCardReverse && !hasHeader ? finalSpacing : finalSpacing / 2,
|
|
178
157
|
marginBottom: isCard && !hasHeader ? finalSpacing : finalSpacing / 2
|
|
179
158
|
} : null;
|
|
180
|
-
var items = [/*#__PURE__*/
|
|
159
|
+
var items = [/*#__PURE__*/React.createElement("div", {
|
|
181
160
|
key: "image",
|
|
182
161
|
ref: imageCntRef,
|
|
183
162
|
className: styles.imageContainer,
|
|
184
163
|
style: !isPlaceholder ? {
|
|
185
164
|
margin: imageMargin
|
|
186
165
|
} : null
|
|
187
|
-
}, /*#__PURE__*/
|
|
166
|
+
}, /*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
188
167
|
placeholder: "image",
|
|
189
168
|
placeholderProps: {
|
|
190
169
|
className: styles.placeholderImage,
|
|
191
170
|
height: '100%'
|
|
192
171
|
},
|
|
193
|
-
emptyLabel: /*#__PURE__*/
|
|
172
|
+
emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
|
|
194
173
|
id: "ebsPd4",
|
|
195
174
|
defaultMessage: [{
|
|
196
175
|
"type": 0,
|
|
@@ -199,12 +178,12 @@ var ImageScreen = function ImageScreen(_ref) {
|
|
|
199
178
|
}),
|
|
200
179
|
emptyClassName: styles.emptyImage,
|
|
201
180
|
isEmpty: !hasImage
|
|
202
|
-
}, hasImage ? /*#__PURE__*/
|
|
181
|
+
}, hasImage ? /*#__PURE__*/React.createElement(components.Transitions, {
|
|
203
182
|
transitions: transitions,
|
|
204
183
|
playing: transitionPlaying,
|
|
205
184
|
disabled: transitionDisabled,
|
|
206
185
|
fullscreen: true
|
|
207
|
-
}, /*#__PURE__*/
|
|
186
|
+
}, /*#__PURE__*/React.createElement(Visual, {
|
|
208
187
|
className: styles.image,
|
|
209
188
|
media: image,
|
|
210
189
|
objectFit: finalImageFit,
|
|
@@ -217,10 +196,10 @@ var ImageScreen = function ImageScreen(_ref) {
|
|
|
217
196
|
shouldLoad: mediaShouldLoad,
|
|
218
197
|
withoutVideo: isPreview,
|
|
219
198
|
onLoaded: onImageLoaded
|
|
220
|
-
})) : null)), withTitle && /*#__PURE__*/
|
|
199
|
+
})) : null)), withTitle && /*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
221
200
|
key: "title",
|
|
222
201
|
placeholder: "title",
|
|
223
|
-
emptyLabel: /*#__PURE__*/
|
|
202
|
+
emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
|
|
224
203
|
id: "2ZOPe+",
|
|
225
204
|
defaultMessage: [{
|
|
226
205
|
"type": 0,
|
|
@@ -229,16 +208,16 @@ var ImageScreen = function ImageScreen(_ref) {
|
|
|
229
208
|
}),
|
|
230
209
|
emptyClassName: styles.emptyTitle,
|
|
231
210
|
isEmpty: !hasTitle
|
|
232
|
-
}, hasTitle ? /*#__PURE__*/
|
|
211
|
+
}, hasTitle ? /*#__PURE__*/React.createElement(components.Transitions, {
|
|
233
212
|
transitions: transitions,
|
|
234
213
|
playing: transitionPlaying,
|
|
235
214
|
disabled: transitionDisabled
|
|
236
|
-
}, /*#__PURE__*/
|
|
215
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
237
216
|
style: itemMarginStyle
|
|
238
|
-
}, /*#__PURE__*/
|
|
217
|
+
}, /*#__PURE__*/React.createElement(Heading, title))) : null), withText && /*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
239
218
|
key: "text",
|
|
240
219
|
placeholder: "text",
|
|
241
|
-
emptyLabel: /*#__PURE__*/
|
|
220
|
+
emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
|
|
242
221
|
id: "z4CiV1",
|
|
243
222
|
defaultMessage: [{
|
|
244
223
|
"type": 0,
|
|
@@ -247,16 +226,16 @@ var ImageScreen = function ImageScreen(_ref) {
|
|
|
247
226
|
}),
|
|
248
227
|
emptyClassName: styles.emptyText,
|
|
249
228
|
isEmpty: !hasText
|
|
250
|
-
}, hasText ? /*#__PURE__*/
|
|
229
|
+
}, hasText ? /*#__PURE__*/React.createElement(components.Transitions, {
|
|
251
230
|
transitions: transitions,
|
|
252
231
|
playing: transitionPlaying,
|
|
253
232
|
disabled: transitionDisabled
|
|
254
|
-
}, /*#__PURE__*/
|
|
233
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
255
234
|
style: itemMarginStyle
|
|
256
|
-
}, /*#__PURE__*/
|
|
235
|
+
}, /*#__PURE__*/React.createElement(Text, text))) : null), withLegend && /*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
257
236
|
key: "legend",
|
|
258
237
|
placeholder: "shortText",
|
|
259
|
-
emptyLabel: /*#__PURE__*/
|
|
238
|
+
emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
|
|
260
239
|
id: "dqnkQk",
|
|
261
240
|
defaultMessage: [{
|
|
262
241
|
"type": 0,
|
|
@@ -265,13 +244,13 @@ var ImageScreen = function ImageScreen(_ref) {
|
|
|
265
244
|
}),
|
|
266
245
|
emptyClassName: styles.emptyLegend,
|
|
267
246
|
isEmpty: !hasLegend
|
|
268
|
-
}, hasLegend ? /*#__PURE__*/
|
|
247
|
+
}, hasLegend ? /*#__PURE__*/React.createElement(components.Transitions, {
|
|
269
248
|
transitions: transitions,
|
|
270
249
|
playing: transitionPlaying,
|
|
271
250
|
disabled: transitionDisabled
|
|
272
|
-
}, /*#__PURE__*/
|
|
251
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
273
252
|
style: itemMarginStyle
|
|
274
|
-
}, /*#__PURE__*/
|
|
253
|
+
}, /*#__PURE__*/React.createElement(Text, legend))) : null)];
|
|
275
254
|
if (isReversed) {
|
|
276
255
|
items.reverse();
|
|
277
256
|
} else if (isTitleTop) {
|
|
@@ -289,14 +268,14 @@ var ImageScreen = function ImageScreen(_ref) {
|
|
|
289
268
|
paddingTop = current && !isPreview ? viewerTopHeight : 0;
|
|
290
269
|
paddingBottom = current && !isPreview ? viewerBottomHeight : 0;
|
|
291
270
|
}
|
|
292
|
-
return /*#__PURE__*/
|
|
293
|
-
className:
|
|
271
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
272
|
+
className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.isReversed, isReversed), styles.isPlaceholder, isPlaceholder), styles.isCard, isCard), styles.isCardReverse, isCardReverse), styles.isFullscreen, isFullscreen)]),
|
|
294
273
|
"data-screen-ready": ready
|
|
295
|
-
}, /*#__PURE__*/
|
|
274
|
+
}, /*#__PURE__*/React.createElement(Container, {
|
|
296
275
|
width: width,
|
|
297
276
|
height: height,
|
|
298
277
|
className: styles.content
|
|
299
|
-
}, /*#__PURE__*/
|
|
278
|
+
}, /*#__PURE__*/React.createElement(Layout, {
|
|
300
279
|
className: styles.layout,
|
|
301
280
|
fullscreen: true,
|
|
302
281
|
style: !isPlaceholder ? {
|
|
@@ -304,7 +283,7 @@ var ImageScreen = function ImageScreen(_ref) {
|
|
|
304
283
|
paddingTop: paddingTop,
|
|
305
284
|
paddingBottom: paddingBottom
|
|
306
285
|
} : null
|
|
307
|
-
}, !isPlaceholder && hasHeader ? /*#__PURE__*/
|
|
286
|
+
}, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
|
|
308
287
|
className: styles.header,
|
|
309
288
|
style: isFullscreen || isCardReverse ? {
|
|
310
289
|
paddingTop: hasHeader ? spacing / 2 : spacing,
|
|
@@ -318,7 +297,7 @@ var ImageScreen = function ImageScreen(_ref) {
|
|
|
318
297
|
paddingLeft: spacing / 2,
|
|
319
298
|
paddingRight: spacing / 2
|
|
320
299
|
}
|
|
321
|
-
}, /*#__PURE__*/
|
|
300
|
+
}, /*#__PURE__*/React.createElement(Header, header)) : null, items, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
|
|
322
301
|
className: styles.footer,
|
|
323
302
|
style: isFullscreen || isCardReverse ? {
|
|
324
303
|
paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
|
|
@@ -332,7 +311,7 @@ var ImageScreen = function ImageScreen(_ref) {
|
|
|
332
311
|
paddingTop: isCardLayout ? spacing / 2 : null,
|
|
333
312
|
paddingBottom: isCardLayout ? spacing / 2 : null
|
|
334
313
|
}
|
|
335
|
-
}, /*#__PURE__*/
|
|
314
|
+
}, /*#__PURE__*/React.createElement(Footer, footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
|
|
336
315
|
background: background,
|
|
337
316
|
width: width,
|
|
338
317
|
height: height,
|
|
@@ -347,32 +326,32 @@ var ImageScreen = function ImageScreen(_ref) {
|
|
|
347
326
|
};
|
|
348
327
|
ImageScreen.propTypes = propTypes;
|
|
349
328
|
ImageScreen.defaultProps = defaultProps;
|
|
350
|
-
var ImageScreen$1 = /*#__PURE__*/
|
|
329
|
+
var ImageScreen$1 = /*#__PURE__*/React.memo(ImageScreen);
|
|
351
330
|
|
|
352
331
|
var ImageLegendScreen = function ImageLegendScreen(_ref) {
|
|
353
|
-
var props =
|
|
354
|
-
return /*#__PURE__*/
|
|
332
|
+
var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
|
|
333
|
+
return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
|
|
355
334
|
withLegend: true
|
|
356
335
|
}));
|
|
357
336
|
};
|
|
358
337
|
|
|
359
338
|
var ImageTextScreen = function ImageTextScreen(_ref) {
|
|
360
|
-
var props =
|
|
361
|
-
return /*#__PURE__*/
|
|
339
|
+
var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
|
|
340
|
+
return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
|
|
362
341
|
withText: true
|
|
363
342
|
}));
|
|
364
343
|
};
|
|
365
344
|
|
|
366
345
|
var ImageTitleScreen = function ImageTitleScreen(_ref) {
|
|
367
|
-
var props =
|
|
368
|
-
return /*#__PURE__*/
|
|
346
|
+
var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
|
|
347
|
+
return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
|
|
369
348
|
withTitle: true
|
|
370
349
|
}));
|
|
371
350
|
};
|
|
372
351
|
|
|
373
352
|
var ImageTitleTextScreen = function ImageTitleTextScreen(_ref) {
|
|
374
|
-
var props =
|
|
375
|
-
return /*#__PURE__*/
|
|
353
|
+
var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
|
|
354
|
+
return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
|
|
376
355
|
withTitle: true,
|
|
377
356
|
withText: true
|
|
378
357
|
}));
|
|
@@ -395,20 +374,20 @@ var transform = function transform(newStory, _ref) {
|
|
|
395
374
|
var items = [];
|
|
396
375
|
switch (layout) {
|
|
397
376
|
case 'reverse':
|
|
398
|
-
items = [].concat(
|
|
377
|
+
items = [].concat(_toConsumableArray(textComponent ? [textComponent] : []), _toConsumableArray(titleComponent ? [titleComponent] : []), _toConsumableArray(imageComponent ? [imageComponent] : []));
|
|
399
378
|
break;
|
|
400
379
|
case 'title-top':
|
|
401
|
-
items = [].concat(
|
|
380
|
+
items = [].concat(_toConsumableArray(titleComponent ? [titleComponent] : []), _toConsumableArray(imageComponent ? [imageComponent] : []), _toConsumableArray(textComponent ? [textComponent] : []));
|
|
402
381
|
break;
|
|
403
382
|
default:
|
|
404
|
-
items = [].concat(
|
|
383
|
+
items = [].concat(_toConsumableArray(imageComponent ? [imageComponent] : []), _toConsumableArray(titleComponent ? [titleComponent] : []), _toConsumableArray(textComponent ? [textComponent] : []));
|
|
405
384
|
break;
|
|
406
385
|
}
|
|
407
386
|
var _Container = appleNews.Container(textStory, items),
|
|
408
387
|
containerStory = _Container.story,
|
|
409
388
|
component = _Container.component;
|
|
410
|
-
return
|
|
411
|
-
components: [].concat(
|
|
389
|
+
return _objectSpread(_objectSpread({}, containerStory), {}, {
|
|
390
|
+
components: [].concat(_toConsumableArray(newStory.components || []), _toConsumableArray(component ? [component] : []))
|
|
412
391
|
});
|
|
413
392
|
};
|
|
414
393
|
|
|
@@ -1009,4 +988,4 @@ exports.ImageScreen = ImageScreen$1;
|
|
|
1009
988
|
exports.ImageTextScreen = ImageTextScreen;
|
|
1010
989
|
exports.ImageTitleScreen = ImageTitleScreen;
|
|
1011
990
|
exports.ImageTitleTextScreen = ImageTitleTextScreen;
|
|
1012
|
-
exports
|
|
991
|
+
exports.default = definition;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-image",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.429",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [
|
|
@@ -32,6 +32,14 @@
|
|
|
32
32
|
"license": "ISC",
|
|
33
33
|
"main": "lib/index.js",
|
|
34
34
|
"module": "es/index.js",
|
|
35
|
+
"style": "assets/css/styles.css",
|
|
36
|
+
"exports": {
|
|
37
|
+
".": {
|
|
38
|
+
"require": "./lib/index.js",
|
|
39
|
+
"import": "./es/index.js"
|
|
40
|
+
},
|
|
41
|
+
"./assets/css/*.css": "./assets/css/*.css"
|
|
42
|
+
},
|
|
35
43
|
"files": [
|
|
36
44
|
"lib",
|
|
37
45
|
"es",
|
|
@@ -50,16 +58,16 @@
|
|
|
50
58
|
},
|
|
51
59
|
"dependencies": {
|
|
52
60
|
"@babel/runtime": "^7.13.10",
|
|
53
|
-
"@micromag/core": "^0.3.
|
|
54
|
-
"@micromag/element-background": "^0.3.
|
|
55
|
-
"@micromag/element-container": "^0.3.
|
|
56
|
-
"@micromag/element-footer": "^0.3.
|
|
57
|
-
"@micromag/element-header": "^0.3.
|
|
58
|
-
"@micromag/element-heading": "^0.3.
|
|
59
|
-
"@micromag/element-layout": "^0.3.
|
|
60
|
-
"@micromag/element-text": "^0.3.
|
|
61
|
-
"@micromag/element-visual": "^0.3.
|
|
62
|
-
"@micromag/transforms": "^0.3.
|
|
61
|
+
"@micromag/core": "^0.3.429",
|
|
62
|
+
"@micromag/element-background": "^0.3.429",
|
|
63
|
+
"@micromag/element-container": "^0.3.429",
|
|
64
|
+
"@micromag/element-footer": "^0.3.429",
|
|
65
|
+
"@micromag/element-header": "^0.3.429",
|
|
66
|
+
"@micromag/element-heading": "^0.3.429",
|
|
67
|
+
"@micromag/element-layout": "^0.3.429",
|
|
68
|
+
"@micromag/element-text": "^0.3.429",
|
|
69
|
+
"@micromag/element-visual": "^0.3.429",
|
|
70
|
+
"@micromag/transforms": "^0.3.429",
|
|
63
71
|
"classnames": "^2.2.6",
|
|
64
72
|
"lodash": "^4.17.21",
|
|
65
73
|
"prop-types": "^15.7.2",
|
|
@@ -70,5 +78,5 @@
|
|
|
70
78
|
"access": "public",
|
|
71
79
|
"registry": "https://registry.npmjs.org/"
|
|
72
80
|
},
|
|
73
|
-
"gitHead": "
|
|
81
|
+
"gitHead": "f15e72b88ecfda4c54b87626513149b58572c52b"
|
|
74
82
|
}
|