@lahzenegar/react-drop-n-crop
Version:
A combined implementation of react-dropzone and react-cropper (translated to farsi)
249 lines (208 loc) • 10.1 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _reactCropper = require('react-cropper');
var _reactCropper2 = _interopRequireDefault(_reactCropper);
var _reactDropzone = require('react-dropzone');
var _reactDropzone2 = _interopRequireDefault(_reactDropzone);
var _bytesToSize = require('./util/bytesToSize');
var _bytesToSize2 = _interopRequireDefault(_bytesToSize);
var _fileSizeLessThan = require('./util/fileSizeLessThan');
var _fileSizeLessThan2 = _interopRequireDefault(_fileSizeLessThan);
var _fileType = require('./util/fileType');
var _fileType2 = _interopRequireDefault(_fileType);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var DropNCrop = function (_Component) {
_inherits(DropNCrop, _Component);
function DropNCrop() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, DropNCrop);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DropNCrop.__proto__ || Object.getPrototypeOf(DropNCrop)).call.apply(_ref, [this].concat(args))), _this), _this.onCrop = function () {
var _this$props = _this.props,
value = _this$props.value,
onChange = _this$props.onChange;
if (typeof _this.cropperRef.getCroppedCanvas() !== 'undefined') {
onChange(_extends({}, value, {
result: _this.cropperRef.getCroppedCanvas().toDataURL(value.filetype)
}));
}
}, _this.onDrop = function (files) {
var _this$props2 = _this.props,
onChange = _this$props2.onChange,
maxFileSize = _this$props2.maxFileSize,
allowedFileTypes = _this$props2.allowedFileTypes;
var fileSizeValidation = (0, _fileSizeLessThan2.default)(maxFileSize)(files);
var fileTypeValidation = (0, _fileType2.default)(allowedFileTypes)(files);
if (fileSizeValidation.isValid && fileTypeValidation.isValid) {
var reader = new FileReader();
reader.onload = function () {
onChange({
src: reader.result,
filename: files[0].name,
filetype: files[0].type,
result: reader.result,
error: null
});
};
reader.readAsDataURL(files[0]);
} else {
onChange({
error: !fileTypeValidation.isValid ? fileTypeValidation.message : !fileSizeValidation.isValid ? fileSizeValidation.message : null });
}
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(DropNCrop, [{
key: 'render',
value: function render() {
var _this2 = this;
var _props = this.props,
canvasHeight = _props.canvasHeight,
canvasWidth = _props.canvasWidth,
className = _props.className,
cropperOptions = _props.cropperOptions,
instructions = _props.instructions,
allowedFileTypes = _props.allowedFileTypes,
maxFileSize = _props.maxFileSize,
value = _props.value;
var dropNCropClasses = _defineProperty({
'drop-n-crop': true
}, '' + className, className);
return _react2.default.createElement(
'div',
{ className: (0, _classnames2.default)(dropNCropClasses) },
value && value.src ? _react2.default.createElement(_reactCropper2.default, _extends({
ref: function ref(input) {
_this2.cropperRef = input;
},
src: value && value.src,
style: {
height: canvasHeight,
width: canvasWidth
},
cropend: this.onCrop }, cropperOptions)) : _react2.default.createElement(
_reactDropzone2.default,
{
className: 'dropzone',
activeClassName: 'dropzone--active',
onDrop: this.onDrop,
style: {
height: canvasHeight,
width: canvasWidth
}
},
_react2.default.createElement(
'div',
{ key: 'dropzone-instructions' },
!instructions ? _react2.default.createElement(
'div',
{ className: 'dropzone-instructions' },
_react2.default.createElement(
'div',
{ className: 'dropzone-instructions--main' },
_react2.default.createElement(
'svg',
{ width: '16px', height: '16px', viewBox: '0 0 24 24' },
_react2.default.createElement('path', {
fill: '#757575',
d: 'M18.5,10.5h-5v-5C13.5,4.7,12.8,4,12,4s-1.5,0.7-1.5,1.5v5h-5C4.7,10.5,4,11.2,4,12s0.7,1.5,1.5,1.5h5v5c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5v-5h5c0.8,0,1.5-0.7,1.5-1.5S19.3,10.5,18.5,10.5z'
})
),
_react2.default.createElement(
'div',
null,
'\u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0635\u0648\u06CC\u0631'
)
),
_react2.default.createElement(
'div',
{ className: 'dropzone-instructions--sub' },
_react2.default.createElement(
'div',
null,
'\u0645\u06CC\u200C\u062A\u0648\u0627\u0646\u06CC\u062F \u062A\u0635\u0648\u06CC\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u0648 \u062F\u0627\u062E\u0644 \u0627\u06CC\u0646 \u06A9\u0627\u062F\u0631 \u0631\u0647\u0627 \u06A9\u0646\u06CC\u062F.'
),
_react2.default.createElement(
'div',
null,
'\u0646\u0648\u0639 \u0641\u0627\u06CC\u0644 \u0642\u0627\u0628\u0644 \u0622\u067E\u0644\u0648\u062F',
_react2.default.createElement(
'span',
null,
allowedFileTypes.map(function (mimeType) {
return '.' + mimeType.split('/')[1];
}).join(', ')
)
),
_react2.default.createElement(
'div',
null,
'\u062D\u062C\u0645 \u0645\u062C\u0627\u0632 \u0641\u0627\u06CC\u0644 ',
_react2.default.createElement(
'span',
null,
(0, _bytesToSize2.default)(maxFileSize)
)
)
),
value && value.error ? _react2.default.createElement(
'div',
{
key: 'dropzone-validation',
className: 'dropzone-validation'
},
value && value.error
) : null
) : instructions
)
)
);
}
}]);
return DropNCrop;
}(_react.Component);
DropNCrop.propTypes = {
allowedFileTypes: _propTypes2.default.array,
canvasHeight: _propTypes2.default.string,
canvasWidth: _propTypes2.default.string,
className: _propTypes2.default.string,
cropperOptions: _propTypes2.default.object,
instructions: _propTypes2.default.node,
maxFileSize: _propTypes2.default.number,
onChange: _propTypes2.default.func,
value: _propTypes2.default.shape({
result: _propTypes2.default.string,
filename: _propTypes2.default.string,
filetype: _propTypes2.default.string,
src: _propTypes2.default.string,
error: _propTypes2.default.string
})
};
DropNCrop.defaultProps = {
allowedFileTypes: ['image/jpeg', 'image/jpg', 'image/png'],
canvasHeight: '360px',
canvasWidth: '100%',
cropperOptions: {
guides: true,
viewMode: 0,
autoCropArea: 1
},
maxFileSize: 3145728
};
exports.default = DropNCrop;