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

React forms library based on json schema form.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = Code;
var _react = require("react");
var _reactI18next = require("react-i18next");
var _assetsApi = _interopRequireDefault(require("@talend/assets-api"));
var _designSystem = require("@talend/design-system");
var _constants = require("../../../constants");
var _generateId = require("../../Message/generateId");
var _FieldTemplate = _interopRequireDefault(require("../FieldTemplate"));
var _CodeSkeleton = _interopRequireDefault(require("./CodeSkeleton.component"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
// 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

const ReactAce = /*#__PURE__*/(0, _react.lazy)(() =>
// eslint-disable-next-line @typescript-eslint/no-explicit-any
_assetsApi.default.getUMD('react-ace', "10.1.0", "ReactAce", "/dist/react-ace.min.js/main.js").then(mod => {
  const extUrl = _assetsApi.default.getURL('/src-min-noconflict/ext-language_tools.js', 'ace-builds', "1.10.1");
  ace.config.set('basePath', extUrl.replace('ext-language_tools.js', ''));
  _assetsApi.default.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.default.toDefaultModule(mod.default));
      }
    }, 100);
  });
}));
const DEFAULT_SET_OPTIONS = {
  enableBasicAutocompletion: true,
  enableLiveAutocompletion: true,
  enableSnippets: true
};
function Code({
  id,
  isValid = true,
  errorMessage,
  schema = {},
  value,
  valueIsUpdating,
  onChange,
  onFinish,
  showInstructions = true
}) {
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.I18N_DOMAIN_FORMS);
  const {
    autoFocus,
    description,
    options,
    readOnly = false,
    title,
    labelProps
  } = schema;
  const descriptionId = (0, _generateId.generateDescriptionId)(id);
  const errorId = (0, _generateId.generateErrorId)(id);
  const instructionsId = (0, _generateId.generateId)(id, 'instructions');
  const [editor, setEditor] = (0, _react.useState)(null);
  (0, _react.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__*/(0, _jsxRuntime.jsx)(_FieldTemplate.default, {
    description: description,
    descriptionId: descriptionId,
    errorId: errorId,
    errorMessage: errorMessage,
    id: id,
    isValid: isValid,
    label: title,
    labelProps: labelProps,
    required: schema.required,
    valueIsUpdating: valueIsUpdating,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      // eslint-disable-line jsx-a11y/no-static-element-interactions
      id: id && `${id}-editor-container`,
      onBlur: onBlur,
      tabIndex: -1,
      children: [showInstructions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.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__*/(0, _jsxRuntime.jsx)(_react.Suspense, {
        fallback: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CodeSkeleton.default, {}),
        children: /*#__PURE__*/(0, _jsxRuntime.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