@integec/common-react-screens/lib/auth/RoleSelection.js

'use strict';

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

var _toPairs2 = require('ramda/src/toPairs');

var _toPairs3 = _interopRequireDefault(_toPairs2);

var _map2 = require('ramda/src/map');

var _map3 = _interopRequireDefault(_map2);

var _chain2 = require('ramda/src/chain');

var _chain3 = _interopRequireDefault(_chain2);

var _isEmpty2 = require('ramda/src/isEmpty');

var _isEmpty3 = _interopRequireDefault(_isEmpty2);

var _isNil2 = require('ramda/src/isNil');

var _isNil3 = _interopRequireDefault(_isNil2);

var _filter2 = require('ramda/src/filter');

var _filter3 = _interopRequireDefault(_filter2);

var _sortBy2 = require('ramda/src/sortBy');

var _sortBy3 = _interopRequireDefault(_sortBy2);

var _groupBy2 = require('ramda/src/groupBy');

var _groupBy3 = _interopRequireDefault(_groupBy2);

var _compose2 = require('ramda/src/compose');

var _compose3 = _interopRequireDefault(_compose2);

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

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([''], ['']),
    _templateObject2 = _taggedTemplateLiteral(['\n  display: flex;\n  align-items: center;\n  height: 40px;\n'], ['\n  display: flex;\n  align-items: center;\n  height: 40px;\n']),
    _templateObject3 = _taggedTemplateLiteral(['\n  margin-left: 5px;\n  font-weight: bold;\n  font-size: 1.1em;\n  user-select: none;\n  cursor: pointer;\n  color: #444;\n'], ['\n  margin-left: 5px;\n  font-weight: bold;\n  font-size: 1.1em;\n  user-select: none;\n  cursor: pointer;\n  color: #444;\n']),
    _templateObject4 = _taggedTemplateLiteral(['\n  color: steelblue;\n'], ['\n  color: steelblue;\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _semanticUiReact = require('semantic-ui-react');

var _reactToggle = require('react-toggle');

var _reactToggle2 = _interopRequireDefault(_reactToggle);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

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

var Criteria = _styledComponents2.default.div(_templateObject);

var ToggleRow = (0, _styledComponents2.default)(_semanticUiReact.List.Content)(_templateObject2);
var ToggleLabel = _styledComponents2.default.label(_templateObject3);
var GroupTitle = _styledComponents2.default.h3(_templateObject4);

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

  function RoleSelection() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, RoleSelection);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RoleSelection.__proto__ || Object.getPrototypeOf(RoleSelection)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.filterChanged = function (_, _ref2) {
      var value = _ref2.value;
      return _this.setState({ fuzzyFilter: value });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(RoleSelection, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          roles = _props.roles,
          className = _props.className,
          style = _props.style,
          toggleSelection = _props.toggleSelection,
          selection = _props.selection;
      var fuzzyFilter = this.state.fuzzyFilter;

      var prepareData = (0, _compose3.default)((0, _groupBy3.default)(function (a) {
        return a.displayGroup;
      }), (0, _sortBy3.default)(function (a) {
        return a.displayGroup + '||' + a.displayName;
      }), (0, _filter3.default)(function (r) {
        return (0, _isNil3.default)(fuzzyFilter) || (0, _isEmpty3.default)(fuzzyFilter) || r.role.toLowerCase().includes(fuzzyFilter.toLowerCase()) || r.displayName.toLowerCase().includes(fuzzyFilter.toLowerCase) || r.displayGroup.toLowerCase().includes(fuzzyFilter.toLowerCase);
      }));
      var data = prepareData(roles);

      var renderRole = function renderRole(_ref3) {
        var role = _ref3.role,
            displayName = _ref3.displayName;
        return _react2.default.createElement(
          _semanticUiReact.List.Item,
          { key: role },
          _react2.default.createElement(
            ToggleRow,
            null,
            _react2.default.createElement(_reactToggle2.default, {
              id: role + '-selected',
              checked: selection.includes(role),
              onChange: function onChange(e) {
                return toggleSelection(role);
              }
            }),
            _react2.default.createElement(
              ToggleLabel,
              { htmlFor: role + '-selected' },
              displayName
            )
          )
        );
      };
      //

      var renderGroups = (0, _compose3.default)((0, _chain3.default)(function (d) {
        return d;
      }), (0, _map3.default)(function (_ref4) {
        var _ref5 = _slicedToArray(_ref4, 2),
            group = _ref5[0],
            roles = _ref5[1];

        return [_react2.default.createElement(
          GroupTitle,
          { key: group },
          group
        ), _react2.default.createElement(
          _semanticUiReact.List,
          { key: group + '-list', divided: true, relaxed: true },
          roles.map(renderRole)
        )];
      }), _toPairs3.default);

      return _react2.default.createElement(
        'div',
        { className: className, style: style },
        _react2.default.createElement(
          Criteria,
          null,
          _react2.default.createElement(_semanticUiReact.Input, {
            fluid: true,
            value: fuzzyFilter,
            onChange: this.filterChanged,
            placeholder: 'Filter Roles...',
            icon: 'filter'
          })
        ),
        renderGroups(data)
      );
    }
  }]);

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

var toggleSelection = exports.toggleSelection = function toggleSelection(role) {
  return function (selected) {
    return selected.includes(role) ? (0, _filter3.default)(function (r) {
      return r !== role;
    }, selected) : [].concat(_toConsumableArray(selected), [role]);
  };
};
exports.default = RoleSelection;
//# sourceMappingURL=RoleSelection.js.map