@toloka-dev/tbx-external-field-client
Version:
Library designed to facilitate communication and configuration management between TBX and an external app
39 lines (36 loc) • 2.31 kB
JavaScript
import { j as jsxRuntimeExports } from '../_virtual/jsx-runtime.js';
import { createContext, useContext } from 'react';
import { useExternalFieldConnection } from '../hooks/use-external-field-connection.js';
const ExternalFieldContext = createContext(null);
// eslint-disable-next-line react-refresh/only-export-components
const useExternalField = () => {
const context = useContext(ExternalFieldContext);
if (context === null) {
throw new Error('useExternalField must be used within a ExternalFieldConnectionProvider');
}
return context;
};
const ExternalFieldConnectionProvider = ({ children }) => {
const { theme, error, api, value, config } = useExternalFieldConnection();
if (error || !api) {
return (jsxRuntimeExports.jsx("div", { style: {
position: 'fixed',
inset: '0px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
background: theme === 'dark' ? '#09090b' : '#ffffff',
fontFamily: 'ui-sans-serif, system-ui, sans-serif',
fontSize: '14px',
}, children: jsxRuntimeExports.jsx("div", { style: {
display: 'flex',
flexFlow: 'row nowrap',
alignItems: 'center',
gap: '8px',
fontWeight: '500',
color: theme === 'dark' ? '#a1a1aa' : '#71717a',
}, children: error ? (jsxRuntimeExports.jsxs("span", { style: { color: theme === 'dark' ? '#7f1d1d' : '#ef4444' }, children: ["Unable to connect to 'Field.External': ", error.message] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntimeExports.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }), jsxRuntimeExports.jsx("span", { children: "Loading" })] })) }) }));
}
return (jsxRuntimeExports.jsx(ExternalFieldContext.Provider, { value: { value, config: config, api }, children: children }));
};
export { ExternalFieldConnectionProvider, useExternalField };