@mantine/dates/esm/components/TimeGrid/TimeGrid.mjs.map

Calendars, date and time pickers based on Mantine components

{"version":3,"file":"TimeGrid.mjs","names":["classes"],"sources":["../../../src/components/TimeGrid/TimeGrid.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  getRadius,\n  MantineRadius,\n  MantineSize,\n  SimpleGrid,\n  SimpleGridProps,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport { useUncontrolled } from '@mantine/hooks';\nimport type { TimePickerAmPmLabels, TimePickerFormat } from '../TimePicker';\nimport { isSameTime } from '../TimePicker/utils/is-same-time/is-same-time';\nimport { isTimeAfter, isTimeBefore } from './compare-time';\nimport { TimeGridProvider } from './TimeGrid.context';\nimport { TimeGridControl } from './TimeGridControl';\nimport classes from './TimeGrid.module.css';\n\nexport type TimeGridStylesNames = 'root' | 'control' | 'simpleGrid';\nexport type TimeGridCssVariables = {\n  root: '--time-grid-fz' | '--time-grid-radius';\n};\n\nexport interface TimeGridProps\n  extends\n    BoxProps,\n    StylesApiProps<TimeGridFactory>,\n    ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {\n  /** Time data in 24h format to be displayed in the grid, for example `['10:00', '18:30', '22:00']`. Time values must be unique. */\n  data: string[];\n\n  /** Controlled component value */\n  value?: string | null;\n\n  /** Uncontrolled component default value */\n  defaultValue?: string | null;\n\n  /** Called when value changes */\n  onChange?: (value: string | null) => void;\n\n  /** Determines whether the value can be deselected when the current active option is clicked or activated with keyboard @default false */\n  allowDeselect?: boolean;\n\n  /** Time format displayed in the grid @default '24h' */\n  format?: TimePickerFormat;\n\n  /** Determines whether the seconds part should be displayed @default false */\n  withSeconds?: boolean;\n\n  /** Labels used for am/pm values @default { am: 'AM', pm: 'PM' } */\n  amPmLabels?: TimePickerAmPmLabels;\n\n  /** Props passed down to the underlying `SimpleGrid` component @default { cols: 3, spacing: 'xs' } */\n  simpleGridProps?: SimpleGridProps;\n\n  /** A function to pass props down to control based on the time value */\n  getControlProps?: (time: string) => React.ComponentProps<'button'> & DataAttributes;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Control `font-size` of controls, key of `theme.fontSizes` or any valid CSS value @default 'sm' */\n  size?: MantineSize;\n\n  /** All controls before this time are disabled */\n  minTime?: string;\n\n  /** All controls after this time are disabled */\n  maxTime?: string;\n\n  /** Array of time values to disable */\n  disableTime?: string[] | ((time: string) => boolean);\n\n  /** If set, all controls are disabled */\n  disabled?: boolean;\n}\n\nexport type TimeGridFactory = Factory<{\n  props: TimeGridProps;\n  ref: HTMLDivElement;\n  stylesNames: TimeGridStylesNames;\n  vars: TimeGridCssVariables;\n}>;\n\nconst defaultProps = {\n  simpleGridProps: { cols: 3, spacing: 'xs' },\n  format: '24h',\n  amPmLabels: { am: 'AM', pm: 'PM' },\n} satisfies Partial<TimeGridProps>;\n\nconst varsResolver = createVarsResolver<TimeGridFactory>((_theme, { size, radius }) => ({\n  root: {\n    '--time-grid-fz': getFontSize(size),\n    '--time-grid-radius': getRadius(radius),\n  },\n}));\n\nexport const TimeGrid = factory<TimeGridFactory>((_props) => {\n  const props = useProps('TimeGrid', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    value,\n    defaultValue,\n    onChange,\n    format,\n    withSeconds = false,\n    amPmLabels,\n    allowDeselect,\n    simpleGridProps,\n    getControlProps,\n    minTime,\n    maxTime,\n    disableTime,\n    disabled,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<TimeGridFactory>({\n    name: 'TimeGrid',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: null,\n    onChange,\n  });\n\n  const controls = data.map((time) => {\n    const isDisabled =\n      disabled ||\n      (!!minTime && isTimeBefore(time, minTime)) ||\n      (!!maxTime && isTimeAfter(time, maxTime)) ||\n      (Array.isArray(disableTime)\n        ? !!disableTime.find((t) => isSameTime({ time, compare: t, withSeconds }))\n        : !!disableTime?.(time));\n\n    return (\n      <TimeGridControl\n        key={time}\n        active={isSameTime({ time, compare: _value || '', withSeconds })}\n        time={time}\n        onClick={() => {\n          const nextValue =\n            allowDeselect &&\n            (_value === null ? time === _value : isSameTime({ time, compare: _value, withSeconds }))\n              ? null\n              : time;\n          nextValue !== _value && setValue(nextValue);\n        }}\n        format={format}\n        amPmLabels={amPmLabels}\n        disabled={isDisabled}\n        data-disabled={isDisabled || undefined}\n        withSeconds={withSeconds}\n        {...getControlProps?.(time)}\n      />\n    );\n  });\n\n  return (\n    <TimeGridProvider value={{ getStyles }}>\n      <Box {...getStyles('root')} {...others}>\n        <SimpleGrid\n          {...simpleGridProps}\n          {...getStyles('simpleGrid', {\n            className: simpleGridProps?.className,\n            style: simpleGridProps?.style,\n          })}\n        >\n          {controls}\n        </SimpleGrid>\n      </Box>\n    </TimeGridProvider>\n  );\n});\n\nTimeGrid.displayName = '@mantine/dates/TimeGrid';\nTimeGrid.classes = classes;\nTimeGrid.varsResolver = varsResolver;\n\nexport namespace TimeGrid {\n  export type Props = TimeGridProps;\n  export type StylesNames = TimeGridStylesNames;\n  export type Factory = TimeGridFactory;\n  export type CssVariables = TimeGridCssVariables;\n}\n"],"mappings":";;;;;;;;;;AA4FA,MAAM,eAAe;CACnB,iBAAiB;EAAE,MAAM;EAAG,SAAS;CAAK;CAC1C,QAAQ;CACR,YAAY;EAAE,IAAI;EAAM,IAAI;CAAK;AACnC;AAEA,MAAM,eAAe,oBAAqC,QAAQ,EAAE,MAAM,cAAc,EACtF,MAAM;CACJ,kBAAkB,YAAY,IAAI;CAClC,sBAAsB,UAAU,MAAM;AACxC,EACF,EAAE;AAEF,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,OACA,cACA,UACA,QACA,cAAc,OACd,YACA,eACA,iBACA,iBACA,SACA,SACA,aACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA2B;EAC3C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY;EACZ;CACF,CAAC;CAED,MAAM,WAAW,KAAK,KAAK,SAAS;EAClC,MAAM,aACJ,YACC,CAAC,CAAC,WAAW,aAAa,MAAM,OAAO,KACvC,CAAC,CAAC,WAAW,YAAY,MAAM,OAAO,MACtC,MAAM,QAAQ,WAAW,IACtB,CAAC,CAAC,YAAY,MAAM,MAAM,WAAW;GAAE;GAAM,SAAS;GAAG;EAAY,CAAC,CAAC,IACvE,CAAC,CAAC,cAAc,IAAI;EAE1B,OACE,oBAAC,iBAAD;GAEE,QAAQ,WAAW;IAAE;IAAM,SAAS,UAAU;IAAI;GAAY,CAAC;GACzD;GACN,eAAe;IACb,MAAM,YACJ,kBACC,WAAW,OAAO,SAAS,SAAS,WAAW;KAAE;KAAM,SAAS;KAAQ;IAAY,CAAC,KAClF,OACA;IACN,cAAc,UAAU,SAAS,SAAS;GAC5C;GACQ;GACI;GACZ,UAAU;GACV,iBAAe,cAAc,KAAA;GAChB;GACb,GAAI,kBAAkB,IAAI;EAC3B,GAjBM,IAiBN;CAEL,CAAC;CAED,OACE,oBAAC,kBAAD;EAAkB,OAAO,EAAE,UAAU;YACnC,oBAAC,KAAD;GAAK,GAAI,UAAU,MAAM;GAAG,GAAI;aAC9B,oBAAC,YAAD;IACE,GAAI;IACJ,GAAI,UAAU,cAAc;KAC1B,WAAW,iBAAiB;KAC5B,OAAO,iBAAiB;IAC1B,CAAC;cAEA;GACS,CAAA;EACT,CAAA;CACW,CAAA;AAEtB,CAAC;AAED,SAAS,cAAc;AACvB,SAAS,UAAUA;AACnB,SAAS,eAAe"}