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.

Sign up for GitHub

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

Jump to bottom

chore: use react-intersection-observer in docs to improve perf #3985

Merged
merged 7 commits into from Jul 15, 2020
Merged

chore: use react-intersection-observer in docs to improve perf #3985

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0ed43cc
added react-intersection-observer module
knight-coder-llc Jul 12, 2020
fe44dc6
moved react-intersection-observer to devDependencies.
knight-coder-llc Jul 12, 2020
267ac61
implemented react intersection observer in docs component examples.
knight-coder-llc Jul 13, 2020
6de8e60
added observer
knight-coder-llc Jul 14, 2020
0c99ff6
remove react-visibility-sensor
layershifter Jul 15, 2020
c011e72
remove closure
layershifter Jul 15, 2020
5d66361
Merge branch 'master' of https://github.com/Semantic-Org/Semantic-UI-…
layershifter Jul 15, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
11 changes: 4 additions & 7 deletions docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js
View file
Open in desktop
Expand Up @@ -3,7 +3,8 @@ import cx from 'classnames'
import copyToClipboard from 'copy-to-clipboard'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import VisibilitySensor from 'react-visibility-sensor'
import { InView } from 'react-intersection-observer'

import { Checkbox, Grid, Label } from 'semantic-ui-react'

import { examplePathToHash, scrollToAnchor } from 'docs/src/utils'
Expand Down Expand Up @@ -168,11 +169,7 @@ class ComponentExample extends Component {
} = this.state

return (
<VisibilitySensor
delayedCall={!wasEverVisible}
partialVisibility
onChange={this.handleVisibility}
>
<InView onChange={(inView) => this.handleVisibility(inView)}>
<div id={anchorName} style={{ marginTop: '1rem' }}>
<Grid className={cx('docs-example', showCode && 'active')} padded='vertically'>
<Grid.Row columns='equal'>
Expand Down Expand Up @@ -224,7 +221,7 @@ class ComponentExample extends Component {
{isActiveHash && <CarbonAdNative inverted={showCode} />}
</Grid>
</div>
</VisibilitySensor>
</InView>
)
}
}
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Expand Up @@ -157,6 +157,7 @@
"react-docgen": "^4.1.0",
"react-dom": "^16.9.0",
"react-hot-loader": "^4.12.11",
"react-intersection-observer": "^8.26.2",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"react-source-render": "^3.0.0-5",
Expand Down
12 changes: 12 additions & 0 deletions yarn.lock
View file
Open in desktop
Expand Up @@ -10041,6 +10041,13 @@ react-hot-loader@^4, react-hot-loader@^4.12.11:
shallowequal "^1.1.0"
source-map "^0.7.3"

react-intersection-observer@^8.26.2:
version "8.26.2"
resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.26.2.tgz#0562ff0c06b2b10e809190c2fa9b6ded656e6e16"
integrity sha512-GmSjLNK+oV7kS+BHfrJSaA4wF61ELA33gizKHmN+tk59UT6/aW8kkqvlrFGPwxGoaIzLKS2evfG5fgkw5MIIsg==
dependencies:
tiny-invariant "^1.1.0"

react-is@^16.6.0, react-is@^16.6.3, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6, react-is@^16.9.0:
version "16.9.0"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
Expand Down Expand Up @@ -11850,6 +11857,11 @@ tiny-invariant@^1.0.2:
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.3.tgz#91efaaa0269ccb6271f0296aeedb05fc3e067b7a"
integrity sha512-ytQx8T4DL8PjlX53yYzcIC0WhIZbpR0p1qcYjw2pHu3w6UtgWwFJQ/02cnhOnBBhlFx/edUIfcagCaQSe3KMWg==

tiny-invariant@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==

tiny-warning@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.2.tgz#1dfae771ee1a04396bdfde27a3adcebc6b648b28"
Expand Down