Skip to content

Commit fed6ff8

Browse files
ONLY-yoursONLY-yours
committed
🔀 feat: merge master & update snapshot
2 parents c1e4c00 + 06a8493 commit fed6ff8

11 files changed

Lines changed: 333 additions & 31 deletions

File tree

‎src/DraggablePanel/DraggablePanel.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,14 @@ export interface DraggablePanelProps {
2929
* 最小高度
3030
*/
3131
minHeight?: number;
32+
/**
33+
* 最大宽度
34+
*/
35+
maxWidth?: number;
36+
/**
37+
* 最大高度
38+
*/
39+
maxHeight?: number;
3240
/**
3341
* 控制可缩放区域
3442
*/
@@ -112,6 +120,8 @@ export const Draggable: FC<DraggablePanelProps> = memo(
112120
defaultPosition,
113121
minWidth,
114122
minHeight,
123+
maxHeight,
124+
maxWidth,
115125
prefixCls: customPrefixCls,
116126
onSizeChange,
117127
onSizeDragging,
@@ -134,6 +144,8 @@ export const Draggable: FC<DraggablePanelProps> = memo(
134144
onSizeChange={onSizeChange}
135145
minHeight={minHeight}
136146
minWidth={minWidth}
147+
maxHeight={maxHeight}
148+
maxWidth={maxWidth}
137149
// 缩放
138150
resize={resize}
139151
onExpandChange={onExpandChange}
@@ -157,6 +169,8 @@ export const Draggable: FC<DraggablePanelProps> = memo(
157169
// 尺寸
158170
minHeight={minHeight}
159171
minWidth={minWidth}
172+
maxHeight={maxHeight}
173+
maxWidth={maxWidth}
160174
defaultSize={defaultSize}
161175
size={size}
162176
onSizeDragging={onSizeDragging}

‎src/DraggablePanel/FixMode.tsx‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,7 @@ import { Center } from 'react-layout-kit';
66
import type { Props as RndProps } from 'react-rnd';
77
import useControlledState from 'use-merge-value';
88

9-
import {
10-
DownOutlined,
11-
LeftOutlined,
12-
RightOutlined,
13-
UpOutlined,
14-
} from '@ant-design/icons';
9+
import { DownOutlined, LeftOutlined, RightOutlined, UpOutlined } from '@ant-design/icons';
1510
import { getPrefixCls } from '../theme';
1611
import { useStyle } from './style';
1712

@@ -36,6 +31,15 @@ export interface FixModePanelProps {
3631
* 最小高度
3732
*/
3833
minHeight?: number;
34+
35+
/**
36+
* 最大宽度
37+
*/
38+
maxWidth?: number;
39+
/**
40+
* 最大高度
41+
*/
42+
maxHeight?: number;
3943
/**
4044
* 控制可缩放区域
4145
*/
@@ -127,6 +131,8 @@ export const FixMode: FC<FixModePanelProps> = memo<FixModePanelProps>(
127131
defaultSize: customizeDefaultSize,
128132
minWidth,
129133
minHeight,
134+
maxHeight,
135+
maxWidth,
130136
prefixCls: customPrefixCls,
131137
onSizeChange,
132138
onSizeDragging,
@@ -153,8 +159,7 @@ export const FixMode: FC<FixModePanelProps> = memo<FixModePanelProps>(
153159
if (!canResizing) return {};
154160

155161
return {
156-
[revesePlacement(placement)]:
157-
styles[`${revesePlacement(placement)}Handle`],
162+
[revesePlacement(placement)]: styles[`${revesePlacement(placement)}Handle`],
158163
};
159164
}, [canResizing, placement]);
160165

@@ -189,8 +194,9 @@ export const FixMode: FC<FixModePanelProps> = memo<FixModePanelProps>(
189194
const sizeProps = isExpand
190195
? {
191196
minWidth: typeof minWidth === 'number' ? Math.max(minWidth, 0) : 280,
192-
minHeight:
193-
typeof minHeight === 'number' ? Math.max(minHeight, 0) : undefined,
197+
minHeight: typeof minHeight === 'number' ? Math.max(minHeight, 0) : undefined,
198+
maxHeight: typeof maxHeight === 'number' ? Math.max(maxHeight, 0) : undefined,
199+
maxWidth: typeof maxWidth === 'number' ? Math.max(maxWidth, 0) : undefined,
194200
defaultSize,
195201
size: size as Size,
196202
style,

‎src/DraggablePanel/FloatMode.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,14 @@ export interface FloatProps {
2828
* 最小高度
2929
*/
3030
minHeight?: number;
31+
/**
32+
* 最大宽度
33+
*/
34+
maxWidth?: number;
35+
/**
36+
* 最大高度
37+
*/
38+
maxHeight?: number;
3139
/**
3240
* 控制可缩放区域
3341
*/
@@ -100,6 +108,8 @@ export const FloatMode: FC<FloatProps> = memo(
100108
defaultPosition: customizeDefaultPosition,
101109
minWidth = 280,
102110
minHeight = 200,
111+
maxHeight,
112+
maxWidth,
103113
prefixCls,
104114
canResizing,
105115
}) => {
@@ -147,6 +157,8 @@ export const FloatMode: FC<FloatProps> = memo(
147157
const sizeProps = {
148158
minWidth: Math.max(minWidth, 0),
149159
minHeight: Math.max(minHeight, 0),
160+
maxHeight: maxHeight ? Math.max(maxHeight, 0) : undefined,
161+
maxWidth: maxWidth ? Math.max(maxWidth, 0) : undefined,
150162
defaultSize,
151163
size: size as Size,
152164
style,

‎src/DraggablePanel/demos/basic.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,12 @@ export default () => (
1010
border: '2px solid #ddd',
1111
height: 300,
1212
display: 'flex',
13+
overflow: 'hidden',
14+
maxWidth: '100%',
1315
}}
1416
>
1517
<div style={{ flex: 1, padding: 12 }}>内容</div>
16-
<DraggablePanel style={{ background: '#fff', padding: 12 }}>
18+
<DraggablePanel style={{ background: '#fff', padding: 12 }} maxWidth={600}>
1719
可拖面板
1820
</DraggablePanel>
1921
</div>

‎src/DraggablePanel/demos/bottom.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,11 @@ import { DraggablePanel } from '@ant-design/pro-editor';
55
import { Flexbox } from 'react-layout-kit';
66

77
export default () => (
8-
<Flexbox
9-
style={{ background: '#f1f1f1', border: '2px solid #ddd', height: 300 }}
10-
>
8+
<Flexbox style={{ background: '#f1f1f1', border: '2px solid #ddd', height: 300 }}>
119
<div style={{ flex: 1, padding: 12 }}>内容</div>
1210
<DraggablePanel
1311
placement={'bottom'}
12+
maxHeight={250}
1413
style={{ background: '#fff', width: '100%', padding: 12 }}
1514
>
1615
底部面板

‎src/DraggablePanel/demos/left.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,10 @@ import { DraggablePanel } from '@ant-design/pro-editor';
55
import { Flexbox } from 'react-layout-kit';
66

77
export default () => (
8-
<Flexbox
9-
horizontal
10-
style={{ background: '#f1f1f1', border: '2px solid #ddd', height: 300 }}
11-
>
8+
<Flexbox horizontal style={{ background: '#f1f1f1', border: '2px solid #ddd', height: 300 }}>
129
<DraggablePanel
1310
placement={'left'}
11+
maxWidth={800}
1412
style={{ background: '#fff', width: '100%', padding: 12 }}
1513
>
1614
左侧面板

‎src/DraggablePanel/demos/top.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,10 @@ import { DraggablePanel } from '@ant-design/pro-editor';
55
import { Flexbox } from 'react-layout-kit';
66

77
export default () => (
8-
<Flexbox
9-
style={{ background: '#f1f1f1', border: '2px solid #ddd', height: 300 }}
10-
>
8+
<Flexbox style={{ background: '#f1f1f1', border: '2px solid #ddd', height: 300 }}>
119
<DraggablePanel
1210
placement={'top'}
11+
maxHeight={250}
1312
style={{ background: '#fff', width: '100%', padding: 12 }}
1413
>
1514
顶部面板

‎src/DraggablePanel/index.en-US.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ Resizable from left to right
4545
| placement | `'right' \| 'left' \| 'top' \| 'bottom'` | `'right'` | The orientation of the panel in fixed mode, default placement is on the right |
4646
| minWidth | `number` | | The minimum width of the panel |
4747
| minHeight | `number` | | The minimum height of the panel |
48+
| maxWidth | `number` | | The maximum width of the panel |
49+
| maxHeight | `number` | | The maximum height of the panel |
4850
| resize | `RndProps['enableResizing']` | | Control the resizable area |
4951
| size | `Partial<Size>` | | Panel size |
5052
| onSizeChange | `(delta: NumberSize, size?: Size) => void` | | Callback for panel size change |

‎src/DraggablePanel/index.zh-CN.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@ group: 基础组件
4646
| placement | `'right' \| 'left' \| 'top' \| 'bottom'` | `'right'` | 固定模式下面板的朝向，默认放置在右侧 |
4747
| minWidth | `number` | | 面板的最小宽度 |
4848
| minHeight | `number` | | 面板的最小高度 |
49+
| maxWidth | `number` | | 面板的最大宽度 |
50+
| maxHeight | `number` | | 面板的最大高度 |
4951
| resize | `RndProps['enableResizing']` | | 控制可缩放区域 |
5052
| size | `Partial<Size>` | | 面板尺寸 |
5153
| onSizeChange | `(delta: NumberSize, size?: Size) => void` | | 面板尺寸变更回调 |

‎src/Layout/index.zh-CN.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
---
2-
title: Layout 基础布局
2+
title: EditorLayout 基础布局
33
atomId: Layout
44
group: 基础组件
55
---
66

7-
# Layout 基础布局
7+
EditorLayout 是我们专门为了编辑器场景制作的编辑器布局组件
8+
9+
# EditorLayout 基础布局
810

911
## 代码演示
1012

0 commit comments

Comments
 (0)