@rafacdb/bah/lib/Tab.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 _templateObject = _taggedTemplateLiteral(['\n  .state {\n    position: absolute;\n    left: -10000px;\n  }\n  .flex-tabs {\n    display: flex;\n    justify-content: space-between;\n    flex-wrap: wrap;\n  }\n  .flex-tabs .tab {\n    flex-grow: 1;\n    max-height: 40px;\n  }\n  .flex-tabs .panel {\n    background-color: #e5e9f2;\n    padding: 2px;\n    min-height: 300px;\n    display: none;\n    width: 100%;\n    flex-basis: auto;\n  }\n  .tab {\n    display: inline-block;\n    padding: 10px;\n    vertical-align: top;\n    background-color: #eee;\n    cursor: hand;\n    cursor: pointer;\n    border-left: 10px solid #ccc;\n  }\n  .tab:hover {\n    background-color: #fff;\n  }\n  ', ' @media (max-width: 600px) {\n    .flex-tabs {\n      flex-direction: column;\n    }\n    .flex-tabs .tab {\n      background: #fff;\n      border-bottom: 1px solid #ccc;\n    }\n    .flex-tabs .tab:last-of-type {\n      border-bottom: none;\n    }\n    ', ' ', ';\n  }\n'], ['\n  .state {\n    position: absolute;\n    left: -10000px;\n  }\n  .flex-tabs {\n    display: flex;\n    justify-content: space-between;\n    flex-wrap: wrap;\n  }\n  .flex-tabs .tab {\n    flex-grow: 1;\n    max-height: 40px;\n  }\n  .flex-tabs .panel {\n    background-color: #e5e9f2;\n    padding: 2px;\n    min-height: 300px;\n    display: none;\n    width: 100%;\n    flex-basis: auto;\n  }\n  .tab {\n    display: inline-block;\n    padding: 10px;\n    vertical-align: top;\n    background-color: #eee;\n    cursor: hand;\n    cursor: pointer;\n    border-left: 10px solid #ccc;\n  }\n  .tab:hover {\n    background-color: #fff;\n  }\n  ', ' @media (max-width: 600px) {\n    .flex-tabs {\n      flex-direction: column;\n    }\n    .flex-tabs .tab {\n      background: #fff;\n      border-bottom: 1px solid #ccc;\n    }\n    .flex-tabs .tab:last-of-type {\n      border-bottom: none;\n    }\n    ', ' ', ';\n  }\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var _redux = require('redux');

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _if = require('./operator/if');

var _if2 = _interopRequireDefault(_if);

var _tabActions = require('./tabActions');

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

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); } /* Tab pen from https://codepen.io/josh_vogt/pen/EaaZbP */


var TabStyle = _styledComponents2.default.div(_templateObject, function (props) {
  var tabs = props.tabs || [];
  return tabs.map(function (value) {
    return '\n    #' + value.id + ':checked ~ .tabs #' + value.id + '-label {\n      background-color: #fff;\n      cursor: default;\n      border-left-color: #69be28;\n    }\n    #' + value.id + ':checked ~ .tabs #' + value.id + '-panel {\n      display: block;\n    }\n  ';
  });
}, function (props) {
  var tabs = props.tabs || [];
  return tabs.map(function (value, index) {
    if (Math.abs((index + 1) % 2) === 1) {
      return '\n          .flex-tabs #' + value.id + '-label {\n            order: ' + (index + 1) + ';\n          }';
    }
    return '\n        .flex-tabs #' + value.id + '-panel {\n          order: ' + (index + 1) + ';\n        }';
  });
}, function (props) {
  var tabs = props.tabs || [];
  return tabs.map(function (value) {
    return '\n        #' + value.id + ':checked ~ .tabs #' + value.id + '-label {\n          border-bottom: none;\n        }\n        #' + value.id + ':checked ~ .tabs #' + value.id + '-panel {\n          border-bottom: 1px solid #ccc;\n        }';
  });
});

