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

146 lines
3.9 KiB
JavaScript
Raw Normal View History

2020-04-28 06:33:58 +01:00
import {
BREAKPOINT_EXTRA_SMALL,
POPOVER_COMMENT_SORTING_OPTIONS,
2020-04-28 06:33:58 +01:00
POPOVER_DATE_PICKER,
POPOVER_EMOJI_PICKER,
POPOVER_GROUP_MEMBER_OPTIONS,
2020-05-07 06:55:24 +01:00
POPOVER_GROUP_OPTIONS,
2020-05-15 04:17:31 +01:00
POPOVER_NAV_SETTINGS,
2020-04-28 06:33:58 +01:00
POPOVER_PROFILE_OPTIONS,
POPOVER_SEARCH,
POPOVER_SIDEBAR_MORE,
POPOVER_STATUS_OPTIONS,
POPOVER_STATUS_VISIBILITY,
POPOVER_USER_INFO,
POPOVER_VIDEO_STATS,
2020-04-28 06:33:58 +01:00
} from '../../constants'
import {
CommentSortingOptionsPopover,
2020-04-28 06:33:58 +01:00
DatePickerPopover,
EmojiPickerPopover,
GroupMemberOptionsPopover,
2020-05-07 06:55:24 +01:00
GroupOptionsPopover,
2020-05-15 04:17:31 +01:00
NavSettingsPopover,
2020-04-28 06:33:58 +01:00
ProfileOptionsPopover,
SearchPopover,
SidebarMorePopover,
StatusOptionsPopover,
StatusVisibilityPopover,
UserInfoPopover,
VideoStatsPopover,
2020-04-28 06:33:58 +01:00
} from '../../features/ui/util/async_components'
import { closePopover } from '../../actions/popover'
import { getWindowDimension } from '../../utils/is_mobile'
2020-02-28 15:20:47 +00:00
import Bundle from '../../features/ui/util/bundle'
import ModalBase from '../modal/modal_base'
2020-02-28 15:20:47 +00:00
import PopoverBase from './popover_base'
const initialState = getWindowDimension()
2020-04-28 06:33:58 +01:00
const POPOVER_COMPONENTS = {}
POPOVER_COMPONENTS[POPOVER_COMMENT_SORTING_OPTIONS] = CommentSortingOptionsPopover
2020-04-28 06:33:58 +01:00
POPOVER_COMPONENTS[POPOVER_DATE_PICKER] = DatePickerPopover
POPOVER_COMPONENTS[POPOVER_EMOJI_PICKER] = EmojiPickerPopover
POPOVER_COMPONENTS[POPOVER_GROUP_MEMBER_OPTIONS] = GroupMemberOptionsPopover
2020-05-07 06:55:24 +01:00
POPOVER_COMPONENTS[POPOVER_GROUP_OPTIONS] = GroupOptionsPopover
2020-05-15 04:17:31 +01:00
POPOVER_COMPONENTS[POPOVER_NAV_SETTINGS] = NavSettingsPopover
2020-04-28 06:33:58 +01:00
POPOVER_COMPONENTS[POPOVER_PROFILE_OPTIONS] = ProfileOptionsPopover
POPOVER_COMPONENTS[POPOVER_SEARCH] = SearchPopover
POPOVER_COMPONENTS[POPOVER_SIDEBAR_MORE] = SidebarMorePopover
POPOVER_COMPONENTS[POPOVER_STATUS_OPTIONS] = StatusOptionsPopover
POPOVER_COMPONENTS[POPOVER_STATUS_VISIBILITY] = StatusVisibilityPopover
POPOVER_COMPONENTS[POPOVER_USER_INFO] = UserInfoPopover
POPOVER_COMPONENTS[POPOVER_VIDEO_STATS] = VideoStatsPopover
2020-02-28 15:20:47 +00:00
2020-04-11 23:29:19 +01:00
const mapStateToProps = (state) => ({
2020-04-08 02:06:59 +01:00
type: state.getIn(['popover', 'popoverType']),
props: state.getIn(['popover', 'popoverProps'], {}),
2020-02-28 15:20:47 +00:00
})
const mapDispatchToProps = (dispatch) => ({
onClose: (type) => dispatch(closePopover(type)),
})
2020-02-28 15:20:47 +00:00
export default
@connect(mapStateToProps, mapDispatchToProps)
2020-02-28 15:20:47 +00:00
class PopoverRoot extends PureComponent {
2020-04-08 02:06:59 +01:00
2020-02-28 15:20:47 +00:00
static propTypes = {
type: PropTypes.string,
props: PropTypes.object,
onClose: PropTypes.func.isRequired,
}
state = {
width: initialState.width,
}
componentDidMount() {
this.handleResize()
window.addEventListener('resize', this.handleResize, false)
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize, false)
}
2020-05-14 07:03:22 +01:00
componentDidUpdate() {
const { type } = this.props
const { width } = this.state
if (width <= BREAKPOINT_EXTRA_SMALL && !!type) {
document.body.classList.add(_s.overflowYHidden)
} else {
document.body.classList.remove(_s.overflowYHidden)
}
}
handleResize = () => {
const { width } = getWindowDimension()
this.setState({ width })
2020-02-28 15:20:47 +00:00
}
2020-05-01 06:50:27 +01:00
renderEmpty = () => {
return <div />
2020-02-28 15:20:47 +00:00
}
render() {
const { type, props, onClose } = this.props
const { width } = this.state
2020-02-28 15:20:47 +00:00
const visible = !!type
const isXS = width <= BREAKPOINT_EXTRA_SMALL
const Wrapper = isXS ? ModalBase : PopoverBase
//If is XS and popover is user info, dont show
//Since on mobile this should not be visible
if (isXS && type === POPOVER_USER_INFO) return null
2020-02-28 15:20:47 +00:00
return (
<Wrapper
onClose={onClose}
2020-03-11 23:56:18 +00:00
visible={visible}
2020-03-14 17:31:29 +00:00
innerRef={this.setRef}
2020-03-11 23:56:18 +00:00
{...props}
>
{
visible &&
<Bundle
fetchComponent={POPOVER_COMPONENTS[type]}
2020-05-01 06:50:27 +01:00
loading={this.renderEmpty}
error={this.renderEmpty}
2020-03-11 23:56:18 +00:00
renderDelay={200}
>
{
(Component) => <Component isXS={isXS} {...props} />
2020-03-11 23:56:18 +00:00
}
</Bundle>
}
</Wrapper>
2020-02-28 15:20:47 +00:00
)
}
2020-04-08 02:06:59 +01:00
2020-02-28 15:20:47 +00:00
}