Material-ui: [TextField] Agregar prop de icono al campo de texto

Como se señala en el número 3032, podría verse como

y # 3038 deberíamos poder agregar un ícono a la izquierda y a la derecha.

también sería genial ver el prefijo y el sufijo

Me gustaría algo como esto. Estas trabajando en esto?

¿Cuánto tiempo pasará antes de que se publique?

Creo que esto debería extenderse a la entrada de autocompletar también, sería muy útil.

¿Podría haber una manera de agregar un ícono con validaciones / errores de TextField también?

Creo que debería aplicarse a todos los campos de "formulario", incluido SelectField.

Lo logro usando TextField dentro de ListItem o MenuItem. Coloque un TextField dentro de ListItem y luego use los accesorios leftIcon o rightIcon para lograrlo.

Lo logro usando TextField dentro de ListItem o MenuItem.

Creo que es el enfoque correcto. Prefiero usar la composición sobre la lógica adicional en TextField .
Sin embargo, me pregunto si ListItem o MenuItem se diseñaron teniendo en cuenta este caso de uso.
Creo que podríamos tener un componente más específico para hacerlo. Como un <TextFieldIcon />

Creo que lo mejor sería tenerlo en lo que parece un ListItem como se muestra aquí: https://material.google.com/components/text-fields.html#text -fields-single-line- campo de texto

Y tal vez tenerlo como una opción similar a rightCheckbox , pero luego rightField , y un posible soporte dándole una matriz de max. 2 elementos, como TextField y / o SelectField , como se muestra en ese ejemplo de teléfono / calendario.

Esto podría ahorrar mucho espacio, especialmente en dispositivos móviles, y molestias, ya que no es necesario ajustar el CSS para alinearlos todos.

El problema con el uso de un campo de texto anidado con ListItem es que ... a menos que me falte algo, es imposible pasar al siguiente campo de texto en su formulario.

Solo por esta razón, es preferible tener una como lo sugiere @oliviertassinari o simplemente un accesorio adicional que se puede configurar en , aunque este último parece desanimado por el # 4027. ¿Alguien ha encontrado una solución que funcione?

¿Existe algún progreso o solución temporal para resolver el problema original?

@iamzhouyi intenta usar algo como esto para la experiencia de autocompletar

<Menu disableAutoFocus>
  <MenuItem leftIcon={<SearchIcon color='#fff'/>} disabled>
    <AutoComplete hintText='Search' />
  </MenuItem>
</Menu> 

¿Alguien con algún progreso en esto? Si alguien ha comenzado, me encantaría ayudar, si no, lo haría yo mismo.

No lo parece @oshalygin , tenga en cuenta que se ha agregado a la lista de verificación en # 6566, ¡así que es posible que desee realizar un seguimiento del progreso allí!

Sería una gran adición.

@oshalygin Si vas a investigar esto, te sugiero que next ; no estamos priorizando nuevas funciones en master . Además, debido a que está hecho de componentes componibles, debería resultarle más fácil.

Creo que también sería genial tener un progreso circular en los campos de texto para verificar en tiempo real el valor del campo de texto.

¡Vaya, veo que esto se abrió hace 1,5 años! ¿Alguna actualización de esto? Intenté agregar trucos de CSS (y antes del contenido) qué tipo de trabajo, pero necesito un control más detallado, ya que necesito darle más estilo, hacer que desaparezca o desaparezca según el estado, y más específicamente, estar dentro del campo de texto . Intenté tocar el violín también con el HintText / marcador de posición, pero todos estos son totalmente conflictivos y caóticos entre sí. 😞

La forma más fácil de lograr el icono adyacente al campo de texto es envolver el campo y el icono en un div que pueda contener el icono de posición absoluta.

<div style={{position: 'relative', display: 'inline-block'}}>
      <SearchIcon style={{position: 'absolute', right: 0, top: 15, width: 20, height: 20}}/>
      <TextField
           hintText="Search by Name"
           onChange={_.debounce((event, value) => this.handleSearch(value), 500)}
        />
</div>

Si lo desea a la izquierda, simplemente agregue un textIndent al campo y cambie la posición a la izquierda.

<div style={{position: 'relative', display: 'inline-block'}}>
       <SearchIcon style={{position: 'absolute', left: 0, top: 15, width: 20, height: 20}}/>
       <TextField
              style={{textIndent: 30}}
              hintText="Search by Name"
              onChange={_.debounce((event, value) => this.handleSearch(value), 500)}
        />
