@infotech/uikit-datagrid/lib/hocs/selectable/index.js

uikit-datagrid --

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _uikitCheckbox = _interopRequireDefault(require("@infotech/uikit-checkbox"));

var _classnames = _interopRequireDefault(require("classnames"));

var _uniq = _interopRequireDefault(require("lodash/uniq"));

var _uikitGrid = require("@infotech/uikit-grid");

require("./styles.css");

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

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)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var styles = {
  "selected": "uikit_components_datagrid__selected_a528450e",
  "asFistTd": "uikit_components_datagrid__asFistTd_a528450e"
}; // @related-file ./styles.css

var controllableSelect = function controllableSelect(BaseComponent) {
  var _temp;

  return _temp =
  /*#__PURE__*/
  function (_Component) {
    _inherits(Selectable, _Component);

    function Selectable(props) {
      var _this;

      _classCallCheck(this, Selectable);

      _this = _possibleConstructorReturn(this, _getPrototypeOf(Selectable).call(this));

      _defineProperty(_assertThisInitialized(_this), "getTrProps", function () {
        var _this$props;

        var rowInfo = arguments.length <= 1 ? undefined : arguments[1];

        var selected = _typeof(rowInfo) === "object" && _this.getSelection().includes(_this.getRowId(rowInfo.original));

        var userTrProps = _this.props.getTrProps ? (_this$props = _this.props).getTrProps.apply(_this$props, arguments) : false;
        var nextProps = selected ? {
          className: (0, _classnames.default)(userTrProps && userTrProps.className, styles.selected)
        } : {};

        if (userTrProps) {
          return _objectSpread({}, userTrProps, nextProps);
        }

        return nextProps;
      });

      _defineProperty(_assertThisInitialized(_this), "getTdProps", function () {
        var nextProps = {
          className: styles.asFistTd
        };

        if (_this.props.getTdProps) {
          var _this$props2;

          return _objectSpread({}, (_this$props2 = _this.props).getTdProps.apply(_this$props2, arguments), nextProps);
        }

        return nextProps;
      });

      _defineProperty(_assertThisInitialized(_this), "handleChange", function (original, checked) {
        var selectdId = _this.getRowId(original);

        if (typeof selectdId === "undefined") {
          // Id is invalid
          return false;
        }

        _this.setSelection(checked ? (0, _uniq.default)(_this.getSelection().concat([selectdId])) : _this.getSelection().filter(function (id) {
          return id !== selectdId;
        }));
      });

      _defineProperty(_assertThisInitialized(_this), "handleChangeAll", function (checked) {
        var nextSelection = checked ? (0, _uniq.default)(_this.props.data.map(function (item) {
          return _this.getRowId(item);
        })) : [];

        if (nextSelection.length !== 0 && nextSelection.length !== _this.props.data.length) {
          nextSelection = [];
        }

        _this.setSelection(nextSelection);
      });

      _this.state = _objectSpread({
        selection: props.selection || [],
        selectAll: false
      }, _this.extendColumns(props));
      return _this;
    }

    _createClass(Selectable, [{
      key: "componentWillReceiveProps",
      value: function componentWillReceiveProps(nextProps) {
        // Enable or disable selection mode
        if (this.props.columns !== nextProps.columns || this.props.onSelect !== nextProps.onSelect || this.props.handleSelect !== nextProps.handleSelect) {
          this.setState(this.extendColumns(nextProps));
        }

        if (!this.props.primaryKey && this.props.data !== nextProps.data) {
          // Clean selection
          // if primaryKey is not specified
          // because in this case the identifier of a row
          // is a row itself
          this.setSelection([], nextProps);
        }
      }
    }, {
      key: "getSelection",

      /* Get selection from the outside or from the local state */
      value: function getSelection() {
        return this.props.selection || this.state.selection;
      }
    }, {
      key: "setSelection",
      value: function setSelection(nextSelection) {
        var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.props;

        // Check controllable strategy
        if (props.onSelect) {
          props.onSelect(nextSelection, props);
        }

        if (props.handleSelect) {
          props.handleSelect(nextSelection);
        } else {
          this.setState({
            selection: nextSelection
          });
        }
      }
    }, {
      key: "getRowId",
      value: function getRowId(original) {
        return this.props.primaryKey ? original[this.props.primaryKey] : original;
      }
    }, {
      key: "extendColumns",
      value: function extendColumns(props) {
        var _this2 = this;

        if (props.onSelect || props.handleSelect) {
          var extendColumns = [{
            id: "__select__",
            sortable: false,
            // Disable drag'n'drop
            draggable: false,
            Header: function Header() {
              // If checked is true, it means that all elements has been selected
              // But if checked containes strict number of selected elemnts
              // it means that selection is partial
              var checked = _this2.isSelectedAll();

              return _react.default.createElement(_uikitGrid.Box, {
                flex: true,
                align: "center",
                justify: "left",
                px: "1md",
                loose: true,
                style: {
                  marginLeft: "-8px"
                }
              }, _react.default.createElement(_uikitCheckbox.default, {
                checked: Boolean(checked),
                partial: Boolean(checked && checked !== true),
                inline: true,
                onChange: _this2.handleChangeAll
              }));
            },
            fixed: "left",
            accessor: function accessor() {
              return "";
            },
            Cell: function Cell(data) {
              return _react.default.createElement(_uikitGrid.Box, {
                flex: true,
                align: "center",
                justify: "left",
                px: "1md",
                loose: true,
                style: {
                  marginLeft: "-8px"
                }
              }, _react.default.createElement(_uikitCheckbox.default, {
                checked: _this2.isSelected(data.original),
                onChange: function onChange(checked) {
                  return _this2.handleChange(data.original, checked);
                }
              }));
            },
            width: 56
          }];
          return {
            columns: extendColumns.concat(props.columns)
          };
        }

        return {
          columns: null
        };
      }
    }, {
      key: "isSelected",
      value: function isSelected(original) {
        return this.getSelection().includes(this.getRowId(original));
      }
    }, {
      key: "isSelectedAll",
      value: function isSelectedAll() {
        if (this.getSelection().length === this.props.data.length && this.props.data.length > 0) {
          return true;
        }

        return this.getSelection().length;
      }
    }, {
      key: "render",
      value: function render() {
        return _react.default.createElement(BaseComponent, _extends({}, this.props, {
          getTrProps: this.getTrProps,
          columns: this.state.columns || this.props.columns
        }));
      }
    }]);

    return Selectable;
  }(_react.Component), _temp;
};

var _default = controllableSelect;
exports.default = _default;