diff --git a/src/components/LineBoardEast.test.tsx b/src/components/LineBoardEast.test.tsx index 1552b1cb4..39e573f96 100644 --- a/src/components/LineBoardEast.test.tsx +++ b/src/components/LineBoardEast.test.tsx @@ -16,6 +16,14 @@ jest.mock('~/hooks', () => ({ useTransferLinesFromStation: jest.fn(() => []), })); +jest.mock('~/hooks/useAfterNextStation', () => ({ + useAfterNextStation: jest.fn(() => undefined), +})); + +jest.mock('~/hooks/useNextStation', () => ({ + useNextStation: jest.fn(() => undefined), +})); + jest.mock('~/hooks/useScale', () => ({ useScale: jest.fn(() => ({ widthScale: jest.fn((val) => val) })), })); diff --git a/src/components/LineBoardEast.tsx b/src/components/LineBoardEast.tsx index 4b55d9e30..1d7493838 100644 --- a/src/components/LineBoardEast.tsx +++ b/src/components/LineBoardEast.tsx @@ -8,6 +8,8 @@ import { useInterval, useTransferLinesFromStation, } from '~/hooks'; +import { useAfterNextStation } from '~/hooks/useAfterNextStation'; +import { useNextStation } from '~/hooks/useNextStation'; import { useScale } from '~/hooks/useScale'; import { isEnAtom } from '~/store/selectors/isEn'; import lineState from '../store/atoms/line'; @@ -17,6 +19,7 @@ import isTablet from '../utils/isTablet'; import { BarTerminalEast } from './BarTerminalEast'; import { BarTerminalOdakyu } from './BarTerminalOdakyu'; import { type ChevronColor, ChevronTY } from './ChevronTY'; +import { Heading } from './Heading'; import { EmptyStationNameCell, LineDot, @@ -45,6 +48,17 @@ const localStyles = StyleSheet.create({ alignItems: 'center', overflow: 'visible', }, + nextStopBanner: { + position: 'absolute', + bottom: 0, + left: '12.5%', + right: '12.5%', + }, + nextStopBannerText: { + color: '#212121', + fontWeight: 'bold', + textAlign: 'center', + }, }); const NumberingIconView: React.FC<{ station: Station }> = ({ station }) => { @@ -446,6 +460,8 @@ const LineBoardEast: React.FC = ({ ); const { selectedLine } = useAtomValue(lineState); const currentLine = useCurrentLine(); + const nextStation = useNextStation(); + const afterNextStation = useAfterNextStation(); const dim = useWindowDimensions(); @@ -454,6 +470,21 @@ const LineBoardEast: React.FC = ({ [currentLine, selectedLine] ); + const hasPassStation = useMemo( + () => stations.some((s) => getIsPass(s)), + [stations] + ); + + const showNextStopBanner = useMemo( + () => + isOdakyu && + isTablet && + hasPassStation && + !!nextStation?.name && + !!afterNextStation?.name, + [isOdakyu, hasPassStation, nextStation?.name, afterNextStation?.name] + ); + const intervalStep = useCallback( () => setChevronColor((prev) => @@ -523,6 +554,19 @@ const LineBoardEast: React.FC = ({ ]} > {stationsWithEmpty.map(stationNameCellForMap)} + {showNextStopBanner ? ( + + + {`${nextStation?.name}のつぎは${afterNextStation?.name}にとまります`} + + + ) : null} ); };