Drawer - chidrenWithProps

index.tsx

import React from "react";
import { Box, Button, Drawer, DrawerProps } from "@material-ui/core";
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";

type Anchor = "top" | "left" | "bottom" | "right";

interface ButtomDrawer extends DrawerProps {
  label: string;
  anchortype: Anchor;
}

interface ChildrenWithProps {
  handle?: () => void;
}

const ButtomDrawer: React.FC<ButtomDrawer> = (props) => {
  const classes = useStyles();
  const [hasFilter, setHasFilter] = React.useState(false);

  const handleOnClickOpenDrawer = () => {
    setHasFilter(true);
  };

  const handleOnClickClosedDrawer = () => {
    setHasFilter(false);
  };

  const propsChild: Partial<ChildrenWithProps> = {
    handle: handleOnClickClosedDrawer,
  }; // Works
  const chidrenWithProps = React.Children.map(props.children, (child) => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, propsChild);
    }
  });

  return (
    <React.Fragment key={props.anchortype} {...props}>
      <Button className={classes.button} onClick={handleOnClickOpenDrawer}>
        {props.label}
      </Button>

      <Drawer anchor={props.anchortype} open={hasFilter}>
        <Box className={classes.drawerBox}>{chidrenWithProps}</Box>
      </Drawer>
    </React.Fragment>
  );
};

export default ButtomDrawer;

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    drawerBox: {
      minWidth: 680,
    },
    container: {
      display: "flex",
      flexDirection: "column",
      justifyContent: "end",
      width: "auto",
      overflowX: "hidden",
      margin: "3rem",
    },
    boxCloseIcon: {
      alignSelf: "end",
      margin: "1rem 5rem 0 0",
    },
    title: {
      color: theme.palette.text.primary,
      fontWeight: 700,
      fontSize: "2.2rem",
      margin: "0 0 0 4rem",
    },
    boxAvatarIcon: {
      alignSelf: "center",
      marginTop: "8rem",
      marginBottom: "8rem",
      textAlign: "center",
    },
    avatar: {
      height: "fit-content",
      width: "fit-content",
      marginLeft: "auto",
      marginRight: "auto",
    },
    gridContainerInput: {
      flexDirection: "column",
      width: "auto",
      margin: "0 3rem 0 3rem",
    },
    gridBoxMarket: {
      display: "flex",
      justifyContent: "center",
      margin: "5.5rem 0 5.5rem 0",
    },
    boxMarketIcon: {
      height: "fit-content",
      width: "fit-content",
      marginRight: "1.5rem",
      marginTop: "0.6rem",
    },
    button: {
      color: theme.palette.primary.main,
      textTransform: "initial",
      fontWeight: 900,
      marginLeft: "5rem",
      marginBottom: "1rem",
      marginTop: "1rem",
    },
  })
);