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

package/src/components/Filters/Filters.tsx

@@ -1,75 +1,85 @@
-import { Wrapper } from '@ssa-ui-kit/core';
-import { TableFilters } from '@components/TableFilters';
-import { TableFilterConfig } from '@components/TableFilters/types';
-import { useRef, useState } from 'react';
-import {
-  UseTableDataParameters,
-  UseTableDataResult,
-  useTableData,
-} from '@components/TableFilters/hooks/useTableData';
-import { FiltersContextProvider } from './FiltersContext';
-import { FiltersBlock } from './FiltersBlock';
-import { FilterBlockWrapper } from './FilterBlockWrapper';
-import { FiltersWrapper } from './FiltersWrapper';
-import { useVisibility } from './hooks/useVisibility';
-
-export const Filters = ({
-  checkboxData: initialState = {} as TableFilterConfig,
-  handleSubmit,
-  handleCancel,
-  handleClear,
-}: Pick<UseTableDataResult, 'checkboxData'> &
-  Pick<
-    UseTableDataParameters,
-    'handleSubmit' | 'handleCancel' | 'handleClear'
-  >) => {
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const [hiddenCheckboxData, setHiddenCheckboxData] =
-    useState<TableFilterConfig>({});
-
-  const useTableDataResult = useTableData({
-    initialState,
-    wrapperRef,
-    handleSubmit,
-    handleCancel,
-    handleClear,
-  });
-
-  const { checkboxData, refsList } = useTableDataResult;
-
-  const handleVisibilityProcessed = () => {
-    const newHiddenCheckboxData: TableFilterConfig = {};
-    const groupNames = Object.keys(checkboxData);
-    refsList.forEach((currentRef, index) => {
-      const groupName = groupNames[index];
-      const isNotVisible = currentRef.current?.style.visibility === 'hidden';
-      if (isNotVisible) {
-        newHiddenCheckboxData[groupName] = checkboxData[groupName];
-      }
-    });
-    setHiddenCheckboxData(newHiddenCheckboxData);
-  };
-
-  useVisibility({
-    checkboxData,
-    refsList,
-    wrapperRef,
-    onVisibilityProcessed: handleVisibilityProcessed,
-  });
-
-  return (
-    <FiltersWrapper ref={wrapperRef}>
-      <FiltersContextProvider {...useTableDataResult}>
-        <FilterBlockWrapper>
-          <FiltersBlock />
-        </FilterBlockWrapper>
-        <Wrapper css={{ width: 110 }}>
-          <TableFilters
-            {...useTableDataResult}
-            checkboxData={hiddenCheckboxData}
-          />
-        </Wrapper>
-      </FiltersContextProvider>
-    </FiltersWrapper>
-  );
-};
+import { useRef, useState } from 'react';
+import { Wrapper } from '@ssa-ui-kit/core';
+import { TableFilters } from '@components/TableFilters';
+import { TableFilterConfig } from '@components/TableFilters/types';
+import {
+  UseTableDataParameters,
+  UseTableDataResult,
+  useTableData,
+} from '@components/TableFilters/hooks/useTableData';
+import { FiltersContextProvider } from './FiltersContext';
+import { FiltersBlock } from './FiltersBlock';
+import { FilterBlockWrapper } from './FilterBlockWrapper';
+import { FiltersWrapper } from './FiltersWrapper';
+import { useVisibility } from './hooks/useVisibility';
+
+export const Filters = ({
+  checkboxData: initialState = {} as TableFilterConfig,
+  updatedCheckboxData,
+  handleSubmit,
+  handleCancel,
+  handleClear,
+}: Pick<UseTableDataResult, 'checkboxData'> & {
+  updatedCheckboxData?: TableFilterConfig;
+} & Pick<
+    UseTableDataParameters,
+    'handleSubmit' | 'handleCancel' | 'handleClear'
+  >) => {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [hiddenCheckboxData, setHiddenCheckboxData] =
+    useState<TableFilterConfig>({});
+
+  const [isMoreButtonVisible, setIsMoreButtonVisible] = useState(false);
+
+  const useTableDataResult = useTableData({
+    initialState,
+    updatedCheckboxData,
+    wrapperRef,
+    handleSubmit,
+    handleCancel,
+    handleClear,
+  });
+
+  const { checkboxData, refsList } = useTableDataResult;
+
+  const handleVisibilityProcessed = () => {
+    const newHiddenCheckboxData: TableFilterConfig = {};
+    const groupNames = Object.keys(checkboxData);
+    refsList.forEach((currentRef, index) => {
+      const groupName = groupNames[index];
+      const isNotVisible = currentRef.current?.style.visibility === 'hidden';
+      if (isNotVisible) {
+        newHiddenCheckboxData[groupName] = checkboxData[groupName];
+      }
+    });
+    setHiddenCheckboxData(newHiddenCheckboxData);
+  };
+
+  const handleMoreButtonVisibleChange = (isVisible: boolean) => {
+    setIsMoreButtonVisible(isVisible);
+  };
+
+  useVisibility({
+    checkboxData,
+    refsList,
+    wrapperRef,
+    onVisibilityProcessed: handleVisibilityProcessed,
+  });
+
+  return (
+    <FiltersWrapper ref={wrapperRef} isMoreButtonVisible={isMoreButtonVisible}>
+      <FiltersContextProvider {...useTableDataResult}>
+        <FilterBlockWrapper>
+          <FiltersBlock />
+        </FilterBlockWrapper>
+        <Wrapper css={{ width: 110 }}>
+          <TableFilters
+            {...useTableDataResult}
+            checkboxData={hiddenCheckboxData}
+            handleMoreButtonVisibleChange={handleMoreButtonVisibleChange}
+          />
+        </Wrapper>
+      </FiltersContextProvider>
+    </FiltersWrapper>
+  );
+};

