@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 4.34 kB
Source Map (JSON)
{"version":3,"file":"TimelineItem.cjs","names":["factory","useProps","useTimelineContext","useMantineTheme","Box","getRadius","getThemeColor","classes"],"sources":["../../../../src/components/Timeline/TimelineItem/TimelineItem.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n getRadius,\n getThemeColor,\n MantineColor,\n MantineRadius,\n useMantineTheme,\n useProps,\n} from '../../../core';\nimport { useTimelineContext } from '../Timeline.context';\nimport classes from '../Timeline.module.css';\n\nexport type TimelineItemStylesNames =\n | 'itemBody'\n | 'itemContent'\n | 'itemBullet'\n | 'item'\n | 'itemTitle';\n\nexport interface TimelineItemProps\n extends BoxProps, CompoundStylesApiProps<TimelineItemFactory>, ElementProps<'div', 'title'> {\n __active?: boolean;\n __lineActive?: boolean;\n __align?: 'right' | 'left';\n\n /** Item title, displayed next to the bullet */\n title?: React.ReactNode;\n\n /** Content displayed below the title */\n children?: React.ReactNode;\n\n /** React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed. */\n bullet?: React.ReactNode;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' */\n radius?: MantineRadius;\n\n /** Key of `theme.colors` or any valid CSS color to control active item colors @default theme.primaryColor */\n color?: MantineColor;\n\n /** Controls line border style @default 'solid' */\n lineVariant?: 'solid' | 'dashed' | 'dotted';\n}\n\nexport type TimelineItemFactory = Factory<{\n props: TimelineItemProps;\n ref: HTMLDivElement;\n stylesNames: TimelineItemStylesNames;\n compound: true;\n}>;\n\nexport const TimelineItem = factory<TimelineItemFactory>((_props) => {\n const props = useProps('TimelineItem', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n vars,\n __active,\n __align,\n __lineActive,\n __vars,\n bullet,\n radius,\n color,\n lineVariant,\n children,\n title,\n mod,\n ...others\n } = props;\n\n const ctx = useTimelineContext();\n const theme = useMantineTheme();\n\n const stylesApiProps = { classNames, styles };\n\n return (\n <Box\n {...ctx.getStyles('item', { ...stylesApiProps, className, style })}\n mod={[{ 'line-active': __lineActive, active: __active }, mod]}\n __vars={{\n '--tli-radius': radius !== undefined ? getRadius(radius) : undefined,\n '--tli-color': color ? getThemeColor(color, theme) : undefined,\n '--tli-border-style': lineVariant || undefined,\n }}\n {...others}\n >\n <Box\n {...ctx.getStyles('itemBullet', stylesApiProps)}\n mod={{ 'with-child': !!bullet, align: __align, active: __active }}\n >\n {bullet}\n </Box>\n\n <div {...ctx.getStyles('itemBody', stylesApiProps)}>\n {title && <div {...ctx.getStyles('itemTitle', stylesApiProps)}>{title}</div>}\n <div {...ctx.getStyles('itemContent', stylesApiProps)}>{children}</div>\n </div>\n </Box>\n );\n});\n\nTimelineItem.classes = classes;\nTimelineItem.displayName = '@mantine/core/TimelineItem';\n"],"mappings":";;;;;;;;;;;;AAwDA,MAAa,eAAeA,gBAAAA,SAA8B,WAAW;CAEnE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,UACA,SACA,cACA,QACA,QACA,QACA,OACA,aACA,UACA,OACA,KACA,GAAG,WAlBSC,kBAAAA,SAAS,gBAAgB,MAAM,OAAO;CAqBpD,MAAM,MAAMC,yBAAAA,oBAAoB;CAChC,MAAM,QAAQC,6BAAAA,iBAAiB;CAE/B,MAAM,iBAAiB;EAAE;EAAY;EAAQ;AAE7C,QACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GAAE,GAAG;GAAgB;GAAW;GAAO,CAAC;EAClE,KAAK,CAAC;GAAE,eAAe;GAAc,QAAQ;GAAU,EAAE,IAAI;EAC7D,QAAQ;GACN,gBAAgB,WAAW,KAAA,IAAYC,iBAAAA,UAAU,OAAO,GAAG,KAAA;GAC3D,eAAe,QAAQC,wBAAAA,cAAc,OAAO,MAAM,GAAG,KAAA;GACrD,sBAAsB,eAAe,KAAA;GACtC;EACD,GAAI;YARN,CAUE,iBAAA,GAAA,kBAAA,KAACF,YAAAA,KAAD;GACE,GAAI,IAAI,UAAU,cAAc,eAAe;GAC/C,KAAK;IAAE,cAAc,CAAC,CAAC;IAAQ,OAAO;IAAS,QAAQ;IAAU;aAEhE;GACG,CAAA,EAEN,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,GAAI,IAAI,UAAU,YAAY,eAAe;aAAlD,CACG,SAAS,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,GAAI,IAAI,UAAU,aAAa,eAAe;cAAG;IAAY,CAAA,EAC5E,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,GAAI,IAAI,UAAU,eAAe,eAAe;IAAG;IAAe,CAAA,CACnE;KACF;;EAER;AAEF,aAAa,UAAUG,wBAAAA;AACvB,aAAa,cAAc"}