baseui
Version:
A React Component library implementing the Base design language
262 lines (256 loc) • 9.88 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.StyledProfileTitle = exports.StyledProfileSubtitle = exports.StyledProfileLabelsContainer = exports.StyledProfileImgContainer = exports.StyledProfileImg = exports.StyledProfileBody = exports.StyledOptgroupHeader = exports.StyledMenuDivider = exports.StyledListItemProfile = exports.StyledListItemElement = exports.StyledListItemAnchor = exports.StyledListItem = exports.StyledList = exports.StyledEmptyState = void 0;
var React = _interopRequireWildcard(require("react"));
var _styles = require("../styles");
var _constants = require("./constants");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/*
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.
*/
const StyledList = exports.StyledList = (0, _styles.styled)('ul', ({
$theme,
$isFocusVisible
}) => {
return {
backgroundColor: $theme.colors.menuFill,
position: 'relative',
marginTop: 0,
marginBottom: 0,
marginLeft: 0,
marginRight: 0,
paddingTop: $theme.sizing.scale300,
paddingBottom: $theme.sizing.scale300,
paddingLeft: 0,
paddingRight: 0,
borderTopLeftRadius: $theme.borders.popoverBorderRadius,
borderTopRightRadius: $theme.borders.popoverBorderRadius,
borderBottomRightRadius: $theme.borders.popoverBorderRadius,
borderBottomLeftRadius: $theme.borders.popoverBorderRadius,
boxShadow: $theme.lighting.shadow600,
overflow: 'auto',
':focus': {
outline: $isFocusVisible ? `3px solid ${$theme.colors.borderAccent}` : 'none'
}
};
});
StyledList.displayName = "StyledList";
StyledList.displayName = 'StyledList';
// @ts-ignore
function getFontColor(props) {
if (props.$disabled) {
return props.$theme.colors.menuFontDisabled;
}
if (props.$isHighlighted && props.$isFocused) {
return props.$theme.colors.menuFontHighlighted;
}
if (props.$isHighlighted && !props.$isFocused) {
return props.$theme.colors.menuFontSelected;
}
return props.$theme.colors.menuFontDefault;
}
// @ts-ignore
function getBackgroundColor(props) {
if (props.$disabled) {
return 'transparent';
}
if (props.$isHighlighted) {
return props.$theme.colors.menuFillHover;
}
return 'transparent';
}
const StyledEmptyState = exports.StyledEmptyState = (0, _styles.styled)('li', props => {
const {
$theme,
$size
} = props;
return {
...($size === _constants.OPTION_LIST_SIZE.compact ? $theme.typography.font100 : $theme.typography.font200),
position: 'relative',
display: 'block',
color: $theme.colors.menuFontDisabled,
textAlign: 'center',
cursor: 'not-allowed',
backgroundColor: 'transparent',
marginBottom: 0,
paddingTop: $theme.sizing.scale800,
paddingBottom: $theme.sizing.scale800,
paddingRight: $theme.sizing.scale800,
paddingLeft: $theme.sizing.scale800
};
});
StyledEmptyState.displayName = "StyledEmptyState";
StyledEmptyState.displayName = 'StyledEmptyState';
const StyledOptgroupHeader = exports.StyledOptgroupHeader = (0, _styles.styled)('li', props => {
const paddingX = props.$theme.sizing.scale300;
const paddingY = props.$theme.sizing.scale200;
return {
...props.$theme.typography.font250,
color: props.$theme.colors.contentPrimary,
paddingTop: paddingY,
paddingBottom: paddingY,
paddingRight: paddingX,
paddingLeft: paddingX
};
});
StyledOptgroupHeader.displayName = "StyledOptgroupHeader";
StyledOptgroupHeader.displayName = 'StyledOptgroupHeader';
const StyledListItemAnchor = exports.StyledListItemAnchor = (0, _styles.styled)('a', props => {
return {
display: 'block',
color: getFontColor(props)
};
});
StyledListItemAnchor.displayName = "StyledListItemAnchor";
StyledListItemAnchor.displayName = 'StyledListItemAnchor';
const StyledListItemElement = exports.StyledListItemElement = (0, _styles.styled)('li', props => {
const {
$disabled,
$theme,
$size
} = props;
return {
...($size === _constants.OPTION_LIST_SIZE.compact ? $theme.typography.font100 : $theme.typography.font200),
boxSizing: 'border-box',
position: 'relative',
display: 'block',
color: getFontColor(props),
cursor: $disabled ? 'not-allowed' : 'pointer',
backgroundColor: getBackgroundColor(props),
transitionProperty: 'color, background-color',
transitionDuration: $theme.animation.timing200,
transitionTimingFunction: $theme.animation.easeOutCurve,
marginBottom: 0,
paddingTop: $size === _constants.OPTION_LIST_SIZE.compact ? $theme.sizing.scale100 : $theme.sizing.scale300,
paddingBottom: $size === _constants.OPTION_LIST_SIZE.compact ? $theme.sizing.scale100 : $theme.sizing.scale300,
paddingRight: $size === _constants.OPTION_LIST_SIZE.compact ? $theme.sizing.scale900 : $theme.sizing.scale600,
paddingLeft: $size === _constants.OPTION_LIST_SIZE.compact ? $theme.sizing.scale900 : $theme.sizing.scale600,
':focus': {
outline: 'none'
}
};
});
StyledListItemElement.displayName = "StyledListItemElement";
StyledListItemElement.displayName = 'StyledListItemElement';
// @ts-ignore
const StyledListItem = exports.StyledListItem = (0, _styles.withWrapper)(StyledListItemElement, Styled =>
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function StyledListItem({
item,
...restProps
}) {
return /*#__PURE__*/React.createElement(Styled, restProps);
});
const StyledListItemProfile = exports.StyledListItemProfile = (0, _styles.styled)('li', ({
$theme
}) => ({
position: 'relative',
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
paddingTop: $theme.sizing.scale300,
paddingBottom: $theme.sizing.scale300,
paddingRight: $theme.sizing.scale800,
paddingLeft: $theme.sizing.scale800,
transitionProperty: 'color, background-color',
transitionDuration: $theme.animation.timing200,
transitionTimingFunction: $theme.animation.easeOutCurve,
':hover': {
backgroundColor: $theme.colors.menuFillHover
}
}));
StyledListItemProfile.displayName = "StyledListItemProfile";
StyledListItemProfile.displayName = 'StyledListItemProfile';
const StyledProfileImgContainer = exports.StyledProfileImgContainer = (0, _styles.styled)('div', {
width: '60px',
height: '60px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
});
StyledProfileImgContainer.displayName = "StyledProfileImgContainer";
StyledProfileImgContainer.displayName = 'StyledProfileImgContainer';
const StyledProfileImg = exports.StyledProfileImg = (0, _styles.styled)('img', {
width: '100%',
height: '100%',
borderTopLeftRadius: '50%',
borderTopRightRadius: '50%',
borderBottomRightRadius: '50%',
borderBottomLeftRadius: '50%'
});
StyledProfileImg.displayName = "StyledProfileImg";
StyledProfileImg.displayName = 'StyledProfileImg';
const StyledProfileLabelsContainer = exports.StyledProfileLabelsContainer = (0, _styles.styled)('div', ({
$theme: {
direction,
sizing
}
}) => ({
alignSelf: direction === 'rtl' ? 'flex-end' : 'flex-start',
display: 'flex',
flexDirection: 'column',
...(direction === 'rtl' ? {
marginRight: sizing.scale600
} : {
marginLeft: sizing.scale600
})
}));
StyledProfileLabelsContainer.displayName = "StyledProfileLabelsContainer";
StyledProfileLabelsContainer.displayName = 'StyledProfileLabelsContainer';
const StyledProfileTitle = exports.StyledProfileTitle = (0, _styles.styled)('h6', ({
$theme
}) => ({
...$theme.typography.font350,
color: $theme.colors.contentPrimary,
marginTop: 0,
marginBottom: 0,
marginLeft: 0,
marginRight: 0
}));
StyledProfileTitle.displayName = "StyledProfileTitle";
StyledProfileTitle.displayName = 'StyledProfileTitle';
const StyledProfileSubtitle = exports.StyledProfileSubtitle = (0, _styles.styled)('p', ({
$theme
}) => ({
...$theme.typography.font200,
color: $theme.colors.contentPrimary,
marginTop: 0,
marginBottom: 0,
marginLeft: 0,
marginRight: 0
}));
StyledProfileSubtitle.displayName = "StyledProfileSubtitle";
StyledProfileSubtitle.displayName = 'StyledProfileSubtitle';
const StyledProfileBody = exports.StyledProfileBody = (0, _styles.styled)('p', ({
$theme
}) => ({
...$theme.typography.font100,
color: $theme.colors.contentPrimary,
marginTop: 0,
marginBottom: 0,
marginLeft: 0,
marginRight: 0
}));
StyledProfileBody.displayName = "StyledProfileBody";
StyledProfileBody.displayName = 'StyledProfileBody';
const StyledMenuDivider = exports.StyledMenuDivider = (0, _styles.styled)('li', ({
$theme
}) => ({
color: $theme.colors.contentPrimary,
borderBottomWidth: $theme.borders.border300.borderWidth,
borderBottomStyle: $theme.borders.border300.borderStyle,
borderBottomColor: $theme.borders.border300.borderColor,
marginTop: $theme.sizing.scale100,
marginBottom: $theme.sizing.scale100,
marginLeft: $theme.sizing.scale500,
marginRight: $theme.sizing.scale500,
listStyle: 'none',
height: 0
}));
StyledMenuDivider.displayName = "StyledMenuDivider";
StyledProfileBody.displayName = 'StyledMenuDivider';