@talend/react-forms/lib-esm/UIForm/Widget/Widget.component.js

React forms library based on json schema form.

import PropTypes from 'prop-types';
import { InlineMessageDestructive } from '@talend/design-system';
import { sfPath } from '@talend/json-schema-form-core';
import { useWidget } from '../context';
import shouldRender from '../utils/condition';
import { getError } from '../utils/errors';
import { getValue } from '../utils/properties';
import theme from './Widget.component.module.scss';

// eslint-disable-next-line @typescript-eslint/default-param-last
import { TooltipTrigger } from "@talend/react-components";
import { jsx as _jsx } from "react/jsx-runtime";
function isUpdating(updatingKeys = [], key) {
  if (updatingKeys.length === 0 || !key) {
    return false;
  }
  // we need to support current and parent path
  const serializedKey = key.join('.');
  return updatingKeys.some(path => serializedKey.startsWith(path));
}
export default function Widget(props) {
  const {
    condition,
    key,
    options,
    type,
    validationMessage,
    widget,
    displayMode,
    tooltip,
    tooltipPlacement
  } = props.schema;
  const widgetId = widget || type;
  const {
    widgets,
    WidgetImpl
  } = useWidget(widgetId, props.displayMode || displayMode);
  if (widgetId === 'hidden' || !shouldRender(condition, props.properties, key)) {
    return null;
  }
  if (!WidgetImpl) {
    return /*#__PURE__*/_jsx(InlineMessageDestructive, {
      description: `Widget not found ${widgetId}`
    });
  }
  const id = sfPath.name(key, props.idSeparator || '_', props.id);
  const error = getError(props.errors, props.schema);
  const errorMessage = validationMessage || error;
  const all = {
    ...props,
    id,
    key: id,
    options,
    errorMessage,
    isValid: !error,
    value: getValue(props.properties, props.schema),
    valueIsUpdating: isUpdating(props.updating, props.schema.key),
    widgets
  };
  if (tooltip) {
    return /*#__PURE__*/_jsx(TooltipTrigger, {
      className: theme.tooltip,
      label: tooltip,
      tooltipPlacement: tooltipPlacement || 'left',
      children: /*#__PURE__*/_jsx("div", {
        children: /*#__PURE__*/_jsx(WidgetImpl, {
          ...all
        })
      })
    });
  }
  return /*#__PURE__*/_jsx(WidgetImpl, {
    ...all
  });
}
if (process.env.NODE_ENV !== 'production') {
  Widget.propTypes = {
    displayMode: PropTypes.string,
    errors: PropTypes.object,
    id: PropTypes.string,
    idSeparator: PropTypes.string,
    properties: PropTypes.object,
    schema: PropTypes.shape({
      condition: PropTypes.object,
      displayMode: PropTypes.string,
      key: PropTypes.array,
      options: PropTypes.object,
      tooltip: PropTypes.string,
      tooltipPlacement: PropTypes.string,
      type: PropTypes.string,
      validationMessage: PropTypes.string,
      widget: PropTypes.string
    }).isRequired,
    updating: PropTypes.arrayOf(PropTypes.string),
    widgets: PropTypes.object
  };
}
Widget.defaultProps = {
  widgets: {}
};
Widget.displayName = 'Widget';
//# sourceMappingURL=Widget.component.js.map