ar-design 0.2.44 → 0.2.46

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

@@ -56,9 +56,13 @@
 
 .ar-table > .content > table > thead > tr > th,
 .ar-table > .content > table > tbody > tr > td {
-  height: 3rem;
-  padding: 0 1.5rem;
+  height: 2.5rem;
 }
+.ar-table > .content > table > thead > tr > th,
+.ar-table > .content > table > tbody > tr > td > .table-cell {
+  padding: 0 1rem;
+}
+
 .ar-table > .content > table > thead > tr > th.min-w,
 .ar-table > .content > table > tbody > tr > td.min-w {
   min-width: 150px;
@@ -157,7 +161,10 @@
   text-wrap: nowrap;
 }
 
-.ar-table > .content > table > tbody > tr > td > span.subitem-open-button {
+.ar-table > .content > table > tbody > tr > td > .subitem-open-button-wrapper {
+  padding: 0 1rem;
+}
+.ar-table > .content > table > tbody > tr > td > .subitem-open-button-wrapper > span {
   display: inline-block;
   width: 0.75rem;
   height: 0.75rem;
@@ -168,10 +175,10 @@
   cursor: pointer;
   transition: transform 100ms ease-in-out;
 }
-.ar-table > .content > table > tbody > tr > td > span.subitem-open-button.opened {
+.ar-table > .content > table > tbody > tr > td > .subitem-open-button-wrapper > span.opened {
   transform: rotate(135deg);
 }
-.ar-table > .content > table > tbody > tr > td > span.subitem-open-button.passive {
+.ar-table > .content > table > tbody > tr > td > .subitem-open-button-wrapper > span.passive {
   border-top-color: var(--gray-300);
   border-right-color: var(--gray-300);
   cursor: no-drop;

package/dist/assets/css/components/form/text-editor/styles.css

@@ -8,20 +8,23 @@
   display: flex;
   flex-direction: row;
   gap: 0.25rem;
+  margin-top: -1px;
+  border: solid 1px transparent;
+  border-left-color: var(--gray-300);
+  border-right-color: var(--gray-300);
+  border-bottom-color: var(--gray-300);
 }
 .ar-text-editor > iframe {
   width: 100%;
-  border-bottom: none;
   border-bottom-left-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
 }
 .ar-text-editor > .resize {
   position: relative;
-  background-color: var(--gray-200);
+  background-color: var(--gray-100);
   width: 100%;
   height: 1.5rem;
   border: solid 1px transparent;
-  border-top-color: var(--gray-400);
   border-left-color: var(--gray-300);
   border-right-color: var(--gray-300);
   border-bottom-color: var(--gray-300);
@@ -36,7 +39,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: var(--gray-500);
-  width: 2rem;
+  width: 1.5rem;
   height: 0.1rem;
   box-shadow: 0px -5px 0 0px var(--gray-500), 0px 5px 0 0px var(--gray-500);
 }

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

@@ -7,6 +7,8 @@ export type SearchedParam = {
 type ImportActionType = {
     tooltip: string;
     allowedTypes?: AllowedTypes[];
+    prefixItem?: React.ReactNode;
+    suffixItem?: React.ReactNode;
     onClick: (formData: FormData | undefined, files: File[]) => void;
 };
 type CreateActionType = {
@@ -28,7 +30,7 @@ interface IProps<T> extends IChildren {
     pagination?: {
         totalRecords: number;
         perPage: number;
-        onChange: (currentPage: number) => void;
+        onChange?: (currentPage: number) => void;
     };
     config?: {
         isServerSide?: boolean;
@@ -36,7 +38,11 @@ interface IProps<T> extends IChildren {
         scroll?: {
             maxHeight: number;
         };
-        subrowSelector?: string;
+        subrow?: {
+            openAutomatically?: boolean;
+            selector?: string;
+            button?: boolean;
+        };
     };
 }
 export default IProps;

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

@@ -52,7 +52,7 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
             filterCleaner: () => {
                 if (config.isServerSide) {
                     setSearchedParams({});
-                    pagination && pagination.onChange(1);
+                    // pagination && pagination.onChange(1);
                 }
                 else {
                     setSearchedText({});
@@ -133,7 +133,7 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
             _searchTimeOut.current = setTimeout(() => {
                 setSearchedParams((prev) => ({ ...prev, [event.target.name]: event.target.value }));
                 setCurrentPage(1);
-                pagination && pagination.onChange(1);
+                // pagination && pagination.onChange(1);
             }, 750);
         }
         else {
@@ -234,7 +234,7 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
             setSearchedText(checkboxSelectedParams);
         }
         setCurrentPage(1);
-        pagination && pagination.onChange(1);
+        // pagination && pagination.onChange(1);
         // Filters...
         // setSelectedfilterCheckboxItems((prev) => {
         //   debugger;
@@ -401,7 +401,7 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
                     pagination?.perPage ?? getData().length,
                     " agreement")),
             React.createElement(Pagination, { totalRecords: pagination.totalRecords, currentPage: currentPage, perPage: pagination.perPage, onChange: (currentPage) => {
-                    config.isServerSide && pagination.onChange(currentPage);
+                    // config.isServerSide && pagination.onChange(currentPage);
                     setCurrentPage(currentPage);
                 } })))));
 });

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

