parent
189c80bd74
commit
51c0dba4a9
@ -0,0 +1,89 @@ |
||||
import React, { FC, useEffect, useState } from 'react' |
||||
import { IconContext } from 'react-icons' |
||||
import { BsXLg } from 'react-icons/bs' |
||||
import { useSelector } from 'react-redux' |
||||
import ICatClientes from '../../../Interfaces/Catalogos/ICatClientes' |
||||
import { RootState } from '../../../store/store' |
||||
|
||||
interface IProps { |
||||
input: string |
||||
} |
||||
|
||||
export const Autocomplete: FC<IProps> = (props) => { |
||||
const mCatClientes = useSelector((state: RootState) => state.CatClientes.CatClientes) |
||||
const [Cliente, setCliente] = useState('') |
||||
const [IDCliente, setIDCliente] = useState(0) |
||||
const [toggleSelect, setToggleSelect] = useState(false) |
||||
|
||||
const loadInfo = (data: ICatClientes) => { |
||||
setIDCliente(data.id) |
||||
setCliente(data.cliente) |
||||
setToggleSelect(false) |
||||
} |
||||
|
||||
const handleKeyDown = (event: any) => { |
||||
if (event.key === 'Enter') { |
||||
console.log('Pasa este informacion al parent component') |
||||
setToggleSelect(false) |
||||
} |
||||
} |
||||
|
||||
useEffect(() => { |
||||
if (Cliente.length > 0) setToggleSelect(true) |
||||
}, [Cliente]) |
||||
|
||||
return ( |
||||
<> |
||||
<div className='form-group'> |
||||
<div className='col-sm-12 parent'> |
||||
<div className='input-group'> |
||||
<input type='hidden' className='form-control' name='IDCliente' id='IDCliente' value={IDCliente} /> |
||||
<input |
||||
type='text' |
||||
className='form-control genericSelect' |
||||
name='Guia' |
||||
id='Guia' |
||||
style={{ height: '30px' }} |
||||
value={Cliente} |
||||
placeholder='Cliente...' |
||||
onChange={(e) => { |
||||
setCliente(e.target.value) |
||||
}} |
||||
onKeyDown={(e) => handleKeyDown(e)} |
||||
onFocus={() => setToggleSelect(true)} |
||||
/* onBlur={() => setToggleSelect(false)} */ |
||||
/> |
||||
<span |
||||
className='input-group-addon sorroundImage' |
||||
onClick={() => { |
||||
setCliente('') |
||||
setToggleSelect(false) |
||||
}} |
||||
> |
||||
<IconContext.Provider value={{ color: 'red', size: '21px' }}> |
||||
<BsXLg /> |
||||
</IconContext.Provider> |
||||
</span> |
||||
<div className='child' style={toggleSelect ? { visibility: 'visible' } : { visibility: 'hidden' }}> |
||||
<ul className='cleanLi'> |
||||
{mCatClientes |
||||
? mCatClientes.map((item, index) => { |
||||
return item.id > 0 && item.cliente.toLocaleLowerCase().includes(Cliente.toLocaleLowerCase()) ? ( |
||||
<li key={item.id}> |
||||
<span style={{ paddingLeft: '10px' }} onClick={() => loadInfo(item)}> |
||||
{item.cliente} |
||||
</span> |
||||
</li> |
||||
) : ( |
||||
'' |
||||
) |
||||
}) |
||||
: ''} |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</> |
||||
) |
||||
} |
@ -1,5 +1,5 @@ |
||||
export class TargetURL { |
||||
get() { |
||||
return (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') ? "https://localhost:7000/api" : "http://reportes.gemcousa.com:5000/api" |
||||
return (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') ? "https://localhost:7000/api" : "https://www.alphaomega.com.mx/AOLBackend/api" |
||||
} |
||||
} |
Loading…
Reference in new issue