PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

fix Modal typo and refactor BaseDialog to fix " undefined" className

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2018-06-12 11:15:30 +01:00
parent 7f1ce52dd3
commit d8a1feb501
No known key found for this signature in database
GPG key ID: 3F879DA5AD802A5E
2 changed files with 16 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/components/views/dialogs/BaseDialog.js
View file

@ -18,6 +18,7 @@ limitations under the License.
import React from 'react'; import React from 'react';
import FocusTrap from 'focus-trap-react'; import FocusTrap from 'focus-trap-react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames';
import { MatrixClient } from 'matrix-js-sdk'; import { MatrixClient } from 'matrix-js-sdk';
@ -64,7 +65,10 @@ export default React.createClass({
// Id of content element // Id of content element
// If provided, this is used to add a aria-describedby attribute // If provided, this is used to add a aria-describedby attribute
contentId: React.PropTypes.string, contentId: PropTypes.string,
// optional additional class for the title element
titleClass: PropTypes.string,
}, },
getDefaultProps: function() { getDefaultProps: function() {
@ -105,25 +109,28 @@ export default React.createClass({
render: function() { render: function() {
const TintableSvg = sdk.getComponent("elements.TintableSvg"); const TintableSvg = sdk.getComponent("elements.TintableSvg");
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>;
}
return ( return (
<FocusTrap onKeyDown={this._onKeyDown} <FocusTrap onKeyDown={this._onKeyDown}
className={this.props.className} className={this.props.className}
role="dialog" role="dialog"
aria-labelledby='mx_BaseDialog_title' aria-labelledby='mx_BaseDialog_title'
// This should point to a node describing the dialog. // This should point to a node describing the dialog.
// If we were about to completelly follow this recommendation we'd need to // If we were about to completely follow this recommendation we'd need to
// make all the components relying on BaseDialog to be aware of it. // make all the components relying on BaseDialog to be aware of it.
// So instead we will use the whole content as the description. // So instead we will use the whole content as the description.
// Description comes first and if the content contains more text, // Description comes first and if the content contains more text,
// AT users can skip its presentation. // AT users can skip its presentation.
aria-describedby={this.props.contentId} aria-describedby={this.props.contentId}
> >
{ this.props.hasCancel ? <AccessibleButton onClick={this._onCancelClick} { cancelButton }
className="mx_Dialog_cancelButton" <div className={classNames('mx_Dialog_title', this.props.titleClass)} id='mx_BaseDialog_title'>
>
<TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
</AccessibleButton> : null }
<div className={'mx_Dialog_title ' + this.props.titleClass} id='mx_BaseDialog_title'>
{ this.props.title } { this.props.title }
</div> </div>
{ this.props.children } { this.props.children }

2
src/components/views/dialogs/ChatCreateOrReuseDialog.js
View file

@ -187,7 +187,7 @@ export default class ChatCreateOrReuseDialog extends React.Component {
} }
} }
ChatCreateOrReuseDialog.propTyps = { ChatCreateOrReuseDialog.propTypes = {
userId: PropTypes.string.isRequired, userId: PropTypes.string.isRequired,
// Called when clicking outside of the dialog // Called when clicking outside of the dialog
onFinished: PropTypes.func.isRequired, onFinished: PropTypes.func.isRequired,