mirror of
https://github.com/apache/superset.git
synced 2024-09-14 09:39:47 -04:00
refactor: Move ProgressBar to Antd (#11875)
* Move ProgressBar to Antd * Remove trailing space * Fix linting issues * Export enhanced Progress only
This commit is contained in:
parent
54bf70733f
commit
5b1939802d
@ -19,7 +19,8 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import sinon from 'sinon';
|
||||
import { Alert, ProgressBar } from 'react-bootstrap';
|
||||
import { Alert } from 'react-bootstrap';
|
||||
import ProgressBar from 'src/common/components/ProgressBar';
|
||||
|
||||
import FilterableTable from 'src/components/FilterableTable/FilterableTable';
|
||||
import ExploreResultsButton from 'src/SqlLab/components/ExploreResultsButton';
|
||||
|
@ -19,7 +19,8 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import moment from 'moment';
|
||||
import { ProgressBar, Well } from 'react-bootstrap';
|
||||
import { Well } from 'react-bootstrap';
|
||||
import ProgressBar from 'src/common/components/ProgressBar';
|
||||
import Label from 'src/components/Label';
|
||||
import { t } from '@superset-ui/core';
|
||||
|
||||
@ -169,11 +170,7 @@ const QueryTable = props => {
|
||||
q.output = [schemaUsed, q.tempTable].filter(v => v).join('.');
|
||||
}
|
||||
q.progress = (
|
||||
<ProgressBar
|
||||
striped
|
||||
now={q.progress}
|
||||
label={`${q.progress.toFixed(0)}%`}
|
||||
/>
|
||||
<ProgressBar percent={parseInt(q.progress.toFixed(0), 10)} striped />
|
||||
);
|
||||
let errorTooltip;
|
||||
if (q.errorMessage) {
|
||||
|
@ -17,7 +17,8 @@
|
||||
* under the License.
|
||||
*/
|
||||
import React, { CSSProperties } from 'react';
|
||||
import { Alert, ButtonGroup, ProgressBar } from 'react-bootstrap';
|
||||
import { Alert, ButtonGroup } from 'react-bootstrap';
|
||||
import ProgressBar from 'src/common/components/ProgressBar';
|
||||
import Button from 'src/components/Button';
|
||||
import shortid from 'shortid';
|
||||
import { styled, t } from '@superset-ui/core';
|
||||
@ -356,9 +357,8 @@ export default class ResultSet extends React.PureComponent<
|
||||
if (query.progress > 0) {
|
||||
progressBar = (
|
||||
<ProgressBar
|
||||
percent={parseInt(query.progress.toFixed(0), 10)}
|
||||
striped
|
||||
now={query.progress}
|
||||
label={`${query.progress.toFixed(0)}%`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
54
superset-frontend/src/common/components/ProgressBar.tsx
Normal file
54
superset-frontend/src/common/components/ProgressBar.tsx
Normal file
@ -0,0 +1,54 @@
|
||||
/**
|
||||
* 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 { styled } from '@superset-ui/core';
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { Progress as AntdProgress } from 'antd';
|
||||
import { ProgressProps } from 'antd/lib/progress/progress';
|
||||
|
||||
interface ProgressBarProps extends ProgressProps {
|
||||
striped?: boolean;
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const ProgressBar = styled(({ striped, ...props }: ProgressBarProps) => (
|
||||
<AntdProgress {...props} />
|
||||
))`
|
||||
line-height: 0;
|
||||
.ant-progress-outer {
|
||||
${({ percent }) => !percent && `display: none;`}
|
||||
}
|
||||
.ant-progress-text {
|
||||
font-size: ${({ theme }) => theme.typography.sizes.s}px;
|
||||
}
|
||||
.ant-progress-bg {
|
||||
${({ striped }) =>
|
||||
striped &&
|
||||
`
|
||||
background-image: linear-gradient(45deg,
|
||||
rgba(255, 255, 255, 0.15) 25%,
|
||||
transparent 25%, transparent 50%,
|
||||
rgba(255, 255, 255, 0.15) 50%,
|
||||
rgba(255, 255, 255, 0.15) 75%,
|
||||
transparent 75%, transparent);
|
||||
background-size: 1rem 1rem; `};
|
||||
}
|
||||
`;
|
||||
|
||||
export default ProgressBar;
|
@ -32,6 +32,7 @@ import {
|
||||
DatePicker as AntdDatePicker,
|
||||
RangePicker as AntdRangePicker,
|
||||
} from './DatePicker';
|
||||
import ProgressBar from './ProgressBar';
|
||||
|
||||
export default {
|
||||
title: 'Common Components',
|
||||
@ -239,6 +240,10 @@ export const DateRangePicker = () => (
|
||||
/>
|
||||
);
|
||||
|
||||
export const Progress = () => <ProgressBar percent={90} />;
|
||||
export const ProgressStriped = () => <ProgressBar percent={90} striped />;
|
||||
export const ProgressSuccess = () => <ProgressBar percent={100} />;
|
||||
|
||||
export const Switch = () => (
|
||||
<>
|
||||
<AntdSwitch defaultChecked />
|
||||
|
@ -48,6 +48,8 @@ export {
|
||||
Tooltip,
|
||||
} from 'antd';
|
||||
|
||||
export { default as Progress } from 'src/common/components/ProgressBar';
|
||||
|
||||
export const MenuItem = styled(AntdMenu.Item)`
|
||||
> a {
|
||||
text-decoration: none;
|
||||
|
Loading…
Reference in New Issue
Block a user