From 5433a4369062d4b6d11cc8aa491718737070ea64 Mon Sep 17 00:00:00 2001 From: John Kapantzakis Date: Fri, 24 Mar 2023 15:00:53 +0200 Subject: [PATCH 1/4] Add loading state to corfirmation dialog button --- .../confirmation-dialog.js | 18 +++++++++++++++--- .../confirmation-dialog.stories.js | 19 +++++++++++++++++++ 2 files changed, 34 insertions(+), 3 deletions(-) diff --git a/src/components/confirmation-dialog/confirmation-dialog.js b/src/components/confirmation-dialog/confirmation-dialog.js index a9bb31684..cd1e1d92c 100644 --- a/src/components/confirmation-dialog/confirmation-dialog.js +++ b/src/components/confirmation-dialog/confirmation-dialog.js @@ -2,6 +2,7 @@ import React from "react" import Flex from "src/components/templates/flex" import { Button } from "src/components/button" import { Text } from "src/components/typography" +import useToggle from "react-use/lib/useToggle" import { Actions, Body, CloseButton, Content, Dialog, Header, Title, TitleIcon } from "./styled" const BodyMessage = ({ children, ...rest }) => @@ -9,6 +10,7 @@ const BodyMessage = ({ children, ...rest }) => const ConfirmationDialog = ({ confirmLabel = "Yes, remove", + confirmLoadingLabel = "Loading...", confirmWidth = "128px", "data-ga": dataGA = "confirmation-dialog", "data-testid": dataTestId = "confirmationDialog", @@ -22,7 +24,16 @@ const ConfirmationDialog = ({ isConfirmPositive, message, title, + showConfirmLoading, + disableConfirmOnLoading, }) => { + const [loading, toggleLoading] = useToggle(false) + + const onConfirm = e => { + if (showConfirmLoading) toggleLoading() + handleConfirm(e, toggleLoading) + } + return ( @@ -53,10 +64,11 @@ const ConfirmationDialog = ({ data-ga={`${dataGA}-::click-confirm::global-view`} data-testid={`${dataTestId}-confirmAction`} danger={!isConfirmPositive && true} - disabled={isConfirmDisabled} - label={confirmLabel} - onClick={handleConfirm} + disabled={isConfirmDisabled || (disableConfirmOnLoading && loading)} + label={loading ? confirmLoadingLabel : confirmLabel} + onClick={onConfirm} width={confirmWidth} + isLoading={loading} /> diff --git a/src/components/confirmation-dialog/confirmation-dialog.stories.js b/src/components/confirmation-dialog/confirmation-dialog.stories.js index e8e9554b6..4f131a1fe 100644 --- a/src/components/confirmation-dialog/confirmation-dialog.stories.js +++ b/src/components/confirmation-dialog/confirmation-dialog.stories.js @@ -19,3 +19,22 @@ Story.add("Confirmation dialog", () => { /> ) }) + +Story.add("Confirmation dialog with loading", () => { + return ( + { + console.log("Pressed confirm") + setTimeout(() => toggleLoading(), 2000) + }} + handleDecline={() => alert("Pressed decline")} + isConfirmPositive={boolean("isConfirmPositive", false)} + message="We are about to fulfill your request, there is no return from here. Are you sure?" + title="Are you sure you want to proceed?" + showConfirmLoading={boolean("showConfirmLoading", false)} + disableConfirmOnLoading={boolean("disableConfirmOnLoading", true)} + /> + ) +}) From 73a4d16d114062d2eccd3194484a387ee386f37e Mon Sep 17 00:00:00 2001 From: John Kapantzakis Date: Fri, 24 Mar 2023 15:06:05 +0200 Subject: [PATCH 2/4] Update README --- README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/README.md b/README.md index aaaf12ce8..987248fd8 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,21 @@ export const MyComponent: FC = (props: PropsT) => <>... You can find latest **master** storybook playground [here](https://netdata.github.io/netdata-ui/) +## Local development + +First, install the dependencies +``` +yarn +``` + +then, build the project and start +``` +yarn build && yarn start +``` + +Open your browser to [localhost:6006](http://localhost:6006) and view the storybook locally. + + ## Components - [Theme and theme utils](https://github.com/netdata/netdata-ui/blob/master/src/theme) From c5e4b2038040996ffc7673720b05cc412f6a1867 Mon Sep 17 00:00:00 2001 From: John Kapantzakis Date: Fri, 24 Mar 2023 15:13:48 +0200 Subject: [PATCH 3/4] Fix default value in story --- .../confirmation-dialog/confirmation-dialog.stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/confirmation-dialog/confirmation-dialog.stories.js b/src/components/confirmation-dialog/confirmation-dialog.stories.js index 4f131a1fe..14a9b3cf5 100644 --- a/src/components/confirmation-dialog/confirmation-dialog.stories.js +++ b/src/components/confirmation-dialog/confirmation-dialog.stories.js @@ -33,7 +33,7 @@ Story.add("Confirmation dialog with loading", () => { isConfirmPositive={boolean("isConfirmPositive", false)} message="We are about to fulfill your request, there is no return from here. Are you sure?" title="Are you sure you want to proceed?" - showConfirmLoading={boolean("showConfirmLoading", false)} + showConfirmLoading={boolean("showConfirmLoading", true)} disableConfirmOnLoading={boolean("disableConfirmOnLoading", true)} /> ) From 2c716618ceb453751af416b9813b5299d5406eb2 Mon Sep 17 00:00:00 2001 From: John Kapantzakis Date: Fri, 24 Mar 2023 17:17:08 +0200 Subject: [PATCH 4/4] v2.13.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0ee6e4470..723dd7b3e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@netdata/netdata-ui", - "version": "2.13.1", + "version": "2.13.2", "description": "netdata UI kit", "main": "./lib/index.js", "files": [