Merge pull request #37 from buildo/actions_with_loader

Actions with loader
buildo · Mar 7, 2022 · 09e5e4e · 09e5e4e
2 parents 2b55930 + af2f589
commit 09e5e4e
Show file tree

Hide file tree

Showing 10 changed files with 151 additions and 34 deletions.
diff --git a/src/Actions/createActions.tsx b/src/Actions/createActions.tsx
@@ -1,5 +1,5 @@
-import { FunctionComponent } from "react";
-import { BoxProps } from "../";
+import { FunctionComponent, useState } from "react";
+import { BannerProps, BoxProps, InlineLoader, LocalizedString } from "../";
 import { bentoSprinkles, Column, Columns, Inline } from "../internal";
 import { ButtonProps } from "../Button/createButton";
 
@@ -11,27 +11,23 @@ export type ActionsProps = {
     isDestructive?: boolean;
   };
   secondaryAction?: ActionProps;
+  loadingMessage?: LocalizedString;
+  error?: LocalizedString;
 };
 
 type ActionsConfig = {
   primaryPosition: "left" | "right";
   defaultSize: ButtonProps["size"];
-} & (
-  | {
-      buttonsAlignment: "left" | "right";
-      spaceBetweenButtons: BoxProps<typeof bentoSprinkles>["gap"];
-    }
-  | {
-      buttonsAlignment: "spaceBetween";
-      spaceBetweenButtons?: never;
-    }
-);
+  buttonsAlignment: "left" | "right" | "spaceBetween";
+  spaceBetweenButtons: BoxProps<typeof bentoSprinkles>["gap"];
+};
 
 export function createActions(
   Button: FunctionComponent<ButtonProps>,
+  Banner: FunctionComponent<BannerProps>,
   config: ActionsConfig = {
-    primaryPosition: "right",
     buttonsAlignment: "right",
+    primaryPosition: "right",
     spaceBetweenButtons: 16,
     defaultSize: "medium",
   }
@@ -40,14 +36,22 @@ export function createActions(
     primaryAction,
     secondaryAction,
     size = config.defaultSize,
+    loadingMessage,
+    error,
   }: ActionsProps) {
+    const [isLoading, setIsLoading] = useState(false);
+
     const primaryActionButton = primaryAction && (
       <Button
         key="primary"
         {...primaryAction}
         kind="solid"
         hierarchy={primaryAction.isDestructive ? "danger" : "primary"}
         size={size}
+        onPress={() => {
+          setIsLoading(true);
+          Promise.resolve(primaryAction.onPress()).then(() => setIsLoading(false));
+        }}
       />
     );
     const secondaryActionButton = secondaryAction && (
@@ -64,20 +68,68 @@ export function createActions(
         ? [primaryActionButton, secondaryActionButton]
         : [secondaryActionButton, primaryActionButton];
 
-    return config.buttonsAlignment === "spaceBetween" ? (
-      <Columns space={0}>
-        {buttons[0] || <Column>{null}</Column>}
-        <Column width="content">{buttons[1]}</Column>
-      </Columns>
-    ) : (
-      <Inline
-        space={config.spaceBetweenButtons}
-        align={config.buttonsAlignment}
-        alignY="center"
-        collapseBelow="tablet"
-      >
-        {buttons}
-      </Inline>
-    );
+    switch (config.buttonsAlignment) {
+      case "right":
+        return (
+          <Columns space={config.spaceBetweenButtons} alignY="center" collapseBelow="tablet">
+            <Column width="1/2">
+              {isLoading ? (
+                <InlineLoader message={loadingMessage} />
+              ) : (
+                error && <Banner kind="negative" description={error} />
+              )}
+            </Column>
+            <Inline
+              space={config.spaceBetweenButtons}
+              align="right"
+              alignY="center"
+              collapseBelow="tablet"
+              reverse={{ mobile: true }}
+            >
+              {buttons}
+            </Inline>
+          </Columns>
+        );
+      case "left":
+        return (
+          <Columns
+            space={config.spaceBetweenButtons}
+            alignY="center"
+            collapseBelow="tablet"
+            reverse={{ mobile: true }}
+          >
+            <Inline space={config.spaceBetweenButtons} alignY="center" collapseBelow="tablet">
+              {buttons}
+            </Inline>
+            <Column width="1/2">
+              {isLoading ? (
+                <Inline space={0} align="right" alignY="center">
+                  <InlineLoader message={loadingMessage} />
+                </Inline>
+              ) : (
+                <Column>{error && <Banner kind="negative" description={error} />}</Column>
+              )}
+            </Column>
+          </Columns>
+        );
+      case "spaceBetween":
+        return (
+          <Columns space={config.spaceBetweenButtons} alignY="center" collapseBelow="tablet">
+            {buttons[0]}
+            <Column width="content">
+              {isLoading ? (
+                <Inline space={0} align="center" alignY="center">
+                  <InlineLoader message={loadingMessage} />
+                </Inline>
+              ) : (
+                error && <Banner kind="negative" description={error} />
+              )}
+            </Column>
+            <Inline space={0} align={{ desktop: "right", mobile: "left" }} alignY="center">
+              {buttons[1]}
+            </Inline>
+          </Columns>
+        );
+    }
   };
 }
diff --git a/src/Banner/createBanner.tsx b/src/Banner/createBanner.tsx
@@ -133,3 +133,5 @@ export function createBanner(
     );
   };
 }
+
+export type { Props as BannerProps };
diff --git a/src/Button/createButton.tsx b/src/Button/createButton.tsx
@@ -46,7 +46,7 @@ export const defaultButtonConfig: ButtonConfig = {
     large: 16,
   },
   labelSize: "large",
