@6thquake/react-material
Version:
React components that implement Google's Material Design.
591 lines (511 loc) • 16.4 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 = void 0;
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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Button = _interopRequireDefault(require("../Button"));
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
var _Chip = _interopRequireDefault(require("../Chip"));
var _Paper = _interopRequireDefault(require("../Paper"));
var _Cancel = _interopRequireDefault(require("@material-ui/icons/Cancel"));
var _reactDnd = require("react-dnd");
var _reactDndHtml5Backend = _interopRequireWildcard(require("react-dnd-html5-backend"));
var _TargetBox = _interopRequireDefault(require("./TargetBox"));
var _isString = _interopRequireDefault(require("lodash/isString"));
var styles = function styles(theme) {
return {
button: {
margin: theme.spacing(1)
},
input: {
display: 'none'
},
paper: {
display: 'flex',
justifyContent: 'center',
flexWrap: 'wrap',
borderRadius: '5px'
},
chip: {
margin: theme.spacing(0.5)
},
wrap: {
width: '160px',
margin: '0 auto'
},
choose: {
display: 'inline-block'
},
array: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
},
inputImg: {
opacity: '0',
position: 'absolute',
display: 'block',
width: '140px',
height: '140px'
},
clickToUpload: {
width: '144px',
height: '110px',
margin: '4px',
border: '1px dashed #BDBDBD',
backgroundColor: '#e0e0e0',
textAlign: 'center',
borderRadius: '16px',
position: 'relative',
display: 'inline-block'
},
add: {
fontSize: '30px',
padding: '30px 0 0 0',
color: '#616161'
},
uploadText: {
fontSize: '15px',
color: '#000',
padding: '10px 0 0 0'
},
media: {
height: '130px',
width: '130px',
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%,-50%)',
overflow: 'hidden',
borderRadius: '5px',
backgroundSize: 'cover',
backgroundPosition: 'center'
},
chipDrag: {
height: '110px',
margin: theme.spacing(0.5),
padding: '0'
},
dragToUpload: {
minHeight: '300px',
minWidth: '400px',
border: '1px dashed #BDBDBD',
backgroundColor: '#F5F5F5',
textAlign: 'center',
borderRadius: '5px',
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'center',
alignItems: 'center'
},
mediaDrag: {
height: '100px',
width: '100px',
borderRadius: '10px',
backgroundSize: 'cover',
backgroundPosition: 'center'
},
icon: {
position: 'relative',
top: '-40px'
}
};
};
var Upload =
/*#__PURE__*/
function (_Component) {
(0, _inherits2.default)(Upload, _Component);
function Upload(props) {
var _this;
(0, _classCallCheck2.default)(this, Upload);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Upload).call(this, props));
_this.handleChangePath = function (e) {
for (var i = 0; i < e.target.files.length; i += 1) {
var file = e.target.files[i];
_this.pathHandler(file);
}
};
_this.handleDelete = function (e, item) {
var _this$state = _this.state,
data = _this$state.data,
files = _this$state.files;
var indexToDelete = files.indexOf(item);
if (indexToDelete !== -1) {
files.splice(indexToDelete, 1);
}
indexToDelete = data.indexOf(item);
if (indexToDelete !== -1) {
data.splice(indexToDelete, 1);
}
_this.setState({
files: files.slice(),
data: data.slice()
});
if (_this.props.onDelete) {
_this.props.onDelete(item); // delete item.preview;
}
/* type='drag',防止点击删除时弹出input框 */
if (e) {
e.preventDefault();
}
};
_this.handleFileDrop = function (item, monitor) {
if (monitor) {
for (var i = 0; i < monitor.getItem().files.length; i++) {
var file = monitor.getItem().files[i];
_this.pathHandler(file);
}
}
};
_this.handleUpload = function () {
var data = _this.state.data;
return _this.props.upload(data);
};
_this.state = {
data: [],
files: []
};
return _this;
}
(0, _createClass2.default)(Upload, [{
key: "componentDidMount",
value: function componentDidMount() {
var files = this.props.files;
if (files) {
for (var i = 0; i < files.length; i += 1) {
var file = files[i];
this.pathHandler(file);
}
}
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
var onChange = this.props.onChange;
if (prevState.data !== this.state.data) {
onChange(this.state.data);
}
}
/* 通过点击input标签添加图片 */
}, {
key: "pathHandler",
value: function pathHandler(file) {
if (!file) {
return;
}
if ((0, _isString.default)(file)) {
file = {
name: file,
url: file
};
}
var multiple = this.props.multiple;
if (this.state.files.indexOf(file) > -1) {
return;
}
if (!multiple) {
var files = this.state.files;
if (files.length > 0) {
for (var i = 0; i < files.length; i++) {
this.handleDelete(null, files[i]);
}
}
}
if (file instanceof File) {
this.setState(function (preState) {
return {
data: multiple ? [].concat((0, _toConsumableArray2.default)(preState.data), [file]) : [file]
};
});
}
if (/^image\/\S+$/.test(file.type)) {
file.preview = _react.default.createElement('img', {
src: URL.createObjectURL(file),
height: '100%',
width: '100%',
onLoad: function onLoad(e) {
URL.revokeObjectURL(e.target.src);
}
});
this.setState(function (preState) {
return {
files: multiple ? [].concat((0, _toConsumableArray2.default)(preState.files), [file]) : [file]
};
});
} else {
if (!(file instanceof File)) {
var url = file.url || file.name;
if (/blob|http(s)?:\/\//.test(url)) {
file.preview = _react.default.createElement('img', {
src: url,
height: '100%',
width: '100%'
});
}
}
this.setState(function (preState) {
return {
files: multiple ? [].concat((0, _toConsumableArray2.default)(preState.files), [file]) : [file]
};
});
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
classes = _this$props.classes,
type = _this$props.type,
multiple = _this$props.multiple,
disabled = _this$props.disabled,
label = _this$props.label;
var FILE = _reactDndHtml5Backend.NativeTypes.FILE;
var files = this.state.files;
var manual;
var basic;
var img;
var drag;
var id = "RM-UPLOAD-".concat(new Date().getTime());
if (type === 'manual') {
manual = _react.default.createElement("div", null, _react.default.createElement("div", {
className: classes.wrap
}, _react.default.createElement("input", {
accept: this.props.acceptType,
ref: function ref(input) {
return _this2.selectInput = input;
},
className: classes.input,
id: id,
onChange: this.handleChangePath,
type: "file",
multiple: multiple,
disabled: disabled
}), _react.default.createElement("label", {
htmlFor: id
}, this.props.children)), _react.default.createElement(_Paper.default, {
className: classes.paper
}, files.map(function (item) {
return _react.default.createElement(_Chip.default, {
key: item,
label: item.name,
onDelete: function onDelete(e) {
return _this2.handleDelete(e, item);
},
className: classes.chip,
disabled: disabled
});
})), _react.default.createElement("div", {
className: classes.wrap
}, _react.default.createElement(_Button.default, {
color: "primary",
variant: "contained",
className: classes.button,
onClick: this.handleUpload,
disabled: disabled
}, label)));
}
if (type === 'basic') {
basic = _react.default.createElement("div", null, _react.default.createElement("div", {
className: classes.choose
}, _react.default.createElement("input", {
accept: this.props.acceptType,
ref: function ref(input) {
return _this2.selectInput = input;
},
className: classes.input,
id: id,
onChange: this.handleChangePath,
type: "file",
multiple: multiple,
disabled: disabled
}), _react.default.createElement("label", {
htmlFor: id
}, this.props.children)), _react.default.createElement("div", {
className: classes.array
}, files.map(function (item) {
return _react.default.createElement(_Chip.default, {
key: item,
label: item.name,
onDelete: function onDelete(e) {
return _this2.handleDelete(e, item);
},
className: classes.chip,
disabled: disabled
});
})));
}
if (type === 'img') {
img = _react.default.createElement("div", null, _react.default.createElement("input", {
accept: "image/*",
id: id,
ref: function ref(input) {
return _this2.selectInput = input;
},
onChange: this.handleChangePath,
type: "file",
className: classes.inputImg,
multiple: multiple,
disabled: disabled
}), _react.default.createElement("label", {
htmlFor: id
}, _react.default.createElement("div", {
className: classes.array
}, files.map(function (item) {
var preview = _react.default.createElement("div", {
className: classes.mediaDrag // style={{ backgroundImage: 'url(' + content + ')' }}
}, item.preview || item.name);
return _react.default.createElement("div", {
className: classes.array
}, _react.default.createElement(_Chip.default, {
key: item,
label: preview,
onDelete: function onDelete(e) {
return _this2.handleDelete(e, item);
},
className: classes.chipDrag,
deleteIcon: _react.default.createElement(_Cancel.default, {
className: classes.icon
}),
disabled: disabled
}));
}), (multiple || this.state.files.length <= 0) && _react.default.createElement("div", {
className: classes.clickToUpload
}, _react.default.createElement("div", {
className: classes.add
}, "+"), _react.default.createElement("div", {
className: classes.uploadText
}, label), _react.default.createElement("div", {
className: classes.media // style={{ backgroundImage: 'url(' + this.state.previewImg + ')' }}
})))));
}
if (type === 'drag') {
drag = _react.default.createElement("div", null, _react.default.createElement(_TargetBox.default, {
accepts: [FILE],
onDrop: this.handleFileDrop,
beforeDragMention: this.props.beforeDragMention,
onDragMention: this.props.onDragMention
}, _react.default.createElement("input", {
accept: this.props.acceptType,
ref: function ref(input) {
return _this2.selectInput = input;
},
className: classes.input,
id: id,
onChange: this.handleChangePath,
type: "file",
multiple: multiple,
disabled: disabled
}), _react.default.createElement("label", {
htmlFor: id
}, _react.default.createElement("div", {
className: classes.dragToUpload
}, _react.default.createElement("div", {
className: classes.array
}, files.map(function (item) {
/* 如果是图片就预览，否则显示文件名 */
var preview = _react.default.createElement("div", {
className: classes.mediaDrag // style={{ backgroundImage: 'url(' + content + ')' }}
}, item.preview || item.name);
return _react.default.createElement(_Chip.default, {
key: item,
label: preview,
onDelete: function onDelete(e) {
return _this2.handleDelete(e, item);
},
className: classes.chipDrag,
deleteIcon: _react.default.createElement(_Cancel.default, {
className: classes.icon
}),
disabled: disabled
});
}))))));
}
switch (type) {
case 'manual':
return manual;
case 'basic':
return basic;
case 'img':
return img;
case 'drag':
return drag;
default:
return _react.default.createElement("div", null, "type is not correct");
}
}
}]);
return Upload;
}(_react.Component);
Upload.propTypes = {
/**
* 接受上传的文件类型
*/
acceptType: _propTypes.default.string,
/**
* 可选参数, 拖拽上传前的文字提示
*/
beforeDragMention: _propTypes.default.string,
/**
* 可选参数, 是否禁用
*/
disabled: _propTypes.default.bool,
/**
* 可选参数, 组件包含的所有文件
*/
files: _propTypes.default.array,
/**
* 按钮描述文字
*/
label: _propTypes.default.string,
/**
* 可选参数, 是否允许同时上传多个文件
*/
multiple: _propTypes.default.bool,
/**
* 上传文件集改变时触发的回调函数
*/
onChange: _propTypes.default.func,
/**
* 点击删除某个文件时触发的回调函数
*/
onDelete: _propTypes.default.func,
/**
* 可选参数, 拖拽文件至可拖拽区域上方时的文字提示
*/
onDragMention: _propTypes.default.string,
/**
* 上传方式, 'manual', 'basic', 'img', 'drag'可选
*/
type: _propTypes.default.oneOf(['manual', 'basic', 'img', 'drag']).isRequired,
/**
* 点击上传触发的函数
*/
upload: _propTypes.default.func
};
Upload.defaultProps = {
acceptType: '*/*',
multiple: true,
disabled: false,
beforeDragMention: '',
onDragMention: '',
files: [],
onChange: function onChange(files) {},
onDelete: function onDelete(file) {},
upload: function upload(files) {},
label: 'upload'
};
var _default = (0, _withStyles.default)(styles, {
name: 'RMUpload'
})((0, _reactDnd.DragDropContext)(_reactDndHtml5Backend.default)(Upload));
exports.default = _default;