package/src/components/Filters/FiltersBlock.tsx

@@ -1,70 +1,70 @@
-import { DropdownOption, MultipleDropdown } from '@ssa-ui-kit/core';
-import React, { useEffect, useState } from 'react';
-import { useFiltersContext } from './FiltersContext';
-
-export const FiltersBlock = () => {
-  const { setElementRef, handleCheckboxToggle, checkboxData } =
-    useFiltersContext();
-  const handleOnChange = (groupName: string) => (item: string | number) => {
-    handleCheckboxToggle(groupName, item);
-  };
-
-  const [selectedItemsWithValue, setSelectedItemsWithValue] = useState<
-    Record<string, Array<{ value: string }>>
-  >({});
-
-  useEffect(() => {
-    const newData: Record<
-      string,
-      Array<{
-        value: string;
-      }>
-    > = {};
-    Object.keys(checkboxData).map((groupName) => {
-      const selectedItems = checkboxData[groupName]['selectedItemsDraft'];
-      if (selectedItems) {
-        newData[groupName] = selectedItems.map((item) => ({
-          value: item,
-        }));
-      }
-    });
-    setSelectedItemsWithValue(newData);
-  }, [checkboxData]);
-
-  return (
-    <>
-      {Object.keys(checkboxData).map((groupName) => {
-        const accordionInfo = checkboxData[groupName];
-        const selectedItems = selectedItemsWithValue[groupName];
-        return (
-          <MultipleDropdown
-            key={accordionInfo.id}
-            showPlaceholder={false}
-            label={accordionInfo.title}
-            ref={(element) => {
-              setElementRef(accordionInfo.id, element);
-            }}
-            onChange={handleOnChange(groupName)}
-            selectedItems={selectedItems}
-            css={{
-              '& + ul': {
-                minWidth: 150,
-              },
-            }}>
-            {Object.keys(accordionInfo.items).map((itemKey) => {
-              const item = accordionInfo.items[itemKey];
-              return (
-                <DropdownOption
-                  key={`${accordionInfo.id}${item.name}`}
-                  value={item.name}
-                  isDisabled={item.isDisabled}>
-                  {item.content.text}
-                </DropdownOption>
-              );
-            })}
-          </MultipleDropdown>
-        );
-      })}
-    </>
-  );
-};
+import { DropdownOption, MultipleDropdown } from '@ssa-ui-kit/core';
+import React, { useEffect, useState } from 'react';
+import { useFiltersContext } from './FiltersContext';
+
+export const FiltersBlock = () => {
+  const { setElementRef, handleCheckboxToggle, checkboxData } =
+    useFiltersContext();
+  const handleOnChange = (groupName: string) => (item: string | number) => {
+    handleCheckboxToggle(groupName, item);
+  };
+
+  const [selectedItemsWithValue, setSelectedItemsWithValue] = useState<
+    Record<string, Array<{ value: string }>>
+  >({});
+
+  useEffect(() => {
+    const newData: Record<
+      string,
+      Array<{
+        value: string;
+      }>
+    > = {};
+    Object.keys(checkboxData).map((groupName) => {
+      const selectedItems = checkboxData[groupName]['selectedItemsDraft'];
+      if (selectedItems) {
+        newData[groupName] = selectedItems.map((item) => ({
+          value: item,
+        }));
+      }
+    });
+    setSelectedItemsWithValue(newData);
+  }, [checkboxData]);
+
+  return (
+    <>
+      {Object.keys(checkboxData).map((groupName) => {
+        const accordionInfo = checkboxData[groupName];
+        const selectedItems = selectedItemsWithValue[groupName];
+        return (
+          <MultipleDropdown
+            key={accordionInfo.id}
+            showPlaceholder={false}
+            label={accordionInfo.title}
+            ref={(element) => {
+              setElementRef(accordionInfo.id, element);
+            }}
+            onChange={handleOnChange(groupName)}
+            selectedItems={selectedItems}
+            css={{
+              '& + ul': {
+                minWidth: 150,
+              },
+            }}>
+            {Object.keys(accordionInfo.items).map((itemKey) => {
+              const item = accordionInfo.items[itemKey];
+              return (
+                <DropdownOption
+                  key={`${accordionInfo.id}${item.name}`}
+                  value={item.name}
+                  isDisabled={item.isDisabled}>
+                  {item.content.text}
+                </DropdownOption>
+              );
+            })}
+          </MultipleDropdown>
+        );
+      })}
+    </>
+  );
+};

