Skip to content

Commit

Permalink
refactoring due to facebook/react/pull/15047
Browse files Browse the repository at this point in the history
  • Loading branch information
panther711 committed Aug 15, 2019
1 parent 5040b76 commit c2aba45
Show file tree
Hide file tree
Showing 23 changed files with 192 additions and 161 deletions.
14 changes: 4 additions & 10 deletions src/views/edit-account-view.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ export default class EditAccountView extends React.Component {
this.handlePasswordUpdate = this.handlePasswordUpdate.bind(this);
this.handleImageChanged = this.handleImageChanged.bind(this);
this.handleCheckboxClick = this.handleCheckboxClick.bind(this);
this.handleStartAddCred = this.handleStartAddCred.bind(this);
this.handleCredChange = this.handleCredChange.bind(this);
this.handleCredKeyDown = this.handleCredKeyDown.bind(this);
this.handleCredEntered = this.handleCredEntered.bind(this);
Expand Down Expand Up @@ -92,10 +91,6 @@ export default class EditAccountView extends React.Component {
}
}

handleStartAddCred() {
this.setState({addCredActive: true});
}

handleCredChange(e) {
this.setState({newCred: e.target.value, addCredInvalid: false});
}
Expand Down Expand Up @@ -169,12 +164,11 @@ export default class EditAccountView extends React.Component {
this.state.credentials.map((cred) => {
credentials.push(<div key={cred.meth + ":" + cred.val + ":" + cred.done}>{cred.meth}: <tt>{cred.val}</tt>
<span > {!cred.done ?
<a href="javascript:;"
onClick={this.props.onCredConfirm.bind(this, cred.meth, cred.val)}>
<a href="#" onClick={(e) => {e.preventDefault(); this.props.onCredConfirm(cred.meth, cred.val);}}>
<FormattedMessage id="validate_credential_action" defaultMessage="confirm"
description="Validate credentail call to action" />
</a>
: null} <a href="javascript:;" onClick={this.props.onCredDelete.bind(this, cred.meth, cred.val)}><i
: null} <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCredDelete(cred.meth, cred.val);}}><i
className="material-icons gray">delete_outline</i></a></span></div>);
});

