From 5e3f914182689d940bb6e0d4ea76c1696cb44e83 Mon Sep 17 00:00:00 2001
From: QiShaoXuan <qishaoxuan777@gmail.com>
Date: Thu, 11 Aug 2022 18:52:31 +0800
Subject: [PATCH] fix: fix ui problems

---
 .../block-pendant/BlockPendantProvider.tsx    | 22 +++++--
 .../CreatePendantPanel.tsx                    |  2 +-
 .../UpdatePendantPanel.tsx                    |  2 +-
 libs/components/ui/src/select/Select.tsx      | 64 +++++++++++--------
 4 files changed, 57 insertions(+), 33 deletions(-)

diff --git a/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx b/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx
index 48de13f4b2..031aa5e3a3 100644
--- a/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx
+++ b/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx
@@ -4,6 +4,7 @@ import type { AsyncBlock } from '../editor';
 import { PendantPopover } from './pendant-popover';
 import { PendantRender } from './pendant-render';
 import { useRef } from 'react';
+import { getRecastItemValue, useRecastBlockMeta } from '../recast-block';
 /**
  * @deprecated
  */
@@ -16,15 +17,26 @@ export const BlockPendantProvider: FC<PropsWithChildren<BlockTagProps>> = ({
     children,
 }) => {
     const triggerRef = useRef<HTMLDivElement>();
+    const { getProperties } = useRecastBlockMeta();
+    const properties = getProperties();
+    const { getValue } = getRecastItemValue(block);
+    const showTriggerLine =
+        properties.filter(property => getValue(property.id)).length === 0;
+
     return (
         <Container>
             {children}
 
-            <StyledPendantContainer ref={triggerRef}>
-                <PendantPopover block={block} container={triggerRef.current}>
-                    <StyledTriggerLine />
-                </PendantPopover>
-            </StyledPendantContainer>
+            {showTriggerLine ? (
+                <StyledPendantContainer ref={triggerRef}>
+                    <PendantPopover
+                        block={block}
+                        container={triggerRef.current}
+                    >
+                        <StyledTriggerLine />
+                    </PendantPopover>
+                </StyledPendantContainer>
+            ) : null}
 
             <PendantRender block={block} />
         </Container>
diff --git a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx
index 5a483adb53..6135d2b3c6 100644
--- a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx
+++ b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx
@@ -81,7 +81,7 @@ export const CreatePendantPanel = ({
                     setFieldName(e.target.value);
                 }}
                 endAdornment={
-                    <Tooltip content="Help info here">
+                    <Tooltip content="Help info here" placement="top">
                         <StyledInputEndAdornment>
                             <HelpCenterIcon />
                         </StyledInputEndAdornment>
diff --git a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx
index 796ef39e00..2ff5515bab 100644
--- a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx
+++ b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx
@@ -70,7 +70,7 @@ export const UpdatePendantPanel = ({
                         setFieldName(e.target.value);
                     }}
                     endAdornment={
-                        <Tooltip content="Help info here">
+                        <Tooltip content="Help info here" placement="top">
                             <StyledInputEndAdornment>
                                 <HelpCenterIcon />
                             </StyledInputEndAdornment>
diff --git a/libs/components/ui/src/select/Select.tsx b/libs/components/ui/src/select/Select.tsx
index d1f3141e69..607c3bfa62 100644
--- a/libs/components/ui/src/select/Select.tsx
+++ b/libs/components/ui/src/select/Select.tsx
@@ -12,6 +12,7 @@ import SelectUnstyled, {
 } from '@mui/base/SelectUnstyled';
 /* eslint-disable no-restricted-imports */
 import PopperUnstyled from '@mui/base/PopperUnstyled';
+import { ArrowDropDownIcon } from '@toeverything/components/icons';
 import { styled } from '../styled';
 
 type ExtendSelectProps = {
@@ -41,20 +42,29 @@ export const Select = forwardRef(function CustomSelect<TValue>(
     const { width = '100%', style, listboxStyle, placeholder } = props;
     const components: SelectUnstyledProps<TValue>['components'] = {
         // Root: generateStyledRoot({ width, ...style }),
-        Root: forwardRef((rootProps, rootRef) => (
-            <StyledRoot
-                ref={rootRef}
-                {...rootProps}
-                style={{
-                    width,
-                    ...style,
-                }}
-            >
-                {rootProps.children || (
-                    <StyledPlaceholder>{placeholder}</StyledPlaceholder>
-                )}
-            </StyledRoot>
-        )),
+        Root: forwardRef((rootProps, rootRef) => {
+            const {
+                ownerState: { open },
+            } = rootProps;
+
+            return (
+                <StyledRoot
+                    ref={rootRef}
+                    {...rootProps}
+                    style={{
+                        width,
+                        ...style,
+                    }}
+                >
+                    {rootProps.children || (
+                        <StyledPlaceholder>{placeholder}</StyledPlaceholder>
+                    )}
+                    <StyledSelectedArrowWrapper open={open}>
+                        <ArrowDropDownIcon />
+                    </StyledSelectedArrowWrapper>
+                </StyledRoot>
+            );
+        }),
         Listbox: forwardRef((listboxProps, listboxRef) => (
             <StyledListbox
                 ref={listboxRef}
@@ -73,6 +83,20 @@ export const Select = forwardRef(function CustomSelect<TValue>(
         RefAttributes<HTMLUListElement>
 ) => JSX.Element;
 
+const StyledSelectedArrowWrapper = styled('div')<{ open: boolean }>(
+    ({ open }) => ({
+        position: 'absolute',
+        top: '0',
+        bottom: '0',
+        right: '12px',
+        margin: 'auto',
+        lineHeight: '32px',
+        display: 'flex',
+        alignItems: 'center',
+        transform: `rotate(${open ? '180deg' : '0'})`,
+    })
+);
+
 const StyledRoot = styled('div')(({ theme }) => ({
     height: '32px',
     border: `1px solid ${theme.affine.palette.borderColor}`,
@@ -95,18 +119,6 @@ const StyledRoot = styled('div')(({ theme }) => ({
 
     [`&.${selectUnstyledClasses.expanded}`]: {
         borderColor: `${theme.affine.palette.primary}`,
-        '&::after': {
-            content: '"▴"',
-        },
-    },
-    '&::after': {
-        content: '"▾"',
-        position: ' absolute',
-        top: '0',
-        bottom: '0',
-        right: '12px',
-        margin: 'auto',
-        lineHeight: '32px',
     },
 }));