Skip to content

Commit e12b872

Browse files
tlabajtlabaj
authored
feat(Drawer): Added start and end to position props, updated resizing to work with RTL (#9627)
* feat(Drawer): Added start and end to position props, updaed resizing to work with RTL * update logic for newsize
1 parent cfd927c commit e12b872

9 files changed

Lines changed: 102 additions & 56 deletions

File tree

‎packages/react-core/src/components/Drawer/Drawer.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,16 @@ export enum DrawerColorVariant {
1111
export interface DrawerProps extends React.HTMLProps<HTMLDivElement> {
1212
/** Additional classes added to the Drawer. */
1313
className?: string;
14-
/** Content rendered in the left hand panel */
14+
/** Content rendered in the drawer panel */
1515
children?: React.ReactNode;
1616
/** Indicates if the drawer is expanded */
1717
isExpanded?: boolean;
1818
/** Indicates if the content element and panel element are displayed side by side. */
1919
isInline?: boolean;
2020
/** Indicates if the drawer will always show both content and panel. */
2121
isStatic?: boolean;
22-
/** Position of the drawer panel */
23-
position?: 'left' | 'right' | 'bottom';
22+
/** Position of the drawer panel. left and right are deprecated, use start and end instead. */
23+
position?: 'start' | 'end' | 'bottom' | 'left' | 'right';
2424
/** Callback when drawer panel is expanded after waiting 250ms for animation to complete. */
2525
onExpand?: (event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
2626
}
@@ -39,7 +39,7 @@ export const DrawerContext = React.createContext<Partial<DrawerContextProps>>({
3939
isExpanded: false,
4040
isStatic: false,
4141
onExpand: () => {},
42-
position: 'right',
42+
position: 'end',
4343
drawerRef: null,
4444
drawerContentRef: null,
4545
isInline: false
@@ -51,7 +51,7 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
5151
isExpanded = false,
5252
isInline = false,
5353
isStatic = false,
54-
position = 'right',
54+
position = 'end',
5555
onExpand = () => {},
5656
...props
5757
}: DrawerProps) => {
@@ -66,7 +66,7 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
6666
isExpanded && styles.modifiers.expanded,
6767
isInline && styles.modifiers.inline,
6868
isStatic && styles.modifiers.static,
69-
position === 'left' && styles.modifiers.panelLeft,
69+
(position === 'left' || position === 'start') && styles.modifiers.panelLeft,
7070
position === 'bottom' && styles.modifiers.panelBottom,
7171
className
7272
)}

‎packages/react-core/src/components/Drawer/DrawerPanelContent.tsx‎

Lines changed: 72 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -87,8 +87,8 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
8787
const previouslyFocusedElement = React.useRef(null);
8888
let currWidth: number = 0;
8989
let panelRect: DOMRect;
90-
let right: number;
91-
let left: number;
90+
let end: number;
91+
let start: number;
9292
let bottom: number;
9393
let setInitialVals: boolean = true;
9494

@@ -108,23 +108,52 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
108108
const calcValueNow = () => {
109109
let splitterPos;
110110
let drawerSize;
111+
const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl';
111112

112-
if (isInline && position === 'right') {
113-
splitterPos = panel.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
114-
drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
115-
} else if (isInline && position === 'left') {
116-
splitterPos = splitterRef.current.getBoundingClientRect().right - panel.current.getBoundingClientRect().left;
117-
drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
118-
} else if (position === 'right') {
119-
splitterPos =
120-
drawerContentRef.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
121-
drawerSize =
122-
drawerContentRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
123-
} else if (position === 'left') {
124-
splitterPos =
125-
splitterRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
126-
drawerSize =
127-
drawerContentRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
113+
if (isInline && (position === 'end' || position === 'right')) {
114+
if (isRTL) {
115+
splitterPos = panel.current.getBoundingClientRect().left - splitterRef.current.getBoundingClientRect().right;
116+
drawerSize = drawerRef.current.getBoundingClientRect().left - drawerRef.current.getBoundingClientRect().right;
117+
} else {
118+
splitterPos = panel.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
119+
drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
120+
}
121+
} else if (isInline && (position === 'start' || position === 'left')) {
122+
if (isRTL) {
123+
splitterPos = splitterRef.current.getBoundingClientRect().left - panel.current.getBoundingClientRect().right;
124+
drawerSize = drawerRef.current.getBoundingClientRect().left - drawerRef.current.getBoundingClientRect().right;
125+
} else {
126+
splitterPos = splitterRef.current.getBoundingClientRect().right - panel.current.getBoundingClientRect().left;
127+
drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
128+
}
129+
} else if (position === 'end' || position === 'right') {
130+
if (isRTL) {
131+
splitterPos =
132+
drawerContentRef.current.getBoundingClientRect().left - splitterRef.current.getBoundingClientRect().right;
133+
drawerSize =
134+
drawerContentRef.current.getBoundingClientRect().left -
135+
drawerContentRef.current.getBoundingClientRect().right;
136+
} else {
137+
splitterPos =
138+
drawerContentRef.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
139+
drawerSize =
140+
drawerContentRef.current.getBoundingClientRect().right -
141+
drawerContentRef.current.getBoundingClientRect().left;
142+
}
143+
} else if (position === 'start' || position === 'left') {
144+
if (isRTL) {
145+
splitterPos =
146+
splitterRef.current.getBoundingClientRect().left - drawerContentRef.current.getBoundingClientRect().right;
147+
drawerSize =
148+
drawerContentRef.current.getBoundingClientRect().left -
149+
drawerContentRef.current.getBoundingClientRect().right;
150+
} else {
151+
splitterPos =
152+
splitterRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
153+
drawerSize =
154+
drawerContentRef.current.getBoundingClientRect().right -
155+
drawerContentRef.current.getBoundingClientRect().left;
156+
}
128157
} else if (position === 'bottom') {
129158
splitterPos =
130159
drawerContentRef.current.getBoundingClientRect().bottom - splitterRef.current.getBoundingClientRect().top;
@@ -166,24 +195,31 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
166195
};
167196

168197
const handleControlMove = (e: MouseEvent | TouchEvent, controlPosition: number) => {
198+
const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl';
199+
169200
e.stopPropagation();
170201
if (!isResizing) {
171202
return;
172203
}
173204

174205
if (setInitialVals) {
175206
panelRect = panel.current.getBoundingClientRect();
176-
right = panelRect.right;
177-
left = panelRect.left;
207+
if (isRTL) {
208+
start = panelRect.right;
209+
end = panelRect.left;
210+
} else {
211+
end = panelRect.right;
212+
start = panelRect.left;
213+
}
178214
bottom = panelRect.bottom;
179215
setInitialVals = false;
180216
}
181217
const mousePos = controlPosition;
182218
let newSize = 0;
183-
if (position === 'right') {
184-
newSize = right - mousePos;
185-
} else if (position === 'left') {
186-
newSize = mousePos - left;
219+
if (position === 'end' || position === 'right') {
220+
newSize = isRTL ? mousePos - end : end - mousePos;
221+
} else if (position === 'start' || position === 'left') {
222+
newSize = isRTL ? start - mousePos : mousePos - start;
187223
} else {
188224
newSize = bottom - mousePos;
189225
}
@@ -225,6 +261,8 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
225261
const callbackMouseUp = React.useCallback(handleMouseup, []);
226262

227263
const handleKeys = (e: React.KeyboardEvent) => {
264+
const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl';
265+
228266
const key = e.key;
229267
if (
230268
key !== 'Escape' &&
@@ -248,9 +286,17 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
248286
newSize = position === 'bottom' ? panelRect.height : panelRect.width;
249287
let delta = 0;
250288
if (key === 'ArrowRight') {
251-
delta = position === 'left' ? increment : -increment;
289+
if (isRTL) {
290+
delta = position === 'left' || position === 'start' ? -increment : increment;
291+
} else {
292+
delta = position === 'left' || position === 'start' ? increment : -increment;
293+
}
252294
} else if (key === 'ArrowLeft') {
253-
delta = position === 'left' ? -increment : increment;
295+
if (isRTL) {
296+
delta = position === 'left' || position === 'start' ? increment : -increment;
297+
} else {
298+
delta = position === 'left' || position === 'start' ? -increment : increment;
299+
}
254300
} else if (key === 'ArrowUp') {
255301
delta = increment;
256302
} else if (key === 'ArrowDown') {

‎packages/react-core/src/components/Drawer/examples/Drawer.md‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,15 @@ section: components
2626

2727
```
2828

29-
### Panel on right
29+
### Panel at end
3030

31-
```ts file="./DrawerPanelRight.tsx"
31+
```ts file="./DrawerPanelEnd.tsx"
3232

3333
```
3434

35-
### Panel on left
35+
### Panel at start
3636

37-
```ts file="./DrawerPanelLeft.tsx"
37+
```ts file="./DrawerPanelStart.tsx"
3838

3939
```
4040

@@ -50,15 +50,15 @@ section: components
5050

5151
```
5252

53-
### Inline panel on right
53+
### Inline panel at end
5454

55-
```ts file="./DrawerInlinePanelRight.tsx"
55+
```ts file="./DrawerInlinePanelEnd.tsx"
5656

5757
```
5858

59-
### Inline panel on left
59+
### Inline panel at start
6060

61-
```ts file="./DrawerInlinePanelLeft.tsx"
61+
```ts file="./DrawerInlinePanelStart.tsx"
6262

6363
```
6464

@@ -100,15 +100,15 @@ section: components
100100

101101
```
102102

103-
### Resizable on right
103+
### Resizable at end
104104

105-
```ts file="DrawerResizableOnRight.tsx"
105+
```ts file="DrawerResizableAtEnd.tsx"
106106

107107
```
108108

109-
### Resizable on left
109+
### Resizable at start
110110

111-
```ts file="DrawerResizableOnLeft.tsx"
111+
```ts file="DrawerResizableAtStart.tsx"
112112

113113
```
114114

packages/react-core/src/components/Drawer/examples/DrawerInlinePanelRight.tsx renamed to packages/react-core/src/components/Drawer/examples/DrawerInlinePanelEnd.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
Button
1111
} from '@patternfly/react-core';
1212

13-
export const DrawerInlinePanelRight: React.FunctionComponent = () => {
13+
export const DrawerInlinePanelEnd: React.FunctionComponent = () => {
1414
const [isExpanded, setIsExpanded] = React.useState(false);
1515
const drawerRef = React.useRef<HTMLDivElement>();
1616

packages/react-core/src/components/Drawer/examples/DrawerInlinePanelLeft.tsx renamed to packages/react-core/src/components/Drawer/examples/DrawerInlinePanelStart.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
Button
1111
} from '@patternfly/react-core';
1212

13-
export const DrawerInlinePanelLeft: React.FunctionComponent = () => {
13+
export const DrawerInlinePanelStart: React.FunctionComponent = () => {
1414
const [isExpanded, setIsExpanded] = React.useState(false);
1515
const drawerRef = React.useRef<HTMLDivElement>();
1616

@@ -47,7 +47,7 @@ export const DrawerInlinePanelLeft: React.FunctionComponent = () => {
4747
<Button aria-expanded={isExpanded} onClick={onClick}>
4848
Toggle drawer
4949
</Button>
50-
<Drawer isExpanded={isExpanded} isInline position="left" onExpand={onExpand}>
50+
<Drawer isExpanded={isExpanded} isInline position="start" onExpand={onExpand}>
5151
<DrawerContent panelContent={panelContent}>
5252
<DrawerContentBody>{drawerContent}</DrawerContentBody>
5353
</DrawerContent>

packages/react-core/src/components/Drawer/examples/DrawerPanelLeft.tsx renamed to packages/react-core/src/components/Drawer/examples/DrawerPanelEnd.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
Button
1111
} from '@patternfly/react-core';
1212

13-
export const DrawerPanelLeft: React.FunctionComponent = () => {
13+
export const DrawerPanelEnd: React.FunctionComponent = () => {
1414
const [isExpanded, setIsExpanded] = React.useState(false);
1515
const drawerRef = React.useRef<HTMLDivElement>();
1616

@@ -47,7 +47,7 @@ export const DrawerPanelLeft: React.FunctionComponent = () => {
4747
<Button aria-expanded={isExpanded} onClick={onClick}>
4848
Toggle drawer
4949
</Button>
50-
<Drawer isExpanded={isExpanded} position="left" onExpand={onExpand}>
50+
<Drawer isExpanded={isExpanded} position="end" onExpand={onExpand}>
5151
<DrawerContent panelContent={panelContent}>
5252
<DrawerContentBody>{drawerContent}</DrawerContentBody>
5353
</DrawerContent>

packages/react-core/src/components/Drawer/examples/DrawerPanelRight.tsx renamed to packages/react-core/src/components/Drawer/examples/DrawerPanelStart.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
Button
1111
} from '@patternfly/react-core';
1212

13-
export const DrawerPanelRight: React.FunctionComponent = () => {
13+
export const DrawerPanelStart: React.FunctionComponent = () => {
1414
const [isExpanded, setIsExpanded] = React.useState(false);
1515
const drawerRef = React.useRef<HTMLDivElement>();
1616

@@ -47,7 +47,7 @@ export const DrawerPanelRight: React.FunctionComponent = () => {
4747
<Button aria-expanded={isExpanded} onClick={onClick}>
4848
Toggle drawer
4949
</Button>
50-
<Drawer isExpanded={isExpanded} position="right" onExpand={onExpand}>
50+
<Drawer isExpanded={isExpanded} position="start" onExpand={onExpand}>
5151
<DrawerContent panelContent={panelContent}>
5252
<DrawerContentBody>{drawerContent}</DrawerContentBody>
5353
</DrawerContent>

packages/react-core/src/components/Drawer/examples/DrawerResizableOnRight.tsx renamed to packages/react-core/src/components/Drawer/examples/DrawerResizableAtEnd.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
Button
1111
} from '@patternfly/react-core';
1212

13-
export const DrawerResizableOnRight: React.FunctionComponent = () => {
13+
export const DrawerResizableAtEnd: React.FunctionComponent = () => {
1414
const [isExpanded, setIsExpanded] = React.useState(false);
1515
const drawerRef = React.useRef<HTMLDivElement>();
1616

@@ -32,7 +32,7 @@ export const DrawerResizableOnRight: React.FunctionComponent = () => {
3232
};
3333

3434
const panelContent = (
35-
<DrawerPanelContent isResizable onResize={onResize} id="right-resize-panel" defaultSize={'500px'} minSize={'150px'}>
35+
<DrawerPanelContent isResizable onResize={onResize} id="end-resize-panel" defaultSize={'500px'} minSize={'150px'}>
3636
<DrawerHead>
3737
<span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
3838
drawer-panel
@@ -52,7 +52,7 @@ export const DrawerResizableOnRight: React.FunctionComponent = () => {
5252
<Button aria-expanded={isExpanded} onClick={onClick}>
5353
Toggle drawer
5454
</Button>
55-
<Drawer isExpanded={isExpanded} onExpand={onExpand} position="right">
55+
<Drawer isExpanded={isExpanded} onExpand={onExpand} position="end">
5656
<DrawerContent panelContent={panelContent}>
5757
<DrawerContentBody>{drawerContent}</DrawerContentBody>
5858
</DrawerContent>

packages/react-core/src/components/Drawer/examples/DrawerResizableOnLeft.tsx renamed to packages/react-core/src/components/Drawer/examples/DrawerResizableAtStart.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
Button
1111
} from '@patternfly/react-core';
1212

13-
export const DrawerResizableOnLeft: React.FunctionComponent = () => {
13+
export const DrawerResizableAtStart: React.FunctionComponent = () => {
1414
const [isExpanded, setIsExpanded] = React.useState(false);
1515
const drawerRef = React.useRef<HTMLDivElement>();
1616

@@ -47,7 +47,7 @@ export const DrawerResizableOnLeft: React.FunctionComponent = () => {
4747
<Button aria-expanded={isExpanded} onClick={onClick}>
4848
Toggle drawer
4949
</Button>
50-
<Drawer isExpanded={isExpanded} onExpand={onExpand} position="left">
50+
<Drawer isExpanded={isExpanded} onExpand={onExpand} position="start">
5151
<DrawerContent panelContent={panelContent}>
5252
<DrawerContentBody>{drawerContent}</DrawerContentBody>
5353
</DrawerContent>

0 commit comments

Comments
 (0)