Fix assign countries dialogs (#1610)

src/components/Form/Form.tsx

@@ -1,7 +1,8 @@
 import useForm, { SubmitPromise, UseFormResult } from "@saleor/hooks/useForm";
 import React from "react";
 
-export interface FormProps<T> {
+export interface FormProps<T>
+  extends Omit<React.HTMLProps<HTMLFormElement>, "onSubmit"> {
   children: (props: UseFormResult<T>) => React.ReactNode;
   confirmLeave?: boolean;
   initial?: T;
@@ -10,7 +11,7 @@ export interface FormProps<T> {
 }
 
 function Form<T>(props: FormProps<T>) {
-  const { children, initial, resetOnSubmit, onSubmit } = props;
+  const { children, initial, resetOnSubmit, onSubmit, ...rest } = props;
   const renderProps = useForm(initial, onSubmit);
 
   function handleSubmit(event?: React.FormEvent<any>, cb?: () => void) {
@@ -32,7 +33,11 @@ function Form<T>(props: FormProps<T>) {
     submit();
   }
 
-  return <form onSubmit={handleSubmit}>{children(renderProps)}</form>;
+  return (
+    <form {...rest} onSubmit={handleSubmit}>
+      {children(renderProps)}
+    </form>
+  );
 }
 Form.displayName = "Form";
 

src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx

@@ -21,11 +21,13 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
 // tslint:disable no-submodule-imports
 import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo";
 import { buttonMessages } from "@saleor/intl";
-import { makeStyles } from "@saleor/macaw-ui";
+import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
 import { filter } from "fuzzaldrin";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import { useStyles } from "./styles";
+
 interface FormData {
   allCountries: boolean;
   countries: string[];
@@ -41,29 +43,6 @@ export interface DiscountCountrySelectDialogProps {
   onConfirm: (data: FormData) => void;
 }
 
-const useStyles = makeStyles(
-  theme => ({
-    checkboxCell: {
-      paddingLeft: 0
-    },
-    containerTitle: {
-      padding: theme.spacing(1.25, 0)
-    },
-    container: {
-      maxHeight: 500,
-      paddingTop: 0,
-      marginBottom: theme.spacing(3)
-    },
-    heading: {
-      marginBottom: theme.spacing(1),
-      marginTop: theme.spacing(2)
-    },
-    wideCell: {
-      width: "100%"
-    }
-  }),
-  { name: "DiscountCountrySelectDialog" }
-);
 const DiscountCountrySelectDialog: React.FC<DiscountCountrySelectDialogProps> = props => {
   const {
     confirmButtonState,
@@ -74,6 +53,7 @@ const DiscountCountrySelectDialog: React.FC<DiscountCountrySelectDialogProps> =
     onConfirm
   } = props;
   const classes = useStyles(props);
+  const scrollableDialogClasses = useScrollableDialogStyle();
 
   const intl = useIntl();
 
@@ -84,7 +64,11 @@ const DiscountCountrySelectDialog: React.FC<DiscountCountrySelectDialogProps> =
   };
   return (
     <Dialog onClose={onClose} open={open} fullWidth maxWidth="sm">
-      <Form initial={initialForm} onSubmit={onConfirm}>
+      <Form
+        initial={initialForm}
+        onSubmit={onConfirm}
+        className={scrollableDialogClasses.form}
+      >
         {({ data, change }) => {
           const countrySelectionMap = countries.reduce((acc, country) => {
             acc[country.code] = !!data.countries.find(
@@ -120,18 +104,17 @@ const DiscountCountrySelectDialog: React.FC<DiscountCountrySelectDialogProps> =
                   })}
                   fullWidth
                 />
-              </DialogContent>
+                <FormSpacer />
-              <Hr />
+                <Hr />
-
+                <FormSpacer />
-              <DialogContent className={classes.containerTitle}>
+                <Typography variant="subtitle1">
-                <Typography className={classes.heading} variant="subtitle1">
                   <FormattedMessage
                     defaultMessage="Countries A to Z"
                     description="country selection"
                   />
                 </Typography>
               </DialogContent>
-              <DialogContent className={classes.container}>
+              <DialogContent className={scrollableDialogClasses.scrollArea}>
                 <ResponsiveTable>
                   <TableBody>
                     {filter(countries, data.query, {

src/discounts/components/DiscountCountrySelectDialog/styles.ts

@@ -0,0 +1,13 @@
+import { makeStyles } from "@saleor/macaw-ui";
+
+export const useStyles = makeStyles(
+  {
+    checkboxCell: {
+      paddingLeft: 0
+    },
+    wideCell: {
+      width: "100%"
+    }
+  },
+  { name: "DiscountCountrySelectDialog" }
+);

src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx

@@ -20,11 +20,13 @@ import Hr from "@saleor/components/Hr";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo";
 import { buttonMessages } from "@saleor/intl";
-import { makeStyles } from "@saleor/macaw-ui";
+import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
 import { filter } from "fuzzaldrin";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import { useStyles } from "./styles";
+
 interface FormData {
   countries: string[];
   query: string;
@@ -41,32 +43,6 @@ export interface ShippingZoneCountriesAssignDialogProps {
   onConfirm: (data: FormData) => void;
 }
 
-const useStyles = makeStyles(
-  theme => ({
-    checkboxCell: {
-      paddingLeft: 0
-    },
-    heading: {
-      marginBottom: theme.spacing(2),
-      marginTop: theme.spacing(2)
-    },
-    container: {
-      padding: theme.spacing(1.25, 0)
-    },
-    scrollAreaContainer: {
-      maxHeight: 400,
-      padding: theme.spacing(1.25, 0),
-      marginBottom: theme.spacing(3)
-    },
-    table: {
-      border: "1px solid " + theme.palette.grey[200]
-    },
-    wideCell: {
-      width: "100%"
-    }
-  }),
-  { name: "ShippingZoneCountriesAssignDialog" }
-);
 const ShippingZoneCountriesAssignDialog: React.FC<ShippingZoneCountriesAssignDialogProps> = props => {
   const {
     confirmButtonState,
@@ -79,6 +55,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<ShippingZoneCountriesAssignDia
   } = props;
 
   const classes = useStyles(props);
+  const scrollableDialogClasses = useScrollableDialogStyle();
   const intl = useIntl();
 
   const initialForm: FormData = {
@@ -88,7 +65,11 @@ const ShippingZoneCountriesAssignDialog: React.FC<ShippingZoneCountriesAssignDia
   };
   return (
     <Dialog onClose={onClose} open={open} fullWidth maxWidth="sm">
-      <Form initial={initialForm} onSubmit={onConfirm}>
+      <Form
+        initial={initialForm}
+        onSubmit={onConfirm}
+        className={scrollableDialogClasses.form}
+      >
         {({ data, change }) => {
           const countrySelectionMap = countries.reduce((acc, country) => {
             acc[country.code] = !!data.countries.find(
@@ -122,13 +103,13 @@ const ShippingZoneCountriesAssignDialog: React.FC<ShippingZoneCountriesAssignDia
                   })}
                   fullWidth
                 />
-              </DialogContent>
+                <FormSpacer />
-              <Hr />
+                <Hr />
-
+                <FormSpacer />
-              <DialogContent className={classes.container}>
+                <Typography variant="subtitle1">
-                <Typography className={classes.heading} variant="subtitle1">
                   <FormattedMessage defaultMessage="Quick Pick" />
                 </Typography>
+                <FormSpacer />
                 <ResponsiveTable className={classes.table}>
                   <TableBody>
                     <TableRow>
@@ -157,18 +138,15 @@ const ShippingZoneCountriesAssignDialog: React.FC<ShippingZoneCountriesAssignDia
                     </TableRow>
                   </TableBody>
                 </ResponsiveTable>
-              </DialogContent>
+                <FormSpacer />
-
+                <Typography variant="subtitle1">
-              <DialogContent className={classes.container}>
-                <Typography className={classes.heading} variant="subtitle1">
                   <FormattedMessage
                     defaultMessage="Countries A to Z"
                     description="country selection"
                   />
                 </Typography>
               </DialogContent>
-
+              <DialogContent className={scrollableDialogClasses.scrollArea}>
-              <DialogContent className={classes.scrollAreaContainer}>
                 <ResponsiveTable className={classes.table}>
                   <TableBody>
                     {filter(countries, data.query, {

src/shipping/components/ShippingZoneCountriesAssignDialog/styles.ts

@@ -0,0 +1,16 @@
+import { makeStyles } from "@saleor/macaw-ui";
+
+export const useStyles = makeStyles(
+  theme => ({
+    checkboxCell: {
+      paddingLeft: 0
+    },
+    table: {
+      border: "1px solid " + theme.palette.grey[200]
+    },
+    wideCell: {
+      width: "100%"
+    }
+  }),
+  { name: "ShippingZoneCountriesAssignDialog" }
+);

src/styles/useScrollableDialogStyle.ts

@@ -6,6 +6,12 @@ const useScrollableDialogStyle = makeStyles(
       height: "calc(100% - 64px)",
       maxHeight: 700
     },
+    form: {
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      overflowY: "auto"
+    },
     loadMoreLoaderContainer: {
       alignItems: "center",
       display: "flex",