@micromag/screen-share 0.3.353 → 0.3.354

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +82 -53
  3. package/lib/index.js +82 -52
  4. package/package.json +12 -11
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-share-container .micromag-screen-share-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-share-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-share-disabled.micromag-screen-share-container{overflow:hidden;pointer-events:none}.micromag-screen-share-hidden.micromag-screen-share-container{display:none;visibility:hidden}.micromag-screen-share-placeholder.micromag-screen-share-container .micromag-screen-share-content{padding:6px;position:relative}.micromag-screen-share-emptyHeading,.micromag-screen-share-emptyOptions{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-share-container .micromag-screen-share-background{z-index:0}.micromag-screen-share-container .micromag-screen-share-content{z-index:1}.micromag-screen-share-layout{overflow-x:hidden;overflow-y:auto;padding:10px}.micromag-screen-share-shareOptions{margin-top:10px}.micromag-screen-share-shareOptions.micromag-screen-share-isCentered{-ms-flex-pack:center;justify-content:center}.micromag-screen-share-shareButton{display:-ms-flexbox;display:flex;width:100%}.micromag-screen-share-emptyHeading,.micromag-screen-share-emptyOptions{margin:10px auto;padding:10px;width:100%}.micromag-screen-share-emptyOptions{padding:40px}
1
+ .micromag-screen-share-container .micromag-screen-share-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-share-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-share-disabled.micromag-screen-share-container{overflow:hidden;pointer-events:none}.micromag-screen-share-hidden.micromag-screen-share-container{display:none;visibility:hidden}.micromag-screen-share-placeholder.micromag-screen-share-container .micromag-screen-share-content{padding:6px;position:relative}.micromag-screen-share-emptyHeading,.micromag-screen-share-emptyOptions{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-share-container .micromag-screen-share-background{z-index:0}.micromag-screen-share-container .micromag-screen-share-content{z-index:1}.micromag-screen-share-layout{overflow-x:hidden;overflow-y:auto;padding:10px}.micromag-screen-share-shareOptions{margin-top:10px}.micromag-screen-share-shareOptions.micromag-screen-share-isCentered{-ms-flex-pack:center;justify-content:center}.micromag-screen-share-shareButton{display:-ms-flexbox;display:flex;width:100%}.micromag-screen-share-emptyHeading,.micromag-screen-share-emptyOptions{margin:10px auto;padding:10px;width:100%}.micromag-screen-share-emptyOptions{padding:40px}.micromag-screen-share-header{left:0;margin-top:0;position:absolute;top:0;width:100%;z-index:1}.micromag-screen-share-footer{bottom:0;left:0;margin-top:0;position:absolute;width:100%}
package/es/index.js CHANGED
@@ -5,19 +5,21 @@ import classNames from 'classnames';
5
5
  import PropTypes from 'prop-types';
6
6
  import React, { useMemo, useCallback } from 'react';
7
7
  import { PropTypes as PropTypes$1 } from '@micromag/core';
8
- import { ScreenElement, TransitionsStagger } from '@micromag/core/components';
8
+ import { ScreenElement } from '@micromag/core/components';
9
9
  import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
10
- import { useTrackScreenEvent } from '@micromag/core/hooks';
10
+ import { useDimensionObserver, useTrackScreenEvent } from '@micromag/core/hooks';
11
+ import { isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
11
12
  import Background from '@micromag/element-background';
12
- import CallToAction from '@micromag/element-call-to-action';
13
13
  import Container from '@micromag/element-container';
14
+ import Footer from '@micromag/element-footer';
15
+ import Header from '@micromag/element-header';
14
16
  import Heading from '@micromag/element-heading';
15
17
  import Layout, { Spacer } from '@micromag/element-layout';
16
18
  import ShareOptions from '@micromag/element-share-options';
17
19
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
18
20
  import { Heading1, Text, Container as Container$1 } from '@micromag/transforms/apple-news';
19
21
 
20
- var styles = {"container":"micromag-screen-share-container","background":"micromag-screen-share-background","disabled":"micromag-screen-share-disabled","hidden":"micromag-screen-share-hidden","placeholder":"micromag-screen-share-placeholder","content":"micromag-screen-share-content","emptyHeading":"micromag-screen-share-emptyHeading","emptyOptions":"micromag-screen-share-emptyOptions","layout":"micromag-screen-share-layout","shareOptions":"micromag-screen-share-shareOptions","isCentered":"micromag-screen-share-isCentered","shareButton":"micromag-screen-share-shareButton"};
22
+ var styles = {"container":"micromag-screen-share-container","background":"micromag-screen-share-background","disabled":"micromag-screen-share-disabled","hidden":"micromag-screen-share-hidden","placeholder":"micromag-screen-share-placeholder","content":"micromag-screen-share-content","emptyHeading":"micromag-screen-share-emptyHeading","emptyOptions":"micromag-screen-share-emptyOptions","layout":"micromag-screen-share-layout","shareOptions":"micromag-screen-share-shareOptions","isCentered":"micromag-screen-share-isCentered","shareButton":"micromag-screen-share-shareButton","header":"micromag-screen-share-header","footer":"micromag-screen-share-footer"};
21
23
 
22
24
  var propTypes = {
23
25
  layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
@@ -29,13 +31,12 @@ var propTypes = {
29
31
  centered: PropTypes.bool,
30
32
  spacing: PropTypes.number,
31
33
  background: PropTypes$1.backgroundElement,
32
- callToAction: PropTypes$1.callToAction,
34
+ header: PropTypes$1.header,
35
+ footer: PropTypes$1.footer,
33
36
  id: PropTypes.string,
34
37
  index: PropTypes.number,
35
38
  current: PropTypes.bool,
36
39
  active: PropTypes.bool,
37
- transitions: PropTypes$1.transitions,
38
- transitionStagger: PropTypes.number,
39
40
  className: PropTypes.string
40
41
  };
41
42
  var defaultProps = {
@@ -48,17 +49,16 @@ var defaultProps = {
48
49
  centered: false,
49
50
  spacing: 20,
50
51
  background: null,
51
- callToAction: null,
52
+ header: null,
53
+ footer: null,
52
54
  id: null,
53
55
  index: null,
54
56
  current: true,
55
57
  active: true,
56
- transitions: null,
57
- transitionStagger: 100,
58
58
  className: null
59
59
  };
60
60
  var ShareScreen = function ShareScreen(_ref) {
61
- var _ref4;
61
+ var _ref3;
62
62
  var layout = _ref.layout,
63
63
  heading = _ref.heading,
64
64
  shareUrl = _ref.shareUrl,
@@ -68,13 +68,12 @@ var ShareScreen = function ShareScreen(_ref) {
68
68
  centered = _ref.centered,
69
69
  spacing = _ref.spacing,
70
70
  background = _ref.background,
71
- callToAction = _ref.callToAction,
71
+ header = _ref.header,
72
+ footer = _ref.footer,
72
73
  id = _ref.id,
73
74
  index = _ref.index,
74
75
  current = _ref.current,
75
76
  active = _ref.active,
76
- transitions = _ref.transitions,
77
- transitionStagger = _ref.transitionStagger,
78
77
  className = _ref.className;
79
78
  var _useScreenSize = useScreenSize(),
80
79
  width = _useScreenSize.width,
@@ -84,9 +83,7 @@ var ShareScreen = function ShareScreen(_ref) {
84
83
  isView = _useScreenRenderConte.isView,
85
84
  isPreview = _useScreenRenderConte.isPreview,
86
85
  isPlaceholder = _useScreenRenderConte.isPlaceholder,
87
- isEdit = _useScreenRenderConte.isEdit,
88
- isStatic = _useScreenRenderConte.isStatic,
89
- isCapture = _useScreenRenderConte.isCapture;
86
+ isEdit = _useScreenRenderConte.isEdit;
90
87
  var _useViewerContext = useViewerContext(),
91
88
  viewerTopHeight = _useViewerContext.topHeight,
92
89
  viewerBottomHeight = _useViewerContext.bottomHeight,
@@ -96,11 +93,24 @@ var ShareScreen = function ShareScreen(_ref) {
96
93
  var _usePlaybackContext = usePlaybackContext(),
97
94
  muted = _usePlaybackContext.muted;
98
95
  var mediaRef = usePlaybackMediaRef(current);
99
- var transitionPlaying = current;
100
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
101
96
  var backgroundPlaying = current && (isView || isEdit);
102
97
  var backgroundShouldLoad = current || active;
103
- var hasCallToAction = callToAction !== null && callToAction.active === true;
98
+ var hasHeader = isHeaderFilled(header);
99
+ var hasFooter = isFooterFilled(footer);
100
+ var footerProps = getFooterProps(footer, {
101
+ isView: isView,
102
+ current: current,
103
+ openWebView: openWebView,
104
+ isPreview: isPreview
105
+ });
106
+ var _useDimensionObserver = useDimensionObserver(),
107
+ headerRef = _useDimensionObserver.ref,
108
+ _useDimensionObserver2 = _useDimensionObserver.height,
109
+ headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
110
+ var _useDimensionObserver3 = useDimensionObserver(),
111
+ footerRef = _useDimensionObserver3.ref,
112
+ _useDimensionObserver4 = _useDimensionObserver3.height,
113
+ footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
104
114
  var currentUrl = useMemo(function () {
105
115
  if (typeof window === 'undefined') return '';
106
116
  var _ref2 = window.location || {},
@@ -142,7 +152,32 @@ var ShareScreen = function ShareScreen(_ref) {
142
152
  });
143
153
  }
144
154
  }, [trackEvent]);
145
- var items = [/*#__PURE__*/React.createElement(ScreenElement, {
155
+ return /*#__PURE__*/React.createElement("div", {
156
+ className: classNames([styles.container, (_ref3 = {}, _defineProperty(_ref3, className, className !== null), _defineProperty(_ref3, styles.isPlaceholder, isPlaceholder), _ref3)]),
157
+ "data-screen-ready": true
158
+ }, /*#__PURE__*/React.createElement(Container, {
159
+ width: width,
160
+ height: height,
161
+ className: styles.content
162
+ }, /*#__PURE__*/React.createElement(Layout, {
163
+ className: styles.layout,
164
+ verticalAlign: layout,
165
+ fullscreen: true,
166
+ style: !isPlaceholder ? {
167
+ padding: spacing,
168
+ paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
169
+ paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight || spacing)
170
+ } : null
171
+ }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
172
+ className: styles.header,
173
+ ref: headerRef,
174
+ style: {
175
+ paddingTop: spacing,
176
+ paddingBottom: spacing,
177
+ paddingLeft: spacing,
178
+ paddingRight: spacing
179
+ }
180
+ }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(ScreenElement, {
146
181
  key: "title",
147
182
  placeholder: "title",
148
183
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -179,42 +214,16 @@ var ShareScreen = function ShareScreen(_ref) {
179
214
  onShare: onClickShare,
180
215
  buttonsStyle: buttonsStyle,
181
216
  buttonsTextStyle: buttonsTextStyle
182
- })), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
217
+ })), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
218
+ className: styles.footer,
219
+ ref: footerRef,
183
220
  style: {
184
221
  paddingTop: spacing,
222
+ paddingBottom: spacing,
185
223
  paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
186
224
  paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0)
187
- },
188
- key: "call-to-action"
189
- }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
190
- animationDisabled: isPreview,
191
- focusable: current && isView,
192
- openWebView: openWebView
193
- }))) : null].filter(function (el) {
194
- return el !== null;
195
- });
196
- return /*#__PURE__*/React.createElement("div", {
197
- className: classNames([styles.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles.isPlaceholder, isPlaceholder), _ref4)]),
198
- "data-screen-ready": true
199
- }, /*#__PURE__*/React.createElement(Container, {
200
- width: width,
201
- height: height,
202
- className: styles.content
203
- }, /*#__PURE__*/React.createElement(Layout, {
204
- className: styles.layout,
205
- verticalAlign: layout,
206
- fullscreen: true,
207
- style: !isPlaceholder ? {
208
- padding: spacing,
209
- paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
210
- paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
211
- } : null
212
- }, /*#__PURE__*/React.createElement(TransitionsStagger, {
213
- transitions: transitions,
214
- stagger: transitionStagger,
215
- disabled: transitionDisabled,
216
- playing: transitionPlaying
217
- }, items))), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
225
+ }
226
+ }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
218
227
  background: background,
