@hzab/form-render-mobile 0.0.16 → 0.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render-mobile",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "formily-form-render-mobile",
   "main": "lib",
   "scripts": {
@@ -52,7 +52,16 @@
     "lib": "lib"
   },
   "lint-staged": {
-    "**.{js,jsx,ts,tsx,css,scss,less,json,html}": [
+    "src/**.{js,jsx,ts,tsx,css,scss,less,json,html}": [
+      "prettier --write"
+    ],
+    "src/**/**.{js,jsx,ts,tsx,css,scss,less,json,html}": [
+      "prettier --write"
+    ],
+    "example/**.{js,jsx,ts,tsx,css,scss,less,json,html}": [
+      "prettier --write"
+    ],
+    "example/**/**.{js,jsx,ts,tsx,css,scss,less,json,html}": [
       "prettier --write"
     ]
   }

package/src/common/global-props-context.ts

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+
+/**
+ * 组件外部传入的 props context
+ */
+export const GlobalPropsContext = createContext(null);
+
+/**
+ * 组件外部传入的 props
+ */
+export const useGlobalPropsContext = () => useContext(GlobalPropsContext);

package/src/common/schemaHandler.js

@@ -1,6 +1,6 @@
 import _ from "lodash";
 
-export function schemaHandler(_schema) {
+export function schemaHandler(_schema, opt = {}) {
   let formSchema = _.cloneDeep(_schema);
   let schema = formSchema.schema || formSchema;
   const formConf = formSchema.form || {};
@@ -9,7 +9,9 @@ export function schemaHandler(_schema) {
     formConf.layout = "horizontal";
   }
 
-  handleLayout(schema.properties, formConf.layout);
+  if (opt.layout) {
+    formConf.layout = opt.layout;
+  }
 
   formSchema = {
     ..._schema,
@@ -19,26 +21,3 @@ export function schemaHandler(_schema) {
 
   return formSchema;
 }
-
-export function handleLayout(properties, layout) {
-  const keys = properties && Object.keys(properties);
-  if (keys && keys.length > 0) {
-    // 手动设置 FormLayout
-    keys.forEach((key) => {
-      const field = properties[key];
-      if (!field["x-decorator-props"]) {
-        field["x-decorator-props"] = {};
-      }
-      if (!field["x-decorator-props"].layout) {
-        field["x-decorator-props"].layout = layout;
-      }
-      if (field?.properties) {
-        handleLayout(field?.properties, layout);
-      }
-      if (field?.items?.properties) {
-        handleLayout(field?.items?.properties, layout);
-      }
-    });
-  }
-  return properties;
-}

package/src/components/Uploader/common/ossUpload.js

@@ -10,8 +10,8 @@ export function getSignature(opt = {}) {
   ) {
     return Promise.resolve(window.__ossSignatureRes);
   }
-  const { axios: _ax, params = {}, axiosConf } = opt;
-  return (_ax || axios)
+  const { axios: _ax = axios, params = {}, axiosConf } = opt;
+  return _ax
     .get(serverUrl, {
       ...axiosConf,
       params: {
@@ -32,11 +32,17 @@ export function getSignature(opt = {}) {
 class OssUpload {
   constructor(props = {}) {
     this.axios = props.axios || axios;
+    this.axiosConf = props.axiosConf || {};
     this.serverUrl = props.serverUrl || "/api/v1/user/oss/getWebOssConfig";
   }
 
   getSignature(serverUrl = this.serverUrl, opt) {
-    return getSignature({ ...opt, serverUrl });
+    return getSignature({
+      ...opt,
+      serverUrl,
+      axios: opt?.axios || this.axios,
+      axiosConf: { ...this.axiosConf, ...opt?.axiosConf },
+    });
   }
 
   upload(file, opt = {}) {
@@ -69,8 +75,10 @@ class OssUpload {
         }
       }
 
-      return this.axios
-        .post(ossParams.host, formData)
+      const _axios = opt?.axios || this.axios;
+
+      return _axios
+        .post(ossParams.host, formData, { ...this.axiosConf, ...opt?.axiosConf })
         .then((res) => {
           resolve(res);
           return res;
@@ -94,6 +102,8 @@ export async function handleOssUpload(files, opt) {
   const _files = files;
   const { ossUrl, signatureParams, ossParams, axiosConf } = opt || {};
   const ossUpload = new OssUpload({
+    axios: opt.axios,
+    axiosConf: axiosConf,
     serverUrl: ossUrl || "/api/v1/user/oss/getWebOssConfig",
   });
 

package/src/components/Uploader/index.jsx

@@ -1,6 +1,9 @@
 import UploaderCom from "./uploader";
+import { useGlobalPropsContext } from "../../common/global-props-context";
 
 export const Uploader = (props) => {
+  // 组件外部传入的 props
+  const globalProps = useGlobalPropsContext() || {};
   const { field = {}, onChange, value } = props;
   const { name, mode, componentProps = {} } = field;
   const { multiple } = componentProps;
@@ -24,6 +27,8 @@ export const Uploader = (props) => {
     mode: mode,
     ...props,
     value: typeof value === "string" ? [value] : value,
+    axios: globalProps?.axios,
+    axiosConf: globalProps?.axiosConf,
     ...componentProps,
   };
 

package/src/components/Uploader/uploader.jsx

@@ -2,8 +2,6 @@ import { useState, useRef, useEffect, useMemo } from "react";
 import { Button, Dialog, ActionSheet, Toast } from "antd-mobile";
 import { nanoid } from "nanoid";
 
-import Video from "./components/video";
-import Image from "./components/Image";
 import ItemList from "./components/ItemList";
 
 import { getImage, getVideo, getAudio } from "./common/cordova-camera";
@@ -75,7 +73,12 @@ function Uploader(props) {
     // 处理 oss 逻辑
     if (isOssUpload) {
       setLoading(true);
-      files = await handleOssUpload(files, { ...ossOpt, ossUrl });
+      files = await handleOssUpload(files, {
+        axios: props.axios,
+        axiosConf: props?.axiosConf,
+        ...ossOpt,
+        ossUrl,
+      });
       setLoading(false);
     }
 

package/src/index.tsx

@@ -23,6 +23,7 @@ import { FormProvider, createSchemaField, Schema } from "@formily/react";
 
 // 自定义组件
 import * as customComponents from "./components/index";
+import { GlobalPropsContext } from "./common/global-props-context";
 import { schemaHandler } from "./common/schemaHandler";
 
 import { formPropsI } from "./type.d";
@@ -79,28 +80,36 @@ const FormRender = forwardRef((props: formPropsI, parentRef) => {
   }, []);
 
   const schema = useMemo(() => {
-    return schemaHandler(props.schema).schema;
+    return schemaHandler(props.schema);
   }, [props.schema]);
 
+  const formLayoutProps = {
+    ...schema?.form,
+  };
+
   return (
-    <div className={`form-render ${props.className} ${isDetail ? "form-render-detail" : ""}`}>
-      <FormProvider form={formRender}>
-        {/*  @ts-ignore */}
-        <SchemaField schema={schema} />
-        {props.hasSubmit !== false && isDetail !== true && readOnly !== true && !props.disabled ? (
-          <FormButtonGroup>
-            <Submit
-              onSubmit={(values) => {
-                props.onSubmit && props.onSubmit(values);
-              }}
-            >
-              {props.submitText || "提交"}
-            </Submit>
-          </FormButtonGroup>
-        ) : null}
-        <div className="form-render-footer">{props.footerRender && props.footerRender()}</div>
-      </FormProvider>
-    </div>
+    <GlobalPropsContext.Provider value={props}>
+      <div className={`form-render ${props.className} ${isDetail ? "form-render-detail" : ""}`}>
+        <FormProvider form={formRender}>
+          <FormLayout {...formLayoutProps}>
+            {/*  @ts-ignore */}
+            <SchemaField schema={schema?.schema} />
+            {props.hasSubmit !== false && isDetail !== true && readOnly !== true && !props.disabled ? (
+              <FormButtonGroup>
+                <Submit
+                  onSubmit={(values) => {
+                    props.onSubmit && props.onSubmit(values);
+                  }}
+                >
+                  {props.submitText || "提交"}
+                </Submit>
+              </FormButtonGroup>
+            ) : null}
+          </FormLayout>
+          <div className="form-render-footer">{props.footerRender && props.footerRender()}</div>
+        </FormProvider>
+      </div>
+    </GlobalPropsContext.Provider>
   );
 });