Function Title

apps/web/ui/Thread/Header/Title/index.tsx:23–79

({ title, state, manage, onSetTitle }: Props)

const INPUT_ID = 'thread-title';

export default function Title({ title, state, manage, onSetTitle }: Props) {
  const [mode, setMode] = useState(Mode.Read);
  const text = title || 'Title';

  useKeyboard(
    {
      onKeyUp(event) {
        const node = event.target as HTMLInputElement;
        if (
          node?.id === INPUT_ID &&
          event.key === 'Escape' &&
          mode === Mode.Edit
        ) {
          event.preventDefault();
          event.stopPropagation();
          setMode(Mode.Read);
        }
      },
    },
    [mode]
  );

  if (!manage) {
    return <div className={styles.title}>{text}</div>;
  }
  return (
    <div
      className={classNames(styles.title, styles.cursorPointer)}
      onClick={() => setMode(Mode.Edit)}
    >
      {mode === Mode.Edit && (
        <TextInput
          className={styles.textInput}
          id={INPUT_ID}
          defaultValue={title || ''}
          onBlur={(event: React.ChangeEvent<HTMLInputElement>) => {
            setMode(Mode.Read);
            onSetTitle(event.currentTarget.value);
          }}
          onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
            if (event.key === 'Enter') {
              setMode(Mode.Read);
              onSetTitle(event.currentTarget.value);
            }
          }}
          autoFocus
        />
      )}
      {mode === Mode.Read && (
        <>
          {text}
          <FiEdit />
        </>
      )}
    </div>
  );
}