6f057fc8ce
* WIP - initial exploration into post mentioon autocomplete * replace the autosize textarea with mention autocomplete, adjusting height * add cypress tests for mentioning in a post * fix resizing of text areas * refactor text area resize hook * refactoring * update cypress tests * remove mergeRefs from utils, extract UserListItemContent * allow useTextAreaAutoResize elements to have height greater than minimum, apply styles to container * Trigger Travis CI * Travis plz * small refactors * add comments and constants as per PR feedback Co-authored-by: Nick Taylor <nick@dev.to>
33 lines
894 B
JavaScript
33 lines
894 B
JavaScript
import { h, Fragment } from 'preact';
|
|
import PropTypes from 'prop-types';
|
|
|
|
/**
|
|
* Component used to display user details in the MentionAutocomplete dropdown
|
|
*
|
|
* @param {object} props
|
|
* @param {object} props.user The user data to populate the list item content with
|
|
*/
|
|
export const UserListItemContent = ({ user }) => (
|
|
<Fragment>
|
|
<span className="crayons-avatar crayons-avatar--l mr-2 shrink-0">
|
|
<img
|
|
src={user.profile_image_90}
|
|
alt=""
|
|
className="crayons-avatar__image "
|
|
/>
|
|
</span>
|
|
|
|
<div>
|
|
<p className="crayons-autocomplete__name">{user.name}</p>
|
|
<p className="crayons-autocomplete__username">{`@${user.username}`}</p>
|
|
</div>
|
|
</Fragment>
|
|
);
|
|
|
|
UserListItemContent.propTypes = {
|
|
user: PropTypes.shape({
|
|
name: PropTypes.string,
|
|
username: PropTypes.string,
|
|
profile_image_90: PropTypes.string,
|
|
}).isRequired,
|
|
};
|