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

Calendars, date and time pickers based on Mantine components

{"version":3,"file":"MiniCalendar.mjs","names":["classes"],"sources":["../../../src/components/MiniCalendar/MiniCalendar.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport {\n  AccordionChevron,\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  MantineSize,\n  StylesApiProps,\n  UnstyledButton,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { toDateString } from '../../utils';\nimport { useDatesContext } from '../DatesProvider';\nimport classes from './MiniCalendar.module.css';\n\nexport type MiniCalendarStylesNames =\n  | 'root'\n  | 'control'\n  | 'days'\n  | 'day'\n  | 'dayMonth'\n  | 'dayNumber';\n\nexport type MiniCalendarCssVariables = {\n  root: '--mini-calendar-font-size';\n};\n\nexport interface MiniCalendarProps\n  extends BoxProps, StylesApiProps<MiniCalendarFactory>, ElementProps<'div', 'onChange'> {\n  /** Controlled component date value, start date of the interval */\n  date?: Date | string;\n\n  /** Uncontrolled component default value, start date of the interval */\n  defaultDate?: Date | string;\n\n  /** Called with date in `YYYY-MM-DD` format when date internal changes */\n  onDateChange?: (date: string) => void;\n\n  /** Selected date, controlled value */\n  value?: Date | string | null;\n\n  /** Called with date in `YYYY-MM-DD` format when date changes */\n  onChange?: (date: string) => void;\n\n  /** Maximum date that can be selected, date object or date string in `YYYY-MM-DD` format */\n  maxDate?: Date | string;\n\n  /** Minimum date that can be selected, date object or date string in `YYYY-MM-DD` format */\n  minDate?: Date | string;\n\n  /** Number of days to display in the calendar @default 7 */\n  numberOfDays?: number;\n\n  /** Dayjs format string for month label @default MMM */\n  monthLabelFormat?: string;\n\n  /** Called when the next button is clicked */\n  onNext?: () => void;\n\n  /** Called when the previous button is clicked */\n  onPrevious?: () => void;\n\n  /** Props passed down to the day component */\n  getDayProps?: (date: string) => Record<string, any>;\n\n  /** Component size @default 'sm' */\n  size?: MantineSize;\n\n  /** Props passed to previous control button */\n  previousControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n  /** Props passed to next control button */\n  nextControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n  /** dayjs locale used for formatting */\n  locale?: string;\n}\n\nexport type MiniCalendarFactory = Factory<{\n  props: MiniCalendarProps;\n  ref: HTMLDivElement;\n  stylesNames: MiniCalendarStylesNames;\n  vars: MiniCalendarCssVariables;\n}>;\n\nconst defaultProps = {\n  size: 'sm',\n  numberOfDays: 7,\n  monthLabelFormat: 'MMM',\n} satisfies Partial<MiniCalendarProps>;\n\nconst varsResolver = createVarsResolver<MiniCalendarFactory>((_theme, { size }) => ({\n  root: {\n    '--mini-calendar-font-size': getSize(size, 'mantine-font-size'),\n  },\n}));\n\nexport const MiniCalendar = factory<MiniCalendarFactory>((_props) => {\n  const props = useProps('MiniCalendar', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    date,\n    defaultDate,\n    onDateChange,\n    value,\n    onChange,\n    onNext,\n    onPrevious,\n    getDayProps,\n    numberOfDays,\n    size,\n    minDate,\n    maxDate,\n    monthLabelFormat,\n    nextControlProps,\n    previousControlProps,\n    locale,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<MiniCalendarFactory>({\n    name: 'MiniCalendar',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    varsResolver,\n    attributes,\n  });\n\n  const ctx = useDatesContext();\n  const _locale = ctx.getLocale(locale);\n\n  const [_date, setDate] = useUncontrolled({\n    value: toDateString(date),\n    defaultValue: toDateString(defaultDate),\n    finalValue: toDateString(value) || dayjs().format('YYYY-MM-DD'),\n    onChange: onDateChange,\n  });\n\n  const handleNext = () => {\n    onNext?.();\n    const nextDate = dayjs(_date).add(numberOfDays, 'days');\n    setDate(toDateString(nextDate));\n  };\n\n  const handlePrevious = () => {\n    onPrevious?.();\n    const previousDate = dayjs(_date).subtract(numberOfDays, 'days');\n    setDate(toDateString(previousDate));\n  };\n\n  const previousDisabled = minDate\n    ? dayjs(_date).subtract(1, 'days').isBefore(dayjs(minDate))\n    : false;\n\n  const nextDisabled = maxDate\n    ? dayjs(_date).add(numberOfDays, 'days').isAfter(dayjs(maxDate))\n    : false;\n\n  const range = Array(numberOfDays)\n    .fill(0)\n    .map((_, index) => dayjs(_date).add(index, 'days'))\n    .map((date) => {\n      const disabled =\n        (minDate && date.isBefore(dayjs(minDate), 'day')) ||\n        (maxDate && date.isAfter(dayjs(maxDate), 'day')) ||\n        false;\n\n      const dayProps = getDayProps?.(toDateString(date));\n\n      return (\n        <UnstyledButton\n          key={date.toString()}\n          disabled={disabled}\n          aria-label={date.format('YYYY-MM-DD')}\n          data-disabled={disabled || undefined}\n          data-selected={value && dayjs(date).isSame(value, 'day') ? true : undefined}\n          {...dayProps}\n          onClick={(event) => {\n            dayProps?.onClick?.(event);\n            onChange?.(toDateString(date));\n          }}\n          {...getStyles('day', {\n            active: !disabled,\n            className: dayProps?.className,\n            style: dayProps?.style,\n          })}\n        >\n          <span {...getStyles('dayMonth')}>{date.locale(_locale).format(monthLabelFormat)}</span>\n          <span {...getStyles('dayNumber')}>{date.date()}</span>\n        </UnstyledButton>\n      );\n    });\n\n  return (\n    <Box size={size} {...getStyles('root')} {...others}>\n      <UnstyledButton\n        size={size}\n        onClick={handlePrevious}\n        disabled={previousDisabled}\n        data-disabled={previousDisabled || undefined}\n        data-direction=\"previous\"\n        {...previousControlProps}\n        {...getStyles('control', {\n          active: !previousDisabled,\n          className: previousControlProps?.className,\n          style: previousControlProps?.style,\n        })}\n      >\n        {previousControlProps?.children || <AccordionChevron data-chevron size={size} />}\n      </UnstyledButton>\n\n      <div {...getStyles('days')}>{range}</div>\n\n      <UnstyledButton\n        size={size}\n        onClick={handleNext}\n        disabled={nextDisabled}\n        data-disabled={nextDisabled || undefined}\n        data-direction=\"next\"\n        {...nextControlProps}\n        {...getStyles('control', {\n          active: !nextDisabled,\n          className: nextControlProps?.className,\n          style: nextControlProps?.style,\n        })}\n      >\n        {nextControlProps?.children || <AccordionChevron data-chevron size={size} />}\n      </UnstyledButton>\n    </Box>\n  );\n});\n\nMiniCalendar.displayName = '@mantine/dates/MiniCalendar';\nMiniCalendar.classes = classes;\nMiniCalendar.varsResolver = varsResolver;\n\nexport namespace MiniCalendar {\n  export type Props = MiniCalendarProps;\n  export type StylesNames = MiniCalendarStylesNames;\n  export type Factory = MiniCalendarFactory;\n  export type CssVariables = MiniCalendarCssVariables;\n}\n"],"mappings":"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"}