@integec/grid-tools/lib/RowEditor.js

Integ Grid Tools

'use strict';

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

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

var _filter2 = _interopRequireDefault(_filter);

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

var _map2 = _interopRequireDefault(_map);

var _reduce = require('ramda/src/reduce');

var _reduce2 = _interopRequireDefault(_reduce);

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

var _compose2 = _interopRequireDefault(_compose);

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Overlay = require('./Overlay');

var _Overlay2 = _interopRequireDefault(_Overlay);

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

var _renderRowEditorContent = require('./renderRowEditorContent');

var _renderRowEditorContent2 = _interopRequireDefault(_renderRowEditorContent);

var _validationUtil = require('./validation-util');

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var renderEditor = function renderEditor(_ref) {
  var rowData = _ref.rowData,
      valueChanged = _ref.valueChanged,
      onOk = _ref.onOk,
      onCancel = _ref.onCancel,
      initialFocusRef = _ref.initialFocusRef,
      isEditing = _ref.isEditing,
      onClose = _ref.onClose,
      props = _objectWithoutProperties(_ref, ['rowData', 'valueChanged', 'onOk', 'onCancel', 'initialFocusRef', 'isEditing', 'onClose']);

  return isEditing && _react2.default.createElement(
    _Overlay2.default,
    { onClose: onClose },
    (0, _renderRowEditorContent2.default)()(_extends({}, props, {
      rowData: rowData,
      valueChanged: valueChanged,
      onOk: onOk,
      onCancel: onCancel,
      initialFocusRef: initialFocusRef
    }))
  );
};

var createEditRow = function createEditRow(_ref2) {
  var showAdd = _ref2.showAdd,
      headers = _ref2.headers,
      rowData = _ref2.rowData,
      modifyNewData = _ref2.modifyNewData;

  if (!rowData) return {};
  if (!showAdd) return rowData;
  var newData = _extends({}, rowData);
  headers.filter(function (h) {
    return h.isKey;
  }).forEach(function (h) {
    return newData[h.ident] = null;
  });
  return newData;
};

