@atlaskit/mention
Version:
A React component used to display user profiles in a list for 'Mention' functionality
80 lines • 2.57 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
/* eslint-disable @atlaskit/design-system/no-html-button */
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx, css } from '@emotion/react';
import { B400, N500, N30A, N20 } from '@atlaskit/theme/colors';
import { MentionType } from '../../types';
import { forwardRef } from 'react';
const mentionStyle = {
[MentionType.SELF]: {
background: `var(--ds-background-brand-bold, ${B400})`,
borderColor: 'transparent',
text: `var(--ds-text-inverse, ${N20})`,
hoveredBackground: `var(--ds-background-brand-bold-hovered, ${B400})`,
pressedBackground: `var(--ds-background-brand-bold-pressed, ${B400})`
},
[MentionType.RESTRICTED]: {
background: 'transparent',
borderColor: `var(--ds-border-bold, ${N500})`,
text: `var(--ds-text, ${N500})`,
hoveredBackground: 'transparent',
pressedBackground: 'transparent'
},
[MentionType.DEFAULT]: {
background: `var(--ds-background-neutral, ${N30A})`,
borderColor: 'transparent',
text: `var(--ds-text-subtle, ${N500})`,
hoveredBackground: `var(--ds-background-neutral-hovered, ${N30A})`,
pressedBackground: `var(--ds-background-neutral-pressed, ${N30A})`
}
};
const getStyle = ({
mentionType
}, property) => {
const obj = mentionStyle[mentionType][property];
return typeof obj === 'string' ? obj : obj;
};
const PrimitiveMention = /*#__PURE__*/forwardRef(({
mentionType,
...other
}, ref) => {
return jsx("span", _extends({
ref: ref
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
,
css: css`
display: inline;
border: ${"var(--ds-border-width, 1px)"} solid ${getStyle({
mentionType
}, 'borderColor')};
background: ${getStyle({
mentionType
}, 'background')};
color: ${getStyle({
mentionType
}, 'text')};
border-radius: 20px;
cursor: pointer;
padding: 0 0.3em 2px 0.23em;
line-height: 1.714;
font-size: 1em;
font-weight: ${"var(--ds-font-weight-regular, 400)"};
word-break: break-word;
&:hover {
background: ${getStyle({
mentionType
}, 'hoveredBackground')};
}
&:active {
background: ${getStyle({
mentionType
}, 'pressedBackground')};
}
`
}, other));
});
export default PrimitiveMention;