Material-ui: Material-UI no compatible con React 0.14

@tleunen ¡Estás en la pelota! React 0.14 beta se lanzó hoy.

@ hai-cea Eché un vistazo a algunos de los problemas (encontré ~ 50 en 21 archivos). Esta podría ser una buena oportunidad para marcar un hito. Estaba mirando los archivos de diálogo / ventana de diálogo / superposición y hay mucho acoplamiento a través de this.refs.xxx.yyy (), por lo que puede que esta no sea una tarea simple. Si desea lograr un hito de compatibilidad de React 0.14, avíseme y puedo ayudarlo a escribir problemas (estoy seguro de que @tleunen quisiera participar, no quiero

¡Gracias chicos @tleunen!

Estoy de acuerdo, esto causará algunos problemas. Cual es la alternativa? ¿Guardar el elemento en una variable dentro de render?

@jkruder ¿Estás en gitter - https://gitter.im/callemall/material-ui ? Por favor, envíeme un mensaje instantáneo allí y pondremos en marcha las cuestiones de organización / hitos.

La mayoría de las veces, los componentes no deberían tener funciones públicas. Todo hay que pasarlo con utilería o cuando se monten.

Por ejemplo, el componente Dialog no necesita show y hide . Si está en el dom, se muestra; de lo contrario, no.

Recién estoy comenzando a usar Material-UI, por lo que no estoy al tanto de los problemas con otros componentes, pero creo que la mayoría de ellos podrían reescribirse para que no tengan funciones públicas (de todos modos, no hay otras opciones).
La cuestión es que será un gran cambio radical con respecto a la versión actual.

@tleunen No puedo estar más de acuerdo con los métodos de mostrar y ocultar del diálogo.

@tleunen @oliviertassinari Yeh, estoy de acuerdo con los dos. Este fue un debate que tuvimos al diseñar ese componente. El problema que tuvimos fue la función clickaway. Si abrir / cerrar se manejó en el estado, entonces podría preocuparse por cerrarse al hacer clic. Si abrir / cerrar se pasara como accesorios, todos los que usen el diálogo tendrían que manejar el clickaway ellos mismos.

Ahora, una solución intermedia sería agregar un accesorio onClickAway al diálogo y dejar que el usuario del componente abra / cierre.

@ hai-cea Sugeriría usar el mismo enfoque que https://github.com/rackt/react-modal. Esta es básicamente tu solución intermedia.

¿Para qué otra cosa usa esta biblioteca this.refs cuando interactúa con un componente DOM que para decir getDOMNode() ? Este cambio en React solo se aplica a componentes como <div/> y <i/> ¿no es así? Aún se puede acceder a sus componentes personalizados por this.refs.xxx como de costumbre. Corrígeme si me equivoco. No he probado React 0.14 todavía, pero esto mismo apareció en HackerNews.

¿Quiere decir que si React detecta que la referencia está en un componente personalizado, devolverá el componente en lugar del elemento DOM dentro del componente?

@tleunen, eso es lo que tengo entendido. Necesita verificación :)

@mull Eso sería muy bueno si ese es el caso. :)

@ hai-cea @mull @tleunen Simplemente ejecuté una prueba rápida y ref en un componente personalizado (algo que extiende React.Component) (this.refs.customComponent) devolverá una referencia al componente React NO al nodo DOM subyacente. Si tiene una referencia a un nodo DOM (div / a / img / etc), this.refs.domRef devolverá el nodo.

@ hai-cea Dicho esto, sigo pensando que es una buena idea dejar de llamar a los métodos en this.refs.XXX.

@jkruder gracias, me alegro de no estar hablando fuera de mi ... :)

ok Gracias por hacer la investigación @jkruder. Creo que estamos a salvo para cerrar esto. Aunque, creo que todavía tenemos que hacer un hito de 0,14.

Además, ¿qué piensan ustedes sobre el número 1033?

Supongo que podemos cerrarlo entonces. Pero debería ser bueno reescribir algunos de los componentes para eliminar la necesidad de llamar a funciones en ellos. No es así como deberían funcionar los componentes: /

@ hai-cea De acuerdo. Estoy trabajando en un borrador del trabajo propuesto para el hito 0.14 que les enviaré para recibir comentarios.

Con respecto al # 1033, no creo que debamos dar el salto todavía. Estoy a favor de crear una rama separada donde podamos convertir MUI para que sea compatible con lo que se propone para 0.14 y hacer que los componentes sean más funcionales (minimizar / eliminar this.refs.XXX.YYY ()).