@@ -19,7 +19,9 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
     const _searchTextInputs = useRef([]);
     const _searchTimeOut = useRef(null);
     // variables
-    const _subrowSelector = config.subrowSelector ?? "subitems";
+    const _subrowOpenAutomatically = config.subrow?.openAutomatically ?? false;
+    const _subrowSelector = config.subrow?.selector ?? "subitems";
+    const _subrowButton = config.subrow?.button ?? false;
     // className
     const _tableClassName = ["ar-table", "scroll"];
     // states
@@ -113,7 +115,8 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                 clearTimeout(_searchTimeOut.current);
             _searchTimeOut.current = setTimeout(() => {
                 setSearchedParams((prev) => ({ ...prev, [event.target.name]: event.target.value }));
-                pagination && pagination.onChange(1);
+                if (pagination && pagination.onChange)
+                    pagination.onChange(1);
             }, 750);
         }
         else {
@@ -164,10 +167,15 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                     if (value.length === 0)
                         return true;
                     else {
-                        return value.some((v) => Object.entries(_itemValue ?? {}).some(([_, objValue]) => String(objValue).toLocaleLowerCase().includes(v.toLocaleLowerCase())));
+                        return value.some((v) => {
+                            if (Array.isArray(_itemValue)) {
+                                return Object.values(_itemValue?.[0] ?? {}).some((objValue) => {
+                                    return String(objValue).toLocaleLowerCase().includes(String(v).toLocaleLowerCase());
+                                });
+                            }
+                        });
                     }
                 }
