From eca3824e2d6c308178c3a9cb72c7591a8198acc8 Mon Sep 17 00:00:00 2001 From: ryan Date: Fri, 8 Mar 2019 20:36:52 -0800 Subject: [PATCH] cleanup --- .../components/Table/TableInputCSV.story.tsx | 19 ++++++++-- .../components/Table/TableInputCSV.test.tsx | 14 ++++++- .../src/components/Table/TableInputCSV.tsx | 37 ++++++++++--------- .../src/components/Table/_TableInputCSV.scss | 11 +++--- 4 files changed, 54 insertions(+), 27 deletions(-) diff --git a/packages/grafana-ui/src/components/Table/TableInputCSV.story.tsx b/packages/grafana-ui/src/components/Table/TableInputCSV.story.tsx index b894de2b4f7..3f6ee6c0ae5 100644 --- a/packages/grafana-ui/src/components/Table/TableInputCSV.story.tsx +++ b/packages/grafana-ui/src/components/Table/TableInputCSV.story.tsx @@ -1,9 +1,22 @@ +import React from 'react'; + import { storiesOf } from '@storybook/react'; -import TableInputCSV from './TableInputCSV'; -import { withFullSizeStory } from '../../utils/storybook/withFullSizeStory'; +import TableInputCSV, { ParseResults } from './TableInputCSV'; +//import { withFullSizeStory } from '../../utils/storybook/withFullSizeStory'; const TableInputStories = storiesOf('UI/Table/Input', module); TableInputStories.add('default', () => { - return withFullSizeStory(TableInputCSV, {}); + //return withFullSizeStory(TableInputCSV, {}); + return ( +
+ { + console.log('GOT', results); + }} + /> +
+ ); }); diff --git a/packages/grafana-ui/src/components/Table/TableInputCSV.test.tsx b/packages/grafana-ui/src/components/Table/TableInputCSV.test.tsx index af3d764f7a9..1c77cf8b24a 100644 --- a/packages/grafana-ui/src/components/Table/TableInputCSV.test.tsx +++ b/packages/grafana-ui/src/components/Table/TableInputCSV.test.tsx @@ -1,11 +1,21 @@ import React from 'react'; import renderer from 'react-test-renderer'; -import TableInputCSV from './TableInputCSV'; +import TableInputCSV, { ParseResults } from './TableInputCSV'; describe('TableInputCSV', () => { it('renders correctly', () => { - const tree = renderer.create().toJSON(); + const tree = renderer + .create( + { + console.log('GOT', results); + }} + /> + ) + .toJSON(); //expect(tree).toMatchSnapshot(); expect(tree).toBeDefined(); }); diff --git a/packages/grafana-ui/src/components/Table/TableInputCSV.tsx b/packages/grafana-ui/src/components/Table/TableInputCSV.tsx index 4f7e6c202f7..4ea857aad9d 100644 --- a/packages/grafana-ui/src/components/Table/TableInputCSV.tsx +++ b/packages/grafana-ui/src/components/Table/TableInputCSV.tsx @@ -3,7 +3,7 @@ import debounce from 'lodash/debounce'; import Papa, { ParseError, ParseMeta } from 'papaparse'; import { TableData, Column } from '../../types/data'; -// Subset of all parse configs +// Subset of all parse options export interface ParseConfig { delimiter?: string; // default: "," newline?: string; // default: "\r\n" @@ -12,7 +12,7 @@ export interface ParseConfig { comments?: boolean | string; // default: false } -interface ParseResults { +export interface ParseResults { table: TableData; meta: ParseMeta; errors: ParseError[]; @@ -106,8 +106,9 @@ export function parseCSV(text: string, config?: ParseConfig): ParseResults { interface Props { config?: ParseConfig; - width: number; - height: number; + width: number | string; + height: number | string; + onTableParsed: (results: ParseResults) => void; } interface State { @@ -127,37 +128,39 @@ class TableInputCSV extends React.PureComponent { readCSV = debounce(() => { const results = parseCSV(this.state.text, this.props.config); this.setState({ results }); - console.log('GOT:', results); }, 150); componentDidUpdate(prevProps: Props, prevState: State) { if (this.state.text !== prevState.text || this.props.config !== prevProps.config) { this.readCSV(); } + if (this.state.results !== prevState.results) { + this.props.onTableParsed(this.state.results); + } } handleChange = (event: any) => { this.setState({ text: event.target.value }); }; - handleBlur = (event: React.SyntheticEvent) => { - // console.log('BLUR', event); - }; render() { const { width, height } = this.props; const { table, errors } = this.state.results; + let clazz = 'fa fa-check-circle'; + errors.forEach(error => { + if (error.type === 'warning') { + clazz = 'fa fa-exclamation-triangle'; + } else { + clazz = 'fa fa-times-circle'; + } + }); + return ( -
-