@grafana/ui
Version:
Grafana Components Library
98 lines (95 loc) • 3.16 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import { debounce } from 'lodash';
import { PureComponent } from 'react';
import { readCSV } from '@grafana/data';
import { t, Trans } from '@grafana/i18n';
import { withTheme2 } from '../../themes/ThemeContext.mjs';
import { stylesFactory } from '../../themes/stylesFactory.mjs';
import { Icon } from '../Icon/Icon.mjs';
import { TextArea } from '../TextArea/TextArea.mjs';
"use strict";
class UnThemedTableInputCSV extends PureComponent {
constructor(props) {
super(props);
this.readCSV = debounce(() => {
const { config } = this.props;
const { text } = this.state;
this.setState({ data: readCSV(text, { config }) });
}, 150);
this.onTextChange = (event) => {
this.setState({ text: event.target.value });
};
const { text, config } = props;
this.state = {
text,
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__ */ jsxs("div", { className: styles.tableInputCsv, children: [
/* @__PURE__ */ jsx(
TextArea,
{
style: { width, height },
placeholder: t("grafana-ui.table.csv-placeholder", "Enter CSV here..."),
value: this.state.text,
onChange: this.onTextChange,
className: styles.textarea
}
),
data && /* @__PURE__ */ jsx("footer", { className: styles.footer, children: data.map((frame, index) => {
const rows = frame.length;
const columns = frame.fields.length;
return /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs(Trans, { i18nKey: "grafana-ui.table.csv-counts", children: [
"Rows:",
{ rows },
", Columns:",
{ columns },
" \xA0",
/* @__PURE__ */ jsx(Icon, { name: "check-circle" })
] }) }, index);
}) })
] });
}
}
const TableInputCSV = withTheme2(UnThemedTableInputCSV);
TableInputCSV.displayName = "TableInputCSV";
const getStyles = stylesFactory((theme) => {
return {
tableInputCsv: css({
position: "relative"
}),
textarea: css({
height: "100%",
width: "100%"
}),
footer: 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%"
})
};
});
export { TableInputCSV, UnThemedTableInputCSV };
//# sourceMappingURL=TableInputCSV.mjs.map