-                return Object.entries(_itemValue ?? {}).some(([_, objValue]) => String(objValue).toLocaleLowerCase().includes(value.toLocaleLowerCase()));
             }
             if (Array.isArray(_itemValue)) {
                 console.log("Buradasın", _itemValue);
@@ -177,6 +185,22 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
     };
     const getData = useMemo(() => {
         let _data = [...data];
+        if (_subrowOpenAutomatically) {
+            data.forEach((item, index) => {
+                if (_subrowSelector in item) {
+                    setShowSubitems((prev) => ({
+                        ...prev,
+                        [`${index}`]: !prev[`${index}`],
+                    }));
+                }
+                else {
+                    setShowSubitems((prev) => ({
+                        ...prev,
+                        [`${index}`]: false,
+                    }));
+                }
+            });
+        }
         if (searchedText && Object.keys(searchedText).length > 0) {
             _data = _data.filter((item) => deepSearch(item, searchedText));
             setTotalRecords(_data.length);
@@ -193,7 +217,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
         setTimeout(() => handleScroll(), 0);
         return _data;
     }, [data, searchedText, currentPage]);
-    const renderCell = (item, c, cIndex, index) => {
+    const renderCell = (item, c, cIndex, index, depth) => {
         let render;
         // `c.key` bir string ise
         if (typeof c.key !== "object") {
@@ -206,8 +230,8 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                 render = c.render ? c.render(item) : _item[c.key.nestedKey];
             }
         }
-        // Diğer durumlarda `null` döndür
         else {
+            // Diğer durumlarda `null` döndür
             render = null;
         }
         const _className = [];
@@ -217,9 +241,11 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
             _className.push(`align-content-${c.config.alignContent}`);
         if (c.config?.textWrap)
             _className.push(`text-${c.config.textWrap}`);
-        return (React.createElement("td", { key: `cell-${index}-${cIndex}`, className: _className.join(" "), style: c.config?.width ? { minWidth: c.config.width, maxWidth: c.config.width } : {}, "data-sticky-position": c.config?.sticky }, React.isValidElement(render) ? render : String(render)));
+        return (React.createElement("td", { key: `cell-${index}-${cIndex}`, className: _className.join(" "), style: c.config?.width ? { minWidth: c.config.width, maxWidth: c.config.width, paddingLeft: `${depth}rem` } : {}, "data-sticky-position": c.config?.sticky },
+            React.createElement("div", { className: "table-cell" }, React.isValidElement(render) ? render : String(render))));
     };
     const renderRow = (item, index) => {
+        const isHasSubitems = _subrowSelector in item;
         return (React.createElement(React.Fragment, null,
             React.createElement("tr", { key: `row-${index}` },
                 selections && (React.createElement("td", { className: "sticky-left", "data-sticky-position": "left" },
@@ -229,31 +255,34 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                             else
                                 setSelectionItems((prev) => prev.filter((_item) => _item !== item));
                         } }))),
-                data.some((item) => _subrowSelector in item) && (React.createElement("td", { style: { width: 1 } }, item[_subrowSelector] && (React.createElement("span", { className: `subitem-open-button ${showSubitems[index] && "opened"}`, onClick: () => {
-                        setShowSubitems((prev) => ({
-                            ...prev,
-                            [`${index}`]: !prev[`${index}`],
-                        }));
-                    } })))),
-                columns.map((c, cIndex) => renderCell(item, c, cIndex, index))),
+                _subrowButton && isHasSubitems ? (React.createElement("td", null, item[_subrowSelector] && (React.createElement("div", { className: "subitem-open-button-wrapper" },
+                    React.createElement("span", { className: `subitem-open-button ${(showSubitems[index] && "opened") ?? ""}`, onClick: () => {
+                            console.log(showSubitems);
+                            setShowSubitems((prev) => ({
+                                ...prev,
+                                [`${index}`]: !prev[`${index}`],
+                            }));
+                        } }))))) : _subrowButton ? (React.createElement("td", { style: { width: 0, minWidth: 0 } })) : null,
+                columns.map((c, cIndex) => renderCell(item, c, cIndex, index, 0))),
             showSubitems[index] && item[_subrowSelector] && (React.createElement(SubitemList, { items: item[_subrowSelector], columns: columns, index: index, depth: 1.5 }))));
     };
     const SubitemList = ({ items, columns, index, depth }) => {
         return items.map((subitem, subindex) => {
-            const x = subitem[_subrowSelector];
+            const _subitem = subitem[_subrowSelector];
             return (React.createElement(React.Fragment, null,
                 React.createElement("tr", { key: `subitem-${index}-${subindex}` },
-                    data.some((item) => _subrowSelector in item) && (React.createElement("td", { style: { paddingLeft: `${depth * 1.5}rem` } },
-                        React.createElement("span", { className: `subitem-open-button ${showSubitems[`${index}.${subindex}`] && "opened"} ${!x && "passive"}`, onClick: () => {
-                                if (!x)
-                                    return;
-                                setShowSubitems((prev) => ({
-                                    ...prev,
-                                    [`${index}.${subindex}`]: !prev[`${index}.${subindex}`],
-                                }));
-                            } }))),
-                    columns.map((c, cIndex) => renderCell(subitem, c, cIndex, subindex))),
-                showSubitems[`${index}.${subindex}`] && x && (React.createElement(SubitemList, { items: x, columns: columns, index: subindex, depth: depth * 1.5 }))));
+                    _subrowSelector in subitem && _subrowButton && (React.createElement("td", { style: { paddingLeft: `${depth}rem` } },
+                        React.createElement("div", { className: "subitem-open-button-wrapper" },
+                            React.createElement("span", { className: `${(showSubitems[`${index}.${subindex}`] && "opened") ?? ""} ${!_subitem && "passive"}`, onClick: () => {
+                                    if (!_subitem)
+                                        return;
+                                    setShowSubitems((prev) => ({
+                                        ...prev,
+                                        [`${index}.${subindex}`]: !prev[`${index}.${subindex}`],
+                                    }));
+                                } })))),
+                    columns.map((c, cIndex) => renderCell(subitem, c, cIndex, subindex, depth * 1.5))),
+                showSubitems[`${index}.${subindex}`] && _subitem && (React.createElement(SubitemList, { items: _subitem, columns: columns, index: subindex, depth: depth * 1.5 }))));
         });
     };
     // useEffects
@@ -287,7 +316,8 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
             setSearchedText((prev) => ({ ...prev, ...checkboxSelectedParams }));
         }
         setCurrentPage(1);
