Remove create-react-class
This commit is contained in:
Michael Telatynski
parent
672d0fe97b
commit
72498df28f
108 changed files with 3059 additions and 3545 deletions
|
|
@ -17,7 +17,6 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import createReactClass from 'create-react-class';
|
||||
import PropTypes from 'prop-types';
|
||||
import {MatrixClientPeg} from '../../MatrixClientPeg';
|
||||
import * as sdk from '../../index';
|
||||
|
|
@ -70,10 +69,8 @@ const UserSummaryType = PropTypes.shape({
|
|||
}).isRequired,
|
||||
});
|
||||
|
||||
const CategoryRoomList = createReactClass({
|
||||
displayName: 'CategoryRoomList',
|
||||
|
||||
props: {
|
||||
class CategoryRoomList extends React.Component {
|
||||
static propTypes = {
|
||||
rooms: PropTypes.arrayOf(RoomSummaryType).isRequired,
|
||||
category: PropTypes.shape({
|
||||
profile: PropTypes.shape({
|
||||
|
|
@ -84,9 +81,9 @@ const CategoryRoomList = createReactClass({
|
|||
|
||||
// Whether the list should be editable
|
||||
editing: PropTypes.bool.isRequired,
|
||||
},
|
||||
};
|
||||
|
||||
onAddRoomsToSummaryClicked: function(ev) {
|
||||
onAddRoomsToSummaryClicked = (ev) => {
|
||||
ev.preventDefault();
|
||||
const AddressPickerDialog = sdk.getComponent("dialogs.AddressPickerDialog");
|
||||
Modal.createTrackedDialog('Add Rooms to Group Summary', '', AddressPickerDialog, {
|
||||
|
|
@ -122,9 +119,9 @@ const CategoryRoomList = createReactClass({
|
|||
});
|
||||
},
|
||||
}, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
|
||||
},
|
||||
};
|
||||
|
||||
render: function() {
|
||||
render() {
|
||||
const TintableSvg = sdk.getComponent("elements.TintableSvg");
|
||||
const addButton = this.props.editing ?
|
||||
(<AccessibleButton className="mx_GroupView_featuredThings_addButton"
|
||||
|
|
@ -155,19 +152,17 @@ const CategoryRoomList = createReactClass({
|
|||
{ roomNodes }
|
||||
{ addButton }
|
||||
</div>;
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const FeaturedRoom = createReactClass({
|
||||
displayName: 'FeaturedRoom',
|
||||
|
||||
props: {
|
||||
class FeaturedRoom extends React.Component {
|
||||
static propTypes = {
|
||||
summaryInfo: RoomSummaryType.isRequired,
|
||||
editing: PropTypes.bool.isRequired,
|
||||
groupId: PropTypes.string.isRequired,
|
||||
},
|
||||
};
|
||||
|
||||
onClick: function(e) {
|
||||
onClick = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
|
|
@ -176,9 +171,9 @@ const FeaturedRoom = createReactClass({
|
|||
room_alias: this.props.summaryInfo.profile.canonical_alias,
|
||||
room_id: this.props.summaryInfo.room_id,
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
onDeleteClicked: function(e) {
|
||||
onDeleteClicked = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
GroupStore.removeRoomFromGroupSummary(
|
||||
|
|
@ -201,9 +196,9 @@ const FeaturedRoom = createReactClass({
|
|||
description: _t("The room '%(roomName)s' could not be removed from the summary.", {roomName}),
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
render: function() {
|
||||
render() {
|
||||
const RoomAvatar = sdk.getComponent("avatars.RoomAvatar");
|
||||
|
||||
const roomName = this.props.summaryInfo.profile.name ||
|
||||
|
|
@ -243,13 +238,11 @@ const FeaturedRoom = createReactClass({
|
|||
<div className="mx_GroupView_featuredThing_name">{ roomNameNode }</div>
|
||||
{ deleteButton }
|
||||
</AccessibleButton>;
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const RoleUserList = createReactClass({
|
||||
displayName: 'RoleUserList',
|
||||
|
||||
props: {
|
||||
class RoleUserList extends React.Component {
|
||||
static propTypes = {
|
||||
users: PropTypes.arrayOf(UserSummaryType).isRequired,
|
||||
role: PropTypes.shape({
|
||||
profile: PropTypes.shape({
|
||||
|
|
@ -260,9 +253,9 @@ const RoleUserList = createReactClass({
|
|||
|
||||
// Whether the list should be editable
|
||||
editing: PropTypes.bool.isRequired,
|
||||
},
|
||||
};
|
||||
|
||||
onAddUsersClicked: function(ev) {
|
||||
onAddUsersClicked = (ev) => {
|
||||
ev.preventDefault();
|
||||
const AddressPickerDialog = sdk.getComponent("dialogs.AddressPickerDialog");
|
||||
Modal.createTrackedDialog('Add Users to Group Summary', '', AddressPickerDialog, {
|
||||
|
|
@ -298,9 +291,9 @@ const RoleUserList = createReactClass({
|
|||
});
|
||||
},
|
||||
}, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
|
||||
},
|
||||
};
|
||||
|
||||
render: function() {
|
||||
render() {
|
||||
const TintableSvg = sdk.getComponent("elements.TintableSvg");
|
||||
const addButton = this.props.editing ?
|
||||
(<AccessibleButton className="mx_GroupView_featuredThings_addButton" onClick={this.onAddUsersClicked}>
|
||||
|
|
@ -325,19 +318,17 @@ const RoleUserList = createReactClass({
|
|||
{ userNodes }
|
||||
{ addButton }
|
||||
</div>;
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const FeaturedUser = createReactClass({
|
||||
displayName: 'FeaturedUser',
|
||||
|
||||
props: {
|
||||
class FeaturedUser extends React.Component {
|
||||
static propTypes = {
|
||||
summaryInfo: UserSummaryType.isRequired,
|
||||
editing: PropTypes.bool.isRequired,
|
||||
groupId: PropTypes.string.isRequired,
|
||||
},
|
||||
};
|
||||
|
||||
onClick: function(e) {
|
||||
onClick = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
|
|
@ -345,9 +336,9 @@ const FeaturedUser = createReactClass({
|
|||
action: 'view_start_chat_or_reuse',
|
||||
user_id: this.props.summaryInfo.user_id,
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
onDeleteClicked: function(e) {
|
||||
onDeleteClicked = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
GroupStore.removeUserFromGroupSummary(
|
||||
|
|
@ -368,9 +359,9 @@ const FeaturedUser = createReactClass({
|
|||
description: _t("The user '%(displayName)s' could not be removed from the summary.", {displayName}),
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
render: function() {
|
||||
render() {
|
||||
const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
|
||||
const name = this.props.summaryInfo.displayname || this.props.summaryInfo.user_id;
|
||||
|
||||
|
|
@ -394,41 +385,37 @@ const FeaturedUser = createReactClass({
|
|||
<div className="mx_GroupView_featuredThing_name">{ userNameNode }</div>
|
||||
{ deleteButton }
|
||||
</AccessibleButton>;
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const GROUP_JOINPOLICY_OPEN = "open";
|
||||
const GROUP_JOINPOLICY_INVITE = "invite";
|
||||
|
||||
export default createReactClass({
|
||||
displayName: 'GroupView',
|
||||
|
||||
propTypes: {
|
||||
export default class GroupView extends React.Component {
|
||||
static propTypes = {
|
||||
groupId: PropTypes.string.isRequired,
|
||||
// Whether this is the first time the group admin is viewing the group
|
||||
groupIsNew: PropTypes.bool,
|
||||
},
|
||||
};
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
summary: null,
|
||||
isGroupPublicised: null,
|
||||
isUserPrivileged: null,
|
||||
groupRooms: null,
|
||||
groupRoomsLoading: null,
|
||||
error: null,
|
||||
editing: false,
|
||||
saving: false,
|
||||
uploadingAvatar: false,
|
||||
avatarChanged: false,
|
||||
membershipBusy: false,
|
||||
publicityBusy: false,
|
||||
inviterProfile: null,
|
||||
showRightPanel: RightPanelStore.getSharedInstance().isOpenForGroup,
|
||||
};
|
||||
},
|
||||
state = {
|
||||
summary: null,
|
||||
isGroupPublicised: null,
|
||||
isUserPrivileged: null,
|
||||
groupRooms: null,
|
||||
groupRoomsLoading: null,
|
||||
error: null,
|
||||
editing: false,
|
||||
saving: false,
|
||||
uploadingAvatar: false,
|
||||
avatarChanged: false,
|
||||
membershipBusy: false,
|
||||
publicityBusy: false,
|
||||
inviterProfile: null,
|
||||
showRightPanel: RightPanelStore.getSharedInstance().isOpenForGroup,
|
||||
};
|
||||
|
||||
componentDidMount: function() {
|
||||
componentDidMount() {
|
||||
this._unmounted = false;
|
||||
this._matrixClient = MatrixClientPeg.get();
|
||||
this._matrixClient.on("Group.myMembership", this._onGroupMyMembership);
|
||||
|
|
@ -437,9 +424,9 @@ export default createReactClass({
|
|||
|
||||
this._dispatcherRef = dis.register(this._onAction);
|
||||
this._rightPanelStoreToken = RightPanelStore.getSharedInstance().addListener(this._onRightPanelStoreUpdate);
|
||||
},
|
||||
}
|
||||
|
||||
componentWillUnmount: function() {
|
||||
componentWillUnmount() {
|
||||
this._unmounted = true;
|
||||
this._matrixClient.removeListener("Group.myMembership", this._onGroupMyMembership);
|
||||
dis.unregister(this._dispatcherRef);
|
||||
|
|
@ -448,10 +435,11 @@ export default createReactClass({
|
|||
if (this._rightPanelStoreToken) {
|
||||
this._rightPanelStoreToken.remove();
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
|
||||
UNSAFE_componentWillReceiveProps: function(newProps) {
|
||||
// eslint-disable-next-line camelcase
|
||||
UNSAFE_componentWillReceiveProps(newProps) {
|
||||
if (this.props.groupId !== newProps.groupId) {
|
||||
this.setState({
|
||||
summary: null,
|
||||
|
|
@ -460,24 +448,24 @@ export default createReactClass({
|
|||
this._initGroupStore(newProps.groupId);
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
_onRightPanelStoreUpdate: function() {
|
||||
_onRightPanelStoreUpdate = () => {
|
||||
this.setState({
|
||||
showRightPanel: RightPanelStore.getSharedInstance().isOpenForGroup,
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
_onGroupMyMembership: function(group) {
|
||||
_onGroupMyMembership = (group) => {
|
||||
if (this._unmounted || group.groupId !== this.props.groupId) return;
|
||||
if (group.myMembership === 'leave') {
|
||||
// Leave settings - the user might have clicked the "Leave" button
|
||||
this._closeSettings();
|
||||
}
|
||||
this.setState({membershipBusy: false});
|
||||
},
|
||||
};
|
||||
|
||||
_initGroupStore: function(groupId, firstInit) {
|
||||
_initGroupStore(groupId, firstInit) {
|
||||
const group = this._matrixClient.getGroup(groupId);
|
||||
if (group && group.inviter && group.inviter.userId) {
|
||||
this._fetchInviterProfile(group.inviter.userId);
|
||||
|
|
@ -506,9 +494,9 @@ export default createReactClass({
|
|||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
onGroupStoreUpdated(firstInit) {
|
||||
onGroupStoreUpdated = (firstInit) => {
|
||||
if (this._unmounted) return;
|
||||
const summary = GroupStore.getSummary(this.props.groupId);
|
||||
if (summary.profile) {
|
||||
|
|
@ -533,7 +521,7 @@ export default createReactClass({
|
|||
if (this.props.groupIsNew && firstInit) {
|
||||
this._onEditClick();
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
_fetchInviterProfile(userId) {
|
||||
this.setState({
|
||||
|
|
@ -555,9 +543,9 @@ export default createReactClass({
|
|||
inviterProfileBusy: false,
|
||||
});
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
_onEditClick: function() {
|
||||
_onEditClick = () => {
|
||||
this.setState({
|
||||
editing: true,
|
||||
profileForm: Object.assign({}, this.state.summary.profile),
|
||||
|
|
@ -568,20 +556,20 @@ export default createReactClass({
|
|||
GROUP_JOINPOLICY_INVITE,
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
_onShareClick: function() {
|
||||
_onShareClick = () => {
|
||||
const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
|
||||
Modal.createTrackedDialog('share community dialog', '', ShareDialog, {
|
||||
target: this._matrixClient.getGroup(this.props.groupId) || new Group(this.props.groupId),
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
_onCancelClick: function() {
|
||||
_onCancelClick = () => {
|
||||
this._closeSettings();
|
||||
},
|
||||
};
|
||||
|
||||
_onAction(payload) {
|
||||
_onAction = (payload) => {
|
||||
switch (payload.action) {
|
||||
// NOTE: close_settings is an app-wide dispatch; as it is dispatched from MatrixChat
|
||||
case 'close_settings':
|
||||
|
|
@ -593,34 +581,34 @@ export default createReactClass({
|
|||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
_closeSettings() {
|
||||
_closeSettings = () => {
|
||||
dis.dispatch({action: 'close_settings'});
|
||||
},
|
||||
};
|
||||
|
||||
_onNameChange: function(value) {
|
||||
_onNameChange = (value) => {
|
||||
const newProfileForm = Object.assign(this.state.profileForm, { name: value });
|
||||
this.setState({
|
||||
profileForm: newProfileForm,
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
_onShortDescChange: function(value) {
|
||||
_onShortDescChange = (value) => {
|
||||
const newProfileForm = Object.assign(this.state.profileForm, { short_description: value });
|
||||
this.setState({
|
||||
profileForm: newProfileForm,
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
_onLongDescChange: function(e) {
|
||||
_onLongDescChange = (e) => {
|
||||
const newProfileForm = Object.assign(this.state.profileForm, { long_description: e.target.value });
|
||||
this.setState({
|
||||
profileForm: newProfileForm,
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
_onAvatarSelected: function(ev) {
|
||||
_onAvatarSelected = ev => {
|
||||
const file = ev.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
|
|
@ -644,15 +632,15 @@ export default createReactClass({
|
|||
description: _t('Failed to upload image'),
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
_onJoinableChange: function(ev) {
|
||||
_onJoinableChange = ev => {
|
||||
this.setState({
|
||||
joinableForm: { policyType: ev.target.value },
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
_onSaveClick: function() {
|
||||
_onSaveClick = () => {
|
||||
this.setState({saving: true});
|
||||
const savePromise = this.state.isUserPrivileged ? this._saveGroup() : Promise.resolve();
|
||||
savePromise.then((result) => {
|
||||
|
|
@ -683,16 +671,16 @@ export default createReactClass({
|
|||
avatarChanged: false,
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
_saveGroup: async function() {
|
||||
async _saveGroup() {
|
||||
await this._matrixClient.setGroupProfile(this.props.groupId, this.state.profileForm);
|
||||
await this._matrixClient.setGroupJoinPolicy(this.props.groupId, {
|
||||
type: this.state.joinableForm.policyType,
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
_onAcceptInviteClick: async function() {
|
||||
_onAcceptInviteClick = async () => {
|
||||
this.setState({membershipBusy: true});
|
||||
|
||||
// Wait 500ms to prevent flashing. Do this before sending a request otherwise we risk the
|
||||
|
|
@ -709,9 +697,9 @@ export default createReactClass({
|
|||
description: _t("Unable to accept invite"),
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
_onRejectInviteClick: async function() {
|
||||
_onRejectInviteClick = async () => {
|
||||
this.setState({membershipBusy: true});
|
||||
|
||||
// Wait 500ms to prevent flashing. Do this before sending a request otherwise we risk the
|
||||
|
|
@ -728,9 +716,9 @@ export default createReactClass({
|
|||
description: _t("Unable to reject invite"),
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
_onJoinClick: async function() {
|
||||
_onJoinClick = async () => {
|
||||
if (this._matrixClient.isGuest()) {
|
||||
dis.dispatch({action: 'require_registration', screen_after: {screen: `group/${this.props.groupId}`}});
|
||||
return;
|
||||
|
|
@ -752,9 +740,9 @@ export default createReactClass({
|
|||
description: _t("Unable to join community"),
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
_leaveGroupWarnings: function() {
|
||||
_leaveGroupWarnings() {
|
||||
const warnings = [];
|
||||
|
||||
if (this.state.isUserPrivileged) {
|
||||
|
|
@ -768,10 +756,9 @@ export default createReactClass({
|
|||
}
|
||||
|
||||
return warnings;
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
_onLeaveClick: function() {
|
||||
_onLeaveClick = () => {
|
||||
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
|
||||
const warnings = this._leaveGroupWarnings();
|
||||
|
||||
|
|
@ -806,13 +793,13 @@ export default createReactClass({
|
|||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
_onAddRoomsClick: function() {
|
||||
_onAddRoomsClick = () => {
|
||||
showGroupAddRoomDialog(this.props.groupId);
|
||||
},
|
||||
};
|
||||
|
||||
_getGroupSection: function() {
|
||||
_getGroupSection() {
|
||||
const groupSettingsSectionClasses = classnames({
|
||||
"mx_GroupView_group": this.state.editing,
|
||||
"mx_GroupView_group_disabled": this.state.editing && !this.state.isUserPrivileged,
|
||||
|
|
@ -856,9 +843,9 @@ export default createReactClass({
|
|||
{ this._getLongDescriptionNode() }
|
||||
{ this._getRoomsNode() }
|
||||
</div>;
|
||||
},
|
||||
}
|
||||
|
||||
_getRoomsNode: function() {
|
||||
_getRoomsNode() {
|
||||
const RoomDetailList = sdk.getComponent('rooms.RoomDetailList');
|
||||
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
||||
const TintableSvg = sdk.getComponent('elements.TintableSvg');
|
||||
|
|
@ -902,9 +889,9 @@ export default createReactClass({
|
|||
className={roomDetailListClassName} />
|
||||
}
|
||||
</div>;
|
||||
},
|
||||
}
|
||||
|
||||
_getFeaturedRoomsNode: function() {
|
||||
_getFeaturedRoomsNode() {
|
||||
const summary = this.state.summary;
|
||||
|
||||
const defaultCategoryRooms = [];
|
||||
|
|
@ -943,9 +930,9 @@ export default createReactClass({
|
|||
{ defaultCategoryNode }
|
||||
{ categoryRoomNodes }
|
||||
</div>;
|
||||
},
|
||||
}
|
||||
|
||||
_getFeaturedUsersNode: function() {
|
||||
_getFeaturedUsersNode() {
|
||||
const summary = this.state.summary;
|
||||
|
||||
const noRoleUsers = [];
|
||||
|
|
@ -984,9 +971,9 @@ export default createReactClass({
|
|||
{ noRoleNode }
|
||||
{ roleUserNodes }
|
||||
</div>;
|
||||
},
|
||||
}
|
||||
|
||||
_getMembershipSection: function() {
|
||||
_getMembershipSection() {
|
||||
const Spinner = sdk.getComponent("elements.Spinner");
|
||||
const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
|
||||
|
||||
|
|
@ -1100,9 +1087,9 @@ export default createReactClass({
|
|||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
},
|
||||
}
|
||||
|
||||
_getJoinableNode: function() {
|
||||
_getJoinableNode() {
|
||||
const InlineSpinner = sdk.getComponent('elements.InlineSpinner');
|
||||
return this.state.editing ? <div>
|
||||
<h3>
|
||||
|
|
@ -1136,9 +1123,9 @@ export default createReactClass({
|
|||
</label>
|
||||
</div>
|
||||
</div> : null;
|
||||
},
|
||||
}
|
||||
|
||||
_getLongDescriptionNode: function() {
|
||||
_getLongDescriptionNode() {
|
||||
const summary = this.state.summary;
|
||||
let description = null;
|
||||
if (summary.profile && summary.profile.long_description) {
|
||||
|
|
@ -1175,9 +1162,9 @@ export default createReactClass({
|
|||
<div className="mx_GroupView_groupDesc">
|
||||
{ description }
|
||||
</div>;
|
||||
},
|
||||
}
|
||||
|
||||
render: function() {
|
||||
render() {
|
||||
const GroupAvatar = sdk.getComponent("avatars.GroupAvatar");
|
||||
const Spinner = sdk.getComponent("elements.Spinner");
|
||||
|
||||
|
|
@ -1366,5 +1353,5 @@ export default createReactClass({
|
|||
console.error("Invalid state for GroupView");
|
||||
return <div />;
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue