wix-style-react/dist/src/utils/ButtonHelpers/index.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.renderButtonBlock = exports.getSkinBackground = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireDefault(require("react"));

var _Layout = require("../../Layout");

var _Box = _interopRequireDefault(require("../../Box"));

var skinBackgroundRules = [{
  when: function when(skin) {
    return skin === 'standard';
  },
  output: ''
}, {
  when: function when(skin) {
    return skin === 'inverted';
  },
  output: ''
}, {
  when: function when(skin) {
    return skin === 'destructive';
  },
  output: ''
}, {
  when: function when(skin) {
    return skin === 'premium';
  },
  output: ''
}, {
  when: function when(skin) {
    return skin === 'light';
  },
  output: '#162d3d'
}, {
  when: function when(skin) {
    return skin === 'transparent';
  },
  output: '#4eb7f5'
}, {
  when: function when(skin) {
    return skin === 'dark';
  },
  output: '#fef0ba'
}, {
  when: function when(skin) {
    return skin === 'premium-light';
  },
  output: '#162d3d'
}, {
  when: function when() {
    return true;
  },
  output: ''
}];

var getSkinBackground = function getSkinBackground(skin) {
  return skinBackgroundRules.find(function (_ref) {
    var when = _ref.when;
    return when(skin);
  }).output;
};

exports.getSkinBackground = getSkinBackground;

var renderButtonBlock = function renderButtonBlock(_ref2) {
  var Component = _ref2.Component,
      _ref2$props = _ref2.props,
      props = _ref2$props === void 0 ? {} : _ref2$props,
      skins = _ref2.skins;
  return /*#__PURE__*/_react["default"].createElement("div", {
    style: {
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      backgroundColor: '#f0f4f7'
    }
  }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    width: "400px"
  }, /*#__PURE__*/_react["default"].createElement(_Layout.Layout, null, /*#__PURE__*/_react["default"].createElement(_Layout.Cell, {
    span: 6
  }, skins.map(function (_ref3, index) {
    var skin = _ref3.skin,
        background = _ref3.background;
    return /*#__PURE__*/_react["default"].createElement("div", {
      key: index,
      style: {
        background: background,
        margin: '5px 0'
      }
    }, /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
      children: skin
    }, props, {
      fullWidth: true,
      skin: skin
    })));
  })), /*#__PURE__*/_react["default"].createElement(_Layout.Cell, {
    span: 6
  }, skins.map(function (_ref4, index) {
    var skin = _ref4.skin,
        background = _ref4.background;
    return /*#__PURE__*/_react["default"].createElement("div", {
      key: index,
      style: {
        background: background,
        margin: '5px 0'
      }
    }, /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
      children: skin
    }, props, {
      fullWidth: true,
      skin: skin,
      disabled: true
    })));
  })))));
};

exports.renderButtonBlock = renderButtonBlock;