@team-monolith/cds 0.19.4 → 0.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3,7 +3,7 @@ import { PolymorphicProps } from "@mui/base";
|
|
|
3
3
|
export interface AlertDialogOwnProps<RootComponentType extends React.ElementType> {
|
|
4
4
|
className?: string;
|
|
5
5
|
component?: RootComponentType;
|
|
6
|
-
/** `true`
|
|
6
|
+
/** `true` 값일 때 모달이 노출됩니다. */
|
|
7
7
|
open: boolean;
|
|
8
8
|
/** 모달이 닫힐 때 호출되는 callback */
|
|
9
9
|
onClose?: () => void;
|
|
@@ -11,6 +11,8 @@ export interface AlertDialogOwnProps<RootComponentType extends React.ElementType
|
|
|
11
11
|
children: React.ReactNode;
|
|
12
12
|
/** 모달 좌측에 표기될 아이콘 */
|
|
13
13
|
icon?: React.ReactNode;
|
|
14
|
+
/** 전달시 아이콘 패딩이 비활성화 됩니다. */
|
|
15
|
+
disableIconPadding?: boolean;
|
|
14
16
|
}
|
|
15
17
|
export type AlertDialogProps<RootComponentType extends React.ElementType = AlertDialogTypeMap["defaultComponent"]> = PolymorphicProps<AlertDialogTypeMap<RootComponentType>, RootComponentType>;
|
|
16
18
|
export interface AlertDialogTypeMap<RootComponentType extends React.ElementType = "div"> {
|
|
@@ -35,15 +35,16 @@ import { MOBILE } from "../../foundation/breakpoints";
|
|
|
35
35
|
import AlertDialogContext from "./AlertDialogContext";
|
|
36
36
|
import { ZINDEX } from "../../utils/zIndex";
|
|
37
37
|
export var AlertDialog = React.forwardRef(function AlertDialog(props, ref) {
|
|
38
|
-
var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, open = props.open, onClose = props.onClose, children = props.children, icon = props.icon, other = __rest(props, ["className", "component", "open", "onClose", "children", "icon"]);
|
|
38
|
+
var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, open = props.open, onClose = props.onClose, children = props.children, icon = props.icon, disableIconPadding = props.disableIconPadding, other = __rest(props, ["className", "component", "open", "onClose", "children", "icon", "disableIconPadding"]);
|
|
39
39
|
var theme = useTheme();
|
|
40
|
+
var paddingAreaName = disableIconPadding ? "content" : "iconPadding";
|
|
40
41
|
return (_jsx(MuiModal, __assign({ open: open, onClose: onClose, ref: ref, sx: {
|
|
41
42
|
zIndex: ZINDEX.ALERT,
|
|
42
43
|
} }, other, { children: _jsxs(Component, __assign({ className: className, css: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 480px;\n background: ", ";\n box-shadow: ", ";\n border-radius: 16px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n padding: 24px;\n box-sizing: border-box;\n\n display: grid;\n ", "\n\n gap: 8px 16px;\n\n ", "\n "], ["\n width: 480px;\n background: ", ";\n box-shadow: ", ";\n border-radius: 16px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n padding: 24px;\n box-sizing: border-box;\n\n display: grid;\n ", "\n\n gap: 8px 16px;\n\n ", "\n "])), theme.color.background.neutralBase, shadows.shadow04, icon
|
|
43
|
-
? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n grid-template-columns: 32px 1fr;\n grid-template-areas:\n \"icon title\"\n \"
|
|
44
|
+
? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n grid-template-columns: 32px 1fr;\n grid-template-areas:\n \"icon title\"\n \"", " content\"\n \"actions actions\";\n "], ["\n grid-template-columns: 32px 1fr;\n grid-template-areas:\n \"icon title\"\n \"", " content\"\n \"actions actions\";\n "])), paddingAreaName) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n grid-template-areas:\n \"title\"\n \"content\"\n \"actions\";\n "], ["\n grid-template-areas:\n \"title\"\n \"content\"\n \"actions\";\n "]))), MOBILE(css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: calc(100% - 24px);\n grid-template-columns: auto;\n grid-template-areas:\n \"title\"\n \"content\"\n \"actions\";\n "], ["\n width: calc(100% - 24px);\n grid-template-columns: auto;\n grid-template-areas:\n \"title\"\n \"content\"\n \"actions\";\n "]))))) }, { children: [icon && _jsx(IconDiv, { children: icon }), _jsx(AlertDialogContext.Provider, __assign({ value: { icon: icon } }, { children: children }))] })) })));
|
|
44
45
|
});
|
|
45
46
|
var IconDiv = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n grid-area: icon;\n ", "\n svg {\n width: 32px;\n height: 32px;\n }\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n grid-area: icon;\n ", "\n svg {\n width: 32px;\n height: 32px;\n }\n\n ", "\n"])), function (_a) {
|
|
46
47
|
var theme = _a.theme;
|
|
47
|
-
return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n
|
|
48
|
+
return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), theme.color.background.infoActive);
|
|
48
49
|
}, MOBILE(css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: none;\n "], ["\n display: none;\n "])))));
|
|
49
50
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|