Skip to content

Commit

Permalink
[components] Fix popover scrolling (#343)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kristofferjs @bjoerge
kristofferjs authored and bjoerge committed Nov 7, 2017
1 parent d6b6ff9 commit a0d96db
Show file tree
Hide file tree
Showing 11 changed files with 440 additions and 382 deletions.
8 changes: 4 additions & 4 deletions packages/@sanity/components/sanity.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -541,11 +541,11 @@
},
{
"implements": "part:@sanity/components/edititem/popover",
"path": "edititem/PopOver.js"
"path": "edititem/EditItemPopOver.js"
},
{
"implements": "part:@sanity/components/edititem/fold",
"path": "edititem/FoldOut.js"
"path": "edititem/EditItemFoldOut.js"
},
{
"implements": "part:@sanity/components/previews/default",
Expand Down Expand Up @@ -741,11 +741,11 @@
},
{
"implements": "part:@sanity/components/edititem/popover-style",
"path": "edititem/styles/PopOver.css"
"path": "edititem/styles/EditItemPopOver.css"
},
{
"implements": "part:@sanity/components/edititem/fold-style",
"path": "edititem/styles/FoldOut.css"
"path": "edititem/styles/EditItemFoldOut.css"
},
{
"implements": "part:@sanity/components/previews/default-style",
Expand Down
53 changes: 29 additions & 24 deletions packages/@sanity/components/src/buttons/DropDownButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import Menu from 'part:@sanity/components/menus/default'
import {omit} from 'lodash'
import StickyPortal from 'part:@sanity/components/portal/sticky'
import tryFindScrollContainer from '../utilities/tryFindScrollContainer'
import Stacked from '../utilities/Stacked'
import Escapable from '../utilities/Escapable'

class DropDownButton extends React.PureComponent {
static propTypes = {
Expand Down Expand Up @@ -158,31 +160,34 @@ class DropDownButton extends React.PureComponent {
>
{
menuOpened && (
<StickyPortal
isOpen
scrollContainer={scrollContainer}
onResize={this.handleResize}
onlyBottomSpace={false}
useOverlay={false}
addPadding={false}
scrollIntoView={false}
onClickOutside={this.handleClose}
onEscape={this.handleClose}
>
<div
ref={this.setMenuElement}
style={{minWidth: `${width}px`}}
>
<Menu
items={items}
<Stacked>
{isActive => (
<StickyPortal
isOpen
className={menuClassName}
onAction={this.handleAction}
onClickOutside={this.handleCloseMenu}
onClose={this.handleCloseMenu}
/>
</div>
</StickyPortal>
scrollContainer={scrollContainer}
onResize={this.handleResize}
onlyBottomSpace={false}
useOverlay={false}
addPadding={false}
scrollIntoView={false}
>
<div
ref={this.setMenuElement}
style={{minWidth: `${width}px`}}
>
<Escapable onEscape={event => ((isActive || event.shiftKey) && this.handleCloseMenu())} />
<Menu
items={items}
isOpen
className={menuClassName}
onAction={this.handleAction}
onClickOutside={this.handleCloseMenu}
onClose={this.handleCloseMenu}
/>
</div>
</StickyPortal>
)}
</Stacked>
)
}
</span>
Expand Down
82 changes: 45 additions & 37 deletions packages/@sanity/components/src/dialogs/PopOver.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ import CloseIcon from 'part:@sanity/base/close-icon'
import StickyPortal from 'part:@sanity/components/portal/sticky'
import tryFindScrollContainer from '../utilities/tryFindScrollContainer'
const PADDING = 5
import Stacked from '../utilities/Stacked'
import CaptureOutsideClicks from '../utilities/CaptureOutsideClicks'
import Escapable from '../utilities/Escapable'

export default class PopOver extends React.Component {

Expand Down Expand Up @@ -124,47 +127,52 @@ export default class PopOver extends React.Component {
scrollContainer={scrollContainer}
onResize={this.handlePortalResize}
useOverlay={useOverlay}
onEscape={onClose}
onClickOutside={onClose}
>
<div
ref={this.setPopoverInnerElement}
className={`
${styles.root}
${color === 'danger' ? styles.colorDanger : ''}
${color === 'warning' ? styles.colorWarning : ''}
${color === 'info' ? styles.colorInfo : ''}
${color === 'success' ? styles.colorSuccess : ''}
`}
>
<div
className={styles.arrow}
ref={this.setArrowElement}
style={{
left: `${arrowLeft}px`
}}
/>
<div
className={styles.popover}
style={{
left: `${popoverLeft}px`
}}
>
<button className={styles.close} type="button" onClick={onClose}>
<CloseIcon />
</button>

<Stacked>
{isActive => (
<div
ref={this.setContentElement}
className={styles.content}
style={{
maxHeight: `${availableHeight - 16}px`
}}
ref={this.setPopoverInnerElement}
className={`
${styles.root}
${color === 'danger' ? styles.colorDanger : ''}
${color === 'warning' ? styles.colorWarning : ''}
${color === 'info' ? styles.colorInfo : ''}
${color === 'success' ? styles.colorSuccess : ''}
`}
>
{children}
<div
className={styles.arrow}
ref={this.setArrowElement}
style={{
left: `${arrowLeft}px`
}}
/>
<Escapable onEscape={event => ((isActive || event.shiftKey) && onClose())} />
<CaptureOutsideClicks onClickOutside={isActive ? onClose : null}>
<div
className={styles.popover}
style={{
left: `${popoverLeft}px`
}}
>
<button className={styles.close} type="button" onClick={onClose}>
<CloseIcon />
</button>

<div
ref={this.setContentElement}
className={styles.content}
style={{
maxHeight: `${availableHeight - 16}px`
}}
>
{children}
</div>
</div>
</CaptureOutsideClicks>
</div>
</div>
</div>
)}
</Stacked>
</StickyPortal>
</div>
)
Expand Down
70 changes: 39 additions & 31 deletions ...sanity/components/src/edititem/FoldOut.js → ...omponents/src/edititem/EditItemFoldOut.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ import styles from 'part:@sanity/components/edititem/fold-style'
import CloseIcon from 'part:@sanity/base/close-icon'
import StickyPortal from 'part:@sanity/components/portal/sticky'
import tryFindScrollContainer from '../utilities/tryFindScrollContainer'
import Stacked from '../utilities/Stacked'
import Escapable from '../utilities/Escapable'
import CaptureOutsideClicks from '../utilities/CaptureOutsideClicks'

export default class EditItemFoldOut extends React.PureComponent {

Expand Down Expand Up @@ -78,39 +81,44 @@ export default class EditItemFoldOut extends React.PureComponent {
addPadding={false}
scrollIntoView={false}
onResize={this.handleResize}
onEscape={onClose}
onClickOutside={onClose}
>
<div
className={styles.wrapper}
ref={this.setPortalModalElement}
style={{
left: `${left}px`,
width: `calc(${width}px + (${styles.padding} * 2))`
}}
>
{
title && (
<div className={styles.head}>
{title}
<button className={styles.close} type="button" onClick={onClose}>
<CloseIcon />
</button>
</div>
)
}
<Stacked>
{isActive => (
<div
className={styles.wrapper}
ref={this.setPortalModalElement}
style={{
left: `${left}px`,
width: `calc(${width}px + (${styles.padding} * 2))`
}}
>
<Escapable onEscape={event => ((isActive || event.shiftKey) && onClose())} />
<CaptureOutsideClicks onClickOutside={isActive ? onClose : null}>
{
title && (
<div className={styles.head}>
{title}
<button className={styles.close} type="button" onClick={onClose}>
<CloseIcon />
</button>
</div>
)
}

{
!title && (
<button className={styles.closeDark} type="button" onClick={this.handleClose}>
<CloseIcon />
</button>
)
}
<div className={styles.content}>
{children}
</div>
</div>
{
!title && (
<button className={styles.closeDark} type="button" onClick={this.handleClose}>
<CloseIcon />
</button>
)
}
<div className={styles.content}>
{children}
</div>
</CaptureOutsideClicks>
</div>
)}
</Stacked>
</StickyPortal>
</div>
)
Expand Down

0 comments on commit a0d96db

Please sign in to comment.