ar-design
Version:
AR Design is a (react | nextjs) ui library.
599 lines (598 loc) • 35.5 kB
JavaScript
"use client";
import "../../../assets/css/components/data-display/table/styles.css";
import { ARIcon } from "../../icons";
import Button from "../../form/button";
import Checkbox from "../../form/checkbox";
import Pagination from "../../navigation/pagination";
import React, { forwardRef, Fragment, memo, useCallback, useEffect, useMemo, useRef, useState, } from "react";
import Input from "../../form/input";
import Popover from "../../feedback/popover";
import Utils from "../../../libs/infrastructure/shared/Utils";
import Upload from "../../form/upload";
import FilterPopup from "./FilterPopup";
import { FilterOperator } from "../../../libs/infrastructure/shared/Enums";
import Select from "../../form/select";
import Grid from "../grid-system";
import THeadCell from "./THeadCell";
const filterOption = [
{ value: FilterOperator.Contains, text: "İçerir" },
{ value: FilterOperator.DoesNotContains, text: "İçermez" },
{ value: FilterOperator.Equals, text: "Eşittir" },
{ value: FilterOperator.DoesNotEquals, text: "Eşit değildir" },
{ value: FilterOperator.BeginsWith, text: "İle başlar" },
{ value: FilterOperator.EndsWith, text: "İle biter" },
{ value: FilterOperator.Blank, text: "Boş" },
{ value: FilterOperator.NotBlank, text: "Boş değil" },
];
const { Row, Column } = Grid;
const Table = forwardRef(({ children, title, description, data, columns, actions, selections, previousSelections, searchedParams, pagination, config = { isSearchable: false }, }, ref) => {
// refs
const _tableWrapper = useRef(null);
const _tableContent = useRef(null);
const _checkboxItems = useRef([]);
const _filterCheckboxItems = useRef([]);
// refs -> Search
const _searchTextInputs = useRef([]);
const _searchTimeOut = useRef(null);
// refs -> Filter
const _filterButton = useRef([]);
// variables
const _subrowOpenAutomatically = config.subrow?.openAutomatically ?? false;
const _subrowSelector = config.subrow?.selector ?? "subitems";
const _subrowButton = config.subrow?.button ?? true;
// className
const _tableClassName = ["ar-table", "scroll"];
// states
const [selectAll, setSelectAll] = useState(false);
const [selectionItems, setSelectionItems] = useState([]);
const [showSubitems, setShowSubitems] = useState({});
// states -> File
const [files, setFiles] = useState([]);
const [formData, setFormData] = useState(undefined);
// states -> Search
const [searchedText, setSearchedText] = useState(null);
const [_searchedParams, setSearchedParams] = useState(null);
const [checkboxSelectedParams, setCheckboxSelectedParams] = useState(null);
// states -> Filter
const [filterButtonCoordinate, setFilterButtonCoordinate] = useState({ x: 0, y: 0 });
const [filterPopupContent, setFilterPopupContent] = useState(null);
const [filterPopupOption, setFilterPopupOption] = useState(null);
const [filterPopupOptionSearchText, setFilterPopupOptionSearchText] = useState(null);
// states -> Filter Fields Backup
const [filterCurrentColumn, setFilterCurrentColumn] = useState(null);
const [filterCurrentDataType, setFilterCurrentDataType] = useState(null);
const [filterCurrentIndex, setFilterCurrentIndex] = useState(null);
// states -> Pagination
const [totalRecords, setTotalRecords] = useState(0);
const [currentPage, setCurrentPage] = useState(1);
if (config && Object.keys(config.scroll || {}).length > 0) {
if (_tableContent.current && config.scroll) {
if (config.scroll.maxHeight) {
_tableContent.current.style.maxHeight = `${config?.scroll?.maxHeight}rem`;
}
}
}
// methods
const handleScroll = useCallback(() => {
if (!_tableWrapper.current)
return;
const wrapperRect = _tableWrapper.current.getBoundingClientRect();
const updateStickyPositions = (elements) => {
elements.forEach((element) => {
const leftChildren = Array.from(element.childNodes)
.filter((node) => node.nodeType === Node.ELEMENT_NODE)
.filter((child) => child.dataset.stickyPosition === "left");
const rightChildren = Array.from(element.childNodes)
.filter((node) => node.nodeType === Node.ELEMENT_NODE)
.filter((child) => child.dataset.stickyPosition === "right")
.reverse();
// Calculate positions and minimize `getBoundingClientRect` calls
const leftRects = leftChildren.map((child) => child.getBoundingClientRect());
const rightRects = rightChildren.map((child) => child.getBoundingClientRect());
const leftPrevious = leftRects.map((rect) => Math.abs(rect.right - wrapperRect.left));
const rightPrevious = rightRects.map((rect) => Math.abs(rect.left - wrapperRect.right));
// #region Left
leftChildren.forEach((child, index) => {
const prevLeft = index > 0 ? leftPrevious[index - 1] : 0;
if (index > 0) {
const childLeft = leftRects[index].left - wrapperRect.left;
if (Math.floor(childLeft) === Math.floor(prevLeft)) {
if (!child.classList.contains("active-sticky"))
child.classList.add("active-sticky");
}
else
child.classList.remove("active-sticky");
child.style.left = `${prevLeft}px`;
}
else
child.classList.add("sticky");
if (child.nodeName === "TD")
child.style.zIndex = `5`;
});
// #endregion
// #region Right
rightChildren.forEach((child, index) => {
const prevRight = index > 0 ? rightPrevious[index - 1] : 0;
if (index > 0) {
const childRight = Math.abs(rightRects[index].right - wrapperRect.right);
if (Math.floor(childRight) === Math.floor(prevRight)) {
if (!child.classList.contains("active-sticky"))
child.classList.add("active-sticky");
}
else
child.classList.remove("active-sticky");
child.style.right = `${prevRight}px`;
}
else
child.classList.add("sticky");
});
// #endregion
});
};
const theadElements = _tableWrapper.current.querySelectorAll("table > thead > tr");
const tbodyElements = _tableWrapper.current.querySelectorAll("table > tbody > tr");
requestAnimationFrame(() => {
updateStickyPositions(theadElements);
updateStickyPositions(tbodyElements);
});
}, []);
const handleSearch = useCallback((event) => {
const { name, value } = event.target;
const operator = filterPopupOption?.key == name
? filterPopupOption.option?.value
: FilterOperator.Contains;
if (config.isServerSide) {
if (_searchTimeOut.current)
clearTimeout(_searchTimeOut.current);
_searchTimeOut.current = setTimeout(() => {
setSearchedParams((prev) => ({
...prev,
[name]: { value: value, operator: operator },
}));
if (pagination && pagination.onChange)
pagination.onChange(1);
}, 750);
}
else {
setSearchedText((prev) => {
const _state = { ...prev };
if (value === "") {
delete _state[name]; // Key'i siliyoruz
}
else {
_state[name] = { value: value, operator: operator }; // Yeni değeri ekliyoruz
}
return _state;
});
}
event.target.value = value;
setCurrentPage(1);
}, [filterPopupOption]);
const handleCheckboxChange = useCallback(async (event) => {
event.stopPropagation();
const { name, value, checked } = event.target;
setCheckboxSelectedParams((prev) => {
const prevFilters = prev?.[name] || [];
const updatedSet = new Set(prevFilters.map((f) => String(f.value)));
checked ? updatedSet.add(value) : updatedSet.delete(value);
const updatedArray = Array.from(updatedSet).map((v) => ({
value: v,
operator: FilterOperator.Equals, // Checkbox’lar genelde “Equals” anlamındadır.
}));
return {
...prev,
...(updatedArray.length > 0 ? { [name]: updatedArray } : { [name]: [] }),
};
});
}, []);
const handleFilterPopupContent = (c, dataType, index) => {
const key = typeof c.key !== "object" ? String(c.key) : String(c.key.field);
const value = Array.isArray(searchedText?.[key])
? "" // veya ihtiyacına göre birleştirme yap: searchedText[key].map(v => v.value).join(", ").
: searchedText?.[key]?.value;
const handleChange = (event) => {
const { value } = event.target;
const input = _searchTextInputs.current[index ?? 0];
if (input) {
const event = new Event("input", { bubbles: true });
input.value = value;
input.dispatchEvent(event);
}
};
setFilterPopupContent(() => {
switch (dataType) {
case "string":
case "number":
return (React.createElement(Row, null,
React.createElement(Column, { size: 12 },
React.createElement(Select, { value: filterOption.find((x) => x.value === filterPopupOption?.option?.value && filterPopupOption.key === c.key) ?? filterOption[0], options: filterOption, onChange: (option) => {
setFilterPopupOption({ key: c.key, option: option });
}, placeholder: "Ko\u015Ful" })),
React.createElement(Column, { size: 12 },
React.createElement(Input, { value: value ?? "", onChange: handleChange, placeholder: "Ara" }))));
case "object":
case "boolean":
return (React.createElement(Row, null,
React.createElement(Column, { size: 12 },
React.createElement(Input, { placeholder: "Ara", value: value ?? "", onChange: (event) => setFilterPopupOptionSearchText(event.target.value) })),
React.createElement(Column, { size: 12 }, c.filters
?.filter((filter) => filter.text.toLocaleLowerCase().includes(filterPopupOptionSearchText?.toLocaleLowerCase() ?? ""))
?.map((filter, fIndex) => {
const name = typeof c.key !== "object" ? String(c.key) : String(c.key.field);
return (React.createElement("div", null,
React.createElement(Checkbox, { ref: (element) => (_filterCheckboxItems.current[fIndex] = element), label: filter.text, name: name, status: "primary", value: filter.value, checked: Array.isArray(checkboxSelectedParams?.[name]) &&
checkboxSelectedParams?.[name]?.some((f) => String(f.value) === String(filter.value)), onChange: async (event) => await handleCheckboxChange(event) })));
}))));
default:
return React.createElement(React.Fragment, null);
}
});
};
// Derinlemesine arama yapmak için özyinelemeli bir fonksiyon olarak kullanılmaktadır.
const deepSearch = (item, searchedText) => {
if (!searchedText || Object.keys(searchedText).length === 0)
return true;
const applyOperator = (value, filter) => {
if (Array.isArray(value)) {
// Array içindeki herhangi bir öğe eşleşirse true dön
return value.some((item) => applyOperator(item, filter));
}
if (typeof value === "object" && value !== null) {
// Eğer obje ise, içindeki değerlerden biri eşleşirse true dön
return Object.values(value).some((v) => applyOperator(v, filter));
}
const text = String(value ?? "").toLocaleLowerCase();
const searchText = String(filter.value ?? "").toLocaleLowerCase();
switch (filter.operator) {
case FilterOperator.Contains:
return text.includes(searchText);
case FilterOperator.DoesNotContains:
return !text.includes(searchText);
case FilterOperator.Equals:
return text === searchText;
case FilterOperator.DoesNotEquals:
return text !== searchText;
case FilterOperator.BeginsWith:
return text.startsWith(searchText);
case FilterOperator.EndsWith:
return text.endsWith(searchText);
case FilterOperator.Blank:
return text.trim() === "";
case FilterOperator.NotBlank:
return text.trim() !== "";
default:
return false;
}
};
return Object.entries(searchedText).every(([key, param]) => {
const _itemValue = item[key];
if (Array.isArray(param)) {
if (param.length === 0)
return true;
return param.some((filter) => applyOperator(_itemValue, filter));
}
else {
return applyOperator(_itemValue, param);
}
});
// Eğer değer bir sayı veya string ise, aranan metinle eşleşip eşleşmediğini kontrol ediyoruz.
// return Object.entries(searchedText).every(([key, param]) => {
// const _itemValue = item[key as keyof typeof item];
// if (typeof _itemValue === "number" || typeof _itemValue === "string" || typeof _itemValue === "boolean") {
// if (Array.isArray(param)) {
// if (param.length === 0) return true;
// else return param.some((v) => _itemValue.toString().toLocaleLowerCase().includes(v.toLocaleLowerCase()));
// }
// return _itemValue
// .toString()
// .toLocaleLowerCase()
// .includes(param.toLocaleLowerCase() ?? "");
// }
// if (typeof _itemValue === "object") {
// if (Array.isArray(param)) {
// if (param.length === 0) return true;
// else {
// return param.some((v) => {
// if (Array.isArray(_itemValue)) {
// return Object.values(_itemValue?.[0 as keyof typeof _itemValue] ?? {}).some((objValue) => {
// return String(objValue).toLocaleLowerCase().includes(String(v).toLocaleLowerCase());
// });
// }
// });
// }
// }
// }
// if (Array.isArray(_itemValue)) {
// console.log("Buradasın", _itemValue);
// }
// return false;
// });
};
const openAllSubrowsRecursively = (data, parentKey = "") => {
let result = {};
data.forEach((item, index) => {
const key = parentKey ? `${parentKey}.${index}` : `${index}`;
const subitems = item[_subrowSelector];
if (subitems && Array.isArray(subitems) && subitems.length > 0) {
const nested = openAllSubrowsRecursively(subitems, key);
result[key] = true;
result = { ...result, ...nested };
}
});
return result;
};
const getData = useMemo(() => {
let _data = [...data];
if (_subrowOpenAutomatically)
setShowSubitems(openAllSubrowsRecursively(data));
if (searchedText && Object.keys(searchedText).length > 0) {
_data = _data.filter((item) => deepSearch(item, searchedText));
setTotalRecords(_data.length);
}
else {
setTotalRecords(data.length);
}
if (pagination && !config.isServerSide) {
const indexOfLastRow = currentPage * pagination.perPage;
const indexOfFirstRow = indexOfLastRow - pagination.perPage;
_data = _data.slice(indexOfFirstRow, indexOfLastRow);
}
// Veriler yenilenmesi durumunda tablo üzerindeki hesaplamalar tekrar yapılacaktır.
setTimeout(() => handleScroll(), 0);
return _data;
}, [data, searchedText, currentPage]);
const renderRow = (item, index) => {
const isHasSubitems = _subrowSelector in item;
// TODO: Keylere bakılacak...
return (React.createElement(Fragment, { key: `row-${index}` },
React.createElement("tr", { key: `row-${index}` },
selections && (React.createElement("td", { className: "sticky-left", "data-sticky-position": "left" },
React.createElement(Checkbox, { ref: (element) => (_checkboxItems.current[index] = element), status: "primary", checked: selectionItems.some((selectionItem) => JSON.stringify(selectionItem) === JSON.stringify(item)), onChange: (event) => {
if (event.target.checked)
setSelectionItems((prev) => [...prev, item]);
else
setSelectionItems((prev) => prev.filter((_item) => _item !== item));
} }))),
isHasSubitems && _subrowButton ? (React.createElement("td", null, item[_subrowSelector] && (React.createElement("div", { className: "subitem-open-button-wrapper" },
React.createElement("span", { className: `subitem-open-button ${(showSubitems[index] && "opened") ?? ""}`, onClick: () => {
setShowSubitems((prev) => ({
...prev,
[`${index}`]: !prev[`${index}`],
}));
} }))))) : isHasSubitems && _subrowButton ? (React.createElement("td", { style: { width: 0, minWidth: 0 } })) : null,
columns.map((c, cIndex) => renderCell(item, c, cIndex, index, 0))),
showSubitems[index] && item[_subrowSelector] && (React.createElement(SubitemList, { items: item[_subrowSelector], columns: columns, index: index, depth: 1.5 }))));
};
const renderCell = (item, c, cIndex, index, depth) => {
let render;
// `c.key` bir string ise
if (typeof c.key !== "object") {
render = c.render ? c.render(item) : item[c.key];
}
// `c.key` bir nesne ise ve `nestedKey` mevcutsa
else if (typeof c.key === "object") {
const _item = item[c.key.field];
if (_item && typeof _item === "object") {
render = c.render ? c.render(item) : _item[c.key.nestedKey];
}
}
else {
// Diğer durumlarda `null` döndür
render = null;
}
const _className = [];
if (c.config?.sticky)
_className.push(`sticky-${c.config.sticky}`);
if (c.config?.alignContent)
_className.push(`align-content-${c.config.alignContent}`);
if (c.config?.textWrap)
_className.push(`text-${c.config.textWrap}`);
return (React.createElement("td", { key: `cell-${index}-${cIndex}`, className: _className.join(" "), style: c.config?.width ? { minWidth: c.config.width, maxWidth: c.config.width } : {}, "data-sticky-position": c.config?.sticky },
React.createElement("div", { style: { paddingLeft: `${depth == 0 ? 1 : depth}rem` }, className: "table-cell" },
cIndex === 0 && React.createElement("div", { className: "before" }),
React.isValidElement(render) ? render : String(render),
cIndex === 0 && React.createElement("div", { className: "after" }))));
};
const SubitemList = ({ items, columns, index, depth }) => {
return items.map((subitem, subindex) => {
const _subitem = subitem[_subrowSelector];
const isHasSubitems = _subrowSelector in subitem;
console.log(isHasSubitems);
// TODO: Keylere bakılacak...
return (React.createElement(Fragment, { key: `subitem-${index}-${subindex}-${Math.random()}` },
React.createElement("tr", { key: `subitem-${index}-${subindex}-${Math.random()}`, className: `subrow-item ${_subrowButton ? "type-b" : "type-a"}` },
isHasSubitems && _subrowButton ? (React.createElement("td", null,
React.createElement("div", { className: "subitem-open-button-wrapper" },
React.createElement("span", { className: `${(showSubitems[`${index}.${subindex}`] && "opened") ?? ""} ${!_subitem && "passive"}`, onClick: () => {
if (!_subitem)
return;
setShowSubitems((prev) => ({
...prev,
[`${index}.${subindex}`]: !prev[`${index}.${subindex}`],
}));
} })))) : !isHasSubitems && _subrowButton ? (React.createElement("td", { style: { width: 0, minWidth: 0 } })) : null,
columns.map((c, cIndex) => renderCell(subitem, c, cIndex, subindex, depth * 1.75))),
showSubitems[`${index}.${subindex}`] && _subitem && (React.createElement(SubitemList, { key: `subitem-${index}-${subindex}-${Math.random()}`, items: _subitem, columns: columns, index: subindex, depth: depth * 1.5 }))));
});
};
// useEffects
useEffect(() => {
// Eğer `previousSelections` özelliğinden değer geliyorsa bu daha önce seçim yapılmış öğeleri gönderiyorum
// demektir ve otomatik olarak seçim yap demek anlamına gekmektedir.
if (previousSelections && previousSelections.length > 0) {
const validSelections = data.filter((item) => previousSelections.some((selected) => JSON.stringify(selected) === JSON.stringify(item)));
setSelectionItems(validSelections);
}
}, [previousSelections]);
useEffect(() => {
if (config?.isServerSide && searchedParams) {
const searchRecord = {};
Object.entries(_searchedParams ?? {}).forEach(([key, value]) => {
if (Array.isArray(value)) {
// Çoklu filtre değerleri varsa virgülle birleştir.
searchRecord[key] = value.map((v) => v.value).join(",");
}
else if (value && typeof value === "object") {
searchRecord[key] = String(value.value);
}
});
const query = new URLSearchParams(searchRecord);
columns.forEach((column) => {
const key = column.key;
const filterValue = _searchedParams?.[key];
const filterArray = Array.isArray(filterValue) ? filterValue : filterValue ? [filterValue] : [];
const getParamsLength = column.filters?.length ?? 0;
const searchedParamLength = filterArray.length;
if (getParamsLength === searchedParamLength) {
query.delete(column.key);
}
});
searchedParams(_searchedParams, query.toString(), filterPopupOption?.option?.value);
}
}, [_searchedParams]);
useEffect(() => {
if (!checkboxSelectedParams)
return;
if (config.isServerSide) {
if (_searchTimeOut.current)
clearTimeout(_searchTimeOut.current);
setSearchedParams((prev) => ({ ...prev, ...checkboxSelectedParams }));
}
else {
setSearchedText((prev) => ({ ...prev, ...checkboxSelectedParams }));
}
setCurrentPage(1);
if (pagination && pagination.onChange)
pagination.onChange(1);
}, [checkboxSelectedParams]);
useEffect(() => {
if (!selections)
return;
selections(selectionItems);
}, [selectionItems]);
useEffect(() => {
if (!selections)
return;
if (_checkboxItems.current.length > 0) {
setSelectAll(_checkboxItems.current.every((item) => item?.checked === true));
}
}, [selectionItems, currentPage]);
useEffect(() => {
// Filter Content alanı re-render işlemi.
if (filterCurrentColumn && filterCurrentDataType) {
handleFilterPopupContent(filterCurrentColumn, filterCurrentDataType, filterCurrentIndex);
}
}, [checkboxSelectedParams, filterPopupOption, filterPopupOptionSearchText]);
return (React.createElement("div", { ref: _tableWrapper, className: _tableClassName.map((c) => c).join(" ") },
(title || description || actions || React.Children.count(children) > 0) && (React.createElement("div", { className: "header" },
React.createElement("div", { className: "title" },
React.createElement("h3", null, title),
description && React.createElement("h5", null, description)),
React.createElement("div", { className: "actions" }, actions && (React.createElement(React.Fragment, null,
actions.import && (React.createElement(Popover, { title: "\u0130\u00E7eri Aktar", message: "Se\u00E7ti\u011Finiz dosyalar\u0131 uygulamaya y\u00FCkleyebilirsiniz. Bu i\u015Flem, dosyalardaki verileri sistemimize aktar\u0131r ve verilerle i\u015Flem yapman\u0131za olanak tan\u0131r.", content: React.createElement(React.Fragment, null,
actions.import.prefixItem,
React.createElement(Upload, { text: "Belge Y\u00FCkleyin", allowedTypes: actions.import.allowedTypes, file: files, onChange: (formData, files) => {
setFormData(formData);
setFiles(files);
}, multiple: true }),
actions.import.suffixItem), onConfirm: (confirm) => {
if (!confirm) {
setFiles([]);
return;
}
if (actions.import && actions.import.onClick)
actions.import.onClick(formData, files);
}, config: { buttons: { okay: "Yükle", cancel: "İptal" } }, windowBlur: true },
React.createElement(Button, { variant: "outlined", status: "success", icon: { element: React.createElement(ARIcon, { icon: "Import", size: 16 }) }, tooltip: { text: actions.import.tooltip, direction: "top" } }))),
actions.create && (React.createElement(Button, { variant: "outlined", status: "dark", icon: { element: React.createElement(ARIcon, { icon: "Add", size: 16 }) }, tooltip: { text: actions.create.tooltip, direction: "top" }, onClick: actions.create.onClick }))))))),
React.createElement("div", { ref: _tableContent, className: "content", onScroll: handleScroll },
React.createElement("table", { ref: ref },
React.createElement("thead", null,
React.createElement("tr", { key: "selection" },
data.some((item) => _subrowSelector in item) && _subrowButton && (React.createElement("td", { style: { width: 0, minWidth: 0 } })),
selections && (React.createElement("th", { className: "selection-col sticky-left", "data-sticky-position": "left" },
React.createElement(Checkbox, { variant: "filled", status: "primary", checked: selectAll, onChange: (event) => {
if (_checkboxItems.current.length > 0) {
setSelectAll(event.target.checked);
_checkboxItems.current.forEach((item) => {
if (item) {
if (item.checked !== event.target.checked)
item.click();
}
});
}
} }))),
React.createElement(THeadCell, { columns: columns })),
config?.isSearchable && (React.createElement("tr", { key: "isSearchable" },
selections && (React.createElement("th", { key: `column-selections`, className: "selection-col sticky-left", "data-sticky-position": "left" })),
columns.map((c, cIndex) => {
let _className = [];
const key = typeof c.key !== "object" ? String(c.key) : String(c.key.field);
const csrValue = Array.isArray(searchedText?.[key])
? "" // veya ihtiyacına göre birleştirme yap: searchedText[key].map(v => v.value).join(", ").
: searchedText?.[key]?.value;
const ssrValue = Array.isArray(_searchedParams?.[key])
? "" // veya ihtiyacına göre birleştirme yap: _searchedParams[key].map(v => v.value).join(", ").
: _searchedParams?.[key]?.value;
if (c.config?.sticky)
_className.push(`sticky-${c.config.sticky}`);
if (c.config?.alignContent) {
_className.push(`align-content-${c.config.alignContent}`);
}
return (React.createElement("th", { key: `column-${cIndex}`, ...(_className.length > 0 && {
className: `${_className.map((c) => c).join(" ")}`,
}), ...(c.config?.sticky && {
"data-sticky-position": c.config.sticky,
}) }, c.key && (React.createElement("div", { className: "filter-field" },
React.createElement(Input, { ref: (element) => (_searchTextInputs.current[cIndex] = element), variant: c.key && !c.filters ? "outlined" : "filled", status: "light", style: { height: "2rem" }, value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onInput: handleSearch, disabled: !c.key || !!c.filters }),
React.createElement("span", { ref: (element) => (_filterButton.current[cIndex] = element), onClick: (event) => {
event.stopPropagation();
// Temizlik...
setFilterPopupOptionSearchText("");
const rect = event.currentTarget.getBoundingClientRect();
const screenCenterX = window.innerWidth / 2;
// const screenCenterY = window.innerHeight / 2;
const coordinateX = rect.x > screenCenterX ? rect.x + rect.width - 225 : rect.x;
const coordinateY = rect.y + rect.height;
// data içindeki alanların tiplerini bulmak için kullanılmaktadır
const getDataFirstItem = { ...data[0] };
const key = typeof c.key !== "object" ? String(c.key) : String(c.key.field);
const getValueByKey = getDataFirstItem[key];
let dataType = typeof getValueByKey;
if (getValueByKey == null)
dataType = "string";
setFilterButtonCoordinate({ x: coordinateX, y: coordinateY });
setFilterCurrentColumn(c);
setFilterCurrentDataType(dataType);
setFilterCurrentIndex(cIndex);
handleFilterPopupContent(c, dataType, cIndex);
} },
React.createElement(Button, { variant: "borderless", status: "dark", icon: {
element: (React.createElement(ARIcon, { viewBox: "0 0 16 16", size: 24, icon: "Filter", fill: "var(--dark)", strokeWidth: 0 })),
} }))))));
})))),
React.createElement("tbody", null, getData.map((item, index) => (React.createElement(React.Fragment, { key: index }, renderRow(item, index))))))),
React.createElement(FilterPopup, { tableContent: _tableContent, coordinate: filterButtonCoordinate, buttons: _filterButton }, filterPopupContent),
pagination && pagination.totalRecords > pagination.perPage && (React.createElement("div", { className: "footer" },
React.createElement("span", null,
React.createElement("strong", null,
"Showing ",
getData.length),
" ",
React.createElement("span", null,
"of ",
pagination?.perPage ?? getData.length,
" agreement")),
React.createElement(Pagination, { totalRecords: config.isServerSide ? pagination.totalRecords : totalRecords ?? 0, currentPage: currentPage, perPage: pagination.perPage, onChange: (currentPage) => {
if (config.isServerSide && pagination && pagination.onChange)
pagination.onChange(currentPage);
setCurrentPage(currentPage);
} })))));
});
export default memo(Table, (prevProps, nextProps) => {
const data = Utils.DeepEqual(prevProps.data, nextProps.data);
const columns = Utils.DeepEqual(prevProps.columns, nextProps.columns);
const actions = Utils.DeepEqual(prevProps.actions, nextProps.actions);
const previousSelections = Utils.DeepEqual(prevProps.previousSelections, nextProps.previousSelections);
return data && columns && actions && previousSelections;
});