@micromag/element-background 0.3.420 → 0.3.429
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 +1 -2
- package/lib/index.js +50 -61
- package/package.json +10 -4
package/es/index.js
CHANGED
|
@@ -229,7 +229,6 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
|
|
|
229
229
|
}, /*#__PURE__*/React.createElement("div", {
|
|
230
230
|
className: styles.layers
|
|
231
231
|
}, layers.map(function (_ref3, index) {
|
|
232
|
-
var _ref4;
|
|
233
232
|
var _ref3$horizontalAlign = _ref3.horizontalAlign,
|
|
234
233
|
horizontalAlign = _ref3$horizontalAlign === void 0 ? undefined : _ref3$horizontalAlign,
|
|
235
234
|
_ref3$verticalAlign = _ref3.verticalAlign,
|
|
@@ -237,7 +236,7 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
|
|
|
237
236
|
layer = _objectWithoutProperties(_ref3, _excluded);
|
|
238
237
|
return /*#__PURE__*/React.createElement("div", {
|
|
239
238
|
key: "background-".concat(index),
|
|
240
|
-
className: classNames([styles.layer, (
|
|
239
|
+
className: classNames([styles.layer, _defineProperty(_defineProperty(_defineProperty({}, styles.bottom, verticalAlign === 'bottom'), styles.right, horizontalAlign === 'right'), layerClassName, layerClassName !== null)]),
|
|
241
240
|
style: {
|
|
242
241
|
zIndex: maxZIndex - index
|
|
243
242
|
}
|
package/lib/index.js
CHANGED
|
@@ -13,40 +13,30 @@ var utils = require('@micromag/core/utils');
|
|
|
13
13
|
var size = require('@folklore/size');
|
|
14
14
|
var Video = require('@micromag/element-video');
|
|
15
15
|
|
|
16
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
17
|
-
|
|
18
|
-
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
19
|
-
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
20
|
-
var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
|
|
21
|
-
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
|
|
22
|
-
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
23
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
24
|
-
var Video__default = /*#__PURE__*/_interopDefaultLegacy(Video);
|
|
25
|
-
|
|
26
16
|
var styles = {"layers":"micromag-element-background-layers","layer":"micromag-element-background-layer","videoContainer":"micromag-element-background-videoContainer","video":"micromag-element-background-video","container":"micromag-element-background-container","right":"micromag-element-background-right","background":"micromag-element-background-background","bottom":"micromag-element-background-bottom"};
|
|
27
17
|
|
|
28
18
|
var propTypes$1 = {
|
|
29
|
-
width:
|
|
30
|
-
height:
|
|
31
|
-
resolution:
|
|
32
|
-
fit:
|
|
33
|
-
horizontalAlign:
|
|
34
|
-
verticalAlign:
|
|
35
|
-
repeat:
|
|
19
|
+
width: PropTypes.number,
|
|
20
|
+
height: PropTypes.number,
|
|
21
|
+
resolution: PropTypes.number,
|
|
22
|
+
fit: PropTypes.oneOf(['contain', 'cover']),
|
|
23
|
+
horizontalAlign: PropTypes.string,
|
|
24
|
+
verticalAlign: PropTypes.string,
|
|
25
|
+
repeat: PropTypes.bool,
|
|
36
26
|
color: core.PropTypes.color,
|
|
37
|
-
media:
|
|
38
|
-
mediaRef:
|
|
27
|
+
media: PropTypes.oneOfType([core.PropTypes.imageMedia, core.PropTypes.videoMedia]),
|
|
28
|
+
mediaRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
|
|
39
29
|
// eslint-disable-next-line react/forbid-prop-types
|
|
40
|
-
current:
|
|
30
|
+
current: PropTypes.any
|
|
41
31
|
})]),
|
|
42
|
-
className:
|
|
43
|
-
playing:
|
|
44
|
-
muted:
|
|
45
|
-
children:
|
|
46
|
-
loadingMode:
|
|
47
|
-
shouldLoad:
|
|
48
|
-
withoutVideo:
|
|
49
|
-
forceMuted:
|
|
32
|
+
className: PropTypes.string,
|
|
33
|
+
playing: PropTypes.bool,
|
|
34
|
+
muted: PropTypes.bool,
|
|
35
|
+
children: PropTypes.node,
|
|
36
|
+
loadingMode: PropTypes.string,
|
|
37
|
+
shouldLoad: PropTypes.bool,
|
|
38
|
+
withoutVideo: PropTypes.bool,
|
|
39
|
+
forceMuted: PropTypes.bool
|
|
50
40
|
};
|
|
51
41
|
var defaultProps$1 = {
|
|
52
42
|
width: null,
|
|
@@ -110,7 +100,7 @@ var Background = function Background(_ref) {
|
|
|
110
100
|
var finalShouldLoad = wasLoadedRef.current;
|
|
111
101
|
|
|
112
102
|
// color
|
|
113
|
-
var containerStyle =
|
|
103
|
+
var containerStyle = _objectSpread({
|
|
114
104
|
width: width,
|
|
115
105
|
height: height
|
|
116
106
|
}, utils.getStyleFromColor(color));
|
|
@@ -151,13 +141,13 @@ var Background = function Background(_ref) {
|
|
|
151
141
|
videoContainerStyle.objectFit = 'cover';
|
|
152
142
|
}
|
|
153
143
|
}
|
|
154
|
-
return /*#__PURE__*/
|
|
155
|
-
className:
|
|
144
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
145
|
+
className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
|
|
156
146
|
style: containerStyle
|
|
157
|
-
}, isVideo && shouldLoad && !withoutVideo ? /*#__PURE__*/
|
|
147
|
+
}, isVideo && shouldLoad && !withoutVideo ? /*#__PURE__*/React.createElement("div", {
|
|
158
148
|
className: styles.videoContainer,
|
|
159
149
|
style: videoContainerStyle
|
|
160
|
-
}, /*#__PURE__*/
|
|
150
|
+
}, /*#__PURE__*/React.createElement(Video, {
|
|
161
151
|
className: styles.video,
|
|
162
152
|
media: media,
|
|
163
153
|
mediaRef: !forceMuted ? mediaRef : null,
|
|
@@ -168,7 +158,7 @@ var Background = function Background(_ref) {
|
|
|
168
158
|
autoPlay: true,
|
|
169
159
|
loop: true,
|
|
170
160
|
withPoster: true
|
|
171
|
-
})) : null, /*#__PURE__*/
|
|
161
|
+
})) : null, /*#__PURE__*/React.createElement("div", {
|
|
172
162
|
className: styles.content
|
|
173
163
|
}, children));
|
|
174
164
|
};
|
|
@@ -177,23 +167,23 @@ Background.defaultProps = defaultProps$1;
|
|
|
177
167
|
|
|
178
168
|
var _excluded = ["horizontalAlign", "verticalAlign"];
|
|
179
169
|
var propTypes = {
|
|
180
|
-
width:
|
|
181
|
-
height:
|
|
182
|
-
resolution:
|
|
183
|
-
background:
|
|
184
|
-
playing:
|
|
185
|
-
muted:
|
|
186
|
-
children:
|
|
187
|
-
className:
|
|
188
|
-
layerClassName:
|
|
189
|
-
backgroundClassName:
|
|
190
|
-
loadingMode:
|
|
191
|
-
mediaRef:
|
|
170
|
+
width: PropTypes.number,
|
|
171
|
+
height: PropTypes.number,
|
|
172
|
+
resolution: PropTypes.number,
|
|
173
|
+
background: PropTypes.oneOfType([core.PropTypes.backgroundElement, PropTypes.arrayOf(core.PropTypes.backgroundElement)]),
|
|
174
|
+
playing: PropTypes.bool,
|
|
175
|
+
muted: PropTypes.bool,
|
|
176
|
+
children: PropTypes.node,
|
|
177
|
+
className: PropTypes.string,
|
|
178
|
+
layerClassName: PropTypes.string,
|
|
179
|
+
backgroundClassName: PropTypes.string,
|
|
180
|
+
loadingMode: PropTypes.string,
|
|
181
|
+
mediaRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
|
|
192
182
|
// eslint-disable-next-line react/forbid-prop-types
|
|
193
|
-
current:
|
|
183
|
+
current: PropTypes.any
|
|
194
184
|
})]),
|
|
195
|
-
shouldLoad:
|
|
196
|
-
withoutVideo:
|
|
185
|
+
shouldLoad: PropTypes.bool,
|
|
186
|
+
withoutVideo: PropTypes.bool
|
|
197
187
|
};
|
|
198
188
|
var defaultProps = {
|
|
199
189
|
width: null,
|
|
@@ -233,33 +223,32 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
|
|
|
233
223
|
var maxZIndex = layers.length;
|
|
234
224
|
|
|
235
225
|
// color
|
|
236
|
-
var containerStyle =
|
|
226
|
+
var containerStyle = _objectSpread({}, hasSize ? {
|
|
237
227
|
width: width,
|
|
238
228
|
height: height
|
|
239
229
|
} : null);
|
|
240
|
-
return /*#__PURE__*/
|
|
241
|
-
className:
|
|
230
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
231
|
+
className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
|
|
242
232
|
style: containerStyle
|
|
243
|
-
}, /*#__PURE__*/
|
|
233
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
244
234
|
className: styles.layers
|
|
245
235
|
}, layers.map(function (_ref3, index) {
|
|
246
|
-
var _ref4;
|
|
247
236
|
var _ref3$horizontalAlign = _ref3.horizontalAlign,
|
|
248
237
|
horizontalAlign = _ref3$horizontalAlign === void 0 ? undefined : _ref3$horizontalAlign,
|
|
249
238
|
_ref3$verticalAlign = _ref3.verticalAlign,
|
|
250
239
|
verticalAlign = _ref3$verticalAlign === void 0 ? undefined : _ref3$verticalAlign,
|
|
251
|
-
layer =
|
|
252
|
-
return /*#__PURE__*/
|
|
240
|
+
layer = _objectWithoutProperties(_ref3, _excluded);
|
|
241
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
253
242
|
key: "background-".concat(index),
|
|
254
|
-
className:
|
|
243
|
+
className: classNames([styles.layer, _defineProperty(_defineProperty(_defineProperty({}, styles.bottom, verticalAlign === 'bottom'), styles.right, horizontalAlign === 'right'), layerClassName, layerClassName !== null)]),
|
|
255
244
|
style: {
|
|
256
245
|
zIndex: maxZIndex - index
|
|
257
246
|
}
|
|
258
|
-
}, /*#__PURE__*/
|
|
247
|
+
}, /*#__PURE__*/React.createElement(Background, Object.assign({
|
|
259
248
|
width: width,
|
|
260
249
|
height: height,
|
|
261
250
|
resolution: resolution,
|
|
262
|
-
className:
|
|
251
|
+
className: classNames([styles.background, _defineProperty({}, backgroundClassName, backgroundClassName !== null)]),
|
|
263
252
|
playing: playing,
|
|
264
253
|
muted: muted,
|
|
265
254
|
horizontalAlign: horizontalAlign,
|
|
@@ -269,7 +258,7 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
|
|
|
269
258
|
mediaRef: mediaRef,
|
|
270
259
|
withoutVideo: withoutVideo
|
|
271
260
|
}, layer)));
|
|
272
|
-
})), /*#__PURE__*/
|
|
261
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
273
262
|
className: styles.content
|
|
274
263
|
}, children));
|
|
275
264
|
};
|
|
@@ -278,4 +267,4 @@ BackgroundLayers.defaultProps = defaultProps;
|
|
|
278
267
|
|
|
279
268
|
exports.Background = Background;
|
|
280
269
|
exports.BackgroundLayers = BackgroundLayers;
|
|
281
|
-
exports
|
|
270
|
+
exports.default = BackgroundLayers;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/element-background",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.429",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [
|
|
@@ -32,6 +32,12 @@
|
|
|
32
32
|
"license": "ISC",
|
|
33
33
|
"main": "lib/index.js",
|
|
34
34
|
"module": "es/index.js",
|
|
35
|
+
"exports": {
|
|
36
|
+
".": {
|
|
37
|
+
"require": "./lib/index.js",
|
|
38
|
+
"import": "./es/index.js"
|
|
39
|
+
}
|
|
40
|
+
},
|
|
35
41
|
"files": [
|
|
36
42
|
"lib",
|
|
37
43
|
"es",
|
|
@@ -49,8 +55,8 @@
|
|
|
49
55
|
"dependencies": {
|
|
50
56
|
"@babel/runtime": "^7.13.10",
|
|
51
57
|
"@folklore/size": "^0.1.20",
|
|
52
|
-
"@micromag/core": "^0.3.
|
|
53
|
-
"@micromag/element-video": "^0.3.
|
|
58
|
+
"@micromag/core": "^0.3.429",
|
|
59
|
+
"@micromag/element-video": "^0.3.429",
|
|
54
60
|
"classnames": "^2.2.6",
|
|
55
61
|
"lodash": "^4.17.21",
|
|
56
62
|
"prop-types": "^15.7.2",
|
|
@@ -61,5 +67,5 @@
|
|
|
61
67
|
"access": "public",
|
|
62
68
|
"registry": "https://registry.npmjs.org/"
|
|
63
69
|
},
|
|
64
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "f15e72b88ecfda4c54b87626513149b58572c52b"
|
|
65
71
|
}
|