</div>

Si desea tener íconos dinámicos, cambie el campo onChange método para actualizar el estado que puede cambiar el ícono. Si desea hacer este limpiador, puede ponerlo en un componente y llamarlo IconTextField como } .... otros atributos />

@bradrisse funciona muy bien, gracias a Dios que leí todo el hilo, encontré la respuesta que estaba buscando en el último comentario

¿Es posible agregar como accesorios?
_ floatingLabelText = 'Etiqueta'
hintText = 'Texto de sugerencia'
errorText = { ${<MoreVertIcon />} Error Text }
multiLine
/> _

import ActionHome from 'material-ui/svg-icons/action/home';
<TextField
floatingLabelText={<SvgIconComponent/>}
floatingLabelFixed={true}
/>

// campo de texto con icono
const IconTextField = (props) => (

icon = {"persona"}
hintText = {props.label}
type = {props.type?
fullWidth = {true}
/>

)

Creo que esto se puede cerrar, ¿verdad? https://material-ui-next.com/demos/text-fields/#input -adornments

@stunaz No creo que sea lo que la gente está pidiendo aquí.

@oliviertassinari El único otro tipo que puedo ver en la especificación es "Icon signifier":

Significante de icono

Los iconos describen el tipo de entrada que requiere un campo de texto. Se muestran a la izquierda del campo de texto.

Parece que se puede lograr con solo unas pocas líneas de código:

const styles = theme => ({
  icon: {
    margin: '20px 16px 0 0',
    color: theme.palette.action.active,
  },
});

[...]

<div>
    <Person className={classes.icon} />
    <TextField label="Name" />
</div>

¿Un ejemplo en los documentos nos permitiría cerrar este problema?

@mbrookes tengo una idea. Dado que el campo de texto no es el único componente que quiere un decorador de íconos, tal vez podamos hacer un contenedor que agregue ícono a un elemento.

Ejemplo

Para campo de texto

<IconDecorator icon={<PeopleIcon/>} position="left" iconStyle={customStyle}>
    <TextField label="Name"/>
</IconDecorator>

Para el botón

<IconDecorator icon={<ArrowRightIcon/>} position="right" iconStyle={customStyle}>
    <Button raised={true}>Go</Button>
</IconDecorator>

Ventaja

Este método no romperá ni contaminará la API actual, por lo que no habrá cambios importantes.

Preocupación

Si se va a implementar este IconDecorator , ¿debería incluirse en esta biblioteca u otra biblioteca externa?

@wongjiahau La única dificultad que veo con eso es que la alineación vertical es específica del componente, por lo que tendría que verificar su tipo secundario y ajustar sus márgenes de manera apropiada, pero eso se puede lograr.

Si esto fuera a seguir adelante, tiene sentido que sea parte de MUI.

@oliviertassinari siento haberte

¿Parece que todavía está abierto? ¿Recibió una patada o todavía parece que se resuelve?

@BlakeBurnette Este problema se trata de exponer un componente específico para manejar este caso de problemas. No estoy un 💯% convencido de que sea necesario dadas las dos alternativas siguientes. ¿Alguien quiere agregar una demostración a la documentación para que podamos cerrar este problema?

https://codesandbox.io/s/29yj0lr7p

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "material-ui/styles";
import Input, { InputLabel, InputAdornment } from "material-ui/Input";
import { FormControl } from "material-ui/Form";
import TextField from "material-ui/TextField";
import Grid from "material-ui/Grid";
import AccountCircle from "material-ui-icons/AccountCircle";

const styles = theme => ({
  margin: {
    margin: theme.spacing.unit
  }
});

function TextFieldIcons(props) {
  const { classes } = props;

  return (
    <div>
      <FormControl className={classes.margin}>
        <InputLabel htmlFor="demo1">First Name</InputLabel>
        <Input
          id="demo1"
          startAdornment={
            <InputAdornment position="start">
              <AccountCircle />
            </InputAdornment>
          }
        />
      </FormControl>
      <TextField
        className={classes.margin}
        id="demo2"
        label="First Name"
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <AccountCircle />
            </InputAdornment>
          )
        }}
      />
      <div className={classes.margin}>
        <Grid container spacing={8} alignItems="flex-end">
          <Grid item>
            <AccountCircle />
          </Grid>
          <Grid item>
            <TextField id="demo2" label="First Name" />
          </Grid>
        </Grid>
      </div>
    </div>
  );
}

TextFieldIcons.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(TextFieldIcons);