import React, { useState, useRef } from 'react'; import useOnEscapeKeyDown from 'shared/hooks/onEscapeKeyDown'; import { Plus, Ellipsis } from 'shared/icons'; import { Container, Wrapper, Header, HeaderName, HeaderEditTarget, AddCardContainer, AddCardButton, AddCardButtonText, ListCards, ListExtraMenuButtonWrapper, } from './Styles'; type Props = { children: React.ReactNode; id: string; name: string; onSaveName: (name: string) => void; isComposerOpen: boolean; onOpenComposer: (id: string) => void; tasks: Task[]; wrapperProps?: any; headerProps?: any; index?: number; onExtraMenuOpen: (taskGroupID: string, pos: ElementPosition, size: ElementSize) => void; }; const List = React.forwardRef( ( { id, name, onSaveName, isComposerOpen, onOpenComposer, children, wrapperProps, headerProps, onExtraMenuOpen, }: Props, $wrapperRef: any, ) => { const [listName, setListName] = useState(name); const [isEditingTitle, setEditingTitle] = useState(false); const $listNameRef = useRef(null); const $extraActionsRef = useRef(null); const onClick = () => { setEditingTitle(true); if ($listNameRef && $listNameRef.current) { $listNameRef.current.select(); } }; const onBlur = () => { setEditingTitle(false); onSaveName(listName); }; const onEscape = () => { if ($listNameRef && $listNameRef.current) { $listNameRef.current.blur(); } }; const onChange = (event: React.FormEvent): void => { setListName(event.currentTarget.value); }; const onKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { e.preventDefault(); if ($listNameRef && $listNameRef.current) { $listNameRef.current.blur(); } } }; const handleExtraMenuOpen = () => { if ($extraActionsRef && $extraActionsRef.current) { const pos = $extraActionsRef.current.getBoundingClientRect(); onExtraMenuOpen( id, { top: pos.top, left: pos.left, right: pos.right, bottom: pos.bottom, }, { width: pos.width, height: pos.height, }, ); } }; useOnEscapeKeyDown(isEditingTitle, onEscape); return (
{children && children}
); }, ); List.defaultProps = { children: null, isComposerOpen: false, wrapperProps: {}, headerProps: {}, }; List.displayName = 'List'; export default List; export { ListCards };