@faasjs/ant-design 0.0.2-beta.341 → 0.0.2-beta.342

package/dist/index.d.ts

@@ -34,7 +34,11 @@ declare type DescriptionItemProps<T = any> = {
 } & FaasItemProps;
 declare type DescriptionProps<T = any, ExtendItemProps = any> = {
     items: (DescriptionItemProps | ExtendItemProps)[];
-    dataSource: T;
+    dataSource?: T;
+    faasData?: {
+        action: string;
+        params?: Record<string, any>;
+    };
     extendTypes?: {
         [key: string]: ExtendDescriptionTypeProps;
     };
@@ -117,6 +121,10 @@ declare type TableProps<T = any, ExtendTypes = any> = {
     extendTypes?: {
         [key: string]: ExtendTableTypeProps;
     };
+    faasData?: {
+        action: string;
+        params?: Record<string, any>;
+    };
 } & TableProps$1<T>;
 declare function Table<T = any, ExtendTypes = any>(props: TableProps<T, ExtendTypes>): JSX.Element;
 

package/dist/index.js

@@ -59,10 +59,34 @@ var import_react = __toESM(require("react"));
 var import_icons = require("@ant-design/icons");
 var import_antd = require("antd");
 var import_lodash = require("lodash");
+var import_react4 = require("react");
+
+// src/FaasWrapper.tsx
 var import_react2 = require("react");
-function DescriptionItemContent(props) {
-  const [computedProps, setComputedProps] = (0, import_react2.useState)();
+var import_react3 = require("@faasjs/react");
+function FaasDataWrapper({
+  dataSource,
+  faasData,
+  render,
+  fallback
+}) {
+  const [data, setData] = (0, import_react2.useState)();
   (0, import_react2.useEffect)(() => {
+    if (!faasData)
+      return;
+    (0, import_react3.getClient)().faas(faasData.action, faasData.action).then((res) => setData(res.data));
+  }, [JSON.stringify(faasData)]);
+  if (dataSource)
+    return render({ data: dataSource });
+  if (!data)
+    return fallback || null;
+  return render({ data });
+}
+
+// src/Description.tsx
+function DescriptionItemContent(props) {
+  const [computedProps, setComputedProps] = (0, import_react4.useState)();
+  (0, import_react4.useEffect)(() => {
     const propsCopy = __spreadValues({}, props);
     if (!propsCopy.item.title)
       propsCopy.item.title = (0, import_lodash.upperFirst)(propsCopy.item.id);
@@ -74,7 +98,7 @@ function DescriptionItemContent(props) {
     return null;
   if (computedProps.extendTypes && computedProps.extendTypes[computedProps.item.type])
     if (computedProps.extendTypes[computedProps.item.type].children)
-      return (0, import_react2.cloneElement)(computedProps.extendTypes[computedProps.item.type].children, {
+      return (0, import_react4.cloneElement)(computedProps.extendTypes[computedProps.item.type].children, {
         value: computedProps.value,
         values: computedProps.values
       });
@@ -83,7 +107,7 @@ function DescriptionItemContent(props) {
     else
       throw Error(computedProps.item.type + " requires children or render");
   if (computedProps.item.children)
-    return (0, import_react2.cloneElement)(computedProps.item.children, { value: computedProps.value });
+    return (0, import_react4.cloneElement)(computedProps.item.children, { value: computedProps.value });
   if (computedProps.item.render)
     return computedProps.item.render(computedProps.value, computedProps.values);
   if (typeof computedProps.value === "undefined" || computedProps.value === null)
@@ -106,15 +130,19 @@ function DescriptionItemContent(props) {
   }
 }
 function Description(props) {
-  return /* @__PURE__ */ import_react.default.createElement(import_antd.Descriptions, __spreadValues({}, props), props.items.map((item) => /* @__PURE__ */ import_react.default.createElement(import_antd.Descriptions.Item, {
-    key: item.id,
-    label: item.title || (0, import_lodash.upperFirst)(item.id)
-  }, /* @__PURE__ */ import_react.default.createElement(DescriptionItemContent, {
-    item,
-    value: props.dataSource[item.id],
-    values: props.dataSource,
-    extendTypes: props.extendTypes
-  }))));
+  return /* @__PURE__ */ import_react.default.createElement(FaasDataWrapper, {
+    dataSource: props.dataSource,
+    faasData: props.faasData,
+    render: ({ data }) => /* @__PURE__ */ import_react.default.createElement(import_antd.Descriptions, __spreadValues({}, props), props.items.map((item) => /* @__PURE__ */ import_react.default.createElement(import_antd.Descriptions.Item, {
+      key: item.id,
+      label: item.title || (0, import_lodash.upperFirst)(item.id)
+    }, /* @__PURE__ */ import_react.default.createElement(DescriptionItemContent, {
+      item,
+      value: data[item.id],
+      values: data,
+      extendTypes: props.extendTypes
+    }))))
+  });
 }
 
 // src/Form.tsx
@@ -123,11 +151,11 @@ var import_antd3 = require("antd");
 // src/FormItem.tsx
 var import_antd2 = require("antd");
 var import_icons2 = require("@ant-design/icons");
-var import_react3 = require("react");
+var import_react5 = require("react");
 var import_lodash2 = require("lodash");
 function FormItem(props) {
-  const [computedProps, setComputedProps] = (0, import_react3.useState)();
-  (0, import_react3.useEffect)(() => {
+  const [computedProps, setComputedProps] = (0, import_react5.useState)();
+  (0, import_react5.useEffect)(() => {
     const propsCopy = __spreadValues({}, props);
     if (!propsCopy.title)
       propsCopy.title = (0, import_lodash2.upperFirst)(propsCopy.id);
@@ -290,13 +318,13 @@ Form.useForm = import_antd3.Form.useForm;
 Form.Item = FormItem;
 
 // src/Table.tsx
-var import_react4 = require("react");
+var import_react6 = require("react");
 var import_antd4 = require("antd");
 var import_icons3 = require("@ant-design/icons");
 var import_lodash3 = require("lodash");
 function Table(props) {
-  const [columns, setColumns] = (0, import_react4.useState)();
-  (0, import_react4.useEffect)(() => {
+  const [columns, setColumns] = (0, import_react6.useState)();
+  (0, import_react6.useEffect)(() => {
     for (const item of props.items) {
       if (!item.key)
         item.key = item.id;
@@ -310,7 +338,7 @@ function Table(props) {
         continue;
       if (props.extendTypes && props.extendTypes[item.type]) {
         if (props.extendTypes[item.type].children) {
-          item.render = (value, values) => (0, import_react4.cloneElement)(props.extendTypes[item.type].children, {
+          item.render = (value, values) => (0, import_react6.cloneElement)(props.extendTypes[item.type].children, {
             value,
             values
           });
@@ -340,10 +368,15 @@ function Table(props) {
   }, [props.items]);
   if (!columns)
     return null;
-  return /* @__PURE__ */ import_react.default.createElement(import_antd4.Table, __spreadProps(__spreadValues({}, props), {
-    rowKey: props.rowKey || "id",
-    columns
-  }));
+  return /* @__PURE__ */ import_react.default.createElement(FaasDataWrapper, {
+    dataSource: props.dataSource,
+    faasData: props.faasData,
+    render: ({ data }) => /* @__PURE__ */ import_react.default.createElement(import_antd4.Table, __spreadProps(__spreadValues({}, props), {
+      rowKey: props.rowKey || "id",
+      columns,
+      dataSource: data
+    }))
+  });
 }
 module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -27,12 +27,36 @@ import { Descriptions } from "antd";
 import { upperFirst } from "lodash";
 import {
   cloneElement,
-  useEffect,
-  useState
+  useEffect as useEffect2,
+  useState as useState2
 } from "react";
-function DescriptionItemContent(props) {
-  const [computedProps, setComputedProps] = useState();
+
+// src/FaasWrapper.tsx
+import { useEffect, useState } from "react";
+import { getClient } from "@faasjs/react";
+function FaasDataWrapper({
+  dataSource,
+  faasData,
+  render,
+  fallback
+}) {
+  const [data, setData] = useState();
   useEffect(() => {
+    if (!faasData)
+      return;
+    getClient().faas(faasData.action, faasData.action).then((res) => setData(res.data));
+  }, [JSON.stringify(faasData)]);
+  if (dataSource)
+    return render({ data: dataSource });
+  if (!data)
+    return fallback || null;
+  return render({ data });
+}
+
+// src/Description.tsx
+function DescriptionItemContent(props) {
+  const [computedProps, setComputedProps] = useState2();
+  useEffect2(() => {
     const propsCopy = __spreadValues({}, props);
     if (!propsCopy.item.title)
       propsCopy.item.title = upperFirst(propsCopy.item.id);
@@ -76,15 +100,19 @@ function DescriptionItemContent(props) {
   }
 }
 function Description(props) {
-  return /* @__PURE__ */ React.createElement(Descriptions, __spreadValues({}, props), props.items.map((item) => /* @__PURE__ */ React.createElement(Descriptions.Item, {
-    key: item.id,
-    label: item.title || upperFirst(item.id)
-  }, /* @__PURE__ */ React.createElement(DescriptionItemContent, {
-    item,
-    value: props.dataSource[item.id],
-    values: props.dataSource,
-    extendTypes: props.extendTypes
-  }))));
+  return /* @__PURE__ */ React.createElement(FaasDataWrapper, {
+    dataSource: props.dataSource,
+    faasData: props.faasData,
+    render: ({ data }) => /* @__PURE__ */ React.createElement(Descriptions, __spreadValues({}, props), props.items.map((item) => /* @__PURE__ */ React.createElement(Descriptions.Item, {
+      key: item.id,
+      label: item.title || upperFirst(item.id)
+    }, /* @__PURE__ */ React.createElement(DescriptionItemContent, {
+      item,
+      value: data[item.id],
+      values: data,
+      extendTypes: props.extendTypes
+    }))))
+  });
 }
 
 // src/Form.tsx
@@ -106,13 +134,13 @@ import {
 } from "antd";
 import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
 import {
-  useEffect as useEffect2,
-  useState as useState2
+  useEffect as useEffect3,
+  useState as useState3
 } from "react";
 import { upperFirst as upperFirst2 } from "lodash";
 function FormItem(props) {
-  const [computedProps, setComputedProps] = useState2();
-  useEffect2(() => {
+  const [computedProps, setComputedProps] = useState3();
+  useEffect3(() => {
     const propsCopy = __spreadValues({}, props);
     if (!propsCopy.title)
       propsCopy.title = upperFirst2(propsCopy.id);
@@ -276,8 +304,8 @@ Form.Item = FormItem;
 
 // src/Table.tsx
 import {
-  useState as useState3,
-  useEffect as useEffect3,
+  useState as useState4,
+  useEffect as useEffect4,
   cloneElement as cloneElement2
 } from "react";
 import {
@@ -286,8 +314,8 @@ import {
 import { CheckOutlined as CheckOutlined2, CloseOutlined as CloseOutlined2 } from "@ant-design/icons";
 import { upperFirst as upperFirst3 } from "lodash";
 function Table(props) {
-  const [columns, setColumns] = useState3();
-  useEffect3(() => {
+  const [columns, setColumns] = useState4();
+  useEffect4(() => {
     for (const item of props.items) {
       if (!item.key)
         item.key = item.id;
@@ -331,10 +359,15 @@ function Table(props) {
   }, [props.items]);
   if (!columns)
     return null;
-  return /* @__PURE__ */ React.createElement(AntdTable, __spreadProps(__spreadValues({}, props), {
-    rowKey: props.rowKey || "id",
-    columns
-  }));
+  return /* @__PURE__ */ React.createElement(FaasDataWrapper, {
+    dataSource: props.dataSource,
+    faasData: props.faasData,
+    render: ({ data }) => /* @__PURE__ */ React.createElement(AntdTable, __spreadProps(__spreadValues({}, props), {
+      rowKey: props.rowKey || "id",
+      columns,
+      dataSource: data
+    }))
+  });
 }
 export {
   Description,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/ant-design",
-  "version": "0.0.2-beta.341",
+  "version": "0.0.2-beta.342",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -27,7 +27,7 @@
     "lodash": "*",
     "react": "*",
     "react-dom": "*",
-    "@faasjs/react": "^0.0.2-beta.341"
+    "@faasjs/react": "^0.0.2-beta.342"
   },
   "devDependencies": {
     "@types/lodash": "*",