cloudhubui
Version:
Various components to use in react projects
283 lines (242 loc) • 9.95 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 _Block = _interopRequireDefault(require("./Block"));
var _ThemeContext = _interopRequireDefault(require("./theme/ThemeContext"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }
var useStyles = (0, _styles.makeStyles)({
speech: function speech(props) {
return {
width: props.width || 'auto',
minHeight: props.height,
maxHeight: props.height,
border: "1px solid ".concat(props.borderColor),
borderRadius: 10,
boxShadow: props.noshadow ? 'none' : "2px 2px 4px ".concat(props.borderColor),
position: 'relative',
margin: 20,
'&::before': {
content: '" "',
position: 'absolute',
width: 0,
height: 0,
left: function left() {
if (props.top || props.bottom) return '50%';
if (props.topleft || props.bottomleft) return 30;
if (props.left || props.leftbottom || props.lefttop) return -20;
return 'auto';
},
right: function right() {
if (props.top || props.bottom) return '50%';
if (props.topright) return 30;
if (props.bottomright) return 28;
if (props.right || props.rightbottom || props.righttop) return -20;
return 'auto';
},
bottom: function bottom() {
if (props.right || props.left) return '50%';
if (props.bottom) return -40;
if (props.bottomright || props.bottomleft) return -20;
if (props.leftbottom || props.rightbottom) return 12;
return 'auto';
},
top: function top() {
if (props.topright || props.topleft) return -20;
if (props.top) return -40;
if (props.right || props.left) return '50%';
if (props.righttop || props.lefttop) return 18;
return 'auto';
},
border: function border() {
if (props.top || props.bottom) {
return '20px solid';
}
return '10px solid';
},
borderColor: function borderColor() {
if (props.bottomleft) {
return "".concat(props.borderColor, " ").concat(props.borderColor, " transparent transparent");
}
if (props.bottom) {
return "".concat(props.borderColor, " transparent transparent transparent");
}
if (props.bottomright) {
return "".concat(props.borderColor, " transparent transparent ").concat(props.borderColor);
}
if (props.rightbottom) {
return "".concat(props.borderColor, " transparent transparent ").concat(props.borderColor);
}
if (props.right) {
return "".concat(props.borderColor, " transparent transparent ").concat(props.borderColor);
}
if (props.righttop) {
return "transparent transparent ".concat(props.borderColor, " ").concat(props.borderColor);
}
if (props.topright) {
return "transparent transparent ".concat(props.borderColor, " ").concat(props.borderColor);
}
if (props.top) {
return "transparent transparent ".concat(props.borderColor, " transparent");
}
if (props.topleft) {
return "transparent ".concat(props.borderColor, " ").concat(props.borderColor, " transparent");
}
if (props.lefttop) {
return "transparent ".concat(props.borderColor, " ").concat(props.borderColor, " transparent");
}
if (props.left) {
return "".concat(props.borderColor, " ").concat(props.borderColor, " transparent transparent");
}
if (props.leftbottom) {
return "".concat(props.borderColor, " ").concat(props.borderColor, " transparent transparent");
}
return 'transparent';
}
},
'&::after ': {
content: '" "',
position: 'absolute',
width: 0,
height: 0,
marginLeft: function marginLeft() {
if (props.bottom || props.top) {
return 10;
}
return 0;
},
marginTop: function marginTop() {
if (props.right || props.left) {
return 2;
}
return 0;
},
left: function left() {
if (props.top || props.bottom) return '50%';
if (props.topleft || props.bottomleft) return 33;
if (props.left || props.leftbottom || props.lefttop) return -10;
return 'auto';
},
right: function right() {
if (props.top || props.bottom) return '50%';
if (props.bottomright) return 35;
if (props.topright) return 37;
if (props.right || props.rightbottom || props.righttop) return -10;
return 'auto';
},
bottom: function bottom() {
if (props.right || props.left) return '50%';
if (props.bottom) return -20;
if (props.bottom || props.bottomright || props.bottomleft) return -10;
if (props.leftbottom || props.rightbottom) return 20;
return 'auto';
},
top: function top() {
if (props.topright || props.topleft) return -10;
if (props.top) return -20;
if (props.right || props.left) return '50%';
if (props.righttop || props.lefttop) return 20;
return 'auto';
},
border: function border() {
if (props.top || props.bottom) {
return '10px solid';
}
return '5px solid';
},
borderColor: function borderColor() {
if (props.bottomleft) {
return "".concat(props.color, " ").concat(props.color, " transparent transparent");
}
if (props.bottom) {
return "".concat(props.color, " transparent transparent transparent");
}
if (props.bottomright) {
return "".concat(props.color, " transparent transparent ").concat(props.color);
}
if (props.rightbottom) {
return "".concat(props.color, " transparent transparent ").concat(props.color);
}
if (props.right) {
return "".concat(props.color, " transparent transparent ").concat(props.color);
}
if (props.righttop) {
return "transparent transparent ".concat(props.color, " ").concat(props.color);
}
if (props.topright) {
return "transparent transparent ".concat(props.color, " ").concat(props.color);
}
if (props.top) {
return "transparent transparent ".concat(props.color, " transparent");
}
if (props.topleft) {
return "transparent ".concat(props.color, " ").concat(props.color, " transparent");
}
if (props.lefttop) {
return "transparent ".concat(props.color, " ").concat(props.color, " transparent");
}
if (props.left) {
return "".concat(props.color, " ").concat(props.color, " transparent transparent");
}
if (props.leftbottom) {
return "".concat(props.color, " ").concat(props.color, " transparent transparent");
}
return 'transparent';
}
}
};
}
});
var SpeechBubble = function SpeechBubble(_ref) {
var borderColor = _ref.borderColor,
color = _ref.color,
width = _ref.width,
height = _ref.height,
top = _ref.top,
bottom = _ref.bottom,
right = _ref.right,
left = _ref.left,
topright = _ref.topright,
bottomright = _ref.bottomright,
righttop = _ref.righttop,
lefttop = _ref.lefttop,
topleft = _ref.topleft,
bottomleft = _ref.bottomleft,
rightbottom = _ref.rightbottom,
leftbottom = _ref.leftbottom,
noshadow = _ref.noshadow,
props = _objectWithoutProperties(_ref, ["borderColor", "color", "width", "height", "top", "bottom", "right", "left", "topright", "bottomright", "righttop", "lefttop", "topleft", "bottomleft", "rightbottom", "leftbottom", "noshadow"]);
var _React$useContext = _react.default.useContext(_ThemeContext.default),
sizes = _React$useContext.sizes;
var classes = useStyles({
width: width,
height: height,
borderColor: borderColor,
color: color,
top: top,
bottom: bottom,
right: right,
left: left,
topright: topright,
bottomright: bottomright,
righttop: righttop,
lefttop: lefttop,
topleft: topleft,
bottomleft: bottomleft,
rightbottom: rightbottom,
leftbottom: leftbottom,
noshadow: noshadow
});
return /*#__PURE__*/_react.default.createElement(_Block.default, {
className: classes.speech,
padding: sizes.padding,
color: color
}, props.children);
};
var _default = SpeechBubble;
exports.default = _default;