@coocoon/react-awesome-query-builder
Version:
User-friendly query builder for React. Demo: https://ukrbublik.github.io/react-awesome-query-builder
31 lines (29 loc) • 1.06 kB
JSX
import React from "react";
import DeleteIcon from "@mui/icons-material/Delete";
import AddIcon from "@mui/icons-material/Add";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
export default ({type, label, onClick, readonly, config}) => {
const typeToOnlyIcon = {
"delGroup": <DeleteIcon />,
"delRuleGroup": <DeleteIcon />,
"delRule": <DeleteIcon />,
"addRuleGroup": <AddIcon />,
};
const typeToIcon = {
"addRule": <AddIcon />,
"addGroup": <AddIcon />,
"addRuleGroupExt": <AddIcon />,
};
const typeToColor = {
"addRule": "neutral",
"addGroup": "primary",
"delGroup": "secondary",
"delRuleGroup": "secondary",
"delRule": "secondary",
};
if (typeToOnlyIcon[type])
return <IconButton size="small" disabled={readonly} onClick={onClick} color={typeToColor[type]}>{typeToOnlyIcon[type]}</IconButton>;
else
return <Button size="small" disabled={readonly} onClick={onClick} color={typeToColor[type]} startIcon={typeToIcon[type]}>{label}</Button>;
};