@faasjs/ant-design 0.0.2-beta.357 → 0.0.2-beta.361

package/dist/index.d.ts

@@ -1,11 +1,12 @@
 import * as react_use_lib_misc_hookState from 'react-use/lib/misc/hookState';
-import { DescriptionsProps, DrawerProps as DrawerProps$1, FormItemProps as FormItemProps$1, InputProps, InputNumberProps, SwitchProps, SelectProps, FormProps as FormProps$1, TableColumnProps, TableProps as TableProps$1 } from 'antd';
+import { DescriptionsProps, DrawerProps as DrawerProps$1, FormItemProps as FormItemProps$1, InputProps, InputNumberProps, SwitchProps, SelectProps, FormProps as FormProps$1, TableColumnProps, TablePaginationConfig, TableProps as TableProps$1 } from 'antd';
 export { Drawer } from 'antd';
 import { FaasDataWrapperProps } from '@faasjs/react';
 import * as antd_lib_form_Form from 'antd/lib/form/Form';
 import { RuleObject } from 'rc-field-form/lib/interface';
 import { LazyExoticComponent, ComponentType } from 'react';
 import { RouteProps } from 'react-router-dom';
+import { FilterValue, SorterResult, TableCurrentDataSource } from 'antd/lib/table/interface';
 
 declare type BlankProps = {
     value?: any;
@@ -18,6 +19,7 @@ declare type FaasState = {
         blank: string;
         all: string;
         submit: string;
+        pageNotFound: string;
     };
     Blank: {
         text: string;
@@ -158,6 +160,7 @@ declare type RoutesProps = {
     routes: (RouteProps & {
         page?: LazyExoticComponent<ComponentType<any>>;
     })[];
+    fallback?: JSX.Element;
     notFound?: JSX.Element;
 };
 declare function Routes(props: RoutesProps): JSX.Element;
@@ -177,6 +180,12 @@ declare type TableProps<T = any, ExtendTypes = any> = {
         [key: string]: ExtendTableTypeProps;
     };
     faasData?: FaasDataWrapperProps<T>;
+    onChange?: (pagination: TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: SorterResult<T> | SorterResult<T>[], extra: TableCurrentDataSource<T>) => {
+        pagination: TablePaginationConfig;
+        filters: Record<string, FilterValue | null>;
+        sorter: SorterResult<T> | SorterResult<T>[];
+        extra: TableCurrentDataSource<T>;
+    };
 } & TableProps$1<T>;
 declare function Table<T = any, ExtendTypes = any>(props: TableProps<T, ExtendTypes>): JSX.Element;
 

package/dist/index.js

@@ -70,11 +70,17 @@ var import_lodash = require("lodash");
 // src/Config.tsx
 var import_react2 = require("react");
 var import_react_use = require("react-use");
-var _a, _b, _c;
-var common = {
-  blank: ((_a = navigator.language) == null ? void 0 : _a.includes("CN")) ? "\u7A7A" : "Empty",
-  all: ((_b = navigator.language) == null ? void 0 : _b.includes("CN")) ? "\u5168\u90E8" : "All",
-  submit: ((_c = navigator.language) == null ? void 0 : _c.includes("CN")) ? "\u63D0\u4EA4" : "Submit"
+var isCN = /^zh/i.test(navigator.language);
+var common = isCN ? {
+  blank: "\u7A7A",
+  all: "\u5168\u90E8",
+  submit: "\u63D0\u4EA4",
+  pageNotFound: "\u9875\u9762\u672A\u627E\u5230"
+} : {
+  blank: "Empty",
+  all: "All",
+  submit: "Submit",
+  pageNotFound: "Page Not Found"
 };
 var useFaasState = (0, import_react_use.createGlobalState)({
   common,
@@ -121,23 +127,23 @@ var import_react4 = require("@faasjs/react");
 function DescriptionItemContent(props) {
   const [computedProps, setComputedProps] = (0, import_react3.useState)();
   (0, import_react3.useEffect)(() => {
-    var _a2, _b2;
+    var _a, _b;
     const propsCopy = __spreadValues({}, props);
     if (!propsCopy.item.title)
       propsCopy.item.title = (0, import_lodash3.upperFirst)(propsCopy.item.id);
     if (!propsCopy.item.type)
       propsCopy.item.type = "string";
-    if ((_a2 = propsCopy.item.options) == null ? void 0 : _a2.length) {
+    if ((_a = propsCopy.item.options) == null ? void 0 : _a.length) {
       propsCopy.item.options = transferOptions(propsCopy.item.options);
     }
     if (propsCopy.item.options && typeof propsCopy.value !== "undefined" && propsCopy.value !== null) {
       if (propsCopy.item.type.endsWith("[]"))
         propsCopy.value = propsCopy.value.map((v) => {
-          var _a3;
-          return ((_a3 = propsCopy.item.options.find((option) => option.value === v)) == null ? void 0 : _a3.label) || v;
+          var _a2;
+          return ((_a2 = propsCopy.item.options.find((option) => option.value === v)) == null ? void 0 : _a2.label) || v;
         });
       else
-        propsCopy.value = ((_b2 = props.item.options.find((option) => option.value === props.value)) == null ? void 0 : _b2.label) || props.value;
+        propsCopy.value = ((_b = props.item.options.find((option) => option.value === props.value)) == null ? void 0 : _b.label) || props.value;
     }
     setComputedProps(propsCopy);
   }, [props]);
@@ -194,6 +200,9 @@ function Description(props) {
       extendTypes: props.extendTypes
     }))));
   return /* @__PURE__ */ import_react.default.createElement(import_react4.FaasDataWrapper, __spreadValues({
+    fallback: props.faasData.fallback || /* @__PURE__ */ import_react.default.createElement(import_antd2.Skeleton, {
+      active: true
+    }),
     render: ({ data }) => /* @__PURE__ */ import_react.default.createElement(import_antd2.Descriptions, __spreadValues({}, props), props.items.map((item) => /* @__PURE__ */ import_react.default.createElement(import_antd2.Descriptions.Item, {
       key: item.id,
       label: item.title || (0, import_lodash3.upperFirst)(item.id)
@@ -334,11 +343,11 @@ function FormItem(props) {
         name: computedProps.name,
         rules: computedProps.rules
       }, (fields, { add, remove }, { errors }) => {
-        var _a2;
+        var _a;
         return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, computedProps.label && /* @__PURE__ */ import_react.default.createElement("div", {
           className: "ant-form-item-label"
         }, /* @__PURE__ */ import_react.default.createElement("label", {
-          className: ((_a2 = computedProps.rules) == null ? void 0 : _a2.find((r) => r.required)) && "ant-form-item-required"
+          className: ((_a = computedProps.rules) == null ? void 0 : _a.find((r) => r.required)) && "ant-form-item-required"
         }, computedProps.label)), fields.map((field) => /* @__PURE__ */ import_react.default.createElement(import_antd4.Form.Item, {
           key: field.key
         }, /* @__PURE__ */ import_react.default.createElement(import_antd4.Row, {
@@ -375,7 +384,7 @@ function FormItem(props) {
 
 // src/Form.tsx
 function Form(props) {
-  var _a2, _b2;
+  var _a, _b;
   const [loading, setLoading] = (0, import_react7.useState)(false);
   const [computedProps, setComputedProps] = (0, import_react7.useState)();
   const [config] = useFaasState();
@@ -396,7 +405,7 @@ function Form(props) {
   }, []);
   if (!computedProps)
     return null;
-  return /* @__PURE__ */ import_react.default.createElement(import_antd5.Form, __spreadValues({}, computedProps), (_a2 = props.items) == null ? void 0 : _a2.map((item) => /* @__PURE__ */ import_react.default.createElement(FormItem, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react.default.createElement(import_antd5.Form, __spreadValues({}, computedProps), (_a = props.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ import_react.default.createElement(FormItem, __spreadProps(__spreadValues({
     key: item.id
   }, item), {
     extendTypes: props.extendTypes
@@ -404,7 +413,7 @@ function Form(props) {
     htmlType: "submit",
     type: "primary",
     loading
-  }, ((_b2 = props.submit) == null ? void 0 : _b2.text) || config.Form.submit.text));
+  }, ((_b = props.submit) == null ? void 0 : _b.text) || config.Form.submit.text));
 }
 Form.useForm = import_antd5.Form.useForm;
 Form.Item = FormItem;
@@ -413,11 +422,11 @@ Form.Item = FormItem;
 var import_antd6 = require("antd");
 var import_react8 = require("react");
 var import_react_router_dom = require("react-router-dom");
-function NoMatch() {
+function NotFound() {
+  const [config] = useFaasState();
   return /* @__PURE__ */ import_react.default.createElement(import_antd6.Result, {
     status: "404",
-    title: "404",
-    subTitle: "Page not found"
+    title: config.common.pageNotFound
   });
 }
 function Routes(props) {
@@ -425,14 +434,16 @@ function Routes(props) {
     key: r.path
   }, r), {
     element: r.element || /* @__PURE__ */ import_react.default.createElement(import_react8.Suspense, {
-      fallback: /* @__PURE__ */ import_react.default.createElement(import_antd6.Skeleton, {
+      fallback: props.fallback || /* @__PURE__ */ import_react.default.createElement("div", {
+        style: { padding: "24px" }
+      }, /* @__PURE__ */ import_react.default.createElement(import_antd6.Skeleton, {
         active: true
-      })
+      }))
     }, /* @__PURE__ */ import_react.default.createElement(r.page, null))
   }))), /* @__PURE__ */ import_react.default.createElement(import_react_router_dom.Route, {
     key: "*",
     path: "*",
-    element: props.notFound || /* @__PURE__ */ import_react.default.createElement(NoMatch, null)
+    element: props.notFound || /* @__PURE__ */ import_react.default.createElement(NotFound, null)
   }));
 }
 
@@ -443,15 +454,15 @@ var import_icons3 = require("@ant-design/icons");
 var import_lodash5 = require("lodash");
 var import_react10 = require("@faasjs/react");
 function processValue(item, value) {
-  var _a2;
+  var _a;
   if (item.options && typeof value !== "undefined" && value !== null) {
     if (item.type.endsWith("[]"))
       return value.map((v) => {
-        var _a3;
-        return ((_a3 = item.options.find((option) => option.value === v)) == null ? void 0 : _a3.label) || v;
+        var _a2;
+        return ((_a2 = item.options.find((option) => option.value === v)) == null ? void 0 : _a2.label) || v;
       });
     else
-      return ((_a2 = item.options.find((option) => option.value === value)) == null ? void 0 : _a2.label) || value;
+      return ((_a = item.options.find((option) => option.value === value)) == null ? void 0 : _a.label) || value;
   }
   return value;
 }
@@ -459,7 +470,7 @@ function Table(props) {
   const [columns, setColumns] = (0, import_react9.useState)();
   const [config] = useFaasState();
   (0, import_react9.useEffect)(() => {
-    var _a2;
+    var _a;
     for (const item of props.items) {
       if (!item.key)
         item.key = item.id;
@@ -469,7 +480,7 @@ function Table(props) {
         item.title = (0, import_lodash5.upperFirst)(item.id);
       if (!item.type)
         item.type = "string";
-      if ((_a2 = item.options) == null ? void 0 : _a2.length) {
+      if ((_a = item.options) == null ? void 0 : _a.length) {
         item.options = transferOptions(item.options);
         item.filters = item.options.map((o) => ({
           text: o.label,
@@ -584,6 +595,9 @@ function Table(props) {
       dataSource: props.dataSource
     }));
   return /* @__PURE__ */ import_react.default.createElement(import_react10.FaasDataWrapper, __spreadValues({
+    fallback: props.faasData.fallback || /* @__PURE__ */ import_react.default.createElement(import_antd7.Skeleton, {
+      active: true
+    }),
     render: ({
       data,
       params,
@@ -605,8 +619,17 @@ function Table(props) {
         rowKey: props.rowKey || "id",
         columns,
         dataSource: data.rows,
-        pagination: data.pagination,
-        onChange: (pagination, filters, sorter) => {
+        pagination: __spreadValues(__spreadValues({}, props.pagination), data.pagination),
+        onChange: (pagination, filters, sorter, extra) => {
+          if (props.onChange) {
+            const processed = props.onChange(pagination, filters, sorter, extra);
+            reload(__spreadProps(__spreadValues({}, params), {
+              pagination: processed.pagination,
+              filters: processed.filters,
+              sorter: processed.sorter
+            }));
+            return;
+          }
           reload(__spreadProps(__spreadValues({}, params), {
             pagination,
             filters,

package/dist/index.mjs

@@ -28,11 +28,17 @@ import { isNil } from "lodash";
 // src/Config.tsx
 import { useEffect } from "react";
 import { createGlobalState } from "react-use";
-var _a, _b, _c;
-var common = {
-  blank: ((_a = navigator.language) == null ? void 0 : _a.includes("CN")) ? "\u7A7A" : "Empty",
-  all: ((_b = navigator.language) == null ? void 0 : _b.includes("CN")) ? "\u5168\u90E8" : "All",
-  submit: ((_c = navigator.language) == null ? void 0 : _c.includes("CN")) ? "\u63D0\u4EA4" : "Submit"
+var isCN = /^zh/i.test(navigator.language);
+var common = isCN ? {
+  blank: "\u7A7A",
+  all: "\u5168\u90E8",
+  submit: "\u63D0\u4EA4",
+  pageNotFound: "\u9875\u9762\u672A\u627E\u5230"
+} : {
+  blank: "Empty",
+  all: "All",
+  submit: "Submit",
+  pageNotFound: "Page Not Found"
 };
 var useFaasState = createGlobalState({
   common,
@@ -72,7 +78,10 @@ function transferOptions(options) {
 
 // src/Description.tsx
 import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
-import { Descriptions } from "antd";
+import {
+  Descriptions,
+  Skeleton
+} from "antd";
 import { upperFirst as upperFirst2 } from "lodash";
 import {
   cloneElement,
@@ -83,23 +92,23 @@ import { FaasDataWrapper } from "@faasjs/react";
 function DescriptionItemContent(props) {
   const [computedProps, setComputedProps] = useState();
   useEffect2(() => {
-    var _a2, _b2;
+    var _a, _b;
     const propsCopy = __spreadValues({}, props);
     if (!propsCopy.item.title)
       propsCopy.item.title = upperFirst2(propsCopy.item.id);
     if (!propsCopy.item.type)
       propsCopy.item.type = "string";
-    if ((_a2 = propsCopy.item.options) == null ? void 0 : _a2.length) {
+    if ((_a = propsCopy.item.options) == null ? void 0 : _a.length) {
       propsCopy.item.options = transferOptions(propsCopy.item.options);
     }
     if (propsCopy.item.options && typeof propsCopy.value !== "undefined" && propsCopy.value !== null) {
       if (propsCopy.item.type.endsWith("[]"))
         propsCopy.value = propsCopy.value.map((v) => {
-          var _a3;
-          return ((_a3 = propsCopy.item.options.find((option) => option.value === v)) == null ? void 0 : _a3.label) || v;
+          var _a2;
+          return ((_a2 = propsCopy.item.options.find((option) => option.value === v)) == null ? void 0 : _a2.label) || v;
         });
       else
-        propsCopy.value = ((_b2 = props.item.options.find((option) => option.value === props.value)) == null ? void 0 : _b2.label) || props.value;
+        propsCopy.value = ((_b = props.item.options.find((option) => option.value === props.value)) == null ? void 0 : _b.label) || props.value;
     }
     setComputedProps(propsCopy);
   }, [props]);
@@ -156,6 +165,9 @@ function Description(props) {
       extendTypes: props.extendTypes
     }))));
   return /* @__PURE__ */ React.createElement(FaasDataWrapper, __spreadValues({
+    fallback: props.faasData.fallback || /* @__PURE__ */ React.createElement(Skeleton, {
+      active: true
+    }),
     render: ({ data }) => /* @__PURE__ */ React.createElement(Descriptions, __spreadValues({}, props), props.items.map((item) => /* @__PURE__ */ React.createElement(Descriptions.Item, {
       key: item.id,
       label: item.title || upperFirst2(item.id)
@@ -308,11 +320,11 @@ function FormItem(props) {
         name: computedProps.name,
         rules: computedProps.rules
       }, (fields, { add, remove }, { errors }) => {
-        var _a2;
+        var _a;
         return /* @__PURE__ */ React.createElement(React.Fragment, null, computedProps.label && /* @__PURE__ */ React.createElement("div", {
           className: "ant-form-item-label"
         }, /* @__PURE__ */ React.createElement("label", {
-          className: ((_a2 = computedProps.rules) == null ? void 0 : _a2.find((r) => r.required)) && "ant-form-item-required"
+          className: ((_a = computedProps.rules) == null ? void 0 : _a.find((r) => r.required)) && "ant-form-item-required"
         }, computedProps.label)), fields.map((field) => /* @__PURE__ */ React.createElement(AntdForm.Item, {
           key: field.key
         }, /* @__PURE__ */ React.createElement(Row, {
@@ -349,7 +361,7 @@ function FormItem(props) {
 
 // src/Form.tsx
 function Form(props) {
-  var _a2, _b2;
+  var _a, _b;
   const [loading, setLoading] = useState4(false);
   const [computedProps, setComputedProps] = useState4();
   const [config] = useFaasState();
@@ -370,7 +382,7 @@ function Form(props) {
   }, []);
   if (!computedProps)
     return null;
-  return /* @__PURE__ */ React.createElement(AntdForm2, __spreadValues({}, computedProps), (_a2 = props.items) == null ? void 0 : _a2.map((item) => /* @__PURE__ */ React.createElement(FormItem, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React.createElement(AntdForm2, __spreadValues({}, computedProps), (_a = props.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ React.createElement(FormItem, __spreadProps(__spreadValues({
     key: item.id
   }, item), {
     extendTypes: props.extendTypes
@@ -378,13 +390,13 @@ function Form(props) {
     htmlType: "submit",
     type: "primary",
     loading
-  }, ((_b2 = props.submit) == null ? void 0 : _b2.text) || config.Form.submit.text));
+  }, ((_b = props.submit) == null ? void 0 : _b.text) || config.Form.submit.text));
 }
 Form.useForm = AntdForm2.useForm;
 Form.Item = FormItem;
 
 // src/Routers.tsx
-import { Result, Skeleton } from "antd";
+import { Result, Skeleton as Skeleton2 } from "antd";
 import {
   Suspense
 } from "react";
@@ -392,11 +404,11 @@ import {
   Routes as OriginRoutes,
   Route
 } from "react-router-dom";
-function NoMatch() {
+function NotFound() {
+  const [config] = useFaasState();
   return /* @__PURE__ */ React.createElement(Result, {
     status: "404",
-    title: "404",
-    subTitle: "Page not found"
+    title: config.common.pageNotFound
   });
 }
 function Routes(props) {
@@ -404,14 +416,16 @@ function Routes(props) {
     key: r.path
   }, r), {
     element: r.element || /* @__PURE__ */ React.createElement(Suspense, {
-      fallback: /* @__PURE__ */ React.createElement(Skeleton, {
+      fallback: props.fallback || /* @__PURE__ */ React.createElement("div", {
+        style: { padding: "24px" }
+      }, /* @__PURE__ */ React.createElement(Skeleton2, {
         active: true
-      })
+      }))
     }, /* @__PURE__ */ React.createElement(r.page, null))
   }))), /* @__PURE__ */ React.createElement(Route, {
     key: "*",
     path: "*",
-    element: props.notFound || /* @__PURE__ */ React.createElement(NoMatch, null)
+    element: props.notFound || /* @__PURE__ */ React.createElement(NotFound, null)
   }));
 }
 
@@ -423,21 +437,22 @@ import {
 } from "react";
 import {
   Table as AntdTable,
-  Radio
+  Radio,
+  Skeleton as Skeleton3
 } from "antd";
 import { CheckOutlined as CheckOutlined2, CloseOutlined as CloseOutlined2 } from "@ant-design/icons";
 import { isNil as isNil2, upperFirst as upperFirst4 } from "lodash";
 import { FaasDataWrapper as FaasDataWrapper2 } from "@faasjs/react";
 function processValue(item, value) {
-  var _a2;
+  var _a;
   if (item.options && typeof value !== "undefined" && value !== null) {
     if (item.type.endsWith("[]"))
       return value.map((v) => {
-        var _a3;
-        return ((_a3 = item.options.find((option) => option.value === v)) == null ? void 0 : _a3.label) || v;
+        var _a2;
+        return ((_a2 = item.options.find((option) => option.value === v)) == null ? void 0 : _a2.label) || v;
       });
     else
-      return ((_a2 = item.options.find((option) => option.value === value)) == null ? void 0 : _a2.label) || value;
+      return ((_a = item.options.find((option) => option.value === value)) == null ? void 0 : _a.label) || value;
   }
   return value;
 }
@@ -445,7 +460,7 @@ function Table(props) {
   const [columns, setColumns] = useState5();
   const [config] = useFaasState();
   useEffect5(() => {
-    var _a2;
+    var _a;
     for (const item of props.items) {
       if (!item.key)
         item.key = item.id;
@@ -455,7 +470,7 @@ function Table(props) {
         item.title = upperFirst4(item.id);
       if (!item.type)
         item.type = "string";
-      if ((_a2 = item.options) == null ? void 0 : _a2.length) {
+      if ((_a = item.options) == null ? void 0 : _a.length) {
         item.options = transferOptions(item.options);
         item.filters = item.options.map((o) => ({
           text: o.label,
@@ -570,6 +585,9 @@ function Table(props) {
       dataSource: props.dataSource
     }));
   return /* @__PURE__ */ React.createElement(FaasDataWrapper2, __spreadValues({
+    fallback: props.faasData.fallback || /* @__PURE__ */ React.createElement(Skeleton3, {
+      active: true
+    }),
     render: ({
       data,
       params,
@@ -591,8 +609,17 @@ function Table(props) {
         rowKey: props.rowKey || "id",
         columns,
         dataSource: data.rows,
-        pagination: data.pagination,
-        onChange: (pagination, filters, sorter) => {
+        pagination: __spreadValues(__spreadValues({}, props.pagination), data.pagination),
+        onChange: (pagination, filters, sorter, extra) => {
+          if (props.onChange) {
+            const processed = props.onChange(pagination, filters, sorter, extra);
+            reload(__spreadProps(__spreadValues({}, params), {
+              pagination: processed.pagination,
+              filters: processed.filters,
+              sorter: processed.sorter
+            }));
+            return;
+          }
           reload(__spreadProps(__spreadValues({}, params), {
             pagination,
             filters,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/ant-design",
-  "version": "0.0.2-beta.357",
+  "version": "0.0.2-beta.361",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -28,7 +28,7 @@
     "lodash": "*",
     "react": "*",
     "react-dom": "*",
-    "@faasjs/react": "^0.0.2-beta.357",
+    "@faasjs/react": "^0.0.2-beta.361",
     "react-use": "*",
     "react-router-dom": "*"
   },