@bootstrap-styled/ra-ui
Version:
UI components for react-admin
247 lines (199 loc) • 8.77 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.FileInput = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _recompose = require("recompose");
var _reactDropzone = _interopRequireDefault(require("react-dropzone"));
var _compose = _interopRequireDefault(require("recompose/compose"));
var _FormHelperText = _interopRequireDefault(require("@material-ui/core/FormHelperText"));
var _raCore = require("ra-core");
var _Labeled = _interopRequireDefault(require("./Labeled"));
var _FileInputPreview = _interopRequireDefault(require("./FileInputPreview"));
var _sanitizeRestProps = _interopRequireDefault(require("./sanitizeRestProps"));
var FileInput = function (_Component) {
(0, _inherits2.default)(FileInput, _Component);
function FileInput(props) {
var _this;
(0, _classCallCheck2.default)(this, FileInput);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(FileInput).call(this, props));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDrop", function (files) {
var updatedFiles = _this.props.multiple ? [].concat((0, _toConsumableArray2.default)(_this.state.files), (0, _toConsumableArray2.default)(files.map(_this.transformFile))) : (0, _toConsumableArray2.default)(files.map(_this.transformFile));
_this.setState({
files: updatedFiles
});
if (_this.props.multiple) {
_this.props.input.onBlur(updatedFiles);
} else {
_this.props.input.onBlur(updatedFiles[0]);
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRemove", function (file) {
return function () {
var filteredFiles = _this.state.files.filter(function (stateFile) {
return !(0, _recompose.shallowEqual)(stateFile, file);
});
_this.setState({
files: filteredFiles
});
if (_this.props.multiple) {
_this.props.input.onBlur(filteredFiles);
} else {
_this.props.input.onBlur(null);
}
};
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "transformFile", function (file) {
if (!(file instanceof File)) {
return file;
}
var _Children$only$props = _react.Children.only(_this.props.children).props,
source = _Children$only$props.source,
title = _Children$only$props.title;
var transformedFile = (0, _defineProperty2.default)({
rawFile: file
}, source, file.preview);
if (title) {
transformedFile[title] = file.name;
}
return transformedFile;
});
var _files = props.input.value || [];
if (!Array.isArray(_files)) {
_files = [_files];
}
_this.state = {
files: _files.map(_this.transformFile)
};
return _this;
}
(0, _createClass2.default)(FileInput, [{
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
var files = nextProps.input.value || [];
if (!Array.isArray(files)) {
files = [files];
}
this.setState({
files: files.map(this.transformFile)
});
}
}, {
key: "label",
value: function label() {
var _this$props = this.props,
translate = _this$props.translate,
placeholder = _this$props.placeholder,
labelMultiple = _this$props.labelMultiple,
labelSingle = _this$props.labelSingle;
if (placeholder) {
return placeholder;
}
if (this.props.multiple) {
return _react.default.createElement("p", null, translate(labelMultiple));
}
return _react.default.createElement("p", null, translate(labelSingle));
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props2 = this.props,
accept = _this$props2.accept,
children = _this$props2.children,
className = _this$props2.className,
disableClick = _this$props2.disableClick,
id = _this$props2.id,
isRequired = _this$props2.isRequired,
label = _this$props2.label,
maxSize = _this$props2.maxSize,
meta = _this$props2.meta,
minSize = _this$props2.minSize,
multiple = _this$props2.multiple,
resource = _this$props2.resource,
source = _this$props2.source,
translate = _this$props2.translate,
_this$props2$options = _this$props2.options,
options = _this$props2$options === void 0 ? {} : _this$props2$options,
rest = (0, _objectWithoutProperties2.default)(_this$props2, ["accept", "children", "className", "disableClick", "id", "isRequired", "label", "maxSize", "meta", "minSize", "multiple", "resource", "source", "translate", "options"]);
return _react.default.createElement(_Labeled.default, (0, _extends2.default)({
id: id,
label: label,
className: className,
source: source,
resource: resource,
isRequired: isRequired,
meta: meta
}, (0, _sanitizeRestProps.default)(rest)), _react.default.createElement("span", null, _react.default.createElement(_reactDropzone.default, (0, _extends2.default)({
onDrop: this.onDrop,
accept: accept,
disableClick: disableClick,
maxSize: maxSize,
minSize: minSize,
multiple: multiple
}, options, {
inputProps: (0, _objectSpread2.default)({
id: id
}, options.inputProps)
}), this.label()), children && _react.default.createElement("div", {
className: "previews"
}, this.state.files.map(function (file, index) {
return _react.default.createElement(_FileInputPreview.default, {
key: index,
file: file,
onRemove: _this2.onRemove(file)
}, (0, _react.cloneElement)(_react.Children.only(children), {
record: file
}));
})), meta && meta.touched && meta.error && _react.default.createElement(_FormHelperText.default, null, translate(meta.error))));
}
}]);
return FileInput;
}(_react.Component);
exports.FileInput = FileInput;
(0, _defineProperty2.default)(FileInput, "propTypes", {
accept: _propTypes.default.string,
children: _propTypes.default.element,
className: _propTypes.default.string,
disableClick: _propTypes.default.bool,
id: _propTypes.default.string,
input: _propTypes.default.object,
isRequired: _propTypes.default.bool,
label: _propTypes.default.string,
labelMultiple: _propTypes.default.string,
labelSingle: _propTypes.default.string,
maxSize: _propTypes.default.number,
minSize: _propTypes.default.number,
multiple: _propTypes.default.bool,
options: _propTypes.default.object,
resource: _propTypes.default.string,
source: _propTypes.default.string,
translate: _propTypes.default.func.isRequired,
placeholder: _propTypes.default.node
});
(0, _defineProperty2.default)(FileInput, "defaultProps", {
labelMultiple: 'ra.input.file.upload_several',
labelSingle: 'ra.input.file.upload_single',
multiple: false,
onUpload: function onUpload() {},
translate: function translate(id) {
return id;
}
});
var _default = (0, _compose.default)(_raCore.addField, _raCore.translate)(FileInput);
exports.default = _default;