var Tab = function (_PureComponent) {
  _inherits(Tab, _PureComponent);

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

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

    var propsTabs = _this.props.tabs || [];
    var tabVisible = _this.props.tabVisible || {};

    _this.updateTabs = function (pTabs, pTabVisible) {
      var tabsAlterKeys = [];
      var newValue = [];
      var itens = {};

      if (Object.keys(pTabVisible).length >= 1) {
        pTabs.map(function (value) {
          return newValue.push(pTabVisible[value.id] || false);
        });
      }

      var tabsAlter = {
        visible: {
          newValue: newValue
        }
      };

      var newTabs = pTabs.map(function (oKey, index) {
        tabsAlterKeys = Object.keys(tabsAlter);
        tabsAlterKeys.map(function (tabsKey) {
          return itens[tabsKey] = oKey[tabsKey] !== tabsAlter[tabsKey].newValue[index] ? tabsAlter[tabsKey].newValue[index] : oKey[tabsKey];
        });
        return Object.assign({}, oKey, itens);
      });

      return newTabs;
    };

    _this.state = { newTabs: _this.updateTabs(propsTabs, tabVisible) };

    _this.handleInputChange = _this.handleInputChange.bind(_this);
    _this.renderInputs = _this.renderInputs.bind(_this);
    _this.renderLabels = _this.renderLabels.bind(_this);
    return _this;
  }

  _createClass(Tab, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (!Object.is(this.props, nextProps)) {
        this.setState({ newTabs: this.updateTabs(nextProps.tabs, nextProps.tabVisible) });
      }
    }
  }, {
    key: 'setRadioChecked',
    value: function setRadioChecked(value) {
      var selected = this.props.selected || this.props.tabs.filter(function (key) {
        return key.active === true;
      })[0].id;

      return selected === value.id;
    }
  }, {
    key: 'handleInputChange',
    value: function handleInputChange(event) {
      this.props.selectTab(event.target.id);
    }
  }, {
    key: 'renderInputs',
    value: function renderInputs() {
      var _this2 = this;

      return this.state.newTabs.map(function (value) {
        return _react2.default.createElement(
          _if2.default,
          { key: 'if-input-' + value.id, test: value.visible },
          _react2.default.createElement('input', {
            key: value.id,
            className: 'state',
            type: 'radio',
            title: value.id,
            name: 'tabs-state',
            id: value.id,
            checked: _this2.setRadioChecked(value),
            onChange: _this2.handleInputChange
          })
        );
      });
    }
  }, {
    key: 'renderLabels',
    value: function renderLabels() {
      return this.state.newTabs.map(function (value) {
        return _react2.default.createElement(
          _if2.default,
          { key: 'if-label-' + value.id, test: value.visible },
          _react2.default.createElement(
            'label',
            {
              key: 'label-' + value.id,
              htmlFor: value.id,
              id: value.id + '-label',
              className: 'tab'
            },
            value.tabCaption
          )
        );
      });
    }
  }, {
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        TabStyle,
        { tabs: this.state.newTabs },
        this.renderInputs(),
        _react2.default.createElement(
          'div',
          { className: 'tabs flex-tabs' },
          this.renderLabels(),
          this.state.newTabs.map(function (value) {
            return _react2.default.createElement(
              _if2.default,
              { key: 'if-panel-' + value.id, test: value.visible },
              _react2.default.createElement(
                'div',
                {
                  key: 'panel-' + value.id,
                  id: value.id + '-panel',
                  className: 'flex-tabs panel active'
                },
                value.content
              )
            );
          })
        )
      );
    }
  }]);

  return Tab;
}(_react.PureComponent);

Tab.defaultProps = {
  tabs: [{}],
  selected: '',
  tabVisible: {}
};

Tab.propTypes = {
  tabs: _propTypes2.default.arrayOf(_propTypes2.default.object),
  selected: _propTypes2.default.string,
  tabVisible: _propTypes2.default.object
};

var mapStateToProps = function mapStateToProps(state) {
  return {
    selected: state.tab.selected,
    tabVisible: state.tab.tabVisible
  };
};
var mapDispatchToProps = function mapDispatchToProps(dispatch) {
  return (0, _redux.bindActionCreators)({ selectTab: _tabActions.selectTab }, dispatch);
};

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