gab-social/app/javascript/gabsocial/components/display_name.js

148 lines
3.9 KiB
JavaScript
Raw Normal View History

2020-02-21 00:57:29 +00:00
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
2020-02-28 15:20:47 +00:00
import { debounce } from 'lodash'
import classNames from 'classnames/bind'
import { openPopover, closePopover } from '../actions/popover'
2020-02-21 00:57:29 +00:00
import Icon from './icon'
2020-02-08 06:12:01 +00:00
2020-02-28 15:20:47 +00:00
const cx = classNames.bind(_s)
const mapDispatchToProps = dispatch => ({
2020-03-11 23:56:18 +00:00
openUserInfoPopover(props) {
dispatch(openPopover('USER_INFO', props))
2020-02-28 15:20:47 +00:00
},
closeUserInfoPopover() {
dispatch(closePopover())
}
})
export default
@connect(null, mapDispatchToProps)
class DisplayName extends ImmutablePureComponent {
2020-02-08 06:12:01 +00:00
static propTypes = {
account: ImmutablePropTypes.map.isRequired,
2020-02-28 15:20:47 +00:00
openUserInfoPopover: PropTypes.func.isRequired,
closeUserInfoPopover: PropTypes.func.isRequired,
2020-02-19 23:57:07 +00:00
multiline: PropTypes.bool,
2020-03-08 23:02:28 +00:00
small: PropTypes.bool,
2020-02-28 15:20:47 +00:00
large: PropTypes.bool,
noHover: PropTypes.bool,
2020-03-04 03:45:16 +00:00
noUsername: PropTypes.bool,
2020-02-28 15:20:47 +00:00
}
handleMouseEnter = debounce(() => {
2020-03-11 23:56:18 +00:00
console.log("SHOW - USER POPOVER")
this.props.openUserInfoPopover({
targetRef: this.node,
position: 'top',
account: this.props.account,
})
}, 1000, { leading: true })
handleMouseLeave = debounce(() => {
console.log("HIDE - USER POPOVER")
this.props.closeUserInfoPopover()
}, 1000, { leading: true })
2020-02-28 15:20:47 +00:00
2020-03-11 23:56:18 +00:00
setRef = (n) => {
this.node = n;
2020-02-21 00:57:29 +00:00
}
2020-02-08 06:12:01 +00:00
2020-02-28 15:20:47 +00:00
render() {
2020-03-04 03:45:16 +00:00
const {
account,
multiline,
large,
noHover,
2020-03-08 23:02:28 +00:00
noUsername,
small
2020-03-04 03:45:16 +00:00
} = this.props
2020-02-28 15:20:47 +00:00
if (!account) return null
const containerOptions = {
className: cx({
default: 1,
maxWidth100PC: 1,
alignItemsCenter: !multiline,
flexRow: !multiline,
cursorPointer: !noHover,
}),
onMouseEnter: noHover ? undefined : this.handleMouseEnter,
onMouseLeave: noHover ? undefined : this.handleMouseLeave,
}
const displayNameClasses = cx({
text: 1,
overflowWrapBreakWord: 1,
whiteSpaceNoWrap: 1,
fontWeightBold: 1,
colorPrimary: 1,
2020-03-11 23:56:18 +00:00
mr2: 1,
2020-03-08 23:02:28 +00:00
lineHeight125: !small,
fontSize14PX: small,
2020-02-28 15:20:47 +00:00
fontSize15PX: !large,
2020-03-08 23:02:28 +00:00
fontSize24PX: large && !small,
2020-02-28 15:20:47 +00:00
})
const usernameClasses = cx({
text: 1,
displayFlex: 1,
flexNormal: 1,
flexShrink1: 1,
overflowWrapBreakWord: 1,
textOverflowEllipsis: 1,
colorSecondary: 1,
fontWeightNormal: 1,
lineHeight15: multiline,
lineHeight125: !multiline,
2020-03-11 23:56:18 +00:00
ml5: !multiline,
2020-03-08 23:02:28 +00:00
fontSize14PX: small,
2020-02-28 15:20:47 +00:00
fontSize15PX: !large,
2020-03-08 23:02:28 +00:00
fontSize16PX: large && !small,
2020-02-28 15:20:47 +00:00
})
2020-03-08 23:02:28 +00:00
const iconSize =
!!large ? '19px' :
!!small ? '14px' : '16px'
2020-02-08 06:12:01 +00:00
2020-02-21 00:57:29 +00:00
// : todo :
2020-02-08 06:12:01 +00:00
return (
2020-03-11 23:56:18 +00:00
<span {...containerOptions} ref={this.setRef}>
2020-02-28 15:20:47 +00:00
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
<bdi className={[_s.text, _s.whiteSpaceNoWrap, _s.textOverflowEllipsis].join(' ')}>
<strong
className={displayNameClasses}
dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }}
/>
</bdi>
{
account.get('is_verified') &&
<Icon id='verified' width={iconSize} height={iconSize} className={_s.default} title='Verified Account' />
}
{ /*
account.get('is_pro') &&
<Icon id='verified' width='16px' height='16px' className={_s.default} title='Gab PRO' />
*/ }
{ /*
account.get('is_donor') &&
<Icon id='verified' width='16px' height='16px' className={_s.default} title='Gab Donor' />
*/ }
{ /*
account.get('is_investor') &&
<Icon id='verified' width='16px' height='16px' className={_s.default} title='Gab Investor' />
*/ }
</div>
2020-03-04 03:45:16 +00:00
{
!noUsername &&
<span className={usernameClasses}>
@{account.get('acct')}
</span>
}
2020-02-08 06:12:01 +00:00
</span>
2020-02-21 00:57:29 +00:00
)
2020-02-08 06:12:01 +00:00
}
}