@ecoding/components.antd 0.4.6 → 0.4.9
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.
|
@@ -34,7 +34,7 @@ const DraggableUploadListItem = ({ originNode, file }) => {
|
|
|
34
34
|
*/
|
|
35
35
|
const MultipleImgUpload = (props) => {
|
|
36
36
|
var _a, _b, _c, _d;
|
|
37
|
-
const { name, buttonText, maxCount, disabled, value, onChange } = props;
|
|
37
|
+
const { i18n, name, buttonText, maxCount, disabled, value, onChange } = props;
|
|
38
38
|
const [previewOpen, setPreviewOpen] = useState(false);
|
|
39
39
|
const [previewImage, setPreviewImage] = useState('');
|
|
40
40
|
const [imgList, setImgList] = useState((value === null || value === void 0 ? void 0 : value.map((url, index) => {
|
|
@@ -84,12 +84,14 @@ const MultipleImgUpload = (props) => {
|
|
|
84
84
|
}
|
|
85
85
|
return buildURL(props.action(), props.actionParams);
|
|
86
86
|
}, [props.actionParams, props.action]);
|
|
87
|
-
const getBase64 = (file) =>
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
87
|
+
const getBase64 = (file) => {
|
|
88
|
+
return new Promise((resolve, reject) => {
|
|
89
|
+
const reader = new FileReader();
|
|
90
|
+
reader.readAsDataURL(file);
|
|
91
|
+
reader.onload = () => resolve(reader.result);
|
|
92
|
+
reader.onerror = (error) => reject(error);
|
|
93
|
+
});
|
|
94
|
+
};
|
|
93
95
|
const handlePreview = (file) => __awaiter(void 0, void 0, void 0, function* () {
|
|
94
96
|
if (!file.url && !file.preview) {
|
|
95
97
|
file.preview = yield getBase64(file.originFileObj);
|
|
@@ -132,52 +134,44 @@ const MultipleImgUpload = (props) => {
|
|
|
132
134
|
}, []);
|
|
133
135
|
const beforeUpload = useCallback((file) => {
|
|
134
136
|
return new Promise((resolve, reject) => __awaiter(void 0, void 0, void 0, function* () {
|
|
135
|
-
const ary =
|
|
137
|
+
const ary = (props.type || "jpg,jpeg,png,webp").split(",");
|
|
136
138
|
if (props.gif) {
|
|
137
139
|
ary.push("gif");
|
|
138
140
|
}
|
|
139
141
|
if (ary.indexOf(file.type.toLowerCase().replace(/image\//g, "")) === -1) {
|
|
140
142
|
message.error(`支持图片格式为：${ary.join(",")}`);
|
|
141
|
-
|
|
142
|
-
return;
|
|
143
|
+
return Upload.LIST_IGNORE;
|
|
143
144
|
}
|
|
144
145
|
const isLt2M = file.size / 1024 / 1024 < (props.opts.size || 1);
|
|
145
146
|
if (!isLt2M) {
|
|
146
147
|
message.error(`图片大小必须小于${props.opts.size} MB`);
|
|
147
|
-
|
|
148
|
-
return;
|
|
148
|
+
return Upload.LIST_IGNORE;
|
|
149
149
|
}
|
|
150
150
|
const base64 = yield getBase64(file);
|
|
151
151
|
const wh = yield getImgwh(base64);
|
|
152
152
|
if (props.opts.w && props.opts.w !== wh.w) {
|
|
153
153
|
message.error(`图片宽度不符合 ${props.opts.w}px`);
|
|
154
|
-
|
|
155
|
-
return;
|
|
154
|
+
return Upload.LIST_IGNORE;
|
|
156
155
|
}
|
|
157
156
|
if (props.opts.h && props.opts.h !== wh.h) {
|
|
158
157
|
message.error(`图片高度不符合 ${props.opts.h}px`);
|
|
159
|
-
|
|
160
|
-
return;
|
|
158
|
+
return Upload.LIST_IGNORE;
|
|
161
159
|
}
|
|
162
160
|
if (props.opts.maxH && props.opts.maxH < wh.h) {
|
|
163
161
|
message.error(`图片高度不能大于 ${props.opts.maxH}px`);
|
|
164
|
-
|
|
165
|
-
return;
|
|
162
|
+
return Upload.LIST_IGNORE;
|
|
166
163
|
}
|
|
167
164
|
if (props.opts.minH && props.opts.minH > wh.h) {
|
|
168
165
|
message.error(`图片高度不能小于 ${props.opts.minH}px`);
|
|
169
|
-
|
|
170
|
-
return;
|
|
166
|
+
return Upload.LIST_IGNORE;
|
|
171
167
|
}
|
|
172
168
|
if (props.opts.maxW && props.opts.maxW < wh.w) {
|
|
173
169
|
message.error(`图片宽度不能大于 ${props.opts.maxW}px`);
|
|
174
|
-
|
|
175
|
-
return;
|
|
170
|
+
return Upload.LIST_IGNORE;
|
|
176
171
|
}
|
|
177
172
|
if (props.opts.minW && props.opts.minW > wh.w) {
|
|
178
173
|
message.error(`图片宽度不能小于 ${props.opts.minW}px`);
|
|
179
|
-
|
|
180
|
-
return;
|
|
174
|
+
return Upload.LIST_IGNORE;
|
|
181
175
|
}
|
|
182
176
|
if (props.opts.ratioW && props.opts.ratioH) {
|
|
183
177
|
// 保留2位小数进行比例计算
|
|
@@ -185,42 +179,47 @@ const MultipleImgUpload = (props) => {
|
|
|
185
179
|
const targetRatio = Number((props.opts.ratioW / props.opts.ratioH).toFixed(2));
|
|
186
180
|
if (ratio !== targetRatio) {
|
|
187
181
|
message.error(`图片宽度与高度比例必须是 ${props.opts.ratioW} x ${props.opts.ratioH}`);
|
|
188
|
-
|
|
189
|
-
return;
|
|
182
|
+
return Upload.LIST_IGNORE;
|
|
190
183
|
}
|
|
191
184
|
}
|
|
192
185
|
resolve();
|
|
193
186
|
}));
|
|
194
187
|
}, []);
|
|
195
188
|
return (React.createElement(React.Fragment, null,
|
|
196
|
-
props.showMessage && (React.createElement(Alert, { className: 'mb20', message: props.message ? props.message : (React.createElement(Flex, { gap: 10 },
|
|
189
|
+
props.showMessage && (React.createElement(Alert, { className: 'mb20', message: props.message ? props.message : (React.createElement(Flex, { gap: 10, wrap: true },
|
|
190
|
+
maxCount ? (React.createElement("div", null,
|
|
191
|
+
i18n ? i18n.$t("global.max.count", "最多张数") : "最多张数",
|
|
192
|
+
"\uFF1A",
|
|
193
|
+
maxCount,
|
|
194
|
+
";")) : null,
|
|
197
195
|
React.createElement("div", null,
|
|
198
|
-
|
|
196
|
+
i18n ? i18n.$t("global.size", "大小") : "大小",
|
|
199
197
|
"\uFF1A",
|
|
200
|
-
|
|
198
|
+
i18n ? i18n.$t("global.lt", "小于") : "小于",
|
|
201
199
|
" ",
|
|
202
200
|
props.opts.size || 1,
|
|
203
201
|
"MB;"),
|
|
204
202
|
props.opts.w && props.opts.h ? (React.createElement("div", null,
|
|
205
|
-
|
|
203
|
+
i18n ? `${i18n.$t("global.dimension", "尺寸")}: ${props.opts.w}px * ${props.opts.h}px` : `尺寸: ${props.opts.w}px x ${props.opts.h}px`,
|
|
206
204
|
";")) : null,
|
|
207
205
|
props.opts.ratioW && props.opts.ratioH ? (React.createElement("div", null,
|
|
208
|
-
|
|
206
|
+
i18n ? `${i18n.$t("global.ratio", "比例")}: ${props.opts.ratioW} x ${props.opts.ratioH}` : `比例: ${props.opts.ratioW} x ${props.opts.ratioH}`,
|
|
209
207
|
";")) : null,
|
|
210
208
|
React.createElement("div", null,
|
|
211
|
-
|
|
212
|
-
"\
|
|
213
|
-
props.
|
|
209
|
+
i18n ? i18n.$t("global.support", "支持") : "支持",
|
|
210
|
+
"\uFF1A",
|
|
211
|
+
props.type || "jpg,jpeg,png,webp",
|
|
212
|
+
props.gif ? ",gif" : "",
|
|
214
213
|
";"),
|
|
215
214
|
props.opts.minH || props.opts.minW || props.opts.maxH || props.opts.maxW ? (React.createElement("div", null,
|
|
216
215
|
React.createElement(Space, { split: "," },
|
|
217
|
-
!((_a = props.opts) === null || _a === void 0 ? void 0 : _a.
|
|
218
|
-
!((_b = props.opts) === null || _b === void 0 ? void 0 : _b.
|
|
219
|
-
!((_c = props.opts) === null || _c === void 0 ? void 0 : _c.
|
|
220
|
-
!((_d = props.opts) === null || _d === void 0 ? void 0 : _d.maxH) ? null : (React.createElement("span", null,
|
|
216
|
+
!((_a = props.opts) === null || _a === void 0 ? void 0 : _a.minW) ? null : (React.createElement("span", null, i18n ? `${i18n.$t("global.minW", "最小宽")}：${props.opts.minW}` : `最小宽：${props.opts.minW}`)),
|
|
217
|
+
!((_b = props.opts) === null || _b === void 0 ? void 0 : _b.maxW) ? null : (React.createElement("span", null, i18n ? `${i18n.$t("global.maxW", "最大宽")}：${props.opts.maxW}` : `最大宽：${props.opts.maxW}`)),
|
|
218
|
+
!((_c = props.opts) === null || _c === void 0 ? void 0 : _c.minH) ? null : (React.createElement("span", null, i18n ? `${i18n.$t("global.minH", "最小高")}：${props.opts.minH}` : `最小高：${props.opts.minH}`)),
|
|
219
|
+
!((_d = props.opts) === null || _d === void 0 ? void 0 : _d.maxH) ? null : (React.createElement("span", null, i18n ? `${i18n.$t("global.maxH", "最大高")}：${props.opts.maxH}` : `最大高：${props.opts.maxH}`))))) : null)), type: "warning", showIcon: true })),
|
|
221
220
|
React.createElement(DndContext, { sensors: [sensor], onDragEnd: onDragEnd },
|
|
222
221
|
React.createElement(SortableContext, { items: imgList === null || imgList === void 0 ? void 0 : imgList.map((i) => i.uid), strategy: horizontalListSortingStrategy },
|
|
223
|
-
React.createElement(Upload, { listType: "picture-card", fileList: imgList, action: action, beforeUpload: beforeUpload, onPreview: handlePreview, onChange: handleChange, onRemove: handleRemove, name: name, data: props.data, multiple: true, disabled: disabled, withCredentials: true, itemRender: (originNode, file) => (React.createElement(DraggableUploadListItem, { originNode: originNode, file: file })) }, maxCount && imgList.length >= maxCount ? null : uploadButton),
|
|
222
|
+
React.createElement(Upload, { listType: "picture-card", fileList: imgList, action: action, beforeUpload: beforeUpload, onPreview: handlePreview, onChange: handleChange, onRemove: handleRemove, name: name, data: props.data, multiple: true, disabled: disabled, withCredentials: true, itemRender: (originNode, file) => (React.createElement(DraggableUploadListItem, { originNode: originNode, file: file })) }, maxCount == 0 ? uploadButton : maxCount && imgList.length >= maxCount ? null : uploadButton),
|
|
224
223
|
previewImage && (React.createElement(Img, { wrapperStyle: { display: 'none' }, preview: {
|
|
225
224
|
visible: previewOpen,
|
|
226
225
|
onVisibleChange: (visible) => setPreviewOpen(visible),
|
|
@@ -238,6 +237,7 @@ MultipleImgUpload.defaultProps = {
|
|
|
238
237
|
actionParams: {},
|
|
239
238
|
opts: {
|
|
240
239
|
size: 1
|
|
241
|
-
}
|
|
240
|
+
},
|
|
241
|
+
type: "jpg,jpeg,png,webp"
|
|
242
242
|
};
|
|
243
243
|
export default MultipleImgUpload;
|
|
@@ -86,7 +86,7 @@ const ImgUpload = (props) => {
|
|
|
86
86
|
};
|
|
87
87
|
const beforeUpload = useCallback((file) => {
|
|
88
88
|
return new Promise((resolve, reject) => __awaiter(void 0, void 0, void 0, function* () {
|
|
89
|
-
const ary =
|
|
89
|
+
const ary = (props.type || "jpg,jpeg,png,webp").split(",");
|
|
90
90
|
if (props.gif) {
|
|
91
91
|
ary.push("gif");
|
|
92
92
|
}
|
|
@@ -183,14 +183,15 @@ const ImgUpload = (props) => {
|
|
|
183
183
|
props.opts.ratioW && props.opts.ratioH ? (React.createElement("p", null, props.i18n ? `${props.i18n.$t("global.ratio", "比例")}: ${props.opts.ratioW} x ${props.opts.ratioH}` : `比例: ${props.opts.ratioW} x ${props.opts.ratioH}`)) : null,
|
|
184
184
|
props.opts.minH || props.opts.minW || props.opts.maxH || props.opts.maxW ? (React.createElement("p", null,
|
|
185
185
|
React.createElement(Space, { split: "," },
|
|
186
|
-
!((_a = props.opts) === null || _a === void 0 ? void 0 : _a.
|
|
187
|
-
!((_b = props.opts) === null || _b === void 0 ? void 0 : _b.
|
|
188
|
-
!((_c = props.opts) === null || _c === void 0 ? void 0 : _c.
|
|
189
|
-
!((_d = props.opts) === null || _d === void 0 ? void 0 : _d.maxH) ?
|
|
186
|
+
!((_a = props.opts) === null || _a === void 0 ? void 0 : _a.minW) ? null : (React.createElement("span", null, props.i18n ? `${props.i18n.$t("global.minW", "最小宽")}：${props.opts.minW}` : `最小宽：${props.opts.minW}`)),
|
|
187
|
+
!((_b = props.opts) === null || _b === void 0 ? void 0 : _b.maxW) ? null : (React.createElement("span", null, props.i18n ? `${props.i18n.$t("global.maxW", "最大宽")}：${props.opts.maxW}` : `最大宽：${props.opts.maxW}`)),
|
|
188
|
+
!((_c = props.opts) === null || _c === void 0 ? void 0 : _c.minH) ? null : (React.createElement("span", null, props.i18n ? `${props.i18n.$t("global.minH", "最小高")}：${props.opts.minH}` : `最小高：${props.opts.minH}`)),
|
|
189
|
+
!((_d = props.opts) === null || _d === void 0 ? void 0 : _d.maxH) ? null : (React.createElement("span", null, props.i18n ? `${props.i18n.$t("global.maxH", "最大高")}：${props.opts.maxH}` : `最大高：${props.opts.maxH}`))))) : null,
|
|
190
190
|
React.createElement("p", null,
|
|
191
191
|
props.i18n ? props.i18n.$t("global.support", "支持") : "支持",
|
|
192
|
-
"\
|
|
193
|
-
props.
|
|
192
|
+
"\uFF1A",
|
|
193
|
+
props.type || "jpg,jpeg,png,webp",
|
|
194
|
+
props.gif ? ",gif" : ""))) : null));
|
|
194
195
|
};
|
|
195
196
|
ImgUpload.defaultProps = {
|
|
196
197
|
action: "/api/upload/img",
|
|
@@ -203,6 +204,7 @@ ImgUpload.defaultProps = {
|
|
|
203
204
|
actionParams: {},
|
|
204
205
|
opts: {
|
|
205
206
|
size: 1
|
|
206
|
-
}
|
|
207
|
+
},
|
|
208
|
+
type: "jpg,jpeg,png,webp"
|
|
207
209
|
};
|
|
208
210
|
export default ImgUpload;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ecoding/components.antd",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.9",
|
|
4
4
|
"author": "cxc",
|
|
5
5
|
"homepage": "",
|
|
6
6
|
"license": "MIT",
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"antd": "5.27.0",
|
|
48
48
|
"axios": "^1.1.2"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "835237e04f3c997c585c52bde578d4c2add265ee"
|
|
51
51
|
}
|