Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | 4x 4x 4x 4x 13x 3x 3x 13x 3x 3x 13x 13x 13x 13x 13x | import { Icon, info, check, caution, close } from '@wordpress/icons';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import { Component } from 'react';
import './style.scss';
const noop = () => {};
export default class SimpleNotice extends 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.object,
onDismissClick: PropTypes.func,
className: PropTypes.string,
};
dismissTimeout = null;
componentDidMount() {
Iif ( this.props.duration > 0 ) {
this.dismissTimeout = setTimeout( this.props.onDismissClick, this.props.duration );
}
}
componentWillUnmount() {
Iif ( this.dismissTimeout ) {
clearTimeout( this.dismissTimeout );
}
}
getIcon = () => {
switch ( this.props.status ) {
case 'is-success':
return check;
case 'is-error':
case 'is-warning':
return caution;
case 'is-info':
default:
return info;
}
};
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 = clsx( 'dops-notice', status, className, {
'is-compact': isCompact,
'is-dismissable': showDismiss,
} );
return (
<div className={ classes }>
<span className="dops-notice__icon-wrapper">
<Icon 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 }
>
<Icon icon={ close } size={ 24 } />
<span className="dops-notice__screen-reader-text screen-reader-text">
{ dismissText }
</span>
</span>
) }
</div>
);
}
}
|