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

package/dist/index.d.ts

@@ -23,19 +23,25 @@ declare type FaasItemProps = BaseItemType & {
     type?: FaasItemType;
 };
 
-declare type ExtendDescriptionItemProps = {
-    [type: string]: {
-        children: JSX.Element | null;
-    };
+declare type ExtendDescriptionTypeProps = {
+    children?: JSX.Element | null;
+    render?: (value: any, values: any) => JSX.Element | string | number | boolean | null;
 };
+declare type ExtendDescriptionItemProps = BaseItemType;
 declare type DescriptionItemProps<T = any> = {
     children?: JSX.Element;
-    render?: (value: T, values: any) => JSX.Element | null;
+    render?: (value: T, values: any) => JSX.Element | string | number | boolean | null;
 } & FaasItemProps;
 declare type DescriptionProps<T = any, ExtendItemProps = any> = {
     items: (DescriptionItemProps | ExtendItemProps)[];
-    dataSource: T;
-    extendTypes?: ExtendDescriptionItemProps;
+    dataSource?: T;
+    faasData?: {
+        action: string;
+        params?: Record<string, any>;
+    };
+    extendTypes?: {
+        [key: string]: ExtendDescriptionTypeProps;
+    };
 } & DescriptionsProps;
 declare function Description(props: DescriptionProps): JSX.Element;
 
@@ -73,16 +79,17 @@ declare type OptionsProps<T = any> = {
     input?: SelectProps<any>;
 };
 declare type FormItemInputProps<T = any> = StringProps | StringListProps | NumberProps | NumberListProps | BooleanProps | OptionsProps<T>;
-declare type ExtendFormItemProps = {
-    [type: string]: {
-        children: JSX.Element | null;
-    };
+declare type ExtendFormTypeProps = {
+    children?: JSX.Element | null;
 };
+declare type ExtendFormItemProps = BaseItemType & FormItemProps$1;
 declare type FormItemProps<T = any> = {
     children?: JSX.Element;
     rules?: RuleObject[];
     label?: string | false;
-    extendTypes?: ExtendFormItemProps;
+    extendTypes?: {
+        [type: string]: ExtendFormTypeProps;
+    };
 } & FormItemInputProps<T> & FaasItemProps & FormItemProps$1<T>;
 declare function FormItem<T = any>(props: FormItemProps<T>): JSX.Element;
 
@@ -93,23 +100,32 @@ declare type FormProps<Values = any, ExtendItemProps = any> = {
         /** Default: Submit */
         text?: string;
     };
-    extendTypes?: ExtendFormItemProps;
+    extendTypes?: {
+        [type: string]: ExtendFormTypeProps;
+    };
 } & FormProps$1<Values>;
 declare function Form<Values = any>(props: FormProps<Values>): JSX.Element;
 declare namespace Form {
     var useForm: typeof antd_lib_form_Form.useForm;
+    var Item: typeof FormItem;
 }
 
 declare type TableItemProps<T = any> = FaasItemProps & TableColumnProps<T>;
-declare type ExtendTableItemProps = {
-    [type: string]: {
-        children: JSX.Element | null;
-    };
-};
-declare type TableProps<T = any, ExtendTypes = any> = TableProps$1<T> & {
-    items: (TableItemProps | ExtendTypes)[];
-    extendTypes?: ExtendTableItemProps;
+declare type ExtendTableTypeProps = {
+    children?: JSX.Element | null;
+    render?: (value: any, values: any) => JSX.Element | string | number | boolean | null;
 };
+declare type ExtendTableItemProps<T = any> = BaseItemType & TableColumnProps<T>;
+declare type TableProps<T = any, ExtendTypes = any> = {
+    items: (TableItemProps | (ExtendTypes & BaseItemType))[];
+    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;
 
-export { BaseItemType, Description, DescriptionItemProps, DescriptionProps, ExtendDescriptionItemProps, ExtendFormItemProps, ExtendTableItemProps, FaasItemProps, FaasItemType, FaasItemTypeValue, Form, FormItem, FormItemProps, FormProps, Table, TableItemProps, TableProps };
+export { BaseItemType, Description, DescriptionItemProps, DescriptionProps, ExtendDescriptionItemProps, ExtendDescriptionTypeProps, ExtendFormItemProps, ExtendFormTypeProps, ExtendTableItemProps, ExtendTableTypeProps, FaasItemProps, FaasItemType, FaasItemTypeValue, Form, FormItem, FormItemProps, FormProps, Table, TableItemProps, TableProps };

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);
@@ -70,17 +94,24 @@ function DescriptionItemContent(props) {
       propsCopy.item.type = "string";
     setComputedProps(propsCopy);
   }, [props]);
-  if (!computedProps || typeof computedProps.value === "undefined" || computedProps.value === null)
+  if (!computedProps)
     return null;
   if (computedProps.extendTypes && computedProps.extendTypes[computedProps.item.type])
-    return (0, import_react2.cloneElement)(computedProps.extendTypes[computedProps.item.type].children, {
-      value: computedProps.value,
-      values: computedProps.values
-    });
+    if (computedProps.extendTypes[computedProps.item.type].children)
+      return (0, import_react4.cloneElement)(computedProps.extendTypes[computedProps.item.type].children, {
+        value: computedProps.value,
+        values: computedProps.values
+      });
+    else if (computedProps.extendTypes[computedProps.item.type].render)
+      return computedProps.extendTypes[computedProps.item.type].render(computedProps.value, computedProps.values);
+    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)
+    return null;
   switch (computedProps.item.type) {
     case "string[]":
       return computedProps.value.join(", ");
@@ -99,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
@@ -116,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);
@@ -280,15 +315,16 @@ function Form(props) {
   }, ((_b = props.submit) == null ? void 0 : _b.text) || "Submit"));
 }
 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;