Si el uso actual de this.ref.xxx en realidad no rompe material-ui cuando se usa junto con react 0.14.0-beta1, entonces no siento que el deseo de alejarme de ese patrón deba bloquear # 1033. Al facilitar la instalación de material-ui junto con react 0.14.0-beta1, se preparará para recibir comentarios tempranos sobre problemas reales que puedan surgir; es mejor recibir esa retroalimentación cuando 0.14 todavía está en beta.

Quizás una buena alternativa (que maneja mejor las expectativas) es lanzar una versión alfa / beta / rc de material-ui en npm que tiene 0.14.0 como dependencia de pares (y está orientada a hacer compatible material-ui 0.14). De esa manera, es más fácil para las personas avanzar y encontrar / solucionar cualquier problema que pueda existir.

@jkruder ¿ Alguna actualización sobre esto?

@ashtonwar Ninguno todavía. Me he estado concentrando en establecer algunas pruebas y resolver algunos compromisos externos. Debería tener algo de tiempo esta semana para echarle un vistazo y ver con qué estamos trabajando. Algunos otros ya han intentado migrar a 0.14.

Saludos por mirar esto. He visto material-ui-io del # 1033. Parece funcionar para algunos componentes (menús desplegables, botones, snackbar) pero se cae y muere en otros (casilla de verificación, control deslizante, alternar). No tengo conocimiento de ningún otro intento de migración.

@tleunen Resulta que todavía podemos usar this.refs.XXX para el componente personalizado. Gracias @jkruder .

No hay problema; Sigo creyendo que es mejor evitar usar this.refs.doSomething() siempre que sea posible.

¿Alguna actualización? React JS 0.14 RC 1 acaba de ser lanzado y realmente me gustaría usar Material-UI con él.

lo mismo aquí, ¿hay alguna manera de que podamos apoyar la migración a 14?

Estoy usando material-ui-io en producción, parece estar bien.

Así que soy el tipo que publicó material-ui-io y fue un intento muy duro y triste de portar material-ui.

¡Le recomiendo que no utilice esta biblioteca en producción ! Hice el puerto y lo publiqué en un día para probar material-ui, pero terminé cambiando para crear mi propia biblioteca sobre mdl

Yo diría que la mejor manera en que todos podemos ayudar a que el material ui sea examinado en React 14 es actualizar a React 14-rc1 e informar los problemas que surjan individualmente. Comenzar el título del problema con "React 14-rc1: este error específico ocurre ..." o simplemente dejar que el problema se etiquete con una etiqueta adecuada es quizás una buena idea.

Pero tal vez no, en cuyo caso espero que los mantenedores principales me corrijan

https://github.com/callemall/material-ui/pull/1647

Es posible que necesite algunos retoques con respecto a peer-deps vs dev-deps vs deps y existe un problema con los eventos táctiles que está pendiente.

En React 0.14 onTouchCancel, onTouchEnd, onTouchMove, onTouchStart funcionan automáticamente, consulte https://facebook.github.io/react/blog/#breaking -changes.
Para habilitar onTouchTap sin react-tap-event-plugin:

import EventPluginHub from 'react/lib/EventPluginHub';
import TapEventPlugin from 'react/lib/TapEventPlugin';
EventPluginHub.injection.injectEventPluginsByName({ TapEventPlugin });

¿Todavía tenemos el retraso de 300 ms de iOS Safari?

No tengo IOS ...
Pero en la primera publicación aquí https://github.com/facebook/react/issues/436 , se sugiere inyectar TapEventPlugin como solución.
Además de eso aquí https://github.com/facebook/react/commit/ff12423d639413c1934dfc2ff337b298952e99ef he encontrado un compromiso relevante.

¿Existe algún cronograma tentativo para apoyar React 14? Este problema es muy antiguo y sería bueno que se resolviera pronto.

Yo también estaba muy emocionado de usar este kit de herramientas de UI y evitar Bootstrap, Foundation e incluso Elemental UI ... pero estoy usando React 0.14 con Redux y no volveré a 0.13. ¿Cuánto tiempo antes de una actualización?

Además, no estoy seguro de calificar para pedir / proporcionar esta información, pero con respecto a las referencias, (tampoco estoy seguro si esto es una cosa 0.14 .. o 0.12 / 0.13) Por lo general, agrego esto a mis elementos de entrada de formulario:

En mi código onclick (o cualquier controlador), puedo acceder al valor a través de this.name.value. Hace que sea muy fácil obtener cualquiera de los valores de entrada. ¿Alguna posibilidad de que esto sea todo lo que se necesita para actualizar el kit de herramientas con una referencia de trabajo?

+1 en esto. ¡Encontré material-ui hoy y estaba realmente emocionado de probarlo! Desafortunadamente, no hay dados.

+1. ¡También me gustaría conocer la cronología de esta actualización!

: +1:

