Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Tabs] Reduce the bundle size #12256

Merged
merged 1 commit into from
Jul 23, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .size-limit.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ module.exports = [
name: 'The size of all the modules of material-ui.',
webpack: true,
path: 'packages/material-ui/build/index.js',
limit: '94.9 KB',
limit: '94.7 KB',
},
{
name: 'The main bundle of the docs',
Expand Down
1 change: 0 additions & 1 deletion packages/material-ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,6 @@
"react-jss": "^8.1.0",
"react-transition-group": "^2.2.1",
"recompose": "^0.27.0",
"scroll": "^2.0.3",
"warning": "^4.0.1"
},
"sideEffects": false,
Expand Down
14 changes: 8 additions & 6 deletions packages/material-ui/src/Tabs/Tabs.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@ import classNames from 'classnames';
import EventListener from 'react-event-listener';
import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
import { getNormalizedScrollLeft, detectScrollType } from 'normalize-scroll-left';
// TODO: should we fork it?
// https://github.com/michaelrhodes/scroll/issues/10
import scroll from 'scroll';
import animate from '../internal/animate';
import ScrollbarSize from './ScrollbarSize';
import withStyles from '../styles/withStyles';
import TabIndicator from './TabIndicator';
Expand Down Expand Up @@ -199,7 +197,7 @@ class Tabs extends React.Component {
const nextScrollLeft = this.tabsRef.scrollLeft + delta * multiplier;
// Fix for Edge
const invert = theme.direction === 'rtl' && detectScrollType() === 'reverse' ? -1 : 1;
scroll.left(this.tabsRef, invert * nextScrollLeft);
this.scroll(invert * nextScrollLeft);
};

