@micromag/screen-text 0.3.150 → 0.3.156
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/index.js +33 -29
- package/lib/index.js +32 -28
- package/package.json +10 -10
package/es/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { PropTypes as PropTypes$1 } from '@micromag/core';
|
|
7
7
|
import { ScreenElement, TransitionsStagger } from '@micromag/core/components';
|
|
8
|
-
import { useScreenSize,
|
|
8
|
+
import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
|
|
9
9
|
import { isTextFilled } from '@micromag/core/utils';
|
|
10
10
|
import Background from '@micromag/element-background';
|
|
11
11
|
import CallToAction from '@micromag/element-call-to-action';
|
|
@@ -32,8 +32,6 @@ var propTypes = {
|
|
|
32
32
|
active: PropTypes.bool,
|
|
33
33
|
transitions: PropTypes$1.transitions,
|
|
34
34
|
transitionStagger: PropTypes.number,
|
|
35
|
-
enableInteraction: PropTypes.func,
|
|
36
|
-
disableInteraction: PropTypes.func,
|
|
37
35
|
className: PropTypes.string
|
|
38
36
|
};
|
|
39
37
|
var defaultProps = {
|
|
@@ -48,13 +46,11 @@ var defaultProps = {
|
|
|
48
46
|
active: true,
|
|
49
47
|
transitions: null,
|
|
50
48
|
transitionStagger: 100,
|
|
51
|
-
enableInteraction: null,
|
|
52
|
-
disableInteraction: null,
|
|
53
49
|
className: null
|
|
54
50
|
};
|
|
55
51
|
|
|
56
52
|
var TextScreen = function TextScreen(_ref) {
|
|
57
|
-
var
|
|
53
|
+
var _ref4;
|
|
58
54
|
|
|
59
55
|
var layout = _ref.layout,
|
|
60
56
|
text = _ref.text,
|
|
@@ -67,19 +63,13 @@ var TextScreen = function TextScreen(_ref) {
|
|
|
67
63
|
active = _ref.active,
|
|
68
64
|
transitions = _ref.transitions,
|
|
69
65
|
transitionStagger = _ref.transitionStagger,
|
|
70
|
-
enableInteraction = _ref.enableInteraction,
|
|
71
|
-
disableInteraction = _ref.disableInteraction,
|
|
72
66
|
className = _ref.className;
|
|
73
67
|
|
|
74
68
|
var _useScreenSize = useScreenSize(),
|
|
75
69
|
width = _useScreenSize.width,
|
|
76
70
|
height = _useScreenSize.height,
|
|
77
|
-
menuOverScreen = _useScreenSize.menuOverScreen,
|
|
78
71
|
resolution = _useScreenSize.resolution;
|
|
79
72
|
|
|
80
|
-
var _useViewer = useViewer(),
|
|
81
|
-
menuSize = _useViewer.menuSize;
|
|
82
|
-
|
|
83
73
|
var _useScreenRenderConte = useScreenRenderContext(),
|
|
84
74
|
isView = _useScreenRenderConte.isView,
|
|
85
75
|
isPreview = _useScreenRenderConte.isPreview,
|
|
@@ -88,6 +78,18 @@ var TextScreen = function TextScreen(_ref) {
|
|
|
88
78
|
isStatic = _useScreenRenderConte.isStatic,
|
|
89
79
|
isCapture = _useScreenRenderConte.isCapture;
|
|
90
80
|
|
|
81
|
+
var _useViewerContext = useViewerContext(),
|
|
82
|
+
viewerTopHeight = _useViewerContext.topHeight,
|
|
83
|
+
viewerBottomHeight = _useViewerContext.bottomHeight,
|
|
84
|
+
viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
|
|
85
|
+
|
|
86
|
+
var _useViewerWebView = useViewerWebView(),
|
|
87
|
+
openWebView = _useViewerWebView.open;
|
|
88
|
+
|
|
89
|
+
var _usePlaybackContext = usePlaybackContext(),
|
|
90
|
+
muted = _usePlaybackContext.muted;
|
|
91
|
+
|
|
92
|
+
var mediaRef = usePlaybackMediaRef(current);
|
|
91
93
|
var hasTitle = isTextFilled(title);
|
|
92
94
|
var hasText = isTextFilled(text);
|
|
93
95
|
var isSplitted = layout === 'split';
|
|
@@ -99,7 +101,11 @@ var TextScreen = function TextScreen(_ref) {
|
|
|
99
101
|
var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
|
|
100
102
|
var backgroundPlaying = current && (isView || isEdit);
|
|
101
103
|
var backgroundShouldLoad = current || active;
|
|
102
|
-
|
|
104
|
+
|
|
105
|
+
var _ref2 = callToAction || {},
|
|
106
|
+
_ref2$active = _ref2.active,
|
|
107
|
+
hasCallToAction = _ref2$active === void 0 ? false : _ref2$active; // Create elements
|
|
108
|
+
|
|
103
109
|
|
|
104
110
|
var items = [!isPlaceholder && hasCallToAction && isMiddleLayout ? /*#__PURE__*/React.createElement(Spacer, {
|
|
105
111
|
key: "spacer-cta-top"
|
|
@@ -136,26 +142,21 @@ var TextScreen = function TextScreen(_ref) {
|
|
|
136
142
|
}, text)) : null), !isPlaceholder && hasCallToAction && (isTopLayout || isMiddleLayout) ? /*#__PURE__*/React.createElement(Spacer, {
|
|
137
143
|
key: "spacer-cta-bottom"
|
|
138
144
|
}) : null, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
|
|
145
|
+
key: "call-to-action",
|
|
139
146
|
style: {
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
}, /*#__PURE__*/React.createElement(CallToAction, {
|
|
145
|
-
callToAction: callToAction,
|
|
147
|
+
paddingTop: spacing,
|
|
148
|
+
paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
|
|
149
|
+
paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
|
|
150
|
+
}
|
|
151
|
+
}, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
|
|
146
152
|
animationDisabled: isPreview,
|
|
147
153
|
focusable: current && isView,
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
height: height
|
|
151
|
-
},
|
|
152
|
-
enableInteraction: enableInteraction,
|
|
153
|
-
disableInteraction: disableInteraction
|
|
154
|
-
})) : null].filter(function (el) {
|
|
154
|
+
openWebView: openWebView
|
|
155
|
+
}))) : null].filter(function (el) {
|
|
155
156
|
return el !== null;
|
|
156
157
|
});
|
|
157
158
|
return /*#__PURE__*/React.createElement("div", {
|
|
158
|
-
className: classNames([styles.container, (
|
|
159
|
+
className: classNames([styles.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles.isPlaceholder, isPlaceholder), _ref4)]),
|
|
159
160
|
"data-screen-ready": true
|
|
160
161
|
}, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
|
|
161
162
|
background: background,
|
|
@@ -163,7 +164,9 @@ var TextScreen = function TextScreen(_ref) {
|
|
|
163
164
|
height: height,
|
|
164
165
|
resolution: resolution,
|
|
165
166
|
playing: backgroundPlaying,
|
|
166
|
-
|
|
167
|
+
muted: muted,
|
|
168
|
+
shouldLoad: backgroundShouldLoad,
|
|
169
|
+
mediaRef: mediaRef
|
|
167
170
|
}) : null, /*#__PURE__*/React.createElement(Container, {
|
|
168
171
|
width: width,
|
|
169
172
|
height: height
|
|
@@ -173,7 +176,8 @@ var TextScreen = function TextScreen(_ref) {
|
|
|
173
176
|
verticalAlign: verticalAlign,
|
|
174
177
|
style: !isPlaceholder ? {
|
|
175
178
|
padding: spacing,
|
|
176
|
-
paddingTop: (
|
|
179
|
+
paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
|
|
180
|
+
paddingBottom: (!isPreview ? viewerBottomHeight : 0) + spacing
|
|
177
181
|
} : null
|
|
178
182
|
}, /*#__PURE__*/React.createElement(TransitionsStagger, {
|
|
179
183
|
transitions: transitions,
|
package/lib/index.js
CHANGED
|
@@ -52,8 +52,6 @@ var propTypes = {
|
|
|
52
52
|
active: PropTypes__default["default"].bool,
|
|
53
53
|
transitions: core.PropTypes.transitions,
|
|
54
54
|
transitionStagger: PropTypes__default["default"].number,
|
|
55
|
-
enableInteraction: PropTypes__default["default"].func,
|
|
56
|
-
disableInteraction: PropTypes__default["default"].func,
|
|
57
55
|
className: PropTypes__default["default"].string
|
|
58
56
|
};
|
|
59
57
|
var defaultProps = {
|
|
@@ -68,13 +66,11 @@ var defaultProps = {
|
|
|
68
66
|
active: true,
|
|
69
67
|
transitions: null,
|
|
70
68
|
transitionStagger: 100,
|
|
71
|
-
enableInteraction: null,
|
|
72
|
-
disableInteraction: null,
|
|
73
69
|
className: null
|
|
74
70
|
};
|
|
75
71
|
|
|
76
72
|
var TextScreen = function TextScreen(_ref) {
|
|
77
|
-
var
|
|
73
|
+
var _ref4;
|
|
78
74
|
|
|
79
75
|
var layout = _ref.layout,
|
|
80
76
|
text = _ref.text,
|
|
@@ -87,19 +83,13 @@ var TextScreen = function TextScreen(_ref) {
|
|
|
87
83
|
active = _ref.active,
|
|
88
84
|
transitions = _ref.transitions,
|
|
89
85
|
transitionStagger = _ref.transitionStagger,
|
|
90
|
-
enableInteraction = _ref.enableInteraction,
|
|
91
|
-
disableInteraction = _ref.disableInteraction,
|
|
92
86
|
className = _ref.className;
|
|
93
87
|
|
|
94
88
|
var _useScreenSize = contexts.useScreenSize(),
|
|
95
89
|
width = _useScreenSize.width,
|
|
96
90
|
height = _useScreenSize.height,
|
|
97
|
-
menuOverScreen = _useScreenSize.menuOverScreen,
|
|
98
91
|
resolution = _useScreenSize.resolution;
|
|
99
92
|
|
|
100
|
-
var _useViewer = contexts.useViewer(),
|
|
101
|
-
menuSize = _useViewer.menuSize;
|
|
102
|
-
|
|
103
93
|
var _useScreenRenderConte = contexts.useScreenRenderContext(),
|
|
104
94
|
isView = _useScreenRenderConte.isView,
|
|
105
95
|
isPreview = _useScreenRenderConte.isPreview,
|
|
@@ -108,6 +98,18 @@ var TextScreen = function TextScreen(_ref) {
|
|
|
108
98
|
isStatic = _useScreenRenderConte.isStatic,
|
|
109
99
|
isCapture = _useScreenRenderConte.isCapture;
|
|
110
100
|
|
|
101
|
+
var _useViewerContext = contexts.useViewerContext(),
|
|
102
|
+
viewerTopHeight = _useViewerContext.topHeight,
|
|
103
|
+
viewerBottomHeight = _useViewerContext.bottomHeight,
|
|
104
|
+
viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
|
|
105
|
+
|
|
106
|
+
var _useViewerWebView = contexts.useViewerWebView(),
|
|
107
|
+
openWebView = _useViewerWebView.open;
|
|
108
|
+
|
|
109
|
+
var _usePlaybackContext = contexts.usePlaybackContext(),
|
|
110
|
+
muted = _usePlaybackContext.muted;
|
|
111
|
+
|
|
112
|
+
var mediaRef = contexts.usePlaybackMediaRef(current);
|
|
111
113
|
var hasTitle = utils.isTextFilled(title);
|
|
112
114
|
var hasText = utils.isTextFilled(text);
|
|
113
115
|
var isSplitted = layout === 'split';
|
|
@@ -119,7 +121,11 @@ var TextScreen = function TextScreen(_ref) {
|
|
|
119
121
|
var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
|
|
120
122
|
var backgroundPlaying = current && (isView || isEdit);
|
|
121
123
|
var backgroundShouldLoad = current || active;
|
|
122
|
-
|
|
124
|
+
|
|
125
|
+
var _ref2 = callToAction || {},
|
|
126
|
+
_ref2$active = _ref2.active,
|
|
127
|
+
hasCallToAction = _ref2$active === void 0 ? false : _ref2$active; // Create elements
|
|
128
|
+
|
|
123
129
|
|
|
124
130
|
var items = [!isPlaceholder && hasCallToAction && isMiddleLayout ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
|
|
125
131
|
key: "spacer-cta-top"
|
|
@@ -156,26 +162,21 @@ var TextScreen = function TextScreen(_ref) {
|
|
|
156
162
|
}, text)) : null), !isPlaceholder && hasCallToAction && (isTopLayout || isMiddleLayout) ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
|
|
157
163
|
key: "spacer-cta-bottom"
|
|
158
164
|
}) : null, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
165
|
+
key: "call-to-action",
|
|
159
166
|
style: {
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
}, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
|
|
165
|
-
callToAction: callToAction,
|
|
167
|
+
paddingTop: spacing,
|
|
168
|
+
paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
|
|
169
|
+
paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
|
|
170
|
+
}
|
|
171
|
+
}, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
|
|
166
172
|
animationDisabled: isPreview,
|
|
167
173
|
focusable: current && isView,
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
height: height
|
|
171
|
-
},
|
|
172
|
-
enableInteraction: enableInteraction,
|
|
173
|
-
disableInteraction: disableInteraction
|
|
174
|
-
})) : null].filter(function (el) {
|
|
174
|
+
openWebView: openWebView
|
|
175
|
+
}))) : null].filter(function (el) {
|
|
175
176
|
return el !== null;
|
|
176
177
|
});
|
|
177
178
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
178
|
-
className: classNames__default["default"]([styles.container, (
|
|
179
|
+
className: classNames__default["default"]([styles.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles.isPlaceholder, isPlaceholder), _ref4)]),
|
|
179
180
|
"data-screen-ready": true
|
|
180
181
|
}, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
|
|
181
182
|
background: background,
|
|
@@ -183,7 +184,9 @@ var TextScreen = function TextScreen(_ref) {
|
|
|
183
184
|
height: height,
|
|
184
185
|
resolution: resolution,
|
|
185
186
|
playing: backgroundPlaying,
|
|
186
|
-
|
|
187
|
+
muted: muted,
|
|
188
|
+
shouldLoad: backgroundShouldLoad,
|
|
189
|
+
mediaRef: mediaRef
|
|
187
190
|
}) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
|
|
188
191
|
width: width,
|
|
189
192
|
height: height
|
|
@@ -193,7 +196,8 @@ var TextScreen = function TextScreen(_ref) {
|
|
|
193
196
|
verticalAlign: verticalAlign,
|
|
194
197
|
style: !isPlaceholder ? {
|
|
195
198
|
padding: spacing,
|
|
196
|
-
paddingTop: (
|
|
199
|
+
paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
|
|
200
|
+
paddingBottom: (!isPreview ? viewerBottomHeight : 0) + spacing
|
|
197
201
|
} : null
|
|
198
202
|
}, /*#__PURE__*/React__default["default"].createElement(components.TransitionsStagger, {
|
|
199
203
|
transitions: transitions,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-text",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.156",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -49,14 +49,14 @@
|
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@babel/runtime": "^7.13.10",
|
|
52
|
-
"@micromag/core": "^0.3.
|
|
53
|
-
"@micromag/element-background": "^0.3.
|
|
54
|
-
"@micromag/element-call-to-action": "^0.3.
|
|
55
|
-
"@micromag/element-container": "^0.3.
|
|
56
|
-
"@micromag/element-heading": "^0.3.
|
|
57
|
-
"@micromag/element-layout": "^0.3.
|
|
58
|
-
"@micromag/element-text": "^0.3.
|
|
59
|
-
"@micromag/transforms": "^0.3.
|
|
52
|
+
"@micromag/core": "^0.3.156",
|
|
53
|
+
"@micromag/element-background": "^0.3.156",
|
|
54
|
+
"@micromag/element-call-to-action": "^0.3.156",
|
|
55
|
+
"@micromag/element-container": "^0.3.156",
|
|
56
|
+
"@micromag/element-heading": "^0.3.156",
|
|
57
|
+
"@micromag/element-layout": "^0.3.156",
|
|
58
|
+
"@micromag/element-text": "^0.3.156",
|
|
59
|
+
"@micromag/transforms": "^0.3.156",
|
|
60
60
|
"classnames": "^2.2.6",
|
|
61
61
|
"lodash": "^4.17.21",
|
|
62
62
|
"prop-types": "^15.7.2",
|
|
@@ -66,5 +66,5 @@
|
|
|
66
66
|
"publishConfig": {
|
|
67
67
|
"access": "public"
|
|
68
68
|
},
|
|
69
|
-
"gitHead": "
|
|
69
|
+
"gitHead": "026d0eb445367f824d3d07a04a0fa90cc00d49f2"
|
|
70
70
|
}
|