@@ -301,10 +337,15 @@ function Table(props) {
       if (item.render)
         continue;
       if (props.extendTypes && props.extendTypes[item.type]) {
-        item.render = (value, values) => (0, import_react4.cloneElement)(props.extendTypes[item.type].children, {
-          value,
-          values
-        });
+        if (props.extendTypes[item.type].children) {
+          item.render = (value, values) => (0, import_react6.cloneElement)(props.extendTypes[item.type].children, {
+            value,
+            values
+          });
+        } else if (props.extendTypes[item.type].render)
+          item.render = props.extendTypes[item.type].render;
+        else
+          throw Error(item.type + " requires children or render");
         continue;
       }
       switch (item.type) {
@@ -327,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);
@@ -40,17 +64,24 @@ function DescriptionItemContent(props) {
       propsCopy.item.type = "string";
     setComputedProps(propsCopy);
   }, [props]);
-  if (!computedProps || typeof computedProps.value === "undefined" || computedProps.value === null)
+  if (!computedProps)
     return null;
   if (computedProps.extendTypes && computedProps.extendTypes[computedProps.item.type])
-    return cloneElement(computedProps.extendTypes[computedProps.item.type].children, {
-      value: computedProps.value,
-      values: computedProps.values
-    });
+    if (computedProps.extendTypes[computedProps.item.type].children)
+      return cloneElement(computedProps.extendTypes[computedProps.item.type].children, {
+        value: computedProps.value,
+        values: computedProps.values
+      });
+    else if (computedProps.extendTypes[computedProps.item.type].render)
+      return computedProps.extendTypes[computedProps.item.type].render(computedProps.value, computedProps.values);
+    else
+      throw Error(computedProps.item.type + " requires children or render");
   if (computedProps.item.children)
     return 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)
+    return null;
   switch (computedProps.item.type) {
     case "string[]":
       return computedProps.value.join(", ");
@@ -69,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
@@ -99,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);
@@ -265,11 +300,12 @@ function Form(props) {
   }, ((_b = props.submit) == null ? void 0 : _b.text) || "Submit"));
 }
 Form.useForm = AntdForm2.useForm;
+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 {
@@ -278,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;
@@ -292,10 +328,15 @@ function Table(props) {
       if (item.render)
         continue;
       if (props.extendTypes && props.extendTypes[item.type]) {
-        item.render = (value, values) => cloneElement2(props.extendTypes[item.type].children, {
-          value,
-          values
-        });
+        if (props.extendTypes[item.type].children) {
+          item.render = (value, values) => cloneElement2(props.extendTypes[item.type].children, {
+            value,
+            values
+          });
+        } else if (props.extendTypes[item.type].render)
+          item.render = props.extendTypes[item.type].render;
+        else
+          throw Error(item.type + " requires children or render");
         continue;
       }
       switch (item.type) {
@@ -318,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.338",
+  "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.338"
+    "@faasjs/react": "^0.0.2-beta.342"
   },
   "devDependencies": {
     "@types/lodash": "*",