@micromag/element-background 0.3.54 → 0.3.57

package/es/index.js

@@ -1,9 +1,9 @@
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import React, { useRef, useMemo } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useRef, useMemo } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { getStyleFromColor, getOptimalImageUrl, getLayersFromBackground } from '@micromag/core/utils';
 import { getSizeWithinBounds } from '@folklore/size';
@@ -154,6 +154,8 @@ var propTypes = {
   playing: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
+  layerClassName: PropTypes.string,
+  backgroundClassName: PropTypes.string,
   loadingMode: PropTypes.string,
   shouldLoad: PropTypes.bool
 };
@@ -164,6 +166,8 @@ var defaultProps = {
   playing: false,
   children: null,
   className: null,
+  layerClassName: null,
+  backgroundClassName: null,
   loadingMode: 'lazy',
   shouldLoad: true
 };
@@ -175,6 +179,8 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
       playing = _ref.playing,
       children = _ref.children,
       className = _ref.className,
+      layerClassName = _ref.layerClassName,
+      backgroundClassName = _ref.backgroundClassName,
       loadingMode = _ref.loadingMode,
       shouldLoad = _ref.shouldLoad;
   var hasSize = width > 0 && height > 0;
@@ -204,14 +210,14 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
 
     return /*#__PURE__*/React.createElement("div", {
       key: "background-".concat(index),
-      className: classNames([styles.layer, (_ref4 = {}, _defineProperty(_ref4, styles.bottom, verticalAlign === 'bottom'), _defineProperty(_ref4, styles.right, horizontalAlign === 'right'), _ref4)]),
+      className: classNames([styles.layer, (_ref4 = {}, _defineProperty(_ref4, styles.bottom, verticalAlign === 'bottom'), _defineProperty(_ref4, styles.right, horizontalAlign === 'right'), _defineProperty(_ref4, layerClassName, layerClassName !== null), _ref4)]),
       style: {
         zIndex: maxZIndex - index
       }
     }, /*#__PURE__*/React.createElement(Background, Object.assign({
       width: width,
       height: height,
-      className: styles.background,
+      className: classNames([styles.background, _defineProperty({}, backgroundClassName, backgroundClassName !== null)]),
       playing: playing,
       horizontalAlign: horizontalAlign,
       verticalAlign: verticalAlign,

package/lib/index.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var React = require('react');
-var PropTypes = require('prop-types');
 var classNames = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
 var core = require('@micromag/core');
 var utils = require('@micromag/core/utils');
 var size = require('@folklore/size');
@@ -18,9 +18,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Video__default = /*#__PURE__*/_interopDefaultLegacy(Video);
 
 var styles = {"container":"micromag-element-background-container","layer":"micromag-element-background-layer","layers":"micromag-element-background-layers","video":"micromag-element-background-video","videoContainer":"micromag-element-background-videoContainer","right":"micromag-element-background-right","background":"micromag-element-background-background","bottom":"micromag-element-background-bottom"};
@@ -168,6 +168,8 @@ var propTypes = {
   playing: PropTypes__default["default"].bool,
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string,
+  layerClassName: PropTypes__default["default"].string,
+  backgroundClassName: PropTypes__default["default"].string,
   loadingMode: PropTypes__default["default"].string,
   shouldLoad: PropTypes__default["default"].bool
 };
@@ -178,6 +180,8 @@ var defaultProps = {
   playing: false,
   children: null,
   className: null,
+  layerClassName: null,
+  backgroundClassName: null,
   loadingMode: 'lazy',
   shouldLoad: true
 };
@@ -189,6 +193,8 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
       playing = _ref.playing,
       children = _ref.children,
       className = _ref.className,
+      layerClassName = _ref.layerClassName,
+      backgroundClassName = _ref.backgroundClassName,
       loadingMode = _ref.loadingMode,
       shouldLoad = _ref.shouldLoad;
   var hasSize = width > 0 && height > 0;
@@ -218,14 +224,14 @@ var BackgroundLayers = function BackgroundLayers(_ref) {
 
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: "background-".concat(index),
-      className: classNames__default["default"]([styles.layer, (_ref4 = {}, _defineProperty__default["default"](_ref4, styles.bottom, verticalAlign === 'bottom'), _defineProperty__default["default"](_ref4, styles.right, horizontalAlign === 'right'), _ref4)]),
+      className: classNames__default["default"]([styles.layer, (_ref4 = {}, _defineProperty__default["default"](_ref4, styles.bottom, verticalAlign === 'bottom'), _defineProperty__default["default"](_ref4, styles.right, horizontalAlign === 'right'), _defineProperty__default["default"](_ref4, layerClassName, layerClassName !== null), _ref4)]),
       style: {
         zIndex: maxZIndex - index
       }
     }, /*#__PURE__*/React__default["default"].createElement(Background, Object.assign({
       width: width,
       height: height,
-      className: styles.background,
+      className: classNames__default["default"]([styles.background, _defineProperty__default["default"]({}, backgroundClassName, backgroundClassName !== null)]),
       playing: playing,
       horizontalAlign: horizontalAlign,
       verticalAlign: verticalAlign,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-background",
-    "version": "0.3.54",
+    "version": "0.3.57",
     "description": "",
     "keywords": [
         "javascript"
@@ -48,8 +48,8 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/size": "^0.1.15",
-        "@micromag/core": "^0.3.54",
-        "@micromag/element-video": "^0.3.54",
+        "@micromag/core": "^0.3.57",
+        "@micromag/element-video": "^0.3.57",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -59,5 +59,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "e256975ebe532e65a8d1d8f8a909326e56dd3b2b"
+    "gitHead": "0cd1abafd1bee77d9dccbedde58f7b83f2351794"
 }