Release

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kne-components/components-core",
-  "version": "0.4.40",
+  "version": "0.4.41",
   "files": [
     "build"
   ],
@@ -22,6 +22,7 @@
     "@kne/create-deferred": "^0.1.0",
     "@kne/ensure-slash": "^0.1.0",
     "@kne/flex-box": "^0.1.1",
+    "@kne/form-info": "^0.1.1",
     "@kne/global-context": "^1.2.0",
     "@kne/info-page": "^0.1.29",
     "@kne/is-empty": "^1.0.1",
@@ -31,7 +32,7 @@
     "@kne/react-file": "^0.1.30",
     "@kne/react-file-type": "^1.0.5",
     "@kne/react-form-antd": "^4.0.3",
-    "@kne/react-form-plus": "^0.1.4",
+    "@kne/react-form-plus": "^0.1.5",
     "@kne/react-icon": "^0.1.3",
     "@kne/react-intl": "^0.1.6",
     "@kne/react-text-escape": "^0.1.4",

src/components/FormInfo/Form.js

@@ -2,14 +2,11 @@ import {forwardRef, useEffect, useState} from "react";
 import {usePreset, useGlobalContext} from "@components/Global";
 import get from "lodash/get";
 import formPreset from "@components/FormInfo/preset";
-import {IntlProvider} from "@components/Intl";
-import importMessages from "@components/FormInfo/locale";
 import FormLangProvider from "@components/FormInfo/FormLangProvider";
-import InfoPage from "@components/InfoPage";
+import {Form as ReactForm} from '@kne/form-info';
 import {Provider as HelperGuideProvider} from "@components/FormInfo/HelperGuideLabel";
