@furystack/shades-common-components
Version:
Common UI components for FuryStack Shades
85 lines • 4.27 kB
JavaScript
import { Shade, createComponent } from '@furystack/shades';
import { cssVariableTheme } from '../../services/css-variable-theme.js';
import { promisifyAnimation } from '../../utils/promisify-animation.js';
export const SuggestionList = Shade({
customElementName: 'shade-suggest-suggestion-list',
css: {
fontFamily: cssVariableTheme.typography.fontFamily,
'& .suggestion-items-container': {
borderTop: 'none',
position: 'absolute',
borderRadius: `0px 0px ${cssVariableTheme.shape.borderRadius.lg} ${cssVariableTheme.shape.borderRadius.lg}`,
marginLeft: '14px',
marginTop: cssVariableTheme.spacing.xs,
overflow: 'hidden',
zIndex: '1',
left: 'auto',
background: cssVariableTheme.background.paper,
backgroundImage: cssVariableTheme.background.paperImage,
color: cssVariableTheme.text.secondary,
boxShadow: cssVariableTheme.shadows.lg,
backdropFilter: `blur(${cssVariableTheme.effects.blurXl})`,
border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
},
'& .suggestion-item': {
padding: '0.875em 1.25em',
cursor: 'pointer',
background: 'transparent',
fontWeight: '400',
borderLeft: '3px solid transparent',
transition: `all ${cssVariableTheme.transitions.duration.normal} ${cssVariableTheme.transitions.easing.default}`,
fontSize: '0.95em',
letterSpacing: '0.01em',
},
'& .suggestion-item:hover': {
background: cssVariableTheme.action.hoverBackground,
},
'& .suggestion-item.selected': {
background: cssVariableTheme.action.activeBackground,
fontWeight: '500',
borderLeft: `3px solid ${cssVariableTheme.text.primary}`,
},
'& .suggestion-item.selected:hover': {
background: cssVariableTheme.action.activeBackground,
},
},
render: ({ props, useObservable, useRef }) => {
const { manager } = props;
const containerRef = useRef('container');
const [suggestions] = useObservable('suggestions', manager.currentSuggestions);
const [selectedIndex] = useObservable('selectedIndex', manager.selectedIndex);
const [isListOpened] = useObservable('isOpened', manager.isOpened, {
onChange: (isOpened) => {
const container = containerRef.current;
if (!container)
return;
const hostParentWidth = container.closest('shade-suggest-suggestion-list')?.parentElement?.getBoundingClientRect().width || 200;
if (isOpened) {
container.style.zIndex = '1';
container.style.width = `calc(${Math.round(hostParentWidth)}px - 3em)`;
void promisifyAnimation(container, [
{ opacity: 0, transform: 'translate(0, -50px)' },
{ opacity: 1, transform: 'translate(0, 0)' },
], { fill: 'forwards', duration: 500 });
}
else {
void promisifyAnimation(container, [
{ opacity: 1, transform: 'translate(0, 0)' },
{ opacity: 0, transform: 'translate(0, -50px)' },
], { fill: 'forwards', duration: 200 });
container.style.zIndex = '-1';
}
},
});
const hostParentWidth = containerRef.current?.closest('shade-suggest-suggestion-list')?.parentElement?.getBoundingClientRect().width ||
200;
return (createComponent("div", { ref: containerRef, className: "suggestion-items-container", style: {
width: `calc(${Math.round(hostParentWidth)}px - 3em)`,
} }, suggestions.map((s, i) => (createComponent("div", { className: `suggestion-item${i === selectedIndex ? ' selected' : ''}`, onclick: () => {
if (isListOpened) {
manager.selectSuggestion(i);
}
} }, s.suggestion.element)))));
},
});
//# sourceMappingURL=suggestion-list.js.map