From e08abcfdb0ca97340304e361d6c9452b0d7ffbfe Mon Sep 17 00:00:00 2001 From: Haider Alshamma Date: Fri, 17 May 2024 14:58:14 -0400 Subject: [PATCH] chore: remove smoothscroll-polyfill https://caniuse.com/css-scroll-behavior --- package.json | 1 - rollup.config.js | 3 +- src/Tabs/TabScrollIndicators.js | 178 ------------------------------- src/Tabs/TabScrollIndicators.tsx | 2 - yarn.lock | 5 - 5 files changed, 1 insertion(+), 188 deletions(-) delete mode 100644 src/Tabs/TabScrollIndicators.js diff --git a/package.json b/package.json index b56943a67..f78dedd63 100644 --- a/package.json +++ b/package.json @@ -164,7 +164,6 @@ "react-resize-detector": "^9.1.0", "react-select": "^5.8.0", "react-window": "^1.8.10", - "smoothscroll-polyfill": "^0.4.4", "styled-system": "^5.1.4" }, "husky": { diff --git a/rollup.config.js b/rollup.config.js index ab3f7b3fe..318acce18 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -35,7 +35,6 @@ const GLOBALS = { classnames: "t", "react-input-autosize": "AutosizeInput", "html-parse-stringify2": "HTML", - "smoothscroll-polyfill": "smoothscroll", "react-fast-compare": "isEqual", "path-to-regexp": "pathToRegexp", "react-is": "reactIs", @@ -54,7 +53,7 @@ const CORE_PLUGINS = [ commonjs({ /* include: include all items in node_modules folders (in entire monorepo) */ include: [/node_modules/], - /* namedExports: sometimes commonjs can't resolve named exports from certain libraries, + /* namedExports: sometimes commonjs can't resolve named exports from certain libraries, ex: import {exportName} from "package-name"; => exportName module not found in those cases, it needs to be added as ["package-name"]: "exportName" here */ namedExports: { diff --git a/src/Tabs/TabScrollIndicators.js b/src/Tabs/TabScrollIndicators.js deleted file mode 100644 index 52c372c6f..000000000 --- a/src/Tabs/TabScrollIndicators.js +++ /dev/null @@ -1,178 +0,0 @@ -// @ts-nocheck -import styled from "styled-components"; -import PropTypes from "prop-types"; -import React from "react"; -import smoothscroll from "smoothscroll-polyfill"; -import TabScrollIndicator from "./TabScrollIndicator"; - -const TabScrollIndicatorContainer = styled.div(({ width, theme }) => ({ - position: "absolute", - width, - height: theme.space.x5, -})); - -class TabScrollIndicators extends React.Component { - constructor(props) { - super(props); - - this.state = { - contentHiddenLeft: this.contentHiddenLeft(), - contentHiddenRight: this.contentHiddenRight(), - }; - - this.handleIndicatorClick = this.handleIndicatorClick.bind(this); - this.getScrollLeftValueByTabIndex = this.getScrollLeftValueByTabIndex.bind(this); - this.contentHiddenLeft = this.contentHiddenLeft.bind(this); - this.contentHiddenRight = this.contentHiddenRight.bind(this); - this.handleScroll = this.handleScroll.bind(this); - this.handleResize = this.handleResize.bind(this); - } - - componentDidMount() { - this.conditionallyUpdateState(); - smoothscroll.polyfill(); - } - - getScrollLeftValueByTabIndex(index) { - const { tabRefs } = this.props; - let scrollLeftSum = 0; - for (let i = 0; i < index; i += 1) { - scrollLeftSum += tabRefs[i].offsetWidth; - } - return scrollLeftSum; - } - - contentHiddenRight() { - const { tabContainerRef } = this.props; - if (!tabContainerRef.current) { - return false; - } - return ( - tabContainerRef.current.scrollLeft + tabContainerRef.current.offsetWidth < tabContainerRef.current.scrollWidth - ); - } - - contentHiddenLeft() { - const { tabContainerRef } = this.props; - if (!tabContainerRef.current) { - return false; - } - return ( - tabContainerRef.current.scrollLeft !== 0 && - tabContainerRef.current.offsetWidth < tabContainerRef.current.scrollWidth - ); - } - - findLastVisibleTab() { - const { tabContainerRef, tabRefs, indicatorWidth } = this.props; - const rightMarker = tabContainerRef.current.scrollLeft + tabContainerRef.current.offsetWidth - indicatorWidth; - let scrollLeftSum = 0; - - for (let i = 0; i < tabRefs.length; i += 1) { - scrollLeftSum += tabRefs[i].offsetWidth; - if (rightMarker <= scrollLeftSum) { - return i; - } - } - return null; - } - - findFirstVisibleTab() { - const { tabContainerRef, tabRefs, indicatorWidth } = this.props; - const leftMarker = tabContainerRef.current.scrollLeft + indicatorWidth; - let scrollLeftSum = 0; - - for (let i = 0; i < tabRefs.length; i += 1) { - scrollLeftSum += tabRefs[i].offsetWidth; - if (leftMarker <= scrollLeftSum) { - return i; - } - } - return null; - } - - handleScroll() { - this.conditionallyUpdateState(); - } - - handleResize() { - this.setState({ - contentHiddenLeft: this.contentHiddenLeft(), - contentHiddenRight: this.contentHiddenRight(), - }); - } - - conditionallyUpdateState() { - const { contentHiddenLeft, contentHiddenRight } = this.state; - const currentContentHiddenLeft = this.contentHiddenLeft(); - const currentContentHiddenRight = this.contentHiddenRight(); - - if (currentContentHiddenLeft !== contentHiddenLeft) { - this.setState({ contentHiddenLeft: currentContentHiddenLeft }); - } - - if (currentContentHiddenRight !== contentHiddenRight) { - this.setState({ contentHiddenRight: currentContentHiddenRight }); - } - } - - handleIndicatorClick(side) { - const { tabRefs, tabContainerRef, indicatorWidth } = this.props; - - if (side === "right") { - const lastVisibleTab = this.findLastVisibleTab(); - const scrollLeft = this.getScrollLeftValueByTabIndex(lastVisibleTab) - indicatorWidth; - this.applyScrollLeft(scrollLeft); - } else { - const firstVisibleTab = this.findFirstVisibleTab(); - const scrollLeft = - this.getScrollLeftValueByTabIndex(firstVisibleTab) + - indicatorWidth + - tabRefs[firstVisibleTab].offsetWidth - - tabContainerRef.current.offsetWidth; - this.applyScrollLeft(scrollLeft); - } - } - - applyScrollLeft(scrollLeft) { - const { tabContainerRef } = this.props; - tabContainerRef.current.scroll({ left: scrollLeft, behavior: "smooth" }); - } - - render() { - const { tabContainerRef, indicatorWidth, children } = this.props; - const { contentHiddenLeft, contentHiddenRight } = this.state; - - return ( - <> - - {contentHiddenLeft && ( - - )} - {contentHiddenRight && ( - - )} - - {children({ - handleScroll: this.handleScroll, - handleResize: this.handleResize, - })} - - ); - } -} - -TabScrollIndicators.propTypes = { - children: PropTypes.func.isRequired, - tabRefs: PropTypes.arrayOf(PropTypes.shape({ offsetWidth: PropTypes.number })), - tabContainerRef: PropTypes.shape({ current: PropTypes.object }), - indicatorWidth: PropTypes.number, -}; - -TabScrollIndicators.defaultProps = { - tabRefs: undefined, - tabContainerRef: undefined, - indicatorWidth: 40, -}; - -export default TabScrollIndicators; diff --git a/src/Tabs/TabScrollIndicators.tsx b/src/Tabs/TabScrollIndicators.tsx index 20f630636..32d0d2661 100644 --- a/src/Tabs/TabScrollIndicators.tsx +++ b/src/Tabs/TabScrollIndicators.tsx @@ -1,7 +1,6 @@ // @ts-nocheck import styled from "styled-components"; import React from "react"; -import smoothscroll from "smoothscroll-polyfill"; import TabScrollIndicator from "./TabScrollIndicator"; const TabScrollIndicatorContainer = styled.div(({ width, theme }) => ({ position: "absolute", @@ -37,7 +36,6 @@ class TabScrollIndicators extends React.Component