@harjs/react-ui 1.0.0

package/dist/components/data-display/table/FilterPopup.js

@@ -0,0 +1,54 @@
+"use client";
+import React, { useEffect, useRef } from "react";
+import ReactDOM from "react-dom";
+const FilterPopup = ({ children, refs, states, coordinate }) => {
+    // refs
+    const _arTableFilterPopup = useRef(null);
+    // methods
+    const handleClickOutSide = (event) => {
+        const target = event.target;
+        const clickedInsidePopup = _arTableFilterPopup.current && _arTableFilterPopup.current.contains(target);
+        const isOneOfButtons = refs.buttons.current.some((button) => button === target || button?.contains(target));
+        if (!clickedInsidePopup && !isOneOfButtons)
+            handleClose();
+    };
+    const handleKeys = (event) => {
+        const key = event.key;
+        if (key === "Escape")
+            states.open.set(false);
+    };
+    const handleOpen = () => states.open.set(true);
+    const handleClose = () => states.open.set(false);
+    // useEffects
+    useEffect(() => {
+        const currentButtons = refs.buttons.current;
+        currentButtons.forEach((button) => {
+            if (button)
+                button.addEventListener("click", handleOpen);
+        });
+        return () => {
+            currentButtons.forEach((button) => {
+                if (button)
+                    button.removeEventListener("click", handleOpen);
+            });
+        };
+    }, [refs.buttons]);
+    useEffect(() => {
+        const tableContentRef = refs.tableContent.current;
+        if (tableContentRef) {
+            tableContentRef.addEventListener("scroll", handleClose);
+        }
+        document.addEventListener("click", handleClickOutSide);
+        document.addEventListener("keydown", handleKeys);
+        return () => {
+            document.removeEventListener("click", handleClickOutSide);
+            document.removeEventListener("keydown", handleKeys);
+            if (tableContentRef) {
+                tableContentRef.removeEventListener("scroll", handleClose);
+            }
+        };
+    }, []);
+    return (states.open.get &&
+        ReactDOM.createPortal(React.createElement("div", { ref: _arTableFilterPopup, className: "ar-table-filter-popup", style: { top: coordinate.y, left: coordinate.x } }, children), document.body));
+};
+export default FilterPopup;

package/dist/components/data-display/table/Helpers.d.ts

@@ -0,0 +1,2 @@
+declare function ExtractKey<T>(key: unknown): keyof T | null;
+export { ExtractKey };

package/dist/components/data-display/table/Helpers.js

@@ -0,0 +1,10 @@
+function ExtractKey(key) {
+    if (!key)
+        return null;
+    if (typeof key !== "object")
+        return key;
+    if ("field" in key)
+        return key.field;
+    return null;
+}
+export { ExtractKey };

package/dist/components/data-display/table/IProps.d.ts

@@ -0,0 +1,99 @@
+import React from "react";
+import { Errors, MimeTypes, TableColumnProps } from "../../../libs/infrastructure/types";
+import { IChildrenProps } from "../../../libs/infrastructure/types/IGlobalProps";
+import { FilterOperator } from "../../../libs/infrastructure/shared/Enums";
+export type Operator = "Contains" | "DoesNotContains" | "Equals" | "DoesNotEquals" | "BeginsWith" | "EndsWith" | "Blank" | "NotBlank";
+export type FilterValue = {
+    value: string | number | boolean;
+    operator: FilterOperator;
+};
+export type Actions = {
+    import?: ImportActionType;
+    export?: ExportActionType;
+    create?: CreateActionType;
+    delete?: DeleteActionType;
+};
+export type Sort<T> = {
+    key: keyof T;
+    direction: "asc" | "desc" | null;
+};
+export type SearchedParam = {
+    [key: string]: FilterValue | FilterValue[];
+};
+export type Config<T extends object> = {
+    locale?: Intl.LocalesArgument;
+    isServerSide?: boolean;
+    isProperties?: boolean;
+    isSearchable?: boolean;
+    scroll?: {
+        maxHeight: number;
+    };
+    subrow?: {
+        openAutomatically?: boolean;
+        selector?: string;
+        button?: boolean;
+        render?: {
+            styles: React.CSSProperties;
+            element: (item: T[]) => React.JSX.Element;
+        };
+    };
+    dnd?: {
+        renderItem: React.JSX.Element;
+    };
+    isTreeView?: boolean;
+    validation?: {
+        errors: Errors<T>;
+        getChangeData?: (items: T[]) => void;
+    };
+};
+type ImportActionType = {
+    tooltip: string;
+    title?: string;
+    message?: string;
+    buttonText?: string;
+    allowedTypes?: MimeTypes[];
+    prefixItem?: React.ReactNode;
+    suffixItem?: React.ReactNode;
+    onClick: (formData: FormData | undefined, files: File[], base64: string[]) => void;
+};
+type ExportActionType = {
+    tooltip: string;
+    title?: string;
+    message?: string;
+    content?: React.JSX.Element;
+    onClick: () => void;
+};
+type CreateActionType = {
+    tooltip: string;
+    onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+};
+type DeleteActionType = {
+    tooltip: string;
+    title?: string;
+    message?: string;
+    onClick: () => void;
+};
+interface IProps<T extends object> extends IChildrenProps {
+    trackBy?: (item: T) => string;
+    title?: string;
+    description?: string;
+    data: T[];
+    columns: TableColumnProps<T>[];
+    actions?: Actions;
+    rowBackgroundColor?: (item: T) => string;
+    selections?: (selectionItems: T[]) => void;
+    selectionDisabled?: (item: T) => boolean;
+    previousSelections?: T[];
+    sortedParams?: (params: Sort<T>[], query: string) => void;
+    searchedParams?: (params: SearchedParam | null, query: string, operator: FilterOperator) => void;
+    onEditable?: (item: T, trackByValue: string, currentKey?: keyof T | null) => void;
+    onDnD?: (item: T[]) => void;
+    pagination?: {
+        totalRecords: number;
+        perPage: number;
+        currentPage?: number;
+        onChange?: (currentPage: number, perPage: number) => void;
+    };
+    config?: Config<T>;
+}
+export default IProps;

