mirror of https://github.com/apache/superset.git
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 thunk from 'redux-thunk';
|
||||
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 ResultSet from 'src/SqlLab/components/ResultSet';
|
||||
import ErrorMessageWithStackTrace from 'src/components/ErrorMessage/ErrorMessageWithStackTrace';
|
||||
|
|
|
@ -39,7 +39,7 @@ import ProgressBar from 'src/components/ProgressBar';
|
|||
import Loading from 'src/components/Loading';
|
||||
import FilterableTable, {
|
||||
MAX_COLUMNS_FOR_TABLE,
|
||||
} from 'src/components/FilterableTable/FilterableTable';
|
||||
} from 'src/components/FilterableTable';
|
||||
import CopyToClipboard from 'src/components/CopyToClipboard';
|
||||
import { prepareCopyToClipboardTabularData } from 'src/utils/common';
|
||||
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 FilterableTable, {
|
||||
MAX_COLUMNS_FOR_TABLE,
|
||||
} from 'src/components/FilterableTable/FilterableTable';
|
||||
} from 'src/components/FilterableTable';
|
||||
import { render, screen } from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
|
||||
|
|
|
@ -29,7 +29,13 @@ import {
|
|||
SortIndicator,
|
||||
Table,
|
||||
} 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 CopyToClipboard from '../CopyToClipboard';
|
||||
import ModalTrigger from '../ModalTrigger';
|
||||
|
@ -60,26 +66,6 @@ function safeJsonObjectParse(
|
|||
|
||||
const GRID_POSITION_ADJUSTMENT = 4;
|
||||
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,
|
||||
// exponential notation, NaN, and Infinity.
|
||||
// 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 Datum = Record<string, CellDataType>;
|
||||
|
||||
interface FilterableTableProps {
|
||||
export interface FilterableTableProps {
|
||||
orderedColumnKeys: string[];
|
||||
data: Record<string, unknown>[];
|
||||
height: number;
|
||||
|
@ -209,6 +195,7 @@ interface FilterableTableProps {
|
|||
rowHeight: number;
|
||||
striped: boolean;
|
||||
expandedColumns: string[];
|
||||
theme: SupersetTheme;
|
||||
}
|
||||
|
||||
interface FilterableTableState {
|
||||
|
@ -218,7 +205,7 @@ interface FilterableTableState {
|
|||
displayedList: Datum[];
|
||||
}
|
||||
|
||||
export default class FilterableTable extends PureComponent<
|
||||
class FilterableTable extends PureComponent<
|
||||
FilterableTableProps,
|
||||
FilterableTableState
|
||||
> {
|
||||
|
@ -244,6 +231,8 @@ export default class FilterableTable extends PureComponent<
|
|||
|
||||
container: React.RefObject<HTMLDivElement>;
|
||||
|
||||
jsonTreeTheme: Record<string, string>;
|
||||
|
||||
constructor(props: FilterableTableProps) {
|
||||
super(props);
|
||||
this.list = this.formatTableData(props.data);
|
||||
|
@ -258,6 +247,7 @@ export default class FilterableTable extends PureComponent<
|
|||
this.renderTable = this.renderTable.bind(this);
|
||||
this.rowClassName = this.rowClassName.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
|
||||
this.complexColumns = props.orderedColumnKeys.reduce(
|
||||
|
@ -286,6 +276,31 @@ export default class FilterableTable extends PureComponent<
|
|||
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) {
|
||||
return list[index % list.length];
|
||||
}
|
||||
|
@ -439,7 +454,9 @@ export default class FilterableTable extends PureComponent<
|
|||
) {
|
||||
return (
|
||||
<ModalTrigger
|
||||
modalBody={<JSONTree data={jsonObject} theme={JSON_TREE_THEME} />}
|
||||
modalBody={
|
||||
<JSONTree data={jsonObject} theme={this.getJsonTreeTheme()} />
|
||||
}
|
||||
modalFooter={
|
||||
<Button>
|
||||
<CopyToClipboard shouldShowText={false} text={jsonString} />
|
||||
|
@ -758,3 +775,5 @@ export default class FilterableTable extends PureComponent<
|
|||
return this.renderTable();
|
||||
}
|
||||
}
|
||||
|
||||
export default withTheme(FilterableTable);
|
Loading…
Reference in New Issue