Commit 8fca79e8 by Alexander Zobnin

scrollbar refactor: replace HOC by component with children

parent a186bc01
import React from 'react';
import renderer from 'react-test-renderer';
import withScrollBar from './withScrollBar';
import GrafanaScrollbar from './GrafanaScrollbar';
class TestComponent extends React.Component {
render() {
return <div className="my-component" />;
}
}
describe('withScrollBar', () => {
describe('GrafanaScrollbar', () => {
it('renders correctly', () => {
const TestComponentWithScroll = withScrollBar(TestComponent);
const tree = renderer
.create(
<TestComponentWithScroll>
<GrafanaScrollbar>
<p>Scrollable content</p>
</TestComponentWithScroll>
</GrafanaScrollbar>
)
.toJSON();
expect(tree).toMatchSnapshot();
......
import React from 'react';
import Scrollbars from 'react-custom-scrollbars';
interface WithScrollBarProps {
interface GrafanaScrollBarProps {
customClassName?: string;
autoHide?: boolean;
autoHideTimeout?: number;
......@@ -9,7 +9,7 @@ interface WithScrollBarProps {
hideTracksWhenNotNeeded?: boolean;
}
const withScrollBarDefaultProps: Partial<WithScrollBarProps> = {
const grafanaScrollBarDefaultProps: Partial<GrafanaScrollBarProps> = {
customClassName: 'custom-scrollbars',
autoHide: true,
autoHideTimeout: 200,
......@@ -20,17 +20,11 @@ const withScrollBarDefaultProps: Partial<WithScrollBarProps> = {
/**
* Wraps component into <Scrollbars> component from `react-custom-scrollbars`
*/
export default function withScrollBar<P extends object>(WrappedComponent: React.ComponentType<P>) {
return class extends React.Component<P & WithScrollBarProps> {
static defaultProps = withScrollBarDefaultProps;
class GrafanaScrollbar extends React.Component<GrafanaScrollBarProps> {
static defaultProps = grafanaScrollBarDefaultProps;
render() {
// Use type casting here in order to get rest of the props working. See more
// https://github.com/Microsoft/TypeScript/issues/14409
// https://github.com/Microsoft/TypeScript/pull/13288
const { autoHide, autoHideTimeout, autoHideDuration, hideTracksWhenNotNeeded, customClassName, ...props } = this
.props as WithScrollBarProps;
const scrollProps = { autoHide, autoHideTimeout, autoHideDuration, hideTracksWhenNotNeeded };
const { customClassName, children, ...scrollProps } = this.props;
return (
<Scrollbars
......@@ -45,9 +39,10 @@ export default function withScrollBar<P extends object>(WrappedComponent: React.
renderView={props => <div {...props} className="view" />}
{...scrollProps}
>
<WrappedComponent {...props} />
{children}
</Scrollbars>
);
}
};
}
export default GrafanaScrollbar;
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`withScrollBar renders correctly 1`] = `
exports[`GrafanaScrollbar renders correctly 1`] = `
<div
className="custom-scrollbars"
style={
......@@ -32,9 +32,9 @@ exports[`withScrollBar renders correctly 1`] = `
}
}
>
<div
className="my-component"
/>
<p>
Scrollable content
</p>
</div>
<div
className="track-horizontal"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment