jialin
1 year ago
parent
412c6dadca
commit
ec2cd29096
@ -0,0 +1,114 @@
|
||||
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;
|
||||
@ -0,0 +1,24 @@
|
||||
:local(.slider-label) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
|
||||
:global(.val) {
|
||||
color: var(--ant-color-text);
|
||||
}
|
||||
|
||||
:global(.label-val) {
|
||||
position: absolute !important;
|
||||
top: -14px;
|
||||
right: -14px;
|
||||
width: 80px;
|
||||
border-radius: var(--border-radius-base);
|
||||
text-align: center;
|
||||
border: 1px solid var(--ant-color-border) !important;
|
||||
|
||||
:global(.ant-input-number-input) {
|
||||
text-align: center !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,86 +0,0 @@
|
||||
import { useRef } from 'react';
|
||||
import WaveSurfer from 'wavesurfer.js';
|
||||
|
||||
interface Options {
|
||||
container: React.RefObject<HTMLDivElement>;
|
||||
waveColor?: string;
|
||||
progressColor?: string;
|
||||
url: string;
|
||||
barWidth?: number;
|
||||
barGap?: number;
|
||||
barRadius?: number;
|
||||
autoplay?: boolean;
|
||||
audioRate?: number;
|
||||
onReady?: () => void;
|
||||
onClick: (value: number) => void;
|
||||
}
|
||||
const useWavesurfer = (options: Options) => {
|
||||
const wavesurfer = useRef<WaveSurfer | null>(null);
|
||||
|
||||
const { container, url, ...rest } = options;
|
||||
|
||||
const createWavesurfer = () => {
|
||||
if (!container.current) {
|
||||
return;
|
||||
}
|
||||
if (wavesurfer.current) {
|
||||
wavesurfer.current.destroy();
|
||||
}
|
||||
wavesurfer.current = WaveSurfer.create({
|
||||
container: container.current,
|
||||
waveColor: '#4096ff',
|
||||
progressColor: 'rgb(100, 0, 100)',
|
||||
url: url,
|
||||
height: 60,
|
||||
barWidth: 2,
|
||||
barGap: 1,
|
||||
barRadius: 2,
|
||||
interact: true,
|
||||
cursorWidth: 0,
|
||||
...rest
|
||||
});
|
||||
wavesurfer.current?.on('ready', () => {
|
||||
options.onReady?.();
|
||||
});
|
||||
|
||||
wavesurfer.current?.on('click', (value) => {
|
||||
options.onClick?.(value);
|
||||
});
|
||||
};
|
||||
|
||||
const destroyWavesurfer = () => {
|
||||
if (wavesurfer.current) {
|
||||
wavesurfer.current.destroy();
|
||||
}
|
||||
};
|
||||
|
||||
const play = () => {
|
||||
if (wavesurfer.current) {
|
||||
wavesurfer.current.play();
|
||||
}
|
||||
};
|
||||
|
||||
const duration = () => {
|
||||
if (wavesurfer.current) {
|
||||
return wavesurfer.current.getDuration();
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
const pause = () => {
|
||||
if (wavesurfer.current) {
|
||||
wavesurfer.current.pause();
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
createWavesurfer,
|
||||
play,
|
||||
pause,
|
||||
wavesurfer,
|
||||
duration,
|
||||
destroyWavesurfer
|
||||
};
|
||||
};
|
||||
|
||||
export default useWavesurfer;
|
||||
Loading…
Reference in new issue