appxigon-react/lib/view.js

Appxigon implementation on React JS

'use strict';

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

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

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 _lodash = require('lodash');

var _redux = require('redux');

var _reactRedux = require('react-redux');

var _preludeLs = require('prelude-ls');

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

var Actions = _interopRequireWildcard(_actions);

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

var _reactEventListener2 = _interopRequireDefault(_reactEventListener);

var _utils = require('./lib/utils');

var _group = require('./group.js');

var _group2 = _interopRequireDefault(_group);

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; } // view.js
// view component: manages group components
// some groups could be dynamically multiple

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

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

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

    _this.state = {
      id: _this.props.id, // view ID
      locale: (0, _lodash.get)(_this.props, 'locale', 'en'),
      schema: (0, _lodash.get)(_this.props, 'schema'),
      // classes  : get(this.props,'AXGClasses.view', 'container'),
      classes: (0, _lodash.get)(_this.props, 'schema.classes', 'container'),
      classesHeader: (0, _lodash.get)(_this.props, ['AXGClasses', 'view.header']),
      classesFooter: (0, _lodash.get)(_this.props, ['AXGClasses', 'view.footer']),
      protected: (0, _lodash.get)(_this.props, 'schema.protected', false)
    };
    return _this;
  }

  _createClass(View, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var component = this;
      component.setState({
        id: nextProps.id,
        locale: nextProps.locale,
        schema: nextProps.schema,
        classes: (0, _lodash.get)(nextProps, 'schema.classes'),
        protected: (0, _lodash.get)(nextProps, 'schema.protected', false),
        loginCheckerHandle: null
      });
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      if ((0, _lodash.get)(this.props, 'AXGOptions.material-design')) {
        $.material.init();
      }
    }
  }, {
    key: 'handleKeyPress',
    value: function handleKeyPress(e) {
      console.log('key pressed: ' + e.key);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _ref = [this, this.props, this.state],
          c = _ref[0],
          p = _ref[1],
          s = _ref[2];
      var _state = this.state,
          locale = _state.locale,
          schema = _state.schema;
      // var title = get(schema, 'title.long') || get(schema, 'title.short') || get(schema, 'title')

      var layoutGroups = (0, _lodash.compact)((0, _lodash.flatten)((0, _lodash.get)(schema, 'groups.layout', [])));
      // console.log(`layoutGroups: ${JSON.stringify(layoutGroups)}`)
      // TODO: give schema example / format spec in this source file

      // FIXME: get signinViewIds from props
      var signinRouteIds = ['signin', ''];
      var currentRouteId = (0, _utils.getCurrentRouteId)();
      var isSigninRoute = (0, _lodash.includes)(signinRouteIds, currentRouteId);
      var isSigninView = this.state.id == 'signin';

      var canRender = false;
      // anything is true
      var renderConditions = {
        open: !s.protected,
        protected_but_valid_login: s.protected && (0, _utils.validUserLogin)()
      };
      var noRenderConditions = {
        non_signin_view_but_in_signin_route: isSigninRoute && !isSigninView
      };
      // console.info(`__ auth __ renderConditions: ${s.id}: ${JSON.stringify(renderConditions)}`)
      // console.info(`__ auth __ noRenderConditions: ${s.id}: ${JSON.stringify(noRenderConditions)}`)
      var canRenderCheck = (0, _preludeLs.orList)((0, _preludeLs.values)(renderConditions));
      var cannotRenderCheck = (0, _preludeLs.orList)((0, _preludeLs.values)(noRenderConditions));

      canRender = !cannotRenderCheck && canRenderCheck;

      return canRender ? _react2.default.createElement(
        'div',
        { className: this.state.classes },
        layoutGroups.length > 0 && layoutGroups.map(function (group) {
          // group item accepts both string or object (assumes first key to be string)
          // console.log(`group: ${group}`)
          var groupName = (typeof group === 'undefined' ? 'undefined' : _typeof(group)) === 'object' ? (0, _lodash.keys)(group)[0] : group;
          // handles whether the group is visible (show === true) or not
          // TODO: allows a group display status to depend on an array of conditions
          // Need a way to specify OR / AND etc...
          // e.g. show:
          //        - this.main.makes: MA002
          //        - this.controller.country: US
          var show = true; // default
          var showCondition = (typeof group === 'undefined' ? 'undefined' : _typeof(group)) === 'object' ? (0, _lodash.get)(group, [groupName, 'show'], null) : null;
          // console.info(`... group.js: ${this.props.id}: showCondition: ${JSON.stringify(showCondition)}`)

          if (showCondition) {
            // TODO: REFACTOR: same as show condition check in item.js
            if (typeof showCondition === 'boolean') {
              show = showCondition;
            } else if (typeof showCondition === 'string') {
              // TODO: generic handling of pre-defined conditions
              // account.authenticated
              // REVIEW: untimely update incidentally solved by passing down props: account from root component
              if (showCondition === 'account.authenticated') {
                // let signedIn = localStorage.getItem('Appxigon.loginToken') !== null
                var signedIn = (0, _utils.validUserLogin)();
                var currentPathName = window.appxigon.history.getCurrentLocation().pathname;
                show = (0, _preludeLs.andList)([signedIn, currentPathName != '/' + (0, _lodash.get)(_this2.props.appxigonAccountConfig, 'signin-view')]);
                // console.info(`Appxigon.loginToken: ${localStorage.getItem('Appxigon.loginToken')}`)
                // console.info(`account.authenticated check: ${show}`)
                // show = this.state.account.loginToken !== null
              }
              if (showCondition === 'account.rejected') {
                // APOLLO-TODO: proper reject condition from REDUX
                // show = localStorage.getItem('Appxigon.loginToken') !== null
                show = !(0, _utils.validUserLogin)();
              }
            } else {
              // object of conditions
              // TODO: handle multiple conditions
              var conditionKey = Object.keys(showCondition)[0];
              stateRefKey = normalizeSchemaKey(conditionKey, _this2.props.AXGKey);
              show = (0, _lodash.get)(_this2.props.appxigonState, [stateRefKey]) === stateRefVal ? true : false;
            }
          }

          // overwrite global Group classes def
          var groupClasses = (typeof group === 'undefined' ? 'undefined' : _typeof(group)) === 'object' ? (0, _lodash.get)(group, groupName + '.classes') : null;
          // console.log(`group / groupClasses: ${JSON.stringify(group)} / ${JSON.stringify(groupClasses)}`)
          var collapsable = false; // default
          collapsable = (typeof group === 'undefined' ? 'undefined' : _typeof(group)) === 'object' ? (0, _lodash.get)(group, [groupName, 'collapsable'], false) : false;
          var removable = false; // default
          removable = (typeof group === 'undefined' ? 'undefined' : _typeof(group)) === 'object' ? (0, _lodash.get)(group, [groupName, 'removable'], false) : false;
          // If the group use alias, the actual schema passing to Group should change accordingly
          var realGroupName = groupName;
          // console.log(`group: ${JSON.stringify(group)}`)
          if ((typeof group === 'undefined' ? 'undefined' : _typeof(group)) === 'object') {
            realGroupName = (0, _lodash.get)(group, [groupName, 'alias-of'], groupName);
          }
          // console.log(`realGroupName: ${realGroupName}`)

          return !(0, _lodash.isEmpty)(group) && _react2.default.createElement(_group2.default, {
            env: _this2.props.env,
            key: _this2.props.id + '.' + groupName,
            id: groupName,
            locale: locale,
            account: _this2.props.account,
            collapsable: collapsable,
            removable: removable,
            show: show,
            classes: groupClasses,
            AXGKey: _this2.props.id + '.' + groupName,
            AXGClasses: _this2.props.AXGClasses,
            AXGOptions: _this2.props.AXGOptions,
            AXGDataSource: _this2.props.AXGDataSource,
            schema: _this2.state.schema.groups[realGroupName] });
        })
      ) : _react2.default.createElement(
        'div',
        { className: this.props.isHeader && 'hidden' },
        'Login required!'
      );
    }
  }]);

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

function mapStateToProps(state) {
  return {
    appxigonState: state.AXGState,
    // appxigonView:  state.AXGView,
    appxigonAccountConfig: (0, _lodash.get)(state.AXGSchema, 'schema.account')
  };
}
function mapDispatchToProps(dispatch) {
  return {
    actions: (0, _redux.bindActionCreators)(Actions, dispatch)
  };
}
exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(View);