superset-frontend/src/components/Slider/Slider.stories.tsx
/**
* 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 Slider, { SliderSingleProps, SliderRangeProps } from '.';
export default {
title: 'Slider',
component: Slider,
};
const tooltipPlacement = [
'top',
'left',
'bottom',
'right',
'topLeft',
'topRight',
'bottomLeft',
'bottomRight',
'leftTop',
'leftBottom',
'rightTop',
'rightBottom',
] as const;
export const InteractiveSlider = ({
tooltipOpen,
tooltipPosition,
...args
}: SliderSingleProps & {
tooltipOpen: boolean;
tooltipPosition: (typeof tooltipPlacement)[number];
}) => (
<Slider
{...args}
tooltip={{
...args.tooltip,
open: tooltipOpen,
placement: tooltipPosition,
}}
style={{ width: 400, height: 400 }}
/>
);
export const InteractiveRangeSlider = ({
tooltipOpen,
draggableTrack,
...args
}: SliderRangeProps & { tooltipOpen: boolean; draggableTrack: boolean }) => (
<Slider
{...args}
tooltip={{ open: tooltipOpen }}
range={{ draggableTrack }}
style={{ width: 400, height: 400 }}
/>
);
InteractiveSlider.args = {
min: 0,
max: 100,
defaultValue: 70,
step: 1,
marks: {},
disabled: false,
reverse: false,
vertical: false,
autoFocus: false,
keyboard: true,
dots: false,
included: true,
tooltipPosition: 'bottom',
};
InteractiveSlider.argTypes = {
onChange: { action: 'onChange' },
onChangeComplete: { action: 'onChangeComplete' },
tooltipOpen: {
control: { type: 'boolean' },
},
tooltipPosition: {
options: tooltipPlacement,
control: { type: 'select' },
},
};
InteractiveRangeSlider.args = {
...InteractiveSlider.args,
defaultValue: [50, 70],
draggableTrack: false,
};
InteractiveRangeSlider.argTypes = InteractiveSlider.argTypes;