¡Estamos llegando, amigos! Vea el n. ° 1751. En este punto, se necesita un poco más de trabajo para actualizar a la nueva react-router api.

Recomendaría probar la rama react-0.14-support e informar cualquier problema con el prefijo [React0.14] en el título. Una vez que podamos hacer que esa rama funcione completamente, cerraré este problema (¡finalmente!) :)

¡Me alegro de oirlo! Esperamos una versión final. He estado trabajando con
Redux, React, react-router, y hasta ahora es un buen camino a seguir. Mira
adelante a incorporar Material UI en esto.

El martes 29 de septiembre de 2015 a la 1:31 p.m., Shaurya Arora [email protected]
escribió:

¡Estamos llegando, amigos! Ver # 1751
https://github.com/callemall/material-ui/pull/1751. En este punto un
se necesita poco más trabajo para actualizar a la nueva api react-router.

Recomendaría probar la rama react-0.14-support e informar
cualquier problema con el prefijo [React0.14] en el título

-
Responda a este correo electrónico directamente o véalo en GitHub
https://github.com/callemall/material-ui/issues/1030#issuecomment -144183104
.

¡Frio! Estaré poniendo problemas si hay algo ...

¿Alguna noticia sobre una fecha de lanzamiento para el soporte de React 0.14?

@amagdas, ¿conoces la rama react-0.14-support ? Es un esfuerzo continuo. No dude en probarlo e informar cualquier problema con el prefijo [React0.14]

@ shaurya947 Sí, soy consciente de ello, pero no puedo instalar la rama usando npm, intentándolo de nuevo.
Sería bueno tener algún tipo de Léame / wiki sobre cómo probar esta rama usando react 0.14.

puede npm link de un clon o hacer npm i 'git://github.com/callemall/material-ui#react-0.14-support' en su proyecto.

Para que quede claro, debe realizar la instalación de npm en el directorio node_modules
no la raíz de tu directorio
El 2 de octubre de 2015 a las 08:01, "Chia-liang Kao" [email protected] escribió:

puede vincular npm desde un clon o hacer npm i 'git: //
github.com/callemall/material-ui#react-0.14-support 'en su proyecto.

-
Responda a este correo electrónico directamente o véalo en GitHub
https://github.com/callemall/material-ui/issues/1030#issuecomment -145051787
.

@amagdas esta rama aún no está activa en npm ya que todavía tiene algunos problemas y es un trabajo en progreso.

Puede hacer lo que dijo @clkao o, después de clonar el repositorio en su máquina, cambiar a la rama react-0.14-support usando git checkout react-0.14-support .

Después de eso, cuando ejecuta npm i en el directorio raíz, todos los archivos de origen se compilan en la carpeta lib . Luego puede usar esta carpeta lib en su proyecto.

Sí, hecho esto y funciona, daré comentarios.

¿Qué tal aprovechar esta herramienta de FB para realizar los cambios automáticamente? https://github.com/facebook/react/blob/master/packages/react-codemod/README.md

Mire "Correcciones de errores notables" en el anuncio de reacción 0.14 (http://facebook.github.io/react/blog/2015/10/07/react-v0.14.html):
"Los eventos de clic son manejados por React DOM de manera más confiable en los navegadores móviles, particularmente en Mobile Safari".
...

@kinolaev Para obtener más detalles: https://github.com/callemall/material-ui/pull/1732#issuecomment -143478944

¿Se elimina react-0.14-support ?

@ovaris me fusionaron para dominar.

@oliviertassinari ¿ cuándo estará disponible el npm?

cuando estará disponible en npm

No tengo idea de cuándo tendremos una versión sin errores. Sin embargo, puede probar la rama maestra con npm.

Debería arreglarse con la última versión v0.13.0
Gracias evreybody por tu ayuda.

@oliviertassinari gracias!

¡Gracias!

¿Alguna idea de si este problema seguirá existiendo en la última versión de material-ui? Puedo usar la mayoría de los componentes, pero los que usan this.refs.xxx.por ejemplo, si trato de usar el componente DatePicker, aparece un error "No se puede leer la propiedad 'mostrar' de indefinido" e indefinido aquí está this.refs.dialogWindow.

Estoy en react 0.14.8 y material-ui 0.14.4 ...

el mismo error

Parece que material-ui no funciona con React 0.14.8 y 0.14.9 y eso es patético.
Webpack emitiendo muchas quejas extrañas en mi consola. No entiendo qué hacer.

@ topgun743 Es muy hiriente de su parte describir el excelente trabajo aquí (regalado gratis ) como patético.

Desde que se abrió este número, se lanzó React 15, con el que material-ui es compatible. Sugiero actualizar React dentro de su proyecto.