dynamic-modal
Version:
The dynamic-modal is a solution of creation different modals into project using a json configuration file
87 lines (86 loc) • 5.24 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useContext, useMemo, useState } from 'react';
import useRenderIf from '../../hooks/use-render-if';
import { ComponentStateContext } from '../../context/component/component-state';
import useLiveData from '../../hooks/use-live-data';
import { Controller } from 'react-hook-form';
import useConditionalField from '../../hooks/use-conditional-field';
const MakeTable = ({ element, watch, control, setValue, }) => {
const [liveSearching, setLiveSearching] = useState(false);
const [selected, setSelected] = useState('');
const [rowSelected, setRowSelected] = useState(new Map());
const { Select, Button } = useContext(ComponentStateContext);
const { selectTitleName, selectValueName, selectActionName, selectPlaceholder, renderIf, columns, name: elementName, data, liveData: elementLiveData, style, buttonStyle, } = element;
const { checkLiveData, liveData, setLiveData } = useLiveData({
elementLiveData,
});
const { checkRender, render, setRender } = useRenderIf({
elementRenderIf: renderIf,
});
useConditionalField({
watch,
elementName,
renderIf,
liveDataConfig: elementLiveData,
render,
enable: true,
checkRender,
checkEnable: async () => null,
checkLiveData,
setRender,
setEnable: () => { },
setLiveData,
setLiveSearching,
});
const addToTable = useCallback((selectedValue) => {
if (selectedValue === '')
return;
const elementSelected = data.find((item) => String(item[selectValueName]) === selectedValue);
if (elementSelected) {
const currentElements = new Map(rowSelected.entries());
currentElements.set(selectedValue, elementSelected);
setValue(elementName, Array.from(currentElements.values()));
setRowSelected(currentElements);
setSelected('');
}
}, [data, elementName, rowSelected, selectValueName, setValue]);
const tableButtonAction = useCallback((row, isDeleteAction, action) => {
const id = String(row[selectValueName]);
if (isDeleteAction) {
const currentElements = new Map(rowSelected.entries());
currentElements.delete(id);
setRowSelected(currentElements);
setValue(elementName, Array.from(currentElements.values()));
return;
}
action?.(row);
}, [elementName, rowSelected, selectValueName, setValue]);
const selectOptions = useMemo(() => {
return data.map((item) => ({
id: String(item[selectValueName]),
name: String(item[selectTitleName]),
}));
}, [data, selectTitleName, selectValueName]);
const keyColumns = useMemo(() => {
return columns.map((column) => column.title);
}, [columns]);
const tableData = useMemo(() => {
return Array.from(rowSelected.values());
}, [rowSelected]);
if (!render)
return null;
return (_jsxs("div", { className: "flex flex-col gap-2", style: style, children: [_jsxs("div", { className: "flex w-full justify-between gap-4", children: [_jsx(Controller, { control: control, name: elementName, defaultValue: [], render: ({ field: { value } }) => (_jsx("input", { type: "hidden", value: value })) }), _jsx(Select, { name: "table-select-field", placeholder: selectPlaceholder, isSearch: true, value: selected, invalid: false, options: liveData || selectOptions, liveSearching: liveSearching, onChange: (value) => {
setSelected(value);
} }), _jsx(Button, { style: buttonStyle, text: selectActionName, onClick: () => addToTable(selected) })] }), _jsxs("table", { className: "w-full text-[11px] shadow-md sm:rounded-lg", children: [_jsx("thead", { className: "sticky top-0 z-10 bg-gray-50 text-center text-gray-700", children: _jsx("tr", { children: keyColumns.map((title) => (_jsx("th", { scope: "col", className: "px-6 py-3", children: title }, `column-${title}`))) }) }), _jsx("tbody", { children: tableData.map((row) => {
return (_jsx("tr", { className: "border-b bg-white text-center hover:bg-gray-50", children: columns.map(({ Icon, isButton, action, isDeleteAction, style: columnStyle, ...column }) => {
if (!isButton) {
return (_jsx("td", { className: "px-6 py-4", style: columnStyle, children: row[column.key] ?? '' }, `${String(row[selectValueName])}-${column.title}`));
}
return (_jsx("td", { children: _jsx("button", { type: "button", className: "rounded-md p-2 text-lg", onClick: () => {
tableButtonAction(row, isDeleteAction, action);
}, style: columnStyle, children: Icon && _jsx(Icon, {}) }) }, `${String(row[selectValueName])}-${column.title}`));
}) }, `row-${String(row[selectValueName])}`));
}) })] })] }));
};
export default MakeTable;