mirror of
https://github.com/apache/superset.git
synced 2024-09-14 09:39:47 -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 Link from 'src/components/Link';
|
||||
import Fade from 'src/common/components/Fade';
|
||||
import TableElement from 'src/SqlLab/components/TableElement';
|
||||
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', () => {
|
||||
const wrapper = shallow(<TableElement {...mockedProps} />);
|
||||
expect(wrapper.state().sortColumns).toBe(false);
|
||||
|
@ -18,10 +18,11 @@
|
||||
*/
|
||||
import React from 'react';
|
||||
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 { t } from '@superset-ui/core';
|
||||
|
||||
import Fade from 'src/common/components/Fade';
|
||||
import CopyToClipboard from '../../components/CopyToClipboard';
|
||||
import Link from '../../components/Link';
|
||||
import ColumnElement from './ColumnElement';
|
||||
@ -215,7 +216,7 @@ class TableElement extends React.PureComponent {
|
||||
{table.isMetadataLoading || table.isExtraMetadataLoading ? (
|
||||
<Loading position="inline" />
|
||||
) : (
|
||||
<Fade in={this.state.hovered}>{this.renderControls()}</Fade>
|
||||
<Fade hovered={this.state.hovered}>{this.renderControls()}</Fade>
|
||||
)}
|
||||
<i
|
||||
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