🔀 feat: merge master & update snapshot

ant-design · Dec 6, 2023 · fed6ff8 · fed6ff8
2 parents c1e4c00 + 06a8493
commit fed6ff8
Show file tree

Hide file tree

Showing 11 changed files with 333 additions and 31 deletions.
diff --git a/src/DraggablePanel/DraggablePanel.tsx b/src/DraggablePanel/DraggablePanel.tsx
@@ -29,6 +29,14 @@ export interface DraggablePanelProps {
    * 最小高度
    */
   minHeight?: number;
+  /**
+   * 最大宽度
+   */
+  maxWidth?: number;
+  /**
+   * 最大高度
+   */
+  maxHeight?: number;
   /**
    * 控制可缩放区域
    */
@@ -112,6 +120,8 @@ export const Draggable: FC<DraggablePanelProps> = memo(
     defaultPosition,
     minWidth,
     minHeight,
+    maxHeight,
+    maxWidth,
     prefixCls: customPrefixCls,
     onSizeChange,
     onSizeDragging,
@@ -134,6 +144,8 @@ export const Draggable: FC<DraggablePanelProps> = memo(
             onSizeChange={onSizeChange}
             minHeight={minHeight}
             minWidth={minWidth}
+            maxHeight={maxHeight}
+            maxWidth={maxWidth}
             // 缩放
             resize={resize}
             onExpandChange={onExpandChange}
@@ -157,6 +169,8 @@ export const Draggable: FC<DraggablePanelProps> = memo(
             // 尺寸
             minHeight={minHeight}
             minWidth={minWidth}
+            maxHeight={maxHeight}
+            maxWidth={maxWidth}
             defaultSize={defaultSize}
             size={size}
             onSizeDragging={onSizeDragging}

diff --git a/src/DraggablePanel/FixMode.tsx b/src/DraggablePanel/FixMode.tsx
@@ -6,12 +6,7 @@ import { Center } from 'react-layout-kit';
 import type { Props as RndProps } from 'react-rnd';
 import useControlledState from 'use-merge-value';
 
-import {
-  DownOutlined,
-  LeftOutlined,
-  RightOutlined,
-  UpOutlined,
-} from '@ant-design/icons';
+import { DownOutlined, LeftOutlined, RightOutlined, UpOutlined } from '@ant-design/icons';
 import { getPrefixCls } from '../theme';
 import { useStyle } from './style';
 
@@ -36,6 +31,15 @@ export interface FixModePanelProps {
    * 最小高度
    */
   minHeight?: number;
+
+  /**
+   * 最大宽度
+   */
+  maxWidth?: number;
+  /**
+   * 最大高度
+   */
+  maxHeight?: number;
   /**
    * 控制可缩放区域
    */
@@ -127,6 +131,8 @@ export const FixMode: FC<FixModePanelProps> = memo<FixModePanelProps>(
     defaultSize: customizeDefaultSize,
     minWidth,
     minHeight,
+    maxHeight,
+    maxWidth,
     prefixCls: customPrefixCls,
     onSizeChange,
     onSizeDragging,
@@ -153,8 +159,7 @@ export const FixMode: FC<FixModePanelProps> = memo<FixModePanelProps>(
       if (!canResizing) return {};
 
       return {
-        [revesePlacement(placement)]:
-          styles[`${revesePlacement(placement)}Handle`],
+        [revesePlacement(placement)]: styles[`${revesePlacement(placement)}Handle`],
       };
     }, [canResizing, placement]);
 
@@ -189,8 +194,9 @@ export const FixMode: FC<FixModePanelProps> = memo<FixModePanelProps>(
     const sizeProps = isExpand
       ? {
           minWidth: typeof minWidth === 'number' ? Math.max(minWidth, 0) : 280,
-          minHeight:
-            typeof minHeight === 'number' ? Math.max(minHeight, 0) : undefined,
+          minHeight: typeof minHeight === 'number' ? Math.max(minHeight, 0) : undefined,
+          maxHeight: typeof maxHeight === 'number' ? Math.max(maxHeight, 0) : undefined,
+          maxWidth: typeof maxWidth === 'number' ? Math.max(maxWidth, 0) : undefined,
           defaultSize,
           size: size as Size,
           style,

diff --git a/src/DraggablePanel/FloatMode.tsx b/src/DraggablePanel/FloatMode.tsx
@@ -28,6 +28,14 @@ export interface FloatProps {
    * 最小高度
    */
   minHeight?: number;
+  /**
+   * 最大宽度
+   */
+  maxWidth?: number;
+  /**
+   * 最大高度
+   */
+  maxHeight?: number;
   /**
    * 控制可缩放区域
    */
@@ -100,6 +108,8 @@ export const FloatMode: FC<FloatProps> = memo(
     defaultPosition: customizeDefaultPosition,
     minWidth = 280,
     minHeight = 200,
+    maxHeight,
+    maxWidth,
     prefixCls,
     canResizing,
   }) => {
@@ -147,6 +157,8 @@ export const FloatMode: FC<FloatProps> = memo(
     const sizeProps = {
       minWidth: Math.max(minWidth, 0),
       minHeight: Math.max(minHeight, 0),
+      maxHeight: maxHeight ? Math.max(maxHeight, 0) : undefined,
+      maxWidth: maxWidth ? Math.max(maxWidth, 0) : undefined,
       defaultSize,
       size: size as Size,
       style,

diff --git a/src/DraggablePanel/demos/basic.tsx b/src/DraggablePanel/demos/basic.tsx
@@ -10,10 +10,12 @@ export default () => (
       border: '2px solid #ddd',
       height: 300,
       display: 'flex',
+      overflow: 'hidden',
+      maxWidth: '100%',
     }}
   >
     <div style={{ flex: 1, padding: 12 }}>内容</div>
-    <DraggablePanel style={{ background: '#fff', padding: 12 }}>
+    <DraggablePanel style={{ background: '#fff', padding: 12 }} maxWidth={600}>
       可拖面板
     </DraggablePanel>
   </div>

diff --git a/src/DraggablePanel/demos/bottom.tsx b/src/DraggablePanel/demos/bottom.tsx
@@ -5,12 +5,11 @@ import { DraggablePanel } from '@ant-design/pro-editor';
 import { Flexbox } from 'react-layout-kit';
 
 export default () => (
-  <Flexbox
-    style={{ background: '#f1f1f1', border: '2px solid #ddd', height: 300 }}
-  >
+  <Flexbox style={{ background: '#f1f1f1', border: '2px solid #ddd', height: 300 }}>
     <div style={{ flex: 1, padding: 12 }}>内容</div>
     <DraggablePanel
       placement={'bottom'}
+      maxHeight={250}
       style={{ background: '#fff', width: '100%', padding: 12 }}
     >
       底部面板

diff --git a/src/DraggablePanel/demos/left.tsx b/src/DraggablePanel/demos/left.tsx
@@ -5,12 +5,10 @@ import { DraggablePanel } from '@ant-design/pro-editor';
 import { Flexbox } from 'react-layout-kit';
 
 export default () => (
-  <Flexbox
-    horizontal
-    style={{ background: '#f1f1f1', border: '2px solid #ddd', height: 300 }}
-  >
+  <Flexbox horizontal style={{ background: '#f1f1f1', border: '2px solid #ddd', height: 300 }}>
     <DraggablePanel
       placement={'left'}
+      maxWidth={800}
       style={{ background: '#fff', width: '100%', padding: 12 }}
     >
       左侧面板

diff --git a/src/DraggablePanel/demos/top.tsx b/src/DraggablePanel/demos/top.tsx
@@ -5,11 +5,10 @@ import { DraggablePanel } from '@ant-design/pro-editor';
 import { Flexbox } from 'react-layout-kit';
 
 export default () => (
-  <Flexbox
-    style={{ background: '#f1f1f1', border: '2px solid #ddd', height: 300 }}
-  >
+  <Flexbox style={{ background: '#f1f1f1', border: '2px solid #ddd', height: 300 }}>
     <DraggablePanel
       placement={'top'}
+      maxHeight={250}
       style={{ background: '#fff', width: '100%', padding: 12 }}
     >
       顶部面板

diff --git a/src/DraggablePanel/index.en-US.md b/src/DraggablePanel/index.en-US.md
@@ -45,6 +45,8 @@ Resizable from left to right
 | placement        | `'right' \| 'left' \| 'top' \| 'bottom'`   | `'right'`    | The orientation of the panel in fixed mode, default placement is on the right |
 | minWidth         | `number`                                   |              | The minimum width of the panel                                                |
 | minHeight        | `number`                                   |              | The minimum height of the panel                                               |
+| maxWidth         | `number`                                   |              | The maximum width of the panel                                                |
+| maxHeight        | `number`                                   |              | The maximum height of the panel                                               |
 | resize           | `RndProps['enableResizing']`               |              | Control the resizable area                                                    |
 | size             | `Partial<Size>`                            |              | Panel size                                                                    |
 | onSizeChange     | `(delta: NumberSize, size?: Size) => void` |              | Callback for panel size change                                                |

diff --git a/src/DraggablePanel/index.zh-CN.md b/src/DraggablePanel/index.zh-CN.md
@@ -46,6 +46,8 @@ group: 基础组件
 | placement        | `'right' \| 'left' \| 'top' \| 'bottom'`   | `'right'`    | 固定模式下面板的朝向，默认放置在右侧     |
 | minWidth         | `number`                                   |              | 面板的最小宽度                           |
 | minHeight        | `number`                                   |              | 面板的最小高度                           |
+| maxWidth         | `number`                                   |              | 面板的最大宽度                           |
+| maxHeight        | `number`                                   |              | 面板的最大高度                           |
 | resize           | `RndProps['enableResizing']`               |              | 控制可缩放区域                           |
 | size             | `Partial<Size>`                            |              | 面板尺寸                                 |
 | onSizeChange     | `(delta: NumberSize, size?: Size) => void` |              | 面板尺寸变更回调                         |

diff --git a/src/Layout/index.zh-CN.md b/src/Layout/index.zh-CN.md
@@ -1,10 +1,12 @@
 ---
-title: Layout 基础布局
+title: EditorLayout 基础布局
 atomId: Layout
 group: 基础组件
 ---
 
-# Layout 基础布局
+EditorLayout 是我们专门为了编辑器场景制作的编辑器布局组件
+
+# EditorLayout 基础布局
 
 ## 代码演示