appxigon-react/lib/item-types/select-radio.js

Appxigon implementation on React JS

'use strict';

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);

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 SelectRadio = function (_React$Component) {
  _inherits(SelectRadio, _React$Component);

  function SelectRadio(props) {
    _classCallCheck(this, SelectRadio);

    var _this = _possibleConstructorReturn(this, (SelectRadio.__proto__ || Object.getPrototypeOf(SelectRadio)).call(this, props));

    _this.state = {
      id: _this.props.id,
      schema: _this.props.schema,
      classes: (0, _lodash.get)(_this, 'props.AXGClasses.select', 'form-group'),
      // value   : '',
      value: (0, _lodash.get)(_this.props, 'schema.data.default') || '',
      data: (0, _lodash.get)(_this, 'props.schema.data.fallback', [{ value: 'loading', text: 'Loading ...' }]),
      updates: (0, _lodash.get)(_this.props.schema, 'updates', '')
    };
    return _this;
  }

  _createClass(SelectRadio, [{
    key: 'handleRadioClick',
    value: function handleRadioClick(e) {
      var component = this;
      var value = e.target.value;
      // var index = e.nativeEvent.target.selectedIndex
      // var text = e.nativeEvent.target[index].text
      var text = e.nativeEvent.target.text;
      // var text = e.target.text
      console.log('handleRadioClick value / text: ' + value + ' / ' + text);
      this.setState({
        value: value
      });
      console.info('Redux Update: ' + this.props.AXGKey);
      this.props.actions.setAppxigonState({
        key: [this.props.AXGKey],
        value: value
      });
      // REVIEW: how to get text ?
      // get from transformed data obj?
      // this.props.actions.setAppxigonState({
      //   key   : `${this.props.AXGKey}.text`,
      //   value : text,
      // })

      var updates = component.state.updates;
      if (updates) {
        if ((0, _lodash.isString)(updates)) {
          updates = [updates];
        }
        console.log('Update dependency for: ' + JSON.stringify(updates));
        updates.forEach(function (u) {
          component.props.actions.setAppxigonState({
            key: 'dependency.' + u,
            // make it a string. value not important, just for redux value change detection
            value: JSON.stringify(value)
          });
        });
      }
    }
  }, {
    key: 'componentWillMount',
    value: function componentWillMount() {
      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
        $.ajax({
          url: refDataSource,
          method: 'GET'
        }).then(function (rawData) {
          // console.log(rawData)
          if (refDataTransform) {
            var keyMap = refDataTransform;
            data = (0, _lodash.map)(rawData, function (item, key) {
              return (0, _lodash.mapValues)(keyMap, function (val) {
                return item[val];
              });
            });
          } else {
            data = rawData;
          }
          component.setState({
            data: data
          });
        });
        // TODO: handle ajax call failure
        // this.setState({
        //   data  : [ { value: 'error', text: 'Unable to load data ...' } ],
        // })
      } else {
        if (refDataFallback) {
          component.setState({
            data: refDataFallback
          });
        }
      }
      var storeKey = this.props.AXGKey; // Default storeKey
      // Set current or default value
      var currentValue = (0, _lodash.get)(component.props.appxigonState, component.props.AXGKey, '') || component.state.value;
      console.log('AXGKey / currentValue: ' + component.props.AXGKey + ' / ' + currentValue);
      component.setState({
        value: currentValue
      });
      component.props.actions.setAppxigonState({
        key: storeKey,
        value: currentValue
      });
    }
  }, {
    key: 'refreshData',
    value: function refreshData() {
      // TODO ...
    }
  }, {
    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);

      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
          ),
          this.state.data.map(function (i) {
            return _react2.default.createElement(
              'label',
              { key: i.value, className: 'radio-inline' },
              _react2.default.createElement('input', {
                type: 'radio',
                name: _this2.props.AXGKey + '-' + id,
                value: i.value,
                checked:
                // Non-strict comparison here
                // for value could be number or text
                _this2.state.value == i.value,
                onClick: _this2.handleRadioClick.bind(_this2) }),
              i.text
            );
          })
        )
      );
    }
  }]);

  return SelectRadio;
}(_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)(SelectRadio);