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

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)
@@ -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` |
 
 ___
 
@@ -336,6 +361,12 @@ ___
 
 ___
 
+### TimePickerProps
+
+Ƭ **TimePickerProps**: `Omit`<`PickerTimeProps`<`Dayjs`\>, ``"picker"``\>
+
+___
+
 ### TitleProps
 
 Ƭ **TitleProps**: `Object`
@@ -344,10 +375,63 @@ ___
 
 | Name | Type | Description |
 | :------ | :------ | :------ |
+| `h1?` | `boolean` \| { `className?`: `string` ; `style?`: `React.CSSProperties`  } | - |
 | `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 +456,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 +620,16 @@ ___
 
 ▸ **Title**(`props`): `JSX.Element`
 
+Title is used to change the title of the page.
+
+```ts
+<Title title='hi' /> // => return null, change the document.title to 'hi'
+<Title title={['a', 'b']} /> // => return null, change the document.title to 'a - b'
+
+<Title title='hi' h1 /> // => return <h1>hi</h1>, change the document.title to 'hi'
+<Title title={['a', 'b']} h1 /> // => return <h1>a</h1>, change the document.title to 'a - b'
+```
+
 #### 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 from 'antd/es/calendar/generateCalendar';
+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.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,30 @@ 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;
+    h1?: boolean | {
+        className?: string;
+        style?: React.CSSProperties;
+    };
 };
+/**
+ * Title is used to change the title of the page.
+ *
+ * ```ts
+ * <Title title='hi' /> // => return null, change the document.title to 'hi'
+ * <Title title={['a', 'b']} /> // => return null, change the document.title to 'a - b'
+ *
+ * <Title title='hi' h1 /> // => return <h1>hi</h1>, change the document.title to 'hi'
+ * <Title title={['a', 'b']} h1 /> // => return <h1>a</h1>, change the document.title to 'a - b'
+ * ```
+ */
 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,181 @@ function Blank(options) {
   }, (options == null ? void 0 : options.text) || config.Blank.text) : options.value;
 }
 
