Skip to content

Commit

Permalink
[components] Remove unused scroll UI logic
Browse files Browse the repository at this point in the history
  • Loading branch information
@mariuslundgard @rexxars
mariuslundgard authored and rexxars committed Nov 19, 2019
1 parent 5b4f4d4 commit 8998ce7
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 126 deletions.
120 changes: 4 additions & 116 deletions packages/@sanity/components/src/panes/DefaultPane.js
View file
Expand Up @@ -22,51 +22,6 @@ function noActionFn() {
console.warn('No handler defined for action')
}

// This is the height of the global navigation bar
// TODO: Turn this into a prop that DefaultPane receives
const GLOBAL_NAV_BAR_HEIGHT = 49

const getScrollShadowState = (scrollTop, prevState) => {
const {headerStyleRatio} = prevState
const threshold = 30

if (scrollTop < threshold) {
// Round off the calculation to cut down rerenders that are not visible to the human eye
// Example: 0.53 -> 0.55 or 0.91 -> 0.9
const ratio = Math.round((scrollTop / threshold) * 20) / 20
if (ratio === headerStyleRatio) {
return null
}

return {
headerStyleRatio: ratio,
headerStyle: {
boxShadow: `0 0 ${2 * ratio}px rgba(0, 0, 0, ${ratio * 0.2})`
}
}
}

if (scrollTop < 0 && headerStyleRatio !== -1) {
return {
headerStyleRatio: -1,
headerStyle: {
boxShadow: 'none'
}
}
}

if (headerStyleRatio !== 1) {
return {
headerStyleRatio: 1,
headerStyle: {
boxShadow: '0 0px 2px rgba(0, 0, 0, 0.2)'
}
}
}

return null
}

const noop = () => {
/* intentional noop */
}
Expand All @@ -75,7 +30,7 @@ const isActionButton = item => item.showAsAction
const isMenuButton = negate(isActionButton)

// eslint-disable-next-line
class Pane extends React.Component {
class Pane extends React.PureComponent {
static propTypes = {
hasTabs: PropTypes.bool,
tabIdPrefix: PropTypes.string,
Expand All @@ -87,7 +42,6 @@ class Pane extends React.Component {
children: PropTypes.node,
isSelected: PropTypes.bool,
isScrollable: PropTypes.bool,
scrollTop: PropTypes.number,
onAction: PropTypes.func,
renderActions: PropTypes.func,
menuItems: PropTypes.arrayOf(
Expand Down Expand Up @@ -124,7 +78,6 @@ class Pane extends React.Component {
title: 'Untitled',
isCollapsed: false,
isSelected: false,
scrollTop: undefined,
isScrollable: true,
renderActions: undefined,
styles: {},
Expand All @@ -138,12 +91,7 @@ class Pane extends React.Component {

state = {
menuIsOpen: false,
templateSelectionIsOpen: false,
headerStyleRatio: -1,
headerStyle: {
boxShadow: 'none'
},
scrollTop: 0
templateSelectionIsOpen: false
}

actionHandlers = {
Expand All @@ -170,70 +118,10 @@ class Pane extends React.Component {
.substr(2, 6)
}

static getDerivedStateFromProps(props, state) {
if (typeof props.scrollTop === 'undefined') {
return null
}

return getScrollShadowState(props.scrollTop, state)
}

componentDidMount() {
this.scrollFrame()
}

componentWillUnmount() {
if (this.closeRequest) {
cancelAnimationFrame(this.closeRequest)
}

if (this.scrollFrameId) {
cancelAnimationFrame(this.scrollFrameId)
}
}

shouldComponentUpdate(nextProps, nextState) {
// The pane header has a styling which gradually adds more shadow and tunes the opacity when
// scrolling. In the case of "managed" lists (infinite scroll and such), the scroll position
// is passed as a prop (`scrollTop`). However, passed a certain threshold we no longer need to
// update, since the styling turns static. To prevent the prop from forcing a re-render,
// explicitly check for a difference in the state here to short-circuit in this common scenario
const scrollPropChanged = nextProps.scrollTop !== this.props.scrollTop
const headerStyleChanged = nextState.headerStyleRatio !== this.state.headerStyleRatio
if (scrollPropChanged && !headerStyleChanged) {
return false
}

return (
scrollPropChanged ||
headerStyleChanged ||
!shallowEquals(nextProps, this.props) ||
!shallowEquals(nextState, this.state)
)
}

scrollFrame = () => {
const winScrollTop = (window.pageYOffset || document.scrollTop || 0) - (document.clientTop || 0)
const scrollTop = Math.max(winScrollTop - GLOBAL_NAV_BAR_HEIGHT, 0)

if (this.state.scrollTop !== scrollTop) {
const shadowState = getScrollShadowState(scrollTop, this.state)
if (shadowState) {
shadowState.scrollTop = scrollTop
this.setState(shadowState)
} else {
this.setState({scrollTop: scrollTop})
}
}

this.scrollFrameId = requestAnimationFrame(this.scrollFrame)
}

handleContentScroll = event => {
const shadowState = getScrollShadowState(event.target.scrollTop, this.state)
if (shadowState) {
this.setState(shadowState)
}
}

// Triggered by clicking "outside" of the menu when open, or after triggering action
Expand Down Expand Up @@ -267,7 +155,7 @@ class Pane extends React.Component {

handleMenuAction = item => {
// When closing the menu outright, the menu button will be focused and the "enter" keypress
// will bouble up to it and trigger a re-open of the menu. To work around this, use rAF to
// will bubble up to it and trigger a re-open of the menu. To work around this, use rAF to
// ensure the current event is completed before closing the menu
this.closeRequest = requestAnimationFrame(() => this.handleCloseMenu())

Expand Down Expand Up @@ -445,7 +333,7 @@ class Pane extends React.Component {
const mainChildren = (
<>
{isScrollable ? (
<ScrollContainer className={styles.scrollContainer} onScroll={this.handleContentScroll}>
<ScrollContainer className={styles.scrollContainer}>
<div style={contentMaxWidth ? {maxWidth: `${contentMaxWidth}px`} : {}}>{children}</div>
</ScrollContainer>
) : (
Expand Down
18 changes: 8 additions & 10 deletions packages/@sanity/components/src/panes/styles/DefaultPane.css
View file
Expand Up @@ -20,7 +20,6 @@
top: initial;
left: initial;
min-height: initial;
overflow: hidden; /* Cuts off the shadow on header */
}
}

Expand Down Expand Up @@ -329,10 +328,6 @@
}
}

.scrollWrapper {
margin: 0 auto;
}

.notScrollable {
display: block;
box-sizing: border-box;
Expand Down Expand Up @@ -410,17 +405,20 @@
box-sizing: border-box;
background-color: var(--component-bg);
color: var(--text-color-secondary);
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
z-index: var(--zindex-pane);

@supports (padding-bottom: env(safe-area-inset-bottom)) {
padding-bottom: env(safe-area-inset-bottom);
}

@media (--max-screen-medium) {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
}

/* NOTE: Workaround for hiding the footer when the keyboard is visible on small screens */
@media (max-height: 32em) {
position: relative;
Expand Down

0 comments on commit 8998ce7

Please sign in to comment.