@majoo-ui/react 2.0.1 → 2.1.0-rc.0

package/components/table/MobileTable.esm.js

@@ -0,0 +1,415 @@
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.filter.js';
+import 'core-js/modules/es.iterator.map.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useCallback } from 'react';
+import { ChevronUpOutline, ChevronDownOutline } from '@majoo-ui/icons';
+import Heading from '../heading/Heading.esm.js';
+import { styled } from '../../config/stitches.config.esm.js';
+import Box from '../../layout/box/Box.esm.js';
+import Flex from '../../layout/flex/Flex.esm.js';
+import { TableContent, TableHead, TableHeaderCellContainer, TableHeadCellContent, TableBody, addOnCellStyle, TableFoot, TableFootRow, TableFootCell } from './Table.esm.js';
+import Text from '../text/Text.esm.js';
+import { ConditionalWrapper } from '../../wrapper/ConditionalWrapper.esm.js';
+import { ContextMenuTrigger } from '../contextMenu/ContextMenu.esm.js';
+import Paragraph from '../paragraph/Paragraph.esm.js';
+import { useTranslation } from 'react-i18next';
+
+const TableContainer = styled(Flex, {
+  position: 'relative',
+  flexDirection: 'column',
+  width: '100%',
+  height: '100%',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+  padding: '0',
+  variants: {
+    decoration: {
+      true: {
+        overflow: 'unset'
+      }
+    }
+  }
+});
+const TableHeadRow = styled('tr', {
+  borderBottom: '1pt solid $bgBorder',
+  '& th': {
+    paddingLeft: '$spacing-05'
+  },
+  '& th:first-child': {
+    padding: 0
+  }
+});
+const TableHeadCell = styled('th', {
+  height: '48px'
+});
+const TableRow = styled('tr', {
+  borderBottom: '1pt solid $bgBorder',
+  '& td': {
+    paddingLeft: '$spacing-05'
+  },
+  '& td:first-child': {
+    padding: 0
+  }
+});
+const TableCell = styled('td', {
+  height: '48px',
+  fontSize: '$short-content-regular',
+  lineHeight: '$short-content-regular',
+  letterSpacing: '$short-content-regular',
+  fontWeight: '400',
+  color: '$textPrimary'
+});
+const MobileTable = /*#__PURE__*/React__default.forwardRef(({
+  instance,
+  totalData,
+  customEmptyDataProps,
+  isInfiniteScroll,
+  footer,
+  infiniteScrollWrapper,
+  isLoading,
+  rowGroup,
+  hiddenColumns,
+  css,
+  customRowsStyle,
+  cellAlign,
+  renderContextMenu,
+  handleRowClick,
+  additionalExceptionIds,
+  hideHeader,
+  decoration,
+  rowVirtualizer,
+  virtualized
+}, ref) => {
+  var _a, _b, _c, _d;
+  const {
+    t
+  } = useTranslation('MajooUI/table');
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    visibleColumns,
+    page,
+    prepareRow,
+    state,
+    toggleAllRowsExpanded,
+    state: {
+      sortBy
+    }
+  } = instance;
+  const getAlign = align => {
+    switch (align) {
+      case 'top':
+        return 'start';
+      case 'bottom':
+        return 'end';
+      default:
+        return 'center';
+    }
+  };
+  const getIsMobileHeader = useCallback(() => {
+    var _a, _b, _c;
+    let isMobileHeader;
+    for (let i = 0; i < (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length); i++) {
+      for (let x = 0; x < ((_b = (_a = headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups[i]) === null || _a === void 0 ? void 0 : _a.headers) === null || _b === void 0 ? void 0 : _b.length); x++) {
+        const headerData = (_c = headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups[i]) === null || _c === void 0 ? void 0 : _c.headers[x];
+        if (headerData === null || headerData === void 0 ? void 0 : headerData.isMobileHeader) {
+          isMobileHeader = true;
+        }
+      }
+    }
+    return isMobileHeader;
+  }, [headerGroups]);
+  let indexDefaultHeader = 0;
+  const filterMobileHeader = (column, index) => {
+    switch (column.id) {
+      case 'selection':
+        indexDefaultHeader += 1;
+        break;
+      case 'expander':
+        indexDefaultHeader += 1;
+        break;
+      case 'multiple-expander':
+        indexDefaultHeader += 1;
+        break;
+    }
+    return (getIsMobileHeader() ? column.isMobileHeader : index === indexDefaultHeader) || column.id === 'selection';
+  };
+  const renderTableDecorationChild = child => {
+    return jsx(TableContent, {
+      children: jsx(TableBody, Object.assign({}, getTableBodyProps(), {
+        children: child
+      }))
+    });
+  };
+  const getMultipleExpander = () => {
+    var _a, _b;
+    let isMultipleExpander = false;
+    for (let i = 0; i < (page === null || page === void 0 ? void 0 : page.length) && !isMultipleExpander; i++) {
+      prepareRow(page[i]);
+      for (let j = 0; j < page[i].cells.length; j++) {
+        const column = (_b = (_a = page[i]) === null || _a === void 0 ? void 0 : _a.cells[j]) === null || _b === void 0 ? void 0 : _b.column;
+        if ((column === null || column === void 0 ? void 0 : column.id) === 'multiple-expander') {
+          isMultipleExpander = true;
+          break;
+        }
+      }
+    }
+    return {
+      isMultipleExpander
+    };
+  };
+  const {
+    virtualItems: virtualRows,
+    totalSize
+  } = rowVirtualizer;
+  const paddingTop = virtualized ? virtualRows.length > 0 ? ((_a = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _a === void 0 ? void 0 : _a.start) || 0 : 0 : 0;
+  const paddingBottom = virtualized ? virtualRows.length > 0 ? totalSize - (((_b = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _b === void 0 ? void 0 : _b.end) || 0) : 0 : 0;
+  const tableRowData = virtualized ? isInfiniteScroll ? virtualRows : page : page;
+  return jsxs(TableContainer, {
+    css: css,
+    ref: ref,
+    decoration: Boolean(decoration),
+    children: [jsx(ConditionalWrapper, {
+      condition: !decoration,
+      wrapper: child => infiniteScrollWrapper(child),
+      children: jsxs(TableContent, Object.assign({}, getTableProps(), {
+        children: [jsx(TableHead, {
+          hiddenHeader: hideHeader,
+          children: headerGroups.map(headerGroup => jsx(TableHeadRow, Object.assign({}, headerGroup.getHeaderGroupProps(), {
+            children: headerGroup.headers.filter((column, index) => filterMobileHeader(column, index)).map(column => {
+              const headerRender = column.render('Header');
+              return jsx(TableHeadCell, Object.assign({}, column.getHeaderProps(!column.unsortable ? column.getSortByToggleProps({
+                title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
+              }) : {
+                onClick: column.onToggle
+              }), {
+                children: typeof headerRender === 'string' ? jsx(TableHeaderCellContainer, {
+                  isMobile: true,
+                  isSortedDesc: column.isSortedDesc,
+                  unsortable: column.unsortable,
+                  isToggleable: !!column.onToggle,
+                  isToggled: column.isToggled,
+                  children: jsx(TableHeadCellContent, {
+                    isMobile: true,
+                    heading: "headerTable",
+                    color: "secondary",
+                    children: headerRender.toUpperCase()
+                  })
+                }) : headerRender
+              }));
+            })
+          })))
+        }), jsxs(TableBody, Object.assign({}, getTableBodyProps(), {
+          children: [isInfiniteScroll && paddingTop > 0 && jsx("tr", {
+            children: jsx("td", {
+              style: {
+                height: `${paddingTop}px`
+              }
+            })
+          }), (_c = decoration === null || decoration === void 0 ? void 0 : decoration.headerRender) === null || _c === void 0 ? void 0 : _c.call(decoration), jsx(ConditionalWrapper, {
+            condition: Boolean(decoration),
+            wrapper: child => jsx(TableRow, {
+              css: {
+                '&:hover': {
+                  backgroundColor: 'unset'
+                }
+              },
+              children: jsx(TableCell, {
+                colSpan: (decoration === null || decoration === void 0 ? void 0 : decoration.colSpan) || 12,
+                children: jsx(Box, {
+                  css: Object.assign({
+                    height: 300,
+                    overflowY: 'auto'
+                  }, decoration === null || decoration === void 0 ? void 0 : decoration.css),
+                  children: infiniteScrollWrapper(renderTableDecorationChild(child))
+                })
+              })
+            }),
+            children: tableRowData === null || tableRowData === void 0 ? void 0 : tableRowData.map((dataRow, i) => {
+              var _a, _b, _c;
+              const row = virtualized && isInfiniteScroll ? page === null || page === void 0 ? void 0 : page[dataRow === null || dataRow === void 0 ? void 0 : dataRow.index] : dataRow;
+              prepareRow(row);
+              let isContextMenu = Boolean((_a = row.cells.filter(cell => {
+                var _a, _b;
+                return (_b = (_a = cell.column) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length;
+              })) === null || _a === void 0 ? void 0 : _a.length);
+              const actionCells = row.allCells.filter(cell => cell.column.id === 'menu' || cell.column.isAction);
+              let customStyle = {};
+              let hideRowMenuColumn = false;
+              if (customRowsStyle && customRowsStyle(row.values).length) {
+                for (let i = 0; i < customRowsStyle(row.values).length; i++) {
+                  if (customRowsStyle(row.values)[i].predicate) {
+                    const customRowCss = (_b = customRowsStyle(row.values)[i]) === null || _b === void 0 ? void 0 : _b.css;
+                    customStyle = customRowCss || {};
+                    if ((_c = customRowsStyle(row.original)[i]) === null || _c === void 0 ? void 0 : _c.hideRowMenuColumn) {
+                      isContextMenu = false;
+                      hideRowMenuColumn = true;
+                    }
+                  }
+                }
+              }
+              return jsxs(React__default.Fragment, {
+                children: [((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isTopChild'] && ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender) ? rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender(row, {
+                  getCellProps: () => ({})
+                }) : jsx(Text, {
+                  variant: "contentButton",
+                  children: row.cells[0].render('Cell')
+                })), jsx(TableRow, Object.assign({
+                  css: customStyle
+                }, row && (row === null || row === void 0 ? void 0 : row.getRowProps) ? row === null || row === void 0 ? void 0 : row.getRowProps() : {}, {
+                  children: row.cells.filter((cell, indexCell) => (getIsMobileHeader() ? cell.column.isMobileHeader : indexCell === indexDefaultHeader) || cell.column.id === 'selection').map(cell => {
+                    var _a, _b;
+                    const collId = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id;
+                    const exceptionId = (_b = ['expander', 'multiple-expander', 'selection', 'menu', 'eye'].concat(additionalExceptionIds)) === null || _b === void 0 ? void 0 : _b.includes(collId);
+                    const renderCell = () => jsx(ConditionalWrapper, {
+                      condition: isContextMenu && !exceptionId,
+                      wrapper: children => jsx(ContextMenuTrigger, {
+                        id: "context-menu-table",
+                        triggerSide: "left",
+                        children: jsx(Box, {
+                          onClick: () => handleRowClick(row, i),
+                          css: {
+                            cursor: 'pointer',
+                            width: 'calc(100vw - 120px)'
+                          },
+                          children: children
+                        })
+                      }),
+                      children: cell.render('Cell')
+                    });
+                    return jsx(TableCell, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
+                      children: cell.column.accessor ? jsxs(Flex, {
+                        justify: "between",
+                        align: "center",
+                        css: {
+                          cursor: 'pointer',
+                          height: '100%'
+                        },
+                        children: [jsx(Flex, {
+                          align: "center",
+                          css: {
+                            flex: 1,
+                            height: '100%'
+                          },
+                          onClick: () => {
+                            if (!exceptionId) {
+                              handleRowClick(row, i);
+                            }
+                          },
+                          children: jsx(Paragraph, {
+                            css: {
+                              overflowX: 'hidden',
+                              textOverflow: 'ellipsis',
+                              '@sm': {
+                                maxWidth: 250
+                              },
+                              '@md': {
+                                maxWidth: 'unset'
+                              }
+                            },
+                            children: renderCell()
+                          })
+                        }), (() => {
+                          var _a;
+                          const expandable = ((_a = row.cells.filter((cell, indexCell) => (getIsMobileHeader() ? !cell.column.isMobileHeader : indexCell !== indexDefaultHeader) && cell.column.accessor)) === null || _a === void 0 ? void 0 : _a.length) > 0;
+                          return expandable && jsx(Box, {
+                            onClick: () => {
+                              if (!Object.keys(state.expanded).includes(row.id) && !getMultipleExpander().isMultipleExpander) {
+                                toggleAllRowsExpanded(false);
+                              }
+                              row.toggleRowExpanded(!row.isExpanded);
+                            },
+                            children: row.isExpanded ? jsx(ChevronUpOutline, {}) : jsx(ChevronDownOutline, {})
+                          });
+                        })()]
+                      }) : renderCell()
+                    }));
+                  })
+                })), ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isBottomChild'] && !!(rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender) && (rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender(row, {
+                  getCellProps: () => ({})
+                })), row.isExpanded ? jsx(TableRow, {
+                  children: jsxs(TableCell, {
+                    colSpan: visibleColumns.length,
+                    children: [jsx(Flex, {
+                      direction: "column",
+                      children: row.cells.filter((cell, indexCell) => (getIsMobileHeader() ? !cell.column.isMobileHeader : indexCell !== indexDefaultHeader) && cell.column.accessor).map(cell => {
+                        var _a;
+                        return jsxs(Flex, {
+                          align: "center",
+                          justify: "between",
+                          gap: 5,
+                          css: {
+                            backgroundColor: '$bgGray',
+                            padding: `$spacing-04 $spacing-05 ${'selection' in row.values ? '$spacing-04 $spacing-07' : ''}`,
+                            borderBottom: '1pt solid $bgBorder',
+                            alignItems: cell.column.accessor ? getAlign(cellAlign) : 'center'
+                          },
+                          children: [jsx(Heading, {
+                            css: {
+                              padding: '3px 0px'
+                            },
+                            heading: "headerTable",
+                            color: "secondary",
+                            children: typeof cell.column.Header === 'string' ? (_a = cell.column.Header) === null || _a === void 0 ? void 0 : _a.toUpperCase() : cell.render('Header')
+                          }), jsx(Paragraph, {
+                            css: {
+                              overflowWrap: 'break-word',
+                              '@sm': {
+                                maxWidth: 200
+                              },
+                              '@md': {
+                                maxWidth: 'unset'
+                              }
+                            },
+                            children: cell.render('Cell')
+                          })]
+                        }, `${cell.column.id}-${row.id}`);
+                      })
+                    }), actionCells && !hideRowMenuColumn && actionCells.length > 0 && jsx(Flex, {
+                      align: "center",
+                      justify: "end",
+                      gap: 3,
+                      css: {
+                        height: '40px',
+                        backgroundColor: '$bgGray',
+                        paddingRight: '$spacing-04'
+                      },
+                      children: actionCells.map(cell => cell.render('Cell'))
+                    })]
+                  })
+                }) : null]
+              }, row.id);
+            })
+          }), (_d = decoration === null || decoration === void 0 ? void 0 : decoration.footerRender) === null || _d === void 0 ? void 0 : _d.call(decoration), isInfiniteScroll && paddingBottom > 0 && jsx("tr", {
+            children: jsx("td", {
+              style: {
+                height: `${paddingBottom}px`
+              }
+            })
+          })]
+        })), !isInfiniteScroll && jsx(TableFoot, {
+          children: jsx(TableFootRow, {
+            children: jsx(TableFootCell, {
+              colSpan: 100,
+              children: totalData > 0 || isLoading ? footer : jsxs(Flex, {
+                align: "center",
+                justify: "center",
+                direction: "column",
+                gap: 1,
+                css: {
+                  margin: '32px auto 100px'
+                },
+                children: [customEmptyDataProps.doodleImage, customEmptyDataProps.title, customEmptyDataProps.description]
+              })
+            })
+          })
+        })]
+      }))
+    }), renderContextMenu === null || renderContextMenu === void 0 ? void 0 : renderContextMenu()]
+  });
+});
+
+export { MobileTable as default };