ar-design 0.4.28 → 0.4.30

package/dist/components/data-display/calendar/Body.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
 import { View } from "../../../libs/types";
 import { CalendarEvent } from "./IProps";
-interface IProps {
-    data: CalendarEvent[];
+interface IProps<T> {
+    data: (T & CalendarEvent)[];
+    renderItem: (item: T, index: number) => React.JSX.Element;
     states: {
         currentDate: {
             get: Date;
@@ -17,5 +18,5 @@ interface IProps {
         locale?: Intl.LocalesArgument;
     };
 }
-declare const Body: ({ data, states, config }: IProps) => React.JSX.Element;
+declare const Body: <T>({ data, renderItem, states, config }: IProps<T>) => React.JSX.Element;
 export default Body;

package/dist/components/data-display/calendar/Body.js

@@ -2,11 +2,11 @@ import React from "react";
 import Day from "./views/Day";
 import Week from "./views/Week";
 import Month from "./views/Month";
-const Body = ({ data, states, config }) => {
+const Body = function ({ data, renderItem, states, config }) {
     if (states.view.get === "Day")
         return React.createElement(Day, null);
     else if (states.view.get === "Week")
-        return React.createElement(Week, { data: data, states: { currentDate: states.currentDate }, config: config });
+        return React.createElement(Week, { data: data, renderItem: renderItem, states: { currentDate: states.currentDate }, config: config });
     else if (states.view.get === "Month")
         return React.createElement(Month, null);
     return React.createElement(React.Fragment, null, "...");

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

@@ -2,8 +2,9 @@ export type CalendarEvent = {
     start: Date;
     end: Date;
 };
-interface IProps {
-    data: CalendarEvent[];
+interface IProps<T> {
+    data: (T & CalendarEvent)[];
+    renderItem: (item: T, index: number) => React.JSX.Element;
     config?: {
         locale?: Intl.LocalesArgument;
         weekStartsOn?: number;

package/dist/components/data-display/calendar/index.d.ts

@@ -1,5 +1,8 @@
 import React from "react";
 import IProps from "./IProps";
 import "../../../assets/css/components/data-display/calendar/styles.css";
-declare const Calendar: React.FC<IProps>;
+declare const Calendar: {
+    <T>({ data, renderItem, config }: IProps<T>): React.JSX.Element;
+    displayName: string;
+};
 export default Calendar;

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

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import Body from "./Body";
 import Header from "./Header";
 import "../../../assets/css/components/data-display/calendar/styles.css";
-const Calendar = ({ data, config }) => {
+const Calendar = function ({ data, renderItem, config }) {
     // states
     const [currentDate, setCurrentDate] = useState(new Date());
     const [view, setView] = useState("Week");
@@ -15,7 +15,7 @@ const Calendar = ({ data, config }) => {
                     set: setView,
                 },
             }, config: config }),
-        React.createElement(Body, { data: data, states: {
+        React.createElement(Body, { data: data, renderItem: renderItem, states: {
                 currentDate: { get: currentDate, set: setCurrentDate },
                 view: {
                     get: view,

package/dist/components/data-display/calendar/views/Week.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { CalendarEvent } from "../IProps";
-interface IProps {
-    data: CalendarEvent[];
+interface IProps<T> {
+    data: (T & CalendarEvent)[];
+    renderItem: (item: T, index: number) => React.JSX.Element;
     states: {
         currentDate: {
             get: Date;
@@ -13,5 +14,5 @@ interface IProps {
         weekStartsOn?: number;
     };
 }
-declare const Week: ({ data, states, config }: IProps) => React.JSX.Element;
+declare const Week: <T>({ data, renderItem, states, config }: IProps<T>) => React.JSX.Element;
 export default Week;

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

@@ -1,14 +1,10 @@
-import React, { useEffect, useMemo, useState } from "react";
-const Week = ({ data, states, config }) => {
+import React, { useMemo } from "react";
+const Week = function ({ data, renderItem, states, config }) {
     const startHour = 0;
     const endHour = 24;
     const hours = endHour - startHour;
     const cellHeight = 60;
-    const [events, setEvents] = useState([]);
     const weekDays = useMemo(() => getWeekDays(states.currentDate.get, config?.weekStartsOn ?? 1), [states.currentDate.get, config?.weekStartsOn]);
-    useEffect(() => {
-        setEvents(data);
-    }, [data]);
     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()),
@@ -20,7 +16,7 @@ const Week = ({ data, states, config }) => {
                     ":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" }, events.flatMap((event, eventIdx) => {
+                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
                     return weekDays.map((day, dayIndex) => {
@@ -53,17 +49,7 @@ const Week = ({ data, states, config }) => {
                                         : isContinuingTomorrow
                                             ? "var(--border-radius-sm) var(--border-radius-sm) 0 0"
                                             : "var(--border-radius-sm)",
-                                } }, !isContinuedFromYesterday && (React.createElement(React.Fragment, null,
-                                React.createElement("div", { className: "event-content" },
-                                    event.start.toLocaleTimeString(config?.locale ?? "tr-TR", {
-                                        hour: "2-digit",
-                                        minute: "2-digit",
-                                    }),
-                                    " - ",
-                                    event.end.toLocaleTimeString(config?.locale ?? "tr-TR", {
-                                        hour: "2-digit",
-                                        minute: "2-digit",
-                                    }))))));
+                                } }, !isContinuedFromYesterday && renderItem(event, eventIdx)));
                         }
                         return null;
                     });

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

@@ -646,10 +646,10 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                                             dataType = "string";
                                         setFilterButtonCoordinate({ x: coordinateX, y: coordinateY });
                                         setFilterCurrentColumn(c);
-                                        setFilterCurrentDataType(dataType);
+                                        setFilterCurrentDataType(c.filterDataType ?? dataType);
                                         setFilterCurrentIndex(cIndex);
                                         setOpenFilter(true);
-                                        handleFilterPopupContent(c, dataType, cIndex);
+                                        handleFilterPopupContent(c, c.filterDataType ?? dataType, cIndex);
                                     } },
                                     React.createElement(Button, { variant: "borderless", icon: {
                                             element: React.createElement(ARIcon, { size: 24, icon: "Filter", fill: "var(--dark)", strokeWidth: 0 }),

package/dist/libs/types/index.d.ts

@@ -32,6 +32,7 @@ export type TableColumnType<T> = {
         nestedKey: string;
     };
     filters?: Option[];
+    filterDataType?: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
     render?: (item: T) => React.ReactNode;
     editable?: {
         type: "string" | "number" | "decimal" | "input-formatted-decimal" | "date-picker" | "single-select" | "multiple-select";

package/package.json

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