@sikka/hawa 0.0.34 → 0.0.37

package/src/elements/DragDropImages.js

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
 // import axios from "axios";
-import { getToken } from "../token";
 import { useDropzone } from "react-dropzone";
-import useTranslation from "next-translate/useTranslation";
-import Badge from "@mui/material/Badge";
 import CloseIcon from "@mui/icons-material/Close";
-import styles from "../styles/Theme.module.css";
+// import styled from "@emotion/styled";
+import { Button, Container, IconButton, Typography } from "@mui/material";
+import { useTheme } from "@mui/system";
+import { HawaAlert } from "./HawaAlert";
 
 const thumbsContainer = {
   display: "flex",
@@ -14,23 +14,37 @@ const thumbsContainer = {
   marginTop: 10
 };
 
-const DragDropItemImage = ({
+export const DragDropImages = ({
+  texts,
   files,
   setFiles,
-  itemId,
   setDeletedFiles,
-  refetchSingleMenu
-}) => {
-  const token = getToken();
-  const [cmp, setCmp] = useState(0);
-  //const [thumbs, setThumbs] = useState("");
-  const { t } = useTranslation("common");
-  const { getRootProps, getInputProps, fileRejections, acceptedFiles } =
-    useDropzone({
-      multiple: token.Pack?.image_per_item_limit > 1,
-      accept: "image/*",
-      maxSize: 5000000,
-      maxFiles: token.Pack?.image_per_item_limit,
+  maxFiles,
+  accept,
+  onAcceptedFiles,
+  showPreview,
+  onDeleteFile,
+  onClearFiles,
+  maxSize,
+  errorMessages
+}) =>
+  // props
+  {
+    const [cmp, setCmp] = useState(0);
+    const [max, setMax] = useState(0);
+    //const [thumbs, setThumbs] = useState("");
+    const theme = useTheme();
+    const {
+      getRootProps,
+      getInputProps,
+      fileRejections,
+      acceptedFiles,
+      isDragActive
+    } = useDropzone({
+      multiple: true,
+      accept: accept,
+      maxSize: maxSize,
+      maxFiles: maxFiles,
       onDrop: (acceptedFiles) => {
         setFiles(
           acceptedFiles.map((file, index) =>
@@ -41,140 +55,118 @@ const DragDropItemImage = ({
         );
       }
     });
-  const handleRemoveFile = async (file) => {
-    console.log("fezafezaf", acceptedFiles[file]);
-    if (acceptedFiles[file]?.isFromDB) {
-      setDeletedFiles((old) => [
-        ...old,
-        {
-          img_url: acceptedFiles[file]?.img_url,
-          _id: acceptedFiles[file]?._id
-        }
-      ]);
-      try {
-        // await axios.post(
-        //   `${process.env.NEXT_PUBLIC_QAWAIM_API_URL}/deleteImages`,
-        //   {
-        //     deletedFiles: [
-        //       {
-        //         img_url: acceptedFiles[file]?.img_url,
-        //         _id: acceptedFiles[file]?._id
-        //       }
-        //     ],
-        //     itemId: itemId
-        //   }
-        // );
-        refetchSingleMenu();
-        acceptedFiles.splice(file, 1);
-        setFiles(acceptedFiles);
-      } catch (err) {
-        console.error(err);
-      }
-      console.log("accepted files after delete : ", acceptedFiles);
-      setCmp((old) => old + 1);
-      return;
-    }
-    // if (file.hasOwnProperty("_id")) {
-    //   console.log("Yes");
-    //   return;
-    // }
-    acceptedFiles.splice(file, 1);
-
-    setFiles(
-      acceptedFiles.map((f) =>
-        Object.assign(f, { preview: URL.createObjectURL(f) })
-      )
+    useEffect(
+      () => () => {
+        files?.forEach((file) => {
+          URL.revokeObjectURL(file.preview);
+        });
+      },
+      [files]
     );
-    // setFiles(acceptedFiles);
-  };
-  useEffect(
-    () => () => {
-      files.forEach((file) => {
-        URL.revokeObjectURL(file.preview);
-      });
-    },
 
-    [files]
-  );
-  useEffect(() => {
-    if (files[0]?.hasOwnProperty("_id")) {
-      files?.map((file, index) => {
-        acceptedFiles.push({
-          preview: `https://qawaim-images.s3-ap-southeast-1.amazonaws.com/${file.image_url}`,
-          isFromDB: true,
-          _id: file._id,
-          img_url: file.image_url
-        });
-      });
-      console.log("accepted files : ", acceptedFiles);
+    useEffect(() => {
       setFiles(acceptedFiles);
-    }
-    return () => {
-      acceptedFiles.splice(0, acceptedFiles?.length);
+    }, [acceptedFiles, cmp]);
+
+    onClearFiles = () => {
+      acceptedFiles.length = 0;
+      acceptedFiles.splice(0, acceptedFiles.length);
+      setFiles([]);
     };
-  }, []);
-  const errs = fileRejections.map((rej, i) => {
-    return (
-      <div key={i} className={styles.upload_error_container}>
-        <div>{rej.file.name}</div>
-        <div>{t(rej.errors[0].code)}</div>
+
+    useEffect(() => {
+      if (maxSize > 0) {
+        const k = 1024;
+        const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+        const i = Math.floor(Math.log(maxSize) / Math.log(1024));
+
+        setMax(
+          parseFloat((maxSize / Math.pow(1024, i)).toFixed(2)) + " " + sizes[i]
+        );
+      }
+    }, [maxSize]);
+    const errs = fileRejections.map((rej, i) => {
+      return (
+        <div key={i}>
+          <div>{rej.file.name}</div>
+          <div>{rej.errors[0].code}</div>
+        </div>
+      );
+    });
+    const thumbs = files?.map((file, index) => (
+      <div style={{ position: "relative", margin: 10 }}>
+        <IconButton
+          onClick={(e) => {
+            e.stopPropagation();
+            acceptedFiles.splice(acceptedFiles.indexOf(file), 1);
+            setCmp(Math.random);
+            onDeleteFile(file);
+          }}
+          size="small"
+          variant="contained"
+          style={{
+            position: "absolute",
+            top: -10,
+            right: -10,
+            backgroundColor: theme.primaryActionColor,
+            color: "white",
+            padding: 3
+          }}
+        >
+          <CloseIcon fontSize="small" />
+        </IconButton>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            overflow: "hidden",
+            height: 100,
+            width: 100,
+            backgroundImage: `url(${file.preview})`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            border: "1px solid black"
+          }}
+          key={file.name}
+        />
       </div>
-    );
-  });
+    ));
 
-  const thumbs = files.map((file, index) => (
-    <Badge
-      key={index}
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        console.log("Clicking", index);
-        handleRemoveFile(index);
-      }}
-      badgeContent={<CloseIcon fontSize="small" />}
-      color="primary"
-      style={{
-        margin: 10,
-        width: 100,
-        height: 100
-      }}
-    >
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          overflow: "hidden",
-          height: 100,
-          width: 100,
-          backgroundImage: `url(${file.preview})`,
-          backgroundSize: "cover",
-          backgroundPosition: "center"
-        }}
-        key={file.name}
-      />
-    </Badge>
-  ));
+    console.log("error", fileRejections);
 
-  return (
-    <section className={styles.upload_main_container}>
-      <div
+    return (
+      <Container
+        variant="drop-area"
         {...getRootProps({
-          onClick: (e) => {
-            console.log("e : ", e);
-            e.preventDefault(), console.log("khobza");
-          },
-          style: { height: "100%", width: "100%", padding: 10 }
+          style: { backgroundColor: isDragActive && "white" }
         })}
       >
         <input {...getInputProps()} />
-        <div style={{ fontSize: 13 }}>{t("drag-n-drop")}</div>
-        <div style={{ fontSize: 13, marginTop: 5 }}>{t("max-file-size")}</div>
-        {thumbs ? <aside style={thumbsContainer}>{thumbs}</aside> : null}
-        {errs}
-      </div>
-    </section>
-  );
-};
+        <Typography>Click here or drop files here to upload</Typography>
+        <Typography>Max file size is {max}</Typography>
+        {acceptedFiles.length > 0 && (
+          <Button
+            style={{ color: "black" }}
+            onClick={(e) => {
+              e.stopPropagation();
+              onClearFiles(acceptedFiles);
+            }}
+          >
+            Clear All
+          </Button>
+        )}
 
-export default DragDropItemImage;
+        {thumbs && showPreview ? <aside style={thumbsContainer}>{thumbs}</aside> : null}
+        {fileRejections[0]?.errors[0]?.code === "too-many-files" ? (
+          // <Typography variant="">{texts.tooManyFiles}</Typography>
+          <HawaAlert text={texts.tooManyFiles} severity="error" />
+        ) : fileRejections[0]?.errors[0]?.code === "file-too-large" ? (
+          <HawaAlert text={texts.fileTooLarge} severity="error" />
+        ) : (
+          errs
+        )}
+        {}
+      </Container>
+    );
+  };

package/src/elements/DraggableCard.js

@@ -0,0 +1,36 @@
+import { MoreVert } from "@mui/icons-material";
+import { Container, Stack } from "@mui/material";
+import React from "react";
+
+export const DraggableCard = (props) => {
+  return (
+    <Stack
+      variant="card"
+      direction="row"
+      maxWidth={props.maxWidth}
+      style={{ paddingLeft: 5 }}
+    >
+      <div
+        style={{
+        //   backgroundColor: "blue",
+          display: "flex",
+          alignItems: "center",
+          //   paddingRight: 5,
+          borderRight: "1px solid grey",
+          marginRight: 20
+        }}
+      >
+        <MoreVert />
+      </div>
+
+      <div
+        style={{
+          //   backgroundColor: "red",
+          width: "100%"
+        }}
+      >
+        {props.children}
+      </div>
+    </Stack>
+  );
+};

package/src/elements/HawaSelectInput.js

@@ -0,0 +1,30 @@
+import Select from "react-select";
+import Creatable from "react-select/creatable";
+
+export default function HawaSelectInput(props) {
+  return (
+    <>
+      {!props.isCreatable && (
+        <Select
+          options={props.options}
+          isClearable={props.isClearable}
+          isMulti={props.isMulti}
+          isSearchable={props.isSearchable}
+          onChange={(newValue, action) => props.onChange(newValue, action)}
+        />
+      )}
+      {props.isCreatable && (
+        <Creatable
+          options={props.options}
+          isClearable={props.isClearable}
+          isMulti={props.isMulti}
+          isSearchable={props.isSearchable}
+          onChange={(newValue, action) => props.onChange(newValue, action)}
+          onInputChange={(newValue, action) =>
+            props.onInputChange(newValue, action)
+          }
+        />
+      )}
+    </>
+  );
+}

package/src/elements/HawaSnackbar.js

@@ -1,12 +1,41 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Snackbar from "@mui/material/Snackbar";
 import AlertTitle from "@mui/material/AlertTitle";
 import Alert from "@mui/material/Alert";
+import { IconButton } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
 
 export const HawaSnackbar = (props) => {
+
+  const [position, setPosition] = useState({vertical : "", horizontal : ""});
+
+  useEffect(() => {
+    if(props.position){
+      const p = props.position.split("-");
+      setPosition({vertical : p[0], horizontal : p[1]});
+    }
+  }, [props.position])
+
   return (
-    <Snackbar open={props.open} onClose={props.handleClose}>
-      <Alert icon={false} severity={props.severity}>
+    <Snackbar
+      open={props.open}
+      autoHideDuration={props.duration ? props.duration : null}
+      onClose={props.handleClose}
+      anchorOrigin={position}
+      action={
+        <>
+          <IconButton
+            aria-label="close"
+            style={{color: "black"}}
+            sx={{ p: 0.5 }}
+            onClick={props.handleClose}
+          >
+            <CloseIcon />
+          </IconButton>
+        </>
+      }
+    >
+      <Alert icon={false} severity={props.severity} onClose={props.isClosable ? props.handleClose : null}>
         {props.title && <AlertTitle>{props.title}</AlertTitle>}
         {props.text}
       </Alert>

package/src/elements/index.js

@@ -19,3 +19,5 @@ export * from "./HawaTable";
 export * from "./HawaColorPicker";
 export * from "./HawaSearchBar";
 export * from "./HawaAccordian";
+export * from "./DragDropImages";
+export * from "./DraggableCard";

package/src/index.js

@@ -1,3 +1,4 @@
 export * from "./blocks";
 export * from "./elements";
 export * from "./layout";
+export * from "./theme";