package/src/components/Filters/FiltersContext.tsx

@@ -1,41 +1,41 @@
-import { UseTableDataResult } from '@components/TableFilters/hooks/useTableData';
-import { mockData } from '@components/TableFilters/stories/mockData';
-import {
-  BaseSyntheticEvent,
-  createContext,
-  createRef,
-  useContext,
-} from 'react';
-
-export const FiltersContext = createContext<UseTableDataResult>({
-  checkboxData: mockData,
-  selectedItemsByGroup: {},
-  handleCheckboxToggle: (groupName: string, name: string | number) => () => {
-    // no action
-  },
-  onClear: () => {
-    // no action
-  },
-  onReset: () => {
-    // no action
-  },
-  onSubmit: (event?: BaseSyntheticEvent) => {
-    // no action
-  },
-  refsList: [],
-  setElementRef: (groupName: string, element: HTMLElement | null) => {
-    // no action
-  },
-  wrapperRef: createRef(),
-} as UseTableDataResult);
-
-export const useFiltersContext = () => useContext(FiltersContext);
-
-export const FiltersContextProvider = ({
-  children,
-  ...rest
-}: {
-  children: React.ReactNode;
-} & UseTableDataResult) => (
-  <FiltersContext.Provider value={rest}>{children}</FiltersContext.Provider>
-);
+import { UseTableDataResult } from '@components/TableFilters/hooks/useTableData';
+import { mockData } from '@components/TableFilters/stories/mockData';
+import {
+  BaseSyntheticEvent,
+  createContext,
+  createRef,
+  useContext,
+} from 'react';
+
+export const FiltersContext = createContext<UseTableDataResult>({
+  checkboxData: mockData,
+  selectedItemsByGroup: {},
+  handleCheckboxToggle: (groupName: string, name: string | number) => () => {
+    // no action
+  },
+  onClear: () => {
+    // no action
+  },
+  onReset: () => {
+    // no action
+  },
+  onSubmit: (event?: BaseSyntheticEvent) => {
+    // no action
+  },
+  refsList: [],
+  setElementRef: (groupName: string, element: HTMLElement | null) => {
+    // no action
+  },
+  wrapperRef: createRef(),
+} as UseTableDataResult);
+
+export const useFiltersContext = () => useContext(FiltersContext);
+
+export const FiltersContextProvider = ({
+  children,
+  ...rest
+}: {
+  children: React.ReactNode;
+} & UseTableDataResult) => (
+  <FiltersContext.Provider value={rest}>{children}</FiltersContext.Provider>
+);

