UNPKG

@mantine/core

Version:

React components library focused on usability, accessibility and developer experience

1 lines 10.1 kB
{"version":3,"file":"Image.cjs","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n getRadius,\n MantineRadius,\n polymorphicFactory,\n PolymorphicFactory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Image.module.css';\n\nexport type ImageStylesNames = 'root';\nexport type ImageCssVariables = {\n root: '--image-radius' | '--image-object-fit';\n};\n\nexport interface ImageProps extends BoxProps, StylesApiProps<ImageFactory> {\n /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `0` by default */\n radius?: MantineRadius;\n\n /** Controls `object-fit` style, `'cover'` by default */\n fit?: React.CSSProperties['objectFit'];\n\n /** Image url that will be used as a fallback in case `src` prop is not set or image cannot be loaded */\n fallbackSrc?: string;\n\n /** Image url */\n src?: any;\n\n /** Called when image fails to load */\n onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;\n}\n\nexport type ImageFactory = PolymorphicFactory<{\n props: ImageProps;\n defaultRef: HTMLImageElement;\n defaultComponent: 'img';\n stylesNames: ImageStylesNames;\n vars: ImageCssVariables;\n}>;\n\nconst defaultProps: Partial<ImageProps> = {};\n\nconst varsResolver = createVarsResolver<ImageFactory>((_, { radius, fit }) => ({\n root: {\n '--image-radius': radius === undefined ? undefined : getRadius(radius),\n '--image-object-fit': fit,\n },\n}));\n\nexport const Image = polymorphicFactory<ImageFactory>((_props, ref) => {\n const props = useProps('Image', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n onError,\n src,\n radius,\n fit,\n fallbackSrc,\n mod,\n ...others\n } = props;\n\n const [error, setError] = useState(!src);\n\n useEffect(() => setError(!src), [src]);\n\n const getStyles = useStyles<ImageFactory>({\n name: 'Image',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n varsResolver,\n });\n\n if (error && fallbackSrc) {\n return (\n <Box\n component=\"img\"\n ref={ref}\n src={fallbackSrc}\n {...getStyles('root')}\n onError={onError}\n mod={['fallback', mod]}\n {...others}\n />\n );\n }\n\n return (\n <Box\n component=\"img\"\n ref={ref}\n {...getStyles('root')}\n src={src}\n onError={(event) => {\n onError?.(event);\n setError(true);\n }}\n mod={mod}\n {...others}\n />\n );\n});\n\nImage.classes = classes;\nImage.displayName = '@mantine/core/Image';\n"],"names":["createVarsResolver","getRadius","polymorphicFactory","useProps","useState","useEffect","useStyles","classes","jsx","Box"],"mappings":"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"}