fix: drag-panel add resizeable & height prop

NetEase · Jun 18, 2024 · d6e8214 · d6e8214
1 parent 5336c2e
commit d6e8214
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 62 deletions.
diff --git a/apps/storybook/src/ui/drag-panel.stories.tsx b/apps/storybook/src/ui/drag-panel.stories.tsx
@@ -9,15 +9,34 @@ export default {
 
 export function Basic() {
   return (
-    <DragPanel
-      title="弹层标题"
-      extra="右上角内容"
-      width={350}
-      body={<Box p="m">内容</Box>}
-      footer={<Text>底部信息</Text>}
-    >
-      <Button>点击唤起浮层</Button>
-    </DragPanel>
+    <>
+      <DragPanel
+        title="弹层标题"
+        extra="右上角内容"
+        width={350}
+        body={<Box p="m">内容</Box>}
+        footer={<Text>底部信息</Text>}
+      >
+        <Button>点击唤起浮层</Button>
+      </DragPanel>
+      <DragPanel
+        title="弹层标题"
+        extra="右上角内容"
+        width={350}
+        body={<Box p="m">内容</Box>}
+        footer={<Text>底部信息</Text>}
+      >
+        <Button
+          style={{
+            position: 'absolute',
+            bottom: 20,
+            right: 20,
+          }}
+        >
+          底部浮层自动修正弹出区域
+        </Button>
+      </DragPanel>
+    </>
   );
 }
 
@@ -41,3 +60,23 @@ export function FooterCustom() {
     </DragPanel>
   );
 }
+
+export function ResizeablePanel() {
+  return (
+    <DragPanel
+      title="弹层标题"
+      resizeable
+      extra="右上角内容"
+      width={350}
+      height={400}
+      body={
+        <Box p="m" textAlign="center" background="#fa8484">
+          内容
+        </Box>
+      }
+      footer={<Text>底部信息</Text>}
+    >
+      <Button>点击唤起浮层</Button>
+    </DragPanel>
+  );
+}
diff --git a/packages/designer/src/components/components-popover.tsx b/packages/designer/src/components/components-popover.tsx
@@ -125,6 +125,8 @@ export const ComponentsPopover = observer(
         }
         footer={tipsTextMap[type]}
         width="330px"