219
228
  width: width,
220
229
  height: height,
@@ -438,6 +447,26 @@ var definition = {
438
447
  "value": "Background"
439
448
  }]
440
449
  })
450
+ }, {
451
+ name: 'header',
452
+ type: 'header',
453
+ label: defineMessage({
454
+ id: "rhuDxI",
455
+ defaultMessage: [{
456
+ "type": 0,
457
+ "value": "Header"
458
+ }]
459
+ })
460
+ }, {
461
+ name: 'footer',
462
+ type: 'footer',
463
+ label: defineMessage({
464
+ id: "g4nybp",
465
+ defaultMessage: [{
466
+ "type": 0,
467
+ "value": "Footer"
468
+ }]
469
+ })
441
470
  }]
442
471
  };
443
472
 
package/lib/index.js CHANGED
@@ -12,9 +12,11 @@ var core = require('@micromag/core');
12
12
  var components = require('@micromag/core/components');
13
13
  var contexts = require('@micromag/core/contexts');
14
14
  var hooks = require('@micromag/core/hooks');
15
+ var utils = require('@micromag/core/utils');
15
16
  var Background = require('@micromag/element-background');
16
- var CallToAction = require('@micromag/element-call-to-action');
17
17
  var Container = require('@micromag/element-container');
18
+ var Footer = require('@micromag/element-footer');
19
+ var Header = require('@micromag/element-header');
18
20
  var Heading = require('@micromag/element-heading');
