react-beautiful-dnd#DraggableProvidedDragHandleProps TypeScript Examples

ListItemUi: React.FC<{
  isDragging?: boolean;
  innerRef?: (element?: HTMLElement | null) => any;
  draggableProps?: DraggableProvidedDraggableProps;
  dragHandleProps?: DraggableProvidedDragHandleProps;
  draggable?: boolean;
  icon?: IconName;
  title: string;
  selected?: boolean;
  onRename?: (renamed: string) => void;
  onToogleSelect?: (selected: boolean) => void;
  isAddItem?: boolean;
  expansionContent?: React.ReactNode;
  isStarred?: boolean;
  onToggleStar?: (star: boolean) => void;
  categoryColor?: string;
}> = props => {
  const [title, setTitle] = useState(props.title);
  const [isExpanded, setIsExpanded] = useState(false);
  const [forceDisplay, setForceDisplay] = useState(false);
  const itemRef = useRef<HTMLInputElement>(null);

  const onSubmit = () => {
    setForceDisplay(false);
    if (title !== props.title) {
      props.onRename?.(title);
      if (props.isAddItem) {
        setTitle(props.title);
        itemRef.current?.focus();
        setTimeout(() => itemRef.current?.select());
      }
    }
  };

  return (
    <>
      <div
        ref={props.innerRef}
        className={cx(
          styles.container,
          props.isDragging && styles.containerDragging,
          props.draggable && styles.containerInteractive,
          cxs({
            borderLeft: `6px solid ${props.categoryColor || '#fff'}`,
          })
        )}
        {...(props.draggableProps ?? {})}
      >
        <div
          className={cx(styles.iconContainer, styles.paddingChild)}
          onClick={() => {
            if (props.onToogleSelect) {
              props.onToogleSelect(!props.selected);
            }
          }}
        >
          {props.icon && <Icon icon={props.icon} />}
          {props.onToogleSelect && <Icon icon={props.selected ? 'tick-circle' : 'circle'} iconSize={24} />}
        </div>
        {props.draggable && (
          <div
            {...(props.dragHandleProps ?? {})}
            className={cx(
              styles.dragContainer,
              styles.paddingChild,
              DRAG_CONTAINER_CLASS,
              forceDisplay && styles.forceDisplay
            )}
          >
            <Icon icon="menu" />
            &nbsp;&nbsp;
          </div>
        )}
        <div className={cx(styles.titleContainer, styles.paddingChild)}>
          <input
            className={styles.input}
            ref={itemRef}
            value={title}
            onChange={e => setTitle(e.target.value)}
            onFocus={e => {
              itemRef.current?.select();
              setForceDisplay(true);
            }}
            onBlur={onSubmit}
            onKeyDown={e => {
              if (e.key.toLowerCase() === 'enter') {
                onSubmit();
                setForceDisplay(true);
              }
            }}
          />
        </div>
        {props.isAddItem && forceDisplay && (
          <div className={cx(styles.buttonContainer, styles.buttonContainerVisible)}>
            <button className={cx(styles.button, styles.paddingChild)}>
              <Icon icon={'tick'} iconSize={16} />
            </button>
          </div>
        )}
        {props.onToggleStar && props.isStarred && (
          <div className={cx(styles.buttonContainer, styles.buttonContainerVisible)}>
            <button
              className={cx(styles.button, styles.paddingChild)}
              onClick={() => props.onToggleStar?.(!props.isStarred)}
            >
              <Icon icon={props.isStarred ? 'star' : 'star-empty'} iconSize={16} />
            </button>
          </div>
        )}
        <div className={cx(styles.buttonContainer, BUTTON_CONTAINER_CLASS, forceDisplay && styles.forceDisplay)}>
          {props.onToggleStar && !props.isStarred && (
            <button
              className={cx(styles.button, styles.paddingChild)}
              onClick={() => props.onToggleStar?.(!props.isStarred)}
            >
              <Icon icon={props.isStarred ? 'star' : 'star-empty'} iconSize={16} />
            </button>
          )}
          {props.expansionContent && (
            <button
              className={styles.button}
              onClick={() => {
                setIsExpanded(!isExpanded);
                setForceDisplay(!isExpanded);
              }}
            >
              {isExpanded ? 'Close' : 'Details...'}
              &nbsp;&nbsp;
              <Icon icon={isExpanded ? 'chevron-up' : 'chevron-down'} />
            </button>
          )}
        </div>
      </div>
      {props.expansionContent && (
        <div className={cx(styles.expansionContent, isExpanded && styles.expansionContentOpen)}>
          {props.expansionContent}
        </div>
      )}
    </>
  );
}