+// ../../node_modules/rc-picker/es/generate/dayjs.js
+var import_dayjs = __toESM(require("dayjs"));
+
+// ../../node_modules/rc-util/es/warning.js
+var warned = {};
+function note(valid, message) {
+  if (process.env.NODE_ENV !== "production" && !valid && console !== void 0) {
+    console.warn("Note: ".concat(message));
+  }
+}
+function call(method, valid, message) {
+  if (!valid && !warned[message]) {
+    method(false, message);
+    warned[message] = true;
+  }
+}
+function noteOnce(valid, message) {
+  call(note, valid, message);
+}
+
+// ../../node_modules/rc-picker/es/generate/dayjs.js
+var import_weekday = __toESM(require("dayjs/plugin/weekday"));
+var import_localeData = __toESM(require("dayjs/plugin/localeData"));
+var import_weekOfYear = __toESM(require("dayjs/plugin/weekOfYear"));
+var import_weekYear = __toESM(require("dayjs/plugin/weekYear"));
+var import_advancedFormat = __toESM(require("dayjs/plugin/advancedFormat"));
+var import_customParseFormat = __toESM(require("dayjs/plugin/customParseFormat"));
+import_dayjs.default.extend(import_customParseFormat.default);
+import_dayjs.default.extend(import_advancedFormat.default);
+import_dayjs.default.extend(import_weekday.default);
+import_dayjs.default.extend(import_localeData.default);
+import_dayjs.default.extend(import_weekOfYear.default);
+import_dayjs.default.extend(import_weekYear.default);
+import_dayjs.default.extend(function(o, c) {
+  var proto = c.prototype;
+  var oldFormat = proto.format;
+  proto.format = function f(formatStr) {
+    var str = (formatStr || "").replace("Wo", "wo");
+    return oldFormat.bind(this)(str);
+  };
+});
+var localeMap = {
+  en_GB: "en-gb",
+  en_US: "en",
+  zh_CN: "zh-cn",
+  zh_TW: "zh-tw"
+};
+var parseLocale = function parseLocale2(locale) {
+  var mapLocale = localeMap[locale];
+  return mapLocale || locale.split("_")[0];
+};
+var parseNoMatchNotice = function parseNoMatchNotice2() {
+  noteOnce(false, "Not match any format. Please help to fire a issue about this.");
+};
+var generateConfig = {
+  getNow: function getNow() {
+    return (0, import_dayjs.default)();
+  },
+  getFixedDate: function getFixedDate(string) {
+    return (0, import_dayjs.default)(string, "YYYY-MM-DD");
+  },
+  getEndDate: function getEndDate(date) {
+    return date.endOf("month");
+  },
+  getWeekDay: function getWeekDay(date) {
+    var clone = date.locale("en");
+    return clone.weekday() + clone.localeData().firstDayOfWeek();
+  },
+  getYear: function getYear(date) {
+    return date.year();
+  },
+  getMonth: function getMonth(date) {
+    return date.month();
+  },
+  getDate: function getDate(date) {
+    return date.date();
+  },
+  getHour: function getHour(date) {
+    return date.hour();
+  },
+  getMinute: function getMinute(date) {
+    return date.minute();
+  },
+  getSecond: function getSecond(date) {
+    return date.second();
+  },
+  addYear: function addYear(date, diff) {
+    return date.add(diff, "year");
+  },
+  addMonth: function addMonth(date, diff) {
+    return date.add(diff, "month");
+  },
+  addDate: function addDate(date, diff) {
+    return date.add(diff, "day");
+  },
+  setYear: function setYear(date, year) {
+    return date.year(year);
+  },
+  setMonth: function setMonth(date, month) {
+    return date.month(month);
+  },
+  setDate: function setDate(date, num) {
+    return date.date(num);
+  },
+  setHour: function setHour(date, hour) {
+    return date.hour(hour);
+  },
+  setMinute: function setMinute(date, minute) {
+    return date.minute(minute);
+  },
+  setSecond: function setSecond(date, second) {
+    return date.second(second);
+  },
+  isAfter: function isAfter(date1, date2) {
+    return date1.isAfter(date2);
+  },
+  isValidate: function isValidate(date) {
+    return date.isValid();
+  },
+  locale: {
+    getWeekFirstDay: function getWeekFirstDay(locale) {
+      return (0, import_dayjs.default)().locale(parseLocale(locale)).localeData().firstDayOfWeek();
+    },
+    getWeekFirstDate: function getWeekFirstDate(locale, date) {
+      return date.locale(parseLocale(locale)).weekday(0);
+    },
+    getWeek: function getWeek(locale, date) {
+      return date.locale(parseLocale(locale)).week();
+    },
+    getShortWeekDays: function getShortWeekDays(locale) {
+      return (0, import_dayjs.default)().locale(parseLocale(locale)).localeData().weekdaysMin();
+    },
+    getShortMonths: function getShortMonths(locale) {
+      return (0, import_dayjs.default)().locale(parseLocale(locale)).localeData().monthsShort();
+    },
+    format: function format(locale, date, _format) {
+      return date.locale(parseLocale(locale)).format(_format);
+    },
+    parse: function parse(locale, text, formats) {
+      var localeStr = parseLocale(locale);
+      for (var i = 0; i < formats.length; i += 1) {
+        var format2 = formats[i];
+        var formatText = text;
+        if (format2.includes("wo") || format2.includes("Wo")) {
+          var year = formatText.split("-")[0];
+          var weekStr = formatText.split("-")[1];
+          var firstWeek = (0, import_dayjs.default)(year, "YYYY").startOf("year").locale(localeStr);
+          for (var j = 0; j <= 52; j += 1) {
+            var nextWeek = firstWeek.add(j, "week");
+            if (nextWeek.format("Wo") === weekStr) {
+              return nextWeek;
+            }
+          }
+          parseNoMatchNotice();
+          return null;
+        }
+        var date = (0, import_dayjs.default)(formatText, format2).locale(localeStr);
+        if (date.isValid()) {
+          return date;
+        }
+      }
+      if (text) {
+        parseNoMatchNotice();
+      }
+      return null;
+    }
+  }
+};
+var dayjs_default = generateConfig;
+
+// src/Calendar.tsx
+var import_generateCalendar = __toESM(require("antd/es/calendar/generateCalendar"));
+var import_style = require("antd/es/calendar/style");
+var Calendar = (0, import_generateCalendar.default)(dayjs_default);
+
 // src/data.ts
 var import_lodash2 = require("lodash");
 function transferOptions(options) {
@@ -120,11 +298,17 @@ function transferOptions(options) {
   });
 }
 
