Charles Bochet
62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import styled from '@emotion/styled';
|
|
|
|
import { useScopedHotkeys } from '@/lib/hotkeys/hooks/useScopedHotkeys';
|
|
import { useSetHotkeyScope } from '@/lib/hotkeys/hooks/useSetHotkeyScope';
|
|
import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
|
|
|
|
import { ColumnHotkeyScope } from './ColumnHotkeyScope';
|
|
|
|
const StyledEditTitleInput = styled.input`
|
|
background-color: transparent;
|
|
border: none;
|
|
color: ${({ color }) => color};
|
|
font-family: ${({ theme }) => theme.font.family};
|
|
font-size: ${({ theme }) => theme.font.size.md};
|
|
font-weight: ${({ theme }) => theme.font.weight.medium};
|
|
|
|
&::placeholder {
|
|
color: ${({ theme }) => theme.font.color.light};
|
|
font-family: ${({ theme }) => theme.font.family};
|
|
font-weight: ${({ theme }) => theme.font.weight.medium};
|
|
}
|
|
font-weight: ${({ theme }) => theme.font.weight.medium};
|
|
|
|
margin: 0;
|
|
outline: none;
|
|
padding: 0;
|
|
`;
|
|
|
|
export function EditColumnTitleInput({
|
|
color,
|
|
value,
|
|
onChange,
|
|
onFocusLeave,
|
|
}: {
|
|
color?: string;
|
|
value: string;
|
|
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
onFocusLeave: () => void;
|
|
}) {
|
|
const inputRef = React.useRef<HTMLInputElement>(null);
|
|
|
|
useListenClickOutsideArrayOfRef([inputRef], () => {
|
|
onFocusLeave();
|
|
});
|
|
const setHotkeyScope = useSetHotkeyScope();
|
|
setHotkeyScope(ColumnHotkeyScope.EditColumnName, { goto: false });
|
|
|
|
useScopedHotkeys('enter', onFocusLeave, ColumnHotkeyScope.EditColumnName);
|
|
useScopedHotkeys('esc', onFocusLeave, ColumnHotkeyScope.EditColumnName);
|
|
return (
|
|
<StyledEditTitleInput
|
|
ref={inputRef}
|
|
placeholder={'Enter column name'}
|
|
color={color}
|
|
autoFocus
|
|
value={value}
|
|
onChange={onChange}
|
|
/>
|
|
);
|
|
}
|