/
Widget.component.js
70 lines (59 loc) · 1.79 KB
/
Widget.component.js
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
69
70
import React from 'react';
import PropTypes from 'prop-types';
import { sfPath } from '@talend/json-schema-form-core';
import TooltipTrigger from '@talend/react-components/lib/TooltipTrigger';
import shouldRender from './condition';
import defaultWidgets from '../widgets';
import useSchemaWidget from './useSchemaWidget';
function getWidget(displayMode, widgetId, customWidgets) {
// resolve the widget id depending on the display mode
const id = displayMode ? `${widgetId}_${displayMode}` : widgetId;
// Get the widget and fallback to default mode widget if not found
let widget = customWidgets[id] || defaultWidgets[id];
if (!widget) {
widget = customWidgets[widgetId] || defaultWidgets[widgetId];
}
return widget;
}
export default function Widget(props) {
const { id, schema } = props;
const { condition, key, type, widget, tooltip, tooltipPlacement } = schema;
const { eventsProps, displayMode, rhf, rules, widgets = [] } = useSchemaWidget(schema);
const values = rhf.getValues({ nest: true });
if (!shouldRender(condition, values, key)) {
return null;
}
const widgetName = widget || type;
const WidgetImpl = getWidget(displayMode || schema.displayMode, widgetName, widgets);
if (!WidgetImpl) {
return <p className="text-danger">Widget not found {widgetName}</p>;
}
const instance = (
<WidgetImpl
{...props}
{...eventsProps}
id={sfPath.name(key, '_', id)}
name={key && key.join('.')}
rhf={rhf}
rules={rules}
/>
);
if (tooltip) {
return (
<TooltipTrigger
style={{ display: 'block' }}
label={tooltip}
tooltipPlacement={tooltipPlacement || 'left'}
>
<div>{instance}</div>
</TooltipTrigger>
);
}
return instance;
}
if (process.env.NODE_ENV !== 'production') {
Widget.propTypes = {
id: PropTypes.string,
schema: PropTypes.object,
};
}