@faasjs/ant-design 0.0.2-beta.336 → 0.0.2-beta.340

package/dist/index.d.ts

@@ -11,22 +11,33 @@ declare type FaasItemTypeValue = {
     'number[]': number[];
     boolean: boolean;
 };
-declare type FaasItemProps = {
+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 ExtendDescriptionTypeProps = {
+    children?: JSX.Element | null;
+    render?: (value: any, values: any) => JSX.Element | string | number | boolean | null;
 };
-declare type DescriptionProps<T = any> = {
-    items: DescriptionItemProps[];
+declare type ExtendDescriptionItemProps = BaseItemType;
+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?: {
+        [key: string]: ExtendDescriptionTypeProps;
+    };
 } & DescriptionsProps;
 declare function Description(props: DescriptionProps): JSX.Element;
 
@@ -64,30 +75,49 @@ declare type OptionsProps<T = any> = {
     input?: SelectProps<any>;
 };
 declare type FormItemInputProps<T = any> = StringProps | StringListProps | NumberProps | NumberListProps | BooleanProps | OptionsProps<T>;
+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?: {
+        [type: string]: ExtendFormTypeProps;
+    };
 } & 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?: {
+        [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 TableProps<T = any> = TableProps$1<T> & {
-    items: TableItemProps[];
+declare type ExtendTableTypeProps = {
+    children?: JSX.Element | null;
+    render?: (value: any, values: any) => JSX.Element | string | number | boolean | null;
 };
-declare function Table(props: TableProps): JSX.Element;
+declare type ExtendTableItemProps<T = any> = BaseItemType & TableColumnProps<T>;
+declare type TableProps<T = any, ExtendTypes = any> = {
+    items: (TableItemProps | (ExtendTypes & BaseItemType))[];
+    extendTypes?: {
+        [key: string]: ExtendTableTypeProps;
+    };
+} & TableProps$1<T>;
+declare function Table<T = any, ExtendTypes = any>(props: TableProps<T, ExtendTypes>): JSX.Element;
 
-export { Description, DescriptionItemProps, DescriptionProps, 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

@@ -72,9 +72,20 @@ function DescriptionItemContent(props) {
   }, [props]);
   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.join(", ");
@@ -98,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
   }))));
 }
 
@@ -164,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) {
@@ -260,14 +275,17 @@ 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"));
 }
 Form.useForm = import_antd3.Form.useForm;
+Form.Item = FormItem;
 
 // src/Table.tsx
 var import_react4 = require("react");
@@ -288,6 +306,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

@@ -42,9 +42,20 @@ function DescriptionItemContent(props) {
   }, [props]);
   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.join(", ");
@@ -68,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
   }))));
 }
 
@@ -149,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) {
@@ -245,17 +260,24 @@ 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"));
 }
 Form.useForm = AntdForm2.useForm;
+Form.Item = FormItem;
 
 // 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";
@@ -275,6 +297,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.336",
+  "version": "0.0.2-beta.340",
   "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.336"
+    "@faasjs/react": "^0.0.2-beta.340"
   },
   "devDependencies": {
     "@types/lodash": "*",