@gorazdo/material-you
Version:
Material You theme for @material-ui library
29 lines (28 loc) • 1.4 kB
JavaScript
import { ButtonBase, makeStyles, Typography, } from "@material-ui/core";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import React from "react";
import { useMaterialYouColors } from "../services";
const useStyles = 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]}`,
},
}));
export const ExpandButton = ({ count, outlineColor = "paper", ...buttonBaseProps }) => {
const classes = useStyles({ outlineColor });
const styles = useMaterialYouColors();
return (React.createElement(ButtonBase, { ...buttonBaseProps, className: classes.buttonBase },
count !== undefined && (React.createElement(Typography, { component: "span", variant: "subtitle2", className: classes.circle, style: styles }, count)),
React.createElement("span", { className: classes.circle, style: styles },
React.createElement(ExpandMoreIcon, null))));
};