import React , { FC } from "react" ; import { useSelector } from "../../../store" ; type Props = { hour12 : boolean ; showMinutes : boolean ; showSeconds : boolean ; showDayPeriod ? : boolean ; time : Date ; } ; /**
 * A react wrapper around `Intl.DateTimeFromat().format()`
 *
 * Todo: Remove this component when react-intl adds the hourCycle option to their component
 *
 *
 * Intl Issue information: https://github.com/formatjs/react-intl/issues/1577
 * Code based on: https://github.com/mattermost/mattermost-webapp/pull/5138
 * Tabliss issue: https://github.com/joelshepherd/tabliss/issues/231
 */ const IntlTime = ( { hour12 , showMinutes , showSeconds , showDayPeriod = true , time , } ) => { const locale = useSelector ( ( state ) => state . data . locale ) ; const formater = Intl . DateTimeFormat ( locale , { hour12 , hour : "numeric" , hourCycle : hour12 ? "h12" : "h23" , minute : showMinutes ? "numeric" : undefined , second : showSeconds ? "numeric" : undefined , } ) ; let formatedTime ; if ( showDayPeriod ) { formatedTime = formater . format ( time ) ; } else { const dateParts = formater . formatToParts ( time ) ; formatedTime = dateParts . filter ( ( part ) => part . type !== "dayPeriod" ) . map ( ( part ) => part . value ) . join ( "" ) ; } return < > { formatedTime } < />; } ; export default IntlTime ;