@micromag/screen-gallery-feed 0.4.49 → 0.4.50

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 (2) hide show
  1. package/es/index.js +88 -81
  2. package/package.json +13 -13
package/es/index.js CHANGED
@@ -4,7 +4,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
4
4
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
5
5
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
6
6
  import classNames from 'classnames';
7
- import React, { useState, useCallback } from 'react';
7
+ import { useState, useCallback } from 'react';
8
8
  import { ScreenElement } from '@micromag/core/components';
9
9
  import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
10
10
  import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
@@ -17,6 +17,7 @@ import Layout from '@micromag/element-layout';
17
17
  import Scroll from '@micromag/element-scroll';
18
18
  import Text from '@micromag/element-text';
19
19
  import Visual from '@micromag/element-visual';
20
+ import { jsx, jsxs } from 'react/jsx-runtime';
20
21
  import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
21
22
  import _extends from '@babel/runtime/helpers/extends';
22
23
 
@@ -107,10 +108,9 @@ function GalleryFeedScreen(_ref) {
107
108
  var _ref3 = caption || {},
108
109
  _ref3$textStyle = _ref3.textStyle,
109
110
  textStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle;
110
- var imageElement = /*#__PURE__*/React.createElement(ScreenElement, {
111
- key: "image-".concat(index),
111
+ var imageElement = /*#__PURE__*/jsx(ScreenElement, {
112
112
  placeholder: "image",
113
- emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
113
+ emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
114
114
  id: "ebsPd4",
115
115
  defaultMessage: [{
116
116
  "type": 0,
@@ -118,33 +118,34 @@ function GalleryFeedScreen(_ref) {
118
118
  }]
119
119
  }),
120
120
  emptyClassName: styles.emptyImage,
121
- isEmpty: !hasImage
122
- }, /*#__PURE__*/React.createElement("div", {
123
- className: styles.imageContainer,
124
- ref: index === 0 ? firstImageRef : null
125
- }, /*#__PURE__*/React.createElement(Visual, Object.assign({}, finalImage, {
126
- loadingMode: "lazy",
127
- className: styles.image,
128
- videoClassName: styles.video,
129
- width: firstImageRefWidth,
130
- resolution: resolution,
131
- playing: backgroundPlaying,
132
- active: active,
133
- shouldLoad: mediaShouldLoad,
134
- withoutVideo: isPreview,
135
- onLoaded: onImageLoaded
136
- }))));
121
+ isEmpty: !hasImage,
122
+ children: /*#__PURE__*/jsx("div", {
123
+ className: styles.imageContainer,
124
+ ref: index === 0 ? firstImageRef : null,
125
+ children: /*#__PURE__*/jsx(Visual, _objectSpread(_objectSpread({}, finalImage), {}, {
126
+ loadingMode: "lazy",
127
+ className: styles.image,
128
+ videoClassName: styles.video,
129
+ width: firstImageRefWidth,
130
+ resolution: resolution,
131
+ playing: backgroundPlaying,
132
+ active: active,
133
+ shouldLoad: mediaShouldLoad,
134
+ withoutVideo: isPreview,
135
+ onLoaded: onImageLoaded
136
+ }))
137
+ })
138
+ }, "image-".concat(index));
137
139
  var captionElement = null;
