cloudhub-react-components
Version:
Various components to use in react projects
370 lines (340 loc) • 15.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _Colors = _interopRequireDefault(require("./theme/Colors"));
var _Sizes = _interopRequireDefault(require("./theme/Sizes"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(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; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var Text =
/*#__PURE__*/
function (_Component) {
_inherits(Text, _Component);
function Text(props) {
var _this;
_classCallCheck(this, Text);
_this = _possibleConstructorReturn(this, _getPrototypeOf(Text).call(this, props));
_this.state = {};
return _this;
}
_createClass(Text, [{
key: "render",
value: function render() {
var _this$props = this.props,
h1 = _this$props.h1,
h2 = _this$props.h2,
h3 = _this$props.h3,
title = _this$props.title,
header = _this$props.header,
body = _this$props.body,
caption = _this$props.caption,
small = _this$props.small,
size = _this$props.size,
transform = _this$props.transform,
button = _this$props.button,
regular = _this$props.regular,
bold = _this$props.bold,
semibold = _this$props.semibold,
medium = _this$props.medium,
weight = _this$props.weight,
light = _this$props.light,
center = _this$props.center,
right = _this$props.right,
spacing = _this$props.spacing,
height = _this$props.height,
noWrap = _this$props.noWrap,
color = _this$props.color,
accent = _this$props.accent,
primary = _this$props.primary,
secondary = _this$props.secondary,
tertiary = _this$props.tertiary,
black = _this$props.black,
white = _this$props.white,
gray = _this$props.gray,
gray2 = _this$props.gray2,
dark = _this$props.dark,
mistyWhite = _this$props.mistyWhite,
milkyWhite = _this$props.milkyWhite,
error = _this$props.error,
clear = _this$props.clear,
facebook = _this$props.facebook,
transparent = _this$props.transparent,
silver = _this$props.silver,
steel = _this$props.steel,
ricePaper = _this$props.ricePaper,
frost = _this$props.frost,
cloud = _this$props.cloud,
windowTint = _this$props.windowTint,
panther = _this$props.panther,
charcoal = _this$props.charcoal,
coal = _this$props.coal,
bloodOrange = _this$props.bloodOrange,
snow = _this$props.snow,
ember = _this$props.ember,
fire = _this$props.fire,
drawer = _this$props.drawer,
eggplant = _this$props.eggplant,
twitterColor = _this$props.twitterColor,
facebookColor = _this$props.facebookColor,
googleColor = _this$props.googleColor,
linkedinColor = _this$props.linkedinColor,
pinterestColor = _this$props.pinterestColor,
youtubeColor = _this$props.youtubeColor,
tumblrColor = _this$props.tumblrColor,
behanceColor = _this$props.behanceColor,
dribbbleColor = _this$props.dribbbleColor,
redditColor = _this$props.redditColor,
instagramColor = _this$props.instagramColor,
success = _this$props.success,
info = _this$props.info,
rose = _this$props.rose,
warning = _this$props.warning,
danger = _this$props.danger,
style = _this$props.style,
children = _this$props.children,
classes = _this$props.classes,
props = _objectWithoutProperties(_this$props, ["h1", "h2", "h3", "title", "header", "body", "caption", "small", "size", "transform", "button", "regular", "bold", "semibold", "medium", "weight", "light", "center", "right", "spacing", "height", "noWrap", "color", "accent", "primary", "secondary", "tertiary", "black", "white", "gray", "gray2", "dark", "mistyWhite", "milkyWhite", "error", "clear", "facebook", "transparent", "silver", "steel", "ricePaper", "frost", "cloud", "windowTint", "panther", "charcoal", "coal", "bloodOrange", "snow", "ember", "fire", "drawer", "eggplant", "twitterColor", "facebookColor", "googleColor", "linkedinColor", "pinterestColor", "youtubeColor", "tumblrColor", "behanceColor", "dribbbleColor", "redditColor", "instagramColor", "success", "info", "rose", "warning", "danger", "style", "children", "classes"]);
var textStyles = _objectSpread({}, styles.text, {}, h1 && styles.h1, {}, h2 && styles.h2, {}, h3 && styles.h3, {}, title && styles.title, {}, header && styles.header, {}, body && styles.body, {}, caption && styles.caption, {}, small && styles.small, {}, size && {
fontSize: size
}, {}, button && styles.button, {}, transform && {
textTransform: transform
}, {}, height && {
lineHeight: height
}, {}, noWrap && {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
}, {}, spacing && {
letterSpacing: spacing
}, {}, weight && {
fontWeight: weight
}, {}, regular && styles.regular, {}, bold && styles.bold, {}, semibold && styles.semibold, {}, medium && styles.medium, {}, light && styles.light, {}, center && styles.center, {}, right && styles.right, {}, color && styles[color], {}, color && !styles[color] && {
color: color
}, {}, accent && styles.accent, {}, primary && styles.primary, {}, secondary && styles.secondary, {}, tertiary && styles.tertiary, {}, black && styles.black, {}, white && styles.white, {}, gray && styles.gray, {}, gray2 && styles.gray2, {}, dark && styles.dark, {}, error && styles.error, {}, mistyWhite && styles.mistyWhite, {}, milkyWhite && styles.milkyWhite, {}, clear && styles.clear, {}, facebook && styles.facebook, {}, transparent && styles.transparent, {}, silver && styles.silver, {}, steel && styles.steel, {}, error && styles.error, {}, ricePaper && styles.ricePaper, {}, frost && styles.frost, {}, cloud && styles.cloud, {}, windowTint && styles.windowTint, {}, panther && styles.panther, {}, charcoal && styles.charcoal, {}, coal && styles.coal, {}, bloodOrange && styles.bloodOrange, {}, snow && styles.snow, {}, ember && styles.ember, {}, fire && styles.fire, {}, drawer && styles.drawer, {}, eggplant && styles.eggplant, {}, twitterColor && styles.twitterColor, {}, facebookColor && styles.facebookColor, {}, googleColor && styles.googleColor, {}, linkedinColor && styles.linkedinColor, {}, pinterestColor && styles.pinterestColor, {}, youtubeColor && styles.youtubeColor, {}, tumblrColor && styles.tumblrColor, {}, behanceColor && styles.behanceColor, {}, dribbbleColor && styles.dribbbleColor, {}, redditColor && styles.redditColor, {}, instagramColor && styles.instagramColor, {}, success && styles.success, {}, info && styles.info, {}, rose && styles.rose, {}, warning && styles.warning, {}, danger && styles.danger, {}, style);
return _react.default.createElement("span", _extends({
style: textStyles
}, props), children);
}
}]);
return Text;
}(_react.Component);
var styles = {
// default style
text: {
fontSize: _Sizes.default.font,
color: _Colors.default.black
},
// variations
regular: {
fontWeight: 'normal'
},
bold: {
fontWeight: 'bold'
},
semibold: {
fontWeight: '500'
},
medium: {
fontWeight: '500'
},
light: {
fontWeight: '200'
},
thin: {
fontWeight: 100
},
// position
center: {
textAlign: 'center'
},
right: {
textAlign: 'right'
},
// colors
accent: {
color: _Colors.default.accent
},
primary: {
color: _Colors.default.primary
},
secondary: {
color: _Colors.default.secondary
},
tertiary: {
color: _Colors.default.tertiary
},
black: {
color: _Colors.default.black
},
white: {
color: _Colors.default.white
},
gray: {
color: _Colors.default.gray
},
gray2: {
color: _Colors.default.gray2
},
dark: {
color: _Colors.default.dark
},
mistyWhite: {
color: _Colors.default.mistyWhite
},
milkyWhite: {
color: _Colors.default.milkyWhite
},
error: {
color: _Colors.default.error
},
clear: {
color: _Colors.default.clear
},
facebook: {
color: _Colors.default.facebook
},
transparent: {
color: _Colors.default.transparent
},
silver: {
color: _Colors.default.silver
},
steel: {
color: _Colors.default.steel
},
ricePaper: {
color: _Colors.default.ricePaper
},
frost: {
color: _Colors.default.frost
},
cloud: {
color: _Colors.default.cloud
},
windowTint: {
color: _Colors.default.windowTint
},
panther: {
color: _Colors.default.panther
},
charcoal: {
color: _Colors.default.charcoal
},
coal: {
color: _Colors.default.coal
},
bloodOrange: {
color: _Colors.default.bloodOrange
},
snow: {
color: _Colors.default.snow
},
ember: {
color: _Colors.default.ember
},
fire: {
color: _Colors.default.fire
},
drawer: {
color: _Colors.default.drawer
},
eggplant: {
color: _Colors.default.eggplant
},
twitterColor: {
color: _Colors.default.twitterColor
},
facebookColor: {
color: _Colors.default.facebookColor
},
googleColor: {
color: _Colors.default.googleColor
},
linkedinColor: {
color: _Colors.default.linkedinColor
},
pinterestColor: {
color: _Colors.default.pinterestColor
},
youtubeColor: {
color: _Colors.default.youtubeColor
},
tumblrColor: {
color: _Colors.default.tumblrColor
},
behanceColor: {
color: _Colors.default.behanceColor
},
dribbbleColor: {
color: _Colors.default.dribbbleColor
},
redditColor: {
color: _Colors.default.redditColor
},
instagramColor: {
color: _Colors.default.instagramColor
},
success: {
color: _Colors.default.success
},
info: {
color: _Colors.default.info
},
rose: {
color: _Colors.default.rose
},
warning: {
color: _Colors.default.warning
},
danger: {
color: _Colors.default.danger
},
// fonts
h1: {
fontSize: _Sizes.default.h1
},
h2: {
fontSize: _Sizes.default.h2
},
h3: {
fontSize: _Sizes.default.h3
},
title: {
fontSize: _Sizes.default.title
},
header: {
fontSize: _Sizes.default.header
},
body: {
fontSize: _Sizes.default.body
},
caption: {
fontSize: _Sizes.default.caption
},
small: {
fontSize: _Sizes.default.small
},
button: {
fontSize: _Sizes.default.button
}
};
var _default = Text;
exports.default = _default;
//# sourceMappingURL=Text.js.map