@ssa-ui-kit/widgets 0.0.1-alpha → 0.0.3-alpha

package/src/components/TableFilters/TableFilters.tsx

@@ -1,178 +1,188 @@
-import {
-  BaseSyntheticEvent,
-  useEffect,
-  useLayoutEffect,
-  useState,
-} from 'react';
-import { assocPath } from '@ssa-ui-kit/utils';
-import {
-  AccordionTitle,
-  AccordionGroup,
-  AccordionGroupContextProvider,
-  Popover,
-  PopoverContent,
-  PopoverDescription,
-  ICheckboxProps,
-} from '@ssa-ui-kit/core';
-import {
-  tableFilterDividerStyles,
-  tableFilterPopoverContentStyles,
-} from './styles';
-import {
-  TableFilterCheckbox,
-  TableFilterTriggerWithNotification,
-  TableFiltersAccordion,
-  TableFiltersAccordionContent,
-  TableFiltersButtons,
-} from '.';
-import { TableFilterConfig, TableFiltersView } from './types';
-import {
-  getCheckboxChangedItems,
-  getClearData,
-  getResetData,
-  getSubmitData,
-} from './utils/handlers';
-
-export const TableFilters = ({
-  checkboxData = {} as TableFilterConfig,
-  onReset,
-  onSubmit,
-  onClear,
-  handleCheckboxToggle,
-}: TableFiltersView) => {
-  const [localCheckboxData, setLocalCheckboxData] =
-    useState<TableFilterConfig>(checkboxData);
-  const [selectedGroupsCount, setSelectedGroupsCount] = useState(0);
-
-  const [open, setOpen] = useState(false);
-
-  const onOpenChange = (open: boolean) => {
-    setOpen(open);
-  };
-
-  useEffect(() => {
-    setLocalCheckboxData(checkboxData);
-  }, [checkboxData]);
-
-  useLayoutEffect(() => {
-    let counter = 0;
-    Object.keys(localCheckboxData).forEach((groupName) => {
-      const selectedItemsDraft =
-        localCheckboxData[groupName].selectedItemsDraft || [];
-      if (selectedItemsDraft.length > 0) {
-        counter++;
-      }
-    });
-    setSelectedGroupsCount(counter);
-
-    if (Object.keys(localCheckboxData).length === 0) {
-      setOpen(false);
-    }
-  }, [localCheckboxData]);
-
-  const onCheckboxChange = (groupName: string, name: string) => () => {
-    const { items, path } = getCheckboxChangedItems(
-      localCheckboxData,
-      groupName,
-      name,
-    );
-    setLocalCheckboxData(assocPath(path, items));
-    handleCheckboxToggle?.(groupName, name);
-  };
-
-  const handleSubmit = (event: BaseSyntheticEvent) => {
-    event.preventDefault();
-    const { submitCheckboxData } = getSubmitData(localCheckboxData);
-    setLocalCheckboxData(submitCheckboxData);
-    onSubmit?.();
-  };
-
-  const handleReset = () => {
-    const resetData = getResetData(localCheckboxData);
-    setLocalCheckboxData(resetData);
-    setOpen(false);
-    onReset?.();
-  };
-
-  const handleClear = () => {
-    const newData = getClearData(localCheckboxData);
-    setLocalCheckboxData(newData);
-    onClear?.();
-  };
-
-  return (
-    <Popover
-      floatingOptions={{
-        onOpenChange,
-        open: open,
-      }}>
-      <TableFilterTriggerWithNotification
-        count={selectedGroupsCount}
-        visible={!(Object.keys(localCheckboxData).length === 0)}>
-        More
-      </TableFilterTriggerWithNotification>
-      <PopoverContent className="popover" css={tableFilterPopoverContentStyles}>
-        <form
-          onSubmit={handleSubmit}
-          css={{
-            display: 'flex',
-            flexDirection: 'column',
-            width: '100%',
-          }}
-          data-testid="table-filters-form">
-          <PopoverDescription variant="body1">
-            <AccordionGroupContextProvider>
-              <AccordionGroup size="medium">
-                {Object.keys(localCheckboxData).map((groupName) => {
-                  const accordionInfo = localCheckboxData[groupName];
-                  return (
-                    <TableFiltersAccordion
-                      key={accordionInfo.id}
-                      id={accordionInfo.id}
-                      title={accordionInfo.title}
-                      isOpened={accordionInfo.isOpened}
-                      ariaControls={accordionInfo.ariaControls}
-                      renderContent={(props) => (
-                        <TableFiltersAccordionContent {...props}>
-                          {Object.keys(accordionInfo.items).map((itemKey) => {
-                            const info = accordionInfo.items[itemKey];
-                            const extraProps: Partial<ICheckboxProps> = {};
-                            const currentState = !!localCheckboxData?.[
-                              accordionInfo.id
-                            ].selectedItemsDraft?.includes(info.name);
-                            if (info.isDisabled) {
-                              extraProps.initialState = currentState;
-                            } else {
-                              extraProps.externalState = currentState;
-                            }
-                            return (
-                              <TableFilterCheckbox
-                                key={info.key}
-                                name={info.name}
-                                id={info.key}
-                                onChange={onCheckboxChange(
-                                  groupName,
-                                  info.name,
-                                )}
-                                text={info.content.text}
-                                isDisabled={info.isDisabled}
-                                {...extraProps}
-                              />
-                            );
-                          })}
-                        </TableFiltersAccordionContent>
-                      )}
-                      renderTitle={AccordionTitle}
-                    />
-                  );
-                })}
-              </AccordionGroup>
-            </AccordionGroupContextProvider>
-          </PopoverDescription>
-          <hr css={tableFilterDividerStyles} />
-          <TableFiltersButtons onClear={handleClear} onCancel={handleReset} />
-        </form>
-      </PopoverContent>
-    </Popover>
-  );
-};
+import {
+  BaseSyntheticEvent,
+  useEffect,
+  useLayoutEffect,
+  useState,
+} from 'react';
+import { assocPath } from '@ssa-ui-kit/utils';
+import {
+  AccordionTitle,
+  AccordionGroup,
+  AccordionGroupContextProvider,
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  ICheckboxProps,
+} from '@ssa-ui-kit/core';
+import {
+  tableFilterDividerStyles,
+  tableFilterPopoverContentStyles,
+} from './styles';
+import {
+  TableFilterCheckbox,
+  TableFilterTriggerWithNotification,
+  TableFiltersAccordion,
+  TableFiltersAccordionContent,
+  TableFiltersButtons,
+} from '.';
+import { TableFilterConfig, TableFiltersView } from './types';
+import {
+  getCheckboxChangedItems,
+  getClearData,
+  getResetData,
+  getSubmitData,
+} from './utils/handlers';
+
+export const TableFilters = ({
+  checkboxData = {} as TableFilterConfig,
+  onReset,
+  onSubmit,
+  onClear,
+  handleMoreButtonVisibleChange,
+  handleCheckboxToggle,
+}: TableFiltersView) => {
+  const [localCheckboxData, setLocalCheckboxData] =
+    useState<TableFilterConfig>(checkboxData);
+  const [selectedGroupsCount, setSelectedGroupsCount] = useState(0);
+  const [isMoreButtonVisible, setIsMoreButtonVisible] = useState(false);
+
+  const [open, setOpen] = useState(false);
+
+  const onOpenChange = (open: boolean) => {
+    setOpen(open);
+  };
+
+  useEffect(() => {
+    setLocalCheckboxData(checkboxData);
+  }, [checkboxData]);
+
+  useLayoutEffect(() => {
+    let counter = 0;
+    Object.keys(localCheckboxData).forEach((groupName) => {
+      const selectedItemsDraft =
+        localCheckboxData[groupName].selectedItemsDraft || [];
+      if (selectedItemsDraft.length > 0) {
+        counter++;
+      }
+    });
+    setSelectedGroupsCount(counter);
+
+    if (Object.keys(localCheckboxData).length === 0) {
+      setOpen(false);
+    }
+    const isMoreButtonVisibleLocal = !(
+      Object.keys(localCheckboxData).length === 0
+    );
+    setIsMoreButtonVisible(isMoreButtonVisibleLocal);
+  }, [localCheckboxData]);
+
+  useEffect(() => {
+    handleMoreButtonVisibleChange?.(isMoreButtonVisible);
+  }, [isMoreButtonVisible]);
+
+  const onCheckboxChange = (groupName: string, name: string) => () => {
+    const { items, path } = getCheckboxChangedItems(
+      localCheckboxData,
+      groupName,
+      name,
+    );
+    setLocalCheckboxData(assocPath(path, items));
+    handleCheckboxToggle?.(groupName, name);
+  };
+
+  const handleSubmit = (event: BaseSyntheticEvent) => {
+    event.preventDefault();
+    const { submitCheckboxData } = getSubmitData(localCheckboxData);
+    setLocalCheckboxData(submitCheckboxData);
+    onSubmit?.();
+  };
+
+  const handleReset = () => {
+    const resetData = getResetData(localCheckboxData);
+    setLocalCheckboxData(resetData);
+    setOpen(false);
+    onReset?.();
+  };
+
+  const handleClear = () => {
+    const newData = getClearData(localCheckboxData);
+    setLocalCheckboxData(newData);
+    onClear?.();
+  };
+
+  return (
+    <Popover
+      floatingOptions={{
+        onOpenChange,
+        open: open,
+      }}>
+      <TableFilterTriggerWithNotification
+        count={selectedGroupsCount}
+        visible={isMoreButtonVisible}>
+        More
+      </TableFilterTriggerWithNotification>
+      <PopoverContent className="popover" css={tableFilterPopoverContentStyles}>
+        <form
+          onSubmit={handleSubmit}
+          css={{
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+          }}
+          data-testid="table-filters-form">
+          <PopoverDescription variant="body1">
+            <AccordionGroupContextProvider>
+              <AccordionGroup size="medium">
+                {Object.keys(localCheckboxData).map((groupName) => {
+                  const accordionInfo = localCheckboxData[groupName];
+                  return (
+                    <TableFiltersAccordion
+                      key={accordionInfo.id}
+                      id={accordionInfo.id}
+                      title={accordionInfo.title}
+                      isOpened={accordionInfo.isOpened}
+                      ariaControls={accordionInfo.ariaControls}
+                      renderContent={(props) => (
+                        <TableFiltersAccordionContent {...props}>
+                          {Object.keys(accordionInfo.items).map((itemKey) => {
+                            const info = accordionInfo.items[itemKey];
+                            const extraProps: Partial<ICheckboxProps> = {};
+                            const currentState = !!localCheckboxData?.[
+                              accordionInfo.id
+                            ].selectedItemsDraft?.includes(info.name);
+                            if (info.isDisabled) {
+                              extraProps.initialState = currentState;
+                            } else {
+                              extraProps.externalState = currentState;
+                            }
+                            return (
+                              <TableFilterCheckbox
+                                key={info.key}
+                                name={info.name}
+                                id={info.key}
+                                onChange={onCheckboxChange(
+                                  groupName,
+                                  info.name,
+                                )}
+                                text={info.content.text}
+                                isDisabled={info.isDisabled}
+                                {...extraProps}
+                              />
+                            );
+                          })}
+                        </TableFiltersAccordionContent>
+                      )}
+                      renderTitle={AccordionTitle}
+                    />
+                  );
+                })}
+              </AccordionGroup>
+            </AccordionGroupContextProvider>
+          </PopoverDescription>
+          <hr css={tableFilterDividerStyles} />
+          <TableFiltersButtons onClear={handleClear} onCancel={handleReset} />
+        </form>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/components/TableFilters/TableFiltersAccordion.tsx

@@ -1,15 +1,14 @@
-import { Accordion } from '@ssa-ui-kit/core';
-import { AccordionViewProps } from '@ssa-ui-kit/core/src/components/AccordionGroup/types';
-
-export const TableFiltersAccordion = (props: AccordionViewProps) => (
-  <Accordion
-    {...props}
-    css={{
-      display: props.isHidden ? 'none' : 'flex',
-      padding: '10px 0',
-      '&:last-child': {
-        paddingBottom: 0,
-      },
-    }}
-  />
-);
+import { Accordion, AccordionViewProps } from '@ssa-ui-kit/core';
+
+export const TableFiltersAccordion = (props: AccordionViewProps) => (
+  <Accordion
+    {...props}
+    css={{
+      display: props.isHidden ? 'none' : 'flex',
+      padding: '10px 0',
+      '&:last-child': {
+        paddingBottom: 0,
+      },
+    }}
+  />
+);

package/src/components/TableFilters/TableFiltersAccordionContent.tsx

@@ -1,19 +1,18 @@
-import { AccordionContent } from '@ssa-ui-kit/core';
-import { RenderContentProps } from '@ssa-ui-kit/core/src/components/AccordionGroup/types';
-
-export const TableFiltersAccordionContent = ({
-  isOpened,
-  children,
-  ...rest
-}: RenderContentProps & {
-  children: React.ReactNode;
-}) => (
-  <AccordionContent
-    {...rest}
-    isOpened={isOpened}
-    css={{
-      padding: isOpened ? '18px 3px 5px 3px' : 0,
-    }}>
-    {children}
-  </AccordionContent>
-);
+import { AccordionContent, RenderContentProps } from '@ssa-ui-kit/core';
+
+export const TableFiltersAccordionContent = ({
+  isOpened,
+  children,
+  ...rest
+}: RenderContentProps & {
+  children: React.ReactNode;
+}) => (
+  <AccordionContent
+    {...rest}
+    isOpened={isOpened}
+    css={{
+      padding: isOpened ? '18px 3px 5px 3px' : 0,
+    }}>
+    {children}
+  </AccordionContent>
+);

package/src/components/TableFilters/TableFiltersButtons.tsx

@@ -1,32 +1,32 @@
-import { Button, Wrapper } from '@ssa-ui-kit/core';
-import { TableFiltersCancelButton } from './TableFilterCancelButton';
-import { TableFiltersClearButton } from './TableFilterClearButton';
-import { baseButtonStyle } from './styles';
-
-export const TableFiltersButtons = ({
-  onClear,
-  onCancel,
-}: {
-  onClear?: () => void;
-  onCancel?: () => void;
-}) => {
-  const handleOnClear = () => {
-    onClear?.();
-  };
-  const handleOnCancel = () => {
-    onCancel?.();
-  };
-  return (
-    <Wrapper css={{ gap: '10px', width: 'auto', alignSelf: 'end' }}>
-      <TableFiltersCancelButton onClick={handleOnCancel}>
-        Cancel
-      </TableFiltersCancelButton>
-      <TableFiltersClearButton onClick={handleOnClear}>
-        Clear
-      </TableFiltersClearButton>
-      <Button css={baseButtonStyle} variant="info" type="submit">
-        Apply
-      </Button>
-    </Wrapper>
-  );
-};
+import { Button, Wrapper } from '@ssa-ui-kit/core';
+import { TableFiltersCancelButton } from './TableFilterCancelButton';
+import { TableFiltersClearButton } from './TableFilterClearButton';
+import { baseButtonStyle } from './styles';
+
+export const TableFiltersButtons = ({
+  onClear,
+  onCancel,
+}: {
+  onClear?: () => void;
+  onCancel?: () => void;
+}) => {
+  const handleOnClear = () => {
+    onClear?.();
+  };
+  const handleOnCancel = () => {
+    onCancel?.();
+  };
+  return (
+    <Wrapper css={{ gap: '10px', width: 'auto', alignSelf: 'end' }}>
+      <TableFiltersCancelButton onClick={handleOnCancel}>
+        Cancel
+      </TableFiltersCancelButton>
+      <TableFiltersClearButton onClick={handleOnClear}>
+        Clear
+      </TableFiltersClearButton>
+      <Button css={baseButtonStyle} variant="info" type="submit">
+        Apply
+      </Button>
+    </Wrapper>
+  );
+};