138
140
  if (withCaptions) {
139
141
  var marginTop = !isReversed || index > 0 ? spacing / 2 : 0;
140
142
  var marginBottom = isReversed || index < (finalImages || []).length - 1 ? spacing / 2 : 0;
141
- captionElement = /*#__PURE__*/React.createElement(ScreenElement, {
142
- key: "caption-".concat(index),
143
+ captionElement = /*#__PURE__*/jsx(ScreenElement, {
143
144
  placeholder: "text",
144
145
  placeholderProps: {
145
146
  lines: 2
146
147
  },
147
- emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
148
+ emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
148
149
  id: "6tIigB",
149
150
  defaultMessage: [{
150
151
  "type": 0,
@@ -152,17 +153,19 @@ function GalleryFeedScreen(_ref) {
152
153
  }]
153
154
  }),
154
155
  emptyClassName: styles.emptyCaption,
155
- isEmpty: !hasCaption
156
- }, hasCaption ? /*#__PURE__*/React.createElement("div", {
157
- className: styles.caption,
158
- style: {
159
- marginTop: marginTop,
160
- marginBottom: marginBottom
161
- }
162
- }, /*#__PURE__*/React.createElement(Text, Object.assign({}, caption, {
163
- textStyle: _objectSpread(_objectSpread({}, imageCaptionStyle || null), textStyle),
164
- className: styles.captionText
165
- }))) : null);
156
+ isEmpty: !hasCaption,
157
+ children: hasCaption ? /*#__PURE__*/jsx("div", {
158
+ className: styles.caption,
159
+ style: {
160
+ marginTop: marginTop,
161
+ marginBottom: marginBottom
162
+ },
163
+ children: /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, caption), {}, {
164
+ textStyle: _objectSpread(_objectSpread({}, imageCaptionStyle || null), textStyle),
165
+ className: styles.captionText
166
+ }))
167
+ }) : null
168
+ }, "caption-".concat(index));
166
169
  }
167
170
  if (isReversed) {
168
171
  if (withCaptions) {
@@ -176,12 +179,11 @@ function GalleryFeedScreen(_ref) {
176
179
  }
177
180
  }
178
181
  if (!isPlaceholder && index < (finalImages || []).length - 1) {
179
- items.push(/*#__PURE__*/React.createElement("div", {
180
- key: "spacing-".concat(index),
182
+ items.push(/*#__PURE__*/jsx("div", {
181
183
  style: {
182
184
  height: spacing
183
185
  }
184
- }));
186
+ }, "spacing-".concat(index)));
185
187
  }
186
188
  });
187
189
  var hasHeader = isHeaderFilled(header);
@@ -215,55 +217,60 @@ function GalleryFeedScreen(_ref) {
215
217
  });
216
218
  }
217
219
  }, [trackScreenEvent]);
218
- return /*#__PURE__*/React.createElement("div", {
220
+ return /*#__PURE__*/jsxs("div", {
219
221
  className: classNames([styles.container, className, _defineProperty({}, styles.isPlaceholder, isPlaceholder)]),
220
- "data-screen-ready": ready
221
- }, /*#__PURE__*/React.createElement(Container, {
222
- width: width,
223
- height: height,
224
- className: styles.content
225
- }, /*#__PURE__*/React.createElement(Scroll, {
226
- disabled: scrollingDisabled,
227
- onScrolledTrigger: onScrolledTrigger,
228
- onScrolledBottom: onScrolledBottom,
229
- onScrolledNotBottom: onScrolledNotBottom,
230
- withShadow: true
231
- }, /*#__PURE__*/React.createElement(Layout, {
232
- className: styles.layout,
233
- style: !isPlaceholder ? {
234
- padding: spacing,
235
- paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing),
236
- paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing / 2
237
- } : null
238
- }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
239
- key: "header",
240
- style: {
241
- paddingBottom: spacing
242
- }
243
- }, /*#__PURE__*/React.createElement(Header, header)) : null, items, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
244
- className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom)]),
245
- style: {
246
- paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
247
- paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
248
- paddingTop: spacing
249
- }
250
- }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null))), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
251
- background: background,
252
- width: width,
253
- height: height,
254
- resolution: resolution,
255
- playing: backgroundPlaying,
256
- muted: muted,
257
- shouldLoad: mediaShouldLoad,
258
- mediaRef: mediaRef,
259
- withoutVideo: isPreview,
260
- className: styles.background
261
- }) : null);
222
+ "data-screen-ready": ready,
223
+ children: [/*#__PURE__*/jsx(Container, {
224
+ width: width,
225
+ height: height,
226
+ className: styles.content,
227
+ children: /*#__PURE__*/jsx(Scroll, {
228
+ disabled: scrollingDisabled,
229
+ onScrolledTrigger: onScrolledTrigger,
230
+ onScrolledBottom: onScrolledBottom,
231
+ onScrolledNotBottom: onScrolledNotBottom,
232
+ withShadow: true,
233
+ children: /*#__PURE__*/jsxs(Layout, {
234
+ className: styles.layout,
235
+ style: !isPlaceholder ? {
236
+ padding: spacing,
237
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing),
238
+ paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing / 2
239
+ } : null,
240
+ children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
241
+ style: {
242
+ paddingBottom: spacing
243
+ },
244
+ children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
245
+ }, "header") : null, items, !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
246
+ className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom)]),
247
+ style: {
248
+ paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
249
+ paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
250
+ paddingTop: spacing
251
+ },
252
+ children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
253
+ }) : null]
254
+ })
255
+ })
256
+ }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
257
+ background: background,
258
+ width: width,
259
+ height: height,
260
+ resolution: resolution,
261
+ playing: backgroundPlaying,
262
+ muted: muted,
263
+ shouldLoad: mediaShouldLoad,
264
+ mediaRef: mediaRef,
265
+ withoutVideo: isPreview,
266
+ className: styles.background
267
+ }) : null]
268
+ });
262
269
  }
