cloudhub-components
Version:
Various components to use in react projects
401 lines (375 loc) • 16.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
var _ThemeContext = _interopRequireDefault(require("./theme/ThemeContext"));
var _excluded = ["h1", "h2", "h3", "h4", "h5", "h6", "title", "subTitle", "header", "subHeader", "body", "caption", "small", "size", "transform", "button", "regular", "bold", "normal", "semibold", "medium", "weight", "light", "thin", "italic", "underline", "strikethrough", "center", "right", "spacing", "height", "noWrap", "fullWidth", "link", "color", "accent", "primary", "secondary", "tertiary", "black", "white", "gray", "gray2", "darkGray", "gray3", "gray4", "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", "cropped", "middle"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
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; }
var Text = function Text(_ref) {
var h1 = _ref.h1,
h2 = _ref.h2,
h3 = _ref.h3,
h4 = _ref.h4,
h5 = _ref.h5,
h6 = _ref.h6,
title = _ref.title,
subTitle = _ref.subTitle,
header = _ref.header,
subHeader = _ref.subHeader,
body = _ref.body,
caption = _ref.caption,
small = _ref.small,
size = _ref.size,
transform = _ref.transform,
button = _ref.button,
regular = _ref.regular,
bold = _ref.bold,
normal = _ref.normal,
semibold = _ref.semibold,
medium = _ref.medium,
weight = _ref.weight,
light = _ref.light,
thin = _ref.thin,
italic = _ref.italic,
underline = _ref.underline,
strikethrough = _ref.strikethrough,
center = _ref.center,
right = _ref.right,
spacing = _ref.spacing,
height = _ref.height,
noWrap = _ref.noWrap,
fullWidth = _ref.fullWidth,
link = _ref.link,
color = _ref.color,
accent = _ref.accent,
primary = _ref.primary,
secondary = _ref.secondary,
tertiary = _ref.tertiary,
black = _ref.black,
white = _ref.white,
gray = _ref.gray,
gray2 = _ref.gray2,
darkGray = _ref.darkGray,
gray3 = _ref.gray3,
gray4 = _ref.gray4,
dark = _ref.dark,
mistyWhite = _ref.mistyWhite,
milkyWhite = _ref.milkyWhite,
error = _ref.error,
clear = _ref.clear,
facebook = _ref.facebook,
transparent = _ref.transparent,
silver = _ref.silver,
steel = _ref.steel,
ricePaper = _ref.ricePaper,
frost = _ref.frost,
cloud = _ref.cloud,
windowTint = _ref.windowTint,
panther = _ref.panther,
charcoal = _ref.charcoal,
coal = _ref.coal,
bloodOrange = _ref.bloodOrange,
snow = _ref.snow,
ember = _ref.ember,
fire = _ref.fire,
drawer = _ref.drawer,
eggplant = _ref.eggplant,
twitterColor = _ref.twitterColor,
facebookColor = _ref.facebookColor,
googleColor = _ref.googleColor,
linkedinColor = _ref.linkedinColor,
pinterestColor = _ref.pinterestColor,
youtubeColor = _ref.youtubeColor,
tumblrColor = _ref.tumblrColor,
behanceColor = _ref.behanceColor,
dribbbleColor = _ref.dribbbleColor,
redditColor = _ref.redditColor,
instagramColor = _ref.instagramColor,
success = _ref.success,
info = _ref.info,
rose = _ref.rose,
warning = _ref.warning,
danger = _ref.danger,
style = _ref.style,
children = _ref.children,
classes = _ref.classes,
cropped = _ref.cropped,
middle = _ref.middle,
props = _objectWithoutProperties(_ref, _excluded);
var _ref2 = _react.default.useContext(_ThemeContext.default) || {
fonts: {},
colors: {}
},
fonts = _ref2.fonts,
colors = _ref2.colors;
var _React$useState = _react.default.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
hovered = _React$useState2[0],
sethovered = _React$useState2[1];
var styles = {
// default style
text: {
color: 'inherit'
},
// variations
regular: {
fontWeight: 'normal'
},
bold: fonts.bold,
semibold: _objectSpread({}, fonts.semibold),
medium: {
fontWeight: '500'
},
light: fonts.light,
normal: fonts.normal,
thin: {
fontWeight: 100
},
italic: fonts.italic,
underline: fonts.underline,
strikethrough: fonts.strikethrough,
// position
center: {
textAlign: 'center'
},
right: {
textAlign: 'right'
},
middle: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center'
},
// colors
accent: {
color: colors.accent
},
primary: {
color: colors.primary
},
secondary: {
color: colors.secondary
},
tertiary: {
color: colors.tertiary
},
black: {
color: colors.black
},
white: {
color: colors.white
},
gray: {
color: colors.gray
},
gray2: {
color: colors.gray2
},
dark: {
color: colors.dark
},
darkGray: {
color: colors.darkGray
},
gray3: {
color: colors.gray3
},
gray4: {
color: colors.gray4
},
mistyWhite: {
color: colors.mistyWhite
},
milkyWhite: {
color: colors.milkyWhite
},
error: {
color: colors.error
},
clear: {
color: colors.clear
},
facebook: {
color: colors.facebook
},
transparent: {
color: colors.transparent
},
silver: {
color: colors.silver
},
steel: {
color: colors.steel
},
ricePaper: {
color: colors.ricePaper
},
frost: {
color: colors.frost
},
cloud: {
color: colors.cloud
},
windowTint: {
color: colors.windowTint
},
panther: {
color: colors.panther
},
charcoal: {
color: colors.charcoal
},
coal: {
color: colors.coal
},
bloodOrange: {
color: colors.bloodOrange
},
snow: {
color: colors.snow
},
ember: {
color: colors.ember
},
fire: {
color: colors.fire
},
drawer: {
color: colors.drawer
},
eggplant: {
color: colors.eggplant
},
twitterColor: {
color: colors.twitterColor
},
facebookColor: {
color: colors.facebookColor
},
googleColor: {
color: colors.googleColor
},
linkedinColor: {
color: colors.linkedinColor
},
pinterestColor: {
color: colors.pinterestColor
},
youtubeColor: {
color: colors.youtubeColor
},
tumblrColor: {
color: colors.tumblrColor
},
behanceColor: {
color: colors.behanceColor
},
dribbbleColor: {
color: colors.dribbbleColor
},
redditColor: {
color: colors.redditColor
},
instagramColor: {
color: colors.instagramColor
},
success: {
color: colors.success
},
info: {
color: colors.info
},
rose: {
color: colors.rose
},
warning: {
color: colors.warning
},
danger: {
color: colors.danger
},
// fonts
h1: fonts.h1,
h2: fonts.h2,
h3: fonts.h3,
h4: fonts.h4,
h5: fonts.h5,
h6: fonts.h6,
title: fonts.title,
subTitle: fonts.subTitle,
header: fonts.header,
subHeader: fonts.subHeader,
body: fonts.body,
caption: fonts.caption,
small: fonts.small,
button: fonts.button
};
var textStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, styles.text), h1 && styles.h1), h2 && styles.h2), h3 && styles.h3), h4 && styles.h4), h5 && styles.h5), h6 && styles.h6), title && styles.title), subTitle && styles.subTitle), header && styles.header), subHeader && styles.subHeader), 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'
}), fullWidth && {
minWidth: '100%'
}), spacing && {
letterSpacing: spacing
}), weight && {
fontWeight: weight
}), regular && styles.regular), bold && styles.bold), semibold && styles.semibold), medium && styles.medium), light && styles.light), thin && styles.thin), italic && styles.italic), underline && styles.underline), strikethrough && styles.strikethrough), normal && styles.normal), center && styles.center), middle && styles.middle), right && styles.right), color && styles[color]), color && !styles[color] && {
color: color
}), link && hovered && _objectSpread(_objectSpread({}, styles.underline), {}, {
cursor: 'pointer'
})), 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), darkGray && styles.darkGray), gray3 && styles.gray3), gray4 && styles.gray4), 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);
if (cropped) {
return /*#__PURE__*/_react.default.createElement("span", {
onMouseEnter: function onMouseEnter() {
return sethovered(true);
},
onMouseLeave: function onMouseLeave() {
return sethovered(false);
},
style: _objectSpread(_objectSpread({}, textStyles), {}, {
display: 'inline-block',
lineHeight: '0.75em'
})
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
component: "span",
style: {
position: 'relative',
bottom: '-0.13em'
}
}, children));
}
return /*#__PURE__*/_react.default.createElement(_Typography.default, _extends({
component: "span",
onMouseEnter: function onMouseEnter() {
return sethovered(true);
},
onMouseLeave: function onMouseLeave() {
return sethovered(false);
},
style: textStyles
}, props), children);
};
var _default = Text;
exports.default = _default;