@patternfly/react-core 4.202.10 → 4.202.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/dist/esm/components/Drawer/Drawer.d.ts +1 -0
- package/dist/esm/components/Drawer/Drawer.d.ts.map +1 -1
- package/dist/esm/components/Drawer/Drawer.js +3 -2
- package/dist/esm/components/Drawer/Drawer.js.map +1 -1
- package/dist/esm/components/Drawer/DrawerContent.d.ts.map +1 -1
- package/dist/esm/components/Drawer/DrawerContent.js +3 -2
- package/dist/esm/components/Drawer/DrawerContent.js.map +1 -1
- package/dist/esm/components/Drawer/DrawerPanelContent.d.ts +2 -2
- package/dist/esm/components/Drawer/DrawerPanelContent.d.ts.map +1 -1
- package/dist/esm/components/Drawer/DrawerPanelContent.js +65 -37
- package/dist/esm/components/Drawer/DrawerPanelContent.js.map +1 -1
- package/dist/js/components/Drawer/Drawer.d.ts +1 -0
- package/dist/js/components/Drawer/Drawer.d.ts.map +1 -1
- package/dist/js/components/Drawer/Drawer.js +3 -2
- package/dist/js/components/Drawer/Drawer.js.map +1 -1
- package/dist/js/components/Drawer/DrawerContent.d.ts.map +1 -1
- package/dist/js/components/Drawer/DrawerContent.js +3 -2
- package/dist/js/components/Drawer/DrawerContent.js.map +1 -1
- package/dist/js/components/Drawer/DrawerPanelContent.d.ts +2 -2
- package/dist/js/components/Drawer/DrawerPanelContent.d.ts.map +1 -1
- package/dist/js/components/Drawer/DrawerPanelContent.js +65 -37
- package/dist/js/components/Drawer/DrawerPanelContent.js.map +1 -1
- package/dist/umd/react-core.js +70 -41
- package/dist/umd/react-core.min.js +1 -1
- package/package.json +5 -5
- package/src/components/Drawer/Drawer.tsx +4 -2
- package/src/components/Drawer/DrawerContent.tsx +19 -15
- package/src/components/Drawer/DrawerPanelContent.tsx +110 -75
- package/src/components/Drawer/__tests__/Generated/DrawerContent.test.tsx +2 -2
- package/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerContent.test.tsx.snap +88 -9
- package/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap +1 -0
- package/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap +15 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## 4.202.11 (2022-03-29)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **Drawer:** Updated resizable drawer to make it more accessible ([#7118](https://github.com/patternfly/patternfly-react/issues/7118)) ([0363ae6](https://github.com/patternfly/patternfly-react/commit/0363ae6638aab17e55f26bae5017bcd7f83f8ed5))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## 4.202.10 (2022-03-29)
|
|
7
18
|
|
|
8
19
|
**Note:** Version bump only for package @patternfly/react-core
|
|
@@ -25,6 +25,7 @@ export interface DrawerContextProps {
|
|
|
25
25
|
onExpand?: () => void;
|
|
26
26
|
position?: string;
|
|
27
27
|
drawerRef?: React.RefObject<HTMLDivElement>;
|
|
28
|
+
isInline: boolean;
|
|
28
29
|
}
|
|
29
30
|
export declare const DrawerContext: React.Context<Partial<DrawerContextProps>>;
|
|
30
31
|
export declare const Drawer: React.FunctionComponent<DrawerProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,oBAAY,kBAAkB;IAC5B,OAAO,YAAY;IACnB,QAAQ,cAAc;CACvB;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAClE,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACvC,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,oBAAY,kBAAkB;IAC5B,OAAO,YAAY;IACnB,QAAQ,cAAc;CACvB;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAClE,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACvC,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,4CAOxB,CAAC;AAEH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CA8BvD,CAAC"}
|
|
@@ -12,12 +12,13 @@ export const DrawerContext = React.createContext({
|
|
|
12
12
|
isStatic: false,
|
|
13
13
|
onExpand: () => { },
|
|
14
14
|
position: 'right',
|
|
15
|
-
drawerRef: null
|
|
15
|
+
drawerRef: null,
|
|
16
|
+
isInline: false
|
|
16
17
|
});
|
|
17
18
|
export const Drawer = (_a) => {
|
|
18
19
|
var { className = '', children, isExpanded = false, isInline = false, isStatic = false, position = 'right', onExpand = () => { } } = _a, props = __rest(_a, ["className", "children", "isExpanded", "isInline", "isStatic", "position", "onExpand"]);
|
|
19
20
|
const drawerRef = React.useRef();
|
|
20
|
-
return (React.createElement(DrawerContext.Provider, { value: { isExpanded, isStatic, onExpand, position, drawerRef } },
|
|
21
|
+
return (React.createElement(DrawerContext.Provider, { value: { isExpanded, isStatic, onExpand, position, drawerRef, isInline } },
|
|
21
22
|
React.createElement("div", Object.assign({ className: css(styles.drawer, isExpanded && styles.modifiers.expanded, isInline && styles.modifiers.inline, isStatic && styles.modifiers.static, position === 'left' && styles.modifiers.panelLeft, position === 'bottom' && styles.modifiers.panelBottom, className), ref: drawerRef }, props), children)));
|
|
22
23
|
};
|
|
23
24
|
Drawer.displayName = 'Drawer';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,uDAAuD,CAAC;AAC3E,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,yCAAmB,CAAA;IACnB,4CAAsB,CAAA;AACxB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;
|
|
1
|
+
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,uDAAuD,CAAC;AAC3E,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,yCAAmB,CAAA;IACnB,4CAAsB,CAAA;AACxB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AA4BD,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,aAAa,CAA8B;IAC5E,UAAU,EAAE,KAAK;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;IAClB,QAAQ,EAAE,OAAO;IACjB,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,KAAK;CAChB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,MAAM,GAAyC,CAAC,EAS/C,EAAE,EAAE;QAT2C,EAC3D,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,UAAU,GAAG,KAAK,EAClB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,OAAO,EAClB,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,OAEP,EADT,KAAK,cARmD,uFAS5D,CADS;IAER,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,EAAkB,CAAC;IACjD,OAAO,CACL,oBAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE;QAC9F,2CACE,SAAS,EAAE,GAAG,CACZ,MAAM,CAAC,MAAM,EACb,UAAU,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,EACvC,QAAQ,IAAI,MAAM,CAAC,SAAS,CAAC,MAAM,EACnC,QAAQ,IAAI,MAAM,CAAC,SAAS,CAAC,MAAM,EACnC,QAAQ,KAAK,MAAM,IAAI,MAAM,CAAC,SAAS,CAAC,SAAS,EACjD,QAAQ,KAAK,QAAQ,IAAI,MAAM,CAAC,SAAS,CAAC,WAAW,EACrD,SAAS,CACV,EACD,GAAG,EAAE,SAAS,IACV,KAAK,GAER,QAAQ,CACL,CACiB,CAC1B,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Drawer/DrawerContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IACzE,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,4CAA4C;IAC5C,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,0DAA0D;IAC1D,YAAY,CAAC,EAAE,kBAAkB,GAAG,WAAW,GAAG,SAAS,CAAC;CAC7D;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,
|
|
1
|
+
{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Drawer/DrawerContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IACzE,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,4CAA4C;IAC5C,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,0DAA0D;IAC1D,YAAY,CAAC,EAAE,kBAAkB,GAAG,WAAW,GAAG,SAAS,CAAC;CAC7D;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAyBvD,CAAC"}
|
|
@@ -8,9 +8,10 @@ export const DrawerContent = (_a) => {
|
|
|
8
8
|
var {
|
|
9
9
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
10
10
|
className = '', children, panelContent, colorVariant = DrawerColorVariant.default } = _a, props = __rest(_a, ["className", "children", "panelContent", "colorVariant"]);
|
|
11
|
+
const drawerContentRef = React.useRef();
|
|
11
12
|
return (React.createElement(DrawerMain, null,
|
|
12
|
-
React.createElement("div", Object.assign({ className: css(styles.drawerContent, colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200, className) }, props), children),
|
|
13
|
-
panelContent));
|
|
13
|
+
React.createElement("div", Object.assign({ className: css(styles.drawerContent, colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200, className), ref: drawerContentRef }, props), children),
|
|
14
|
+
React.cloneElement(panelContent, { drawerContentRef })));
|
|
14
15
|
};
|
|
15
16
|
DrawerContent.displayName = 'DrawerContent';
|
|
16
17
|
//# sourceMappingURL=DrawerContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DrawerContent.js","sourceRoot":"","sources":["../../../../src/components/Drawer/DrawerContent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,uDAAuD,CAAC;AAC3E,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAa9C,MAAM,CAAC,MAAM,aAAa,GAAkC,CAAC,EAOxC,EAAE,EAAE;QAPoC;IAC3D,6DAA6D;IAC7D,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,YAAY,EACZ,YAAY,GAAG,kBAAkB,CAAC,OAAO,OAEtB,EADhB,KAAK,cANmD,yDAO5D,CADS;
|
|
1
|
+
{"version":3,"file":"DrawerContent.js","sourceRoot":"","sources":["../../../../src/components/Drawer/DrawerContent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,uDAAuD,CAAC;AAC3E,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAa9C,MAAM,CAAC,MAAM,aAAa,GAAkC,CAAC,EAOxC,EAAE,EAAE;QAPoC;IAC3D,6DAA6D;IAC7D,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,YAAY,EACZ,YAAY,GAAG,kBAAkB,CAAC,OAAO,OAEtB,EADhB,KAAK,cANmD,yDAO5D,CADS;IAER,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,EAAkB,CAAC;IACxD,OAAO,CACL,oBAAC,UAAU;QACT,2CACE,SAAS,EAAE,GAAG,CACZ,MAAM,CAAC,aAAa,EACpB,YAAY,KAAK,kBAAkB,CAAC,QAAQ,IAAI,MAAM,CAAC,SAAS,CAAC,SAAS,EAC1E,SAAS,CACV,EACD,GAAG,EAAE,gBAAgB,IACjB,KAAK,GAER,QAAQ,CACL;QACL,KAAK,CAAC,YAAY,CAAC,YAAkC,EAAE,EAAE,gBAAgB,EAAE,CAAC,CAClE,CACd,CAAC;AACJ,CAAC,CAAC;AACF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC"}
|
|
@@ -23,8 +23,6 @@ export interface DrawerPanelContentProps extends React.HTMLProps<HTMLDivElement>
|
|
|
23
23
|
increment?: number;
|
|
24
24
|
/** Aria label for the resizable drawer splitter. */
|
|
25
25
|
resizeAriaLabel?: string;
|
|
26
|
-
/** Aria described by label for the resizable drawer splitter. */
|
|
27
|
-
resizeAriaDescribedBy?: string;
|
|
28
26
|
/** Width for drawer panel at various breakpoints. Overriden by resizable drawer minSize and defaultSize. */
|
|
29
27
|
widths?: {
|
|
30
28
|
default?: 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';
|
|
@@ -34,6 +32,8 @@ export interface DrawerPanelContentProps extends React.HTMLProps<HTMLDivElement>
|
|
|
34
32
|
};
|
|
35
33
|
/** Color variant of the background of the drawer panel */
|
|
36
34
|
colorVariant?: DrawerColorVariant | 'light-200' | 'default';
|
|
35
|
+
/** @hide Internal ref to drawer content */
|
|
36
|
+
drawerContentRef?: React.RefObject<HTMLDivElement>;
|
|
37
37
|
}
|
|
38
38
|
export declare const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps>;
|
|
39
39
|
//# sourceMappingURL=DrawerPanelContent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DrawerPanelContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Drawer/DrawerPanelContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,kBAAkB,EAAiB,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"DrawerPanelContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Drawer/DrawerPanelContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,kBAAkB,EAAiB,MAAM,UAAU,CAAC;AAI7D,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAC9E,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kDAAkD;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,sEAAsE;IACtE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4GAA4G;IAC5G,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,CAAC;QACvF,EAAE,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,CAAC;QAClF,EAAE,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,CAAC;QAClF,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,CAAC;KACtF,CAAC;IACF,0DAA0D;IAC1D,YAAY,CAAC,EAAE,kBAAkB,GAAG,WAAW,GAAG,SAAS,CAAC;IAC5D,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CACpD;AAID,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,CAsQ/E,CAAC"}
|
|
@@ -4,12 +4,15 @@ import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
|
|
|
4
4
|
import { css } from '@patternfly/react-styles';
|
|
5
5
|
import { DrawerColorVariant, DrawerContext } from './Drawer';
|
|
6
6
|
import { formatBreakpointMods } from '../../helpers/util';
|
|
7
|
+
import { GenerateId } from '../../helpers/GenerateId/GenerateId';
|
|
7
8
|
let isResizing = null;
|
|
8
9
|
let newSize = 0;
|
|
9
10
|
export const DrawerPanelContent = (_a) => {
|
|
10
|
-
var { className = '', id, children, hasNoBorder = false, isResizable = false, onResize, minSize, defaultSize, maxSize, increment = 5, resizeAriaLabel = 'Resize',
|
|
11
|
+
var { className = '', id, children, hasNoBorder = false, isResizable = false, onResize, minSize, defaultSize, maxSize, increment = 5, resizeAriaLabel = 'Resize', widths, colorVariant = DrawerColorVariant.default, drawerContentRef } = _a, props = __rest(_a, ["className", "id", "children", "hasNoBorder", "isResizable", "onResize", "minSize", "defaultSize", "maxSize", "increment", "resizeAriaLabel", "widths", "colorVariant", "drawerContentRef"]);
|
|
11
12
|
const panel = React.useRef();
|
|
12
|
-
const
|
|
13
|
+
const splitterRef = React.useRef();
|
|
14
|
+
const [separatorValue, setSeparatorValue] = React.useState(0);
|
|
15
|
+
const { position, isExpanded, isStatic, onExpand, drawerRef, isInline } = React.useContext(DrawerContext);
|
|
13
16
|
const hidden = isStatic ? false : !isExpanded;
|
|
14
17
|
const [isExpandedInternal, setIsExpandedInternal] = React.useState(!hidden);
|
|
15
18
|
let currWidth = 0;
|
|
@@ -23,6 +26,38 @@ export const DrawerPanelContent = (_a) => {
|
|
|
23
26
|
setIsExpandedInternal(isExpanded);
|
|
24
27
|
}
|
|
25
28
|
}, [isStatic, isExpanded]);
|
|
29
|
+
const calcValueNow = () => {
|
|
30
|
+
let splitterPos;
|
|
31
|
+
let drawerSize;
|
|
32
|
+
if (isInline && position === 'right') {
|
|
33
|
+
splitterPos = panel.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
|
|
34
|
+
drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
|
|
35
|
+
}
|
|
36
|
+
else if (isInline && position === 'left') {
|
|
37
|
+
splitterPos = splitterRef.current.getBoundingClientRect().right - panel.current.getBoundingClientRect().left;
|
|
38
|
+
drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
|
|
39
|
+
}
|
|
40
|
+
else if (position === 'right') {
|
|
41
|
+
splitterPos =
|
|
42
|
+
drawerContentRef.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
|
|
43
|
+
drawerSize =
|
|
44
|
+
drawerContentRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
|
|
45
|
+
}
|
|
46
|
+
else if (position === 'left') {
|
|
47
|
+
splitterPos =
|
|
48
|
+
splitterRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
|
|
49
|
+
drawerSize =
|
|
50
|
+
drawerContentRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
|
|
51
|
+
}
|
|
52
|
+
else if (position === 'bottom') {
|
|
53
|
+
splitterPos =
|
|
54
|
+
drawerContentRef.current.getBoundingClientRect().bottom - splitterRef.current.getBoundingClientRect().top;
|
|
55
|
+
drawerSize =
|
|
56
|
+
drawerContentRef.current.getBoundingClientRect().bottom - drawerContentRef.current.getBoundingClientRect().top;
|
|
57
|
+
}
|
|
58
|
+
const newSplitterPos = (splitterPos / drawerSize) * 100;
|
|
59
|
+
return Math.round((newSplitterPos + Number.EPSILON) * 100) / 100;
|
|
60
|
+
};
|
|
26
61
|
const handleTouchStart = (e) => {
|
|
27
62
|
e.stopPropagation();
|
|
28
63
|
document.addEventListener('touchmove', callbackTouchMove, { passive: false });
|
|
@@ -76,6 +111,7 @@ export const DrawerPanelContent = (_a) => {
|
|
|
76
111
|
}
|
|
77
112
|
panel.current.style.setProperty('--pf-c-drawer__panel--md--FlexBasis', newSize + 'px');
|
|
78
113
|
currWidth = newSize;
|
|
114
|
+
setSeparatorValue(calcValueNow());
|
|
79
115
|
};
|
|
80
116
|
const handleMouseup = () => {
|
|
81
117
|
if (!isResizing) {
|
|
@@ -104,8 +140,7 @@ export const DrawerPanelContent = (_a) => {
|
|
|
104
140
|
const callbackMouseUp = React.useCallback(handleMouseup, []);
|
|
105
141
|
const handleKeys = (e) => {
|
|
106
142
|
const key = e.key;
|
|
107
|
-
if (key !== '
|
|
108
|
-
key !== 'Escape' &&
|
|
143
|
+
if (key !== 'Escape' &&
|
|
109
144
|
key !== 'Enter' &&
|
|
110
145
|
key !== 'ArrowUp' &&
|
|
111
146
|
key !== 'ArrowDown' &&
|
|
@@ -117,38 +152,31 @@ export const DrawerPanelContent = (_a) => {
|
|
|
117
152
|
return;
|
|
118
153
|
}
|
|
119
154
|
e.preventDefault();
|
|
120
|
-
if (key === '
|
|
121
|
-
|
|
122
|
-
isResizing = true;
|
|
123
|
-
}
|
|
124
|
-
else {
|
|
125
|
-
isResizing = false;
|
|
126
|
-
onResize && onResize(currWidth, id);
|
|
127
|
-
}
|
|
128
|
-
const panelRect = panel.current.getBoundingClientRect();
|
|
129
|
-
newSize = position === 'bottom' ? panelRect.height : panelRect.width;
|
|
155
|
+
if (key === 'Escape' || key === 'Enter') {
|
|
156
|
+
onResize && onResize(currWidth, id);
|
|
130
157
|
}
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
newSize = newSize + delta;
|
|
146
|
-
if (position === 'bottom') {
|
|
147
|
-
panel.current.style.overflowAnchor = 'none';
|
|
148
|
-
}
|
|
149
|
-
panel.current.style.setProperty('--pf-c-drawer__panel--md--FlexBasis', newSize + 'px');
|
|
150
|
-
currWidth = newSize;
|
|
158
|
+
const panelRect = panel.current.getBoundingClientRect();
|
|
159
|
+
newSize = position === 'bottom' ? panelRect.height : panelRect.width;
|
|
160
|
+
let delta = 0;
|
|
161
|
+
if (key === 'ArrowRight') {
|
|
162
|
+
delta = position === 'left' ? increment : -increment;
|
|
163
|
+
}
|
|
164
|
+
else if (key === 'ArrowLeft') {
|
|
165
|
+
delta = position === 'left' ? -increment : increment;
|
|
166
|
+
}
|
|
167
|
+
else if (key === 'ArrowUp') {
|
|
168
|
+
delta = increment;
|
|
169
|
+
}
|
|
170
|
+
else if (key === 'ArrowDown') {
|
|
171
|
+
delta = -increment;
|
|
151
172
|
}
|
|
173
|
+
newSize = newSize + delta;
|
|
174
|
+
if (position === 'bottom') {
|
|
175
|
+
panel.current.style.overflowAnchor = 'none';
|
|
176
|
+
}
|
|
177
|
+
panel.current.style.setProperty('--pf-c-drawer__panel--md--FlexBasis', newSize + 'px');
|
|
178
|
+
currWidth = newSize;
|
|
179
|
+
setSeparatorValue(calcValueNow());
|
|
152
180
|
};
|
|
153
181
|
const boundaryCssVars = {};
|
|
154
182
|
if (defaultSize) {
|
|
@@ -160,7 +188,7 @@ export const DrawerPanelContent = (_a) => {
|
|
|
160
188
|
if (maxSize) {
|
|
161
189
|
boundaryCssVars['--pf-c-drawer__panel--md--FlexBasis--max'] = maxSize;
|
|
162
190
|
}
|
|
163
|
-
return (React.createElement("div", Object.assign({ id: id, className: css(styles.drawerPanel, isResizable && styles.modifiers.resizable, hasNoBorder && styles.modifiers.noBorder, formatBreakpointMods(widths, styles), colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200, className), ref: panel, onTransitionEnd: ev => {
|
|
191
|
+
return (React.createElement(GenerateId, { prefix: "pf-drawer-panel-" }, panelId => (React.createElement("div", Object.assign({ id: id || panelId, className: css(styles.drawerPanel, isResizable && styles.modifiers.resizable, hasNoBorder && styles.modifiers.noBorder, formatBreakpointMods(widths, styles), colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200, className), ref: panel, onTransitionEnd: ev => {
|
|
164
192
|
if (!hidden && ev.nativeEvent.propertyName === 'transform') {
|
|
165
193
|
onExpand();
|
|
166
194
|
}
|
|
@@ -169,10 +197,10 @@ export const DrawerPanelContent = (_a) => {
|
|
|
169
197
|
style: boundaryCssVars
|
|
170
198
|
}), props), isExpandedInternal && (React.createElement(React.Fragment, null,
|
|
171
199
|
isResizable && (React.createElement(React.Fragment, null,
|
|
172
|
-
React.createElement("div", { className: css(styles.drawerSplitter, position !== 'bottom' && styles.modifiers.vertical), role: "separator", tabIndex: 0, "aria-orientation": position === 'bottom' ? 'horizontal' : 'vertical', "aria-label": resizeAriaLabel, "aria-
|
|
200
|
+
React.createElement("div", { className: css(styles.drawerSplitter, position !== 'bottom' && styles.modifiers.vertical), role: "separator", tabIndex: 0, "aria-orientation": position === 'bottom' ? 'horizontal' : 'vertical', "aria-label": resizeAriaLabel, "aria-valuenow": separatorValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-controls": id || panelId, onMouseDown: handleMousedown, onKeyDown: handleKeys, onTouchStart: handleTouchStart, ref: splitterRef },
|
|
173
201
|
React.createElement("div", { className: css(styles.drawerSplitterHandle), "aria-hidden": true })),
|
|
174
202
|
React.createElement("div", { className: css(styles.drawerPanelMain) }, children))),
|
|
175
|
-
!isResizable && children))));
|
|
203
|
+
!isResizable && children))))));
|
|
176
204
|
};
|
|
177
205
|
DrawerPanelContent.displayName = 'DrawerPanelContent';
|
|
178
206
|
//# sourceMappingURL=DrawerPanelContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DrawerPanelContent.js","sourceRoot":"","sources":["../../../../src/components/Drawer/DrawerPanelContent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,uDAAuD,CAAC;AAC3E,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"DrawerPanelContent.js","sourceRoot":"","sources":["../../../../src/components/Drawer/DrawerPanelContent.tsx"],"names":[],"mappings":"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"}
|
|
@@ -25,6 +25,7 @@ export interface DrawerContextProps {
|
|
|
25
25
|
onExpand?: () => void;
|
|
26
26
|
position?: string;
|
|
27
27
|
drawerRef?: React.RefObject<HTMLDivElement>;
|
|
28
|
+
isInline: boolean;
|
|
28
29
|
}
|
|
29
30
|
export declare const DrawerContext: React.Context<Partial<DrawerContextProps>>;
|
|
30
31
|
export declare const Drawer: React.FunctionComponent<DrawerProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,oBAAY,kBAAkB;IAC5B,OAAO,YAAY;IACnB,QAAQ,cAAc;CACvB;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAClE,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACvC,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,oBAAY,kBAAkB;IAC5B,OAAO,YAAY;IACnB,QAAQ,cAAc;CACvB;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAClE,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACvC,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,4CAOxB,CAAC;AAEH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CA8BvD,CAAC"}
|
|
@@ -15,12 +15,13 @@ exports.DrawerContext = React.createContext({
|
|
|
15
15
|
isStatic: false,
|
|
16
16
|
onExpand: () => { },
|
|
17
17
|
position: 'right',
|
|
18
|
-
drawerRef: null
|
|
18
|
+
drawerRef: null,
|
|
19
|
+
isInline: false
|
|
19
20
|
});
|
|
20
21
|
const Drawer = (_a) => {
|
|
21
22
|
var { className = '', children, isExpanded = false, isInline = false, isStatic = false, position = 'right', onExpand = () => { } } = _a, props = tslib_1.__rest(_a, ["className", "children", "isExpanded", "isInline", "isStatic", "position", "onExpand"]);
|
|
22
23
|
const drawerRef = React.useRef();
|
|
23
|
-
return (React.createElement(exports.DrawerContext.Provider, { value: { isExpanded, isStatic, onExpand, position, drawerRef } },
|
|
24
|
+
return (React.createElement(exports.DrawerContext.Provider, { value: { isExpanded, isStatic, onExpand, position, drawerRef, isInline } },
|
|
24
25
|
React.createElement("div", Object.assign({ className: react_styles_1.css(drawer_1.default.drawer, isExpanded && drawer_1.default.modifiers.expanded, isInline && drawer_1.default.modifiers.inline, isStatic && drawer_1.default.modifiers.static, position === 'left' && drawer_1.default.modifiers.panelLeft, position === 'bottom' && drawer_1.default.modifiers.panelBottom, className), ref: drawerRef }, props), children)));
|
|
25
26
|
};
|
|
26
27
|
exports.Drawer = Drawer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,2GAA2E;AAC3E,2DAA+C;AAE/C,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,yCAAmB,CAAA;IACnB,4CAAsB,CAAA;AACxB,CAAC,EAHW,kBAAkB,GAAlB,0BAAkB,KAAlB,0BAAkB,QAG7B;
|
|
1
|
+
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,2GAA2E;AAC3E,2DAA+C;AAE/C,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,yCAAmB,CAAA;IACnB,4CAAsB,CAAA;AACxB,CAAC,EAHW,kBAAkB,GAAlB,0BAAkB,KAAlB,0BAAkB,QAG7B;AA4BY,QAAA,aAAa,GAAG,KAAK,CAAC,aAAa,CAA8B;IAC5E,UAAU,EAAE,KAAK;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;IAClB,QAAQ,EAAE,OAAO;IACjB,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,KAAK;CAChB,CAAC,CAAC;AAEI,MAAM,MAAM,GAAyC,CAAC,EAS/C,EAAE,EAAE;QAT2C,EAC3D,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,UAAU,GAAG,KAAK,EAClB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,OAAO,EAClB,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,OAEP,EADT,KAAK,sBARmD,uFAS5D,CADS;IAER,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,EAAkB,CAAC;IACjD,OAAO,CACL,oBAAC,qBAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE;QAC9F,2CACE,SAAS,EAAE,kBAAG,CACZ,gBAAM,CAAC,MAAM,EACb,UAAU,IAAI,gBAAM,CAAC,SAAS,CAAC,QAAQ,EACvC,QAAQ,IAAI,gBAAM,CAAC,SAAS,CAAC,MAAM,EACnC,QAAQ,IAAI,gBAAM,CAAC,SAAS,CAAC,MAAM,EACnC,QAAQ,KAAK,MAAM,IAAI,gBAAM,CAAC,SAAS,CAAC,SAAS,EACjD,QAAQ,KAAK,QAAQ,IAAI,gBAAM,CAAC,SAAS,CAAC,WAAW,EACrD,SAAS,CACV,EACD,GAAG,EAAE,SAAS,IACV,KAAK,GAER,QAAQ,CACL,CACiB,CAC1B,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,MAAM,UA8BjB;AACF,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Drawer/DrawerContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IACzE,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,4CAA4C;IAC5C,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,0DAA0D;IAC1D,YAAY,CAAC,EAAE,kBAAkB,GAAG,WAAW,GAAG,SAAS,CAAC;CAC7D;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,
|
|
1
|
+
{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Drawer/DrawerContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IACzE,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,4CAA4C;IAC5C,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,0DAA0D;IAC1D,YAAY,CAAC,EAAE,kBAAkB,GAAG,WAAW,GAAG,SAAS,CAAC;CAC7D;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAyBvD,CAAC"}
|
|
@@ -11,9 +11,10 @@ const DrawerContent = (_a) => {
|
|
|
11
11
|
var {
|
|
12
12
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
13
13
|
className = '', children, panelContent, colorVariant = Drawer_1.DrawerColorVariant.default } = _a, props = tslib_1.__rest(_a, ["className", "children", "panelContent", "colorVariant"]);
|
|
14
|
+
const drawerContentRef = React.useRef();
|
|
14
15
|
return (React.createElement(DrawerMain_1.DrawerMain, null,
|
|
15
|
-
React.createElement("div", Object.assign({ className: react_styles_1.css(drawer_1.default.drawerContent, colorVariant === Drawer_1.DrawerColorVariant.light200 && drawer_1.default.modifiers.light_200, className) }, props), children),
|
|
16
|
-
panelContent));
|
|
16
|
+
React.createElement("div", Object.assign({ className: react_styles_1.css(drawer_1.default.drawerContent, colorVariant === Drawer_1.DrawerColorVariant.light200 && drawer_1.default.modifiers.light_200, className), ref: drawerContentRef }, props), children),
|
|
17
|
+
React.cloneElement(panelContent, { drawerContentRef })));
|
|
17
18
|
};
|
|
18
19
|
exports.DrawerContent = DrawerContent;
|
|
19
20
|
exports.DrawerContent.displayName = 'DrawerContent';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DrawerContent.js","sourceRoot":"","sources":["../../../../src/components/Drawer/DrawerContent.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,2GAA2E;AAC3E,2DAA+C;AAC/C,6CAA0C;AAC1C,qCAA8C;AAavC,MAAM,aAAa,GAAkC,CAAC,EAOxC,EAAE,EAAE;QAPoC;IAC3D,6DAA6D;IAC7D,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,YAAY,EACZ,YAAY,GAAG,2BAAkB,CAAC,OAAO,OAEtB,EADhB,KAAK,sBANmD,yDAO5D,CADS;
|
|
1
|
+
{"version":3,"file":"DrawerContent.js","sourceRoot":"","sources":["../../../../src/components/Drawer/DrawerContent.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,2GAA2E;AAC3E,2DAA+C;AAC/C,6CAA0C;AAC1C,qCAA8C;AAavC,MAAM,aAAa,GAAkC,CAAC,EAOxC,EAAE,EAAE;QAPoC;IAC3D,6DAA6D;IAC7D,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,YAAY,EACZ,YAAY,GAAG,2BAAkB,CAAC,OAAO,OAEtB,EADhB,KAAK,sBANmD,yDAO5D,CADS;IAER,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,EAAkB,CAAC;IACxD,OAAO,CACL,oBAAC,uBAAU;QACT,2CACE,SAAS,EAAE,kBAAG,CACZ,gBAAM,CAAC,aAAa,EACpB,YAAY,KAAK,2BAAkB,CAAC,QAAQ,IAAI,gBAAM,CAAC,SAAS,CAAC,SAAS,EAC1E,SAAS,CACV,EACD,GAAG,EAAE,gBAAgB,IACjB,KAAK,GAER,QAAQ,CACL;QACL,KAAK,CAAC,YAAY,CAAC,YAAkC,EAAE,EAAE,gBAAgB,EAAE,CAAC,CAClE,CACd,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,aAAa,iBAyBxB;AACF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC"}
|
|
@@ -23,8 +23,6 @@ export interface DrawerPanelContentProps extends React.HTMLProps<HTMLDivElement>
|
|
|
23
23
|
increment?: number;
|
|
24
24
|
/** Aria label for the resizable drawer splitter. */
|
|
25
25
|
resizeAriaLabel?: string;
|
|
26
|
-
/** Aria described by label for the resizable drawer splitter. */
|
|
27
|
-
resizeAriaDescribedBy?: string;
|
|
28
26
|
/** Width for drawer panel at various breakpoints. Overriden by resizable drawer minSize and defaultSize. */
|
|
29
27
|
widths?: {
|
|
30
28
|
default?: 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';
|
|
@@ -34,6 +32,8 @@ export interface DrawerPanelContentProps extends React.HTMLProps<HTMLDivElement>
|
|
|
34
32
|
};
|
|
35
33
|
/** Color variant of the background of the drawer panel */
|
|
36
34
|
colorVariant?: DrawerColorVariant | 'light-200' | 'default';
|
|
35
|
+
/** @hide Internal ref to drawer content */
|
|
36
|
+
drawerContentRef?: React.RefObject<HTMLDivElement>;
|
|
37
37
|
}
|
|
38
38
|
export declare const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps>;
|
|
39
39
|
//# sourceMappingURL=DrawerPanelContent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DrawerPanelContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Drawer/DrawerPanelContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,kBAAkB,EAAiB,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"DrawerPanelContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Drawer/DrawerPanelContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,kBAAkB,EAAiB,MAAM,UAAU,CAAC;AAI7D,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAC9E,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kDAAkD;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,sEAAsE;IACtE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4GAA4G;IAC5G,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,CAAC;QACvF,EAAE,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,CAAC;QAClF,EAAE,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,CAAC;QAClF,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,CAAC;KACtF,CAAC;IACF,0DAA0D;IAC1D,YAAY,CAAC,EAAE,kBAAkB,GAAG,WAAW,GAAG,SAAS,CAAC;IAC5D,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CACpD;AAID,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,CAsQ/E,CAAC"}
|
|
@@ -7,12 +7,15 @@ const drawer_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/c
|
|
|
7
7
|
const react_styles_1 = require("@patternfly/react-styles");
|
|
8
8
|
const Drawer_1 = require("./Drawer");
|
|
9
9
|
const util_1 = require("../../helpers/util");
|
|
10
|
+
const GenerateId_1 = require("../../helpers/GenerateId/GenerateId");
|
|
10
11
|
let isResizing = null;
|
|
11
12
|
let newSize = 0;
|
|
12
13
|
const DrawerPanelContent = (_a) => {
|
|
13
|
-
var { className = '', id, children, hasNoBorder = false, isResizable = false, onResize, minSize, defaultSize, maxSize, increment = 5, resizeAriaLabel = 'Resize',
|
|
14
|
+
var { className = '', id, children, hasNoBorder = false, isResizable = false, onResize, minSize, defaultSize, maxSize, increment = 5, resizeAriaLabel = 'Resize', widths, colorVariant = Drawer_1.DrawerColorVariant.default, drawerContentRef } = _a, props = tslib_1.__rest(_a, ["className", "id", "children", "hasNoBorder", "isResizable", "onResize", "minSize", "defaultSize", "maxSize", "increment", "resizeAriaLabel", "widths", "colorVariant", "drawerContentRef"]);
|
|
14
15
|
const panel = React.useRef();
|
|
15
|
-
const
|
|
16
|
+
const splitterRef = React.useRef();
|
|
17
|
+
const [separatorValue, setSeparatorValue] = React.useState(0);
|
|
18
|
+
const { position, isExpanded, isStatic, onExpand, drawerRef, isInline } = React.useContext(Drawer_1.DrawerContext);
|
|
16
19
|
const hidden = isStatic ? false : !isExpanded;
|
|
17
20
|
const [isExpandedInternal, setIsExpandedInternal] = React.useState(!hidden);
|
|
18
21
|
let currWidth = 0;
|
|
@@ -26,6 +29,38 @@ const DrawerPanelContent = (_a) => {
|
|
|
26
29
|
setIsExpandedInternal(isExpanded);
|
|
27
30
|
}
|
|
28
31
|
}, [isStatic, isExpanded]);
|
|
32
|
+
const calcValueNow = () => {
|
|
33
|
+
let splitterPos;
|
|
34
|
+
let drawerSize;
|
|
35
|
+
if (isInline && position === 'right') {
|
|
36
|
+
splitterPos = panel.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
|
|
37
|
+
drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
|
|
38
|
+
}
|
|
39
|
+
else if (isInline && position === 'left') {
|
|
40
|
+
splitterPos = splitterRef.current.getBoundingClientRect().right - panel.current.getBoundingClientRect().left;
|
|
41
|
+
drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
|
|
42
|
+
}
|
|
43
|
+
else if (position === 'right') {
|
|
44
|
+
splitterPos =
|
|
45
|
+
drawerContentRef.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
|
|
46
|
+
drawerSize =
|
|
47
|
+
drawerContentRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
|
|
48
|
+
}
|
|
49
|
+
else if (position === 'left') {
|
|
50
|
+
splitterPos =
|
|
51
|
+
splitterRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
|
|
52
|
+
drawerSize =
|
|
53
|
+
drawerContentRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
|
|
54
|
+
}
|
|
55
|
+
else if (position === 'bottom') {
|
|
56
|
+
splitterPos =
|
|
57
|
+
drawerContentRef.current.getBoundingClientRect().bottom - splitterRef.current.getBoundingClientRect().top;
|
|
58
|
+
drawerSize =
|
|
59
|
+
drawerContentRef.current.getBoundingClientRect().bottom - drawerContentRef.current.getBoundingClientRect().top;
|
|
60
|
+
}
|
|
61
|
+
const newSplitterPos = (splitterPos / drawerSize) * 100;
|
|
62
|
+
return Math.round((newSplitterPos + Number.EPSILON) * 100) / 100;
|
|
63
|
+
};
|
|
29
64
|
const handleTouchStart = (e) => {
|
|
30
65
|
e.stopPropagation();
|
|
31
66
|
document.addEventListener('touchmove', callbackTouchMove, { passive: false });
|
|
@@ -79,6 +114,7 @@ const DrawerPanelContent = (_a) => {
|
|
|
79
114
|
}
|
|
80
115
|
panel.current.style.setProperty('--pf-c-drawer__panel--md--FlexBasis', newSize + 'px');
|
|
81
116
|
currWidth = newSize;
|
|
117
|
+
setSeparatorValue(calcValueNow());
|
|
82
118
|
};
|
|
83
119
|
const handleMouseup = () => {
|
|
84
120
|
if (!isResizing) {
|
|
@@ -107,8 +143,7 @@ const DrawerPanelContent = (_a) => {
|
|
|
107
143
|
const callbackMouseUp = React.useCallback(handleMouseup, []);
|
|
108
144
|
const handleKeys = (e) => {
|
|
109
145
|
const key = e.key;
|
|
110
|
-
if (key !== '
|
|
111
|
-
key !== 'Escape' &&
|
|
146
|
+
if (key !== 'Escape' &&
|
|
112
147
|
key !== 'Enter' &&
|
|
113
148
|
key !== 'ArrowUp' &&
|
|
114
149
|
key !== 'ArrowDown' &&
|
|
@@ -120,38 +155,31 @@ const DrawerPanelContent = (_a) => {
|
|
|
120
155
|
return;
|
|
121
156
|
}
|
|
122
157
|
e.preventDefault();
|
|
123
|
-
if (key === '
|
|
124
|
-
|
|
125
|
-
isResizing = true;
|
|
126
|
-
}
|
|
127
|
-
else {
|
|
128
|
-
isResizing = false;
|
|
129
|
-
onResize && onResize(currWidth, id);
|
|
130
|
-
}
|
|
131
|
-
const panelRect = panel.current.getBoundingClientRect();
|
|
132
|
-
newSize = position === 'bottom' ? panelRect.height : panelRect.width;
|
|
158
|
+
if (key === 'Escape' || key === 'Enter') {
|
|
159
|
+
onResize && onResize(currWidth, id);
|
|
133
160
|
}
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
newSize = newSize + delta;
|
|
149
|
-
if (position === 'bottom') {
|
|
150
|
-
panel.current.style.overflowAnchor = 'none';
|
|
151
|
-
}
|
|
152
|
-
panel.current.style.setProperty('--pf-c-drawer__panel--md--FlexBasis', newSize + 'px');
|
|
153
|
-
currWidth = newSize;
|
|
161
|
+
const panelRect = panel.current.getBoundingClientRect();
|
|
162
|
+
newSize = position === 'bottom' ? panelRect.height : panelRect.width;
|
|
163
|
+
let delta = 0;
|
|
164
|
+
if (key === 'ArrowRight') {
|
|
165
|
+
delta = position === 'left' ? increment : -increment;
|
|
166
|
+
}
|
|
167
|
+
else if (key === 'ArrowLeft') {
|
|
168
|
+
delta = position === 'left' ? -increment : increment;
|
|
169
|
+
}
|
|
170
|
+
else if (key === 'ArrowUp') {
|
|
171
|
+
delta = increment;
|
|
172
|
+
}
|
|
173
|
+
else if (key === 'ArrowDown') {
|
|
174
|
+
delta = -increment;
|
|
154
175
|
}
|
|
176
|
+
newSize = newSize + delta;
|
|
177
|
+
if (position === 'bottom') {
|
|
178
|
+
panel.current.style.overflowAnchor = 'none';
|
|
179
|
+
}
|
|
180
|
+
panel.current.style.setProperty('--pf-c-drawer__panel--md--FlexBasis', newSize + 'px');
|
|
181
|
+
currWidth = newSize;
|
|
182
|
+
setSeparatorValue(calcValueNow());
|
|
155
183
|
};
|
|
156
184
|
const boundaryCssVars = {};
|
|
157
185
|
if (defaultSize) {
|
|
@@ -163,7 +191,7 @@ const DrawerPanelContent = (_a) => {
|
|
|
163
191
|
if (maxSize) {
|
|
164
192
|
boundaryCssVars['--pf-c-drawer__panel--md--FlexBasis--max'] = maxSize;
|
|
165
193
|
}
|
|
166
|
-
return (React.createElement("div", Object.assign({ id: id, className: react_styles_1.css(drawer_1.default.drawerPanel, isResizable && drawer_1.default.modifiers.resizable, hasNoBorder && drawer_1.default.modifiers.noBorder, util_1.formatBreakpointMods(widths, drawer_1.default), colorVariant === Drawer_1.DrawerColorVariant.light200 && drawer_1.default.modifiers.light_200, className), ref: panel, onTransitionEnd: ev => {
|
|
194
|
+
return (React.createElement(GenerateId_1.GenerateId, { prefix: "pf-drawer-panel-" }, panelId => (React.createElement("div", Object.assign({ id: id || panelId, className: react_styles_1.css(drawer_1.default.drawerPanel, isResizable && drawer_1.default.modifiers.resizable, hasNoBorder && drawer_1.default.modifiers.noBorder, util_1.formatBreakpointMods(widths, drawer_1.default), colorVariant === Drawer_1.DrawerColorVariant.light200 && drawer_1.default.modifiers.light_200, className), ref: panel, onTransitionEnd: ev => {
|
|
167
195
|
if (!hidden && ev.nativeEvent.propertyName === 'transform') {
|
|
168
196
|
onExpand();
|
|
169
197
|
}
|
|
@@ -172,10 +200,10 @@ const DrawerPanelContent = (_a) => {
|
|
|
172
200
|
style: boundaryCssVars
|
|
173
201
|
}), props), isExpandedInternal && (React.createElement(React.Fragment, null,
|
|
174
202
|
isResizable && (React.createElement(React.Fragment, null,
|
|
175
|
-
React.createElement("div", { className: react_styles_1.css(drawer_1.default.drawerSplitter, position !== 'bottom' && drawer_1.default.modifiers.vertical), role: "separator", tabIndex: 0, "aria-orientation": position === 'bottom' ? 'horizontal' : 'vertical', "aria-label": resizeAriaLabel, "aria-
|
|
203
|
+
React.createElement("div", { className: react_styles_1.css(drawer_1.default.drawerSplitter, position !== 'bottom' && drawer_1.default.modifiers.vertical), role: "separator", tabIndex: 0, "aria-orientation": position === 'bottom' ? 'horizontal' : 'vertical', "aria-label": resizeAriaLabel, "aria-valuenow": separatorValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-controls": id || panelId, onMouseDown: handleMousedown, onKeyDown: handleKeys, onTouchStart: handleTouchStart, ref: splitterRef },
|
|
176
204
|
React.createElement("div", { className: react_styles_1.css(drawer_1.default.drawerSplitterHandle), "aria-hidden": true })),
|
|
177
205
|
React.createElement("div", { className: react_styles_1.css(drawer_1.default.drawerPanelMain) }, children))),
|
|
178
|
-
!isResizable && children))));
|
|
206
|
+
!isResizable && children))))));
|
|
179
207
|
};
|
|
180
208
|
exports.DrawerPanelContent = DrawerPanelContent;
|
|
181
209
|
exports.DrawerPanelContent.displayName = 'DrawerPanelContent';
|