mirror of
https://github.com/apache/superset.git
synced 2024-09-18 03:29:38 -04:00
style: remove react bootstrap fade component (#11843)
* Replace Bootstrap Fade component with custom Emotion Fade component * Fix lint errors * Added test * Fixing front-end build errors * Fix lint errors
This commit is contained in:
parent
a76eadd838
commit
9514be5daf
@ -23,6 +23,7 @@ import configureStore from 'redux-mock-store';
|
|||||||
import { supersetTheme, ThemeProvider } from '@superset-ui/core';
|
import { supersetTheme, ThemeProvider } from '@superset-ui/core';
|
||||||
|
|
||||||
import Link from 'src/components/Link';
|
import Link from 'src/components/Link';
|
||||||
|
import Fade from 'src/common/components/Fade';
|
||||||
import TableElement from 'src/SqlLab/components/TableElement';
|
import TableElement from 'src/SqlLab/components/TableElement';
|
||||||
import ColumnElement from 'src/SqlLab/components/ColumnElement';
|
import ColumnElement from 'src/SqlLab/components/ColumnElement';
|
||||||
|
|
||||||
@ -63,6 +64,14 @@ describe('TableElement', () => {
|
|||||||
},
|
},
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
it('fades table', () => {
|
||||||
|
const wrapper = shallow(<TableElement {...mockedProps} />);
|
||||||
|
expect(wrapper.state().hovered).toBe(false);
|
||||||
|
expect(wrapper.find(Fade).props().hovered).toBe(false);
|
||||||
|
wrapper.find('div.TableElement').simulate('mouseEnter');
|
||||||
|
expect(wrapper.state().hovered).toBe(true);
|
||||||
|
expect(wrapper.find(Fade).props().hovered).toBe(true);
|
||||||
|
});
|
||||||
it('sorts columns', () => {
|
it('sorts columns', () => {
|
||||||
const wrapper = shallow(<TableElement {...mockedProps} />);
|
const wrapper = shallow(<TableElement {...mockedProps} />);
|
||||||
expect(wrapper.state().sortColumns).toBe(false);
|
expect(wrapper.state().sortColumns).toBe(false);
|
||||||
|
@ -18,10 +18,11 @@
|
|||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { ButtonGroup, Collapse, Fade, Well } from 'react-bootstrap';
|
import { ButtonGroup, Collapse, Well } from 'react-bootstrap';
|
||||||
import shortid from 'shortid';
|
import shortid from 'shortid';
|
||||||
import { t } from '@superset-ui/core';
|
import { t } from '@superset-ui/core';
|
||||||
|
|
||||||
|
import Fade from 'src/common/components/Fade';
|
||||||
import CopyToClipboard from '../../components/CopyToClipboard';
|
import CopyToClipboard from '../../components/CopyToClipboard';
|
||||||
import Link from '../../components/Link';
|
import Link from '../../components/Link';
|
||||||
import ColumnElement from './ColumnElement';
|
import ColumnElement from './ColumnElement';
|
||||||
@ -215,7 +216,7 @@ class TableElement extends React.PureComponent {
|
|||||||
{table.isMetadataLoading || table.isExtraMetadataLoading ? (
|
{table.isMetadataLoading || table.isExtraMetadataLoading ? (
|
||||||
<Loading position="inline" />
|
<Loading position="inline" />
|
||||||
) : (
|
) : (
|
||||||
<Fade in={this.state.hovered}>{this.renderControls()}</Fade>
|
<Fade hovered={this.state.hovered}>{this.renderControls()}</Fade>
|
||||||
)}
|
)}
|
||||||
<i
|
<i
|
||||||
role="button"
|
role="button"
|
||||||
|
28
superset-frontend/src/common/components/Fade.tsx
Normal file
28
superset-frontend/src/common/components/Fade.tsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
/**
|
||||||
|
* 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 { styled } from '@superset-ui/core';
|
||||||
|
|
||||||
|
type FadeProps = { hovered: boolean };
|
||||||
|
|
||||||
|
const Fade = styled.div<FadeProps>`
|
||||||
|
transition: all ${({ theme }) => theme.transitionTiming}s;
|
||||||
|
opacity: ${props => (props.hovered ? 1 : 0)};
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default Fade;
|
Loading…
Reference in New Issue
Block a user