From 407ee4d8f0ca544580e407e76007410f1ea82725 Mon Sep 17 00:00:00 2001
From: lawvs <18554747+lawvs@users.noreply.github.com>
Date: Fri, 5 Aug 2022 18:56:25 +0800
Subject: [PATCH] feat: add kanban card mask

---
 .../blocks/group/scene-kanban/CardItem.tsx    | 63 ++++++++++++++++---
 1 file changed, 53 insertions(+), 10 deletions(-)

diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx
index 76220d7ff0..eba13f0db6 100644
--- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx
+++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx
@@ -4,8 +4,14 @@ import {
     useKanban,
     useRefPage,
 } from '@toeverything/components/editor-core';
-import { styled } from '@toeverything/components/ui';
+import { PenIcon } from '@toeverything/components/icons';
+import {
+    IconButton,
+    MuiClickAwayListener,
+    styled,
+} from '@toeverything/components/ui';
 import { useFlag } from '@toeverything/datasource/feature-flags';
+import { useState } from 'react';
 
 const CardContent = styled('div')({
     margin: '20px',
@@ -23,6 +29,7 @@ const CardActions = styled('div')({
     fontWeight: '300',
     color: '#98ACBD',
     transition: 'all ease-in 0.2s',
+    zIndex: 1,
 
     ':hover': {
         background: '#F5F7F8',
@@ -39,11 +46,13 @@ const PlusIcon = styled('div')({
 });
 
 const CardContainer = styled('div')({
+    position: 'relative',
     display: 'flex',
     flexDirection: 'column',
     backgroundColor: '#fff',
     border: '1px solid #E2E7ED',
     borderRadius: '5px',
+    overflow: 'hidden',
 
     [CardActions.toString()]: {
         opacity: '0',
@@ -55,6 +64,23 @@ const CardContainer = styled('div')({
     },
 });
 
+const Overlay = styled('div')({
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    background: 'transparent',
+
+    '& > *': {
+        visibility: 'hidden',
+        position: 'absolute',
+        right: '24px',
+        top: '16px',
+    },
+    '&:hover > *': {
+        visibility: 'visible',
+    },
+});
+
 export const CardItem = ({
     id,
     block,
@@ -64,8 +90,11 @@ export const CardItem = ({
 }) => {
     const { addSubItem } = useKanban();
     const { openSubPage } = useRefPage();
+    const [editable, setEditable] = useState(false);
     const showKanbanRefPageFlag = useFlag('ShowKanbanRefPage', false);
+
     const onAddItem = async () => {
+        setEditable(true);
         await addSubItem(block);
     };
 
@@ -74,14 +103,28 @@ export const CardItem = ({
     };
 
     return (
-        <CardContainer onClick={onClickCard}>
-            <CardContent>
-                <RenderBlock blockId={id} />
-            </CardContent>
-            <CardActions onClick={onAddItem}>
-                <PlusIcon />
-                <span>Add a sub-block</span>
-            </CardActions>
-        </CardContainer>
+        <MuiClickAwayListener onClickAway={() => setEditable(false)}>
+            <CardContainer>
+                <CardContent>
+                    <RenderBlock blockId={id} />
+                </CardContent>
+                {!editable && (
+                    <Overlay onClick={onClickCard}>
+                        <IconButton
+                            onClick={e => {
+                                e.stopPropagation();
+                                setEditable(true);
+                            }}
+                        >
+                            <PenIcon />
+                        </IconButton>
+                    </Overlay>
+                )}
+                <CardActions onClick={onAddItem}>
+                    <PlusIcon />
+                    <span>Add a sub-block</span>
+                </CardActions>
+            </CardContainer>
+        </MuiClickAwayListener>
     );
 };