@faasjs/ant-design 0.0.2-beta.335 → 0.0.2-beta.339

package/dist/index.d.ts

@@ -4,22 +4,39 @@ import { RuleObject } from 'rc-field-form/lib/interface';
 import { ReactNode } from 'react';
 
 declare type FaasItemType = 'string' | 'string[]' | 'number' | 'number[]' | 'boolean';
-declare type FaasItemProps = {
+declare type FaasItemTypeValue = {
+    string: string;
+    'string[]': string[];
+    number: number;
+    'number[]': number[];
+    boolean: boolean;
+};
+declare type BaseItemType = {
+    id: string;
+    title?: string;
+};
+declare type FaasItemProps = BaseItemType & {
     /**
      * Support string, string[], number, number[], boolean
      * @default 'string'
      */
     type?: FaasItemType;
-    id: string;
-    title?: string;
 };
 
-declare type DescriptionItemProps = FaasItemProps & {
-    children?: JSX.Element;
+declare type ExtendDescriptionItemProps = {
+    [type: string]: {
+        children?: JSX.Element | null;
+        render?: (value: any, values: any) => JSX.Element | string | number | boolean | null;
+    };
 };
-declare type DescriptionProps<T = any> = {
-    items: DescriptionItemProps[];
+declare type DescriptionItemProps<T = any> = {
+    children?: JSX.Element;
+    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;
 } & DescriptionsProps;
 declare function Description(props: DescriptionProps): JSX.Element;
 
@@ -57,30 +74,44 @@ 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 FormItemProps<T = any> = {
     children?: JSX.Element;
     rules?: RuleObject[];
     label?: string | false;
+    extendTypes?: ExtendFormItemProps;
 } & FormItemInputProps<T> & FaasItemProps & FormItemProps$1<T>;
 declare function FormItem<T = any>(props: FormItemProps<T>): JSX.Element;
 
-declare type FormProps<T = any> = {
-    items?: FormItemProps[];
-    /** Default: { text: 'Submit' } */
+declare type FormProps<Values = any, ExtendItemProps = any> = {
+    items?: (FormItemProps | ExtendItemProps)[];
+    /** Default: { text: 'Submit' }, set false to disable it */
     submit?: false | {
         /** Default: Submit */
         text?: string;
     };
-} & FormProps$1<T>;
-declare function Form<T = any>(props: FormProps<T>): JSX.Element;
+    extendTypes?: ExtendFormItemProps;
+} & FormProps$1<Values>;
+declare function Form<Values = any>(props: FormProps<Values>): JSX.Element;
 declare namespace Form {
     var useForm: typeof antd_lib_form_Form.useForm;
 }
 
 declare type TableItemProps<T = any> = FaasItemProps & TableColumnProps<T>;
-declare type TableProps<T = any> = TableProps$1<T> & {
-    items: TableItemProps[];
+declare type ExtendTableItemProps = {
+    [type: string]: {
+        children?: JSX.Element | null;
+        render?: (value: any, values: any) => JSX.Element | string | number | boolean | null;
+    };
+};
+declare type TableProps<T = any, ExtendTypes = any> = TableProps$1<T> & {
+    items: (TableItemProps | ExtendTypes)[];
+    extendTypes?: ExtendTableItemProps;
 };
-declare function Table(props: TableProps): JSX.Element;
+declare function Table<T = any, ExtendTypes = any>(props: TableProps<T, ExtendTypes>): JSX.Element;
 
-export { Description, DescriptionItemProps, DescriptionProps, Form, FormItem, FormItemProps, FormProps, Table, TableItemProps, TableProps };
+export { BaseItemType, Description, DescriptionItemProps, DescriptionProps, ExtendDescriptionItemProps, ExtendFormItemProps, ExtendTableItemProps, FaasItemProps, FaasItemType, FaasItemTypeValue, Form, FormItem, FormItemProps, FormProps, Table, TableItemProps, TableProps };

package/dist/index.js

@@ -70,14 +70,23 @@ function DescriptionItemContent(props) {
       propsCopy.item.type = "string";
     setComputedProps(propsCopy);
   }, [props]);
-  if (typeof computedProps.value === "undefined" || computedProps.value === null)
+  if (!computedProps || typeof computedProps.value === "undefined" || computedProps.value === null)
     return null;
-  if (computedProps.item.children) {
+  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, {
+        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 });
-  }
+  if (computedProps.item.render)
+    return computedProps.item.render(computedProps.value, computedProps.values);
   switch (computedProps.item.type) {
-    case "string":
-      return computedProps.value;
     case "string[]":
       return computedProps.value.join(", ");
     case "number":
@@ -91,7 +100,7 @@ function DescriptionItemContent(props) {
         style: { marginTop: "4px" }
       });
     default:
-      return null;
+      return computedProps.value;
   }
 }
 function Description(props) {
@@ -100,7 +109,9 @@ function Description(props) {
     label: item.title || (0, import_lodash.upperFirst)(item.id)
   }, /* @__PURE__ */ import_react.default.createElement(DescriptionItemContent, {
     item,
-    value: props.dataSource[item.id]
+    value: props.dataSource[item.id],
+    values: props.dataSource,
+    extendTypes: props.extendTypes
   }))));
 }
 