scrollSelectedIntoView = () => {
Expand All @@ -213,14 +211,18 @@ class Tabs extends React.Component {
if (tabMeta.left < tabsMeta.left) {
// left side of button is out of view
const nextScrollLeft = tabsMeta.scrollLeft + (tabMeta.left - tabsMeta.left);
scroll.left(this.tabsRef, nextScrollLeft);
this.scroll(nextScrollLeft);
} else if (tabMeta.right > tabsMeta.right) {
// right side of button is out of view
const nextScrollLeft = tabsMeta.scrollLeft + (tabMeta.right - tabsMeta.right);
scroll.left(this.tabsRef, nextScrollLeft);
this.scroll(nextScrollLeft);
}
};

scroll = value => {
animate('scrollLeft', this.tabsRef, value);
};

updateScrollButtonState = () => {
const { scrollable, scrollButtons, theme } = this.props;

Expand Down
9 changes: 4 additions & 5 deletions packages/material-ui/src/Tabs/Tabs.test.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';
import { assert } from 'chai';
import { spy, stub, useFakeTimers } from 'sinon';
import scroll from 'scroll';
import { ShallowWrapper } from 'enzyme';
import consoleErrorMock from 'test/utils/consoleErrorMock';
import { createShallow, createMount, getClasses, unwrap } from '../test-utils';
Expand Down Expand Up @@ -574,19 +573,19 @@ describe('<Tabs />', () => {
let metaStub;

beforeEach(() => {
scrollStub = stub(scroll, 'left');
const wrapper = shallow(
<Tabs width="md" onChange={noop} value={0} scrollable>
<Tab />
<Tab />
</Tabs>,
);
instance = wrapper.instance();
scrollStub = stub(instance, 'scroll');
metaStub = stub(instance, 'getTabsMeta');
});

afterEach(() => {
scroll.left.restore();
instance.scroll.restore();
});

it('should scroll left tab into view', () => {
Expand All @@ -596,7 +595,7 @@ describe('<Tabs />', () => {
});

instance.scrollSelectedIntoView();
assert.strictEqual(scrollStub.args[0][1], 0, 'should scroll to 0 position');
assert.strictEqual(scrollStub.args[0][0], 0, 'should scroll to 0 position');
});

it('should scroll right tab into view', () => {
Expand All @@ -606,7 +605,7 @@ describe('<Tabs />', () => {
});

instance.scrollSelectedIntoView();
assert.strictEqual(scrollStub.args[0][1], 10, 'should scroll to 10 position');
assert.strictEqual(scrollStub.args[0][0], 10, 'should scroll to 10 position');
});

it('should support value=false', () => {
Expand Down
51 changes: 51 additions & 0 deletions packages/material-ui/src/internal/animate.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
function easeInOutSin(time) {
return (1 + Math.sin(Math.PI * time - Math.PI / 2)) / 2;
}

function animate(prop, element, to, options = {}, cb = () => {}) {
const {
ease = easeInOutSin,
duration = 300, // standard
} = options;

let start = null;
const from = element[prop];
let cancelled = false;

const cancel = () => {
cancelled = true;
};

const step = timestamp => {
if (cancelled) {
cb(new Error('Animation cancelled'));
return;
}

if (start === null) {
start = timestamp;
}
const time = Math.min(1, (timestamp - start) / duration);

element[prop] = ease(time) * (to - from) + from;

if (time >= 1) {
requestAnimationFrame(() => {
cb(null);
});
return;
}

requestAnimationFrame(step);
};

if (from === to) {
cb(new Error('Element already at target position'));
return cancel;
}

requestAnimationFrame(step);
return cancel;
}

export default animate;
49 changes: 49 additions & 0 deletions packages/material-ui/src/internal/animate.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { assert } from 'chai';
import animate from './animate';

describe('animate', () => {
let container;

before(() => {
container = document.createElement('div');
container.style.cssText = [
'height: 100px',
'width: 100px',
'overflow: scroll',
'border: 1px solid #000',
].join(';');
const box = document.createElement('div');
box.style.cssText = ['height: 100px', 'width: 1000px'].join(';');
container.appendChild(box);
document.body.appendChild(container);
});

after(() => {
document.body.removeChild(container);
});

it('should work', done => {
container.scrollLeft = 200;
animate('scrollLeft', container, 300, {}, () => {
assert.strictEqual(container.scrollLeft, 300);
done();
});
});

it('should work when asking for the current value', done => {
container.scrollLeft = 200;
animate('scrollLeft', container, 200, {}, () => {
assert.strictEqual(container.scrollLeft, 200);
done();
});
});

it('should be able to cancel the animatation', done => {
container.scrollLeft = 200;
const cancel = animate('scrollLeft', container, 300, {}, () => {
assert.strictEqual(container.scrollLeft, 200);
done();
});
cancel();
});
});
33 changes: 0 additions & 33 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -3771,10 +3771,6 @@ dom-serializer@0, dom-serializer@~0.1.0:
domelementtype "~1.1.1"
entities "~1.1.1"

dom-walk@^0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"

domain-browser@^1.1.1:
version "1.2.0"
resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
Expand Down Expand Up @@ -5096,13 +5092,6 @@ global-dirs@^0.1.0:
dependencies:
ini "^1.3.4"

global@~4.3.0:
version "4.3.2"
resolved "https://registry.yarnpkg.com/global/-/global-4.3.2.tgz#e76989268a6c74c38908b1305b10fc0e394e9d0f"
dependencies:
min-document "^2.19.0"
process "~0.5.1"

globals@^11.1.0, globals@^11.7.0:
version "11.7.0"
resolved "https://registry.yarnpkg.com/globals/-/globals-11.7.0.tgz#a583faa43055b1aca771914bf68258e2fc125673"
Expand Down Expand Up @@ -6964,12 +6953,6 @@ mimic-response@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b"

min-document@^2.19.0:
version "2.19.0"
resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
dependencies:
dom-walk "^0.1.0"

minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
Expand Down Expand Up @@ -8100,10 +8083,6 @@ process@^0.11.10:
version "0.11.10"
resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"

process@~0.5.1:
version "0.5.2"
resolved "https://registry.yarnpkg.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf"

progress@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f"
Expand Down Expand Up @@ -8275,12 +8254,6 @@ raf@^3.4.0:
dependencies:
performance-now "^2.1.0"

rafl@~1.2.1:
version "1.2.2"
resolved "https://registry.yarnpkg.com/rafl/-/rafl-1.2.2.tgz#fe930f758211020d47e38815f5196a8be4150740"
dependencies:
global "~4.3.0"

railroad-diagrams@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz#eb7e6267548ddedfb899c1b90e57374559cddb7e"
Expand Down Expand Up @@ -9185,12 +9158,6 @@ schema-utils@^0.4.2, schema-utils@^0.4.3, schema-utils@^0.4.4, schema-utils@^0.4
ajv "^6.1.0"
ajv-keywords "^3.1.0"

scroll@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/scroll/-/scroll-2.0.3.tgz#0951b785544205fd17753bc3d294738ba16fc2ab"
dependencies:
rafl "~1.2.1"

section-iterator@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/section-iterator/-/section-iterator-2.0.0.tgz#bf444d7afeeb94ad43c39ad2fb26151627ccba2a"
Expand Down