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

128 lines
3.9 KiB
JavaScript
Raw Normal View History

2020-03-27 15:29:52 +00:00
import { injectIntl, defineMessages } from 'react-intl'
import classNames from 'classnames/bind'
import { changeComposeVisibility } from '../../actions/compose'
import { closePopover } from '../../actions/popover'
import PopoverLayout from './popover_layout'
import Icon from '../icon'
import Text from '../text'
const cx = classNames.bind(_s)
const messages = defineMessages({
public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
2020-05-01 06:50:27 +01:00
public_long: { id: 'privacy.public.long', defaultMessage: 'Visible for anyone on or off Gab' },
2020-03-27 15:29:52 +00:00
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' },
2020-05-01 06:50:27 +01:00
private_long: { id: 'privacy.private.long', defaultMessage: 'Visible for your followers only' },
2020-03-27 15:29:52 +00:00
change_privacy: { id: 'privacy.change', defaultMessage: 'Adjust status privacy' },
visibility: { id: 'privacy.visibility', defaultMessage: 'Visibility' },
})
2020-04-11 23:29:19 +01:00
const mapStateToProps = (state) => ({
2020-03-27 15:29:52 +00:00
value: state.getIn(['compose', 'privacy']),
})
2020-04-11 23:29:19 +01:00
const mapDispatchToProps = (dispatch) => ({
2020-03-27 15:29:52 +00:00
onChange (value) {
dispatch(changeComposeVisibility(value))
dispatch(closePopover())
},
})
export default
@connect(mapStateToProps, mapDispatchToProps)
@injectIntl
class StatusVisibilityDropdown extends PureComponent {
static propTypes = {
value: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
isXS: PropTypes.bool,
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)
}
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}>
2020-03-27 15:29:52 +00:00
<div className={[_s.default].join(' ')}>
{
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({
default: 1,
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({
ml10: 1,
mt2: 1,
2020-05-14 21:45:39 +01:00
fillPrimary: !isActive,
2020-04-29 23:32:49 +01:00
fillWhite: 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} />
2020-03-27 15:29:52 +00:00
<div className={[_s.default, _s.px10, _s.pt2].join(' ')}>
<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
}