ScheduledStreams: don't apply horiz scroll in Medium screen
This commit is contained in:
parent
82c4170e64
commit
19dc09b262
1 changed files with 5 additions and 5 deletions
|
@ -4,7 +4,7 @@ import React from 'react';
|
||||||
import * as CS from 'constants/claim_search';
|
import * as CS from 'constants/claim_search';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import * as ICONS from 'constants/icons';
|
import * as ICONS from 'constants/icons';
|
||||||
import { useIsMediumScreen, useIsLargeScreen } from 'effects/use-screensize';
|
import { useIsLargeScreen, useIsMobile } from 'effects/use-screensize';
|
||||||
import ClaimListDiscover from 'component/claimListDiscover';
|
import ClaimListDiscover from 'component/claimListDiscover';
|
||||||
import Button from 'component/button';
|
import Button from 'component/button';
|
||||||
import { LIVESTREAM_UPCOMING_BUFFER } from 'constants/livestream';
|
import { LIVESTREAM_UPCOMING_BUFFER } from 'constants/livestream';
|
||||||
|
@ -34,21 +34,21 @@ const ScheduledStreams = (props: Props) => {
|
||||||
onLoad,
|
onLoad,
|
||||||
showHideSetting = true,
|
showHideSetting = true,
|
||||||
} = props;
|
} = props;
|
||||||
const isMediumScreen = useIsMediumScreen();
|
const isMobileScreen = useIsMobile();
|
||||||
const isLargeScreen = useIsLargeScreen();
|
const isLargeScreen = useIsLargeScreen();
|
||||||
|
|
||||||
const [totalUpcomingLivestreams, setTotalUpcomingLivestreams] = React.useState(0);
|
const [totalUpcomingLivestreams, setTotalUpcomingLivestreams] = React.useState(0);
|
||||||
const [showAllUpcoming, setShowAllUpcoming] = React.useState(false);
|
const [showAllUpcoming, setShowAllUpcoming] = React.useState(false);
|
||||||
|
|
||||||
const showUpcomingLivestreams = totalUpcomingLivestreams > 0;
|
const showUpcomingLivestreams = totalUpcomingLivestreams > 0;
|
||||||
const useSwipeLayout = totalUpcomingLivestreams > 1 && isMediumScreen;
|
const useSwipeLayout = totalUpcomingLivestreams > 1 && isMobileScreen;
|
||||||
|
|
||||||
const upcomingMax = React.useMemo(() => {
|
const upcomingMax = React.useMemo(() => {
|
||||||
if (showAllUpcoming || useSwipeLayout) return 50;
|
if (showAllUpcoming || useSwipeLayout) return 50;
|
||||||
if (isLargeScreen) return 6;
|
if (isLargeScreen) return 6;
|
||||||
if (isMediumScreen) return 3;
|
if (isMobileScreen) return 3;
|
||||||
return 4;
|
return 4;
|
||||||
}, [showAllUpcoming, isMediumScreen, isLargeScreen, useSwipeLayout]);
|
}, [showAllUpcoming, isMobileScreen, isLargeScreen, useSwipeLayout]);
|
||||||
|
|
||||||
const loadedCallback = (total) => {
|
const loadedCallback = (total) => {
|
||||||
setTotalUpcomingLivestreams(total);
|
setTotalUpcomingLivestreams(total);
|
||||||
|
|
Loading…
Reference in a new issue