-
Notifications
You must be signed in to change notification settings - Fork 8.2k
/
react_expression_renderer.tsx
68 lines (60 loc) · 2.41 KB
/
react_expression_renderer.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React, { useRef } from 'react';
import classNames from 'classnames';
import { PanelLoader } from '@kbn/panel-loader';
import { EuiProgress, useEuiTheme } from '@elastic/eui';
import { ExpressionRenderError } from '../types';
import type { ExpressionRendererParams } from './use_expression_renderer';
import { useExpressionRenderer } from './use_expression_renderer';
// Accept all options of the runner as props except for the
// dom element which is provided by the component itself
export interface ReactExpressionRendererProps
extends Omit<ExpressionRendererParams, 'hasCustomErrorRenderer'> {
className?: string;
dataAttrs?: string[];
renderError?: (
message?: string | null,
error?: ExpressionRenderError | null
) => React.ReactElement | React.ReactElement[];
padding?: 'xs' | 's' | 'm' | 'l' | 'xl';
}
export type ReactExpressionRendererType = React.ComponentType<ReactExpressionRendererProps>;
export type ExpressionRendererComponent = React.FC<ReactExpressionRendererProps>;
export function ReactExpressionRenderer({
className,
dataAttrs,
padding,
renderError,
...expressionRendererOptions
}: ReactExpressionRendererProps) {
const nodeRef = useRef<HTMLDivElement>(null);
const { euiTheme } = useEuiTheme();
const { error, isEmpty, isLoading } = useExpressionRenderer(nodeRef, {
...expressionRendererOptions,
hasCustomErrorRenderer: !!renderError,
});
const classes = classNames('expExpressionRenderer', className, {
'expExpressionRenderer-isEmpty': isEmpty,
'expExpressionRenderer-hasError': !!error,
});
const expressionStyles: React.CSSProperties = {};
if (padding) {
expressionStyles.padding = euiTheme.size[padding];
}
return (
<div {...dataAttrs} className={classes}>
{isEmpty && <PanelLoader />}
{isLoading && (
<EuiProgress size="xs" color="accent" position="absolute" style={{ zIndex: 1 }} />
)}
{!isLoading && error && renderError?.(error.message, error)}
<div className="expExpressionRenderer__expression" style={expressionStyles} ref={nodeRef} />
</div>
);
}