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

package/README.md

@@ -65,6 +65,7 @@ Form are based on [Ant Design's Form.Item component](https://ant.design/componen
 - [FaasState](#faasstate)
 - [FormItemProps](#formitemprops)
 - [FormProps](#formprops)
+- [ModalProps](#modalprops)
 - [RoutesProps](#routesprops)
 - [TableItemProps](#tableitemprops)
 - [TableProps](#tableprops)
@@ -83,6 +84,7 @@ Form are based on [Ant Design's Form.Item component](https://ant.design/componen
 - [transferOptions](#transferoptions)
 - [useDrawer](#usedrawer)
 - [useFaasState](#usefaasstate)
+- [useModal](#usemodal)
 
 ## Type aliases
 
@@ -289,6 +291,12 @@ ___
 
 ___
 
+### ModalProps
+
+Ƭ **ModalProps**: `AntdModalProps` & { `children?`: `JSX.Element` \| `JSX.Element`[]  }
+
+___
+
 ### RoutesProps
 
 Ƭ **RoutesProps**: `Object`
@@ -440,7 +448,7 @@ ___
 ▸ **FormItem**<`T`\>(`props`): `Element`
 
 FormItem, can be used without Form.
-Example:
+
 ```ts
 // use inline type
 <FormItem item={{ type: 'string', id: 'name' }} />
@@ -544,11 +552,13 @@ ___
 
 ▸ **useDrawer**(`init?`): `Object`
 
+Hook style drawer.
+
 #### Parameters
 
-| Name | Type |
-| :------ | :------ |
-| `init?` | [`DrawerProps`](#drawerprops) |
+| Name | Type | Description |
+| :------ | :------ | :------ |
+| `init?` | [`DrawerProps`](#drawerprops) | initial props  ```ts function Example() {   const { drawer, setDrawerProps } = useDrawer()    return <>     <Button onClick={ () => setDrawerProps(prev => ({ visible: !prev.visible})) }>       Toggle     </Button>     {drawer}   </> } ``` |
 
 #### Returns
 
@@ -569,3 +579,27 @@ ___
 #### Returns
 
 [[`FaasState`](#faasstate), (`state`: `IHookStateSetAction`<[`FaasState`](#faasstate)\>) => `void`]
+
+___
+
+### useModal
+
+▸ **useModal**(`init?`): `Object`
+
+Hook style modal.
+
+#### Parameters
+
+| Name | Type | Description |
+| :------ | :------ | :------ |
+| `init?` | [`ModalProps`](#modalprops) | initial props  ```ts function Example() {   const { modal, setModalProps } = useModal()    return <>{modal}</> } ``` |
+
+#### Returns
+
+`Object`
+
+| Name | Type |
+| :------ | :------ |
+| `modal` | `Element` |
+| `modalProps` | [`ModalProps`](#modalprops) |
+| `setModalProps` | (`changes`: `Partial`<[`ModalProps`](#modalprops)\>) => `void` |

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 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, TableColumnProps, TablePaginationConfig, TableProps as TableProps$1 } from 'antd';
-export { Drawer } from 'antd';
+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';
+export { Drawer, Modal } from 'antd';
 import { FaasDataWrapperProps } from '@faasjs/react';
 import * as antd_lib_form_Form from 'antd/lib/form/Form';
 import { RuleObject } from 'rc-field-form/lib/interface';
@@ -116,6 +116,23 @@ declare function Description<T = any>(props: DescriptionProps<T>): JSX.Element;
 declare type DrawerProps = DrawerProps$1 & {
     children?: JSX.Element | JSX.Element[];
 };
+/**
+ * Hook style drawer.
+ * @param init initial props
+ *
+ * ```ts
+ * function Example() {
+ *   const { drawer, setDrawerProps } = useDrawer()
+ *
+ *   return <>
+ *     <Button onClick={ () => setDrawerProps(prev => ({ visible: !prev.visible})) }>
+ *       Toggle
+ *     </Button>
+ *     {drawer}
+ *   </>
+ * }
+ * ```
+ */
 declare function useDrawer(init?: DrawerProps): {
     drawer: JSX.Element;
     drawerProps: DrawerProps;
@@ -165,7 +182,7 @@ declare type FormItemProps<T = any> = {
 } & FormItemInputProps<T> & FaasItemProps & FormItemProps$1<T>;
 /**
  * FormItem, can be used without Form.
- * Example:
+ *
  * ```ts
  * // use inline type
  * <FormItem item={{ type: 'string', id: 'name' }} />
@@ -195,6 +212,27 @@ declare namespace Form {
     var Item: typeof FormItem;
 }
 
+declare type ModalProps = ModalProps$1 & {
+    children?: JSX.Element | JSX.Element[];
+};
+/**
+ * Hook style modal.
+ * @param init initial props
+ *
+ * ```ts
+ * function Example() {
+ *   const { modal, setModalProps } = useModal()
+ *
+ *   return <>{modal}</>
+ * }
+ * ```
+ */
+declare function useModal(init?: ModalProps): {
+    modal: JSX.Element;
+    modalProps: ModalProps;
+    setModalProps(changes: Partial<ModalProps>): void;
+};
+
 declare type RoutesProps = {
     routes: (RouteProps & {
         page?: LazyExoticComponent<ComponentType<any>>;
@@ -236,4 +274,4 @@ declare type TitleProps = {
 };
 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, Routes, RoutesProps, Table, TableItemProps, TableProps, Title, TitleProps, transferOptions, useDrawer, useFaasState };
+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 };

package/dist/index.js

@@ -52,12 +52,14 @@ __export(src_exports, {
   Drawer: () => import_antd3.Drawer,
   Form: () => Form,
   FormItem: () => FormItem,
+  Modal: () => import_antd6.Modal,
   Routes: () => Routes,
   Table: () => Table,
   Title: () => Title,
   transferOptions: () => transferOptions,
   useDrawer: () => useDrawer,
-  useFaasState: () => useFaasState
+  useFaasState: () => useFaasState,
+  useModal: () => useModal
 });
 
 // react-shim.js
@@ -429,13 +431,32 @@ function Form(props) {
 Form.useForm = import_antd5.Form.useForm;
 Form.Item = FormItem;
 
-// src/Routers.tsx
+// src/Modal.tsx
 var import_antd6 = require("antd");
 var import_react8 = require("react");
+function useModal(init) {
+  const [props, setProps] = (0, import_react8.useState)(__spreadValues({
+    visible: false,
+    onCancel: () => setProps((prev) => __spreadProps(__spreadValues({}, prev), {
+      visible: false
+    }))
+  }, init));
+  return {
+    modal: /* @__PURE__ */ import_react.default.createElement(import_antd6.Modal, __spreadValues({}, props)),
+    modalProps: props,
+    setModalProps(changes) {
+      setProps((prev) => __spreadValues(__spreadValues({}, prev), changes));
+    }
+  };
+}
+
+// src/Routers.tsx
+var import_antd7 = require("antd");
+var import_react9 = require("react");
 var import_react_router_dom = require("react-router-dom");
 function NotFound() {
   const [config] = useFaasState();
-  return /* @__PURE__ */ import_react.default.createElement(import_antd6.Result, {
+  return /* @__PURE__ */ import_react.default.createElement(import_antd7.Result, {
     status: "404",
     title: config.common.pageNotFound
   });
@@ -444,10 +465,10 @@ 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_react8.Suspense, {
+    element: r.element || /* @__PURE__ */ import_react.default.createElement(import_react9.Suspense, {
       fallback: props.fallback || /* @__PURE__ */ import_react.default.createElement("div", {
         style: { padding: "24px" }
-      }, /* @__PURE__ */ import_react.default.createElement(import_antd6.Skeleton, {
+      }, /* @__PURE__ */ import_react.default.createElement(import_antd7.Skeleton, {
         active: true
       }))
     }, /* @__PURE__ */ import_react.default.createElement(r.page, null))
@@ -459,11 +480,11 @@ function Routes(props) {
 }
 
 // src/Table.tsx
-var import_react9 = require("react");
-var import_antd7 = require("antd");
+var import_react10 = require("react");
+var import_antd8 = require("antd");
 var import_icons3 = require("@ant-design/icons");
 var import_lodash5 = require("lodash");
-var import_react10 = require("@faasjs/react");
+var import_react11 = require("@faasjs/react");
 function processValue(item, value) {
   var _a;
   if (item.options && typeof value !== "undefined" && value !== null) {
@@ -478,9 +499,9 @@ function processValue(item, value) {
   return value;
 }
 function Table(props) {
-  const [columns, setColumns] = (0, import_react9.useState)();
+  const [columns, setColumns] = (0, import_react10.useState)();
   const [config] = useFaasState();
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     var _a;
     for (const item of props.items) {
       if (!item.key)
@@ -504,7 +525,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_react9.cloneElement)(props.extendTypes[item.type].children, {
+          item.render = (value, values) => (0, import_react10.cloneElement)(props.extendTypes[item.type].children, {
             value,
             values
           });
@@ -549,7 +570,7 @@ function Table(props) {
               setSelectedKeys,
               selectedKeys,
               confirm
-            }) => /* @__PURE__ */ import_react.default.createElement(import_antd7.Radio.Group, {
+            }) => /* @__PURE__ */ import_react.default.createElement(import_antd8.Radio.Group, {
               style: { padding: 8 },
               buttonStyle: "solid",
               value: selectedKeys[0],
@@ -557,21 +578,21 @@ function Table(props) {
                 setSelectedKeys(e.target.value ? [e.target.value] : []);
                 confirm();
               }
-            }, /* @__PURE__ */ import_react.default.createElement(import_antd7.Radio.Button, null, config.common.all), /* @__PURE__ */ import_react.default.createElement(import_antd7.Radio.Button, {
+            }, /* @__PURE__ */ import_react.default.createElement(import_antd8.Radio.Button, null, config.common.all), /* @__PURE__ */ import_react.default.createElement(import_antd8.Radio.Button, {
               value: "true"
             }, /* @__PURE__ */ import_react.default.createElement(import_icons3.CheckOutlined, {
               style: {
                 color: "#52c41a",
                 verticalAlign: "middle"
               }
-            })), /* @__PURE__ */ import_react.default.createElement(import_antd7.Radio.Button, {
+            })), /* @__PURE__ */ import_react.default.createElement(import_antd8.Radio.Button, {
               value: "false"
             }, /* @__PURE__ */ import_react.default.createElement(import_icons3.CloseOutlined, {
               style: {
                 verticalAlign: "middle",
                 color: "#ff4d4f"
               }
-            })), /* @__PURE__ */ import_react.default.createElement(import_antd7.Radio.Button, {
+            })), /* @__PURE__ */ import_react.default.createElement(import_antd8.Radio.Button, {
               value: "empty"
             }, config.common.blank));
           if (!item.onFilter)
@@ -600,13 +621,13 @@ function Table(props) {
   if (!columns)
     return null;
   if (!props.faasData)
-    return /* @__PURE__ */ import_react.default.createElement(import_antd7.Table, __spreadProps(__spreadValues({}, props), {
+    return /* @__PURE__ */ import_react.default.createElement(import_antd8.Table, __spreadProps(__spreadValues({}, props), {
       rowKey: props.rowKey || "id",
       columns,
       dataSource: props.dataSource
     }));
-  return /* @__PURE__ */ import_react.default.createElement(import_react10.FaasDataWrapper, __spreadValues({
-    fallback: props.faasData.fallback || /* @__PURE__ */ import_react.default.createElement(import_antd7.Skeleton, {
+  return /* @__PURE__ */ import_react.default.createElement(import_react11.FaasDataWrapper, __spreadValues({
+    fallback: props.faasData.fallback || /* @__PURE__ */ import_react.default.createElement(import_antd8.Skeleton, {
       active: true
     }),
     render: ({
@@ -615,18 +636,18 @@ function Table(props) {
       reload
     }) => {
       if (!data)
-        return /* @__PURE__ */ import_react.default.createElement(import_antd7.Table, __spreadProps(__spreadValues({}, props), {
+        return /* @__PURE__ */ import_react.default.createElement(import_antd8.Table, __spreadProps(__spreadValues({}, props), {
           rowKey: props.rowKey || "id",
           columns,
           dataSource: []
         }));
       if (Array.isArray(data))
-        return /* @__PURE__ */ import_react.default.createElement(import_antd7.Table, __spreadProps(__spreadValues({}, props), {
+        return /* @__PURE__ */ import_react.default.createElement(import_antd8.Table, __spreadProps(__spreadValues({}, props), {
           rowKey: props.rowKey || "id",
           columns,
           dataSource: data
         }));
-      return /* @__PURE__ */ import_react.default.createElement(import_antd7.Table, __spreadProps(__spreadValues({}, props), {
+      return /* @__PURE__ */ import_react.default.createElement(import_antd8.Table, __spreadProps(__spreadValues({}, props), {
         rowKey: props.rowKey || "id",
         columns,
         dataSource: data.rows,
@@ -653,10 +674,10 @@ function Table(props) {
 }
 
 // src/Title.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 function Title(props) {
   const [config] = useFaasState();
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.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);
   }, []);
@@ -671,10 +692,12 @@ module.exports = __toCommonJS(src_exports);
   Drawer,
   Form,
   FormItem,
+  Modal,
   Routes,
   Table,
   Title,
   transferOptions,
   useDrawer,
-  useFaasState
+  useFaasState,
+  useModal
 });

package/dist/index.mjs

@@ -406,6 +406,25 @@ function Form(props) {
 Form.useForm = AntdForm2.useForm;
 Form.Item = FormItem;
 
+// src/Modal.tsx
+import { Modal } from "antd";
+import { useState as useState5 } from "react";
+function useModal(init) {
+  const [props, setProps] = useState5(__spreadValues({
+    visible: false,
+    onCancel: () => setProps((prev) => __spreadProps(__spreadValues({}, prev), {
+      visible: false
+    }))
+  }, init));
+  return {
+    modal: /* @__PURE__ */ React.createElement(Modal, __spreadValues({}, props)),
+    modalProps: props,
+    setModalProps(changes) {
+      setProps((prev) => __spreadValues(__spreadValues({}, prev), changes));
+    }
+  };
+}
+
 // src/Routers.tsx
 import { Result, Skeleton as Skeleton2 } from "antd";
 import {
@@ -442,7 +461,7 @@ function Routes(props) {
 
 // src/Table.tsx
 import {
-  useState as useState5,
+  useState as useState6,
   useEffect as useEffect5,
   cloneElement as cloneElement2
 } from "react";
@@ -468,7 +487,7 @@ function processValue(item, value) {
   return value;
 }
 function Table(props) {
-  const [columns, setColumns] = useState5();
+  const [columns, setColumns] = useState6();
   const [config] = useFaasState();
   useEffect5(() => {
     var _a;
@@ -659,10 +678,12 @@ export {
   Drawer,
   Form,
   FormItem,
+  Modal,
   Routes,
   Table,
   Title,
   transferOptions,
   useDrawer,
-  useFaasState
+  useFaasState,
+  useModal
 };

package/package.json

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