+// src/DatePicker.tsx
+var import_generatePicker = __toESM(require("antd/es/date-picker/generatePicker"));
+var import_style2 = require("antd/es/date-picker/style");
+var DatePicker = (0, import_generatePicker.default)(dayjs_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_dayjs4 = __toESM(require("dayjs"));
 var import_react4 = require("@faasjs/react");
 function DescriptionItemContent(props) {
   const [computedProps, setComputedProps] = (0, import_react3.useState)();
@@ -144,7 +328,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 +374,10 @@ function DescriptionItemContent(props) {
           color: "#ff4d4f"
         }
       });
+    case "time":
+      return typeof computedProps.value === "number" && computedProps.value.toString().length === 10 ? import_dayjs4.default.unix(computedProps.value).format("YYYY-MM-DD HH:mm:ss") : (0, import_dayjs4.default)(computedProps.value).format("YYYY-MM-DD HH:mm:ss");
+    case "date":
+      return typeof computedProps.value === "number" && computedProps.value.toString().length === 10 ? import_dayjs4.default.unix(computedProps.value).format("YYYY-MM-DD") : (0, import_dayjs4.default)(computedProps.value).format("YYYY-MM-DD");
     default:
       return computedProps.value;
   }
@@ -238,16 +430,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 +595,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 +607,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 +642,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 +661,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 +674,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 +689,45 @@ function Routes(props) {
 }
 
 // src/Table.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_antd8 = require("antd");
+var import_dayjs5 = __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_dayjs5.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 +751,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 +835,16 @@ function Table(props) {
               }
             };
           break;
+        case "date":
+          item.render = (value) => processValue(item, value);
+          if (!item.onFilter)
+            item.onFilter = (value, row) => (0, import_dayjs5.default)(row[item.id]).isSame((0, import_dayjs5.default)(value));
+          break;
+        case "time":
+          item.render = (value) => processValue(item, value);
+          if (!item.onFilter)
+            item.onFilter = (value, row) => (0, import_dayjs5.default)(row[item.id]).isSame((0, import_dayjs5.default)(value));
+          break;
         default:
           item.render = (value) => processValue(item, value);
           if (!item.onFilter)
@@ -626,7 +862,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 +910,30 @@ 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);
+  }
   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 +941,7 @@ module.exports = __toCommonJS(src_exports);
   Modal,
   Routes,
   Table,
+  TimePicker,
   Title,
   transferOptions,
   useDrawer,

package/dist/index.mjs

@@ -65,6 +65,181 @@ function Blank(options) {
   }, (options == null ? void 0 : options.text) || config.Blank.text) : options.value;
 }
 
