{"version":3,"file":"CurrentTimeIndicator.mjs","names":["classes"],"sources":["../../../src/components/CurrentTimeIndicator/CurrentTimeIndicator.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useState } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { useInterval } from '@mantine/hooks';\nimport { AnyDateValue, DateLabelFormat } from '../../types';\nimport { formatDate, getCurrentTimePosition, isInTimeRange } from '../../utils';\nimport classes from './CurrentTimeIndicator.module.css';\n\nexport type CurrentTimeIndicatorStylesNames =\n | 'currentTimeIndicator'\n | 'currentTimeIndicatorLine'\n | 'currentTimeIndicatorThumb'\n | 'currentTimeIndicatorTimeBubble';\n\nexport type CurrentTimeIndicatorCssVariables = {\n currentTimeIndicator: '--indicator-color';\n};\n\nexport interface CurrentTimeIndicatorProps\n extends BoxProps, StylesApiProps, ElementProps<'div'> {\n __staticSelector?: string;\n\n /** Key of `theme.colors` or any valid CSS color value @default 'red' */\n color?: MantineColor;\n\n /** Offset from the left side */\n startOffset?: string;\n\n /** Offset from the right side */\n endOffset?: string;\n\n /** Extra configurable offset from the top */\n topOffset?: string;\n\n /** Offset for the time bubble */\n timeBubbleStartOffset?: string;\n\n /** If set, displays a bubble with the current time @default @true */\n withTimeBubble?: boolean;\n\n /** If set, displays thumb next to the line @default true */\n withThumb?: boolean;\n\n /** Format of the time displayed in the time bubble @default 'HH:mm' */\n currentTimeFormat?: DateLabelFormat;\n\n /** Locale passed down to dayjs during formatting */\n locale?: string;\n\n /** Start time of the day */\n startTime?: string;\n\n /** End time of the day */\n endTime?: string;\n\n /** Number of minutes per time slot. Used to align the indicator to whole slots when `endTime` does not divide evenly. */\n intervalMinutes?: number;\n\n /** A function to get the current time, called on every tick. Can be used to display the indicator in a different timezone. @default () => dayjs() */\n getCurrentTime?: () => AnyDateValue;\n}\n\nexport type CurrentTimeIndicatorFactory = Factory<{\n props: CurrentTimeIndicatorProps;\n ref: HTMLDivElement;\n stylesNames: CurrentTimeIndicatorStylesNames;\n vars: CurrentTimeIndicatorCssVariables;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'CurrentTimeIndicator',\n withTimeBubble: true,\n withThumb: true,\n currentTimeFormat: 'HH:mm',\n topOffset: '0rem',\n} satisfies Partial;\n\nconst varsResolver = createVarsResolver((theme, { color }) => ({\n currentTimeIndicator: {\n '--indicator-color': color ? getThemeColor(color, theme) : undefined,\n },\n}));\n\nexport const CurrentTimeIndicator = factory((_props) => {\n const props = useProps('CurrentTimeIndicator', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n attributes,\n startOffset,\n endOffset,\n color,\n withTimeBubble,\n withThumb,\n currentTimeFormat,\n locale,\n timeBubbleStartOffset,\n __staticSelector,\n topOffset,\n startTime,\n endTime,\n intervalMinutes,\n getCurrentTime,\n ...others\n } = props;\n\n const getStyles = useStyles({\n name: __staticSelector,\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n varsResolver,\n attributes,\n rootSelector: 'currentTimeIndicator',\n });\n\n const ctx = useDatesContext();\n const [, setTick] = useState(0);\n useInterval(() => setTick((tick) => tick + 1), 1000 * 60, {\n autoInvoke: true,\n });\n\n const now = getCurrentTime ? dayjs(getCurrentTime()) : dayjs();\n const offsetPercent = getCurrentTimePosition({ startTime, endTime, intervalMinutes, now });\n const formattedTime = withTimeBubble\n ? formatDate({ locale: ctx.getLocale(locale), date: now, format: currentTimeFormat })\n : '';\n\n if (!isInTimeRange({ date: now, startTime, endTime })) {\n return null;\n }\n\n return (\n \n {withTimeBubble && (\n
{formattedTime}
\n )}\n\n {withThumb &&
}\n\n
\n \n );\n});\n\nCurrentTimeIndicator.displayName = '@mantine/schedule/CurrentTimeIndicator';\nCurrentTimeIndicator.classes = classes;\nCurrentTimeIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;AAkFA,MAAM,eAAe;CACnB,kBAAkB;CAClB,gBAAgB;CAChB,WAAW;CACX,mBAAmB;CACnB,WAAW;AACb;AAEA,MAAM,eAAe,oBAAiD,OAAO,EAAE,aAAa,EAC1F,sBAAsB,EACpB,qBAAqB,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA,EAC7D,EACF,EAAE;AAEF,MAAa,uBAAuB,SAAsC,WAAW;CACnF,MAAM,QAAQ,SAAS,wBAAwB,cAAc,MAAM;CACnE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,aACA,WACA,OACA,gBACA,WACA,mBACA,QACA,uBACA,kBACA,WACA,WACA,SACA,iBACA,gBACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAuC;EACvD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,MAAM,gBAAgB;CAC5B,MAAM,GAAG,WAAW,SAAS,CAAC;CAC9B,kBAAkB,SAAS,SAAS,OAAO,CAAC,GAAG,MAAO,IAAI,EACxD,YAAY,KACd,CAAC;CAED,MAAM,MAAM,iBAAiB,MAAM,eAAe,CAAC,IAAI,MAAM;CAC7D,MAAM,gBAAgB,uBAAuB;EAAE;EAAW;EAAS;EAAiB;CAAI,CAAC;CACzF,MAAM,gBAAgB,iBAClB,WAAW;EAAE,QAAQ,IAAI,UAAU,MAAM;EAAG,MAAM;EAAK,QAAQ;CAAkB,CAAC,IAClF;CAEJ,IAAI,CAAC,cAAc;EAAE,MAAM;EAAK;EAAW;CAAQ,CAAC,GAClD,OAAO;CAGT,OACE,qBAAC,KAAD;EACE,GAAI,UAAU,sBAAsB;EACpC,QAAQ;GACN,gBAAgB,QAAQ,cAAc,MAAM,UAAU;GACtD,kBAAkB;GAClB,gBAAgB;GAChB,8BAA8B;GAG9B,uBAAuB,eAAe,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC,SAAS,GAAG,IACvE,SACA;EACN;EACA,GAAI;YAbN;GAeG,kBACC,oBAAC,OAAD;IAAK,GAAI,UAAU,gCAAgC;cAAI;GAAmB,CAAA;GAG3E,aAAa,oBAAC,OAAD,EAAK,GAAI,UAAU,2BAA2B,EAAI,CAAA;GAEhE,oBAAC,OAAD,EAAK,GAAI,UAAU,0BAA0B,EAAI,CAAA;EAC9C;;AAET,CAAC;AAED,qBAAqB,cAAc;AACnC,qBAAqB,UAAUA;AAC/B,qBAAqB,eAAe"}