ar-design
Version:
AR Design is a (react | nextjs) ui library.
67 lines (66 loc) • 3.72 kB
JavaScript
import React, { memo } from "react";
import Button from "../../form/button";
import { ARIcon } from "../../icons";
import { ExtractKey } from "./Helpers";
const MemoizedTHeadCell = function ({ refs, states, methods, columns, config, }) {
return (React.createElement(React.Fragment, null, columns.map((c, cIndex) => {
const { isProperties = true } = c.config ?? {};
const _direction = states.sort.get.find((s) => s.key === c.key)?.direction;
let _className = [];
if (c.config?.sticky)
_className.push(`sticky-${c.config.sticky}`);
if (!c.config?.width)
_className.push("min-w");
if (c.config?.alignContent) {
_className.push(`align-content-${c.config.alignContent}`);
}
return (React.createElement("th", { key: `column-${cIndex}-${Math.random()}`, ...(_className.length > 0 && {
className: `${_className.map((c) => c).join(" ")}`,
}), ...(c.config?.width
? {
style: { minWidth: c.config.width, maxWidth: c.config.width },
}
: // : { style: { maxWidth: thWidths[cIndex], minWidth: thWidths[cIndex] } })}
{ style: {} }), ...(c.config?.sticky && {
"data-sticky-position": c.config.sticky,
}) },
React.createElement("div", null,
React.createElement("span", { style: { fontWeight: 500 } },
(_direction === "asc" || _direction === "desc") && (React.createElement("span", null,
_direction === "asc" && React.createElement(ARIcon, { icon: "ArrowUp" }),
_direction === "desc" && React.createElement(ARIcon, { icon: "ArrowDown" }))),
c.title),
config.isProperties && isProperties && (React.createElement("span", { ref: (element) => {
if (!element)
return;
refs.propertiesButton.current[cIndex] = element;
}, className: "properties-field", "data-properties-button": "true", onClick: (event) => {
event.preventDefault();
event.stopPropagation();
const rect = event.currentTarget.getBoundingClientRect();
const screenCenterX = window.innerWidth / 2;
const coordinateX = rect.x > screenCenterX ? rect.x + rect.width - 225 : rect.x;
const coordinateY = rect.y + rect.height;
states.sortCurrentColumn.set(c);
states.propertiesButtonCoordinate.set({
x: coordinateX,
y: coordinateY,
});
states.sort.set((prev) => {
const key = ExtractKey(c.key);
const index = prev.findIndex((s) => s.key === key);
if (index === -1)
return [...prev, { key, direction: null }];
return prev;
});
states.open.set(true);
methods.handleScroll();
} },
React.createElement(Button, { variant: "borderless", icon: {
element: React.createElement(ARIcon, { size: 16, icon: "ThreeDotsVertical", fill: "var(--dark)", strokeWidth: 0 }),
} }))))));
})));
};
// React.memo kullanımı sırasında generic tipi koruyoruz.
const THeadCell = memo(MemoizedTHeadCell);
export default THeadCell;