@monolith-forensics/monolith-ui 1.0.0

package/src/CheckBox.js

@@ -0,0 +1,49 @@
+import styled from "@emotion/styled";
+import CheckBoxOutlineBlankOutlinedIcon from "@mui/icons-material/CheckBoxOutlineBlankOutlined";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import { useState } from "react";
+import { useEffect } from "react";
+
+const CheckBox = styled(
+  ({ className, checked = true, onChange = () => {}, style = {} }) => {
+    const [checkedState, setCheckedState] = useState(checked);
+
+    const handleChange = (e) => {
+      e.stopPropagation();
+      setCheckedState(!checkedState);
+      onChange({ newValue: !checkedState, previousValue: checkedState });
+    };
+
+    useEffect(() => {
+      setCheckedState(checked);
+    }, [checked]);
+
+    return (
+      <div className={className} onClick={handleChange}>
+        {checkedState === true ? (
+          <CheckBoxIcon className="checkbox checked" />
+        ) : (
+          <CheckBoxOutlineBlankOutlinedIcon className="checkbox unchecked" />
+        )}
+      </div>
+    );
+  }
+)((props) => ({
+  display: "flex",
+  alignItems: "center",
+  width: 20,
+  cursor: "pointer",
+  ".checkbox": {
+    color: props.theme.palette.primary.main,
+    ...props.style,
+    fontSize: (() => {
+      if (props.size === "small") return 16;
+      if (props.size === "medium") return 20;
+      if (props.size === "large") return 24;
+      return 16;
+    })(),
+    // padding: 5,
+  },
+}));
+
+export default CheckBox;