package/dist/components/data-display/table/IProps.js

@@ -0,0 +1 @@
+export {};

package/dist/components/data-display/table/PropertiesPopup.d.ts

@@ -0,0 +1,31 @@
+import React, { Dispatch, MutableRefObject, SetStateAction } from "react";
+import { Config, Sort } from "./IProps";
+import { TableColumnProps } from "../../../libs/infrastructure/types";
+interface IProps<T extends object> {
+    refs: {
+        tableContent: MutableRefObject<HTMLDivElement | null>;
+        buttons: MutableRefObject<(HTMLSpanElement | null)[]>;
+    };
+    states: {
+        open: {
+            get: boolean;
+            set: Dispatch<SetStateAction<boolean>>;
+        };
+        sort: {
+            get: Sort<T>[];
+            set: Dispatch<SetStateAction<Sort<T>[]>>;
+            currentColumn: TableColumnProps<T> | null;
+        };
+    };
+    methods: {
+        handleScroll: () => void;
+    };
+    coordinate: {
+        x: number;
+        y: number;
+    };
+    config: Config<T>;
+}
+declare function PropertiesPopup<T extends object>({ refs, states, methods, coordinate, config }: IProps<T>): false | React.ReactPortal;
+declare const _default: typeof PropertiesPopup;
+export default _default;

package/dist/components/data-display/table/PropertiesPopup.js

