@faasjs/ant-design 0.0.2-beta.387 → 0.0.2-beta.390

package/README.md

@@ -74,6 +74,7 @@ Form are based on [Ant Design's Form.Item component](https://ant.design/componen
 
 ### Variables
 
+- [ConfigContext](#configcontext)
 - [DatePicker](#datepicker)
 - [TimePicker](#timepicker)
 
@@ -81,7 +82,7 @@ Form are based on [Ant Design's Form.Item component](https://ant.design/componen
 
 - [Blank](#blank)
 - [Calendar](#calendar)
-- [Config](#config)
+- [ConfigProvider](#configprovider)
 - [Description](#description)
 - [Form](#form)
 - [FormItem](#formitem)
@@ -89,8 +90,8 @@ Form are based on [Ant Design's Form.Item component](https://ant.design/componen
 - [Table](#table)
 - [Title](#title)
 - [transferOptions](#transferoptions)
+- [useConfigContext](#useconfigcontext)
 - [useDrawer](#usedrawer)
-- [useFaasState](#usefaasstate)
 - [useModal](#usemodal)
 
 ## Type aliases
@@ -425,6 +426,12 @@ ___
 
 ## Variables
 
+### ConfigContext
+
+• `Const` **ConfigContext**: `Context`<[`FaasState`](#faasstate)\>
+
+___
+
 ### DatePicker
 
 • `Const` **DatePicker**: `PickerComponentClass`<`Omit`<`PickerBaseProps`<`Dayjs`\>, ``"locale"`` \| ``"generateConfig"`` \| ``"hideHeader"`` \| ``"components"``\> & {} & {} & `Omit`<`PickerDateProps`<`Dayjs`\>, ``"locale"`` \| ``"generateConfig"`` \| ``"hideHeader"`` \| ``"components"``\> & {} & {} & `Omit`<`PickerTimeProps`<`Dayjs`\>, ``"locale"`` \| ``"generateConfig"`` \| ``"hideHeader"`` \| ``"components"``\> & {} & {}, `unknown`\> & {}
@@ -475,29 +482,32 @@ ___
 
 ___
 
-### Config
+### ConfigProvider
 
-▸ **Config**(`props`): `JSX.Element`
+▸ **ConfigProvider**(`props`): `Element`
 
-Config for all @faasjs/ant-design components.
+Config for @faasjs/ant-design components.
 
 #### Parameters
 
 | Name | Type |
 | :------ | :------ |
 | `props` | `Object` |
+| `props.children` | `ReactNode` |
 | `props.config` | `Partial`<[`FaasState`](#faasstate)\> |
 
 #### Returns
 
-`JSX.Element`
+`Element`
 
 ```ts
-<Config config={{
+<ConfigProvider config={{
  common: {
   blank: '空',
  },
-}} />
+}}>
+ <Blank />
+</ConfigProvider>
 ```
 
 ___
@@ -667,6 +677,16 @@ ___
 
 ___
 
+### useConfigContext
+
+▸ **useConfigContext**(): [`FaasState`](#faasstate)
+
+#### Returns
+
+[`FaasState`](#faasstate)
+
+___
+
 ### useDrawer
 
 ▸ **useDrawer**(`init?`): `Object`
@@ -691,16 +711,6 @@ Hook style drawer.
 
 ___
 
-### useFaasState
-
-▸ **useFaasState**(): [[`FaasState`](#faasstate), (`state`: `IHookStateSetAction`<[`FaasState`](#faasstate)\>) => `void`]
-
-#### Returns
-
-[[`FaasState`](#faasstate), (`state`: `IHookStateSetAction`<[`FaasState`](#faasstate)\>) => `void`]
-
-___
-
 ### useModal
 
 ▸ **useModal**(`init?`): `Object`

package/dist/index.d.ts

@@ -2,15 +2,14 @@ import * as antd_es_calendar_generateCalendar_js from 'antd/es/calendar/generate
 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 react from 'react';
+import { LazyExoticComponent, ComponentType } from 'react';
 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';
 
@@ -59,24 +58,28 @@ declare type FaasState = {
         suffix: string;
     };
 };
-declare const useFaasState: () => [FaasState, (state: react_use_lib_misc_hookState.IHookStateSetAction<FaasState>) => void];
+declare const ConfigContext: react.Context<FaasState>;
 /**
- * Config for all @faasjs/ant-design components.
+ * Config for @faasjs/ant-design components.
  * @param props {object}
  * @param props.config {Partial<FaasState>}
  * @returns {null}
  *
  * ```ts
- * <Config config={{
+ * <ConfigProvider config={{
  *  common: {
  *   blank: '空',
  *  },
- * }} />
+ * }}>
+ *  <Blank />
+ * </ConfigProvider>
  * ```
  */
-declare function Config(props: {
+declare function ConfigProvider({ config, children }: {
     config: Partial<FaasState>;
+    children: React.ReactNode;
 }): JSX.Element;
+declare function useConfigContext(): FaasState;
 
 declare type FaasItemType = 'string' | 'string[]' | 'number' | 'number[]' | 'boolean' | 'date' | 'time' | 'object' | 'object[]';
 declare type FaasItemTypeValue = {
@@ -389,4 +392,4 @@ declare type TitleProps = {
  */
 declare function Title(props: TitleProps): JSX.Element;
 
-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 };
+export { BaseItemProps, BaseOption, Blank, BlankProps, Calendar, CalendarProps, ConfigContext, ConfigProvider, 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, useConfigContext, useDrawer, useModal };

package/dist/index.js

@@ -41,7 +41,8 @@ var src_exports = {};
 __export(src_exports, {
   Blank: () => Blank,
   Calendar: () => Calendar,
-  Config: () => Config,
+  ConfigContext: () => ConfigContext,
+  ConfigProvider: () => ConfigProvider,
   DatePicker: () => DatePicker,
   Description: () => Description,
   Drawer: () => import_antd3.Drawer,
@@ -53,8 +54,8 @@ __export(src_exports, {
   TimePicker: () => TimePicker,
   Title: () => Title,
   transferOptions: () => transferOptions,
+  useConfigContext: () => useConfigContext,
   useDrawer: () => useDrawer,
-  useFaasState: () => useFaasState,
   useModal: () => useModal
 });
 module.exports = __toCommonJS(src_exports);
@@ -68,7 +69,6 @@ var import_lodash = require("lodash");
 
 // src/Config.tsx
 var import_react2 = require("react");
-var import_react_use = require("react-use");
 var isZH = /^zh/i.test(navigator.language);
 var common = isZH ? {
   lang: "zh",
@@ -89,7 +89,7 @@ var common = isZH ? {
   delete: "Delete",
   required: "is required"
 };
-var useFaasState = (0, import_react_use.createGlobalState)({
+var baseConfig = {
   lang: "en",
   common,
   Blank: { text: common.blank },
@@ -98,18 +98,23 @@ var useFaasState = (0, import_react_use.createGlobalState)({
     separator: " - ",
     suffix: ""
   }
-});
-function Config(props) {
-  const [_, setState] = useFaasState();
-  (0, import_react2.useEffect)(() => {
-    setState((prev) => __spreadValues(__spreadValues({}, prev), props.config));
-  }, []);
-  return null;
+};
+var ConfigContext = (0, import_react2.createContext)(baseConfig);
+function ConfigProvider({
+  config,
+  children
+}) {
+  return /* @__PURE__ */ import_react.default.createElement(ConfigContext.Provider, {
+    value: __spreadValues(__spreadValues({}, baseConfig), config)
+  }, children);
+}
+function useConfigContext() {
+  return (0, import_react2.useContext)(ConfigContext);
 }
 
 // src/Blank.tsx
 function Blank(options) {
-  const [config] = useFaasState();
+  const config = useConfigContext();
   return !options || (0, import_lodash.isNil)(options.value) || Array.isArray(options.value) && !options.value.length || options.value === "" ? /* @__PURE__ */ import_react.default.createElement(import_antd.Typography.Text, {
     disabled: true
   }, (options == null ? void 0 : options.text) || config.Blank.text) : options.value;
@@ -335,7 +340,7 @@ function processProps(propsCopy, config) {
 function FormItem(props) {
   var _a;
   const [computedProps, setComputedProps] = (0, import_react7.useState)();
-  const [config] = useFaasState();
+  const config = useConfigContext();
   (0, import_react7.useEffect)(() => {
     setComputedProps(processProps(__spreadValues({}, props), config));
   }, [props]);
@@ -494,7 +499,7 @@ function Form(props) {
   var _a, _b;
   const [loading, setLoading] = (0, import_react9.useState)(false);
   const [computedProps, setComputedProps] = (0, import_react9.useState)();
-  const [config] = useFaasState();
+  const config = useConfigContext();
   (0, import_react9.useEffect)(() => {
     var _a2;
     const propsCopy = __spreadValues({}, props);
@@ -558,7 +563,7 @@ var import_antd7 = require("antd");
 var import_react11 = require("react");
 var import_react_router_dom = require("react-router-dom");
 function NotFound() {
-  const [config] = useFaasState();
+  const config = useConfigContext();
   return /* @__PURE__ */ import_react.default.createElement(import_antd7.Result, {
     status: "404",
     title: config.common.pageNotFound
@@ -620,7 +625,7 @@ function processValue(item, value) {
 }
 function Table(props) {
   const [columns, setColumns] = (0, import_react12.useState)();
-  const [config] = useFaasState();
+  const config = useConfigContext();
   (0, import_react12.useEffect)(() => {
     var _a;
     for (const item of props.items) {
@@ -806,7 +811,7 @@ function Table(props) {
 // src/Title.tsx
 var import_react14 = require("react");
 function Title(props) {
-  const [config] = useFaasState();
+  const config = useConfigContext();
   (0, import_react14.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);
@@ -827,7 +832,8 @@ function Title(props) {
 0 && (module.exports = {
   Blank,
   Calendar,
-  Config,
+  ConfigContext,
+  ConfigProvider,
   DatePicker,
   Description,
   Drawer,
@@ -839,7 +845,7 @@ function Title(props) {
   TimePicker,
   Title,
   transferOptions,
+  useConfigContext,
   useDrawer,
-  useFaasState,
   useModal
 });

package/dist/index.mjs

@@ -26,8 +26,7 @@ import { Typography } from "antd";
 import { isNil } from "lodash";
 
 // src/Config.tsx
-import { useEffect } from "react";
-import { createGlobalState } from "react-use";
+import { createContext, useContext } from "react";
 var isZH = /^zh/i.test(navigator.language);
 var common = isZH ? {
   lang: "zh",
@@ -48,7 +47,7 @@ var common = isZH ? {
   delete: "Delete",
   required: "is required"
 };
-var useFaasState = createGlobalState({
+var baseConfig = {
   lang: "en",
   common,
   Blank: { text: common.blank },
@@ -57,18 +56,23 @@ var useFaasState = createGlobalState({
     separator: " - ",
     suffix: ""
   }
-});
-function Config(props) {
-  const [_, setState] = useFaasState();
-  useEffect(() => {
-    setState((prev) => __spreadValues(__spreadValues({}, prev), props.config));
-  }, []);
-  return null;
+};
+var ConfigContext = createContext(baseConfig);
+function ConfigProvider({
+  config,
+  children
+}) {
+  return /* @__PURE__ */ React.createElement(ConfigContext.Provider, {
+    value: __spreadValues(__spreadValues({}, baseConfig), config)
+  }, children);
+}
+function useConfigContext() {
+  return useContext(ConfigContext);
 }
 
 // src/Blank.tsx
 function Blank(options) {
-  const [config] = useFaasState();
+  const config = useConfigContext();
   return !options || isNil(options.value) || Array.isArray(options.value) && !options.value.length || options.value === "" ? /* @__PURE__ */ React.createElement(Typography.Text, {
     disabled: true
   }, (options == null ? void 0 : options.text) || config.Blank.text) : options.value;
@@ -106,14 +110,14 @@ import {
 import { upperFirst as upperFirst2 } from "lodash";
 import {
   cloneElement,
-  useEffect as useEffect2,
+  useEffect,
   useState
 } from "react";
 import dayjs from "dayjs";
 import { FaasDataWrapper } from "@faasjs/react";
 function DescriptionItemContent(props) {
   const [computedProps, setComputedProps] = useState();
-  useEffect2(() => {
+  useEffect(() => {
     var _a, _b;
     const propsCopy = __spreadValues({}, props);
     if (!propsCopy.item.title)
@@ -235,7 +239,7 @@ import {
   Button as Button2,
   Form as AntdForm2
 } from "antd";
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 
 // src/FormItem.tsx
 import {
@@ -249,7 +253,7 @@ import {
   Select
 } from "antd";
 import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useEffect as useEffect2, useState as useState3 } from "react";
 import { upperFirst as upperFirst3 } from "lodash";
 
 // src/TimePicker.tsx
@@ -313,8 +317,8 @@ function processProps(propsCopy, config) {
 function FormItem(props) {
   var _a;
   const [computedProps, setComputedProps] = useState3();
-  const [config] = useFaasState();
-  useEffect3(() => {
+  const config = useConfigContext();
+  useEffect2(() => {
     setComputedProps(processProps(__spreadValues({}, props), config));
   }, [props]);
   if (!computedProps)
@@ -472,8 +476,8 @@ function Form(props) {
   var _a, _b;
   const [loading, setLoading] = useState4(false);
   const [computedProps, setComputedProps] = useState4();
-  const [config] = useFaasState();
-  useEffect4(() => {
+  const config = useConfigContext();
+  useEffect3(() => {
     var _a2;
     const propsCopy = __spreadValues({}, props);
     if (propsCopy.onFinish) {
@@ -541,7 +545,7 @@ import {
   Route
 } from "react-router-dom";
 function NotFound() {
-  const [config] = useFaasState();
+  const config = useConfigContext();
   return /* @__PURE__ */ React.createElement(Result, {
     status: "404",
     title: config.common.pageNotFound
@@ -568,7 +572,7 @@ function Routes(props) {
 // src/Table.tsx
 import {
   useState as useState6,
-  useEffect as useEffect5,
+  useEffect as useEffect4,
   cloneElement as cloneElement2
 } from "react";
 import {
@@ -611,8 +615,8 @@ function processValue(item, value) {
 }
 function Table(props) {
   const [columns, setColumns] = useState6();
-  const [config] = useFaasState();
-  useEffect5(() => {
+  const config = useConfigContext();
+  useEffect4(() => {
     var _a;
     for (const item of props.items) {
       if (!item.key)
@@ -795,10 +799,10 @@ function Table(props) {
 }
 
 // src/Title.tsx
-import { useEffect as useEffect6, cloneElement as cloneElement3 } from "react";
+import { useEffect as useEffect5, cloneElement as cloneElement3 } from "react";
 function Title(props) {
-  const [config] = useFaasState();
-  useEffect6(() => {
+  const config = useConfigContext();
+  useEffect5(() => {
     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);
   }, []);
@@ -817,7 +821,8 @@ function Title(props) {
 export {
   Blank,
   Calendar,
-  Config,
+  ConfigContext,
+  ConfigProvider,
   DatePicker,
   Description,
   Drawer,
@@ -829,7 +834,7 @@ export {
   TimePicker,
   Title,
   transferOptions,
+  useConfigContext,
   useDrawer,
-  useFaasState,
   useModal
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/ant-design",
-  "version": "0.0.2-beta.387",
+  "version": "0.0.2-beta.390",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -26,10 +26,9 @@
     "@ant-design/icons": "*",
     "antd": "*",
     "lodash": "*",
-    "react": "*",
-    "react-dom": "*",
-    "@faasjs/react": "^0.0.2-beta.387",
-    "react-use": "*",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "@faasjs/react": "^0.0.2-beta.390",
     "react-router-dom": "*",
     "dayjs": "*"
   },