ar-design 0.4.32 → 0.4.34

package/dist/assets/css/components/data-display/calendar/styles.week-view.css

@@ -16,10 +16,12 @@
       > .item {
         display: flex;
         flex-direction: column;
+        flex: 1;
         align-items: center;
         gap: 1rem;
         width: calc(100% / 7);
         padding: 0.5rem 0;
+        text-align: center;
 
         > .day-name {
           color: var(--gray-400);
@@ -33,11 +35,16 @@
     }
 
     > .body {
+      position: relative;
       display: flex;
       flex-direction: row;
       width: 100%;
 
       > .clocks {
+        position: relative;
+        width: 50px;
+        z-index: 1;
+
         > div {
           height: 60px;
 
@@ -54,25 +61,7 @@
         height: calc(24 * 60px);
         border: solid 1px transparent;
         border-top-color: var(--gray-200);
-        overflow: hidden;
-
-        > .events-layer {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          pointer-events: none;
-          z-index: 1;
-
-          > .event-box {
-            position: absolute;
-            width: calc(100% / 7);
-            padding: 0.5rem;
-            color: var(--white);
-            font-size: 12px;
-          }
-        }
+        z-index: 1;
 
         > .row {
           position: relative;
@@ -123,6 +112,34 @@
           }
         }
       }
+
+      > .events-layer {
+        position: absolute;
+        right: 0;
+        width: calc(100% - 50px); /* Solda yer alan clocks'dan dolayı -50px yapıldı. */
+        height: calc(24 * 60px);
+        z-index: 2;
+
+        > .event-box {
+          position: absolute;
+          width: calc(100% / 7);
+          padding: 0.5rem;
+          color: var(--white);
+          font-size: 12px;
+          overflow: hidden;
+          z-index: 10;
+        }
+      }
     }
   }
 }
+
+.ar-calendar-tooltip {
+  position: fixed;
+  background-color: var(--black);
+  padding: 1rem;
+  border-radius: var(--border-radius-sm);
+  color: var(--white);
+  pointer-events: none;
+  z-index: 200;
+}

package/dist/components/data-display/calendar/views/Week.js

