mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
chore: Adds a storybook to FilterableTable (#19897)
This commit is contained in:
parent
e1f53f2a2c
commit
7657e42cff
@ -28,7 +28,7 @@ import Loading from 'src/components/Loading';
|
|||||||
import configureStore from 'redux-mock-store';
|
import configureStore from 'redux-mock-store';
|
||||||
import thunk from 'redux-thunk';
|
import thunk from 'redux-thunk';
|
||||||
import fetchMock from 'fetch-mock';
|
import fetchMock from 'fetch-mock';
|
||||||
import FilterableTable from 'src/components/FilterableTable/FilterableTable';
|
import FilterableTable from 'src/components/FilterableTable';
|
||||||
import ExploreResultsButton from 'src/SqlLab/components/ExploreResultsButton';
|
import ExploreResultsButton from 'src/SqlLab/components/ExploreResultsButton';
|
||||||
import ResultSet from 'src/SqlLab/components/ResultSet';
|
import ResultSet from 'src/SqlLab/components/ResultSet';
|
||||||
import ErrorMessageWithStackTrace from 'src/components/ErrorMessage/ErrorMessageWithStackTrace';
|
import ErrorMessageWithStackTrace from 'src/components/ErrorMessage/ErrorMessageWithStackTrace';
|
||||||
|
@ -39,7 +39,7 @@ import ProgressBar from 'src/components/ProgressBar';
|
|||||||
import Loading from 'src/components/Loading';
|
import Loading from 'src/components/Loading';
|
||||||
import FilterableTable, {
|
import FilterableTable, {
|
||||||
MAX_COLUMNS_FOR_TABLE,
|
MAX_COLUMNS_FOR_TABLE,
|
||||||
} from 'src/components/FilterableTable/FilterableTable';
|
} from 'src/components/FilterableTable';
|
||||||
import CopyToClipboard from 'src/components/CopyToClipboard';
|
import CopyToClipboard from 'src/components/CopyToClipboard';
|
||||||
import { prepareCopyToClipboardTabularData } from 'src/utils/common';
|
import { prepareCopyToClipboardTabularData } from 'src/utils/common';
|
||||||
import { exploreChart } from 'src/explore/exploreUtils';
|
import { exploreChart } from 'src/explore/exploreUtils';
|
||||||
|
@ -0,0 +1,73 @@
|
|||||||
|
/**
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
import React from 'react';
|
||||||
|
import FilterableTable, { FilterableTableProps } from '.';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'FilterableTable',
|
||||||
|
component: FilterableTable,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const InteractiveTable = (args: FilterableTableProps) => (
|
||||||
|
<div css={{ maxWidth: 700 }}>
|
||||||
|
<FilterableTable {...args} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
InteractiveTable.args = {
|
||||||
|
filterText: '',
|
||||||
|
orderedColumnKeys: ['id', 'name', 'age', 'location'],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'John',
|
||||||
|
age: 32,
|
||||||
|
location: { city: 'Barcelona', country: 'Spain' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: 'Mary',
|
||||||
|
age: 53,
|
||||||
|
location: { city: 'Madrid', country: 'Spain' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: 'Peter',
|
||||||
|
age: 60,
|
||||||
|
location: { city: 'Paris', country: 'France' },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
height: 300,
|
||||||
|
headerHeight: 30,
|
||||||
|
overscanColumnCount: 0,
|
||||||
|
overscanRowCount: 0,
|
||||||
|
rowHeight: 30,
|
||||||
|
striped: true,
|
||||||
|
expandedColumns: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
InteractiveTable.argTypes = {};
|
||||||
|
|
||||||
|
InteractiveTable.story = {
|
||||||
|
parameters: {
|
||||||
|
knobs: {
|
||||||
|
disable: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
@ -21,7 +21,7 @@ import { ReactWrapper } from 'enzyme';
|
|||||||
import { styledMount as mount } from 'spec/helpers/theming';
|
import { styledMount as mount } from 'spec/helpers/theming';
|
||||||
import FilterableTable, {
|
import FilterableTable, {
|
||||||
MAX_COLUMNS_FOR_TABLE,
|
MAX_COLUMNS_FOR_TABLE,
|
||||||
} from 'src/components/FilterableTable/FilterableTable';
|
} from 'src/components/FilterableTable';
|
||||||
import { render, screen } from 'spec/helpers/testing-library';
|
import { render, screen } from 'spec/helpers/testing-library';
|
||||||
import userEvent from '@testing-library/user-event';
|
import userEvent from '@testing-library/user-event';
|
||||||
|
|
||||||
|
@ -29,7 +29,13 @@ import {
|
|||||||
SortIndicator,
|
SortIndicator,
|
||||||
Table,
|
Table,
|
||||||
} from 'react-virtualized';
|
} from 'react-virtualized';
|
||||||
import { getMultipleTextDimensions, t, styled } from '@superset-ui/core';
|
import {
|
||||||
|
getMultipleTextDimensions,
|
||||||
|
t,
|
||||||
|
styled,
|
||||||
|
SupersetTheme,
|
||||||
|
withTheme,
|
||||||
|
} from '@superset-ui/core';
|
||||||
import Button from '../Button';
|
import Button from '../Button';
|
||||||
import CopyToClipboard from '../CopyToClipboard';
|
import CopyToClipboard from '../CopyToClipboard';
|
||||||
import ModalTrigger from '../ModalTrigger';
|
import ModalTrigger from '../ModalTrigger';
|
||||||
@ -60,26 +66,6 @@ function safeJsonObjectParse(
|
|||||||
|
|
||||||
const GRID_POSITION_ADJUSTMENT = 4;
|
const GRID_POSITION_ADJUSTMENT = 4;
|
||||||
const SCROLL_BAR_HEIGHT = 15;
|
const SCROLL_BAR_HEIGHT = 15;
|
||||||
const JSON_TREE_THEME = {
|
|
||||||
scheme: 'monokai',
|
|
||||||
author: 'wimer hazenberg (http://www.monokai.nl)',
|
|
||||||
base00: '#272822',
|
|
||||||
base01: '#383830',
|
|
||||||
base02: '#49483e',
|
|
||||||
base03: '#75715e',
|
|
||||||
base04: '#a59f85',
|
|
||||||
base05: '#f8f8f2',
|
|
||||||
base06: '#f5f4f1',
|
|
||||||
base07: '#f9f8f5',
|
|
||||||
base08: '#f92672',
|
|
||||||
base09: '#fd971f',
|
|
||||||
base0A: '#f4bf75',
|
|
||||||
base0B: '#a6e22e',
|
|
||||||
base0C: '#a1efe4',
|
|
||||||
base0D: '#66d9ef',
|
|
||||||
base0E: '#ae81ff',
|
|
||||||
base0F: '#cc6633',
|
|
||||||
};
|
|
||||||
// This regex handles all possible number formats in javascript, including ints, floats,
|
// This regex handles all possible number formats in javascript, including ints, floats,
|
||||||
// exponential notation, NaN, and Infinity.
|
// exponential notation, NaN, and Infinity.
|
||||||
// See https://stackoverflow.com/a/30987109 for more details
|
// See https://stackoverflow.com/a/30987109 for more details
|
||||||
@ -198,7 +184,7 @@ export const MAX_COLUMNS_FOR_TABLE = 50;
|
|||||||
type CellDataType = string | number | null;
|
type CellDataType = string | number | null;
|
||||||
type Datum = Record<string, CellDataType>;
|
type Datum = Record<string, CellDataType>;
|
||||||
|
|
||||||
interface FilterableTableProps {
|
export interface FilterableTableProps {
|
||||||
orderedColumnKeys: string[];
|
orderedColumnKeys: string[];
|
||||||
data: Record<string, unknown>[];
|
data: Record<string, unknown>[];
|
||||||
height: number;
|
height: number;
|
||||||
@ -209,6 +195,7 @@ interface FilterableTableProps {
|
|||||||
rowHeight: number;
|
rowHeight: number;
|
||||||
striped: boolean;
|
striped: boolean;
|
||||||
expandedColumns: string[];
|
expandedColumns: string[];
|
||||||
|
theme: SupersetTheme;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface FilterableTableState {
|
interface FilterableTableState {
|
||||||
@ -218,7 +205,7 @@ interface FilterableTableState {
|
|||||||
displayedList: Datum[];
|
displayedList: Datum[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class FilterableTable extends PureComponent<
|
class FilterableTable extends PureComponent<
|
||||||
FilterableTableProps,
|
FilterableTableProps,
|
||||||
FilterableTableState
|
FilterableTableState
|
||||||
> {
|
> {
|
||||||
@ -244,6 +231,8 @@ export default class FilterableTable extends PureComponent<
|
|||||||
|
|
||||||
container: React.RefObject<HTMLDivElement>;
|
container: React.RefObject<HTMLDivElement>;
|
||||||
|
|
||||||
|
jsonTreeTheme: Record<string, string>;
|
||||||
|
|
||||||
constructor(props: FilterableTableProps) {
|
constructor(props: FilterableTableProps) {
|
||||||
super(props);
|
super(props);
|
||||||
this.list = this.formatTableData(props.data);
|
this.list = this.formatTableData(props.data);
|
||||||
@ -258,6 +247,7 @@ export default class FilterableTable extends PureComponent<
|
|||||||
this.renderTable = this.renderTable.bind(this);
|
this.renderTable = this.renderTable.bind(this);
|
||||||
this.rowClassName = this.rowClassName.bind(this);
|
this.rowClassName = this.rowClassName.bind(this);
|
||||||
this.sort = this.sort.bind(this);
|
this.sort = this.sort.bind(this);
|
||||||
|
this.getJsonTreeTheme = this.getJsonTreeTheme.bind(this);
|
||||||
|
|
||||||
// columns that have complex type and were expanded into sub columns
|
// columns that have complex type and were expanded into sub columns
|
||||||
this.complexColumns = props.orderedColumnKeys.reduce(
|
this.complexColumns = props.orderedColumnKeys.reduce(
|
||||||
@ -286,6 +276,31 @@ export default class FilterableTable extends PureComponent<
|
|||||||
this.fitTableToWidthIfNeeded();
|
this.fitTableToWidthIfNeeded();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getJsonTreeTheme() {
|
||||||
|
if (!this.jsonTreeTheme) {
|
||||||
|
const { theme } = this.props;
|
||||||
|
this.jsonTreeTheme = {
|
||||||
|
base00: theme.colors.grayscale.dark2,
|
||||||
|
base01: theme.colors.grayscale.dark1,
|
||||||
|
base02: theme.colors.grayscale.base,
|
||||||
|
base03: theme.colors.grayscale.light1,
|
||||||
|
base04: theme.colors.grayscale.light2,
|
||||||
|
base05: theme.colors.grayscale.light3,
|
||||||
|
base06: theme.colors.grayscale.light4,
|
||||||
|
base07: theme.colors.grayscale.light5,
|
||||||
|
base08: theme.colors.error.base,
|
||||||
|
base09: theme.colors.error.light1,
|
||||||
|
base0A: theme.colors.error.light2,
|
||||||
|
base0B: theme.colors.success.base,
|
||||||
|
base0C: theme.colors.primary.light1,
|
||||||
|
base0D: theme.colors.primary.base,
|
||||||
|
base0E: theme.colors.primary.dark1,
|
||||||
|
base0F: theme.colors.error.dark1,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return this.jsonTreeTheme;
|
||||||
|
}
|
||||||
|
|
||||||
getDatum(list: Datum[], index: number) {
|
getDatum(list: Datum[], index: number) {
|
||||||
return list[index % list.length];
|
return list[index % list.length];
|
||||||
}
|
}
|
||||||
@ -439,7 +454,9 @@ export default class FilterableTable extends PureComponent<
|
|||||||
) {
|
) {
|
||||||
return (
|
return (
|
||||||
<ModalTrigger
|
<ModalTrigger
|
||||||
modalBody={<JSONTree data={jsonObject} theme={JSON_TREE_THEME} />}
|
modalBody={
|
||||||
|
<JSONTree data={jsonObject} theme={this.getJsonTreeTheme()} />
|
||||||
|
}
|
||||||
modalFooter={
|
modalFooter={
|
||||||
<Button>
|
<Button>
|
||||||
<CopyToClipboard shouldShowText={false} text={jsonString} />
|
<CopyToClipboard shouldShowText={false} text={jsonString} />
|
||||||
@ -758,3 +775,5 @@ export default class FilterableTable extends PureComponent<
|
|||||||
return this.renderTable();
|
return this.renderTable();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default withTheme(FilterableTable);
|
Loading…
Reference in New Issue
Block a user