finalize SectionFilter

aboutbits · Nov 5, 2021 · 6d8f6f3 · 6d8f6f3
1 parent 35c52e9
commit 6d8f6f3
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 50 deletions.
diff --git a/src/components/sectionFilter/FilterDialog.tsx b/src/components/sectionFilter/FilterDialog.tsx
@@ -1,31 +1,32 @@
 import classNames from 'classnames'
-import { Dialog, DialogProps } from '@reach/dialog'
+import { Dialog } from '@reach/dialog'
 import { useInternationalization, useTheme } from '../../framework'
 import { DialogHeader, DialogHeaderProps } from '../dialog'
 
-type Props = Partial<Pick<DialogHeaderProps, 'title'>> &
-  Pick<DialogHeaderProps, 'onDismiss'> &
-  Pick<DialogProps, 'isOpen'> & {
+export type FilterDialogProps = Partial<Pick<DialogHeaderProps, 'title'>> &
+  Pick<DialogHeaderProps, 'onDismiss'> & {
     /**
      * Accessibility label for the dialog.
      **/
-    dialogLabel: string
+    dialogLabel?: string
   }
 
-const FilterDialog: React.FC<Props> = ({
+const FilterDialog: React.FC<FilterDialogProps> = ({
   title,
   onDismiss,
-  isOpen,
   children,
   dialogLabel,
 }) => {
   const internationalization = useInternationalization()
   const { dialog } = useTheme()
   return (
     <Dialog
-      isOpen={isOpen}
       onDismiss={onDismiss}
-      aria-label={dialogLabel}
+      aria-label={
+        dialogLabel ||
+        title ||
+        internationalization.translate('shared.filter.label')
+      }
       className={classNames(dialog.select.base, dialog.select.normal)}
     >
       <DialogHeader

diff --git a/src/components/sectionFilter/SectionFilter.stories.mdx b/src/components/sectionFilter/SectionFilter.stories.mdx
@@ -65,11 +65,12 @@ export const Template = () => {
         <SectionFilter
           initialValues={filter}
           onFilter={(values) => {
-            console.log({ values })
             setFilter(values)
           }}
-          onClose={() => setFilterShow(false)}
-          confirmationButtonContent="Apply filter"
+          dialogProps={{
+            confirmationButtonContent: 'Apply filter',
+            onDismiss: () => setFilterShow(false),
+          }}
         >
           <Select id="role" autoCapitalize="none" name="role" label="Role">
             <option className="bg-gray-600" value="">

diff --git a/src/components/sectionFilter/SectionFilter.tsx b/src/components/sectionFilter/SectionFilter.tsx
@@ -11,7 +11,7 @@ import { useMatchMediaQuery } from '@aboutbits/react-toolbox'
 import { useTheme } from '../../framework'
 import { ClassNameProps } from '../types'
 import { SubmitButton } from '../button/SubmitButton'
-import { FilterDialog } from './FilterDialog'
+import { FilterDialog, FilterDialogProps } from './FilterDialog'
 
 type Props<T> = ClassNameProps & {
   /**
@@ -25,23 +25,24 @@ type Props<T> = ClassNameProps & {
    * @param values T
    */
   onFilter: (values: T) => void
-  /**
-   * Close filter
-   */
-  onClose: () => void
   /**
    * Visualize the filter options in a popup, if it matches the provided media query.
    * e.g. '(max-width: 768px)'
    */
   asPopupMediaQuery?: string
-  /**
-   * Defines the content of the confirmation button, which is displayed in the popup.
-   */
-  confirmationButtonContent?: ReactNode
   /**
    * Input fields of your filter.
    */
   children: ReactChildren
+  /**
+   * The dialog props are required, if you want to show the filter in form of a dialog on certain screen sizes.
+   */
+  dialogProps?: FilterDialogProps & {
+    /**
+     * Defines the content of the confirmation button, which is displayed in the popup.
+     */
+    confirmationButtonContent?: ReactNode
+  }
 }
 
 function SubmitOnChange(): null {
@@ -64,39 +65,46 @@ export function SectionFilter<T>({
   className,
   initialValues,
   onFilter,
-  onClose,
   asPopupMediaQuery = '(max-width: 768px)',
-  confirmationButtonContent,
+  dialogProps,
   children,
 }: Props<T>): ReactElement {
   const { section } = useTheme()
   const showFilterPopup = useMatchMediaQuery(asPopupMediaQuery)
-  return showFilterPopup ? (
-    <FilterDialog onDismiss={onClose} dialogLabel="Filter">
-      <Formik<T>
-        initialValues={initialValues}
-        onSubmit={(values) => {
-          onFilter(values)
-          onClose()
-        }}
-      >
-        <Form
-          className={classNames(
-            section.filter.popup.base,
-            section.filter.popup.normal,
-            className
-          )}
+
+  if (showFilterPopup && dialogProps) {
+    const { confirmationButtonContent, onDismiss, ...filterDialogProps } =
+      dialogProps
+
+    return (
+      <FilterDialog onDismiss={onDismiss} {...filterDialogProps}>
+        <Formik<T>
+          initialValues={initialValues}
+          onSubmit={(values) => {
+            onFilter(values)
+            onDismiss()
+          }}
         >
-          {children}
-          <div className="col-span-full">
-            <SubmitButton className="w-full">
-              {confirmationButtonContent}
-            </SubmitButton>
-          </div>
-        </Form>
-      </Formik>
-    </FilterDialog>
-  ) : (
+          <Form
+            className={classNames(
+              section.filter.popup.base,
+              section.filter.popup.normal,
+              className
+            )}
+          >
+            {children}
+            <div className="col-span-full">
+              <SubmitButton className="w-full">
+                {confirmationButtonContent}
+              </SubmitButton>
+            </div>
+          </Form>
+        </Formik>
+      </FilterDialog>
+    )
+  }
+
+  return (
     <Formik<T> initialValues={initialValues} onSubmit={onFilter}>
       <Form
         className={classNames(

diff --git a/src/examples/list.stories.mdx b/src/examples/list.stories.mdx
@@ -61,8 +61,10 @@ export const Template = ({ numberOfTotalItems, numberOfItemsPerPage }) => {
         <SectionFilter
           initialValues={filter}
           onFilter={setFilter}
-          onClose={() => setFilterShow(false)}
-          confirmationButtonContent="Apply filter"
+          dialogProps={{
+            onDismiss: () => setFilterShow(false),
+            confirmationButtonContent: 'Apply filter',
+          }}
         >
           <Select id="role" autoCapitalize="none" name="role" label="Role">
             <option className="bg-gray-600" value="">