bugfix: ensure all popup close buttons hide popup

This commit is contained in:
Jordan Knott 2020-06-23 20:16:17 -05:00
parent 7c11ca92f6
commit 3ea95a662d
2 changed files with 16 additions and 15 deletions

View File

@ -148,10 +148,10 @@ const LabelManagerEditor: React.FC<LabelManagerEditorProps> = ({
const taskLabels = taskLabelsRef && taskLabelsRef.current ? taskLabelsRef.current : []; const taskLabels = taskLabelsRef && taskLabelsRef.current ? taskLabelsRef.current : [];
const [currentTaskLabels, setCurrentTaskLabels] = useState(taskLabels); const [currentTaskLabels, setCurrentTaskLabels] = useState(taskLabels);
console.log(taskLabels); console.log(taskLabels);
const { setTab } = usePopup(); const { setTab, hidePopup } = usePopup();
return ( return (
<> <>
<Popup title="Labels" tab={0} onClose={() => {}}> <Popup title="Labels" tab={0} onClose={() => hidePopup()}>
<LabelManager <LabelManager
labels={labels} labels={labels}
taskLabels={currentTaskLabels} taskLabels={currentTaskLabels}
@ -184,7 +184,7 @@ const LabelManagerEditor: React.FC<LabelManagerEditorProps> = ({
}} }}
/> />
</Popup> </Popup>
<Popup onClose={() => {}} title="Edit label" tab={1}> <Popup onClose={() => hidePopup()} title="Edit label" tab={1}>
<LabelEditor <LabelEditor
labelColors={labelColors} labelColors={labelColors}
label={labels.find(label => label.id === currentLabel) ?? null} label={labels.find(label => label.id === currentLabel) ?? null}
@ -200,7 +200,7 @@ const LabelManagerEditor: React.FC<LabelManagerEditorProps> = ({
}} }}
/> />
</Popup> </Popup>
<Popup onClose={() => {}} title="Create new label" tab={2}> <Popup onClose={() => hidePopup()} title="Create new label" tab={2}>
<LabelEditor <LabelEditor
labelColors={labelColors} labelColors={labelColors}
label={null} label={null}
@ -643,7 +643,13 @@ const Project = () => {
const profileIcon = member ? member.profileIcon : null; const profileIcon = member ? member.profileIcon : null;
showPopup( showPopup(
$targetRef, $targetRef,
<Popup title={null} onClose={() => {}} tab={0}> <Popup
title={null}
onClose={() => {
hidePopup();
}}
tab={0}
>
<MiniProfile <MiniProfile
profileIcon={profileIcon} profileIcon={profileIcon}
displayName="Jordan Knott" displayName="Jordan Knott"
@ -663,7 +669,7 @@ const Project = () => {
onExtraMenuOpen={(taskGroupID: string, $targetRef: any) => { onExtraMenuOpen={(taskGroupID: string, $targetRef: any) => {
showPopup( showPopup(
$targetRef, $targetRef,
<Popup title="List actions" tab={0} onClose={() => {}}> <Popup title="List actions" tab={0} onClose={() => hidePopup()}>
<ListActions <ListActions
taskGroupID={taskGroupID} taskGroupID={taskGroupID}
onArchiveTaskGroup={tgID => { onArchiveTaskGroup={tgID => {
@ -685,7 +691,7 @@ const Project = () => {
onOpenMembersPopup={($targetRef, task) => { onOpenMembersPopup={($targetRef, task) => {
showPopup( showPopup(
$targetRef, $targetRef,
<Popup title="Members" tab={0} onClose={() => {}}> <Popup title="Members" tab={0} onClose={() => hidePopup()}>
<MemberManager <MemberManager
availableMembers={data.findProject.members} availableMembers={data.findProject.members}
activeMembers={task.assigned ?? []} activeMembers={task.assigned ?? []}
@ -705,7 +711,7 @@ const Project = () => {
const profileIcon = member ? member.profileIcon : null; const profileIcon = member ? member.profileIcon : null;
showPopup( showPopup(
$targetRef, $targetRef,
<Popup title={null} onClose={() => {}} tab={0}> <Popup title={null} onClose={() => hidePopup()} tab={0}>
<MiniProfile <MiniProfile
profileIcon={profileIcon} profileIcon={profileIcon}
displayName="Jordan Knott" displayName="Jordan Knott"
@ -755,13 +761,7 @@ const Project = () => {
onOpenDueDatePopup={($targetRef, task) => { onOpenDueDatePopup={($targetRef, task) => {
showPopup( showPopup(
$targetRef, $targetRef,
<Popup <Popup title={'Change Due Date'} tab={0} onClose={() => hidePopup()}>
title={'Change Due Date'}
tab={0}
onClose={() => {
hidePopup();
}}
>
<DueDateManager <DueDateManager
task={task} task={task}
onRemoveDueDate={t => { onRemoveDueDate={t => {

View File

@ -163,6 +163,7 @@ export const CardMembers = styled.div`
export const CompleteIcon = styled(CheckCircle)` export const CompleteIcon = styled(CheckCircle)`
fill: rgba(${props => props.theme.colors.success}); fill: rgba(${props => props.theme.colors.success});
margin-right: 4px; margin-right: 4px;
flex-shrink: 0;
`; `;
export const EditorContent = styled.div` export const EditorContent = styled.div`