@micromag/screen-title 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 +87 -93
  2. package/package.json +11 -11
package/es/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { FormattedMessage, defineMessage } from 'react-intl';
2
+ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
2
3
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
4
  import classNames from 'classnames';
4
- import React from 'react';
5
5
  import { ScreenElement } from '@micromag/core/components';
6
6
  import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
7
7
  import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps, getStyleFromBox } from '@micromag/core/utils';
@@ -12,6 +12,7 @@ import Header from '@micromag/element-header';
12
12
  import Heading from '@micromag/element-heading';
13
13
  import Layout, { Spacer } from '@micromag/element-layout';
14
14
  import Text from '@micromag/element-text';
15
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
15
16
  import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
16
17
  import _extends from '@babel/runtime/helpers/extends';
17
18
  import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
@@ -38,7 +39,7 @@ function TitleScreen(_ref) {
38
39
  _ref$spacing = _ref.spacing,
39
40
  spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
40
41
  _ref$descriptionEmpty = _ref.descriptionEmptyLabel,
41
- descriptionEmptyLabel = _ref$descriptionEmpty === void 0 ? /*#__PURE__*/React.createElement(FormattedMessage, {
42
+ descriptionEmptyLabel = _ref$descriptionEmpty === void 0 ? /*#__PURE__*/jsx(FormattedMessage, {
42
43
  id: "507VAi",
43
44
  defaultMessage: [{
44
45
  "type": 0,
@@ -99,10 +100,9 @@ function TitleScreen(_ref) {
99
100
  openWebView: openWebView,
100
101
  isPreview: isPreview
101
102
  });
102
- var titleElement = /*#__PURE__*/React.createElement(ScreenElement, {
103
- key: "title",
103
+ var titleElement = /*#__PURE__*/jsx(ScreenElement, {
104
104
  placeholder: "title",
105
- emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
105
+ emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
106
106
  id: "2ZOPe+",
107
107
  defaultMessage: [{
108
108
  "type": 0,
@@ -110,16 +110,16 @@ function TitleScreen(_ref) {
110
110
  }]
111
111
  }),
112
112
  emptyClassName: styles.emptyTitle,
113
- isEmpty: !hasTitle
114
- }, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
115
- className: classNames([styles.title, _defineProperty({}, styles.withMargin, titleWithMargin)])
116
- }, title, {
117
- size: 1
118
- })) : null);
119
- var subtitleElement = withSubtitle ? /*#__PURE__*/React.createElement(ScreenElement, {
120
- key: "subtitle",
113
+ isEmpty: !hasTitle,
114
+ children: hasTitle ? /*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({
115
+ className: classNames([styles.title, _defineProperty({}, styles.withMargin, titleWithMargin)])
116
+ }, title), {}, {
117
+ size: 1
118
+ })) : null
119
+ }, "title");
120
+ var subtitleElement = withSubtitle ? /*#__PURE__*/jsx(ScreenElement, {
121
121
  placeholder: "subtitle",
122
- emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
122
+ emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
123
123
  id: "d60tSn",
124
124
  defaultMessage: [{
125
125
  "type": 0,
@@ -127,90 +127,84 @@ function TitleScreen(_ref) {
127
127
  }]
128
128
  }),
129
129
  emptyClassName: styles.emptySubtitle,
130
- isEmpty: !hasSubtitle
131
- }, hasSubtitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
132
- className: classNames([styles.subtitle, _defineProperty({}, styles.withMargin, subtitleWithMargin)])
133
- }, subtitle, {
134
- size: 2
135
- })) : null) : null;
136
- var descriptionElement = withDescription ? /*#__PURE__*/React.createElement(ScreenElement, {
137
- key: "description",
130
+ isEmpty: !hasSubtitle,
131
+ children: hasSubtitle ? /*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({
132
+ className: classNames([styles.subtitle, _defineProperty({}, styles.withMargin, subtitleWithMargin)])
133
+ }, subtitle), {}, {
134
+ size: 2
135
+ })) : null
136
+ }, "subtitle") : null;
137
+ var descriptionElement = withDescription ? /*#__PURE__*/jsx(ScreenElement, {
138
138
  placeholder: "shortText",
139
139
  emptyLabel: descriptionEmptyLabel,
140
140
  emptyClassName: styles.emptyDescription,
141
- isEmpty: !hasDescription
142
- }, hasDescription ? /*#__PURE__*/React.createElement(Text, description) : null) : null;
143
- return /*#__PURE__*/React.createElement("div", {
141
+ isEmpty: !hasDescription,
142
+ children: hasDescription ? /*#__PURE__*/jsx(Text, _objectSpread({}, description)) : null
143
+ }, "description") : null;
144
+ return /*#__PURE__*/jsxs("div", {
144
145
  className: classNames([styles.container, className, _defineProperty({}, styles.isPlaceholder, isPlaceholder)]),
145
- "data-screen-ready": true
146
- }, /*#__PURE__*/React.createElement(Container, {
147
- width: width,
148
- height: height,
149
- className: styles.content
150
- }, /*#__PURE__*/React.createElement(Layout, {
151
- className: styles.layout,
152
- fullscreen: true,
153
- verticalAlign: verticalAlign,
154
- style: !isPlaceholder ? {
155
- padding: spacing,
156
- paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing),
157
- paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (hasFooter ? spacing / 2 : spacing)
158
- } : null
159
- }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
160
- style: {
161
- paddingBottom: spacing
162
- }
163
- }, /*#__PURE__*/React.createElement(Header, header)) : null, !isPlaceholder && hasFooter && isMiddleLayout ? /*#__PURE__*/React.createElement(Spacer, {
164
- key: "spacer-cta-top"
165
- }) : null, !isPlaceholder && hasHeader && isBottomLayout ? /*#__PURE__*/React.createElement(Spacer, {
166
- key: "spacer-cta-top"
167
- }) : null, !isPlaceholder && hasHeader && !hasFooter && isMiddleLayout ? /*#__PURE__*/React.createElement(Spacer, {
168
- key: "spacer-cta-top"
169
- }) : null, withBox && !isSplitted ? /*#__PURE__*/React.createElement("div", {
170
- className: styles.box,
171
- style: isEdit || isPlaceholder || hasTitle || hasSubtitle || hasDescription ? getStyleFromBox(boxStyle) : null
172
- }, [titleElement, subtitleElement, descriptionElement]) : null, withBox && isSplitted ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
173
- className: styles.box,
174
- key: "top",
175
- style: isEdit || isPlaceholder || hasTitle || withDescription && verticalAlign === 'top' && hasSubtitle ? getStyleFromBox(boxStyle) : null
176
- }, titleElement, withDescription && verticalAlign === 'top' ? subtitleElement : null), /*#__PURE__*/React.createElement(Spacer, {
177
- key: "spacer1"
178
- }), /*#__PURE__*/React.createElement("div", {
179
- className: styles.box,
180
- key: "bottom",
181
- style: isEdit || isPlaceholder || hasDescription || (!withDescription || verticalAlign === 'bottom') && hasSubtitle ? getStyleFromBox(boxStyle) : null
182
- }, !withDescription || verticalAlign === 'bottom' ? subtitleElement : null, descriptionElement)) : null, !withBox ? /*#__PURE__*/React.createElement(React.Fragment, null, titleElement, isSplitted && (!withDescription || verticalAlign === 'bottom') && /*#__PURE__*/React.createElement(Spacer, {
183
- key: "spacer1"
184
- }), subtitleElement, isSplitted && withDescription && verticalAlign === 'top' && /*#__PURE__*/React.createElement(Spacer, {
185
- key: "spacer2"
186
- }), descriptionElement) : null, !isPlaceholder && hasFooter && (isTopLayout || isMiddleLayout) ? /*#__PURE__*/React.createElement(Spacer, {
187
- key: "spacer-cta-bottom"
188
- }) : null, !isPlaceholder && hasHeader && !hasFooter && isMiddleLayout ? /*#__PURE__*/React.createElement(Spacer, {
189
- key: "spacer-cta-bottom"
190
- }) : null, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
191
- key: "call-to-action",
192
- style: {
193
- paddingTop: spacing,
194
- paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
195
- paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
196
- }
197
- }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
198
- background: background,
199
- width: width,
200
- height: height,
201
- resolution: resolution,
202
- playing: backgroundPlaying,
203
- muted: muted,
204
- shouldLoad: backgroundShouldLoad,
205
- mediaRef: mediaRef,
206
- withoutVideo: isPreview,
207
- className: styles.background
208
- }) : null);
146
+ "data-screen-ready": true,
147
+ children: [/*#__PURE__*/jsx(Container, {
148
+ width: width,
149
+ height: height,
150
+ className: styles.content,
151
+ children: /*#__PURE__*/jsxs(Layout, {
152
+ className: styles.layout,
153
+ fullscreen: true,
154
+ verticalAlign: verticalAlign,
155
+ style: !isPlaceholder ? {
156
+ padding: spacing,
157
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing),
158
+ paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (hasFooter ? spacing / 2 : spacing)
159
+ } : null,
160
+ children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
161
+ style: {
162
+ paddingBottom: spacing
163
+ },
164
+ children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
165
+ }) : null, !isPlaceholder && hasFooter && isMiddleLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null, !isPlaceholder && hasHeader && isBottomLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null, !isPlaceholder && hasHeader && !hasFooter && isMiddleLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null, withBox && !isSplitted ? /*#__PURE__*/jsx("div", {
166
+ className: styles.box,
167
+ style: isEdit || isPlaceholder || hasTitle || hasSubtitle || hasDescription ? getStyleFromBox(boxStyle) : null,
168
+ children: [titleElement, subtitleElement, descriptionElement]
169
+ }) : null, withBox && isSplitted ? /*#__PURE__*/jsxs(Fragment, {
170
+ children: [/*#__PURE__*/jsxs("div", {
171
+ className: styles.box,
172
+ style: isEdit || isPlaceholder || hasTitle || withDescription && verticalAlign === 'top' && hasSubtitle ? getStyleFromBox(boxStyle) : null,
173
+ children: [titleElement, withDescription && verticalAlign === 'top' ? subtitleElement : null]
174
+ }, "top"), /*#__PURE__*/jsx(Spacer, {}, "spacer1"), /*#__PURE__*/jsxs("div", {
175
+ className: styles.box,
176
+ style: isEdit || isPlaceholder || hasDescription || (!withDescription || verticalAlign === 'bottom') && hasSubtitle ? getStyleFromBox(boxStyle) : null,
177
+ children: [!withDescription || verticalAlign === 'bottom' ? subtitleElement : null, descriptionElement]
178
+ }, "bottom")]
179
+ }) : null, !withBox ? /*#__PURE__*/jsxs(Fragment, {
180
+ children: [titleElement, isSplitted && (!withDescription || verticalAlign === 'bottom') && /*#__PURE__*/jsx(Spacer, {}, "spacer1"), subtitleElement, isSplitted && withDescription && verticalAlign === 'top' && /*#__PURE__*/jsx(Spacer, {}, "spacer2"), descriptionElement]
181
+ }) : null, !isPlaceholder && hasFooter && (isTopLayout || isMiddleLayout) ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-bottom") : null, !isPlaceholder && hasHeader && !hasFooter && isMiddleLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-bottom") : null, !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
182
+ style: {
183
+ paddingTop: spacing,
184
+ paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
185
+ paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
186
+ },
187
+ children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
188
+ }, "call-to-action") : null]
189
+ })
190
+ }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
191
+ background: background,
192
+ width: width,
193
+ height: height,
194
+ resolution: resolution,
195
+ playing: backgroundPlaying,
196
+ muted: muted,
197
+ shouldLoad: backgroundShouldLoad,
198
+ mediaRef: mediaRef,
199
+ withoutVideo: isPreview,
200
+ className: styles.background
201
+ }) : null]
202
+ });
209
203
  }