-  radius: 8,
+  radius: 4,
   internalSpacing: 8,
   iconSize: {
     small: 12,

diff --git a/src/DefaultMessagesContext.tsx b/src/DefaultMessagesContext.tsx
@@ -24,6 +24,9 @@ export type DefaultMessages = {
       noResultsDescription: LocalizedString;
       missingValue: LocalizedString;
     };
+    Loader: {
+      loadingMessage: LocalizedString;
+    };
   };
 };
 

diff --git a/src/Form/Form.tsx b/src/Form/Form.tsx
@@ -18,6 +18,7 @@ type Props = {
   description?: TextChildren;
   submitButton?: Omit<ButtonProps, "kind" | "hierarchy">;
   secondaryButton?: Omit<ButtonProps, "kind" | "hierarchy">;
+  error?: LocalizedString;
 };
 
 export type FormConfig = {
@@ -29,7 +30,14 @@ export type FormConfig = {
 };
 
 export function createForm(Actions: FunctionComponent<ActionsProps>, config: FormConfig) {
-  return function Form({ title, description, children, submitButton, secondaryButton }: Props) {
+  return function Form({
+    title,
+    description,
+    children,
+    submitButton,
+    secondaryButton,
+    error,
+  }: Props) {
     return (
       <Box as="form" onSubmit={(e) => e.preventDefault()}>
         <ContentBlock maxWidth={700}>
@@ -46,6 +54,7 @@ export function createForm(Actions: FunctionComponent<ActionsProps>, config: For
                 size={config.actionsSize}
                 primaryAction={submitButton}
                 secondaryAction={secondaryButton}
+                error={error}
               />
             )}
           </Stack>

diff --git a/src/InlineLoader/InlineLoader.tsx b/src/InlineLoader/InlineLoader.tsx
@@ -2,9 +2,10 @@ import { Box, Inline } from "../internal";
 import { Body, LocalizedString } from "..";
 import { icon } from "./InlineLoader.css";
 import { vars } from "../vars.css";
+import { useDefaultMessages } from "../util/useDefaultMessages";
 
 type Props = {
-  message: LocalizedString;
+  message?: LocalizedString;
 };
 
 const Loader = (
@@ -14,11 +15,19 @@ const Loader = (
 );
 
 export function InlineLoader({ message }: Props) {
+  const {
+    defaultMessages: {
+      Loader: { loadingMessage: defaultLoadingMessage },
+    },
+  } = useDefaultMessages();
+
+  const loadingMessage = message || defaultLoadingMessage;
+
   return (
     <Inline space={8} alignY="center">
       <Box className={icon}>{Loader}</Box>
       <Body size="medium" color="secondary">
-        {message}
+        {loadingMessage}
       </Body>
     </Inline>
   );

diff --git a/stories/Components/Actions.stories.tsx b/stories/Components/Actions.stories.tsx
@@ -6,6 +6,7 @@ const { defaultExport, createStory } = createComponentStories({
   component: Actions,
   args: {
     size: "medium",
+    error: formatMessage("Something went wrong"),
   },
 });
 
@@ -41,6 +42,12 @@ export const TwoActions = createStory({
   secondaryAction,
 });
 
+export const TwoActionsWithError = createStory({
+  primaryAction,
+  secondaryAction,
+  error: formatMessage("Something went wrong"),
+});
+
 export const TwoActionsDestructive = createStory({
   primaryAction: {
     ...primaryAction,
@@ -60,3 +67,17 @@ export const TwoActionsLarge = createStory({
   secondaryAction,
   size: "large",
 });
+
+export const AsyncPrimaryAction = createStory({
+  primaryAction: {
+    ...primaryAction,
+    onPress: () =>
+      new Promise((resolve) =>
+        setTimeout(() => {
+          primaryAction.onPress();
+          resolve(null);
+        }, 3000)
+      ),
+  },
+  secondaryAction,
+});
diff --git a/stories/Components/Modal.stories.tsx b/stories/Components/Modal.stories.tsx
@@ -50,3 +50,21 @@ export const Destructive = createStory({
     onPress: action("Cancel"),
   },
 });
+
+export const WithAsyncPrimaryAction = createStory({
+  children: [<Placeholder />],
+  primaryAction: {
+    label: formatMessage("Create"),
+    onPress: () =>
+      new Promise((resolve) => {
+        setTimeout(() => {
+          action("Create")();
+          resolve(null);
+        }, 3000);
+      }),
+  },
+  secondaryAction: {
+    label: formatMessage("Cancel"),
+    onPress: action("Cancel"),
+  },
+});
diff --git a/stories/defaultMessages.ts b/stories/defaultMessages.ts
@@ -28,4 +28,7 @@ export const defaultMessages: DefaultMessages["defaultMessages"] = {
     ),
     missingValue: formatMessage("-"),
   },
+  Loader: {
+    loadingMessage: formatMessage("Loading..."),
+  },
 };
diff --git a/stories/index.tsx b/stories/index.tsx
@@ -46,9 +46,9 @@ export const {
   TextField,
 } = createFormFields();
 export const { Button, ButtonLink } = createButtons();
-export const Actions = createActions(Button);
-export const { Form, FormSection, FormRow } = createFormLayoutComponents(Actions);
 export const Banner = createBanner(Button, {});
+export const Actions = createActions(Button, Banner);
+export const { Form, FormSection, FormRow } = createFormLayoutComponents(Actions);
 export const { Toast, ToastProvider } = createToast(Button, {});
 export const BentoProvider = createBentoProvider(Toast);
 export const Card = createCard<24 | 32 | 40>({});