@hzab/form-render-mobile 1.2.1-beta → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +107 -105
  2. package/package.json +1 -1
  3. package/src/components/Uploader/common/utils.js +12 -3
  4. package/src/components/Uploader/components/Image/index.tsx +4 -2
  5. package/src/components/Uploader/components/ItemList/index.tsx +1 -1
  6. package/src/components/Uploader/uploader.jsx +6 -3
package/README.md CHANGED
@@ -1,105 +1,107 @@
1
- # @hzab/form-render-mobile
2
-
3
- 组件模板
4
-
5
- - node@16.x
6
-
7
- # 注意
8
-
9
- - Upload 拍照需要用到 cordova 插件，通过 props.getImgOpt.isMediaCapturePlugin, props.getImgOpt.isCameraPlugin 配置
10
- - isMediaCapturePlugin cordova 插件: cordova-plugin-media-capture
11
- - isCameraPlugin cordova 插件: cordova-plugin-camera
12
-
13
- # 组件
14
-
15
- ## 示例
16
-
17
- ```jsx
18
- import { useRef } from "react";
19
- import FormRender from "@hzab/form-render-mobile";
20
-
21
- import Schema from "./test.schema.json";
22
-
23
- export default () => {
24
- const formRef = useRef({
25
- formRender: Object,
26
- });
27
-
28
- function onClick() {
29
- console.log(JSON.stringify(formRef?.current?.formRender.values));
30
- }
31
-
32
- return (
33
- <div>
34
- <FormRender ref={formRef} schema={Schema} initialValues={ipt:'xxxxssss'} />
35
- <button onClick={onClick}>提交</button>
36
- </div>
37
- );
38
- };
39
- ```
40
-
41
- ## API
42
-
43
- ### InfoPanel Attributes
44
-
45
- | 参数 | 类型 | 必填 | 默认值 | 说明 |
46
- | ------------- | --------------------- | ---- | ------ | ----------------------------- |
47
- | schema | Object | 是 | - | 数据信息的 schema |
48
- | className | string | 否 | - | 元素类名 |
49
- | colon | string/false | 否 | ： | 设置 label 后面的符号 |
50
- | initialValues | Object | 否 | - | 表单初始值 |
51
- | schemaScope | Object | 否 | - | formily scope 自定义数据 |
52
- | components | SchemaReactComponents | 否 | - | formily 自定义组件 |
53
- | readOnly | boolean | 否 | - | 是否只读 |
54
- | disabled | boolean | 否 | - | 是否禁用 |
55
- | formOptions | Object | 否 | - | createForm 配置项 |
56
- | hasSubmit | boolean | 否 | - | 是否有提交按钮 |
57
- | onSubmit | Function | 否 | - | 提交事件 (values): void |
58
- | init | Function | 否 | - | 组件初始化 (form): void |
59
- | axios | Object | 否 | - | axios |
60
- | axiosConf | Object | 否 | - | axios config |
61
- | footerRender | Function | 否 | - | 底部渲染插槽 (): ReactElement |
62
-
63
- # 组件开发流程
64
-
65
- - 在 config/webpack.config.js 中按需修改 library 配置的文件名
66
- - 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
67
- - 在 tsconfig.json 中按需修改 paths 配置的包名，解决 ts 报错问题
68
- - npm run dev
69
-
70
- ## 文件目录
71
-
72
- - example 本地开发测试代码
73
- - src 组件源码
74
- - lib 组件打包编译后的代码
75
-
76
- ## 命令
77
-
78
- - Mac 执行该命令，设置 pre-commit 为可执行文件
79
-
80
- - npm run mac-chmod
81
- - chmod +x .husky && chmod +x .husky/pre-commit
82
-
83
- - 生成文档：npm run docs
84
- - 本地运行：npm run dev
85
- - 打包编译：npm run build
86
-
87
- ## 发布
88
-
89
- - 注意：示例代码生效，但发布之后未生效。确认是否执行了编译！！！
90
-
91
- - 编译组件：npm run build
92
- - 命令：npm publish --access public
93
- - 发布目录：
94
- - lib
95
- - src
96
-
97
- ## 配置
98
-
99
- ### 配置文件
100
-
101
- - 本地配置文件：config/config.js
102
-
103
- ### webpack 配置文件
104
-
105
- - config/webpack.config.js
1
+ # @hzab/form-render-mobile
2
+
3
+ 组件模板
4
+
5
+ - node@16.x
6
+
7
+ # 注意
8
+
9
+ - Upload 拍照需要用到 cordova 插件，通过 props.getImgOpt.isMediaCapturePlugin, props.getImgOpt.isCameraPlugin 配置
10
+ - isMediaCapturePlugin cordova 插件: cordova-plugin-media-capture
11
+ - isCameraPlugin cordova 插件: cordova-plugin-camera
12
+
13
+ # 组件
14
+
15
+ ## 示例
16
+
17
+ ```jsx
18
+ import { useRef } from "react";
19
+ import FormRender from "@hzab/form-render-mobile";
20
+
21
+ import Schema from "./test.schema.json";
22
+
23
+ export default () => {
24
+ const formRef = useRef({
25
+ formRender: Object,
26
+ });
27
+
28
+ function onClick() {
29
+ console.log(JSON.stringify(formRef?.current?.formRender.values));
30
+ }
31
+
32
+ return (
33
+ <div>
34
+ <FormRender ref={formRef} schema={Schema} initialValues={ipt:'xxxxssss'} />
35
+ <button onClick={onClick}>提交</button>
36
+ </div>
37
+ );
38
+ };
39
+ ```
40
+
41
+ ## API
42
+
43
+ ### InfoPanel Attributes
44
+
45
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
46
+ | --------------- | --------------------- | ---- | ------ | ----------------------------- |
47
+ | schema | Object | 是 | - | 数据信息的 schema |
48
+ | className | string | 否 | - | 元素类名 |
49
+ | colon | string/false | 否 | ： | 设置 label 后面的符号 |
50
+ | initialValues | Object | 否 | - | 表单初始值 |
51
+ | schemaScope | Object | 否 | - | formily scope 自定义数据 |
52
+ | components | SchemaReactComponents | 否 | - | formily 自定义组件 |
53
+ | readOnly | boolean | 否 | - | 是否只读 |
54
+ | disabled | boolean | 否 | - | 是否禁用 |
55
+ | formOptions | Object | 否 | - | createForm 配置项 |
56
+ | hasSubmit | boolean | 否 | - | 是否有提交按钮 |
57
+ | onSubmit | Function | 否 | - | 提交事件 (values): void |
58
+ | init | Function | 否 | - | 组件初始化 (form): void |
59
+ | axios | Object | 否 | - | axios |
60
+ | axiosConf | Object | 否 | - | axios config |
61
+ | footerRender | Function | 否 | - | 底部渲染插槽 (): ReactElement |
62
+ | thumbnailParams | string | 否 | - | 缩略图参数 |
63
+ | selfUrlList | Array | 否 | - | 私有图片链接判断 |
64
+
65
+ # 组件开发流程
66
+
67
+ - 在 config/webpack.config.js 中按需修改 library 配置的文件名
68
+ - 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
69
+ - 在 tsconfig.json 中按需修改 paths 配置的包名，解决 ts 报错问题
70
+ - npm run dev
71
+
72
+ ## 文件目录
73
+
74
+ - example 本地开发测试代码
75
+ - src 组件源码
76
+ - lib 组件打包编译后的代码
77
+
78
+ ## 命令
79
+
80
+ - Mac 执行该命令，设置 pre-commit 为可执行文件
81
+
82
+ - npm run mac-chmod
83
+ - chmod +x .husky && chmod +x .husky/pre-commit
84
+
85
+ - 生成文档：npm run docs
86
+ - 本地运行：npm run dev
87
+ - 打包编译：npm run build
88
+
89
+ ## 发布
90
+
91
+ - 注意：示例代码生效，但发布之后未生效。确认是否执行了编译！！！
92
+
93
+ - 编译组件：npm run build
94
+ - 命令：npm publish --access public
95
+ - 发布目录：
96
+ - lib
97
+ - src
98
+
99
+ ## 配置
100
+
101
+ ### 配置文件
102
+
103
+ - 本地配置文件：config/config.js
104
+
105
+ ### webpack 配置文件
106
+
107
+ - config/webpack.config.js
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hzab/form-render-mobile",
3
- "version": "1.2.1-beta",
3
+ "version": "1.2.1",
4
4
  "description": "formily-form-render-mobile",
