ar-design 0.2.31 → 0.2.32

package/dist/assets/css/components/data-display/table/styles.css

@@ -12,9 +12,10 @@
 .ar-table > .header {
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
+  gap: 3.75rem;
   padding: 1rem 1.5rem;
 }
 .ar-table > .header > .title {

package/dist/assets/css/components/feedback/popover/styles.css

@@ -11,6 +11,7 @@
   flex-direction: column;
   background-color: var(--white);
   width: 250px;
+  border: solid 1px var(--gray-200);
   border-radius: var(--border-radius-sm);
   box-shadow: 0 0 15px -2.5px rgba(var(--black-rgb), 0.1);
   z-index: 1051;
@@ -18,6 +19,7 @@
 }
 
 .ar-popover > .title {
+  background-color: var(--gray-100);
   padding: 0.5rem 1rem;
   border-bottom: solid 1px var(--gray-200);
 }
@@ -30,8 +32,10 @@
 }
 
 .ar-popover > .message {
+  position: relative;
   padding: 0.5rem 1rem;
-  font-size: 0.85rem;
+  color: var(--gray-700);
+  font-size: 0.8rem;
   text-wrap: wrap;
 }
 
@@ -42,4 +46,5 @@
   align-items: center;
   gap: 0 0.5rem;
   padding: 0.5rem 1rem;
+  border-top: solid 1px var(--gray-200);
 }

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

@@ -1,10 +1,15 @@
 import React from "react";
-import { TableColumnType } from "../../../libs/types";
+import { AllowedTypes, TableColumnType } from "../../../libs/types";
 import { IChildren } from "../../../libs/types/IGlobalProps";
 export type SearchedParam = {
     [key: string]: string;
 };
