@airplane/views/dist/components/codeinput/CodeInputComponent.js

A React library for building Airplane views. Views components are optimized in style and functionality to produce internal apps that are easy to build and maintain.

import { jsx } from "react/jsx-runtime";
import { autocompletion } from "@codemirror/autocomplete";
import { javascript } from "@codemirror/lang-javascript";
import { json, jsonParseLinter } from "@codemirror/lang-json";
import { sql, PostgreSQL, MySQL } from "@codemirror/lang-sql";
import { foldGutter, StreamLanguage } from "@codemirror/language";
import { yaml } from "@codemirror/legacy-modes/mode/yaml";
import { linter } from "@codemirror/lint";
import { Input, Card } from "@mantine/core";
import CodeMirror from "@uiw/react-codemirror";
import { useMemo } from "react";
import { useStyles } from "./CodeInput.styles.js";
import { github, dracula } from "./themes.js";
const CodeInputComponent = ({
  placeholder,
  label,
  description,
  error,
  disabled,
  value,
  language,
  lineNumbers = false,
  foldGutter: foldGutter2 = false,
  theme = "light",
  className,
  style,
  innerRef,
  required,
  onChange
}) => {
  const extensions = useMemo(() => getExtensions(language, foldGutter2), [language, foldGutter2]);
  const hasGutters = lineNumbers || foldGutter2;
  const styles = useStyles();
  return /* @__PURE__ */ jsx(Input.Wrapper, { label, withAsterisk: required, error, description, children: /* @__PURE__ */ jsx(Card, { unstyled: true, withBorder: true, className: theme === "dark" ? styles.classes.darkColors : void 0, children: /* @__PURE__ */ jsx(Card.Section, { className: hasGutters ? styles.classes.guttersPadding : styles.classes.noGuttersPadding, children: /* @__PURE__ */ jsx(CodeMirror, { className, style: {
    minHeight: 54,
    overflowY: "auto",
    ...style
  }, ref: innerRef, value, onChange: (value2, viewUpdate) => {
    onChange == null ? void 0 : onChange(value2);
  }, editable: !disabled, placeholder, basicSetup: {
    lineNumbers,
    foldGutter: false,
    bracketMatching: true,
    highlightActiveLine: false,
    highlightActiveLineGutter: false,
    autocompletion: false
  }, extensions, theme: theme === "light" ? github : dracula }) }) }) });
};
CodeInputComponent.displayName = "CodeInput";
const getExtensions = (language, foldGutter$1) => {
  const extensions = [autocompletion({
    icons: false
  })];
  if (foldGutter$1) {
    extensions.push(foldGutter({
      openText: "▾",
      closedText: "▸"
    }));
  }
  switch (language) {
    case "sql":
      extensions.push(sql());
      break;
    case "mysql":
      extensions.push(sql({
        dialect: MySQL
      }));
      break;
    case "pgsql":
      extensions.push(sql({
        dialect: PostgreSQL
      }));
      break;
    case "json":
      extensions.push(json());
      extensions.push(linter(jsonParseLinter()));
      break;
    case "javascript":
      extensions.push(javascript());
      break;
    case "jsx":
      extensions.push(javascript({
        jsx: true
      }));
      break;
    case "typescript":
      extensions.push(javascript({
        typescript: true
      }));
      break;
    case "tsx":
      extensions.push(javascript({
        jsx: true,
        typescript: true
      }));
      break;
    case "yaml":
      extensions.push(StreamLanguage.define(yaml));
      break;
  }
  return extensions;
};
export {
  CodeInputComponent as default
};
//# sourceMappingURL=CodeInputComponent.js.map