appxigon-react/lib/group.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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _traverse = require('traverse');

var _traverse2 = _interopRequireDefault(_traverse);

var _lodash = require('lodash');

var _redux = require('redux');

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

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

var Actions = _interopRequireWildcard(_actions);

var _item = require('./item.js');

var _item2 = _interopRequireDefault(_item);

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; } // group.js
// A group of item components (item.js)
// TODO: group level show / hide handling. Use item level flag for now.

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

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

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

    _this.state = {
      id: _this.props.id,
      schema: _this.props.schema,
      show: (0, _lodash.get)(_this.props, 'show', true),
      collapsable: (0, _lodash.get)(_this.props, 'collapsable', false),
      collapsed: false,
      removable: (0, _lodash.get)(_this.props, 'removable', false),
      // if group is named 'actions', no style class names like 'panel panel-default' are assigned
      classes: (0, _lodash.get)(_this.props, 'classes') || (_this.props.id.match(/^action.*/i) ? '' : (0, _lodash.get)(_this.props, 'AXGClasses.group', 'panel panel-default')),
      classesHeader: (0, _lodash.get)(_this.props, ['AXGClasses', 'group.header'], 'panel-heading'),
      // classesBody   : get(this.props, ['AXGClasses','group.body'], 'panel-body'),
      classesBody: (0, _lodash.get)(_this.props, 'schema.classes', 'panel-body'),
      classesFooter: (0, _lodash.get)(_this.props, ['AXGClasses', 'group.footer'], 'panel-footer')
    };
    return _this;
  }

  _createClass(Group, [{
    key: 'handleRemoveGroup',
    value: function handleRemoveGroup() {
      // console.log(`TODO: handleRemoveGroup: ${this.props.AXGKey}`)
      var updatedSchema = (0, _lodash.cloneDeep)(this.props.appSchema);
      // console.log(`updatedSchema: ${JSON.stringify(updatedSchema)}`)
      var viewId = this.props.AXGKey.split('.')[0];
      var groupId = this.props.AXGKey.split('.')[1];
      // console.log(`viewId / groupId: ${viewId} / ${groupId}`)
      // var groupLayout = get(updatedSchema, `views.${viewId}.groups.layout`)
      // console.log(`layout: ${JSON.stringify(groupLayout)}`)
      updatedSchema = (0, _traverse2.default)(updatedSchema).map(function (node) {
        if (this.key === groupId) {
          this.delete();
        }
      });
      this.props.actions.setSchema({ schema: updatedSchema });
    }
  }, {
    key: 'handleToggleGroup',
    value: function handleToggleGroup() {
      this.setState({
        collapsed: !this.state.collapsed
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _state = this.state,
          id = _state.id,
          items = _state.schema;
      // const id = this.state.id
      // const items = this.state.schema

      var orderedSections = [];
      if (items) {
        orderedSections = [{
          type: 'header',
          key: 'header-' + id,
          classes: this.state.classesHeader,
          items: items.filter(function (i) {
            return Object.keys(i)[0] === 'header';
          })
        }, {
          type: 'body',
          key: 'body-' + id,
          classes: this.state.classesBody,
          items: items.filter(function (i) {
            return Object.keys(i)[0] !== 'header' && Object.keys(i)[0] !== 'footer';
          })
        }, {
          type: 'footer',
          key: 'footer-' + id,
          classes: this.state.classesFooter,
          items: items.filter(function (i) {
            return Object.keys(i)[0] === 'footer';
          })
        }];
      }
      return (
        // group classes
        // <div className={`${this.state.classes}${this.state.show ? '' : ' hidden'}`}>
        // REVIEW: use state or props for dynamic update ?
        _react2.default.createElement(
          'div',
          { className: this.state.classes + ((0, _lodash.get)(this.props, 'show', true) ? '' : ' hidden') },
          orderedSections.map(function (section) {
            return section.items.length > 0 && _react2.default.createElement(
              'div',
              { key: section.key, className: section.classes + (section.type == 'body' && _this2.state.collapsed ? ' hidden' : '') },
              _this2.state.removable && section.type == 'header' && _react2.default.createElement(
                'button',
                { type: 'button', className: 'close', 'aria-hidden': 'true', onClick: _this2.handleRemoveGroup.bind(_this2) },
                _react2.default.createElement(
                  'i',
                  { className: 'material-icons' },
                  'remove_circle_outline'
                )
              ),
              _this2.state.collapsable && section.type == 'header' && _react2.default.createElement(
                'button',
                { type: 'button', className: 'close', 'aria-hidden': 'true',
                  onClick: _this2.handleToggleGroup.bind(_this2) },
                _react2.default.createElement(
                  'i',
                  { className: 'material-icons' },
                  _this2.state.collapsed ? 'keyboard_arrow_down' : 'keyboard_arrow_up'
                )
              ),
              section.items.map(function (item) {
                var itemKey = Object.keys(item)[0];
                return _react2.default.createElement(_item2.default, {
                  env: _this2.props.env,
                  key: _this2.props.AXGKey + '.' + itemKey,
                  id: itemKey,
                  account: _this2.props.account,
                  AXGKey: _this2.props.AXGKey + '.' + itemKey,
                  schema: item[itemKey],
                  AXGClasses: _this2.props.AXGClasses,
                  AXGOptions: _this2.props.AXGOptions,
                  AXGDataSource: _this2.props.AXGDataSource });
              })
            );
          })
        )
      );
    }
  }]);

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

function mapStateToProps(state) {
  return {
    appSchema: state.AXGSchema.schema,
    appxigonState: state.AXGState
  };
}
function mapDispatchToProps(dispatch) {
  return {
    actions: (0, _redux.bindActionCreators)(Actions, dispatch)
  };
}

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