You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ru...@apache.org on 2021/02/02 19:27:36 UTC
[superset] branch master updated: Migrates Radio component from
Bootstrap to AntD. (#12738)
This is an automated email from the ASF dual-hosted git repository.
rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 5a79a7d Migrates Radio component from Bootstrap to AntD. (#12738)
5a79a7d is described below
commit 5a79a7d99340b5963781fc17f55a26b6878788d4
Author: Michael S. Molina <70...@users.noreply.github.com>
AuthorDate: Tue Feb 2 16:26:26 2021 -0300
Migrates Radio component from Bootstrap to AntD. (#12738)
---
.../datasource/DatasourceEditor_spec.jsx | 2 +-
.../explore/components/DateFilterControl_spec.jsx | 2 +-
.../explore/components/SaveModal_spec.jsx | 3 +-
.../javascripts/sqllab/SaveDatasetModal_spec.tsx | 3 +-
.../src/SqlLab/components/SaveDatasetModal.tsx | 3 +-
.../src/common/components/Radio/Radio.stories.tsx | 56 ++++++++++++++++++++++
.../components/{Radio.tsx => Radio/index.tsx} | 16 +++++--
.../src/common/components/common.stories.tsx | 1 +
superset-frontend/src/common/components/index.tsx | 2 +-
.../src/dashboard/components/SaveModal.tsx | 6 ++-
.../components/nativeFilters/FilterScope.tsx | 2 +-
.../src/datasource/DatasourceEditor.jsx | 3 +-
.../src/explore/components/SaveModal.tsx | 5 +-
.../components/controls/DateFilterControl.jsx | 3 +-
.../DateFilterControl/frame/CalendarFrame.tsx | 2 +-
.../DateFilterControl/frame/CommonFrame.tsx | 2 +-
.../DateFilterControl/frame/CustomFrame.tsx | 9 +---
17 files changed, 92 insertions(+), 28 deletions(-)
diff --git a/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx b/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx
index 031dea9..e006aaa 100644
--- a/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx
+++ b/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx
@@ -21,7 +21,7 @@ import { shallow } from 'enzyme';
import configureStore from 'redux-mock-store';
import fetchMock from 'fetch-mock';
import thunk from 'redux-thunk';
-import { Radio } from 'react-bootstrap';
+import { Radio } from 'src/common/components/Radio';
import Icon from 'src/components/Icon';
import Tabs from 'src/common/components/Tabs';
diff --git a/superset-frontend/spec/javascripts/explore/components/DateFilterControl_spec.jsx b/superset-frontend/spec/javascripts/explore/components/DateFilterControl_spec.jsx
index aaa308f..dcc58ed 100644
--- a/superset-frontend/spec/javascripts/explore/components/DateFilterControl_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/DateFilterControl_spec.jsx
@@ -18,7 +18,7 @@
*/
/* eslint-disable no-unused-expressions */
import React from 'react';
-import { Radio } from 'react-bootstrap';
+import { Radio } from 'src/common/components/Radio';
import sinon from 'sinon';
import { styledMount as mount } from 'spec/helpers/theming';
diff --git a/superset-frontend/spec/javascripts/explore/components/SaveModal_spec.jsx b/superset-frontend/spec/javascripts/explore/components/SaveModal_spec.jsx
index 1c3c50c..ba81b2c 100644
--- a/superset-frontend/spec/javascripts/explore/components/SaveModal_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/SaveModal_spec.jsx
@@ -24,7 +24,8 @@ import { Provider } from 'react-redux';
import { shallow } from 'enzyme';
import { styledMount as mount } from 'spec/helpers/theming';
-import { FormControl, Radio } from 'react-bootstrap';
+import { FormControl } from 'react-bootstrap';
+import { Radio } from 'src/common/components/Radio';
import Button from 'src/components/Button';
import sinon from 'sinon';
import fetchMock from 'fetch-mock';
diff --git a/superset-frontend/spec/javascripts/sqllab/SaveDatasetModal_spec.tsx b/superset-frontend/spec/javascripts/sqllab/SaveDatasetModal_spec.tsx
index 1fe721a..97fe25b 100644
--- a/superset-frontend/spec/javascripts/sqllab/SaveDatasetModal_spec.tsx
+++ b/superset-frontend/spec/javascripts/sqllab/SaveDatasetModal_spec.tsx
@@ -18,7 +18,8 @@
*/
import React from 'react';
import { shallow } from 'enzyme';
-import { Radio, AutoComplete, Input } from 'src/common/components';
+import { Radio } from 'src/common/components/Radio';
+import { AutoComplete, Input } from 'src/common/components';
import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
describe('SaveDatasetModal', () => {
diff --git a/superset-frontend/src/SqlLab/components/SaveDatasetModal.tsx b/superset-frontend/src/SqlLab/components/SaveDatasetModal.tsx
index b8ada41..e5c8b68 100644
--- a/superset-frontend/src/SqlLab/components/SaveDatasetModal.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveDatasetModal.tsx
@@ -19,7 +19,8 @@
import React, { FunctionComponent } from 'react';
import { AutoCompleteProps } from 'antd/lib/auto-complete';
-import { Radio, AutoComplete, Input } from 'src/common/components';
+import { Radio } from 'src/common/components/Radio';
+import { AutoComplete, Input } from 'src/common/components';
import StyledModal from 'src/common/components/Modal';
import Button from 'src/components/Button';
import { styled, t } from '@superset-ui/core';
diff --git a/superset-frontend/src/common/components/Radio/Radio.stories.tsx b/superset-frontend/src/common/components/Radio/Radio.stories.tsx
new file mode 100644
index 0000000..2688cd7
--- /dev/null
+++ b/superset-frontend/src/common/components/Radio/Radio.stories.tsx
@@ -0,0 +1,56 @@
+/**
+ * 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 { useArgs } from '@storybook/client-api';
+import { Radio } from './index';
+
+export default {
+ title: 'Radio',
+ component: Radio,
+ parameters: {
+ controls: { hideNoControlsWarning: true },
+ },
+ argTypes: {
+ theme: {
+ table: {
+ disable: true,
+ },
+ },
+ checked: { control: 'boolean' },
+ disabled: { control: 'boolean' },
+ },
+};
+
+export const SupersetRadio = () => {
+ const [{ checked, ...rest }, updateArgs] = useArgs();
+ return (
+ <Radio
+ checked={checked}
+ onChange={() => updateArgs({ checked: !checked })}
+ {...rest}
+ >
+ Example
+ </Radio>
+ );
+};
+
+SupersetRadio.args = {
+ checked: false,
+ disabled: false,
+};
diff --git a/superset-frontend/src/common/components/Radio.tsx b/superset-frontend/src/common/components/Radio/index.tsx
similarity index 76%
rename from superset-frontend/src/common/components/Radio.tsx
rename to superset-frontend/src/common/components/Radio/index.tsx
index 3134fb7..a80662a 100644
--- a/superset-frontend/src/common/components/Radio.tsx
+++ b/superset-frontend/src/common/components/Radio/index.tsx
@@ -21,20 +21,26 @@ import { Radio as BaseRadio } from 'src/common/components';
const StyledRadio = styled(BaseRadio)`
.ant-radio-inner {
- width: 18px;
- height: 18px;
+ top: -1px;
+ left: 2px;
+ width: ${({ theme }) => theme.gridUnit * 4}px;
+ height: ${({ theme }) => theme.gridUnit * 4}px;
border-width: 2px;
- border-color: ${({ theme }) => theme.colors.grayscale.base};
+ border-color: ${({ theme }) => theme.colors.grayscale.light2};
}
.ant-radio.ant-radio-checked {
.ant-radio-inner {
- background-color: ${({ theme }) => theme.colors.primary.dark1};
- border-color: ${({ theme }) => theme.colors.primary.dark1};
+ border-width: ${({ theme }) => theme.gridUnit + 1}px;
+ border-color: ${({ theme }) => theme.colors.primary.base};
}
.ant-radio-inner::after {
background-color: ${({ theme }) => theme.colors.grayscale.light5};
+ top: 0;
+ left: 0;
+ width: ${({ theme }) => theme.gridUnit + 2}px;
+ height: ${({ theme }) => theme.gridUnit + 2}px;
}
}
diff --git a/superset-frontend/src/common/components/common.stories.tsx b/superset-frontend/src/common/components/common.stories.tsx
index f46ded7..d850a23 100644
--- a/superset-frontend/src/common/components/common.stories.tsx
+++ b/superset-frontend/src/common/components/common.stories.tsx
@@ -332,6 +332,7 @@ export const CollapseAnimateArrows = () => (
</Collapse.Panel>
</Collapse>
);
+
export function StyledCronPicker() {
// @ts-ignore
const inputRef = useRef<Input>(null);
diff --git a/superset-frontend/src/common/components/index.tsx b/superset-frontend/src/common/components/index.tsx
index bfbccbe..c10be85 100644
--- a/superset-frontend/src/common/components/index.tsx
+++ b/superset-frontend/src/common/components/index.tsx
@@ -59,7 +59,7 @@ export {
} from 'antd';
export { TreeProps } from 'antd/lib/tree';
export { FormInstance } from 'antd/lib/form';
-
+export { RadioChangeEvent } from 'antd/lib/radio';
export { default as Collapse } from './Collapse';
export { default as Badge } from './Badge';
export { default as Progress } from './ProgressBar';
diff --git a/superset-frontend/src/dashboard/components/SaveModal.tsx b/superset-frontend/src/dashboard/components/SaveModal.tsx
index a377edb..0bbc327 100644
--- a/superset-frontend/src/dashboard/components/SaveModal.tsx
+++ b/superset-frontend/src/dashboard/components/SaveModal.tsx
@@ -18,7 +18,9 @@
*/
/* eslint-env browser */
import React from 'react';
-import { FormControl, FormGroup, Radio } from 'react-bootstrap';
+import { FormControl, FormGroup } from 'react-bootstrap';
+import { RadioChangeEvent } from 'src/common/components';
+import { Radio } from 'src/common/components/Radio';
import Button from 'src/components/Button';
import { t, CategoricalColorNamespace, JsonResponse } from '@superset-ui/core';
@@ -101,7 +103,7 @@ class SaveModal extends React.PureComponent<SaveModalProps, SaveModalState> {
}));
}
- handleSaveTypeChange(event: React.FormEvent<Radio>) {
+ handleSaveTypeChange(event: RadioChangeEvent) {
this.setState({
saveType: (event.target as HTMLInputElement).value as SaveType,
});
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterScope.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterScope.tsx
index bd8eccb..75a4382 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterScope.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterScope.tsx
@@ -19,9 +19,9 @@
import React, { FC } from 'react';
import { t, styled } from '@superset-ui/core';
+import { Radio } from 'src/common/components/Radio';
import {
Form,
- Radio,
Typography,
Space,
FormInstance,
diff --git a/superset-frontend/src/datasource/DatasourceEditor.jsx b/superset-frontend/src/datasource/DatasourceEditor.jsx
index e1dfe76..c0863dc 100644
--- a/superset-frontend/src/datasource/DatasourceEditor.jsx
+++ b/superset-frontend/src/datasource/DatasourceEditor.jsx
@@ -18,7 +18,8 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
-import { Alert, Col, Radio, Well } from 'react-bootstrap';
+import { Alert, Col, Well } from 'react-bootstrap';
+import { Radio } from 'src/common/components/Radio';
import Badge from 'src/common/components/Badge';
import shortid from 'shortid';
import { styled, SupersetClient, t, supersetTheme } from '@superset-ui/core';
diff --git a/superset-frontend/src/explore/components/SaveModal.tsx b/superset-frontend/src/explore/components/SaveModal.tsx
index 767099a..5d53074 100644
--- a/superset-frontend/src/explore/components/SaveModal.tsx
+++ b/superset-frontend/src/explore/components/SaveModal.tsx
@@ -18,9 +18,10 @@
*/
/* eslint camelcase: 0 */
import React from 'react';
-import { Alert, FormControl, FormGroup, Radio } from 'react-bootstrap';
+import { Alert, FormControl, FormGroup } from 'react-bootstrap';
import { JsonObject, t, styled } from '@superset-ui/core';
import ReactMarkdown from 'react-markdown';
+import { Radio } from 'src/common/components/Radio';
import Modal from 'src/common/components/Modal';
import Button from 'src/components/Button';
import FormLabel from 'src/components/FormLabel';
@@ -220,7 +221,6 @@ class SaveModal extends React.Component<SaveModalProps, SaveModalState> {
<FormGroup data-test="radio-group">
<Radio
id="overwrite-radio"
- inline
disabled={!(this.props.can_overwrite && this.props.slice)}
checked={this.state.action === 'overwrite'}
onChange={() => this.changeAction('overwrite')}
@@ -231,7 +231,6 @@ class SaveModal extends React.Component<SaveModalProps, SaveModalState> {
<Radio
id="saveas-radio"
data-test="saveas-radio"
- inline
checked={this.state.action === 'saveas'}
onChange={() => this.changeAction('saveas')}
>
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl.jsx b/superset-frontend/src/explore/components/controls/DateFilterControl.jsx
index 5b0f15a..1b26c6d 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl.jsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl.jsx
@@ -18,10 +18,11 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
-import { FormControl, FormGroup, InputGroup, Radio } from 'react-bootstrap';
+import { FormControl, FormGroup, InputGroup } from 'react-bootstrap';
import { Tooltip } from 'src/common/components/Tooltip';
import Popover from 'src/common/components/Popover';
import { Select, Input } from 'src/common/components';
+import { Radio } from 'src/common/components/Radio';
import Button from 'src/components/Button';
import Datetime from 'react-datetime';
import 'react-datetime/css/react-datetime.css';
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/frame/CalendarFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/frame/CalendarFrame.tsx
index 0be926d..b2c31d2 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/frame/CalendarFrame.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/frame/CalendarFrame.tsx
@@ -18,7 +18,7 @@
*/
import React from 'react';
import { t } from '@superset-ui/core';
-import { Radio } from 'src/common/components';
+import { Radio } from 'src/common/components/Radio';
import { CALENDAR_RANGE_OPTIONS, CALENDAR_RANGE_SET } from '../constants';
import {
CalendarRangeType,
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/frame/CommonFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/frame/CommonFrame.tsx
index d51b943..e4df91e 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/frame/CommonFrame.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/frame/CommonFrame.tsx
@@ -18,7 +18,7 @@
*/
import React from 'react';
import { t } from '@superset-ui/core';
-import { Radio } from 'src/common/components';
+import { Radio } from 'src/common/components/Radio';
import { COMMON_RANGE_OPTIONS, COMMON_RANGE_SET } from '../constants';
import { CommonRangeType, FrameComponentProps } from '../types';
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/frame/CustomFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/frame/CustomFrame.tsx
index 08045ee..cfc5d48 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/frame/CustomFrame.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/frame/CustomFrame.tsx
@@ -20,13 +20,8 @@ import React from 'react';
import { t } from '@superset-ui/core';
import { Moment } from 'moment';
import { isInteger } from 'lodash';
-import {
- Col,
- DatePicker,
- InputNumber,
- Radio,
- Row,
-} from 'src/common/components';
+import { Col, DatePicker, InputNumber, Row } from 'src/common/components';
+import { Radio } from 'src/common/components/Radio';
import { Select } from 'src/components/Select';
import {
SINCE_GRAIN_OPTIONS,