baseui
Version:
A React Component library implementing the Base design language
310 lines (306 loc) • 10.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.StyledRoot = exports.StyledPositioner = exports.StyledNotificationCircle = exports.StyledHintDot = exports.StyledBadge = void 0;
var _styles = require("../styles");
var _constants = require("./constants");
/*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
// @ts-ignore
function getColorStyles({
$theme,
$hierarchy,
$color
}) {
const COLOR_STYLES = {
[_constants.HIERARCHY.primary]: {
[_constants.COLOR.accent]: {
color: $theme.colors.contentOnColor,
backgroundColor: $theme.colors.backgroundAccent
},
[_constants.COLOR.primary]: {
color: $theme.colors.contentInversePrimary,
backgroundColor: $theme.colors.backgroundInversePrimary
},
[_constants.COLOR.positive]: {
color: $theme.colors.contentOnColor,
backgroundColor: $theme.colors.backgroundPositive
},
[_constants.COLOR.negative]: {
color: $theme.colors.contentOnColor,
backgroundColor: $theme.colors.backgroundNegative
},
[_constants.COLOR.warning]: {
color: $theme.colors.contentOnColorInverse,
backgroundColor: $theme.colors.backgroundWarning
}
},
[_constants.HIERARCHY.secondary]: {
[_constants.COLOR.accent]: {
color: $theme.colors.contentAccent,
backgroundColor: $theme.colors.backgroundAccentLight
},
[_constants.COLOR.primary]: {
color: $theme.colors.contentPrimary,
backgroundColor: $theme.colors.backgroundSecondary
},
[_constants.COLOR.positive]: {
color: $theme.colors.contentPositive,
backgroundColor: $theme.colors.backgroundPositiveLight
},
[_constants.COLOR.negative]: {
color: $theme.colors.contentNegative,
backgroundColor: $theme.colors.backgroundNegativeLight
},
[_constants.COLOR.warning]: {
color: $theme.colors.contentWarning,
backgroundColor: $theme.colors.backgroundWarningLight
}
}
};
// @ts-ignore
return COLOR_STYLES[$hierarchy][$color];
}
const DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT = {
top: '-10px',
right: '-10px'
};
const DEFAULT_HINT_DOT_PLACEMENT = {
top: '-4px',
right: '-4px'
};
const POSITION_STYLES = Object.freeze({
[_constants.ROLE.badge]: {
[_constants.PLACEMENT.topEdge]: {
top: '-8px',
left: '50%',
transform: 'translateX(-50%)'
},
[_constants.PLACEMENT.bottomEdge]: {
bottom: '-8px',
left: '50%',
transform: 'translateX(-50%)'
},
[_constants.PLACEMENT.topLeft]: {
top: '16px',
left: '16px'
},
[_constants.PLACEMENT.topRight]: {
top: '16px',
right: '16px'
},
[_constants.PLACEMENT.bottomRight]: {
bottom: '16px',
right: '16px'
},
[_constants.PLACEMENT.bottomLeft]: {
bottom: '16px',
left: '16px'
},
[_constants.PLACEMENT.topLeftEdge]: {
top: '-8px',
left: '16px'
},
[_constants.PLACEMENT.topRightEdge]: {
top: '-8px',
right: '16px'
},
[_constants.PLACEMENT.bottomRightEdge]: {
bottom: '-8px',
right: '16px'
},
[_constants.PLACEMENT.bottomLeftEdge]: {
bottom: '-8px',
left: '16px'
},
[_constants.PLACEMENT.leftTopEdge]: {
top: '16px',
left: '-8px'
},
[_constants.PLACEMENT.rightTopEdge]: {
top: '16px',
right: '-8px'
},
[_constants.PLACEMENT.rightBottomEdge]: {
bottom: '16px',
right: '-8px'
},
[_constants.PLACEMENT.leftBottomEdge]: {
bottom: '16px',
left: '-8px'
}
},
[_constants.ROLE.notificationCircle]: {
[_constants.PLACEMENT.topLeft]: {
top: '-10px',
left: '-10px'
},
[_constants.PLACEMENT.topRight]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
// NotificationCircle can only be placed topLeft or topRight, other values fall back to topRight
[_constants.PLACEMENT.topEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
[_constants.PLACEMENT.bottomEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
[_constants.PLACEMENT.bottomRight]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
[_constants.PLACEMENT.bottomLeft]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
[_constants.PLACEMENT.topLeftEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
[_constants.PLACEMENT.topRightEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
[_constants.PLACEMENT.bottomRightEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
[_constants.PLACEMENT.bottomLeftEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
[_constants.PLACEMENT.leftTopEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
[_constants.PLACEMENT.rightTopEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
[_constants.PLACEMENT.rightBottomEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
[_constants.PLACEMENT.leftBottomEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT
},
[_constants.ROLE.hintDot]: {
[_constants.PLACEMENT.topLeft]: {
top: '-4px',
left: '-4px'
},
[_constants.PLACEMENT.topRight]: DEFAULT_HINT_DOT_PLACEMENT,
// HintDot can only be placed topLeft or topRight, other values fall back to topRight
[_constants.PLACEMENT.topEdge]: DEFAULT_HINT_DOT_PLACEMENT,
[_constants.PLACEMENT.bottomEdge]: DEFAULT_HINT_DOT_PLACEMENT,
[_constants.PLACEMENT.bottomRight]: DEFAULT_HINT_DOT_PLACEMENT,
[_constants.PLACEMENT.bottomLeft]: DEFAULT_HINT_DOT_PLACEMENT,
[_constants.PLACEMENT.topLeftEdge]: DEFAULT_HINT_DOT_PLACEMENT,
[_constants.PLACEMENT.topRightEdge]: DEFAULT_HINT_DOT_PLACEMENT,
[_constants.PLACEMENT.bottomRightEdge]: DEFAULT_HINT_DOT_PLACEMENT,
[_constants.PLACEMENT.bottomLeftEdge]: DEFAULT_HINT_DOT_PLACEMENT,
[_constants.PLACEMENT.leftTopEdge]: DEFAULT_HINT_DOT_PLACEMENT,
[_constants.PLACEMENT.rightTopEdge]: DEFAULT_HINT_DOT_PLACEMENT,
[_constants.PLACEMENT.rightBottomEdge]: DEFAULT_HINT_DOT_PLACEMENT,
[_constants.PLACEMENT.leftBottomEdge]: DEFAULT_HINT_DOT_PLACEMENT
}
});
const StyledRoot = exports.StyledRoot = (0, _styles.styled)('div', () => {
return {
position: 'relative',
display: 'inline-block',
lineHeight: 'initial'
};
});
StyledRoot.displayName = "StyledRoot";
StyledRoot.displayName = 'StyledRoot';
const TOP_PLACEMENTS = [_constants.PLACEMENT.topLeft, _constants.PLACEMENT.topRight, _constants.PLACEMENT.topLeftEdge, _constants.PLACEMENT.topEdge, _constants.PLACEMENT.topRightEdge, _constants.PLACEMENT.leftTopEdge, _constants.PLACEMENT.rightTopEdge];
const BOTTOM_PLACEMENTS = [_constants.PLACEMENT.bottomLeft, _constants.PLACEMENT.bottomRight, _constants.PLACEMENT.bottomLeftEdge, _constants.PLACEMENT.bottomEdge, _constants.PLACEMENT.bottomRightEdge, _constants.PLACEMENT.leftBottomEdge, _constants.PLACEMENT.rightBottomEdge];
const LEFT_PLACEMENTS = [_constants.PLACEMENT.topLeft, _constants.PLACEMENT.topLeftEdge, _constants.PLACEMENT.topEdge, _constants.PLACEMENT.bottomLeft, _constants.PLACEMENT.bottomLeftEdge, _constants.PLACEMENT.bottomEdge, _constants.PLACEMENT.leftTopEdge, _constants.PLACEMENT.leftBottomEdge];
const RIGHT_PLACEMENTS = [_constants.PLACEMENT.topRight, _constants.PLACEMENT.topRightEdge, _constants.PLACEMENT.bottomRight, _constants.PLACEMENT.bottomRightEdge, _constants.PLACEMENT.rightTopEdge, _constants.PLACEMENT.rightBottomEdge];
const StyledPositioner = exports.StyledPositioner = (0, _styles.styled)('div', ({
$theme,
$role,
$placement,
$horizontalOffset,
$verticalOffset
}) => {
let positionStyle = POSITION_STYLES[$role][$placement];
if ($verticalOffset) {
if (TOP_PLACEMENTS.includes($placement)) {
positionStyle = {
...positionStyle,
top: $verticalOffset
};
}
if (BOTTOM_PLACEMENTS.includes($placement)) {
positionStyle = {
...positionStyle,
bottom: $verticalOffset
};
}
}
if ($horizontalOffset) {
if (LEFT_PLACEMENTS.includes($placement)) {
positionStyle = {
...positionStyle,
left: $horizontalOffset
};
}
if (RIGHT_PLACEMENTS.includes($placement)) {
positionStyle = {
...positionStyle,
right: $horizontalOffset
};
}
}
return {
...positionStyle,
position: 'absolute',
lineHeight: 'initial'
};
});
StyledPositioner.displayName = "StyledPositioner";
StyledPositioner.displayName = 'StyledPositioner';
const StyledBadge = exports.StyledBadge = (0, _styles.styled)('div', ({
$theme,
$shape = _constants.SHAPE.rectangle,
$color = _constants.COLOR.accent,
$hierarchy = _constants.HIERARCHY.primary,
$hidden
}) => {
return {
visibility: $hidden ? 'hidden' : 'inherit',
boxSizing: 'border-box',
height: $theme.sizing.scale700,
borderRadius: $shape === _constants.SHAPE.rectangle ? $theme.borders.radius200 : $theme.borders.radius500,
paddingRight: $shape === _constants.SHAPE.rectangle ? $theme.sizing.scale100 : $theme.sizing.scale300,
paddingLeft: $shape === _constants.SHAPE.rectangle ? $theme.sizing.scale100 : $theme.sizing.scale300,
display: 'inline-flex',
alignItems: 'center',
...getColorStyles({
$theme,
$hierarchy,
$color
}),
...($hierarchy === _constants.HIERARCHY.primary ? $theme.typography.LabelSmall : $theme.typography.ParagraphSmall)
};
});
StyledBadge.displayName = "StyledBadge";
StyledBadge.displayName = 'StyledBadge';
const StyledNotificationCircle = exports.StyledNotificationCircle = (0, _styles.styled)('div', ({
$theme,
$color = _constants.COLOR.accent,
$hidden
}) => {
return {
visibility: $hidden ? 'hidden' : 'inherit',
height: $theme.sizing.scale700,
width: $theme.sizing.scale700,
borderRadius: '20px',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
...getColorStyles({
$theme,
$hierarchy: _constants.HIERARCHY.primary,
$color
}),
...$theme.typography.LabelXSmall
};
});
StyledNotificationCircle.displayName = "StyledNotificationCircle";
StyledNotificationCircle.displayName = 'StyledNotificationCircle';
const StyledHintDot = exports.StyledHintDot = (0, _styles.styled)('div', ({
$theme,
$color = _constants.COLOR.accent,
$hidden
}) => {
return {
visibility: $hidden ? 'hidden' : 'inherit',
// @ts-ignore
backgroundColor: $theme.colors[$color],
boxSizing: 'content-box',
height: '8px',
width: '8px',
borderRadius: '50%',
border: `4px solid ${$theme.colors.backgroundPrimary}`,
...getColorStyles({
$theme,
$hierarchy: _constants.HIERARCHY.primary,
$color
})
};
});
StyledHintDot.displayName = "StyledHintDot";
StyledHintDot.displayName = 'StyledHintDot';