/** @format */ import React, { useState } from 'react'; import DropDownStyle from './style'; import { Text, useTranslator } from '@eo-locale/react'; const DropDown = ({ reasons, reason, selectFunc }) => { const translator = useTranslator(); const [visible, setVisible] = useState(0); document.querySelector('body').addEventListener('click', function (e) { if (Boolean(visible)) setVisible(0); }); return ( <DropDownStyle onClick={() => setVisible(visible ? 0 : 1)} className='nocopy'> <DropDownStyle.Text> {/* <Text id={reason.toUpperCase()} /> */} <span>{translator.translate('STATUS')}: </span> <span className='status'> <span>{translator.translate(reason.toUpperCase())}</span> </span> <span className='sfdsdfsd'></span> </DropDownStyle.Text> <DropDownStyle.DropDown visiblevalue={visible} className={'nocopy'}> {reasons.map((value, index) => ( <div className='select' key={index} onClick={() => selectFunc(value)} style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden', fontSize: '16px', }}> {translator.translate(value.toUpperCase())} {/* <Text id={value.toUpperCase()} /> */} </div> ))} </DropDownStyle.DropDown> {/* <DropDownStyle.Window visiblevalue={visible} onClick={() => setVisible(0)} /> */} </DropDownStyle> ); }; export default DropDown;