ar-design 0.4.39 → 0.4.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/data-display/dnd/index.js +1 -1
- package/dist/components/data-display/grid-system/index.d.ts +1 -1
- package/dist/components/data-display/syntax-highlighter/classes/Parser.js +9 -12
- package/dist/components/data-display/table/IProps.d.ts +1 -1
- package/dist/components/data-display/table/THeadCell.js +5 -1
- package/dist/components/data-display/table/body/Editable.d.ts +1 -1
- package/dist/components/data-display/table/body/Editable.js +7 -6
- package/dist/components/data-display/table/body/TBody.d.ts +1 -1
- package/dist/components/data-display/table/body/TBody.js +5 -1
- package/dist/components/data-display/table/index.d.ts +1 -1
- package/dist/components/data-display/table/index.js +16 -4
- package/dist/components/feedback/notification/index.js +5 -1
- package/dist/components/form/date-picker/index.js +5 -1
- package/dist/components/form/select/index.js +7 -3
- package/dist/components/navigation/steps/IProps.d.ts +4 -0
- package/dist/components/navigation/steps/index.d.ts +1 -1
- package/dist/components/navigation/steps/index.js +23 -16
- package/dist/libs/core/application/hooks/index.d.ts +6 -6
- package/dist/libs/types/index.d.ts +2 -2
- package/package.json +6 -6
|
@@ -6,7 +6,7 @@ let _fromColumn = undefined;
|
|
|
6
6
|
const DnD = function ({ data, renderItem, columnKey, onChange, confing = { isMoveIcon: true } }) {
|
|
7
7
|
// refs
|
|
8
8
|
const _arDnD = useRef(null);
|
|
9
|
-
const _dragItem = useRef();
|
|
9
|
+
const _dragItem = useRef(null);
|
|
10
10
|
// useEffects
|
|
11
11
|
useEffect(() => {
|
|
12
12
|
if (!_arDnD.current || data.length === 0)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import "../../../assets/css/components/data-display/grid-system/styles.css";
|
|
2
2
|
declare const Grid: {
|
|
3
3
|
Box: import("react").FC<{
|
|
4
|
-
children:
|
|
4
|
+
children: React.ReactNode;
|
|
5
5
|
direction?: "flex-start" | "center" | "flex-end";
|
|
6
6
|
}>;
|
|
7
7
|
Row: import("react").FC<import("./row/IProps").default>;
|
|
@@ -11,12 +11,13 @@ class Parser {
|
|
|
11
11
|
JsxToString = (child, subChilde = false, indentLevel = 0) => {
|
|
12
12
|
if (!React.isValidElement(child))
|
|
13
13
|
return;
|
|
14
|
+
const element = child;
|
|
14
15
|
let componentName = "";
|
|
15
|
-
let componentContent =
|
|
16
|
-
if (typeof
|
|
17
|
-
componentName =
|
|
16
|
+
let componentContent = element.props.children;
|
|
17
|
+
if (typeof element.type === "string")
|
|
18
|
+
componentName = element.type;
|
|
18
19
|
else {
|
|
19
|
-
const componentType =
|
|
20
|
+
const componentType = element.type;
|
|
20
21
|
componentName = componentType.displayName || componentType.name || "Unknown";
|
|
21
22
|
}
|
|
22
23
|
// Indent seviyesi için boşlukları ekle.
|
|
@@ -24,11 +25,9 @@ class Parser {
|
|
|
24
25
|
// Eğer `br` elementi ise işlemi sonlandır
|
|
25
26
|
if (componentName === "br")
|
|
26
27
|
return;
|
|
27
|
-
const attributes = Object.keys(
|
|
28
|
+
const attributes = Object.keys(element.props).filter((key) => key !== "children");
|
|
28
29
|
const attributesLength = attributes.length;
|
|
29
|
-
const attributesList = attributes
|
|
30
|
-
.map((key) => this.FormatAttributeValue(key, child.props[key]))
|
|
31
|
-
.join(" ");
|
|
30
|
+
const attributesList = attributes.map((key) => this.FormatAttributeValue(key, element.props[key])).join(" ");
|
|
32
31
|
const formattedTag = componentName[0]
|
|
33
32
|
? componentName[0].toUpperCase() === componentName[0]
|
|
34
33
|
? `[react-tag]${componentName}[/react-tag]`
|
|
@@ -53,7 +52,7 @@ class Parser {
|
|
|
53
52
|
// componentContent =
|
|
54
53
|
// attributesLength >= this._lineBreakSpaces ? `\n ${componentContent}\n` : componentContent;
|
|
55
54
|
const renderElement = componentContent != undefined
|
|
56
|
-
? `${indent}[open]<[/open][tag]${formattedTag}[/tag]${formattedAttributes}[close]>[/close]${componentContent}${typeof
|
|
55
|
+
? `${indent}[open]<[/open][tag]${formattedTag}[/tag]${formattedAttributes}[close]>[/close]${componentContent}${typeof element.props["children"] === "object" ? indent : ""}[open]</[/open][tag]${formattedTag}[/tag][close]>[/close]`
|
|
57
56
|
: `${indent}[open]<[/open][tag]${formattedTag}[/tag]${formattedAttributes} [close]/>[/close]`;
|
|
58
57
|
!subChilde && this._setElements((prevElements) => [...prevElements, renderElement]);
|
|
59
58
|
return renderElement;
|
|
@@ -68,9 +67,7 @@ class Parser {
|
|
|
68
67
|
.map(([key, value]) => `[attribute-key]${key}[/attribute-key][colon]:[/colon] ${this.HandleEntries(value)}`)
|
|
69
68
|
.join(", ")} [/curly-bracket]`;
|
|
70
69
|
}
|
|
71
|
-
return typeof propValue === "number"
|
|
72
|
-
? `[number]${propValue}[/number]`
|
|
73
|
-
: `[string]${propValue}[/string]`;
|
|
70
|
+
return typeof propValue === "number" ? `[number]${propValue}[/number]` : `[string]${propValue}[/string]`;
|
|
74
71
|
};
|
|
75
72
|
FormatAttributeValue = (key, value) => {
|
|
76
73
|
let result = "";
|
|
@@ -82,7 +82,7 @@ interface IProps<T> extends IChildren {
|
|
|
82
82
|
previousSelections?: T[];
|
|
83
83
|
sortedParams?: (params: Sort<T>[], query: string) => void;
|
|
84
84
|
searchedParams?: (params: SearchedParam | null, query: string, operator: FilterOperator) => void;
|
|
85
|
-
onEditable?: (item: T, trackByValue: string) => void;
|
|
85
|
+
onEditable?: (item: T, trackByValue: string, currentKey?: keyof T | null) => void;
|
|
86
86
|
onDnD?: (item: T[]) => void;
|
|
87
87
|
pagination?: {
|
|
88
88
|
totalRecords: number;
|
|
@@ -30,7 +30,11 @@ const MemoizedTHeadCell = function ({ refs, states, methods, columns, config, })
|
|
|
30
30
|
_direction === "asc" && React.createElement(ARIcon, { icon: "ArrowUp" }),
|
|
31
31
|
_direction === "desc" && React.createElement(ARIcon, { icon: "ArrowDown" }))),
|
|
32
32
|
c.title),
|
|
33
|
-
config.isProperties && isProperties && (React.createElement("span", { ref: (element) =>
|
|
33
|
+
config.isProperties && isProperties && (React.createElement("span", { ref: (element) => {
|
|
34
|
+
if (!element)
|
|
35
|
+
return;
|
|
36
|
+
refs.propertiesButton.current[cIndex] = element;
|
|
37
|
+
}, className: "properties-field", "data-properties-button": "true", onClick: (event) => {
|
|
34
38
|
event.preventDefault();
|
|
35
39
|
event.stopPropagation();
|
|
36
40
|
const rect = event.currentTarget.getBoundingClientRect();
|
|
@@ -5,7 +5,7 @@ interface IProps<T> {
|
|
|
5
5
|
c: TableColumnType<T>;
|
|
6
6
|
item: T;
|
|
7
7
|
trackByValue: string;
|
|
8
|
-
onEditable: (item: T, trackByValue: string) => void;
|
|
8
|
+
onEditable: (item: T, trackByValue: string, currentKey?: keyof T | null) => void;
|
|
9
9
|
validation?: Errors<T>;
|
|
10
10
|
config: Config<T>;
|
|
11
11
|
}
|
|
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
|
|
|
3
3
|
import Input from "../../../form/input";
|
|
4
4
|
import DatePicker from "../../../form/date-picker";
|
|
5
5
|
import Select from "../../../form/select";
|
|
6
|
+
import { ExtractKey } from "../Helpers";
|
|
6
7
|
const Editable = function ({ c, item, trackByValue, onEditable, validation, config }) {
|
|
7
8
|
// variables
|
|
8
9
|
const key = c.key;
|
|
@@ -22,32 +23,32 @@ const Editable = function ({ c, item, trackByValue, onEditable, validation, conf
|
|
|
22
23
|
return (React.createElement(Input, { variant: "borderless", value: _value, onChange: (event) => {
|
|
23
24
|
const { value } = event.target;
|
|
24
25
|
setValue(value);
|
|
25
|
-
onEditable({ ...item, [key]: c.editable?.type === "number" ? Number(value) : value }, trackByValue);
|
|
26
|
+
onEditable({ ...item, [key]: c.editable?.type === "number" ? Number(value) : value }, trackByValue, ExtractKey(c.key));
|
|
26
27
|
}, validation: { text: _vText }, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
|
|
27
28
|
case "decimal":
|
|
28
29
|
return (React.createElement(Input.Decimal, { variant: "borderless", name: c.key, value: _value, onChange: (event) => {
|
|
29
30
|
const { value } = event.target;
|
|
30
31
|
setValue(value);
|
|
31
|
-
onEditable({ ...item, [key]: value }, trackByValue);
|
|
32
|
+
onEditable({ ...item, [key]: value }, trackByValue, ExtractKey(c.key));
|
|
32
33
|
}, validation: { text: _vText }, locale: config.locale, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
|
|
33
34
|
case "input-formatted-decimal":
|
|
34
35
|
return (React.createElement(Input.FormattedDecimal, { variant: "borderless", name: c.key, value: _value, onChange: (event) => {
|
|
35
36
|
const { value } = event.target;
|
|
36
37
|
setValue(value);
|
|
37
|
-
onEditable({ ...item, [key]: value }, trackByValue);
|
|
38
|
+
onEditable({ ...item, [key]: value }, trackByValue, ExtractKey(c.key));
|
|
38
39
|
}, validation: { text: _vText }, locale: config.locale, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
|
|
39
40
|
case "date-picker":
|
|
40
41
|
return (React.createElement(DatePicker, { variant: "borderless", value: _value, onChange: (value) => {
|
|
41
42
|
setValue(value);
|
|
42
|
-
onEditable({ ...item, [key]: value }, trackByValue);
|
|
43
|
+
onEditable({ ...item, [key]: value }, trackByValue, ExtractKey(c.key));
|
|
43
44
|
}, validation: { text: _vText }, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
|
|
44
45
|
case "single-select":
|
|
45
46
|
return (React.createElement(Select, { variant: "borderless", value: selectItem, options: c.editable.options, onClick: async () => await c.editable?.method?.(), onChange: (option) => {
|
|
46
|
-
onEditable({ ...item, [key]: option?.value }, trackByValue);
|
|
47
|
+
onEditable({ ...item, [key]: option?.value }, trackByValue, ExtractKey(c.key));
|
|
47
48
|
}, validation: { text: _vText }, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
|
|
48
49
|
case "multiple-select":
|
|
49
50
|
return (React.createElement(Select, { variant: "borderless", value: selectItems, options: c.editable.options, onClick: async () => await c.editable?.method?.(), onChange: (options) => {
|
|
50
|
-
onEditable({ ...item, [key]: options.map((option) => option.value) }, trackByValue);
|
|
51
|
+
onEditable({ ...item, [key]: options.map((option) => option.value) }, trackByValue, ExtractKey(c.key));
|
|
51
52
|
}, validation: { text: _vText }, multiple: true, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
|
|
52
53
|
default:
|
|
53
54
|
return null;
|
|
@@ -26,7 +26,7 @@ interface IProps<T> {
|
|
|
26
26
|
trackBy?: (item: T) => string;
|
|
27
27
|
selections?: (selectionItems: T[]) => void;
|
|
28
28
|
onDnD?: (item: T[]) => void;
|
|
29
|
-
onEditable?: (item: T, trackByValue: string) => void;
|
|
29
|
+
onEditable?: (item: T, trackByValue: string, currentKey?: keyof T | null) => void;
|
|
30
30
|
rowBackgroundColor?: (item: T) => string;
|
|
31
31
|
};
|
|
32
32
|
config: Config<T>;
|
|
@@ -26,7 +26,11 @@ function TBody({ data, columns, refs, methods, states, config }) {
|
|
|
26
26
|
methods.selections && (React.createElement("td", { ref: (element) => {
|
|
27
27
|
_tHeadTH.current[index] = element;
|
|
28
28
|
}, className: "flex justify-content-center sticky-left", style: { display: "flex", alignItems: "center", height: rowHeights[index] ?? 0 }, "data-sticky-position": "left" },
|
|
29
|
-
React.createElement(Checkbox, { key: Date.now(), ref: (element) =>
|
|
29
|
+
React.createElement(Checkbox, { key: Date.now(), ref: (element) => {
|
|
30
|
+
if (!element)
|
|
31
|
+
return;
|
|
32
|
+
refs._checkboxItems.current[index] = element;
|
|
33
|
+
}, variant: "filled", color: "green", checked: refs._selectionItems.current.some((selectionItem) => methods.trackBy?.(selectionItem) === methods.trackBy?.(item)), onChange: (event) => {
|
|
30
34
|
const key = methods.trackBy?.(item);
|
|
31
35
|
if (event.target.checked) {
|
|
32
36
|
if (!refs._selectionItems.current.some((_item) => methods.trackBy?.(_item) === key)) {
|
|
@@ -27,7 +27,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
|
|
|
27
27
|
const _tableWrapper = useRef(null);
|
|
28
28
|
const _tableContent = useRef(null);
|
|
29
29
|
const _tBody = useRef(null);
|
|
30
|
-
const _dragItem = useRef();
|
|
30
|
+
const _dragItem = useRef(null);
|
|
31
31
|
const _checkboxItems = useRef([]);
|
|
32
32
|
const _filterCheckboxItems = useRef([]);
|
|
33
33
|
// refs -> Search
|
|
@@ -241,7 +241,11 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
|
|
|
241
241
|
?.map((filter, fIndex) => {
|
|
242
242
|
const name = typeof c.key !== "object" ? String(c.key) : String(c.key.field);
|
|
243
243
|
return (React.createElement("div", null,
|
|
244
|
-
React.createElement(Checkbox, { ref: (element) =>
|
|
244
|
+
React.createElement(Checkbox, { ref: (element) => {
|
|
245
|
+
if (!element)
|
|
246
|
+
return;
|
|
247
|
+
_filterCheckboxItems.current[fIndex] = element;
|
|
248
|
+
}, variant: "filled", color: "green", label: filter.text, name: name, value: filter.value, checked: Array.isArray(checkboxSelectedParams?.[name]) &&
|
|
245
249
|
checkboxSelectedParams?.[name]?.some((f) => String(f.value) === String(filter.value)), onChange: async (event) => await handleCheckboxChange(event) })));
|
|
246
250
|
}))));
|
|
247
251
|
default:
|
|
@@ -629,10 +633,18 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
|
|
|
629
633
|
}) }, c.key && (React.createElement("div", { className: "filter-field" }, c.filterDataType === "date" ? (React.createElement(DatePicker, { value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onClick: () => {
|
|
630
634
|
handleScroll();
|
|
631
635
|
}, onChange: (value) => handleSearch(key, value, c.filterDataType), style: { height: "2rem" }, config: { isClock: true, isFooterButton: true, locale: config.locale }, disabled: !c.key || !!c.filters })) : (React.createElement(React.Fragment, null,
|
|
632
|
-
React.createElement(Input, { ref: (element) =>
|
|
636
|
+
React.createElement(Input, { ref: (element) => {
|
|
637
|
+
if (!element)
|
|
638
|
+
return;
|
|
639
|
+
_searchTextInputs.current[cIndex] = element;
|
|
640
|
+
}, variant: c.key && !c.filters ? "outlined" : "filled", style: { height: "2rem" }, value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onClick: () => {
|
|
633
641
|
handleScroll();
|
|
634
642
|
}, onInput: (event) => handleSearch(event.currentTarget.name, event.currentTarget.value), disabled: !c.key || !!c.filters }),
|
|
635
|
-
React.createElement("span", { ref: (element) =>
|
|
643
|
+
React.createElement("span", { ref: (element) => {
|
|
644
|
+
if (!element)
|
|
645
|
+
return;
|
|
646
|
+
_filterButton.current[cIndex] = element;
|
|
647
|
+
}, onClick: (event) => {
|
|
636
648
|
event.preventDefault();
|
|
637
649
|
event.stopPropagation();
|
|
638
650
|
// Temizlik...
|
|
@@ -66,7 +66,11 @@ const Notification = ({ title, message, status, direction = "bottom-left", trigg
|
|
|
66
66
|
};
|
|
67
67
|
return items.map((item, index) => {
|
|
68
68
|
const bottom = getBottomPosition(index);
|
|
69
|
-
return (React.createElement("div", { key: item.id, ref: (element) =>
|
|
69
|
+
return (React.createElement("div", { key: item.id, ref: (element) => {
|
|
70
|
+
if (!element)
|
|
71
|
+
return;
|
|
72
|
+
_notificationItems.current[index] = element;
|
|
73
|
+
}, className: "ar-notification-item", style: items.length > 5
|
|
70
74
|
? {
|
|
71
75
|
backgroundColor: `rgba(var(--white-rgb), ${index === items.length - 1 ? 1 : 0.1})`,
|
|
72
76
|
backdropFilter: "blur(10px)",
|
|
@@ -193,7 +193,11 @@ const DatePicker = ({ variant, color, onChange, config, validation, ...attribute
|
|
|
193
193
|
}, [dateChanged, calendarIsOpen]);
|
|
194
194
|
useEffect(() => {
|
|
195
195
|
const generateList = (count, current, setFunc) => {
|
|
196
|
-
const items = Array.from({ length: count }, (_, i) => (React.createElement("li", { ref: (element) =>
|
|
196
|
+
const items = Array.from({ length: count }, (_, i) => (React.createElement("li", { ref: (element) => {
|
|
197
|
+
if (!element)
|
|
198
|
+
return;
|
|
199
|
+
count === 24 ? (_hoursLiElements.current[i] = element) : (_minutesLiElements.current[i] = element);
|
|
200
|
+
}, key: i, ...(current === i ? { className: "selection-time" } : {}), onClick: () => {
|
|
197
201
|
if (count === 24) {
|
|
198
202
|
setTimeChanged((prev) => !prev);
|
|
199
203
|
_hours.current = i;
|
|
@@ -17,7 +17,7 @@ const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }
|
|
|
17
17
|
const _optionItems = useRef([]);
|
|
18
18
|
const _searchField = useRef(null);
|
|
19
19
|
// const _searchTimeOut = useRef<NodeJS.Timeout | null>(null);
|
|
20
|
-
let _otoFocus = useRef().current;
|
|
20
|
+
let _otoFocus = useRef(null).current;
|
|
21
21
|
let _navigationIndex = useRef(0);
|
|
22
22
|
// states
|
|
23
23
|
const [optionsOpen, setOptionsOpen] = useState(false);
|
|
@@ -203,7 +203,7 @@ const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }
|
|
|
203
203
|
}
|
|
204
204
|
}
|
|
205
205
|
return () => {
|
|
206
|
-
clearTimeout(_otoFocus);
|
|
206
|
+
_otoFocus && clearTimeout(_otoFocus);
|
|
207
207
|
window.removeEventListener("blur", () => setOptionsOpen(false));
|
|
208
208
|
document.removeEventListener("click", handleClickOutSide);
|
|
209
209
|
document.removeEventListener("keydown", handleKeys);
|
|
@@ -323,7 +323,11 @@ const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }
|
|
|
323
323
|
onCreate && !isSearchTextEqual && searchText.length > 0 && React.createElement("li", null, createField()),
|
|
324
324
|
filteredOptions.map((option, index) => {
|
|
325
325
|
const isItem = multiple && value.some((_value) => _value.value === option.value);
|
|
326
|
-
return (React.createElement("li", { key: index, ref: (element) =>
|
|
326
|
+
return (React.createElement("li", { key: index, ref: (element) => {
|
|
327
|
+
if (!element)
|
|
328
|
+
return;
|
|
329
|
+
_optionItems.current[index] = element;
|
|
330
|
+
}, className: option === value ? "selectedItem" : "", onClick: (event) => {
|
|
327
331
|
event.stopPropagation();
|
|
328
332
|
handleItemSelected(option);
|
|
329
333
|
} },
|
|
@@ -3,10 +3,14 @@ import { IChildren } from "../../../libs/types/IGlobalProps";
|
|
|
3
3
|
interface IProps<TData extends object> extends IChildren {
|
|
4
4
|
name: string;
|
|
5
5
|
steps: StepProps[];
|
|
6
|
+
currentStep?: number;
|
|
6
7
|
onChange: (currentStep: number) => void;
|
|
7
8
|
validation?: {
|
|
8
9
|
data: TData;
|
|
9
10
|
rules: ValidationProperties<TData>[];
|
|
10
11
|
};
|
|
12
|
+
config?: {
|
|
13
|
+
isAutomatic?: boolean;
|
|
14
|
+
};
|
|
11
15
|
}
|
|
12
16
|
export default IProps;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import IProps from "./IProps";
|
|
3
3
|
import "../../../assets/css/components/navigation/steps/styles.css";
|
|
4
|
-
declare const Steps: <T extends object>({ children, name, steps, onChange, validation }: IProps<T>) => React.JSX.Element;
|
|
4
|
+
declare const Steps: <T extends object>({ children, name, steps, currentStep, onChange, validation, config, }: IProps<T>) => React.JSX.Element;
|
|
5
5
|
export default Steps;
|
|
@@ -5,11 +5,11 @@ import Typography from "../../data-display/typography";
|
|
|
5
5
|
import Button from "../../form/button";
|
|
6
6
|
import { useValidation } from "../../../libs/core/application/hooks";
|
|
7
7
|
const { Title } = Typography;
|
|
8
|
-
const Steps = function ({ children, name, steps = [], onChange, validation }) {
|
|
8
|
+
const Steps = function ({ children, name, steps = [], currentStep, onChange, validation, config, }) {
|
|
9
9
|
// states
|
|
10
|
-
const [
|
|
10
|
+
const [_currentStep, setCurrentStep] = useState(0);
|
|
11
11
|
// hooks
|
|
12
|
-
const { errors, onSubmit, setSubmit } = useValidation(validation?.data, validation?.rules,
|
|
12
|
+
const { errors, onSubmit, setSubmit } = useValidation(validation?.data, validation?.rules, _currentStep + 1);
|
|
13
13
|
// methods
|
|
14
14
|
const getStepIconStatus = (currentStep, index) => {
|
|
15
15
|
if (currentStep < index)
|
|
@@ -20,17 +20,24 @@ const Steps = function ({ children, name, steps = [], onChange, validation }) {
|
|
|
20
20
|
};
|
|
21
21
|
// useEffects
|
|
22
22
|
useEffect(() => {
|
|
23
|
+
setCurrentStep(currentStep ?? 0);
|
|
24
|
+
}, [currentStep]);
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
if (config?.isAutomatic)
|
|
27
|
+
return;
|
|
23
28
|
const key = `${window.location.pathname}::${name}`;
|
|
24
29
|
const stored = sessionStorage.getItem(key);
|
|
25
|
-
setCurrentStep(stored !== null ? Number(stored) : 0);
|
|
26
|
-
onChange?.(stored !== null ? Number(stored) : 0);
|
|
30
|
+
setCurrentStep(stored !== null ? Number(stored) : (currentStep ?? 0));
|
|
31
|
+
onChange?.(stored !== null ? Number(stored) : (currentStep ?? 0));
|
|
27
32
|
}, []);
|
|
28
33
|
return (React.createElement("div", { className: "ar-steps" },
|
|
29
34
|
React.createElement("div", { className: "steps" }, steps.length > 0 &&
|
|
30
35
|
steps.map((step, index) => {
|
|
31
36
|
let itemIcon = ["item-icon"];
|
|
32
|
-
itemIcon.push(getStepIconStatus(
|
|
37
|
+
itemIcon.push(getStepIconStatus(_currentStep, index));
|
|
33
38
|
return (React.createElement("div", { key: step.title || index, className: "item", onClick: () => {
|
|
39
|
+
if (config?.isAutomatic)
|
|
40
|
+
return;
|
|
34
41
|
if (validation) {
|
|
35
42
|
onSubmit((result) => {
|
|
36
43
|
if (!result)
|
|
@@ -48,7 +55,7 @@ const Steps = function ({ children, name, steps = [], onChange, validation }) {
|
|
|
48
55
|
sessionStorage.setItem(key, String(index));
|
|
49
56
|
} },
|
|
50
57
|
React.createElement("div", { className: itemIcon.map((c) => c).join(" ") },
|
|
51
|
-
React.createElement("span", { className: getStepIconStatus(
|
|
58
|
+
React.createElement("span", { className: getStepIconStatus(_currentStep, index) })),
|
|
52
59
|
React.createElement("div", { className: "item-informations" },
|
|
53
60
|
React.createElement("span", { className: "step" },
|
|
54
61
|
"STEP ",
|
|
@@ -58,7 +65,7 @@ const Steps = function ({ children, name, steps = [], onChange, validation }) {
|
|
|
58
65
|
React.createElement("div", { className: "content" },
|
|
59
66
|
steps.map((step, stepIndex) => {
|
|
60
67
|
return (React.createElement("div", { key: stepIndex }, React.Children.map(step.content, (child) => {
|
|
61
|
-
if (React.isValidElement(child) && stepIndex ===
|
|
68
|
+
if (React.isValidElement(child) && stepIndex === _currentStep) {
|
|
62
69
|
return validation
|
|
63
70
|
? React.cloneElement(child, {
|
|
64
71
|
errors: errors,
|
|
@@ -68,28 +75,28 @@ const Steps = function ({ children, name, steps = [], onChange, validation }) {
|
|
|
68
75
|
return null;
|
|
69
76
|
})));
|
|
70
77
|
}),
|
|
71
|
-
React.createElement("div", { className: "buttons" },
|
|
72
|
-
|
|
78
|
+
!config?.isAutomatic && (React.createElement("div", { className: "buttons" },
|
|
79
|
+
_currentStep > 0 && (React.createElement(Button, { color: "blue", onClick: () => {
|
|
73
80
|
setCurrentStep((prev) => prev - 1);
|
|
74
|
-
onChange(
|
|
81
|
+
onChange(_currentStep - 1);
|
|
75
82
|
} }, "Geri")),
|
|
76
83
|
children && children,
|
|
77
|
-
|
|
84
|
+
_currentStep < steps.length - 1 && (React.createElement(Button, { color: "blue", onClick: () => {
|
|
78
85
|
if (validation) {
|
|
79
86
|
onSubmit((result) => {
|
|
80
87
|
if (!result)
|
|
81
88
|
return;
|
|
82
89
|
setCurrentStep((prev) => prev + 1);
|
|
83
|
-
onChange(
|
|
90
|
+
onChange(_currentStep + 1);
|
|
84
91
|
setSubmit(false);
|
|
85
92
|
});
|
|
86
93
|
}
|
|
87
94
|
else {
|
|
88
95
|
setCurrentStep((prev) => prev + 1);
|
|
89
|
-
onChange(
|
|
96
|
+
onChange(_currentStep + 1);
|
|
90
97
|
}
|
|
91
98
|
const key = `${window.location.pathname}::${name}`;
|
|
92
|
-
sessionStorage.setItem(key, String(
|
|
93
|
-
} }, "\u0130leri"))))));
|
|
99
|
+
sessionStorage.setItem(key, String(_currentStep + 1));
|
|
100
|
+
} }, "\u0130leri")))))));
|
|
94
101
|
};
|
|
95
102
|
export default Steps;
|
|
@@ -6,26 +6,26 @@ declare const useLayout: () => {
|
|
|
6
6
|
layout: {
|
|
7
7
|
sider: {
|
|
8
8
|
left: {
|
|
9
|
-
element:
|
|
9
|
+
element: React.ReactNode | null;
|
|
10
10
|
active: boolean;
|
|
11
11
|
};
|
|
12
12
|
right: {
|
|
13
|
-
element:
|
|
13
|
+
element: React.ReactNode | null;
|
|
14
14
|
active: boolean;
|
|
15
15
|
};
|
|
16
16
|
};
|
|
17
17
|
};
|
|
18
18
|
perPage: number;
|
|
19
19
|
};
|
|
20
|
-
setConfig:
|
|
20
|
+
setConfig: React.Dispatch<React.SetStateAction<{
|
|
21
21
|
layout: {
|
|
22
22
|
sider: {
|
|
23
23
|
left: {
|
|
24
|
-
element:
|
|
24
|
+
element: React.ReactNode | null;
|
|
25
25
|
active: boolean;
|
|
26
26
|
};
|
|
27
27
|
right: {
|
|
28
|
-
element:
|
|
28
|
+
element: React.ReactNode | null;
|
|
29
29
|
active: boolean;
|
|
30
30
|
};
|
|
31
31
|
};
|
|
@@ -35,7 +35,7 @@ declare const useLayout: () => {
|
|
|
35
35
|
};
|
|
36
36
|
declare const useLoading: () => {
|
|
37
37
|
isLoading: boolean;
|
|
38
|
-
setIsLoading:
|
|
38
|
+
setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
|
|
39
39
|
};
|
|
40
40
|
declare const useLanguage: () => string | undefined;
|
|
41
41
|
export { useLayout, useLoading, useLanguage, useTranslation, useNotification, useValidation };
|
|
@@ -27,7 +27,7 @@ export type MenuItemVariants = "vertical" | "horizontal";
|
|
|
27
27
|
export type MenuItemType = "group" | "divider";
|
|
28
28
|
export type FilterDataType = "string" | "number" | "date" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
|
|
29
29
|
export type TableColumnType<T> = {
|
|
30
|
-
title
|
|
30
|
+
title?: string;
|
|
31
31
|
key?: keyof T | {
|
|
32
32
|
field: keyof T;
|
|
33
33
|
nestedKey: string;
|
|
@@ -42,7 +42,7 @@ export type TableColumnType<T> = {
|
|
|
42
42
|
where?: (item: T) => boolean;
|
|
43
43
|
};
|
|
44
44
|
config?: {
|
|
45
|
-
width?: number;
|
|
45
|
+
width?: number | "auto" | "fit-content" | "max-content" | "min-content";
|
|
46
46
|
alignContent?: "left" | "center" | "right";
|
|
47
47
|
sticky?: "left" | "right";
|
|
48
48
|
textWrap?: "wrap" | "nowrap";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ar-design",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.41",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -42,11 +42,11 @@
|
|
|
42
42
|
"react-dom": ">=18.0.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@types/node": "^
|
|
46
|
-
"@types/react": "^
|
|
47
|
-
"@types/react-dom": "^
|
|
45
|
+
"@types/node": "^25.5.2",
|
|
46
|
+
"@types/react": "^19.2.14",
|
|
47
|
+
"@types/react-dom": "^19.2.3",
|
|
48
48
|
"ts-node": "^10.9.2",
|
|
49
|
-
"tslib": "^2.
|
|
50
|
-
"typescript": "^
|
|
49
|
+
"tslib": "^2.8.1",
|
|
50
|
+
"typescript": "^6.0.2"
|
|
51
51
|
}
|
|
52
52
|
}
|