19
21
  var Layout = require('@micromag/element-layout');
20
22
  var ShareOptions = require('@micromag/element-share-options');
@@ -29,14 +31,15 @@ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
29
31
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
30
32
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
31
33
  var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
32
- var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
33
34
  var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
35
+ var Footer__default = /*#__PURE__*/_interopDefaultLegacy(Footer);
36
+ var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
34
37
  var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
35
38
  var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
36
39
  var ShareOptions__default = /*#__PURE__*/_interopDefaultLegacy(ShareOptions);
37
40
  var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
38
41
 
39
- var styles = {"container":"micromag-screen-share-container","background":"micromag-screen-share-background","disabled":"micromag-screen-share-disabled","hidden":"micromag-screen-share-hidden","placeholder":"micromag-screen-share-placeholder","content":"micromag-screen-share-content","emptyHeading":"micromag-screen-share-emptyHeading","emptyOptions":"micromag-screen-share-emptyOptions","layout":"micromag-screen-share-layout","shareOptions":"micromag-screen-share-shareOptions","isCentered":"micromag-screen-share-isCentered","shareButton":"micromag-screen-share-shareButton"};
42
+ var styles = {"container":"micromag-screen-share-container","background":"micromag-screen-share-background","disabled":"micromag-screen-share-disabled","hidden":"micromag-screen-share-hidden","placeholder":"micromag-screen-share-placeholder","content":"micromag-screen-share-content","emptyHeading":"micromag-screen-share-emptyHeading","emptyOptions":"micromag-screen-share-emptyOptions","layout":"micromag-screen-share-layout","shareOptions":"micromag-screen-share-shareOptions","isCentered":"micromag-screen-share-isCentered","shareButton":"micromag-screen-share-shareButton","header":"micromag-screen-share-header","footer":"micromag-screen-share-footer"};
40
43
 
