@pushwoosh/smart-components-kit 1.0.54 → 1.0.55

package/Table/components/DataTable/DataTable.js

@@ -13,11 +13,14 @@ export function DataTable(props) {
   const {
     columns,
     width,
+    bgColor,
     isBordered = true,
     paginationPadding,
     context,
+    allLimits,
     renderTableTop,
     renderAfter,
+    onClearRequest,
     hidePagination,
     hidePageSizeSelector
   } = props;
@@ -26,16 +29,27 @@ export function DataTable(props) {
     params
   } = context;
   const isFiltered = ((_data$value = data.value) === null || _data$value === void 0 ? void 0 : _data$value.isFiltered) || params.search;
+  const onClearRequestDefault = () => {
+    const keys = ['perPage', 'order', 'direction'];
+    context.onChangeParams(keys.reduce((acc, key) => ({
+      ...acc,
+      [key]: context.params[key]
+    }), {
+      page: 1,
+      search: ''
+    }));
+  };
   return React.createElement(DataTableContext.Provider, {
     value: context
   }, React.createElement(Table, {
     columns: columns,
     width: width,
-    isBordered: isBordered
+    isBordered: isBordered,
+    "$bgColor": bgColor
   }, renderTableTop === null || renderTableTop === void 0 ? void 0 : renderTableTop(context), 'renderHead' in props && props.renderHead(), 'renderList' in props ? props.renderList(context) : React.createElement(DataTableList, {
     renderItem: props.renderItem
   }), !hidePagination && React.createElement(DataTablePagination, {
-    allLimits: [10, 20, 50, 100],
+    allLimits: allLimits ?? [10, 20, 50, 100],
     padding: paginationPadding,
     hidePageSizeSelector: hidePageSizeSelector
   }, data.loading && React.createElement(Horizontal, {
@@ -58,23 +72,14 @@ export function DataTable(props) {
     "$gap": 4
   }, "Result:", React.createElement(LockedText, null, `${(_data$value3 = data.value) === null || _data$value3 === void 0 ? void 0 : _data$value3.total} item${(((_data$value4 = data.value) === null || _data$value4 === void 0 ? void 0 : _data$value4.total) ?? 0) > 1 ? 's' : ''}`)), !data.loading && !data.error && (((_data$value5 = data.value) === null || _data$value5 === void 0 ? void 0 : _data$value5.total) ?? 0) === 0 && !isFiltered && React.createElement(Horizontal, {
     "$placeItems": "center"
-  }, React.createElement(LockedText, null, "No items yet")), !data.loading && (((_data$value6 = data.value) === null || _data$value6 === void 0 || (_data$value6 = _data$value6.items) === null || _data$value6 === void 0 ? void 0 : _data$value6.length) ?? 0) === 0 && isFiltered && React.createElement(Horizontal, {
+  }, React.createElement(LockedText, null, "No items yet")), !data.loading && isFiltered && React.createElement(Horizontal, {
     "$gap": 16
-  }, !data.error && React.createElement(Horizontal, {
+  }, !data.error && (((_data$value6 = data.value) === null || _data$value6 === void 0 || (_data$value6 = _data$value6.items) === null || _data$value6 === void 0 ? void 0 : _data$value6.length) ?? 0) === 0 && React.createElement(Horizontal, {
     "$placeItems": "center",
     "$gap": 4
   }, "Result:", React.createElement(LockedText, null, "No match found")), React.createElement(Button, {
     color: "primary",
     view: "ghost",
-    onClick: () => {
-      const keys = ['perPage', 'order', 'direction'];
-      context.onChangeParams(keys.reduce((acc, key) => ({
-        ...acc,
-        [key]: context.params[key]
-      }), {
-        page: 1,
-        search: ''
-      }));
-    }
+    onClick: onClearRequest ?? onClearRequestDefault
   }, "Clear request")))), renderAfter === null || renderAfter === void 0 ? void 0 : renderAfter(context));
 }

package/Table/components/DataTable/types.d.ts

@@ -4,25 +4,31 @@ export type DataTableListProps<I, P extends DataTableParams> = {
     columns: string;
     width?: string | number;
     isBordered?: boolean;
+    bgColor?: string;
     context: DataTableContextType<I, P>;
     hidePagination?: boolean;
     hidePageSizeSelector?: boolean;
     paginationPadding?: string;
+    allLimits?: number[];
     renderTableTop?: (ctxValue: DataTableContextType<I, P>) => ReactNode;
     renderList: (ctxValue: DataTableContextType<I, P>) => ReactNode;
     renderAfter?: (ctxValue: DataTableContextType<I, P>) => ReactNode;
+    onClearRequest?: () => void;
 };
 export type DataTableItemProps<I, P extends DataTableParams> = {
     columns: string;
     width?: string | number;
     isBordered?: boolean;
+    bgColor?: string;
     context: DataTableContextType<I, P>;
     hidePagination?: boolean;
     hidePageSizeSelector?: boolean;
     paginationPadding?: string;
+    allLimits?: number[];
     renderTableTop?: (ctxValue: DataTableContextType<I, P>) => ReactNode;
     renderHead: () => ReactNode;
     renderItem: (item: I) => ReactNode;
     renderAfter?: (ctxValue: DataTableContextType<I, P>) => ReactNode;
+    onClearRequest?: () => void;
 };
 export type DataTableProps<I, P extends DataTableParams> = DataTableListProps<I, P> | DataTableItemProps<I, P>;

package/Table/hooks/useDataTableGetParams.js

@@ -39,7 +39,7 @@ export function useDataTableGetParams({
     const searchParams = new URLSearchParams(locationSearch);
     const paramsWithPrefix = mapKeys(params, key => `${prefix}${key}`);
     for (const [key, value] of Object.entries(paramsWithPrefix)) {
-      if (value === undefined || value === null || value === '') {
+      if (value === undefined || value === null || value === '' || Array.isArray(value) && value.length === 0) {
         searchParams.delete(key);
       } else {
         searchParams.set(key, String(value));

package/Table/styles.d.ts

@@ -3,6 +3,7 @@ export type TableProps = {
     columns: string;
     width?: string | number;
     isBordered?: boolean;
+    $bgColor?: string;
 };
 export declare const Table: import("styled-components").StyledComponent<"div", any, {
     $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;

package/Table/styles.js

@@ -8,7 +8,9 @@ export const Table = styled(Vertical).withConfig({
   columns
 }) => columns, ({
   isBordered
-}) => isBordered ? `1px solid ${Color.DIVIDER}` : 'none', ShapeRadius.SECTION, Color.CLEAR, ({
+}) => isBordered ? `1px solid ${Color.DIVIDER}` : 'none', ShapeRadius.SECTION, ({
+  $bgColor
+}) => $bgColor ?? Color.CLEAR, ({
   width
 }) => width ? `width: ${toCssValue(width)};` : '', Color.DIVIDER);
 export const Td = styled(GridContainer).attrs({

package/package.json

@@ -52,5 +52,5 @@
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
   },
-  "version": "1.0.54"
+  "version": "1.0.55"
 }