mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2024-12-05 05:38:41 +03:00
Code Issues Projects Releases Packages Wiki Activity

Convert to ES6 class.

Browse source
This commit is contained in:
Richard Lewis 2018-01-11 11:49:46 +00:00
parent 78bd25eff0
commit d0c16fa7a1
1 changed files with 51 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

104
src/components/views/elements/AppTile.js
View file

@ -1,4 +1,4 @@
/* /**
Copyright 2017 Vector Creations Ltd Copyright 2017 Vector Creations Ltd
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
@ -36,31 +36,8 @@ import dis from '../../../dispatcher';
const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:']; const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:'];
export default React.createClass({ export default class AppTile extends React.Component {
displayName: 'AppTile', static displayName ='AppTile';
propTypes: {
id: React.PropTypes.string.isRequired,
url: React.PropTypes.string.isRequired,
name: React.PropTypes.string.isRequired,
room: React.PropTypes.object.isRequired,
type: React.PropTypes.string.isRequired,
// Specifying 'fullWidth' as true will render the app tile to fill the width of the app drawer continer.
// This should be set to true when there is only one widget in the app drawer, otherwise it should be false.
fullWidth: React.PropTypes.bool,
// UserId of the current user
userId: React.PropTypes.string.isRequired,
// UserId of the entity that added / modified the widget
creatorUserId: React.PropTypes.string,
waitForIframeLoad: React.PropTypes.bool,
},
getDefaultProps() {
return {
url: "",
waitForIframeLoad: true,
};
},
/** /**
* Set initial component state when the App wUrl (widget URL) is being updated. * Set initial component state when the App wUrl (widget URL) is being updated.
@ -84,7 +61,7 @@ export default React.createClass({
widgetPageTitle: newProps.widgetPageTitle, widgetPageTitle: newProps.widgetPageTitle,
capabilities: [], capabilities: [],
}; };
}, }
/** /**
@ -94,7 +71,7 @@ export default React.createClass({
*/ */
_hasCapability(capability) { _hasCapability(capability) {
return this.state.capabilities.some((c) => {return c === capability;}); return this.state.capabilities.some((c) => {return c === capability;});
}, }
/** /**
* Add widget instance specific parameters to pass in wUrl * Add widget instance specific parameters to pass in wUrl
@ -122,11 +99,11 @@ export default React.createClass({
u.query = params; u.query = params;
return u.format(); return u.format();
}, }
getInitialState() { getInitialState() {
return this._getNewState(this.props); return this._getNewState(this.props);
}, }
/** /**
* Returns true if specified url is a scalar URL, typically https://scalar.vector.im/api * Returns true if specified url is a scalar URL, typically https://scalar.vector.im/api
@ -150,7 +127,7 @@ export default React.createClass({
} }
} }
return false; return false;
}, }
isMixedContent() { isMixedContent() {
const parentContentProtocol = window.location.protocol; const parentContentProtocol = window.location.protocol;
@ -162,18 +139,18 @@ export default React.createClass({
return true; return true;
} }
return false; return false;
}, }
componentWillMount() { componentWillMount() {
this.setScalarToken(); this.setScalarToken();
}, }
componentDidMount() { componentDidMount() {
// Legacy Jitsi widget messaging -- TODO replace this with standard widget // Legacy Jitsi widget messaging -- TODO replace this with standard widget
// postMessaging API // postMessaging API
dis.register(this._onAction); dis.register(this._onAction);
window.addEventListener('message', this._onMessage, false); window.addEventListener('message', this._onMessage, false);
}, }
/** /**
* Adds a scalar token to the widget URL, if required * Adds a scalar token to the widget URL, if required
@ -225,14 +202,14 @@ export default React.createClass({
initialising: false, initialising: false,
}); });
}); });
}, }
componentWillUnmount() { componentWillUnmount() {
this.widgetMessaging.stopListening(); this.widgetMessaging.stopListening();
this.widgetMessaging.removeEndpoint(this.props.id, this.props.url); this.widgetMessaging.removeEndpoint(this.props.id, this.props.url);
dis.unregister(this._onAction); dis.unregister(this._onAction);
window.removeEventListener('message', this._onMessage); window.removeEventListener('message', this._onMessage);
}, }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (nextProps.url !== this.props.url) { if (nextProps.url !== this.props.url) {
@ -247,7 +224,7 @@ export default React.createClass({
widgetPageTitle: nextProps.widgetPageTitle, widgetPageTitle: nextProps.widgetPageTitle,
}); });
} }
}, }
// Legacy Jitsi widget messaging // Legacy Jitsi widget messaging
// TODO -- This should be replaced with the new widget postMessaging API // TODO -- This should be replaced with the new widget postMessaging API
@ -268,11 +245,11 @@ export default React.createClass({
.document.querySelector('iframe[id^="jitsiConferenceFrame"]'); .document.querySelector('iframe[id^="jitsiConferenceFrame"]');
PlatformPeg.get().setupScreenSharingForIframe(iframe); PlatformPeg.get().setupScreenSharingForIframe(iframe);
} }
}, }
_canUserModify() { _canUserModify() {
return WidgetUtils.canUserModifyWidgets(this.props.room.roomId); return WidgetUtils.canUserModifyWidgets(this.props.room.roomId);
}, }
_onEditClick(e) { _onEditClick(e) {
console.log("Edit widget ID ", this.props.id); console.log("Edit widget ID ", this.props.id);
@ -282,7 +259,7 @@ export default React.createClass({
Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, { Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
src: src, src: src,
}, "mx_IntegrationsManager"); }, "mx_IntegrationsManager");
}, }
_onSnapshotClick(e) { _onSnapshotClick(e) {
console.warn("Requesting widget snapshot"); console.warn("Requesting widget snapshot");
@ -294,7 +271,7 @@ export default React.createClass({
}).catch((err) => { }).catch((err) => {
console.error("Failed to get screenshot", err); console.error("Failed to get screenshot", err);
}); });
}, }
/* If user has permission to modify widgets, delete the widget, /* If user has permission to modify widgets, delete the widget,
* otherwise revoke access for the widget to load in the user's browser * otherwise revoke access for the widget to load in the user's browser
@ -329,7 +306,7 @@ export default React.createClass({
console.log("Revoke widget permissions - %s", this.props.id); console.log("Revoke widget permissions - %s", this.props.id);
this._revokeWidgetPermission(); this._revokeWidgetPermission();
} }
}, }
/** /**
* Called when widget iframe has finished loading * Called when widget iframe has finished loading
@ -347,7 +324,7 @@ export default React.createClass({
console.log("Failed to get widget capabilities", this.widgetId, err); console.log("Failed to get widget capabilities", this.widgetId, err);
}); });
this.setState({loading: false}); this.setState({loading: false});
}, }
_onAction(payload) { _onAction(payload) {
if (payload.widgetId === this.props.id) { if (payload.widgetId === this.props.id) {
@ -361,7 +338,7 @@ export default React.createClass({
break; break;
} }
} }
}, }
/** /**
* Set remote content title on AppTile * Set remote content title on AppTile
@ -375,7 +352,7 @@ export default React.createClass({
}, (err) =>{ }, (err) =>{
console.error("Failed to get page title", err); console.error("Failed to get page title", err);
}); });
}, }
// Widget labels to render, depending upon user permissions // Widget labels to render, depending upon user permissions
// These strings are translated at the point that they are inserted in to the DOM, in the render method // These strings are translated at the point that they are inserted in to the DOM, in the render method
@ -384,20 +361,20 @@ export default React.createClass({
return _td('Delete widget'); return _td('Delete widget');
} }
return _td('Revoke widget access'); return _td('Revoke widget access');
}, }
/* TODO -- Store permission in account data so that it is persisted across multiple devices */ /* TODO -- Store permission in account data so that it is persisted across multiple devices */
_grantWidgetPermission() { _grantWidgetPermission() {
console.warn('Granting permission to load widget - ', this.state.widgetUrl); console.warn('Granting permission to load widget - ', this.state.widgetUrl);
localStorage.setItem(this.state.widgetPermissionId, true); localStorage.setItem(this.state.widgetPermissionId, true);
this.setState({hasPermissionToLoad: true}); this.setState({hasPermissionToLoad: true});
}, }
_revokeWidgetPermission() { _revokeWidgetPermission() {
console.warn('Revoking permission to load widget - ', this.state.widgetUrl); console.warn('Revoking permission to load widget - ', this.state.widgetUrl);
localStorage.removeItem(this.state.widgetPermissionId); localStorage.removeItem(this.state.widgetPermissionId);
this.setState({hasPermissionToLoad: false}); this.setState({hasPermissionToLoad: false});
}, }
formatAppTileName() { formatAppTileName() {
let appTileName = "No name"; let appTileName = "No name";
@ -405,7 +382,7 @@ export default React.createClass({
appTileName = this.props.name.trim(); appTileName = this.props.name.trim();
} }
return appTileName; return appTileName;
}, }
onClickMenuBar(ev) { onClickMenuBar(ev) {
ev.preventDefault(); ev.preventDefault();
@ -420,7 +397,7 @@ export default React.createClass({
action: 'appsDrawer', action: 'appsDrawer',
show: !this.props.show, show: !this.props.show,
}); });
}, }
_getSafeUrl() { _getSafeUrl() {
const parsedWidgetUrl = url.parse(this.state.widgetUrl); const parsedWidgetUrl = url.parse(this.state.widgetUrl);
@ -429,7 +406,7 @@ export default React.createClass({
safeWidgetUrl = url.format(parsedWidgetUrl); safeWidgetUrl = url.format(parsedWidgetUrl);
} }
return safeWidgetUrl; return safeWidgetUrl;
}, }
render() { render() {
let appTileBody; let appTileBody;
@ -556,5 +533,26 @@ export default React.createClass({
{ appTileBody } { appTileBody }
</div> </div>
); );
}, }
}); }
AppTile.propTypes = {
id: React.PropTypes.string.isRequired,
url: React.PropTypes.string.isRequired,
name: React.PropTypes.string.isRequired,
room: React.PropTypes.object.isRequired,
type: React.PropTypes.string.isRequired,
// Specifying 'fullWidth' as true will render the app tile to fill the width of the app drawer continer.
// This should be set to true when there is only one widget in the app drawer, otherwise it should be false.
fullWidth: React.PropTypes.bool,
// UserId of the current user
userId: React.PropTypes.string.isRequired,
// UserId of the entity that added / modified the widget
creatorUserId: React.PropTypes.string,
waitForIframeLoad: React.PropTypes.bool,
};
AppTile.defaultProps = {
url: "",
waitForIframeLoad: true,
};