plane/web/components/labels/project-setting-label-group.tsx

import React, { Dispatch, SetStateAction, useState } from "react";
import { observer } from "mobx-react-lite";
import { ChevronDown, Pencil, Trash2 } from "lucide-react";
import { Disclosure, Transition } from "@headlessui/react";
// store
// icons
// types
import { IIssueLabel } from "@plane/types";
// components
import { CreateUpdateLabelInline } from "./create-update-label-inline";
import { ICustomMenuItem, LabelItemBlock } from "./label-block/label-item-block";
import { LabelDndHOC } from "./label-drag-n-drop-HOC";
import { ProjectSettingLabelItem } from "./project-setting-label-item";

type Props = {
  label: IIssueLabel;
  labelChildren: IIssueLabel[];
  handleLabelDelete: (label: IIssueLabel) => void;
  isUpdating: boolean;
  setIsUpdating: Dispatch<SetStateAction<boolean>>;
  isLastChild: boolean;
  onDrop: (
    draggingLabelId: string,
    droppedParentId: string | null,
    droppedLabelId: string | undefined,
    dropAtEndOfList: boolean
  ) => void;
};

export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
  const { label, labelChildren, handleLabelDelete, isUpdating, setIsUpdating, isLastChild, onDrop } = props;

  // states
  const [isEditLabelForm, setEditLabelForm] = useState(false);

  const customMenuItems: ICustomMenuItem[] = [
    {
      CustomIcon: Pencil,
      onClick: () => {
        setEditLabelForm(true);
        setIsUpdating(true);
      },
      isVisible: true,
      text: "Edit label",
      key: "edit_label",
    },
    {
      CustomIcon: Trash2,
      onClick: handleLabelDelete,
      isVisible: true,
      text: "Delete label",
      key: "delete_label",
    },
  ];

  return (
    <LabelDndHOC label={label} isGroup isChild={false} isLastChild={isLastChild} onDrop={onDrop}>
      {(isDragging, isDroppingInLabel, dragHandleRef) => (
        <div
          className={`rounded ${isDroppingInLabel ? "border-[2px] border-custom-primary-100" : "border-[1.5px] border-transparent"}`}
        >
          <Disclosure
            as="div"
            className={`rounded  text-custom-text-100 ${
              !isDroppingInLabel ? "border-[0.5px] border-custom-border-200" : ""
            } ${isDragging ? "bg-custom-background-80" : "bg-custom-background-100"}`}
            defaultOpen
          >
            {({ open }) => (
              <>
                <div className={`py-3 pl-1 pr-3 ${!isUpdating && "max-h-full overflow-y-hidden"}`}>
                  <>
                    <div className="relative flex cursor-pointer items-center justify-between gap-2">
                      {isEditLabelForm ? (
                        <CreateUpdateLabelInline
                          labelForm={isEditLabelForm}
                          setLabelForm={setEditLabelForm}
                          isUpdating
                          labelToUpdate={label}
                          onClose={() => {
                            setEditLabelForm(false);
                            setIsUpdating(false);
                          }}
                        />
                      ) : (
                        <LabelItemBlock
                          label={label}
                          isDragging={isDragging}
                          customMenuItems={customMenuItems}
                          handleLabelDelete={handleLabelDelete}
                          isLabelGroup
                          dragHandleRef={dragHandleRef}
                        />
                      )}

                      <Disclosure.Button>
                        <span>
                          <ChevronDown
                            className={`h-4 w-4 text-custom-sidebar-text-400 ${!open ? "rotate-90 transform" : ""}`}
                          />
                        </span>
                      </Disclosure.Button>
                    </div>
                    <Transition
                      show={open}
                      enter="transition duration-100 ease-out"
                      enterFrom="transform opacity-0"
                      enterTo="transform opacity-100"
                      leave="transition duration-75 ease-out"
                      leaveFrom="transform opacity-100"
                      leaveTo="transform opacity-0"
                    >
                      <Disclosure.Panel>
                        <div className="ml-6">
                          {labelChildren.map((child, index) => (
                            <div key={child.id} className={`group flex w-full items-center text-sm`}>
                              <div className="w-full">
                                <ProjectSettingLabelItem
                                  label={child}
                                  handleLabelDelete={() => handleLabelDelete(child)}
                                  setIsUpdating={setIsUpdating}
                                  isParentDragging={isDragging}
                                  isChild
                                  isLastChild={index === labelChildren.length - 1}
                                  onDrop={onDrop}
                                />
                              </div>
                            </div>
                          ))}
                        </div>
                      </Disclosure.Panel>
                    </Transition>
                  </>
                </div>
              </>
            )}
          </Disclosure>
        </div>
      )}
    </LabelDndHOC>
  );
});