import Flag from '@atlaskit/flag'; import WarningIcon from '@atlaskit/icon/glyph/warning'; import { ToggleStateless } from '@atlaskit/toggle'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { translate } from '../../base/i18n'; /** * React {@code Component} for displaying a notification with a toggle element. * * @extends Component */ class NotificationWithToggle extends Component { /** * {@code NotificationWithToggle} component's property types. * * @static */ static propTypes = { /** * Any additional text to display at the end of the notification message * body. */ additionalMessage: PropTypes.string, /** * Whether or not the dismiss button should be displayed. This is passed * in by {@code FlagGroup}. */ isDismissAllowed: PropTypes.bool, /** * The translation key to be used as the main body of the notification. */ messageKey: PropTypes.string, /** * Callback invoked when the user clicks to dismiss the notification. * This is passed in by {@code FlagGroup}. */ onDismissed: PropTypes.func, /** * Optional callback to invoke when the notification is dismissed. The * current value of the toggle element will be passed in. */ onToggleSubmit: PropTypes.func, /** * Whether or not the toggle element should be displayed. */ showToggle: PropTypes.bool, /** * Translation key for a message to display at the top of the * notification body. */ subtitleKey: PropTypes.string, /** * Invoked to obtain translated strings. */ t: PropTypes.func, /** * The translation key to be used as the title of the notification. */ titleKey: PropTypes.string, /* * The translation key to be used as a label describing what setting the * toggle will change. */ toggleLabelKey: PropTypes.string, /** * The unique identifier for the notification. Passed back by the * {@code Flag} component in the onDismissed callback. */ uid: PropTypes.number }; /** * Initializes a new {@code NotificationWithToggle} instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ constructor(props) { super(props); this.state = { /** * Whether or not the toggle element is active/checked/selected. * * @type {boolean} */ isToggleChecked: false }; // Bind event handlers so they are only bound once for every instance. this._onDismissed = this._onDismissed.bind(this); this._onToggleChange = this._onToggleChange.bind(this); } /** * Implements React's {@link Component#render()}. * * @inheritdoc * @returns {ReactElement} */ render() { const { isDismissAllowed, t, titleKey, uid } = this.props; return ( ) } id = { uid } isDismissAllowed = { isDismissAllowed } onDismissed = { this._onDismissed } title = { t(titleKey) } /> ); } /** * Calls back into {@code FlagGroup} to dismiss the notification. Optionally * will execute a passed in onToggleSubmit callback with the current state * of the toggle element. * * @private * @returns {void} */ _onDismissed() { const { onDismissed, onToggleSubmit, showToggle, uid } = this.props; if (showToggle && onToggleSubmit) { onToggleSubmit(this.state.isToggleChecked); } onDismissed(uid); } /** * Updates the current known state of the toggle selection. * * @param {Object} event - The DOM event from changing the toggle selection. * @private * @returns {void} */ _onToggleChange(event) { this.setState({ isToggleChecked: event.target.checked }); } /** * Creates a React Element for displaying the notification message as well * as a toggle. * * @private * @returns {ReactElement} */ _renderDescription() { const { additionalMessage, messageKey, showToggle, subtitleKey, t, toggleLabelKey } = this.props; return (
{ t(subtitleKey) }
{ messageKey ?
{ t(messageKey) }
: null } { additionalMessage ?
{ additionalMessage }
: null } { showToggle ?
{ t(toggleLabelKey) }
: null }
); } } export default translate(NotificationWithToggle);