cloudhubui
Version:
Various components to use in react projects
347 lines (330 loc) • 12.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _Block = _interopRequireDefault(require("./Block"));
var _ThemeContext = _interopRequireDefault(require("./theme/ThemeContext"));
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; }
var IconLabel = function IconLabel(_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,
center = _ref.center,
right = _ref.right,
spacing = _ref.spacing,
height = _ref.height,
noWrap = _ref.noWrap,
fullWidth = _ref.fullWidth,
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,
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,
icon = _ref.icon,
blockProps = _ref.blockProps;
var _React$useContext = _react.default.useContext(_ThemeContext.default),
fonts = _React$useContext.fonts,
colors = _React$useContext.colors,
sizes = _React$useContext.sizes;
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
},
// position
center: {
textAlign: 'center'
},
right: {
textAlign: 'right'
},
// 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
},
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({}, 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), normal && styles.normal), 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);
var renderText = function renderText() {
return /*#__PURE__*/_react.default.createElement("span", {
style: _objectSpread(_objectSpread({}, textStyles), {}, {
display: 'inline-block',
lineHeight: '0.75em'
})
}, /*#__PURE__*/_react.default.createElement("span", {
style: {
position: 'relative',
bottom: '-0.13em'
}
}, children));
};
var renderIcon = function renderIcon(IconComponent) {
return IconComponent ? /*#__PURE__*/_react.default.createElement(IconComponent, {
style: _objectSpread({
marginRight: sizes.margin
}, textStyles)
}) : null;
};
return /*#__PURE__*/_react.default.createElement(_Block.default, _extends({
row: true,
middle: true,
flex: false,
wrap: true
}, blockProps), renderIcon(icon), " ", renderText());
};
IconLabel.defaultProps = {
icon: null
};
var _default = IconLabel;
exports.default = _default;