@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 = undefined;

var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  border-left: 1px solid #ccc;\n  align-items: center;\n  user-select: none;\n  cursor: default;\n  justify-content: ', ';\n  ', '\n  ', '\n  ', '\n  ', '\n  padding-left: 0.2em;\n  padding-right: 0.2em;\n'], ['\n  display: flex;\n  border-left: 1px solid #ccc;\n  align-items: center;\n  user-select: none;\n  cursor: default;\n  justify-content: ', ';\n  ', '\n  ', '\n  ', '\n  ', '\n  padding-left: 0.2em;\n  padding-right: 0.2em;\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n  border: 2px solid black;\n  text-align: ', ';\n  ', '\n  ', '\n  padding-left: 0.2em;\n  padding-right: 0.2em;\n'], ['\n  border: 2px solid black;\n  text-align: ', ';\n  ', '\n  ', '\n  padding-left: 0.2em;\n  padding-right: 0.2em;\n']),
    _templateObject3 = _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: 1.3em;\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 steelblue;\n    border-top-left-radius: 3px;\n  }\n  &:last-child {\n    ', ';\n  }\n'], ['\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: 1.3em;\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 steelblue;\n    border-top-left-radius: 3px;\n  }\n  &:last-child {\n    ', ';\n  }\n']),
    _templateObject4 = _taggedTemplateLiteral(['\n  justify-self: flex-end;\n  margin-left: 0.2em;\n'], ['\n  justify-self: flex-end;\n  margin-left: 0.2em;\n']),
    _templateObject5 = _taggedTemplateLiteral(['\n  flex: 0 0 ', 'px;\n  width: ', 'px;\n  max-width: ', 'px;\n'], ['\n  flex: 0 0 ', 'px;\n  width: ', 'px;\n  max-width: ', 'px;\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _DropdownCellEditor = require('./DropdownCellEditor');

var _DropdownCellEditor2 = _interopRequireDefault(_DropdownCellEditor);

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 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';

  return props.isHovered && props.isSelected ? hoverSelectionBackgroundColor : props.isHovered ? hoverBackgroundColor : props.isSelected ? selectionBackgroundColor : backgroundColor;
};

/* prettier-ignore */
var BasicCell = exports.BasicCell = _styledComponents2.default.div(_templateObject, function (props) {
  return mapAlignmentToJustifyContent(props.alignment) || 'center';
}, function (props) {
  return 'font-size: ' + (props.fontSize || 'unset') + ';';
}, function (props) {
  return 'color: ' + cellColorOf(props) + ';';
}, function (props) {
  return 'background-color:' + cellBgColorOf(props) + ';';
}, function (props) {
  return 'font-weight: ' + (props.fontWeight || 'normal') + ';';
});

/* prettier-ignore */
var BasicCellInput = exports.BasicCellInput = _styledComponents2.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 + ';' : '';
});

var BasicColHeader = exports.BasicColHeader = _styledComponents2.default.div(_templateObject3, function (props) {
  return props.sortable ? 'pointer' : 'default';
}, function (props) {
  return props.backgroundColor || 'steelblue';
}, function (props) {
  return props.color || 'white';
}, function (props) {
  return props.fontWeight || 'bold';
}, function (props) {
  return props.fontSize || '0.85em';
}, function (props) {
  return !props.scrollY && 'border-top-right-radius: 3px;';
});

var SortIndicator = exports.SortIndicator = _styledComponents2.default.i(_templateObject4);

var inputCellEditRender = exports.inputCellEditRender = function inputCellEditRender(_ref) {
  var getInputProps = _ref.getInputProps;
  return _react2.default.createElement(CellInputEditor, getInputProps({ refKey: 'innerRef' }));
};

var dropdownEditRender = exports.dropdownEditRender = function dropdownEditRender(_ref2) {
  var getDropdownProps = _ref2.getDropdownProps;
  return _react2.default.createElement(_DropdownCellEditor2.default, getDropdownProps({ refKey: 'innerRef' }));
};
var CellInputEditor = exports.CellInputEditor = BasicCellInput.extend(_templateObject5, function (props) {
  return props.width;
}, function (props) {
  return props.width;
}, function (props) {
  return props.width;
});
//# sourceMappingURL=Components.js.map