@faasjs/ant-design 0.0.2-beta.438 → 0.0.2-beta.440

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as antd_es_calendar_generateCalendar_js from 'antd/es/calendar/generateCalendar.js';
 import { Dayjs } from 'dayjs';
-import { CalendarProps as CalendarProps$1, DescriptionsProps, DrawerProps as DrawerProps$1, FormItemProps as FormItemProps$1, InputProps, InputNumberProps, SwitchProps, DatePickerProps as DatePickerProps$1, TimePickerProps as TimePickerProps$1, SelectProps, FormProps as FormProps$1, ButtonProps, ModalProps as ModalProps$1, TableColumnProps, TablePaginationConfig, TableProps as TableProps$1, PageHeaderProps } from 'antd';
+import { CalendarProps as CalendarProps$1, DescriptionsProps, DrawerProps as DrawerProps$1, FormItemProps as FormItemProps$1, FormInstance, InputProps, InputNumberProps, SwitchProps, DatePickerProps as DatePickerProps$1, TimePickerProps as TimePickerProps$1, SelectProps, FormProps as FormProps$1, ButtonProps, ModalProps as ModalProps$1, TableColumnProps, TablePaginationConfig, TableProps as TableProps$1, PageHeaderProps } from 'antd';
 export { Drawer, Modal } from 'antd';
 import * as react from 'react';
 import { CSSProperties, ReactNode, LazyExoticComponent, ComponentType } from 'react';
@@ -121,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> & {
@@ -245,10 +246,12 @@ declare type ExtendTypes = {
 declare type ExtendFormItemProps = BaseItemProps & FormItemProps$1;
 declare type FormItemProps<T = any> = {
     children?: ReactNode;
-    render?: (value?: any) => ReactNode | JSX.Element;
+    render?: (value?: T) => ReactNode | JSX.Element;
     rules?: RuleObject[];
     label?: string | false;
     extendTypes?: ExtendTypes;
+    /** trigger when current item's value changed */
+    onValueChange?: (value: T, values: any, form: FormInstance) => void;
 } & FormItemInputProps & FaasItemProps & Omit<FormItemProps$1<T>, 'children'>;
 /**
  * FormItem, can be used without Form.
@@ -307,7 +310,8 @@ 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
  *
@@ -316,7 +320,6 @@ declare type FormProps<Values = any, ExtendItemProps = any> = {
 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 LinkProps = {
@@ -460,4 +463,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, {
@@ -730,9 +747,19 @@ function Form(props) {
   const [computedProps, setComputedProps] = (0, import_react9.useState)();
   const config = useConfigContext();
   const [extendTypes, setExtendTypes] = (0, import_react9.useState)();
+  const [form] = import_antd6.Form.useForm(props.form);
   (0, import_react9.useEffect)(() => {
-    var _a2;
-    const propsCopy = { ...props };
+    var _a2, _b2;
+    const propsCopy = {
+      ...props,
+      form
+    };
+    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 +777,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 ? {
@@ -763,6 +790,20 @@ function Form(props) {
       setExtendTypes(propsCopy.extendTypes);
       delete propsCopy.extendTypes;
     }
+    let originValuesChange;
+    if (propsCopy.onValuesChange)
+      originValuesChange = propsCopy.onValuesChange;
+    propsCopy.onValuesChange = (changedValues, allValues) => {
+      if (originValuesChange)
+        originValuesChange(changedValues, allValues);
+      if (!propsCopy.items)
+        return;
+      for (const key in changedValues) {
+        const item = propsCopy.items.find((i) => i.id === key);
+        if (item == null ? void 0 : item.onValueChange)
+          item.onValueChange(changedValues[key], allValues, form);
+      }
+    };
     setComputedProps(propsCopy);
   }, []);
   if (!computedProps)
@@ -787,7 +828,6 @@ function Form(props) {
   });
 }
 Form.useForm = import_antd6.Form.useForm;
-Form.Item = FormItem;
 
 // src/Link.tsx
 var import_react_router_dom = require("react-router-dom");
@@ -923,13 +963,12 @@ 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.type.endsWith("[]") && typeof value === "string")
-    value = value.split(",");
   if (item.options) {
     if (item.type.endsWith("[]"))
-      return value.map((v) => {
+      return transferred.map((v) => {
         var _a2;
         return ((_a2 = item.options.find((option) => option.value === v)) == null ? void 0 : _a2.label) || v;
       }).join(", ");
@@ -938,15 +977,12 @@ function processValue(item, value) {
       "number",
       "boolean"
     ].includes(item.type))
-      return ((_a = item.options.find((option) => option.value === value)) == null ? void 0 : _a.label) || value;
+      return ((_a = item.options.find((option) => option.value === transferred)) == null ? void 0 : _a.label) || transferred;
   }
   if (item.type.endsWith("[]"))
-    return value.join(", ");
-  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 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) {
@@ -1331,6 +1367,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, {
@@ -710,9 +726,19 @@ function Form(props) {
   const [computedProps, setComputedProps] = useState5();
   const config = useConfigContext();
   const [extendTypes, setExtendTypes] = useState5();
+  const [form] = AntdForm2.useForm(props.form);
   useEffect4(() => {
-    var _a2;
-    const propsCopy = { ...props };
+    var _a2, _b2;
+    const propsCopy = {
+      ...props,
+      form
+    };
+    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 +756,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 ? {
@@ -743,6 +769,20 @@ function Form(props) {
       setExtendTypes(propsCopy.extendTypes);
       delete propsCopy.extendTypes;
     }
+    let originValuesChange;
+    if (propsCopy.onValuesChange)
+      originValuesChange = propsCopy.onValuesChange;
+    propsCopy.onValuesChange = (changedValues, allValues) => {
+      if (originValuesChange)
+        originValuesChange(changedValues, allValues);
+      if (!propsCopy.items)
+        return;
+      for (const key in changedValues) {
+        const item = propsCopy.items.find((i) => i.id === key);
+        if (item == null ? void 0 : item.onValueChange)
+          item.onValueChange(changedValues[key], allValues, form);
+      }
+    };
     setComputedProps(propsCopy);
   }, []);
   if (!computedProps)
@@ -767,7 +807,6 @@ function Form(props) {
   });
 }
 Form.useForm = AntdForm2.useForm;
-Form.Item = FormItem;
 
 // src/Link.tsx
 import { Link as RouterLink } from "react-router-dom";
@@ -921,13 +960,12 @@ 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.type.endsWith("[]") && typeof value === "string")
-    value = value.split(",");
   if (item.options) {
     if (item.type.endsWith("[]"))
-      return value.map((v) => {
+      return transferred.map((v) => {
         var _a2;
         return ((_a2 = item.options.find((option) => option.value === v)) == null ? void 0 : _a2.label) || v;
       }).join(", ");
@@ -936,15 +974,12 @@ function processValue(item, value) {
       "number",
       "boolean"
     ].includes(item.type))
-      return ((_a = item.options.find((option) => option.value === value)) == null ? void 0 : _a.label) || value;
+      return ((_a = item.options.find((option) => option.value === transferred)) == null ? void 0 : _a.label) || transferred;
   }
   if (item.type.endsWith("[]"))
-    return value.join(", ");
-  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 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) {
@@ -1328,6 +1363,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.438",
+  "version": "0.0.2-beta.440",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -28,7 +28,7 @@
     "lodash": "*",
     "react": "*",
     "react-dom": "*",
-    "@faasjs/react": "^0.0.2-beta.438",
+    "@faasjs/react": "^0.0.2-beta.440",
     "react-router-dom": "*",
     "dayjs": "*"
   },