263
270
 
264
271
  function GalleryFeedCaptionsScreen(_ref) {
265
272
  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
266
- return /*#__PURE__*/React.createElement(GalleryFeedScreen, Object.assign({}, props, {
273
+ return /*#__PURE__*/jsx(GalleryFeedScreen, _objectSpread(_objectSpread({}, props), {}, {
267
274
  withCaptions: true
268
275
  }));
269
276
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-gallery-feed",
3
- "version": "0.4.49",
3
+ "version": "0.4.50",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -61,17 +61,17 @@
61
61
  },
62
62
  "dependencies": {
63
63
  "@babel/runtime": "^7.28.6",
64
- "@micromag/core": "^0.4.49",
65
- "@micromag/element-background": "^0.4.49",
66
- "@micromag/element-container": "^0.4.49",
67
- "@micromag/element-footer": "^0.4.49",
68
- "@micromag/element-header": "^0.4.49",
69
- "@micromag/element-layout": "^0.4.49",
70
- "@micromag/element-scroll": "^0.4.49",
71
- "@micromag/element-stack": "^0.4.49",
72
- "@micromag/element-text": "^0.4.49",
73
- "@micromag/element-visual": "^0.4.49",
74
- "@micromag/transforms": "^0.4.49",
64
+ "@micromag/core": "^0.4.50",
65
+ "@micromag/element-background": "^0.4.50",
66
+ "@micromag/element-container": "^0.4.50",
67
+ "@micromag/element-footer": "^0.4.50",
68
+ "@micromag/element-header": "^0.4.50",
69
+ "@micromag/element-layout": "^0.4.50",
70
+ "@micromag/element-scroll": "^0.4.50",
71
+ "@micromag/element-stack": "^0.4.50",
72
+ "@micromag/element-text": "^0.4.50",
73
+ "@micromag/element-visual": "^0.4.50",
74
+ "@micromag/transforms": "^0.4.50",
75
75
  "classnames": "^2.2.6",
76
76
  "lodash": "^4.17.23",
77
77
  "react-intl": "^8.1.3 || ^10.0.0",
@@ -81,6 +81,6 @@
81
81
  "access": "public",
82
82
  "registry": "https://registry.npmjs.org/"
83
83
  },
84
- "gitHead": "0a225ff29387217cccb0fcc5a731e23c74bd202e",
84
+ "gitHead": "940d5ca98f8f448b79eaa3e2fa685c3ee95185b8",
85
85
  "types": "es/index.d.ts"
86
86
  }