ar-design 0.4.2 → 0.4.3

package/dist/assets/css/components/form/select/styles.css

@@ -92,7 +92,6 @@
             white-space: nowrap;
             text-overflow: ellipsis;
             outline: none;
-            padding-right: 3.5rem;
           }
         }
       }

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

@@ -76,6 +76,8 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
     const [totalRecords, setTotalRecords] = useState(0);
     const [currentPage, setCurrentPage] = useState(1);
     const [selectedPerPage, setSelectedPerPage] = useState(pagination?.perPage ?? 10);
+    // states -> Mobil
+    const [isMobile, setIsMobile] = useState(false);
     // hooks
     // Dışarıdan gelen ref'i _innerRef'e bağla.
     useImperativeHandle(ref, () => _innerRef.current);
@@ -150,6 +152,11 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
             updateStickyPositions(tbodyElements);
         });
     }, []);
+    const handleResize = useMemo(() => {
+        return (_) => {
+            setIsMobile(window.innerWidth <= 768);
+        };
+    }, []);
     const handleSearch = useCallback((event) => {
         const { name, value } = event.target;
         const operator = filterPopupOption?.key == name
@@ -631,6 +638,13 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
         setCurrentPage(1);
         setTimeout(() => handleScroll(), 0);
     }, [selectedPerPage]);
+    useEffect(() => {
+        setIsMobile(window.innerWidth <= 768);
+        window.addEventListener("resize", handleResize);
+        return () => {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, []);
     return (React.createElement("div", { ref: _tableWrapper, className: _tableClassName.map((c) => c).join(" ") },
         (title || description || actions || React.Children.count(children) > 0) && (React.createElement("div", { className: "header" },
             React.createElement("div", { className: "title" },
@@ -745,17 +759,28 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                         })))),
                 React.createElement("tbody", { ref: _tBody }, renderTBody))),
         React.createElement(FilterPopup, { tableContent: _tableContent, coordinate: filterButtonCoordinate, buttons: _filterButton }, filterPopupContent),
