ar-design 0.2.44 → 0.2.45

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;

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

@@ -113,7 +113,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 {
@@ -287,7 +288,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 +309,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;
@@ -391,7 +396,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.45",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",