2017-01-24 18:54:05 +03:00
|
|
|
/*
|
|
|
|
Copyright 2017 Vector Creations Ltd
|
2018-04-27 14:38:49 +03:00
|
|
|
Copyright 2018 New Vector Ltd
|
2017-01-24 18:54:05 +03:00
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
|
|
|
import React from 'react';
|
2017-12-05 10:50:40 +03:00
|
|
|
import FocusTrap from 'focus-trap-react';
|
2017-12-26 04:03:18 +03:00
|
|
|
import PropTypes from 'prop-types';
|
2018-06-12 13:15:30 +03:00
|
|
|
import classNames from 'classnames';
|
2017-01-24 18:54:05 +03:00
|
|
|
|
2018-02-07 12:45:36 +03:00
|
|
|
import { MatrixClient } from 'matrix-js-sdk';
|
|
|
|
|
2017-12-01 13:30:49 +03:00
|
|
|
import { KeyCode } from '../../../Keyboard';
|
2017-02-13 19:03:21 +03:00
|
|
|
import AccessibleButton from '../elements/AccessibleButton';
|
2017-03-12 23:13:39 +03:00
|
|
|
import sdk from '../../../index';
|
2018-02-07 12:45:36 +03:00
|
|
|
import MatrixClientPeg from '../../../MatrixClientPeg';
|
2017-01-24 18:54:05 +03:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Basic container for modal dialogs.
|
|
|
|
*
|
|
|
|
* Includes a div for the title, and a keypress handler which cancels the
|
|
|
|
* dialog on escape.
|
|
|
|
*/
|
|
|
|
export default React.createClass({
|
|
|
|
displayName: 'BaseDialog',
|
|
|
|
|
|
|
|
propTypes: {
|
|
|
|
// onFinished callback to call when Escape is pressed
|
2018-04-27 19:53:11 +03:00
|
|
|
// Take a boolean which is true if the dialog was dismissed
|
2018-04-27 13:19:14 +03:00
|
|
|
// with a positive / confirm action or false if it was
|
2018-04-27 19:56:33 +03:00
|
|
|
// cancelled (BaseDialog itself only calls this with false).
|
2017-12-26 04:03:18 +03:00
|
|
|
onFinished: PropTypes.func.isRequired,
|
2017-01-24 18:54:05 +03:00
|
|
|
|
2018-04-27 14:38:49 +03:00
|
|
|
// Whether the dialog should have a 'close' button that will
|
|
|
|
// cause the dialog to be cancelled. This should only be set
|
2018-04-30 16:17:21 +03:00
|
|
|
// to false if there is nothing the app can sensibly do if the
|
2018-04-27 14:38:49 +03:00
|
|
|
// dialog is cancelled, eg. "We can't restore your session and
|
2018-04-30 16:17:21 +03:00
|
|
|
// the app cannot work". Default: true.
|
2018-04-27 14:38:49 +03:00
|
|
|
hasCancel: PropTypes.bool,
|
|
|
|
|
2018-02-06 18:01:14 +03:00
|
|
|
// called when a key is pressed
|
|
|
|
onKeyDown: PropTypes.func,
|
|
|
|
|
2017-01-24 18:54:05 +03:00
|
|
|
// CSS class to apply to dialog div
|
2017-12-26 04:03:18 +03:00
|
|
|
className: PropTypes.string,
|
2017-01-24 18:54:05 +03:00
|
|
|
|
|
|
|
// Title for the dialog.
|
|
|
|
// (could probably actually be something more complicated than a string if desired)
|
2017-12-26 04:03:18 +03:00
|
|
|
title: PropTypes.string.isRequired,
|
2017-01-24 18:54:05 +03:00
|
|
|
|
|
|
|
// children should be the content of the dialog
|
2017-12-26 04:03:18 +03:00
|
|
|
children: PropTypes.node,
|
2017-11-29 23:13:48 +03:00
|
|
|
|
|
|
|
// Id of content element
|
|
|
|
// If provided, this is used to add a aria-describedby attribute
|
2018-06-12 13:15:30 +03:00
|
|
|
contentId: PropTypes.string,
|
|
|
|
|
|
|
|
// optional additional class for the title element
|
|
|
|
titleClass: PropTypes.string,
|
2017-01-24 18:54:05 +03:00
|
|
|
},
|
|
|
|
|
2018-04-27 14:38:49 +03:00
|
|
|
getDefaultProps: function() {
|
|
|
|
return {
|
|
|
|
hasCancel: true,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2018-02-07 12:45:36 +03:00
|
|
|
childContextTypes: {
|
|
|
|
matrixClient: PropTypes.instanceOf(MatrixClient),
|
|
|
|
},
|
|
|
|
|
|
|
|
getChildContext: function() {
|
|
|
|
return {
|
|
|
|
matrixClient: this._matrixClient,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
componentWillMount() {
|
|
|
|
this._matrixClient = MatrixClientPeg.get();
|
|
|
|
},
|
|
|
|
|
2017-05-16 16:50:19 +03:00
|
|
|
_onKeyDown: function(e) {
|
2018-02-06 18:01:14 +03:00
|
|
|
if (this.props.onKeyDown) {
|
|
|
|
this.props.onKeyDown(e);
|
|
|
|
}
|
2018-04-27 14:38:49 +03:00
|
|
|
if (this.props.hasCancel && e.keyCode === KeyCode.ESCAPE) {
|
2017-05-16 16:00:09 +03:00
|
|
|
e.stopPropagation();
|
2017-01-24 18:54:05 +03:00
|
|
|
e.preventDefault();
|
2018-04-27 13:19:14 +03:00
|
|
|
this.props.onFinished(false);
|
2017-01-24 18:54:05 +03:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2017-02-13 19:03:21 +03:00
|
|
|
_onCancelClick: function(e) {
|
2018-04-27 13:19:14 +03:00
|
|
|
this.props.onFinished(false);
|
2017-02-13 19:03:21 +03:00
|
|
|
},
|
|
|
|
|
2017-01-24 18:54:05 +03:00
|
|
|
render: function() {
|
2017-03-12 23:03:05 +03:00
|
|
|
const TintableSvg = sdk.getComponent("elements.TintableSvg");
|
2017-05-27 22:47:09 +03:00
|
|
|
|
2018-06-12 13:15:30 +03:00
|
|
|
let cancelButton;
|
|
|
|
if (this.props.hasCancel) {
|
|
|
|
cancelButton = <AccessibleButton onClick={this._onCancelClick} className="mx_Dialog_cancelButton">
|
|
|
|
<TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
|
|
|
|
</AccessibleButton>;
|
|
|
|
}
|
|
|
|
|
2017-01-24 18:54:05 +03:00
|
|
|
return (
|
2017-12-12 20:55:57 +03:00
|
|
|
<FocusTrap onKeyDown={this._onKeyDown}
|
|
|
|
className={this.props.className}
|
|
|
|
role="dialog"
|
|
|
|
aria-labelledby='mx_BaseDialog_title'
|
2018-02-12 23:13:53 +03:00
|
|
|
// This should point to a node describing the dialog.
|
2018-06-12 13:15:30 +03:00
|
|
|
// If we were about to completely follow this recommendation we'd need to
|
2018-02-12 23:13:53 +03:00
|
|
|
// make all the components relying on BaseDialog to be aware of it.
|
|
|
|
// So instead we will use the whole content as the description.
|
|
|
|
// Description comes first and if the content contains more text,
|
|
|
|
// AT users can skip its presentation.
|
2017-12-12 20:55:57 +03:00
|
|
|
aria-describedby={this.props.contentId}
|
|
|
|
>
|
2018-06-12 13:15:30 +03:00
|
|
|
{ cancelButton }
|
|
|
|
<div className={classNames('mx_Dialog_title', this.props.titleClass)} id='mx_BaseDialog_title'>
|
2017-01-24 18:54:05 +03:00
|
|
|
{ this.props.title }
|
|
|
|
</div>
|
|
|
|
{ this.props.children }
|
2017-12-05 10:50:40 +03:00
|
|
|
</FocusTrap>
|
2017-01-24 18:54:05 +03:00
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|