@furystack/shades-common-components
Version:
74 lines • 3.84 kB
JavaScript
import { Shade, createComponent } from '@furystack/shades';
import { ThemeProviderService } from '../../services/theme-provider-service.js';
import { promisifyAnimation } from '../../utils/promisify-animation.js';
export const CommandPaletteSuggestionList = Shade({
shadowDomName: 'shade-command-palette-suggestion-list',
render: ({ element, injector, props, useObservable }) => {
const { manager } = props;
const { theme } = injector.getInstance(ThemeProviderService);
const [suggestions] = useObservable('suggestions', props.manager.currentSuggestions);
const [selectedIndex] = useObservable('selectedIndex', props.manager.selectedIndex, {
onChange: (idx) => {
;
[...element.querySelectorAll('.suggestion-item')].map((s, i) => {
if (i === idx) {
s.style.background = theme.background.paper;
s.style.fontWeight = 'bolder';
}
else {
s.style.background = theme.background.default;
s.style.fontWeight = 'normal';
}
});
},
});
const [isOpenedAtRender] = useObservable('isOpenedAtRender', props.manager.isOpened, {
onChange: (isOpened) => {
const container = element.firstElementChild;
if (isOpened) {
container.style.display = 'initial';
container.style.zIndex = '1';
container.style.width = `calc(${Math.round(element.parentElement?.getBoundingClientRect().width || 200)}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';
container.style.display = 'none';
}
},
});
return (createComponent("div", { className: "suggestion-items-container", style: {
borderTop: 'none',
position: 'absolute',
opacity: manager.isOpened.getValue() ? '1' : '0',
borderRadius: '0px 0px 5px 5px',
marginLeft: '14px',
overflow: 'hidden',
overflowY: 'auto',
maxHeight: `${window.innerHeight * 0.8}px`,
zIndex: '1',
left: 'auto',
backgroundColor: theme.background.paper,
boxShadow: '3px 3px 5px rgba(0,0,0,0.3)',
width: `calc(${Math.round(element.parentElement?.getBoundingClientRect().width || 200)}px - 3em)`,
...(props.fullScreenSuggestions ? { left: '0', width: 'calc(100% - 42px)' } : {}),
} }, suggestions.map((s, i) => (createComponent("div", { className: "suggestion-item", onclick: () => {
if (isOpenedAtRender) {
manager.selectSuggestion(injector, i);
}
}, style: {
padding: '1em',
cursor: 'default',
background: i === selectedIndex ? theme.background.paper : theme.background.default,
fontWeight: i === selectedIndex ? 'bolder' : 'normal',
} }, s.element)))));
},
});
//# sourceMappingURL=command-palette-suggestion-list.js.map