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 (