53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import { useRef, useState } from 'react';
|
|
import { useHotkeys } from 'react-hotkeys-hook';
|
|
|
|
import { DoubleTextInput } from '@/ui/components/inputs/DoubleTextInput';
|
|
import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
|
|
|
|
type OwnProps = {
|
|
initialCompanyName: string;
|
|
onCreate: (companyName: string, companyDomainName: string) => void;
|
|
};
|
|
|
|
export function PeopleCompanyCreateCell({
|
|
initialCompanyName,
|
|
onCreate,
|
|
}: OwnProps) {
|
|
const [companyName, setCompanyName] = useState(initialCompanyName);
|
|
const [companyDomainName, setCompanyDomainName] = useState('');
|
|
|
|
const containerRef = useRef(null);
|
|
|
|
useListenClickOutsideArrayOfRef([containerRef], () => {
|
|
onCreate(companyName, companyDomainName);
|
|
});
|
|
|
|
useHotkeys(
|
|
'enter, escape',
|
|
() => {
|
|
onCreate(companyName, companyDomainName);
|
|
},
|
|
{
|
|
enableOnFormTags: true,
|
|
enableOnContentEditable: true,
|
|
preventDefault: true,
|
|
},
|
|
[containerRef, companyName, companyDomainName, onCreate],
|
|
);
|
|
|
|
function handleDoubleTextChange(leftValue: string, rightValue: string): void {
|
|
setCompanyDomainName(leftValue);
|
|
setCompanyName(rightValue);
|
|
}
|
|
|
|
return (
|
|
<DoubleTextInput
|
|
leftValue={companyDomainName}
|
|
rightValue={companyName}
|
|
leftValuePlaceholder="URL"
|
|
rightValuePlaceholder="Name"
|
|
onChange={handleDoubleTextChange}
|
|
/>
|
|
);
|
|
}
|