210
204
 
211
205
  function TitleSubtitleScreen(_ref) {
212
206
  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
213
- return /*#__PURE__*/React.createElement(TitleScreen, Object.assign({}, props, {
207
+ return /*#__PURE__*/jsx(TitleScreen, _objectSpread(_objectSpread({}, props), {}, {
214
208
  withSubtitle: true
215
209
  }));
216
210
  }
@@ -220,11 +214,11 @@ function TitleSubtitleCreditsScreen(_ref) {
220
214
  var _ref$credits = _ref.credits,
221
215
  credits = _ref$credits === void 0 ? null : _ref$credits,
222
216
  props = _objectWithoutProperties(_ref, _excluded);
223
- return /*#__PURE__*/React.createElement(TitleScreen, Object.assign({}, props, {
217
+ return /*#__PURE__*/jsx(TitleScreen, _objectSpread(_objectSpread({}, props), {}, {
224
218
  description: credits,
225
219
  withSubtitle: true,
226
220
  withDescription: true,
227
- descriptionEmptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
221
+ descriptionEmptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
228
222
  id: "/hupzO",
229
223
  defaultMessage: [{
230
224
  "type": 0,
@@ -235,7 +229,7 @@ function TitleSubtitleCreditsScreen(_ref) {
235
229
  }
236
230
 
237
231
  function TitleWithBoxScreen(props) {
238
- return /*#__PURE__*/React.createElement(TitleScreen, Object.assign({}, props, {
232
+ return /*#__PURE__*/jsx(TitleScreen, _objectSpread(_objectSpread({}, props), {}, {
239
233
  withSubtitle: true,
240
234
  withDescription: true,
241
235
  withBox: true
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-title",
3
- "version": "0.4.49",
3
+ "version": "0.4.50",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -61,15 +61,15 @@
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-heading": "^0.4.49",
70
- "@micromag/element-layout": "^0.4.49",
71
- "@micromag/element-text": "^0.4.49",
72
- "@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-heading": "^0.4.50",
70
+ "@micromag/element-layout": "^0.4.50",
71
+ "@micromag/element-text": "^0.4.50",
72
+ "@micromag/transforms": "^0.4.50",
73
73
  "classnames": "^2.2.6",
74
74
  "lodash": "^4.17.23",
75
75
  "react-intl": "^8.1.3 || ^10.0.0",
@@ -79,6 +79,6 @@
79
79
  "access": "public",
80
80
  "registry": "https://registry.npmjs.org/"
81
81
  },
82
- "gitHead": "0a225ff29387217cccb0fcc5a731e23c74bd202e",
82
+ "gitHead": "940d5ca98f8f448b79eaa3e2fa685c3ee95185b8",
83
83
  "types": "es/index.d.ts"
84
84
  }