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

package/components/editableTable/EditableTable.esm.js

@@ -0,0 +1,618 @@
+import 'core-js/modules/es.array.push.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 'core-js/modules/es.json.stringify.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { RemoveOutline } from '@majoo-ui/icons';
+import React__default, { useState, useRef, useCallback, useEffect, memo } from 'react';
+import { useTable, useSortBy, useExpanded, useRowSelect, useMountedLayoutEffect } from 'react-table';
+import { styled, colors } from '../../config/stitches.config.esm.js';
+import InputSwitch from '../form/components/InputSwitch/InputSwitch.esm.js';
+import { InputText } from '../form/components/InputText/InputText.esm.js';
+import Paragraph from '../paragraph/Paragraph.esm.js';
+import InputCheckbox from '../form/components/InputCheckbox/InputCheckbox.esm.js';
+import Flex from '../../layout/flex/Flex.esm.js';
+import useMediaQuery from '../../utils/useMediaQuery.esm.js';
+import EditableTableMobile from './EditableMobile.esm.js';
+import { useTranslation } from 'react-i18next';
+import { pick, isEqual } from 'lodash';
+import { defaultEmptyDataProps, TableHeaderCellContainer, TableHeadCellContent } from '../table/Table.esm.js';
+import { useVirtual } from 'react-virtual';
+import Tooltip from '../tooltip/Tooltip.esm.js';
+
+const TableContainer = styled('div', {
+  display: 'block',
+  flexDirection: 'column',
+  maxWidth: '100%',
+  position: 'relative',
+  height: '100%',
+  overflow: 'auto'
+});
+const TableContent = styled('table', {
+  width: '100%',
+  borderSpacing: 0,
+  borderCollapse: 'collapse'
+});
+const TableHead = styled('thead', {
+  position: 'sticky',
+  top: 0,
+  backgroundColor: '$gray50',
+  boxShadow: '0 4px 4px rgba(0, 0, 0, 0.025)',
+  zIndex: 10
+});
+const TableHeadRow = styled('tr', {
+  borderBottom: '1pt solid $bgBorder'
+});
+const TableHeadCell = styled('th', {
+  height: '48px',
+  fontSize: '$header-table',
+  fontWeight: 600,
+  color: '$textSecondary',
+  textAlign: 'left',
+  paddingLeft: 8
+});
+const TableBody = styled('tbody', {});
+const TableRow = styled('tr', {
+  borderTop: '1pt solid $bgBorder',
+  '&:last-child': {
+    borderBottom: '1pt solid $bgBorder'
+  },
+  '&:hover': {
+    backgroundColor: '$bgGray'
+  },
+  variants: {
+    subRow: {
+      true: {
+        borderTop: 'none',
+        borderBottom: '1pt solid $bgBorder'
+      }
+    }
+  }
+});
+const TableCell = styled('td', {
+  fontSize: '$short-content-regular',
+  lineHeight: '$short-content-regular',
+  letterSpacing: '$short-content-regular',
+  fontWeight: 400,
+  color: '$textPrimary',
+  position: 'relative',
+  paddingLeft: 8,
+  height: 'auto',
+  '&:last-child': {
+    paddingRight: 8
+  },
+  '@md': {
+    height: '80px'
+  },
+  variants: {
+    verticalAlign: {
+      top: {
+        verticalAlign: 'top'
+      },
+      middle: {
+        verticalAlign: 'middle'
+      },
+      bottom: {
+        verticalAlign: 'bottom'
+      }
+    }
+  }
+});
+const TableCellContent = styled('div', {
+  height: '100%',
+  paddingTop: 10,
+  paddingBottom: 10,
+  display: 'flex',
+  variants: {
+    align: {
+      top: {
+        alignItems: 'start'
+      },
+      center: {
+        alignItems: 'center'
+      },
+      bottom: {
+        alignItems: 'end'
+      }
+    }
+  }
+});
+const TableFoot = styled('tfoot', {
+  position: 'sticky',
+  bottom: 0,
+  backgroundColor: '$bgWhite'
+});
+const TableFootRow = styled('tr');
+const TableFootCell = styled('td', {});
+const StyledText = styled('p', {
+  fontSize: '$short-content-regular',
+  color: '$textPrimary',
+  fontWeight: 400,
+  margin: 0
+});
+const Variant = styled(Flex, {
+  gap: 2,
+  marginLeft: 8,
+  '@md': {
+    marginTop: 4,
+    marginBottom: 12,
+    marginLeft: 0
+  }
+});
+const VariantItem = styled('p', {
+  padding: '2px 4px',
+  backgroundColor: '$white',
+  border: '1px solid $gray150',
+  borderRadius: 4,
+  fontWeight: 500,
+  fontSize: '$label',
+  color: '$textBrand',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  textAlign: 'center',
+  margin: 0,
+  '@md': {
+    padding: '4px 8px'
+  }
+});
+const RemoveIcon = styled(RemoveOutline, {
+  cursor: 'pointer',
+  userSelect: 'none',
+  transitionDuration: '0.2s',
+  variants: {
+    position: {
+      leftBottom: {
+        position: 'absolute',
+        left: 0,
+        bottom: 10
+      },
+      rightBottom: {
+        position: 'absolute',
+        right: 0,
+        bottom: 10
+      },
+      leftTop: {
+        position: 'absolute',
+        left: 0,
+        top: 10
+      },
+      rightTop: {
+        position: 'absolute',
+        right: 0,
+        top: 10
+      }
+    }
+  }
+});
+const Input = styled(InputText, {
+  height: '32px !important'
+});
+const Required = styled('span', {
+  marginLeft: 4,
+  color: '$textRed !important'
+});
+const ContainerSwitch = styled('div', {
+  variants: {
+    position: {
+      leftBottom: {
+        position: 'absolute',
+        left: 0,
+        bottom: 10
+      },
+      rightBottom: {
+        position: 'absolute',
+        right: 0,
+        bottom: 10
+      },
+      leftTop: {
+        position: 'absolute',
+        left: 0,
+        top: 10
+      },
+      rightTop: {
+        position: 'absolute',
+        right: 0,
+        top: 10
+      }
+    }
+  }
+});
+function Product({
+  name,
+  label,
+  variants
+}) {
+  function tooltipLabel(name, variants) {
+    if (variants && variants.length > 0) {
+      return `${name} - ${variants === null || variants === void 0 ? void 0 : variants.join(', ')}`;
+    }
+    return name;
+  }
+  return jsx(Tooltip, {
+    label: tooltipLabel(name, variants),
+    children: jsxs(Flex, {
+      css: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        '@md': {
+          flexDirection: 'column',
+          alignItems: 'start'
+        }
+      },
+      children: [jsx(StyledText, {
+        children: name
+      }), jsx(Variant, {
+        wrap: "wrap",
+        children: variants === null || variants === void 0 ? void 0 : variants.map((item, index) => {
+          return jsx(VariantItem, {
+            children: item
+          }, index);
+        })
+      }), jsx(StyledText, {
+        css: {
+          fontWeight: 500,
+          display: 'none',
+          '@md': {
+            display: 'unset',
+            marginBottom: 10
+          }
+        },
+        children: label !== null && label !== void 0 ? label : 'Terima Stok'
+      })]
+    })
+  });
+}
+function Switch(props) {
+  return jsx(ContainerSwitch, {
+    position: props === null || props === void 0 ? void 0 : props.position,
+    css: props === null || props === void 0 ? void 0 : props.css,
+    children: jsx(InputSwitch, Object.assign({
+      dataOnLabel: "ON",
+      dataOffLabel: "OFF"
+    }, props))
+  });
+}
+function Remove(props) {
+  const [isHover, setIsHover] = useState(false);
+  function onEnter() {
+    setIsHover(true);
+  }
+  function onLeave() {
+    setIsHover(false);
+  }
+  return jsx(RemoveIcon, {
+    css: props === null || props === void 0 ? void 0 : props.css,
+    position: props === null || props === void 0 ? void 0 : props.position,
+    onClick: props === null || props === void 0 ? void 0 : props.onRemove,
+    color: isHover ? colors.red400 : colors.gray400,
+    onMouseEnter: onEnter,
+    onMouseLeave: onLeave
+  });
+}
+function EditableTable(props) {
+  var _a, _b;
+  const {
+    columns,
+    data,
+    rowHeight,
+    align,
+    customRows,
+    showCheckbox,
+    onSelectedChange,
+    getCheckboxProps,
+    keyId = 'id',
+    selectedIds,
+    onExpand,
+    isMobileLayout,
+    hiddenColumns,
+    customEmptyDataProps: emptyDataProps,
+    virtualized = false,
+    onSortByChange
+  } = props;
+  const {
+    t
+  } = useTranslation('MajooUI/table');
+  const [selectedIndex, setSelectedIndex] = useState(null);
+  const isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 767px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
+  const IndeterminateCheckbox = props => {
+    function handleCheckedChange(checked) {
+      props === null || props === void 0 ? void 0 : props.onChange({
+        target: {
+          checked
+        }
+      });
+      setSelectedIndex(Object.assign({}, props));
+    }
+    return jsx(InputCheckbox, Object.assign({}, props, getCheckboxProps === null || getCheckboxProps === void 0 ? void 0 : getCheckboxProps(props === null || props === void 0 ? void 0 : props.row), {
+      onCheckedChange: handleCheckedChange
+    }));
+  };
+  const getInitialState = () => {
+    const initialState = {};
+    if (selectedIds) {
+      Object.assign(initialState, {
+        selectedRowIds: selectedIds
+      });
+    }
+    return Object.keys(initialState).length > 0 ? initialState : undefined;
+  };
+  const instance = useTable({
+    columns,
+    data,
+    initialState: getInitialState(),
+    autoResetExpanded: false,
+    getRowId: row => row[keyId] || JSON.stringify(row),
+    defaultCanSort: false,
+    autoResetSortBy: false
+  }, useSortBy, useExpanded, useRowSelect, hooks => {
+    showCheckbox && hooks.visibleColumns.push(columns => {
+      return [{
+        id: 'selection',
+        Header: ({
+          getToggleAllRowsSelectedProps
+        }) => jsx(IndeterminateCheckbox, Object.assign({
+          row: "header"
+        }, getToggleAllRowsSelectedProps())),
+        Cell: ({
+          row
+        }) => jsx(IndeterminateCheckbox, Object.assign({
+          row: row
+        }, row.getToggleRowSelectedProps())),
+        width: 30
+      }, ...columns];
+    });
+  });
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    visibleColumns,
+    setHiddenColumns,
+    state: {
+      selectedRowIds,
+      sortBy
+    }
+  } = instance;
+  const tableContainerRef = useRef(null);
+  const rowVirtualizer = useVirtual({
+    parentRef: tableContainerRef,
+    size: data === null || data === void 0 ? void 0 : data.length,
+    overscan: isMobile ? 20 : 10,
+    estimateSize: useCallback(() => isMobile ? 40 : rowHeight || 80, [isMobile, rowHeight])
+  });
+  const {
+    virtualItems: virtualRows,
+    totalSize
+  } = rowVirtualizer;
+  const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _a === void 0 ? void 0 : _a.start) || 0 : 0;
+  const paddingBottom = 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;
+  useEffect(() => {
+    if (hiddenColumns) setHiddenColumns(hiddenColumns);
+  }, [hiddenColumns, setHiddenColumns]);
+  useEffect(() => {
+    if (data && data.length > 0 && selectedRowIds && onSelectedChange) {
+      const selected = selectedRowIds ? Object.keys(selectedRowIds) : [];
+      onSelectedChange({
+        selected,
+        row: (selectedIndex === null || selectedIndex === void 0 ? void 0 : selectedIndex.row) || {},
+        state: !(selectedIndex === null || selectedIndex === void 0 ? void 0 : selectedIndex.checked)
+      });
+    }
+  }, [selectedRowIds, data, onSelectedChange, selectedIndex]);
+  const customEmptyDataProps = emptyDataProps || defaultEmptyDataProps(t, isMobile);
+  const getCustomRows = (row, renderRow) => {
+    var _a;
+    let customStyle = {};
+    let CustomRow;
+    if (customRows && customRows(row).length) {
+      for (let i = 0; i < customRows(row).length; i++) {
+        if (customRows(row)[i].predicate) {
+          customStyle = (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.css;
+          CustomRow = () => {
+            var _a;
+            return (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.Row(row.values, renderRow);
+          };
+        }
+      }
+    }
+    return {
+      CustomRow,
+      customStyle
+    };
+  };
+  const renderTableRow = (row, customStyle) => {
+    return jsx(TableRow, Object.assign({
+      css: customStyle
+    }, row.getRowProps(), {
+      children: row.cells.filter(cell => {
+        var _a, _b, _c, _d, _e;
+        return !((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isSubRow) && (typeof ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.hidden) === 'boolean' ? !((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.hidden) : !((_e = (_d = cell === null || cell === void 0 ? void 0 : cell.column) === null || _d === void 0 ? void 0 : _d.hidden) === null || _e === void 0 ? void 0 : _e.call(_d, cell)));
+      }).map(cell => {
+        var _a;
+        return !((_a = cell.column) === null || _a === void 0 ? void 0 : _a.isMobileOnly) && jsx(TableCell, Object.assign({}, cell.getCellProps({
+          style: {
+            minWidth: cell.column.minWidth,
+            width: cell.column.width,
+            maxWidth: cell.column.maxWidth
+          }
+        }), {
+          css: {
+            '@md': {
+              height: rowHeight
+            }
+          },
+          children: jsx(TableCellContent, {
+            align: align,
+            children: cell.render('Cell')
+          })
+        }));
+      })
+    }));
+  };
+  const tableRowData = virtualized ? virtualRows : rows;
+  useMountedLayoutEffect(() => {
+    if (onSortByChange) {
+      onSortByChange(sortBy);
+    }
+  }, [sortBy]);
+  return !isMobile ? jsx(TableContainer, {
+    ref: tableContainerRef,
+    css: props === null || props === void 0 ? void 0 : props.css,
+    children: jsxs(TableContent, Object.assign({}, getTableProps(), {
+      children: [jsx(TableHead, {
+        children: headerGroups.map(headerGroup => {
+          const visibleHeaders = headerGroup.headers.filter(column => {
+            var _a;
+            return !(column === null || column === void 0 ? void 0 : column.isSubRow) && (typeof (column === null || column === void 0 ? void 0 : column.hidden) === 'boolean' ? !(column === null || column === void 0 ? void 0 : column.hidden) : !((_a = column === null || column === void 0 ? void 0 : column.hidden) === null || _a === void 0 ? void 0 : _a.call(column, column)));
+          });
+          return jsx(TableHeadRow, Object.assign({}, headerGroup.getHeaderGroupProps(), {
+            children: visibleHeaders.map(column => {
+              const headerRender = column.render('Header');
+              return !(column === null || column === void 0 ? void 0 : column.isMobileOnly) && jsx(TableHeadCell, Object.assign({}, column.getHeaderProps(props => [props, column.sortable ? column.getSortByToggleProps({
+                title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
+              }) : {
+                onClick: column.onToggle
+              }, {
+                style: {
+                  minWidth: column.minWidth,
+                  width: column.width,
+                  maxWidth: column.maxWidth
+                }
+              }]), {
+                children: typeof headerRender === 'string' ? jsx(TableHeaderCellContainer, {
+                  isSortedDesc: column.isSortedDesc,
+                  unsortable: !column.sortable,
+                  isToggleable: !!column.onToggle,
+                  isToggled: column.isToggled,
+                  css: {
+                    padding: 0
+                  },
+                  children: jsxs(TableHeadCellContent, {
+                    heading: "headerTable",
+                    children: [headerRender.toUpperCase(), (column === null || column === void 0 ? void 0 : column.isRequired) ? jsx(Required, {
+                      children: "*"
+                    }) : '']
+                  })
+                }) : jsxs(Fragment, {
+                  children: [headerRender, (column === null || column === void 0 ? void 0 : column.isRequired) ? jsx(Required, {
+                    children: "*"
+                  }) : '']
+                })
+              }));
+            })
+          }));
+        })
+      }), jsxs(TableBody, Object.assign({}, getTableBodyProps(), {
+        children: [virtualized && paddingTop > 0 && jsx("tr", {
+          children: jsx("td", {
+            style: {
+              height: `${paddingTop}px`
+            }
+          })
+        }), tableRowData.map((dataRow, index) => {
+          const row = virtualized ? rows === null || rows === void 0 ? void 0 : rows[dataRow === null || dataRow === void 0 ? void 0 : dataRow.index] : dataRow;
+          prepareRow(row);
+          const subRowCells = row.cells.filter(cell => cell.column.isSubRow);
+          const notNullHeaderColumns = visibleColumns.filter(column => typeof column.Header !== 'function' && column.Header !== null && !column.isSubRow);
+          const {
+            customStyle
+          } = getCustomRows(row);
+          const {
+            CustomRow
+          } = getCustomRows(row, () => renderTableRow(row, customStyle));
+          return jsxs(React__default.Fragment, {
+            children: [CustomRow ? jsx(CustomRow, {
+              style: customStyle
+            }) : renderTableRow(row, customStyle), subRowCells.map(cell => {
+              var _a;
+              return jsx(TableRow, {
+                subRow: true,
+                children: jsxs(React__default.Fragment, {
+                  children: [jsx(TableCell, {
+                    subCell: true,
+                    colSpan: notNullHeaderColumns.length > 5 ? 2 : 1,
+                    headerSubCell: true,
+                    verticalAlign: (_a = cell.column) === null || _a === void 0 ? void 0 : _a.verticalAlign,
+                    css: {
+                      paddingTop: '$spacing-03 !important',
+                      paddingBottom: '$spacing-03 !important',
+                      '@md': {
+                        height: rowHeight
+                      }
+                    },
+                    children: jsx(Paragraph, {
+                      paragraph: "shortContentBold",
+                      children: cell.column.Header
+                    })
+                  }), jsx(TableCell, {
+                    subCell: true,
+                    colSpan: visibleColumns.length - subRowCells.length,
+                    css: {
+                      paddingTop: '$spacing-03 !important',
+                      paddingBottom: '$spacing-03 !important'
+                    },
+                    children: jsx(Paragraph, {
+                      paragraph: "shortContentRegular",
+                      children: cell.render('Cell')
+                    })
+                  })]
+                }, cell.column.id)
+              }, cell.column.id);
+            })]
+          }, index);
+        }), virtualized && paddingBottom > 0 && jsx("tr", {
+          children: jsx("td", {
+            style: {
+              height: `${paddingBottom}px`
+            }
+          })
+        })]
+      })), rows.length < 1 && jsx(TableFoot, {
+        children: jsx(TableFootRow, {
+          children: jsx(TableFootCell, {
+            colSpan: "100%",
+            children: jsxs(Flex, {
+              align: "center",
+              justify: "center",
+              direction: "column",
+              gap: 3,
+              css: {
+                margin: '56px auto 100px'
+              },
+              children: [customEmptyDataProps.doodleImage, customEmptyDataProps.title, customEmptyDataProps.description]
+            })
+          })
+        })
+      })]
+    }))
+  }) : jsx(EditableTableMobile, {
+    css: props === null || props === void 0 ? void 0 : props.css,
+    instance: instance,
+    showCheckbox: showCheckbox,
+    customRows: customRows,
+    onExpand: onExpand,
+    hiddenColumns: hiddenColumns,
+    customEmptyDataProps: customEmptyDataProps,
+    virtualized: virtualized,
+    rowVirtualizer: rowVirtualizer,
+    tableContainerRef: tableContainerRef
+  });
+}
+EditableTable.Product = Product;
+EditableTable.Input = Input;
+EditableTable.Switch = Switch;
+EditableTable.Remove = Remove;
+EditableTable.TableRow = TableRow;
+EditableTable.TableCell = TableCell;
+const MemoizedEditableTable = /*#__PURE__*/memo(EditableTable, (prev, next) => {
+  const prevProps = pick(prev, ['data', 'additional']);
+  const nextProps = pick(next, ['data', 'additional']);
+  const eq = isEqual(prevProps, nextProps);
+  return eq;
+});
+
+export { MemoizedEditableTable, EditableTable as default };

package/components/editableTable/transition.esm.js

@@ -0,0 +1,37 @@
+import { useState, useRef, useEffect } from 'react';
+import Box from '../../layout/box/Box.esm.js';
+import { jsx } from 'react/jsx-runtime';
+
+function Collapalse({
+  children,
+  isOpen
+}) {
+  const [height, setHeight] = useState(0);
+  const contentRef = useRef(null);
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(el => {
+      setHeight(el[0].contentRect.height);
+    });
+    resizeObserver.observe(contentRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [height, isOpen]);
+  return /*#__PURE__*/jsx(Box, {
+    css: {
+      maxHeight: isOpen ? height : 0,
+      overflow: 'hidden',
+      transition: '0.4s max-height',
+      width: '100%'
+    },
+    children: /*#__PURE__*/jsx(Box, {
+      ref: contentRef,
+      children: children
+    })
+  });
+}
+Collapalse.defaultProps = {
+  isOpen: false
+};
+
+export { Collapalse as default };