@@ -0,0 +1,90 @@
+"use client";
+import React, { memo, useEffect, useMemo, useRef } from "react";
+import ReactDOM from "react-dom";
+import { ARIcon } from "../../icons";
+import { ExtractKey } from "./Helpers";
+import { useTranslation } from "../../../libs/core/application/hooks";
+function PropertiesPopup({ refs, states, methods, coordinate, config }) {
+    // refs
+    const _arTablePropertiesPopup = useRef(null);
+    // hooks
+    const { t } = useTranslation(String(config.locale ?? "tr"));
+    // methods
+    const handleClickOutSide = (event) => {
+        const target = event.target;
+        const clickedInsidePopup = _arTablePropertiesPopup.current && _arTablePropertiesPopup.current.contains(target);
+        const isOneOfButtons = target.closest('[data-properties-button="true"]');
+        if (!clickedInsidePopup && !isOneOfButtons)
+            handleClose();
+    };
+    const handleSort = useMemo(() => {
+        return (columnKey, direction) => {
+            if (!columnKey)
+                return;
+            states.sort.set(() => [{ key: columnKey, direction }]);
+        };
+    }, [states.sort]);
+    const handleKeys = (event) => {
+        const key = event.key;
+        if (key === "Escape")
+            handleClose();
+    };
+    const handleOpen = () => {
+        states.open.set(true);
+        methods.handleScroll();
+    };
+    const handleClose = () => {
+        states.open.set(false);
+        methods.handleScroll();
+    };
+    // useEffects
+    useEffect(() => {
+        const currentButtons = refs.buttons.current;
+        currentButtons.forEach((button) => {
+            if (button)
+                button.addEventListener("click", handleOpen);
+        });
+        return () => {
+            currentButtons.forEach((button) => {
+                if (button)
+                    button.removeEventListener("click", handleOpen);
+            });
+        };
+    }, [refs.buttons]);
+    useEffect(() => {
+        const tableContentRef = refs.tableContent.current;
+        if (tableContentRef) {
+            tableContentRef.addEventListener("scroll", handleClose);
+        }
+        document.addEventListener("click", handleClickOutSide);
+        document.addEventListener("keydown", handleKeys);
+        return () => {
+            document.removeEventListener("click", handleClickOutSide);
+            document.removeEventListener("keydown", handleKeys);
+            if (tableContentRef) {
+                tableContentRef.removeEventListener("scroll", handleClose);
+            }
+        };
+    }, []);
+    const currentKey = ExtractKey(states.sort.currentColumn?.key);
+    const currentSort = states.sort.get?.find((s) => s.key === currentKey);
+    return (states.open.get &&
+        ReactDOM.createPortal(React.createElement("div", { ref: _arTablePropertiesPopup, className: "ar-table-properties-popup", style: { top: coordinate.y, left: coordinate.x } },
+            React.createElement("ul", null,
+                currentSort && (!currentSort.direction || currentSort.direction === "desc") && (React.createElement("li", { onClick: () => handleSort(currentKey, "asc") },
+                    React.createElement("span", null,
+                        React.createElement(ARIcon, { icon: "ArrowUp" })),
+                    React.createElement("span", null, t("Table.Properties.Asc.Text")))),
+                currentSort && (!currentSort.direction || currentSort.direction === "asc") && (React.createElement("li", { onClick: () => handleSort(currentKey, "desc") },
+                    React.createElement("span", null,
+                        React.createElement(ARIcon, { icon: "ArrowDown" })),
+                    React.createElement("span", null, t("Table.Properties.Desc.Text")))),
+                currentSort && currentSort.direction && (React.createElement("li", { onClick: () => {
+                        states.sort.set((prev) => prev.filter((s) => s.key !== currentKey));
+                        states.open.set(false);
+                    } },
+                    React.createElement("span", null,
+                        React.createElement(ARIcon, { icon: "ChevronExpand" })),
+                    React.createElement("span", null, t("Table.Properties.ClearSort.Text")))))), document.body));
+}
+export default memo(PropertiesPopup);

package/dist/components/data-display/table/THeadCell.d.ts

@@ -0,0 +1,34 @@
+import React, { Dispatch, SetStateAction } from "react";
+import { Config, Sort } from "./IProps";
+import { TableColumnProps } from "../../../libs/infrastructure/types";
+declare const MemoizedTHeadCell: <T extends object>({ refs, states, methods, columns, config, }: {
+    refs: {
+        propertiesButton: React.MutableRefObject<(HTMLSpanElement | null)[]>;
+    };
+    states: {
+        open: {
+            get: boolean;
+            set: Dispatch<SetStateAction<boolean>>;
+        };
+        sort: {
+            get: Sort<T>[];
+            set: Dispatch<SetStateAction<Sort<T>[]>>;
+        };
+        sortCurrentColumn: {
+            set: React.Dispatch<React.SetStateAction<TableColumnProps<T> | null>>;
+        };
+        propertiesButtonCoordinate: {
+            set: React.Dispatch<React.SetStateAction<{
+                x: number;
+                y: number;
+            }>>;
+        };
+    };
+    methods: {
+        handleScroll: () => void;
+    };
+    columns: TableColumnProps<T>[];
+    config: Config<T>;
+}) => React.JSX.Element;
+declare const THeadCell: typeof MemoizedTHeadCell;
+export default THeadCell;

package/dist/components/data-display/table/THeadCell.js

