cloudhub-react-components/dist/components/Block.js

Various components to use in react projects

"use strict";

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

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

var _Grow = _interopRequireDefault(require("@material-ui/core/Grow"));

var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));

var _classnames = _interopRequireDefault(require("classnames"));

var _Colors = _interopRequireDefault(require("./theme/Colors"));

var _Sizes = _interopRequireDefault(require("./theme/Sizes"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var Block =
/*#__PURE__*/
function (_Component) {
  _inherits(Block, _Component);

  function Block() {
    _classCallCheck(this, Block);

    return _possibleConstructorReturn(this, _getPrototypeOf(Block).apply(this, arguments));
  }

  _createClass(Block, [{
    key: "handleMargins",
    value: function handleMargins() {
      var margin = this.props.margin;

      if (typeof margin === 'number') {
        return {
          marginTop: margin,
          marginRight: margin,
          marginBottom: margin,
          marginLeft: margin
        };
      }

      if (_typeof(margin) === 'object') {
        var marginSize = Object.keys(margin).length;

        switch (marginSize) {
          case 1:
            return {
              marginTop: margin[0],
              marginRight: margin[0],
              marginBottom: margin[0],
              marginLeft: margin[0]
            };

          case 2:
            return {
              marginTop: margin[0],
              marginRight: margin[1],
              marginBottom: margin[0],
              marginLeft: margin[1]
            };

          case 3:
            return {
              marginTop: margin[0],
              marginRight: margin[1],
              marginBottom: margin[2],
              marginLeft: margin[1]
            };

          default:
            return {
              marginTop: margin[0],
              marginRight: margin[1],
              marginBottom: margin[2],
              marginLeft: margin[3]
            };
        }
      }

      return null;
    }
  }, {
    key: "handlePaddings",
    value: function handlePaddings() {
      var padding = this.props.padding;

      if (typeof padding === 'number') {
        return {
          paddingTop: padding,
          paddingRight: padding,
          paddingBottom: padding,
          paddingLeft: padding
        };
      }

      if (_typeof(padding) === 'object') {
        var paddingSize = Object.keys(padding).length;

        switch (paddingSize) {
          case 1:
            return {
              paddingTop: padding[0],
              paddingRight: padding[0],
              paddingBottom: padding[0],
              paddingLeft: padding[0]
            };

          case 2:
            return {
              paddingTop: padding[0],
              paddingRight: padding[1],
              paddingBottom: padding[0],
              paddingLeft: padding[1]
            };

          case 3:
            return {
              paddingTop: padding[0],
              paddingRight: padding[1],
              paddingBottom: padding[2],
              paddingLeft: padding[1]
            };

          default:
            return {
              paddingTop: padding[0],
              paddingRight: padding[1],
              paddingBottom: padding[2],
              paddingLeft: padding[3]
            };
        }
      }

      return null;
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          classes = _this$props.classes,
          flex = _this$props.flex,
          row = _this$props.row,
          column = _this$props.column,
          center = _this$props.center,
          middle = _this$props.middle,
          left = _this$props.left,
          right = _this$props.right,
          top = _this$props.top,
          bottom = _this$props.bottom,
          margin = _this$props.margin,
          padding = _this$props.padding,
          card = _this$props.card,
          shadow = _this$props.shadow,
          shadowhover = _this$props.shadowhover,
          elevation = _this$props.elevation,
          color = _this$props.color,
          space = _this$props.space,
          style = _this$props.style,
          animated = _this$props.animated,
          children = _this$props.children,
          visible = _this$props.visible,
          props = _objectWithoutProperties(_this$props, ["classes", "flex", "row", "column", "center", "middle", "left", "right", "top", "bottom", "margin", "padding", "card", "shadow", "shadowhover", "elevation", "color", "space", "style", "animated", "children", "visible"]);

      var blockStyles = _objectSpread({}, flex === false ? {
        display: 'flex',
        position: 'relative',
        flexDirection: 'column'
      } : _objectSpread({}, styles.block), {}, row && styles.row, {}, column && styles.column, {}, center && (row ? {
        justifyContent: 'center'
      } : styles.center), {}, middle && (row ? {
        alignItems: 'center'
      } : styles.middle), {}, left && (row ? {
        justifyContent: 'flex-start'
      } : styles.left), {}, right && (row ? {
        justifyContent: 'flex-end'
      } : styles.right), {}, top && (row ? {
        alignItems: 'flex-start'
      } : styles.top), {}, bottom && (row ? {
        alignItems: 'flex-end'
      } : styles.bottom), {}, margin && _objectSpread({}, this.handleMargins()), {}, padding && _objectSpread({}, this.handlePaddings()), {}, card && styles.card, {}, shadow && styles.shadow, {}, shadowhover && styles.shadowhover, {}, elevation && {
        elevation: elevation
      }, {}, space && {
        justifyContent: "space-".concat(space)
      }, {}, color && styles[color], {}, color && !styles[color] && {
        backgroundColor: color
      }, {}, style);

      if (animated) {
        return _react.default.createElement(_Grow.default, {
          in: visible
        }, _react.default.createElement("div", _extends({
          style: blockStyles
        }, props), children));
      }

      return _react.default.createElement("div", _extends({
        className: (0, _classnames.default)(_defineProperty({}, classes.shadowhover, shadowhover)),
        style: blockStyles
      }, props), children);
    }
  }]);

  return Block;
}(_react.Component);

_defineProperty(Block, "defaultProps", {
  visible: true
});

var styles = {
  block: {
    flex: 1,
    display: 'flex',
    position: 'relative',
    flexDirection: 'column'
  },
  row: {
    flexDirection: 'row'
  },
  column: {
    flexDirection: 'column'
  },
  card: {
    borderRadius: _Sizes.default.border
  },
  center: {
    alignItems: 'center'
  },
  middle: {
    justifyContent: 'center'
  },
  left: {
    alignItems: 'flex-start'
  },
  right: {
    alignItems: 'flex-end'
  },
  top: {
    justifyContent: 'flex-start'
  },
  bottom: {
    justifyContent: 'flex-end'
  },
  shadow: {
    // boxShadow: '0 4px 8px 0 rgba(0,0,0,0.2)',
    boxShadow: '0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1)',
    transition: 'all .2s ease-in-out'
  },
  accent: {
    backgroundColor: _Colors.default.accent
  },
  primary: {
    backgroundColor: _Colors.default.primary
  },
  secondary: {
    backgroundColor: _Colors.default.secondary
  },
  tertiary: {
    backgroundColor: _Colors.default.tertiary
  },
  black: {
    backgroundColor: _Colors.default.black
  },
  white: {
    backgroundColor: _Colors.default.white
  },
  gray: {
    backgroundColor: _Colors.default.gray
  },
  gray2: {
    backgroundColor: _Colors.default.gray2
  },
  gray3: {
    backgroundColor: _Colors.default.gray3
  },
  gray4: {
    backgroundColor: _Colors.default.gray4
  },
  dark: {
    backgroundColor: _Colors.default.dark
  },
  mistyWhite: {
    backgroundColor: _Colors.default.mistyWhite
  },
  milkyWhite: {
    backgroundColor: _Colors.default.milkyWhite
  },
  error: {
    backgroundColor: _Colors.default.error
  },
  clear: {
    backgroundColor: _Colors.default.clear
  },
  facebook: {
    backgroundColor: _Colors.default.facebook
  },
  transparent: {
    backgroundColor: _Colors.default.transparent
  },
  silver: {
    backgroundColor: _Colors.default.silver
  },
  steel: {
    backgroundColor: _Colors.default.steel
  },
  ricePaper: {
    backgroundColor: _Colors.default.ricePaper
  },
  frost: {
    backgroundColor: _Colors.default.frost
  },
  cloud: {
    backgroundColor: _Colors.default.cloud
  },
  windowTint: {
    backgroundColor: _Colors.default.windowTint
  },
  panther: {
    backgroundColor: _Colors.default.panther
  },
  charcoal: {
    backgroundColor: _Colors.default.charcoal
  },
  coal: {
    backgroundColor: _Colors.default.coal
  },
  bloodOrange: {
    backgroundColor: _Colors.default.bloodOrange
  },
  snow: {
    backgroundColor: _Colors.default.snow
  },
  ember: {
    backgroundColor: _Colors.default.ember
  },
  fire: {
    backgroundColor: _Colors.default.fire
  },
  drawer: {
    backgroundColor: _Colors.default.drawer
  },
  eggplant: {
    backgroundColor: _Colors.default.eggplant
  },
  twitterColor: {
    backgroundColor: _Colors.default.twitterColor
  },
  facebookColor: {
    backgroundColor: _Colors.default.twitterColor
  },
  googleColor: {
    backgroundColor: _Colors.default.twitterColor
  },
  linkedinColor: {
    backgroundColor: _Colors.default.twitterColor
  },
  pinterestColor: {
    backgroundColor: _Colors.default.twitterColor
  },
  youtubeColor: {
    backgroundColor: _Colors.default.twitterColor
  },
  tumblrColor: {
    backgroundColor: _Colors.default.twitterColor
  },
  behanceColor: {
    backgroundColor: _Colors.default.twitterColor
  },
  dribbbleColor: {
    backgroundColor: _Colors.default.twitterColor
  },
  redditColor: {
    backgroundColor: _Colors.default.twitterColor
  },
  instagramColor: {
    backgroundColor: _Colors.default.twitterColor
  },
  success: {
    backgroundColor: _Colors.default.successColor[0]
  },
  info: {
    backgroundColor: _Colors.default.infoColor[0]
  },
  rose: {
    backgroundColor: _Colors.default.roseColor[0]
  },
  warning: {
    backgroundColor: _Colors.default.warningColor[0]
  },
  danger: {
    backgroundColor: _Colors.default.dangerColor[0]
  }
};
exports.styles = styles;

var classStyles = function classStyles() {
  return {
    shadowhover: {
      boxShadow: '0 4px 8px 0 rgba(0,0,0,0.2)',
      '&:hover': {
        boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)'
      }
    }
  };
};

var _default = (0, _withStyles.default)(classStyles)(Block);

exports.default = _default;
//# sourceMappingURL=Block.js.map