Skip to content

Commit

Permalink
[core] Host normalize-scroll-left
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari committed Feb 9, 2020
1 parent f567b38 commit 6a43efe
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 7 deletions.
1 change: 0 additions & 1 deletion packages/material-ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@
"clsx": "^1.0.2",
"convert-css-length": "^2.0.1",
"hoist-non-react-statics": "^3.3.2",
"normalize-scroll-left": "^0.2.0",
"popper.js": "^1.14.1",
"prop-types": "^15.7.2",
"react-is": "^16.8.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/Tabs/Tabs.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import clsx from 'clsx';
import { refType } from '@material-ui/utils';
import debounce from '../utils/debounce';
import ownerWindow from '../utils/ownerWindow';
import { getNormalizedScrollLeft, detectScrollType } from 'normalize-scroll-left';
import { getNormalizedScrollLeft, detectScrollType } from '../utils/scrollLeft';
import animate from '../internal/animate';
import ScrollbarSize from './ScrollbarSize';
import withStyles from '../styles/withStyles';
Expand Down
66 changes: 66 additions & 0 deletions packages/material-ui/src/utils/scrollLeft.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
// Source from https://github.com/alitaheri/normalize-scroll-left
let cachedType;

/**
* Based on the jquery plugin https://github.com/othree/jquery.rtl-scroll-type
*
* Types of scrollLeft, assiming scrollWidth=100 and direction is rtl.
*
* Browser | Type | <- Most Left | Most Right -> | Initial
* -------------- | ------------- | ------------ | ------------- | -------
* WebKit | default | 0 | 100 | 100
* Firefox/Opera | negative | -100 | 0 | 0
* IE/Edge | reverse | 100 | 0 | 0
*/
export function detectScrollType() {
if (cachedType) {
return cachedType;
}

const dummy = document.createElement('div');
dummy.appendChild(document.createTextNode('ABCD'));
dummy.dir = 'rtl';
dummy.style.fontSize = '14px';
dummy.style.width = '4px';
dummy.style.height = '1px';
dummy.style.position = 'absolute';
dummy.style.top = '-1000px';
dummy.style.overflow = 'scroll';

document.body.appendChild(dummy);

cachedType = 'reverse';

if (dummy.scrollLeft > 0) {
cachedType = 'default';
} else {
dummy.scrollLeft = 1;
if (dummy.scrollLeft === 0) {
cachedType = 'negative';
}
}

document.body.removeChild(dummy);
return cachedType;
}

// Based on https://stackoverflow.com/a/24394376
export function getNormalizedScrollLeft(element, direction) {
const scrollLeft = element.scrollLeft;

// Perform the calculations only when direction is rtl to avoid messing up the ltr bahavior
if (direction !== 'rtl') {
return scrollLeft;
}

const type = detectScrollType();

switch (type) {
case 'negative':
return element.scrollWidth - element.clientWidth + scrollLeft;
case 'reverse':
return element.scrollWidth - element.clientWidth - scrollLeft;
default:
return scrollLeft;
}
}
5 changes: 0 additions & 5 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -10661,11 +10661,6 @@ normalize-range@^0.1.2:
resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=

normalize-scroll-left@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/normalize-scroll-left/-/normalize-scroll-left-0.2.0.tgz#9445d74275f303cc661e113329aefa492f58114c"
integrity sha512-t5oCENZJl8TGusJKoCJm7+asaSsPuNmK6+iEjrZ5TyBj2f02brCRsd4c83hwtu+e5d4LCSBZ0uoDlMjBo+A8yA==

normalize-url@^3.0.0, normalize-url@^3.3.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
Expand Down

0 comments on commit 6a43efe

Please sign in to comment.