Bugfix/j UI p 167 ajustes en diseño componente input

[pablonortiz]

LINK DE TICKET: *

https://janiscommerce.atlassian.net/browse/JUIP-167

DESCRIPCIÓN DEL REQUERIMIENTO: *

Se requieren realizar ajustes de estilos para que el componente quede cómo en el diseño, esto a partir de los siguientes comentarios: https://www.figma.com/design/aWDxGtGqVoTYILf51UR2zv/Orders-App?node-id=29041-67624&t=WnrGOFYem9HEI35P-0#1114352653

DESCRIPCIÓN DE LA SOLUCIÓN: *

Se realizaron los ajustes mencionados en los comentarios de diseño, estos fueron:

• Centrar verticalmente el texto del Input ya que el mismo estaba más para arriba que en el medio
• Corregir la posición del cursor, ya que el mismo saltaba hacia la derecha al haber un placeholder, escribir en el Input y borrarse todo el texto

Para centrar verticalmente el texto se agregaron las siguientes propiedades de estilos al Input:

height: '100%', textAlign: 'center', textAlignVertical: 'center', includeFontPadding: false, paddingVertical: 0,

Por el lado de la posición del cursor se debió hacer algo un poco más complejo. Actualmente hay un bug que viene desde ya hace tiempo en React Native para el componente TextInput, el cuál genera este comportamiento de que el cursor salte hacia la derecha cuándo hay un placeholder y se vacía el texto que había en el TextInput, acá se puede ver un poco más de los reportes del bug: facebook/react-native#28794.

Cómo este bug no está solucionado actualmente y se intentaron diversas formas de las mencionadas en el issue sin éxito, se optó por la creación de un placeholder por afuera del Input, mostrandose el mismo a la hora de no haber ningún valor en el Input y cumpliendo con las consignas del diseño (que el cursor se muestre antes del placeholder cuándo este esté presente, y cuándo haya un valor en el Input el cursor se muestre tras el último valor)

CÓMO SE PUEDE PROBAR? *

Revisando el código, linkeando el pkg y verificando que el componente siga funcionando correctamente y cumpla con los requisitos del diseño

PRUEBA *