ar-design 0.4.41 → 0.4.42

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

@@ -20,7 +20,7 @@ export type Sort<T> = {
 export type SearchedParam = {
     [key: string]: FilterValue | FilterValue[];
 };
-export type Config<T> = {
+export type Config<T extends object> = {
     locale?: Intl.LocalesArgument;
     isServerSide?: boolean;
     isProperties?: boolean;
@@ -34,14 +34,17 @@ export type Config<T> = {
         button?: boolean;
         render?: {
             styles: React.CSSProperties;
-            element: (item: any[]) => React.JSX.Element;
+            element: (item: T[]) => React.JSX.Element;
         };
     };
     dnd?: {
         renderItem: React.JSX.Element;
     };
     isTreeView?: boolean;
-    validation?: Errors<T>;
+    validation?: {
+        errors: Errors<T>;
+        getChangeData?: (items: T[]) => void;
+    };
 };
 type ImportActionType = {
     tooltip: string;
@@ -70,7 +73,7 @@ type DeleteActionType = {
     message?: string;
     onClick: () => void;
 };
-interface IProps<T> extends IChildren {
+interface IProps<T extends object> extends IChildren {
     trackBy?: (item: T) => string;
     title?: string;
     description?: string;

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

@@ -1,7 +1,7 @@
 import React, { Dispatch, MutableRefObject, SetStateAction } from "react";
 import { TableColumnType } from "../../../libs/types";
 import { Config, Sort } from "./IProps";
-interface IProps<T> {
+interface IProps<T extends object> {
     refs: {
         tableContent: MutableRefObject<HTMLDivElement | null>;
         buttons: MutableRefObject<(HTMLSpanElement | null)[]>;

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

@@ -1,7 +1,7 @@
 import React, { Dispatch, SetStateAction } from "react";
 import { TableColumnType } from "../../../libs/types";
 import { Config, Sort } from "./IProps";
-declare const MemoizedTHeadCell: <T>({ refs, states, methods, columns, config, }: {
+declare const MemoizedTHeadCell: <T extends object>({ refs, states, methods, columns, config, }: {
     refs: {
         propertiesButton: React.MutableRefObject<(HTMLSpanElement | null)[]>;
     };

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

@@ -1,13 +1,12 @@
 import React from "react";
-import { Errors, TableColumnType } from "../../../../libs/types";
+import { TableColumnType } from "../../../../libs/types";
 import { Config } from "../IProps";
-interface IProps<T> {
+interface IProps<T extends object> {
     c: TableColumnType<T>;
     item: T;
     trackByValue: string;
     onEditable: (item: T, trackByValue: string, currentKey?: keyof T | null) => void;
-    validation?: Errors<T>;
     config: Config<T>;
 }
-declare const Editable: <T>({ c, item, trackByValue, onEditable, validation, config }: IProps<T>) => React.JSX.Element | null;
+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

@@ -4,7 +4,7 @@ import Input from "../../../form/input";
 import DatePicker from "../../../form/date-picker";
 import Select from "../../../form/select";
 import { ExtractKey } from "../Helpers";
-const Editable = function ({ c, item, trackByValue, onEditable, validation, config }) {
+const Editable = function ({ c, item, trackByValue, onEditable, config }) {
     // variables
     const key = c.key;
     const itemValue = item[c.key];
@@ -12,7 +12,8 @@ const Editable = function ({ c, item, trackByValue, onEditable, validation, conf
     const selectItems = Array.isArray(itemValue)
         ? c.editable?.options?.filter((x) => itemValue.includes(x.value))
         : [];
-    const _vText = validation?.[`${c.key}_${trackByValue}`];
+    const validation = config.validation;
+    const _vText = validation?.errors?.[`${c.key}_${trackByValue}`];
     // states
     const [_value, setValue] = useState(itemValue);
     // useEffects

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

@@ -1,7 +1,7 @@
 import React, { Dispatch, SetStateAction } from "react";
 import { TableColumnType } from "../../../../libs/types";
 import { Config } from "../IProps";
-interface IProps<T> {
+interface IProps<T extends object> {
     data: T[];
     columns: TableColumnType<T>[];
     refs: {

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

@@ -99,7 +99,7 @@ function TBody({ data, columns, refs, methods, states, config }) {
                             return (React.createElement("div", { key: `last-before-${i}`, style: { left: `${i + 0.65}rem` }, className: "last-before" }));
                         }),
                     React.createElement("div", { className: "before" }))),
-                React.isValidElement(render) ? (render) : column.editable && methods.onEditable ? (React.createElement(Editable, { c: column, item: item, trackByValue: methods.trackBy?.(item) ?? "", onEditable: methods.onEditable, validation: config.validation, config: config })) : (React.createElement("span", null, render)),
+                React.isValidElement(render) ? (render) : column.editable && methods.onEditable ? (React.createElement(Editable, { c: column, item: item, trackByValue: methods.trackBy?.(item) ?? "", onEditable: methods.onEditable, config: config })) : (React.createElement("span", null, render)),
                 config.isTreeView && cIndex === 0 && (React.createElement("div", { className: "after" },
                     React.createElement("div", { className: "circle" }))))));
     };

package/dist/components/data-display/table/header/ActionButtons.d.ts

@@ -1,7 +1,14 @@
+import { Dispatch, SetStateAction } from "react";
 import { Actions } from "../IProps";
 import React from "react";
 interface IProps {
+    states: {
+        createTrigger: {
+            get: boolean;
+            set: Dispatch<SetStateAction<boolean>>;
+        };
+    };
     actions: Actions;
 }
-declare const _default: React.MemoExoticComponent<({ actions }: IProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ states, actions }: IProps) => React.JSX.Element>;
 export default _default;

package/dist/components/data-display/table/header/ActionButtons.js

@@ -7,7 +7,7 @@ import Tooltip from "../../../feedback/tooltip";
 import Button from "../../../form/button";
 import { ARIcon } from "../../../icons";
 const { Row, Column } = Grid;
-const ActionButtons = ({ actions }) => {
+const ActionButtons = ({ states, actions }) => {
     // states
     const [files, setFiles] = useState([]);
     const [formData, setFormData] = useState(undefined);
@@ -46,7 +46,12 @@ const ActionButtons = ({ actions }) => {
             React.createElement(Tooltip, { text: actions.export.tooltip },
                 React.createElement(Button, { variant: "outlined", color: "blue", icon: { element: React.createElement(ARIcon, { icon: "Download", fill: "currentcolor" }) } })))),
         actions.create && (React.createElement(Tooltip, { text: actions.create.tooltip },
-            React.createElement(Button, { variant: "outlined", color: "green", icon: { element: React.createElement(ARIcon, { icon: "Add", size: 24 }) }, onClick: actions.create.onClick }))),
+            React.createElement(Button, { variant: "outlined", color: "green", icon: { element: React.createElement(ARIcon, { icon: "Add", size: 24 }) }, onClick: (event) => {
+                    if (!actions.create)
+                        return;
+                    actions.create.onClick(event);
+                    states.createTrigger.set((prev) => !prev);
+                } }))),
         actions.delete && (React.createElement(Popover, { title: actions.delete.title ?? "Siliniyor", message: actions.delete.message ??
                 "Seçtiğiniz verileri uygulamadan silebilirsiniz. Bu işlem, verilerin sistemimizden tamamen kaldırılmasını sağlar ve bu verilerle artık işlem yapılamaz.", onConfirm: (confirm) => {
                 if (!confirm)

package/dist/components/data-display/table/header/Header.d.ts

@@ -1,9 +1,15 @@
-import React from "react";
+import React, { Dispatch, SetStateAction } from "react";
 import { Actions } from "../IProps";
 interface IProps {
+    states: {
+        createTrigger: {
+            get: boolean;
+            set: Dispatch<SetStateAction<boolean>>;
+        };
+    };
     title?: string;
     description?: string;
     actions?: Actions;
 }
-declare const _default: React.MemoExoticComponent<({ title, description, actions }: IProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ states, title, description, actions }: IProps) => React.JSX.Element>;
 export default _default;

package/dist/components/data-display/table/header/Header.js

@@ -1,10 +1,10 @@
 import React, { memo } from "react";
 import ActionButtons from "./ActionButtons";
-const Header = ({ title, description, actions }) => {
+const Header = ({ states, title, description, actions }) => {
     return (React.createElement("div", { className: "header" },
         React.createElement("div", { className: "title" },
             React.createElement("h4", null, title),
             description && React.createElement("h5", null, description)),
-        actions && React.createElement(ActionButtons, { actions: actions })));
+        actions && React.createElement(ActionButtons, { states: states, actions: actions })));
 };
 export default memo(Header);

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

@@ -49,6 +49,8 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
     // states
     const [selectAll, setSelectAll] = useState(false);
     const [showSubitems, setShowSubitems] = useState({});
+    // states -> Action Buttons
+    const [createTrigger, setCreateTrigger] = useState(false);
     // states -> Search
     const [searchedText, setSearchedText] = useState(null);
     const [_searchedParams, setSearchedParams] = useState(null);
@@ -566,9 +568,23 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
         setCurrentPage(1);
         setTimeout(() => handleScroll(), 0);
     }, [selectedPerPage]);
+    useEffect(() => {
+        if (typeof selections !== "function" && config.validation) {
+            const updatedData = data.map((item) => {
+                if (!("trackByValue" in item) && trackBy) {
+                    return { ...item, trackByValue: trackBy(item) };
+                }
+                return item;
+            });
+            config.validation?.getChangeData?.(updatedData);
+        }
+    }, [createTrigger]);
     useEffect(() => {
         setIsMobile(window.innerWidth <= 768);
         window.addEventListener("resize", handleResize);
+        if (typeof selections !== "function" && config.validation) {
+            config.validation.getChangeData?.(data.map((d) => ({ ...d, trackByValue: trackBy?.(d) })) ?? []);
+        }
         return () => {
             window.removeEventListener("resize", handleResize);
         };
@@ -584,7 +600,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
         { value: FilterOperator.NotBlank, text: t("Table.Filters.Where.Input.Item.8.Text") },
     ];
     return (React.createElement("div", { ref: _tableWrapper, className: _tableClassName.map((c) => c).join(" ") },
-        (title || description || actions || React.Children.count(children) > 0) && (React.createElement(Header, { title: title, description: description, actions: actions })),
+        (title || description || actions || React.Children.count(children) > 0) && (React.createElement(Header, { states: { createTrigger: { get: createTrigger, set: setCreateTrigger } }, title: title, description: description, actions: actions })),
         React.createElement("div", { ref: _tableContent, className: "content", onScroll: handleScroll },
             React.createElement("table", { ref: _innerRef },
                 React.createElement("thead", null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.4.41",
+  "version": "0.4.42",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",