+// ../../node_modules/rc-picker/es/generate/dayjs.js
+import dayjs from "dayjs";
+
+// ../../node_modules/rc-util/es/warning.js
+var warned = {};
+function note(valid, message) {
+  if (process.env.NODE_ENV !== "production" && !valid && console !== void 0) {
+    console.warn("Note: ".concat(message));
+  }
+}
+function call(method, valid, message) {
+  if (!valid && !warned[message]) {
+    method(false, message);
+    warned[message] = true;
+  }
+}
+function noteOnce(valid, message) {
+  call(note, valid, message);
+}
+
+// ../../node_modules/rc-picker/es/generate/dayjs.js
+import weekday from "dayjs/plugin/weekday";
+import localeData from "dayjs/plugin/localeData";
+import weekOfYear from "dayjs/plugin/weekOfYear";
+import weekYear from "dayjs/plugin/weekYear";
+import advancedFormat from "dayjs/plugin/advancedFormat";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+dayjs.extend(customParseFormat);
+dayjs.extend(advancedFormat);
+dayjs.extend(weekday);
+dayjs.extend(localeData);
+dayjs.extend(weekOfYear);
+dayjs.extend(weekYear);
+dayjs.extend(function(o, c) {
+  var proto = c.prototype;
+  var oldFormat = proto.format;
+  proto.format = function f(formatStr) {
+    var str = (formatStr || "").replace("Wo", "wo");
+    return oldFormat.bind(this)(str);
+  };
+});
+var localeMap = {
+  en_GB: "en-gb",
+  en_US: "en",
+  zh_CN: "zh-cn",
+  zh_TW: "zh-tw"
+};
+var parseLocale = function parseLocale2(locale) {
+  var mapLocale = localeMap[locale];
+  return mapLocale || locale.split("_")[0];
+};
+var parseNoMatchNotice = function parseNoMatchNotice2() {
+  noteOnce(false, "Not match any format. Please help to fire a issue about this.");
+};
+var generateConfig = {
+  getNow: function getNow() {
+    return dayjs();
+  },
+  getFixedDate: function getFixedDate(string) {
+    return dayjs(string, "YYYY-MM-DD");
+  },
+  getEndDate: function getEndDate(date) {
+    return date.endOf("month");
+  },
+  getWeekDay: function getWeekDay(date) {
+    var clone = date.locale("en");
+    return clone.weekday() + clone.localeData().firstDayOfWeek();
+  },
+  getYear: function getYear(date) {
+    return date.year();
+  },
+  getMonth: function getMonth(date) {
+    return date.month();
+  },
+  getDate: function getDate(date) {
+    return date.date();
+  },
+  getHour: function getHour(date) {
+    return date.hour();
+  },
+  getMinute: function getMinute(date) {
+    return date.minute();
+  },
+  getSecond: function getSecond(date) {
+    return date.second();
+  },
+  addYear: function addYear(date, diff) {
+    return date.add(diff, "year");
+  },
+  addMonth: function addMonth(date, diff) {
+    return date.add(diff, "month");
+  },
+  addDate: function addDate(date, diff) {
+    return date.add(diff, "day");
+  },
+  setYear: function setYear(date, year) {
+    return date.year(year);
+  },
+  setMonth: function setMonth(date, month) {
+    return date.month(month);
+  },
+  setDate: function setDate(date, num) {
+    return date.date(num);
+  },
+  setHour: function setHour(date, hour) {
+    return date.hour(hour);
+  },
+  setMinute: function setMinute(date, minute) {
+    return date.minute(minute);
+  },
+  setSecond: function setSecond(date, second) {
+    return date.second(second);
+  },
+  isAfter: function isAfter(date1, date2) {
+    return date1.isAfter(date2);
+  },
+  isValidate: function isValidate(date) {
+    return date.isValid();
+  },
+  locale: {
+    getWeekFirstDay: function getWeekFirstDay(locale) {
+      return dayjs().locale(parseLocale(locale)).localeData().firstDayOfWeek();
+    },
+    getWeekFirstDate: function getWeekFirstDate(locale, date) {
+      return date.locale(parseLocale(locale)).weekday(0);
+    },
+    getWeek: function getWeek(locale, date) {
+      return date.locale(parseLocale(locale)).week();
+    },
+    getShortWeekDays: function getShortWeekDays(locale) {
+      return dayjs().locale(parseLocale(locale)).localeData().weekdaysMin();
+    },
+    getShortMonths: function getShortMonths(locale) {
+      return dayjs().locale(parseLocale(locale)).localeData().monthsShort();
+    },
+    format: function format(locale, date, _format) {
+      return date.locale(parseLocale(locale)).format(_format);
+    },
+    parse: function parse(locale, text, formats) {
+      var localeStr = parseLocale(locale);
+      for (var i = 0; i < formats.length; i += 1) {
+        var format2 = formats[i];
+        var formatText = text;
+        if (format2.includes("wo") || format2.includes("Wo")) {
+          var year = formatText.split("-")[0];
+          var weekStr = formatText.split("-")[1];
+          var firstWeek = dayjs(year, "YYYY").startOf("year").locale(localeStr);
+          for (var j = 0; j <= 52; j += 1) {
+            var nextWeek = firstWeek.add(j, "week");
+            if (nextWeek.format("Wo") === weekStr) {
+              return nextWeek;
+            }
+          }
+          parseNoMatchNotice();
+          return null;
+        }
+        var date = dayjs(formatText, format2).locale(localeStr);
+        if (date.isValid()) {
+          return date;
+        }
+      }
+      if (text) {
+        parseNoMatchNotice();
+      }
+      return null;
+    }
+  }
+};
+var dayjs_default = generateConfig;
+
+// src/Calendar.tsx
+import generateCalendar from "antd/es/calendar/generateCalendar";
+import "antd/es/calendar/style";
+var Calendar = generateCalendar(dayjs_default);
+
 // src/data.ts
 import { upperFirst } from "lodash";
 function transferOptions(options) {
@@ -76,6 +251,11 @@ function transferOptions(options) {
   });
 }
 
