karsten-design-system 1.0.89 → 1.0.91
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6,8 +6,10 @@ import { Spinner } from './spinner.js';
|
|
|
6
6
|
import { Paginator } from './paginator.js';
|
|
7
7
|
import { Button } from './button.js';
|
|
8
8
|
import { Input } from './input.js';
|
|
9
|
+
import { Select } from './select.js';
|
|
10
|
+
import { CalendarInput } from './calendarInput.js';
|
|
9
11
|
|
|
10
|
-
function CustomTable({ columns, data, totalRecords, actions = [], isOrdered = true, actionsHeaderClassName = '', actionsColumnsClassName = '', rowsPerPage = 10, onPageChange, isPaginated = true, isLoading = false, onFilterChange, }) {
|
|
12
|
+
function CustomTable({ columns, data, totalRecords, actions = [], isOrdered = true, actionsHeaderClassName = '', actionsColumnsClassName = '', rowsPerPage = 10, onPageChange, isPaginated = true, isLoading = false, onFilterChange, onSortChange, }) {
|
|
11
13
|
const [sortDirection, setSortDirection] = useState('ASC');
|
|
12
14
|
const [sortedData, setSortedData] = useState(data);
|
|
13
15
|
const [currentPage, setCurrentPage] = useState(1);
|
|
@@ -16,7 +18,12 @@ function CustomTable({ columns, data, totalRecords, actions = [], isOrdered = tr
|
|
|
16
18
|
const handleSort = (dataIndex) => {
|
|
17
19
|
const newDirection = sortDirection === 'ASC' ? 'DESC' : 'ASC';
|
|
18
20
|
setSortDirection(newDirection);
|
|
19
|
-
|
|
21
|
+
if (onSortChange) {
|
|
22
|
+
onSortChange(dataIndex, newDirection);
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
setSortedData(sortData(data, dataIndex, newDirection));
|
|
26
|
+
}
|
|
20
27
|
};
|
|
21
28
|
useEffect(() => {
|
|
22
29
|
setSortedData(data);
|
|
@@ -32,7 +39,25 @@ function CustomTable({ columns, data, totalRecords, actions = [], isOrdered = tr
|
|
|
32
39
|
onFilterChange(filters);
|
|
33
40
|
}
|
|
34
41
|
};
|
|
35
|
-
return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("table", { className: "w-100", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsxs("tr", { className: "bg-gray-100", children: [columns.map((column) => (jsxRuntimeExports.jsxs("th", { className: "bg-primary first:rounded-ss-lg font-bold text-background text-sm uppercase p-3 text-left", children: [jsxRuntimeExports.jsx("div", { children: openFilter === column.dataIndex && (jsxRuntimeExports.jsxs("div", { className: "absolute mt-6 bg-background border rounded-md shadow-md p-4 z-10 w-60", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-4 text-primary", children: [jsxRuntimeExports.jsxs("h1", { className: "text-primary text-sm", children: ["Filtro por ", column.label] }), jsxRuntimeExports.
|
|
42
|
+
return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("table", { className: "w-100", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsxs("tr", { className: "bg-gray-100", children: [columns.map((column) => (jsxRuntimeExports.jsxs("th", { className: "bg-primary first:rounded-ss-lg font-bold text-background text-sm uppercase p-3 text-left", children: [jsxRuntimeExports.jsx("div", { children: openFilter === column.dataIndex && (jsxRuntimeExports.jsxs("div", { className: "absolute mt-6 bg-background border rounded-md shadow-md p-4 z-10 w-60", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-4 text-primary", children: [jsxRuntimeExports.jsxs("h1", { className: "text-primary text-sm", children: ["Filtro por ", column.label] }), jsxRuntimeExports.jsxs("div", { className: "w-full", children: [column.filterType === 'text' && (jsxRuntimeExports.jsx(Input, { label: column.label, placeholder: "Digite para filtrar", value: filters[column.dataIndex] || "", onChange: (e) => setFilters((prev) => ({ ...prev, [column.dataIndex]: e })) })), column.filterType === 'select' && (jsxRuntimeExports.jsx(Select, { options: column.filterOptions || [], value: column.filterOptions?.find((option) => option.value === filters[column.dataIndex]) || null, onChange: (selected) => setFilters((prev) => ({
|
|
43
|
+
...prev,
|
|
44
|
+
[column.dataIndex]: selected.value,
|
|
45
|
+
})), placeholder: "Selecione uma op\u00E7\u00E3o", label: column.label })), column.filterType === 'date' && (jsxRuntimeExports.jsx(CalendarInput, { label: column.label, selectionMode: "single", placeholder: "Selecione uma data", value: filters[column.dataIndex]
|
|
46
|
+
? new Date(filters[column.dataIndex])
|
|
47
|
+
: null, onChange: (e) => {
|
|
48
|
+
setFilters((prev) => ({
|
|
49
|
+
...prev,
|
|
50
|
+
[column.dataIndex]: e?.value?.toISOString() ?? '',
|
|
51
|
+
}));
|
|
52
|
+
} }))] })] }), jsxRuntimeExports.jsxs("div", { className: "flex justify-between mt-4", children: [jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: () => {
|
|
53
|
+
const updatedFilters = { ...filters };
|
|
54
|
+
delete updatedFilters[column.dataIndex];
|
|
55
|
+
setFilters(updatedFilters);
|
|
56
|
+
setOpenFilter(null);
|
|
57
|
+
if (onFilterChange) {
|
|
58
|
+
onFilterChange(updatedFilters);
|
|
59
|
+
}
|
|
60
|
+
}, label: "Limpar", width: "10", size: "small" }), jsxRuntimeExports.jsx(Button, { variant: "primary", onClick: () => handleFilter(column.dataIndex), label: "Aplicar", width: "10", size: "small" })] })] })) }), column.label, isOrdered && (jsxRuntimeExports.jsx("i", { className: "pi pi-sort-alt pl-2 text-xs cursor-pointer", onClick: () => handleSort(column.dataIndex) })), column.filterable && (jsxRuntimeExports.jsx("i", { className: clsx("pl-2 text-xs cursor-pointer", filters[column.dataIndex] ? 'pi pi-filter-slash' : 'pi pi-filter'), onClick: () => setOpenFilter((prev) => prev === column.dataIndex ? null : column.dataIndex) }))] }, String(column.dataIndex)))), actions.length > 0 && (jsxRuntimeExports.jsx("th", { className: clsx('bg-primary rounded-se-lg font-bold text-background text-sm uppercase p-3 text-right pr-4', actionsHeaderClassName), children: "A\u00C7\u00D5ES" }))] }) }), jsxRuntimeExports.jsx("tbody", { children: isLoading ? (jsxRuntimeExports.jsx("tr", { children: jsxRuntimeExports.jsx("td", { colSpan: columns.length + (actions.length > 0 ? 1 : 0), className: "p-6 text-center bg-gray-50", children: jsxRuntimeExports.jsx("div", { className: "py-2 px-4 flex justify-center items-center gap-2", children: jsxRuntimeExports.jsx(Spinner, { size: "lg" }) }) }) })) : sortedData.length > 0 ? (sortedData.map((row, index) => (jsxRuntimeExports.jsxs("tr", { className: clsx(index % 2 === 0 ? 'bg-stoneBackground' : 'bg-background', 'text-primary text-base'), children: [columns.map((column) => {
|
|
36
61
|
const value = row[column.dataIndex];
|
|
37
62
|
return (jsxRuntimeExports.jsx("td", { className: clsx('p-3 text-sm text-left', typeof column.style === 'function' ? column.style(value, row) : column.style), children: column.render ? column.render(value, row) : String(value) }, String(column.dataIndex)));
|
|
38
63
|
}), actions.length > 0 && (jsxRuntimeExports.jsx("td", { className: clsx('text-sm text-right flex flex-row justify-end p-3 gap-2', actionsColumnsClassName), children: actions.map((action, idx) => (jsxRuntimeExports.jsx("span", { className: clsx('cursor-pointer', action.disabled && 'opacity-50 pointer-events-none cursor-not-allowed'), onClick: () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"customTable.js","sources":["../../../../src/stories/components/customTable.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"customTable.js","sources":["../../../../src/stories/components/customTable.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -3,15 +3,16 @@ import clsx from 'clsx';
|
|
|
3
3
|
import { IconField } from 'primereact/iconfield';
|
|
4
4
|
import { InputIcon } from 'primereact/inputicon';
|
|
5
5
|
import { InputText } from 'primereact/inputtext';
|
|
6
|
-
import {
|
|
6
|
+
import { useId, useState, useEffect } from 'react';
|
|
7
7
|
import { maskMoneyBRL, maskCEP, maskNumberWithDecimal, maskPhone, maskCellphone, maskOnlyNumbers, maskCNPJ, maskCPF } from '../../utils/masks/index.js';
|
|
8
|
+
import FloatingLabel from '../../components/floating-label/index.js';
|
|
8
9
|
|
|
9
10
|
const variants = {
|
|
10
11
|
green: 'text-green',
|
|
11
12
|
gray: 'text-gray',
|
|
12
13
|
};
|
|
13
14
|
function Input({ onChange, placeholder, disabled = false, error, icon, onClickIcon, iconColor = 'green', label, mask, ...props }) {
|
|
14
|
-
const [isOnFocus, setIsOnFocus] = useState(false)
|
|
15
|
+
// const [isOnFocus, setIsOnFocus] = useState(false)
|
|
15
16
|
const inputId = useId();
|
|
16
17
|
const [inputValue, setInputValue] = useState('');
|
|
17
18
|
const applyMask = (value, mask) => {
|
|
@@ -51,17 +52,10 @@ function Input({ onChange, placeholder, disabled = false, error, icon, onClickIc
|
|
|
51
52
|
? 'text-redError'
|
|
52
53
|
: disabled
|
|
53
54
|
? 'text-stone'
|
|
54
|
-
: variants[iconColor]), onClick: onClickIcon }), jsxRuntimeExports.jsx(InputText, { id: inputId, type: "text", placeholder: placeholder, onChange: handleChange, disabled: disabled,
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
? '
|
|
58
|
-
: 'top-[30%] text-base', disabled
|
|
59
|
-
? 'text-stone'
|
|
60
|
-
: hasError
|
|
61
|
-
? 'text-redError'
|
|
62
|
-
: isOnFocus || props.value
|
|
63
|
-
? 'text-primary'
|
|
64
|
-
: 'text-gray'), children: label }), hasError && jsxRuntimeExports.jsx("span", { className: "text-redError text-xs px-2", children: error })] }));
|
|
55
|
+
: variants[iconColor]), onClick: onClickIcon }), jsxRuntimeExports.jsx(InputText, { id: inputId, type: "text", placeholder: placeholder, onChange: handleChange, disabled: disabled,
|
|
56
|
+
// onFocus={() => setIsOnFocus(true)}
|
|
57
|
+
// onBlur={() => setIsOnFocus(false)}
|
|
58
|
+
invalid: hasError, className: clsx('w-100 font-roboto border !p-2 rounded-md focus:shadow-none', hasError ? 'border-redError' : 'border-gray focus:border-primary'), ...props, value: inputValue })] }), jsxRuntimeExports.jsx(FloatingLabel, { value: props?.value ? props.value.toString() : '', label: label || '', disabled: disabled, error: error }), hasError && jsxRuntimeExports.jsx("span", { className: "text-redError text-xs px-2", children: error })] }));
|
|
65
59
|
}
|
|
66
60
|
|
|
67
61
|
export { Input };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","sources":["../../../../src/stories/components/input.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"input.js","sources":["../../../../src/stories/components/input.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -1,9 +1,18 @@
|
|
|
1
|
+
import { SortDirection } from "../../types";
|
|
2
|
+
export type FilterType = 'text' | 'select' | 'date';
|
|
1
3
|
export type CustomColumn<T> = {
|
|
2
4
|
label: string;
|
|
3
5
|
dataIndex: keyof T;
|
|
4
6
|
style?: (value: T[keyof T], row: T) => string | string;
|
|
5
7
|
render?: (value: T[keyof T], row: T) => React.ReactNode;
|
|
6
8
|
filterable?: boolean;
|
|
9
|
+
filterType?: FilterType;
|
|
10
|
+
filterOptions?: {
|
|
11
|
+
label: string;
|
|
12
|
+
value: string;
|
|
13
|
+
}[];
|
|
14
|
+
mask?: string;
|
|
15
|
+
dateFormat?: string;
|
|
7
16
|
};
|
|
8
17
|
export type CustomTableAction<T> = {
|
|
9
18
|
icon: React.ReactNode;
|
|
@@ -24,5 +33,6 @@ export type CustomTableProps<T> = {
|
|
|
24
33
|
isPaginated?: boolean;
|
|
25
34
|
isLoading?: boolean;
|
|
26
35
|
onFilterChange?: (filters: Record<string, string>) => void;
|
|
36
|
+
onSortChange?: (dataIndex: keyof T, direction: SortDirection) => void;
|
|
27
37
|
};
|
|
28
|
-
export declare function CustomTable<T extends Record<string, any>>({ columns, data, totalRecords, actions, isOrdered, actionsHeaderClassName, actionsColumnsClassName, rowsPerPage, onPageChange, isPaginated, isLoading, onFilterChange, }: CustomTableProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
38
|
+
export declare function CustomTable<T extends Record<string, any>>({ columns, data, totalRecords, actions, isOrdered, actionsHeaderClassName, actionsColumnsClassName, rowsPerPage, onPageChange, isPaginated, isLoading, onFilterChange, onSortChange, }: CustomTableProps<T>): import("react/jsx-runtime").JSX.Element;
|