Transition BaseAvatar to hooks

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/21833/head
Michael Telatynski 2020-02-21 10:41:33 +00:00
parent 16bbea0b59
commit 80c2aa51b6
2 changed files with 144 additions and 168 deletions

View File

@ -7,7 +7,6 @@ src/components/structures/RoomView.js
src/components/structures/ScrollPanel.js src/components/structures/ScrollPanel.js
src/components/structures/SearchBox.js src/components/structures/SearchBox.js
src/components/structures/UploadBar.js src/components/structures/UploadBar.js
src/components/views/avatars/BaseAvatar.js
src/components/views/avatars/MemberAvatar.js src/components/views/avatars/MemberAvatar.js
src/components/views/create_room/RoomAlias.js src/components/views/create_room/RoomAlias.js
src/components/views/dialogs/DeactivateAccountDialog.js src/components/views/dialogs/DeactivateAccountDialog.js

View File

@ -2,7 +2,7 @@
Copyright 2015, 2016 OpenMarket Ltd Copyright 2015, 2016 OpenMarket Ltd
Copyright 2018 New Vector Ltd Copyright 2018 New Vector Ltd
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
Copyright 2019 The Matrix.org Foundation C.I.C. Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -17,206 +17,183 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from 'react'; import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';
import * as AvatarLogic from '../../../Avatar'; import * as AvatarLogic from '../../../Avatar';
import SettingsStore from "../../../settings/SettingsStore"; import SettingsStore from "../../../settings/SettingsStore";
import AccessibleButton from '../elements/AccessibleButton'; import AccessibleButton from '../elements/AccessibleButton';
import MatrixClientContext from "../../../contexts/MatrixClientContext"; import MatrixClientContext from "../../../contexts/MatrixClientContext";
import {useEventEmitter} from "../../../hooks/useEventEmitter";
export default createReactClass({ const useImageUrl = ({url, urls, idName, name, defaultToInitialLetter}) => {
displayName: 'BaseAvatar', const [imageUrls, setUrls] = useState([]);
const [urlsIndex, setIndex] = useState();
propTypes: { const onError = () => {
name: PropTypes.string.isRequired, // The name (first initial used as default) const nextIndex = urlsIndex + 1;
idName: PropTypes.string, // ID for generating hash colours if (nextIndex < imageUrls.length) {
title: PropTypes.string, // onHover title text // try the next one
url: PropTypes.string, // highest priority of them all, shortcut to set in urls[0] setIndex(nextIndex);
urls: PropTypes.array, // [highest_priority, ... , lowest_priority]
width: PropTypes.number,
height: PropTypes.number,
// XXX resizeMethod not actually used.
resizeMethod: PropTypes.string,
defaultToInitialLetter: PropTypes.bool, // true to add default url
inputRef: PropTypes.oneOfType([
// Either a function
PropTypes.func,
// Or the instance of a DOM native element
PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
]),
},
statics: {
contextType: MatrixClientContext,
},
getDefaultProps: function() {
return {
width: 40,
height: 40,
resizeMethod: 'crop',
defaultToInitialLetter: true,
};
},
getInitialState: function() {
return this._getState(this.props);
},
componentDidMount() {
this.unmounted = false;
this.context.on('sync', this.onClientSync);
},
componentWillUnmount() {
this.unmounted = true;
this.context.removeListener('sync', this.onClientSync);
},
componentWillReceiveProps: function(nextProps) {
// work out if we need to call setState (if the image URLs array has changed)
const newState = this._getState(nextProps);
const newImageUrls = newState.imageUrls;
const oldImageUrls = this.state.imageUrls;
if (newImageUrls.length !== oldImageUrls.length) {
this.setState(newState); // detected a new entry
} else {
// check each one to see if they are the same
for (let i = 0; i < newImageUrls.length; i++) {
if (oldImageUrls[i] !== newImageUrls[i]) {
this.setState(newState); // detected a diff
break;
}
}
} }
}, };
onClientSync: function(syncState, prevState) { const defaultImageUrl = useMemo(() => AvatarLogic.defaultAvatarUrlForString(idName || name), [idName, name]);
if (this.unmounted) return;
// Consider the client reconnected if there is no error with syncing. useEffect(() => {
// This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
const reconnected = syncState !== "ERROR" && prevState !== syncState;
if (reconnected &&
// Did we fall back?
this.state.urlsIndex > 0
) {
// Start from the highest priority URL again
this.setState({
urlsIndex: 0,
});
}
},
_getState: function(props) {
// work out the full set of urls to try to load. This is formed like so: // work out the full set of urls to try to load. This is formed like so:
// imageUrls: [ props.url, props.urls, default image ] // imageUrls: [ props.url, ...props.urls, default image ]
let urls = []; let _urls = [];
if (!SettingsStore.getValue("lowBandwidth")) { if (!SettingsStore.getValue("lowBandwidth")) {
urls = props.urls || []; _urls = urls || [];
if (props.url) { if (url) {
urls.unshift(props.url); // put in urls[0] _urls.unshift(url); // put in urls[0]
} }
} }
let defaultImageUrl = null; if (defaultToInitialLetter) {
if (props.defaultToInitialLetter) { _urls.push(defaultImageUrl); // lowest priority
defaultImageUrl = AvatarLogic.defaultAvatarUrlForString(
props.idName || props.name,
);
urls.push(defaultImageUrl); // lowest priority
} }
// deduplicate URLs // deduplicate URLs
urls = Array.from(new Set(urls)); _urls = Array.from(new Set(_urls));
return { setIndex(0);
imageUrls: urls, setUrls(_urls);
defaultImageUrl: defaultImageUrl, }, [url, ...(urls || [])]); // eslint-disable-line react-hooks/exhaustive-deps
urlsIndex: 0,
};
},
onError: function(ev) { const cli = useContext(MatrixClientContext);
const nextIndex = this.state.urlsIndex + 1; const onClientSync = useCallback((syncState, prevState) => {
if (nextIndex < this.state.imageUrls.length) { // Consider the client reconnected if there is no error with syncing.
// try the next one // This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
this.setState({ const reconnected = syncState !== "ERROR" && prevState !== syncState;
urlsIndex: nextIndex, if (reconnected && urlsIndex > 0 ) { // Did we fall back?
}); // Start from the highest priority URL again
setIndex(0);
} }
}, }, [urlsIndex]);
useEventEmitter(cli, "sync", onClientSync);
render: function() { const imageUrl = imageUrls[urlsIndex];
const imageUrl = this.state.imageUrls[this.state.urlsIndex]; return [imageUrl, imageUrl === defaultImageUrl, onError];
};
const { const BaseAvatar = (props) => {
name, idName, title, url, urls, width, height, resizeMethod, const {
defaultToInitialLetter, onClick, inputRef, name,
...otherProps idName,
} = this.props; title,
url,
urls,
width=40,
height=40,
resizeMethod="crop", // eslint-disable-line no-unused-vars
defaultToInitialLetter=true,
onClick,
inputRef,
...otherProps
} = props;
if (imageUrl === this.state.defaultImageUrl) { const [imageUrl, isDefault, onError] = useImageUrl({url, urls, idName, name, defaultToInitialLetter});
const initialLetter = AvatarLogic.getInitialLetter(name);
const textNode = ( if (isDefault) {
<span className="mx_BaseAvatar_initial" aria-hidden="true" const initialLetter = AvatarLogic.getInitialLetter(name);
style={{ fontSize: (width * 0.65) + "px", const textNode = (
<span
className="mx_BaseAvatar_initial"
aria-hidden="true"
style={{
fontSize: (width * 0.65) + "px",
width: width + "px", width: width + "px",
lineHeight: height + "px" }} lineHeight: height + "px",
> }}
{ initialLetter } >
</span> { initialLetter }
); </span>
const imgNode = ( );
<img className="mx_BaseAvatar_image" src={imageUrl} const imgNode = (
alt="" title={title} onError={this.onError} <img
width={width} height={height} aria-hidden="true" /> className="mx_BaseAvatar_image"
); src={imageUrl}
if (onClick != null) { alt=""
return ( title={title}
<AccessibleButton element='span' className="mx_BaseAvatar" onError={onError}
onClick={onClick} inputRef={inputRef} {...otherProps} width={width}
> height={height}
{ textNode } aria-hidden="true" />
{ imgNode } );
</AccessibleButton>
);
} else {
return (
<span className="mx_BaseAvatar" ref={inputRef} {...otherProps}>
{ textNode }
{ imgNode }
</span>
);
}
}
if (onClick != null) { if (onClick != null) {
return ( return (
<AccessibleButton <AccessibleButton
className="mx_BaseAvatar mx_BaseAvatar_image" {...otherProps}
element='img' element="span"
src={imageUrl} className="mx_BaseAvatar"
onClick={onClick} onClick={onClick}
onError={this.onError}
width={width} height={height}
title={title} alt=""
inputRef={inputRef} inputRef={inputRef}
{...otherProps} /> >
{ textNode }
{ imgNode }
</AccessibleButton>
); );
} else { } else {
return ( return (
<img <span className="mx_BaseAvatar" ref={inputRef} {...otherProps}>
className="mx_BaseAvatar mx_BaseAvatar_image" { textNode }
src={imageUrl} { imgNode }
onError={this.onError} </span>
width={width} height={height}
title={title} alt=""
ref={inputRef}
{...otherProps} />
); );
} }
}, }
});
if (onClick != null) {
return (
<AccessibleButton
className="mx_BaseAvatar mx_BaseAvatar_image"
element='img'
src={imageUrl}
onClick={onClick}
onError={onError}
width={width} height={height}
title={title} alt=""
inputRef={inputRef}
{...otherProps} />
);
} else {
return (
<img
className="mx_BaseAvatar mx_BaseAvatar_image"
src={imageUrl}
onError={onError}
width={width} height={height}
title={title} alt=""
ref={inputRef}
{...otherProps} />
);
}
};
BaseAvatar.displayName = "BaseAvatar";
BaseAvatar.propTypes = {
name: PropTypes.string.isRequired, // The name (first initial used as default)
idName: PropTypes.string, // ID for generating hash colours
title: PropTypes.string, // onHover title text
url: PropTypes.string, // highest priority of them all, shortcut to set in urls[0]
urls: PropTypes.array, // [highest_priority, ... , lowest_priority]
width: PropTypes.number,
height: PropTypes.number,
// XXX resizeMethod not actually used.
resizeMethod: PropTypes.string,
defaultToInitialLetter: PropTypes.bool, // true to add default url
onClick: PropTypes.func,
inputRef: PropTypes.oneOfType([
// Either a function
PropTypes.func,
// Or the instance of a DOM native element
PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
]),
};
export default BaseAvatar;