@atlaskit/mention
Version:
A React component used to display user profiles in a list for 'Mention' functionality
29 lines • 1.15 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from 'react';
import { ScrollableStyle } from './styles';
export default class Scrollable extends React.PureComponent {
constructor(...args) {
super(...args);
_defineProperty(this, "revealRef", ref => {
if (ref && ref.current && this.scrollableDiv) {
// Not using Element.scrollIntoView as it scrolls even to top/bottom of view even if
// already visible
const scrollableRect = this.scrollableDiv.getBoundingClientRect();
const elementRect = ref.current.getBoundingClientRect();
if (elementRect.top < scrollableRect.top) {
this.scrollableDiv.scrollTop += elementRect.top - scrollableRect.top;
} else if (elementRect.bottom > scrollableRect.bottom) {
this.scrollableDiv.scrollTop += elementRect.bottom - scrollableRect.bottom;
}
}
});
_defineProperty(this, "handleRef", ref => {
this.scrollableDiv = ref;
});
}
render() {
return /*#__PURE__*/React.createElement(ScrollableStyle, {
ref: this.handleRef
}, this.props.children);
}
}