@arche-mc2/arche-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
504 lines • 18.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var utils_1 = require("../../../Common/utils");
var classnames = require("classnames");
var typestyle_1 = require("typestyle");
var types_1 = require("./types");
var csx_1 = require("csx");
var utils_2 = require("../../../Common/theming/utils");
var DEFAULT_MIN_SIZE = utils_2.toRem(30);
var DEFAULT_BORDER_RADIUS = "4px";
var shadow = function (props) {
return {
boxShadow: 'inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1)',
};
};
var positions = function (props) {
var positions = {};
var offsetInPx = (props.theme.minButtonSize - 22) / 2 + "px";
if (props.width != 'icon') {
if (props.iconPosition === 'left') {
positions.position = 'absolute';
positions.top = offsetInPx;
positions.left = offsetInPx;
}
else if (props.iconPosition === 'right') {
positions.position = 'absolute';
positions.top = offsetInPx;
positions.right = offsetInPx;
}
}
return positions;
};
var base = function (props) {
return {
$nest: {
'&.up-btn': {
textAlign: 'center',
fontSize: utils_1.default(types_1.fontSizeMap[props.fontSize]),
borderColor: props.borderColor || props.theme.colorMap[props.intent + "Border"],
borderWidth: '1px',
borderStyle: 'solid',
paddingBottom: 0,
paddingTop: 0,
paddingLeft: props.width === 'icon' ? 0 : (props.iconName != null || props.actionType != null) && props.iconPosition === 'left' ? utils_2.toRem(32) : utils_2.toRem(6),
paddingRight: props.width === 'icon' ? 0 : (props.iconName != null || props.actionType != null) && props.iconPosition === 'right' ? utils_2.toRem(32) : utils_2.toRem(6),
textDecoration: 'none',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
position: 'relative',
minWidth: props.dropDown && props.width != 'icon' ? utils_2.toRem(44) : 'inherit',
},
'&.up-btn.up-btn-drop-down': {
paddingLeft: 0,
paddingRight: 0,
display: 'flex',
flexDirection: 'row-reverse'
},
'&.up-btn.up-btn-drop-down .up-btn-label': {
paddingRight: 0,
paddingLeft: 0,
marginRight: utils_2.toRem(28),
marginLeft: utils_2.toRem(28)
},
'&.up-btn.up-btn-drop-down .up-icon-wrapper': {
position: 'unset',
marginRight: utils_2.toRem(14)
},
'&.up-btn .up-icon-wrapper': tslib_1.__assign({}, positions(props)),
'&.up-btn svg': {
margin: 0,
display: 'inline-block',
},
'&.up-btn .up-btn-label': {
display: 'inline-block',
paddingTop: 0,
paddingLeft: props.width == "auto" ? utils_2.toRem(8) : 0,
paddingRight: props.width == "auto" ? utils_2.toRem(8) : 0,
color: props.isProcessing ? props.theme.colorMap.disabledBg : 'inherit',
width: '100%',
textAlign: 'center',
fontSize: utils_2.toRem(14),
},
'&.up-btn:focus': {
outline: 'transparent auto 0px',
outlineOffset: 0,
},
'&.up-btn .up-loading-indicator-wrapper': {
position: 'absolute',
top: '0',
left: '0',
width: '100%',
height: csx_1.calc('100%'),
display: 'flex',
alignContent: 'center',
justifyItems: 'center',
},
'&.up-btn .up-loading-indicator-wrapper > div': {
width: '100%',
height: csx_1.calc('100%'),
},
}
};
};
var disabled = function (props) {
return {
$nest: {
'&.up-btn[disabled]': {
cursor: 'not-allowed',
background: props.theme.colorMap.disabledBg,
color: props.theme.colorMap.disabledFg,
borderColor: props.theme.colorMap.disabledBg,
},
'&.up-btn[disabled] svg, &.up-btn[disabled] svg path, &.up-btn[disabled] svg polygon': {
fill: props.theme.colorMap.disabledFg
}
}
};
};
var toggle = function (props) {
return {
color: props.color ||
props.theme.colorMap[props.intent + "HoverFg"] ||
"black",
backgroundColor: props.color || props.theme.colorMap[props.intent + "Active"] || "white",
boxShadow: "inset 5px 5px 5px rgba(16, 22, 26, 0.2)",
$nest: {
"&.up-btn": {
backgroundColor: 'white',
boxShadow: 'unset',
color: "" + props.theme.colorMap[props.intent],
borderBottom: 'unset',
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
borderTopRightRadius: '4px',
borderTopLeftRadius: '4px !important'
},
"&.up-btn svg": {
transform: !props.disabled ? 'rotate(180deg)' : 'normal'
},
"&.up-btn svg, &.up-btn svg path, &.up-btn svg polygon, &.up-btn svg polyline": {
fill: (props.backgroundColor ||
props.theme.colorMap["" + props.intent]) + " !important",
},
}
};
};
var active = function (props) {
return {
color: props.color || props.theme.colorMap[props.intent + "Fg"] || "black",
backgroundColor: props.backgroundColor || props.theme.colorMap[props.intent],
borderColor: props.borderColor || props.theme.colorMap[props.intent + "Border"],
borderWidth: "1px",
borderStyle: "solid",
$nest: {
"&:hover": {
color: props.color ||
props.theme.colorMap[props.intent + "HoverFg"] ||
"black",
backgroundColor: props.color ||
props.theme.colorMap[props.intent + "Hover"] ||
"white",
borderColor: props.color ||
props.theme.colorMap[props.intent + "HoverBorder"] ||
"white"
},
"&.up-btn:hover .colored svg, &.up-btn:hover .colored svg path, &.up-btn:hover .colored svg polygon, &.up-btn:hover .colored svg polyline": {
fill: props.backgroundColor ||
props.theme.colorMap["" + props.intent + (props.dropDown === 'none' ? 'HoverFg' : '')]
},
"&:hover:active": {
color: props.color ||
props.theme.colorMap[props.intent + "HoverFg"] ||
"black",
backgroundColor: props.color ||
props.theme.colorMap[props.intent + "HoverActive"] ||
"white",
borderColor: props.color ||
props.theme.colorMap[props.intent + "HoverActiveBorder"] ||
"white"
},
"&:hover:active .colored svg, &:hover:active .colored svg path, &:hover:active .colored svg polygon, &:hover:active .colored svg polyline": {
fill: props.backgroundColor ||
props.theme.colorMap[props.intent + "HoverFg"]
},
"&:active": {
color: props.color ||
props.theme.colorMap[props.intent + "HoverFg"] ||
"black",
backgroundColor: props.color ||
props.theme.colorMap[props.intent + "Active"] ||
"white",
},
"&:active .colored svg, &:active .colored svg path, &:active .colored svg polygon, &:active .colored svg polyline": {
fill: props.backgroundColor ||
props.theme.colorMap[props.intent + "HoverFg"]
},
"&.up-btn .colored svg, &.up-btn .colored svg path, &.up-btn .colored svg polygon, &.up-btn .colored svg polyline": {
fill: props.color || props.theme.colorMap[props.intent + "Fg"] || "white",
},
"&.up-btn": {
cursor: "pointer"
},
}
};
};
var large = function (props) {
return {
fontSize: utils_2.toRem(18),
lineHeight: '1.3',
borderRadius: props.theme.borderRadius || DEFAULT_BORDER_RADIUS,
$nest: {
'&.up-btn svg': {
margin: 0,
width: utils_2.toRem(20),
height: utils_2.toRem(20),
}
}
};
};
var normal = function (props) {
return {
fontSize: utils_1.default(types_1.fontSizeMap[props.fontSize]),
height: props.theme.minButtonSize || DEFAULT_MIN_SIZE,
width: props.dropDown != 'none' ? "auto" : types_1.buttonSizeMap[props.width] || 'inherit',
borderRadius: props.theme.borderRadius || DEFAULT_BORDER_RADIUS,
$nest: {
'&.up-btn svg': {
margin: 0,
width: utils_2.toRem(20),
height: utils_2.toRem(20),
}
}
};
};
var small = function (props) {
return {
padding: utils_2.toRem(3) + " " + utils_2.toRem(8),
fontSize: utils_2.toRem(12),
lineHeight: '1.5',
borderRadius: '3px',
$nest: {
'&.up-btn svg': {
margin: 0,
width: props.iconSize ? props.iconSize : utils_2.toRem(16),
height: props.iconSize ? props.iconSize : utils_2.toRem(16),
}
}
};
};
var xsmall = function (props) {
return {
padding: utils_2.toRem(1) + " " + utils_2.toRem(4),
fontSize: utils_2.toRem(12),
lineHeight: '1.5',
borderRadius: '3px',
$nest: {
'&.up-btn svg': {
margin: 0,
width: props.iconSize ? props.iconSize : utils_2.toRem(12),
height: props.iconSize ? props.iconSize : utils_2.toRem(12),
}
}
};
};
var defaultIcon = function (props) {
var styles = {};
if (props.width === 'icon') {
styles = {
$nest: {
'&.up-btn .up-icon-wrapper': {
display: 'flex',
width: 'auto',
height: 'auto',
justifyContent: 'center',
alignItems: 'center',
}
}
};
}
return styles;
};
var icon = function (props) {
var styles = {
padding: 0,
height: utils_2.toRem(24),
width: utils_2.toRem(24),
minWidth: 'initial',
minHeight: 'initial',
borderRadius: '3px',
fontSize: utils_2.toRem(12),
lineHeight: '1.5',
$nest: {
'&.up-btn svg': {
margin: '0px !important',
width: props.iconSize ? props.iconSize : utils_2.toRem(15),
height: props.iconSize ? props.iconSize : utils_2.toRem(15),
padding: utils_2.toRem(3),
}
}
};
return styles;
};
var iconXSmall = function (props) {
var styles = {
padding: utils_2.toRem(1) + " " + utils_2.toRem(2),
minWidth: 'initial',
minHeight: 'initial',
borderRadius: '3px',
fontSize: utils_2.toRem(10),
width: utils_2.toRem(16),
height: utils_2.toRem(16),
lineHeight: '1',
$nest: {
'&.up-btn svg': {
margin: '3px',
width: props.iconSize ? props.iconSize : utils_2.toRem(12),
height: props.iconSize ? props.iconSize : utils_2.toRem(12),
}
}
};
return styles;
};
var iconSmall = function (props) {
var styles = {
padding: utils_2.toRem(3) + " " + utils_2.toRem(4),
minWidth: 'initial',
minHeight: 'initial',
borderRadius: '3px',
fontSize: utils_2.toRem(12),
lineHeight: '1.5',
$nest: {
'&.up-btn svg': {
margin: utils_2.toRem(3),
width: utils_2.toRem(16),
height: utils_2.toRem(16),
}
}
};
return styles;
};
exports.iconNormal = function (props) {
var styles = {
padding: utils_2.toRem(4) + " " + utils_2.toRem(5),
borderRadius: '3px',
minWidth: 'initial',
minHeight: 'initial',
fontSize: utils_2.toRem(12),
lineHeight: 1.5,
$nest: {
'&.up-btn svg': {
margin: utils_2.toRem(3),
width: utils_2.toRem(20),
height: utils_2.toRem(20),
}
}
};
return styles;
};
exports.iconLarge = function (props) {
return {
$nest: {
'&.up-btn': {
padding: utils_2.toRem(8),
borderRadius: '3px',
minWidth: 'initial',
minHeight: 'initial',
fontSize: utils_2.toRem(14),
lineHeight: 1.5,
},
'&.up-btn svg': {
margin: utils_2.toRem(3),
width: utils_2.toRem(20),
height: utils_2.toRem(20),
}
}
};
};
exports.getWidth = function (props) {
return props.width != "icon" ? normal(props) : {};
};
exports.getHeight = function (props) {
if (props.width == "icon") {
switch (props.height) {
case 'xsmall':
return iconXSmall(props);
case 'small':
return iconSmall(props);
case 'large':
return exports.iconLarge(props);
default:
return icon(props);
}
}
else {
switch (props.height) {
case 'xsmall':
return xsmall(props);
case 'small':
return small(props);
case 'large':
return large(props);
default:
return normal(props);
}
}
};
exports.rounded = function (props) {
if (props.width === 'icon') {
return {
height: utils_2.toRem(32),
width: utils_2.toRem(32),
borderRadius: utils_2.toRem(16),
$nest: {
div: {
margin: 0,
height: utils_2.toRem(32),
width: utils_2.toRem(32),
},
'&.up-btn svg': {
margin: utils_2.toRem(4) + " !important",
width: utils_2.toRem(24),
height: utils_2.toRem(24),
}
}
};
}
else {
return {
$nest: {
'&.up-btn': {
borderRadius: utils_2.toRem(22),
}
}
};
}
};
exports.borderless = function (props) {
return {
$nest: {
'&.up-btn': {
border: 'unset !important',
backgroundColor: 'transparent'
},
'&.up-btn svg, &.up-btn svg path, &.up-btn svg polygon, &.up-btn svg polyline': {
fill: " " + props.theme.colorMap[props.intent] + " !important"
},
'&.up-btn:hover .colored svg, &.up-btn:hover .colored svg path, &.up-btn:hover .colored svg polygon, &.up-btn:hover .colored svg polyline': {
fill: props.theme.colorMap.secondary + ' !important'
},
"&:hover:active": {
color: 'unset',
backgroundColor: 'unset'
},
"&:active": {
boxShadow: "unset"
},
}
};
};
exports.rotatingAnimation = typestyle_1.keyframes({
from: {
'-ms-transform': 'rotate(0deg)',
'-moz-transform': 'rotate(0deg)',
'-webkit-transform': 'rotate(0deg)',
transform: 'rotate(0deg)',
},
to: {
'-ms-transform': 'rotate(360deg)',
'-moz-transform': 'rotate(360deg)',
'-webkit-transform': 'rotate(360deg)',
transform: 'rotate(360deg)',
}
});
exports.rotate = function (props) {
return {
$nest: {
'& .up-rotating': {
'-webkit-animation': exports.rotatingAnimation + " 2s linear infinite",
'-ms-animation': exports.rotatingAnimation + " 2s linear infinite",
animation: exports.rotatingAnimation + " 2s linear infinite",
}
}
};
};
exports.getStyles = function (props) {
return classnames(typestyle_1.style(base(props)), typestyle_1.style(defaultIcon(props)), typestyle_1.style(exports.getWidth(props)), typestyle_1.style(exports.getHeight(props)), props.shadow ? typestyle_1.style(shadow(props)) : null, props.rounded ? typestyle_1.style(exports.rounded(props)) : null, props.disabled ? typestyle_1.style(disabled(props)) : typestyle_1.style(active(props)), props.rotate ? typestyle_1.style(exports.rotate(props)) : null, props.isToggled ? typestyle_1.style(toggle(props)) : null, props.borderless && props.width === 'icon' ? typestyle_1.style(exports.borderless(props)) : null);
};
exports.getWrapperStyles = function (props) {
return typestyle_1.style({
display: "inline-block",
position: "relative",
width: props.dropDown != 'none' ? "auto" : types_1.buttonSizeMap[props.width] || 'inherit',
$nest: {
"& .up-btn-missing-border": {
width: '100%',
borderBottom: "1px solid " + props.theme.colorMap[props.intent]
}
}
});
};
//# sourceMappingURL=styles.js.map