appxigon-react
Version:
Appxigon implementation on React JS
212 lines (187 loc) • 8.24 kB
JavaScript
;
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 _lodash = require('lodash');
var _reactDropzone = require('react-dropzone');
var _reactDropzone2 = _interopRequireDefault(_reactDropzone);
var _superagent = require('superagent');
var _superagent2 = _interopRequireDefault(_superagent);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _redux = require('redux');
var _reactRedux = require('react-redux');
var _actions = require('../redux/actions');
var Actions = _interopRequireWildcard(_actions);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
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; }
// var CircularJSON = require('circular-json')
// TODO: don't accept any file if 'accepts' is not explicitly set ...
var InputDropzone = function (_React$Component) {
_inherits(InputDropzone, _React$Component);
function InputDropzone(props) {
_classCallCheck(this, InputDropzone);
var _this = _possibleConstructorReturn(this, (InputDropzone.__proto__ || Object.getPrototypeOf(InputDropzone)).call(this, props));
_this.state = {
id: _this.props.id,
value: '',
schema: _this.props.schema,
classes: (0, _lodash.get)(_this.props, 'AXGClasses.input', 'form-group'),
endpoint: (0, _lodash.get)(_this.props.schema, 'endpoint', ''),
fileNames: [],
// floatingLabel : get(this.props, 'AXGOptions.floating-label', true),
updates: (0, _lodash.get)(_this.props.schema, 'updates', ''),
accepts: (0, _lodash.get)(_this.props.schema, 'accepts', '')
};
return _this;
}
_createClass(InputDropzone, [{
key: 'handleInputChange',
value: function handleInputChange(e) {
// var file = this.refs.fileInput.getDOMNode().files[0]
// console.log(`file: ${file}`)
// console.log(`refs: ${CircularJSON.stringify(this.refs.fileInput)}`)
var value = e.target.value;
console.log('value: ' + value);
this.setState({
value: value,
title: value
});
this.props.actions.setAppxigonState({
key: [this.props.AXGKey],
value: value
});
}
}, {
key: 'onDrop',
value: function onDrop(files) {
var component = this;
var fileNames = [];
console.log('Received files: ' + JSON.stringify(files));
console.log('Target endpoint: ' + this.state.endpoint);
if (this.state.endpoint) {
var req = _superagent2.default.post(this.state.endpoint);
files.forEach(function (f) {
fileNames.push(f.name);
req.attach(f.name, f);
});
req.end(function () {
fileNames.forEach(function (n) {
console.log('Upload completed: ' + n + '.');
});
component.setState({
fileNames: fileNames
});
if (component.state.updates) {
console.log('Update dependency for: ' + component.state.updates);
component.props.actions.setAppxigonState({
key: 'dependency.' + component.state.updates,
// make it a string. value not important, just for redux value change detection
value: JSON.stringify(fileNames)
});
}
});
}
}
}, {
key: 'onOpenClick',
value: function onOpenClick() {
this.refs.dropzone.open();
}
}, {
key: 'componentWillMount',
value: function componentWillMount() {
var component = this;
var currentValue = (0, _lodash.get)(component.props.appxigonState, component.props.AXGKey, '');
console.log('input currentValue (' + component.props.AXGKey + '): ' + currentValue);
component.setState({
value: currentValue
});
}
}, {
key: 'render',
value: function render() {
// console.log(`input-text schema (${this.state.id}): ${JSON.stringify(this.state.schema)}`)
var schema = this.state.schema;
var title = (0, _lodash.get)(schema, 'title', (0, _lodash.startCase)(this.state.id));
var icon = (0, _lodash.get)(schema, 'icon', null);
var helpMessage = (0, _lodash.get)(schema, 'help-message', '');
var id = 'input-' + this.state.id;
return _react2.default.createElement(
'div',
{
className: this.state.classes + (this.state.floatingLabel ? ' label-floating' : '') + (this.props.show ? '' : ' hidden') },
_react2.default.createElement(
'div',
{ className: 'input-group' },
_react2.default.createElement(
'span',
{ 'class': 'input-group-addon' },
_react2.default.createElement(
'i',
{ className: 'material-icons' },
icon
)
),
_react2.default.createElement(
'label',
{ htmlFor: id },
title
),
_react2.default.createElement(
_reactDropzone2.default,
{ ref: 'dropzone',
onDrop: this.onDrop.bind(this),
accept: this.state.accepts },
_react2.default.createElement(
'div',
{ style: { padding: 20 } },
'Drop Pricing Source XLSX file here, or click to select files to upload ...',
_react2.default.createElement('hr', null),
_react2.default.createElement(
'div',
null,
_react2.default.createElement(
'b',
null,
'Upload completed:'
),
this.state.fileNames.map(function (n) {
return _react2.default.createElement(
'div',
{ key: n },
_react2.default.createElement(
'b',
null,
' ',
n,
' '
)
);
})
)
)
),
helpMessage ? _react2.default.createElement(
'p',
{ className: 'help-block' },
helpMessage
) : null
)
);
}
}]);
return InputDropzone;
}(_react2.default.Component);
function mapStateToProps(state) {
return {
appxigonState: state.AXGState
};
}
function mapDispatchToProps(dispatch) {
return {
actions: (0, _redux.bindActionCreators)(Actions, dispatch)
};
}
module.exports = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(InputDropzone);