@activecollab/components 2.0.401 → 2.0.402
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/dist/cjs/components/ConfirmDialog/ConfirmDialog.js +39 -5
- package/dist/cjs/components/ConfirmDialog/ConfirmDialog.js.map +1 -1
- package/dist/cjs/components/ConfirmDialog/Styles.js +14 -0
- package/dist/cjs/components/ConfirmDialog/Styles.js.map +1 -0
- package/dist/esm/components/ConfirmDialog/ConfirmDialog.d.ts +2 -1
- package/dist/esm/components/ConfirmDialog/ConfirmDialog.d.ts.map +1 -1
- package/dist/esm/components/ConfirmDialog/ConfirmDialog.js +31 -6
- package/dist/esm/components/ConfirmDialog/ConfirmDialog.js.map +1 -1
- package/dist/esm/components/ConfirmDialog/Styles.d.ts +2 -0
- package/dist/esm/components/ConfirmDialog/Styles.d.ts.map +1 -0
- package/dist/esm/components/ConfirmDialog/Styles.js +7 -0
- package/dist/esm/components/ConfirmDialog/Styles.js.map +1 -0
- package/dist/index.js +287 -255
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -7,10 +7,19 @@ exports.ConfirmDialog = void 0;
|
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
9
9
|
var _Button = require("../Button/Button");
|
|
10
|
+
var _Checkbox = require("../Checkbox");
|
|
10
11
|
var _Dialog = require("../Dialog");
|
|
12
|
+
var _Styles = require("./Styles");
|
|
11
13
|
var _Body = require("../Typography/Variants/Body2");
|
|
12
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
15
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
16
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
17
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
18
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
19
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
20
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
21
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
22
|
+
var CONFIRMATION_CHECKBOX_ID = "confirm-dialog-confirmation";
|
|
14
23
|
var ConfirmDialog = exports.ConfirmDialog = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
15
24
|
var _ref$open = _ref.open,
|
|
16
25
|
open = _ref$open === void 0 ? false : _ref$open,
|
|
@@ -28,10 +37,24 @@ var ConfirmDialog = exports.ConfirmDialog = /*#__PURE__*/(0, _react.forwardRef)(
|
|
|
28
37
|
_ref$shouldShowCancel = _ref.shouldShowCancelButton,
|
|
29
38
|
shouldShowCancelButton = _ref$shouldShowCancel === void 0 ? true : _ref$shouldShowCancel,
|
|
30
39
|
_ref$isLoading = _ref.isLoading,
|
|
31
|
-
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading
|
|
40
|
+
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
|
|
41
|
+
confirmationLabel = _ref.confirmationLabel;
|
|
42
|
+
var _useState = (0, _react.useState)(false),
|
|
43
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
44
|
+
confirmed = _useState2[0],
|
|
45
|
+
setConfirmed = _useState2[1];
|
|
46
|
+
var isConfirmBlocked = Boolean(confirmationLabel) && !confirmed;
|
|
47
|
+
var handleToggleConfirmed = (0, _react.useCallback)(function (event) {
|
|
48
|
+
return setConfirmed(event.target.checked);
|
|
49
|
+
}, []);
|
|
50
|
+
(0, _react.useEffect)(function () {
|
|
51
|
+
if (!open) {
|
|
52
|
+
setConfirmed(false);
|
|
53
|
+
}
|
|
54
|
+
}, [open]);
|
|
32
55
|
(0, _react.useEffect)(function () {
|
|
33
56
|
var handleKeyDown = function handleKeyDown(event) {
|
|
34
|
-
if (event.key === "Enter" && onConfirm) {
|
|
57
|
+
if (event.key === "Enter" && onConfirm && !isConfirmBlocked) {
|
|
35
58
|
event.preventDefault();
|
|
36
59
|
onConfirm();
|
|
37
60
|
}
|
|
@@ -42,7 +65,7 @@ var ConfirmDialog = exports.ConfirmDialog = /*#__PURE__*/(0, _react.forwardRef)(
|
|
|
42
65
|
return function () {
|
|
43
66
|
window.removeEventListener("keydown", handleKeyDown);
|
|
44
67
|
};
|
|
45
|
-
}, [open, onConfirm]);
|
|
68
|
+
}, [open, onConfirm, isConfirmBlocked]);
|
|
46
69
|
return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, {
|
|
47
70
|
ref: ref,
|
|
48
71
|
open: open,
|
|
@@ -53,13 +76,24 @@ var ConfirmDialog = exports.ConfirmDialog = /*#__PURE__*/(0, _react.forwardRef)(
|
|
|
53
76
|
lineHeight: "loose",
|
|
54
77
|
color: "secondary",
|
|
55
78
|
whitespace: "pre-line"
|
|
56
|
-
}, dialogContent)
|
|
79
|
+
}, dialogContent), confirmationLabel ? /*#__PURE__*/_react.default.createElement(_Styles.StyledConfirmation, {
|
|
80
|
+
className: "c-confirm-dialog--confirmation"
|
|
81
|
+
}, /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
|
|
82
|
+
id: CONFIRMATION_CHECKBOX_ID,
|
|
83
|
+
checked: confirmed,
|
|
84
|
+
onChange: handleToggleConfirmed,
|
|
85
|
+
disabled: isLoading
|
|
86
|
+
}), /*#__PURE__*/_react.default.createElement("label", {
|
|
87
|
+
htmlFor: CONFIRMATION_CHECKBOX_ID
|
|
88
|
+
}, /*#__PURE__*/_react.default.createElement(_Body.Body2, {
|
|
89
|
+
color: "secondary"
|
|
90
|
+
}, confirmationLabel))) : null), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.ContentDivider, null), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Actions, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
|
|
57
91
|
variant: "primary",
|
|
58
92
|
style: {
|
|
59
93
|
marginRight: "12px"
|
|
60
94
|
},
|
|
61
95
|
onClick: onConfirm,
|
|
62
|
-
disabled: isLoading
|
|
96
|
+
disabled: isLoading || isConfirmBlocked
|
|
63
97
|
}, confirmBtnText), shouldShowCancelButton ? /*#__PURE__*/_react.default.createElement(_Button.Button, {
|
|
64
98
|
variant: "secondary",
|
|
65
99
|
"data-action": "cancel",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfirmDialog.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Button","_Dialog","_Body","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ConfirmDialog","exports","forwardRef","_ref","ref","_ref$open","open","onCancel","onConfirm","className","_ref$dialogTitle","dialogTitle","_ref$dialogContent","dialogContent","_ref$confirmBtnText","confirmBtnText","_ref$cancelBtnText","cancelBtnText","_ref$shouldShowCancel","shouldShowCancelButton","_ref$isLoading","isLoading","useEffect","handleKeyDown","event","key","preventDefault","window","addEventListener","removeEventListener","createElement","Dialog","onClose","classnames","disableCloseOnEsc","Title","ContentDivider","Content","Body2","lineHeight","color","whitespace","Actions","Button","variant","style","marginRight","onClick","disabled","type","displayName"],"sources":["../../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import React, { forwardRef, useEffect } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { Button } from \"../Button/Button\";\nimport { Dialog } from \"../Dialog\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\n\nexport interface ConfirmDialogProps {\n open?: boolean;\n onCancel?: () => void;\n onConfirm?: () => void;\n className?: string;\n dialogTitle?: string;\n dialogContent?: string;\n confirmBtnText?: string;\n cancelBtnText?: string;\n shouldShowCancelButton?: boolean;\n isLoading?: boolean;\n}\n\nexport const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(\n (\n {\n open = false,\n onCancel,\n onConfirm,\n className,\n dialogTitle = \"Discard changes?\",\n dialogContent = \"All unsaved changes will be lost.\",\n confirmBtnText = \"OK\",\n cancelBtnText = \"Cancel\",\n shouldShowCancelButton = true,\n isLoading = false,\n },\n ref\n ) => {\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Enter\" && onConfirm) {\n event.preventDefault();\n onConfirm();\n }\n };\n\n if (open) {\n window.addEventListener(\"keydown\", handleKeyDown);\n }\n\n return () => {\n window.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [open, onConfirm]);\n\n return (\n <Dialog\n ref={ref}\n open={open}\n onClose={onCancel}\n className={classnames(\"c-confirm-dialog\", className)}\n disableCloseOnEsc={isLoading}\n >\n <Dialog.Title>{dialogTitle}</Dialog.Title>\n <Dialog.ContentDivider />\n <Dialog.Content>\n <Body2 lineHeight=\"loose\" color=\"secondary\" whitespace=\"pre-line\">\n {dialogContent}\n </Body2>\n </Dialog.Content>\n <Dialog.ContentDivider />\n <Dialog.Actions>\n <Button\n variant=\"primary\"\n style={{ marginRight: \"12px\" }}\n onClick={onConfirm}\n disabled={isLoading}\n >\n {confirmBtnText}\n </Button>\n {shouldShowCancelButton ? (\n <Button\n variant=\"secondary\"\n data-action=\"cancel\"\n onClick={onCancel}\n type=\"button\"\n disabled={isLoading}\n >\n {cancelBtnText}\n </Button>\n ) : null}\n </Dialog.Actions>\n </Dialog>\n );\n }\n);\n\nConfirmDialog.displayName = \"ConfirmDialog\";\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ConfirmDialog.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Button","_Checkbox","_Dialog","_Styles","_Body","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_slicedToArray","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","a","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","length","l","Symbol","iterator","u","next","done","push","value","return","isArray","CONFIRMATION_CHECKBOX_ID","ConfirmDialog","exports","forwardRef","_ref","ref","_ref$open","open","onCancel","onConfirm","className","_ref$dialogTitle","dialogTitle","_ref$dialogContent","dialogContent","_ref$confirmBtnText","confirmBtnText","_ref$cancelBtnText","cancelBtnText","_ref$shouldShowCancel","shouldShowCancelButton","_ref$isLoading","isLoading","confirmationLabel","_useState","useState","_useState2","confirmed","setConfirmed","isConfirmBlocked","Boolean","handleToggleConfirmed","useCallback","event","target","checked","useEffect","handleKeyDown","key","preventDefault","window","addEventListener","removeEventListener","createElement","Dialog","onClose","classnames","disableCloseOnEsc","Title","ContentDivider","Content","Body2","lineHeight","color","whitespace","StyledConfirmation","Checkbox","id","onChange","disabled","htmlFor","Actions","Button","variant","style","marginRight","onClick","type","displayName"],"sources":["../../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useState } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { Button } from \"../Button/Button\";\nimport { Checkbox } from \"../Checkbox\";\nimport { Dialog } from \"../Dialog\";\nimport { StyledConfirmation } from \"./Styles\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\n\nconst CONFIRMATION_CHECKBOX_ID = \"confirm-dialog-confirmation\";\n\nexport interface ConfirmDialogProps {\n open?: boolean;\n onCancel?: () => void;\n onConfirm?: () => void;\n className?: string;\n dialogTitle?: string;\n dialogContent?: React.ReactNode;\n confirmBtnText?: string;\n cancelBtnText?: string;\n shouldShowCancelButton?: boolean;\n isLoading?: boolean;\n confirmationLabel?: string;\n}\n\nexport const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(\n (\n {\n open = false,\n onCancel,\n onConfirm,\n className,\n dialogTitle = \"Discard changes?\",\n dialogContent = \"All unsaved changes will be lost.\",\n confirmBtnText = \"OK\",\n cancelBtnText = \"Cancel\",\n shouldShowCancelButton = true,\n isLoading = false,\n confirmationLabel,\n },\n ref\n ) => {\n const [confirmed, setConfirmed] = useState(false);\n const isConfirmBlocked = Boolean(confirmationLabel) && !confirmed;\n\n const handleToggleConfirmed = useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) =>\n setConfirmed(event.target.checked),\n []\n );\n\n useEffect(() => {\n if (!open) {\n setConfirmed(false);\n }\n }, [open]);\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Enter\" && onConfirm && !isConfirmBlocked) {\n event.preventDefault();\n onConfirm();\n }\n };\n\n if (open) {\n window.addEventListener(\"keydown\", handleKeyDown);\n }\n\n return () => {\n window.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [open, onConfirm, isConfirmBlocked]);\n\n return (\n <Dialog\n ref={ref}\n open={open}\n onClose={onCancel}\n className={classnames(\"c-confirm-dialog\", className)}\n disableCloseOnEsc={isLoading}\n >\n <Dialog.Title>{dialogTitle}</Dialog.Title>\n <Dialog.ContentDivider />\n <Dialog.Content>\n <Body2 lineHeight=\"loose\" color=\"secondary\" whitespace=\"pre-line\">\n {dialogContent}\n </Body2>\n {confirmationLabel ? (\n <StyledConfirmation className=\"c-confirm-dialog--confirmation\">\n <Checkbox\n id={CONFIRMATION_CHECKBOX_ID}\n checked={confirmed}\n onChange={handleToggleConfirmed}\n disabled={isLoading}\n />\n <label htmlFor={CONFIRMATION_CHECKBOX_ID}>\n <Body2 color=\"secondary\">{confirmationLabel}</Body2>\n </label>\n </StyledConfirmation>\n ) : null}\n </Dialog.Content>\n <Dialog.ContentDivider />\n <Dialog.Actions>\n <Button\n variant=\"primary\"\n style={{ marginRight: \"12px\" }}\n onClick={onConfirm}\n disabled={isLoading || isConfirmBlocked}\n >\n {confirmBtnText}\n </Button>\n {shouldShowCancelButton ? (\n <Button\n variant=\"secondary\"\n data-action=\"cancel\"\n onClick={onCancel}\n type=\"button\"\n disabled={isLoading}\n >\n {cancelBtnText}\n </Button>\n ) : null}\n </Dialog.Actions>\n </Dialog>\n );\n }\n);\n\nConfirmDialog.displayName = \"ConfirmDialog\";\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.StyledConfirmation = void 0;
|
|
7
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
|
+
var StyledConfirmation = exports.StyledConfirmation = _styledComponents.default.div.withConfig({
|
|
10
|
+
displayName: "Styles__StyledConfirmation",
|
|
11
|
+
componentId: "sc-1hepb1k-0"
|
|
12
|
+
})(["display:flex;align-items:center;gap:8px;margin-top:16px;label{cursor:pointer;}"]);
|
|
13
|
+
StyledConfirmation.displayName = "StyledConfirmation";
|
|
14
|
+
//# sourceMappingURL=Styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledConfirmation","exports","styled","div","withConfig","displayName","componentId"],"sources":["../../../../src/components/ConfirmDialog/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const StyledConfirmation = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 16px;\n\n label {\n cursor: pointer;\n }\n`;\n\nStyledConfirmation.displayName = \"StyledConfirmation\";\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,IAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sFAS3C;AAEDN,kBAAkB,CAACK,WAAW,GAAG,oBAAoB","ignoreList":[]}
|
|
@@ -5,11 +5,12 @@ export interface ConfirmDialogProps {
|
|
|
5
5
|
onConfirm?: () => void;
|
|
6
6
|
className?: string;
|
|
7
7
|
dialogTitle?: string;
|
|
8
|
-
dialogContent?:
|
|
8
|
+
dialogContent?: React.ReactNode;
|
|
9
9
|
confirmBtnText?: string;
|
|
10
10
|
cancelBtnText?: string;
|
|
11
11
|
shouldShowCancelButton?: boolean;
|
|
12
12
|
isLoading?: boolean;
|
|
13
|
+
confirmationLabel?: string;
|
|
13
14
|
}
|
|
14
15
|
export declare const ConfirmDialog: React.ForwardRefExoticComponent<ConfirmDialogProps & React.RefAttributes<HTMLDivElement>>;
|
|
15
16
|
//# sourceMappingURL=ConfirmDialog.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAY5E,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,2FAsGzB,CAAC"}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
import React, { forwardRef, useEffect } from "react";
|
|
1
|
+
import React, { forwardRef, useCallback, useEffect, useState } from "react";
|
|
2
2
|
import classnames from "classnames";
|
|
3
3
|
import { Button } from "../Button/Button";
|
|
4
|
+
import { Checkbox } from "../Checkbox";
|
|
4
5
|
import { Dialog } from "../Dialog";
|
|
6
|
+
import { StyledConfirmation } from "./Styles";
|
|
5
7
|
import { Body2 } from "../Typography/Variants/Body2";
|
|
8
|
+
const CONFIRMATION_CHECKBOX_ID = "confirm-dialog-confirmation";
|
|
6
9
|
export const ConfirmDialog = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
7
10
|
let _ref$open = _ref.open,
|
|
8
11
|
open = _ref$open === void 0 ? false : _ref$open,
|
|
@@ -20,10 +23,21 @@ export const ConfirmDialog = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
20
23
|
_ref$shouldShowCancel = _ref.shouldShowCancelButton,
|
|
21
24
|
shouldShowCancelButton = _ref$shouldShowCancel === void 0 ? true : _ref$shouldShowCancel,
|
|
22
25
|
_ref$isLoading = _ref.isLoading,
|
|
23
|
-
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading
|
|
26
|
+
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
|
|
27
|
+
confirmationLabel = _ref.confirmationLabel;
|
|
28
|
+
const _useState = useState(false),
|
|
29
|
+
confirmed = _useState[0],
|
|
30
|
+
setConfirmed = _useState[1];
|
|
31
|
+
const isConfirmBlocked = Boolean(confirmationLabel) && !confirmed;
|
|
32
|
+
const handleToggleConfirmed = useCallback(event => setConfirmed(event.target.checked), []);
|
|
33
|
+
useEffect(() => {
|
|
34
|
+
if (!open) {
|
|
35
|
+
setConfirmed(false);
|
|
36
|
+
}
|
|
37
|
+
}, [open]);
|
|
24
38
|
useEffect(() => {
|
|
25
39
|
const handleKeyDown = event => {
|
|
26
|
-
if (event.key === "Enter" && onConfirm) {
|
|
40
|
+
if (event.key === "Enter" && onConfirm && !isConfirmBlocked) {
|
|
27
41
|
event.preventDefault();
|
|
28
42
|
onConfirm();
|
|
29
43
|
}
|
|
@@ -34,7 +48,7 @@ export const ConfirmDialog = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
34
48
|
return () => {
|
|
35
49
|
window.removeEventListener("keydown", handleKeyDown);
|
|
36
50
|
};
|
|
37
|
-
}, [open, onConfirm]);
|
|
51
|
+
}, [open, onConfirm, isConfirmBlocked]);
|
|
38
52
|
return /*#__PURE__*/React.createElement(Dialog, {
|
|
39
53
|
ref: ref,
|
|
40
54
|
open: open,
|
|
@@ -45,13 +59,24 @@ export const ConfirmDialog = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
45
59
|
lineHeight: "loose",
|
|
46
60
|
color: "secondary",
|
|
47
61
|
whitespace: "pre-line"
|
|
48
|
-
}, dialogContent)
|
|
62
|
+
}, dialogContent), confirmationLabel ? /*#__PURE__*/React.createElement(StyledConfirmation, {
|
|
63
|
+
className: "c-confirm-dialog--confirmation"
|
|
64
|
+
}, /*#__PURE__*/React.createElement(Checkbox, {
|
|
65
|
+
id: CONFIRMATION_CHECKBOX_ID,
|
|
66
|
+
checked: confirmed,
|
|
67
|
+
onChange: handleToggleConfirmed,
|
|
68
|
+
disabled: isLoading
|
|
69
|
+
}), /*#__PURE__*/React.createElement("label", {
|
|
70
|
+
htmlFor: CONFIRMATION_CHECKBOX_ID
|
|
71
|
+
}, /*#__PURE__*/React.createElement(Body2, {
|
|
72
|
+
color: "secondary"
|
|
73
|
+
}, confirmationLabel))) : null), /*#__PURE__*/React.createElement(Dialog.ContentDivider, null), /*#__PURE__*/React.createElement(Dialog.Actions, null, /*#__PURE__*/React.createElement(Button, {
|
|
49
74
|
variant: "primary",
|
|
50
75
|
style: {
|
|
51
76
|
marginRight: "12px"
|
|
52
77
|
},
|
|
53
78
|
onClick: onConfirm,
|
|
54
|
-
disabled: isLoading
|
|
79
|
+
disabled: isLoading || isConfirmBlocked
|
|
55
80
|
}, confirmBtnText), shouldShowCancelButton ? /*#__PURE__*/React.createElement(Button, {
|
|
56
81
|
variant: "secondary",
|
|
57
82
|
"data-action": "cancel",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfirmDialog.js","names":["React","forwardRef","useEffect","classnames","Button","Dialog","Body2","ConfirmDialog","_ref","ref","_ref$open","open","onCancel","onConfirm","className","_ref$dialogTitle","dialogTitle","_ref$dialogContent","dialogContent","_ref$confirmBtnText","confirmBtnText","_ref$cancelBtnText","cancelBtnText","_ref$shouldShowCancel","shouldShowCancelButton","_ref$isLoading","isLoading","
|
|
1
|
+
{"version":3,"file":"ConfirmDialog.js","names":["React","forwardRef","useCallback","useEffect","useState","classnames","Button","Checkbox","Dialog","StyledConfirmation","Body2","CONFIRMATION_CHECKBOX_ID","ConfirmDialog","_ref","ref","_ref$open","open","onCancel","onConfirm","className","_ref$dialogTitle","dialogTitle","_ref$dialogContent","dialogContent","_ref$confirmBtnText","confirmBtnText","_ref$cancelBtnText","cancelBtnText","_ref$shouldShowCancel","shouldShowCancelButton","_ref$isLoading","isLoading","confirmationLabel","_useState","confirmed","setConfirmed","isConfirmBlocked","Boolean","handleToggleConfirmed","event","target","checked","handleKeyDown","key","preventDefault","window","addEventListener","removeEventListener","createElement","onClose","disableCloseOnEsc","Title","ContentDivider","Content","lineHeight","color","whitespace","id","onChange","disabled","htmlFor","Actions","variant","style","marginRight","onClick","type","displayName"],"sources":["../../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useState } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { Button } from \"../Button/Button\";\nimport { Checkbox } from \"../Checkbox\";\nimport { Dialog } from \"../Dialog\";\nimport { StyledConfirmation } from \"./Styles\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\n\nconst CONFIRMATION_CHECKBOX_ID = \"confirm-dialog-confirmation\";\n\nexport interface ConfirmDialogProps {\n open?: boolean;\n onCancel?: () => void;\n onConfirm?: () => void;\n className?: string;\n dialogTitle?: string;\n dialogContent?: React.ReactNode;\n confirmBtnText?: string;\n cancelBtnText?: string;\n shouldShowCancelButton?: boolean;\n isLoading?: boolean;\n confirmationLabel?: string;\n}\n\nexport const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(\n (\n {\n open = false,\n onCancel,\n onConfirm,\n className,\n dialogTitle = \"Discard changes?\",\n dialogContent = \"All unsaved changes will be lost.\",\n confirmBtnText = \"OK\",\n cancelBtnText = \"Cancel\",\n shouldShowCancelButton = true,\n isLoading = false,\n confirmationLabel,\n },\n ref\n ) => {\n const [confirmed, setConfirmed] = useState(false);\n const isConfirmBlocked = Boolean(confirmationLabel) && !confirmed;\n\n const handleToggleConfirmed = useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) =>\n setConfirmed(event.target.checked),\n []\n );\n\n useEffect(() => {\n if (!open) {\n setConfirmed(false);\n }\n }, [open]);\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Enter\" && onConfirm && !isConfirmBlocked) {\n event.preventDefault();\n onConfirm();\n }\n };\n\n if (open) {\n window.addEventListener(\"keydown\", handleKeyDown);\n }\n\n return () => {\n window.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [open, onConfirm, isConfirmBlocked]);\n\n return (\n <Dialog\n ref={ref}\n open={open}\n onClose={onCancel}\n className={classnames(\"c-confirm-dialog\", className)}\n disableCloseOnEsc={isLoading}\n >\n <Dialog.Title>{dialogTitle}</Dialog.Title>\n <Dialog.ContentDivider />\n <Dialog.Content>\n <Body2 lineHeight=\"loose\" color=\"secondary\" whitespace=\"pre-line\">\n {dialogContent}\n </Body2>\n {confirmationLabel ? (\n <StyledConfirmation className=\"c-confirm-dialog--confirmation\">\n <Checkbox\n id={CONFIRMATION_CHECKBOX_ID}\n checked={confirmed}\n onChange={handleToggleConfirmed}\n disabled={isLoading}\n />\n <label htmlFor={CONFIRMATION_CHECKBOX_ID}>\n <Body2 color=\"secondary\">{confirmationLabel}</Body2>\n </label>\n </StyledConfirmation>\n ) : null}\n </Dialog.Content>\n <Dialog.ContentDivider />\n <Dialog.Actions>\n <Button\n variant=\"primary\"\n style={{ marginRight: \"12px\" }}\n onClick={onConfirm}\n disabled={isLoading || isConfirmBlocked}\n >\n {confirmBtnText}\n </Button>\n {shouldShowCancelButton ? (\n <Button\n variant=\"secondary\"\n data-action=\"cancel\"\n onClick={onCancel}\n type=\"button\"\n disabled={isLoading}\n >\n {cancelBtnText}\n </Button>\n ) : null}\n </Dialog.Actions>\n </Dialog>\n );\n }\n);\n\nConfirmDialog.displayName = \"ConfirmDialog\";\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ConfirmDialog/Styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,oEAS9B,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
export const StyledConfirmation = styled.div.withConfig({
|
|
3
|
+
displayName: "Styles__StyledConfirmation",
|
|
4
|
+
componentId: "sc-1hepb1k-0"
|
|
5
|
+
})(["display:flex;align-items:center;gap:8px;margin-top:16px;label{cursor:pointer;}"]);
|
|
6
|
+
StyledConfirmation.displayName = "StyledConfirmation";
|
|
7
|
+
//# sourceMappingURL=Styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","StyledConfirmation","div","withConfig","displayName","componentId"],"sources":["../../../../src/components/ConfirmDialog/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const StyledConfirmation = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 16px;\n\n label {\n cursor: pointer;\n }\n`;\n\nStyledConfirmation.displayName = \"StyledConfirmation\";\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sFAS3C;AAEDJ,kBAAkB,CAACG,WAAW,GAAG,oBAAoB","ignoreList":[]}
|