diff --git a/package-lock.json b/package-lock.json index 81cb95fd..c3069522 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,6 @@ "license": "MIT", "dependencies": { "@monaco-editor/react": "^4.7.0", - "classnames": "^2.5.1", "cross-fetch": "^3.1.2", "d3-scale": "^3.2.3", "d3-scale-chromatic": "^1.3.3", @@ -18,8 +17,6 @@ "highlight.js": "~9.8.0", "lodash": "^4.17.20", "monaco-editor": "^0.52.2", - "oui-dom-events": "^0.2.2", - "oui-dom-utils": "^0.3.8", "prop-types": "^15.8.1", "react": "^17.0.2", "react-dom": "^17.0.2", @@ -3924,11 +3921,6 @@ "fsevents": "~2.3.2" } }, - "node_modules/classnames": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", - "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" - }, "node_modules/clsx": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", @@ -6166,16 +6158,6 @@ "node": ">= 0.8.0" } }, - "node_modules/oui-dom-events": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/oui-dom-events/-/oui-dom-events-0.2.2.tgz", - "integrity": "sha1-hIMoSvJyvnWsoO8FmZtMf8Yppd0=" - }, - "node_modules/oui-dom-utils": { - "version": "0.3.8", - "resolved": "https://registry.npmjs.org/oui-dom-utils/-/oui-dom-utils-0.3.8.tgz", - "integrity": "sha1-X6NsYv99h7VdNUstoEYYhbq0MaU=" - }, "node_modules/p-limit": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", @@ -10529,11 +10511,6 @@ "readdirp": "~3.6.0" } }, - "classnames": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", - "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" - }, "clsx": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", @@ -12173,16 +12150,6 @@ "word-wrap": "^1.2.5" } }, - "oui-dom-events": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/oui-dom-events/-/oui-dom-events-0.2.2.tgz", - "integrity": "sha1-hIMoSvJyvnWsoO8FmZtMf8Yppd0=" - }, - "oui-dom-utils": { - "version": "0.3.8", - "resolved": "https://registry.npmjs.org/oui-dom-utils/-/oui-dom-utils-0.3.8.tgz", - "integrity": "sha1-X6NsYv99h7VdNUstoEYYhbq0MaU=" - }, "p-limit": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", diff --git a/package.json b/package.json index 3ed331dd..ac9bc694 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,6 @@ }, "dependencies": { "@monaco-editor/react": "^4.7.0", - "classnames": "^2.5.1", "cross-fetch": "^3.1.2", "d3-scale": "^3.2.3", "d3-scale-chromatic": "^1.3.3", @@ -56,8 +55,6 @@ "highlight.js": "~9.8.0", "lodash": "^4.17.20", "monaco-editor": "^0.52.2", - "oui-dom-events": "^0.2.2", - "oui-dom-utils": "^0.3.8", "prop-types": "^15.8.1", "react": "^17.0.2", "react-dom": "^17.0.2", diff --git a/src/components/Affix.scss b/src/components/Affix.scss deleted file mode 100644 index ce047af8..00000000 --- a/src/components/Affix.scss +++ /dev/null @@ -1,3 +0,0 @@ -.rechartsOrg-affix { - z-index: 9999; -} \ No newline at end of file diff --git a/src/components/Affix.tsx b/src/components/Affix.tsx deleted file mode 100644 index 32cef2eb..00000000 --- a/src/components/Affix.tsx +++ /dev/null @@ -1,139 +0,0 @@ -import * as React from 'react'; -import _ from 'lodash'; -// @ts-ignore -import Events from 'oui-dom-events'; -// @ts-ignore -import DOMUtils from 'oui-dom-utils'; -import classnames from 'classnames'; -import './Affix.scss'; - -const { PureComponent } = React; - -interface AffixProps { - prefixCls?: string; - className?: string; - children: React.ReactNode; - offsetTop?: number; -} - -interface AffixState { - affixStyle: React.CSSProperties | undefined; - placeholderStyle: React.CSSProperties | undefined; - id: string; - isFixed: boolean; -} - -/* - * Affix component that allows an element to stick to the top of the viewport when scrolling. - * I feel like this component could be replaced with a more modern solution like `position: sticky;` - */ -class Affix extends PureComponent { - static defaultProps = { - prefixCls: 'rechartsOrg-affix', - offsetTop: 0, - }; - - static displayName = 'Affix'; - - placeholderDom: HTMLDivElement | null = null; - - constructor(props: AffixProps) { - super(props); - this.state = { - affixStyle: undefined, - placeholderStyle: undefined, - id: _.uniqueId(props.prefixCls), - isFixed: false, - }; - } - - componentDidMount() { - this.setTargetEventListeners(); - } - - componentWillUnmount() { - this.clearScrollEventListeners(); - } - - setTargetEventListeners() { - const { prefixCls } = this.props; - const { id } = this.state; - Events.on(window, `scroll.${prefixCls}.${id}`, this.updatePosition); - Events.on(window, `resize.${prefixCls}.${id}`, this.updatePosition); - } - - clearScrollEventListeners() { - const { prefixCls } = this.props; - const { id } = this.state; - Events.off(window, `scroll.${prefixCls}.${id}`); - Events.off(window, `resize.${prefixCls}.${id}`); - } - - updatePosition = () => { - const { offsetTop } = this.props; - const scrollTop = DOMUtils.getDocumentScrollTop(); - // affix - const affixNode = this.placeholderDom; - - if (!affixNode) { - this.setState({ - affixStyle: undefined, - placeholderStyle: undefined, - isFixed: false, - }); - return; - } - - const { offsetWidth } = affixNode; - const { offsetHeight } = affixNode; - const { top, left } = DOMUtils.getOffset(affixNode); - if (scrollTop > top) { - // Fixed Top - const affixStyle: React.CSSProperties = { - position: 'fixed', - top: offsetTop, - left, - width: offsetWidth, - }; - const placeholderStyle = { - width: offsetWidth, - height: offsetHeight, - }; - this.setState({ - affixStyle, - placeholderStyle, - isFixed: true, - }); - } else { - this.setState({ - affixStyle: undefined, - placeholderStyle: undefined, - isFixed: false, - }); - } - }; - - render() { - const { prefixCls, className, offsetTop, ...other } = this.props; - const { isFixed } = this.state; - const componentClasses = isFixed ? `${prefixCls}-active` : `${prefixCls}-inactive`; - const classes = classnames(`${prefixCls}`, className, componentClasses); - const { placeholderStyle, affixStyle } = this.state; - - return ( -
{ - this.placeholderDom = node; - }} - > -
- {this.props.children} -
-
- ); - } -} - -export default Affix; diff --git a/src/layouts/Frame.tsx b/src/layouts/Frame.tsx index 89ef20a7..5b47a230 100644 --- a/src/layouts/Frame.tsx +++ b/src/layouts/Frame.tsx @@ -3,7 +3,6 @@ import { Link } from 'react-router-dom'; import { RouteComponentProps, withRouter } from 'react-router'; import Helmet from 'react-helmet'; import { getLocaleType, localeGet } from '../utils/LocaleUtils.ts'; -import Affix from '../components/Affix'; import '../styles/app.scss'; const modules = ['guide', 'api', 'examples', 'blog', 'storybook']; @@ -51,39 +50,37 @@ class Frame extends Component { return (
- -
-
-

- - <Recharts /> - -

- +
+
{children}