115 lines
2.6 KiB
TypeScript
115 lines
2.6 KiB
TypeScript
import { INPUT_WIDTH } from '@/constants';
|
|
import { InfoCircleOutlined } from '@ant-design/icons';
|
|
import {
|
|
Form,
|
|
InputNumber,
|
|
Slider,
|
|
Tooltip,
|
|
type SliderSingleProps
|
|
} from 'antd';
|
|
import React from 'react';
|
|
import FieldWrapper from './field-wrapper';
|
|
import SliderStyles from './styles/slider.less';
|
|
|
|
interface SealSliderProps extends SliderSingleProps {
|
|
required?: boolean;
|
|
label?: React.ReactNode;
|
|
labelWidth?: number | string;
|
|
description?: string;
|
|
isInFormItems?: boolean;
|
|
inputnumber?: boolean;
|
|
checkStatus?: 'success' | 'error' | 'warning' | '';
|
|
}
|
|
|
|
const SealSlider: React.FC<SealSliderProps> = (props) => {
|
|
const {
|
|
label,
|
|
value,
|
|
required,
|
|
description,
|
|
isInFormItems = true,
|
|
max,
|
|
min,
|
|
step,
|
|
defaultValue,
|
|
checkStatus,
|
|
inputnumber = false,
|
|
labelWidth,
|
|
tooltip = { open: false },
|
|
...rest
|
|
} = props;
|
|
|
|
let status = '';
|
|
if (isInFormItems) {
|
|
const statusData = Form?.Item?.useStatus?.();
|
|
status = statusData?.status || '';
|
|
}
|
|
|
|
const handleChange = (value: number) => {
|
|
props.onChange?.(value);
|
|
};
|
|
|
|
const handleInput = (value: number | null) => {
|
|
const newValue = value || 0;
|
|
props.onChange?.(newValue);
|
|
};
|
|
|
|
const renderLabel = React.useMemo(() => {
|
|
return (
|
|
<span
|
|
className={SliderStyles['slider-label']}
|
|
style={{ width: labelWidth || INPUT_WIDTH.mini }}
|
|
>
|
|
<span className="text">
|
|
{description ? (
|
|
<Tooltip title={description}>
|
|
<span> {label}</span>
|
|
<span className="m-l-5">
|
|
<InfoCircleOutlined />
|
|
</span>
|
|
</Tooltip>
|
|
) : (
|
|
<span>{label}</span>
|
|
)}
|
|
</span>
|
|
|
|
{inputnumber ? (
|
|
<InputNumber
|
|
className="label-val"
|
|
variant="outlined"
|
|
size="small"
|
|
value={value}
|
|
controls={false}
|
|
onChange={handleInput}
|
|
></InputNumber>
|
|
) : (
|
|
<span className="val">{value}</span>
|
|
)}
|
|
</span>
|
|
);
|
|
}, [label, labelWidth, description, value, max, min, step, defaultValue]);
|
|
return (
|
|
<FieldWrapper
|
|
required={required}
|
|
status={checkStatus || status}
|
|
label={renderLabel}
|
|
style={{ padding: '20px 2px 0' }}
|
|
variant="borderless"
|
|
>
|
|
<Slider
|
|
{...rest}
|
|
defaultValue={defaultValue}
|
|
max={max}
|
|
min={min}
|
|
step={step}
|
|
style={{ marginBottom: 0, marginTop: 16, marginInline: 0 }}
|
|
tooltip={tooltip}
|
|
value={value}
|
|
onChange={handleChange}
|
|
></Slider>
|
|
</FieldWrapper>
|
|
);
|
|
};
|
|
|
|
export default SealSlider;
|