@sellmate/design-system-react 1.0.62 → 1.0.63

package/lib/SdTable.tsx

@@ -1,185 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import type { Row as SdTableRow, SdTableColumn } from '@sellmate/design-system';
-import { SdTable as SdTableElement, defineCustomElement as defineSdTable } from '@sellmate/design-system/dist/components/sd-table.js';
-import { createComponent, type EventName } from '@stencil/react-output-target/runtime';
-
-type TablePagination = {
- page: number;
- rowsPerPage: number;
- lastPage?: number;
-};
-
-type HeaderRenderContext = {
- column: SdTableColumn;
-};
-
-type CellRenderContext<RowType extends SdTableRow> = {
- column: SdTableColumn;
- row: RowType;
- rowIndex: number;
- value: any;
-};
-
-type HeaderRendererMap = Partial<Record<string, (context: HeaderRenderContext) => React.ReactNode>>;
-type CellRendererMap<RowType extends SdTableRow> = Partial<
- Record<string, (context: CellRenderContext<RowType>) => React.ReactNode>
->;
-
-const SLOT_WRAPPER_STYLE: React.CSSProperties = {
- display: 'contents',
-};
-
-type SdTableBaseEvents = {
- onSdSelectChange: EventName<CustomEvent<SdTableRow[]>>;
- onSdPageChange: EventName<CustomEvent<number>>;
- onSdRowsPerPageChange: EventName<CustomEvent<number>>;
-};
-
-const SdTableBase = /* @__PURE__ */ createComponent<SdTableElement, SdTableBaseEvents>({
- tagName: 'sd-table',
- elementClass: SdTableElement,
- react: React,
- events: {
-  onSdSelectChange: 'sdSelectChange',
-  onSdPageChange: 'sdPageChange',
-  onSdRowsPerPageChange: 'sdRowsPerPageChange',
- } as SdTableBaseEvents,
- defineCustomElement: defineSdTable,
-});
-
-const getCellValue = (column: SdTableColumn, row: SdTableRow) => {
- const { field, format, name } = column;
- const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
- return format ? format(value, row) : value;
-};
-
-export type SdTableProps<RowType extends SdTableRow = SdTableRow> = Omit<
- React.ComponentProps<typeof SdTableBase>,
- 'columns' | 'rows' | 'selected' | 'children'
-> & {
- columns: SdTableColumn[];
- rows?: RowType[] | null;
- selected?: RowType[];
- pagination?: TablePagination;
- useInternalPagination?: boolean;
- headerRenderers?: HeaderRendererMap;
- cellRenderers?: CellRendererMap<RowType>;
- renderHeader?: (context: HeaderRenderContext) => React.ReactNode;
- renderCell?: (context: CellRenderContext<RowType>) => React.ReactNode;
- noDataContent?: React.ReactNode;
-};
-
-export function SdTable<RowType extends SdTableRow = SdTableRow>({
- columns,
- rows,
- selected,
- pagination,
- useInternalPagination = false,
- headerRenderers,
- cellRenderers,
- renderHeader,
- renderCell,
- noDataContent,
- onSdPageChange,
- onSdRowsPerPageChange,
- ...props
-}: SdTableProps<RowType>) {
- const normalizedRows = rows ?? [];
- const [currentPage, setCurrentPage] = useState(pagination?.page || 1);
- const [currentRowsPerPage, setCurrentRowsPerPage] = useState(
-  pagination?.rowsPerPage || normalizedRows.length || 0,
- );
-
- useEffect(() => {
-  setCurrentPage(pagination?.page || 1);
-  setCurrentRowsPerPage(pagination?.rowsPerPage || normalizedRows.length || 0);
- }, [pagination?.page, pagination?.rowsPerPage, normalizedRows.length]);
-
- const renderedRows =
-  useInternalPagination && currentRowsPerPage
-   ? normalizedRows.slice(
-      (currentPage - 1) * currentRowsPerPage,
-      currentPage * currentRowsPerPage,
-     )
-   : normalizedRows;
-
- const slotChildren: React.ReactNode[] = [];
-
- if (noDataContent !== undefined) {
-  slotChildren.push(
-   <span key="no-data" slot="no-data" style={SLOT_WRAPPER_STYLE}>
-    {noDataContent}
-   </span>,
-  );
- }
-
- columns.forEach(column => {
-  const renderer = headerRenderers?.[column.name] || renderHeader;
-  if (!renderer) return;
-
-  const rendered = renderer({ column });
-  if (rendered == null) return;
-
-  slotChildren.push(
-   <span
-    key={`header-${column.name}`}
-    slot={`header-cell-${column.name}`}
-    style={SLOT_WRAPPER_STYLE}
-   >
-    {rendered}
-   </span>,
-  );
- });
-
- renderedRows.forEach((row, rowIndex) => {
-  columns.forEach(column => {
-   const renderer = cellRenderers?.[column.name] || renderCell;
-   if (!renderer) return;
-
-   const rendered = renderer({
-    column,
-    row,
-    rowIndex,
-    value: getCellValue(column, row),
-   });
-   if (rendered == null) return;
-
-   slotChildren.push(
-    <span
-     key={`cell-${column.name}-${rowIndex}`}
-     slot={`body-cell-${column.name}-${rowIndex}`}
-     style={SLOT_WRAPPER_STYLE}
-    >
-     {rendered}
-    </span>,
-   );
-  });
- });
-
- return (
-  <SdTableBase
-   {...props}
-   columns={columns}
-   rows={normalizedRows}
-   selected={selected}
-   pagination={pagination}
-   useInternalPagination={useInternalPagination}
-   onSdPageChange={event => {
-    setCurrentPage(event.detail);
-    onSdPageChange?.(event);
-   }}
-   onSdRowsPerPageChange={event => {
-    setCurrentRowsPerPage(event.detail);
-    const lastPage = Math.max(1, Math.ceil(normalizedRows.length / event.detail));
-    setCurrentPage(previousPage => Math.min(previousPage, lastPage));
-    onSdRowsPerPageChange?.(event);
-   }}
-  >
-   {slotChildren}
-  </SdTableBase>
- );
-}
-
-export default SdTable;