@@ -1,21 +1,49 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import ReactDOM from "react-dom";
 const Week = function ({ data, renderItem, states, config }) {
+    // refs
+    const _eventBox = useRef([]);
+    // states
+    const [mouseCoordinate, setMouseCoordinate] = useState({
+        x: 0,
+        y: 0,
+        isRightHalf: false,
+        isBottomHalf: false,
+    });
+    const [activeTooltip, setActiveTooltip] = useState(null);
+    // variables
     const startHour = 0;
     const endHour = 24;
     const hours = endHour - startHour;
     const cellHeight = 60;
+    // methods
     const weekDays = useMemo(() => getWeekDays(states.currentDate.get, config?.weekStartsOn ?? 1), [states.currentDate.get, config?.weekStartsOn]);
-    return (React.createElement("div", { className: "ar-calendar-week-view" },
-        React.createElement("div", { className: "head" }, weekDays.map((day) => (React.createElement("div", { key: day.toISOString(), className: "item", style: { flex: 1, textAlign: "center" } },
-            React.createElement("span", { className: "day-name" }, day.toLocaleString(config?.locale ?? "tr", { weekday: "short" }).toUpperCase()),
-            React.createElement("span", { className: "date" }, day.getDate()))))),
-        React.createElement("div", { className: "body" },
-            React.createElement("div", { className: "clocks", style: { width: "50px" } }, Array.from({ length: hours }, (_, index) => (React.createElement("div", { key: index },
-                React.createElement("span", null,
-                    String(startHour + index).padStart(2, "0"),
-                    ":00"))))),
-            React.createElement("div", { role: "grid", className: "grid" },
-                Array.from({ length: hours }).map((_, rowIndex) => (React.createElement("div", { key: rowIndex, className: "row" }, weekDays.map((_, colIndex) => (React.createElement("div", { key: colIndex, className: "cell" })))))),
+    // useEffects
+    useEffect(() => {
+        const handleMouseMove = (event) => {
+            setMouseCoordinate({
+                x: event.clientX,
+                y: event.clientY,
+                isRightHalf: event.clientX > window.innerWidth / 2,
+                isBottomHalf: event.clientY > window.innerHeight / 2,
+            });
+        };
+        window.addEventListener("mousemove", handleMouseMove);
+        return () => {
+            window.removeEventListener("mousemove", handleMouseMove);
+        };
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "ar-calendar-week-view" },
+            React.createElement("div", { className: "head" }, weekDays.map((day) => (React.createElement("div", { key: day.toISOString(), className: "item" },
+                React.createElement("span", { className: "day-name" }, day.toLocaleString(config?.locale ?? "tr", { weekday: "short" }).toUpperCase()),
+                React.createElement("span", { className: "date" }, day.getDate()))))),
+            React.createElement("div", { className: "body" },
+                React.createElement("div", { className: "clocks" }, Array.from({ length: hours }, (_, index) => (React.createElement("div", { key: index },
+                    React.createElement("span", null,
+                        String(startHour + index).padStart(2, "0"),
+                        ":00"))))),
+                React.createElement("div", { role: "grid", className: "grid" }, Array.from({ length: hours }).map((_, rowIndex) => (React.createElement("div", { key: rowIndex, className: "row" }, weekDays.map((_, colIndex) => (React.createElement("div", { key: colIndex, className: "cell" }))))))),
                 React.createElement("div", { className: "events-layer" }, data.flatMap((event, eventIdx) => {
                     const eventColor = getColor(eventIdx);
                     // Her etkinlik için haftanın günlerini gezip, o güne düşen parçayı hesaplıyoruz
@@ -36,7 +64,11 @@ const Week = function ({ data, renderItem, states, config }) {
                             // Durum Kontrolleri
                             const isContinuedFromYesterday = event.start < dayStart;
                             const isContinuingTomorrow = event.end > dayEnd;
-                            return (React.createElement("div", { key: `${eventIdx}-${dayIndex}`, className: "event-box", style: {
+                            return (React.createElement("div", { ref: (element) => {
+                                    if (!element)
+                                        return;
+                                    _eventBox.current[dayIndex] = element;
+                                }, key: `${eventIdx}-${dayIndex}`, onMouseEnter: () => setActiveTooltip({ content: renderItem(event, eventIdx), id: eventIdx }), onMouseLeave: () => setActiveTooltip(null), className: "event-box", style: {
                                     backgroundColor: eventColor.bg,
                                     top: `${top}px`,
                                     height: `${height}px`,
@@ -53,7 +85,13 @@ const Week = function ({ data, renderItem, states, config }) {
                         }
                         return null;
                     });
-                }))))));
+                })))),
+        activeTooltip &&
+            ReactDOM.createPortal(React.createElement("div", { className: "ar-calendar-tooltip", style: {
+                    top: mouseCoordinate.y,
+                    left: mouseCoordinate.x,
+                    transform: `translate(${mouseCoordinate.isRightHalf ? "-110%" : "10%"}, ${mouseCoordinate.isBottomHalf ? "-110%" : "10%"})`,
+                } }, activeTooltip.content), document.body)));
 };
 // Yardımcı Fonksiyonlar aynı kalıyor
 const getWeekRange = (date, weekStartsOn = 1) => {

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

@@ -4,6 +4,7 @@ import ReactDOM from "react-dom";
 const FilterPopup = ({ children, refs, states, coordinate }) => {
     // refs
     const _arTableFilterPopup = useRef(null);
+    // hooks
     // methods
     const handleClickOutSide = (event) => {
         const target = event.target;

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

@@ -1,6 +1,6 @@
 import React, { Dispatch, MutableRefObject, SetStateAction } from "react";
 import { TableColumnType } from "../../../libs/types";
-import { Sort } from "./IProps";
+import { Config, Sort } from "./IProps";
 interface IProps<T> {
     refs: {
         tableContent: MutableRefObject<HTMLDivElement | null>;
@@ -24,7 +24,8 @@ interface IProps<T> {
         x: number;
         y: number;
     };
+    config: Config<T>;
 }
-declare function PropertiesPopup<T extends object>({ refs, states, methods, coordinate }: IProps<T>): false | React.ReactPortal;
+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

@@ -3,9 +3,12 @@ import React, { memo, useEffect, useMemo, useRef } from "react";
 import ReactDOM from "react-dom";
 import { ARIcon } from "../../icons";
 import { ExtractKey } from "./Helpers";
-function PropertiesPopup({ refs, states, methods, coordinate }) {
+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;
@@ -80,17 +83,17 @@ function PropertiesPopup({ refs, states, methods, coordinate }) {
                 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, "Sort Ascending"))),
+                    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, "Sort Descending"))),
+                    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, "Clear Sort"))))), document.body));
+                    React.createElement("span", null, t("Table.Properties.ClearSort.Text")))))), document.body));
 }
 export default memo(PropertiesPopup);

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