var modifyRow = function modifyRow(_ref3) {
  var header = _ref3.header,
      value = _ref3.value,
      rowData = _ref3.rowData;

  console.log('editing row with raw info', header, value);
  var parsedValue = (0, _utils.rawToValue)({ value: value, header: header });
  console.log('row editor parsed ', parsedValue);
  if (parsedValue !== undefined) {
    return header.dataSetter ? header.dataSetter({
      rowData: rowData,
      header: header,
      value: parsedValue
    }) : _extends({}, rowData, _defineProperty({}, header.ident, parsedValue));
  }
  return rowData;
};

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

  function RowEditor() {
    var _ref4;

    var _temp, _this, _ret;

    _classCallCheck(this, RowEditor);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref4 = RowEditor.__proto__ || Object.getPrototypeOf(RowEditor)).call.apply(_ref4, [this].concat(args))), _this), _this.state = {
      editedRow: createEditRow(_this.props),
      validations: _validationUtil.emptyValidations,
      startValidation: false
    }, _this.valueChanged = function (editInfo) {
      return _this.setState(function (_ref5) {
        var editedRow = _ref5.editedRow;

        var rowData = modifyRow(_extends({}, _this.props, editInfo, { rowData: editedRow }));
        if (rowData !== editedRow) {
          if (_this.state.startValidation) {
            var validationSpec = _this.props.validationSpec;

            var validations = (0, _validationUtil.validate)({
              spec: validationSpec,
              data: rowData,
              editorProps: _extends({}, _this.props, { extractData: _utils.extractData })
            });
            return { editedRow: rowData, validations: validations };
          } else {
            return { editedRow: rowData };
          }
        }
      });
    }, _this.runValidation = function () {
      var validationSpec = _this.props.validationSpec;
      var editedRow = _this.state.editedRow;

      var validations = (0, _validationUtil.validate)({
        spec: validationSpec,
        data: editedRow,
        editorProps: _extends({}, _this.props, { extractData: _utils.extractData })
      });
      console.log(validations);
      _this.setState({ validations: validations, startValidation: true });

      return validations.length === 0;
    }, _this.onOk = function (e) {
      var _this$props = _this.props,
          rowData = _this$props.rowData,
          headers = _this$props.headers;
      var editedRow = _this.state.editedRow;
      // const validations = validate({
      //   spec: validationSpec,
      //   data: rowData,
      //   editorProps: { ...this.props, extractData },
      // })
      // this.setState({ validations })
      // has validations

      if (!_this.runValidation()) return;

      if (rowData !== editedRow) {
        var removeDotsOnEditedNums = (0, _compose2.default)((0, _reduce2.default)(function (a, b) {
          return _extends({}, a, b);
        }, editedRow), (0, _map2.default)(function (_ref6) {
          var _ref7 = _slicedToArray(_ref6, 2),
              header = _ref7[0],
              value = _ref7[1];

          var val = (0, _utils.rawToValue)({
            header: header,
            value: value.endsWith('-.') ? value.substr(0, value.length - 2) : value.substr(0, value.length - 1)
          });
          return header.dataSetter ? header.dataSetter({ rowData: editedRow, header: header, value: val }) : _defineProperty({}, header.ident, val);
        }), (0, _filter2.default)(function (_ref9) {
          var _ref10 = _slicedToArray(_ref9, 2),
              _ = _ref10[0],
              value = _ref10[1];

          return typeof value === 'string' && (value.endsWith('.') || value.endsWith('-'));
        }), (0, _map2.default)(function (header) {
          return [header, (0, _utils.extractData)({ rowData: editedRow, header: header })];
        }), (0, _filter2.default)(function (header) {
          return (0, _utils.extractData)({ rowData: rowData, header: header }) !== (0, _utils.extractData)({ rowData: editedRow, header: header });
        }), (0, _filter2.default)(function (h) {
          return h.type === 'num';
        }));
        var data = removeDotsOnEditedNums(headers);
        console.log('normalized data is ', data);
        _this.props.commitEdit({
          currentRow: _this.props.showAdd ? undefined : _this.props.rowData,
          editedRow: data
        });
      } else {
        _this.props.commitEdit({
          currentRow: _this.props.showAdd ? undefined : _this.props.rowData,
          editedRow: _this.state.editedRow
        });
      }
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  // componentDidMount() {
  //   this.runValidation()
  // }
  // componentDidUpdate(prevProps, prevState) {
  //   if (this.props !== prevProps) this.runValidation()
  // }

  _createClass(RowEditor, [{
    key: 'componentDidUpdate',
    value: function componentDidUpdate(prevProps, prevState) {
      if (!prevProps.isEditing && this.props.isEditing) {
        if (this.focusNode) {
          if (this.focusNode) this.focusNode.focus();
          if (this.focusNode.setSelectionRange) {
            this.focusNode.setSelectionRange(0, this.focusNode.value.length);
          }
        }
        this.setState({ startValidation: false, validations: [] });
      }
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (this.props.rowData !== nextProps.rowData) {
        this.setState({ editedRow: createEditRow(nextProps) || {} });
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props$render = this.props.render,
          render = _props$render === undefined ? renderEditor : _props$render;
      var validations = this.state.validations;
      // console.log('passing down to row editor renderer',this.state.editedRow,this.state)
      //

      return render(_extends({}, this.props, {
        rowData: this.state.editedRow,
        valueChanged: this.valueChanged,
        onOk: this.onOk,
        onCancel: this.props.onClose,
        initialFocusRef: function initialFocusRef(n) {
          return _this2.focusNode = n;
        },
        isTypeValid: _validationUtil.isTypeValid,
        validations: validations,
        extractData: _utils.extractData
      }));
    }
  }]);

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

exports.default = RowEditor;
//# sourceMappingURL=RowEditor.js.map