add the concept of eventTileOps for managing widget visibility based on vdh's PR feedback
This commit is contained in:
parent
23d6edbf63
commit
6c372d37f7
3 changed files with 26 additions and 21 deletions
|
@ -42,11 +42,14 @@ module.exports = React.createClass({
|
|||
onWidgetLoad: React.PropTypes.func,
|
||||
},
|
||||
|
||||
getEventTileOps: function() {
|
||||
return this.refs.body ? this.refs.body.getEventTileOps() : null;
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var UnknownMessageTile = sdk.getComponent('messages.UnknownBody');
|
||||
var UnknownBody = sdk.getComponent('messages.UnknownBody');
|
||||
|
||||
var tileTypes = {
|
||||
var bodyTypes = {
|
||||
'm.text': sdk.getComponent('messages.TextualBody'),
|
||||
'm.notice': sdk.getComponent('messages.TextualBody'),
|
||||
'm.emote': sdk.getComponent('messages.TextualBody'),
|
||||
|
@ -57,12 +60,12 @@ module.exports = React.createClass({
|
|||
|
||||
var content = this.props.mxEvent.getContent();
|
||||
var msgtype = content.msgtype;
|
||||
var TileType = UnknownMessageTile;
|
||||
if (msgtype && tileTypes[msgtype]) {
|
||||
TileType = tileTypes[msgtype];
|
||||
var BodyType = UnknownBody;
|
||||
if (msgtype && bodyTypes[msgtype]) {
|
||||
BodyType = bodyTypes[msgtype];
|
||||
}
|
||||
|
||||
return <TileType mxEvent={this.props.mxEvent} highlights={this.props.highlights}
|
||||
return <BodyType ref="body" mxEvent={this.props.mxEvent} highlights={this.props.highlights}
|
||||
highlightLink={this.props.highlightLink}
|
||||
onWidgetLoad={this.props.onWidgetLoad} />;
|
||||
},
|
||||
|
|
|
@ -50,10 +50,6 @@ module.exports = React.createClass({
|
|||
link: null,
|
||||
|
||||
// track whether the preview widget is hidden
|
||||
// we can't directly use mxEvent's widgetHidden property
|
||||
// as shouldComponentUpdate needs to be able to do before & after
|
||||
// comparisons of the property (and we don't pass it in as a top
|
||||
// level prop to avoid bloating the number of props flying around)
|
||||
widgetHidden: false,
|
||||
};
|
||||
},
|
||||
|
@ -68,8 +64,6 @@ module.exports = React.createClass({
|
|||
// lazy-load the hidden state of the preview widget from localstorage
|
||||
if (global.localStorage) {
|
||||
var hidden = global.localStorage.getItem("hide_preview_" + this.props.mxEvent.getId());
|
||||
// XXX: we're gutwrenching mxEvent here by setting our own custom property on it
|
||||
this.props.mxEvent.widgetHidden = hidden;
|
||||
this.setState({ widgetHidden: hidden });
|
||||
}
|
||||
}
|
||||
|
@ -84,11 +78,7 @@ module.exports = React.createClass({
|
|||
nextProps.highlights !== this.props.highlights ||
|
||||
nextProps.highlightLink !== this.props.highlightLink ||
|
||||
nextState.link !== this.state.link ||
|
||||
nextProps.mxEvent.widgetHidden !== this.state.widgetHidden);
|
||||
},
|
||||
|
||||
componentWillUpdate: function(nextProps, nextState) {
|
||||
this.setState({ widgetHidden: nextProps.mxEvent.widgetHidden });
|
||||
nextState.widgetHidden !== this.state.widgetHidden);
|
||||
},
|
||||
|
||||
findLink: function(nodes) {
|
||||
|
@ -104,8 +94,6 @@ module.exports = React.createClass({
|
|||
},
|
||||
|
||||
onCancelClick: function(event) {
|
||||
// XXX: we're gutwrenching mxEvent here by setting our own custom property on it
|
||||
this.props.mxEvent.widgetHidden = true;
|
||||
this.setState({ widgetHidden: true });
|
||||
// FIXME: persist this somewhere smarter than local storage
|
||||
if (global.localStorage) {
|
||||
|
@ -114,6 +102,19 @@ module.exports = React.createClass({
|
|||
this.forceUpdate();
|
||||
},
|
||||
|
||||
getEventTileOps: function() {
|
||||
var self = this;
|
||||
return {
|
||||
isWidgetHidden: function() {
|
||||
return self.state.widgetHidden;
|
||||
},
|
||||
|
||||
unhideWidget: function() {
|
||||
self.setState({ widgetHidden: false });
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var mxEvent = this.props.mxEvent;
|
||||
var content = mxEvent.getContent();
|
||||
|
|
|
@ -123,7 +123,7 @@ module.exports = React.createClass({
|
|||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
return actions.tweaks.highlight;
|
||||
},
|
||||
|
||||
|
@ -137,6 +137,7 @@ module.exports = React.createClass({
|
|||
mxEvent: this.props.mxEvent,
|
||||
left: x,
|
||||
top: y,
|
||||
eventTileOps: this.refs.tile ? this.refs.tile.getEventTileOps() : undefined,
|
||||
onFinished: function() {
|
||||
self.setState({menu: false});
|
||||
}
|
||||
|
@ -343,7 +344,7 @@ module.exports = React.createClass({
|
|||
{ avatar }
|
||||
{ sender }
|
||||
<div className="mx_EventTile_line">
|
||||
<EventTileType mxEvent={this.props.mxEvent} highlights={this.props.highlights}
|
||||
<EventTileType ref="tile" mxEvent={this.props.mxEvent} highlights={this.props.highlights}
|
||||
highlightLink={this.props.highlightLink}
|
||||
onWidgetLoad={this.props.onWidgetLoad} />
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue