norma-library 0.6.76 → 0.6.78

package/src/components/UncontrolledTable/index.tsx

@@ -10,7 +10,21 @@ import {
   TableOptions,
 } from '@tanstack/react-table';
 
-import { Pagination, Header, TBody } from './components';
+import {
+  DndContext,
+  MouseSensor,
+  closestCenter,
+  type DragEndEvent,
+  type UniqueIdentifier,
+  useSensor,
+  useSensors,
+  TouchSensor,
+  KeyboardSensor,
+} from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+
+import { Pagination, Header, SimpleRow, DraggableRow, RowDragHandleCell } from './components';
 import { UncontrolledTableProps } from './interface';
 import useClickOutside from '../../hooks/useClickOutside';
 
@@ -35,6 +49,8 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
     tableClassName,
     stickyHeader,
     stickyHeaderP,
+    draggable,
+    onDragEnd,
   } = props;
 
   const [openFilterDialog, setOpenFilterDialog] = useState('');
@@ -44,10 +60,27 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
   const [orderSmallest, setOrderSmallest] = useState(false);
   const [orderLargest, setOrderLargest] = useState(false);
 
+  const _columns: any[] = useMemo(() => {
+    return draggable
+      ? [
+          {
+            id: 'drag',
+            header: '',
+            cell: ({ row }: { row: any }) => <RowDragHandleCell rowId={row.id}/>,
+            disableMenu: true,
+          },
+          ...columns.map((column) => ({
+            ...column,
+            disableMenu: true,
+          })),
+        ]
+      : columns;
+  }, [columns]);
+
   const reactTableConfig = useMemo(() => {
     const config: TableOptions<unknown> = {
-      columns: columns as any,
       data,
+      columns: _columns,
       state: {
         sorting: sorting,
         columnFilters: filterByColumn,
@@ -59,16 +92,40 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
       onSortingChange: setSorting,
       onColumnFiltersChange: setFilterByColumn,
       manualPagination: true,
+      getRowId: (row: any) => row.id,
+      debugTable: true,
+      debugHeaders: true,
+      debugColumns: true,
     };
 
     return config;
-  }, [data, sorting, filterByColumn, columns, pagination]);
+  }, [data, sorting, filterByColumn, _columns, pagination]);
 
   const table = useReactTable(reactTableConfig);
   const filterRef = useRef<HTMLDivElement>(null);
 
   useClickOutside(filterRef, () => setOpenFilterDialog(''));
 
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+
+    if (active && over && active.id !== over.id && onDragEnd) {
+      const oldIndex = dataIds.indexOf(active.id);
+      const newIndex = dataIds.indexOf(over.id);
+
+      const _data = arrayMove(data, oldIndex, newIndex);
+      onDragEnd(_data);
+    }
+  };
+
+  const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
+
+  const dataIds = useMemo<UniqueIdentifier[]>(
+    () => data?.map((item: { id: UniqueIdentifier }) => item.id) || [],
+    [data],
+  );
+
   return (
     <S.Container>
       <Header
@@ -89,128 +146,157 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
         hideColumns={props.hideColumns}
         onColumnVisibilityChange={props.onColumnVisibilityChange}
       />
-      <S.Table className={tableClassName || ''}>
-        <S.Thead $sticky={stickyHeader} $stickyTopP={stickyHeaderP}>
-          {table.getHeaderGroups().map((headerGroup: any) => (
-            <S.TableRow key={headerGroup.id}>
-              {headerGroup.headers.map((header: any) => (
-                <S.Th key={header.id}>
-                  <S.ColumnContent
-                    onClick={() => {
-                      if (!header?.column?.columnDef?.disableMenu)
-                        setOpenFilterDialog(header.column.columnDef.accessorKey);
-                    }}
-                  >
-                    <S.TextColumn>
-                      {!header.isPlaceholder && flexRender(header.column.columnDef.header, header.getContext())}
-                    </S.TextColumn>
-                    {!header?.column?.columnDef?.disableMenu && (
-                      <S.IconFilterDialog>
-                        <svg fill="#666" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
-                          <path d="m7 10 5 5 5-5z" />
-                        </svg>
-                      </S.IconFilterDialog>
-                    )}
-                  </S.ColumnContent>
-                  {openFilterDialog === header.column.columnDef.accessorKey && (
-                    <S.FilterDialog ref={filterRef}>
-                      <S.ListFilterDialog>
-                        <S.OptionFilterDialog
-                          style={{
-                            background: orderSmallest ? 'rgba(0, 0, 0, 0.04)' : '',
-                          }}
-                          onClick={() => {
-                            onSortClick && onSortClick(header.column.columnDef.accessorKey, 'asc');
-                            setOpenFilterDialog('');
-                          }}
-                        >
-                          <div className="icon">
-                            <svg
-                              fill="#666"
-                              stroke="currentColor"
-                              strokeWidth="1.5"
-                              viewBox="0 0 24 24"
-                              xmlns="http://www.w3.org/2000/svg"
-                              aria-hidden="true"
-                              width="20"
-                              height="20"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75"
-                              />
-                            </svg>
-                          </div>
-                          <p>{labels?.orderAsc || 'Menor primeiro'}</p>
-                        </S.OptionFilterDialog>
-                        <S.OptionFilterDialog
-                          style={{
-                            background: orderLargest ? 'rgba(0, 0, 0, 0.04)' : '',
-                          }}
-                          onClick={() => {
-                            onSortClick && onSortClick(header.column.columnDef.accessorKey, 'desc');
-                            setOpenFilterDialog('');
-                          }}
-                        >
-                          <div className="icon rotate">
-                            <svg
-                              fill="#666"
-                              stroke="currentColor"
-                              strokeWidth="1.5"
-                              viewBox="0 0 24 24"
-                              xmlns="http://www.w3.org/2000/svg"
-                              aria-hidden="true"
-                              width="20"
-                              height="20"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75"
-                              ></path>
-                            </svg>
-                          </div>
-                          <p>{labels?.orderDesc || 'Maior primeiro'}</p>
-                        </S.OptionFilterDialog>
-                        {!header?.column?.columnDef?.nofilter && (
+      <DndContext
+        collisionDetection={closestCenter}
+        modifiers={[restrictToVerticalAxis]}
+        onDragEnd={handleDragEnd}
+        sensors={sensors}
+      >
+        <S.Table className={tableClassName || ''}>
+          <S.Thead $sticky={stickyHeader} $stickyTopP={stickyHeaderP}>
+            {table.getHeaderGroups().map((headerGroup: any) => (
+              <S.TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header: any) => (
+                  <S.Th key={header.id}>
+                    <S.ColumnContent
+                      onClick={() => {
+                        if (!header?.column?.columnDef?.disableMenu)
+                          setOpenFilterDialog(header.column.columnDef.accessorKey);
+                      }}
+                    >
+                      <S.TextColumn>
+                        {!header.isPlaceholder && flexRender(header.column.columnDef.header, header.getContext())}
+                      </S.TextColumn>
+                      {!header?.column?.columnDef?.disableMenu && (
+                        <S.IconFilterDialog>
+                          <svg fill="#666" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
+                            <path d="m7 10 5 5 5-5z" />
+                          </svg>
+                        </S.IconFilterDialog>
+                      )}
+                    </S.ColumnContent>
+                    {openFilterDialog === header.column.columnDef.accessorKey && (
+                      <S.FilterDialog ref={filterRef}>
+                        <S.ListFilterDialog>
                           <S.OptionFilterDialog
+                            style={{
+                              background: orderSmallest ? 'rgba(0, 0, 0, 0.04)' : '',
+                            }}
                             onClick={() => {
-                              onFilterClick && onFilterClick(header.column.columnDef.accessorKey);
+                              onSortClick && onSortClick(header.column.columnDef.accessorKey, 'asc');
                               setOpenFilterDialog('');
                             }}
                           >
                             <div className="icon">
                               <svg
-                                fill="none"
+                                fill="#666"
                                 stroke="currentColor"
                                 strokeWidth="1.5"
                                 viewBox="0 0 24 24"
                                 xmlns="http://www.w3.org/2000/svg"
                                 aria-hidden="true"
-                                width="16"
-                                height="16"
+                                width="20"
+                                height="20"
                               >
                                 <path
                                   strokeLinecap="round"
                                   strokeLinejoin="round"
-                                  d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"
+                                  d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75"
+                                />
+                              </svg>
+                            </div>
+                            <p>{labels?.orderAsc || 'Menor primeiro'}</p>
+                          </S.OptionFilterDialog>
+                          <S.OptionFilterDialog
+                            style={{
+                              background: orderLargest ? 'rgba(0, 0, 0, 0.04)' : '',
+                            }}
+                            onClick={() => {
+                              onSortClick && onSortClick(header.column.columnDef.accessorKey, 'desc');
+                              setOpenFilterDialog('');
+                            }}
+                          >
+                            <div className="icon rotate">
+                              <svg
+                                fill="#666"
+                                stroke="currentColor"
+                                strokeWidth="1.5"
+                                viewBox="0 0 24 24"
+                                xmlns="http://www.w3.org/2000/svg"
+                                aria-hidden="true"
+                                width="20"
+                                height="20"
+                              >
+                                <path
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                  d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75"
                                 ></path>
                               </svg>
                             </div>
-                            <p>{labels?.filter || 'Filtrar por'}</p>
+                            <p>{labels?.orderDesc || 'Maior primeiro'}</p>
                           </S.OptionFilterDialog>
-                        )}
-                      </S.ListFilterDialog>
-                    </S.FilterDialog>
-                  )}
-                </S.Th>
-              ))}
-            </S.TableRow>
-          ))}
-        </S.Thead>
-        <TBody table={table} onClick={onClick} onMouseOver={onMouseOver} onMouseOut={onMouseOut} />
-      </S.Table>
+                          {!header?.column?.columnDef?.nofilter && (
+                            <S.OptionFilterDialog
+                              onClick={() => {
+                                onFilterClick && onFilterClick(header.column.columnDef.accessorKey);
+                                setOpenFilterDialog('');
+                              }}
+                            >
+                              <div className="icon">
+                                <svg
+                                  fill="none"
+                                  stroke="currentColor"
+                                  strokeWidth="1.5"
+                                  viewBox="0 0 24 24"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  aria-hidden="true"
+                                  width="16"
+                                  height="16"
+                                >
+                                  <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"
+                                  ></path>
+                                </svg>
+                              </div>
+                              <p>{labels?.filter || 'Filtrar por'}</p>
+                            </S.OptionFilterDialog>
+                          )}
+                        </S.ListFilterDialog>
+                      </S.FilterDialog>
+                    )}
+                  </S.Th>
+                ))}
+              </S.TableRow>
+            ))}
+          </S.Thead>
+          <tbody>
+            <SortableContext items={dataIds} strategy={verticalListSortingStrategy}>
+              {table.getRowModel().rows.map((row: any) => {
+                return draggable ? (
+                  <DraggableRow
+                    key={row.id}
+                    row={row}
+                    onClick={onClick}
+                    onMouseOver={onMouseOver}
+                    onMouseOut={onMouseOut}
+                  />
+                ) : (
+                  <SimpleRow
+                    key={row.id}
+                    row={row}
+                    onClick={onClick}
+                    onMouseOver={onMouseOver}
+                    onMouseOut={onMouseOut}
+                  />
+                );
+              })}
+            </SortableContext>
+          </tbody>
+        </S.Table>
+      </DndContext>
       {pagination && (
         <Pagination
           pagination={pagination}

package/src/components/UncontrolledTable/interface.ts

@@ -24,17 +24,19 @@ export interface UncontrolledTableProps {
   totalPages: number;
   showClearFields?: boolean;
   customTotalResults?: string;
-  onChangePage: (pagination: Pagination) => void;
-  onClearFieldsClick?: () => void;
-  onFilterClick?: (column: string) => void;
-  onSortClick?: (column: string, direction: string) => void;
   labels?: Labels;
   tableClassName?: string;
   stickyHeader?: boolean;
   stickyHeaderP?: number;
   customIcons?: React.ReactNode[];
   hideColumns?: string[];
+  draggable?: boolean;
+  onChangePage: (pagination: Pagination) => void;
+  onClearFieldsClick?: () => void;
+  onFilterClick?: (column: string) => void;
+  onSortClick?: (column: string, direction: string) => void;
   onColumnVisibilityChange?: (columnId: string, isVisible: boolean) => void;
+  onDragEnd?: (data: any[]) => void;
 }
 
 export interface ColumnsTable {

package/src/stories/ModalStatus.stories.tsx

@@ -11,6 +11,7 @@ const actions: OnAction[] = [
   },
   {
     label: 'Entendi',
+    variant: 'contained',
     action: () => {},
   },
 ];