@ant-design/pro-form
Version:
67 lines (66 loc) • 3.39 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["fieldProps", "action", "accept", "listType", "title", "max", "icon", "buttonProps", "disabled", "proFieldProps"];
import { UploadOutlined } from '@ant-design/icons';
import { Button, Upload } from 'antd';
import React, { useContext, useMemo } from 'react';
import { EditOrReadOnlyContext } from "../../BaseForm/EditOrReadOnlyContext";
import { createField } from "../../BaseForm/createField";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
/**
* 上传按钮组件
*
* @param
*/
var BaseProFormUploadButton = function BaseProFormUploadButton(_ref, ref) {
var _fieldProps$name;
var fieldProps = _ref.fieldProps,
action = _ref.action,
accept = _ref.accept,
listType = _ref.listType,
_ref$title = _ref.title,
title = _ref$title === void 0 ? '单击上传' : _ref$title,
max = _ref.max,
_ref$icon = _ref.icon,
icon = _ref$icon === void 0 ? /*#__PURE__*/_jsx(UploadOutlined, {}) : _ref$icon,
buttonProps = _ref.buttonProps,
disabled = _ref.disabled,
proFieldProps = _ref.proFieldProps,
restProps = _objectWithoutProperties(_ref, _excluded);
var value = useMemo(function () {
var _restProps$fileList;
return (_restProps$fileList = restProps.fileList) !== null && _restProps$fileList !== void 0 ? _restProps$fileList : restProps.value;
}, [restProps.fileList, restProps.value]);
var modeContext = useContext(EditOrReadOnlyContext);
var mode = (proFieldProps === null || proFieldProps === void 0 ? void 0 : proFieldProps.mode) || modeContext.mode || 'edit';
// 如果配置了 max ，并且 超过了文件列表的大小，就不展示按钮
var showUploadButton = (max === undefined || !value || (value === null || value === void 0 ? void 0 : value.length) < max) && mode !== 'read';
var isPictureCard = (listType !== null && listType !== void 0 ? listType : fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.listType) === 'picture-card';
return /*#__PURE__*/_jsx(Upload, _objectSpread(_objectSpread({
action: action,
accept: accept,
ref: ref,
listType: listType || 'picture',
fileList: value
}, fieldProps), {}, {
name: (_fieldProps$name = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.name) !== null && _fieldProps$name !== void 0 ? _fieldProps$name : 'file',
onChange: function onChange(info) {
var _fieldProps$onChange;
fieldProps === null || fieldProps === void 0 || (_fieldProps$onChange = fieldProps.onChange) === null || _fieldProps$onChange === void 0 || _fieldProps$onChange.call(fieldProps, info);
},
children: showUploadButton && (isPictureCard ? /*#__PURE__*/_jsxs("span", {
children: [icon, " ", title]
}) : /*#__PURE__*/_jsxs(Button, _objectSpread(_objectSpread({
disabled: disabled || (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.disabled)
}, buttonProps), {}, {
children: [icon, title]
})))
}));
};
var ProFormUploadButton = createField( /*#__PURE__*/React.forwardRef(BaseProFormUploadButton), {
getValueFromEvent: function getValueFromEvent(value) {
return value.fileList;
}
});
export default ProFormUploadButton;