appxigon-react/lib/appxigon.js

Appxigon implementation on React JS

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

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 _Modal = require('react-bootstrap/lib/Modal');

var _Modal2 = _interopRequireDefault(_Modal);

var _reactEventListener = require('react-event-listener');

var _reactEventListener2 = _interopRequireDefault(_reactEventListener);

var _actions = require('./redux/actions');

var Actions = _interopRequireWildcard(_actions);

var _view = require('./view.js');

var _view2 = _interopRequireDefault(_view);

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; } // Base component of Appxigon React implementation


// make _t an i18n a global helper
window._t = _utils._t;

var Appxigon = function (_React$Component) {
  _inherits(Appxigon, _React$Component);

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

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

    _this.viewHistory = [];

    var schema = _this.props.schema;
    var account = _this.props.account;
    // TODO: if not found, set currentViewId as first view ID
    var currentViewId = (0, _lodash.get)(schema, 'views.default', 'default');

    _this.state = {
      env: _this.props.env,
      account: account,
      currentViewId: currentViewId,

      classes: (0, _lodash.get)(schema, 'classes.app', 'container'),
      classesHeader: (0, _lodash.get)(schema, ['classes', 'app.header'], 'container'),
      classesFooter: (0, _lodash.get)(schema, ['classes', 'app.footer'], 'container'),
      AXGClasses: (0, _lodash.get)(schema, 'classes', {}),
      AXGOptions: (0, _lodash.get)(schema, 'options', {}),
      AXGDataSource: (0, _lodash.get)(schema, 'data', {})
    };
    return _this;
  }

  _createClass(Appxigon, [{
    key: 'validateLogin',
    value: function validateLogin(signinViewId, defaultViewId) {
      signinViewId = signinViewId || 'signin';
      defaultViewId = defaultViewId || 'dashboard';

      var p = this.props;
      var signinRouteIds = ['signin', ''];
      var currentRouteId = (0, _utils.getCurrentRouteId)();
      var isSigninRoute = (0, _lodash.includes)(signinRouteIds, currentRouteId);
      // console.info(`_ auth: login(${validUserLogin()}), currentRouteId(${currentRouteId}), isSigninRoute(${isSigninRoute})`)
      if (!isSigninRoute && !(0, _utils.validUserLogin)()) {
        // redirect to siginin route
        p.actions.setViewId({ viewId: signinViewId });
        console.info(' ... redirect: (' + currentRouteId + ') -> ' + signinViewId);
      }
      if (isSigninRoute && (0, _utils.validUserLogin)()) {
        // redirect to siginin route
        p.actions.setViewId({ viewId: defaultViewId });
        console.info(' ... redirect: (' + signinViewId + ') -> ' + defaultViewId);
      }
    }
  }, {
    key: 'componentWillMount',
    value: function componentWillMount() {
      var checkInterval = 2000;
      var c = this;
      setInterval(function () {
        c.validateLogin();
      }, checkInterval);
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var component = this;
      var schema = nextProps.schema,
          account = nextProps.account;

      var newViewId = nextProps.currentViewId;
      // console.log(this.props.schema === schema ? 'Same schema' : 'schema changed')
      // Set currentViewId to the default viewId of the new schema
      if (schema.id !== this.props.schema.id) {
        newViewId = (0, _lodash.get)(schema, 'views.default', 'default');
      }
      // console.log(`Appxigon: newViewId / schema: ${newViewId} / ${schema}`)
      component.setState({
        account: account,
        env: nextProps.env,
        currentViewId: newViewId,

        classes: (0, _lodash.get)(schema, 'classes.app', 'container'),
        classesHeader: (0, _lodash.get)(schema, ['classes', 'app.header'], 'container'),
        classesFooter: (0, _lodash.get)(schema, ['classes', 'app.footer'], 'container'),
        AXGClasses: (0, _lodash.get)(schema, 'classes', {}),
        AXGOptions: (0, _lodash.get)(schema, 'options', {}),
        AXGDataSource: (0, _lodash.get)(schema, 'data', {})
      });
    }

    // TODO: generic signal handling
    // use Actor Model ?

  }, {
    key: 'handleKeyPress',
    value: function handleKeyPress(e) {
      var actions = this.props.actions;
      var key = e.key;
      var signal = JSON.parse(e.target.getAttribute('data-signal'));
      // console.log(`${e.target.id}: ${JSON.stringify(signal)}: key pressed: ${key}`)
      if (signal) {
        switch (key) {
          case 'Enter':
            var itemId = signal.Enter;
            // console.info(`_ "Enter" pressed for: ${itemId}`)
            // console.info(`_ Update dependency for: ${itemId}`)
            actions.setAppxigonState({
              key: 'dependency.' + itemId,
              value: JSON.stringify((0, _lodash.random)(5, true))
            });
            break;
        }
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _ref = [this, this.props, this.state],
          c = _ref[0],
          p = _ref[1],
          s = _ref[2];

      var routeViewId = p.params.viewId;
      var defaultViewId = (0, _lodash.get)(p.schema, 'views.default', 'default');

      var title = (0, _lodash.get)(p, 'schema.title', 'title');
      document.title = (0, _utils._t)(title);

      var stateViewId = s.currentViewId;
      var currentViewId = routeViewId || stateViewId || defaultViewId;
      // console.log(`routeViewId / stateViewId: ${routeViewId} / ${stateViewId}`)
      // Update locale
      window.i18n.default = p.currentLocale;
      // console.log(`Appxigon: currentViewId: ${JSON.stringify(currentViewId)}`)
      var viewSchema = (0, _lodash.get)(p, 'schema.views.' + currentViewId, {});
      if ((0, _lodash.isEmpty)(viewSchema)) {
        viewSchema = (0, _lodash.get)(p, 'schema.views.' + defaultViewId, {});
      }
      // console.log(`Appxigon: viewSchema: ${JSON.stringify(viewSchema)}`)

      // Modal Hacking
      // FIXME: leave to custom.css ?
      var padding = 90; // adjust this to your needs
      var height = s.contentHeight + padding;
      var heightPx = height + 'px';
      var heightOffset = height / 2;
      var offsetPx = heightOffset + 'px';

      var style = {};
      if (p.modalStyle == 'custom') {
        style = {
          content: {
            border: '0',
            borderRadius: '4px',
            bottom: 'auto',
            height: heightPx, // set height
            // height: '1000px',  // set height
            left: '50%',
            padding: '2rem',
            position: 'fixed',
            right: 'auto',
            top: '50%', // start from center
            transform: 'translate(-50%,-' + offsetPx + ')', // adjust top "up" based on height
            width: '40%',
            maxWidth: '40rem'
          }
        };
      }

      var modalViewSchema = p.modalViewSchema || null;
      var modalViewTitle = (0, _utils._t)((0, _lodash.get)(p.modalViewSchema, 'title'));
      var modalId = p.modalStyle != '' ? 'appxigon-modal-' + p.modalStyle : 'appxigon-modal';
      var modal = _react2.default.createElement(
        _Modal2.default,
        {
          id: modalId,
          lang: p.currentLocale,
          show: p.modalDisplay,
          onHide: p.actions.closeModal,
          style: style
        },
        _react2.default.createElement(
          _Modal2.default.Header,
          { id: 'appxigon-modal-header', closeButton: true },
          _react2.default.createElement(
            _Modal2.default.Title,
            { id: 'appxigon-modal-title' },
            modalViewTitle
          )
        ),
        _react2.default.createElement(
          _Modal2.default.Body,
          { id: 'appxigon-modal-body' },
          _react2.default.createElement(_view2.default, {
            env: p.env,
            id: 'modal-' + currentViewId,
            locale: p.currentLocale,
            account: s.account,
            AXGClasses: s.AXGClasses,
            AXGOptions: s.AXGOptions,
            AXGDataSource: s.AXGDataSource,
            schema: modalViewSchema })
        )
      );

      return _react2.default.createElement(
        'div',
        { className: s.classes },
        (0, _lodash.get)(p, 'schema.views.header') && _react2.default.createElement(_view2.default, {
          env: p.env,
          id: 'header',
          locale: p.currentLocale,
          isHeader: true,
          account: s.account,
          AXGClasses: s.AXGClasses,
          AXGOptions: s.AXGOptions,
          AXGDataSource: s.AXGDataSource,
          schema: (0, _lodash.get)(p, 'schema.views.header') }),
        _react2.default.createElement(
          'div',
          null,
          _react2.default.createElement(_view2.default, {
            env: p.env,
            id: currentViewId,
            locale: p.currentLocale,
            account: s.account,
            AXGClasses: s.AXGClasses,
            AXGOptions: s.AXGOptions,
            AXGDataSource: s.AXGDataSource,
            schema: viewSchema })
        ),
        (0, _lodash.get)(p, 'schema.views.footer') && _react2.default.createElement(
          'div',
          { className: s.classesFooter },
          '<app.footer>'
        ),
        modal,
        _react2.default.createElement(_reactEventListener2.default, { target: document, onKeyUpCapture: this.handleKeyPress.bind(this) })
      );
    }
  }]);

  return Appxigon;
}(_react2.default.Component);

Appxigon.ItemTypes = require('./item-types');
Appxigon.addItemType = Appxigon.ItemTypes.addItemType;
Appxigon.addItemTypes = Appxigon.ItemTypes.addItemTypes;

function mapStateToProps(s) {
  var localeSelectorKey = (0, _lodash.get)(s, ['AXGSchema', 'schema', 'locale-selector'], 'locale');
  var defaultLocale = (0, _lodash.get)(s, ['AXGSchema', 'schema', 'locale'], 'en');
  return {
    currentLocale: (0, _lodash.get)(s, ['AXGState', localeSelectorKey], defaultLocale),
    currentViewId: s.AXGView.current,
    modalViewSchema: s.AXGView.modalViewSchema,
    modalDisplay: s.AXGView.modalDisplay,
    modalTitle: s.AXGView.modalTitle,
    modalStyle: s.AXGView.modalStyle,
    schema: s.AXGSchema.schema,
    account: s.AXGAccount
  };
}
function mapDispatchToProps(dispatch) {
  return {
    actions: (0, _redux.bindActionCreators)(Actions, dispatch)
  };
}

exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(Appxigon);