-
Notifications
You must be signed in to change notification settings - Fork 427
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[components] Add new snackbars (#1426)
* [snackbar] add new snackbar * [snackbar] put default snackbar back and create provider part * [snackbar] fix old and new parts * [snackbar] update provider part path * [snackbar] add height handler for stack offsets * [snackbar] add action handler * [snackbar] improve naming * [snackbar] add children as props * [snackbar] add context * [snackbar] update styles * [snackbar] make snackbar accessible * [snackbar] linting * [snackbar] add default icons to snacks * [snackbar] refactor provider and item * [snackbar] update DefaultSnackbar.js + its instances * [snackbar] fix persist status * [components] Queue snackbar story * [components] improve var naming * [components] flatten snackbar props * [components] refactor, and improve a11y * [components] refactor and fix transitions * [components] add snackbar stories * [components] refactor props, improve readability * [components] refactor hide and action behaviours * [components] improve snackbar on smaller screens * [components] clear timeouts on unmount * [components] fix css class names and id generator * [components] fix possible message types * [components] dismiss snack on willUnmount * [components] remove danger state * [components] fix default icons * [components] fix tabindex and outline focus * [components] fix icon and content alignment * [components] update storybook * [components] fix close icon color inheritance * [components] fix snackbar styles and sizes * [components] fix with and w/o icon spacing * [components] fix tabindex on snack item * [components] remove transitionDuration as prop * [components] remove another transitionDuration * [components] update with discussed changes * [components] update text and icon alignment * [components] add title and subtitle * [components] fix margins and alignments * [components] update story * [components] simplify story * [components] fix action and close bleed * [components] float action and close buttons * [components] Last changes made together with Victoria * [components] fix action title bug * [components] updates according to kris' review
- Loading branch information
Showing
21 changed files
with
828 additions
and
183 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import CheckCircle from 'react-icons/lib/md/check-circle' | ||
|
|
||
| export default CheckCircle |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import FaTimesCircle from 'react-icons/lib/fa/times-circle' | ||
|
|
||
| export default FaTimesCircle |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import MdInfo from 'react-icons/lib/md/info' | ||
|
|
||
| export default MdInfo |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
145 changes: 45 additions & 100 deletions
145
packages/@sanity/components/src/snackbar/DefaultSnackbar.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,119 +1,64 @@ | ||
| import PropTypes from 'prop-types' | ||
| import React from 'react' | ||
| import styles from 'part:@sanity/components/snackbar/default-style' | ||
| import Button from 'part:@sanity/components/buttons/default' | ||
| import {Portal} from '../utilities/Portal' | ||
|
|
||
| export default class DefaultSnackbar extends React.PureComponent { | ||
| static propTypes = { | ||
| kind: PropTypes.oneOf(['danger', 'info', 'warning', 'error', 'success']), | ||
| children: PropTypes.node.isRequired, | ||
| timeout: PropTypes.number, | ||
| onHide: PropTypes.func, | ||
| onAction: PropTypes.func, | ||
| kind: PropTypes.oneOf(['info', 'warning', 'error', 'success']), | ||
| title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), | ||
| subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), | ||
| isPersisted: PropTypes.bool, | ||
| children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), | ||
| onClose: PropTypes.func, | ||
| action: PropTypes.shape({ | ||
| title: PropTypes.string | ||
| }) | ||
| } | ||
|
|
||
| static defaultProps = { | ||
| kind: 'info', | ||
| timeout: 0, | ||
| onHide: () => {} | ||
| // Title is also a legacy prop | ||
| title: PropTypes.string, | ||
| callback: PropTypes.func | ||
| }), | ||
| // Legacy props | ||
| onAction: PropTypes.func, | ||
| actionTitle: PropTypes.string, | ||
| timeout: PropTypes.number | ||
| } | ||
|
|
||
| constructor(props, context) { | ||
| super(props, context) | ||
| this.state = { | ||
| visible: true | ||
| } | ||
| static contextTypes = { | ||
| addToSnackQueue: PropTypes.func, | ||
| handleDismissSnack: PropTypes.func | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| this.scheduleHide() | ||
| } | ||
|
|
||
| hide = () => { | ||
| this.setState({visible: false}) | ||
| setTimeout(this.props.onHide(), 200) | ||
| } | ||
|
|
||
| show = () => { | ||
| this.setState({visible: true}) | ||
| } | ||
|
|
||
| cancelHide() { | ||
| clearTimeout(this._timerId) | ||
| } | ||
|
|
||
| scheduleHide() { | ||
| const {timeout} = this.props | ||
| this.cancelHide() | ||
| if (timeout > 0) { | ||
| this._timerId = setTimeout(this.hide, timeout * 1000) | ||
| } | ||
| const { | ||
| action, | ||
| actionTitle, | ||
| kind, | ||
| title, | ||
| subtitle, | ||
| timeout, | ||
| children, | ||
| onClose, | ||
| onAction, | ||
| isPersisted | ||
| } = this.props | ||
|
|
||
| this.snackId = this.context.addToSnackQueue({ | ||
| kind, | ||
| title, | ||
| subtitle, | ||
| children, | ||
| onClose, | ||
| action: { | ||
| title: actionTitle || (action && action.title), | ||
| callback: onAction || (action && action.callback) | ||
| }, | ||
| isPersisted, | ||
| autoDismissTimeout: timeout | ||
| }) | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| this.cancelHide() | ||
| } | ||
|
|
||
| componentDidUpdate(prevProps) { | ||
| if (prevProps.timeout !== this.props.timeout) { | ||
| this.scheduleHide() | ||
| } | ||
| if (prevProps.children !== this.props.children) { | ||
| this.scheduleHide() | ||
| } | ||
| } | ||
|
|
||
| componentWillReceiveProps(nextProps) { | ||
| if (nextProps.timeout !== this.props.timeout) { | ||
| this.show() | ||
| } | ||
| if (nextProps.children !== this.props.children) { | ||
| this.show() | ||
| } | ||
| } | ||
|
|
||
| handleAction = () => { | ||
| this.props.onAction(this.props.action) | ||
| } | ||
|
|
||
| handleMouseOver = () => { | ||
| this.cancelHide() | ||
| } | ||
|
|
||
| handleMouseLeave = () => { | ||
| this.scheduleHide() | ||
| this.context.handleDismissSnack(this.snackId) | ||
| } | ||
|
|
||
| render() { | ||
| const {kind, action, children} = this.props | ||
|
|
||
| const style = `${styles[kind] || styles.root} ${ | ||
| this.state.visible ? styles.visible : styles.hidden | ||
| }` | ||
|
|
||
| return ( | ||
| <Portal> | ||
| <div className={style}> | ||
| <div | ||
| className={styles.inner} | ||
| onMouseOver={this.handleMouseOver} | ||
| onMouseLeave={this.handleMouseLeave} | ||
| > | ||
| {action && ( | ||
| <div className={styles.action}> | ||
| <Button inverted color="white" onClick={this.handleAction}> | ||
| {action.title} | ||
| </Button> | ||
| </div> | ||
| )} | ||
| <div className={styles.content}>{children}</div> | ||
| </div> | ||
| </div> | ||
| </Portal> | ||
| ) | ||
| return <div /> | ||
| } | ||
| } |
Oops, something went wrong.