/** @format */ import React, { useEffect, useState } from 'react'; import Block, { Input, ModalDropDown } from './style.js'; const CallHistoryInputDropdown = ({ inputValue, call_history, selectFunc }) => { const [modal, setModal] = useState(false); useEffect(() => { if (call_history.length) { var elem = document.getElementById('data'); elem.scrollTop = elem.scrollHeight; } }, [call_history]); const selectFuncInset = (e) => { selectFunc(e); setModal(false); }; return ( <Block> <Input onClick={() => setModal(!modal)} className='nocopy' type='text' value={inputValue}> {inputValue} </Input> {Boolean(call_history.length) && ( <> <ModalDropDown visiblevalue={modal}> <ModalDropDown.Inset id='data'> {call_history.reverse().map((value, index) => ( <p className='item' key={index} onClick={() => selectFuncInset(value)}> {value} </p> ))} </ModalDropDown.Inset> </ModalDropDown> <ModalDropDown.FullWindow visiblevalue={modal} onClick={() => setModal(!modal)} /> </> )} </Block> ); }; export default CallHistoryInputDropdown;