@hzab/form-render-mobile 1.2.7 → 1.2.9

package/package.json

@@ -1,76 +1,65 @@
-{
-  "name": "@hzab/form-render-mobile",
-  "version": "1.2.7",
-  "description": "formily-form-render-mobile",
-  "main": "src",
-  "scripts": {
-    "dev": "npm run prepare && webpack serve -c ./config/webpack.config.js --env local",
-    "build": "webpack -c ./config/webpack.config.js --env production",
-    "version:alpha": "npm version prerelease --preid=alpha",
-    "publish:alpha": "npm publish --tag alpha",
-    "version:beta": "npm version prerelease --preid=beta",
-    "publish:beta": "npm publish --tag beta",
-    "version:patch": "npm version patch",
-    "version:minior": "npm version minor",
-    "version:major": "npm version major",
-    "publish:stable": "npm publish --access public",
-    "prepare": "husky install",
-    "mac-chmod": "chmod +x .husky && chmod +x .husky/pre-commit",
-    "docs": "typedoc"
-  },
-  "files": [
-    "src",
-    "CHANGELOG.md"
-  ],
-  "keywords": [],
-  "author": "CaiYansong",
-  "license": "ISC",
-  "devDependencies": {
-    "@ant-design/icons": "^5.2.6",
-    "@hzab/permissions": "^0.1.1",
-    "@hzab/webpack-config": "0.0.12",
-    "@types/react": "^17.0.62",
-    "@types/react-dom": "^17.0.20",
-    "axios": "^1.4.0",
-    "babel-plugin-import": "^1.13.8",
-    "eslint": "^8.30.0",
-    "less": "^4.1.3",
-    "mobx": "^6.7.0",
-    "mobx-react": "^7.6.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^6.14.1",
-    "typedoc": "^0.24.8",
-    "typescript": "^4.9.4"
-  },
-  "dependencies": {
-    "@amap/amap-jsapi-loader": "^1.0.1",
-    "@formily/antd-mobile": "1.0.0-beta.3",
-    "@formily/core": "2.2.29",
-    "@formily/react": "2.2.29",
-    "@hzab/data-model": "^0.0.3",
-    "@hzab/utils": "^1.0.16",
-    "antd-mobile": "^5.32.0",
-    "antd-mobile-icons": "^0.2.2",
-    "nanoid": "^3.3.7",
-    "postcss-px-to-viewport": "^1.1.1",
-    "react-virtualized": "^9.22.5"
-  },
-  "directories": {
-    "lib": "lib"
-  },
-  "lint-staged": {
-    "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"
-    ]
-  }
-}
+{
+  "name": "@hzab/form-render-mobile",
+  "version": "1.2.9",
+  "private": false,
+  "src-direct": true,
+  "type": "module",
+  "description": "formily-form-render-mobile",
+  "license": "ISC",
+  "author": "CaiYansong",
+  "engines": {
+    "node": ">=24"
+  },
+  "main": "src",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "src",
+    "dist",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": [
+    "**/*.less"
+  ],
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
+    "@formily/antd-mobile": "1.0.0-beta.3",
+    "@formily/core": "2.2.29",
+    "@formily/json-schema": "2.2.29",
+    "@formily/react": "2.2.29",
+    "@formily/reactive": "2.2.29",
+    "@formily/shared": "2.2.29",
+    "@hzab/data-model": ">=0.0.3",
+    "@hzab/utils": ">=1.0.16",
+    "antd-mobile": "^5.32.0",
+    "antd-mobile-icons": "^0.2.2",
+    "classnames": "^2.3.2",
+    "dayjs": "^1.11.7",
+    "lodash": "^4.17.21",
+    "nanoid": "^3.3.7",
+    "react-virtualized": "^9.22.5"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.62",
+    "@types/react-dom": "^17.0.20",
+    "@vitest/coverage-v8": "4.1.10",
+    "happy-dom": "^20.11.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.0",
+    "vitest": "^4.1.10",
+    "@hzab/typescript-config": "^0.0.0",
+    "@hzab/eslint-config": "^0.0.0",
+    "@hzab/vite-config": "^0.0.3-alpha.0"
+  },
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "typecheck": "tsc -p tsconfig.json",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest"
+  }
+}

package/src/common/array-base-utils.ts

