ar-design 0.4.31 → 0.4.33
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/assets/css/components/navigation/menu/styles.css +19 -1
- package/dist/components/data-display/table/FilterPopup.js +1 -0
- package/dist/components/data-display/table/PropertiesPopup.d.ts +6 -2
- package/dist/components/data-display/table/PropertiesPopup.js +24 -17
- package/dist/components/data-display/table/THeadCell.d.ts +4 -1
- package/dist/components/data-display/table/THeadCell.js +4 -2
- package/dist/components/data-display/table/index.js +27 -30
- package/dist/libs/core/application/hooks/useTranslation.d.ts +2 -1
- package/dist/libs/core/application/hooks/useTranslation.js +7 -5
- package/dist/libs/core/application/locales/table/ITableLocale.d.ts +17 -0
- package/dist/libs/core/application/locales/table/ITableLocale.js +1 -0
- package/dist/libs/core/application/locales/table/en.d.ts +3 -0
- package/dist/libs/core/application/locales/table/en.js +20 -0
- package/dist/libs/core/application/locales/table/tr.d.ts +3 -0
- package/dist/libs/core/application/locales/table/tr.js +20 -0
- package/dist/libs/infrastructure/shared/DATE.d.ts +2 -2
- package/dist/libs/infrastructure/shared/DATE.js +4 -2
- package/package.json +1 -1
|
@@ -6,12 +6,14 @@
|
|
|
6
6
|
> ul {
|
|
7
7
|
display: flex;
|
|
8
8
|
flex-direction: column;
|
|
9
|
+
gap: 1rem;
|
|
9
10
|
padding: 0;
|
|
10
11
|
margin: 0;
|
|
11
12
|
list-style: none;
|
|
12
13
|
|
|
13
14
|
li {
|
|
14
15
|
list-style: none;
|
|
16
|
+
height: 2rem;
|
|
15
17
|
|
|
16
18
|
> ul.submenu {
|
|
17
19
|
display: grid;
|
|
@@ -19,7 +21,10 @@
|
|
|
19
21
|
margin-left: 1.5rem;
|
|
20
22
|
opacity: 0;
|
|
21
23
|
transform: translateY(-4px);
|
|
22
|
-
transition:
|
|
24
|
+
transition:
|
|
25
|
+
grid-template-rows 250ms ease,
|
|
26
|
+
opacity 200ms ease,
|
|
27
|
+
transform 200ms ease;
|
|
23
28
|
overflow: hidden;
|
|
24
29
|
|
|
25
30
|
> .submenu-inner {
|
|
@@ -40,6 +45,8 @@
|
|
|
40
45
|
display: flex;
|
|
41
46
|
align-items: center;
|
|
42
47
|
gap: 0.5rem;
|
|
48
|
+
width: 100%;
|
|
49
|
+
height: inherit;
|
|
43
50
|
padding: 0.3rem;
|
|
44
51
|
white-space: nowrap;
|
|
45
52
|
cursor: pointer;
|
|
@@ -85,6 +92,17 @@
|
|
|
85
92
|
}
|
|
86
93
|
}
|
|
87
94
|
|
|
95
|
+
> .item {
|
|
96
|
+
width: 100%;
|
|
97
|
+
height: inherit;
|
|
98
|
+
|
|
99
|
+
> * {
|
|
100
|
+
display: flex;
|
|
101
|
+
align-items: center;
|
|
102
|
+
height: inherit;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
88
106
|
> .angel-down {
|
|
89
107
|
position: absolute;
|
|
90
108
|
right: 0.5rem;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { Dispatch, MutableRefObject, SetStateAction } from "react";
|
|
2
2
|
import { TableColumnType } from "../../../libs/types";
|
|
3
|
-
import { Sort } from "./IProps";
|
|
3
|
+
import { Config, Sort } from "./IProps";
|
|
4
4
|
interface IProps<T> {
|
|
5
5
|
refs: {
|
|
6
6
|
tableContent: MutableRefObject<HTMLDivElement | null>;
|
|
@@ -17,11 +17,15 @@ interface IProps<T> {
|
|
|
17
17
|
currentColumn: TableColumnType<T> | null;
|
|
18
18
|
};
|
|
19
19
|
};
|
|
20
|
+
methods: {
|
|
21
|
+
handleScroll: () => void;
|
|
22
|
+
};
|
|
20
23
|
coordinate: {
|
|
21
24
|
x: number;
|
|
22
25
|
y: number;
|
|
23
26
|
};
|
|
27
|
+
config: Config<T>;
|
|
24
28
|
}
|
|
25
|
-
declare function PropertiesPopup<T extends object>({ refs, states, coordinate }: IProps<T>): false | React.ReactPortal;
|
|
29
|
+
declare function PropertiesPopup<T extends object>({ refs, states, methods, coordinate, config }: IProps<T>): false | React.ReactPortal;
|
|
26
30
|
declare const _default: typeof PropertiesPopup;
|
|
27
31
|
export default _default;
|
|
@@ -1,21 +1,22 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import React, { memo,
|
|
2
|
+
import React, { memo, useEffect, useMemo, useRef } from "react";
|
|
3
3
|
import ReactDOM from "react-dom";
|
|
4
4
|
import { ARIcon } from "../../icons";
|
|
5
5
|
import { ExtractKey } from "./Helpers";
|
|
6
|
-
|
|
6
|
+
import { useTranslation } from "../../../libs/core/application/hooks";
|
|
7
|
+
function PropertiesPopup({ refs, states, methods, coordinate, config }) {
|
|
7
8
|
// refs
|
|
8
9
|
const _arTablePropertiesPopup = useRef(null);
|
|
10
|
+
// hooks
|
|
11
|
+
const { t } = useTranslation(String(config.locale ?? "tr"));
|
|
9
12
|
// methods
|
|
10
|
-
const handleClickOutSide =
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
};
|
|
18
|
-
}, []);
|
|
13
|
+
const handleClickOutSide = (event) => {
|
|
14
|
+
const target = event.target;
|
|
15
|
+
const clickedInsidePopup = _arTablePropertiesPopup.current && _arTablePropertiesPopup.current.contains(target);
|
|
16
|
+
const isOneOfButtons = target.closest('[data-properties-button="true"]');
|
|
17
|
+
if (!clickedInsidePopup && !isOneOfButtons)
|
|
18
|
+
handleClose();
|
|
19
|
+
};
|
|
19
20
|
const handleSort = useMemo(() => {
|
|
20
21
|
return (columnKey, direction) => {
|
|
21
22
|
if (!columnKey)
|
|
@@ -31,10 +32,16 @@ function PropertiesPopup({ refs, states, coordinate }) {
|
|
|
31
32
|
const handleKeys = (event) => {
|
|
32
33
|
const key = event.key;
|
|
33
34
|
if (key === "Escape")
|
|
34
|
-
|
|
35
|
+
handleClose();
|
|
36
|
+
};
|
|
37
|
+
const handleOpen = () => {
|
|
38
|
+
states.open.set(true);
|
|
39
|
+
methods.handleScroll();
|
|
40
|
+
};
|
|
41
|
+
const handleClose = () => {
|
|
42
|
+
states.open.set(false);
|
|
43
|
+
methods.handleScroll();
|
|
35
44
|
};
|
|
36
|
-
const handleOpen = () => states.open.set(true);
|
|
37
|
-
const handleClose = () => states.open.set(false);
|
|
38
45
|
// useEffects
|
|
39
46
|
useEffect(() => {
|
|
40
47
|
refs.buttons.current.map((button) => {
|
|
@@ -76,17 +83,17 @@ function PropertiesPopup({ refs, states, coordinate }) {
|
|
|
76
83
|
currentSort && (!currentSort.direction || currentSort.direction === "desc") && (React.createElement("li", { onClick: () => handleSort(currentKey, "asc") },
|
|
77
84
|
React.createElement("span", null,
|
|
78
85
|
React.createElement(ARIcon, { icon: "ArrowUp" })),
|
|
79
|
-
React.createElement("span", null, "
|
|
86
|
+
React.createElement("span", null, t("Table.Properties.Asc.Text")))),
|
|
80
87
|
currentSort && (!currentSort.direction || currentSort.direction === "asc") && (React.createElement("li", { onClick: () => handleSort(currentKey, "desc") },
|
|
81
88
|
React.createElement("span", null,
|
|
82
89
|
React.createElement(ARIcon, { icon: "ArrowDown" })),
|
|
83
|
-
React.createElement("span", null, "
|
|
90
|
+
React.createElement("span", null, t("Table.Properties.Desc.Text")))),
|
|
84
91
|
currentSort && currentSort.direction && (React.createElement("li", { onClick: () => {
|
|
85
92
|
states.sort.set((prev) => prev.filter((s) => s.key !== currentKey));
|
|
86
93
|
states.open.set(false);
|
|
87
94
|
} },
|
|
88
95
|
React.createElement("span", null,
|
|
89
96
|
React.createElement(ARIcon, { icon: "ChevronExpand" })),
|
|
90
|
-
React.createElement("span", null, "
|
|
97
|
+
React.createElement("span", null, t("Table.Properties.ClearSort.Text")))))), document.body));
|
|
91
98
|
}
|
|
92
99
|
export default memo(PropertiesPopup);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { Dispatch, SetStateAction } from "react";
|
|
2
2
|
import { TableColumnType } from "../../../libs/types";
|
|
3
3
|
import { Config, Sort } from "./IProps";
|
|
4
|
-
declare const MemoizedTHeadCell: <T>({ refs, states, columns, config, }: {
|
|
4
|
+
declare const MemoizedTHeadCell: <T>({ refs, states, methods, columns, config, }: {
|
|
5
5
|
refs: {
|
|
6
6
|
propertiesButton: React.MutableRefObject<(HTMLSpanElement | null)[]>;
|
|
7
7
|
};
|
|
@@ -24,6 +24,9 @@ declare const MemoizedTHeadCell: <T>({ refs, states, columns, config, }: {
|
|
|
24
24
|
}>>;
|
|
25
25
|
};
|
|
26
26
|
};
|
|
27
|
+
methods: {
|
|
28
|
+
handleScroll: () => void;
|
|
29
|
+
};
|
|
27
30
|
columns: TableColumnType<T>[];
|
|
28
31
|
config: Config<T>;
|
|
29
32
|
}) => React.JSX.Element;
|
|
@@ -2,7 +2,7 @@ import React, { memo } from "react";
|
|
|
2
2
|
import Button from "../../form/button";
|
|
3
3
|
import { ARIcon } from "../../icons";
|
|
4
4
|
import { ExtractKey } from "./Helpers";
|
|
5
|
-
const MemoizedTHeadCell = function ({ refs, states, columns, config, }) {
|
|
5
|
+
const MemoizedTHeadCell = function ({ refs, states, methods, columns, config, }) {
|
|
6
6
|
return (React.createElement(React.Fragment, null, columns.map((c, cIndex) => {
|
|
7
7
|
const { isProperties = true } = c.config ?? {};
|
|
8
8
|
const _direction = states.sort.get.find((s) => s.key === c.key)?.direction;
|
|
@@ -30,7 +30,8 @@ const MemoizedTHeadCell = function ({ refs, states, 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) => (refs.propertiesButton.current[cIndex] = element), className: "properties-field", onClick: (event) => {
|
|
33
|
+
config.isProperties && isProperties && (React.createElement("span", { ref: (element) => (refs.propertiesButton.current[cIndex] = element), className: "properties-field", "data-properties-button": "true", onClick: (event) => {
|
|
34
|
+
event.preventDefault();
|
|
34
35
|
event.stopPropagation();
|
|
35
36
|
const rect = event.currentTarget.getBoundingClientRect();
|
|
36
37
|
const screenCenterX = window.innerWidth / 2;
|
|
@@ -49,6 +50,7 @@ const MemoizedTHeadCell = function ({ refs, states, columns, config, }) {
|
|
|
49
50
|
return prev;
|
|
50
51
|
});
|
|
51
52
|
states.open.set(true);
|
|
53
|
+
methods.handleScroll();
|
|
52
54
|
} },
|
|
53
55
|
React.createElement(Button, { variant: "borderless", icon: {
|
|
54
56
|
element: React.createElement(ARIcon, { size: 16, icon: "ThreeDotsVertical", fill: "var(--dark)", strokeWidth: 0 }),
|
|
@@ -19,16 +19,7 @@ import { ExtractKey } from "./Helpers";
|
|
|
19
19
|
import Header from "./header/Header";
|
|
20
20
|
import TBody from "./body/TBody";
|
|
21
21
|
import DatePicker from "../../form/date-picker";
|
|
22
|
-
|
|
23
|
-
{ value: FilterOperator.Contains, text: "İçerir" },
|
|
24
|
-
{ value: FilterOperator.DoesNotContains, text: "İçermez" },
|
|
25
|
-
{ value: FilterOperator.Equals, text: "Eşittir" },
|
|
26
|
-
{ value: FilterOperator.DoesNotEquals, text: "Eşit değildir" },
|
|
27
|
-
{ value: FilterOperator.BeginsWith, text: "İle başlar" },
|
|
28
|
-
{ value: FilterOperator.EndsWith, text: "İle biter" },
|
|
29
|
-
{ value: FilterOperator.Blank, text: "Boş" },
|
|
30
|
-
{ value: FilterOperator.NotBlank, text: "Boş değil" },
|
|
31
|
-
];
|
|
22
|
+
import { useTranslation } from "../../../libs/core/application/hooks";
|
|
32
23
|
const { Row, Column } = Grid;
|
|
33
24
|
const Table = forwardRef(({ children, trackBy, title, description, data, columns, actions, rowBackgroundColor, selections, previousSelections, sortedParams, searchedParams, onEditable, onDnD, pagination, config = { isSearchable: false }, }, ref) => {
|
|
34
25
|
// refs
|
|
@@ -88,6 +79,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
|
|
|
88
79
|
// states -> Mobil
|
|
89
80
|
const [isMobile, setIsMobile] = useState(false);
|
|
90
81
|
// hooks
|
|
82
|
+
const { t } = useTranslation(String(config.locale ?? "tr"));
|
|
91
83
|
// Dışarıdan gelen ref'i _innerRef'e bağla.
|
|
92
84
|
useImperativeHandle(ref, () => _innerRef.current);
|
|
93
85
|
if (config && Object.keys(config.scroll || {}).length > 0) {
|
|
@@ -236,14 +228,14 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
|
|
|
236
228
|
React.createElement(Column, { size: 12 },
|
|
237
229
|
React.createElement(Select, { value: filterOption.find((x) => x.value === filterPopupOption?.option?.value && filterPopupOption.key === c.key) ?? filterOption[0], options: filterOption, onChange: (option) => {
|
|
238
230
|
setFilterPopupOption({ key: c.key, option: option });
|
|
239
|
-
}, placeholder: "
|
|
231
|
+
}, placeholder: t("Table.Filters.Where.Input.Placeholder") })),
|
|
240
232
|
React.createElement(Column, { size: 12 },
|
|
241
|
-
React.createElement(Input, { value: value ?? "", onChange: (event) => handleChange(event.target.value), placeholder: "
|
|
233
|
+
React.createElement(Input, { value: value ?? "", onChange: (event) => handleChange(event.target.value), placeholder: t("Table.Filters.Search.Input.Placeholder") }))));
|
|
242
234
|
case "object":
|
|
243
235
|
case "boolean":
|
|
244
236
|
return (React.createElement(Row, null,
|
|
245
237
|
React.createElement(Column, { size: 12 },
|
|
246
|
-
React.createElement(Input, {
|
|
238
|
+
React.createElement(Input, { value: value ?? "", onChange: (event) => setFilterPopupOptionSearchText(event.target.value), placeholder: t("Table.Filters.Search.Input.Placeholder") })),
|
|
247
239
|
React.createElement(Column, { size: 12 }, c.filters
|
|
248
240
|
?.filter((filter) => filter.text.toLocaleLowerCase().includes(filterPopupOptionSearchText?.toLocaleLowerCase() ?? ""))
|
|
249
241
|
?.map((filter, fIndex) => {
|
|
@@ -380,6 +372,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
|
|
|
380
372
|
const indexOfFirstRow = indexOfLastRow - selectedPerPage;
|
|
381
373
|
_data = _data.slice(indexOfFirstRow, indexOfLastRow);
|
|
382
374
|
}
|
|
375
|
+
handleScroll();
|
|
383
376
|
return _data;
|
|
384
377
|
}, [data, searchedText, currentPage, selectedPerPage, sortConfig, config.isServerSide]);
|
|
385
378
|
// useEffects
|
|
@@ -559,7 +552,6 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
|
|
|
559
552
|
_tBody.current.ondragover = null;
|
|
560
553
|
};
|
|
561
554
|
}, [data]);
|
|
562
|
-
useLayoutEffect(() => handleScroll(), [data]);
|
|
563
555
|
useLayoutEffect(() => {
|
|
564
556
|
if (!pagination?.currentPage)
|
|
565
557
|
return;
|
|
@@ -577,6 +569,16 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
|
|
|
577
569
|
window.removeEventListener("resize", handleResize);
|
|
578
570
|
};
|
|
579
571
|
}, []);
|
|
572
|
+
const filterOption = [
|
|
573
|
+
{ value: FilterOperator.Contains, text: t("Table.Filters.Where.Input.Item.1.Text") },
|
|
574
|
+
{ value: FilterOperator.DoesNotContains, text: t("Table.Filters.Where.Input.Item.2.Text") },
|
|
575
|
+
{ value: FilterOperator.Equals, text: t("Table.Filters.Where.Input.Item.3.Text") },
|
|
576
|
+
{ value: FilterOperator.DoesNotEquals, text: t("Table.Filters.Where.Input.Item.4.Text") },
|
|
577
|
+
{ value: FilterOperator.BeginsWith, text: t("Table.Filters.Where.Input.Item.5.Text") },
|
|
578
|
+
{ value: FilterOperator.EndsWith, text: t("Table.Filters.Where.Input.Item.6.Text") },
|
|
579
|
+
{ value: FilterOperator.Blank, text: t("Table.Filters.Where.Input.Item.7.Text") },
|
|
580
|
+
{ value: FilterOperator.NotBlank, text: t("Table.Filters.Where.Input.Item.8.Text") },
|
|
581
|
+
];
|
|
580
582
|
return (React.createElement("div", { ref: _tableWrapper, className: _tableClassName.map((c) => c).join(" ") },
|
|
581
583
|
(title || description || actions || React.Children.count(children) > 0) && (React.createElement(Header, { title: title, description: description, actions: actions })),
|
|
582
584
|
React.createElement("div", { ref: _tableContent, className: "content", onScroll: handleScroll },
|
|
@@ -603,7 +605,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
|
|
|
603
605
|
sort: { get: sortConfig, set: setSortConfig },
|
|
604
606
|
sortCurrentColumn: { set: setSortCurrentColumn },
|
|
605
607
|
propertiesButtonCoordinate: { set: setPropertiesButtonCoordinate },
|
|
606
|
-
}, columns: columns, config: config })),
|
|
608
|
+
}, methods: { handleScroll }, columns: columns, config: config })),
|
|
607
609
|
config?.isSearchable && (React.createElement("tr", { key: "isSearchable" },
|
|
608
610
|
selections && (React.createElement("th", { key: `column-selections`, className: "selection-col sticky-left", "data-sticky-position": "left" })),
|
|
609
611
|
columns.map((c, cIndex) => {
|
|
@@ -624,9 +626,14 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
|
|
|
624
626
|
className: `${_className.map((c) => c).join(" ")}`,
|
|
625
627
|
}), ...(c.config?.sticky && {
|
|
626
628
|
"data-sticky-position": c.config.sticky,
|
|
627
|
-
}) }, c.key && (React.createElement("div", { className: "filter-field" }, c.filterDataType === "date" ? (React.createElement(DatePicker, { value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key,
|
|
628
|
-
|
|
629
|
+
}) }, c.key && (React.createElement("div", { className: "filter-field" }, c.filterDataType === "date" ? (React.createElement(DatePicker, { value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onClick: () => {
|
|
630
|
+
handleScroll();
|
|
631
|
+
}, 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) => (_searchTextInputs.current[cIndex] = element), variant: c.key && !c.filters ? "outlined" : "filled", style: { height: "2rem" }, value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onClick: () => {
|
|
633
|
+
handleScroll();
|
|
634
|
+
}, onInput: (event) => handleSearch(event.currentTarget.name, event.currentTarget.value), disabled: !c.key || !!c.filters }),
|
|
629
635
|
React.createElement("span", { ref: (element) => (_filterButton.current[cIndex] = element), onClick: (event) => {
|
|
636
|
+
event.preventDefault();
|
|
630
637
|
event.stopPropagation();
|
|
631
638
|
// Temizlik...
|
|
632
639
|
setFilterPopupOptionSearchText("");
|
|
@@ -648,6 +655,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
|
|
|
648
655
|
setFilterCurrentIndex(cIndex);
|
|
649
656
|
setOpenFilter(true);
|
|
650
657
|
handleFilterPopupContent(c, c.filterDataType ?? dataType, cIndex);
|
|
658
|
+
handleScroll();
|
|
651
659
|
} },
|
|
652
660
|
React.createElement(Button, { variant: "borderless", icon: {
|
|
653
661
|
element: React.createElement(ARIcon, { size: 24, icon: "Filter", fill: "var(--dark)", strokeWidth: 0 }),
|
|
@@ -676,7 +684,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
|
|
|
676
684
|
}, states: {
|
|
677
685
|
open: { get: openProperties, set: setOpenProperties },
|
|
678
686
|
sort: { get: sortConfig, set: setSortConfig, currentColumn: sortCurrentColumn },
|
|
679
|
-
}, coordinate: propertiesButtonCoordinate })),
|
|
687
|
+
}, methods: { handleScroll }, coordinate: propertiesButtonCoordinate, config: config })),
|
|
680
688
|
React.createElement("div", { className: "footer" },
|
|
681
689
|
React.createElement("span", null, isMobile ? (React.createElement(React.Fragment, null,
|
|
682
690
|
React.createElement("strong", null,
|
|
@@ -686,18 +694,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
|
|
|
686
694
|
Math.min(currentPage * selectedPerPage, pagination?.totalRecords || getData.length),
|
|
687
695
|
" of",
|
|
688
696
|
" ",
|
|
689
|
-
pagination?.totalRecords || getData.length))) : (
|
|
690
|
-
React.createElement("strong", null,
|
|
691
|
-
"Showing ",
|
|
692
|
-
(currentPage - 1) * selectedPerPage + 1,
|
|
693
|
-
" to",
|
|
694
|
-
" ",
|
|
695
|
-
Math.min(currentPage * selectedPerPage, pagination?.totalRecords || getData.length)),
|
|
696
|
-
" ",
|
|
697
|
-
React.createElement("span", null,
|
|
698
|
-
"of ",
|
|
699
|
-
pagination?.totalRecords || getData.length,
|
|
700
|
-
" agreements")))),
|
|
697
|
+
pagination?.totalRecords || getData.length))) : (t("Table.Pagination.Information.Text", (currentPage - 1) * selectedPerPage + 1, Math.min(currentPage * selectedPerPage, pagination?.totalRecords || getData.length), pagination?.totalRecords || getData.length))),
|
|
701
698
|
pagination && (React.createElement(Pagination, { totalRecords: config.isServerSide ? pagination.totalRecords : (totalRecords ?? 0), currentPage: currentPage, perPage: selectedPerPage, onChange: (currentPage, perPage) => {
|
|
702
699
|
setCurrentPage(currentPage);
|
|
703
700
|
setSelectedPerPage(perPage);
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { INotificationLocale } from "../locales";
|
|
2
|
+
import ITableLocale from "../locales/table/ITableLocale";
|
|
2
3
|
type LocaleMap = Record<string, Record<string, any>>;
|
|
3
4
|
declare const useTranslation: <TBaseLocale>(currentLanguage: string | undefined, translations?: LocaleMap) => {
|
|
4
|
-
t: (key: Extract<keyof TBaseLocale | keyof INotificationLocale, string>, ...args: any[]) => string;
|
|
5
|
+
t: (key: Extract<keyof TBaseLocale | keyof ITableLocale | keyof INotificationLocale, string>, ...args: any[]) => string;
|
|
5
6
|
currentLanguage: string | undefined;
|
|
6
7
|
};
|
|
7
8
|
export default useTranslation;
|
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
import Utils from "../../../infrastructure/shared/Utils";
|
|
2
2
|
import { NotificationEN, NotificationTR } from "../locales";
|
|
3
|
+
import TableEN from "../locales/table/en";
|
|
4
|
+
import TableTR from "../locales/table/tr";
|
|
3
5
|
const useTranslation = function (currentLanguage, translations = {}) {
|
|
4
6
|
const merged = {};
|
|
5
|
-
const
|
|
6
|
-
tr: NotificationTR,
|
|
7
|
-
en: NotificationEN,
|
|
7
|
+
const ExtraLocales = {
|
|
8
|
+
tr: { ...TableTR, ...NotificationTR },
|
|
9
|
+
en: { ...TableEN, ...NotificationEN },
|
|
8
10
|
};
|
|
9
|
-
const allLanguages = new Set([...Object.keys(translations), ...Object.keys(
|
|
11
|
+
const allLanguages = new Set([...Object.keys(translations), ...Object.keys(ExtraLocales)]);
|
|
10
12
|
allLanguages.forEach((lang) => {
|
|
11
13
|
merged[lang] = {
|
|
12
14
|
...translations[lang],
|
|
13
|
-
...
|
|
15
|
+
...ExtraLocales[lang],
|
|
14
16
|
};
|
|
15
17
|
});
|
|
16
18
|
const t = (key, ...args) => {
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
interface ITableLocale {
|
|
2
|
+
"Table.Properties.Asc.Text": string;
|
|
3
|
+
"Table.Properties.Desc.Text": string;
|
|
4
|
+
"Table.Properties.ClearSort.Text": string;
|
|
5
|
+
"Table.Filters.Where.Input.Placeholder": string;
|
|
6
|
+
"Table.Filters.Where.Input.Item.1.Text": string;
|
|
7
|
+
"Table.Filters.Where.Input.Item.2.Text": string;
|
|
8
|
+
"Table.Filters.Where.Input.Item.3.Text": string;
|
|
9
|
+
"Table.Filters.Where.Input.Item.4.Text": string;
|
|
10
|
+
"Table.Filters.Where.Input.Item.5.Text": string;
|
|
11
|
+
"Table.Filters.Where.Input.Item.6.Text": string;
|
|
12
|
+
"Table.Filters.Where.Input.Item.7.Text": string;
|
|
13
|
+
"Table.Filters.Where.Input.Item.8.Text": string;
|
|
14
|
+
"Table.Filters.Search.Input.Placeholder": string;
|
|
15
|
+
"Table.Pagination.Information.Text": string;
|
|
16
|
+
}
|
|
17
|
+
export default ITableLocale;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
const TableEN = {
|
|
2
|
+
// Properties
|
|
3
|
+
"Table.Properties.Asc.Text": "Sort Ascending",
|
|
4
|
+
"Table.Properties.Desc.Text": "Sort Descending",
|
|
5
|
+
"Table.Properties.ClearSort.Text": "Clear Sort",
|
|
6
|
+
// Filters
|
|
7
|
+
"Table.Filters.Where.Input.Placeholder": "Where",
|
|
8
|
+
"Table.Filters.Where.Input.Item.1.Text": "Contains",
|
|
9
|
+
"Table.Filters.Where.Input.Item.2.Text": "Does Not Contain",
|
|
10
|
+
"Table.Filters.Where.Input.Item.3.Text": "Equals",
|
|
11
|
+
"Table.Filters.Where.Input.Item.4.Text": "Does Not Equal",
|
|
12
|
+
"Table.Filters.Where.Input.Item.5.Text": "Starts With",
|
|
13
|
+
"Table.Filters.Where.Input.Item.6.Text": "Ends With",
|
|
14
|
+
"Table.Filters.Where.Input.Item.7.Text": "Is Empty",
|
|
15
|
+
"Table.Filters.Where.Input.Item.8.Text": "Is Not Empty",
|
|
16
|
+
"Table.Filters.Search.Input.Placeholder": "Search",
|
|
17
|
+
// Pagination
|
|
18
|
+
"Table.Pagination.Information.Text": "Showing {0} to {1} of {2} agreements",
|
|
19
|
+
};
|
|
20
|
+
export default TableEN;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
const TableTR = {
|
|
2
|
+
// Properties
|
|
3
|
+
"Table.Properties.Asc.Text": "Artan Sırada Sırala",
|
|
4
|
+
"Table.Properties.Desc.Text": "Azalan Sırada Sırala",
|
|
5
|
+
"Table.Properties.ClearSort.Text": "Sıralamayı Temizle",
|
|
6
|
+
// Filters
|
|
7
|
+
"Table.Filters.Where.Input.Placeholder": "Koşul",
|
|
8
|
+
"Table.Filters.Where.Input.Item.1.Text": "İçerir",
|
|
9
|
+
"Table.Filters.Where.Input.Item.2.Text": "İçermez",
|
|
10
|
+
"Table.Filters.Where.Input.Item.3.Text": "Eşittir",
|
|
11
|
+
"Table.Filters.Where.Input.Item.4.Text": "Eşit değildir",
|
|
12
|
+
"Table.Filters.Where.Input.Item.5.Text": "İle başlar",
|
|
13
|
+
"Table.Filters.Where.Input.Item.6.Text": "İle biter",
|
|
14
|
+
"Table.Filters.Where.Input.Item.7.Text": "Boş",
|
|
15
|
+
"Table.Filters.Where.Input.Item.8.Text": "Boş değil",
|
|
16
|
+
"Table.Filters.Search.Input.Placeholder": "Ara",
|
|
17
|
+
// Pagination
|
|
18
|
+
"Table.Pagination.Information.Text": "{2} kayıt içerisinden {0} - {1} aralığı listeleniyor",
|
|
19
|
+
};
|
|
20
|
+
export default TableTR;
|
|
@@ -20,8 +20,8 @@ declare class DATE {
|
|
|
20
20
|
* @param locale
|
|
21
21
|
* @returns
|
|
22
22
|
*/
|
|
23
|
-
Verbose: (date: Date, locale?: string) => string;
|
|
24
|
-
WithTime: (date: Date, locale?: string) => string;
|
|
23
|
+
Verbose: (date: Date, locale?: string, UTC?: boolean) => string;
|
|
24
|
+
WithTime: (date: Date, locale?: string, UTC?: boolean) => string;
|
|
25
25
|
private GetLocaleFromLanguage;
|
|
26
26
|
}
|
|
27
27
|
declare const _default: DATE;
|
|
@@ -30,20 +30,22 @@ class DATE {
|
|
|
30
30
|
* @param locale
|
|
31
31
|
* @returns
|
|
32
32
|
*/
|
|
33
|
-
Verbose = (date, locale = "tr") => {
|
|
33
|
+
Verbose = (date, locale = "tr", UTC = false) => {
|
|
34
34
|
return date.toLocaleDateString(this.GetLocaleFromLanguage(locale), {
|
|
35
35
|
day: "numeric",
|
|
36
36
|
month: "long",
|
|
37
37
|
year: "numeric",
|
|
38
|
+
...(UTC ? { timeZone: "UTC" } : {}),
|
|
38
39
|
});
|
|
39
40
|
};
|
|
40
|
-
WithTime = (date, locale = "tr") => {
|
|
41
|
+
WithTime = (date, locale = "tr", UTC = false) => {
|
|
41
42
|
return date.toLocaleString(this.GetLocaleFromLanguage(locale), {
|
|
42
43
|
day: "numeric",
|
|
43
44
|
month: "long",
|
|
44
45
|
year: "numeric",
|
|
45
46
|
hour: "2-digit",
|
|
46
47
|
minute: "2-digit",
|
|
48
|
+
...(UTC ? { timeZone: "UTC" } : {}),
|
|
47
49
|
});
|
|
48
50
|
};
|
|
49
51
|
GetLocaleFromLanguage = (lang) => {
|