From 0f746ab963284f0e9aae87765a30f32912bc825e Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 8 Dec 2018 10:48:48 +0100 Subject: [PATCH] [Tabs] Reduce the bundle size (#13853) --- .size-limit.js | 4 +- .../material-ui/src/Tabs/ScrollbarSize.js | 41 ++++++++----------- .../src/Tabs/ScrollbarSize.test.js | 33 ++++++--------- packages/material-ui/src/Tabs/Tabs.js | 7 +--- 4 files changed, 32 insertions(+), 53 deletions(-) diff --git a/.size-limit.js b/.size-limit.js index 31ac96345df8f3..387aaf057f7f41 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -22,7 +22,7 @@ module.exports = [ name: 'The size of the @material-ui/core modules', webpack: true, path: 'packages/material-ui/build/index.js', - limit: '95 KB', + limit: '94.9 KB', }, { name: 'The size of the @material-ui/styles modules', @@ -35,7 +35,7 @@ module.exports = [ name: 'The size of the @material-ui/core/Popper component', webpack: true, path: 'packages/material-ui/build/Popper/index.js', - limit: '10.0 KB', + limit: '9.9 KB', }, { name: 'The main docs bundle', diff --git a/packages/material-ui/src/Tabs/ScrollbarSize.js b/packages/material-ui/src/Tabs/ScrollbarSize.js index 1d74aba5efef7a..a9c845d6b186e7 100644 --- a/packages/material-ui/src/Tabs/ScrollbarSize.js +++ b/packages/material-ui/src/Tabs/ScrollbarSize.js @@ -4,11 +4,12 @@ import EventListener from 'react-event-listener'; import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb. const styles = { - width: 100, - height: 100, + width: 90, + height: 90, position: 'absolute', - top: -10000, + top: -9000, overflow: 'scroll', + // Support IE 11 msOverflowStyle: 'scrollbar', }; @@ -23,13 +24,11 @@ class ScrollbarSize extends React.Component { if (typeof window !== 'undefined') { this.handleResize = debounce(() => { - const { onChange } = this.props; - const prevHeight = this.scrollbarHeight; - const prevWidth = this.scrollbarWidth; this.setMeasurements(); - if (prevHeight !== this.scrollbarHeight || prevWidth !== this.scrollbarWidth) { - onChange({ scrollbarHeight: this.scrollbarHeight, scrollbarWidth: this.scrollbarWidth }); + + if (prevHeight !== this.scrollbarHeight) { + this.props.onChange(this.scrollbarHeight); } }, 166); // Corresponds to 10 frames at 60 Hz. } @@ -37,16 +36,17 @@ class ScrollbarSize extends React.Component { componentDidMount() { this.setMeasurements(); - this.props.onLoad({ - scrollbarHeight: this.scrollbarHeight, - scrollbarWidth: this.scrollbarWidth, - }); + this.props.onChange(this.scrollbarHeight); } componentWillUnmount() { this.handleResize.clear(); } + handleRef = ref => { + this.nodeRef = ref; + }; + setMeasurements = () => { const nodeRef = this.nodeRef; @@ -55,29 +55,20 @@ class ScrollbarSize extends React.Component { } this.scrollbarHeight = nodeRef.offsetHeight - nodeRef.clientHeight; - this.scrollbarWidth = nodeRef.offsetWidth - nodeRef.clientWidth; }; render() { - const { onChange } = this.props; - return ( -
- {onChange ? : null} -
{ - this.nodeRef = ref; - }} - /> -
+ + +
+ ); } } ScrollbarSize.propTypes = { onChange: PropTypes.func.isRequired, - onLoad: PropTypes.func.isRequired, }; export default ScrollbarSize; diff --git a/packages/material-ui/src/Tabs/ScrollbarSize.test.js b/packages/material-ui/src/Tabs/ScrollbarSize.test.js index b7f0df0c35e6eb..b306c43de79dce 100644 --- a/packages/material-ui/src/Tabs/ScrollbarSize.test.js +++ b/packages/material-ui/src/Tabs/ScrollbarSize.test.js @@ -7,7 +7,6 @@ import ScrollbarSize from './ScrollbarSize'; describe('', () => { const defaultProps = { - onLoad: () => {}, onChange: () => {}, }; let clock; @@ -20,7 +19,7 @@ describe('', () => { clock.restore(); }); - describe('prop: onLoad', () => { + describe('mount', () => { let wrapper; afterEach(() => { @@ -28,20 +27,16 @@ describe('', () => { }); it('should not call on initial load', () => { - const onLoad = spy(); + const onChange = spy(); wrapper = mount(); - assert.strictEqual(onLoad.callCount, 0, 'should not have been called'); + assert.strictEqual(onChange.callCount, 0); }); it('should call on initial load', () => { - const onLoad = spy(); - wrapper = mount(); - assert.strictEqual(onLoad.callCount, 1, 'should have been called once'); - assert.strictEqual( - onLoad.calledWith({ scrollbarHeight: 0, scrollbarWidth: 0 }), - true, - 'should have been called with expected sizes', - ); + const onChange = spy(); + wrapper = mount(); + assert.strictEqual(onChange.callCount, 1); + assert.strictEqual(onChange.calledWith(0), true); }); }); @@ -56,26 +51,22 @@ describe('', () => { instance.nodeRef = { offsetHeight: 17, clientHeight: 0, - offsetWidth: 17, - clientWidth: 0, }; }); it('should call on first resize event', () => { + assert.strictEqual(onChange.callCount, 1); wrapper.find(EventListener).simulate('resize'); clock.tick(166); - assert.strictEqual(onChange.callCount, 1, 'should have been called once'); - assert.strictEqual( - onChange.calledWith({ scrollbarHeight: 17, scrollbarWidth: 17 }), - true, - 'should have been called with expected sizes', - ); + assert.strictEqual(onChange.callCount, 2); + assert.strictEqual(onChange.calledWith(17), true); }); it('should not call on second resize event', () => { + assert.strictEqual(onChange.callCount, 1); wrapper.find(EventListener).simulate('resize'); clock.tick(166); - assert.strictEqual(onChange.callCount, 1, 'should only have been called once'); + assert.strictEqual(onChange.callCount, 2); }); }); }); diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js index ef9198a3c1ce01..5b6f18160a00bc 100644 --- a/packages/material-ui/src/Tabs/Tabs.js +++ b/packages/material-ui/src/Tabs/Tabs.js @@ -114,10 +114,7 @@ class Tabs extends React.Component { const { classes, scrollable, ScrollButtonComponent, scrollButtons, theme } = this.props; const conditionalElements = {}; conditionalElements.scrollbarSizeListener = scrollable ? ( - + ) : null; const showScrollButtons = scrollable && (scrollButtons === 'auto' || scrollButtons === 'on'); @@ -194,7 +191,7 @@ class Tabs extends React.Component { this.moveTabsScroll(this.tabsRef.clientWidth); }; - handleScrollbarSizeChange = ({ scrollbarHeight }) => { + handleScrollbarSizeChange = scrollbarHeight => { this.setState({ scrollerStyle: { marginBottom: -scrollbarHeight,