88 lines
2.4 KiB
JavaScript
88 lines
2.4 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import PropTypes from "prop-types";
|
|
import { ColorTheme, ThemeType } from "@docspace/components/ColorTheme";
|
|
|
|
const Slider = (props) => {
|
|
const {
|
|
id,
|
|
type,
|
|
className,
|
|
onChange,
|
|
min,
|
|
max,
|
|
step,
|
|
value,
|
|
withPouring,
|
|
style,
|
|
isDisabled = false,
|
|
thumbBorderWidth,
|
|
thumbHeight,
|
|
thumbWidth,
|
|
runnableTrackHeight,
|
|
} = props;
|
|
const [size, setSize] = useState("0%");
|
|
|
|
useEffect(() => {
|
|
setSize(((value - min) * 100) / (max - min) + "%");
|
|
}, [value]);
|
|
|
|
return (
|
|
<ColorTheme
|
|
{...props}
|
|
themeId={ThemeType.Slider}
|
|
type={type}
|
|
isDisabled={isDisabled}
|
|
disabled={isDisabled}
|
|
style={style}
|
|
id={id}
|
|
className={className}
|
|
min={min}
|
|
max={max}
|
|
step={step}
|
|
value={value}
|
|
size={value && withPouring ? size : "0%"}
|
|
withPouring={withPouring}
|
|
onChange={onChange}
|
|
thumbBorderWidth={thumbBorderWidth}
|
|
thumbHeight={thumbHeight}
|
|
thumbWidth={thumbWidth}
|
|
runnableTrackHeight={runnableTrackHeight}
|
|
/>
|
|
);
|
|
};
|
|
|
|
Slider.propTypes = {
|
|
/** Accepts id */
|
|
id: PropTypes.string,
|
|
/** Sets the input type. Fixed as range.*/
|
|
type: PropTypes.string,
|
|
/** Accepts class */
|
|
className: PropTypes.string,
|
|
/** Sets the width of the input thumb */
|
|
thumbWidth: PropTypes.string,
|
|
/** Sets the height of the input thumb */
|
|
thumbHeight: PropTypes.string,
|
|
/** Sets the border width of the input thumb */
|
|
thumbBorderWidth: PropTypes.string,
|
|
/** Sets the height of the runnableTrack for the input */
|
|
runnableTrackHeight: PropTypes.string,
|
|
/** The change event is triggered when the elelment's value is modified */
|
|
onChange: PropTypes.func,
|
|
/** Determines min range value */
|
|
min: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
/** Determines max range value */
|
|
max: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
/** Specifies the increment/decrement step size */
|
|
step: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
/** Default input value */
|
|
value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
/** Sets the background color of the runnableTrack */
|
|
withPouring: PropTypes.bool,
|
|
/** Disables the input */
|
|
isDisabled: PropTypes.bool,
|
|
/** Accepts css */
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
};
|
|
|
|
export default Slider;
|