cloudhubui
Version:
Various components to use in react projects
461 lines (416 loc) • 13.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _styles = require("@material-ui/styles");
var _Slide = _interopRequireDefault(require("@material-ui/core/Slide"));
var _Grow = _interopRequireDefault(require("@material-ui/core/Grow"));
var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
var _classnames = _interopRequireDefault(require("classnames"));
var _ThemeContext = _interopRequireDefault(require("./theme/ThemeContext"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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; }
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) { "@babel/helpers - typeof"; 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); }
var useStyles = function useStyles() {
return (0, _styles.makeStyles)({
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 styles;
var Block = _react.default.forwardRef(function (props, ref) {
var _React$useContext = _react.default.useContext(_ThemeContext.default),
colors = _React$useContext.colors,
sizes = _React$useContext.sizes;
var classes = useStyles();
if (!styles) {
styles = createStyles({
sizes: sizes,
colors: colors
});
}
var handleMargins = function handleMargins() {
var margin = 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;
};
var handlePaddings = function handlePaddings() {
var padding = 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;
};
var absolute = props.absolute,
flex = props.flex,
row = props.row,
column = props.column,
wrap = props.wrap,
center = props.center,
middle = props.middle,
left = props.left,
right = props.right,
top = props.top,
bottom = props.bottom,
margin = props.margin,
padding = props.padding,
card = props.card,
shadow = props.shadow,
shadowhover = props.shadowhover,
elevation = props.elevation,
color = props.color,
space = props.space,
style = props.style,
animated = props.animated,
slideAnimated = props.slideAnimated,
animationDirection = props.animationDirection,
paper = props.paper,
visible = props.visible,
children = props.children,
rest = _objectWithoutProperties(props, ["absolute", "flex", "row", "column", "wrap", "center", "middle", "left", "right", "top", "bottom", "margin", "padding", "card", "shadow", "shadowhover", "elevation", "color", "space", "style", "animated", "slideAnimated", "animationDirection", "paper", "visible", "children"]);
var blockStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, flex === false ? {
display: 'flex',
position: 'relative',
flexDirection: 'column'
} : _objectSpread({}, styles.block)), row && styles.row), absolute && {
position: 'absolute',
right: 0,
left: 0,
top: 0,
bottom: 0
}), column && styles.column), wrap && {
flexWrap: 'wrap'
}), 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({}, handleMargins())), padding && _objectSpread({}, 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 /*#__PURE__*/_react.default.createElement(_Grow.default, {
in: visible
}, /*#__PURE__*/_react.default.createElement("div", _extends({
ref: ref,
style: blockStyles
}, rest), children));
}
if (slideAnimated) {
return /*#__PURE__*/_react.default.createElement(_Slide.default, {
direction: animationDirection || 'up',
in: visible,
mountOnEnter: true,
unmountOnExit: true
}, /*#__PURE__*/_react.default.createElement("div", _extends({
ref: ref,
style: blockStyles
}, rest), children));
}
if (paper) {
return /*#__PURE__*/_react.default.createElement(_Paper.default, _extends({
ref: ref,
className: (0, _classnames.default)(_defineProperty({}, classes.shadowhover, shadowhover)),
elevation: elevation >= 0 ? elevation : 1,
style: blockStyles
}, rest), children);
}
return /*#__PURE__*/_react.default.createElement("div", _extends({
ref: ref,
className: (0, _classnames.default)(_defineProperty({}, classes.shadowhover, shadowhover)),
style: blockStyles
}, rest), children);
});
var createStyles = function createStyles(_ref) {
var sizes = _ref.sizes,
colors = _ref.colors;
return {
block: {
flex: 1,
display: 'flex',
position: 'relative',
flexDirection: 'column'
},
row: {
flexDirection: 'row'
},
column: {
flexDirection: 'column'
},
card: {
borderRadius: sizes.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.accent
},
primary: {
backgroundColor: colors.primary
},
secondary: {
backgroundColor: colors.secondary
},
tertiary: {
backgroundColor: colors.tertiary
},
black: {
backgroundColor: colors.black
},
white: {
backgroundColor: colors.white
},
gray: {
backgroundColor: colors.gray
},
gray2: {
backgroundColor: colors.gray2
},
gray3: {
backgroundColor: colors.gray3
},
gray4: {
backgroundColor: colors.gray4
},
dark: {
backgroundColor: colors.dark
},
mistyWhite: {
backgroundColor: colors.mistyWhite
},
milkyWhite: {
backgroundColor: colors.milkyWhite
},
error: {
backgroundColor: colors.error
},
clear: {
backgroundColor: colors.clear
},
facebook: {
backgroundColor: colors.facebook
},
transparent: {
backgroundColor: colors.transparent
},
silver: {
backgroundColor: colors.silver
},
steel: {
backgroundColor: colors.steel
},
ricePaper: {
backgroundColor: colors.ricePaper
},
frost: {
backgroundColor: colors.frost
},
cloud: {
backgroundColor: colors.cloud
},
windowTint: {
backgroundColor: colors.windowTint
},
panther: {
backgroundColor: colors.panther
},
charcoal: {
backgroundColor: colors.charcoal
},
coal: {
backgroundColor: colors.coal
},
bloodOrange: {
backgroundColor: colors.bloodOrange
},
snow: {
backgroundColor: colors.snow
},
ember: {
backgroundColor: colors.ember
},
fire: {
backgroundColor: colors.fire
},
drawer: {
backgroundColor: colors.drawer
},
eggplant: {
backgroundColor: colors.eggplant
},
twitterColor: {
backgroundColor: colors.twitterColor
},
facebookColor: {
backgroundColor: colors.twitterColor
},
googleColor: {
backgroundColor: colors.twitterColor
},
linkedinColor: {
backgroundColor: colors.twitterColor
},
pinterestColor: {
backgroundColor: colors.twitterColor
},
youtubeColor: {
backgroundColor: colors.twitterColor
},
tumblrColor: {
backgroundColor: colors.twitterColor
},
behanceColor: {
backgroundColor: colors.twitterColor
},
dribbbleColor: {
backgroundColor: colors.twitterColor
},
redditColor: {
backgroundColor: colors.twitterColor
},
instagramColor: {
backgroundColor: colors.twitterColor
},
success: {
backgroundColor: colors.success
},
info: {
backgroundColor: colors.info
},
rose: {
backgroundColor: colors.rose
},
warning: {
backgroundColor: colors.warning
},
danger: {
backgroundColor: colors.danger
}
};
};
Block.defaultProps = {
visible: true
};
var _default = Block;
exports.default = _default;