41
44
  var propTypes = {
42
45
  layout: PropTypes__default["default"].oneOf(['top', 'middle', 'bottom']),
@@ -48,13 +51,12 @@ var propTypes = {
48
51
  centered: PropTypes__default["default"].bool,
49
52
  spacing: PropTypes__default["default"].number,
50
53
  background: core.PropTypes.backgroundElement,
51
- callToAction: core.PropTypes.callToAction,
54
+ header: core.PropTypes.header,
55
+ footer: core.PropTypes.footer,
52
56
  id: PropTypes__default["default"].string,
53
57
  index: PropTypes__default["default"].number,
54
58
  current: PropTypes__default["default"].bool,
55
59
  active: PropTypes__default["default"].bool,
56
- transitions: core.PropTypes.transitions,
57
- transitionStagger: PropTypes__default["default"].number,
58
60
  className: PropTypes__default["default"].string
59
61
  };
60
62
  var defaultProps = {
@@ -67,17 +69,16 @@ var defaultProps = {
67
69
  centered: false,
68
70
  spacing: 20,
69
71
  background: null,
70
- callToAction: null,
72
+ header: null,
73
+ footer: null,
71
74
  id: null,
72
75
  index: null,
73
76
  current: true,
74
77
  active: true,
75
- transitions: null,
76
- transitionStagger: 100,
77
78
  className: null
78
79
  };
79
80
  var ShareScreen = function ShareScreen(_ref) {
80
- var _ref4;
81
+ var _ref3;
81
82
  var layout = _ref.layout,
82
83
  heading = _ref.heading,
83
84
  shareUrl = _ref.shareUrl,
@@ -87,13 +88,12 @@ var ShareScreen = function ShareScreen(_ref) {
87
88
  centered = _ref.centered,
88
89
  spacing = _ref.spacing,
89
90
  background = _ref.background,
90
- callToAction = _ref.callToAction,
91
+ header = _ref.header,
92
+ footer = _ref.footer,
91
93
  id = _ref.id,
92
94
  index = _ref.index,
93
95
  current = _ref.current,
94
96
  active = _ref.active,
95
- transitions = _ref.transitions,
96
- transitionStagger = _ref.transitionStagger,
97
97
  className = _ref.className;
98
98
  var _useScreenSize = contexts.useScreenSize(),
99
99
  width = _useScreenSize.width,
@@ -103,9 +103,7 @@ var ShareScreen = function ShareScreen(_ref) {
103
103
  isView = _useScreenRenderConte.isView,
104
104
  isPreview = _useScreenRenderConte.isPreview,
105
105
  isPlaceholder = _useScreenRenderConte.isPlaceholder,
106
- isEdit = _useScreenRenderConte.isEdit,
107
- isStatic = _useScreenRenderConte.isStatic,
108
- isCapture = _useScreenRenderConte.isCapture;
106
+ isEdit = _useScreenRenderConte.isEdit;
109
107
  var _useViewerContext = contexts.useViewerContext(),
110
108
  viewerTopHeight = _useViewerContext.topHeight,
111
109
  viewerBottomHeight = _useViewerContext.bottomHeight,
@@ -115,11 +113,24 @@ var ShareScreen = function ShareScreen(_ref) {
115
113
  var _usePlaybackContext = contexts.usePlaybackContext(),
116
114
  muted = _usePlaybackContext.muted;
117
115
  var mediaRef = contexts.usePlaybackMediaRef(current);
118
- var transitionPlaying = current;
119
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
120
116
  var backgroundPlaying = current && (isView || isEdit);
121
117
  var backgroundShouldLoad = current || active;
122
- var hasCallToAction = callToAction !== null && callToAction.active === true;
118
+ var hasHeader = utils.isHeaderFilled(header);
119
+ var hasFooter = utils.isFooterFilled(footer);
120
+ var footerProps = utils.getFooterProps(footer, {
121
+ isView: isView,
122
+ current: current,
123
+ openWebView: openWebView,
124
+ isPreview: isPreview
125
+ });
126
+ var _useDimensionObserver = hooks.useDimensionObserver(),
127
+ headerRef = _useDimensionObserver.ref,
128
+ _useDimensionObserver2 = _useDimensionObserver.height,
129
+ headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
130
+ var _useDimensionObserver3 = hooks.useDimensionObserver(),
131
+ footerRef = _useDimensionObserver3.ref,
132
+ _useDimensionObserver4 = _useDimensionObserver3.height,
133
+ footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
123
134
  var currentUrl = React.useMemo(function () {
124
135
  if (typeof window === 'undefined') return '';
125
136
  var _ref2 = window.location || {},
@@ -161,7 +172,32 @@ var ShareScreen = function ShareScreen(_ref) {
161
172
  });
162
173
  }
163
174
  }, [trackEvent]);
164
- var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
175
+ return /*#__PURE__*/React__default["default"].createElement("div", {
176
+ className: classNames__default["default"]([styles.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className !== null), _defineProperty__default["default"](_ref3, styles.isPlaceholder, isPlaceholder), _ref3)]),
177
+ "data-screen-ready": true
178
+ }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
179
+ width: width,
180
+ height: height,
181
+ className: styles.content
182
+ }, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
183
+ className: styles.layout,
184
+ verticalAlign: layout,
185
+ fullscreen: true,
186
+ style: !isPlaceholder ? {
187
+ padding: spacing,
188
+ paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
189
+ paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight || spacing)
190
+ } : null
191
+ }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
192
+ className: styles.header,
193
+ ref: headerRef,
194
+ style: {
195
+ paddingTop: spacing,
196
+ paddingBottom: spacing,
197
+ paddingLeft: spacing,
198
+ paddingRight: spacing
199
+ }
200
+ }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
165
201
  key: "title",
