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 ? (