cinnecta-ui/lib/components/Title.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _withStyles = require("../helpers/withStyles");

var _reactWithStyles = require("react-with-styles");

var _Shimmer = _interopRequireDefault(require("./Shimmer"));

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

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

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

var propTypes = _objectSpread({}, _reactWithStyles.withStylesPropTypes, {
  inline: _propTypes.default.bool,
  inverse: _propTypes.default.bool,
  loading: _propTypes.default.bool,
  level: _propTypes.default.oneOf([1, 2, 3]),
  light: _propTypes.default.bool,
  muted: _propTypes.default.bool,
  noBottomSpacing: _propTypes.default.bool,
  noSpacing: _propTypes.default.bool,
  noTopSpacing: _propTypes.default.bool,
  title: _propTypes.default.string,
  truncate: _propTypes.default.bool,
  shimmerWidth: _propTypes.default.string,
  children: _propTypes.default.any
});

var defaultProps = {
  level: 1
};

var Title = function Title(_ref) {
  var children = _ref.children,
      inline = _ref.inline,
      inverse = _ref.inverse,
      loading = _ref.loading,
      level = _ref.level,
      light = _ref.light,
      muted = _ref.muted,
      noBottomSpacing = _ref.noBottomSpacing,
      noSpacing = _ref.noSpacing,
      noTopSpacing = _ref.noTopSpacing,
      title = _ref.title,
      truncate = _ref.truncate,
      shimmerWidth = _ref.shimmerWidth,
      styles = _ref.styles;

  var content = function content() {
    switch (level) {
      case 1:
        return _react.default.createElement("h1", (0, _withStyles.css)(styles.title__header), children ? children : title);

      case 2:
        return _react.default.createElement("h2", (0, _withStyles.css)(styles.title__header), children ? children : title);

      case 3:
        return _react.default.createElement("h3", (0, _withStyles.css)(styles.title__header), children ? children : title);

      default:
        return _react.default.createElement("h1", (0, _withStyles.css)(styles.title__header), children ? children : title);
    }
  };

  return _react.default.createElement("div", (0, _withStyles.css)(styles.title, inline && styles.title_inline, inverse && styles.title_inverse, level === 1 && styles.title_level1, level === 2 && styles.title_level2, level === 3 && styles.title_level3, light && styles.title_light, muted && styles.title_muted, (noTopSpacing || noSpacing) && styles.title_noTopSpacing, (noBottomSpacing || noSpacing) && styles.title_noBottomSpacing, truncate && styles.title_truncate), loading ? _react.default.createElement(_Shimmer.default, {
    height: "1ex",
    width: shimmerWidth || '60%'
  }) : content());
};

Title.propTypes = propTypes;
Title.defaultProps = defaultProps;
var TitleWithStyles = (0, _withStyles.withStyles)(function (_ref2) {
  var units = _ref2.units,
      color = _ref2.color,
      weight = _ref2.weight,
      fontSize = _ref2.fontSize,
      lineHeight = _ref2.lineHeight,
      font = _ref2.font,
      breakpoint = _ref2.breakpoint;
  return {
    title: {
      wordWrap: 'break-word',
      letterSpacing: 'normal',
      fontFamily: font.default,
      color: color.grayDarker,
      fontWeight: weight.bold,
      lineHeight: lineHeight.short,
      margin: 0,
      paddingTop: units(0.5),
      paddingBottom: units(0.5),
      display: 'block'
    },
    title_inverse: {
      color: color.white
    },
    title_level1: _defineProperty({
      fontSize: fontSize.small.title1
    }, breakpoint.large, {
      fontSize: fontSize.large.title1
    }),
    title_level2: _defineProperty({
      fontSize: fontSize.small.title2
    }, breakpoint.large, {
      fontSize: fontSize.large.title2
    }),
    title_level3: _defineProperty({
      fontSize: fontSize.small.title3
    }, breakpoint.large, {
      fontSize: fontSize.large.title3
    }),
    title_light: {
      fontWeight: weight.light
    },
    title_muted: {
      color: color.blueGrayDark
    },
    title_noBottomSpacing: {
      paddingBottom: 0
    },
    title_noTopSpacing: {
      paddingTop: 0
    },
    title_truncate: {
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis'
    },
    title_inline: {
      display: 'inline-block'
    },
    title__header: {
      fontSize: '1em',
      lineHeight: 'inherit',
      fontWeight: 'inherit',
      color: 'inherit',
      margin: 0,
      padding: 0,
      display: 'flex',
      alignItems: 'center'
    }
  };
})(Title);
var _default = TitleWithStyles;
exports.default = _default;