@atlaskit/mention
Version:
A React component used to display user profiles in a list for 'Mention' functionality
32 lines • 1.23 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from 'react';
import { findDOMNode } from 'react-dom';
import { ScrollableStyle } from './styles';
export default class Scrollable extends React.PureComponent {
constructor(...args) {
super(...args);
// API
_defineProperty(this, "reveal", child => {
if (child && this.scrollableDiv) {
const childNode = findDOMNode(child);
// Not using Element.scrollIntoView as it scrolls even to top/bottom of view even if
// already visible
const scrollableRect = this.scrollableDiv.getBoundingClientRect();
const elementRect = childNode.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);
}
}