@guestbell/react-page-plugins/build/background/Renderer/BackgroundHtmlRenderer.js

Plugins we use in GuestBell for working with amazing react-page package

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import { colorToString } from '@react-page/editor';
import * as React from 'react';
import { ModeEnum } from '../types/ModeEnum';
import PaddingComponent from '../../common/utils/PaddingComponent';
import { useBackgroundPreviewState } from '../Provider/BackgroundProvider';
var getStyles = function getStyles(props, previewState) {
  var _props$data = props.data,
    bgImage = _props$data.bgImage,
    _props$data$modeFlag = _props$data.modeFlag,
    modeFlag = _props$data$modeFlag === void 0 ? props.defaultModeFlag : _props$data$modeFlag,
    _props$data$isParalla = _props$data.isParallax,
    isParallax = _props$data$isParalla === void 0 ? props.defaultIsParallax : _props$data$isParalla,
    _props$data$backgroun = _props$data.backgroundColor,
    backgroundColor = _props$data$backgroun === void 0 ? props.defaultBackgroundColor : _props$data$backgroun,
    _props$data$gradients = _props$data.gradients,
    gradients = _props$data$gradients === void 0 ? [] : _props$data$gradients;
  var styles = {};
  if (modeFlag & ModeEnum.GRADIENT_MODE_FLAG) {
    var usedGradients = gradients.filter(function (g) {
      return g.colors && g.colors.length;
    });
    var usedGradientsString = usedGradients.map(function (g, i) {
      var firstColor = g.colors[0].color;
      var firstColorStr = colorToString(firstColor);
      var deg = i === previewState.gradientDegPreviewIndex && previewState.gradientDegPreview !== undefined ? previewState.gradientDegPreview : g.deg;
      var opacity = i === previewState.gradientOpacityPreviewIndex && previewState.gradientOpacityPreview !== undefined ? previewState.gradientOpacityPreview : g.opacity;
      return 'linear-gradient(' + deg + 'deg, ' + (g.colors.length !== 1 ? g.colors.map(function (c, cpIndex) {
        var color = i === previewState.gradientColorPreviewIndex && cpIndex === previewState.gradientColorPreviewColorIndex && previewState.gradientColorPreview !== undefined ? previewState.gradientColorPreview : c.color;
        var colorWithOpacity = _objectSpread(_objectSpread({}, color), {}, {
          a: color.a !== undefined ? color.a * opacity : opacity
        });
        return colorToString(colorWithOpacity);
      }).join(', ') : firstColorStr + ', ' + firstColorStr) + ')';
    }).join(', ');
    if (usedGradientsString !== '') {
      styles = _objectSpread(_objectSpread({}, styles), {}, {
        background: usedGradientsString
      });
    }
  }
  if (modeFlag & ModeEnum.COLOR_MODE_FLAG) {
    var colorStr = colorToString(previewState.backgroundColorPreview ? previewState.backgroundColorPreview : backgroundColor);
    var modeStr = "linear-gradient(".concat(colorStr, ", ").concat(colorStr, ")");
    styles = _objectSpread(_objectSpread({}, styles), {}, {
      background: styles.background ? styles.background + ', ' + modeStr : modeStr
    });
  }
  if ((modeFlag & ModeEnum.IMAGE_MODE_FLAG) !== 0 && (bgImage || props.data.bgSrc)) {
    var backgroundFinal = bgImage ? bgImage.src : props.data.bgSrc;
    var _modeStr = "url('".concat(backgroundFinal, "') center / cover no-repeat") + (isParallax ? ' fixed' : '');
    styles = _objectSpread(_objectSpread({}, styles), {}, {
      background: styles.background ? styles.background + ', ' + _modeStr : _modeStr
    });
  }
  return styles;
};
var BackgroundHtmlRenderer = function BackgroundHtmlRenderer(props) {
  var children = props.children,
    _props$data2 = props.data,
    _props$data2$darken = _props$data2.darken,
    darken = _props$data2$darken === void 0 ? props.defaultDarken : _props$data2$darken,
    _props$data2$lighten = _props$data2.lighten,
    lighten = _props$data2$lighten === void 0 ? props.defaultLighten : _props$data2$lighten,
    _props$data2$hasPaddi = _props$data2.hasPadding,
    hasPadding = _props$data2$hasPaddi === void 0 ? props.defaultHasPadding : _props$data2$hasPaddi;
  var previewState = useBackgroundPreviewState();
  var darkenFinal = previewState.darkenPreview !== undefined ? previewState.darkenPreview : darken;
  var lightenFinal = previewState.lightenPreview !== undefined ? previewState.lightenPreview : lighten;
  var containerStyles = React.useMemo(function () {
    return getStyles(props, previewState);
  }, [props, previewState]);
  return /*#__PURE__*/React.createElement("div", {
    className: "ory-plugins-layout-background",
    style: _objectSpread(_objectSpread({}, containerStyles), hasPadding ? {} : {
      padding: 0
    })
  }, /*#__PURE__*/React.createElement(PaddingComponent, {
    state: props.data
  }, /*#__PURE__*/React.createElement("div", {
    className: "ory-plugins-layout-background__backstretch",
    style: {
      // tslint:disable-next-line:max-line-length
      backgroundImage: "linear-gradient(rgba(0, 0, 0, ".concat(darkenFinal, "), rgba(0, 0, 0, ").concat(darkenFinal, ")),linear-gradient(rgba(255, 255, 255, ").concat(lightenFinal, "), rgba(255, 255, 255, ").concat(lightenFinal, "))")
    }
  }), children));
};
export default BackgroundHtmlRenderer;
//# sourceMappingURL=BackgroundHtmlRenderer.js.map