@mantine/dates
Version:
Calendars, date and time pickers based on Mantine components
1 lines • 6.48 kB
Source Map (JSON)
{"version":3,"file":"YearLevel.cjs","names":["useDatesContext","Box","CalendarHeader","MonthsList"],"sources":["../../../src/components/YearLevel/YearLevel.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport {\n Box,\n BoxProps,\n ElementProps,\n factory,\n Factory,\n StylesApiProps,\n useProps,\n} from '@mantine/core';\nimport { DateLabelFormat, DateStringValue } from '../../types';\nimport {\n CalendarHeader,\n CalendarHeaderSettings,\n CalendarHeaderStylesNames,\n} from '../CalendarHeader';\nimport { useDatesContext } from '../DatesProvider';\nimport { MonthsList, MonthsListSettings, MonthsListStylesNames } from '../MonthsList';\n\nexport type YearLevelStylesNames = MonthsListStylesNames | CalendarHeaderStylesNames;\n\nexport interface YearLevelBaseSettings extends MonthsListSettings {\n /** dayjs label format to display year label or a function that returns year label based on year value @default \"YYYY\" */\n yearLabelFormat?: DateLabelFormat;\n}\n\nexport interface YearLevelSettings extends YearLevelBaseSettings, CalendarHeaderSettings {}\n\nexport interface YearLevelProps\n extends\n BoxProps,\n YearLevelSettings,\n Omit<StylesApiProps<YearLevelFactory>, 'classNames' | 'styles'>,\n ElementProps<'div'> {\n classNames?: Partial<Record<string, string>>;\n styles?: Partial<Record<string, React.CSSProperties>>;\n __staticSelector?: string;\n\n /** Displayed year value in `YYYY-MM-DD` format */\n year: DateStringValue;\n\n /** `aria-label` for change level control */\n levelControlAriaLabel?: string;\n\n /** Determines whether the calendar should take the full width of its container @default false */\n fullWidth?: boolean;\n}\n\nexport type YearLevelFactory = Factory<{\n props: YearLevelProps;\n ref: HTMLDivElement;\n stylesNames: YearLevelStylesNames;\n}>;\n\nconst defaultProps = {\n yearLabelFormat: 'YYYY',\n} satisfies Partial<YearLevelProps>;\n\nexport const YearLevel = factory<YearLevelFactory>((_props) => {\n const props = useProps('YearLevel', defaultProps, _props);\n const {\n // MonthsList settings\n year,\n locale,\n minDate,\n maxDate,\n monthsListFormat,\n getMonthControlProps,\n __getControlRef,\n __onControlKeyDown,\n __onControlClick,\n __onControlMouseEnter,\n withCellSpacing,\n\n // CalendarHeader settings\n __preventFocus,\n nextIcon,\n previousIcon,\n nextLabel,\n previousLabel,\n onNext,\n onPrevious,\n onLevelClick,\n nextDisabled,\n previousDisabled,\n hasNextLevel,\n levelControlAriaLabel,\n withNext,\n withPrevious,\n headerControlsOrder,\n\n // Other props\n yearLabelFormat,\n __staticSelector,\n __stopPropagation,\n size,\n classNames,\n styles,\n unstyled,\n fullWidth,\n attributes,\n ...others\n } = props;\n\n const ctx = useDatesContext();\n\n const stylesApiProps = {\n __staticSelector: __staticSelector || 'YearLevel',\n classNames,\n styles,\n unstyled,\n size,\n attributes,\n };\n\n const _nextDisabled =\n typeof nextDisabled === 'boolean'\n ? nextDisabled\n : maxDate\n ? !dayjs(year).endOf('year').isBefore(maxDate)\n : false;\n\n const _previousDisabled =\n typeof previousDisabled === 'boolean'\n ? previousDisabled\n : minDate\n ? !dayjs(year).startOf('year').isAfter(minDate)\n : false;\n\n return (\n <Box data-year-level size={size} {...others}>\n <CalendarHeader\n label={\n typeof yearLabelFormat === 'function'\n ? yearLabelFormat(year)\n : dayjs(year)\n .locale(locale || ctx.locale)\n .format(yearLabelFormat)\n }\n __preventFocus={__preventFocus}\n __stopPropagation={__stopPropagation}\n nextIcon={nextIcon}\n previousIcon={previousIcon}\n nextLabel={nextLabel}\n previousLabel={previousLabel}\n onNext={onNext}\n onPrevious={onPrevious}\n onLevelClick={onLevelClick}\n nextDisabled={_nextDisabled}\n previousDisabled={_previousDisabled}\n hasNextLevel={hasNextLevel}\n levelControlAriaLabel={levelControlAriaLabel}\n withNext={withNext}\n withPrevious={withPrevious}\n headerControlsOrder={headerControlsOrder}\n fullWidth={fullWidth}\n {...stylesApiProps}\n />\n\n <MonthsList\n year={year}\n locale={locale}\n minDate={minDate}\n maxDate={maxDate}\n monthsListFormat={monthsListFormat}\n getMonthControlProps={getMonthControlProps}\n __getControlRef={__getControlRef}\n __onControlKeyDown={__onControlKeyDown}\n __onControlClick={__onControlClick}\n __onControlMouseEnter={__onControlMouseEnter}\n __preventFocus={__preventFocus}\n __stopPropagation={__stopPropagation}\n withCellSpacing={withCellSpacing}\n fullWidth={fullWidth}\n {...stylesApiProps}\n />\n </Box>\n );\n});\n\nYearLevel.classes = { ...CalendarHeader.classes, ...MonthsList.classes };\nYearLevel.displayName = '@mantine/dates/YearLevel';\n"],"mappings":";;;;;;;;;;AAsDA,MAAM,eAAe,EACnB,iBAAiB,OACnB;AAEA,MAAa,aAAA,GAAA,cAAA,QAAA,EAAuC,WAAW;CAE7D,MAAM,EAEJ,MACA,QACA,SACA,SACA,kBACA,sBACA,iBACA,oBACA,kBACA,uBACA,iBAGA,gBACA,UACA,cACA,WACA,eACA,QACA,YACA,cACA,cACA,kBACA,cACA,uBACA,UACA,cACA,qBAGA,iBACA,kBACA,mBACA,MACA,YACA,QACA,UACA,WACA,YACA,GAAG,YAAA,GAAA,cAAA,SAAA,CA1CkB,aAAa,cAAc,MA2C1C;CAER,MAAM,MAAMA,0BAAAA,gBAAgB;CAE5B,MAAM,iBAAiB;EACrB,kBAAkB,oBAAoB;EACtC;EACA;EACA;EACA;EACA;CACF;CAEA,MAAM,gBACJ,OAAO,iBAAiB,YACpB,eACA,UACE,EAAA,GAAA,MAAA,QAAA,CAAO,IAAI,CAAC,CAAC,MAAM,MAAM,CAAC,CAAC,SAAS,OAAO,IAC3C;CAER,MAAM,oBACJ,OAAO,qBAAqB,YACxB,mBACA,UACE,EAAA,GAAA,MAAA,QAAA,CAAO,IAAI,CAAC,CAAC,QAAQ,MAAM,CAAC,CAAC,QAAQ,OAAO,IAC5C;CAER,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,cAAAA,KAAD;EAAK,mBAAA;EAAsB;EAAM,GAAI;YAArC,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,uBAAAA,gBAAD;GACE,OACE,OAAO,oBAAoB,aACvB,gBAAgB,IAAI,KAAA,GAAA,MAAA,QAAA,CACd,IAAI,CAAC,CACR,OAAO,UAAU,IAAI,MAAM,CAAC,CAC5B,OAAO,eAAe;GAEf;GACG;GACT;GACI;GACH;GACI;GACP;GACI;GACE;GACd,cAAc;GACd,kBAAkB;GACJ;GACS;GACb;GACI;GACO;GACV;GACX,GAAI;EACL,CAAA,GAED,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;GACQ;GACE;GACC;GACA;GACS;GACI;GACL;GACG;GACF;GACK;GACP;GACG;GACF;GACN;GACX,GAAI;EACL,CAAA,CACE;;AAET,CAAC;AAED,UAAU,UAAU;CAAE,GAAGD,uBAAAA,eAAe;CAAS,GAAGC,mBAAAA,WAAW;AAAQ;AACvE,UAAU,cAAc"}