@equinor/fusion-framework-cli
Version:
--- title: Fusion Framework CLI ---
40 lines • 2.12 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo } from 'react';
import { ContextProvider, ContextSearch, ContextClearEvent, } from '@equinor/fusion-react-context-selector';
import { useContextResolver } from './useContextResolver';
/**
* See fusion-react-component storybook for available attributes
* @link https://equinor.github.io/fusion-react-components/?path=/docs/data-contextselector--component
* @returns JSX element
*/
export const ContextSelector = (props) => {
const { resolver, provider, currentContext: [selectedContextItem], } = useContextResolver();
/** callback handler for context selector, when context is changed or cleared */
const onContextSelect = useCallback((e) => {
if (provider) {
if (e.type === 'select') {
const ev = e;
if (ev.nativeEvent.detail.selected.length) {
provider.contextClient.setCurrentContext(ev.nativeEvent.detail.selected[0].id);
}
}
else {
provider.clearCurrentContext();
}
}
}, [provider]);
/**
* Clears context when ctx has been cleared outside the selector.
*/
const clearEvent = useMemo(() => new ContextClearEvent({ date: Date.now() }), []);
useEffect(() => {
if (!selectedContextItem) {
document.dispatchEvent(clearEvent);
}
}, [clearEvent, selectedContextItem]);
if (!resolver)
return null;
return (_jsx("div", { style: { flex: 1, maxWidth: '480px' }, children: _jsx(ContextProvider, { resolver: resolver, children: _jsx(ContextSearch, { id: "context-selector-cli-header", placeholder: props.placeholder ?? 'Search for context', initialText: props.initialText ?? 'Start typing to search', dropdownHeight: props.dropdownHeight ?? '300px', variant: props.variant ?? 'header', onSelect: (e) => onContextSelect(e), selectTextOnFocus: true, previewItem: selectedContextItem, onClearContext: onContextSelect }) }) }));
};
export default ContextSelector;
//# sourceMappingURL=ContextSelector.js.map