@chtc/web-components 1.0.6 → 1.0.8
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.
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { ReactNode } from "react";
|
|
2
2
|
import { IconButtonProps } from "@mui/material";
|
|
3
|
-
|
|
3
|
+
import { Theme } from "@mui/material/styles";
|
|
4
|
+
export type ConfirmButtonProps = IconButtonProps & {
|
|
5
|
+
color: keyof Theme['palette'];
|
|
6
|
+
confirmText?: ReactNode;
|
|
4
7
|
onConfirm?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
|
5
8
|
};
|
|
6
|
-
declare const ConfirmButton: ({ onConfirm, ...props }: ConfirmButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
declare const ConfirmButton: ({ onConfirm, confirmText, ...props }: ConfirmButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
10
|
export default ConfirmButton;
|
|
8
11
|
//# sourceMappingURL=ConfirmButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfirmButton.d.ts","sourceRoot":"","sources":["../../src/ConfirmButton/ConfirmButton.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ConfirmButton.d.ts","sourceRoot":"","sources":["../../src/ConfirmButton/ConfirmButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA8B,SAAS,EAAC,MAAM,OAAO,CAAC;AACpE,OAAO,EAA0B,eAAe,EAAkC,MAAM,eAAe,CAAC;AACxG,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAE5C,MAAM,MAAM,kBAAkB,GAAI,eAAe,GAAG;IACnD,KAAK,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC,CAAC;IAC9B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CAC7E,CAAA;AAED,QAAA,MAAM,aAAa,GAAI,sCAAgD,kBAAkB,4CAkFxF,CAAA;AAED,eAAe,aAAa,CAAC"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState, useRef, useEffect } from "react";
|
|
3
|
-
import { Box, Button, IconButton, Collapse } from "@mui/material";
|
|
4
|
-
const ConfirmButton = ({ onConfirm, ...props }) => {
|
|
3
|
+
import { Box, Button, IconButton, Collapse, useTheme } from "@mui/material";
|
|
4
|
+
const ConfirmButton = ({ onConfirm, confirmText = 'Confirm', ...props }) => {
|
|
5
|
+
const theme = useTheme();
|
|
5
6
|
const [askingForConfirmation, setAskingForConfirmation] = useState(false);
|
|
6
7
|
const [growDirection, setGrowDirection] = useState('right');
|
|
7
8
|
const iconButtonRef = useRef(null);
|
|
@@ -25,19 +26,30 @@ const ConfirmButton = ({ onConfirm, ...props }) => {
|
|
|
25
26
|
}
|
|
26
27
|
}
|
|
27
28
|
}, [askingForConfirmation]);
|
|
28
|
-
return (
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
:
|
|
29
|
+
return (_jsx(Box, { sx: {
|
|
30
|
+
height: '48px',
|
|
31
|
+
width: '48px',
|
|
32
|
+
}, children: _jsx(Box, { sx: {
|
|
33
|
+
display: 'flex',
|
|
34
|
+
position: 'relative',
|
|
35
|
+
zIndex: 10,
|
|
36
|
+
justifyContent: growDirection == "right" ? 'flex-start' : 'flex-end',
|
|
37
|
+
}, children: _jsxs(Box, { sx: {
|
|
38
|
+
display: 'flex',
|
|
39
|
+
borderRadius: 1,
|
|
40
|
+
p: .5,
|
|
41
|
+
alignContent: 'center',
|
|
42
|
+
bgcolor: askingForConfirmation ? theme.lighten(theme.palette[props.color || 'primary'].light, 0.9) : undefined
|
|
43
|
+
}, children: [_jsx(Box, { sx: { order: growDirection === 'right' ? 1 : 2, border: "1px black" }, children: _jsx(IconButton, { ...props, ref: iconButtonRef, onClick: (e) => {
|
|
44
|
+
setAskingForConfirmation(!askingForConfirmation);
|
|
45
|
+
if (props.onClick)
|
|
46
|
+
props.onClick(e);
|
|
47
|
+
} }) }), _jsx(Box, { sx: {
|
|
48
|
+
alignContent: 'center',
|
|
49
|
+
...(growDirection === 'right'
|
|
50
|
+
? { order: 2 }
|
|
51
|
+
: { order: 1 }),
|
|
52
|
+
}, children: _jsx(Collapse, { in: askingForConfirmation, orientation: 'horizontal', children: _jsx(Button, { variant: 'contained', color: props === null || props === void 0 ? void 0 : props.color, size: props === null || props === void 0 ? void 0 : props.size, onClick: onConfirm, ref: confirmButtonRef, children: confirmText }) }) })] }) }) }));
|
|
41
53
|
};
|
|
42
54
|
export default ConfirmButton;
|
|
43
55
|
//# sourceMappingURL=ConfirmButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfirmButton.js","sourceRoot":"","sources":["../../src/ConfirmButton/ConfirmButton.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"ConfirmButton.js","sourceRoot":"","sources":["../../src/ConfirmButton/ConfirmButton.tsx"],"names":[],"mappings":"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"}
|