diff options
Diffstat (limited to 'plugins/jetpack/jetpack_vendor/automattic/jetpack-wordads/src/dashboard/components/notice/index.jsx')
-rw-r--r-- | plugins/jetpack/jetpack_vendor/automattic/jetpack-wordads/src/dashboard/components/notice/index.jsx | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/plugins/jetpack/jetpack_vendor/automattic/jetpack-wordads/src/dashboard/components/notice/index.jsx b/plugins/jetpack/jetpack_vendor/automattic/jetpack-wordads/src/dashboard/components/notice/index.jsx new file mode 100644 index 00000000..a8c0121f --- /dev/null +++ b/plugins/jetpack/jetpack_vendor/automattic/jetpack-wordads/src/dashboard/components/notice/index.jsx @@ -0,0 +1,136 @@ +/** + * External dependencies + */ +import PropTypes from 'prop-types'; +import React from 'react'; +import classnames from 'classnames'; +/*eslint lodash/import-scope: [2, "method"]*/ +import noop from 'lodash/noop'; + +/** + * Internal dependencies + */ +import { Gridicon } from '@automattic/jetpack-components'; +import './style.scss'; + +export default class SimpleNotice extends React.Component { + static displayName = 'SimpleNotice'; + + static defaultProps = { + duration: 0, + status: null, + showDismiss: true, + className: '', + onDismissClick: noop, + }; + + static propTypes = { + // we should validate the allowed statuses + status: PropTypes.string, + showDismiss: PropTypes.bool, + isCompact: PropTypes.bool, + duration: PropTypes.number, + text: PropTypes.oneOfType( [ + PropTypes.oneOfType( [ PropTypes.string, PropTypes.node ] ), + PropTypes.arrayOf( PropTypes.oneOfType( [ PropTypes.string, PropTypes.node ] ) ), + ] ), + icon: PropTypes.string, + onDismissClick: PropTypes.func, + className: PropTypes.string, + }; + + dismissTimeout = null; + + componentDidMount() { + if ( this.props.duration > 0 ) { + this.dismissTimeout = setTimeout( this.props.onDismissClick, this.props.duration ); + } + } + + componentWillUnmount() { + if ( this.dismissTimeout ) { + clearTimeout( this.dismissTimeout ); + } + } + + getIcon = () => { + let icon; + + switch ( this.props.status ) { + case 'is-info': + icon = 'info'; + break; + case 'is-success': + icon = 'checkmark'; + break; + case 'is-error': + icon = 'notice'; + break; + case 'is-warning': + icon = 'notice'; + break; + default: + icon = 'info'; + break; + } + + return icon; + }; + + clearText = text => { + if ( 'string' === typeof text ) { + return text.replace( /(<([^>]+)>)/gi, '' ); + } + return text; + }; + + onKeyDownCallback = callback => event => { + if ( event.which === 13 || event.which === 32 ) { + callback && callback( event ); + } + }; + + render() { + const { + children, + className, + icon, + isCompact, + onDismissClick, + showDismiss = ! isCompact, // by default, show on normal notices, don't show on compact ones + status, + text, + dismissText, + } = this.props; + const classes = classnames( 'dops-notice', status, className, { + 'is-compact': isCompact, + 'is-dismissable': showDismiss, + } ); + + return ( + <div className={ classes }> + <span className="dops-notice__icon-wrapper"> + <Gridicon className="dops-notice__icon" icon={ icon || this.getIcon() } size={ 24 } /> + </span> + <span className="dops-notice__content"> + <span className="dops-notice__text">{ text ? this.clearText( text ) : children }</span> + </span> + { text ? children : null } + { showDismiss && ( + <span + role="button" + onKeyDown={ this.onKeyDownCallback( onDismissClick ) } + tabIndex="0" + className="dops-notice__dismiss" + onClick={ onDismissClick } + > + <Gridicon icon="cross" size={ 24 } /> + <span className="dops-notice__screen-reader-text screen-reader-text"> + { dismissText } + </span> + </span> + ) } + </div> + ); + } +} |