-type ActionType = {
+type ImportActionType = {
+    tooltip: string;
+    allowedTypes?: AllowedTypes[];
+    onClick: (formData: FormData | undefined, files: File[]) => void;
+};
+type CreateActionType = {
     tooltip: string;
     onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
@@ -14,9 +19,8 @@ interface IProps<T> extends IChildren {
     data: T[];
     columns: TableColumnType<T>[];
     actions?: {
-        create?: ActionType;
-        import?: ActionType;
-        filterClear?: ActionType;
+        import?: ImportActionType;
+        create?: CreateActionType;
     };
     selections?: (selectionItems: T[]) => void;
     previousSelections?: T[];

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

@@ -275,10 +275,7 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
                 React.createElement("h5", null, description)),
             React.createElement("div", { className: "actions" },
                 React.Children.count(children) > 0 && React.createElement("div", null, React.Children.map(children, (child) => child)),
-                actions && (React.createElement(React.Fragment, null,
-                    actions.create && (React.createElement(Button, { variant: "outlined", status: "dark", icon: { element: React.createElement(ARIcon, { icon: "Add", size: 16 }) }, tooltip: { text: actions.create.tooltip, direction: "top" }, onClick: actions.create.onClick })),
-                    actions.import && (React.createElement(Button, { variant: "outlined", status: "dark", icon: { element: React.createElement(ARIcon, { icon: "Import", size: 16 }) }, tooltip: { text: actions.import.tooltip, direction: "top" }, onClick: actions.import.onClick })),
-                    actions.filterClear && (React.createElement(Button, { variant: "outlined", status: "dark", icon: { element: React.createElement(ARIcon, { icon: "Trash", size: 16 }) }, tooltip: { text: actions.filterClear.tooltip, direction: "top" }, onClick: actions.filterClear.onClick }))))))),
+                actions && (React.createElement(React.Fragment, null, actions.create && (React.createElement(Button, { variant: "outlined", status: "dark", icon: { element: React.createElement(ARIcon, { icon: "Add", size: 16 }) }, tooltip: { text: actions.create.tooltip, direction: "top" }, onClick: actions.create.onClick }))))))),
         React.createElement("div", { ref: _tableContent, className: "content", onScroll: handleScroll },
             React.createElement("table", { ref: ref },
                 React.createElement("thead", null,

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

@@ -8,6 +8,7 @@ import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useSt
 import Input from "../../form/input";
 import Popover from "../../feedback/popover";
 import Utils from "../../../libs/infrastructure/shared/Utils";
+import Upload from "../../form/upload";
 const Table = forwardRef(({ children, title, description, data, columns, actions, selections, previousSelections, searchedParams, pagination, config = { isSearchable: false }, }, ref) => {
     // refs
     const _tableWrapper = useRef(null);
@@ -22,6 +23,9 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
     // states
     const [selectAll, setSelectAll] = useState(false);
     const [selectionItems, setSelectionItems] = useState([]);
+    // states -> File
+    const [files, setFiles] = useState([]);
+    const [formData, setFormData] = useState(undefined);
     // states -> Search
     const [searchedText, setSearchedText] = useState(undefined);
     const [_searchedParams, setSearchedParams] = useState(undefined);
@@ -229,11 +233,21 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
         (title || description || actions || React.Children.count(children) > 0) && (React.createElement("div", { className: "header" },
             React.createElement("div", { className: "title" },
                 React.createElement("h3", null, title),
-                React.createElement("h5", null, description)),
+                description && React.createElement("h5", null, description)),
             React.createElement("div", { className: "actions" }, actions && (React.createElement(React.Fragment, null,
-                actions.create && (React.createElement(Button, { variant: "outlined", status: "dark", icon: { element: React.createElement(ARIcon, { icon: "Add", size: 16 }) }, tooltip: { text: actions.create.tooltip, direction: "top" }, onClick: actions.create.onClick })),
-                actions.import && (React.createElement(Button, { variant: "outlined", status: "dark", icon: { element: React.createElement(ARIcon, { icon: "Import", size: 16 }) }, tooltip: { text: actions.import.tooltip, direction: "top" }, onClick: actions.import.onClick })),
-                actions.filterClear && (React.createElement(Button, { variant: "outlined", status: "dark", icon: { element: React.createElement(ARIcon, { icon: "Trash", size: 16 }) }, tooltip: { text: actions.filterClear.tooltip, direction: "top" }, onClick: actions.filterClear.onClick }))))))),
+                actions.import && (React.createElement(Popover, { title: "\u0130\u00E7eri Aktar", message: "Se\u00E7ti\u011Finiz dosyalar\u0131 uygulamaya y\u00FCkleyebilirsiniz. Bu i\u015Flem, dosyalardaki verileri sistemimize aktar\u0131r ve verilerle i\u015Flem yapman\u0131za olanak tan\u0131r.", content: React.createElement(Upload, { text: "Belge Y\u00FCkleyin", allowedTypes: actions.import.allowedTypes, file: files, onChange: (formData, files) => {
+                            setFormData(formData);
+                            setFiles(files);
+                        }, multiple: true }), onConfirm: (confirm) => {
+                        if (!confirm) {
+                            setFiles([]);
+                            return;
+                        }
+                        if (actions.import && actions.import.onClick)
+                            actions.import.onClick(formData, files);
+                    }, config: { buttons: { okButton: "Yükle", cancelButton: "İptal" } }, windowBlur: true },
+                    React.createElement(Button, { variant: "outlined", status: "success", icon: { element: React.createElement(ARIcon, { icon: "Import", size: 16 }) }, tooltip: { text: actions.import.tooltip, direction: "top" } }))),
+                actions.create && (React.createElement(Button, { variant: "outlined", status: "dark", icon: { element: React.createElement(ARIcon, { icon: "Add", size: 16 }) }, tooltip: { text: actions.create.tooltip, direction: "top" }, onClick: actions.create.onClick }))))))),
         React.createElement("div", { ref: _tableContent, className: "content", onScroll: handleScroll },
             React.createElement("table", { ref: ref },
                 React.createElement("thead", null,

package/dist/components/feedback/popover/IProps.d.ts

@@ -8,7 +8,7 @@ interface IProps extends IChildren {
     config?: {
         buttons: {
             okButton: string;
-            cancelButton: string;
+            cancelButton?: string;
         };
     };
 }

package/package.json

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