@furystack/shades-common-components
Version:
47 lines • 1.9 kB
JavaScript
import { Shade, createComponent } from '@furystack/shades';
import { ThemeProviderService } from '../../services/theme-provider-service.js';
import { promisifyAnimation } from '../../utils/promisify-animation.js';
const updateComponent = async (element, isOpened) => {
const input = element.firstChild;
if (input) {
if (isOpened) {
input.value = '';
await promisifyAnimation(element, [{ width: '0%' }, { width: '100%' }], {
duration: 300,
fill: 'forwards',
easing: 'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
});
input.focus();
}
else {
await promisifyAnimation(element, [{ width: '100%' }, { width: '0%' }], {
duration: 300,
fill: 'forwards',
easing: 'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
});
input.value = '';
}
}
};
export const CommandPaletteInput = Shade({
shadowDomName: 'shades-command-palette-input',
render: ({ element, props, injector, useObservable }) => {
const { theme } = injector.getInstance(ThemeProviderService);
const { manager } = props;
const [isCurrentlyOpened] = useObservable('isOpened', manager.isOpened, {
onChange: (newValue) => void updateComponent(element, newValue),
});
element.style.width = isCurrentlyOpened ? '100%' : '0%';
element.style.overflow = 'hidden';
return (createComponent("input", { autofocus: true, style: {
color: theme.text.primary,
outline: 'none',
padding: '1em',
background: 'transparent',
border: 'none',
display: 'inline-flex',
width: 'calc(100% - 2em)',
} }));
},
});
//# sourceMappingURL=command-palette-input.js.map