ref(notifications): replace NotificationWithToggle with Notification
It was decided along with the mute participant dialog reactification that these types of warning messages should not be toggleable--that they should simply always display because there is no undo action. As such, the component NotificationWithToggle is no longer needed.
This commit is contained in:
Leonard Kim
yanas
@@ -1,14 +1,9 @@
|
||||
import jitsiLocalStorage from '../../../modules/util/JitsiLocalStorage';
|
||||
|
||||
import {
|
||||
HIDE_NOTIFICATION,
|
||||
SET_NOTIFICATIONS_ENABLED,
|
||||
SHOW_NOTIFICATION
|
||||
} from './actionTypes';
|
||||
import {
|
||||
Notification,
|
||||
NotificationWithToggle
|
||||
} from './components';
|
||||
import { Notification } from './components';
|
||||
|
||||
import { NOTIFICATION_TYPE } from './constants';
|
||||
|
||||
@@ -96,33 +91,3 @@ export function showWarningNotification(props) {
|
||||
appearance: NOTIFICATION_TYPE.WARNING
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays a notification unless the passed in persistenceKey value exists in
|
||||
* local storage and has been set to "true".
|
||||
*
|
||||
* @param {string} persistenceKey - The local storage key to look up for whether
|
||||
* or not the notification should display.
|
||||
* @param {Object} props - The props needed to show the notification component.
|
||||
* @returns {Function}
|
||||
*/
|
||||
export function maybeShowNotificationWithDoNotDisplay(persistenceKey, props) {
|
||||
return dispatch => {
|
||||
if (jitsiLocalStorage.getItem(persistenceKey) === 'true') {
|
||||
return;
|
||||
}
|
||||
|
||||
const newProps = Object.assign({}, props, {
|
||||
onToggleSubmit: isToggled => {
|
||||
jitsiLocalStorage.setItem(persistenceKey, isToggled);
|
||||
}
|
||||
});
|
||||
|
||||
dispatch({
|
||||
type: SHOW_NOTIFICATION,
|
||||
component: NotificationWithToggle,
|
||||
props: newProps,
|
||||
uid: window.Date.now()
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
@@ -61,7 +61,8 @@ class Notification extends Component<*> {
|
||||
defaultTitleKey: PropTypes.string,
|
||||
|
||||
/**
|
||||
* The description string.
|
||||
* A description string that can be used in addition to the prop
|
||||
* descriptionKey.
|
||||
*/
|
||||
description: PropTypes.string,
|
||||
|
||||
@@ -161,8 +162,7 @@ class Notification extends Component<*> {
|
||||
<Flag
|
||||
actions = { this._mapAppearanceToButtons(hideErrorSupportLink) }
|
||||
appearance = { appearance }
|
||||
description = { description
|
||||
|| t(descriptionKey, descriptionArguments) }
|
||||
description = { this._renderDescription() }
|
||||
icon = { this._mapAppearanceToIcon() }
|
||||
id = { uid }
|
||||
isDismissAllowed = { isDismissAllowed }
|
||||
@@ -173,6 +173,30 @@ class Notification extends Component<*> {
|
||||
|
||||
_onDismissed: () => void;
|
||||
|
||||
/**
|
||||
* Creates a {@code ReactElement} for displaying the contents of the
|
||||
* notification.
|
||||
*
|
||||
* @private
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
_renderDescription() {
|
||||
const {
|
||||
description,
|
||||
descriptionArguments,
|
||||
descriptionKey,
|
||||
t
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ descriptionKey
|
||||
? t(descriptionKey, descriptionArguments) : null }
|
||||
{ description || null }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calls back into {@code FlagGroup} to dismiss the notification.
|
||||
*
|
||||
|
||||
@@ -1,160 +0,0 @@
|
||||
import { ToggleStateless } from '@atlaskit/toggle';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { translate } from '../../base/i18n';
|
||||
|
||||
import { default as Notification } from './Notification';
|
||||
import { NOTIFICATION_TYPE } from '../constants';
|
||||
|
||||
/**
|
||||
* 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 = {
|
||||
...Notification.propTypes,
|
||||
|
||||
/**
|
||||
* Any additional text to display at the end of the notification message
|
||||
* body.
|
||||
*/
|
||||
additionalMessage: PropTypes.string,
|
||||
|
||||
/**
|
||||
* 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,
|
||||
|
||||
/*
|
||||
* The translation key to be used as a label describing what setting the
|
||||
* toggle will change.
|
||||
*/
|
||||
toggleLabelKey: PropTypes.string
|
||||
};
|
||||
|
||||
/**
|
||||
* 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() {
|
||||
return (
|
||||
<Notification
|
||||
appearance = { NOTIFICATION_TYPE.WARNING }
|
||||
{ ...this.props }
|
||||
description = { this._renderDescription() } />
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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,
|
||||
descriptionKey,
|
||||
showToggle,
|
||||
subtitleKey,
|
||||
t,
|
||||
toggleLabelKey
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div className = 'notification-with-toggle'>
|
||||
<div>{ t(subtitleKey) }</div>
|
||||
{ descriptionKey ? <div>{ t(descriptionKey) }</div> : null }
|
||||
{ additionalMessage ? <div>{ additionalMessage }</div>
|
||||
: null }
|
||||
{ showToggle
|
||||
? <div>
|
||||
{ t(toggleLabelKey) }
|
||||
<ToggleStateless
|
||||
isChecked
|
||||
= { this.state.isToggleChecked }
|
||||
onChange = { this._onToggleChange } />
|
||||
</div>
|
||||
: null }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default translate(NotificationWithToggle);
|
||||
@@ -1,3 +1,2 @@
|
||||
export { default as Notification } from './Notification';
|
||||
export { default as NotificationsContainer } from './NotificationsContainer';
|
||||
export { default as NotificationWithToggle } from './NotificationWithToggle';
|
||||
|
||||
Reference in New Issue
Block a user