@faasjs/ant-design 0.0.2-beta.370 → 0.0.2-beta.374

package/README.md

@@ -50,6 +50,8 @@ Form are based on [Ant Design's Form.Item component](https://ant.design/componen
 - [BaseItemProps](#baseitemprops)
 - [BaseOption](#baseoption)
 - [BlankProps](#blankprops)
+- [CalendarProps](#calendarprops)
+- [DatePickerProps](#datepickerprops)
 - [DescriptionItemProps](#descriptionitemprops)
 - [DescriptionProps](#descriptionprops)
 - [DrawerProps](#drawerprops)
@@ -69,11 +71,20 @@ Form are based on [Ant Design's Form.Item component](https://ant.design/componen
 - [RoutesProps](#routesprops)
 - [TableItemProps](#tableitemprops)
 - [TableProps](#tableprops)
+- [TimePickerProps](#timepickerprops)
 - [TitleProps](#titleprops)
+- [setDrawerProps](#setdrawerprops)
+- [setModalProps](#setmodalprops)
+
+### Variables
+
+- [DatePicker](#datepicker)
+- [TimePicker](#timepicker)
 
 ### Functions
 
 - [Blank](#blank)
+- [Calendar](#calendar)
 - [Config](#config)
 - [Description](#description)
 - [Form](#form)
@@ -121,6 +132,18 @@ ___
 
 ___
 
+### CalendarProps
+
+Ƭ **CalendarProps**: `AntdProps`<`Dayjs`\>
+
+___
+
+### DatePickerProps
+
+Ƭ **DatePickerProps**: `PickerDateProps`<`Dayjs`\>
+
+___
+
 ### DescriptionItemProps
 
 Ƭ **DescriptionItemProps**<`T`\>: { `children?`: `JSX.Element` ; `render?`: (`value`: `T`, `values`: `any`) => `string` \| `number` \| `boolean` \| `Element`  } & [`FaasItemProps`](#faasitemprops)
@@ -135,7 +158,7 @@ ___
 
 ### DescriptionProps
 
-Ƭ **DescriptionProps**<`T`, `ExtendItemProps`\>: { `dataSource?`: `T` ; `extendTypes?`: { [key: string]: [`ExtendDescriptionTypeProps`](#extenddescriptiontypeprops);  } ; `faasData?`: `FaasDataWrapperProps`<`T`\> ; `items`: ([`DescriptionItemProps`](#descriptionitemprops) \| `ExtendItemProps`)[]  } & `DescriptionsProps`
+Ƭ **DescriptionProps**<`T`, `ExtendItemProps`\>: { `dataSource?`: `T` ; `extendTypes?`: { `[key: string]`: [`ExtendDescriptionTypeProps`](#extenddescriptiontypeprops);  } ; `faasData?`: `FaasDataWrapperProps`<`T`\> ; `items`: ([`DescriptionItemProps`](#descriptionitemprops) \| `ExtendItemProps`)[]  } & `DescriptionsProps`
 
 #### Type parameters
 
@@ -222,7 +245,7 @@ ___
 
 ### FaasItemType
 
-Ƭ **FaasItemType**: ``"string"`` \| ``"string[]"`` \| ``"number"`` \| ``"number[]"`` \| ``"boolean"``
+Ƭ **FaasItemType**: ``"string"`` \| ``"string[]"`` \| ``"number"`` \| ``"number[]"`` \| ``"boolean"`` \| ``"date"`` \| ``"time"``
 
 ___
 
@@ -235,10 +258,12 @@ ___
 | Name | Type |
 | :------ | :------ |
 | `boolean` | `boolean` |
+| `date` | `Dayjs` |
 | `number` | `number` |
 | `number[]` | `number`[] |
 | `string` | `string` |
 | `string[]` | `string`[] |
+| `time` | `Dayjs` |
 
 ___
 
@@ -268,7 +293,7 @@ ___
 
 ### FormItemProps
 
-Ƭ **FormItemProps**<`T`\>: { `children?`: `JSX.Element` \| ``null`` ; `extendTypes?`: { [type: string]: [`ExtendFormTypeProps`](#extendformtypeprops);  } ; `label?`: `string` \| ``false`` ; `rules?`: `RuleObject`[] ; `render?`: () => `Element`  } & `FormItemInputProps`<`T`\> & [`FaasItemProps`](#faasitemprops) & `AntdFormItemProps`<`T`\>
+Ƭ **FormItemProps**<`T`\>: { `children?`: `JSX.Element` \| ``null`` ; `extendTypes?`: { `[type: string]`: [`ExtendFormTypeProps`](#extendformtypeprops);  } ; `label?`: `string` \| ``false`` ; `rules?`: `RuleObject`[] ; `render?`: () => `Element`  } & `FormItemInputProps`<`T`\> & [`FaasItemProps`](#faasitemprops) & `AntdFormItemProps`<`T`\>
 
 #### Type parameters
 
@@ -280,7 +305,7 @@ ___
 
 ### FormProps
 
-Ƭ **FormProps**<`Values`, `ExtendItemProps`\>: { `extendTypes?`: { [type: string]: [`ExtendFormTypeProps`](#extendformtypeprops);  } ; `items?`: ([`FormItemProps`](#formitemprops) \| `ExtendItemProps`)[] ; `submit?`: ``false`` \| { `text?`: `string`  }  } & `AntdFormProps`<`Values`\>
+Ƭ **FormProps**<`Values`, `ExtendItemProps`\>: { `extendTypes?`: { `[type: string]`: [`ExtendFormTypeProps`](#extendformtypeprops);  } ; `items?`: ([`FormItemProps`](#formitemprops) \| `ExtendItemProps`)[] ; `submit?`: ``false`` \| { `text?`: `string`  }  } & `AntdFormProps`<`Values`\>
 
 #### Type parameters
 
@@ -325,7 +350,7 @@ ___
 
 ### TableProps
 
-Ƭ **TableProps**<`T`, `ExtendTypes`\>: { `extendTypes?`: { [key: string]: [`ExtendTableTypeProps`](#extendtabletypeprops);  } ; `faasData?`: `FaasDataWrapperProps`<`T`\> ; `items`: ([`TableItemProps`](#tableitemprops) \| `ExtendTypes` & [`ExtendTableItemProps`](#extendtableitemprops))[] ; `onChange?`: (`pagination`: `TablePaginationConfig`, `filters`: `Record`<`string`, `FilterValue`\>, `sorter`: `SorterResult`<`T`\> \| `SorterResult`<`T`\>[], `extra`: `TableCurrentDataSource`<`T`\>) => { `extra`: `TableCurrentDataSource`<`T`\> ; `filters`: `Record`<`string`, `FilterValue` \| ``null``\> ; `pagination`: `TablePaginationConfig` ; `sorter`: `SorterResult`<`T`\> \| `SorterResult`<`T`\>[]  }  } & `AntdTableProps`<`T`\>
+Ƭ **TableProps**<`T`, `ExtendTypes`\>: { `extendTypes?`: { `[key: string]`: [`ExtendTableTypeProps`](#extendtabletypeprops);  } ; `faasData?`: `FaasDataWrapperProps`<`T`\> ; `items`: ([`TableItemProps`](#tableitemprops) \| `ExtendTypes` & [`ExtendTableItemProps`](#extendtableitemprops))[] ; `onChange?`: (`pagination`: `TablePaginationConfig`, `filters`: `Record`<`string`, `FilterValue`\>, `sorter`: `SorterResult`<`T`\> \| `SorterResult`<`T`\>[], `extra`: `TableCurrentDataSource`<`T`\>) => { `extra`: `TableCurrentDataSource`<`T`\> ; `filters`: `Record`<`string`, `FilterValue` \| ``null``\> ; `pagination`: `TablePaginationConfig` ; `sorter`: `SorterResult`<`T`\> \| `SorterResult`<`T`\>[]  }  } & `AntdTableProps`<`T`\>
 
 #### Type parameters
 
@@ -336,6 +361,12 @@ ___
 
 ___
 
+### TimePickerProps
+
+Ƭ **TimePickerProps**: `Omit`<`PickerTimeProps`<`Dayjs`\>, ``"picker"``\>
+
+___
+
 ### TitleProps
 
 Ƭ **TitleProps**: `Object`
@@ -344,10 +375,64 @@ ___
 
 | Name | Type | Description |
 | :------ | :------ | :------ |
+| `children?` | `JSX.Element` | return children |
+| `h1?` | `boolean` \| { `className?`: `string` ; `style?`: `React.CSSProperties`  } | return a h1 element |
 | `separator?` | `string` | ` - ` as default |
 | `suffix?` | `string` | - |
 | `title` | `string` \| `string`[] | - |
 
+___
+
+### setDrawerProps
+
+Ƭ **setDrawerProps**: (`changes`: `Partial`<[`DrawerProps`](#drawerprops)\>) => `void`
+
+#### Type declaration
+
+▸ (`changes`): `void`
+
+##### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `changes` | `Partial`<[`DrawerProps`](#drawerprops)\> |
+
+##### Returns
+
+`void`
+
+___
+
+### setModalProps
+
+Ƭ **setModalProps**: (`changes`: `Partial`<[`ModalProps`](#modalprops)\>) => `void`
+
+#### Type declaration
+
+▸ (`changes`): `void`
+
+##### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `changes` | `Partial`<[`ModalProps`](#modalprops)\> |
+
+##### Returns
+
+`void`
+
+## Variables
+
+### DatePicker
+
+• **DatePicker**: `PickerComponentClass`<`PickerProps`<`Dayjs`\>, `unknown`\> & {}
+
+___
+
+### TimePicker
+
+• **TimePicker**: `ForwardRefExoticComponent`<[`TimePickerProps`](#timepickerprops) & `RefAttributes`<`any`\>\>
+
 ## Functions
 
 ### Blank
@@ -372,6 +457,22 @@ If value is undefined or null, return text, otherwise return value.
 
 ___
 
+### Calendar
+
+▸ `Const` **Calendar**(`props`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `CalendarProps`<`Dayjs`\> |
+
+#### Returns
+
+`Element`
+
+___
+
 ### Config
 
 ▸ **Config**(`props`): `JSX.Element`
@@ -520,6 +621,22 @@ ___
 
 ▸ **Title**(`props`): `JSX.Element`
 
+Title is used to change the title of the page.
+Return null by default.
+
+```ts
+// return null
+<Title title='hi' /> // => change the document.title to 'hi'
+<Title title={['a', 'b']} /> // => change the document.title to 'a - b'
+
+// return h1
+<Title title='hi' h1 /> // => <h1>hi</h1>
+<Title title={['a', 'b']} h1 /> // => <h1>a</h1>
+
+// return children
+<Title title='hi'><CustomTitle /></Title> // => <CustomTitle />
+```
+
 #### Parameters
 
 | Name | Type |

package/dist/index.d.ts

@@ -1,9 +1,15 @@
-import * as react_use_lib_misc_hookState from 'react-use/lib/misc/hookState';
-import { DescriptionsProps, DrawerProps as DrawerProps$1, FormItemProps as FormItemProps$1, InputProps, InputNumberProps, SwitchProps, SelectProps, FormProps as FormProps$1, ModalProps as ModalProps$1, TableColumnProps, TablePaginationConfig, TableProps as TableProps$1 } from 'antd';
+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, ModalProps as ModalProps$1, TableColumnProps, TablePaginationConfig, TableProps as TableProps$1 } from 'antd';
 export { Drawer, Modal } from 'antd';
+import * as react_use_lib_misc_hookState from 'react-use/lib/misc/hookState';
+import * as antd_es_date_picker_generatePicker_interface from 'antd/es/date-picker/generatePicker/interface';
+import * as antd_es_date_picker_generatePicker from 'antd/es/date-picker/generatePicker';
+import { PickerDateProps, PickerTimeProps } from 'antd/es/date-picker/generatePicker';
 import { FaasDataWrapperProps } from '@faasjs/react';
 import * as antd_lib_form_Form from 'antd/lib/form/Form';
 import { RuleObject } from 'rc-field-form/lib/interface';
+import * as react from 'react';
 import { LazyExoticComponent, ComponentType } from 'react';
 import { RouteProps } from 'react-router-dom';
 import { FilterValue, SorterResult, TableCurrentDataSource } from 'antd/lib/table/interface';
@@ -26,6 +32,9 @@ declare type BlankProps = {
  */
 declare function Blank(options?: BlankProps): any;
 
+declare type CalendarProps = CalendarProps$1<Dayjs>;
+declare const Calendar: (props: antd_es_calendar_generateCalendar_js.CalendarProps<Dayjs>) => JSX.Element;
+
 declare type FaasState = {
     common: {
         blank: string;
@@ -65,13 +74,15 @@ declare function Config(props: {
     config: Partial<FaasState>;
 }): JSX.Element;
 
-declare type FaasItemType = 'string' | 'string[]' | 'number' | 'number[]' | 'boolean';
+declare type FaasItemType = 'string' | 'string[]' | 'number' | 'number[]' | 'boolean' | 'date' | 'time';
 declare type FaasItemTypeValue = {
     string: string;
     'string[]': string[];
     number: number;
     'number[]': number[];
     boolean: boolean;
+    'date': Dayjs;
+    'time': Dayjs;
 };
 declare type BaseOption = string | number | {
     label: string;
@@ -94,6 +105,16 @@ declare function transferOptions(options: BaseOption[]): {
     value?: string | number;
 }[];
 
+declare type DatePickerProps = PickerDateProps<Dayjs>;
+declare const DatePicker: antd_es_date_picker_generatePicker_interface.PickerComponentClass<antd_es_date_picker_generatePicker.PickerProps<Dayjs>, unknown> & {
+    WeekPicker: antd_es_date_picker_generatePicker_interface.PickerComponentClass<Omit<PickerDateProps<Dayjs>, "picker">, unknown>;
+    MonthPicker: antd_es_date_picker_generatePicker_interface.PickerComponentClass<Omit<PickerDateProps<Dayjs>, "picker">, unknown>;
+    YearPicker: antd_es_date_picker_generatePicker_interface.PickerComponentClass<Omit<PickerDateProps<Dayjs>, "picker">, unknown>;
+    RangePicker: antd_es_date_picker_generatePicker_interface.PickerComponentClass<antd_es_date_picker_generatePicker.RangePickerProps<Dayjs>, unknown>;
+    TimePicker: antd_es_date_picker_generatePicker_interface.PickerComponentClass<Omit<antd_es_date_picker_generatePicker.PickerTimeProps<Dayjs>, "picker">, unknown>;
+    QuarterPicker: antd_es_date_picker_generatePicker_interface.PickerComponentClass<Omit<antd_es_date_picker_generatePicker.PickerTimeProps<Dayjs>, "picker">, unknown>;
+};
+
 declare type ExtendDescriptionTypeProps = {
     children?: JSX.Element | null;
     render?: (value: any, values: any) => JSX.Element | string | number | boolean | null;
@@ -116,6 +137,7 @@ declare function Description<T = any>(props: DescriptionProps<T>): JSX.Element;
 declare type DrawerProps = DrawerProps$1 & {
     children?: JSX.Element | JSX.Element[];
 };
+declare type setDrawerProps = (changes: Partial<DrawerProps>) => void;
 /**
  * Hook style drawer.
  * @param init initial props
@@ -161,12 +183,20 @@ declare type BooleanProps = {
     type: 'boolean';
     input?: SwitchProps;
 };
+declare type DateProps = {
+    type: 'date';
+    input?: DatePickerProps$1;
+};
+declare type TimeProps = {
+    type: 'time';
+    input?: TimePickerProps$1;
+};
 declare type OptionsProps = {
     options?: BaseOption[];
     type?: 'string' | 'string[]' | 'number' | 'number[]';
     input?: SelectProps<any>;
 };
-declare type FormItemInputProps<T = any> = StringProps | StringListProps | NumberProps | NumberListProps | BooleanProps | OptionsProps;
+declare type FormItemInputProps<T = any> = StringProps | StringListProps | NumberProps | NumberListProps | BooleanProps | OptionsProps | DateProps | TimeProps;
 declare type ExtendFormTypeProps = {
     children?: JSX.Element | null;
 };
@@ -215,6 +245,7 @@ declare namespace Form {
 declare type ModalProps = ModalProps$1 & {
     children?: JSX.Element | JSX.Element[];
 };
+declare type setModalProps = (changes: Partial<ModalProps>) => void;
 /**
  * Hook style modal.
  * @param init initial props
@@ -266,12 +297,39 @@ declare type TableProps<T = any, ExtendTypes = any> = {
 } & TableProps$1<T>;
 declare function Table<T = any, ExtendTypes = any>(props: TableProps<T, ExtendTypes>): JSX.Element;
 
+declare type TimePickerProps = Omit<PickerTimeProps<Dayjs>, 'picker'>;
+declare const TimePicker: react.ForwardRefExoticComponent<TimePickerProps & react.RefAttributes<any>>;
+
 declare type TitleProps = {
     title: string | string[];
     /** ` - ` as default */
     separator?: string;
     suffix?: string;
+    /** return a h1 element */
+    h1?: boolean | {
+        className?: string;
+        style?: React.CSSProperties;
+    };
+    /** return children */
+    children?: JSX.Element;
 };
+/**
+ * Title is used to change the title of the page.
+ * Return null by default.
+ *
+ * ```ts
+ * // return null
+ * <Title title='hi' /> // => change the document.title to 'hi'
+ * <Title title={['a', 'b']} /> // => change the document.title to 'a - b'
+ *
+ * // return h1
+ * <Title title='hi' h1 /> // => <h1>hi</h1>
+ * <Title title={['a', 'b']} h1 /> // => <h1>a</h1>
+ *
+ * // return children
+ * <Title title='hi'><CustomTitle /></Title> // => <CustomTitle />
+ * ```
+ */
 declare function Title(props: TitleProps): JSX.Element;
 
-export { BaseItemProps, BaseOption, Blank, BlankProps, Config, Description, DescriptionItemProps, DescriptionProps, DrawerProps, ExtendDescriptionItemProps, ExtendDescriptionTypeProps, ExtendFormItemProps, ExtendFormTypeProps, ExtendTableItemProps, ExtendTableTypeProps, FaasItemProps, FaasItemType, FaasItemTypeValue, FaasState, Form, FormItem, FormItemProps, FormProps, ModalProps, Routes, RoutesProps, Table, TableItemProps, TableProps, Title, TitleProps, transferOptions, useDrawer, useFaasState, useModal };
+export { BaseItemProps, BaseOption, Blank, BlankProps, Calendar, CalendarProps, Config, DatePicker, DatePickerProps, Description, DescriptionItemProps, DescriptionProps, DrawerProps, ExtendDescriptionItemProps, ExtendDescriptionTypeProps, ExtendFormItemProps, ExtendFormTypeProps, ExtendTableItemProps, ExtendTableTypeProps, FaasItemProps, FaasItemType, FaasItemTypeValue, FaasState, Form, FormItem, FormItemProps, FormProps, ModalProps, Routes, RoutesProps, Table, TableItemProps, TableProps, TimePicker, TimePickerProps, Title, TitleProps, setDrawerProps, setModalProps, transferOptions, useDrawer, useFaasState, useModal };

package/dist/index.js

@@ -47,7 +47,9 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
 var src_exports = {};
 __export(src_exports, {
   Blank: () => Blank,
+  Calendar: () => Calendar,
   Config: () => Config,
+  DatePicker: () => DatePicker,
   Description: () => Description,
   Drawer: () => import_antd3.Drawer,
   Form: () => Form,
@@ -55,6 +57,7 @@ __export(src_exports, {
   Modal: () => import_antd6.Modal,
   Routes: () => Routes,
   Table: () => Table,
+  TimePicker: () => TimePicker,
   Title: () => Title,
   transferOptions: () => transferOptions,
   useDrawer: () => useDrawer,
@@ -109,6 +112,12 @@ function Blank(options) {
   }, (options == null ? void 0 : options.text) || config.Blank.text) : options.value;
 }
 
+// src/Calendar.tsx
+var import_dayjs = __toESM(require("rc-picker/es/generate/dayjs.js"));
+var import_generateCalendar = __toESM(require("antd/es/calendar/generateCalendar.js"));
+var import_style = require("antd/es/calendar/style/index.js");
+var Calendar = (0, import_generateCalendar.default)(import_dayjs.default);
+
 // src/data.ts
 var import_lodash2 = require("lodash");
 function transferOptions(options) {
@@ -120,11 +129,18 @@ function transferOptions(options) {
   });
 }
 
+// src/DatePicker.tsx
+var import_dayjs2 = __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);
+
 // src/Description.tsx
 var import_icons = require("@ant-design/icons");
 var import_antd2 = require("antd");
 var import_lodash3 = require("lodash");
 var import_react3 = require("react");
+var import_dayjs3 = __toESM(require("dayjs"));
 var import_react4 = require("@faasjs/react");
 function DescriptionItemContent(props) {
   const [computedProps, setComputedProps] = (0, import_react3.useState)();
@@ -144,7 +160,11 @@ function DescriptionItemContent(props) {
           var _a2;
           return ((_a2 = propsCopy.item.options.find((option) => option.value === v)) == null ? void 0 : _a2.label) || v;
         });
-      else
+      else if ([
+        "string",
+        "number",
+        "boolean"
+      ].includes(propsCopy.item.type))
         propsCopy.value = ((_b = props.item.options.find((option) => option.value === props.value)) == null ? void 0 : _b.label) || props.value;
     }
     setComputedProps(propsCopy);
@@ -186,6 +206,10 @@ function DescriptionItemContent(props) {
           color: "#ff4d4f"
         }
       });
+    case "time":
+      return 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");
+    case "date":
+      return 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");
     default:
       return computedProps.value;
   }
@@ -238,16 +262,29 @@ function useDrawer(init) {
 
 // src/Form.tsx
 var import_antd5 = require("antd");
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/FormItem.tsx
 var import_antd4 = require("antd");
 var import_icons2 = require("@ant-design/icons");
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_lodash4 = require("lodash");
+
+// src/TimePicker.tsx
+var import_react6 = require("react");
+var TimePicker = (0, import_react6.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ import_react.default.createElement(DatePicker, __spreadProps(__spreadValues({}, props), {
+    picker: "time",
+    mode: void 0,
+    ref
+  }));
+});
+TimePicker.displayName = "TimePicker";
+
+// src/FormItem.tsx
 function FormItem(props) {
-  const [computedProps, setComputedProps] = (0, import_react6.useState)();
-  (0, import_react6.useEffect)(() => {
+  const [computedProps, setComputedProps] = (0, import_react7.useState)();
+  (0, import_react7.useEffect)(() => {
     const propsCopy = __spreadValues({}, props);
     if (!propsCopy.title)
       propsCopy.title = (0, import_lodash4.upperFirst)(propsCopy.id);
@@ -390,6 +427,10 @@ function FormItem(props) {
       });
     case "boolean":
       return /* @__PURE__ */ import_react.default.createElement(import_antd4.Form.Item, __spreadValues({}, computedProps), /* @__PURE__ */ import_react.default.createElement(import_antd4.Switch, __spreadValues({}, computedProps.input)));
+    case "date":
+      return /* @__PURE__ */ import_react.default.createElement(import_antd4.Form.Item, __spreadValues({}, computedProps), /* @__PURE__ */ import_react.default.createElement(DatePicker, __spreadValues({}, computedProps.input)));
+    case "time":
+      return /* @__PURE__ */ import_react.default.createElement(import_antd4.Form.Item, __spreadValues({}, computedProps), /* @__PURE__ */ import_react.default.createElement(TimePicker, __spreadValues({}, computedProps.input)));
     default:
       return null;
   }
@@ -398,10 +439,10 @@ function FormItem(props) {
 // src/Form.tsx
 function Form(props) {
   var _a, _b;
-  const [loading, setLoading] = (0, import_react7.useState)(false);
-  const [computedProps, setComputedProps] = (0, import_react7.useState)();
+  const [loading, setLoading] = (0, import_react8.useState)(false);
+  const [computedProps, setComputedProps] = (0, import_react8.useState)();
   const [config] = useFaasState();
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const propsCopy = __spreadValues({}, props);
     if (propsCopy.onFinish) {
       propsCopy.onFinish = async (values) => {
@@ -433,9 +474,9 @@ Form.Item = FormItem;
 
 // src/Modal.tsx
 var import_antd6 = require("antd");
-var import_react8 = require("react");
+var import_react9 = require("react");
 function useModal(init) {
-  const [props, setProps] = (0, import_react8.useState)(__spreadValues({
+  const [props, setProps] = (0, import_react9.useState)(__spreadValues({
     visible: false,
     onCancel: () => setProps((prev) => __spreadProps(__spreadValues({}, prev), {
       visible: false
@@ -452,7 +493,7 @@ function useModal(init) {
 
 // src/Routers.tsx
 var import_antd7 = require("antd");
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_react_router_dom = require("react-router-dom");
 function NotFound() {
   const [config] = useFaasState();
@@ -465,7 +506,7 @@ function Routes(props) {
   return /* @__PURE__ */ import_react.default.createElement(import_react_router_dom.Routes, null, props.routes.map((r) => /* @__PURE__ */ import_react.default.createElement(import_react_router_dom.Route, __spreadProps(__spreadValues({
     key: r.path
   }, r), {
-    element: r.element || /* @__PURE__ */ import_react.default.createElement(import_react9.Suspense, {
+    element: r.element || /* @__PURE__ */ import_react.default.createElement(import_react10.Suspense, {
       fallback: props.fallback || /* @__PURE__ */ import_react.default.createElement("div", {
         style: { padding: "24px" }
       }, /* @__PURE__ */ import_react.default.createElement(import_antd7.Skeleton, {
@@ -480,28 +521,45 @@ function Routes(props) {
 }
 
 // src/Table.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_antd8 = require("antd");
+var import_dayjs4 = __toESM(require("dayjs"));
 var import_icons3 = require("@ant-design/icons");
 var import_lodash5 = require("lodash");
-var import_react11 = require("@faasjs/react");
+var import_react12 = require("@faasjs/react");
 function processValue(item, value) {
   var _a;
-  if (item.options && typeof value !== "undefined" && value !== null) {
-    if (item.type.endsWith("[]"))
-      return value.map((v) => {
-        var _a2;
-        return ((_a2 = item.options.find((option) => option.value === v)) == null ? void 0 : _a2.label) || v;
-      });
-    else
-      return ((_a = item.options.find((option) => option.value === value)) == null ? void 0 : _a.label) || value;
+  if (typeof value !== "undefined" && value !== null) {
+    if (item.options) {
+      if (item.type.endsWith("[]"))
+        return value.map((v) => {
+          var _a2;
+          return ((_a2 = item.options.find((option) => option.value === v)) == null ? void 0 : _a2.label) || v;
+        });
+      else if ([
+        "string",
+        "number",
+        "boolean"
+      ].includes(item.type))
+        return ((_a = item.options.find((option) => option.value === value)) == null ? void 0 : _a.label) || value;
+    }
+    let dayjsFormat = "";
+    if (item.type === "date")
+      dayjsFormat = "YYYY-MM-DD";
+    else if (item.type === "time")
+      dayjsFormat = "YYYY-MM-DD HH:mm:ss";
+    if (["date", "time"].includes(item.type)) {
+      if (typeof value === "number" && value.toString().length === 10)
+        value = value * 1e3;
+      value = (0, import_dayjs4.default)(value).format(dayjsFormat);
+    }
   }
   return value;
 }
 function Table(props) {
-  const [columns, setColumns] = (0, import_react10.useState)();
+  const [columns, setColumns] = (0, import_react11.useState)();
   const [config] = useFaasState();
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     var _a;
     for (const item of props.items) {
       if (!item.key)
@@ -525,7 +583,7 @@ function Table(props) {
         delete item.children;
       if (props.extendTypes && props.extendTypes[item.type]) {
         if (props.extendTypes[item.type].children) {
-          item.render = (value, values) => (0, import_react10.cloneElement)(props.extendTypes[item.type].children, {
+          item.render = (value, values) => (0, import_react11.cloneElement)(props.extendTypes[item.type].children, {
             value,
             values
           });
@@ -609,6 +667,16 @@ function Table(props) {
               }
             };
           break;
+        case "date":
+          item.render = (value) => processValue(item, value);
+          if (!item.onFilter)
+            item.onFilter = (value, row) => (0, import_dayjs4.default)(row[item.id]).isSame((0, import_dayjs4.default)(value));
+          break;
+        case "time":
+          item.render = (value) => processValue(item, value);
+          if (!item.onFilter)
+            item.onFilter = (value, row) => (0, import_dayjs4.default)(row[item.id]).isSame((0, import_dayjs4.default)(value));
+          break;
         default:
           item.render = (value) => processValue(item, value);
           if (!item.onFilter)
@@ -626,7 +694,7 @@ function Table(props) {
       columns,
       dataSource: props.dataSource
     }));
-  return /* @__PURE__ */ import_react.default.createElement(import_react11.FaasDataWrapper, __spreadValues({
+  return /* @__PURE__ */ import_react.default.createElement(import_react12.FaasDataWrapper, __spreadValues({
     fallback: props.faasData.fallback || /* @__PURE__ */ import_react.default.createElement(import_antd8.Skeleton, {
       active: true
     }),
@@ -674,20 +742,32 @@ function Table(props) {
 }
 
 // src/Title.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 function Title(props) {
   const [config] = useFaasState();
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const title = Array.isArray(props.title) ? props.title : [props.title];
     document.title = title.concat(props.suffix || config.Title.suffix).filter((t) => !!t).join(props.separator || config.Title.separator);
   }, []);
+  if (props.h1) {
+    if (typeof props.h1 === "boolean")
+      return /* @__PURE__ */ import_react.default.createElement("h1", null, Array.isArray(props.title) ? props.title[0] : props.title);
+    return /* @__PURE__ */ import_react.default.createElement("h1", {
+      className: props.h1.className,
+      style: props.h1.style
+    }, Array.isArray(props.title) ? props.title[0] : props.title);
+  }
+  if (props.children)
+    return (0, import_react13.cloneElement)(props.children, { title: props.title });
   return null;
 }
 module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Blank,
+  Calendar,
   Config,
+  DatePicker,
   Description,
   Drawer,
   Form,
@@ -695,6 +775,7 @@ module.exports = __toCommonJS(src_exports);
   Modal,
   Routes,
   Table,
+  TimePicker,
   Title,
   transferOptions,
   useDrawer,

package/dist/index.mjs

@@ -65,6 +65,12 @@ function Blank(options) {
   }, (options == null ? void 0 : options.text) || config.Blank.text) : options.value;
 }
 
+// src/Calendar.tsx
+import dayjsGenerateConfig from "rc-picker/es/generate/dayjs.js";
+import generateCalendar from "antd/es/calendar/generateCalendar.js";
+import "antd/es/calendar/style/index.js";
+var Calendar = generateCalendar(dayjsGenerateConfig);
+
 // src/data.ts
 import { upperFirst } from "lodash";
 function transferOptions(options) {
@@ -76,6 +82,12 @@ function transferOptions(options) {
   });
 }
 
+// src/DatePicker.tsx
+import dayjsGenerateConfig2 from "rc-picker/es/generate/dayjs.js";
+import generatePicker from "antd/es/date-picker/generatePicker/index.js";
+import "antd/es/date-picker/style/index.js";
+var DatePicker = generatePicker(dayjsGenerateConfig2);
+
 // src/Description.tsx
 import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
 import {
@@ -88,6 +100,7 @@ import {
   useEffect as useEffect2,
   useState
 } from "react";
+import dayjs from "dayjs";
 import { FaasDataWrapper } from "@faasjs/react";
 function DescriptionItemContent(props) {
   const [computedProps, setComputedProps] = useState();
@@ -107,7 +120,11 @@ function DescriptionItemContent(props) {
           var _a2;
           return ((_a2 = propsCopy.item.options.find((option) => option.value === v)) == null ? void 0 : _a2.label) || v;
         });
-      else
+      else if ([
+        "string",
+        "number",
+        "boolean"
+      ].includes(propsCopy.item.type))
         propsCopy.value = ((_b = props.item.options.find((option) => option.value === props.value)) == null ? void 0 : _b.label) || props.value;
     }
     setComputedProps(propsCopy);
@@ -149,6 +166,10 @@ function DescriptionItemContent(props) {
           color: "#ff4d4f"
         }
       });
+    case "time":
+      return 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");
+    case "date":
+      return typeof computedProps.value === "number" && computedProps.value.toString().length === 10 ? dayjs.unix(computedProps.value).format("YYYY-MM-DD") : dayjs(computedProps.value).format("YYYY-MM-DD");
     default:
       return computedProps.value;
   }
@@ -220,6 +241,19 @@ import {
 import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
 import { useEffect as useEffect3, useState as useState3 } from "react";
 import { upperFirst as upperFirst3 } from "lodash";
+
+// src/TimePicker.tsx
+import { forwardRef } from "react";
+var TimePicker = forwardRef((props, ref) => {
+  return /* @__PURE__ */ React.createElement(DatePicker, __spreadProps(__spreadValues({}, props), {
+    picker: "time",
+    mode: void 0,
+    ref
+  }));
+});
+TimePicker.displayName = "TimePicker";
+
+// src/FormItem.tsx
 function FormItem(props) {
   const [computedProps, setComputedProps] = useState3();
   useEffect3(() => {
@@ -365,6 +399,10 @@ function FormItem(props) {
       });
     case "boolean":
       return /* @__PURE__ */ React.createElement(AntdForm.Item, __spreadValues({}, computedProps), /* @__PURE__ */ React.createElement(Switch, __spreadValues({}, computedProps.input)));
+    case "date":
+      return /* @__PURE__ */ React.createElement(AntdForm.Item, __spreadValues({}, computedProps), /* @__PURE__ */ React.createElement(DatePicker, __spreadValues({}, computedProps.input)));
+    case "time":
+      return /* @__PURE__ */ React.createElement(AntdForm.Item, __spreadValues({}, computedProps), /* @__PURE__ */ React.createElement(TimePicker, __spreadValues({}, computedProps.input)));
     default:
       return null;
   }
@@ -470,19 +508,36 @@ import {
   Radio,
   Skeleton as Skeleton3
 } from "antd";
+import dayjs2 from "dayjs";
 import { CheckOutlined as CheckOutlined2, CloseOutlined as CloseOutlined2 } from "@ant-design/icons";
 import { isNil as isNil2, upperFirst as upperFirst4 } from "lodash";
 import { FaasDataWrapper as FaasDataWrapper2 } from "@faasjs/react";
 function processValue(item, value) {
   var _a;
-  if (item.options && typeof value !== "undefined" && value !== null) {
-    if (item.type.endsWith("[]"))
-      return value.map((v) => {
-        var _a2;
-        return ((_a2 = item.options.find((option) => option.value === v)) == null ? void 0 : _a2.label) || v;
-      });
-    else
-      return ((_a = item.options.find((option) => option.value === value)) == null ? void 0 : _a.label) || value;
+  if (typeof value !== "undefined" && value !== null) {
+    if (item.options) {
+      if (item.type.endsWith("[]"))
+        return value.map((v) => {
+          var _a2;
+          return ((_a2 = item.options.find((option) => option.value === v)) == null ? void 0 : _a2.label) || v;
+        });
+      else if ([
+        "string",
+        "number",
+        "boolean"
+      ].includes(item.type))
+        return ((_a = item.options.find((option) => option.value === value)) == null ? void 0 : _a.label) || value;
+    }
+    let dayjsFormat = "";
+    if (item.type === "date")
+      dayjsFormat = "YYYY-MM-DD";
+    else if (item.type === "time")
+      dayjsFormat = "YYYY-MM-DD HH:mm:ss";
+    if (["date", "time"].includes(item.type)) {
+      if (typeof value === "number" && value.toString().length === 10)
+        value = value * 1e3;
+      value = dayjs2(value).format(dayjsFormat);
+    }
   }
   return value;
 }
@@ -597,6 +652,16 @@ function Table(props) {
               }
             };
           break;
+        case "date":
+          item.render = (value) => processValue(item, value);
+          if (!item.onFilter)
+            item.onFilter = (value, row) => dayjs2(row[item.id]).isSame(dayjs2(value));
+          break;
+        case "time":
+          item.render = (value) => processValue(item, value);
+          if (!item.onFilter)
+            item.onFilter = (value, row) => dayjs2(row[item.id]).isSame(dayjs2(value));
+          break;
         default:
           item.render = (value) => processValue(item, value);
           if (!item.onFilter)
@@ -662,18 +727,30 @@ function Table(props) {
 }
 
 // src/Title.tsx
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect6, cloneElement as cloneElement3 } from "react";
 function Title(props) {
   const [config] = useFaasState();
   useEffect6(() => {
     const title = Array.isArray(props.title) ? props.title : [props.title];
     document.title = title.concat(props.suffix || config.Title.suffix).filter((t) => !!t).join(props.separator || config.Title.separator);
   }, []);
+  if (props.h1) {
+    if (typeof props.h1 === "boolean")
+      return /* @__PURE__ */ React.createElement("h1", null, Array.isArray(props.title) ? props.title[0] : props.title);
+    return /* @__PURE__ */ React.createElement("h1", {
+      className: props.h1.className,
+      style: props.h1.style
+    }, Array.isArray(props.title) ? props.title[0] : props.title);
+  }
+  if (props.children)
+    return cloneElement3(props.children, { title: props.title });
   return null;
 }
 export {
   Blank,
+  Calendar,
   Config,
+  DatePicker,
   Description,
   Drawer,
   Form,
@@ -681,6 +758,7 @@ export {
   Modal,
   Routes,
   Table,
+  TimePicker,
   Title,
   transferOptions,
   useDrawer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/ant-design",
-  "version": "0.0.2-beta.370",
+  "version": "0.0.2-beta.374",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -16,7 +16,7 @@
   },
   "funding": "https://github.com/sponsors/faasjs",
   "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --inject react-shim.js",
+    "build": "tsup-node src/index.ts --format esm,cjs --inject react-shim.js",
     "build:types": "tsup-node src/index.ts --dts-only"
   },
   "files": [
@@ -28,9 +28,10 @@
     "lodash": "*",
     "react": "*",
     "react-dom": "*",
-    "@faasjs/react": "^0.0.2-beta.370",
+    "@faasjs/react": "^0.0.2-beta.374",
     "react-use": "*",
-    "react-router-dom": "*"
+    "react-router-dom": "*",
+    "dayjs": "*"
   },
   "devDependencies": {
     "@types/lodash": "*",