@equinor/fusion-framework-cli
Version:
--- title: Fusion Framework CLI ---
41 lines • 2.29 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) => {
var _a, _b, _c, _d;
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: (_a = props.placeholder) !== null && _a !== void 0 ? _a : 'Search for context', initialText: (_b = props.initialText) !== null && _b !== void 0 ? _b : 'Start typing to search', dropdownHeight: (_c = props.dropdownHeight) !== null && _c !== void 0 ? _c : '300px', variant: (_d = props.variant) !== null && _d !== void 0 ? _d : 'header', onSelect: (e) => onContextSelect(e), selectTextOnFocus: true, previewItem: selectedContextItem, onClearContext: onContextSelect }) }) }));
};
export default ContextSelector;
//# sourceMappingURL=ContextSelector.js.map