@inceptionbg/iui 2.0.24 → 2.0.26

package/src/components/Table/components/print/TablePrint.tsx

@@ -1,200 +1,200 @@
-import type { FC } from 'react';
-import type { IPrintData } from '../../../../types/ITable';
-import { useEffect, useMemo } from 'react';
-import clsx from 'clsx';
-import { useTranslation } from 'react-i18next';
-import { faPrint } from '../../../../assets/icons';
-import { faFileArrowDown } from '../../../../assets/icons/regular/faFileArrowDown';
-import { useHideZendesk } from '../../../../hooks/useZendesk';
-import { formatDate, getCurrentDateFormatted } from '../../../../utils/dateUtils';
-import { IconButton } from '../../../Button/IconButton';
-import { ProgressBar } from '../../../Loader/ProgressBar';
-import { Pullover } from '../../../Pullover/Pullover';
-import { useTableContext } from '../../contexts/TableContext';
-import { HeaderTable } from '../header/TableHeader';
-
-export const TablePrint: FC = () => {
-  const { t } = useTranslation();
-  useHideZendesk();
-  const {
-    columnData: { columns },
-    printData,
-  } = useTableContext();
-
-  const {
-    label,
-    tableData: data,
-    isLoading,
-    progress,
-    paginationControl,
-    printPopupControl,
-    customHeader,
-    filters,
-    optionalNode,
-    organization,
-    saveXlsx,
-    totals,
-  } = useMemo(() => (printData ?? {}) as IPrintData, [printData]);
-  const { control, onOpen } = printPopupControl;
-
-  const cols = useMemo(() => columns.filter(e => !e.hidden && !e.printHidden), [columns]);
-
-  useEffect(() => {
-    if (control.isOpen) {
-      paginationControl?.setLimit(1000);
-      paginationControl?.setOffset(0);
-    }
-  }, [paginationControl, control.isOpen]);
-
-  return (
-    printData && (
-      <>
-        <IconButton
-          tooltip={t('PrintExport')}
-          icon={faPrint}
-          onClick={onOpen}
-          size="s"
-          variant="outlined"
-        />
-
-        <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>
-                  <p className="name">{organization.name}</p>
-                  {organization.taxId && <p>{`${t('TaxId')}: ${organization.taxId}`}</p>}
-                  {organization.registrationNumber && (
-                    <p>{`${t('BusinessCode')}: ${organization.registrationNumber}`}</p>
-                  )}
-                  {organization.jbkjs && <p>JBKJS: {organization.jbkjs}</p>}
-                  {organization.email && <p>Email: {organization.email}</p>}
-                </div>
-              ) : (
-                <div />
-              )}
-              <div className="text-right">
-                <p>{`${t('PrintDate')}: ${getCurrentDateFormatted()}`}</p>
-              </div>
-            </div>
-            <h3 className="my-3 text-center">{label}</h3>
-            {filters && (
-              <div className="flex justify-between">
-                <div>
-                  {filters.basic?.map(
-                    e =>
-                      !!e.value && (
-                        <div key={e.value} className="mb-2">
-                          <p>{`${e.label}: ${e.value}`}</p>
-                        </div>
-                      )
-                  )}
-                </div>
-                {filters.date && (
-                  <div>
-                    {filters.date.map(
-                      e =>
-                        (!!e.from || !!e.to) && (
-                          <div key={e.label} className="mb-2 text-right">
-                            <p>
-                              {e.label} {!!e.from && `${t('from')} ${formatDate(e.from)}`}{' '}
-                              {`${t('to')} ${formatDate(e.to || new Date().toString())}`}
-                            </p>
-                          </div>
-                        )
-                    )}
-                  </div>
-                )}
-              </div>
-            )}
-            {optionalNode?.aboveTable}
-            {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 (
-                        <tr key={row.uuid} className={row.className}>
-                          {cols.map(column => {
-                            const cell = row.cells[column.id];
-
-                            totalColsSpan += cell?.span
-                              ? // If span is -1 or larger then the number of columns
-                                cell.span === -1 || cell.span > cols.length
-                                ? // ...fill the rest of the table
-                                  cols.length - totalColsSpan
-                                : cell.span
-                              : 1;
-
-                            return (
-                              cols.length >= totalColsSpan && (
-                                <td
-                                  key={column.id}
-                                  align={cell?.align || column.align}
-                                  className={clsx(column.color, cell?.className, {
-                                    'word-break': column.break,
-                                  })}
-                                  colSpan={cell?.span === -1 ? cols.length : cell?.span}
-                                >
-                                  {cell?.printValue ?? cell?.value}
-                                </td>
-                              )
-                            );
-                          })}
-                        </tr>
-                      );
-                    })}
-                    {!!totals && (
-                      <tr>
-                        {cols.map(({ id: columnId }) => (
-                          <td
-                            key={columnId}
-                            align={totals.cells[columnId]?.align || 'right'}
-                            colSpan={totals.cells[columnId]?.span}
-                            className="py-3"
-                          >
-                            <strong>{totals.cells[columnId]?.value}</strong>
-                          </td>
-                        ))}
-                      </tr>
-                    )}
-                  </tbody>
-                </table>
-              )
-            )}
-            {optionalNode?.bellowTable}
-          </div>
-        </Pullover>
-      </>
-    )
-  );
-};
+import type { FC } from 'react';
+import type { IPrintData } from '../../../../types/ITable';
+import { useEffect, useMemo } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { faPrint } from '../../../../assets/icons';
+import { faFileArrowDown } from '../../../../assets/icons/regular/faFileArrowDown';
+import { useHideZendesk } from '../../../../hooks/useZendesk';
+import { formatDate, getCurrentDateFormatted } from '../../../../utils/dateUtils';
+import { IconButton } from '../../../Button/IconButton';
+import { ProgressBar } from '../../../Loader/ProgressBar';
+import { Pullover } from '../../../Pullover/Pullover';
+import { useTableContext } from '../../contexts/TableContext';
+import { HeaderTable } from '../header/TableHeader';
+
+export const TablePrint: FC = () => {
+  const { t } = useTranslation();
+  useHideZendesk();
+  const {
+    columnData: { columns },
+    printData,
+  } = useTableContext();
+
+  const {
+    label,
+    tableData: data,
+    isLoading,
+    progress,
+    paginationControl,
+    printPopupControl,
+    customHeader,
+    filters,
+    optionalNode,
+    organization,
+    saveXlsx,
+    totals,
+  } = useMemo(() => (printData ?? {}) as IPrintData, [printData]);
+  const { control, onOpen } = printPopupControl;
+
+  const cols = useMemo(() => columns.filter(e => !e.hidden && !e.printHidden), [columns]);
+
+  useEffect(() => {
+    if (control.isOpen) {
+      paginationControl?.setLimit(1000);
+      paginationControl?.setOffset(0);
+    }
+  }, [paginationControl, control.isOpen]);
+
+  return (
+    printData && (
+      <>
+        <IconButton
+          tooltip={t('PrintExport')}
+          icon={faPrint}
+          onClick={onOpen}
+          size="s"
+          variant="outlined"
+        />
+
+        <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>
+                  <p className="name">{organization.name}</p>
+                  {organization.taxId && <p>{`${t('TaxId')}: ${organization.taxId}`}</p>}
+                  {organization.registrationNumber && (
+                    <p>{`${t('BusinessCode')}: ${organization.registrationNumber}`}</p>
+                  )}
+                  {organization.jbkjs && <p>JBKJS: {organization.jbkjs}</p>}
+                  {organization.email && <p>Email: {organization.email}</p>}
+                </div>
+              ) : (
+                <div />
+              )}
+              <div className="text-right">
+                <p>{`${t('PrintDate')}: ${getCurrentDateFormatted()}`}</p>
+              </div>
+            </div>
+            <h3 className="my-3 text-center">{label}</h3>
+            {filters && (
+              <div className="flex justify-between">
+                <div>
+                  {filters.basic?.map(
+                    e =>
+                      !!e.value && (
+                        <div key={e.value} className="mb-2">
+                          <p>{`${e.label}: ${e.value}`}</p>
+                        </div>
+                      )
+                  )}
+                </div>
+                {filters.date && (
+                  <div>
+                    {filters.date.map(
+                      e =>
+                        (!!e.from || !!e.to) && (
+                          <div key={e.label} className="mb-2 text-right">
+                            <p>
+                              {e.label} {!!e.from && `${t('from')} ${formatDate(e.from)}`}{' '}
+                              {`${t('to')} ${formatDate(e.to || new Date().toString())}`}
+                            </p>
+                          </div>
+                        )
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+            {optionalNode?.aboveTable}
+            {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 (
+                        <tr key={row.uuid} className={row.className}>
+                          {cols.map(column => {
+                            const cell = row.cells[column.id];
+
+                            totalColsSpan += cell?.span
+                              ? // If span is -1 or larger then the number of columns
+                                cell.span === -1 || cell.span > cols.length
+                                ? // ...fill the rest of the table
+                                  cols.length - totalColsSpan
+                                : cell.span
+                              : 1;
+
+                            return (
+                              cols.length >= totalColsSpan && (
+                                <td
+                                  key={column.id}
+                                  align={cell?.align || column.align}
+                                  className={clsx(column.color, cell?.className, {
+                                    'word-break': column.break,
+                                  })}
+                                  colSpan={cell?.span === -1 ? cols.length : cell?.span}
+                                >
+                                  {cell?.printValue ?? cell?.value}
+                                </td>
+                              )
+                            );
+                          })}
+                        </tr>
+                      );
+                    })}
+                    {!!totals && (
+                      <tr>
+                        {cols.map(({ id: columnId }) => (
+                          <td
+                            key={columnId}
+                            align={totals.cells[columnId]?.align || 'right'}
+                            colSpan={totals.cells[columnId]?.span}
+                            className="py-3"
+                          >
+                            <strong>{totals.cells[columnId]?.value}</strong>
+                          </td>
+                        ))}
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
+              )
+            )}
+            {optionalNode?.bellowTable}
+          </div>
+        </Pullover>
+      </>
+    )
+  );
+};

package/src/components/Table/components/select/TableSelect.tsx

@@ -1,50 +1,50 @@
-import type { FC } from 'react';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { faClipboardCheck } from '../../../../assets/icons/light/faClipboardCheck';
-import { NotificationBadge } from '../../../Badge/NotificationBadge';
-import { IconButton } from '../../../Button/IconButton';
-import { Menu } from '../../../Menu/Menu';
-import { Tooltip } from '../../../Tooltip/Tooltip';
-import { useTableContext } from '../../contexts/TableContext';
-
-export const TableSelect: FC = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const { t } = useTranslation();
-  const { rowSelect, selectActions } = useTableContext();
-
-  return !!rowSelect && selectActions.length > 0 ? (
-    <Menu
-      isOpen={isOpen}
-      onClose={() => setIsOpen(false)}
-      placement="bottom-left"
-      renderButton={ref => (
-        <NotificationBadge number={rowSelect.selectedRows.size}>
-          <Tooltip
-            ref={ref}
-            label={t('TableSelect')}
-            disabled={!rowSelect.selectedRows.size}
-          >
-            <IconButton
-              icon={faClipboardCheck}
-              active={isOpen}
-              onClick={() => setIsOpen(!isOpen)}
-              disabled={!rowSelect.selectedRows.size}
-              variant="outlined"
-              size="s"
-            />
-          </Tooltip>
-        </NotificationBadge>
-      )}
-      items={selectActions.map(action => ({
-        ...action,
-        onClick: () => {
-          action.onClick!(rowSelect.selectedRows);
-          setIsOpen(false);
-          action.clearSelected && rowSelect.setSelectedRows(new Set<string>());
-        },
-      }))}
-    />
-  ) : null;
-};
+import type { FC } from 'react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { faClipboardCheck } from '../../../../assets/icons/light/faClipboardCheck';
+import { NotificationBadge } from '../../../Badge/NotificationBadge';
+import { IconButton } from '../../../Button/IconButton';
+import { Menu } from '../../../Menu/Menu';
+import { Tooltip } from '../../../Tooltip/Tooltip';
+import { useTableContext } from '../../contexts/TableContext';
+
+export const TableSelect: FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { t } = useTranslation();
+  const { rowSelect, selectActions } = useTableContext();
+
+  return !!rowSelect && selectActions.length > 0 ? (
+    <Menu
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      placement="bottom-left"
+      renderButton={ref => (
+        <NotificationBadge number={rowSelect.selectedRows.size}>
+          <Tooltip
+            ref={ref}
+            label={t('TableSelect')}
+            disabled={!rowSelect.selectedRows.size}
+          >
+            <IconButton
+              icon={faClipboardCheck}
+              active={isOpen}
+              onClick={() => setIsOpen(!isOpen)}
+              disabled={!rowSelect.selectedRows.size}
+              variant="outlined"
+              size="s"
+            />
+          </Tooltip>
+        </NotificationBadge>
+      )}
+      items={selectActions.map(action => ({
+        ...action,
+        onClick: () => {
+          action.onClick!(rowSelect.selectedRows);
+          setIsOpen(false);
+          action.clearSelected && rowSelect.setSelectedRows(new Set<string>());
+        },
+      }))}
+    />
+  ) : null;
+};

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