@@ -166,6 +177,8 @@ function FormItem(props) {
   }, [props]);
   if (!computedProps)
     return null;
+  if (computedProps.extendTypes && computedProps.extendTypes[computedProps.type])
+    return /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, __spreadValues({}, computedProps), computedProps.extendTypes[computedProps.type].children);
   if (computedProps.children)
     return /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, __spreadValues({}, computedProps), computedProps.children);
   switch (computedProps.type) {
@@ -262,9 +275,11 @@ function FormItem(props) {
 // src/Form.tsx
 function Form(props) {
   var _a, _b;
-  return /* @__PURE__ */ import_react.default.createElement(import_antd3.Form, __spreadValues({}, props), (_a = props.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ import_react.default.createElement(FormItem, __spreadValues({
+  return /* @__PURE__ */ import_react.default.createElement(import_antd3.Form, __spreadValues({}, props), (_a = props.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ import_react.default.createElement(FormItem, __spreadProps(__spreadValues({
     key: item.id
-  }, item))), props.children, props.submit !== false && /* @__PURE__ */ import_react.default.createElement(import_antd3.Button, {
+  }, item), {
+    extendTypes: props.extendTypes
+  }))), props.children, props.submit !== false && /* @__PURE__ */ import_react.default.createElement(import_antd3.Button, {
     htmlType: "submit",
     type: "primary"
   }, ((_b = props.submit) == null ? void 0 : _b.text) || "Submit"));
@@ -290,6 +305,18 @@ function Table(props) {
         item.type = "string";
       if (item.render)
         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, {
+            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) {
         case "string[]":
           item.render = (value) => value.join(", ");

package/dist/index.mjs

@@ -40,14 +40,23 @@ function DescriptionItemContent(props) {
       propsCopy.item.type = "string";
     setComputedProps(propsCopy);
   }, [props]);
-  if (typeof computedProps.value === "undefined" || computedProps.value === null)
+  if (!computedProps || typeof computedProps.value === "undefined" || computedProps.value === null)
     return null;
-  if (computedProps.item.children) {
+  if (computedProps.extendTypes && computedProps.extendTypes[computedProps.item.type])
+    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);
   switch (computedProps.item.type) {
-    case "string":
-      return computedProps.value;
     case "string[]":
       return computedProps.value.join(", ");
     case "number":
@@ -61,7 +70,7 @@ function DescriptionItemContent(props) {
         style: { marginTop: "4px" }
       });
     default:
-      return null;
+      return computedProps.value;
   }
 }
 function Description(props) {
@@ -70,7 +79,9 @@ function Description(props) {
     label: item.title || upperFirst(item.id)
   }, /* @__PURE__ */ React.createElement(DescriptionItemContent, {
     item,
-    value: props.dataSource[item.id]
+    value: props.dataSource[item.id],
+    values: props.dataSource,
+    extendTypes: props.extendTypes
   }))));
 }
 
@@ -151,6 +162,8 @@ function FormItem(props) {
   }, [props]);
   if (!computedProps)
     return null;
+  if (computedProps.extendTypes && computedProps.extendTypes[computedProps.type])
+    return /* @__PURE__ */ React.createElement(AntdForm.Item, __spreadValues({}, computedProps), computedProps.extendTypes[computedProps.type].children);
   if (computedProps.children)
     return /* @__PURE__ */ React.createElement(AntdForm.Item, __spreadValues({}, computedProps), computedProps.children);
   switch (computedProps.type) {
@@ -247,9 +260,11 @@ function FormItem(props) {
 // src/Form.tsx
 function Form(props) {
   var _a, _b;
-  return /* @__PURE__ */ React.createElement(AntdForm2, __spreadValues({}, props), (_a = props.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ React.createElement(FormItem, __spreadValues({
+  return /* @__PURE__ */ React.createElement(AntdForm2, __spreadValues({}, props), (_a = props.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ React.createElement(FormItem, __spreadProps(__spreadValues({
     key: item.id
-  }, item))), props.children, props.submit !== false && /* @__PURE__ */ React.createElement(Button2, {
+  }, item), {
+    extendTypes: props.extendTypes
+  }))), props.children, props.submit !== false && /* @__PURE__ */ React.createElement(Button2, {
     htmlType: "submit",
     type: "primary"
   }, ((_b = props.submit) == null ? void 0 : _b.text) || "Submit"));
@@ -257,7 +272,11 @@ function Form(props) {
 Form.useForm = AntdForm2.useForm;
 
 // src/Table.tsx
-import { useState as useState3, useEffect as useEffect3 } from "react";
+import {
+  useState as useState3,
+  useEffect as useEffect3,
+  cloneElement as cloneElement2
+} from "react";
 import {
   Table as AntdTable
 } from "antd";
@@ -277,6 +296,18 @@ function Table(props) {
         item.type = "string";
       if (item.render)
         continue;
+      if (props.extendTypes && props.extendTypes[item.type]) {
+        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) {
         case "string[]":
           item.render = (value) => value.join(", ");

package/package.json

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