material-date-range-picker/Components.js

React components, that implements material design pickers for material-ui v1

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.Header = exports.SelectableCell = exports.Cell = exports.Text = exports.Row = exports.HeaderDivider = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

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

var _Divider = _interopRequireDefault(require("@material-ui/core/Divider"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _styles = require("@material-ui/core/styles");

var _colorManipulator = require("@material-ui/core/styles/colorManipulator");

function _templateObject6() {
  var data = (0, _taggedTemplateLiteralLoose2.default)(["\n  && {\n    * {\n      color: ", ";\n    }\n  }\n"]);

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

  return data;
}

function _templateObject5() {
  var data = (0, _taggedTemplateLiteralLoose2.default)(["\n  border-radius: ", ";\n  border-color: ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  background: ", ";\n  && {\n    * {\n      color: ", ";\n    }\n  }\n"]);

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

  return data;
}

function _templateObject4() {
  var data = (0, _taggedTemplateLiteralLoose2.default)(["\n  width: calc(\n    100% * ", " -\n      ", "px\n  );\n  padding-top: calc((100% / 7) - 2px);\n  margin: 2px 0;\n  position: relative;\n  border: 1px solid transparent;\n"]);

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

  return data;
}

function _templateObject3() {
  var data = (0, _taggedTemplateLiteralLoose2.default)(["\n  && {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n"]);

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

  return data;
}

function _templateObject2() {
  var data = (0, _taggedTemplateLiteralLoose2.default)(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n"]);

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

  return data;
}

function _templateObject() {
  var data = (0, _taggedTemplateLiteralLoose2.default)(["\n  && {\n    margin: 0 -8px 8px;\n  }\n"]);

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

  return data;
}

function fromTheme(theme, key, def) {
  if (!theme || !theme.dateRangePicker) return def;
  var value = theme.dateRangePicker[key];
  return typeof value !== 'undefined' ? value : def;
}

var HeaderDivider = (0, _styledComponents.default)(_Divider.default)(_templateObject());
exports.HeaderDivider = HeaderDivider;

var Row = _styledComponents.default.div(_templateObject2());

exports.Row = Row;
var Text = (0, _styledComponents.default)(_Typography.default)(_templateObject3());
exports.Text = Text;

var Cell = _styledComponents.default.div(_templateObject4(), function (_ref) {
  var _ref$widthPercentage = _ref.widthPercentage,
      widthPercentage = _ref$widthPercentage === void 0 ? 1 / 7 : _ref$widthPercentage;
  return widthPercentage;
}, function (_ref2) {
  var horizontalSpacing = _ref2.horizontalSpacing;
  return horizontalSpacing ? 3 : 0;
});

exports.Cell = Cell;

function getBorderRadius(_ref3) {
  var isInRange = _ref3.isInRange,
      isRangeStart = _ref3.isRangeStart,
      isRangeEnd = _ref3.isRangeEnd;
  if (isRangeStart) return '999px 0 0 999px';
  if (isRangeEnd) return '0 999px 999px 0';
  if (isInRange) return 0;
  return '999px';
}

function getBackground(_ref4) {
  var isInRange = _ref4.isInRange,
      isSelected = _ref4.isSelected,
      theme = _ref4.theme,
      isHighlighted = _ref4.isHighlighted;
  if (isSelected) return fromTheme(theme, 'selected', theme.palette.primary.main);
  if (isHighlighted) return fromTheme(theme, 'highlighted', '#ebebeb');
  if (isInRange) return fromTheme(theme, 'inRange', theme.palette.primary.light);
  return '#fff';
}

function getColor(props) {
  var isLessImportant = props.isLessImportant,
      isSelected = props.isSelected,
      theme = props.theme;
  var color = theme.palette.getContrastText(getBackground(props));
  if (isSelected || !isLessImportant) return color;
  return fromTheme(theme, 'lessImportant', (0, _colorManipulator.fade)(color, 0.54));
}

var SelectableCell = (0, _styles.withTheme)()((0, _styledComponents.default)(Cell)(_templateObject5(), getBorderRadius, function (_ref5) {
  var theme = _ref5.theme,
      isCurrent = _ref5.isCurrent;
  return isCurrent ? fromTheme(theme, 'current', '#9e9e9e') : 'transparent';
}, getBackground, getColor));
exports.SelectableCell = SelectableCell;
var Header = (0, _styles.withTheme)()((0, _styledComponents.default)(Cell)(_templateObject6(), function (_ref6) {
  var theme = _ref6.theme;
  return fromTheme(theme, 'header', '#9e9e9e');
}));
exports.Header = Header;