diff --git a/__tests__/renderers/__snapshots__/Page.test.tsx.snap b/__tests__/renderers/__snapshots__/Page.test.tsx.snap
index d1be1f6d3..8eb6e1a42 100644
--- a/__tests__/renderers/__snapshots__/Page.test.tsx.snap
+++ b/__tests__/renderers/__snapshots__/Page.test.tsx.snap
@@ -93,11 +93,15 @@ exports[`Renderer:Page classNames 1`] = `
className="cxd-Page-aside cxd-Page-aside--withWidth aside-class-name"
>
-
- This is aside
-
+
+
+ This is aside
+
+
{
startX: number;
startWidth: number;
codeWrap: HTMLElement;
+ asideInner = React.createRef
();
static defaultProps = {
asideClassName: '',
@@ -237,6 +245,7 @@ export default class Page extends React.Component {
// primaryField: 'id',
toolbarClassName: '',
messages: {},
+ asideSticky: true,
pullRefresh: {
disabled: true
}
@@ -360,7 +369,8 @@ export default class Page extends React.Component {
}
componentDidMount() {
- const {initApi, initFetch, initFetchOn, store, messages} = this.props;
+ const {initApi, initFetch, initFetchOn, store, messages, asideSticky} =
+ this.props;
this.mounted = true;
@@ -372,6 +382,12 @@ export default class Page extends React.Component {
})
.then(this.initInterval);
}
+
+ if (asideSticky && this.asideInner.current) {
+ const dom = this.asideInner.current!;
+ const rect = dom.getBoundingClientRect();
+ dom.style.cssText += `position: sticky; top: ${rect.top}px;`;
+ }
}
componentDidUpdate(prevProps: PageProps) {
@@ -783,15 +799,17 @@ export default class Page extends React.Component {
asideClassName
)}
>
- {render('aside', aside || '', {
- ...subProps,
- ...(typeof aside === 'string'
- ? {
- inline: false,
- className: `Page-asideTplWrapper`
- }
- : null)
- })}
+
+ {render('aside', aside || '', {
+ ...subProps,
+ ...(typeof aside === 'string'
+ ? {
+ inline: false,
+ className: `Page-asideTplWrapper`
+ }
+ : null)
+ })}
+
{asideResizor ? (