@gorazdo/material-you
Version:
Material You theme for @material-ui library
48 lines (47 loc) • 2.35 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExpandButton = void 0;
const core_1 = require("@material-ui/core");
const ExpandMore_1 = __importDefault(require("@material-ui/icons/ExpandMore"));
const react_1 = __importDefault(require("react"));
const services_1 = require("../services");
const useStyles = (0, core_1.makeStyles)((theme) => ({
buttonBase: {
borderRadius: theme.shape.borderRadius,
gridTemplateColumns: `minmax(${Math.max(theme.shape.borderRadius, theme.spacing(3))}px, 1fr)`,
gridAutoFlow: "column",
placeItems: "stretch",
display: "inline-grid",
},
circle: {
borderRadius: theme.shape.borderRadius,
backgroundColor: "#ccc",
placeItems: "center",
display: "inline-grid",
boxShadow: ({ outlineColor }) => `0 0 0 2px ${theme.palette.background[outlineColor]}`,
},
}));
const ExpandButton = (_a) => {
var { count, outlineColor = "paper" } = _a, buttonBaseProps = __rest(_a, ["count", "outlineColor"]);
const classes = useStyles({ outlineColor });
const styles = (0, services_1.useMaterialYouColors)();
return (react_1.default.createElement(core_1.ButtonBase, Object.assign({}, buttonBaseProps, { className: classes.buttonBase }),
count !== undefined && (react_1.default.createElement(core_1.Typography, { component: "span", variant: "subtitle2", className: classes.circle, style: styles }, count)),
react_1.default.createElement("span", { className: classes.circle, style: styles },
react_1.default.createElement(ExpandMore_1.default, null))));
};
exports.ExpandButton = ExpandButton;