appxigon-react
Version:
Appxigon implementation on React JS
254 lines (226 loc) • 10.4 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 _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);
var _utils = require('../lib/utils');
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; } // Handles multiple checkboxes
var kvReplaceToken = ['{', '}'];
var SelectCheckbox = function (_React$Component) {
_inherits(SelectCheckbox, _React$Component);
function SelectCheckbox(props) {
_classCallCheck(this, SelectCheckbox);
var _this = _possibleConstructorReturn(this, (SelectCheckbox.__proto__ || Object.getPrototypeOf(SelectCheckbox)).call(this, props));
_this.state = {
id: _this.props.id,
schema: _this.props.schema,
classes: (0, _lodash.get)(_this, 'props.AXGClasses.select-checkbox', 'form-group'),
value: '',
values: {},
checked: false,
data: (0, _lodash.get)(_this, 'props.schema.data.fallback', [{ value: 'loading', text: 'Loading ...' }]),
updates: (0, _lodash.get)(_this.props.schema, 'updates', '')
};
return _this;
}
_createClass(SelectCheckbox, [{
key: 'handleCheckboxClick',
value: function handleCheckboxClick(e) {
var component = this;
// var value = e.target.value
// toggle
var checked = e.target.checked;
var id = e.target.id;
// console.log(`checked / value: ${checked} / ${value}`)
var values = this.state.values;
values[id] = checked;
// console.log(`values: ${JSON.stringify(values)}`)
this.setState(values);
// console.log(`Redux Update: ${this.props.AXGKey}`);
console.info('Redux Update: ' + id);
this.props.actions.setAppxigonState({
key: id,
value: checked
});
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, used to change a redux value to trigger update
value: JSON.stringify(component.state.id + '.' + id + '.' + checked)
});
}
}
}, {
key: 'componentWillMount',
value: function componentWillMount() {
this.refreshData();
}
// TODO: extract refreshData with other components such as Select
}, {
key: 'refreshData',
value: function refreshData() {
// TODO: handle data direct source URL from component
var component = this;
var schema = this.state.schema;
var dataSourceDef = (0, _lodash.get)(schema, 'data.source'); // e.g. 'ref.users' => 'data.ref.users'
// console.log(dataSourceDef);
var refDataSource = (0, _lodash.get)(this.props.AXGDataSource, dataSourceDef + '.source', null);
var refDataTransform = (0, _lodash.get)(this.props.AXGDataSource, dataSourceDef + '.transform', null);
var refDataFallback = (0, _lodash.get)(this.props.AXGDataSource, dataSourceDef + '.fallback', null);
// console.log(refDataSource);
// console.log(refDataTransform);
if (refDataSource) {
var data = [];
// var dataTransform = refDataDef.transform
// REVIEW: more generic way to handle GET variables transform
var endpoint = refDataSource.endpoint;
var endpointTransform = (0, _lodash.get)(refDataSource, 'transform');
if (endpointTransform) {
var keyMap = endpointTransform;
var keyMapTransformed = (0, _lodash.mapValues)(keyMap, function (val) {
return (0, _lodash.get)(component.props, ['input', '' + val]);
});
console.log('keyMap: ' + JSON.stringify(keyMap));
console.log('keyMapTransformed: ' + JSON.stringify(keyMapTransformed));
endpoint = (0, _utils.kvReplace)(endpoint, keyMapTransformed, kvReplaceToken);
}
console.info('AJAX endpoint: ' + JSON.stringify(endpoint));
$.ajax({
url: endpoint,
method: 'GET'
}).then(function (rawData) {
// console.log(`rawData: ${JSON.stringify(rawData)}`)
if (refDataTransform) {
var keyMap = refDataTransform;
data = (0, _lodash.map)(rawData, function (item, key) {
return (0, _lodash.mapValues)(keyMap, function (val) {
return (0, _lodash.keys)(item).includes(val) ? item[val] : (0, _utils.kvReplace)(val, item, kvReplaceToken);
});
});
// console.log(`transformed data: ${JSON.stringify(data)}`)
} else {
data = rawData;
}
component.setState({
data: data
});
});
// TODO: handle ajax call failure
// this.setState({
// data : [ { value: 'error', text: 'Unable to load data ...' } ],
// })
} else {
// handle direct source link from within item
if (refDataFallback) {
component.setState({
data: refDataFallback
});
}
}
// Set current or default value
var storeKey = component.props.AXGKey; // default storeKey
var localStoreKey = (0, _lodash.get)(component.state.schema, 'store-key', null);
if (localStoreKey) {
var l = storeKey.split('.');
l.pop(); // remove last element from array
l.push(localStoreKey);
storeKey = l.join('.');
}
var currentValue = (0, _lodash.get)(component.props.appxigonState, storeKey, '');
console.log('currentValue: ' + currentValue);
component.setState({
value: currentValue
});
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
var component = this;
// REVIEW: is this a proper way ? Will this trigger unnecessary update?
var dependencyKey = 'dependency.' + this.props.AXGKey;
var nextDepencyValue = (0, _lodash.get)(nextProps.appxigonState, dependencyKey, '');
if (this.state.dependency != nextDepencyValue) {
console.info('select: (' + component.state.id + ') dependency changed: refreshData');
this.refreshData();
}
this.setState({
dependency: nextDepencyValue
});
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var schema = this.state.schema;
var id = 'select-' + this.state.id;
var title = (0, _lodash.get)(schema, 'title', (0, _lodash.startCase)(this.state.id));
var icon = (0, _lodash.get)(schema, 'icon', null);
// TODO: option of inline (wrap each with 'checkbox' class)
// or new line checkboxes (as it is now)
return _react2.default.createElement(
'div',
{ className: '' + this.state.classes + (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(
'div',
{ className: 'checkbox' },
this.state.data.map(function (i) {
var checkboxID = _this2.props.AXGKey + '.' + i.value;
return _react2.default.createElement(
'label',
{ key: i.value },
_react2.default.createElement('input', {
type: 'checkbox',
id: checkboxID,
name: checkboxID,
value: i.value,
checked: _this2.state[checkboxID],
onClick: _this2.handleCheckboxClick.bind(_this2) }),
'\xA0',
i.text,
'\xA0'
);
})
)
)
);
}
}]);
return SelectCheckbox;
}(_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)(SelectCheckbox);