-        pagination && pagination.totalRecords > pagination.perPage && (React.createElement("div", { className: "footer" },
-            React.createElement("span", null,
+        pagination && (React.createElement("div", { className: "footer" },
+            React.createElement("span", null, isMobile ? (React.createElement(React.Fragment, null,
+                React.createElement("strong", null,
+                    (currentPage - 1) * selectedPerPage + 1,
+                    " -",
+                    " ",
+                    Math.min(currentPage * selectedPerPage, pagination.totalRecords || getData.length),
+                    " of",
+                    " ",
+                    pagination.totalRecords || getData.length))) : (React.createElement(React.Fragment, null,
                 React.createElement("strong", null,
                     "Showing ",
-                    getData.length),
+                    (currentPage - 1) * selectedPerPage + 1,
+                    " to",
+                    " ",
+                    Math.min(currentPage * selectedPerPage, pagination.totalRecords || getData.length)),
                 " ",
                 React.createElement("span", null,
                     "of ",
-                    selectedPerPage ?? getData.length,
-                    " agreement")),
-            React.createElement(Pagination, { totalRecords: config.isServerSide ? pagination.totalRecords : totalRecords ?? 0, currentPage: currentPage, perPage: selectedPerPage, onChange: (currentPage, perPage) => {
+                    pagination.totalRecords || getData.length,
+                    " agreements")))),
+            React.createElement(Pagination, { totalRecords: config.isServerSide ? pagination.totalRecords : (totalRecords ?? 0), currentPage: currentPage, perPage: selectedPerPage, onChange: (currentPage, perPage) => {
                     setCurrentPage(currentPage);
                     setSelectedPerPage(perPage);
                     pagination.onChange?.(currentPage, perPage);

package/dist/components/form/select/Props.d.ts

@@ -25,4 +25,7 @@ export type Props = {
     onClick?: () => void;
     onCreate?: (option: Option) => void;
     placeholder?: string;
+    config?: {
+        clear?: boolean;
+    };
 } & (IMultiple | ISingle) & IVariant & IColors & IBorder & IIcon & ISize & IUpperCase & IValidation & IDisabled;

package/dist/components/form/select/index.js

@@ -6,7 +6,7 @@ import Chip from "../../data-display/chip";
 import Checkbox from "../checkbox";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import ReactDOM from "react-dom";
-const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }, style, options, value, onChange, onSearch, onClick, onCreate, multiple, placeholder, validation, upperCase, disabled, }) => {
+const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }, style, options, value, onChange, onSearch, onClick, onCreate, multiple, placeholder, validation, upperCase, disabled, config = { clear: true }, }) => {
     const _selectionClassName = ["selections"];
     // refs
     const _arSelect = useRef(null);
@@ -279,7 +279,7 @@ const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }
                     React.createElement("div", { className: "items" }, value.map((_value, index) => (React.createElement(Chip, { key: index, variant: status?.selected?.variant || "filled", color: status?.selected?.color || status?.color, text: _value.text }))))),
                 React.createElement("span", { ref: _placeholder, className: `placeholder ${value.length > 0 ? "visible" : "hidden"}`, onClick: () => setOptionsOpen((prev) => !prev) },
                     validation ? "* " : "",
-                    placeholder))) : (React.createElement(Input, { ref: _singleInput, style: style, variant: variant, color: !Utils.IsNullOrEmpty(validation?.text) ? "red" : color, 
+                    placeholder))) : (React.createElement(Input, { ref: _singleInput, style: { ...style, paddingRight: config.clear === false ? "1.5rem" : "3.5rem" }, variant: variant, color: !Utils.IsNullOrEmpty(validation?.text) ? "red" : color, 
                 // status={!Utils.IsNullOrEmpty(validation?.text) ? "danger" : status}
                 border: { radius: border.radius }, value: singleInputText, onClick: () => {
                     onClick && onClick();
@@ -295,14 +295,14 @@ const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }
                     if (event.key === "Enter")
                         return;
                     setSearchText(event.currentTarget.value);
-                }, placeholder: placeholder, validation: validation, disabled: disabled })),
+                }, placeholder: placeholder, validation: validation, disabled: disabled, readOnly: true })),
             React.createElement("div", { className: "buttons" },
-                React.createElement("span", { className: `button-clear ${!disabled && (multiple ? value.length > 0 : value) ? "opened" : "closed"}`, onClick: (event) => {
+                config?.clear === true && (React.createElement("span", { className: `button-clear ${!disabled && (multiple ? value.length > 0 : value) ? "opened" : "closed"}`, onClick: (event) => {
                         if (disabled)
                             return;
                         event.stopPropagation();
                         handleCleanSelection();
-                    } }),
+                    } })),
                 React.createElement("span", { className: `angel-down ${!disabled && optionsOpen ? "opened" : "closed"}`, onClick: (event) => {
                         if (disabled)
                             return;

package/dist/components/navigation/pagination/index.js

@@ -39,10 +39,10 @@ const Pagination = ({ currentPage, totalRecords, perPage, onChange }) => {
         setPages(liItems);
     }, [totalRecords, currentPage, perPage, config.perPage]);
     return (React.createElement("div", { className: "ar-pagination" },
-        React.createElement(Select, { value: selectedPerPage, options: [...perPageOptions, { value: totalRecords, text: "Tümü" }], onChange: (option) => {
+        React.createElement(Select, { variant: "borderless", value: selectedPerPage, options: [...perPageOptions, { value: totalRecords, text: "Tümü" }], onChange: (option) => {
                 setSelectedPerPage(option);
                 handlePageChange(1, option?.value);
-            } }),
+            }, config: { clear: false }, style: { width: 65 } }),
         React.createElement("ul", null,
             React.createElement("li", { className: currentPage === 1 ? "passive" : "", onClick: () => {
                     if (currentPage === 1)

package/package.json

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