Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x | import React, {useState, useEffect} from 'react';
import {Dropdown} from 'antd';
import SettingDropDown from './Setting';
interface OptionsProps {
changeEachAudio: (deviceId: string) => void;
changeInputStream: (stream: MediaStream) => void;
seletedOutputDevice: string;
seletedInputDevice: string;
onClickOption: () => void;
}
function Options(props: OptionsProps): JSX.Element {
const [visible, setVisible] = useState(false);
const [seletedOutputDevice, setSelectOutputDevice] = useState(
props.seletedOutputDevice,
);
const [seletedInputDevice, setSelectInputDevice] = useState(
props.seletedInputDevice,
);
const onClickPrevious = () => {
setVisible(!visible);
};
const onClickConfirm = () => {
// 마이크 관련 세팅.
setVisible(true);
};
const onESCKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
setVisible(false);
}
};
useEffect(() => {
window.addEventListener('keydown', onESCKeyDown);
return () => {
window.removeEventListener('keydown', onESCKeyDown);
};
}, []);
return (
<Dropdown
placement={'topCenter'}
visible={visible}
onVisibleChange={onClickPrevious}
overlay={SettingDropDown({
onClickConfirm: onClickConfirm,
changeEachAudio: props.changeEachAudio,
changeInputStream: props.changeInputStream,
setSelectOutputDevice: setSelectOutputDevice,
seletedOutputDevice: seletedOutputDevice,
setSelectInputDevice: setSelectInputDevice,
seletedInputDevice: seletedInputDevice,
})}
trigger={['click']}
>
<a className="ant_dropdown_link" onClick={e => e.preventDefault()}>
옵션
</a>
</Dropdown>
);
}
export default Options;
|