@epilot/base-elements 3.3.3 → 3.3.4
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.
- package/CHANGELOG.md +7 -0
- package/dist/Drawer360/ActionFooter.d.ts +2 -1
- package/dist/Drawer360/ActionFooter.js +5 -64
- package/dist/Drawer360/ActionFooter.js.map +1 -1
- package/dist/Drawer360/Drawer360.d.ts +1 -1
- package/dist/Drawer360/Drawer360.js +5 -47
- package/dist/Drawer360/Drawer360.js.map +1 -1
- package/dist/Drawer360/styles.d.ts +11 -0
- package/dist/Drawer360/styles.js +106 -0
- package/dist/Drawer360/styles.js.map +1 -0
- package/dist/Drawer360/types.d.ts +1 -0
- package/dist/ThemeProvider/mapping.js +146 -155
- package/dist/ThemeProvider/mapping.js.map +1 -1
- package/dist/bundle.js +38 -38
- package/dist/bundle.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
### [3.3.4](https://gitlab.com/e-pilot/product/frontend/base/elements/compare/v3.3.3...v3.3.4) (2023-08-09)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* remove waterdrop cards in tabpanel ([2e2166a](https://gitlab.com/e-pilot/product/frontend/base/elements/commit/2e2166ab6ed1a457f0f77c4ff71958339f90577d))
|
|
11
|
+
|
|
5
12
|
### [3.3.3](https://gitlab.com/e-pilot/product/frontend/base/elements/compare/v3.3.2...v3.3.3) (2023-08-04)
|
|
6
13
|
|
|
7
14
|
### [3.2.2](https://gitlab.com/e-pilot/product/frontend/base/elements/compare/v3.1.8...v3.2.2) (2023-07-19)
|
|
@@ -9,6 +9,7 @@ declare type ActionFooterProps = {
|
|
|
9
9
|
disableSaveButton?: boolean;
|
|
10
10
|
isLoading?: boolean;
|
|
11
11
|
showDiscard: boolean;
|
|
12
|
+
customCannotSaveMessage?: string;
|
|
12
13
|
};
|
|
13
|
-
export declare const ActionFooter: React.MemoExoticComponent<({ alwaysEnableSaveButton, disableSaveButton, locales, handleClose, handleSave, unsavedChanges, isLoading, showDiscard }: ActionFooterProps) => JSX.Element>;
|
|
14
|
+
export declare const ActionFooter: React.MemoExoticComponent<({ alwaysEnableSaveButton, disableSaveButton, locales, handleClose, handleSave, unsavedChanges, isLoading, showDiscard, customCannotSaveMessage }: ActionFooterProps) => JSX.Element>;
|
|
14
15
|
export {};
|
|
@@ -2,78 +2,19 @@
|
|
|
2
2
|
exports.__esModule = true;
|
|
3
3
|
exports.ActionFooter = void 0;
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
|
-
var styles_1 = require("@material-ui/core/styles");
|
|
6
5
|
var react_1 = tslib_1.__importStar(require("react"));
|
|
7
6
|
var __1 = require("..");
|
|
8
7
|
var Button_1 = require("../Button");
|
|
9
8
|
var Icon_1 = require("../Icon");
|
|
10
9
|
var Tooltip_1 = require("../Tooltip");
|
|
11
10
|
var helpers_1 = require("./helpers");
|
|
12
|
-
var
|
|
13
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
14
|
-
return ({
|
|
15
|
-
bottomBar: {
|
|
16
|
-
display: 'flex',
|
|
17
|
-
alignItems: 'center',
|
|
18
|
-
justifyContent: 'flex-end',
|
|
19
|
-
padding: '1rem 1.5rem',
|
|
20
|
-
boxShadow: "0px 0px 24px rgba(21, 43, 66, 0.12)",
|
|
21
|
-
zIndex: 1,
|
|
22
|
-
marginTop: 'auto'
|
|
23
|
-
},
|
|
24
|
-
noWrap: {
|
|
25
|
-
whiteSpace: 'nowrap'
|
|
26
|
-
},
|
|
27
|
-
warningContent: {
|
|
28
|
-
padding: function (_a) {
|
|
29
|
-
var showFullWarning = _a.showFullWarning;
|
|
30
|
-
return showFullWarning ? '0.5rem' : '0.5rem 0.4rem';
|
|
31
|
-
},
|
|
32
|
-
borderRadius: (_a = theme.shape) === null || _a === void 0 ? void 0 : _a.borderRadius,
|
|
33
|
-
marginRight: '1rem',
|
|
34
|
-
backgroundColor: (_c = (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.warning) === null || _c === void 0 ? void 0 : _c[90],
|
|
35
|
-
color: (_e = (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.warning) === null || _e === void 0 ? void 0 : _e[10],
|
|
36
|
-
fontWeight: 600,
|
|
37
|
-
display: 'flex',
|
|
38
|
-
alignItems: 'center',
|
|
39
|
-
height: 32
|
|
40
|
-
},
|
|
41
|
-
loadingMessageContent: {
|
|
42
|
-
padding: function (_a) {
|
|
43
|
-
var showFullWarning = _a.showFullWarning;
|
|
44
|
-
return showFullWarning ? '0.5rem' : '0.5rem 0.4rem';
|
|
45
|
-
},
|
|
46
|
-
borderRadius: (_f = theme.shape) === null || _f === void 0 ? void 0 : _f.borderRadius,
|
|
47
|
-
marginRight: '1rem',
|
|
48
|
-
backgroundColor: '#D9F1FC',
|
|
49
|
-
color: (_g = theme.palette) === null || _g === void 0 ? void 0 : _g.text.primary,
|
|
50
|
-
fontWeight: 600,
|
|
51
|
-
display: 'flex',
|
|
52
|
-
alignItems: 'center',
|
|
53
|
-
height: 32
|
|
54
|
-
},
|
|
55
|
-
warningContentText: {
|
|
56
|
-
marginLeft: '0.3rem'
|
|
57
|
-
},
|
|
58
|
-
saveButton: { marginLeft: '0.5rem' },
|
|
59
|
-
tooltip: {
|
|
60
|
-
backgroundColor: (_h = theme.palette) === null || _h === void 0 ? void 0 : _h.warning.main,
|
|
61
|
-
color: (_j = theme.palette) === null || _j === void 0 ? void 0 : _j.warning.contrastText
|
|
62
|
-
},
|
|
63
|
-
arrow: {
|
|
64
|
-
color: (_k = theme.palette) === null || _k === void 0 ? void 0 : _k.warning.main
|
|
65
|
-
},
|
|
66
|
-
loader: {
|
|
67
|
-
marginRight: 10
|
|
68
|
-
}
|
|
69
|
-
});
|
|
70
|
-
});
|
|
11
|
+
var styles_1 = require("./styles");
|
|
71
12
|
exports.ActionFooter = react_1.memo(function (_a) {
|
|
72
|
-
var alwaysEnableSaveButton = _a.alwaysEnableSaveButton, disableSaveButton = _a.disableSaveButton, locales = _a.locales, handleClose = _a.handleClose, handleSave = _a.handleSave, unsavedChanges = _a.unsavedChanges, isLoading = _a.isLoading, showDiscard = _a.showDiscard;
|
|
13
|
+
var alwaysEnableSaveButton = _a.alwaysEnableSaveButton, disableSaveButton = _a.disableSaveButton, locales = _a.locales, handleClose = _a.handleClose, handleSave = _a.handleSave, unsavedChanges = _a.unsavedChanges, isLoading = _a.isLoading, showDiscard = _a.showDiscard, customCannotSaveMessage = _a.customCannotSaveMessage;
|
|
73
14
|
var _b = react_1.useState(undefined), ref = _b[0], setRef = _b[1];
|
|
74
15
|
var isOverflow = helpers_1.useIsOverflow(ref);
|
|
75
16
|
var showFullWarning = !isOverflow;
|
|
76
|
-
var classes =
|
|
17
|
+
var classes = styles_1.useFooterStyles({ showFullWarning: showFullWarning });
|
|
77
18
|
var disabledSaveButton = react_1.useMemo(function () {
|
|
78
19
|
if (alwaysEnableSaveButton) {
|
|
79
20
|
return false;
|
|
@@ -108,14 +49,14 @@ exports.ActionFooter = react_1.memo(function (_a) {
|
|
|
108
49
|
? locales.disabledSaveButtonMessage
|
|
109
50
|
: unsavedChanges
|
|
110
51
|
? ''
|
|
111
|
-
: locales.noChangesMessage },
|
|
52
|
+
: customCannotSaveMessage !== null && customCannotSaveMessage !== void 0 ? customCannotSaveMessage : locales.noChangesMessage },
|
|
112
53
|
react_1["default"].createElement("div", null,
|
|
113
54
|
react_1["default"].createElement(Button_1.Button, { className: classes.saveButton + " " + classes.noWrap, color: "primary", disabled: disabledSaveButton && !alwaysEnableSaveButton, onClick: handleSave, variant: "contained" },
|
|
114
55
|
isLoading && (react_1["default"].createElement(__1.CircularProgress, { classes: { root: classes.loader }, size: 16 })),
|
|
115
56
|
locales.saveButtonLabel)))));
|
|
116
57
|
});
|
|
117
58
|
var WarningTooltip = function (props) {
|
|
118
|
-
var classes =
|
|
59
|
+
var classes = styles_1.useFooterStyles({});
|
|
119
60
|
return (react_1["default"].createElement(Tooltip_1.Tooltip, tslib_1.__assign({}, props, { classes: { arrow: classes.arrow, tooltip: classes.tooltip } })));
|
|
120
61
|
};
|
|
121
62
|
//# sourceMappingURL=ActionFooter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionFooter.js","sourceRoot":"","sources":["../../src/Drawer360/ActionFooter.tsx"],"names":[],"mappings":";;;;AACA,
|
|
1
|
+
{"version":3,"file":"ActionFooter.js","sourceRoot":"","sources":["../../src/Drawer360/ActionFooter.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Drawer360Props } from './types';
|
|
3
|
-
declare const memoizedDrawer360: React.MemoExoticComponent<({ alwaysEnableSaveButton, anchor, children, maxWidth, onClose, onSave, onDiscard, responsive, size, showActionButtons, title, unsavedChanges, open, disableSaveButton, isLoading, locales: localesProp, onBackdropClick, onEscapeKeyDown, onRendered, ...rest }: Drawer360Props) => JSX.Element>;
|
|
3
|
+
declare const memoizedDrawer360: React.MemoExoticComponent<({ alwaysEnableSaveButton, anchor, children, maxWidth, onClose, onSave, onDiscard, responsive, size, showActionButtons, title, unsavedChanges, open, disableSaveButton, isLoading, locales: localesProp, customCannotSaveMessage, onBackdropClick, onEscapeKeyDown, onRendered, ...rest }: Drawer360Props) => JSX.Element>;
|
|
4
4
|
export { memoizedDrawer360 as Drawer360 };
|
|
@@ -3,7 +3,6 @@ exports.__esModule = true;
|
|
|
3
3
|
exports.Drawer360 = void 0;
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
5
|
var core_1 = require("@material-ui/core");
|
|
6
|
-
var styles_1 = require("@material-ui/core/styles");
|
|
7
6
|
var react_1 = tslib_1.__importStar(require("react"));
|
|
8
7
|
var Dialog_1 = require("../Dialog");
|
|
9
8
|
var Icon_1 = require("../Icon");
|
|
@@ -13,53 +12,12 @@ var Typography_1 = require("../Typography");
|
|
|
13
12
|
var ActionFooter_1 = require("./ActionFooter");
|
|
14
13
|
var DiscardDialog_1 = require("./DiscardDialog");
|
|
15
14
|
var helpers_1 = require("./helpers");
|
|
16
|
-
var
|
|
17
|
-
{ 'one-third': '560px', 'two-thirds': '720px', 'max-width': '850px' },
|
|
18
|
-
{ 'one-third': '33vw', 'two-thirds': '66vw', 'max-width': '90vw' }
|
|
19
|
-
];
|
|
20
|
-
var useStyles = styles_1.makeStyles(function () { return ({
|
|
21
|
-
sideDrawerRoot: {
|
|
22
|
-
display: 'flex',
|
|
23
|
-
flexDirection: 'column',
|
|
24
|
-
flex: 1,
|
|
25
|
-
minWidth: '464px',
|
|
26
|
-
maxWidth: function (_a) {
|
|
27
|
-
var maxWidth = _a.maxWidth;
|
|
28
|
-
return maxWidth;
|
|
29
|
-
},
|
|
30
|
-
width: function (_a) {
|
|
31
|
-
var _b = _a.responsive, responsive = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? 'two-thirds' : _c;
|
|
32
|
-
return customSizes[Number(responsive)][size];
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
topBar: {
|
|
36
|
-
padding: '1rem 1.5rem',
|
|
37
|
-
paddingRight: '0.5rem',
|
|
38
|
-
display: 'flex',
|
|
39
|
-
alignItems: 'center',
|
|
40
|
-
justifyContent: 'space-between',
|
|
41
|
-
boxShadow: 'inset 0px -1px 0px #c1c7d0;'
|
|
42
|
-
},
|
|
43
|
-
title: {
|
|
44
|
-
fontSize: 20,
|
|
45
|
-
fontWeight: 600
|
|
46
|
-
},
|
|
47
|
-
dialogContent: {
|
|
48
|
-
position: 'relative'
|
|
49
|
-
},
|
|
50
|
-
body: {
|
|
51
|
-
padding: '1.5rem',
|
|
52
|
-
position: 'absolute',
|
|
53
|
-
inset: 0,
|
|
54
|
-
background: '#EDF2F7',
|
|
55
|
-
overflowY: 'scroll'
|
|
56
|
-
}
|
|
57
|
-
}); });
|
|
15
|
+
var styles_1 = require("./styles");
|
|
58
16
|
var Drawer360 = function (_a) {
|
|
59
|
-
var _b = _a.alwaysEnableSaveButton, alwaysEnableSaveButton = _b === void 0 ? false : _b, _c = _a.anchor, anchor = _c === void 0 ? 'right' : _c, children = _a.children, maxWidth = _a.maxWidth, onClose = _a.onClose, onSave = _a.onSave, onDiscard = _a.onDiscard, _d = _a.responsive, responsive = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? 'two-thirds' : _e, _f = _a.showActionButtons, showActionButtons = _f === void 0 ? true : _f, title = _a.title, unsavedChanges = _a.unsavedChanges, open = _a.open, disableSaveButton = _a.disableSaveButton, isLoading = _a.isLoading, localesProp = _a.locales,
|
|
17
|
+
var _b = _a.alwaysEnableSaveButton, alwaysEnableSaveButton = _b === void 0 ? false : _b, _c = _a.anchor, anchor = _c === void 0 ? 'right' : _c, children = _a.children, maxWidth = _a.maxWidth, onClose = _a.onClose, onSave = _a.onSave, onDiscard = _a.onDiscard, _d = _a.responsive, responsive = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? 'two-thirds' : _e, _f = _a.showActionButtons, showActionButtons = _f === void 0 ? true : _f, title = _a.title, unsavedChanges = _a.unsavedChanges, open = _a.open, disableSaveButton = _a.disableSaveButton, isLoading = _a.isLoading, localesProp = _a.locales, customCannotSaveMessage = _a.customCannotSaveMessage,
|
|
60
18
|
// prop sanitisation for deprecated props
|
|
61
|
-
onBackdropClick = _a.onBackdropClick, onEscapeKeyDown = _a.onEscapeKeyDown, onRendered = _a.onRendered, rest = tslib_1.__rest(_a, ["alwaysEnableSaveButton", "anchor", "children", "maxWidth", "onClose", "onSave", "onDiscard", "responsive", "size", "showActionButtons", "title", "unsavedChanges", "open", "disableSaveButton", "isLoading", "locales", "onBackdropClick", "onEscapeKeyDown", "onRendered"]);
|
|
62
|
-
var classes =
|
|
19
|
+
onBackdropClick = _a.onBackdropClick, onEscapeKeyDown = _a.onEscapeKeyDown, onRendered = _a.onRendered, rest = tslib_1.__rest(_a, ["alwaysEnableSaveButton", "anchor", "children", "maxWidth", "onClose", "onSave", "onDiscard", "responsive", "size", "showActionButtons", "title", "unsavedChanges", "open", "disableSaveButton", "isLoading", "locales", "customCannotSaveMessage", "onBackdropClick", "onEscapeKeyDown", "onRendered"]);
|
|
20
|
+
var classes = styles_1.useDrawerStyles({ responsive: responsive, size: size, maxWidth: maxWidth });
|
|
63
21
|
var _g = react_1["default"].useState(false), showDiscardDialog = _g[0], setShowDiscardDialog = _g[1];
|
|
64
22
|
react_1.useEffect(function () {
|
|
65
23
|
if (!open) {
|
|
@@ -104,7 +62,7 @@ var Drawer360 = function (_a) {
|
|
|
104
62
|
react_1["default"].createElement(Icon_1.EIcon, { color: "secondary", name: "x" })))))),
|
|
105
63
|
react_1["default"].createElement(Dialog_1.DialogContent, { className: classes.dialogContent },
|
|
106
64
|
react_1["default"].createElement("div", { className: classes.body }, children)),
|
|
107
|
-
open && showActionButtons && (react_1["default"].createElement(ActionFooter_1.ActionFooter, { alwaysEnableSaveButton: alwaysEnableSaveButton, disableSaveButton: disableSaveButton, handleClose: handleClose, handleSave: handleSave, isLoading: isLoading, locales: locales, showDiscard: Boolean(onDiscard), unsavedChanges: unsavedChanges }))),
|
|
65
|
+
open && showActionButtons && (react_1["default"].createElement(ActionFooter_1.ActionFooter, { alwaysEnableSaveButton: alwaysEnableSaveButton, customCannotSaveMessage: customCannotSaveMessage, disableSaveButton: disableSaveButton, handleClose: handleClose, handleSave: handleSave, isLoading: isLoading, locales: locales, showDiscard: Boolean(onDiscard), unsavedChanges: unsavedChanges }))),
|
|
108
66
|
react_1["default"].createElement(DiscardDialog_1.DiscardDialog, { handleDiscard: handleDiscard, locales: locales, onClose: closeDiscardDialog, open: showDiscardDialog })));
|
|
109
67
|
};
|
|
110
68
|
var memoizedDrawer360 = react_1.memo(Drawer360);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer360.js","sourceRoot":"","sources":["../../src/Drawer360/Drawer360.tsx"],"names":[],"mappings":";;;;AAAA,0CAAuD;AACvD,
|
|
1
|
+
{"version":3,"file":"Drawer360.js","sourceRoot":"","sources":["../../src/Drawer360/Drawer360.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Drawer360Props } from './types';
|
|
2
|
+
interface StyleType {
|
|
3
|
+
responsive?: boolean;
|
|
4
|
+
size?: Drawer360Props['size'];
|
|
5
|
+
maxWidth?: string;
|
|
6
|
+
}
|
|
7
|
+
export declare const useDrawerStyles: (props: StyleType) => Record<"title" | "body" | "sideDrawerRoot" | "topBar" | "dialogContent", string>;
|
|
8
|
+
export declare const useFooterStyles: (props: {
|
|
9
|
+
showFullWarning?: boolean | undefined;
|
|
10
|
+
}) => Record<"tooltip" | "arrow" | "noWrap" | "bottomBar" | "warningContent" | "loadingMessageContent" | "warningContentText" | "saveButton" | "loader", string>;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
exports.__esModule = true;
|
|
3
|
+
exports.useFooterStyles = exports.useDrawerStyles = void 0;
|
|
4
|
+
var core_1 = require("@material-ui/core");
|
|
5
|
+
var customSizes = [
|
|
6
|
+
{ 'one-third': '560px', 'two-thirds': '720px', 'max-width': '850px' },
|
|
7
|
+
{ 'one-third': '33vw', 'two-thirds': '66vw', 'max-width': '90vw' }
|
|
8
|
+
];
|
|
9
|
+
exports.useDrawerStyles = core_1.makeStyles(function () { return ({
|
|
10
|
+
sideDrawerRoot: {
|
|
11
|
+
display: 'flex',
|
|
12
|
+
flexDirection: 'column',
|
|
13
|
+
flex: 1,
|
|
14
|
+
minWidth: '464px',
|
|
15
|
+
maxWidth: function (_a) {
|
|
16
|
+
var maxWidth = _a.maxWidth;
|
|
17
|
+
return maxWidth;
|
|
18
|
+
},
|
|
19
|
+
width: function (_a) {
|
|
20
|
+
var _b = _a.responsive, responsive = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? 'two-thirds' : _c;
|
|
21
|
+
return customSizes[Number(responsive)][size];
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
topBar: {
|
|
25
|
+
padding: '1rem 1.5rem',
|
|
26
|
+
paddingRight: '0.5rem',
|
|
27
|
+
display: 'flex',
|
|
28
|
+
alignItems: 'center',
|
|
29
|
+
justifyContent: 'space-between',
|
|
30
|
+
boxShadow: 'inset 0px -1px 0px #c1c7d0;'
|
|
31
|
+
},
|
|
32
|
+
title: {
|
|
33
|
+
fontSize: 20,
|
|
34
|
+
fontWeight: 600
|
|
35
|
+
},
|
|
36
|
+
dialogContent: {
|
|
37
|
+
position: 'relative'
|
|
38
|
+
},
|
|
39
|
+
body: {
|
|
40
|
+
padding: '1.5rem',
|
|
41
|
+
position: 'absolute',
|
|
42
|
+
inset: 0,
|
|
43
|
+
background: '#EDF2F7',
|
|
44
|
+
overflowY: 'scroll'
|
|
45
|
+
}
|
|
46
|
+
}); });
|
|
47
|
+
exports.useFooterStyles = core_1.makeStyles(function (theme) {
|
|
48
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
49
|
+
return ({
|
|
50
|
+
bottomBar: {
|
|
51
|
+
display: 'flex',
|
|
52
|
+
alignItems: 'center',
|
|
53
|
+
justifyContent: 'flex-end',
|
|
54
|
+
padding: '1rem 1.5rem',
|
|
55
|
+
boxShadow: "0px 0px 24px rgba(21, 43, 66, 0.12)",
|
|
56
|
+
zIndex: 1,
|
|
57
|
+
marginTop: 'auto'
|
|
58
|
+
},
|
|
59
|
+
noWrap: {
|
|
60
|
+
whiteSpace: 'nowrap'
|
|
61
|
+
},
|
|
62
|
+
warningContent: {
|
|
63
|
+
padding: function (_a) {
|
|
64
|
+
var showFullWarning = _a.showFullWarning;
|
|
65
|
+
return showFullWarning ? '0.5rem' : '0.5rem 0.4rem';
|
|
66
|
+
},
|
|
67
|
+
borderRadius: (_a = theme.shape) === null || _a === void 0 ? void 0 : _a.borderRadius,
|
|
68
|
+
marginRight: '1rem',
|
|
69
|
+
backgroundColor: (_c = (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.warning) === null || _c === void 0 ? void 0 : _c[90],
|
|
70
|
+
color: (_e = (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.warning) === null || _e === void 0 ? void 0 : _e[10],
|
|
71
|
+
fontWeight: 600,
|
|
72
|
+
display: 'flex',
|
|
73
|
+
alignItems: 'center',
|
|
74
|
+
height: 32
|
|
75
|
+
},
|
|
76
|
+
loadingMessageContent: {
|
|
77
|
+
padding: function (_a) {
|
|
78
|
+
var showFullWarning = _a.showFullWarning;
|
|
79
|
+
return showFullWarning ? '0.5rem' : '0.5rem 0.4rem';
|
|
80
|
+
},
|
|
81
|
+
borderRadius: (_f = theme.shape) === null || _f === void 0 ? void 0 : _f.borderRadius,
|
|
82
|
+
marginRight: '1rem',
|
|
83
|
+
backgroundColor: '#D9F1FC',
|
|
84
|
+
color: (_g = theme.palette) === null || _g === void 0 ? void 0 : _g.text.primary,
|
|
85
|
+
fontWeight: 600,
|
|
86
|
+
display: 'flex',
|
|
87
|
+
alignItems: 'center',
|
|
88
|
+
height: 32
|
|
89
|
+
},
|
|
90
|
+
warningContentText: {
|
|
91
|
+
marginLeft: '0.3rem'
|
|
92
|
+
},
|
|
93
|
+
saveButton: { marginLeft: '0.5rem' },
|
|
94
|
+
tooltip: {
|
|
95
|
+
backgroundColor: (_h = theme.palette) === null || _h === void 0 ? void 0 : _h.warning.main,
|
|
96
|
+
color: (_j = theme.palette) === null || _j === void 0 ? void 0 : _j.warning.contrastText
|
|
97
|
+
},
|
|
98
|
+
arrow: {
|
|
99
|
+
color: (_k = theme.palette) === null || _k === void 0 ? void 0 : _k.warning.main
|
|
100
|
+
},
|
|
101
|
+
loader: {
|
|
102
|
+
marginRight: 10
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
});
|
|
106
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Drawer360/styles.ts"],"names":[],"mappings":"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"}
|
|
@@ -14,6 +14,7 @@ export declare type Drawer360Props = Omit<MuiDrawerProps, 'anchor' | 'elevation'
|
|
|
14
14
|
isLoading?: boolean;
|
|
15
15
|
anchor?: 'left' | 'right';
|
|
16
16
|
alwaysEnableSaveButton?: boolean;
|
|
17
|
+
customCannotSaveMessage?: string;
|
|
17
18
|
};
|
|
18
19
|
export interface Drawer360Locales {
|
|
19
20
|
saveButtonLabel: string;
|