Expand Down Expand Up @@ -270,7 +264,7 @@ export default class EditAccountView extends React.Component {
placeholder="Phone number or email" required="required" autoFocus
onChange={this.handleCredChange} onKeyDown={this.handleCredKeyDown} onBlur={this.handleCredEntered} />
: null}
<div><a href="javascript:;" onClick={this.handleStartAddCred}>+ Add another</a></div>
<div><a href="#" onClick={(e) => {e.preventDefault(); this.setState({addCredActive: true});}}>+ Add another</a></div>
</div>
</div>
<div className="hr" />
Expand All @@ -295,7 +289,7 @@ export default class EditAccountView extends React.Component {
</div>
<div className="hr" />
<div className="panel-form-column">
<a href="javascript:;" className="red flat-button" onClick={this.props.onLogout}>
<a href="#" className="red flat-button" onClick={(e) => {e.preventDefault(); this.props.onLogout();}}>
<i className="material-icons">exit_to_app</i> <FormattedMessage id="button_logout"
defaultMessage="Logout" description="Button [Logout]" />
</a>
Expand Down
10 changes: 6 additions & 4 deletions src/views/info-view.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -339,7 +339,8 @@ class InfoView extends React.Component {
this.setState({showPermissionEditorFor: undefined});
}

handleShowAddMembers() {
handleShowAddMembers(e) {
e.preventDefault();
this.props.onInitFind();
this.setState({showMemberPanel: true});
}
Expand All @@ -354,6 +355,7 @@ class InfoView extends React.Component {
}

handleLeave() {
e.preventDefault();
this.props.onLeaveTopic(this.props.topic);
}

Expand Down Expand Up @@ -594,13 +596,13 @@ class InfoView extends React.Component {
</div>
<div className="panel-form-row">
{this.state.sharer ?
<a href="javascript:;" className="flat-button" onClick={this.handleShowAddMembers}>
<a href="#" className="flat-button" onClick={this.handleShowAddMembers}>
<i className="material-icons">person_add</i> <FormattedMessage id="button_add_members"
defaultMessage="Add members" description="Flat button [Add members] (to topic)" />
</a>
: null}
{!this.state.owner ?
<a href="javascript:;" className="red flat-button" onClick={this.handleLeave}>
<a href="#" className="red flat-button" onClick={this.handleLeave}>
<i className="material-icons">exit_to_app</i> <FormattedMessage id="button_leave"
defaultMessage="Leave" description="Flat button [Leave] (topic)" />
</a>
Expand All @@ -624,7 +626,7 @@ class InfoView extends React.Component {
</div>
:
<div className="panel-form-row">
<a href="javascript:;" className="red flat-button" onClick={this.handleLeave}>
<a href="#" className="red flat-button" onClick={this.handleLeave}>
<i className="material-icons">exit_to_app</i> <FormattedMessage id="action_leave_chat"
defaultMessage="Leave" description="Action [Leave] chat" />
</a>
Expand Down
14 changes: 5 additions & 9 deletions src/views/messages-view.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,6 @@ class MessagesView extends React.Component {
this.handleFormResponse = this.handleFormResponse.bind(this);
this.handleContextClick = this.handleContextClick.bind(this);
this.handleShowContextMenuMessage = this.handleShowContextMenuMessage.bind(this);
this.handleBackNavigation = this.handleBackNavigation.bind(this);
this.handleNewChatAcceptance = this.handleNewChatAcceptance.bind(this);
this.handleEnablePeer = this.handleEnablePeer.bind(this);
}
Expand Down Expand Up @@ -486,15 +485,12 @@ class MessagesView extends React.Component {
this.props.showContextMenu(params, menuItems);
}

handleBackNavigation() {
this.props.onHideMessagesView();
}

handleNewChatAcceptance(action) {
this.props.onNewChat(this.state.topic, action);
}

handleEnablePeer() {
handleEnablePeer(e) {
e.preventDefault();
this.props.onChangePermissions(this.state.topic, DEFAULT_ACCESS_MODE, this.state.topic);
}

Expand Down Expand Up @@ -579,7 +575,7 @@ class MessagesView extends React.Component {
<div id="topic-view" className={this.props.hideSelf ? 'nodisplay' : null}>
<div id="topic-caption-panel" className="caption-panel">
{this.props.displayMobile ?
<a href="javascript:;" id="hide-message-view" onClick={this.handleBackNavigation}>
<a href="#" id="hide-message-view" onClick={(e) => {e.preventDefault(); this.props.onHideMessagesView();}}>
<i className="material-icons">arrow_back</i>
</a>
:
Expand All @@ -605,7 +601,7 @@ class MessagesView extends React.Component {
<div id="topic-users" />
}
<div>
<a href="javascript:;" onClick={this.handleContextClick}>
<a href="#" onClick={this.handleContextClick}>
<i className="material-icons">more_vert</i>
</a>
</div>
Expand Down Expand Up @@ -638,7 +634,7 @@ class MessagesView extends React.Component {
<div id="peer-messaging-disabled-note">
<i className="material-icons secondary">block</i> <FormattedMessage
id="peers_messaging_disabled" defaultMessage="Peer's messaging is disabled."
description="Shown when the p2p peer's messaging is disabled" /> <a href="javascript:;"
description="Shown when the p2p peer's messaging is disabled" /> <a href="#"
onClick={this.handleEnablePeer}><FormattedMessage id="enable_peers_messaging"
defaultMessage="Enable" description="Call to action to enable peer's messaging" /></a>.
</div> : null}
Expand Down
6 changes: 3 additions & 3 deletions src/views/new-topic-view.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,19 +56,19 @@ export default class NewTopicView extends React.Component {
<div className="flex-column">
<ul className="tabbar">
<li className={this.state.tabSelected === "p2p" ? "active" : null}>
<a href="javascript:;" data-id="p2p" onClick={this.handleTabClick}>
<a href="#" data-id="p2p" onClick={this.handleTabClick}>
<FormattedMessage id="tabtitle_find_user" defaultMessage="find"
description="Tab title Find" />
</a>
</li>
<li className={this.state.tabSelected === "grp" ? "active" : null}>
<a href="javascript:;" data-id="grp" onClick={this.handleTabClick}>
<a href="#" data-id="grp" onClick={this.handleTabClick}>
<FormattedMessage id="tabtitle_new_group" defaultMessage="new group"
description="Tab title New Group" />
</a>
</li>
<li className={this.state.tabSelected === "byid" ? "active" : null}>
<a href="javascript:;" data-id="byid" onClick={this.handleTabClick}>
<a href="#" data-id="byid" onClick={this.handleTabClick}>
<FormattedMessage id="tabtitle_group_by_id" defaultMessage="by id"
description="Tab title Find topic by ID" />
</a>
Expand Down
3 changes: 2 additions & 1 deletion src/widgets/attachment.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,9 @@ export default class Attachment extends React.Component {
if (!this.props.uploader && !this.state.downloader &&
!(/^(?:(?:[a-z]+:)?\/\/)/i.test(this.props.downloadUrl))) {
// Relative URL. Use download helper.
url = "javascript:;";
url = '#';
helperFunc = (e) => {
e.preventDefault();
this.downloadFile(this.props.downloadUrl, this.props.filename, this.props.mimetype);
};
} else {
Expand Down
7 changes: 1 addition & 6 deletions src/widgets/avatar-upload.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ export default class AvatarUpload extends React.Component {
};

this.handleFileUpload = this.handleFileUpload.bind(this);
this.handleClear = this.handleClear.bind(this);
}

componentDidUpdate(prevProps) {
Expand All @@ -39,10 +38,6 @@ export default class AvatarUpload extends React.Component {
e.target.value = '';
}

handleClear() {
this.props.onImageChanged(null);
}

render() {
// Randomize id value in case more than one AvatarUpload is shown
// at the same time.
Expand All @@ -51,7 +46,7 @@ export default class AvatarUpload extends React.Component {
<div className="avatar-upload">
{this.props.readOnly || !this.state.dataUrl ?
null :
<a href="javascript:;" className="clear-avatar" onClick={this.handleClear}>
<a href="#" className="clear-avatar" onClick={(e) => {e.preventDefault(); this.props.onImageChanged(null);}}>
<i className="material-icons">clear</i>
</a>}
{this.state.dataUrl ?
Expand Down
2 changes: 1 addition & 1 deletion src/widgets/chat-message.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ export default class ChatMessage extends React.Component {
received={this.props.received} />
</div>
<span className="menuTrigger">
<a href="javascript:;" onClick={this.handleContextClick}>
<a href="#" onClick={this.handleContextClick}>
<i className="material-icons">expand_more</i>
</a>
</span>
Expand Down
16 changes: 0 additions & 16 deletions src/widgets/chip-input.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,23 +39,7 @@ export default class ChipInput extends React.Component {
this.setState({input: ''});
}
}
/*
static getDerivedStateFromProps(nextProps, prevState) {
const state = {
placeholder: nextProps.chips ? '' : nextProps.prompt,
sortedChips: ChipInput.sortChips(nextProps.chips, nextProps.required),
chipIndex: ChipInput.indexChips(nextProps.chips),
focused: prevState && prevState.focused
};
if (!prevState || nextProps.chips.length > prevState.sortedChips.length) {
// Chip added: clear input.
state.input = '';
}

return state;
}
*/
// Map chip index to user name
static indexChips(chips) {
const index = {};
Expand Down
5 changes: 3 additions & 2 deletions src/widgets/chip.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ export default class Chip extends React.PureComponent {
this.handleCancel = this.handleCancel.bind(this);
}

handleCancel() {
handleCancel(e) {
e.preventDefault();
this.props.onCancel(this.props.topic, this.props.index);
}

Expand All @@ -29,7 +30,7 @@ export default class Chip extends React.PureComponent {
}
<span>{title}</span>
{this.props.onCancel && !this.props.required ?
<a href="javascript:;" onClick={this.handleCancel} >&times;</a>
<a href="#" onClick={this.handleCancel} >&times;</a>
: <span className="spacer" />}
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion src/widgets/contact.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export default class Contact extends React.Component {
</div>
{this.props.showContextMenu ?
<span className="menuTrigger">
<a href="javascript:;" onClick={this.handleContextClick}>
<a href="#" onClick={this.handleContextClick}>
<i className="material-icons">expand_more</i>
</a>
</span> : null}
Expand Down
2 changes: 1 addition & 1 deletion src/widgets/error-panel.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default class ErrorPanel extends React.PureComponent {
<span>
<span dangerouslySetInnerHTML={{__html: this.props.text}} />
{this.props.action ?
<a href="javascript:;" onClick={this.props.action}>
<a href="#" onClick={(e) => {e.preventDefault(); this.props.action();}}>
{this.props.actionText}
</a>
: null}
Expand Down
2 changes: 1 addition & 1 deletion src/widgets/file-progress.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default class FileProgress extends React.PureComponent {
<div className="uploader">
<div><span style={{width: (this.props.progress * 100) + "%"}}></span></div>
{this.props.progress < 0.999 ?
<a href="javascript:;" onClick={this.props.onCancel}>
<a href="#" onClick={(e) => {e.preventDefault(); this.props.onCancel();}}>
<i className="material-icons">close</i> <FormattedMessage id="action_cancel"
defaultMessage="cancel" description="Call to action [cancel]" />
</a>
Expand Down
2 changes: 1 addition & 1 deletion src/widgets/image-preview.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default class ImagePreview extends React.PureComponent {
<i className="material-icons">file_download</i> <FormattedMessage
id="download_action" defaultMessage="download" description="Call to action [download]" />
</a>
<a href="javascript:;" onClick={this.props.onClose}><i className="material-icons gray">close</i></a>
<a href="#" onClick={(e) => {e.preventDefault(); this.props.onClose();}}><i className="material-icons gray">close</i></a>
</div>
<div id="image-preview-container" ref={function(ref) {instance.container = ref;}}>
<img src={this.props.content.url} style={size} />
Expand Down
6 changes: 1 addition & 5 deletions src/widgets/menu-cancel.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,9 @@
import React from 'react';

export default class MenuCancel extends React.PureComponent {
constructor(props) {
super(props);
}

render() {
return (
<a href="javascript:;" onClick={this.props.onCancel}><i className="material-icons">close</i></a>
<a href="#" onClick={(e) => {e.preventDefault(); this.props.onCancel();}}><i className="material-icons">close</i></a>
);
}
}
4 changes: 2 additions & 2 deletions src/widgets/menu-contacts.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ export default class MenuContacts extends React.PureComponent {
render() {
return (
<div>
<a href="javascript:;" onClick={this.props.onNewTopic}><i className="material-icons">chat</i></a>
<a href="#" onClick={(e) => {e.preventDefault(); this.props.onNewTopic();}}><i className="material-icons">chat</i></a>
&nbsp;
<a href="javascript:;" onClick={this.props.onSettings}><i className="material-icons">settings</i></a>
<a href="#" onClick={(e) => {e.preventDefault(); this.props.onSettings();}}><i className="material-icons">settings</i></a>
</div>
);
}
Expand Down
4 changes: 2 additions & 2 deletions src/widgets/menu-start.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ export default class MenuStart extends React.PureComponent {
render() {
return (
<div>
<a href="javascript:;" onClick={this.props.onSignUp}><i className="material-icons">person_add</i></a>
<a href="#" onClick={(e) => {e.preventDefault(); this.props.onSignUp();}}><i className="material-icons">person_add</i></a>
&nbsp;
<a href="javascript:;" onClick={this.props.onSettings}><i className="material-icons">settings</i></a>
<a href="#" onClick={(e) => {e.preventDefault(); this.props.onSettings();}}><i className="material-icons">settings</i></a>
</div>
);
}
Expand Down
5 changes: 3 additions & 2 deletions src/widgets/search-contacts.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ export default class SearchContacts extends React.PureComponent {
this.props.onSearchContacts(query.length > 0 ? query : Tinode.DEL_CHAR);
}

handleClear() {
handleClear(e) {
e.preventDefault();
if (this.state.edited) {
this.props.onSearchContacts(Tinode.DEL_CHAR);
}
Expand All @@ -63,7 +64,7 @@ export default class SearchContacts extends React.PureComponent {
value={this.state.search} onChange={this.handleSearchChange}
onKeyDown={this.handleKeyDown} required autoFocus />
}</FormattedMessage>
<a href="javascript:;" onClick={this.handleClear}>
<a href="#" onClick={this.handleClear}>
<i className="material-icons">close</i>
</a>
</div>
Expand Down
9 changes: 5 additions & 4 deletions src/widgets/send-message.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,8 @@ class SendMessage extends React.PureComponent {
e.target.value = '';
}

handleSend() {
handleSend(e) {
e.preventDefault();
const message = this.state.message.trim();
if (message) {
this.props.sendMessage(this.state.message.trim());
Expand Down Expand Up @@ -193,12 +194,12 @@ class SendMessage extends React.PureComponent {
<div id="send-message-panel">
{this.props.disabled ?
<i className="material-icons disabled">photo</i> :
<a href="javascript:;" onClick={(e) => {this.attachImage.click();}} title="Add image">
<a href="#" onClick={(e) => {e.preventDefault(); this.attachImage.click();}} title="Add image">
<i className="material-icons secondary">photo</i>
</a>}
{this.props.disabled ?
<i className="material-icons disabled">attach_file</i> :
<a href="javascript:;" onClick={(e) => {this.attachFile.click();}} title="Attach file">
<a href="#" onClick={(e) => {e.preventDefault(); this.attachFile.click();}} title="Attach file">
<i className="material-icons secondary">attach_file</i>
</a>}
<textarea id="sendMessage" placeholder={prompt}
Expand All @@ -208,7 +209,7 @@ class SendMessage extends React.PureComponent {
autoFocus />
{this.props.disabled ?
<i className="material-icons disabled">send</i> :
<a href="javascript:;" onClick={this.handleSend} title="Send">
<a href="#" onClick={this.handleSend} title="Send">
<i className="material-icons">send</i>
</a>}
<input type="file" ref={(ref) => {this.attachFile = ref;}}
Expand Down
Loading

0 comments on commit c2aba45

Please sign in to comment.