mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-29 12:58:53 +03:00
Code Issues Projects Releases Packages Wiki Activity

Extracted context menu from TagTile to DNDTagTile

Browse source
This commit is contained in:
Agusti Bau 2020-04-25 01:09:07 +02:00
parent 4a0f228714
commit 5f3e3b3ec2
2 changed files with 92 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
src/components/views/elements/DNDTagTile.js
View file

@ -17,15 +17,55 @@ limitations under the License.
import TagTile from './TagTile';
import React from 'react';
import React, {createRef} from 'react';
import { Draggable } from 'react-beautiful-dnd';
import {ContextMenu, toRightOf} from "../../structures/ContextMenu";
import * as sdk from '../../../index';
export default function DNDTagTile(props) {
export default class DNDTagTile extends React.Component {
constructor() {
super();
this.state = {
menuDisplayed: false,
};
this.openMenu = this.openMenu.bind(this);
this.closeMenu = this.closeMenu.bind(this);
}
componentDidMount() {
this._contextMenuButton = createRef();
}
openMenu() {
this.setState({
menuDisplayed: true,
});
}
closeMenu() {
console.log("Closig menu");
this.setState({
menuDisplayed: false,
});
}
getContextMenu() {
const elementRect = this._contextMenuButton.current.getBoundingClientRect();
const TagTileContextMenu = sdk.getComponent('context_menus.TagTileContextMenu');
return (
<ContextMenu {...toRightOf(elementRect)} onFinished={this.closeMenu}>
<TagTileContextMenu tag={this.props.tag} onFinished={this.closeMenu} />
</ContextMenu>
);
}
render(props) {
return <div>
<Draggable
key={props.tag}
draggableId={props.tag}
index={props.index}
key={this.props.tag}
draggableId={this.props.tag}
index={this.props.index}
type="draggable-TagTile"
>
{ (provided, snapshot) => (
@ -35,11 +75,18 @@ export default function DNDTagTile(props) {
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<TagTile {...props} />
<TagTile
{...this.props}
contextMenuButtonRef= {this._contextMenuButton}
menuDisplayed={this.state.menuDisplayed}
openMenu={this.openMenu}
/>
</div>
{ provided.placeholder }
</div>
) }
</Draggable>
{this.state.menuDisplayed && this.getContextMenu()}
</div>;
}
}

60
src/components/views/elements/TagTile.js
View file

@ -16,7 +16,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, {createRef} from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';
import classNames from 'classnames';
@ -28,7 +28,6 @@ import * as FormattingUtils from '../../../utils/FormattingUtils';
import FlairStore from '../../../stores/FlairStore';
import GroupStore from '../../../stores/GroupStore';
import TagOrderStore from '../../../stores/TagOrderStore';
import {ContextMenu, toRightOf} from "../../structures/ContextMenu";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
// A class for a child of TagPanel (possibly wrapped in a DNDTagTile) that represents
@ -43,6 +42,9 @@ export default createReactClass({
// A string tag such as "m.favourite" or a group ID such as "+groupid:domain.bla"
// For now, only group IDs are handled.
tag: PropTypes.string,
contextMenuButtonRef: PropTypes.object,
openMenu: PropTypes.func,
menuDisplayed: PropTypes.bool,
},
statics: {
@ -55,14 +57,10 @@ export default createReactClass({
hover: false,
// The profile data of the group if this.props.tag is a group ID
profile: null,
// Whether or not the context menu is open
menuDisplayed: false,
};
},
componentDidMount() {
this._contextMenuButton = createRef();
this.unmounted = false;
if (this.props.tag[0] === '+') {
FlairStore.addListener('updateGroupProfile', this._onFlairStoreUpdated);
@ -124,17 +122,8 @@ export default createReactClass({
// Prevent the TagTile onClick event firing as well
e.stopPropagation();
e.preventDefault();
this.setState({
menuDisplayed: true,
hover: false,
});
},
closeMenu: function() {
this.setState({
menuDisplayed: false,
});
this.setState({hover: false});
this.props.openMenu();
},
render: function() {
@ -163,26 +152,25 @@ export default createReactClass({
}
// FIXME: this ought to use AccessibleButton for a11y but that causes onMouseOut/onMouseOver to fire too much
const contextButton = this.state.hover || this.state.menuDisplayed ?
<div className="mx_TagTile_context_button" onClick={this.openMenu} ref={this._contextMenuButton}>
const contextButton = this.state.hover || this.props.menuDisplayed ?
<div className="mx_TagTile_context_button" onClick={this.openMenu} ref={this.props.contextMenuButtonRef}>
{ "\u00B7\u00B7\u00B7" }
</div> : <div ref={this._contextMenuButton} />;
let contextMenu;
if (this.state.menuDisplayed) {
const elementRect = this._contextMenuButton.current.getBoundingClientRect();
const TagTileContextMenu = sdk.getComponent('context_menus.TagTileContextMenu');
contextMenu = (
<ContextMenu {...toRightOf(elementRect)} onFinished={this.closeMenu}>
<TagTileContextMenu tag={this.props.tag} onFinished={this.closeMenu} />
</ContextMenu>
);
}
</div> : <div ref={this.props.contextMenuButtonRef} />;
const AccessibleTooltipButton = sdk.getComponent("elements.AccessibleTooltipButton");
return <React.Fragment>
<AccessibleTooltipButton className={className} onClick={this.onClick} onContextMenu={this.openMenu} title={name}>
<div className="mx_TagTile_avatar" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
return <div>
<AccessibleTooltipButton
className={className}
onClick={this.onClick}
onContextMenu={this.openMenu}
title={name}
>
<div
className="mx_TagTile_avatar"
onMouseOver={this.onMouseOver}
onMouseOut={this.onMouseOut}
>
<BaseAvatar
name={name}
idName={this.props.tag}
@ -194,8 +182,6 @@ export default createReactClass({
{ badgeElement }
</div>
</AccessibleTooltipButton>
{ contextMenu }
</React.Fragment>;
</div>;
},
});