package/src/components/Filters/FiltersWrapper.tsx

@@ -1,8 +1,15 @@
-import styled from '@emotion/styled';
-
-export const FiltersWrapper = styled.div`
-  width: 300;
-  display: flex;
-  justify-content: right;
-  flex: auto;
-`;
+import styled from '@emotion/styled';
+
+export const FiltersWrapper = styled.div<{ isMoreButtonVisible?: boolean }>`
+  width: 300px;
+  display: flex;
+  justify-content: right;
+  flex: auto;
+  flex-direction: ${({ isMoreButtonVisible }) =>
+    isMoreButtonVisible ? 'row' : 'row-reverse'};
+
+  & > div:first-child > div:last-child {
+    margin-right: ${({ isMoreButtonVisible }) =>
+      isMoreButtonVisible ? '10px' : 0};
+  }
+`;

package/src/components/Filters/hooks/useVisibility.ts

@@ -1,101 +1,101 @@
-import { useEffect, useMemo, useState } from 'react';
-import { ElementInfo } from '../types';
-import { TableFilterConfig } from '@components/TableFilters/types';
-import { useWindowSize } from '@ssa-ui-kit/hooks';
-
-export type RefsByKey = Record<string, ElementInfo>;
-type UseVisibilityParams = {
-  checkboxData: TableFilterConfig;
-  refsList: Array<React.MutableRefObject<HTMLElement | null>>;
-  wrapperRef?: React.RefObject<HTMLElement>;
-  onVisibilityProcessed?: () => void;
-};
-
-export const useVisibility = ({
-  checkboxData,
-  wrapperRef,
-  refsList,
-  onVisibilityProcessed,
-}: UseVisibilityParams) => {
-  const [visibilities, setVisibilities] = useState<boolean[]>(
-    Object.keys(checkboxData).map(() => false),
-  );
-  const handleIntersection = () => {
-    if (wrapperRef && wrapperRef.current) {
-      processVisibility();
-    }
-  };
-
-  const observer = useMemo(
-    () =>
-      wrapperRef === null
-        ? null
-        : new IntersectionObserver(handleIntersection, {
-            root: wrapperRef?.current,
-            rootMargin: '0px',
-            threshold: 1,
-          }),
-    [wrapperRef?.current, refsList],
-  );
-
-  useEffect(() => {
-    return () => {
-      if (observer !== null) {
-        observer.disconnect();
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    if (refsList.length === Object.keys(checkboxData).length) {
-      refsList.forEach((currentRef) => {
-        if (currentRef.current && observer !== null) {
-          observer.observe(currentRef.current);
-        }
-      });
-    }
-    return () => {
-      refsList.forEach((currentRef) => {
-        if (currentRef.current && observer !== null) {
-          observer.unobserve(currentRef.current);
-        }
-      });
-    };
-  }, [refsList, observer]);
-
-  const windowSize = useWindowSize();
-
-  const processVisibility = () => {
-    const newVisibilities: boolean[] = [];
-    refsList.forEach((currentRef) => {
-      if (currentRef.current && wrapperRef?.current) {
-        const visibility =
-          currentRef.current?.offsetLeft >= wrapperRef?.current.offsetLeft;
-        newVisibilities.push(visibility);
-        currentRef.current.style.visibility = visibility ? 'visible' : 'hidden';
-      }
-    });
-    setVisibilities(newVisibilities);
-  };
-
-  const memoVisibilities = useMemo(() => {
-    return visibilities;
-  }, [JSON.stringify(visibilities)]);
-
-  useEffect(() => {
-    onVisibilityProcessed?.();
-  }, [memoVisibilities]);
-
-  useEffect(() => {
-    if (
-      refsList.length > 0 &&
-      refsList.length === Object.keys(checkboxData).length
-    ) {
-      processVisibility();
-    }
-  }, [windowSize.width]);
-
-  return {
-    processVisibility,
-  };
-};
+import { useEffect, useMemo, useState } from 'react';
+import { ElementInfo } from '../types';
+import { TableFilterConfig } from '@components/TableFilters/types';
+import { useWindowSize } from '@ssa-ui-kit/hooks';
+
+export type RefsByKey = Record<string, ElementInfo>;
+type UseVisibilityParams = {
+  checkboxData: TableFilterConfig;
+  refsList: Array<React.MutableRefObject<HTMLElement | null>>;
+  wrapperRef?: React.RefObject<HTMLElement>;
+  onVisibilityProcessed?: () => void;
+};
+
+export const useVisibility = ({
+  checkboxData,
+  wrapperRef,
+  refsList,
+  onVisibilityProcessed,
+}: UseVisibilityParams) => {
+  const [visibilities, setVisibilities] = useState<boolean[]>(
+    Object.keys(checkboxData).map(() => false),
+  );
+  const handleIntersection = () => {
+    if (wrapperRef && wrapperRef.current) {
+      processVisibility();
+    }
+  };
+
+  const observer = useMemo(
+    () =>
+      wrapperRef === null
+        ? null
+        : new IntersectionObserver(handleIntersection, {
+            root: wrapperRef?.current,
+            rootMargin: '0px',
+            threshold: 1,
+          }),
+    [wrapperRef?.current, refsList],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (observer !== null) {
+        observer.disconnect();
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (refsList.length === Object.keys(checkboxData).length) {
+      refsList.forEach((currentRef) => {
+        if (currentRef.current && observer !== null) {
+          observer.observe(currentRef.current);
+        }
+      });
+    }
+    return () => {
+      refsList.forEach((currentRef) => {
+        if (currentRef.current && observer !== null) {
+          observer.unobserve(currentRef.current);
+        }
+      });
+    };
+  }, [refsList, observer]);
+
+  const windowSize = useWindowSize();
+
+  const processVisibility = () => {
+    const newVisibilities: boolean[] = [];
+    refsList.forEach((currentRef) => {
+      if (currentRef.current && wrapperRef?.current) {
+        const visibility =
+          currentRef.current?.offsetLeft >= wrapperRef?.current.offsetLeft;
+        newVisibilities.push(visibility);
+        currentRef.current.style.visibility = visibility ? 'visible' : 'hidden';
+      }
+    });
+    setVisibilities(newVisibilities);
+  };
+
+  const memoVisibilities = useMemo(() => {
+    return visibilities;
+  }, [JSON.stringify(visibilities)]);
+
+  useEffect(() => {
+    onVisibilityProcessed?.();
+  }, [memoVisibilities]);
+
+  useEffect(() => {
+    if (
+      refsList.length > 0 &&
+      refsList.length === Object.keys(checkboxData).length
+    ) {
+      processVisibility();
+    }
+  }, [windowSize.width]);
+
+  return {
+    processVisibility,
+  };
+};

package/src/components/Filters/index.ts

@@ -1 +1 @@
-export * from './Filters';
+export * from './Filters';

package/src/components/Filters/stories/Filters.stories.tsx

@@ -1,17 +1,17 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { StoryComponent } from './StoryComponent';
-import { Filters } from '..';
-
-type FiltersType = typeof Filters;
-
-export default {
-  title: 'Widgets/Filters',
-  component: Filters,
-  argTypes: {},
-} as Meta<typeof Filters>;
-
-export const Default: StoryObj<FiltersType> = () => {
-  return <StoryComponent />;
-};
-
-Default.args = {};
+import type { Meta, StoryObj } from '@storybook/react';
+import { StoryComponent } from './StoryComponent';
+import { Filters } from '..';
+
+type FiltersType = typeof Filters;
+
+export default {
+  title: 'Widgets/Filters',
+  component: Filters,
+  argTypes: {},
+} as Meta<typeof Filters>;
+
+export const Default: StoryObj<FiltersType> = () => {
+  return <StoryComponent />;
+};
+
+Default.args = {};