ar-design 0.4.40 → 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/dist/components/navigation/steps/IProps.d.ts

@@ -3,10 +3,14 @@ import { IChildren } from "../../../libs/types/IGlobalProps";
 interface IProps<TData extends object> extends IChildren {
     name: string;
     steps: StepProps[];
+    currentStep?: number;
     onChange: (currentStep: number) => void;
     validation?: {
         data: TData;
         rules: ValidationProperties<TData>[];
     };
+    config?: {
+        isAutomatic?: boolean;
+    };
 }
 export default IProps;

package/dist/components/navigation/steps/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import IProps from "./IProps";
 import "../../../assets/css/components/navigation/steps/styles.css";
-declare const Steps: <T extends object>({ children, name, steps, onChange, validation }: IProps<T>) => React.JSX.Element;
+declare const Steps: <T extends object>({ children, name, steps, currentStep, onChange, validation, config, }: IProps<T>) => React.JSX.Element;
 export default Steps;

package/dist/components/navigation/steps/index.js

@@ -5,11 +5,11 @@ import Typography from "../../data-display/typography";
 import Button from "../../form/button";
 import { useValidation } from "../../../libs/core/application/hooks";
 const { Title } = Typography;
-const Steps = function ({ children, name, steps = [], onChange, validation }) {
+const Steps = function ({ children, name, steps = [], currentStep, onChange, validation, config, }) {
     // states
-    const [currentStep, setCurrentStep] = useState(0);
+    const [_currentStep, setCurrentStep] = useState(0);
     // hooks
-    const { errors, onSubmit, setSubmit } = useValidation(validation?.data, validation?.rules, currentStep + 1);
+    const { errors, onSubmit, setSubmit } = useValidation(validation?.data, validation?.rules, _currentStep + 1);
     // methods
     const getStepIconStatus = (currentStep, index) => {
         if (currentStep < index)
@@ -20,17 +20,24 @@ const Steps = function ({ children, name, steps = [], onChange, validation }) {
     };
     // useEffects
     useEffect(() => {
+        setCurrentStep(currentStep ?? 0);
+    }, [currentStep]);
+    useEffect(() => {
+        if (config?.isAutomatic)
+            return;
         const key = `${window.location.pathname}::${name}`;
         const stored = sessionStorage.getItem(key);
-        setCurrentStep(stored !== null ? Number(stored) : 0);
-        onChange?.(stored !== null ? Number(stored) : 0);
+        setCurrentStep(stored !== null ? Number(stored) : (currentStep ?? 0));
+        onChange?.(stored !== null ? Number(stored) : (currentStep ?? 0));
     }, []);
     return (React.createElement("div", { className: "ar-steps" },
         React.createElement("div", { className: "steps" }, steps.length > 0 &&
             steps.map((step, index) => {
                 let itemIcon = ["item-icon"];
-                itemIcon.push(getStepIconStatus(currentStep, index));
+                itemIcon.push(getStepIconStatus(_currentStep, index));
                 return (React.createElement("div", { key: step.title || index, className: "item", onClick: () => {
+                        if (config?.isAutomatic)
+                            return;
                         if (validation) {
                             onSubmit((result) => {
                                 if (!result)
@@ -48,7 +55,7 @@ const Steps = function ({ children, name, steps = [], onChange, validation }) {
                         sessionStorage.setItem(key, String(index));
                     } },
                     React.createElement("div", { className: itemIcon.map((c) => c).join(" ") },
-                        React.createElement("span", { className: getStepIconStatus(currentStep, index) })),
+                        React.createElement("span", { className: getStepIconStatus(_currentStep, index) })),
                     React.createElement("div", { className: "item-informations" },
                         React.createElement("span", { className: "step" },
                             "STEP ",
@@ -58,7 +65,7 @@ const Steps = function ({ children, name, steps = [], onChange, validation }) {
         React.createElement("div", { className: "content" },
             steps.map((step, stepIndex) => {
                 return (React.createElement("div", { key: stepIndex }, React.Children.map(step.content, (child) => {
-                    if (React.isValidElement(child) && stepIndex === currentStep) {
+                    if (React.isValidElement(child) && stepIndex === _currentStep) {
                         return validation
                             ? React.cloneElement(child, {
                                 errors: errors,
@@ -68,28 +75,28 @@ const Steps = function ({ children, name, steps = [], onChange, validation }) {
                     return null;
                 })));
             }),
-            React.createElement("div", { className: "buttons" },
-                currentStep > 0 && (React.createElement(Button, { color: "blue", onClick: () => {
+            !config?.isAutomatic && (React.createElement("div", { className: "buttons" },
+                _currentStep > 0 && (React.createElement(Button, { color: "blue", onClick: () => {
                         setCurrentStep((prev) => prev - 1);
-                        onChange(currentStep - 1);
+                        onChange(_currentStep - 1);
                     } }, "Geri")),
                 children && children,
-                currentStep < steps.length - 1 && (React.createElement(Button, { color: "blue", onClick: () => {
+                _currentStep < steps.length - 1 && (React.createElement(Button, { color: "blue", onClick: () => {
                         if (validation) {
                             onSubmit((result) => {
                                 if (!result)
                                     return;
                                 setCurrentStep((prev) => prev + 1);
-                                onChange(currentStep + 1);
+                                onChange(_currentStep + 1);
                                 setSubmit(false);
                             });
                         }
                         else {
                             setCurrentStep((prev) => prev + 1);
-                            onChange(currentStep + 1);
+                            onChange(_currentStep + 1);
                         }
                         const key = `${window.location.pathname}::${name}`;
-                        sessionStorage.setItem(key, String(currentStep + 1));
-                    } }, "\u0130leri"))))));
+                        sessionStorage.setItem(key, String(_currentStep + 1));
+                    } }, "\u0130leri")))))));
 };
 export default Steps;

package/package.json

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