+        height="450px"
+        resizeable
         maskClosable
         body={
           <ComponentsPanel
@@ -133,10 +135,6 @@ export const ComponentsPopover = observer(
             menuData={menuData}
             layout={layout}
             onItemSelect={handleSelect}
-            style={{
-              maxHeight: '400px',
-              overflow: 'auto',
-            }}
           />
         }
         {...popoverProps}

diff --git a/packages/designer/src/setters/expression-setter.tsx b/packages/designer/src/setters/expression-setter.tsx
@@ -195,6 +195,8 @@ export function ExpressionPopover({
   return (
     <DragPanel
       width={700}
+      height={615}
+      resizeable
       title={`将 ${selectNodePath}/${title} 设置为引用变量或自定义表达式`}
       extra={subTitle}
       onOpenChange={(open) => {
@@ -203,16 +205,13 @@ export function ExpressionPopover({
           setError('');
         }
       }}
-      popoverStyle={{
-        height: '615px',
-      }}
       body={
-        <>
+        <Box display="flex" flexDirection="column">
           <Panel shape="solid">
             <InputCode
               shape="inset"
               minHeight="56px"
-              maxHeight="200px"
+              maxHeight="160px"
               value={exp}
               placeholder={placeholder}
               onChange={handleExpInputChange}
@@ -237,11 +236,15 @@ export function ExpressionPopover({
             title="从变量列表中选中"
             shape="solid"
             borderTop="0"
-            overflow="hidden"
-            bodyProps={{ overflow: 'hidden' }}
+            flex={1}
+            bodyProps={{
+              style: {
+                overflow: 'hidden',
+              },
+            }}
           >
             <VariableTree
-              height={380}
+              height="100%"
               showViewButton
               dataSource={dataSource || expressionVariables}
               appContext={sandbox?.window['tango']}
@@ -307,10 +310,10 @@ export function ExpressionPopover({
               }}
             />
           </Panel>
-        </>
+        </Box>
       }
       footer={(close) => (
-        <Box display="flex" justifyContent="flex-end" gap="5px">
+        <Box display="flex" width="100%" justifyContent="flex-end" gap="5px">
           <Button
             type="primary"
             size="small"

diff --git a/packages/ui/src/drag-panel.tsx b/packages/ui/src/drag-panel.tsx
@@ -35,6 +35,52 @@ const CloseIcon = styled(CloseOutlined)`
   }
 `;
 
+const DragPanelContainer = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--tango-colors-line2);
+  width: ${(props) => props.width}px;
+  height: ${(props) => props.height}px;
+  resize: ${(props) => (props.resizeable ? 'both' : 'none')};
+  overflow: ${(props) => (props.resizeable ? 'auto' : 'hidden')};
+`;
+
+const DragPanelHeader = styled(Box)`
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--tango-colors-line2);
+  cursor: move;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 36px;
+`;
+
+const DragPanelBody = styled(Box)`
+  flex: 1;
+  min-height: 0;
+  > * {
+    height: 100%;
+  }
+`;
+
+const DragPanelFooter = styled(Box)`
+  padding: 8px 12px;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background: var(--tango-colors-line1);
+  font-size: 12px;
+  font-weight: 400;
+  border-top: 1px solid var(--tango-colors-line2);
+`;
+
 interface DragPanelProps extends Omit<PopoverProps, 'overlay' | 'open'> {
   // 标题
   title?: React.ReactNode | string;
@@ -44,8 +90,12 @@ interface DragPanelProps extends Omit<PopoverProps, 'overlay' | 'open'> {
   footer?: ((close: () => void) => React.ReactNode) | React.ReactNode | string;
   // 宽度
   width?: number | string;
+  // 高度
+  height?: number | string;
   // 右上角区域
   extra?: React.ReactNode | string;
+  // 是否可以缩放
+  resizeable?: boolean;
   children?: React.ReactNode;
 }
 
@@ -55,8 +105,10 @@ export function DragPanel({
   body,
   children,
   width = 330,
+  height = 330,
   extra,
   onOpenChange = noop,
+  resizeable = false,
   ...props
 }: DragPanelProps) {
   const [open, setOpen] = useState(false);
@@ -83,25 +135,8 @@ export function DragPanel({
             injectStyleToBody();
           }}
         >
-          <Box
-            bg="#FFF"
-            borderRadius="m"
-            boxShadow="lowDown"
-            border="solid"
-            borderColor="line2"
-            overflow="hidden"
-            width={width}
-          >
-            {/* 头部区域 */}
-            <Box
-              px="l"
-              py="m"
-              className="selection-drag-bar"
-              borderBottom="1px solid var(--tango-colors-line2)"
-              cursor="move"
-              display="flex"
-              justifyContent="space-between"
-            >
+          <DragPanelContainer width={width} height={height} resizeable={resizeable}>
+            <DragPanelHeader className="selection-drag-bar">
               <Box fontSize="12px" color="text2">
                 <IconFont type="icon-applications" />
                 <Text marginLeft={'5px'}>{title}</Text>
@@ -115,26 +150,10 @@ export function DragPanel({
                   }}
                 />
               </Box>
-            </Box>
-            {/* 主体区域 */}
-            {body}
-            {/* 底部 */}
-            {footer && (
-              <Box
-                px="l"
-                py="m"
-                whiteSpace="nowrap"
-                overflow="hidden"
-                textOverflow="ellipsis"
-                background="var(--tango-colors-line1)"
-                fontSize="12px"
-                fontWeight={400}
-                borderTop="1px solid var(--tango-colors-line2)"
-              >
-                {footerNode}
-              </Box>
-            )}
-          </Box>
+            </DragPanelHeader>
+            <DragPanelBody className="drag-panel-body">{body}</DragPanelBody>
+            {footer && <DragPanelFooter>{footerNode}</DragPanelFooter>}
+          </DragPanelContainer>
         </Draggable>
       }
       {...props}