@hzab/form-render-mobile 1.2.8 → 1.2.9

package/package.json

@@ -1,76 +1,65 @@
-{
-  "name": "@hzab/form-render-mobile",
-  "version": "1.2.8",
-  "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/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" />

package/README.md

@@ -1,111 +0,0 @@
-# @hzab/form-render-mobile
-
-组件模板
-
-- node@16.x
-
-# 注意
-
-- Upload 拍照需要用到 cordova 插件，通过 props.getImgOpt.isMediaCapturePlugin, props.getImgOpt.isCameraPlugin 配置
-  - isMediaCapturePlugin cordova 插件: cordova-plugin-media-capture
-  - isCameraPlugin cordova 插件: cordova-plugin-camera
-
-# 组件
-
-## 示例
-
-```jsx
-import { useRef } from "react";
-import FormRender from "@hzab/form-render-mobile";
-
-import Schema from "./test.schema.json";
-
-export default () => {
-  const formRef = useRef({
-    formRender: Object,
-  });
-
-  function onClick() {
-    console.log(JSON.stringify(formRef?.current?.formRender.values));
-  }
-
-  return (
-    <div>
-      <FormRender ref={formRef} schema={Schema} initialValues={ipt:'xxxxssss'} />
-      <button onClick={onClick}>提交</button>
-    </div>
-  );
-};
-```
-
-## API
-
-### InfoPanel Attributes
-
-| 参数            | 类型                  | 必填 | 默认值 | 说明                          |
-| --------------- | --------------------- | ---- | ------ | ----------------------------- |
-| schema          | Object                | 是   | -      | 数据信息的 schema             |
-| className       | string                | 否   | -      | 元素类名                      |
-| colon           | string/false          | 否   | ：     | 设置 label 后面的符号         |
-| initialValues   | Object                | 否   | -      | 表单初始值                    |
-| schemaScope     | Object                | 否   | -      | formily scope 自定义数据      |
-| components      | SchemaReactComponents | 否   | -      | formily 自定义组件            |
-| readOnly        | boolean               | 否   | -      | 是否只读                      |
-| disabled        | boolean               | 否   | -      | 是否禁用                      |
-| formOptions     | Object                | 否   | -      | createForm 配置项             |
-| hasSubmit       | boolean               | 否   | -      | 是否有提交按钮                |
-| onSubmit        | Function              | 否   | -      | 提交事件 (values): void       |
-| init            | Function              | 否   | -      | 组件初始化 (form): void       |
-| axios           | Object                | 否   | -      | axios                         |
-| axiosConf       | Object                | 否   | -      | axios config                  |
-| footerRender    | Function              | 否   | -      | 底部渲染插槽 (): ReactElement |
-| thumbnailParams | string                | 否   | -      | 缩略图参数                    |
-| selfUrlList     | Array                 | 否   | -      | 私有图片链接判断              |
-
-# 组件开发流程
-
-- 在 config/webpack.config.js 中按需修改 library 配置的文件名
-- 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
-- 在 tsconfig.json 中按需修改 paths 配置的包名，解决 ts 报错问题
-- npm run dev
-
-## 文件目录
-
-- example 本地开发测试代码
-- src 组件源码
-
-## 命令
-
-- 生成文档：npm run docs
-- 本地运行：npm run dev
-- 打包编译：npm run build
-
-## 发布
-
-- npm 源和云效源都需要发布
-
-- 命令：npm publish --access public
-- 发布目录：
-  - src
-
-### nrm
-
-- 安装
-  npm install -g nrm
-- 增加源
-  nrm add aliyun https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/
-- 切换源
-  nrm use aliyun
-  nrm use npm
-- 登录（账号密码在 https://packages.aliyun.com/npm/npm-registry/guide 查看）
-  npm login --registry=https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/
-
-## 配置
-
-### 配置文件
-
-- 本地配置文件：config/config.js
-
-### webpack 配置文件
-
-- config/webpack.config.js