@micromag/screen-text 0.3.311 → 0.3.322
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/assets/css/styles.css +1 -1
- package/es/index.js +38 -52
- package/lib/index.js +39 -52
- package/package.json +11 -11
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-screen-text-container .micromag-screen-text-background{position:absolute;top:0;
|
|
1
|
+
.micromag-screen-text-container .micromag-screen-text-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-text-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-text-disabled.micromag-screen-text-container{overflow:hidden;pointer-events:none}.micromag-screen-text-hidden.micromag-screen-text-container{display:none;visibility:hidden}.micromag-screen-text-placeholder.micromag-screen-text-container .micromag-screen-text-content{padding:6px;position:relative}.micromag-screen-text-container .micromag-screen-text-emptyText,.micromag-screen-text-container .micromag-screen-text-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-text-container .micromag-screen-text-background{z-index:0}.micromag-screen-text-container .micromag-screen-text-content{z-index:1}.micromag-screen-text-container .micromag-screen-text-emptyText,.micromag-screen-text-container .micromag-screen-text-emptyTitle{margin:10px auto;width:100%}.micromag-screen-text-container .micromag-screen-text-emptyTitle{height:100px}.micromag-screen-text-container .micromag-screen-text-emptyText{height:50px}.micromag-screen-text-container .micromag-screen-text-title.micromag-screen-text-withMargin{margin-bottom:20px}.micromag-screen-text-container.micromag-screen-text-isPlaceholder .micromag-screen-text-layout{padding:10px}
|
package/es/index.js
CHANGED
|
@@ -13,12 +13,13 @@ import Container from '@micromag/element-container';
|
|
|
13
13
|
import Heading from '@micromag/element-heading';
|
|
14
14
|
import Layout, { Spacer } from '@micromag/element-layout';
|
|
15
15
|
import Text from '@micromag/element-text';
|
|
16
|
+
import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
|
|
16
17
|
import _extends from '@babel/runtime/helpers/extends';
|
|
17
18
|
import _objectSpread from '@babel/runtime/helpers/objectSpread2';
|
|
18
19
|
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
|
|
19
20
|
import { Heading1, Text as Text$1, Container as Container$1 } from '@micromag/transforms/apple-news';
|
|
20
21
|
|
|
21
|
-
var styles = {"container":"micromag-screen-text-container","background":"micromag-screen-text-background","disabled":"micromag-screen-text-disabled","hidden":"micromag-screen-text-hidden","placeholder":"micromag-screen-text-placeholder","content":"micromag-screen-text-content","
|
|
22
|
+
var styles = {"container":"micromag-screen-text-container","background":"micromag-screen-text-background","disabled":"micromag-screen-text-disabled","hidden":"micromag-screen-text-hidden","placeholder":"micromag-screen-text-placeholder","content":"micromag-screen-text-content","emptyTitle":"micromag-screen-text-emptyTitle","emptyText":"micromag-screen-text-emptyText","title":"micromag-screen-text-title","withMargin":"micromag-screen-text-withMargin","isPlaceholder":"micromag-screen-text-isPlaceholder","layout":"micromag-screen-text-layout"};
|
|
22
23
|
|
|
23
24
|
var propTypes = {
|
|
24
25
|
layout: PropTypes.oneOf(['top', 'middle', 'bottom', 'split']),
|
|
@@ -48,47 +49,39 @@ var defaultProps = {
|
|
|
48
49
|
transitionStagger: 100,
|
|
49
50
|
className: null
|
|
50
51
|
};
|
|
51
|
-
|
|
52
52
|
var TextScreen = function TextScreen(_ref) {
|
|
53
53
|
var _ref4;
|
|
54
|
-
|
|
55
54
|
var layout = _ref.layout,
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
55
|
+
text = _ref.text,
|
|
56
|
+
title = _ref.title,
|
|
57
|
+
withTitle = _ref.withTitle,
|
|
58
|
+
spacing = _ref.spacing,
|
|
59
|
+
background = _ref.background,
|
|
60
|
+
callToAction = _ref.callToAction,
|
|
61
|
+
current = _ref.current,
|
|
62
|
+
active = _ref.active,
|
|
63
|
+
transitions = _ref.transitions,
|
|
64
|
+
transitionStagger = _ref.transitionStagger,
|
|
65
|
+
className = _ref.className;
|
|
68
66
|
var _useScreenSize = useScreenSize(),
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
67
|
+
width = _useScreenSize.width,
|
|
68
|
+
height = _useScreenSize.height,
|
|
69
|
+
resolution = _useScreenSize.resolution;
|
|
73
70
|
var _useScreenRenderConte = useScreenRenderContext(),
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
71
|
+
isView = _useScreenRenderConte.isView,
|
|
72
|
+
isPreview = _useScreenRenderConte.isPreview,
|
|
73
|
+
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
74
|
+
isEdit = _useScreenRenderConte.isEdit,
|
|
75
|
+
isStatic = _useScreenRenderConte.isStatic,
|
|
76
|
+
isCapture = _useScreenRenderConte.isCapture;
|
|
81
77
|
var _useViewerContext = useViewerContext(),
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
78
|
+
viewerTopHeight = _useViewerContext.topHeight,
|
|
79
|
+
viewerBottomHeight = _useViewerContext.bottomHeight,
|
|
80
|
+
viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
|
|
86
81
|
var _useViewerWebView = useViewerWebView(),
|
|
87
|
-
|
|
88
|
-
|
|
82
|
+
openWebView = _useViewerWebView.open;
|
|
89
83
|
var _usePlaybackContext = usePlaybackContext(),
|
|
90
|
-
|
|
91
|
-
|
|
84
|
+
muted = _usePlaybackContext.muted;
|
|
92
85
|
var mediaRef = usePlaybackMediaRef(current);
|
|
93
86
|
var hasTitle = isTextFilled(title);
|
|
94
87
|
var hasText = isTextFilled(text);
|
|
@@ -101,12 +94,11 @@ var TextScreen = function TextScreen(_ref) {
|
|
|
101
94
|
var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
|
|
102
95
|
var backgroundPlaying = current && (isView || isEdit);
|
|
103
96
|
var backgroundShouldLoad = current || active;
|
|
104
|
-
|
|
105
97
|
var _ref2 = callToAction || {},
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
98
|
+
_ref2$active = _ref2.active,
|
|
99
|
+
hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
|
|
109
100
|
|
|
101
|
+
// Create elements
|
|
110
102
|
var items = [!isPlaceholder && hasCallToAction && isMiddleLayout ? /*#__PURE__*/React.createElement(Spacer, {
|
|
111
103
|
key: "spacer-cta-top"
|
|
112
104
|
}) : null, withTitle ? /*#__PURE__*/React.createElement(ScreenElement, {
|
|
@@ -189,14 +181,12 @@ var TextScreen = function TextScreen(_ref) {
|
|
|
189
181
|
className: styles.background
|
|
190
182
|
}) : null);
|
|
191
183
|
};
|
|
192
|
-
|
|
193
184
|
TextScreen.propTypes = propTypes;
|
|
194
185
|
TextScreen.defaultProps = defaultProps;
|
|
195
186
|
var TextScreen$1 = /*#__PURE__*/React.memo(TextScreen);
|
|
196
187
|
|
|
197
188
|
var TextTitleScreen = function TextTitleScreen(_ref) {
|
|
198
|
-
var props = _extends({}, _ref);
|
|
199
|
-
|
|
189
|
+
var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
|
|
200
190
|
return /*#__PURE__*/React.createElement(TextScreen$1, Object.assign({}, props, {
|
|
201
191
|
withTitle: true
|
|
202
192
|
}));
|
|
@@ -204,20 +194,16 @@ var TextTitleScreen = function TextTitleScreen(_ref) {
|
|
|
204
194
|
|
|
205
195
|
var transform = function transform(newStory, _ref) {
|
|
206
196
|
var text = _ref.text,
|
|
207
|
-
|
|
208
|
-
|
|
197
|
+
title = _ref.title;
|
|
209
198
|
var _Heading = Heading1(newStory, title),
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
199
|
+
titleStory = _Heading.story,
|
|
200
|
+
titleComponent = _Heading.component;
|
|
213
201
|
var _Text = Text$1(titleStory, text),
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
202
|
+
textStory = _Text.story,
|
|
203
|
+
textComponent = _Text.component;
|
|
217
204
|
var _Container = Container$1(textStory, [].concat(_toConsumableArray(titleComponent ? [titleComponent] : []), _toConsumableArray(textComponent ? [textComponent] : []))),
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
205
|
+
containerStory = _Container.story,
|
|
206
|
+
containerComponent = _Container.component;
|
|
221
207
|
return _objectSpread(_objectSpread({}, containerStory), {}, {
|
|
222
208
|
components: [].concat(_toConsumableArray(newStory.components || []), _toConsumableArray(containerComponent ? [containerComponent] : []))
|
|
223
209
|
});
|
package/lib/index.js
CHANGED
|
@@ -17,6 +17,7 @@ var Container = require('@micromag/element-container');
|
|
|
17
17
|
var Heading = require('@micromag/element-heading');
|
|
18
18
|
var Layout = require('@micromag/element-layout');
|
|
19
19
|
var Text = require('@micromag/element-text');
|
|
20
|
+
var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructuringEmpty');
|
|
20
21
|
var _extends = require('@babel/runtime/helpers/extends');
|
|
21
22
|
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
22
23
|
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
|
|
@@ -34,11 +35,12 @@ var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
|
|
|
34
35
|
var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
|
|
35
36
|
var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
|
|
36
37
|
var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
|
|
38
|
+
var _objectDestructuringEmpty__default = /*#__PURE__*/_interopDefaultLegacy(_objectDestructuringEmpty);
|
|
37
39
|
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
|
|
38
40
|
var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
|
|
39
41
|
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
|
|
40
42
|
|
|
41
|
-
var styles = {"container":"micromag-screen-text-container","background":"micromag-screen-text-background","disabled":"micromag-screen-text-disabled","hidden":"micromag-screen-text-hidden","placeholder":"micromag-screen-text-placeholder","content":"micromag-screen-text-content","
|
|
43
|
+
var styles = {"container":"micromag-screen-text-container","background":"micromag-screen-text-background","disabled":"micromag-screen-text-disabled","hidden":"micromag-screen-text-hidden","placeholder":"micromag-screen-text-placeholder","content":"micromag-screen-text-content","emptyTitle":"micromag-screen-text-emptyTitle","emptyText":"micromag-screen-text-emptyText","title":"micromag-screen-text-title","withMargin":"micromag-screen-text-withMargin","isPlaceholder":"micromag-screen-text-isPlaceholder","layout":"micromag-screen-text-layout"};
|
|
42
44
|
|
|
43
45
|
var propTypes = {
|
|
44
46
|
layout: PropTypes__default["default"].oneOf(['top', 'middle', 'bottom', 'split']),
|
|
@@ -68,47 +70,39 @@ var defaultProps = {
|
|
|
68
70
|
transitionStagger: 100,
|
|
69
71
|
className: null
|
|
70
72
|
};
|
|
71
|
-
|
|
72
73
|
var TextScreen = function TextScreen(_ref) {
|
|
73
74
|
var _ref4;
|
|
74
|
-
|
|
75
75
|
var layout = _ref.layout,
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
76
|
+
text = _ref.text,
|
|
77
|
+
title = _ref.title,
|
|
78
|
+
withTitle = _ref.withTitle,
|
|
79
|
+
spacing = _ref.spacing,
|
|
80
|
+
background = _ref.background,
|
|
81
|
+
callToAction = _ref.callToAction,
|
|
82
|
+
current = _ref.current,
|
|
83
|
+
active = _ref.active,
|
|
84
|
+
transitions = _ref.transitions,
|
|
85
|
+
transitionStagger = _ref.transitionStagger,
|
|
86
|
+
className = _ref.className;
|
|
88
87
|
var _useScreenSize = contexts.useScreenSize(),
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
88
|
+
width = _useScreenSize.width,
|
|
89
|
+
height = _useScreenSize.height,
|
|
90
|
+
resolution = _useScreenSize.resolution;
|
|
93
91
|
var _useScreenRenderConte = contexts.useScreenRenderContext(),
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
92
|
+
isView = _useScreenRenderConte.isView,
|
|
93
|
+
isPreview = _useScreenRenderConte.isPreview,
|
|
94
|
+
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
95
|
+
isEdit = _useScreenRenderConte.isEdit,
|
|
96
|
+
isStatic = _useScreenRenderConte.isStatic,
|
|
97
|
+
isCapture = _useScreenRenderConte.isCapture;
|
|
101
98
|
var _useViewerContext = contexts.useViewerContext(),
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
99
|
+
viewerTopHeight = _useViewerContext.topHeight,
|
|
100
|
+
viewerBottomHeight = _useViewerContext.bottomHeight,
|
|
101
|
+
viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
|
|
106
102
|
var _useViewerWebView = contexts.useViewerWebView(),
|
|
107
|
-
|
|
108
|
-
|
|
103
|
+
openWebView = _useViewerWebView.open;
|
|
109
104
|
var _usePlaybackContext = contexts.usePlaybackContext(),
|
|
110
|
-
|
|
111
|
-
|
|
105
|
+
muted = _usePlaybackContext.muted;
|
|
112
106
|
var mediaRef = contexts.usePlaybackMediaRef(current);
|
|
113
107
|
var hasTitle = utils.isTextFilled(title);
|
|
114
108
|
var hasText = utils.isTextFilled(text);
|
|
@@ -121,12 +115,11 @@ var TextScreen = function TextScreen(_ref) {
|
|
|
121
115
|
var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
|
|
122
116
|
var backgroundPlaying = current && (isView || isEdit);
|
|
123
117
|
var backgroundShouldLoad = current || active;
|
|
124
|
-
|
|
125
118
|
var _ref2 = callToAction || {},
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
119
|
+
_ref2$active = _ref2.active,
|
|
120
|
+
hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
|
|
129
121
|
|
|
122
|
+
// Create elements
|
|
130
123
|
var items = [!isPlaceholder && hasCallToAction && isMiddleLayout ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
|
|
131
124
|
key: "spacer-cta-top"
|
|
132
125
|
}) : null, withTitle ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
@@ -209,14 +202,12 @@ var TextScreen = function TextScreen(_ref) {
|
|
|
209
202
|
className: styles.background
|
|
210
203
|
}) : null);
|
|
211
204
|
};
|
|
212
|
-
|
|
213
205
|
TextScreen.propTypes = propTypes;
|
|
214
206
|
TextScreen.defaultProps = defaultProps;
|
|
215
207
|
var TextScreen$1 = /*#__PURE__*/React__default["default"].memo(TextScreen);
|
|
216
208
|
|
|
217
209
|
var TextTitleScreen = function TextTitleScreen(_ref) {
|
|
218
|
-
var props = _extends__default["default"]({}, _ref);
|
|
219
|
-
|
|
210
|
+
var props = _extends__default["default"]({}, (_objectDestructuringEmpty__default["default"](_ref), _ref));
|
|
220
211
|
return /*#__PURE__*/React__default["default"].createElement(TextScreen$1, Object.assign({}, props, {
|
|
221
212
|
withTitle: true
|
|
222
213
|
}));
|
|
@@ -224,20 +215,16 @@ var TextTitleScreen = function TextTitleScreen(_ref) {
|
|
|
224
215
|
|
|
225
216
|
var transform = function transform(newStory, _ref) {
|
|
226
217
|
var text = _ref.text,
|
|
227
|
-
|
|
228
|
-
|
|
218
|
+
title = _ref.title;
|
|
229
219
|
var _Heading = appleNews.Heading1(newStory, title),
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
220
|
+
titleStory = _Heading.story,
|
|
221
|
+
titleComponent = _Heading.component;
|
|
233
222
|
var _Text = appleNews.Text(titleStory, text),
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
223
|
+
textStory = _Text.story,
|
|
224
|
+
textComponent = _Text.component;
|
|
237
225
|
var _Container = appleNews.Container(textStory, [].concat(_toConsumableArray__default["default"](titleComponent ? [titleComponent] : []), _toConsumableArray__default["default"](textComponent ? [textComponent] : []))),
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
226
|
+
containerStory = _Container.story,
|
|
227
|
+
containerComponent = _Container.component;
|
|
241
228
|
return _objectSpread__default["default"](_objectSpread__default["default"]({}, containerStory), {}, {
|
|
242
229
|
components: [].concat(_toConsumableArray__default["default"](newStory.components || []), _toConsumableArray__default["default"](containerComponent ? [containerComponent] : []))
|
|
243
230
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-text",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.322",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -49,22 +49,22 @@
|
|
|
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.322",
|
|
53
|
+
"@micromag/element-background": "^0.3.322",
|
|
54
|
+
"@micromag/element-call-to-action": "^0.3.322",
|
|
55
|
+
"@micromag/element-container": "^0.3.322",
|
|
56
|
+
"@micromag/element-heading": "^0.3.322",
|
|
57
|
+
"@micromag/element-layout": "^0.3.322",
|
|
58
|
+
"@micromag/element-text": "^0.3.322",
|
|
59
|
+
"@micromag/transforms": "^0.3.322",
|
|
60
60
|
"classnames": "^2.2.6",
|
|
61
61
|
"lodash": "^4.17.21",
|
|
62
62
|
"prop-types": "^15.7.2",
|
|
63
63
|
"react-intl": "^5.12.1",
|
|
64
|
-
"uuid": "^
|
|
64
|
+
"uuid": "^9.0.0"
|
|
65
65
|
},
|
|
66
66
|
"publishConfig": {
|
|
67
67
|
"access": "public"
|
|
68
68
|
},
|
|
69
|
-
"gitHead": "
|
|
69
|
+
"gitHead": "2dfe09ad5a9ac720e4bfbffcb6371fc31c24fa9f"
|
|
70
70
|
}
|