@servicetitan/confirm-navigation 22.2.0 → 22.3.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.
- package/CHANGELOG.md +17 -0
- package/dist/confirm-navigation.d.ts +12 -3
- package/dist/confirm-navigation.d.ts.map +1 -1
- package/dist/confirm-navigation.js +3 -2
- package/dist/confirm-navigation.js.map +1 -1
- package/dist/confirm-navigation.stories.d.ts +8 -0
- package/dist/confirm-navigation.stories.d.ts.map +1 -0
- package/dist/confirm-navigation.stories.js +15 -0
- package/dist/confirm-navigation.stories.js.map +1 -0
- package/dist/demo/custom.d.ts +3 -0
- package/dist/demo/custom.d.ts.map +1 -0
- package/dist/demo/custom.js +14 -0
- package/dist/demo/custom.js.map +1 -0
- package/package.json +2 -2
- package/src/confirm-navigation.stories.tsx +35 -0
- package/src/confirm-navigation.tsx +42 -14
- package/src/demo/custom.tsx +44 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,20 @@
|
|
|
1
|
+
# v22.3.0 (Mon Jul 04 2022)
|
|
2
|
+
|
|
3
|
+
:tada: This release contains work from a new contributor! :tada:
|
|
4
|
+
|
|
5
|
+
Thank you, Trdat Mkrtchyan ([@zefirka](https://github.com/zefirka)), for all your work!
|
|
6
|
+
|
|
7
|
+
#### 🚀 Enhancement
|
|
8
|
+
|
|
9
|
+
- [confirm-navigation]: add custom renderer [#117](https://github.com/servicetitan/anvil-uikit-contrib/pull/117) ([@zefirka](https://github.com/zefirka) [@karpoff-titan](https://github.com/karpoff-titan))
|
|
10
|
+
|
|
11
|
+
#### Authors: 2
|
|
12
|
+
|
|
13
|
+
- Anton Karpov ([@karpoff-titan](https://github.com/karpoff-titan))
|
|
14
|
+
- Trdat Mkrtchyan ([@zefirka](https://github.com/zefirka))
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
1
18
|
# v22.0.1 (Tue Jun 21 2022)
|
|
2
19
|
|
|
3
20
|
#### 🐛 Bug Fix
|
|
@@ -1,15 +1,24 @@
|
|
|
1
|
-
|
|
1
|
+
import { ComponentType, FC } from 'react';
|
|
2
2
|
import { RouteComponentProps } from 'react-router-dom';
|
|
3
3
|
declare global {
|
|
4
4
|
export interface Window {
|
|
5
5
|
App: any;
|
|
6
6
|
}
|
|
7
7
|
}
|
|
8
|
-
interface
|
|
8
|
+
interface ConfirmNavigationRenderProps {
|
|
9
|
+
isOpen: boolean;
|
|
10
|
+
title?: string;
|
|
11
|
+
description?: string;
|
|
12
|
+
onConfirm(): void;
|
|
13
|
+
onCancel(): void;
|
|
14
|
+
}
|
|
15
|
+
export interface ConfirmNavigationOwnProps {
|
|
9
16
|
when?: boolean;
|
|
10
17
|
title?: string;
|
|
11
18
|
description?: string;
|
|
19
|
+
component?: ComponentType<ConfirmNavigationRenderProps> | FC<ConfirmNavigationRenderProps>;
|
|
12
20
|
}
|
|
13
|
-
export declare
|
|
21
|
+
export declare type ConfirmNavigationProps = ConfirmNavigationOwnProps & RouteComponentProps;
|
|
22
|
+
export declare const ConfirmNavigation: import("react").ComponentClass<Pick<ConfirmNavigationOwnProps & RouteComponentProps<{}, import("react-router").StaticContext, unknown>, keyof ConfirmNavigationOwnProps>, any> & import("react-router").WithRouterStatics<({ when, ...props }: ConfirmNavigationProps) => JSX.Element | null>;
|
|
14
23
|
export {};
|
|
15
24
|
//# sourceMappingURL=confirm-navigation.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"confirm-navigation.d.ts","sourceRoot":"","sources":["../src/confirm-navigation.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"confirm-navigation.d.ts","sourceRoot":"","sources":["../src/confirm-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,aAAa,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAc,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAanE,OAAO,CAAC,MAAM,CAAC;IACX,MAAM,WAAW,MAAM;QACnB,GAAG,EAAE,GAAG,CAAC;KACZ;CACJ;AAED,UAAU,4BAA4B;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,IAAI,IAAI,CAAC;IAClB,QAAQ,IAAI,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,yBAAyB;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC,4BAA4B,CAAC,GAAG,EAAE,CAAC,4BAA4B,CAAC,CAAC;CAC9F;AAED,oBAAY,sBAAsB,GAAG,yBAAyB,GAAG,mBAAmB,CAAC;AAyLrF,eAAO,MAAM,iBAAiB,iPAA0C,sBAAsB,wBAE7F,CAAC"}
|
|
@@ -26,6 +26,7 @@ import { observer } from 'mobx-react';
|
|
|
26
26
|
import { Dialog } from '@servicetitan/design-system';
|
|
27
27
|
import { injectDependency, optional } from '@servicetitan/react-ioc';
|
|
28
28
|
import { HistoryManager } from '@servicetitan/web-components';
|
|
29
|
+
const DefaultConfirmComponent = ({ title, description, isOpen, onConfirm, onCancel, }) => (_jsx(Dialog, Object.assign({ negative: true, open: isOpen, title: title, onPrimaryActionClick: onConfirm, primaryActionName: "Leave", onSecondaryActionClick: onCancel, secondaryActionName: "Stay", onClose: onCancel }, { children: description })));
|
|
29
30
|
let ConfirmNavigationUnwrapped = class ConfirmNavigationUnwrapped extends Component {
|
|
30
31
|
constructor(props) {
|
|
31
32
|
super(props);
|
|
@@ -169,8 +170,8 @@ let ConfirmNavigationUnwrapped = class ConfirmNavigationUnwrapped extends Compon
|
|
|
169
170
|
}
|
|
170
171
|
}
|
|
171
172
|
render() {
|
|
172
|
-
const { title, description } = this.props;
|
|
173
|
-
return (_jsx(
|
|
173
|
+
const { title, description, component: Component = DefaultConfirmComponent } = this.props;
|
|
174
|
+
return (_jsx(Component, { isOpen: this.isOpen, title: title, description: description, onConfirm: this.handleConfirm, onCancel: this.handleCancel }));
|
|
174
175
|
}
|
|
175
176
|
};
|
|
176
177
|
Object.defineProperty(ConfirmNavigationUnwrapped, "defaultProps", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"confirm-navigation.js","sourceRoot":"","sources":["../src/confirm-navigation.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"confirm-navigation.js","sourceRoot":"","sources":["../src/confirm-navigation.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare const _default: {
|
|
3
|
+
title: string;
|
|
4
|
+
};
|
|
5
|
+
export default _default;
|
|
6
|
+
export declare const Basic: () => JSX.Element;
|
|
7
|
+
export declare const Custom: () => JSX.Element;
|
|
8
|
+
//# sourceMappingURL=confirm-navigation.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"confirm-navigation.stories.d.ts","sourceRoot":"","sources":["../src/confirm-navigation.stories.tsx"],"names":[],"mappings":";;;;AAMA,wBAEE;AAEF,eAAO,MAAM,KAAK,mBAWjB,CAAC;AAEF,eAAO,MAAM,MAAM,mBAWlB,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Button } from '@servicetitan/design-system';
|
|
3
|
+
import { BrowserRouter, Link } from 'react-router-dom';
|
|
4
|
+
import { BasicExample } from './demo';
|
|
5
|
+
import { CustomExample } from './demo/custom';
|
|
6
|
+
export default {
|
|
7
|
+
title: 'Confirm Navigation',
|
|
8
|
+
};
|
|
9
|
+
export const Basic = () => {
|
|
10
|
+
return (_jsxs(BrowserRouter, { children: [_jsx(BasicExample, {}), _jsx(Link, Object.assign({ to: "/some-new-path" }, { children: _jsx(Button, Object.assign({ primary: true, className: "m-t-2" }, { children: "Try" })) }))] }));
|
|
11
|
+
};
|
|
12
|
+
export const Custom = () => {
|
|
13
|
+
return (_jsxs(BrowserRouter, { children: [_jsx(CustomExample, {}), _jsx(Link, Object.assign({ to: "/some-new-path" }, { children: _jsx(Button, Object.assign({ primary: true, className: "m-t-2" }, { children: "Try" })) }))] }));
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=confirm-navigation.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"confirm-navigation.stories.js","sourceRoot":"","sources":["../src/confirm-navigation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,eAAe;IACX,KAAK,EAAE,oBAAoB;CAC9B,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACtB,OAAO,CACH,MAAC,aAAa,eACV,KAAC,YAAY,KAAG,EAChB,KAAC,IAAI,kBAAC,EAAE,EAAC,gBAAgB,gBACrB,KAAC,MAAM,kBAAC,OAAO,QAAC,SAAS,EAAC,OAAO,yBAExB,IACN,IACK,CACnB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,EAAE;IACvB,OAAO,CACH,MAAC,aAAa,eACV,KAAC,aAAa,KAAG,EACjB,KAAC,IAAI,kBAAC,EAAE,EAAC,gBAAgB,gBACrB,KAAC,MAAM,kBAAC,OAAO,QAAC,SAAS,EAAC,OAAO,yBAExB,IACN,IACK,CACnB,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"custom.d.ts","sourceRoot":"","sources":["../../src/demo/custom.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,EAAE,EAAE,MAAM,OAAO,CAAC;AAM/C,eAAO,MAAM,aAAa,EAAE,EAqC3B,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState, Fragment } from 'react';
|
|
3
|
+
import { Checkbox, Modal, ButtonGroup, Button, BodyText } from '@servicetitan/design-system';
|
|
4
|
+
import { ConfirmNavigation } from '..';
|
|
5
|
+
export const CustomExample = () => {
|
|
6
|
+
const [confirm, setConfirm] = useState(true);
|
|
7
|
+
const handleChange = (_0, checked) => {
|
|
8
|
+
setConfirm(checked);
|
|
9
|
+
};
|
|
10
|
+
return (_jsxs(Fragment, { children: [_jsx(Checkbox, { label: "Confirm Navigation?", checked: confirm, onChange: handleChange }), _jsx(ConfirmNavigation, { when: confirm, title: "Are you sure you want to leave?", description: "If you leave all changes will be lost.", component: ({ isOpen, onCancel, onConfirm, title, description }) => {
|
|
11
|
+
return (_jsx(Modal, Object.assign({ open: isOpen, onClose: onCancel, title: title, footer: _jsxs(ButtonGroup, { children: [_jsx(Button, Object.assign({ onClick: onCancel }, { children: "No, stay" })), _jsx(Button, Object.assign({ onClick: onConfirm, color: "negative" }, { children: "Yes, leave" }))] }) }, { children: _jsx(BodyText, Object.assign({ subdued: true }, { children: description })) })));
|
|
12
|
+
} })] }));
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=custom.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"custom.js","sourceRoot":"","sources":["../../src/demo/custom.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAM,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAE7F,OAAO,EAAE,iBAAiB,EAAE,MAAM,IAAI,CAAC;AAEvC,MAAM,CAAC,MAAM,aAAa,GAAO,GAAG,EAAE;IAClC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE7C,MAAM,YAAY,GAAG,CAAC,EAAS,EAAE,OAAgB,EAAE,EAAE;QACjD,UAAU,CAAC,OAAO,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,OAAO,CACH,MAAC,QAAQ,eACL,KAAC,QAAQ,IAAC,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,GAAI,EAElF,KAAC,iBAAiB,IACd,IAAI,EAAE,OAAO,EACb,KAAK,EAAC,iCAAiC,EACvC,WAAW,EAAC,wCAAwC,EACpD,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE;oBAC/D,OAAO,CACH,KAAC,KAAK,kBACF,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAE,KAAK,EACZ,MAAM,EACF,MAAC,WAAW,eACR,KAAC,MAAM,kBAAC,OAAO,EAAE,QAAQ,8BAAmB,EAC5C,KAAC,MAAM,kBAAC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAC,UAAU,gCAEnC,IACC,gBAGlB,KAAC,QAAQ,kBAAC,OAAO,sBAAE,WAAW,IAAY,IACtC,CACX,CAAC;gBACN,CAAC,GACH,IACK,CACd,CAAC;AACN,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/confirm-navigation",
|
|
3
|
-
"version": "22.
|
|
3
|
+
"version": "22.3.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"homepage": "https://docs.st.dev/docs/frontend/confirm-navigation",
|
|
6
6
|
"repository": {
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"cli": {
|
|
47
47
|
"webpack": false
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "9ff86a1eef1078b7a38b5fee09b7e96715617da7"
|
|
50
50
|
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { Button } from '@servicetitan/design-system';
|
|
2
|
+
import { BrowserRouter, Link } from 'react-router-dom';
|
|
3
|
+
|
|
4
|
+
import { BasicExample } from './demo';
|
|
5
|
+
import { CustomExample } from './demo/custom';
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
title: 'Confirm Navigation',
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export const Basic = () => {
|
|
12
|
+
return (
|
|
13
|
+
<BrowserRouter>
|
|
14
|
+
<BasicExample />
|
|
15
|
+
<Link to="/some-new-path">
|
|
16
|
+
<Button primary className="m-t-2">
|
|
17
|
+
Try
|
|
18
|
+
</Button>
|
|
19
|
+
</Link>
|
|
20
|
+
</BrowserRouter>
|
|
21
|
+
);
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
export const Custom = () => {
|
|
25
|
+
return (
|
|
26
|
+
<BrowserRouter>
|
|
27
|
+
<CustomExample />
|
|
28
|
+
<Link to="/some-new-path">
|
|
29
|
+
<Button primary className="m-t-2">
|
|
30
|
+
Try
|
|
31
|
+
</Button>
|
|
32
|
+
</Link>
|
|
33
|
+
</BrowserRouter>
|
|
34
|
+
);
|
|
35
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component } from 'react';
|
|
1
|
+
import { Component, ComponentType, FC } from 'react';
|
|
2
2
|
import { withRouter, RouteComponentProps } from 'react-router-dom';
|
|
3
3
|
|
|
4
4
|
import { observable, action, runInAction, comparer, makeObservable } from 'mobx';
|
|
@@ -18,12 +18,44 @@ declare global {
|
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
interface
|
|
21
|
+
interface ConfirmNavigationRenderProps {
|
|
22
|
+
isOpen: boolean;
|
|
23
|
+
title?: string;
|
|
24
|
+
description?: string;
|
|
25
|
+
onConfirm(): void;
|
|
26
|
+
onCancel(): void;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export interface ConfirmNavigationOwnProps {
|
|
22
30
|
when?: boolean;
|
|
23
31
|
title?: string;
|
|
24
32
|
description?: string;
|
|
33
|
+
component?: ComponentType<ConfirmNavigationRenderProps> | FC<ConfirmNavigationRenderProps>;
|
|
25
34
|
}
|
|
26
35
|
|
|
36
|
+
export type ConfirmNavigationProps = ConfirmNavigationOwnProps & RouteComponentProps;
|
|
37
|
+
|
|
38
|
+
const DefaultConfirmComponent: FC<ConfirmNavigationRenderProps> = ({
|
|
39
|
+
title,
|
|
40
|
+
description,
|
|
41
|
+
isOpen,
|
|
42
|
+
onConfirm,
|
|
43
|
+
onCancel,
|
|
44
|
+
}) => (
|
|
45
|
+
<Dialog
|
|
46
|
+
negative
|
|
47
|
+
open={isOpen}
|
|
48
|
+
title={title}
|
|
49
|
+
onPrimaryActionClick={onConfirm}
|
|
50
|
+
primaryActionName="Leave"
|
|
51
|
+
onSecondaryActionClick={onCancel}
|
|
52
|
+
secondaryActionName="Stay"
|
|
53
|
+
onClose={onCancel}
|
|
54
|
+
>
|
|
55
|
+
{description}
|
|
56
|
+
</Dialog>
|
|
57
|
+
);
|
|
58
|
+
|
|
27
59
|
@observer
|
|
28
60
|
class ConfirmNavigationUnwrapped extends Component<ConfirmNavigationProps> {
|
|
29
61
|
static defaultProps: Partial<ConfirmNavigationProps> = {
|
|
@@ -172,20 +204,16 @@ class ConfirmNavigationUnwrapped extends Component<ConfirmNavigationProps> {
|
|
|
172
204
|
};
|
|
173
205
|
|
|
174
206
|
render() {
|
|
175
|
-
const { title, description } = this.props;
|
|
207
|
+
const { title, description, component: Component = DefaultConfirmComponent } = this.props;
|
|
208
|
+
|
|
176
209
|
return (
|
|
177
|
-
<
|
|
178
|
-
|
|
179
|
-
open={this.isOpen}
|
|
210
|
+
<Component
|
|
211
|
+
isOpen={this.isOpen}
|
|
180
212
|
title={title}
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
onClose={this.handleCancel}
|
|
186
|
-
>
|
|
187
|
-
{description}
|
|
188
|
-
</Dialog>
|
|
213
|
+
description={description}
|
|
214
|
+
onConfirm={this.handleConfirm}
|
|
215
|
+
onCancel={this.handleCancel}
|
|
216
|
+
/>
|
|
189
217
|
);
|
|
190
218
|
}
|
|
191
219
|
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { useState, Fragment, FC } from 'react';
|
|
2
|
+
|
|
3
|
+
import { Checkbox, Modal, ButtonGroup, Button, BodyText } from '@servicetitan/design-system';
|
|
4
|
+
|
|
5
|
+
import { ConfirmNavigation } from '..';
|
|
6
|
+
|
|
7
|
+
export const CustomExample: FC = () => {
|
|
8
|
+
const [confirm, setConfirm] = useState(true);
|
|
9
|
+
|
|
10
|
+
const handleChange = (_0: never, checked: boolean) => {
|
|
11
|
+
setConfirm(checked);
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
return (
|
|
15
|
+
<Fragment>
|
|
16
|
+
<Checkbox label="Confirm Navigation?" checked={confirm} onChange={handleChange} />
|
|
17
|
+
|
|
18
|
+
<ConfirmNavigation
|
|
19
|
+
when={confirm}
|
|
20
|
+
title="Are you sure you want to leave?"
|
|
21
|
+
description="If you leave all changes will be lost."
|
|
22
|
+
component={({ isOpen, onCancel, onConfirm, title, description }) => {
|
|
23
|
+
return (
|
|
24
|
+
<Modal
|
|
25
|
+
open={isOpen}
|
|
26
|
+
onClose={onCancel}
|
|
27
|
+
title={title}
|
|
28
|
+
footer={
|
|
29
|
+
<ButtonGroup>
|
|
30
|
+
<Button onClick={onCancel}>No, stay</Button>
|
|
31
|
+
<Button onClick={onConfirm} color="negative">
|
|
32
|
+
Yes, leave
|
|
33
|
+
</Button>
|
|
34
|
+
</ButtonGroup>
|
|
35
|
+
}
|
|
36
|
+
>
|
|
37
|
+
<BodyText subdued>{description}</BodyText>
|
|
38
|
+
</Modal>
|
|
39
|
+
);
|
|
40
|
+
}}
|
|
41
|
+
/>
|
|
42
|
+
</Fragment>
|
|
43
|
+
);
|
|
44
|
+
};
|