'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 _Card = require('material-ui/Card'); var _FloatingActionButton = require('material-ui/FloatingActionButton'); var _FloatingActionButton2 = _interopRequireDefault(_FloatingActionButton); var _remove = require('material-ui/svg-icons/content/remove'); var _remove2 = _interopRequireDefault(_remove); var _FlatButton = require('material-ui/FlatButton'); var _FlatButton2 = _interopRequireDefault(_FlatButton); var _jshashes = require('jshashes'); var _Upload = require('material-ui-upload/Upload'); var _Upload2 = _interopRequireDefault(_Upload); var _index = require('./index.css'); var _index2 = _interopRequireDefault(_index); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; } // *-* mode: rjsx -*- var UploadPreview = function (_Component) { _inherits(UploadPreview, _Component); function UploadPreview(props) { _classCallCheck(this, UploadPreview); var _this = _possibleConstructorReturn(this, (UploadPreview.__proto__ || Object.getPrototypeOf(UploadPreview)).call(this)); _this.exclusiveProps = ['title', 'children', 'onFileLoad', 'initialItems']; _this.onFileLoad = function (e, file) { var hash = new _jshashes.SHA1().hex(e.target.result); var items = _extends({}, _this.state.items); items[hash] = e.target.result; _this.setState({ items: items }); _this.props.onFileLoad(e, file); _this.props.onChange(items); }; _this.onRemoveAllClick = function (e) { var items = {}; _this.setState({ items: items }); _this.props.onChange(items); }; _this.onRemoveClick = function (key) { return function (e) { var items = _extends({}, _this.state.items); delete items[key]; _this.setState({ items: items }); _this.props.onChange(items); }; }; _this.renderPreview = function (key) { return _react2.default.createElement( 'div', { key: key, className: _index2.default.PreviewContainer }, _react2.default.createElement('img', { src: _this.state.items[key], className: _index2.default.Image }), _react2.default.createElement( _FloatingActionButton2.default, { className: _index2.default.RemoveItem, mini: true, onClick: _this.onRemoveClick(key) }, _react2.default.createElement(_remove2.default, null) ) ); }; _this.renderPreviews = function () { return _react2.default.createElement( 'div', { className: _index2.default.PreviewsContainer }, Object.keys(_this.state.items).map(_this.renderPreview) ); }; _this.renderAddButton = function () { return _react2.default.createElement(_Upload2.default, _extends({ onFileLoad: _this.onFileLoad, // XXX: Force re-render on items change // see: https://github.com/corpix/material-ui-upload/issues/8 key: Object.keys(_this.state.items).length }, _this.getUploadProps())); }; _this.renderRemoveButton = function () { return _react2.default.createElement(_FlatButton2.default, { label: 'Remove all', style: { visibility: Object.keys(_this.state.items).length ? 'visible' : 'hidden' }, onClick: _this.onRemoveAllClick }); }; _this.state = { items: props.initialItems }; return _this; } _createClass(UploadPreview, [{ key: 'getUploadProps', value: function getUploadProps() { var _this2 = this; return Object.keys(this.props).filter(function (name) { return _this2.exclusiveProps.indexOf(name) === -1; }).reduce(function (acc, name) { acc[name] = _this2.props[name]; return acc; }, { onFileLoad: this.onFileLoad }); } }, { key: 'render', value: function render() { return _react2.default.createElement( _Card.Card, null, _react2.default.createElement(_Card.CardHeader, { title: this.props.title }), _react2.default.createElement( _Card.CardMedia, null, this.renderPreviews() ), _react2.default.createElement( _Card.CardActions, null, _react2.default.createElement( 'div', { className: _index2.default.ActionsContainer }, this.renderAddButton(), this.renderRemoveButton() ) ) ); } }]); return UploadPreview; }(_react.Component); UploadPreview.defaultProps = { title: '', label: 'Upload', fileTypeRegex: /^image.*$/, onFileLoad: function onFileLoad(e, file) { return undefined; }, onChange: function onChange(items) { return undefined; }, initialItems: {} }; UploadPreview.propTypes = { title: _propTypes2.default.string, label: _propTypes2.default.string, fileTypeRegex: _propTypes2.default.object, onFileLoad: _propTypes2.default.func, onChange: _propTypes2.default.func, initialItems: _propTypes2.default.object }; exports.default = UploadPreview;