5
5
  "main": "src",
6
6
  "scripts": {
package/src/components/Uploader/common/utils.js CHANGED
@@ -103,14 +103,23 @@ export function handleMaxCount(fileList, maxCount) {
103
103
  }
104
104
  return list;
105
105
  }
106
-
106
+ /**判断是否私有 */
107
+ const isSelf = (selfUrlList, fileUrl) => {
108
+ let flag = false;
109
+ selfUrlList?.forEach((el) => {
110
+ if (fileUrl?.startsWith(el)) {
111
+ flag = true;
112
+ }
113
+ });
114
+ return flag;
115
+ };
107
116
  /**
108
117
  * 处理传入的数据，数据格式统一转成 Array<fileObject>
109
118
  * @param {Array} fileList Array<fileObject|string>
110
119
  * @param {number} maxCount
111
120
  * @returns Array<fileObject>
112
121
  */
113
- export function handleInputFileList(_fileList, maxCount = 1, thumbnailParams = "") {
122
+ export function handleInputFileList(_fileList, maxCount = 1, opt) {
114
123
  const fileList = handleMaxCount(getArr(_fileList), maxCount);
115
124
  if (fileList.length === 0) {
116
125
  return fileList;
@@ -123,7 +132,7 @@ export function handleInputFileList(_fileList, maxCount = 1, thumbnailParams = "
123
132
  if (typeof file === "string") {
124
133
  const uid = nanoid();
125
134
  let thumbnailUrl = "";
126
- if (opt?.ossOpt?.signatureParams?.isPublic !== 0) {
135
+ if (opt?.ossOpt?.signatureParams?.isPublic !== 0 && !isSelf(opt?.selfUrlList, file)) {
127
136
  thumbnailUrl = `${file}${opt?.thumbnailParams ? "?" + opt?.thumbnailParams : ""}`;
128
137
  }
129
138
  return {
package/src/components/Uploader/components/Image/index.tsx CHANGED
@@ -9,7 +9,7 @@ function ImagePreviewer(props) {
9
9
  const { headers, src, thumbnailUrl } = props;
10
10
  const [maskVisible, setMaskVisible] = useState(false);
11
11
  const [imgUrl, setImgUrl] = useState("");
12
-
12
+ const [thumbnailSrc, setThumbnailSrc] = useState("");
13
13
  function onPreview() {
14
14
  setMaskVisible(true);
15
15
  }
@@ -17,8 +17,10 @@ function ImagePreviewer(props) {
17
17
  const init = async () => {
18
18
  if (headers) {
19
19
  loadHeaderImage(src, headers).then(setImgUrl);
20
+ loadHeaderImage(thumbnailUrl, headers).then(setThumbnailSrc);
20
21
  } else {
21
22
  setImgUrl(src);
23
+ setThumbnailSrc(thumbnailUrl);
22
24
  }
23
25
  };
24
26
 
@@ -29,7 +31,7 @@ function ImagePreviewer(props) {
29
31
  return (
30
32
  <div className={`uploader-image-previewer ${props.className || ""}`}>
31
33
  <div className="uploader-image-previewer-img-wrap" onClick={onPreview}>
32
- <img className="uploader-image-previewer-img" src={thumbnailUrl} alt={props.alt} onClick={onPreview} />
34
+ <img className="uploader-image-previewer-img" src={thumbnailSrc} alt={props.alt} onClick={onPreview} />
33
35
  </div>
34
36
  <ImageViewer
35
37
  image={imgUrl}
package/src/components/Uploader/components/ItemList/index.tsx CHANGED
@@ -18,7 +18,7 @@ export const ItemList = (props) => {
18
18
  const { name, url = it?.ossUrl, thumbnailUrl } = it || {};
19
19
 
20
20
  let src = url || getFileURL(it);
21
- let thumbnailSrc = thumbnailUrl;
21
+ let thumbnailSrc = thumbnailUrl || src;
22
22
 
23
23
  if (baseUrl) {
24
24
  src = baseUrl + src;
package/src/components/Uploader/uploader.jsx CHANGED
@@ -42,12 +42,14 @@ function Uploader(props, ref) {
42
42
  // cordova插件上传类型 cordova-plugin-chooser | cordova-plugin-camera
43
43
  cordovaPlugin = "cordova-plugin-camera",
44
44
  uploaderProps,
45
- thumbnailParams = "x-oss-process=image/resize,w_100"
45
+ thumbnailParams = "x-oss-process=image/resize,w_100",
46
+ selfUrlList = ["https://abt2023-self.oss-cn-shanghai.aliyuncs.com"]
46
47
  } = props;
47
48
  const [loading, setLoading] = useState(false);
48
49
  const [fileList, setFileList] = useState(handleInputFileList(value, maxCount, {
49
50
  thumbnailParams,
50
- ossOpt
51
+ ossOpt,
52
+ selfUrlList
51
53
  }));
52
54
  const [actionSheetVisible, setActionSheetVisible] = useState(false);
53
55
  const uploadManagerRef = useRef(new uploadManager(new ChooserUploader()));
@@ -55,7 +57,8 @@ function Uploader(props, ref) {
55
57
  useEffect(() => {
56
58
  setFileList(handleInputFileList(value, maxCount, {
57
59
  thumbnailParams,
58
- ossOpt
60
+ ossOpt,
61
+ selfUrlList
59
62
  }));
60
63
  }, [value, thumbnailParams, ossOpt]);
61
64