@hw-component/form 1.11.0 → 1.11.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.
- package/.eslintcache +1 -1
- package/es/Form/config.d.ts +3 -2
- package/es/Form/config.js +3 -1
- package/es/Input/SelectInput.js +0 -1
- package/es/Upload/ImgCropUpload.d.ts +3 -0
- package/es/Upload/ImgCropUpload.js +71 -0
- package/es/Upload/MediaTypeEle/index.js +2 -1
- package/es/Upload/hooks/change.js +0 -1
- package/es/Upload/util.js +0 -2
- package/es/index.d.ts +2 -1
- package/es/index.js +2 -1
- package/lib/Form/config.d.ts +3 -2
- package/lib/Form/config.js +3 -1
- package/lib/Input/SelectInput.js +0 -1
- package/lib/Upload/ImgCropUpload.d.ts +3 -0
- package/lib/Upload/ImgCropUpload.js +74 -0
- package/lib/Upload/MediaTypeEle/index.js +2 -1
- package/lib/Upload/hooks/change.js +0 -1
- package/lib/Upload/util.js +0 -2
- package/lib/index.d.ts +2 -1
- package/lib/index.js +2 -0
- package/package.json +3 -2
- package/src/components/Form/config.ts +3 -0
- package/src/components/Form/hooks/useHForm.ts +12 -12
- package/src/components/Input/SelectInput.tsx +0 -1
- package/src/components/Select/index.tsx +4 -4
- package/src/components/Upload/ImgCropUpload.tsx +50 -0
- package/src/components/Upload/MediaTypeEle/index.tsx +1 -1
- package/src/components/Upload/hooks/change.ts +0 -1
- package/src/components/Upload/hooks/customRequest.ts +0 -1
- package/src/components/Upload/util.ts +0 -2
- package/src/components/index.tsx +2 -0
- package/src/pages/Form/index.tsx +26 -3
package/es/Form/config.js
CHANGED
|
@@ -26,6 +26,7 @@ import HText from '../Text/index.js';
|
|
|
26
26
|
import HRichEditor from '../RichEditor/index.js';
|
|
27
27
|
import HTagSelect from '../Select/TagSelect/index.js';
|
|
28
28
|
import HTimeRangePicker from '../TDPicker/TimeRangePicker.js';
|
|
29
|
+
import HImgCropUpload from '../Upload/ImgCropUpload.js';
|
|
29
30
|
|
|
30
31
|
var placeholderConfig = {
|
|
31
32
|
inputType: ["input", "inputNumber", "selectInput", "buttonInput", "verificationCodeInput", "trimInput", "urlUpload", "textArea", "richEditor"],
|
|
@@ -58,7 +59,8 @@ var componentConfig = {
|
|
|
58
59
|
text: HText,
|
|
59
60
|
richEditor: HRichEditor,
|
|
60
61
|
tagSelect: HTagSelect,
|
|
61
|
-
timeRangePicker: HTimeRangePicker
|
|
62
|
+
timeRangePicker: HTimeRangePicker,
|
|
63
|
+
imgCropUpload: HImgCropUpload
|
|
62
64
|
};
|
|
63
65
|
|
|
64
66
|
export { componentConfig as default, placeholderConfig };
|
package/es/Input/SelectInput.js
CHANGED
|
@@ -27,7 +27,6 @@ var Index = function Index(_ref) {
|
|
|
27
27
|
addFormat = _ref.addFormat;
|
|
28
28
|
_ref.addDispatchListener;
|
|
29
29
|
var props = _objectWithoutProperties(_ref, _excluded);
|
|
30
|
-
console.log(props, "ppppppp");
|
|
31
30
|
var _valueName$input = valueName.input,
|
|
32
31
|
input = _valueName$input === void 0 ? "" : _valueName$input,
|
|
33
32
|
_valueName$select = valueName.select,
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
// welcome to hoo hoo hoo
|
|
2
|
+
import _slicedToArray from '@babel/runtime-corejs3/helpers/slicedToArray';
|
|
3
|
+
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
4
|
+
import ImgCrop from 'antd-img-crop';
|
|
5
|
+
import { Upload, message } from 'antd';
|
|
6
|
+
import Btn from './Btn.js';
|
|
7
|
+
import { useState } from 'react';
|
|
8
|
+
import { checkFileType } from './util.js';
|
|
9
|
+
import Preview from './Preview/index.js';
|
|
10
|
+
|
|
11
|
+
var HImgCropUpload = (function (_ref) {
|
|
12
|
+
var value = _ref.value,
|
|
13
|
+
onChange = _ref.onChange,
|
|
14
|
+
_ref$maxCount = _ref.maxCount,
|
|
15
|
+
maxCount = _ref$maxCount === void 0 ? 1 : _ref$maxCount,
|
|
16
|
+
_ref$exFiles = _ref.exFiles,
|
|
17
|
+
exFiles = _ref$exFiles === void 0 ? ["PNG", "JPEG", "JPG", "GIF"] : _ref$exFiles;
|
|
18
|
+
var _useState = useState({}),
|
|
19
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
20
|
+
previewModal = _useState2[0],
|
|
21
|
+
setPreviewModal = _useState2[1];
|
|
22
|
+
var change = function change(_ref2) {
|
|
23
|
+
var file = _ref2.file,
|
|
24
|
+
fileList = _ref2.fileList;
|
|
25
|
+
if (!checkFileType(file, exFiles)) {
|
|
26
|
+
return message.error(new Error("文件格式错误!"));
|
|
27
|
+
}
|
|
28
|
+
if (maxCount === 1) {
|
|
29
|
+
onChange === null || onChange === void 0 || onChange([file]);
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
onChange === null || onChange === void 0 || onChange(fileList);
|
|
33
|
+
};
|
|
34
|
+
var visible = previewModal.visible,
|
|
35
|
+
previewFile = previewModal.file;
|
|
36
|
+
var preview = function preview(file) {
|
|
37
|
+
setPreviewModal({
|
|
38
|
+
visible: true,
|
|
39
|
+
file: file
|
|
40
|
+
});
|
|
41
|
+
};
|
|
42
|
+
return jsxs(Fragment, {
|
|
43
|
+
children: [jsx(ImgCrop, {
|
|
44
|
+
rotate: true,
|
|
45
|
+
children: jsx(Upload, {
|
|
46
|
+
customRequest: function customRequest(_ref3) {
|
|
47
|
+
var onSuccess = _ref3.onSuccess;
|
|
48
|
+
onSuccess === null || onSuccess === void 0 || onSuccess({});
|
|
49
|
+
},
|
|
50
|
+
fileList: value,
|
|
51
|
+
listType: "picture-card",
|
|
52
|
+
onChange: change,
|
|
53
|
+
onPreview: preview,
|
|
54
|
+
children: jsx(Btn, {
|
|
55
|
+
value: value,
|
|
56
|
+
maxCount: maxCount,
|
|
57
|
+
listType: "picture-card"
|
|
58
|
+
})
|
|
59
|
+
})
|
|
60
|
+
}), jsx(Preview, {
|
|
61
|
+
visible: visible,
|
|
62
|
+
file: previewFile,
|
|
63
|
+
onCancel: function onCancel() {
|
|
64
|
+
setPreviewModal({});
|
|
65
|
+
}
|
|
66
|
+
})]
|
|
67
|
+
});
|
|
68
|
+
});
|
|
69
|
+
|
|
70
|
+
export { HImgCropUpload as default };
|
|
71
|
+
// powered by hdj
|
|
@@ -8,6 +8,7 @@ import { MediaTypeEnum } from '../enums.js';
|
|
|
8
8
|
var videoType = ["MP4"];
|
|
9
9
|
var audioType = ["MP3"];
|
|
10
10
|
var MediaTypeEle = (function (_ref) {
|
|
11
|
+
var _file$response;
|
|
11
12
|
var file = _ref.file,
|
|
12
13
|
onReady = _ref.onReady,
|
|
13
14
|
onError = _ref.onError;
|
|
@@ -28,7 +29,7 @@ var MediaTypeEle = (function (_ref) {
|
|
|
28
29
|
onError: onError,
|
|
29
30
|
onReady: onReady,
|
|
30
31
|
mediaType: mediaType,
|
|
31
|
-
url: file.response.url
|
|
32
|
+
url: ((_file$response = file.response) === null || _file$response === void 0 ? void 0 : _file$response.url) || file.thumbUrl
|
|
32
33
|
});
|
|
33
34
|
});
|
|
34
35
|
|
package/es/Upload/util.js
CHANGED
|
@@ -2,12 +2,10 @@
|
|
|
2
2
|
var getFileExt = function getFileExt(file) {
|
|
3
3
|
var name = file.name;
|
|
4
4
|
var index = name.lastIndexOf(".");
|
|
5
|
-
console.log(index, name, file);
|
|
6
5
|
return name.substring(index + 1).toUpperCase();
|
|
7
6
|
};
|
|
8
7
|
var checkFileType = function checkFileType(file) {
|
|
9
8
|
var exFiles = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
10
|
-
console.log(file);
|
|
11
9
|
if (!exFiles) {
|
|
12
10
|
return true;
|
|
13
11
|
}
|
package/es/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ export { default as HFormConfigProvider } from "./Form/Context/FormConfigProvide
|
|
|
7
7
|
export { default as HBasicForm } from "./Form/Basic";
|
|
8
8
|
export { default as HInputGroup } from "./InputGroup";
|
|
9
9
|
export declare const HSelect: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
10
|
+
export declare const HImgCropUpload: ({ value, onChange, maxCount, exFiles }: import("./Upload/modal").IUpLoadProps) => JSX.Element;
|
|
10
11
|
export declare const HInput: ({ copy: copyProps, value, addonAfter, ...props }: import("./Input/modal").HInputProps) => JSX.Element;
|
|
11
12
|
export declare const HRichEditor: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
12
13
|
export declare const HSelectInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
@@ -28,7 +29,7 @@ export declare const HModalForm: import("react").FC<import("./DialogForm/modal")
|
|
|
28
29
|
export declare const HDrawerForm: import("react").FC<import("./DialogForm/modal").DialogFormProps<any, any>>;
|
|
29
30
|
export declare const HCascader: ({ request, options, fieldNames: propsFieldNames, ...props }: import("./Cascader").HCascaderProps) => JSX.Element;
|
|
30
31
|
export declare const HVerificationCodeInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
31
|
-
export declare const HTreeSelect: (props:
|
|
32
|
+
export declare const HTreeSelect: (props: any) => JSX.Element;
|
|
32
33
|
export declare const HTrimInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
33
34
|
export declare const HTrimTextArea: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
34
35
|
export declare const HInputNumberGroup: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
|
package/es/index.js
CHANGED
|
@@ -12,6 +12,7 @@ import Index$1 from './DialogForm/ModalForm.js';
|
|
|
12
12
|
import Index$2 from './DialogForm/DrawerForm/index.js';
|
|
13
13
|
|
|
14
14
|
var HSelect = componentConfig.select;
|
|
15
|
+
var HImgCropUpload = componentConfig.imgCropUpload;
|
|
15
16
|
var HInput = componentConfig.input;
|
|
16
17
|
var HRichEditor = componentConfig.richEditor;
|
|
17
18
|
var HSelectInput = componentConfig.selectInput;
|
|
@@ -40,5 +41,5 @@ var HInputNumberGroup = componentConfig.inputNumberGroup.Component;
|
|
|
40
41
|
var HTagSelect = componentConfig.tagSelect;
|
|
41
42
|
var HTimeRangePicker = componentConfig.timeRangePicker.Component;
|
|
42
43
|
|
|
43
|
-
export { HButtonInput, HCascader, HCheckBox, HCheckboxGroup, HColorInput, HDatePicker, HDrawerForm, HInput, HInputNumber, HInputNumberGroup, HModalForm, HPageHandler, HRadioGroup, HRangePicker, HRichEditor, HSelect, HSelectInput, HSwitch, HTagSelect, HTextArea, HTimePicker, HTimeRangePicker, HTreeSelect, HTrimInput, HTrimTextArea, HUpload, HUrlUpload, HVerificationCodeInput };
|
|
44
|
+
export { HButtonInput, HCascader, HCheckBox, HCheckboxGroup, HColorInput, HDatePicker, HDrawerForm, HImgCropUpload, HInput, HInputNumber, HInputNumberGroup, HModalForm, HPageHandler, HRadioGroup, HRangePicker, HRichEditor, HSelect, HSelectInput, HSwitch, HTagSelect, HTextArea, HTimePicker, HTimeRangePicker, HTreeSelect, HTrimInput, HTrimTextArea, HUpload, HUrlUpload, HVerificationCodeInput };
|
|
44
45
|
// powered by hdj
|
package/lib/Form/config.d.ts
CHANGED
|
@@ -35,8 +35,8 @@ declare const componentConfig: {
|
|
|
35
35
|
Component: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
36
36
|
placeholder: ({ label }: import("./modal").HItemProps) => string[];
|
|
37
37
|
};
|
|
38
|
-
treeSelect: (
|
|
39
|
-
text: ({ value, addonBefore, addonAfter, size, ...props }: import("../Text").HFormTextProps) => JSX.Element;
|
|
38
|
+
treeSelect: (props: any) => JSX.Element;
|
|
39
|
+
text: ({ value, addonBefore, addonAfter, size, emptyNode, ...props }: import("../Text").HFormTextProps) => JSX.Element;
|
|
40
40
|
richEditor: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
41
41
|
tagSelect: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
42
42
|
timeRangePicker: {
|
|
@@ -44,5 +44,6 @@ declare const componentConfig: {
|
|
|
44
44
|
placeholder: ({ label }: import("./modal").HItemProps) => string[];
|
|
45
45
|
requiredErrMsg: ({ label }: import("./modal").HItemProps) => string;
|
|
46
46
|
};
|
|
47
|
+
imgCropUpload: ({ value, onChange, maxCount, exFiles }: import("../Upload/modal").IUpLoadProps) => JSX.Element;
|
|
47
48
|
};
|
|
48
49
|
export default componentConfig;
|
package/lib/Form/config.js
CHANGED
|
@@ -29,6 +29,7 @@ var index$e = require('../Text/index.js');
|
|
|
29
29
|
var index$f = require('../RichEditor/index.js');
|
|
30
30
|
var index$g = require('../Select/TagSelect/index.js');
|
|
31
31
|
var TimeRangePicker = require('../TDPicker/TimeRangePicker.js');
|
|
32
|
+
var ImgCropUpload = require('../Upload/ImgCropUpload.js');
|
|
32
33
|
|
|
33
34
|
var placeholderConfig = {
|
|
34
35
|
inputType: ["input", "inputNumber", "selectInput", "buttonInput", "verificationCodeInput", "trimInput", "urlUpload", "textArea", "richEditor"],
|
|
@@ -61,7 +62,8 @@ var componentConfig = {
|
|
|
61
62
|
text: index$e.default,
|
|
62
63
|
richEditor: index$f.default,
|
|
63
64
|
tagSelect: index$g.default,
|
|
64
|
-
timeRangePicker: TimeRangePicker.default
|
|
65
|
+
timeRangePicker: TimeRangePicker.default,
|
|
66
|
+
imgCropUpload: ImgCropUpload.default
|
|
65
67
|
};
|
|
66
68
|
|
|
67
69
|
exports.default = componentConfig;
|
package/lib/Input/SelectInput.js
CHANGED
|
@@ -30,7 +30,6 @@ var Index = function Index(_ref) {
|
|
|
30
30
|
addFormat = _ref.addFormat;
|
|
31
31
|
_ref.addDispatchListener;
|
|
32
32
|
var props = _objectWithoutProperties(_ref, _excluded);
|
|
33
|
-
console.log(props, "ppppppp");
|
|
34
33
|
var _valueName$input = valueName.input,
|
|
35
34
|
input = _valueName$input === void 0 ? "" : _valueName$input,
|
|
36
35
|
_valueName$select = valueName.select,
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
var ImgCrop = require('antd-img-crop');
|
|
8
|
+
var antd = require('antd');
|
|
9
|
+
var Btn = require('./Btn.js');
|
|
10
|
+
var React = require('react');
|
|
11
|
+
var util = require('./util.js');
|
|
12
|
+
var index = require('./Preview/index.js');
|
|
13
|
+
|
|
14
|
+
var HImgCropUpload = (function (_ref) {
|
|
15
|
+
var value = _ref.value,
|
|
16
|
+
onChange = _ref.onChange,
|
|
17
|
+
_ref$maxCount = _ref.maxCount,
|
|
18
|
+
maxCount = _ref$maxCount === void 0 ? 1 : _ref$maxCount,
|
|
19
|
+
_ref$exFiles = _ref.exFiles,
|
|
20
|
+
exFiles = _ref$exFiles === void 0 ? ["PNG", "JPEG", "JPG", "GIF"] : _ref$exFiles;
|
|
21
|
+
var _useState = React.useState({}),
|
|
22
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
23
|
+
previewModal = _useState2[0],
|
|
24
|
+
setPreviewModal = _useState2[1];
|
|
25
|
+
var change = function change(_ref2) {
|
|
26
|
+
var file = _ref2.file,
|
|
27
|
+
fileList = _ref2.fileList;
|
|
28
|
+
if (!util.checkFileType(file, exFiles)) {
|
|
29
|
+
return antd.message.error(new Error("文件格式错误!"));
|
|
30
|
+
}
|
|
31
|
+
if (maxCount === 1) {
|
|
32
|
+
onChange === null || onChange === void 0 || onChange([file]);
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
onChange === null || onChange === void 0 || onChange(fileList);
|
|
36
|
+
};
|
|
37
|
+
var visible = previewModal.visible,
|
|
38
|
+
previewFile = previewModal.file;
|
|
39
|
+
var preview = function preview(file) {
|
|
40
|
+
setPreviewModal({
|
|
41
|
+
visible: true,
|
|
42
|
+
file: file
|
|
43
|
+
});
|
|
44
|
+
};
|
|
45
|
+
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
46
|
+
children: [jsxRuntime.jsx(ImgCrop, {
|
|
47
|
+
rotate: true,
|
|
48
|
+
children: jsxRuntime.jsx(antd.Upload, {
|
|
49
|
+
customRequest: function customRequest(_ref3) {
|
|
50
|
+
var onSuccess = _ref3.onSuccess;
|
|
51
|
+
onSuccess === null || onSuccess === void 0 || onSuccess({});
|
|
52
|
+
},
|
|
53
|
+
fileList: value,
|
|
54
|
+
listType: "picture-card",
|
|
55
|
+
onChange: change,
|
|
56
|
+
onPreview: preview,
|
|
57
|
+
children: jsxRuntime.jsx(Btn.default, {
|
|
58
|
+
value: value,
|
|
59
|
+
maxCount: maxCount,
|
|
60
|
+
listType: "picture-card"
|
|
61
|
+
})
|
|
62
|
+
})
|
|
63
|
+
}), jsxRuntime.jsx(index.default, {
|
|
64
|
+
visible: visible,
|
|
65
|
+
file: previewFile,
|
|
66
|
+
onCancel: function onCancel() {
|
|
67
|
+
setPreviewModal({});
|
|
68
|
+
}
|
|
69
|
+
})]
|
|
70
|
+
});
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
exports.default = HImgCropUpload;
|
|
74
|
+
// powered by h
|
|
@@ -11,6 +11,7 @@ var enums = require('../enums.js');
|
|
|
11
11
|
var videoType = ["MP4"];
|
|
12
12
|
var audioType = ["MP3"];
|
|
13
13
|
var MediaTypeEle = (function (_ref) {
|
|
14
|
+
var _file$response;
|
|
14
15
|
var file = _ref.file,
|
|
15
16
|
onReady = _ref.onReady,
|
|
16
17
|
onError = _ref.onError;
|
|
@@ -31,7 +32,7 @@ var MediaTypeEle = (function (_ref) {
|
|
|
31
32
|
onError: onError,
|
|
32
33
|
onReady: onReady,
|
|
33
34
|
mediaType: mediaType,
|
|
34
|
-
url: file.response.url
|
|
35
|
+
url: ((_file$response = file.response) === null || _file$response === void 0 ? void 0 : _file$response.url) || file.thumbUrl
|
|
35
36
|
});
|
|
36
37
|
});
|
|
37
38
|
|
package/lib/Upload/util.js
CHANGED
|
@@ -3,12 +3,10 @@
|
|
|
3
3
|
var getFileExt = function getFileExt(file) {
|
|
4
4
|
var name = file.name;
|
|
5
5
|
var index = name.lastIndexOf(".");
|
|
6
|
-
console.log(index, name, file);
|
|
7
6
|
return name.substring(index + 1).toUpperCase();
|
|
8
7
|
};
|
|
9
8
|
var checkFileType = function checkFileType(file) {
|
|
10
9
|
var exFiles = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
11
|
-
console.log(file);
|
|
12
10
|
if (!exFiles) {
|
|
13
11
|
return true;
|
|
14
12
|
}
|
package/lib/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ export { default as HFormConfigProvider } from "./Form/Context/FormConfigProvide
|
|
|
7
7
|
export { default as HBasicForm } from "./Form/Basic";
|
|
8
8
|
export { default as HInputGroup } from "./InputGroup";
|
|
9
9
|
export declare const HSelect: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
10
|
+
export declare const HImgCropUpload: ({ value, onChange, maxCount, exFiles }: import("./Upload/modal").IUpLoadProps) => JSX.Element;
|
|
10
11
|
export declare const HInput: ({ copy: copyProps, value, addonAfter, ...props }: import("./Input/modal").HInputProps) => JSX.Element;
|
|
11
12
|
export declare const HRichEditor: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
12
13
|
export declare const HSelectInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
@@ -28,7 +29,7 @@ export declare const HModalForm: import("react").FC<import("./DialogForm/modal")
|
|
|
28
29
|
export declare const HDrawerForm: import("react").FC<import("./DialogForm/modal").DialogFormProps<any, any>>;
|
|
29
30
|
export declare const HCascader: ({ request, options, fieldNames: propsFieldNames, ...props }: import("./Cascader").HCascaderProps) => JSX.Element;
|
|
30
31
|
export declare const HVerificationCodeInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
31
|
-
export declare const HTreeSelect: (props:
|
|
32
|
+
export declare const HTreeSelect: (props: any) => JSX.Element;
|
|
32
33
|
export declare const HTrimInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
33
34
|
export declare const HTrimTextArea: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
34
35
|
export declare const HInputNumberGroup: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
|
package/lib/index.js
CHANGED
|
@@ -13,6 +13,7 @@ var ModalForm = require('./DialogForm/ModalForm.js');
|
|
|
13
13
|
var index$3 = require('./DialogForm/DrawerForm/index.js');
|
|
14
14
|
|
|
15
15
|
var HSelect = config.default.select;
|
|
16
|
+
var HImgCropUpload = config.default.imgCropUpload;
|
|
16
17
|
var HInput = config.default.input;
|
|
17
18
|
var HRichEditor = config.default.richEditor;
|
|
18
19
|
var HSelectInput = config.default.selectInput;
|
|
@@ -55,6 +56,7 @@ exports.HCheckboxGroup = HCheckboxGroup;
|
|
|
55
56
|
exports.HColorInput = HColorInput;
|
|
56
57
|
exports.HDatePicker = HDatePicker;
|
|
57
58
|
exports.HDrawerForm = HDrawerForm;
|
|
59
|
+
exports.HImgCropUpload = HImgCropUpload;
|
|
58
60
|
exports.HInput = HInput;
|
|
59
61
|
exports.HInputNumber = HInputNumber;
|
|
60
62
|
exports.HInputNumberGroup = HInputNumberGroup;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hw-component/form",
|
|
3
|
-
"version": "1.11.
|
|
3
|
+
"version": "1.11.1",
|
|
4
4
|
"description": "基于antd二次开发",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -37,7 +37,8 @@
|
|
|
37
37
|
"@babel/runtime-corejs3": "^7.26.0",
|
|
38
38
|
"braft-editor": "^2.3.9",
|
|
39
39
|
"copy-to-clipboard": "3.3.1",
|
|
40
|
-
"react-color": "2.19.3"
|
|
40
|
+
"react-color": "2.19.3",
|
|
41
|
+
"antd-img-crop": "^3.16.0"
|
|
41
42
|
},
|
|
42
43
|
"devDependencies": {
|
|
43
44
|
"ahooks": "2.10.9",
|
|
@@ -25,6 +25,8 @@ import HText from "../Text";
|
|
|
25
25
|
import HRichEditor from "../RichEditor";
|
|
26
26
|
import HTagSelect from "../Select/TagSelect";
|
|
27
27
|
import HTimeRangePicker from "../TDPicker/TimeRangePicker";
|
|
28
|
+
import HImgCropUpload from "../Upload/ImgCropUpload";
|
|
29
|
+
|
|
28
30
|
|
|
29
31
|
export const placeholderConfig = {
|
|
30
32
|
inputType: [
|
|
@@ -74,6 +76,7 @@ const componentConfig = {
|
|
|
74
76
|
richEditor: HRichEditor,
|
|
75
77
|
tagSelect: HTagSelect,
|
|
76
78
|
timeRangePicker: HTimeRangePicker,
|
|
79
|
+
imgCropUpload:HImgCropUpload
|
|
77
80
|
};
|
|
78
81
|
|
|
79
82
|
export default componentConfig;
|
|
@@ -183,22 +183,22 @@ export default () => {
|
|
|
183
183
|
keys.forEach((key) => {
|
|
184
184
|
newVale[key] = undefined;
|
|
185
185
|
});
|
|
186
|
-
const allValue={
|
|
186
|
+
const allValue = {
|
|
187
187
|
...newVale,
|
|
188
188
|
...initSaveValue,
|
|
189
189
|
...values,
|
|
190
|
-
}
|
|
191
|
-
const valueKeys=Object.keys(allValue);
|
|
192
|
-
const names=valueKeys.map(key => {
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
190
|
+
};
|
|
191
|
+
const valueKeys = Object.keys(allValue);
|
|
192
|
+
const names = valueKeys.map((key) => {
|
|
193
|
+
const val = allValue[key];
|
|
194
|
+
return {
|
|
195
|
+
name: key,
|
|
196
|
+
touched: false,
|
|
197
|
+
value: val,
|
|
198
|
+
errors: [],
|
|
199
|
+
};
|
|
200
200
|
});
|
|
201
|
-
form.setFields(names)
|
|
201
|
+
form.setFields(names);
|
|
202
202
|
},
|
|
203
203
|
resetFieldsValues: (values = {}) => {
|
|
204
204
|
const oldValue = form.getFieldsValue(true);
|
|
@@ -130,10 +130,10 @@ const Index: React.FC<HSelectProps> = ({
|
|
|
130
130
|
optionFilterProp={optionFilterProp}
|
|
131
131
|
filterOption={selfFilterOption}
|
|
132
132
|
showSearch={mathShowSearch}
|
|
133
|
-
onBlur={()=>{
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
133
|
+
onBlur={() => {
|
|
134
|
+
if (serviceSearch && onSearch) {
|
|
135
|
+
onSearch("");
|
|
136
|
+
}
|
|
137
137
|
}}
|
|
138
138
|
labelInValue={true}
|
|
139
139
|
onPopupScroll={propsOnPopupScroll || onPopupScroll}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import ImgCrop from 'antd-img-crop';
|
|
2
|
+
import {message, Upload} from "antd";
|
|
3
|
+
import Btn from "./Btn";
|
|
4
|
+
import React, {useState} from "react";
|
|
5
|
+
import type {IUpLoadProps} from "./modal";
|
|
6
|
+
import {checkFileType} from "./util";
|
|
7
|
+
import Preview, {type IPreviewProps} from "./Preview";
|
|
8
|
+
|
|
9
|
+
export default ({value,onChange,maxCount=1,exFiles=["PNG","JPEG","JPG","GIF"]}:IUpLoadProps)=>{
|
|
10
|
+
const [previewModal, setPreviewModal] = useState<IPreviewProps>({});
|
|
11
|
+
const change=({file,fileList})=>{
|
|
12
|
+
if (!checkFileType(file, exFiles)) {
|
|
13
|
+
return message.error(new Error("文件格式错误!"));
|
|
14
|
+
}
|
|
15
|
+
if (maxCount===1){
|
|
16
|
+
onChange?.([file]);
|
|
17
|
+
return ;
|
|
18
|
+
}
|
|
19
|
+
onChange?.(fileList);
|
|
20
|
+
}
|
|
21
|
+
const { visible, file: previewFile } = previewModal;
|
|
22
|
+
const preview = (file) => {
|
|
23
|
+
setPreviewModal({
|
|
24
|
+
visible: true,
|
|
25
|
+
file,
|
|
26
|
+
});
|
|
27
|
+
};
|
|
28
|
+
return <>
|
|
29
|
+
<ImgCrop rotate>
|
|
30
|
+
<Upload
|
|
31
|
+
customRequest={({onSuccess})=>{
|
|
32
|
+
onSuccess?.({});
|
|
33
|
+
}}
|
|
34
|
+
fileList={value}
|
|
35
|
+
listType="picture-card"
|
|
36
|
+
onChange={change}
|
|
37
|
+
onPreview={preview}
|
|
38
|
+
>
|
|
39
|
+
<Btn value={value} maxCount={maxCount} listType="picture-card"/>
|
|
40
|
+
</Upload>
|
|
41
|
+
</ImgCrop>
|
|
42
|
+
<Preview
|
|
43
|
+
visible={visible}
|
|
44
|
+
file={previewFile}
|
|
45
|
+
onCancel={() => {
|
|
46
|
+
setPreviewModal({});
|
|
47
|
+
}}
|
|
48
|
+
/>
|
|
49
|
+
</>
|
|
50
|
+
}
|
|
@@ -4,7 +4,6 @@ import type { RcFile } from "antd/lib/upload";
|
|
|
4
4
|
import { useEffect, useMemo } from "react";
|
|
5
5
|
import type { UploadFileStatus } from "antd/es/upload/interface";
|
|
6
6
|
import { message } from "antd";
|
|
7
|
-
import { useRequest } from "ahooks";
|
|
8
7
|
|
|
9
8
|
interface SubReqParamsModal {
|
|
10
9
|
request?: IUpLoadProps["request"];
|
|
@@ -3,7 +3,6 @@ import type { UploadFile } from "antd/es/upload/interface";
|
|
|
3
3
|
export const getFileExt = (file: UploadFile): string => {
|
|
4
4
|
const { name } = file;
|
|
5
5
|
const index = name.lastIndexOf(".");
|
|
6
|
-
console.log(index, name, file);
|
|
7
6
|
return name.substring(index + 1).toUpperCase();
|
|
8
7
|
};
|
|
9
8
|
|
|
@@ -11,7 +10,6 @@ export const checkFileType = (
|
|
|
11
10
|
file: UploadFile,
|
|
12
11
|
exFiles: string[] | null = []
|
|
13
12
|
) => {
|
|
14
|
-
console.log(file);
|
|
15
13
|
if (!exFiles) {
|
|
16
14
|
return true;
|
|
17
15
|
}
|
package/src/components/index.tsx
CHANGED
|
@@ -12,6 +12,8 @@ export { default as HInputGroup } from "./InputGroup";
|
|
|
12
12
|
import ModalForm from "./DialogForm/ModalForm";
|
|
13
13
|
import DrawerForm from "./DialogForm/DrawerForm";
|
|
14
14
|
export const HSelect = FormConfig.select;
|
|
15
|
+
export const HImgCropUpload = FormConfig.imgCropUpload;
|
|
16
|
+
|
|
15
17
|
export const HInput = FormConfig.input;
|
|
16
18
|
export const HRichEditor = FormConfig.richEditor;
|
|
17
19
|
|
package/src/pages/Form/index.tsx
CHANGED
|
@@ -6,9 +6,11 @@ import {
|
|
|
6
6
|
HBasicForm,
|
|
7
7
|
HRangePicker,
|
|
8
8
|
HSelectInput,
|
|
9
|
+
HUpload
|
|
9
10
|
} from "../../components";
|
|
10
11
|
import { useEffect, useState } from "react";
|
|
11
12
|
import { Button, Col, Form, Input, Row, Space } from "antd";
|
|
13
|
+
import ImgCrop from 'antd-img-crop';
|
|
12
14
|
|
|
13
15
|
const Test3 = ({ value = {}, onChange }) => {
|
|
14
16
|
const { fs, end } = value;
|
|
@@ -143,6 +145,25 @@ const TestItem1 = ({ value, onChange }) => {
|
|
|
143
145
|
);
|
|
144
146
|
};
|
|
145
147
|
|
|
148
|
+
const HeaderImg=({ value=[], onChange }) => {
|
|
149
|
+
console.log(value);
|
|
150
|
+
return (
|
|
151
|
+
<ImgCrop rotate>
|
|
152
|
+
<HUpload
|
|
153
|
+
value={value}
|
|
154
|
+
request={null}
|
|
155
|
+
onChange={(info)=>{
|
|
156
|
+
console.log(info,"info")
|
|
157
|
+
onChange(info.fileList)
|
|
158
|
+
}}
|
|
159
|
+
|
|
160
|
+
>
|
|
161
|
+
天际
|
|
162
|
+
</HUpload>
|
|
163
|
+
</ImgCrop>
|
|
164
|
+
);
|
|
165
|
+
};
|
|
166
|
+
|
|
146
167
|
export default () => {
|
|
147
168
|
const form = useHForm();
|
|
148
169
|
const [id, setId] = useState(1);
|
|
@@ -226,7 +247,9 @@ export default () => {
|
|
|
226
247
|
label: "你好啊",
|
|
227
248
|
type: "rangePicker",
|
|
228
249
|
hover: ["123123213", "22222"],
|
|
229
|
-
|
|
250
|
+
rules: [
|
|
251
|
+
{ required: true, message: "Please input your password!" },
|
|
252
|
+
],
|
|
230
253
|
itemProps: {
|
|
231
254
|
valueMap: {
|
|
232
255
|
start: "start",
|
|
@@ -237,14 +260,14 @@ export default () => {
|
|
|
237
260
|
{
|
|
238
261
|
name: "num1",
|
|
239
262
|
label: "必填",
|
|
240
|
-
|
|
263
|
+
type:"imgCropUpload",
|
|
241
264
|
dependencies: ["num"],
|
|
242
265
|
},
|
|
243
266
|
]}
|
|
244
267
|
dismissOnPressEnter={false}
|
|
245
268
|
form={form}
|
|
246
269
|
initialValues={{
|
|
247
|
-
|
|
270
|
+
|
|
248
271
|
}}
|
|
249
272
|
labelAlign={"top"}
|
|
250
273
|
onValuesChange={(val) => {
|