@grafana/ui/dist/cjs/graveyard/TableInputCSV/TableInputCSV.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var lodash = require('lodash');
var React = require('react');
var data = require('@grafana/data');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var stylesFactory = require('../../themes/stylesFactory.cjs');
var Icon = require('../../components/Icon/Icon.cjs');
var TextArea = require('../../components/TextArea/TextArea.cjs');

"use strict";
class UnThemedTableInputCSV extends React.PureComponent {
  constructor(props) {
    super(props);
    this.readCSV = lodash.debounce(() => {
      const { config } = this.props;
      const { text } = this.state;
      this.setState({ data: data.readCSV(text, { config }) });
    }, 150);
    this.onTextChange = (event) => {
      this.setState({ text: event.target.value });
    };
    const { text, config } = props;
    this.state = {
      text,
      data: data.readCSV(text, { config })
    };
  }
  componentDidUpdate(prevProps, prevState) {
    const { text } = this.state;
    if (text !== prevState.text || this.props.config !== prevProps.config) {
      this.readCSV();
    }
    if (this.props.text !== prevProps.text && this.props.text !== text) {
      this.setState({ text: this.props.text });
    }
    if (this.state.data !== prevState.data) {
      this.props.onSeriesParsed(this.state.data, this.state.text);
    }
  }
  render() {
    const { width, height, theme } = this.props;
    const { data } = this.state;
    const styles = getStyles(theme);
    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.tableInputCsv, children: [
      /* @__PURE__ */ jsxRuntime.jsx(
        TextArea.TextArea,
        {
          style: { width, height },
          placeholder: i18n.t("grafana-ui.table.csv-placeholder", "Enter CSV here..."),
          value: this.state.text,
          onChange: this.onTextChange,
          className: styles.textarea
        }
      ),
      data && /* @__PURE__ */ jsxRuntime.jsx("footer", { className: styles.footer, children: data.map((frame, index) => {
        const rows = frame.length;
        const columns = frame.fields.length;
        return /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
          /* @__PURE__ */ jsxRuntime.jsxs(i18n.Trans, { i18nKey: "grafana-ui.table.csv-counts", children: [
            "Rows:",
            { rows },
            ", Columns:",
            { columns }
          ] }),
          "\xA0",
          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "check-circle" })
        ] }, index);
      }) })
    ] });
  }
}
const TableInputCSV = ThemeContext.withTheme2(UnThemedTableInputCSV);
TableInputCSV.displayName = "TableInputCSV";
const getStyles = stylesFactory.stylesFactory((theme) => {
  return {
    tableInputCsv: css.css({
      position: "relative"
    }),
    textarea: css.css({
      height: "100%",
      width: "100%"
    }),
    footer: css.css({
      position: "absolute",
      bottom: "15px",
      right: "15px",
      border: `1px solid ${theme.colors.success.border}`,
      background: theme.colors.success.main,
      color: theme.colors.success.contrastText,
      padding: `1px ${theme.spacing(0.5)}`,
      fontSize: "80%"
    })
  };
});

exports.TableInputCSV = TableInputCSV;
//# sourceMappingURL=TableInputCSV.cjs.map