@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
120 lines (119 loc) • 4.53 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { factory, Title, useProps, useStyles } from '@mantine/core';
import { Children, forwardRef } from 'react';
import { InfoToken } from '../InfoToken/InfoToken.js';
import { Modal } from '../Modal/Modal.js';
import { PromptContextProvider } from './Prompt.context.js';
import classes from './Prompt.module.css';
import { PromptCancelButton } from './PromptCancelButton.js';
import { PromptConfirmButton } from './PromptConfirmButton.js';
const PromptVariantIconsMapping = {
success: InfoToken.Success,
warning: InfoToken.Warning,
critical: InfoToken.Error,
information: InfoToken.Information
};
const defaultProps = {
variant: 'information',
centered: true
};
const _Prompt = factory((_props, ref)=>{
const props = useProps('Prompt', defaultProps, _props);
const { variant, title, children, className, classNames, style, styles, unstyled, vars, attributes: _attributes, ...others } = props;
const getStyles = useStyles({
name: 'Prompt',
props,
classes,
className,
style,
classNames,
styles,
unstyled,
vars
});
const stylesApiProps = {
classNames,
styles
};
const footers = [];
const otherChildren = [];
Children.forEach(children, (child)=>{
(child.type === PromptFooter ? footers : otherChildren).push(child);
});
const IconComponent = PromptVariantIconsMapping[variant];
return /*#__PURE__*/ _jsx(PromptContextProvider, {
value: {
variant,
getStyles
},
children: /*#__PURE__*/ _jsxs(Modal.Root, {
ref: ref,
variant: "prompt",
size: "sm",
...others,
...getStyles('root'),
children: [
/*#__PURE__*/ _jsx(Modal.Overlay, {
...getStyles('overlay', stylesApiProps)
}),
/*#__PURE__*/ _jsxs(Modal.Content, {
...getStyles('content', stylesApiProps),
children: [
/*#__PURE__*/ _jsxs(Modal.Header, {
...getStyles('header', stylesApiProps),
children: [
/*#__PURE__*/ _jsx(IconComponent, {
...getStyles('icon', stylesApiProps),
variant: "light",
size: "sm",
"aria-label": variant
}),
/*#__PURE__*/ _jsx(Modal.Title, {
children: /*#__PURE__*/ _jsx(Title, {
order: 3,
component: "div",
children: title
})
}),
/*#__PURE__*/ _jsx(Modal.CloseButton, {
...getStyles('close', stylesApiProps)
})
]
}),
/*#__PURE__*/ _jsxs(Modal.Body, {
...getStyles('body', stylesApiProps),
children: [
otherChildren,
footers
]
})
]
})
]
})
});
});
_Prompt.displayName = 'Prompt';
const PromptFooter = (props)=>/*#__PURE__*/ _jsx(Modal.Footer, {
...props
});
PromptFooter.displayName = 'Prompt.Footer';
const createPromptCompound = (variant, displayName)=>{
const Component = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ _jsx(_Prompt, {
ref: ref,
...props,
variant: variant
}));
Component.displayName = displayName;
return Component;
};
export const Prompt = {
Information: createPromptCompound('information', 'Prompt.Information'),
Success: createPromptCompound('success', 'Prompt.Success'),
Warning: createPromptCompound('warning', 'Prompt.Warning'),
Critical: createPromptCompound('critical', 'Prompt.Critical'),
CancelButton: PromptCancelButton,
ConfirmButton: PromptConfirmButton,
Footer: PromptFooter
};
//# sourceMappingURL=Prompt.js.map