@@ -19,16 +19,7 @@ import { ExtractKey } from "./Helpers";
 import Header from "./header/Header";
 import TBody from "./body/TBody";
 import DatePicker from "../../form/date-picker";
-const filterOption = [
-    { value: FilterOperator.Contains, text: "İçerir" },
-    { value: FilterOperator.DoesNotContains, text: "İçermez" },
-    { value: FilterOperator.Equals, text: "Eşittir" },
-    { value: FilterOperator.DoesNotEquals, text: "Eşit değildir" },
-    { value: FilterOperator.BeginsWith, text: "İle başlar" },
-    { value: FilterOperator.EndsWith, text: "İle biter" },
-    { value: FilterOperator.Blank, text: "Boş" },
-    { value: FilterOperator.NotBlank, text: "Boş değil" },
-];
+import { useTranslation } from "../../../libs/core/application/hooks";
 const { Row, Column } = Grid;
 const Table = forwardRef(({ children, trackBy, title, description, data, columns, actions, rowBackgroundColor, selections, previousSelections, sortedParams, searchedParams, onEditable, onDnD, pagination, config = { isSearchable: false }, }, ref) => {
     // refs
@@ -88,6 +79,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
     // states -> Mobil
     const [isMobile, setIsMobile] = useState(false);
     // hooks
+    const { t } = useTranslation(String(config.locale ?? "tr"));
     // Dışarıdan gelen ref'i _innerRef'e bağla.
     useImperativeHandle(ref, () => _innerRef.current);
     if (config && Object.keys(config.scroll || {}).length > 0) {
@@ -236,14 +228,14 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                         React.createElement(Column, { size: 12 },
                             React.createElement(Select, { value: filterOption.find((x) => x.value === filterPopupOption?.option?.value && filterPopupOption.key === c.key) ?? filterOption[0], options: filterOption, onChange: (option) => {
                                     setFilterPopupOption({ key: c.key, option: option });
-                                }, placeholder: "Ko\u015Ful" })),
+                                }, placeholder: t("Table.Filters.Where.Input.Placeholder") })),
                         React.createElement(Column, { size: 12 },
-                            React.createElement(Input, { value: value ?? "", onChange: (event) => handleChange(event.target.value), placeholder: "Ara" }))));
+                            React.createElement(Input, { value: value ?? "", onChange: (event) => handleChange(event.target.value), placeholder: t("Table.Filters.Search.Input.Placeholder") }))));
                 case "object":
                 case "boolean":
                     return (React.createElement(Row, null,
                         React.createElement(Column, { size: 12 },
-                            React.createElement(Input, { placeholder: "Ara", value: value ?? "", onChange: (event) => setFilterPopupOptionSearchText(event.target.value) })),
+                            React.createElement(Input, { value: value ?? "", onChange: (event) => setFilterPopupOptionSearchText(event.target.value), placeholder: t("Table.Filters.Search.Input.Placeholder") })),
                         React.createElement(Column, { size: 12 }, c.filters
                             ?.filter((filter) => filter.text.toLocaleLowerCase().includes(filterPopupOptionSearchText?.toLocaleLowerCase() ?? ""))
                             ?.map((filter, fIndex) => {
@@ -577,6 +569,16 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
             window.removeEventListener("resize", handleResize);
         };
     }, []);
+    const filterOption = [
+        { value: FilterOperator.Contains, text: t("Table.Filters.Where.Input.Item.1.Text") },
+        { value: FilterOperator.DoesNotContains, text: t("Table.Filters.Where.Input.Item.2.Text") },
+        { value: FilterOperator.Equals, text: t("Table.Filters.Where.Input.Item.3.Text") },
+        { value: FilterOperator.DoesNotEquals, text: t("Table.Filters.Where.Input.Item.4.Text") },
+        { value: FilterOperator.BeginsWith, text: t("Table.Filters.Where.Input.Item.5.Text") },
+        { value: FilterOperator.EndsWith, text: t("Table.Filters.Where.Input.Item.6.Text") },
+        { value: FilterOperator.Blank, text: t("Table.Filters.Where.Input.Item.7.Text") },
+        { 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 })),
         React.createElement("div", { ref: _tableContent, className: "content", onScroll: handleScroll },
@@ -682,7 +684,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
             }, states: {
                 open: { get: openProperties, set: setOpenProperties },
                 sort: { get: sortConfig, set: setSortConfig, currentColumn: sortCurrentColumn },
-            }, methods: { handleScroll }, coordinate: propertiesButtonCoordinate })),
+            }, methods: { handleScroll }, coordinate: propertiesButtonCoordinate, config: config })),
         React.createElement("div", { className: "footer" },
             React.createElement("span", null, isMobile ? (React.createElement(React.Fragment, null,
                 React.createElement("strong", null,
@@ -692,18 +694,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                     Math.min(currentPage * selectedPerPage, pagination?.totalRecords || getData.length),
                     " of",
                     " ",
-                    pagination?.totalRecords || getData.length))) : (React.createElement(React.Fragment, null,
-                React.createElement("strong", null,
-                    "Showing ",
-                    (currentPage - 1) * selectedPerPage + 1,
-                    " to",
-                    " ",
-                    Math.min(currentPage * selectedPerPage, pagination?.totalRecords || getData.length)),
-                " ",
-                React.createElement("span", null,
-                    "of ",
-                    pagination?.totalRecords || getData.length,
-                    " agreements")))),
+                    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))),
             pagination && (React.createElement(Pagination, { totalRecords: config.isServerSide ? pagination.totalRecords : (totalRecords ?? 0), currentPage: currentPage, perPage: selectedPerPage, onChange: (currentPage, perPage) => {
                     setCurrentPage(currentPage);
                     setSelectedPerPage(perPage);

package/dist/libs/core/application/hooks/useTranslation.d.ts

@@ -1,7 +1,8 @@
 import { INotificationLocale } from "../locales";
+import ITableLocale from "../locales/table/ITableLocale";
 type LocaleMap = Record<string, Record<string, any>>;
 declare const useTranslation: <TBaseLocale>(currentLanguage: string | undefined, translations?: LocaleMap) => {
-    t: (key: Extract<keyof TBaseLocale | keyof INotificationLocale, string>, ...args: any[]) => string;
+    t: (key: Extract<keyof TBaseLocale | keyof ITableLocale | keyof INotificationLocale, string>, ...args: any[]) => string;
     currentLanguage: string | undefined;
 };
 export default useTranslation;

package/dist/libs/core/application/hooks/useTranslation.js

@@ -1,16 +1,18 @@
 import Utils from "../../../infrastructure/shared/Utils";
 import { NotificationEN, NotificationTR } from "../locales";
+import TableEN from "../locales/table/en";
+import TableTR from "../locales/table/tr";
 const useTranslation = function (currentLanguage, translations = {}) {
     const merged = {};
-    const NotificationLocales = {
-        tr: NotificationTR,
-        en: NotificationEN,
+    const ExtraLocales = {
+        tr: { ...TableTR, ...NotificationTR },
+        en: { ...TableEN, ...NotificationEN },
     };
-    const allLanguages = new Set([...Object.keys(translations), ...Object.keys(NotificationLocales)]);
+    const allLanguages = new Set([...Object.keys(translations), ...Object.keys(ExtraLocales)]);
     allLanguages.forEach((lang) => {
         merged[lang] = {
             ...translations[lang],
-            ...NotificationLocales[lang],
+            ...ExtraLocales[lang],
         };
     });
     const t = (key, ...args) => {

package/dist/libs/core/application/locales/table/ITableLocale.d.ts

@@ -0,0 +1,17 @@
+interface ITableLocale {
+    "Table.Properties.Asc.Text": string;
+    "Table.Properties.Desc.Text": string;
+    "Table.Properties.ClearSort.Text": string;
+    "Table.Filters.Where.Input.Placeholder": string;
+    "Table.Filters.Where.Input.Item.1.Text": string;
+    "Table.Filters.Where.Input.Item.2.Text": string;
+    "Table.Filters.Where.Input.Item.3.Text": string;
+    "Table.Filters.Where.Input.Item.4.Text": string;
+    "Table.Filters.Where.Input.Item.5.Text": string;
+    "Table.Filters.Where.Input.Item.6.Text": string;
+    "Table.Filters.Where.Input.Item.7.Text": string;
+    "Table.Filters.Where.Input.Item.8.Text": string;
+    "Table.Filters.Search.Input.Placeholder": string;
+    "Table.Pagination.Information.Text": string;
+}
+export default ITableLocale;

package/dist/libs/core/application/locales/table/ITableLocale.js

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

package/dist/libs/core/application/locales/table/en.d.ts

@@ -0,0 +1,3 @@
+import ITableLocale from "./ITableLocale";
+declare const TableEN: ITableLocale;
+export default TableEN;

package/dist/libs/core/application/locales/table/en.js

@@ -0,0 +1,20 @@
+const TableEN = {
+    // Properties
+    "Table.Properties.Asc.Text": "Sort Ascending",
+    "Table.Properties.Desc.Text": "Sort Descending",
+    "Table.Properties.ClearSort.Text": "Clear Sort",
+    // Filters
+    "Table.Filters.Where.Input.Placeholder": "Where",
+    "Table.Filters.Where.Input.Item.1.Text": "Contains",
+    "Table.Filters.Where.Input.Item.2.Text": "Does Not Contain",
+    "Table.Filters.Where.Input.Item.3.Text": "Equals",
+    "Table.Filters.Where.Input.Item.4.Text": "Does Not Equal",
+    "Table.Filters.Where.Input.Item.5.Text": "Starts With",
+    "Table.Filters.Where.Input.Item.6.Text": "Ends With",
+    "Table.Filters.Where.Input.Item.7.Text": "Is Empty",
+    "Table.Filters.Where.Input.Item.8.Text": "Is Not Empty",
+    "Table.Filters.Search.Input.Placeholder": "Search",
+    // Pagination
+    "Table.Pagination.Information.Text": "Showing {0} to {1} of {2} agreements",
+};
+export default TableEN;

package/dist/libs/core/application/locales/table/tr.d.ts

@@ -0,0 +1,3 @@
+import ITableLocale from "./ITableLocale";
+declare const TableTR: ITableLocale;
+export default TableTR;

package/dist/libs/core/application/locales/table/tr.js

@@ -0,0 +1,20 @@
+const TableTR = {
+    // Properties
+    "Table.Properties.Asc.Text": "Artan Sırada Sırala",
+    "Table.Properties.Desc.Text": "Azalan Sırada Sırala",
+    "Table.Properties.ClearSort.Text": "Sıralamayı Temizle",
+    // Filters
+    "Table.Filters.Where.Input.Placeholder": "Koşul",
+    "Table.Filters.Where.Input.Item.1.Text": "İçerir",
+    "Table.Filters.Where.Input.Item.2.Text": "İçermez",
+    "Table.Filters.Where.Input.Item.3.Text": "Eşittir",
+    "Table.Filters.Where.Input.Item.4.Text": "Eşit değildir",
+    "Table.Filters.Where.Input.Item.5.Text": "İle başlar",
+    "Table.Filters.Where.Input.Item.6.Text": "İle biter",
+    "Table.Filters.Where.Input.Item.7.Text": "Boş",
+    "Table.Filters.Where.Input.Item.8.Text": "Boş değil",
+    "Table.Filters.Search.Input.Placeholder": "Ara",
+    // Pagination
+    "Table.Pagination.Information.Text": "{2} kayıt içerisinden {0} - {1} aralığı listeleniyor",
+};
+export default TableTR;

package/dist/libs/infrastructure/shared/DATE.d.ts

@@ -20,8 +20,8 @@ declare class DATE {
      * @param locale
      * @returns
      */
-    Verbose: (date: Date, locale?: string) => string;
-    WithTime: (date: Date, locale?: string) => string;
+    Verbose: (date: Date, locale?: string, UTC?: boolean) => string;
+    WithTime: (date: Date, locale?: string, UTC?: boolean) => string;
     private GetLocaleFromLanguage;
 }
 declare const _default: DATE;

package/dist/libs/infrastructure/shared/DATE.js

@@ -30,20 +30,22 @@ class DATE {
      * @param locale
      * @returns
      */
-    Verbose = (date, locale = "tr") => {
+    Verbose = (date, locale = "tr", UTC = false) => {
         return date.toLocaleDateString(this.GetLocaleFromLanguage(locale), {
             day: "numeric",
             month: "long",
             year: "numeric",
+            ...(UTC ? { timeZone: "UTC" } : {}),
         });
     };
-    WithTime = (date, locale = "tr") => {
+    WithTime = (date, locale = "tr", UTC = false) => {
         return date.toLocaleString(this.GetLocaleFromLanguage(locale), {
             day: "numeric",
             month: "long",
             year: "numeric",
             hour: "2-digit",
             minute: "2-digit",
+            ...(UTC ? { timeZone: "UTC" } : {}),
         });
     };
     GetLocaleFromLanguage = (lang) => {

package/package.json

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