OpenSign/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js

import React, { useState, useEffect } from "react";
import BorderResize from "../component/borderResize";
import PlaceholderBorder from "./placeholderBorder";
import { Rnd } from "react-rnd";
import { defaultWidthHeight, isMobile } from "../../utils/Utils";
import PlaceholderType from "./placeholderType";
import moment from "moment";
import "../LegaDrive/LegaDrive.css";

function Placeholder(props) {
  const [isDraggingEnabled, setDraggingEnabled] = useState(true);
  const [isShowDateFormat, setIsShowDateFormat] = useState(false);
  const [selectDate, setSelectDate] = useState();
  const [dateFormat, setDateFormat] = useState([]);
  const dateFormatArr = ["L", "l", "LL", "ll", "LLL", "lll", "llll"];

  const changeDateFormat = () => {
    const updateDate = [];
    dateFormatArr.map((data) => {
      const date = new Date(selectDate);
      const milliseconds = date.getTime();
      const newDate = moment(milliseconds).format(data);
      updateDate.push(newDate);
    });
    setDateFormat(updateDate);
  };
  useEffect(() => {
    if (selectDate) {
      changeDateFormat();
    }
  }, [selectDate]);
  //handle to close drop down menu onclick screen
  useEffect(() => {
    const closeMenuOnOutsideClick = (e) => {
      if (isShowDateFormat && !e.target.closest("#menu-container")) {
        setIsShowDateFormat(!isShowDateFormat);
      }
    };

    document.addEventListener("click", closeMenuOnOutsideClick);

    return () => {
      // Cleanup the event listener when the component unmounts
      document.removeEventListener("click", closeMenuOnOutsideClick);
    };
  }, [isShowDateFormat]);

  //onclick placeholder function to open signature pad
  const handlePlaceholderClick = () => {
    if (
      props.pos.type === "text" ||
      props.pos.type === "checkbox" ||
      props.pos.type === "name" ||
      props.pos.type === "company" ||
      props.pos.type === "job title" ||
      props.pos.type === "date" ||
      props.pos.type === "email"
    ) {
      setDraggingEnabled(false);
    }
    if ((props.isNeedSign || props.isSignYourself) && !props.isDragging) {
      if (props.pos.type) {
        if (
          props.pos.type === "signature" ||
          props.pos.type === "stamp" ||
          props.pos.type === "image"
        ) {
          props.setIsSignPad(true);
          props.setSignKey(props.pos.key);
          props.setIsStamp(props.pos.isStamp);
        } else if (props.pos.type === "initials") {
          props.setIsSignPad(true);
          props.setSignKey(props.pos.key);
          props.setIsStamp(props.pos.isStamp);
          props.setIsInitial(true);
        }
      } else {
        props.setIsSignPad(true);
        props.setSignKey(props.pos.key);
        props.setIsStamp(props.pos?.isStamp ? props.pos.isStamp : false);
      }
    } else if (
      props.isPlaceholder &&
      props.pos.type === "dropdown" &&
      !props.isDragging
    ) {
      props?.setShowDropdown(true);
      props?.setSignKey(props.pos.key);
      props.setUniqueId(props.data.Id);
    } else if (!props.pos.type) {
      if (
        !props.pos.type &&
        props.isNeedSign &&
        props.data.signerObjId === props.signerObjId
      ) {
        props.setIsSignPad(true);
        props.setSignKey(props.pos.key);
        props.setIsStamp(props.pos.isStamp);
      } else if (
        (props.isNeedSign && props.pos.type === "signature") ||
        props.pos.type === "stamp"
      ) {
        props.setIsSignPad(true);
        props.setSignKey(props.pos.key);
        props.setIsStamp(props.pos.isStamp);
      } else if (props.isNeedSign && props.pos.type === "dropdown") {
        props.setSignKey(props.pos.key);
      }
    }
  };

  const PlaceholderIcon = () => {
    return (
      props.isShowBorder && (
        <>
          {props.isPlaceholder && (
            <>
              {props.pos.type === "checkbox" && (
                <i
                  onClick={(e) => {
                    e.stopPropagation();
                    props.setIsCheckboxRequired(true);
                    props.setSignKey(props.pos.key);
                    props.setUniqueId(props.data.Id);
                  }}
                  onTouchEnd={(e) => {
                    e.stopPropagation();
                    props.setIsCheckboxRequired(true);
                    props.setSignKey(props.pos.key);
                    props.setUniqueId(props.data.Id);
                  }}
                  class="fa-solid fa-gear settingIcon"
                  style={{
                    color: "#188ae2",
                    right: "23px",
                    top: "-35px"
                  }}
                ></i>
              )}

              <i
                data-tut="reactourLinkUser"
                className="fa-regular fa-user signUserIcon"
                onClick={(e) => {
                  e.stopPropagation();
                  props.handleLinkUser(props.data.Id);
                  props.setUniqueId(props.data.Id);
                }}
                onTouchEnd={(e) => {
                  e.stopPropagation();
                  props.handleLinkUser(props.data.Id);
                  props.setUniqueId(props.data.Id);
                }}
                style={{
                  color: "#188ae2",
                  right: props.pos.type === "checkbox" ? "6px" : "32px",
                  top: props.pos.type === "checkbox" ? "-35px" : "-18px"
                }}
              ></i>
            </>
          )}
          {props.pos.type === "date" && selectDate && (
            <div
              id="menu-container"
              style={{ zIndex: "99", top: "-20px", left: "6px" }}
              className={isShowDateFormat ? "dropdown show" : "dropdown"}
              onClick={() => setIsShowDateFormat(!isShowDateFormat)}
            >
              <div className=" sort  " data-toggle="dropdown">
                <i
                  // onClick={(e) => {
                  //   console.log("click here");
                  //   e.stopPropagation();

                  //   props.setSignKey(props.pos.key);
                  // }}
                  // onTouchEnd={(e) => {
                  //   e.stopPropagation();

                  //   props.setSignKey(props.pos.key);
                  // }}
                  class="fa-solid fa-gear settingIcon"
                  style={{
                    color: "#188ae2"
                    // right: "2px",
                    // top: "-15px"
                  }}
                ></i>
              </div>
              <div
                className={
                  isShowDateFormat ? "dropdown-menu show" : "dropdown-menu"
                }
                aria-labelledby="dropdownMenuButton"
                aria-expanded={isShowDateFormat ? "true" : "false"}
              >
                {dateFormat.map((date) => {
                  return (
                    <span
                      onClick={() => {
                        // console.log("go here");
                        setIsShowDateFormat(!isShowDateFormat);
                        setSelectDate(date);
                      }}
                      className="dropdown-item itemColor"
                      style={{ fontSize: "12px" }}
                    >
                      {date}
                    </span>
                  );
                })}
              </div>
            </div>
          )}
          <i
            className="fa-regular fa-copy signCopy"
            onClick={(e) => {
              if (props.data) {
                props.setSignerObjId(props.data.signerObjId);
              }
              e.stopPropagation();
              props.setIsPageCopy(true);
              props.setSignKey(props.pos.key);
            }}
            onTouchEnd={(e) => {
              if (props.data) {
                props.setSignerObjId(props.data.signerObjId);
              }
              e.stopPropagation();
              props.setIsPageCopy(true);
              props.setSignKey(props.pos.key);
            }}
            style={{
              color: "#188ae2",
              right:
                props.pos.type === "checkbox" && props.isPlaceholder
                  ? "-11px"
                  : "12px",
              top:
                props.pos.type === "checkbox" && props.isPlaceholder
                  ? "-35px"
                  : "-18px"
            }}
          ></i>
          <i
            className="fa-regular fa-circle-xmark signCloseBtn"
            onClick={(e) => {
              e.stopPropagation();

              if (props.data) {
                props.handleDeleteSign(props.pos.key, props.data.Id);
              } else {
                props.handleDeleteSign(props.pos.key);
                props.setIsStamp(false);
              }
            }}
            onTouchEnd={(e) => {
              e.stopPropagation();
              if (props.data) {
                props.handleDeleteSign(props.pos.key, props.data.Id);
              } else {
                props.handleDeleteSign(props.pos.key);
                props.setIsStamp(false);
              }
            }}
            style={{
              color: "#188ae2",
              right:
                props.pos.type === "checkbox" && props.isPlaceholder
                  ? "-30px"
                  : "-8px",
              top:
                props.pos.type === "checkbox" && props.isPlaceholder
                  ? "-35px"
                  : "-18px"
            }}
          ></i>
        </>
      )
    );
  };

  return (
    <Rnd
      //   ref={nodeRef}
      key={props.pos.key}
      lockAspectRatio={
        props.pos.Width
          ? props.pos.Width / props.pos.Height
          : defaultWidthHeight(props.pos.type).width /
            defaultWidthHeight(props.pos.type).height
      }
      enableResizing={{
        top: false,
        right: false,
        bottom: false,
        left: false,
        topRight: false,
        bottomRight:
          props.data && props.isNeedSign
            ? props.data?.signerObjId === props.signerObjId
              ? true
              : false
            : true,
        bottomLeft: false,
        topLeft: false
      }}
      bounds="parent"
      className="signYourselfBlock"
      style={{
        border: "1px solid #007bff",
        borderRadius: "2px",
        textAlign:
          props.pos.type !== "name" &&
          props.pos.type !== "company" &&
          props.pos.type !== "job title" &&
          "center",
        cursor:
          props.data && props.isNeedSign
            ? props.data?.signerObjId === props.signerObjId
              ? "pointer"
              : "not-allowed"
            : "all-scroll",
        zIndex: "1",
        background: props.data ? props.data.blockColor : "rgb(203 233 237)"
      }}
      onDrag={() => {
        setDraggingEnabled(true);
        props.handleTabDrag && props.handleTabDrag(props.pos.key);
      }}
      size={{
        width: props.posWidth(props.pos, props.isSignYourself),
        height: props.posHeight(props.pos, props.isSignYourself)
      }}
      onResizeStart={() => {
        setDraggingEnabled(true);
        props.setIsResize && props.setIsResize(true);
      }}
      onResizeStop={() => {
        props.setIsResize && props.setIsResize(false);
      }}
      disableDragging={
        props.isNeedSign
          ? true
          : props.isPlaceholder
            ? false
            : !isDraggingEnabled
      }
      onDragStop={(event, dragElement) =>
        props.handleStop &&
        props.handleStop(event, dragElement, props.signerObjId, props.pos.key)
      }
      default={{
        x: props.xPos(props.pos, props.isSignYourself),
        y: props.yPos(props.pos, props.isSignYourself)
      }}
      onResize={(e, direction, ref, delta, position) => {
        props.handleSignYourselfImageResize &&
          props.handleSignYourselfImageResize(
            ref,
            props.pos.key,
            props.xyPostion,
            props.setXyPostion,
            props.index,
            props.data && props.data.Id,
            false
          );
      }}
      onClick={() => {
        props.isNeedSign && props.data?.signerObjId === props.signerObjId
          ? handlePlaceholderClick()
          : props.isPlaceholder
            ? handlePlaceholderClick()
            : props.isSignYourself && handlePlaceholderClick();
      }}
    >
      {props.isShowBorder ? (
        <BorderResize
          right={
            props.pos.type === "checkbox" && props.isPlaceholder ? -28 : -12
          }
          top={props.pos.type === "checkbox" && props.isPlaceholder ? -28 : -11}
        />
      ) : props.data && props.isNeedSign ? (
        props.data?.signerObjId === props.signerObjId ? (
          <BorderResize />
        ) : (
          <></>
        )
      ) : (
        <BorderResize />
      )}

      {props.isShowBorder && (
        <PlaceholderBorder
          setDraggingEnabled={setDraggingEnabled}
          pos={props.pos}
          isPlaceholder={props.isPlaceholder}
        />
      )}
      {isMobile ? (
        <div
          style={{
            left: props.xPos(props.pos, props.isSignYourself),
            top: props.yPos(props.pos, props.isSignYourself),
            width: props.posWidth(props.pos, props.isSignYourself),
            height: props.posHeight(props.pos, props.isSignYourself),
            zIndex: "10"
          }}
          onTouchEnd={(e) => {
            props.isNeedSign && props.data?.signerObjId === props.signerObjId
              ? handlePlaceholderClick()
              : props.isPlaceholder
                ? handlePlaceholderClick()
                : props.isSignYourself && handlePlaceholderClick();
          }}
        >
          <PlaceholderIcon />
          <PlaceholderType
            pos={props.pos}
            xyPostion={props.xyPostion}
            index={props.index}
            setXyPostion={props.setXyPostion}
            data={props.data}
            setSignKey={props.setSignKey}
            isShowDropdown={props?.isShowDropdown}
            isPlaceholder={props.isPlaceholder}
            isSignYourself={props.isSignYourself}
            signerObjId={props.signerObjId}
            handleUserName={props.handleUserName}
            setDraggingEnabled={setDraggingEnabled}
            pdfDetails={props?.pdfDetails && props?.pdfDetails[0]}
            isNeedSign={props.isNeedSign}
            setSelectDate={setSelectDate}
            selectDate={selectDate}
          />
        </div>
      ) : (
        <>
          <PlaceholderIcon />

          <PlaceholderType
            pos={props.pos}
            xyPostion={props.xyPostion}
            index={props.index}
            setXyPostion={props.setXyPostion}
            data={props.data}
            setSignKey={props.setSignKey}
            isShowDropdown={props?.isShowDropdown}
            isPlaceholder={props.isPlaceholder}
            isSignYourself={props.isSignYourself}
            signerObjId={props.signerObjId}
            handleUserName={props.handleUserName}
            setDraggingEnabled={setDraggingEnabled}
            pdfDetails={props?.pdfDetails && props?.pdfDetails[0]}
            isNeedSign={props.isNeedSign}
            setSelectDate={setSelectDate}
            selectDate={selectDate}
          />
        </>
      )}
    </Rnd>
  );
}

export default Placeholder;