export function SeparatorActions()

in src/components/StepSeparator/SeparatorActions.tsx [59:154]
96 lines of code
12 McCabe index (conditional complexity)

export function SeparatorActions({
  canDelete,
  index,
  isDraggable,
  showControls,
  step,
}: ISeparatorActions) {
  const [isGrabbing, setIsGrabbing] = useState<boolean | null>(
    isDraggable === null ? isDraggable : false
  );
  const { setDragIndex } = useContext(DragAndDropContext);
  const { onMergeSteps, setStepName } = useContext(StepsContext);
  const [showEditButton, setShowEditButton] = useState(true);
  const [showDeleteButton, setShowDeleteButton] = useState(true);
  const [isEditingName, setIsEditingName] = useState(false);
  const dragParams: IDragProps = {};
  if (isDraggable) {
    dragParams.onDragStart = e => {
      setDragIndex(index);
      setShowDeleteButton(false);
      setShowEditButton(false);
      const dragDataString = JSON.stringify(createStepSeparatorDragDropData(index));
      e.dataTransfer.setData(DRAG_AND_DROP_DATA_TRANSFER_TYPE, dragDataString);
      e.dataTransfer.setData('text/plain', dragDataString);
    };
    dragParams.onDragEnd = () => {
      setShowDeleteButton(true);
      setShowEditButton(true);
      setDragIndex(undefined);
      setIsGrabbing(false);
    };
  }
  const defaultStepName = `Step ${index + 1}`;
  const stepHeadingText = step.name ?? defaultStepName;
  return (
    <ControlsWrapper
      alignItems="center"
      aria-label="Drag to reorganize steps"
      draggable={!!isDraggable}
      gutterSize="s"
      isGrabbing={isGrabbing}
      onMouseDown={() => setIsGrabbing(true)}
      onMouseUp={() => setIsGrabbing(false)}
      {...dragParams}
    >
      {!isEditingName && (
        <StepSeparatorHeading id={`step-${index}`} grow={false}>
          {stepHeadingText}
        </StepSeparatorHeading>
      )}
      {isEditingName && (
        <EditStepNameInput
          placeholder={defaultStepName}
          defaultValue={step.name}
          onComplete={(value?: string | null) => {
            setIsEditingName(false);
            setShowEditButton(true);
            if (value !== null) {
              setStepName(index, value);
            }
          }}
        />
      )}
      {showEditButton && (
        <EuiFlexItem grow={false} style={{ visibility: showControls ? 'visible' : 'hidden' }}>
          <EuiToolTip content="Edit step name">
            <EuiButtonIcon
              aria-label="Rename step"
              color="text"
              iconType="pencil"
              onClick={() => {
                setIsEditingName(true);
                setShowEditButton(false);
              }}
            />
          </EuiToolTip>
        </EuiFlexItem>
      )}
      {index > 0 && canDelete && showDeleteButton && !isEditingName && (
        <EuiFlexItem grow={false}>
          <EuiToolTip content="Delete this step divider">
            <DeleteButton
              aria-label="Delete step"
              color="text"
              disabled={!canDelete}
              iconType="trash"
              isVisible={showControls}
              onClick={() => onMergeSteps(index - 1, index)}
            />
          </EuiToolTip>
        </EuiFlexItem>
      )}
      {!isEditingName && <StepSeparatorTopBorder />}
    </ControlsWrapper>
  );
}