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

Integ Grid Tools

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CellInputEditor = exports.dropdownEditRender = exports.inputCellEditRender = exports.SortIndicator = exports.BasicColHeader = exports.BasicCellInput = exports.BasicCell = void 0;

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _DropdownCellEditor = _interopRequireDefault(require("./DropdownCellEditor"));

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

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n  flex: 0 0 ", "px;\n  width: ", "px;\n  max-width: ", "px;\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n  justify-self: flex-end;\n  margin-left: 0.2em;\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  border-right: 1px solid #ccc;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  user-select: none;\n  cursor: ", ";\n  background-color: ", ";\n  color: ", ";\n  line-height: 120%;\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  padding-left: 0.5em;\n  padding-right: 0.5em;\n  padding-top: 0.3em;\n  padding-bottom: 0.3em;\n  &:first-child {\n    border-left: 1px solid ", ";\n    border-top-left-radius: 3px;\n  }\n  &:last-child {\n    ", ";\n  }\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  border: 2px solid black;\n  text-align: ", ";\n  ", "\n  ", "\n  padding-left: 0.2em;\n  padding-right: 0.2em;\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n  border-left: 1px solid #ccc;\n  align-items: center;\n  text-align: center;\n  user-select: none;\n  cursor: default;\n  font-family: ", ";\n  justify-content: ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  padding-left: 0.2em;\n  padding-right: 0.2em;\n  vertical-align: baseline;\n  ", "\n\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var mapAlignmentToJustifyContent = function mapAlignmentToJustifyContent(alignment) {
  return alignment === 'left' ? 'flex-start' : alignment === 'right' ? 'flex-end' : alignment;
};

var cellColorOf = function cellColorOf(props) {
  var isSelected = props.isSelected,
      isHovered = props.isHovered;
  var hoverSelectionColor = props.hoverSelectionColor || 'white';
  var hoverColor = props.hoverColor || 'unset';
  var selectionColor = props.selectionColor || '#efefef';
  var color = props.color || 'unset';
  return isHovered && isSelected ? hoverSelectionColor : isSelected ? selectionColor : isHovered ? hoverColor : color;
};

var cellBgColorOf = function cellBgColorOf(props) {
  var backgroundColor = props.backgroundColor || 'unset';
  var hoverSelectionBackgroundColor = props.hoverSelectionBackgroundColor || '#333';
  var hoverBackgroundColor = props.hoverBackgroundColor || '#ddd';
  var selectionBackgroundColor = props.selectionBackgroundColor || '#666';
  var validationErrorBackgroundColor = props.errorBackgroundColor || '#ff726f'; // const fixCellBackgroundColor = props.fixedColData.backgroundColor || 'f2f2f2'

  if (props.invalidMessage) {
    return validationErrorBackgroundColor;
  } // if (props.headers[columnIndex].isKey === true) {
  //   return fixCellBackgroundColor
  // }


  return props.isHovered && props.isSelected ? hoverSelectionBackgroundColor : props.isHovered ? hoverBackgroundColor : props.isSelected ? selectionBackgroundColor : backgroundColor;
};
/* prettier-ignore */


var BasicCell = _styledComponents["default"].div(_templateObject(), function (props) {
  return props.fontFamily;
}, function (props) {
  return mapAlignmentToJustifyContent(props.alignment) || 'center';
}, function (props) {
  return "font-size: ".concat(props.fontSize || 'unset', ";");
}, function (props) {
  return "color: ".concat(cellColorOf(props), ";");
}, function (props) {
  return "background-color:".concat(cellBgColorOf(props), ";");
}, function (props) {
  return "font-weight: ".concat(props.fontWeight || 'normal', ";");
}, function (props) {
  return "border-right: ".concat(props.isLastInRow ? ' 1px solid #ccc' : 'unset', ";");
}); // border: ${props => {
//   console.log(props,"props")
//   return props.border}};

/* prettier-ignore */


exports.BasicCell = BasicCell;

var BasicCellInput = _styledComponents["default"].input(_templateObject2(), function (props) {
  return props.alignment;
}, function (props) {
  return props.fontSize ? 'font-size:' + props.fontSize + ';' : '';
}, function (props) {
  return props.fontWeight ? 'font-weight:' + props.fontWeight + ';' : '';
});

exports.BasicCellInput = BasicCellInput;

var BasicColHeader = _styledComponents["default"].div(_templateObject3(), function (props) {
  return props.sortable ? 'pointer' : 'default';
}, function (props) {
  return props.backgroundColor;
}, function (props) {
  return props.color;
}, function (props) {
  return props.fontFamily;
}, function (props) {
  return props.fontWeight;
}, function (props) {
  return props.fontSize;
}, function (props) {
  return props.backgroundColor;
}, function (props) {
  return !props.scrollY && 'border-top-right-radius: 3px;';
});

exports.BasicColHeader = BasicColHeader;

var SortIndicator = _styledComponents["default"].i(_templateObject4());

exports.SortIndicator = SortIndicator;

var inputCellEditRender = function inputCellEditRender(_ref) {
  var getInputProps = _ref.getInputProps;
  return _react["default"].createElement(CellInputEditor, getInputProps({
    refKey: 'innerRef'
  }));
};

exports.inputCellEditRender = inputCellEditRender;

var dropdownEditRender = function dropdownEditRender(_ref2) {
  var getDropdownProps = _ref2.getDropdownProps;
  return _react["default"].createElement(_DropdownCellEditor["default"], getDropdownProps({
    refKey: 'innerRef'
  }));
};

exports.dropdownEditRender = dropdownEditRender;
var CellInputEditor = BasicCellInput.extend(_templateObject5(), function (props) {
  return props.width;
}, function (props) {
  return props.width;
}, function (props) {
  return props.width;
});
exports.CellInputEditor = CellInputEditor;
//# sourceMappingURL=Components.js.map