@inceptionbg/iui 2.0.10 → 2.0.12

package/src/components/Table/components/header/TableHeaderRow.tsx

@@ -4,9 +4,10 @@ import clsx from 'clsx';
 
 interface Props {
   row: ITableColumn[];
+  print?: boolean;
 }
 
-export const TableHeaderRow: FC<Props> = ({ row }) => {
+export const TableHeaderRow: FC<Props> = ({ row, print }) => {
   // const { sortData } = useTableContext();
   // const { sort, setSort, sortOptions } = sortData ?? {};
   // const activeSortOption = sortOptions?.find(e => sort?.startsWith(e.value));
@@ -18,18 +19,26 @@ export const TableHeaderRow: FC<Props> = ({ row }) => {
           key={col.id}
           colSpan={col.colSpan}
           rowSpan={col.rowSpan}
-          className={clsx(col.color, col.className)}
+          className={
+            print
+              ? undefined
+              : clsx(col.color, col.className, {
+                  'not-first-cell': col.notFirstCell,
+                })
+          }
           // onClick={() => {
           //   const sortValue = sortOptions?.find(e => col.label === e.label)?.value;
           //   sortValue &&
           //     setSort?.(sort === sortValue + desc ? sortValue + asc : sortValue + desc);
           // }}
           style={
-            col.minWidth
-              ? { minWidth: col.minWidth }
-              : col.width
-                ? { width: col.width }
-                : undefined
+            print
+              ? undefined
+              : col.minWidth
+                ? { minWidth: col.minWidth }
+                : col.width
+                  ? { width: col.width }
+                  : undefined
           }
           hidden={col.hidden}
         >

package/{idea/Table/Components/Print → src/components/Table/components/print}/TablePrint.tsx

@@ -1,77 +1,84 @@
-import { FC, useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { faFileArrowDown } from '../../../../assets/icons/regular/faFileArrowDown';
-import { faPrint } from '../../../../assets/icons/solid/faPrint';
-import { faXmark } from '../../../../assets/icons/solid/faXmark';
-import { IPrintData, ITableColumn, ITableDataItem } from '../../../../types/ITable';
-import { formatDate, getCurrentDateFormatted } from '../../../../utils/dateUtils';
-import { Button } from '../../../Button/Button';
-import { FullScreenLoader } from '../../../Loader/Loader';
+import { useEffect, useMemo, type FC } from 'react';
+import { IconButton } from '../../../Button/IconButton';
+import { faPrint } from '../../../../assets/icons';
 import { useTranslation } from 'react-i18next';
-import { rootDir } from '../../../../utils/rootDir';
-import clsx from 'clsx';
-import { HeaderTable } from '../Header/TableHeader';
+import { Pullover } from '../../../Pullover/Pullover';
+import { useTableContext } from '../../contexts/TableContext';
+import { IPrintData } from '../../../../types/ITable';
 import { useHideZendesk } from '../../../../hooks/useZendesk';
+import { formatDate, getCurrentDateFormatted } from '../../../../utils/dateUtils';
+import { HeaderTable } from '../header/TableHeader';
+import clsx from 'clsx';
+import { faFileArrowDown } from '../../../../assets/icons/regular/faFileArrowDown';
+import { ProgressBar } from '../../../Loader/ProgressBar';
 
-interface Props extends IPrintData {
-  isOpen: boolean;
-  onClose: () => void;
-  columns: ITableColumn[];
-  excludeColumnIds?: string[];
-}
-export const TablePrint: FC<Props> = ({
-  isOpen,
-  onClose,
-  columns,
-  excludeColumnIds = [],
-  customHeader,
-  organization,
-  filters,
-  label,
-  optionalNode,
-  getPrintData,
-  formatPrintData,
-  saveXlsx,
-  totals,
-}) => {
-  const [data, setData] = useState<ITableDataItem[]>([]);
-  const [offset, setOffset] = useState(0);
-  const [isLoading, setIsLoading] = useState(false);
-
+export const TablePrint: FC = () => {
   const { t } = useTranslation();
   useHideZendesk();
+  const { columns, printData } = useTableContext();
+
+  const {
+    label,
+    tableData: data,
+    isLoading,
+    progress,
+    paginationControl,
+    printPopupControl,
+    customHeader,
+    excludeColumnIds,
+    filters,
+    optionalNode,
+    organization,
+    saveXlsx,
+    totals,
+  } = useMemo(() => (printData ?? {}) as IPrintData, [printData]);
+  const { control, onOpen } = printPopupControl;
 
-  const cols = columns.filter(
-    e => !['actions', 'select', ...excludeColumnIds].includes(e.id)
+  const cols = useMemo(
+    () => columns.filter(e => !['actions', 'select', excludeColumnIds].includes(e.id)),
+    [columns, excludeColumnIds]
   );
 
   useEffect(() => {
-    rootDir?.classList.add('hidden');
-    return () => {
-      rootDir?.classList.remove('hidden');
-    };
-  }, []);
+    if (control.isOpen) {
+      paginationControl?.setLimit(1000);
+      paginationControl?.setOffset(0);
+    }
+  }, [paginationControl, control.isOpen]);
 
-  useEffect(() => {
-    setIsLoading(true);
-    getPrintData({ limit: 1000, offset })
-      .then(e => {
-        setData(prevState => {
-          const data = !!e.data.length ? formatPrintData(e.data) : [];
-          const newState = [...prevState, ...data];
-          e.totalRows && e.totalRows > newState.length
-            ? setOffset(offset + 1)
-            : setIsLoading(false);
-          return e.totalRows && e.totalRows > prevState.length ? newState : prevState;
-        });
-      })
-      .catch(() => setIsLoading(false));
-  }, [offset, formatPrintData, getPrintData]);
+  return (
+    printData && (
+      <>
+        <IconButton
+          tooltip={t('PrintExport')}
+          icon={faPrint}
+          onClick={onOpen}
+          size="s"
+          variant="outlined"
+        />
 
-  return isOpen
-    ? createPortal(
-        <div className="iui-print-dialog">
-          <div className="content">
+        <Pullover
+          control={control}
+          header={{ title: t('PrintExport') }}
+          footer={{
+            confirmButton: {
+              label: t('Print'),
+              onClick: window.print,
+              // type: 'submit',
+            },
+            additionalButton: saveXlsx
+              ? {
+                  label: t('SaveXlsx'),
+                  icon: faFileArrowDown,
+                  onClick: saveXlsx,
+                }
+              : undefined,
+          }}
+          contentClassName="iui-print"
+          size="vw100"
+          portalTarget={document.body}
+        >
+          <div className="print-content">
             <div className="flex justify-between">
               {organization ? (
                 <div>
@@ -121,11 +128,18 @@ export const TablePrint: FC<Props> = ({
               </div>
             )}
             {optionalNode?.aboveTable}
-            {data && (
-              <table width="100%" className="print-table">
-                <HeaderTable columns={cols} customHeader={customHeader} headerWrap />
-                <tbody>
-                  <>
+            {isLoading ? (
+              <ProgressBar progress={progress} />
+            ) : (
+              data && (
+                <table width="100%" className="print-table">
+                  <HeaderTable
+                    columns={cols}
+                    customHeader={customHeader}
+                    headerWrap
+                    print
+                  />
+                  <tbody>
                     {data.map(row => {
                       let totalColsSpan = 0;
                       return (
@@ -173,35 +187,14 @@ export const TablePrint: FC<Props> = ({
                         ))}
                       </tr>
                     )}
-                  </>
-                </tbody>
-              </table>
+                  </tbody>
+                </table>
+              )
             )}
             {optionalNode?.bellowTable}
           </div>
-          <div className="iui-print-actions no-print">
-            <Button
-              label={t('Cancel')}
-              icon={faXmark}
-              onClick={e => {
-                e.stopPropagation();
-                onClose();
-              }}
-              className="mr-3"
-            />
-            {!!saveXlsx && (
-              <Button
-                label={t('SaveXlsx')}
-                icon={faFileArrowDown}
-                onClick={() => saveXlsx()}
-                className="mr-3"
-              />
-            )}
-            <Button label={t('Print')} icon={faPrint} onClick={() => window.print()} />
-          </div>
-          <FullScreenLoader isLoading={isLoading} />
-        </div>,
-        document.body
-      )
-    : null;
+        </Pullover>
+      </>
+    )
+  );
 };

package/src/components/Table/components/sort/TableSort.tsx

@@ -39,6 +39,8 @@ export const TableSort: FC = () => {
           label: e.label,
           onClick: () => setSort?.(sort === valueDesc ? valueAsc : valueDesc),
           active: sort?.startsWith(e.value),
+          className: 'table-sort-item',
+          keepOpen: true,
           icon:
             sort === valueDesc
               ? faArrowDownWideShort

package/src/components/Table/components/templates/TableTemplates.tsx

@@ -0,0 +1,81 @@
+import { useState, type FC } from 'react';
+import { IconButton } from '../../../Button/IconButton';
+import { useTranslation } from 'react-i18next';
+import { useTableContext } from '../../contexts/TableContext';
+import { faBookmark, faBookmarkSlash } from '../../../../assets/icons';
+import { usePopupControl } from '../../../../hooks/usePopupControl';
+import { Pullover } from '../../../Pullover/Pullover';
+
+export const TableTemplates: FC = () => {
+  const { t } = useTranslation();
+  const { templates } = useTableContext();
+  const { control, onClose, onOpen } = usePopupControl();
+
+  return (
+    <>
+      <IconButton
+        tooltip={t('Templates')}
+        icon={faBookmark}
+        active={control.isOpen}
+        onClick={onOpen}
+        size="s"
+        variant="outlined"
+      />
+
+      <Pullover
+        control={control}
+        header={{
+          title: t('Templates'),
+          onSearch: templates?.setSearch,
+        }}
+        // onFormSubmit={() => {
+        //   const data = deleteEmptyPropsIncludingArray(searchData);
+        //   onSearch?.(excludeFromSearch ? deleteProps(data, excludeFromSearch) : data);
+        //   onClose();
+        // }}
+        footer={{
+          confirmButton: {
+            label: t('ApplyTemplate'),
+            type: 'submit',
+          },
+          additionalButton: {
+            label: t('ResetTemplate'),
+            icon: faBookmarkSlash,
+            onClick: () => {
+              //   setSearchData?.(defaultSearch);
+              //   onSearch?.(defaultSearch);
+              //   onClose();
+            },
+            // disabled: defaultSearch
+            //   ? JSON.stringify(searchData) === JSON.stringify(defaultSearch)
+            //   : Object.keys(searchData).length === 0,
+          },
+        }}
+        // contentClassName="iui-filters-list"
+        onCloseCallback={() => templates?.setSearch?.('')}
+        size="w600"
+      >
+        Templates
+        {templates?.items.map(item => (
+          <div key={item.uuid}>{item.name}</div>
+        ))}
+      </Pullover>
+    </>
+    // <Menu
+    //   isOpen={isMenuOpen}
+    //   onClose={onMenuClose}
+    //   renderButton={ref => (
+    //     <Tooltip label={t('Templates')} ref={ref}>
+    //       <IconButton
+    //         icon={faBookmark}
+    //         active={isMenuOpen}
+    //         onClick={onMenuOpen}
+    //         size="s"
+    //         variant="outlined"
+    //       />
+    //     </Tooltip>
+    //   )}
+    //   items={templates?.menuItems}
+    // />
+  );
+};

package/src/components/Table/hooks/useTablePrint.ts

@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react';
+import { IGetPrintData, IPrintData } from '../../../types/ITable';
+import { usePopupControl } from '../../../hooks/usePopupControl';
+
+type Props<T> = {
+  getPrintData: IGetPrintData<T>;
+  totalRows?: number;
+};
+
+const limit = 1000;
+const defaultData = { items: [], totalRows: 0 };
+
+export const useTablePrint = <T>({
+  getPrintData,
+  totalRows: initialTotalRows = 0,
+}: Props<T>) => {
+  const printPopupControl = usePopupControl();
+
+  const [data, setData] = useState<{ items: T[]; totalRows: number }>(defaultData);
+  const [offset, setOffset] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (printPopupControl.control.isOpen) {
+      setIsLoading(true);
+      setOffset(0);
+    }
+    return () => {
+      setIsLoading(false);
+      setData(defaultData);
+      setOffset(0);
+    };
+  }, [printPopupControl.control.isOpen]);
+
+  useEffect(() => {
+    if (printPopupControl.control.isOpen) {
+      getPrintData({
+        pagination: { limit, offset },
+        noTotalRows: !!initialTotalRows || offset > 0,
+      })
+        .then(({ items, totalRows: newTotalRows }) => {
+          setData(prevState => {
+            const newData = offset === 0 ? items : prevState.items.concat(items);
+            const totalRows =
+              newTotalRows || initialTotalRows || prevState.totalRows || 0;
+
+            if (items?.length === limit) {
+              setOffset(offset => offset + 1);
+            } else {
+              setIsLoading(false);
+            }
+
+            return { items: newData, totalRows };
+          });
+        })
+        .catch(() => setIsLoading(false));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [printPopupControl.control.isOpen, initialTotalRows, offset]);
+
+  const loaded = data.items.length;
+  const progress = data.totalRows ? (loaded / data.totalRows) * 100 : 0;
+
+  const printData: Pick<
+    IPrintData<T>,
+    'printPopupControl' | 'isLoading' | 'progress' | 'items'
+  > = {
+    printPopupControl,
+    isLoading,
+    progress,
+    items: data.items ?? [],
+  };
+
+  return printData;
+};

package/src/components/Wrappers/PageLayout.tsx

@@ -93,7 +93,7 @@ export const PageLayout: FC<IPageLayoutProps> = ({
                     size="s"
                   />
                   <Pullover
-                    controlRef={helpControl.controlRef}
+                    control={helpControl.control}
                     header={{
                       title: help.title,
                     }}

package/src/hooks/useLocalPopoverControl.ts

@@ -1,37 +1,31 @@
-import { Ref, useCallback, useImperativeHandle, useRef, useState } from 'react';
-
-export interface PopupControlRef {
-  isOpen: boolean;
-  onOpen: () => void;
-  onClose: () => void;
-}
+import { useCallback, useImperativeHandle, useRef } from 'react';
+import { ILocalPopupControl } from '../types/IPopup';
 
 interface Props {
-  controlRef?: Ref<PopupControlRef>;
+  control: ILocalPopupControl;
   onCloseCallback?: () => void;
 }
 
-export const useLocalPopoverControl = ({ controlRef, onCloseCallback }: Props) => {
-  const [isOpen, setIsOpen] = useState(false);
-
+export const useLocalPopoverControl = ({ control, onCloseCallback }: Props) => {
   const elementRef = useRef<HTMLDivElement>(null);
 
+  const handleOpen = useCallback(() => control.setIsOpen(true), [control]);
+
   const handleClose = useCallback(() => {
     elementRef.current?.classList.add('closing');
     setTimeout(() => {
       onCloseCallback?.();
-      setIsOpen(false);
+      control.setIsOpen(false);
     }, 200);
-  }, [onCloseCallback]);
+  }, [control, onCloseCallback]);
 
-  useImperativeHandle(controlRef, () => ({
-    isOpen,
-    onOpen: () => setIsOpen(true),
+  useImperativeHandle(control?.controlRef, () => ({
+    onOpen: handleOpen,
     onClose: handleClose,
   }));
 
   return {
-    isOpen,
+    isOpen: control?.isOpen,
     onClose: handleClose,
     elementRef: elementRef,
   };

package/src/hooks/usePopupControl.ts

@@ -1,13 +1,17 @@
-import { useRef } from 'react';
-import { PopupControlRef } from './useLocalPopoverControl';
+import { useCallback, useRef, useState } from 'react';
+import { IPopupControl, PopupControlRef } from '../types/IPopup';
+
+export const usePopupControl: () => IPopupControl = () => {
+  const [isOpen, setIsOpen] = useState(false);
 
-export const usePopupControl = () => {
   const controlRef = useRef<PopupControlRef>(null);
 
+  const onOpen = useCallback(() => controlRef.current?.onOpen(), []);
+  const onClose = useCallback(() => controlRef.current?.onClose(), []);
+
   return {
-    controlRef,
-    isOpen: controlRef.current?.isOpen,
-    onOpen: () => controlRef.current?.onOpen(),
-    onClose: () => controlRef.current?.onClose(),
+    control: { controlRef, isOpen, setIsOpen },
+    onOpen,
+    onClose,
   };
 };

package/src/index.ts

@@ -17,10 +17,12 @@ import type {
 } from './types/IBasic';
 import type { IKeyboardAction } from './types/IKeyboard';
 import type { IMenuItem, IMenuPlacement } from './types/IMenu';
+import type { PopupControlRef, IPopupControl } from './types/IPopup';
 import type { IError } from './types/IError';
 import type { ISelectData } from './types/ISelect';
 import type { ITab } from './types/ITab';
 import type {
+  IGetPrintData,
   IPagination,
   IPaginationControl,
   ITable,
@@ -69,7 +71,9 @@ import {
   SelectCreatable,
 } from './components/Inputs/Selects/Select';
 import { TextInput } from './components/Inputs/TextInput';
+import { List } from './components/List/List';
 import { FullScreenLoader, LazyLoader, Loader } from './components/Loader/Loader';
+import { ProgressBar } from './components/Loader/ProgressBar';
 import { Menu } from './components/Menu/Menu';
 import { MenuItem } from './components/Menu/MenuItem';
 // import { ItemActionsMenu } from './components/Table/Components/Edit/ItemActionsMenu';
@@ -96,6 +100,7 @@ import { useDefaultTemplate } from './components/Table/hooks/useDefaultTemplate'
 import { useTableEdit } from './components/Table/hooks/useTableEdit';
 import { useTableFilterFields } from './components/Table/hooks/useTableFilterFields';
 import { useTablePagination } from './components/Table/hooks/useTablePagination';
+import { useTablePrint } from './components/Table/hooks/useTablePrint';
 import { useTableSearch } from './components/Table/hooks/useTableSearch';
 import { useTableSelect } from './components/Table/hooks/useTableSelect';
 import { useTableSort } from './components/Table/hooks/useTableSort';
@@ -195,12 +200,14 @@ export {
   TextAreaInput,
   LazyLoader,
   Loader,
+  List,
   Menu,
   MenuItem,
   NotificationBadge,
   NumberInput,
   PageLayout,
   PasswordInput,
+  ProgressBar,
   Pullover,
   PillBadge,
   Radio,
@@ -229,6 +236,7 @@ export {
   useTableEdit,
   useTableFilterFields,
   useTablePagination,
+  useTablePrint,
   useTableSearch,
   useTableSelect,
   useTableSort,
@@ -244,6 +252,8 @@ export type {
   IKeyboardAction,
   IMenuItem,
   IMenuPlacement,
+  PopupControlRef,
+  IPopupControl as IPopupControl,
   IError,
   IFormWrapper,
   IHeaderAction,
@@ -264,6 +274,7 @@ export type {
   ITableFilterData,
   ITableFilterItem,
   ITableSort,
+  IGetPrintData,
   ITreeItem,
   IValueLabel,
   IconDefinition,

package/src/styles/App.scss

@@ -25,11 +25,13 @@
 @use './components/inputDateTime';
 @use './components/inputRadio';
 @use './components/inputSelect';
+@use './components/list';
 @use './components/loader';
 @use './components/menu';
 @use './components/page';
 @use './components/portal';
 @use './components/print';
+@use './components/progressBar';
 @use './components/pullover';
 @use './components/scrollbar';
 @use './components/sidebar';

package/src/styles/common/_animations.scss

@@ -24,20 +24,14 @@
   }
 }
 
-// @keyframes linear-progress {
-//   0% {
-//     background-size: 200% 100%;
-//     background-position: left -31.25% top 0%;
-//   }
-//   50% {
-//     background-size: 800% 100%;
-//     background-position: left -49% top 0%;
-//   }
-//   100% {
-//     background-size: 400% 100%;
-//     background-position: left -102% top 0%;
-//   }
-// }
+@keyframes shimmer {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
 
 @keyframes auto-fill {
   to {

package/src/styles/common/_typography.scss

@@ -38,7 +38,7 @@ h4 {
 }
 
 .bold {
-  font-weight: bold !important;
+  font-weight: 600 !important;
 }
 .italic {
   font-style: italic !important;

package/src/styles/common/helpers/_base.scss

@@ -49,7 +49,3 @@ a {
 .hover-neutral:hover {
   background-color: var(--neutral-hover);
 }
-
-.no-border {
-  border: none !important;
-}