%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/def/static/js/common/components/ |
Current File : /home/emergentqj/actioncivile/pre-auth/def/static/js/common/components/Button.js |
import React from "react"; import { bool, func, node, object, string, } from "prop-types"; import { Button } from "@material-ui/core"; import { withStyles } from "@material-ui/core/styles"; const styles = (theme) => ({ root: { boxShadow: "none", border: "1px #872878 solid", borderRadius: "4px", backgroundColor: "913983", }, rootSecondary: { backgroundColor: theme.palette.white, boxShadow: "none", border: "1px #872878 solid", borderRadius: "4px", }, label: { whiteSpace: "nowrap", textTransform: "unset", }, labelSecondary: { whiteSpace: "nowrap", textTransform: "unset", color: "#872878", }, "label:first-letter": { textTransform: "capitalize", }, }); function CustomButton({ children, disabled, size, variant, type, onClick, primary, fullWidth, id, color, classes, }) { return ( <Button id={id || null} color={(primary ? "primary" : color)} disabled={disabled} onClick={onClick} size={size} type={type} variant={variant} fullWidth={fullWidth} className={` ${!primary && color === "default" ? `${classes.rootSecondary} ${classes.labelSecondary}` : `${classes.root} ${classes.label}`} `} > {children} </Button> ); } CustomButton.propTypes = { children: node.isRequired, disabled: bool, onClick: func, size: string, type: string, variant: string, primary: bool, fullWidth: bool, id: string, color: string, classes: object.isRequired, }; CustomButton.defaultProps = { disabled: false, // Sometimes, we use this button to submit reduxform, // so it not necessarily has an onClick prop onClick: () => {}, size: "large", variant: "contained", type: "button", primary: false, fullWidth: false, id: null, color: "default", }; export default withStyles(styles)(CustomButton);