@@ -1,4 +1,4 @@
-import { ISchema } from "@formily/json-schema";
+import type { ISchema } from "@formily/json-schema";
 
 export const isAdditionComponent = (schema: ISchema) => {
   return schema["x-component"]?.indexOf("Addition") > -1;

package/src/components/ArrayCards/index.tsx

@@ -1,10 +1,12 @@
 import React from "react";
-import { Card, Empty, CardProps } from "antd-mobile";
-import { ArrayField } from "@formily/core";
+import type { CardProps } from "antd-mobile";
+import { Card, Empty } from "antd-mobile";
+import type { ArrayField } from "@formily/core";
 import { useField, observer, useFieldSchema, RecursionField } from "@formily/react";
 import cls from "classnames";
 import { usePrefixCls } from "@formily/antd-mobile/esm/__builtins__";
-import { ArrayBase, ArrayBaseMixins, IArrayBaseProps } from "@formily/antd-mobile/esm/array-base";
+import type { ArrayBaseMixins, IArrayBaseProps } from "@formily/antd-mobile/esm/array-base";
+import { ArrayBase } from "@formily/antd-mobile/esm/array-base";
 import {
   isAdditionComponent,
   isIndexComponent,

package/src/components/ArrayTable/common/utils.tsx

@@ -1,8 +1,8 @@
 import { createContext, useContext } from "react";
-import { GeneralField, FieldDisplayTypes, ArrayField } from "@formily/core";
+import type { GeneralField, FieldDisplayTypes, ArrayField } from "@formily/core";
 import { useField, observer, useFieldSchema, RecursionField, ReactFC } from "@formily/react";
 import { isArr } from "@formily/shared";
-import { Schema } from "@formily/json-schema";
+import type { Schema } from "@formily/json-schema";
 import { ArrayBase, ArrayBaseMixins, IArrayBaseProps } from "@formily/antd-mobile/esm/array-base";
 
 import { isAdditionComponent } from "../../../common/array-base-utils";

package/src/components/ArrayTable/index.tsx

@@ -1,11 +1,14 @@
 import React, { Fragment, useState, useRef, useEffect, createContext, useContext, useCallback } from "react";
 import cls from "classnames";
-import { GeneralField, FieldDisplayTypes, ArrayField } from "@formily/core";
-import { useField, observer, useFieldSchema, RecursionField, ReactFC } from "@formily/react";
+import type { ArrayField } from "@formily/core";
+import { GeneralField, FieldDisplayTypes } from "@formily/core";
+import type { ReactFC } from "@formily/react";
+import { useField, observer, useFieldSchema, RecursionField } from "@formily/react";
 import { isArr, isBool, isFn } from "@formily/shared";
 import { Schema } from "@formily/json-schema";
 import { usePrefixCls } from "@formily/antd-mobile/esm/__builtins__";
-import { ArrayBase, ArrayBaseMixins, IArrayBaseProps } from "@formily/antd-mobile/esm/array-base";
+import type { ArrayBaseMixins, IArrayBaseProps } from "@formily/antd-mobile/esm/array-base";
+import { ArrayBase } from "@formily/antd-mobile/esm/array-base";
 
 import {
   isColumnComponent,

package/src/components/Checkbox/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { Checkbox as AntdCheckbox, Selector, List, Space } from "antd-mobile";
 import { useField, useFieldSchema, observer } from "@formily/react";
 import type { ISchema } from "@formily/react";
-import { CheckboxProps, CheckboxGroupProps } from "antd-mobile/es/components/checkbox";
+import type { CheckboxProps, CheckboxGroupProps } from "antd-mobile/es/components/checkbox";
 
 const checkboxColorMap = {
   defaultColor: "#f5f5f5",

package/src/components/DatePicker/index.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useMemo } from "react";
 import { useField, observer } from "@formily/react";
 import { DatePicker as ADataPicker } from "antd-mobile";
-import { Precision } from "antd-mobile/2x/es/components/date-picker/date-picker-utils";
+import type { Precision } from "antd-mobile/2x/es/components/date-picker/date-picker-utils";
 import { RightOutline } from "antd-mobile-icons";
 import dayjs from "dayjs";
 
@@ -31,11 +31,11 @@ const formatEnum = {
 };
 
 type fieldT = {
-  dataSource: Array<Object>;
+  dataSource: Array<object>;
 };
 
 type DatePickerPropsT = {
-  value: string | number | Object;
+  value: string | number | object;
   disabled: boolean;
   readOnly: boolean;
   placeholder: string;

package/src/components/FormCollapse/index.tsx

@@ -1,8 +1,10 @@
-import React, { Fragment, ReactNode, useMemo, useState } from "react";
-import { Collapse, Badge, CollapseProps, CollapsePanelProps } from "antd-mobile";
+import type { ReactNode} from "react";
+import React, { Fragment, useMemo, useState } from "react";
+import type { CollapsePanelProps } from "antd-mobile";
+import { Collapse, Badge, CollapseProps } from "antd-mobile";
 import { model, markRaw } from "@formily/reactive";
 import { useField, observer, useFieldSchema, RecursionField } from "@formily/react";
-import { Schema, SchemaKey } from "@formily/json-schema";
+import type { Schema, SchemaKey } from "@formily/json-schema";
 import cls from "classnames";
 import { usePrefixCls } from "@formily/antd-mobile/esm/__builtins__";
 import { toArr } from "@formily/shared";

package/src/components/FormItem/index.tsx

@@ -9,7 +9,8 @@ import { Popover } from "antd-mobile";
 import { CheckCircleOutline, CloseCircleOutline, ExclamationCircleOutline } from "antd-mobile-icons";
 
 import { useGlobalPropsContext } from "../../common/global-props-context";
-import { IFormItemProps, useFormItemLayout } from "./common/useFormItemLayout";
+import type { IFormItemProps} from "./common/useFormItemLayout";
+import { useFormItemLayout } from "./common/useFormItemLayout";
 
 import "./index.less";
 

package/src/components/FormLayout/useResponsiveFormLayout.ts

@@ -44,7 +44,7 @@ const calcFactor = <T>(value: T | T[], breakpointIndex: number): T => {
 };
 
 const factor = <T>(value: T | T[], breakpointIndex: number): T =>
-  isValid(value) ? calcFactor(value as any, breakpointIndex) : value;
+  isValid(value) ? calcFactor(value as any, breakpointIndex) : (value as T);
 
 const calculateProps: ICalculateProps = (target, props) => {
   const { clientWidth } = target;

package/src/components/LocationPicker/Map/AMap/common/utils.ts

@@ -24,14 +24,14 @@ export function setSecurityJsCode(securityJsCode) {
 
 export type setMarkerOptT = {
   id?: number | string;
-  marker?: Object;
-  map?: Object;
-  AMap?: Object;
-  markerIconConf?: Object;
+  marker?: object;
+  map?: object;
+  AMap?: object;
+  markerIconConf?: object;
 };
 
 export type markersT = {
-  [k: number | string]: Object;
+  [k: number | string]: object;
 };
 
 export class MapUtils {
@@ -128,7 +128,7 @@ export class MapUtils {
       return;
     }
     const position = new AMap.LngLat(lon, lat);
-    let _marker = marker || this.markers[id];
+    const _marker = marker || this.markers[id];
     // 创建 Marker 或修改位置
     if (_marker) {
       // @ts-ignore

package/src/components/LocationPicker/common/utils.ts

@@ -12,9 +12,9 @@
  */
 export function getPropsValue(value = {}, opt) {
   const { lonKey = "longitude", latKey = "latitude", addrKey = "address" } = opt || {};
-  let lon = value[lonKey];
-  let lat = value[latKey];
-  let addr = value[addrKey];
+  const lon = value[lonKey];
+  const lat = value[latKey];
+  const addr = value[addrKey];
   const res = {
     lon,
     lat,

package/src/components/LocationPicker/components/ModalContent/index.tsx

@@ -9,7 +9,7 @@ import Notice from "../Notice";
 import MapSearch from "../MapSearch";
 
 import { getCurrentPosition } from "../../../../common/location-utils";
-import { MapUtils } from "../../Map/AMap/common/utils";
+import type { MapUtils } from "../../Map/AMap/common/utils";
 import { getAddress } from "../../servers";
 import { getPropsValue } from "../../common/utils";
 

package/src/components/LocationPicker/index.tsx

@@ -5,7 +5,7 @@ import { observer } from "@formily/react";
 import ResInfo from "./components/ResInfo";
 import ModalContent from "./components/ModalContent";
 
-import { MapUtils } from "./Map/AMap/common/utils";
+import type { MapUtils } from "./Map/AMap/common/utils";
 import { getCurrentPosition } from "../../common/location-utils";
 import { getPropsValue } from "./common/utils";
 import { getAddress } from "./servers";

package/src/components/Radio/index.tsx

@@ -2,7 +2,8 @@ import React, { useEffect } from "react";
 import { Radio as AntdRadio, Selector } from "antd-mobile";
 import { observer, useField, useFieldSchema } from "@formily/react";
 import type { ISchema } from "@formily/react";
-import { RadioProps, RadioGroupProps } from "antd-mobile/es/components/radio";
+import type { RadioGroupProps } from "antd-mobile/es/components/radio";
+import { RadioProps } from "antd-mobile/es/components/radio";
 
 const CustomRadio: React.FC<RadioGroupProps> = (props) => {
   const field: any = useField();

package/src/components/Select/index.tsx

@@ -6,12 +6,12 @@ import { RightOutline } from "antd-mobile-icons";
 import PickerRightOutline from "../PickerRightOutline";
 import Placeholder from "../Placeholder";
 
-import { formItemProps } from "../form-item";
+import type { formItemProps } from "../form-item";
 
 import "./index.less";
 
 type fieldT = {
-  dataSource: Array<Object>;
+  dataSource: Array<object>;
 };
 
 type SelectPropsT = {

package/src/components/TimePicker/common/utils.ts

@@ -50,7 +50,7 @@ export function getTimeColumns(opt: any = {}) {
     }
 
     while (i <= max) {
-      let _val = `${i > 9 ? i : "0" + i}`;
+      const _val = `${i > 9 ? i : "0" + i}`;
       columns[idx].push({
         label: _val,
         value: _val,

package/src/components/TimePicker/index.tsx

@@ -4,7 +4,7 @@ import { Picker } from "antd-mobile";
 import PickerRightOutline from "../PickerRightOutline";
 import Placeholder from "../Placeholder";
 import { getTimeColumns } from "./common/utils";
-import { formItemProps } from "../form-item";
+import type { formItemProps } from "../form-item";
 
 type TimePickerPropsT = {
   use12Hours: boolean;
@@ -50,7 +50,7 @@ export const TimePicker = observer((props: TimePickerPropsT) => {
   }
 
   // 拆分字符串数据并转为数字格式
-  let pickerVal = value?.split(":");
+  const pickerVal = value?.split(":");
   if (use12Hours && pickerVal && pickerVal.length > 0) {
     const t = pickerVal[2];
     pickerVal.splice(2, 1, t.split(" ")?.[0]);

package/src/components/Uploader/common/img.ts

@@ -10,7 +10,7 @@ export const loadHeaderImage = (src, headers) => {
     }
     xhr.onload = function () {
       if (xhr.status === 200) {
-        var blob = xhr.response;
+        const blob = xhr.response;
         resolve(URL.createObjectURL(blob));
       }
     };
@@ -46,10 +46,10 @@ export function scaleImg(src, size = { width: 1024 }) {
 
 export function dataURLtoBlob(dataurl) {
   const arr = dataurl.split(",");
-  let mime = arr[0].match(/:(.*?);/)[1];
-  let bstr = atob(arr[1]);
+  const mime = arr[0].match(/:(.*?);/)[1];
+  const bstr = atob(arr[1]);
   let n = bstr.length;
-  let u8arr = new Uint8Array(n);
+  const u8arr = new Uint8Array(n);
 
   while (n--) {
     u8arr[n] = bstr.charCodeAt(n);

package/src/components/Uploader/uploader.jsx

@@ -40,24 +40,29 @@ function Uploader(props, ref) {
     onCountExceed,
     headers,
     uploadBtnNode,
+    uploadCallback,
     // cordova插件上传类型  cordova-plugin-chooser | cordova-plugin-camera
     cordovaPlugin = "cordova-plugin-camera",
     uploaderProps,
     thumbnailParams = { image_process: "resize,w_200" },
   } = props;
   const [loading, setLoading] = useState(false);
-  const [fileList, setFileList] = useState(handleInputFileList(value, maxCount, {
-    thumbnailParams,
-    ossOpt,
-  }));
+  const [fileList, setFileList] = useState(
+    handleInputFileList(value, maxCount, {
+      thumbnailParams,
+      ossOpt,
+    }),
+  );
   const [actionSheetVisible, setActionSheetVisible] = useState(false);
   const uploadManagerRef = useRef(new uploadManager(new ChooserUploader()));
 
   useEffect(() => {
-    setFileList(handleInputFileList(value, maxCount, {
-      thumbnailParams,
-      ossOpt,
-    }));
+    setFileList(
+      handleInputFileList(value, maxCount, {
+        thumbnailParams,
+        ossOpt,
+      }),
+    );
   }, [value, ossOpt]);
 
   useImperativeHandle(ref, () => ({ onPicker, setActionSheetVisible }));
@@ -96,7 +101,7 @@ function Uploader(props, ref) {
         axiosConf: props?.axiosConf,
         ...ossOpt,
         ossUrl,
-        thumbnailParams
+        thumbnailParams,
       });
       setLoading(false);
     }
@@ -152,7 +157,7 @@ function Uploader(props, ref) {
           onGalleryUopload?.({
             onUploadSuccess: (res) => {
               onFileChange({
-                persist: () => { },
+                persist: () => {},
                 target: {
                   value: "",
                   files: [res],
@@ -161,8 +166,8 @@ function Uploader(props, ref) {
             },
             options: {
               cameraDirection: uploaderProps?.CameraConf?.frontCamera ? Camera.Direction.FRONT : null,
-              ...uploaderProps?.CameraConf
-            }
+              ...uploaderProps?.CameraConf,
+            },
           });
         } else if (window?.chooser && cordovaPlugin === "cordova-plugin-chooser") {
           uploadManagerRef.current.uploadFile({
@@ -173,7 +178,7 @@ function Uploader(props, ref) {
             },
             onSuccess(values) {
               onFileChange({
-                persist: () => { },
+                persist: () => {},
                 target: {
                   value: "",
                   files: [values.blob],
@@ -192,7 +197,7 @@ function Uploader(props, ref) {
       case "captureImage":
         getImage(props.imgPluginOpt, props.getImgOpt).then((res) => {
           onFileChange({
-            persist: () => { },
+            persist: () => {},
             target: {
               value: "",
               files: [res],
@@ -204,7 +209,7 @@ function Uploader(props, ref) {
       case "captureVideo":
         getVideo().then((res) => {
           onFileChange({
-            persist: () => { },
+            persist: () => {},
             target: {
               value: "",
               files: [res],
@@ -270,10 +275,12 @@ function Uploader(props, ref) {
         <>
           <div
             className={`uploader-add-btn ${loading ? "uploader-add-btn-loading" : ""}`}
-            onClick={() => {
+            onClick={async () => {
               if (loading) {
                 return;
               }
+              uploadCallback && (await uploadCallback());
+
               setActionSheetVisible(true);
             }}
             loading={loading}

package/src/components/UserSelect/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { Popup, CheckList, Avatar, Button, type AvatarProps } from "antd-mobile";
 import { useField, useFieldSchema } from "@formily/react";
-import { IFieldState } from "@formily/core";
+import type { IFieldState } from "@formily/core";
 
 import styles from "./index.module.less";
 

package/src/global.d.ts

@@ -0,0 +1,14 @@
+export {};
+declare global {
+  interface Window {
+    AMap?: any;
+    _AMapLoaderTemp?: any;
+    _AMapSecurityConfig?: { securityJsCode?: string };
+    formRenderGlobalServeConfig?: Record<string, any>;
+    // 下潜进 @hzab/utils 源码（node10）时会 typecheck 到 utils 的全局，需在此声明。
+    _$offlineSignatureRes?: any;
+    _$ossSignatureRes?: any;
+    formilyGlobalComponents?: Record<string, any>;
+    utilsGlobalServeConfig?: Record<string, any>;
+  }
+}

package/src/index.tsx

@@ -28,7 +28,7 @@ import { schemaHandler } from "./common/schemaHandler";
 
 import FormLayout, { FormLayoutDeepContext } from "./components/FormLayout";
 
-import { formPropsI } from "./type.d";
+import type { formPropsI } from "./type.d";
 
 import "./index.less";
 

package/src/type.d.ts

@@ -1,16 +1,17 @@
-import { ReactElement } from "react";
-import { SchemaReactComponents, Schema } from "@formily/react";
-import { Form } from "@formily/core";
+import type { ReactElement } from "react";
+import type { SchemaReactComponents} from "@formily/react";
+import { Schema } from "@formily/react";
+import type { Form } from "@formily/core";
 
 export interface formPropsI {
   /** 元素类名 */
   className?: string;
   /** 表单初始值 */
-  initialValues?: Object;
+  initialValues?: object;
   /** 表单 schema */
   schema: any;
   /** formily scope 自定义数据 */
-  schemaScope?: Object;
+  schemaScope?: object;
   /** formily 自定义组件 */
   components?: SchemaReactComponents;
   /** 是否详情页面 */
@@ -20,7 +21,7 @@ export interface formPropsI {
   /** 是否禁用 */
   disabled?: boolean;
   /** createForm 配置项 */
-  formOptions?: Object;
+  formOptions?: object;
   /** 是否有提交按钮 */
   hasSubmit?: boolean;
   /** 提交按钮文案 */

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />