ar-design 0.2.30 → 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/assets/css/components/layout/layout.css

@@ -11,6 +11,8 @@
   box-sizing: border-box;
 }
 .ar-layout > aside.ar-aside.left {
+  position: sticky;
+  top: 0;
   display: flex;
   flex-direction: column;
   border-right: solid 1px var(--gray-200);
@@ -19,6 +21,11 @@
   display: flex;
   align-items: center;
 }
+.ar-layout > aside.ar-aside.left > footer {
+  position: fixed;
+  bottom: 1rem;
+}
+
 .ar-layout > aside.ar-aside.right {
 }
 

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/dist/components/form/checkbox/index.js

@@ -11,8 +11,8 @@ const Checkbox = forwardRef(({ label, size = "normal", status, border = { radius
     _checkboxClassName.push(...Utils.GetClassName("filled", checked ? status : "light", border, size, undefined, attributes.className));
     // useEffects
     useEffect(() => {
-        setChecked(attributes.checked ?? false);
-    }, [attributes.checked]);
+        setChecked(attributes.checked ?? attributes.defaultChecked ?? false);
+    }, [attributes.checked, attributes.defaultChecked]);
     return (React.createElement("div", { className: "ar-checkbox-wrapper" },
         React.createElement("label", null,
             React.createElement("input", { ref: ref, type: "checkbox", ...attributes, size: 0, onChange: (event) => {

package/dist/components/layout/IProps.d.ts

@@ -8,6 +8,7 @@ export interface IHeaderProps {
 export interface ILSiderProps {
     image?: React.ReactElement<SVGElement | HTMLImageElement>;
     text?: string | React.JSX.Element;
+    footer?: string;
 }
 export interface IMainProps extends IChildren {
 }

package/dist/components/layout/LSider.js

@@ -2,7 +2,8 @@
 import React from "react";
 import { useLayout } from "../../libs/core/application/hooks";
 import Title from "../data-display/typography/title/Title";
-const LSider = ({ image, text }) => {
+import Paragraph from "../data-display/typography/paragraph/Paragraph";
+const LSider = ({ image, text, footer }) => {
     // hooks
     const { config } = useLayout();
     const sider = config.layout.sider.left;
@@ -12,7 +13,9 @@ const LSider = ({ image, text }) => {
         React.createElement("div", { className: "logo" },
             image,
             React.createElement(Title, { Level: "h4", align: "center" }, text)),
-        React.createElement("div", null, sider.element)));
+        React.createElement("div", null, sider.element),
+        footer && (React.createElement("footer", null,
+            React.createElement(Paragraph, { size: "small" }, footer)))));
 };
 LSider.displayName = "Layout.LSider";
 export default LSider;

package/package.json

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