@@ -0,0 +1,67 @@
+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 ?? {};
+        // Orijinal c.key araması optimize edildi ve string formatına güvenli şekilde çekildi
+        const columnKeyString = String(ExtractKey(c.key) ?? cIndex);
+        const _direction = states.sort.get.find((s) => s.key === columnKeyString)?.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-head-${columnKeyString}`, ...(_className.length > 0 && {
+                className: `${_className.join(" ")}`,
+            }), ...(c.config?.width
+                ? {
+                    style: { minWidth: c.config.width, maxWidth: c.config.width },
+                }
+                : { 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) {
+                            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;

package/dist/components/data-display/table/body/Editable.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { TableColumnProps } from "../../../../libs/infrastructure/types";
+import { Config } from "../IProps";
+interface IProps<T extends object> {
+    c: TableColumnProps<T>;
+    item: T;
+    trackByValue: string;
+    onEditable: (item: T, trackByValue: string, currentKey?: keyof T | null) => void;
+    config: Config<T>;
+}
+declare const Editable: <T extends object>({ c, item, trackByValue, onEditable, config }: IProps<T>) => React.JSX.Element | null;
+export default Editable;

package/dist/components/data-display/table/body/Editable.js

@@ -0,0 +1,59 @@
+"use client";
+import React, { useCallback, useEffect, useState } from "react";
+import Input from "../../../form/input";
+import DatePicker from "../../../form/date-picker";
+import Select from "../../../form/select";
+import { ExtractKey } from "../Helpers";
+import Checkbox from "../../../form/checkbox";
+const Editable = function ({ c, item, trackByValue, onEditable, config }) {
+    // refs
+    // variables
+    const key = c.key;
+    const itemValue = item[c.key];
+    const selectItem = c.editable?.(item)?.options?.find((x) => x.value === itemValue);
+    const selectItems = Array.isArray(itemValue)
+        ? c.editable?.(item)?.options?.filter((x) => itemValue.includes(x.value))
+        : [];
+    const validation = config.validation;
+    const _vText = validation?.errors?.[`${c.key}_${trackByValue}`];
+    // states
+    const [_value, setValue] = useState(itemValue);
+    // methods
+    const handleChange = useCallback((value, set = true) => {
+        if (set)
+            setValue(value);
+        onEditable({ ...item, [key]: value }, trackByValue, ExtractKey(c.key));
+    }, [item]);
+    // useEffects
+    useEffect(() => setValue(itemValue), [itemValue]);
+    // return
+    switch (c.editable?.(item)?.type) {
+        case "string":
+        case "number":
+            return (React.createElement(Input, { variant: "borderless", value: String(_value ?? ""), onChange: (event) => {
+                    handleChange(c.editable?.(item)?.type === "number" ? Number(event.target.value) : event.target.value);
+                }, validation: { text: _vText }, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
+        case "boolean":
+            return (React.createElement(Checkbox, { variant: "borderless", color: "blue", checked: Boolean(_value), onChange: (event) => {
+                    const checked = event.target.checked;
+                    setValue(checked);
+                    onEditable({
+                        ...item,
+                        [key]: checked,
+                    }, trackByValue, ExtractKey(c.key));
+                }, validation: { text: _vText }, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
+        case "decimal":
+            return (React.createElement(Input.Decimal, { variant: "borderless", name: c.key, value: String(_value ?? ""), onChange: (event) => handleChange(event.target.value), validation: { text: _vText }, locale: config.locale, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
+        case "input-formatted-decimal":
+            return (React.createElement(Input.FormattedDecimal, { variant: "borderless", name: c.key, value: String(_value ?? ""), onChange: (event) => handleChange(event.target.value), validation: { text: _vText }, locale: config.locale, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
+        case "date-picker":
+            return (React.createElement(DatePicker, { variant: "borderless", value: String(_value ?? ""), onChange: (value) => handleChange(value), validation: { text: _vText }, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
+        case "single-select":
+            return (React.createElement(Select, { variant: "borderless", value: selectItem, options: c.editable?.(item).options, onClick: async () => await c.editable?.(item)?.method?.(), onChange: (option) => handleChange(option?.value, false), validation: { text: _vText }, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
+        case "multiple-select":
+            return (React.createElement(Select, { variant: "borderless", value: selectItems, options: c.editable?.(item).options, onClick: async () => await c.editable?.(item)?.method?.(), onChange: (options) => handleChange(options.map((option) => option.value), false), validation: { text: _vText }, multiple: true, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
+        default:
+            return null;
+    }
+};
+export default Editable;

package/dist/components/data-display/table/body/TBody.d.ts

@@ -0,0 +1,36 @@
+import React, { Dispatch, SetStateAction } from "react";
+import { Config } from "../IProps";
+import { TableColumnProps } from "../../../../libs/infrastructure/types";
+interface IProps<T extends object> {
+    data: T[];
+    columns: TableColumnProps<T>[];
+    refs: {
+        _checkboxItems: React.MutableRefObject<(HTMLInputElement | null)[]>;
+        _selectionItems: React.MutableRefObject<T[]>;
+    };
+    states: {
+        setSelectAll: {
+            get: boolean;
+            set: Dispatch<SetStateAction<boolean>>;
+        };
+        showSubitems: {
+            get: {
+                [key: string]: boolean;
+            };
+            set: Dispatch<React.SetStateAction<{
+                [key: string]: boolean;
+            }>>;
+        };
+    };
+    methods: {
+        trackBy?: (item: T) => string;
+        selections?: (selectionItems: T[]) => void;
+        selectionDisabled?: (item: T) => boolean;
+        onDnD?: (item: T[]) => void;
+        onEditable?: (item: T, trackByValue: string, currentKey?: keyof T | null) => void;
+        rowBackgroundColor?: (item: T) => string;
+    };
+    config: Config<T>;
+}
+declare const _default: <T extends object>(props: IProps<T>) => React.JSX.Element;
+export default _default;