@micromag/screen-article 0.3.403

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 -0
  2. package/es/index.js +458 -0
  3. package/lib/index.js +483 -0
  4. package/package.json +73 -0
package/assets/css/styles.css ADDED
@@ -0,0 +1 @@
1
+ .micromag-screen-article-container .micromag-screen-article-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-article-container .micromag-screen-article-emptyAuthor,.micromag-screen-article-container .micromag-screen-article-emptyDate,.micromag-screen-article-container .micromag-screen-article-emptySurtitle,.micromag-screen-article-container .micromag-screen-article-emptyText,.micromag-screen-article-container .micromag-screen-article-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-article-container{position:relative}.micromag-screen-article-container .micromag-screen-article-background{z-index:0}.micromag-screen-article-container .micromag-screen-article-content{z-index:1}.micromag-screen-article-container .micromag-screen-article-layout{position:relative}.micromag-screen-article-container .micromag-screen-article-emptyAuthor,.micromag-screen-article-container .micromag-screen-article-emptyText,.micromag-screen-article-container .micromag-screen-article-emptyTitle{margin:10px auto;padding:12px 0 10px;width:100%}.micromag-screen-article-container .micromag-screen-article-emptyDate,.micromag-screen-article-container .micromag-screen-article-emptySurtitle{-ms-flex-negative:0;flex-shrink:0;padding:4px 0;width:50%}.micromag-screen-article-container .micromag-screen-article-visualContainer{left:0;position:absolute;top:0;z-index:-1}.micromag-screen-article-container .micromag-screen-article-surtitle{font-size:12px;width:100%}.micromag-screen-article-container .micromag-screen-article-date{font-size:12px;text-align:right;width:100%}.micromag-screen-article-container .micromag-screen-article-title{margin:10px 0}.micromag-screen-article-container .micromag-screen-article-text{margin-top:2.5em}.micromag-screen-article-container .micromag-screen-article-topContent{-ms-flex-pack:justify;display:-ms-flexbox;display:flex;justify-content:space-between}.micromag-screen-article-container .micromag-screen-article-footer{-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.micromag-screen-article-container .micromag-screen-article-footer a{padding:0}.micromag-screen-article-container .micromag-screen-article-footer.micromag-screen-article-disabled{opacity:0;pointer-events:none}.micromag-screen-article-container.micromag-screen-article-isPlaceholder .micromag-screen-article-layout{padding:10px}
package/es/index.js ADDED
@@ -0,0 +1,458 @@
1
+ import { useIntl, FormattedMessage, defineMessage } from 'react-intl';
2
+ import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
+ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
4
+ import classNames from 'classnames';
5
+ import dayjs from 'dayjs';
6
+ import PropTypes from 'prop-types';
7
+ import React, { useMemo, useState, useCallback } from 'react';
8
+ import { PropTypes as PropTypes$1 } from '@micromag/core';
9
+ import { ScreenElement } from '@micromag/core/components';
10
+ import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
11
+ import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
12
+ import { isTextFilled, isHeaderFilled, isFooterFilled, isImageFilled, getFooterProps } from '@micromag/core/utils';
13
+ import Background from '@micromag/element-background';
14
+ import Container from '@micromag/element-container';
15
+ import Footer from '@micromag/element-footer';
16
+ import Header from '@micromag/element-header';
17
+ import Heading from '@micromag/element-heading';
18
+ import Layout from '@micromag/element-layout';
19
+ import Scroll from '@micromag/element-scroll';
20
+ import Text from '@micromag/element-text';
21
+ import Visual from '@micromag/element-visual';
22
+ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
23
+ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
24
+ import { Container as Container$1 } from '@micromag/transforms/apple-news';
25
+
26
+ var styles = {"container":"micromag-screen-article-container","background":"micromag-screen-article-background","emptySurtitle":"micromag-screen-article-emptySurtitle","emptyDate":"micromag-screen-article-emptyDate","emptyTitle":"micromag-screen-article-emptyTitle","emptyAuthor":"micromag-screen-article-emptyAuthor","emptyText":"micromag-screen-article-emptyText","content":"micromag-screen-article-content","layout":"micromag-screen-article-layout","visualContainer":"micromag-screen-article-visualContainer","surtitle":"micromag-screen-article-surtitle","date":"micromag-screen-article-date","title":"micromag-screen-article-title","text":"micromag-screen-article-text","topContent":"micromag-screen-article-topContent","footer":"micromag-screen-article-footer","disabled":"micromag-screen-article-disabled","isPlaceholder":"micromag-screen-article-isPlaceholder"};
27
+
28
+ var propTypes = {
29
+ layout: PropTypes.oneOf(['normal']),
30
+ image: PropTypes$1.visual,
31
+ title: PropTypes$1.title,
32
+ surtitle: PropTypes$1.text,
33
+ date: PropTypes$1.date,
34
+ // author: MicromagPropTypes.author, // potential to integrate more complete author element
35
+ author: PropTypes$1.text,
36
+ text: PropTypes$1.text,
37
+ spacing: PropTypes.number,
38
+ background: PropTypes$1.backgroundElement,
39
+ header: PropTypes$1.header,
40
+ footer: PropTypes$1.footer,
41
+ current: PropTypes.bool,
42
+ active: PropTypes.bool,
43
+ type: PropTypes.string,
44
+ className: PropTypes.string
45
+ };
46
+ var defaultProps = {
47
+ layout: 'normal',
48
+ image: null,
49
+ title: null,
50
+ surtitle: null,
51
+ date: null,
52
+ author: null,
53
+ text: null,
54
+ spacing: 20,
55
+ background: null,
56
+ header: null,
57
+ footer: null,
58
+ current: true,
59
+ active: true,
60
+ type: null,
61
+ className: null
62
+ };
63
+ var ArticleScreen = function ArticleScreen(_ref) {
64
+ var _ref3;
65
+ var image = _ref.image,
66
+ title = _ref.title,
67
+ surtitle = _ref.surtitle,
68
+ date = _ref.date,
69
+ author = _ref.author,
70
+ text = _ref.text,
71
+ spacing = _ref.spacing,
72
+ background = _ref.background,
73
+ header = _ref.header,
74
+ footer = _ref.footer,
75
+ current = _ref.current,
76
+ active = _ref.active,
77
+ type = _ref.type,
78
+ className = _ref.className;
79
+ var intl = useIntl();
80
+ var trackScreenEvent = useTrackScreenEvent(type);
81
+ var _useScreenSize = useScreenSize(),
82
+ width = _useScreenSize.width,
83
+ height = _useScreenSize.height,
84
+ resolution = _useScreenSize.resolution;
85
+ var _useViewerContext = useViewerContext(),
86
+ viewerTopHeight = _useViewerContext.topHeight,
87
+ viewerBottomHeight = _useViewerContext.bottomHeight,
88
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
89
+ var _useViewerWebView = useViewerWebView(),
90
+ openWebView = _useViewerWebView.open;
91
+ var _usePlaybackContext = usePlaybackContext(),
92
+ muted = _usePlaybackContext.muted;
93
+ var mediaRef = usePlaybackMediaRef(current);
94
+ var _useDimensionObserver = useDimensionObserver(),
95
+ imageCntRef = _useDimensionObserver.ref,
96
+ imageHeight = _useDimensionObserver.height;
97
+ var _useScreenRenderConte = useScreenRenderContext(),
98
+ isView = _useScreenRenderConte.isView,
99
+ isPreview = _useScreenRenderConte.isPreview,
100
+ isPlaceholder = _useScreenRenderConte.isPlaceholder,
101
+ isEdit = _useScreenRenderConte.isEdit,
102
+ isStatic = _useScreenRenderConte.isStatic,
103
+ isCapture = _useScreenRenderConte.isCapture;
104
+ var backgroundPlaying = current && (isView || isEdit);
105
+ var mediaShouldLoad = current || active;
106
+ var ready = true;
107
+ var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
108
+ var scrollingDisabled = !isEdit && transitionDisabled || !current;
109
+ var hasText = isTextFilled(text);
110
+ var hasHeader = isHeaderFilled(header);
111
+ var hasFooter = isFooterFilled(footer);
112
+ var hasTitle = isTextFilled(title);
113
+ var hasSurtitle = isTextFilled(surtitle);
114
+ var hasAuthor = isTextFilled(author);
115
+ var hasImage = isImageFilled(image);
116
+ var hasDate = isTextFilled(date);
117
+ // const hasDate = date !== null && date.length > 0;
118
+ var footerProps = getFooterProps(footer, {
119
+ isView: isView,
120
+ current: current,
121
+ openWebView: openWebView,
122
+ isPreview: isPreview
123
+ });
124
+ var partialDate = hasDate ? date.body || null : null;
125
+ var finalDate = useMemo(function () {
126
+ return partialDate !== null ? intl.formatDate(dayjs(partialDate).toDate(), {
127
+ year: 'numeric',
128
+ month: 'long',
129
+ day: '2-digit'
130
+ }) : null;
131
+ }, [partialDate]);
132
+ var imageElement = /*#__PURE__*/React.createElement(ScreenElement, {
133
+ placeholder: "image",
134
+ emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
135
+ id: "ebsPd4",
136
+ defaultMessage: [{
137
+ "type": 0,
138
+ "value": "Image"
139
+ }]
140
+ }),
141
+ emptyClassName: styles.emptyText,
142
+ isEmpty: !hasImage
143
+ }, /*#__PURE__*/React.createElement("div", {
144
+ ref: imageCntRef,
145
+ className: styles.visualContainer
146
+ }, hasImage ? /*#__PURE__*/React.createElement(Visual, {
147
+ media: image
148
+ // width={width - spacing * 2} // in layout flow
149
+ ,
150
+ width: width,
151
+ height: "100%",
152
+ resolution: resolution,
153
+ className: styles.visual
154
+ }) : null));
155
+ var titleElement = /*#__PURE__*/React.createElement(ScreenElement, {
156
+ key: "title",
157
+ placeholder: "title",
158
+ emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
159
+ id: "2ZOPe+",
160
+ defaultMessage: [{
161
+ "type": 0,
162
+ "value": "Title"
163
+ }]
164
+ }),
165
+ emptyClassName: styles.emptyTitle,
166
+ isEmpty: !hasTitle
167
+ }, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
168
+ className: styles.title
169
+ }, title)) : null);
170
+ var surtitleElement = /*#__PURE__*/React.createElement(ScreenElement, {
171
+ key: "surtitle",
172
+ placeholder: "line",
173
+ emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
174
+ id: "vdWMTA",
175
+ defaultMessage: [{
176
+ "type": 0,
177
+ "value": "Surtitle"
178
+ }]
179
+ }),
180
+ emptyClassName: styles.emptySurtitle,
181
+ isEmpty: !hasSurtitle
182
+ }, hasSurtitle ? /*#__PURE__*/React.createElement(Text, Object.assign({
183
+ className: styles.surtitle
184
+ }, surtitle)) : null);
185
+ var dateElement = /*#__PURE__*/React.createElement(ScreenElement, {
186
+ key: "date",
187
+ placeholder: "line",
188
+ emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
189
+ id: "/MsgWe",
190
+ defaultMessage: [{
191
+ "type": 0,
192
+ "value": "Date"
193
+ }]
194
+ }),
195
+ emptyClassName: styles.emptyDate,
196
+ isEmpty: !hasDate
197
+ }, hasDate ? /*#__PURE__*/React.createElement(Text, Object.assign({
198
+ className: styles.date
199
+ }, date, {
200
+ body: finalDate
201
+ })) : null);
202
+ var authorElement = /*#__PURE__*/React.createElement(ScreenElement, {
203
+ key: "author",
204
+ placeholder: "line",
205
+ emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
206
+ id: "xYqGzM",
207
+ defaultMessage: [{
208
+ "type": 0,
209
+ "value": "Author"
210
+ }]
211
+ }),
212
+ emptyClassName: styles.emptyAuthor,
213
+ isEmpty: !hasAuthor
214
+ }, hasAuthor ? /*#__PURE__*/React.createElement(Text, Object.assign({
215
+ className: styles.author
216
+ }, author)) : null);
217
+ var contentElement = /*#__PURE__*/React.createElement(ScreenElement, {
218
+ placeholder: "text",
219
+ emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
220
+ id: "z4CiV1",
221
+ defaultMessage: [{
222
+ "type": 0,
223
+ "value": "Text"
224
+ }]
225
+ }),
226
+ emptyClassName: styles.emptyText,
227
+ isEmpty: !hasText
228
+ }, hasText ? /*#__PURE__*/React.createElement(Text, Object.assign({
229
+ className: styles.text
230
+ }, text)) : null);
231
+ var _useState = useState(false),
232
+ _useState2 = _slicedToArray(_useState, 2),
233
+ scrolledBottom = _useState2[0],
234
+ setScrolledBottom = _useState2[1];
235
+ var onScrolledBottom = useCallback(function (_ref2) {
236
+ var initial = _ref2.initial;
237
+ if (initial) {
238
+ trackScreenEvent('scroll', 'Screen');
239
+ }
240
+ setScrolledBottom(true);
241
+ }, [trackScreenEvent]);
242
+ var onScrolledNotBottom = useCallback(function () {
243
+ setScrolledBottom(false);
244
+ }, [setScrolledBottom]);
245
+ return /*#__PURE__*/React.createElement("div", {
246
+ className: classNames([styles.container, (_ref3 = {}, _defineProperty(_ref3, className, className !== null), _defineProperty(_ref3, styles.isPlaceholder, isPlaceholder), _ref3)]),
247
+ "data-screen-ready": ready
248
+ }, /*#__PURE__*/React.createElement(Container, {
249
+ width: width,
250
+ height: height,
251
+ className: styles.content
252
+ }, /*#__PURE__*/React.createElement(Scroll, {
253
+ disabled: scrollingDisabled,
254
+ onScrolledBottom: onScrolledBottom,
255
+ onScrolledNotBottom: onScrolledNotBottom
256
+ }, /*#__PURE__*/React.createElement(Layout, {
257
+ className: styles.layout,
258
+ style: !isPlaceholder ? {
259
+ padding: spacing,
260
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing / 2 + imageHeight),
261
+ paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing / 2
262
+ } : null
263
+ }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
264
+ key: "header",
265
+ style: {
266
+ height: hasImage && imageHeight > 0 ? 0 : 'auto',
267
+ paddingBottom: imageHeight > 0 ? imageHeight : spacing
268
+ }
269
+ }, /*#__PURE__*/React.createElement(Header, header)) : null, imageElement, /*#__PURE__*/React.createElement("div", {
270
+ className: styles.topContent
271
+ }, surtitleElement, dateElement), titleElement, authorElement, contentElement, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
272
+ className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom)]),
273
+ style: {
274
+ paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
275
+ paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
276
+ paddingTop: spacing
277
+ }
278
+ }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null))), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
279
+ background: background,
280
+ width: width,
281
+ height: height,
282
+ resolution: resolution,
283
+ playing: backgroundPlaying,
284
+ muted: muted,
285
+ shouldLoad: mediaShouldLoad,
286
+ mediaRef: mediaRef,
287
+ withoutVideo: isPreview,
288
+ className: styles.background
289
+ }) : null);
290
+ };
291
+ ArticleScreen.propTypes = propTypes;
292
+ ArticleScreen.defaultProps = defaultProps;
293
+ var ArticleScreen$1 = /*#__PURE__*/React.memo(ArticleScreen);
294
+
295
+ var transform = function transform(newStory, _ref) {
296
+ var body = _ref.body;
297
+ var bodyComponent = body;
298
+ var _Container = Container$1(null, _toConsumableArray(bodyComponent ? [bodyComponent] : [])),
299
+ containerStory = _Container.story,
300
+ containerComponent = _Container.component;
301
+ return _objectSpread(_objectSpread({}, containerStory), {}, {
302
+ components: [].concat(_toConsumableArray(newStory.components || []), _toConsumableArray(containerComponent ? [containerComponent] : []))
303
+ });
304
+ };
305
+
306
+ // eslint-disable-next-line
307
+
308
+ var transforms = /*#__PURE__*/Object.freeze({
309
+ __proto__: null,
310
+ appleNews: transform
311
+ });
312
+
313
+ var definition = [{
314
+ id: 'article',
315
+ type: 'screen',
316
+ group: {
317
+ label: defineMessage({
318
+ id: "fIawTr",
319
+ defaultMessage: [{
320
+ "type": 0,
321
+ "value": "Text"
322
+ }]
323
+ }),
324
+ order: 2
325
+ },
326
+ title: defineMessage({
327
+ id: "ouMwWq",
328
+ defaultMessage: [{
329
+ "type": 0,
330
+ "value": "Article"
331
+ }]
332
+ }),
333
+ component: ArticleScreen$1,
334
+ layouts: ['normal'],
335
+ transforms: transforms,
336
+ fields: [{
337
+ name: 'image',
338
+ type: 'visual',
339
+ label: defineMessage({
340
+ id: "xsipID",
341
+ defaultMessage: [{
342
+ "type": 0,
343
+ "value": "Image"
344
+ }]
345
+ })
346
+ }, {
347
+ name: 'title',
348
+ type: 'heading-element',
349
+ inline: true,
350
+ theme: {
351
+ textStyle: 'heading2'
352
+ },
353
+ label: defineMessage({
354
+ id: "N25iDO",
355
+ defaultMessage: [{
356
+ "type": 0,
357
+ "value": "Title"
358
+ }]
359
+ })
360
+ }, {
361
+ name: 'surtitle',
362
+ type: 'text-element',
363
+ label: defineMessage({
364
+ id: "YD9M2p",
365
+ defaultMessage: [{
366
+ "type": 0,
367
+ "value": "Overtitle"
368
+ }]
369
+ })
370
+ }, {
371
+ name: 'date',
372
+ type: 'date-element',
373
+ label: defineMessage({
374
+ id: "9AP246",
375
+ defaultMessage: [{
376
+ "type": 0,
377
+ "value": "Date"
378
+ }]
379
+ })
380
+ },
381
+ // {
382
+ // name: 'author',
383
+ // type: 'author-element',
384
+ // label: defineMessage({
385
+ // defaultMessage: 'Author',
386
+ // description: 'Author field label',
387
+ // }),
388
+ // },
389
+ {
390
+ name: 'author',
391
+ type: 'text-element',
392
+ label: defineMessage({
393
+ id: "73hxYw",
394
+ defaultMessage: [{
395
+ "type": 0,
396
+ "value": "Author"
397
+ }]
398
+ })
399
+ }, {
400
+ name: 'text',
401
+ type: 'text-modal',
402
+ label: defineMessage({
403
+ id: "4E2gbX",
404
+ defaultMessage: [{
405
+ "type": 0,
406
+ "value": "Text"
407
+ }]
408
+ })
409
+ }, {
410
+ name: 'background',
411
+ type: 'background',
412
+ label: defineMessage({
413
+ id: "+MPZRu",
414
+ defaultMessage: [{
415
+ "type": 0,
416
+ "value": "Background"
417
+ }]
418
+ })
419
+ }, {
420
+ name: 'header',
421
+ type: 'header',
422
+ label: defineMessage({
423
+ id: "rhuDxI",
424
+ defaultMessage: [{
425
+ "type": 0,
426
+ "value": "Header"
427
+ }]
428
+ }),
429
+ theme: {
430
+ badge: {
431
+ label: {
432
+ textStyle: 'badge'
433
+ },
434
+ boxStyle: 'badge'
435
+ }
436
+ }
437
+ }, {
438
+ name: 'footer',
439
+ type: 'footer',
440
+ label: defineMessage({
441
+ id: "g4nybp",
442
+ defaultMessage: [{
443
+ "type": 0,
444
+ "value": "Footer"
445
+ }]
446
+ }),
447
+ theme: {
448
+ callToAction: {
449
+ label: {
450
+ textStyle: 'cta'
451
+ },
452
+ boxStyle: 'cta'
453
+ }
454
+ }
455
+ }]
456
+ }];
457
+
458
+ export { ArticleScreen$1 as ArticleScreen, definition as default };
package/lib/index.js ADDED
@@ -0,0 +1,483 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var reactIntl = require('react-intl');
6
+ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
7
+ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
8
+ var classNames = require('classnames');
9
+ var dayjs = require('dayjs');
10
+ var PropTypes = require('prop-types');
11
+ var React = require('react');
12
+ var core = require('@micromag/core');
13
+ var components = require('@micromag/core/components');
14
+ var contexts = require('@micromag/core/contexts');
15
+ var hooks = require('@micromag/core/hooks');
16
+ var utils = require('@micromag/core/utils');
17
+ var Background = require('@micromag/element-background');
18
+ var Container = require('@micromag/element-container');
19
+ var Footer = require('@micromag/element-footer');
20
+ var Header = require('@micromag/element-header');
21
+ var Heading = require('@micromag/element-heading');
22
+ var Layout = require('@micromag/element-layout');
23
+ var Scroll = require('@micromag/element-scroll');
24
+ var Text = require('@micromag/element-text');
25
+ var Visual = require('@micromag/element-visual');
26
+ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
27
+ var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
28
+ var appleNews = require('@micromag/transforms/apple-news');
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 dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
36
+ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
37
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
38
+ var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
39
+ var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
40
+ var Footer__default = /*#__PURE__*/_interopDefaultLegacy(Footer);
41
+ var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
42
+ var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
43
+ var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
44
+ var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
45
+ var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
46
+ var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
47
+ var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
48
+ var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
49
+
50
+ var styles = {"container":"micromag-screen-article-container","background":"micromag-screen-article-background","emptySurtitle":"micromag-screen-article-emptySurtitle","emptyDate":"micromag-screen-article-emptyDate","emptyTitle":"micromag-screen-article-emptyTitle","emptyAuthor":"micromag-screen-article-emptyAuthor","emptyText":"micromag-screen-article-emptyText","content":"micromag-screen-article-content","layout":"micromag-screen-article-layout","visualContainer":"micromag-screen-article-visualContainer","surtitle":"micromag-screen-article-surtitle","date":"micromag-screen-article-date","title":"micromag-screen-article-title","text":"micromag-screen-article-text","topContent":"micromag-screen-article-topContent","footer":"micromag-screen-article-footer","disabled":"micromag-screen-article-disabled","isPlaceholder":"micromag-screen-article-isPlaceholder"};
51
+
52
+ var propTypes = {
53
+ layout: PropTypes__default["default"].oneOf(['normal']),
54
+ image: core.PropTypes.visual,
55
+ title: core.PropTypes.title,
56
+ surtitle: core.PropTypes.text,
57
+ date: core.PropTypes.date,
58
+ // author: MicromagPropTypes.author, // potential to integrate more complete author element
59
+ author: core.PropTypes.text,
60
+ text: core.PropTypes.text,
61
+ spacing: PropTypes__default["default"].number,
62
+ background: core.PropTypes.backgroundElement,
63
+ header: core.PropTypes.header,
64
+ footer: core.PropTypes.footer,
65
+ current: PropTypes__default["default"].bool,
66
+ active: PropTypes__default["default"].bool,
67
+ type: PropTypes__default["default"].string,
68
+ className: PropTypes__default["default"].string
69
+ };
70
+ var defaultProps = {
71
+ layout: 'normal',
72
+ image: null,
73
+ title: null,
74
+ surtitle: null,
75
+ date: null,
76
+ author: null,
77
+ text: null,
78
+ spacing: 20,
79
+ background: null,
80
+ header: null,
81
+ footer: null,
82
+ current: true,
83
+ active: true,
84
+ type: null,
85
+ className: null
86
+ };
87
+ var ArticleScreen = function ArticleScreen(_ref) {
88
+ var _ref3;
89
+ var image = _ref.image,
90
+ title = _ref.title,
91
+ surtitle = _ref.surtitle,
92
+ date = _ref.date,
93
+ author = _ref.author,
94
+ text = _ref.text,
95
+ spacing = _ref.spacing,
96
+ background = _ref.background,
97
+ header = _ref.header,
98
+ footer = _ref.footer,
99
+ current = _ref.current,
100
+ active = _ref.active,
101
+ type = _ref.type,
102
+ className = _ref.className;
103
+ var intl = reactIntl.useIntl();
104
+ var trackScreenEvent = hooks.useTrackScreenEvent(type);
105
+ var _useScreenSize = contexts.useScreenSize(),
106
+ width = _useScreenSize.width,
107
+ height = _useScreenSize.height,
108
+ resolution = _useScreenSize.resolution;
109
+ var _useViewerContext = contexts.useViewerContext(),
110
+ viewerTopHeight = _useViewerContext.topHeight,
111
+ viewerBottomHeight = _useViewerContext.bottomHeight,
112
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
113
+ var _useViewerWebView = contexts.useViewerWebView(),
114
+ openWebView = _useViewerWebView.open;
115
+ var _usePlaybackContext = contexts.usePlaybackContext(),
116
+ muted = _usePlaybackContext.muted;
117
+ var mediaRef = contexts.usePlaybackMediaRef(current);
118
+ var _useDimensionObserver = hooks.useDimensionObserver(),
119
+ imageCntRef = _useDimensionObserver.ref,
120
+ imageHeight = _useDimensionObserver.height;
121
+ var _useScreenRenderConte = contexts.useScreenRenderContext(),
122
+ isView = _useScreenRenderConte.isView,
123
+ isPreview = _useScreenRenderConte.isPreview,
124
+ isPlaceholder = _useScreenRenderConte.isPlaceholder,
125
+ isEdit = _useScreenRenderConte.isEdit,
126
+ isStatic = _useScreenRenderConte.isStatic,
127
+ isCapture = _useScreenRenderConte.isCapture;
128
+ var backgroundPlaying = current && (isView || isEdit);
129
+ var mediaShouldLoad = current || active;
130
+ var ready = true;
131
+ var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
132
+ var scrollingDisabled = !isEdit && transitionDisabled || !current;
133
+ var hasText = utils.isTextFilled(text);
134
+ var hasHeader = utils.isHeaderFilled(header);
135
+ var hasFooter = utils.isFooterFilled(footer);
136
+ var hasTitle = utils.isTextFilled(title);
137
+ var hasSurtitle = utils.isTextFilled(surtitle);
138
+ var hasAuthor = utils.isTextFilled(author);
139
+ var hasImage = utils.isImageFilled(image);
140
+ var hasDate = utils.isTextFilled(date);
141
+ // const hasDate = date !== null && date.length > 0;
142
+ var footerProps = utils.getFooterProps(footer, {
143
+ isView: isView,
144
+ current: current,
145
+ openWebView: openWebView,
146
+ isPreview: isPreview
147
+ });
148
+ var partialDate = hasDate ? date.body || null : null;
149
+ var finalDate = React.useMemo(function () {
150
+ return partialDate !== null ? intl.formatDate(dayjs__default["default"](partialDate).toDate(), {
151
+ year: 'numeric',
152
+ month: 'long',
153
+ day: '2-digit'
154
+ }) : null;
155
+ }, [partialDate]);
156
+ var imageElement = /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
157
+ placeholder: "image",
158
+ emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
159
+ id: "ebsPd4",
160
+ defaultMessage: [{
161
+ "type": 0,
162
+ "value": "Image"
163
+ }]
164
+ }),
165
+ emptyClassName: styles.emptyText,
166
+ isEmpty: !hasImage
167
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
168
+ ref: imageCntRef,
169
+ className: styles.visualContainer
170
+ }, hasImage ? /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
171
+ media: image
172
+ // width={width - spacing * 2} // in layout flow
173
+ ,
174
+ width: width,
175
+ height: "100%",
176
+ resolution: resolution,
177
+ className: styles.visual
178
+ }) : null));
179
+ var titleElement = /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
180
+ key: "title",
181
+ placeholder: "title",
182
+ emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
183
+ id: "2ZOPe+",
184
+ defaultMessage: [{
185
+ "type": 0,
186
+ "value": "Title"
187
+ }]
188
+ }),
189
+ emptyClassName: styles.emptyTitle,
190
+ isEmpty: !hasTitle
191
+ }, hasTitle ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
192
+ className: styles.title
193
+ }, title)) : null);
194
+ var surtitleElement = /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
195
+ key: "surtitle",
196
+ placeholder: "line",
197
+ emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
198
+ id: "vdWMTA",
199
+ defaultMessage: [{
200
+ "type": 0,
201
+ "value": "Surtitle"
202
+ }]
203
+ }),
204
+ emptyClassName: styles.emptySurtitle,
205
+ isEmpty: !hasSurtitle
206
+ }, hasSurtitle ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
207
+ className: styles.surtitle
208
+ }, surtitle)) : null);
209
+ var dateElement = /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
210
+ key: "date",
211
+ placeholder: "line",
212
+ emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
213
+ id: "/MsgWe",
214
+ defaultMessage: [{
215
+ "type": 0,
216
+ "value": "Date"
217
+ }]
218
+ }),
219
+ emptyClassName: styles.emptyDate,
220
+ isEmpty: !hasDate
221
+ }, hasDate ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
222
+ className: styles.date
223
+ }, date, {
224
+ body: finalDate
225
+ })) : null);
226
+ var authorElement = /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
227
+ key: "author",
228
+ placeholder: "line",
229
+ emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
230
+ id: "xYqGzM",
231
+ defaultMessage: [{
232
+ "type": 0,
233
+ "value": "Author"
234
+ }]
235
+ }),
236
+ emptyClassName: styles.emptyAuthor,
237
+ isEmpty: !hasAuthor
238
+ }, hasAuthor ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
239
+ className: styles.author
240
+ }, author)) : null);
241
+ var contentElement = /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
242
+ placeholder: "text",
243
+ emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
244
+ id: "z4CiV1",
245
+ defaultMessage: [{
246
+ "type": 0,
247
+ "value": "Text"
248
+ }]
249
+ }),
250
+ emptyClassName: styles.emptyText,
251
+ isEmpty: !hasText
252
+ }, hasText ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
253
+ className: styles.text
254
+ }, text)) : null);
255
+ var _useState = React.useState(false),
256
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
257
+ scrolledBottom = _useState2[0],
258
+ setScrolledBottom = _useState2[1];
259
+ var onScrolledBottom = React.useCallback(function (_ref2) {
260
+ var initial = _ref2.initial;
261
+ if (initial) {
262
+ trackScreenEvent('scroll', 'Screen');
263
+ }
264
+ setScrolledBottom(true);
265
+ }, [trackScreenEvent]);
266
+ var onScrolledNotBottom = React.useCallback(function () {
267
+ setScrolledBottom(false);
268
+ }, [setScrolledBottom]);
269
+ return /*#__PURE__*/React__default["default"].createElement("div", {
270
+ className: classNames__default["default"]([styles.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className !== null), _defineProperty__default["default"](_ref3, styles.isPlaceholder, isPlaceholder), _ref3)]),
271
+ "data-screen-ready": ready
272
+ }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
273
+ width: width,
274
+ height: height,
275
+ className: styles.content
276
+ }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
277
+ disabled: scrollingDisabled,
278
+ onScrolledBottom: onScrolledBottom,
279
+ onScrolledNotBottom: onScrolledNotBottom
280
+ }, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
281
+ className: styles.layout,
282
+ style: !isPlaceholder ? {
283
+ padding: spacing,
284
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing / 2 + imageHeight),
285
+ paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing / 2
286
+ } : null
287
+ }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
288
+ key: "header",
289
+ style: {
290
+ height: hasImage && imageHeight > 0 ? 0 : 'auto',
291
+ paddingBottom: imageHeight > 0 ? imageHeight : spacing
292
+ }
293
+ }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, imageElement, /*#__PURE__*/React__default["default"].createElement("div", {
294
+ className: styles.topContent
295
+ }, surtitleElement, dateElement), titleElement, authorElement, contentElement, !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
296
+ className: classNames__default["default"]([styles.footer, _defineProperty__default["default"]({}, styles.disabled, !scrolledBottom)]),
297
+ style: {
298
+ paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
299
+ paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
300
+ paddingTop: spacing
301
+ }
302
+ }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null))), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
303
+ background: background,
304
+ width: width,
305
+ height: height,
306
+ resolution: resolution,
307
+ playing: backgroundPlaying,
308
+ muted: muted,
309
+ shouldLoad: mediaShouldLoad,
310
+ mediaRef: mediaRef,
311
+ withoutVideo: isPreview,
312
+ className: styles.background
313
+ }) : null);
314
+ };
315
+ ArticleScreen.propTypes = propTypes;
316
+ ArticleScreen.defaultProps = defaultProps;
317
+ var ArticleScreen$1 = /*#__PURE__*/React__default["default"].memo(ArticleScreen);
318
+
319
+ var transform = function transform(newStory, _ref) {
320
+ var body = _ref.body;
321
+ var bodyComponent = body;
322
+ var _Container = appleNews.Container(null, _toConsumableArray__default["default"](bodyComponent ? [bodyComponent] : [])),
323
+ containerStory = _Container.story,
324
+ containerComponent = _Container.component;
325
+ return _objectSpread__default["default"](_objectSpread__default["default"]({}, containerStory), {}, {
326
+ components: [].concat(_toConsumableArray__default["default"](newStory.components || []), _toConsumableArray__default["default"](containerComponent ? [containerComponent] : []))
327
+ });
328
+ };
329
+
330
+ // eslint-disable-next-line
331
+
332
+ var transforms = /*#__PURE__*/Object.freeze({
333
+ __proto__: null,
334
+ appleNews: transform
335
+ });
336
+
337
+ var definition = [{
338
+ id: 'article',
339
+ type: 'screen',
340
+ group: {
341
+ label: reactIntl.defineMessage({
342
+ id: "fIawTr",
343
+ defaultMessage: [{
344
+ "type": 0,
345
+ "value": "Text"
346
+ }]
347
+ }),
348
+ order: 2
349
+ },
350
+ title: reactIntl.defineMessage({
351
+ id: "ouMwWq",
352
+ defaultMessage: [{
353
+ "type": 0,
354
+ "value": "Article"
355
+ }]
356
+ }),
357
+ component: ArticleScreen$1,
358
+ layouts: ['normal'],
359
+ transforms: transforms,
360
+ fields: [{
361
+ name: 'image',
362
+ type: 'visual',
363
+ label: reactIntl.defineMessage({
364
+ id: "xsipID",
365
+ defaultMessage: [{
366
+ "type": 0,
367
+ "value": "Image"
368
+ }]
369
+ })
370
+ }, {
371
+ name: 'title',
372
+ type: 'heading-element',
373
+ inline: true,
374
+ theme: {
375
+ textStyle: 'heading2'
376
+ },
377
+ label: reactIntl.defineMessage({
378
+ id: "N25iDO",
379
+ defaultMessage: [{
380
+ "type": 0,
381
+ "value": "Title"
382
+ }]
383
+ })
384
+ }, {
385
+ name: 'surtitle',
386
+ type: 'text-element',
387
+ label: reactIntl.defineMessage({
388
+ id: "YD9M2p",
389
+ defaultMessage: [{
390
+ "type": 0,
391
+ "value": "Overtitle"
392
+ }]
393
+ })
394
+ }, {
395
+ name: 'date',
396
+ type: 'date-element',
397
+ label: reactIntl.defineMessage({
398
+ id: "9AP246",
399
+ defaultMessage: [{
400
+ "type": 0,
401
+ "value": "Date"
402
+ }]
403
+ })
404
+ },
405
+ // {
406
+ // name: 'author',
407
+ // type: 'author-element',
408
+ // label: defineMessage({
409
+ // defaultMessage: 'Author',
410
+ // description: 'Author field label',
411
+ // }),
412
+ // },
413
+ {
414
+ name: 'author',
415
+ type: 'text-element',
416
+ label: reactIntl.defineMessage({
417
+ id: "73hxYw",
418
+ defaultMessage: [{
419
+ "type": 0,
420
+ "value": "Author"
421
+ }]
422
+ })
423
+ }, {
424
+ name: 'text',
425
+ type: 'text-modal',
426
+ label: reactIntl.defineMessage({
427
+ id: "4E2gbX",
428
+ defaultMessage: [{
429
+ "type": 0,
430
+ "value": "Text"
431
+ }]
432
+ })
433
+ }, {
434
+ name: 'background',
435
+ type: 'background',
436
+ label: reactIntl.defineMessage({
437
+ id: "+MPZRu",
438
+ defaultMessage: [{
439
+ "type": 0,
440
+ "value": "Background"
441
+ }]
442
+ })
443
+ }, {
444
+ name: 'header',
445
+ type: 'header',
446
+ label: reactIntl.defineMessage({
447
+ id: "rhuDxI",
448
+ defaultMessage: [{
449
+ "type": 0,
450
+ "value": "Header"
451
+ }]
452
+ }),
453
+ theme: {
454
+ badge: {
455
+ label: {
456
+ textStyle: 'badge'
457
+ },
458
+ boxStyle: 'badge'
459
+ }
460
+ }
461
+ }, {
462
+ name: 'footer',
463
+ type: 'footer',
464
+ label: reactIntl.defineMessage({
465
+ id: "g4nybp",
466
+ defaultMessage: [{
467
+ "type": 0,
468
+ "value": "Footer"
469
+ }]
470
+ }),
471
+ theme: {
472
+ callToAction: {
473
+ label: {
474
+ textStyle: 'cta'
475
+ },
476
+ boxStyle: 'cta'
477
+ }
478
+ }
479
+ }]
480
+ }];
481
+
482
+ exports.ArticleScreen = ArticleScreen$1;
483
+ exports["default"] = definition;
package/package.json ADDED
@@ -0,0 +1,73 @@
1
+ {
2
+ "name": "@micromag/screen-article",
3
+ "version": "0.3.403",
4
+ "private": false,
5
+ "description": "",
6
+ "keywords": [
7
+ "javascript"
8
+ ],
9
+ "homepage": "https://github.com/urbania-media/micromag-js",
10
+ "repository": {
11
+ "type": "git",
12
+ "url": "git+https://github.com/urbania-media/micromag-js.git"
13
+ },
14
+ "author": {
15
+ "name": "Folklore",
16
+ "email": "info@folklore.email"
17
+ },
18
+ "contributors": [
19
+ {
20
+ "name": "David Mongeau-Petitpas",
21
+ "email": "dmp@folklore.email"
22
+ },
23
+ {
24
+ "name": "Nicolas Roy-Bourdages",
25
+ "email": "nrb@folklore.email"
26
+ }
27
+ ],
28
+ "license": "ISC",
29
+ "main": "lib/index.js",
30
+ "module": "es/index.js",
31
+ "files": [
32
+ "lib",
33
+ "es",
34
+ "assets"
35
+ ],
36
+ "scripts": {
37
+ "prepare": "../../scripts/prepare-package.sh"
38
+ },
39
+ "devDependencies": {
40
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
41
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
42
+ },
43
+ "peerDependencies": {
44
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
45
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
46
+ },
47
+ "dependencies": {
48
+ "@babel/runtime": "^7.13.10",
49
+ "@micromag/core": "^0.3.403",
50
+ "@micromag/element-background": "^0.3.403",
51
+ "@micromag/element-container": "^0.3.403",
52
+ "@micromag/element-footer": "^0.3.403",
53
+ "@micromag/element-header": "^0.3.403",
54
+ "@micromag/element-heading": "^0.3.403",
55
+ "@micromag/element-layout": "^0.3.403",
56
+ "@micromag/element-scroll": "^0.3.403",
57
+ "@micromag/element-stack": "^0.3.403",
58
+ "@micromag/element-text": "^0.3.403",
59
+ "@micromag/element-visual": "^0.3.403",
60
+ "@micromag/transforms": "^0.3.403",
61
+ "classnames": "^2.2.6",
62
+ "dayjs": "^1.11.10",
63
+ "lodash": "^4.17.21",
64
+ "prop-types": "^15.7.2",
65
+ "react-intl": "^5.12.1",
66
+ "uuid": "^9.0.0"
67
+ },
68
+ "publishConfig": {
69
+ "access": "public",
70
+ "registry": "https://registry.npmjs.org/"
71
+ },
72
+ "gitHead": "3179202a6bd721978ed10d9282b904045770189b"
73
+ }