gab-social/app/javascript/gabsocial/components/popover/status_visibility_popover.js

133 lines
4.2 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
2020-03-27 15:29:52 +00:00
import { injectIntl, defineMessages } from 'react-intl'
import { changeComposeVisibility } from '../../actions/compose'
import { closePopover } from '../../actions/popover'
import { CX } from '../../constants'
2020-03-27 15:29:52 +00:00
import PopoverLayout from './popover_layout'
import Icon from '../icon'
import Text from '../text'
class StatusVisibilityDropdown extends React.PureComponent {
2020-03-27 15:29:52 +00:00
2020-05-01 06:50:27 +01:00
handleChange = (value) => {
2020-03-27 15:29:52 +00:00
this.props.onChange(value)
}
handleOnClosePopover = () => {
this.props.onClosePopover()
}
2020-05-01 06:50:27 +01:00
render () {
const { intl, value, isXS } = this.props
2020-03-27 15:29:52 +00:00
2020-05-01 06:50:27 +01:00
const options = [
2020-03-27 15:29:52 +00:00
{
icon: 'globe',
value: 'public',
title: intl.formatMessage(messages.public_short),
subtitle: intl.formatMessage(messages.public_long)
},
{
2020-04-07 02:53:23 +01:00
icon: 'unlock-filled',
2020-03-27 15:29:52 +00:00
value: 'unlisted',
title: intl.formatMessage(messages.unlisted_short),
subtitle: intl.formatMessage(messages.unlisted_long)
},
{
2020-04-07 02:53:23 +01:00
icon: 'lock-filled',
2020-03-27 15:29:52 +00:00
value: 'private',
title: intl.formatMessage(messages.private_short),
subtitle: intl.formatMessage(messages.private_long)
},
]
2020-02-24 21:56:07 +00:00
return (
<PopoverLayout
width={300}
isXS={isXS}
onClose={this.handleOnClosePopover}
>
<div className={[_s.d].join(' ')}>
2020-03-27 15:29:52 +00:00
{
2020-05-01 06:50:27 +01:00
options.map((option, i) => {
2020-03-27 15:29:52 +00:00
const isActive = option.value === value
2020-05-01 06:50:27 +01:00
const isLast = i === options.length - 1
2020-03-27 15:29:52 +00:00
const containerClasses = CX({
d: 1,
2020-03-27 15:29:52 +00:00
flexRow: 1,
py10: 1,
cursorPointer: 1,
borderBottom1PX: !isLast,
borderColorSecondary: !isLast,
2020-04-29 23:32:49 +01:00
bgSubtle_onHover: !isActive,
bgBrand: isActive,
2020-03-27 15:29:52 +00:00
})
const iconClasses = CX({
2020-03-27 15:29:52 +00:00
ml10: 1,
mt2: 1,
cPrimary: !isActive,
cWhite: isActive,
2020-03-27 15:29:52 +00:00
})
return (
<div
role='button'
onClick={() => this.handleChange(option.value)}
className={containerClasses}
>
2020-04-23 07:13:29 +01:00
<Icon id={option.icon} size='16px' className={iconClasses} />
<div className={[_s.d, _s.px10, _s.pt2].join(' ')}>
2020-03-27 15:29:52 +00:00
<Text size='medium' color={isActive ? 'white' : 'primary'}>
{option.title}
</Text>
<Text size='small' weight='medium' color={isActive ? 'white' : 'secondary'}>
{option.subtitle}
</Text>
</div>
</div>
)
})
}
</div>
</PopoverLayout>
2020-02-24 21:56:07 +00:00
)
}
2020-03-27 15:29:52 +00:00
}
const messages = defineMessages({
public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
public_long: { id: 'privacy.public.long', defaultMessage: 'Visible for anyone on or off Gab' },
unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
unlisted_long: { id: 'privacy.unlisted.long', defaultMessage: 'Do not show in public timelines' },
private_short: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
private_long: { id: 'privacy.private.long', defaultMessage: 'Visible for your followers only' },
change_privacy: { id: 'privacy.change', defaultMessage: 'Adjust status privacy' },
visibility: { id: 'privacy.visibility', defaultMessage: 'Visibility' },
})
const mapStateToProps = (state) => ({
value: state.getIn(['compose', 'privacy']),
})
const mapDispatchToProps = (dispatch) => ({
onChange (value) {
dispatch(changeComposeVisibility(value))
dispatch(closePopover())
},
onClosePopover: () => dispatch(closePopover()),
})
StatusVisibilityDropdown.propTypes = {
intl: PropTypes.object.isRequired,
isXS: PropTypes.bool,
onChange: PropTypes.func.isRequired,
onClosePopover: PropTypes.func.isRequired,
value: PropTypes.string.isRequired,
}
2020-03-27 15:29:52 +00:00
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(StatusVisibilityDropdown))