@blocklet/payment-react 1.14.25 → 1.14.26

package/es/components/table.js

@@ -17,8 +17,8 @@ const Table = React.memo(
       download: false,
       filter: false,
       selectableRows: "none",
-      rowsPerPage: 10,
-      rowsPerPageOptions: [10, 20, 50, 100],
+      rowsPerPage: isMobile ? 5 : 10,
+      rowsPerPageOptions: [5, 10, 20, 50, 100],
       searchDebounceTime: 300,
       tableBodyHeight: "100%",
       loading: true
@@ -98,6 +98,8 @@ const Wrapped = styled(Datatable)`
   }
   td.MuiTableCell-root {
     border-bottom: none;
+    padding-top: 12px;
+    padding-bottom: 12px;
     &:first-of-type {
       padding-left: 20px;
     }
@@ -135,6 +137,10 @@ const Wrapped = styled(Datatable)`
   > div {
     overflow: auto;
   }
+  .custom-toobar-title-inner {
+    display: flex;
+    align-items: center;
+  }
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
     th a,
     td a {

package/es/hooks/table.d.ts

@@ -0,0 +1 @@
+export declare function useDefaultPageSize(pageSize?: number): number;

package/es/hooks/table.js

@@ -0,0 +1,5 @@
+import { useMobile } from "./mobile.js";
+export function useDefaultPageSize(pageSize = 10) {
+  const { isMobile } = useMobile();
+  return isMobile ? 5 : pageSize;
+}

package/es/index.d.ts

@@ -31,5 +31,6 @@ export * from './libs/connect';
 export * from './contexts/payment';
 export * from './hooks/subscription';
 export * from './hooks/mobile';
+export * from './hooks/table';
 export { translations, createTranslator } from './locales';
 export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, };

package/es/index.js

@@ -31,6 +31,7 @@ export * from "./libs/connect.js";
 export * from "./contexts/payment.js";
 export * from "./hooks/subscription.js";
 export * from "./hooks/mobile.js";
+export * from "./hooks/table.js";
 export { translations, createTranslator } from "./locales/index.js";
 export {
   api,

package/lib/components/table.js

@@ -36,8 +36,8 @@ const Table = _react.default.memo(({
     download: false,
     filter: false,
     selectableRows: "none",
-    rowsPerPage: 10,
-    rowsPerPageOptions: [10, 20, 50, 100],
+    rowsPerPage: isMobile ? 5 : 10,
+    rowsPerPageOptions: [5, 10, 20, 50, 100],
     searchDebounceTime: 300,
     tableBodyHeight: "100%",
     loading: true
@@ -118,6 +118,8 @@ const Wrapped = (0, _system.styled)(_Datatable.default)`
   }
   td.MuiTableCell-root {
     border-bottom: none;
+    padding-top: 12px;
+    padding-bottom: 12px;
     &:first-of-type {
       padding-left: 20px;
     }
@@ -155,6 +157,10 @@ const Wrapped = (0, _system.styled)(_Datatable.default)`
   > div {
     overflow: auto;
   }
+  .custom-toobar-title-inner {
+    display: flex;
+    align-items: center;
+  }
   @media (max-width: ${({
   theme
 }) => theme.breakpoints.values.md}px) {

package/lib/hooks/table.d.ts

@@ -0,0 +1 @@
+export declare function useDefaultPageSize(pageSize?: number): number;

package/lib/hooks/table.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDefaultPageSize = useDefaultPageSize;
+var _mobile = require("./mobile");
+function useDefaultPageSize(pageSize = 10) {
+  const {
+    isMobile
+  } = (0, _mobile.useMobile)();
+  return isMobile ? 5 : pageSize;
+}

package/lib/index.d.ts

@@ -31,5 +31,6 @@ export * from './libs/connect';
 export * from './contexts/payment';
 export * from './hooks/subscription';
 export * from './hooks/mobile';
+export * from './hooks/table';
 export { translations, createTranslator } from './locales';
 export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, };

package/lib/index.js

@@ -303,5 +303,17 @@ Object.keys(_mobile).forEach(function (key) {
     }
   });
 });
+var _table3 = require("./hooks/table");
+Object.keys(_table3).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _table3[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _table3[key];
+    }
+  });
+});
 var _locales = require("./locales");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.14.25",
+  "version": "1.14.26",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -93,7 +93,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.14.25",
+    "@blocklet/payment-types": "1.14.26",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -123,5 +123,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "d326f7f50aeb5a0b727b1eb1f5b042f82e2e4059"
+  "gitHead": "bda6ee657434e48075cebe406a68c4ed67721281"
 }

package/src/components/table.tsx

@@ -21,8 +21,8 @@ const Table = React.memo(
       download: false,
       filter: false,
       selectableRows: 'none',
-      rowsPerPage: 10,
-      rowsPerPageOptions: [10, 20, 50, 100],
+      rowsPerPage: isMobile ? 5 : 10,
+      rowsPerPageOptions: [5, 10, 20, 50, 100],
       searchDebounceTime: 300,
       tableBodyHeight: '100%',
       loading: true,
@@ -108,6 +108,8 @@ const Wrapped = styled(Datatable)`
   }
   td.MuiTableCell-root {
     border-bottom: none;
+    padding-top: 12px;
+    padding-bottom: 12px;
     &:first-of-type {
       padding-left: 20px;
     }
@@ -145,6 +147,10 @@ const Wrapped = styled(Datatable)`
   > div {
     overflow: auto;
   }
+  .custom-toobar-title-inner {
+    display: flex;
+    align-items: center;
+  }
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
     th a,
     td a {

package/src/hooks/table.ts

@@ -0,0 +1,6 @@
+import { useMobile } from './mobile';
+
+export function useDefaultPageSize(pageSize: number = 10) {
+  const { isMobile } = useMobile();
+  return isMobile ? 5 : pageSize;
+}

package/src/index.ts

@@ -33,6 +33,7 @@ export * from './libs/connect';
 export * from './contexts/payment';
 export * from './hooks/subscription';
 export * from './hooks/mobile';
+export * from './hooks/table';
 
 export { translations, createTranslator } from './locales';