@faasjs/ant-design 0.0.2-beta.437 → 0.0.2-beta.439

package/README.md

@@ -18,7 +18,9 @@ In `@faasjs/ant-design`, we use `FaasItemProps` to provide data structures for c
 type FaasItemType =
   'string' | 'string[]' |
   'number' | 'number[]' |
-  'boolean'
+  'boolean' |
+  'date' | 'time' |
+  'object' | 'object[]'
 
 type FaasItemProps = {
   type: FaasItemTypes
@@ -181,7 +183,7 @@ ___
 
 ### DescriptionItemProps
 
-Ƭ **DescriptionItemProps**<`T`\>: { `children?`: `JSX.Element` ; `render?`: (`value`: `T`, `values`: `any`) => `JSX.Element` \| `string` \| `number` \| `boolean` \| ``null``  } & [`FaasItemProps`](#faasitemprops)
+Ƭ **DescriptionItemProps**<`T`\>: { `children?`: `JSX.Element` ; `render?`: (`value`: `T`, `values`: `any`) => `ReactNode` \| `JSX.Element`  } & [`FaasItemProps`](#faasitemprops) & { `object?`: [`DescriptionItemProps`](#descriptionitemprops)[]  }
 
 #### Type parameters
 
@@ -193,7 +195,7 @@ ___
 
 ### DescriptionProps
 
-Ƭ **DescriptionProps**<`T`, `ExtendItemProps`\>: { `dataSource?`: `T` ; `extendTypes?`: { `[key: string]`: [`ExtendDescriptionTypeProps`](#extenddescriptiontypeprops);  } ; `faasData?`: `FaasDataWrapperProps`<`T`\> ; `items`: ([`DescriptionItemProps`](#descriptionitemprops) \| `ExtendItemProps`)[] ; `renderTitle?`: (`values`: `T`) => `ReactNode`  } & `DescriptionsProps`
+Ƭ **DescriptionProps**<`T`, `ExtendItemProps`\>: { `dataSource?`: `T` ; `extendTypes?`: { `[key: string]`: [`ExtendDescriptionTypeProps`](#extenddescriptiontypeprops);  } ; `faasData?`: `FaasDataWrapperProps`<`T`\> ; `items`: ([`DescriptionItemProps`](#descriptionitemprops) \| `ExtendItemProps`)[] ; `renderTitle?`: (`values`: `T`) => `ReactNode` \| `JSX.Element`  } & `DescriptionsProps`
 
 #### Type parameters
 
@@ -225,7 +227,7 @@ ___
 | Name | Type |
 | :------ | :------ |
 | `children?` | `JSX.Element` \| ``null`` |
-| `render?` | (`value`: `any`, `values`: `any`) => `JSX.Element` \| `string` \| `number` \| `boolean` \| ``null`` |
+| `render?` | (`value`: `any`, `values`: `any`) => `ReactNode` \| `JSX.Element` |
 
 ___
 
@@ -243,7 +245,7 @@ ___
 
 | Name | Type |
 | :------ | :------ |
-| `children?` | `JSX.Element` \| ``null`` |
+| `children?` | `ReactNode` |
 
 ___
 
@@ -298,6 +300,8 @@ ___
 
 Ƭ **FaasItemTypeValue**: `Object`
 
+FaasItemType's value type
+
 #### Type declaration
 
 | Name | Type |
@@ -316,7 +320,7 @@ ___
 
 ### FormItemProps
 
-Ƭ **FormItemProps**<`T`\>: { `children?`: `JSX.Element` \| ``null`` ; `extendTypes?`: [`ExtendTypes`](#extendtypes) ; `label?`: `string` \| ``false`` ; `render?`: () => `JSX.Element` \| ``null`` ; `rules?`: `RuleObject`[]  } & `FormItemInputProps` & [`FaasItemProps`](#faasitemprops) & `Omit`<`AntdFormItemProps`<`T`\>, ``"children"``\>
+Ƭ **FormItemProps**<`T`\>: { `children?`: `ReactNode` ; `extendTypes?`: [`ExtendTypes`](#extendtypes) ; `label?`: `string` \| ``false`` ; `render?`: (`value?`: `any`) => `ReactNode` \| `JSX.Element` ; `rules?`: `RuleObject`[]  } & `FormItemInputProps` & [`FaasItemProps`](#faasitemprops) & `Omit`<`AntdFormItemProps`<`T`\>, ``"children"``\>
 
 #### Type parameters
 
@@ -479,7 +483,7 @@ ___
 
 ### Blank
 
-▸ **Blank**(`options?`): `any`
+▸ **Blank**(`options?`): `JSX.Element`
 
 If value is undefined or null, return text, otherwise return value.
 
@@ -491,7 +495,7 @@ If value is undefined or null, return text, otherwise return value.
 
 #### Returns
 
-`any`
+`JSX.Element`
 
 ```ts
 <Blank value={undefined} text="Empty" />
@@ -571,6 +575,12 @@ ___
 
 ▸ **Form**<`Values`\>(`props`): `Element`
 
+Form component with Ant Design & FaasJS
+
+**`Ref`**
+
+https://ant.design/components/form/
+
 #### Type parameters
 
 | Name | Type |
@@ -695,6 +705,12 @@ ___
 
 ▸ **Table**<`T`, `ExtendTypes`\>(`props`): `Element`
 
+Table component with Ant Design & FaasJS
+
+**`Ref`**
+
+https://ant.design/components/table/
+
 #### Type parameters
 
 | Name | Type |

package/dist/index.d.ts

@@ -89,6 +89,7 @@ declare function ConfigProvider({ config, children }: {
 declare function useConfigContext(): ConfigProviderProps;
 
 declare type FaasItemType = 'string' | 'string[]' | 'number' | 'number[]' | 'boolean' | 'date' | 'time' | 'object' | 'object[]';
+/** FaasItemType's value type */
 declare type FaasItemTypeValue = {
     string: string;
     'string[]': string[];
@@ -120,6 +121,7 @@ declare function transferOptions(options: BaseOption[]): {
     label: string;
     value?: string | number;
 }[];
+declare function transferValue(type: FaasItemType, value: any): any;
 
 declare type DatePickerProps = PickerDateProps<Dayjs>;
 declare const DatePicker: antd_es_date_picker_generatePicker_interface.PickerComponentClass<antd_es_date_picker_generatePicker.PickerProps<Dayjs> & {
@@ -306,7 +308,13 @@ declare type FormProps<Values = any, ExtendItemProps = any> = {
     footer?: JSX.Element | JSX.Element[];
     extendTypes?: ExtendTypes;
     children?: ReactNode;
-} & Omit<FormProps$1<Values>, 'onFinish' | 'children'>;
+    initialValues?: Values;
+} & Omit<FormProps$1<Values>, 'onFinish' | 'children' | 'initialValues'>;
+/**
+ * Form component with Ant Design & FaasJS
+ *
+ * @ref https://ant.design/components/form/
+ */
 declare function Form<Values = any>(props: FormProps<Values>): JSX.Element;
 declare namespace Form {
     var useForm: typeof antd_lib_form_Form.useForm;
@@ -408,6 +416,11 @@ declare type TableProps<T = any, ExtendTypes = any> = {
         extra: TableCurrentDataSource<T>;
     };
 } & TableProps$1<T>;
+/**
+ * Table component with Ant Design & FaasJS
+ *
+ * @ref https://ant.design/components/table/
+ */
 declare function Table<T = any, ExtendTypes = any>(props: TableProps<T, ExtendTypes>): JSX.Element;
 
 declare type TimePickerProps = Omit<PickerTimeProps<Dayjs>, 'picker'>;
@@ -449,4 +462,4 @@ declare type TitleProps = {
  */
 declare function Title(props: TitleProps): JSX.Element;
 
-export { BaseItemProps, BaseOption, Blank, BlankProps, Calendar, CalendarProps, ConfigContext, ConfigProvider, ConfigProviderProps, DatePicker, DatePickerProps, Description, DescriptionItemProps, DescriptionProps, DrawerProps, ExtendDescriptionItemProps, ExtendDescriptionTypeProps, ExtendFormItemProps, ExtendFormTypeProps, ExtendTableItemProps, ExtendTableTypeProps, ExtendTypes, FaasItemProps, FaasItemType, FaasItemTypeValue, Form, FormItem, FormItemProps, FormProps, Link, LinkProps, ModalProps, PageNotFound, Routes, RoutesProps, Table, TableItemProps, TableProps, TimePicker, TimePickerProps, Title, TitleProps, setDrawerProps, setModalProps, transferOptions, useConfigContext, useDrawer, useModal };
+export { BaseItemProps, BaseOption, Blank, BlankProps, Calendar, CalendarProps, ConfigContext, ConfigProvider, ConfigProviderProps, DatePicker, DatePickerProps, Description, DescriptionItemProps, DescriptionProps, DrawerProps, ExtendDescriptionItemProps, ExtendDescriptionTypeProps, ExtendFormItemProps, ExtendFormTypeProps, ExtendTableItemProps, ExtendTableTypeProps, ExtendTypes, FaasItemProps, FaasItemType, FaasItemTypeValue, Form, FormItem, FormItemProps, FormProps, Link, LinkProps, ModalProps, PageNotFound, Routes, RoutesProps, Table, TableItemProps, TableProps, TimePicker, TimePickerProps, Title, TitleProps, setDrawerProps, setModalProps, transferOptions, transferValue, useConfigContext, useDrawer, useModal };

package/dist/index.js

@@ -43,6 +43,7 @@ __export(src_exports, {
   TimePicker: () => TimePicker,
   Title: () => Title,
   transferOptions: () => transferOptions,
+  transferValue: () => transferValue,
   useConfigContext: () => useConfigContext,
   useDrawer: () => useDrawer,
   useModal: () => useModal
@@ -146,6 +147,7 @@ var Calendar = (0, import_generateCalendar.default)(import_dayjs.default);
 
 // src/data.ts
 var import_lodash3 = require("lodash");
+var import_dayjs2 = __toESM(require("dayjs"));
 function transferOptions(options) {
   if (!options)
     return [];
@@ -154,19 +156,33 @@ function transferOptions(options) {
     value: item
   });
 }
+function transferValue(type, value) {
+  if (typeof value === "undefined" || value === null || value === "" || Array.isArray(value) && !value.length)
+    return null;
+  if (!type)
+    type = "string";
+  if (type.endsWith("[]") && typeof value === "string")
+    value = value.split(",");
+  if (["date", "time"].includes(type)) {
+    if (typeof value === "number" && value.toString().length === 10)
+      value = value * 1e3;
+    if (!import_dayjs2.default.isDayjs(value))
+      value = (0, import_dayjs2.default)(value);
+  }
+  return value;
+}
 
 // src/DatePicker.tsx
-var import_dayjs2 = __toESM(require("rc-picker/es/generate/dayjs.js"));
+var import_dayjs3 = __toESM(require("rc-picker/es/generate/dayjs.js"));
 var import_generatePicker = __toESM(require("antd/es/date-picker/generatePicker/index.js"));
 var import_style2 = require("antd/es/date-picker/style/index.js");
-var DatePicker = (0, import_generatePicker.default)(import_dayjs2.default);
+var DatePicker = (0, import_generatePicker.default)(import_dayjs3.default);
 
 // src/Description.tsx
 var import_icons = require("@ant-design/icons");
 var import_antd3 = require("antd");
 var import_lodash4 = require("lodash");
 var import_react3 = require("react");
-var import_dayjs3 = __toESM(require("dayjs"));
 var import_react4 = require("@faasjs/react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function DescriptionItemContent(props) {
@@ -182,6 +198,7 @@ function DescriptionItemContent(props) {
     if ((_a2 = propsCopy.item.options) == null ? void 0 : _a2.length) {
       propsCopy.item.options = transferOptions(propsCopy.item.options);
     }
+    propsCopy.value = transferValue(propsCopy.item.type, propsCopy.value);
     if (propsCopy.item.options && typeof propsCopy.value !== "undefined" && propsCopy.value !== null) {
       if (propsCopy.item.type.endsWith("[]"))
         propsCopy.value = propsCopy.value.map((v) => {
@@ -220,7 +237,7 @@ function DescriptionItemContent(props) {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {
       children: computedProps.item.render(computedProps.value, computedProps.values)
     });
-  if (typeof computedProps.value === "undefined" || computedProps.value === null)
+  if (computedProps.value === null)
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Blank, {});
   switch (computedProps.item.type) {
     case "string[]":
@@ -247,11 +264,11 @@ function DescriptionItemContent(props) {
       });
     case "time":
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {
-        children: typeof computedProps.value === "number" && computedProps.value.toString().length === 10 ? import_dayjs3.default.unix(computedProps.value).format("YYYY-MM-DD HH:mm:ss") : (0, import_dayjs3.default)(computedProps.value).format("YYYY-MM-DD HH:mm:ss")
+        children: computedProps.value.format("YYYY-MM-DD HH:mm:ss")
       });
     case "date":
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {
-        children: typeof computedProps.value === "number" && computedProps.value.toString().length === 10 ? import_dayjs3.default.unix(computedProps.value).format("YYYY-MM-DD") : (0, import_dayjs3.default)(computedProps.value).format("YYYY-MM-DD")
+        children: computedProps.value.format("YYYY-MM-DD")
       });
     case "object":
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Description, {
@@ -731,8 +748,14 @@ function Form(props) {
   const config = useConfigContext();
   const [extendTypes, setExtendTypes] = (0, import_react9.useState)();
   (0, import_react9.useEffect)(() => {
-    var _a2;
+    var _a2, _b2;
     const propsCopy = { ...props };
+    if (propsCopy.initialValues)
+      for (const key in propsCopy.initialValues)
+        propsCopy.initialValues[key] = transferValue(
+          (_a2 = propsCopy.items.find((i) => i.id === key)) == null ? void 0 : _a2.type,
+          propsCopy.initialValues[key]
+        );
     if (propsCopy.onFinish) {
       propsCopy.onFinish = async (values) => {
         var _a3;
@@ -750,7 +773,7 @@ function Form(props) {
         }
         setLoading(false);
       };
-    } else if (propsCopy.submit && ((_a2 = propsCopy.submit.to) == null ? void 0 : _a2.action)) {
+    } else if (propsCopy.submit && ((_b2 = propsCopy.submit.to) == null ? void 0 : _b2.action)) {
       propsCopy.onFinish = async (values) => {
         setLoading(true);
         return (0, import_react8.faas)(propsCopy.submit.to.action, propsCopy.submit.to.params ? {
@@ -923,28 +946,26 @@ var import_react13 = require("@faasjs/react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function processValue(item, value) {
   var _a;
-  if (typeof value === "undefined" || value === null || value === "" || Array.isArray(value) && !value.length)
+  const transferred = transferValue(item.type, value);
+  if (transferred === null)
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Blank, {});
   if (item.options) {
-    if (item.type.endsWith("[]")) {
-      if (!Array.isArray(value) && typeof value === "string")
-        value = value.split(",");
-      return value.map((v) => {
+    if (item.type.endsWith("[]"))
+      return transferred.map((v) => {
         var _a2;
         return ((_a2 = item.options.find((option) => option.value === v)) == null ? void 0 : _a2.label) || v;
-      });
-    } else if ([
+      }).join(", ");
+    if ([
       "string",
       "number",
       "boolean"
     ].includes(item.type))
-      return ((_a = item.options.find((option) => option.value === value)) == null ? void 0 : _a.label) || value;
-  }
-  if (["date", "time"].includes(item.type)) {
-    if (typeof value === "number" && value.toString().length === 10)
-      value = value * 1e3;
-    return (0, import_dayjs5.default)(value).format(item.type === "date" ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm:ss");
+      return ((_a = item.options.find((option) => option.value === transferred)) == null ? void 0 : _a.label) || transferred;
   }
+  if (item.type.endsWith("[]"))
+    return transferred.join(", ");
+  if (["date", "time"].includes(item.type))
+    return transferred.format(item.type === "date" ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm:ss");
   return value;
 }
 function Table(props) {
@@ -1018,7 +1039,7 @@ function Table(props) {
           break;
         case "string[]":
           if (!item.render)
-            item.render = (value) => processValue(item, value).join(", ");
+            item.render = (value) => processValue(item, value);
           if (!item.onFilter)
             item.onFilter = (value, row) => {
               if (!row[item.id] || !row[item.id].length)
@@ -1329,6 +1350,7 @@ function Title(props) {
   TimePicker,
   Title,
   transferOptions,
+  transferValue,
   useConfigContext,
   useDrawer,
   useModal

package/dist/index.mjs

@@ -100,6 +100,7 @@ var Calendar = generateCalendar(dayjsGenerateConfig);
 
 // src/data.ts
 import { upperFirst } from "lodash";
+import dayjs from "dayjs";
 function transferOptions(options) {
   if (!options)
     return [];
@@ -108,6 +109,21 @@ function transferOptions(options) {
     value: item
   });
 }
+function transferValue(type, value) {
+  if (typeof value === "undefined" || value === null || value === "" || Array.isArray(value) && !value.length)
+    return null;
+  if (!type)
+    type = "string";
+  if (type.endsWith("[]") && typeof value === "string")
+    value = value.split(",");
+  if (["date", "time"].includes(type)) {
+    if (typeof value === "number" && value.toString().length === 10)
+      value = value * 1e3;
+    if (!dayjs.isDayjs(value))
+      value = dayjs(value);
+  }
+  return value;
+}
 
 // src/DatePicker.tsx
 import dayjsGenerateConfig2 from "rc-picker/es/generate/dayjs.js";
@@ -128,7 +144,6 @@ import {
   useEffect as useEffect2,
   useState as useState2
 } from "react";
-import dayjs from "dayjs";
 import { FaasDataWrapper } from "@faasjs/react";
 import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
 function DescriptionItemContent(props) {
@@ -144,6 +159,7 @@ function DescriptionItemContent(props) {
     if ((_a2 = propsCopy.item.options) == null ? void 0 : _a2.length) {
       propsCopy.item.options = transferOptions(propsCopy.item.options);
     }
+    propsCopy.value = transferValue(propsCopy.item.type, propsCopy.value);
     if (propsCopy.item.options && typeof propsCopy.value !== "undefined" && propsCopy.value !== null) {
       if (propsCopy.item.type.endsWith("[]"))
         propsCopy.value = propsCopy.value.map((v) => {
@@ -182,7 +198,7 @@ function DescriptionItemContent(props) {
     return /* @__PURE__ */ jsx3(Fragment, {
       children: computedProps.item.render(computedProps.value, computedProps.values)
     });
-  if (typeof computedProps.value === "undefined" || computedProps.value === null)
+  if (computedProps.value === null)
     return /* @__PURE__ */ jsx3(Blank, {});
   switch (computedProps.item.type) {
     case "string[]":
@@ -209,11 +225,11 @@ function DescriptionItemContent(props) {
       });
     case "time":
       return /* @__PURE__ */ jsx3(Fragment, {
-        children: typeof computedProps.value === "number" && computedProps.value.toString().length === 10 ? dayjs.unix(computedProps.value).format("YYYY-MM-DD HH:mm:ss") : dayjs(computedProps.value).format("YYYY-MM-DD HH:mm:ss")
+        children: computedProps.value.format("YYYY-MM-DD HH:mm:ss")
       });
     case "date":
       return /* @__PURE__ */ jsx3(Fragment, {
-        children: typeof computedProps.value === "number" && computedProps.value.toString().length === 10 ? dayjs.unix(computedProps.value).format("YYYY-MM-DD") : dayjs(computedProps.value).format("YYYY-MM-DD")
+        children: computedProps.value.format("YYYY-MM-DD")
       });
     case "object":
       return /* @__PURE__ */ jsx3(Description, {
@@ -711,8 +727,14 @@ function Form(props) {
   const config = useConfigContext();
   const [extendTypes, setExtendTypes] = useState5();
   useEffect4(() => {
-    var _a2;
+    var _a2, _b2;
     const propsCopy = { ...props };
+    if (propsCopy.initialValues)
+      for (const key in propsCopy.initialValues)
+        propsCopy.initialValues[key] = transferValue(
+          (_a2 = propsCopy.items.find((i) => i.id === key)) == null ? void 0 : _a2.type,
+          propsCopy.initialValues[key]
+        );
     if (propsCopy.onFinish) {
       propsCopy.onFinish = async (values) => {
         var _a3;
@@ -730,7 +752,7 @@ function Form(props) {
         }
         setLoading(false);
       };
-    } else if (propsCopy.submit && ((_a2 = propsCopy.submit.to) == null ? void 0 : _a2.action)) {
+    } else if (propsCopy.submit && ((_b2 = propsCopy.submit.to) == null ? void 0 : _b2.action)) {
       propsCopy.onFinish = async (values) => {
         setLoading(true);
         return faas(propsCopy.submit.to.action, propsCopy.submit.to.params ? {
@@ -921,28 +943,26 @@ import { FaasDataWrapper as FaasDataWrapper2 } from "@faasjs/react";
 import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 function processValue(item, value) {
   var _a;
-  if (typeof value === "undefined" || value === null || value === "" || Array.isArray(value) && !value.length)
+  const transferred = transferValue(item.type, value);
+  if (transferred === null)
     return /* @__PURE__ */ jsx11(Blank, {});
   if (item.options) {
-    if (item.type.endsWith("[]")) {
-      if (!Array.isArray(value) && typeof value === "string")
-        value = value.split(",");
-      return value.map((v) => {
+    if (item.type.endsWith("[]"))
+      return transferred.map((v) => {
         var _a2;
         return ((_a2 = item.options.find((option) => option.value === v)) == null ? void 0 : _a2.label) || v;
-      });
-    } else if ([
+      }).join(", ");
+    if ([
       "string",
       "number",
       "boolean"
     ].includes(item.type))
-      return ((_a = item.options.find((option) => option.value === value)) == null ? void 0 : _a.label) || value;
-  }
-  if (["date", "time"].includes(item.type)) {
-    if (typeof value === "number" && value.toString().length === 10)
-      value = value * 1e3;
-    return dayjs3(value).format(item.type === "date" ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm:ss");
+      return ((_a = item.options.find((option) => option.value === transferred)) == null ? void 0 : _a.label) || transferred;
   }
+  if (item.type.endsWith("[]"))
+    return transferred.join(", ");
+  if (["date", "time"].includes(item.type))
+    return transferred.format(item.type === "date" ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm:ss");
   return value;
 }
 function Table(props) {
@@ -1016,7 +1036,7 @@ function Table(props) {
           break;
         case "string[]":
           if (!item.render)
-            item.render = (value) => processValue(item, value).join(", ");
+            item.render = (value) => processValue(item, value);
           if (!item.onFilter)
             item.onFilter = (value, row) => {
               if (!row[item.id] || !row[item.id].length)
@@ -1326,6 +1346,7 @@ export {
   TimePicker,
   Title,
   transferOptions,
+  transferValue,
   useConfigContext,
   useDrawer,
   useModal

package/package.json

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