cinnecta-ui/lib/components/Text.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, {
  bold: _propTypes.default.bool,
  collapsed: _propTypes.default.bool,
  disabled: _propTypes.default.bool,
  error: _propTypes.default.bool,
  inline: _propTypes.default.bool,
  inverse: _propTypes.default.bool,
  loading: _propTypes.default.bool,
  large: _propTypes.default.bool,
  light: _propTypes.default.bool,
  micro: _propTypes.default.bool,
  muted: _propTypes.default.bool,
  small: _propTypes.default.bool,
  short: _propTypes.default.bool,
  shimmerHeight: _propTypes.default.string,
  shimmerWidth: _propTypes.default.string,
  children: _propTypes.default.any
});

var Text = function Text(_ref) {
  var children = _ref.children,
      collapsed = _ref.collapsed,
      bold = _ref.bold,
      disabled = _ref.disabled,
      error = _ref.error,
      inline = _ref.inline,
      inverse = _ref.inverse,
      loading = _ref.loading,
      large = _ref.large,
      light = _ref.light,
      micro = _ref.micro,
      muted = _ref.muted,
      short = _ref.short,
      shimmerHeight = _ref.shimmerHeight,
      shimmerWidth = _ref.shimmerWidth,
      small = _ref.small,
      styles = _ref.styles;

  if (small) {
    return _react.default.createElement("small", (0, _withStyles.css)(styles.text, bold && styles.text_bold, collapsed && styles.text_collapsed, disabled && styles.text_disabled, error && styles.text_error, inverse && styles.text_inverse, large && styles.text_large, light && styles.text_light, micro && styles.text_micro, muted && styles.text_muted, short && styles.text_short, small && styles.text_small, inline && styles.text_inline), loading ? _react.default.createElement(_Shimmer.default, {
      height: shimmerHeight || '1ex',
      width: shimmerWidth || '60%'
    }) : children);
  } else if (inline) {
    return _react.default.createElement("span", (0, _withStyles.css)(styles.text, !loading && styles.text_inline, bold && styles.text_bold, collapsed && styles.text_collapsed, error && styles.text_error, disabled && styles.text_disabled, inverse && styles.text_inverse, large && styles.text_large, light && styles.text_light, micro && styles.text_micro, muted && styles.text_muted, short && styles.text_short, small && styles.text_small), loading ? _react.default.createElement(_Shimmer.default, {
      height: shimmerHeight || '1ex',
      width: shimmerWidth || '60%'
    }) : children);
  }

  return _react.default.createElement("p", (0, _withStyles.css)(styles.text, bold && styles.text_bold, collapsed && styles.text_collapsed, disabled && styles.text_disabled, error && styles.text_error, inverse && styles.text_inverse, large && styles.text_large, light && styles.text_light, micro && styles.text_micro, muted && styles.text_muted, short && styles.text_short, small && styles.text_small, inline && styles.text_inline), loading ? _react.default.createElement(_Shimmer.default, {
    height: "1ex",
    width: "60%"
  }) : children);
};

Text.propTypes = propTypes;
var TextWithStyles = (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 {
    text: _defineProperty({
      wordWrap: 'break-word',
      letterSpacing: 'normal',
      fontFamily: font.default,
      color: color.grayDarker,
      fontWeight: weight.normal,
      fontSize: fontSize.small.regular,
      lineHeight: lineHeight.regular,
      margin: 0,
      padding: 0,
      display: 'block'
    }, breakpoint.large, {
      fontSize: fontSize.large.regular
    }),
    text_bold: {
      fontWeight: weight.bold
    },
    text_collapsed: {
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis'
    },
    text_disabled: {
      opacity: .5
    },
    text_error: {
      color: color.alertDark
    },
    text_inverse: {
      color: color.white
    },
    text_large: _defineProperty({
      fontSize: fontSize.small.large
    }, breakpoint.large, {
      fontSize: fontSize.large.large
    }),
    text_light: {
      fontWeight: weight.light
    },
    text_micro: _defineProperty({
      fontSize: fontSize.small.micro
    }, breakpoint.large, {
      fontSize: fontSize.large.micro
    }),
    text_muted: {
      color: color.blueGrayDark
    },
    text_short: {
      lineHeight: lineHeight.short
    },
    text_small: _defineProperty({
      fontSize: fontSize.small.small
    }, breakpoint.large, {
      fontSize: fontSize.large.small
    }),
    text_inline: {
      display: 'inline-block'
    }
  };
})(Text);
var _default = TextWithStyles;
exports.default = _default;