UNPKG

9.95 kBSource Map (JSON)View Raw
1{"version":3,"file":"TimePickerToolbar-81100fab.js","sources":["../../src/TimePicker/TimePickerToolbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport clsx from 'clsx';\nimport ClockType from '../constants/ClockType';\nimport ToolbarText from '../_shared/ToolbarText';\nimport ToolbarButton from '../_shared/ToolbarButton';\nimport PickerToolbar from '../_shared/PickerToolbar';\nimport { arrayIncludes } from '../_helpers/utils';\nimport { useUtils } from '../_shared/hooks/useUtils';\nimport { MaterialUiPickersDate } from '../typings/date';\nimport { ToolbarComponentProps } from '../Picker/Picker';\nimport { useTheme, makeStyles } from '@material-ui/core/styles';\nimport { convertToMeridiem, getMeridiem } from '../_helpers/time-utils';\n\nexport const useStyles = makeStyles(\n {\n toolbarLandscape: {\n flexWrap: 'wrap',\n },\n toolbarAmpmLeftPadding: {\n paddingLeft: 50,\n },\n separator: {\n margin: '0 4px 0 2px',\n cursor: 'default',\n },\n hourMinuteLabel: {\n display: 'flex',\n justifyContent: 'flex-end',\n alignItems: 'flex-end',\n },\n hourMinuteLabelAmpmLandscape: {\n marginTop: 'auto',\n },\n hourMinuteLabelReverse: {\n flexDirection: 'row-reverse',\n },\n ampmSelection: {\n marginLeft: 20,\n marginRight: -20,\n display: 'flex',\n flexDirection: 'column',\n },\n ampmLandscape: {\n margin: '4px 0 auto',\n flexDirection: 'row',\n justifyContent: 'space-around',\n flexBasis: '100%',\n },\n ampmSelectionWithSeconds: {\n marginLeft: 15,\n marginRight: 10,\n },\n ampmLabel: {\n fontSize: 18,\n },\n },\n { name: 'MuiPickersTimePickerToolbar' }\n);\n\nexport function useMeridiemMode(\n date: MaterialUiPickersDate,\n ampm: boolean | undefined,\n onChange: (date: MaterialUiPickersDate, isFinished?: boolean | undefined) => void\n) {\n const utils = useUtils();\n const meridiemMode = getMeridiem(date, utils);\n\n const handleMeridiemChange = React.useCallback(\n (mode: 'am' | 'pm') => {\n const timeWithMeridiem = convertToMeridiem(date, mode, Boolean(ampm), utils);\n onChange(timeWithMeridiem, false);\n },\n [ampm, date, onChange, utils]\n );\n\n return { meridiemMode, handleMeridiemChange };\n}\n\nexport const TimePickerToolbar: React.FC<ToolbarComponentProps> = ({\n date,\n views,\n ampm,\n openView,\n onChange,\n isLandscape,\n setOpenView,\n}) => {\n const utils = useUtils();\n const theme = useTheme();\n const classes = useStyles();\n const { meridiemMode, handleMeridiemChange } = useMeridiemMode(date, ampm, onChange);\n\n const clockTypographyVariant = isLandscape ? 'h3' : 'h2';\n\n return (\n <PickerToolbar\n isLandscape={isLandscape}\n className={clsx({\n [classes.toolbarLandscape]: isLandscape,\n [classes.toolbarAmpmLeftPadding]: ampm && !isLandscape,\n })}\n >\n <div\n className={clsx(classes.hourMinuteLabel, {\n [classes.hourMinuteLabelAmpmLandscape]: ampm && isLandscape,\n [classes.hourMinuteLabelReverse]: theme.direction === 'rtl',\n })}\n >\n {arrayIncludes(views, 'hours') && (\n <ToolbarButton\n variant={clockTypographyVariant}\n onClick={() => setOpenView(ClockType.HOURS)}\n selected={openView === ClockType.HOURS}\n label={utils.getHourText(date, Boolean(ampm))}\n />\n )}\n\n {arrayIncludes(views, ['hours', 'minutes']) && (\n <ToolbarText\n label=\":\"\n variant={clockTypographyVariant}\n selected={false}\n className={classes.separator}\n />\n )}\n\n {arrayIncludes(views, 'minutes') && (\n <ToolbarButton\n variant={clockTypographyVariant}\n onClick={() => setOpenView(ClockType.MINUTES)}\n selected={openView === ClockType.MINUTES}\n label={utils.getMinuteText(date)}\n />\n )}\n\n {arrayIncludes(views, ['minutes', 'seconds']) && (\n <ToolbarText variant=\"h2\" label=\":\" selected={false} className={classes.separator} />\n )}\n\n {arrayIncludes(views, 'seconds') && (\n <ToolbarButton\n variant=\"h2\"\n onClick={() => setOpenView(ClockType.SECONDS)}\n selected={openView === ClockType.SECONDS}\n label={utils.getSecondText(date)}\n />\n )}\n </div>\n\n {ampm && (\n <div\n className={clsx(classes.ampmSelection, {\n [classes.ampmLandscape]: isLandscape,\n [classes.ampmSelectionWithSeconds]: arrayIncludes(views, 'seconds'),\n })}\n >\n <ToolbarButton\n disableRipple\n variant=\"subtitle1\"\n selected={meridiemMode === 'am'}\n typographyClassName={classes.ampmLabel}\n label={utils.getMeridiemText('am')}\n onClick={() => handleMeridiemChange('am')}\n />\n\n <ToolbarButton\n disableRipple\n variant=\"subtitle1\"\n selected={meridiemMode === 'pm'}\n typographyClassName={classes.ampmLabel}\n label={utils.getMeridiemText('pm')}\n onClick={() => handleMeridiemChange('pm')}\n />\n </div>\n )}\n </PickerToolbar>\n );\n};\n\nexport default TimePickerToolbar;\n"],"names":["useStyles","makeStyles","toolbarLandscape","flexWrap","toolbarAmpmLeftPadding","paddingLeft","separator","margin","cursor","hourMinuteLabel","display","justifyContent","alignItems","hourMinuteLabelAmpmLandscape","marginTop","hourMinuteLabelReverse","flexDirection","ampmSelection","marginLeft","marginRight","ampmLandscape","flexBasis","ampmSelectionWithSeconds","ampmLabel","fontSize","name","useMeridiemMode","date","ampm","onChange","utils","useUtils","meridiemMode","getMeridiem","handleMeridiemChange","React","mode","timeWithMeridiem","convertToMeridiem","Boolean","TimePickerToolbar","views","openView","isLandscape","setOpenView","theme","useTheme","classes","clockTypographyVariant","React.createElement","clsx","direction","arrayIncludes","ClockType","HOURS","getHourText","MINUTES","getMinuteText","SECONDS","getSecondText","getMeridiemText"],"mappings":"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"}
\No newline at end of file