166
202
  placeholder: "title",
167
203
  emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
@@ -198,42 +234,16 @@ var ShareScreen = function ShareScreen(_ref) {
198
234
  onShare: onClickShare,
199
235
  buttonsStyle: buttonsStyle,
200
236
  buttonsTextStyle: buttonsTextStyle
201
- })), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
237
+ })), !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
238
+ className: styles.footer,
239
+ ref: footerRef,
202
240
  style: {
203
241
  paddingTop: spacing,
242
+ paddingBottom: spacing,
204
243
  paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
205
244
  paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0)
206
- },
207
- key: "call-to-action"
208
- }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
209
- animationDisabled: isPreview,
210
- focusable: current && isView,
211
- openWebView: openWebView
212
- }))) : null].filter(function (el) {
213
- return el !== null;
214
- });
215
- return /*#__PURE__*/React__default["default"].createElement("div", {
216
- className: classNames__default["default"]([styles.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles.isPlaceholder, isPlaceholder), _ref4)]),
217
- "data-screen-ready": true
218
- }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
219
- width: width,
220
- height: height,
221
- className: styles.content
222
- }, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
223
- className: styles.layout,
224
- verticalAlign: layout,
225
- fullscreen: true,
226
- style: !isPlaceholder ? {
227
- padding: spacing,
228
- paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
229
- paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
230
- } : null
231
- }, /*#__PURE__*/React__default["default"].createElement(components.TransitionsStagger, {
232
- transitions: transitions,
233
- stagger: transitionStagger,
234
- disabled: transitionDisabled,
235
- playing: transitionPlaying
236
- }, items))), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
245
+ }
246
+ }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
237
247
  background: background,
