",
8 | "license": "MIT",
9 | "devDependencies": {
10 | "@babel/cli": "^7.14.5",
11 | "@babel/core": "^7.14.6",
12 | "@babel/eslint-parser": "^7.14.7",
13 | "@babel/node": "^7.14.7",
14 | "@babel/plugin-transform-async-to-generator": "^7.14.5",
15 | "@babel/plugin-transform-regenerator": "^7.14.5",
16 | "@babel/preset-env": "^7.14.7",
17 | "@babel/preset-react": "^7.14.5",
18 | "@babel/register": "^7.14.5",
19 | "@babel/runtime": "^7.14.6",
20 | "@storybook/addon-actions": "^6.3.4",
21 | "@storybook/addon-essentials": "^6.3.4",
22 | "@storybook/addon-info": "^5.3.21",
23 | "@storybook/addon-links": "^6.3.4",
24 | "@storybook/addons": "^6.3.4",
25 | "@storybook/builder-webpack5": "^6.3.4",
26 | "@storybook/manager-webpack5": "^6.3.4",
27 | "@storybook/react": "^6.3.4",
28 | "@storybook/storybook-deployer": "^2.8.10",
29 | "@testing-library/jest-dom": "^5.14.1",
30 | "@testing-library/react": "^12.0.0",
31 | "babel-eslint": "^10.1.0",
32 | "babel-jest": "^27.0.6",
33 | "babel-loader": "^8.2.2",
34 | "bootstrap": "^5.0.2",
35 | "core-js": "^3.15.2",
36 | "css-loader": "^5.2.6",
37 | "eslint": "^7.30.0",
38 | "eslint-plugin-react": "^7.24.0",
39 | "gh-pages": "^3.2.3",
40 | "html-loader": "^2.1.2",
41 | "html-webpack-plugin": "^5.3.2",
42 | "jest": "^27.0.6",
43 | "jsdom": "^16.6.0",
44 | "node-notifier": "^10.0.0",
45 | "react": "^17.0.2",
46 | "react-dom": "^17.0.2",
47 | "reactstrap": "^8.9.0",
48 | "regenerator-runtime": "^0.13.7",
49 | "sinon": "^11.1.1",
50 | "style-loader": "^3.0.0",
51 | "webpack": "^5.44.0",
52 | "webpack-cli": "^4.7.2",
53 | "webpack-dev": "^1.1.1",
54 | "webpack-dev-server": "^3.11.2"
55 | },
56 | "scripts": {
57 | "test": "node_modules/.bin/jest ",
58 | "tdd": "node_modules/.bin/jest --watch --notify ",
59 | "start": "npx webpack serve --mode=development",
60 | "build": "babel src -d dist --copy-files",
61 | "prepublishOnly": "npm run build",
62 | "buildExample": "npm run build-storybook",
63 | "deploy": "storybook-to-ghpages",
64 | "storybook": "start-storybook -p 6006",
65 | "build-storybook": "build-storybook"
66 | },
67 | "peerDependencies": {
68 | "react": "^17.0",
69 | "react-dom": "^17.0",
70 | "reactstrap": "^8.9"
71 | },
72 | "dependencies": {
73 | "lodash.defaults": "^4.2.0"
74 | },
75 | "storybook-deployer": {
76 | "gitUsername": "algm",
77 | "gitEmail": "algm85@gmail.com",
78 | "commitMessage": "Deploy Storybook [skip ci]"
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/src/components/ConfirmModal.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
4 |
5 | const ConfirmModal = ({
6 | onClose,
7 | message,
8 | title,
9 | confirmText,
10 | cancelText,
11 | confirmColor,
12 | cancelColor,
13 | className,
14 | buttonsComponent,
15 | size,
16 | bodyComponent,
17 | modalProps,
18 | }) => {
19 | let buttonsContent = (
20 |
21 | {cancelText && (
22 |
25 | )}{' '}
26 |
29 |
30 | );
31 |
32 | if (buttonsComponent) {
33 | const CustomComponent = buttonsComponent;
34 | buttonsContent = ;
35 | }
36 |
37 | let BodyComponent = bodyComponent;
38 |
39 | return (
40 | onClose(false)}
44 | className={`reactstrap-confirm ${className}`}
45 | {...modalProps}
46 | >
47 | {title && (
48 | onClose(false)}>{title || null}
49 | )}
50 | {bodyComponent ? : message}
51 | {buttonsContent}
52 |
53 | );
54 | };
55 |
56 | ConfirmModal.defaultProps = {
57 | message: 'Are you sure?',
58 | title: 'Warning!',
59 | confirmText: 'Ok',
60 | cancelText: 'Cancel',
61 | confirmColor: 'primary',
62 | cancelColor: '',
63 | className: '',
64 | buttonsComponent: null,
65 | size: null,
66 | bodyComponent: null,
67 | modalProps: {},
68 | };
69 |
70 | ConfirmModal.propTypes = {
71 | onClose: PropTypes.func.isRequired,
72 | message: PropTypes.node,
73 | title: PropTypes.node,
74 | confirmText: PropTypes.node,
75 | cancelText: PropTypes.node,
76 | confirmColor: PropTypes.string,
77 | cancelColor: PropTypes.string,
78 | className: PropTypes.string,
79 | size: PropTypes.string,
80 | buttonsComponent: PropTypes.func,
81 | bodyComponent: PropTypes.func,
82 | modalProps: PropTypes.object,
83 | };
84 |
85 | export default ConfirmModal;
86 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render, unmountComponentAtNode } from 'react-dom';
3 | import ConfirmModal from './components/ConfirmModal';
4 |
5 | const confirm = (props) => {
6 | return new Promise((resolve) => {
7 | let el = document.createElement('div');
8 |
9 | const handleResolve = (result) => {
10 | unmountComponentAtNode(el);
11 | el = null;
12 | resolve(result);
13 | };
14 |
15 | render(, el);
16 | });
17 | };
18 |
19 | export default confirm;
20 |
--------------------------------------------------------------------------------
/stories/0-Confirm.stories.js:
--------------------------------------------------------------------------------
1 | import 'bootstrap/dist/css/bootstrap.min.css';
2 | import React, { useState } from 'react';
3 | import confirm from '../src/index';
4 | import PropTypes from 'prop-types';
5 | import {
6 | Button,
7 | Container,
8 | Card,
9 | CardImg,
10 | CardBody,
11 | CardText,
12 | } from 'reactstrap';
13 |
14 | export default {
15 | title: 'Confirm dialog',
16 | };
17 |
18 | export const basic = () => {
19 | const [confirmed, setConfirmed] = useState(false);
20 |
21 | const basicDialog = async () => {
22 | const result = await confirm();
23 |
24 | setConfirmed(result);
25 | };
26 |
27 | return (
28 |
29 | By default, the confirm function will render a basic dialog.
30 |
31 |
32 | Confirmed: {confirmed ? 'true' : 'false'}
33 |
34 |
35 | );
36 | };
37 |
38 | export const customized = () => {
39 | const [confirmed, setConfirmed] = useState(false);
40 |
41 | const customizedDialog = async () => {
42 | const result = await confirm({
43 | title: 'I am a custom title 😍',
44 | message: (
45 |
46 |
52 |
53 |
54 | You can customize the message using anything you want!
55 |
56 |
57 |
58 | ),
59 | confirmColor: 'danger',
60 | cancelText: "I am not sure, don't do anything",
61 | confirmText: 'Yes, I am sure, proceed!',
62 | size: 'sm',
63 | });
64 |
65 | setConfirmed(result);
66 | };
67 |
68 | return (
69 |
70 |
71 | You have a lot of customization options, see{' '}
72 |
77 | Readme
78 | {' '}
79 | for options.
80 |
81 |
82 |
83 | Confirmed: {confirmed ? 'true' : 'false'}
84 |
85 |
86 | );
87 | };
88 |
89 | export const Alert = () => {
90 | const alertDialog = async () => {
91 | await confirm({
92 | title: 'Warning!',
93 | message: 'You can use the confirm function as a way to display alerts!',
94 | cancelText: null,
95 | confirmText: 'Understood!',
96 | });
97 | };
98 |
99 | return (
100 |
101 |
102 | This module can also be used for displaying alerts if you pass the
103 | cancelText as null (that will hide the cancel action).
104 |
105 |
106 |
107 | );
108 | };
109 |
110 | export const customButtonsComponent = () => {
111 | const [confirmed, setConfirmed] = useState(false);
112 |
113 | const customButtonsDialog = async () => {
114 | const CustomComponent = ({ onClose }) => (
115 |
116 |
I added a custom component for buttons!!
117 |
124 |
141 | You can pass a custom buttons component to customize the behavior even
142 | further!
143 |
144 |
145 |
146 | Confirmed: {confirmed ? 'true' : 'false'}
147 |
148 |
149 | );
150 | };
151 |
152 | /*import { Button } from '@storybook/react/demo';
153 |
154 | export default {
155 | title: 'Button',
156 | };
157 |
158 | export const text = () => ;
159 |
160 | export const emoji = () => (
161 |
166 | );
167 | */
168 |
--------------------------------------------------------------------------------
/test/components/dialog.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @jest-environment jsdom
3 | */
4 |
5 | /* global describe, it, expect */
6 | import React from 'react';
7 | import { render, screen } from '@testing-library/react';
8 | import Dialog from '../../src/components/ConfirmModal';
9 | import { Button } from 'reactstrap';
10 |
11 | describe('confirm dialog component', () => {
12 | it('renders with defaults', () => {
13 | render();
14 |
15 | expect(screen.findByRole('dialog')).toBeDefined();
16 | });
17 |
18 | describe('content customization', () => {
19 | it('can customize title', () => {
20 | render();
21 | const found = screen.findByText('custom title');
22 |
23 | expect(found).toBeDefined();
24 | });
25 |
26 | it('can customize message', () => {
27 | render();
28 | const found = screen.findByText('custom text');
29 | expect(found).toBeDefined();
30 | });
31 |
32 | it('can customize size', () => {
33 | render();
34 | const dialog = screen.getByRole('dialog');
35 |
36 | const classes = dialog.getElementsByClassName('modal-lg');
37 |
38 | expect(classes.length).toEqual(1);
39 | });
40 | });
41 |
42 | describe('button customization', () => {
43 | it('can customize colors', () => {
44 | render(
45 |
50 | );
51 | const dialog = screen.getByRole('dialog');
52 |
53 | expect(dialog.getElementsByClassName('btn-confirmColor').length).toEqual(
54 | 1
55 | );
56 | expect(dialog.getElementsByClassName('btn-cancelColor').length).toEqual(
57 | 1
58 | );
59 | });
60 |
61 | it('can customize text', () => {
62 | render(
63 |
70 | );
71 |
72 | expect(screen.getByText('confirmText')).toBeDefined();
73 | expect(screen.getByText('cancelText')).toBeDefined();
74 | });
75 |
76 | it('can customize buttons component', () => {
77 | const CustomButtons = ({ onClose }) => (
78 |
79 |
82 |
83 | );
84 |
85 | render(
86 |
87 | );
88 |
89 | const dialog = screen.getByRole('dialog');
90 |
91 | expect(dialog.getElementsByClassName('custom-buttons').length).toEqual(1);
92 | });
93 | });
94 | });
95 |
--------------------------------------------------------------------------------
/test/confirm.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @jest-environment jsdom
3 | */
4 |
5 | /* global describe, it, expect, jest */
6 | import confirm from '../src/index';
7 | import { screen } from '@testing-library/dom';
8 | import { fireEvent } from '@testing-library/react';
9 |
10 | describe('confirm function', () => {
11 | it('renders the modal on calling', () => {
12 | confirm();
13 |
14 | const found = screen.findByText('Are you sure?');
15 |
16 | expect(found).toBeDefined();
17 |
18 | const button = screen.getByText('Ok');
19 |
20 | fireEvent.click(button);
21 | });
22 | });
23 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | /*** webpack.config.js ***/
2 | const path = require('path');
3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
4 | const htmlWebpackPlugin = new HtmlWebpackPlugin({
5 | template: path.join(__dirname, 'examples/src/index.html'),
6 | filename: './index.html',
7 | });
8 | module.exports = {
9 | entry: path.join(__dirname, 'examples/src/index.js'),
10 | mode: process.env.NODE_ENV || 'production',
11 | output: {
12 | path: path.join(__dirname, 'examples/dist'),
13 | filename: 'bundle.js',
14 | },
15 | module: {
16 | rules: [
17 | {
18 | test: /\.(js|jsx)$/,
19 | use: 'babel-loader',
20 | exclude: /node_modules/,
21 | },
22 | ],
23 | },
24 | plugins: [htmlWebpackPlugin],
25 | resolve: {
26 | extensions: ['.js', '.jsx'],
27 | },
28 | devServer: {
29 | port: 3001,
30 | },
31 | };
32 |
--------------------------------------------------------------------------------