+// src/DatePicker.tsx
+import generatePicker from "antd/es/date-picker/generatePicker";
+import "antd/es/date-picker/style";
+var DatePicker = generatePicker(dayjs_default);
+
 // src/Description.tsx
 import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
 import {
@@ -88,6 +268,7 @@ import {
   useEffect as useEffect2,
   useState
 } from "react";
+import dayjs2 from "dayjs";
 import { FaasDataWrapper } from "@faasjs/react";
 function DescriptionItemContent(props) {
   const [computedProps, setComputedProps] = useState();
@@ -107,7 +288,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 +334,10 @@ function DescriptionItemContent(props) {
           color: "#ff4d4f"
         }
       });
+    case "time":
+      return typeof computedProps.value === "number" && computedProps.value.toString().length === 10 ? dayjs2.unix(computedProps.value).format("YYYY-MM-DD HH:mm:ss") : dayjs2(computedProps.value).format("YYYY-MM-DD HH:mm:ss");
+    case "date":
+      return typeof computedProps.value === "number" && computedProps.value.toString().length === 10 ? dayjs2.unix(computedProps.value).format("YYYY-MM-DD") : dayjs2(computedProps.value).format("YYYY-MM-DD");
     default:
       return computedProps.value;
   }
@@ -220,6 +409,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 +567,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 +676,36 @@ import {
   Radio,
   Skeleton as Skeleton3
 } from "antd";
+import dayjs3 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 = dayjs3(value).format(dayjsFormat);
+    }
   }
   return value;
 }
@@ -597,6 +820,16 @@ function Table(props) {
               }
             };
           break;
+        case "date":
+          item.render = (value) => processValue(item, value);
+          if (!item.onFilter)
+            item.onFilter = (value, row) => dayjs3(row[item.id]).isSame(dayjs3(value));
+          break;
+        case "time":
+          item.render = (value) => processValue(item, value);
+          if (!item.onFilter)
+            item.onFilter = (value, row) => dayjs3(row[item.id]).isSame(dayjs3(value));
+          break;
         default:
           item.render = (value) => processValue(item, value);
           if (!item.onFilter)
@@ -669,11 +902,21 @@ function Title(props) {
     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);
+  }
   return null;
 }
 export {
   Blank,
+  Calendar,
   Config,
+  DatePicker,
   Description,
   Drawer,
   Form,
@@ -681,6 +924,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.371",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -28,9 +28,10 @@
     "lodash": "*",
     "react": "*",
     "react-dom": "*",
-    "@faasjs/react": "^0.0.2-beta.370",
+    "@faasjs/react": "^0.0.2-beta.371",
     "react-use": "*",
-    "react-router-dom": "*"
+    "react-router-dom": "*",
+    "dayjs": "*"
   },
   "devDependencies": {
     "@types/lodash": "*",