238
248
  width: width,
239
249
  height: height,
@@ -457,6 +467,26 @@ var definition = {
457
467
  "value": "Background"
458
468
  }]
459
469
  })
470
+ }, {
471
+ name: 'header',
472
+ type: 'header',
473
+ label: reactIntl.defineMessage({
474
+ id: "rhuDxI",
475
+ defaultMessage: [{
476
+ "type": 0,
477
+ "value": "Header"
478
+ }]
479
+ })
480
+ }, {
481
+ name: 'footer',
482
+ type: 'footer',
483
+ label: reactIntl.defineMessage({
484
+ id: "g4nybp",
485
+ defaultMessage: [{
486
+ "type": 0,
487
+ "value": "Footer"
488
+ }]
489
+ })
460
490
  }]
461
491
  };
462
492
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-share",
3
- "version": "0.3.353",
3
+ "version": "0.3.354",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -53,15 +53,16 @@
53
53
  },
54
54
  "dependencies": {
55
55
  "@babel/runtime": "^7.13.10",
56
- "@micromag/core": "^0.3.348",
57
- "@micromag/element-background": "^0.3.348",
58
- "@micromag/element-call-to-action": "^0.3.348",
59
- "@micromag/element-container": "^0.3.348",
60
- "@micromag/element-heading": "^0.3.348",
61
- "@micromag/element-layout": "^0.3.348",
62
- "@micromag/element-share-options": "^0.3.353",
63
- "@micromag/element-text": "^0.3.348",
64
- "@micromag/transforms": "^0.3.348",
56
+ "@micromag/core": "^0.3.354",
57
+ "@micromag/element-background": "^0.3.354",
58
+ "@micromag/element-container": "^0.3.354",
59
+ "@micromag/element-footer": "^0.3.354",
60
+ "@micromag/element-header": "^0.3.354",
61
+ "@micromag/element-heading": "^0.3.354",
62
+ "@micromag/element-layout": "^0.3.354",
63
+ "@micromag/element-share-options": "^0.3.354",
64
+ "@micromag/element-text": "^0.3.354",
65
+ "@micromag/transforms": "^0.3.354",
65
66
  "classnames": "^2.2.6",
66
67
  "lodash": "^4.17.21",
67
68
  "prop-types": "^15.7.2",
@@ -71,5 +72,5 @@
71
72
  "publishConfig": {
72
73
  "access": "public"
73
74
  },
74
- "gitHead": "dd48df1c43175f674ab8c61cb7013900f8841683"
75
+ "gitHead": "ccf852d0a7df8f222365088e7de3843492e720e7"
75
76
  }