126 lines
3.4 KiB
TypeScript
126 lines
3.4 KiB
TypeScript
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;
|
|
wrapperProps?: any;
|
|
headerProps?: any;
|
|
isPublic: boolean;
|
|
index?: number;
|
|
onExtraMenuOpen: (taskGroupID: string, $targetRef: React.RefObject<HTMLElement>) => void;
|
|
};
|
|
|
|
const List = React.forwardRef(
|
|
(
|
|
{
|
|
id,
|
|
name,
|
|
onSaveName,
|
|
isComposerOpen,
|
|
onOpenComposer,
|
|
children,
|
|
isPublic,
|
|
wrapperProps,
|
|
headerProps,
|
|
onExtraMenuOpen,
|
|
}: Props,
|
|
$wrapperRef: any,
|
|
) => {
|
|
const [listName, setListName] = useState(name);
|
|
const [isEditingTitle, setEditingTitle] = useState(false);
|
|
const $listNameRef = useRef<HTMLTextAreaElement>(null);
|
|
const $extraActionsRef = useRef<HTMLDivElement>(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<HTMLTextAreaElement>): 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) {
|
|
onExtraMenuOpen(id, $extraActionsRef);
|
|
}
|
|
};
|
|
useOnEscapeKeyDown(isEditingTitle, onEscape);
|
|
|
|
return (
|
|
<Container ref={$wrapperRef} {...wrapperProps}>
|
|
<Wrapper>
|
|
<Header {...headerProps} isEditing={isEditingTitle}>
|
|
{!isPublic && <HeaderEditTarget onClick={onClick} isHidden={isEditingTitle} />}
|
|
<HeaderName
|
|
ref={$listNameRef}
|
|
disabled={isPublic}
|
|
onBlur={onBlur}
|
|
onChange={onChange}
|
|
onKeyDown={onKeyDown}
|
|
spellCheck={false}
|
|
value={listName}
|
|
/>
|
|
{!isPublic && (
|
|
<ListExtraMenuButtonWrapper ref={$extraActionsRef} onClick={handleExtraMenuOpen}>
|
|
<Ellipsis vertical={false} size={16} color="#c2c6dc" />
|
|
</ListExtraMenuButtonWrapper>
|
|
)}
|
|
</Header>
|
|
{children && children}
|
|
{!isPublic && (
|
|
<AddCardContainer hidden={isComposerOpen}>
|
|
<AddCardButton onClick={() => onOpenComposer(id)}>
|
|
<Plus width={12} height={12} />
|
|
<AddCardButtonText>Add another card</AddCardButtonText>
|
|
</AddCardButton>
|
|
</AddCardContainer>
|
|
)}
|
|
</Wrapper>
|
|
</Container>
|
|
);
|
|
},
|
|
);
|
|
|
|
List.displayName = 'List';
|
|
export default List;
|
|
|
|
export { ListCards };
|