-        pagination && pagination.onChange(1);
+        if (pagination && pagination.onChange)
+            pagination.onChange(1);
     }, [checkboxSelectedParams]);
     useEffect(() => {
         if (!selections)
@@ -307,10 +337,13 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                 React.createElement("h3", null, title),
                 description && React.createElement("h5", null, description)),
             React.createElement("div", { className: "actions" }, actions && (React.createElement(React.Fragment, null,
-                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) => {
+                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(React.Fragment, null,
+                        actions.import.prefixItem,
+                        React.createElement(Upload, { text: "Belge Y\u00FCkleyin", allowedTypes: actions.import.allowedTypes, file: files, onChange: (formData, files) => {
+                                setFormData(formData);
+                                setFiles(files);
+                            }, multiple: true }),
+                        actions.import.suffixItem), onConfirm: (confirm) => {
                         if (!confirm) {
                             setFiles([]);
                             return;
@@ -324,7 +357,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
             React.createElement("table", { ref: ref },
                 React.createElement("thead", null,
                     React.createElement("tr", { key: "selection" },
-                        data.some((item) => _subrowSelector in item) && React.createElement("td", { style: { width: 1 } }),
+                        _subrowButton && React.createElement("td", { style: { width: 0, minWidth: 0 } }),
                         selections && (React.createElement("th", { className: "selection-col sticky-left", "data-sticky-position": "left" },
                             React.createElement(Checkbox, { variant: "filled", status: "primary", checked: selectAll, onChange: (event) => {
                                     if (_checkboxItems.current.length > 0) {
@@ -391,7 +424,8 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                     pagination?.perPage ?? getData.length,
                     " agreement")),
             React.createElement(Pagination, { totalRecords: config.isServerSide ? pagination.totalRecords : totalRecords ?? 0, currentPage: currentPage, perPage: pagination.perPage, onChange: (currentPage) => {
-                    config.isServerSide && pagination.onChange(currentPage);
+                    if (config.isServerSide && pagination && pagination.onChange)
+                        pagination.onChange(currentPage);
                     setCurrentPage(currentPage);
                 } })))));
 });

package/dist/components/form/text-editor/index.js

@@ -8,6 +8,8 @@ const TextEditor = ({ name, value, onChange, placeholder, height, multilang, val
     // refs
     const _container = useRef(null);
     const _arIframe = useRef(null);
+    const _onChange = useRef(onChange);
+    const _onChangeTimeOut = useRef(null);
     // states
     const [iframe, setIframe] = useState(null);
     const [iframeDocument, setIframeDocument] = useState(undefined);
@@ -74,6 +76,10 @@ const TextEditor = ({ name, value, onChange, placeholder, height, multilang, val
             selection?.addRange(range);
         }
     }, [value, iframeDocument]);
+    useEffect(() => {
+        // onChange değiştiğinde ref'i güncelle
+        _onChange.current = onChange;
+    }, [onChange]);
     useEffect(() => {
         // Iframe yüklendikten sonra çalışacaktır.
         if (!iframe)
@@ -85,11 +91,15 @@ const TextEditor = ({ name, value, onChange, placeholder, height, multilang, val
         _iframeDocument.designMode = "on";
         // Herhangi bir değişikliği izlemek için MutationObserver kullan
         const observer = new MutationObserver((mutationsList) => {
-            mutationsList.forEach(() => {
-                _iframeDocument?.body.innerHTML === "<br>"
-                    ? onChangeRef.current(undefined)
-                    : onChangeRef.current(_iframeDocument.body.innerHTML);
-            });
+            if (_onChangeTimeOut.current)
+                clearTimeout(_onChangeTimeOut.current);
+            _onChangeTimeOut.current = setTimeout(() => {
+                mutationsList.forEach(() => {
+                    _iframeDocument?.body.innerHTML === "<br>"
+                        ? _onChange.current(undefined)
+                        : _onChange.current(_iframeDocument.body.innerHTML);
+                });
+            }, 750);
         });
         // Observer'ı body üzerinde başlat
         observer.observe(_iframeDocument.body, { childList: true, subtree: true, characterData: true, attributes: true });
@@ -112,16 +122,11 @@ const TextEditor = ({ name, value, onChange, placeholder, height, multilang, val
             }
         };
     }, []);
-    const onChangeRef = useRef(onChange);
-    // onChange değiştiğinde ref'i güncelle
-    useEffect(() => {
-        onChangeRef.current = onChange;
-    }, [onChange]);
     return (React.createElement("div", { ref: _container, className: "ar-text-editor" },
-        React.createElement("div", { className: "toolbar" }, toolbarButtons.map(({ command, icon, tooltip }) => (React.createElement(Button, { key: command, type: "button", variant: "borderless", status: "secondary", icon: { element: React.createElement(ARIcon, { icon: icon, size: 18, fill: "var(--gray-700)" }) }, tooltip: {
+        React.createElement("iframe", { ref: _arIframe, name: name, className: _iframeClassName.map((c) => c).join(" "), height: height }),
+        React.createElement("div", { className: "toolbar" }, toolbarButtons.map(({ command, icon, tooltip }) => (React.createElement(Button, { key: command, type: "button", variant: "borderless", status: "secondary", border: { radius: "none" }, icon: { element: React.createElement(ARIcon, { icon: icon, size: 18, fill: "var(--gray-700)" }) }, tooltip: {
                 text: tooltip,
             }, onClick: () => execCommand(command) })))),
-        React.createElement("iframe", { ref: _arIframe, name: name, className: _iframeClassName.map((c) => c).join(" "), height: height }),
         React.createElement("div", { className: "resize", onMouseDown: handleMouseDown }),
         validation?.text && React.createElement("span", { className: "validation" }, validation.text)));
 };

package/package.json

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