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

React forms library based on json schema form.

import { lazy, Suspense, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import assetsApi from '@talend/assets-api';
import { VisuallyHidden } from '@talend/design-system';
import { I18N_DOMAIN_FORMS } from '../../../constants';
import { generateDescriptionId, generateErrorId, generateId } from '../../Message/generateId';
import FieldTemplate from '../FieldTemplate';
import CodeSkeleton from './CodeSkeleton.component';

// Define ace namespace to avoid compiler error
// And use it during react-ace lazy load without importing it (that will break lazy loading)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const ReactAce = /*#__PURE__*/lazy(() =>
// eslint-disable-next-line @typescript-eslint/no-explicit-any
assetsApi.getUMD('react-ace', "10.1.0", "ReactAce", "/dist/react-ace.min.js/main.js").then(mod => {
  const extUrl = assetsApi.getURL('/src-min-noconflict/ext-language_tools.js', 'ace-builds', "1.10.1");
  ace.config.set('basePath', extUrl.replace('ext-language_tools.js', ''));
  assetsApi.addScript({
    src: extUrl
  });
  // wait for ext-language_tools.js to be loaded before return the ace module
  return new Promise(resolve => {
    const cancel = setInterval(() => {
      if (ace.require('ace/ext/language_tools')) {
        clearInterval(cancel);
        resolve(assetsApi.toDefaultModule(mod.default));
      }
    }, 100);
  });
}));
const DEFAULT_SET_OPTIONS = {
  enableBasicAutocompletion: true,
  enableLiveAutocompletion: true,
  enableSnippets: true
};
export default function Code({
  id,
  isValid = true,
  errorMessage,
  schema = {},
  value,
  valueIsUpdating,
  onChange,
  onFinish,
  showInstructions = true
}) {
  const {
    t
  } = useTranslation(I18N_DOMAIN_FORMS);
  const {
    autoFocus,
    description,
    options,
    readOnly = false,
    title,
    labelProps
  } = schema;
  const descriptionId = generateDescriptionId(id);
  const errorId = generateErrorId(id);
  const instructionsId = generateId(id, 'instructions');
  const [editor, setEditor] = useState(null);
  useEffect(() => {
    if (editor) {
      const textarea = editor.textInput.getElement();
      textarea.setAttribute('id', id);
      textarea.setAttribute('aria-describedby', `${instructionsId} ${descriptionId} ${errorId}`);
    }
  }, [editor, instructionsId, descriptionId, errorId, id]);
  function onBlur() {
    var _editor$textInput, _editor$textInput$get;
    editor === null || editor === void 0 ? void 0 : (_editor$textInput = editor.textInput) === null || _editor$textInput === void 0 ? void 0 : (_editor$textInput$get = _editor$textInput.getElement()) === null || _editor$textInput$get === void 0 ? void 0 : _editor$textInput$get.removeAttribute('tabindex');
  }
  return /*#__PURE__*/_jsx(FieldTemplate, {
    description: description,
    descriptionId: descriptionId,
    errorId: errorId,
    errorMessage: errorMessage,
    id: id,
    isValid: isValid,
    label: title,
    labelProps: labelProps,
    required: schema.required,
    valueIsUpdating: valueIsUpdating,
    children: /*#__PURE__*/_jsxs("div", {
      // eslint-disable-line jsx-a11y/no-static-element-interactions
      id: id && `${id}-editor-container`,
      onBlur: onBlur,
      tabIndex: -1,
      children: [showInstructions && /*#__PURE__*/_jsx(VisuallyHidden, {
        id: instructionsId,
        "data-testid": "widget-code-instructions",
        children: t('TF_CODE_ESCAPE', {
          defaultValue: 'To focus out of the editor, press ESC key twice.'
        })
      }), /*#__PURE__*/_jsx(Suspense, {
        fallback: /*#__PURE__*/_jsx(CodeSkeleton, {}),
        children: /*#__PURE__*/_jsx(ReactAce, {
          editorProps: {
            $blockScrolling: Infinity
          } // https://github.com/securingsincity/react-ace/issues/29
          ,
          focus: autoFocus,
          name: `${id}_wrapper`,
          mode: options === null || options === void 0 ? void 0 : options.language,
          onBlur: event => onFinish(event, {
            schema
          }),
          onLoad: component => setEditor(component),
          onChange: (newValue, event) => onChange(event, {
            schema: schema,
            value: newValue
          })
          // disabled is not supported by ace use readonly
          // https://github.com/ajaxorg/ace/issues/406
          ,
          readOnly: readOnly || schema.disabled || valueIsUpdating,
          setOptions: DEFAULT_SET_OPTIONS,
          showGutter: false,
          showPrintMargin: false,
          value: value,
          width: "auto",
          ...options
        }, "ace")
      })]
    })
  });
}
//# sourceMappingURL=Code.component.js.map