mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
refactor: Bootstrap to AntD - Slider (#13989)
This commit is contained in:
parent
4bb29b6f04
commit
92a66921e0
@ -17,14 +17,41 @@
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import ReactBootstrapSlider from 'react-bootstrap-slider';
|
||||
import 'bootstrap-slider/dist/css/bootstrap-slider.min.css';
|
||||
import './BootstrapSliderWrapper.less';
|
||||
import Slider, { SliderSingleProps } from '.';
|
||||
|
||||
export default function BootstrapSliderWrapper(props) {
|
||||
return (
|
||||
<span className="BootstrapSliderWrapper">
|
||||
<ReactBootstrapSlider {...props} />
|
||||
</span>
|
||||
export default {
|
||||
title: 'Slider',
|
||||
component: Slider,
|
||||
};
|
||||
|
||||
export const InteractiveSlider = (args: SliderSingleProps) => (
|
||||
<Slider {...args} style={{ width: 400, height: 400 }} />
|
||||
);
|
||||
}
|
||||
|
||||
InteractiveSlider.args = {
|
||||
min: 0,
|
||||
max: 100,
|
||||
defaultValue: 70,
|
||||
step: 1,
|
||||
};
|
||||
|
||||
InteractiveSlider.argTypes = {
|
||||
onChange: { action: 'onChange' },
|
||||
disabled: {
|
||||
control: { type: 'boolean' },
|
||||
},
|
||||
reverse: {
|
||||
control: { type: 'boolean' },
|
||||
},
|
||||
vertical: {
|
||||
control: { type: 'boolean' },
|
||||
},
|
||||
};
|
||||
|
||||
InteractiveSlider.story = {
|
||||
parameters: {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
};
|
@ -16,12 +16,14 @@
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
@import '../../../stylesheets/less/variables.less';
|
||||
import React from 'react';
|
||||
import AntDSlider, {
|
||||
SliderSingleProps,
|
||||
SliderRangeProps,
|
||||
} from 'antd/lib/slider';
|
||||
|
||||
.BootstrapSliderWrapper .slider-selection {
|
||||
background: @gray-bg;
|
||||
}
|
||||
export { SliderSingleProps, SliderRangeProps };
|
||||
|
||||
.BootstrapSliderWrapper .slider-handle {
|
||||
background: @gray-light;
|
||||
export default function Slider(props: SliderSingleProps | SliderRangeProps) {
|
||||
return <AntDSlider {...props} css={{ marginLeft: 0, marginRight: 0 }} />;
|
||||
}
|
@ -18,8 +18,7 @@
|
||||
*/
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import BootstrapSliderWrapper from 'src/components/BootstrapSliderWrapper';
|
||||
import Slider from 'src/components/Slider';
|
||||
import ControlHeader from 'src/explore/components/ControlHeader';
|
||||
|
||||
const propTypes = {
|
||||
@ -32,17 +31,11 @@ const defaultProps = {
|
||||
};
|
||||
|
||||
export default function SliderControl(props) {
|
||||
// This wouldn't be necessary but might as well
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<ControlHeader {...props} />
|
||||
<BootstrapSliderWrapper
|
||||
{...props}
|
||||
change={obj => {
|
||||
props.onChange(obj.target.value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Slider {...props} defaultValue={props.default} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user