-import {FormAntd as ReactForm} from "@kne/react-form-antd";
-import classnames from "classnames";
-import style from "@components/FormInfo/style.module.scss";
+import '@kne/form-info/dist/index.css';
+import withLocale from "./withLocale";
 
 const SetPreset = ({children}) => {
     const [isPreset, setIsPreset] = useState(false);
@@ -27,21 +24,13 @@ const SetPreset = ({children}) => {
     return children;
 };
 
-const Form = forwardRef(({className, helperGuideName, children, lang, ...props}, ref) => {
-    return (<IntlProvider importMessages={importMessages} moduleName="FormInfo">
-        <FormLangProvider value={lang}>
-            <HelperGuideProvider value={helperGuideName}>
-                <SetPreset>
-                    <ReactForm
-                        {...props}
-                        ref={ref}
-                        className={classnames(className, style["form-outer"])}
-                    >
-                        <InfoPage>{children}</InfoPage>
-                    </ReactForm>
-                </SetPreset>
-            </HelperGuideProvider>
-        </FormLangProvider>
-    </IntlProvider>);
-});
+const Form = withLocale(forwardRef(({helperGuideName, lang, ...props}, ref) => {
+    return (<FormLangProvider value={lang}>
+        <HelperGuideProvider value={helperGuideName}>
+            <SetPreset>
+                <ReactForm {...props} ref={ref}/>
+            </SetPreset>
+        </HelperGuideProvider>
+    </FormLangProvider>);
+}));
 export default Form;

src/components/FormInfo/computedModalCommonProps.js

@@ -1,12 +1,9 @@
-import importMessages from "./locale";
 import {CancelButton, SubmitButton} from "@kne/react-form-antd";
-import {IntlProvider, FormattedMessage} from "@components/Intl";
+import {useIntl, FormattedMessage} from '@kne/react-intl';
 import {Form} from "./formModule";
 import classnames from "classnames";
 import style from "./style.module.scss";
 
-const localeModuleName = "FormInfo";
-
 const computedCommonProps = ({
                                  className,
                                  withDecorator,
@@ -19,19 +16,12 @@ const computedCommonProps = ({
                              }) => {
     return {
         ...modalProps, footerButtons: footerButtons || [{
-            children: (<IntlProvider
-                importMessages={importMessages}
-                moduleName={localeModuleName}
-            >
-                {cancelText || (<FormattedMessage id={"Cancel"} moduleName={localeModuleName}/>)}
-            </IntlProvider>), ButtonComponent: CancelButton,
+            children: cancelText || <FormattedMessage id="Cancel"/>, ButtonComponent: CancelButton,
         }, {
-            type: "primary", children: (<IntlProvider
-                importMessages={importMessages}
-                moduleName={localeModuleName}
-            >
-                {saveText || (<FormattedMessage id={"Save"} moduleName={localeModuleName}/>)}
-            </IntlProvider>), ButtonComponent: SubmitButton, autoClose: false,
+            type: "primary",
+            children: saveText || <FormattedMessage id="Save"/>,
+            ButtonComponent: SubmitButton,
+            autoClose: false,
         },], withDecorator: (render, args) => {
             const innerRender = (props) => {
                 const {
@@ -47,9 +37,7 @@ const computedCommonProps = ({
                         }
                     }}
                 >
-                    <IntlProvider importMessages={importMessages} moduleName="FormInfo">
-                        {render(props)}
-                    </IntlProvider>
+                    {render(props)}
                 </Form>);
             };
             return typeof withDecorator === "function" ? withDecorator(innerRender, args) : innerRender(args);

src/components/FormInfo/fields/index.js

@@ -31,7 +31,7 @@ import SalaryInput from "./SalaryInput";
 import InputUpperCaseField from "./InputUpperCase";
 import compose from "@kne/compose";
 import {forwardRef} from "react";
-import {FormattedMessage, useIntl} from "@components/Intl";
+import {useIntl} from '@kne/react-intl';
 import {useGroup} from "@kne/react-form-antd";
 import get from "lodash/get";
 import {get as _get} from "lodash";
@@ -79,31 +79,25 @@ const createWithFieldDecorator = (decoratorList) => (WrappedComponent) => {
 };
 
 const withInputDefaultPlaceholder = (WrappedComponent) => {
-    return ({placeholder, label, ...props}) => (<FormattedMessage
-        id="defaultInputPlaceholder"
-        moduleName="FormInfo"
-        values={{label}}
-    >
-        {(text) => (<WrappedComponent
+    return ({placeholder, label, ...props}) => {
+        const {formatMessage} = useIntl();
+        return (<WrappedComponent
             {...props}
             label={label}
-            placeholder={placeholder || text}
-        />)}
-    </FormattedMessage>);
+            placeholder={placeholder || formatMessage({id: 'defaultInputPlaceholder'}, {label})}
+        />);
+    };
 };
 
 const withSelectDefaultPlaceholder = (WrappedComponent) => {
-    return ({placeholder, label, ...props}) => (<FormattedMessage
-        id="defaultSelectPlaceholder"
-        moduleName="FormInfo"
-        values={{label}}
-    >
-        {(text) => (<WrappedComponent
+    return ({placeholder, label, ...props}) => {
+        const {formatMessage} = useIntl();
+        return <WrappedComponent
             {...props}
             label={label}
-            placeholder={placeholder || text}
-        />)}
-    </FormattedMessage>);
+            placeholder={placeholder || formatMessage({id: 'defaultSelectPlaceholder'}, {label})}
+        />;
+    }
 };
 
 const withLang = (WrappedComponent) => {

src/components/FormInfo/formModule.js

@@ -13,7 +13,7 @@ import {
     Slider,
 } from "@kne/react-form-antd";
 import Form from "./Form";
-import {FormattedMessage, useIntl} from "@components/Intl";
+import {useIntl} from '@kne/react-intl';
 import {forwardRef} from "react";
 import FormItem from "./FormItem";
 import style from "./style.module.scss";
@@ -40,18 +40,16 @@ import Text from "./fields/Text";
 import ErrorTip from "./ErrorTip";
 
 const withInputDefaultPlaceholder = (WrappedComponent) => {
-    const TargetComponent = forwardRef(({placeholder, label, ...props}, ref) => (<FormattedMessage
-        id="defaultInputPlaceholder"
-        moduleName="FormInfo"
-        values={{label}}
-    >
-        {(text) => (<WrappedComponent
+    const TargetComponent = forwardRef(({placeholder, label, ...props}, ref) => {
+        const {formatMessage} = useIntl();
+
+        return <WrappedComponent
             {...props}
             ref={ref}
             label={label}
-            placeholder={placeholder || text}
-        />)}
-    </FormattedMessage>));
+            placeholder={placeholder || formatMessage({id: 'defaultInputPlaceholder'}, {label})}
+        />;
+    });
     Object.keys(WrappedComponent)
         .filter((key) => {
             return ["$$typeof", "render", "field"].indexOf(key) === -1;
@@ -63,34 +61,27 @@ const withInputDefaultPlaceholder = (WrappedComponent) => {
     return TargetComponent;
 };
 
-const withTextAreaDefaultPlaceholder = (WrappedComponent) => ({placeholder, label, className, ...props}) => (
-    <FormattedMessage
-        id="defaultInputPlaceholder"
-        moduleName="FormInfo"
-        values={{label}}
-    >
-        {(text) => (<div className={style["textarea-wrapped-component"]}>
-            <WrappedComponent
-                {...props}
-                label={label}
-                placeholder={placeholder || text}
-            />
-        </div>)}
-    </FormattedMessage>);
+const withTextAreaDefaultPlaceholder = (WrappedComponent) => ({placeholder, label, className, ...props}) => {
+    const {formatMessage} = useIntl();
+    return <div className={style["textarea-wrapped-component"]}>
+        <WrappedComponent
+            {...props}
+            label={label}
+            placeholder={placeholder || formatMessage({id: 'defaultInputPlaceholder'}, {label})}
+        />
+    </div>;
+};
 
 const withSelectDefaultPlaceholder = (WrappedComponent) => {
-    const TargetComponent = forwardRef(({placeholder, label, ...props}, ref) => (<FormattedMessage
-        id="defaultSelectPlaceholder"
-        moduleName="FormInfo"
-        values={{label}}
-    >
-        {(text) => (<WrappedComponent
+    const TargetComponent = forwardRef(({placeholder, label, ...props}, ref) => {
+        const {formatMessage} = useIntl();
+        return <WrappedComponent
             {...props}
             ref={ref}
             label={label}
-            placeholder={placeholder || text}
-        />)}
-    </FormattedMessage>));
+            placeholder={placeholder || formatMessage({id: 'defaultSelectPlaceholder'}, {label})}
+        />;
+    });
 
     Object.keys(WrappedComponent)
         .filter((key) => {

src/components/FormInfo/index.js

@@ -1,27 +1,25 @@
 import preset from "./preset";
-import FormInfo from "./FormInfo";
-import fields, { fieldDecorator } from "./fields";
-import List from "./List";
-import TableList from "./TableList";
+import fields, {fieldDecorator} from "./fields";
+import {List, TableList, default as FormInfo} from "@kne/form-info";
 import FormApiButton from "./FormApiButton";
-import FormModal, { useFormModal, FormModalButton } from "./FormModal";
+import FormModal, {useFormModal, FormModalButton} from "./FormModal";
 import FormStepModal, {
-  useFormStepModal,
-  FormStepModalButton,
+    useFormStepModal,
+    FormStepModalButton,
 } from "./FormStepModal";
-import FormDrawer, { useFormDrawer, FormDrawerButton } from "./FormDrawer";
+import FormDrawer, {useFormDrawer, FormDrawerButton} from "./FormDrawer";
 import Form from "./Form";
 import FormItem from "./FormItem";
 import ErrorTip from "./ErrorTip";
-import MultiField from "./MultiField";
+import {MultiField} from "@kne/form-info";
 import {
-  SubmitButton,
-  CancelButton,
-  useFormContext,
-  hooks,
-  widget,
-  utils,
-  formUtils,
+    SubmitButton,
+    CancelButton,
+    useFormContext,
+    hooks,
+    widget,
+    utils,
+    formUtils,
 } from "@kne/react-form-antd";
 
 preset();
@@ -57,26 +55,26 @@ export * from "@kne/react-form-antd";
 export * from "./formModule";
 
 export {
-  Form,
-  FormItem,
-  ErrorTip,
-  fields,
-  fieldDecorator,
-  List,
-  TableList,
-  FormApiButton,
-  FormModal,
-  useFormModal,
-  FormModalButton,
-  FormStepModal,
-  useFormStepModal,
-  FormStepModalButton,
-  FormDrawer,
-  useFormDrawer,
-  FormDrawerButton,
-  MultiField,
+    Form,
+    FormItem,
+    ErrorTip,
+    fields,
+    fieldDecorator,
+    List,
+    TableList,
+    FormApiButton,
+    FormModal,
+    useFormModal,
+    FormModalButton,
+    FormStepModal,
+    useFormStepModal,
+    FormStepModalButton,
+    FormDrawer,
+    useFormDrawer,
+    FormDrawerButton,
+    MultiField,
 };
 
-export { default as SelectInnerInput } from "./SelectInnerInput";
+export {default as SelectInnerInput} from "./SelectInnerInput";
 
 export default FormInfo;

src/components/FormInfo/withLocale.js

@@ -0,0 +1,11 @@
+import {createWithIntlProvider} from '@kne/react-intl';
+import zhCN from './locale/zh-CN';
+import enUS from './locale/en-US';
+
+const withLocale = createWithIntlProvider({
+    defaultLocale: 'zh-CN', messages: {
+        'zh-CN': zhCN, 'en-US': enUS
+    }, namespace: 'form-info'
+});
+
+export default withLocale;