@@ -1,73 +1,73 @@
-import type { FC } from 'react';
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { faArrowDownShortWide } from '../../../../assets/icons/light/faArrowDownShortWide';
-import { faArrowDownWideShort } from '../../../../assets/icons/light/faArrowDownWideShort';
-import { faArrowUpArrowDown } from '../../../../assets/icons/light/faArrowUpArrowDown';
-import { IconButton } from '../../../Button/IconButton';
-import { Menu } from '../../../Menu/Menu';
-import { Tooltip } from '../../../Tooltip/Tooltip';
-import { useTableContext } from '../../contexts/TableContext';
-
-export const TableSort: FC = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const { t } = useTranslation();
-  const { sortData } = useTableContext();
-  const { sort, setSort, sortOptions } = sortData ?? {};
-
-  useEffect(() => {
-    if (isOpen) {
-      const handleKeyDown = (event: KeyboardEvent) => {
-        event.stopPropagation();
-        if (event.key === 'Escape') {
-          event.preventDefault();
-          event.stopPropagation();
-          setIsOpen(false);
-        }
-      };
-
-      document.addEventListener('keydown', handleKeyDown);
-      return () => {
-        document.removeEventListener('keydown', handleKeyDown);
-      };
-    }
-  }, [isOpen]);
-
-  return sortData ? (
-    <Menu
-      isOpen={isOpen}
-      onClose={() => setIsOpen(false)}
-      renderButton={ref => (
-        <Tooltip label={t('Sort')} ref={ref}>
-          <IconButton
-            icon={faArrowUpArrowDown}
-            active={isOpen}
-            onClick={() => setIsOpen(!isOpen)}
-            size="s"
-            variant="outlined"
-          />
-        </Tooltip>
-      )}
-      size={sortData.menuSize}
-      items={sortOptions?.map(e => {
-        const valueAsc = e.value + '_ASC';
-        const valueDesc = e.value + '_DESC';
-
-        return {
-          label: e.label,
-          onClick: () => setSort?.(sort === valueDesc ? valueAsc : valueDesc),
-          active: sort?.startsWith(e.value),
-          className: 'table-sort-item',
-          keepOpen: true,
-          icon:
-            sort === valueDesc
-              ? faArrowDownWideShort
-              : sort === valueAsc
-                ? faArrowDownShortWide
-                : undefined,
-        };
-      })}
-    />
-  ) : null;
-};
+import type { FC } from 'react';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { faArrowDownShortWide } from '../../../../assets/icons/light/faArrowDownShortWide';
+import { faArrowDownWideShort } from '../../../../assets/icons/light/faArrowDownWideShort';
+import { faArrowUpArrowDown } from '../../../../assets/icons/light/faArrowUpArrowDown';
+import { IconButton } from '../../../Button/IconButton';
+import { Menu } from '../../../Menu/Menu';
+import { Tooltip } from '../../../Tooltip/Tooltip';
+import { useTableContext } from '../../contexts/TableContext';
+
+export const TableSort: FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { t } = useTranslation();
+  const { sortData } = useTableContext();
+  const { sort, setSort, sortOptions } = sortData ?? {};
+
+  useEffect(() => {
+    if (isOpen) {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        event.stopPropagation();
+        if (event.key === 'Escape') {
+          event.preventDefault();
+          event.stopPropagation();
+          setIsOpen(false);
+        }
+      };
+
+      document.addEventListener('keydown', handleKeyDown);
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+  }, [isOpen]);
+
+  return sortData ? (
+    <Menu
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      renderButton={ref => (
+        <Tooltip label={t('Sort')} ref={ref}>
+          <IconButton
+            icon={faArrowUpArrowDown}
+            active={isOpen}
+            onClick={() => setIsOpen(!isOpen)}
+            size="s"
+            variant="outlined"
+          />
+        </Tooltip>
+      )}
+      size={sortData.menuSize}
+      items={sortOptions?.map(e => {
+        const valueAsc = e.value + '_ASC';
+        const valueDesc = e.value + '_DESC';
+
+        return {
+          label: e.label,
+          onClick: () => setSort?.(sort === valueDesc ? valueAsc : valueDesc),
+          active: sort?.startsWith(e.value),
+          className: 'table-sort-item',
+          keepOpen: true,
+          icon:
+            sort === valueDesc
+              ? faArrowDownWideShort
+              : sort === valueAsc
+                ? faArrowDownShortWide
+                : undefined,
+        };
+      })}
+    />
+  ) : null;
+};