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

Integ Grid Tools

'use strict';

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

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

var _map2 = _interopRequireDefault(_map);

var _max = require('ramda/src/max');

var _max2 = _interopRequireDefault(_max);

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

var _reduce2 = _interopRequireDefault(_reduce);

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

var _compose2 = _interopRequireDefault(_compose);

var _templateObject = _taggedTemplateLiteral(['\n  margin-top: 1em;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n'], ['\n  margin-top: 1em;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n  background-color: white;\n  padding: 1.5em 20px;\n  border: solid #ccc 1px;\n  border-radius: 3px;\n  box-shadow: 6px 1px 12px 1px rgba(0, 0, 0, 0.5);\n  width: ', ';\n  min-width: 45vw;\n  max-width: 80vw;\n  max-height: 80vh;\n  overflow: auto;\n'], ['\n  background-color: white;\n  padding: 1.5em 20px;\n  border: solid #ccc 1px;\n  border-radius: 3px;\n  box-shadow: 6px 1px 12px 1px rgba(0, 0, 0, 0.5);\n  width: ', ';\n  min-width: 45vw;\n  max-width: 80vw;\n  max-height: 80vh;\n  overflow: auto;\n']),
    _templateObject3 = _taggedTemplateLiteral(['\n  display: flex;\n  align-item: center;\n  justify-content: center;\n  margin-bottom: 0.5em;\n'], ['\n  display: flex;\n  align-item: center;\n  justify-content: center;\n  margin-bottom: 0.5em;\n']),
    _templateObject4 = _taggedTemplateLiteral(['\n  flex: 0 0 ', ';\n  font-size: 0.75em;\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n'], ['\n  flex: 0 0 ', ';\n  font-size: 0.75em;\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n']),
    _templateObject5 = _taggedTemplateLiteral(['\n  flex: 0 0 ', ';\n  width: ', ';\n'], ['\n  flex: 0 0 ', ';\n  width: ', ';\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

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

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var Buttons = _styledComponents2.default.div(_templateObject);
var Container = _styledComponents2.default.div(_templateObject2, function (props) {
  return props.width || '45vw';
});
var RowContainer = _styledComponents2.default.div(_templateObject3);
var Header = _styledComponents2.default.div(_templateObject4, function (props) {
  return props.width || '80px';
});
var Input = _styledComponents2.default.input(_templateObject5, function (props) {
  return props.width || '80px';
}, function (props) {
  return props.width || '80px';
});

var RO = _styledComponents2.default.div(_templateObject5, function (props) {
  return props.width || '80px';
}, function (props) {
  return props.width || '80px';
});

var defaultInputRowEditRender = exports.defaultInputRowEditRender = function defaultInputRowEditRender(_ref) {
  var width = _ref.width,
      ref = _ref.ref,
      rowData = _ref.rowData,
      header = _ref.header,
      valueChanged = _ref.valueChanged,
      onOk = _ref.onOk,
      onCancel = _ref.onCancel,
      isKey = _ref.isKey,
      showAdd = _ref.showAdd;
  return !showAdd && isKey ? _react2.default.createElement(
    RO,
    { width: width },
    ' ',
    (0, _utils.extractAndFormatData)({ header: header, rowData: rowData }),
    ' '
  ) : _react2.default.createElement(Input, {
    width: width,
    onChange: function onChange(e) {
      return valueChanged({
        header: header,
        value: e.target.value
      });
    },
    onKeyDown: function onKeyDown(e) {
      if (e.keyCode == 13) onOk();
      if (e.keyCode == 17) onCancel();
    },
    innerRef: ref,
    value: (0, _utils.extractData)({ header: header, rowData: rowData }) || ''
  });
};
var getMaxWidth = (0, _compose2.default)((0, _reduce2.default)(_max2.default, 100), (0, _map2.default)(function (h) {
  return h.width;
}));
var defaultControlsRender = function defaultControlsRender(_ref2) {
  var onOk = _ref2.onOk,
      onCancel = _ref2.onCancel;
  return _react2.default.createElement(
    Buttons,
    null,
    _react2.default.createElement(
      'button',
      { onClick: onOk },
      'Save'
    ),
    _react2.default.createElement(
      'button',
      { onClick: onCancel },
      'Cancel'
    )
  );
};

var stripPx = function stripPx(val) {
  return val && val.endsWith && val.endsWith('px') ? parseFloat(val.substring(0, val.length - 2)) : parseFloat(val);
};

var rendeRowEditorContent = function rendeRowEditorContent() {
  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
      headerWidth = _ref3.headerWidth,
      dataWidth = _ref3.dataWidth,
      _ref3$renderEditor = _ref3.renderEditor,
      renderEditor = _ref3$renderEditor === undefined ? defaultInputRowEditRender : _ref3$renderEditor,
      _ref3$renderControls = _ref3.renderControls,
      renderControls = _ref3$renderControls === undefined ? defaultControlsRender : _ref3$renderControls;

  return function (_ref4) {
    var showAdd = _ref4.showAdd,
        rowData = _ref4.rowData,
        headers = _ref4.headers,
        valueChanged = _ref4.valueChanged,
        onOk = _ref4.onOk,
        onCancel = _ref4.onCancel,
        initialFocusRef = _ref4.initialFocusRef;

    var width = getMaxWidth(headers) + 'px';
    var containerWidth = (stripPx(headerWidth) || getMaxWidth(headers)) + (stripPx(dataWidth) || getMaxWidth(headers)) + 80 + 'px';
    return _react2.default.createElement(
      Container,
      { width: containerWidth },
      headers.map(function (header, index) {
        if (header.showInRowEditor) {
          var ident = header.ident,
              display = header.display,
              isKey = header.isKey;

          return _react2.default.createElement(
            RowContainer,
            { key: ident || '-editor' },
            _react2.default.createElement(
              Header,
              { isKey: isKey, width: headerWidth || width },
              display || ident
            ),
            renderEditor({
              width: dataWidth || width,
              valueChanged: valueChanged,
              ref: index === 0 ? initialFocusRef : undefined,
              rowData: rowData,
              header: header,
              index: index,
              onOk: onOk,
              onCancel: onCancel,
              isKey: isKey,
              showAdd: showAdd
            })
          );
        } else return null;
      }),
      renderControls({ onOk: onOk, onCancel: onCancel })
    );
  };
};

exports.default = rendeRowEditorContent;
//# sourceMappingURL=renderRowEditorContent.js.map