import React, { useImperativeHandle, useRef, forwardRef, useState, useContext } from 'react'; import Broadcast from '@/components/svgIcon'; import { defaultTheme } from '@/core/config'; import { FlowContext } from '@/core/context'; import './index.scss'; export interface VolumeType { volume: number; changeCurrentVolume: React.MouseEventHandler; slideCurrentVolume: React.MouseEventHandler; clearVolumeInterval: React.MouseEventHandler; } const Volume = function Volume( { volume, changeCurrentVolume, slideCurrentVolume, clearVolumeInterval }: VolumeType, ref: React.Ref | undefined, ) { const volumeSliderMirror = useRef(null); const reviceProps = useContext(FlowContext); const { theme } = reviceProps.propsAttributes!; const [isShow, setIsShow] = useState(false); useImperativeHandle(ref, () => ({ element: volumeSliderMirror.current, })); return (
[setIsShow(true), e.stopPropagation()]} onMouseLeave={(e) => [setIsShow(false), e.stopPropagation()]} >

{Math.floor(volume)}

); }; const VolumeForwardRef = forwardRef(Volume); export default VolumeForwardRef;