Material-ui: Material-UI non compatible avec React 0.14

@tleunen Vous êtes sur la balle! React 0.14 beta est sorti aujourd'hui.

@ hai-cea J'ai jeté un coup d'œil à certains des problèmes (j'ai trouvé ~ 50 sur 21 fichiers). Cela pourrait être une bonne opportunité pour un jalon. Je regardais les fichiers dialog / dialog-window / overlay et il y a beaucoup de couplage via this.refs.xxx.yyy () donc ce n'est peut-être pas une tâche simple. Si vous souhaitez créer un jalon de compatibilité React 0.14, faites-le moi savoir et je pourrai vous aider à rédiger des problèmes (je suis sûr que @tleunen aimerait être impliqué - je ne veux pas lui faire du bénévolat).

Merci les gars @tleunen!

Je suis d'accord, cela posera des problèmes. Quelle est l'alternative? Enregistrer l'élément dans une variable à l'intérieur du rendu?

@jkruder Êtes-vous sur gitter - https://gitter.im/callemall/material-ui ? S'il vous plaît envoyez-moi un message instantané là-bas et nous allons lancer le bal sur l'organisation des problèmes / jalons.

La plupart du temps, les composants ne doivent pas avoir de fonctions publiques. Tout doit être passé avec des accessoires ou lorsqu'ils sont montés.

Par exemple, le composant Dialog n'a pas besoin de show et hide . Si c'est dans le dom, il est affiché, sinon ce n'est pas le cas.

Je commence juste à utiliser Material-UI, donc je ne suis pas très conscient des problèmes avec les autres composants, mais je pense que la plupart d'entre eux pourraient être réécrits pour ne pas avoir de fonctions publiques (de toute façon, il n'y a pas d'autre choix).
Le fait est que ce sera un grand changement par rapport à la version actuelle.

@tleunen Je ne peux pas être plus d'accord sur les méthodes d'

@tleunen @oliviertassinari Oui , je suis d'accord avec vous deux. C'était un débat que nous avons eu lors de la conception de ce composant. Le problème que nous avons eu était la fonction clickaway. Si ouvrir / fermer était géré dans l'état, alors il pourrait s'inquiéter de se fermer au clic. Si open / close était passé en tant qu'accessoires, tous les utilisateurs de dialog devraient gérer eux-mêmes le clickaway.

Maintenant, une solution intermédiaire serait d'ajouter un accessoire onClickAway à la boîte de dialogue et de laisser l'utilisateur du composant ouvrir / fermer.

@ hai-cea Je suggérerais d'utiliser la même approche que https://github.com/rackt/react-modal. C'est fondamentalement votre solution intermédiaire.

Pour quelle autre chose cette bibliothèque utilise-t-elle this.refs lorsqu'elle interagit avec un composant DOM que de dire getDOMNode() ? Ce changement dans React ne s'applique qu'aux composants tels que <div/> et <i/> n'est-ce pas? Vos composants personnalisés sont toujours accessibles par this.refs.xxx comme d'habitude. Corrigez-moi si je me trompe, je n'ai pas encore essayé React 0.14, mais la même chose s'est produite sur HackerNews.

Vous voulez dire que si React détecte que la référence est sur un composant personnalisé, il renverra le composant au lieu de l'élément DOM à l'intérieur du composant?

@tleunen c'est

@mull Ce serait très bien si c'était le cas. :)

@ hai-cea @mull @tleunen J'ai juste exécuté un test rapide et une référence sur un composant personnalisé (quelque chose qui étend React.Component) (this.refs.customComponent) retournera une référence au composant React PAS au nœud DOM sous-jacent. Si vous avez une référence à un nœud DOM (div / a / img / etc), this.refs.domRef renverra le nœud.

@ hai-cea Cela étant dit, je pense toujours que c'est une bonne idée de s'éloigner des méthodes d'appel sur this.refs.XXX.

@jkruder merci, content de ne pas parler de mon ... :)

ok Merci d'avoir fait la recherche @jkruder. Je pense que nous sommes sauvés pour fermer ça. Bien que, je pense que nous devons encore faire un jalon de 0,14?

De plus, que pensez-vous du # 1033?

Je suppose que nous pouvons le fermer alors. Mais il devrait être bon de réécrire certains des composants pour supprimer le besoin d'appeler des fonctions sur eux. Ce n'est pas ainsi que les composants devraient fonctionner: /

@ hai-cea D'accord. Je travaille sur une ébauche du travail proposé pour l'étape 0.14 que je vous enverrai pour vos commentaires.

En ce qui concerne # 1033, je ne pense pas que nous devrions faire le saut pour le moment. Je suis tout à fait pour créer une branche séparée où nous pouvons convertir MUI afin qu'il soit compatible avec ce qui est proposé pour 0.14 et rendre les composants plus fonctionnels (minimisez / éliminez this.refs.XXX.YYY ()).

Si l'utilisation actuelle de this.ref.xxx ne casse pas réellement material-ui lorsqu'il est utilisé avec react 0.14.0-beta1, je ne sens pas que le souhait de s'éloigner de ce modèle devrait bloquer # 1033. En facilitant l'installation de material-ui aux côtés de react 0.14.0-beta1, vous vous préparerez à recevoir rapidement des commentaires sur les problèmes réels qui pourraient survenir; il est préférable de recevoir ces commentaires lorsque la version 0.14 est encore en version bêta.

Peut-être une bonne alternative (qui gère mieux les attentes), est de publier une version alpha / beta / rc de material-ui sur npm qui a 0.14.0 comme dépendance de pair (et est orientée vers la compatibilité de material-ui 0.14). De cette façon, il est plus facile pour les gens d'avancer et de trouver / résoudre les problèmes qui pourraient exister.

@jkruder Une mise à jour à ce sujet?

@ashtonwar Aucun pour l'instant - je me suis concentré sur la mise en place de tests et la résolution de certains engagements externes. Je devrais avoir un peu de temps cette semaine pour y jeter un coup d'œil et voir avec quoi nous travaillons. Certains autres ont déjà tenté de migrer vers la version 0.14.

Merci d'avoir regardé ça. J'ai vu material-ui-io de # 1033. Cela semble fonctionner pour certains composants (listes déroulantes, boutons, snack) mais tomber et mourir sur d'autres (case à cocher, curseur, bascule). Je n'ai connaissance d'aucune autre tentative de migration.

@tleunen Il s'avère que nous pouvons toujours utiliser this.refs.XXX pour un composant personnalisé. Merci @jkruder .

Aucun problème; Je crois toujours qu'il vaut mieux éviter d'utiliser this.refs.doSomething() dans la mesure du possible.

Les mises à jour? React JS 0.14 RC 1 vient de sortir et aimerait vraiment utiliser Material-UI avec.

même ici, y a-t-il un moyen de soutenir la migration vers 14?

J'utilise material-ui-io en production - cela semble correct.

Donc je suis le gars qui a publié material-ui-io et c'était une tentative très rude et triste de porter sur material-ui.

Je vous recommande vivement de ne pas utiliser cette bibliothèque en production ! J'ai créé le port et l'ai publié en une journée pour tester material-ui, mais j'ai fini par passer à la création de ma propre bibliothèque au-dessus de mdl

Je dirais que le meilleur moyen pour nous tous d'aider à faire vérifier le matériel sur React 14 est de passer à React 14-rc1 et de signaler les problèmes qui se posent individuellement. Commencer le titre du problème avec "React 14-rc1: cette erreur spécifique se produit ..." ou simplement laisser le problème être étiqueté avec une étiquette appropriée est peut-être une bonne idée.

Mais peut-être pas, auquel cas j'espère que les responsables principaux me corrigent

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

Il pourrait avoir besoin de quelques retouches concernant les peer-deps vs dev-deps vs deps et il y a le problème avec les événements tactiles en attente.

Dans React 0.14 onTouchCancel, onTouchEnd, onTouchMove, onTouchStart fonctionnent automatiquement, voir https://facebook.github.io/react/blog/#breaking -changes.
Pour activer onTouchTap sans le plugin react-tap-event-plugin:

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

Avons-nous toujours le délai de 300 ms d'iOS Safari?

Je n'ai pas d'IOS ...
Mais dans le premier post ici https://github.com/facebook/react/issues/436 , l'injection de TapEventPlugin est suggérée comme solution.
En plus de cela, ici https://github.com/facebook/react/commit/ff12423d639413c1934dfc2ff337b298952e99ef, j'ai trouvé un commit pertinent.

Y a-t-il un calendrier provisoire pour soutenir React 14 ?? Ce problème est vraiment ancien et ce serait bien qu'il soit résolu rapidement!

J'étais aussi très enthousiaste à l'idée d'utiliser cette boîte à outils d'interface utilisateur et d'éviter Bootstrap, Foundation et même Elemental UI ... mais j'utilise React 0.14 avec Redux et je ne reviens pas à 0.13. Combien de temps avant une mise à jour?

De plus, je ne suis pas sûr de me qualifier pour demander / fournir cette information, mais en ce qui concerne les références, (je ne sais pas non plus si c'est une chose de 0,14 .. ou 0,12 / 0,13), j'ajoute généralement ceci à mes éléments d'entrée de formulaire:

Dans mon code onclick (ou n'importe quel gestionnaire), je peux accéder à la valeur via this.name.value. Rend très facile l'obtention de l'une des valeurs d'entrée. Y a-t-il une chance que ce soit tout ce qui est nécessaire pour mettre à jour la boîte à outils avec une référence de travail?

+1 à ce sujet. J'ai trouvé material-ui aujourd'hui et j'étais vraiment ravi de l'essayer! Malheureusement, pas de dés.

+1. J'aimerais également connaître la chronologie de cette mise à jour!

: +1:

Nous y arrivons, les gars! Voir # 1751. À ce stade, un peu plus de travail est nécessaire pour passer à la nouvelle api react-router .

Je recommanderais d'essayer la branche react-0.14-support et de signaler tout problème avec le préfixe [React0.14] dans le titre. Une fois que nous pourrons faire fonctionner cette branche pleinement, je fermerai ce problème (enfin!) :)

Ravi de l'entendre! Attendez-vous à une version finale. J'ai travaillé avec
Redux, React, react-router, et jusqu'à présent, c'est une très bonne voie à suivre. Regardez
hâte d’y incorporer Material UI.

Le mar 29 septembre 2015 à 13:31, Shaurya Arora [email protected]
a écrit:

Nous y arrivons, les gars! Voir # 1751
https://github.com/callemall/material-ui/pull/1751. À ce stade, un
peu de travail supplémentaire est nécessaire pour mettre à niveau vers la nouvelle api react-router.

Je recommanderais d'essayer la branche react-0.14-support et le reporting
tout problème avec le préfixe [React0.14] dans le titre

-
Répondez directement à cet e-mail ou affichez-le sur GitHub
https://github.com/callemall/material-ui/issues/1030#issuecomment -144183104
.

Cool! Je poserai des problèmes s'il y a quelque chose ...

Des nouvelles sur une date de sortie pour le support React 0.14?

@amagdas connaissez-vous la branche react-0.14-support ? C'est un effort continu. N'hésitez pas à le tester et à signaler tout problème avec le préfixe [React0.14]

@ shaurya947 Oui , j'en suis conscient, mais je ne suis pas en mesure d'installer la branche en utilisant npm, en essayant à nouveau.
Avoir une sorte de Readme / wiki sur la façon de tester cette branche en utilisant react 0.14 serait bien.

vous pouvez soit npm link partir d'un clone, soit faire npm i 'git://github.com/callemall/material-ui#react-0.14-support' dans votre projet.

Pour être clair, vous devez effectuer l'installation de npm dans le répertoire node_modules
pas la racine de votre répertoire
Le 2 octobre 2015 08:01, "Chia-liang Kao" [email protected] a écrit:

vous pouvez soit npm link à partir d'un clone, soit faire npm i 'git: //
github.com/callemall/material-ui#react-0.14-support 'dans votre projet.

-
Répondez directement à cet e-mail ou affichez-le sur GitHub
https://github.com/callemall/material-ui/issues/1030#issuecomment -145051787
.

@amagdas cette branche n'est pas encore active sur npm car elle a encore des problèmes et est en cours de travail.

Vous pouvez soit faire ce que @clkao a dit, soit, après avoir cloné le référentiel sur votre machine, basculer vers la branche react-0.14-support utilisant git checkout react-0.14-support .

Après cela, lorsque vous exécutez npm i dans le répertoire racine, tous les fichiers source sont compilés dans le dossier lib . Vous pouvez ensuite utiliser ce dossier lib dans votre projet.

Yup, fait ceci et cela fonctionne, donnera des commentaires.

Pourquoi ne pas utiliser cet outil FB pour effectuer automatiquement les modifications? https://github.com/facebook/react/blob/master/packages/react-codemod/README.md

Regardez "Corrections de bogues notables" dans l'annonce de react 0.14 (http://facebook.github.io/react/blog/2015/10/07/react-v0.14.html):
"Les événements de clic sont gérés par React DOM de manière plus fiable dans les navigateurs mobiles, en particulier dans Mobile Safari."
...

@kinolaev Pour plus de détails: https://github.com/callemall/material-ui/pull/1732#issuecomment -143478944

react-0.14-support supprimé?

@ovaris J'ai fusionné avec le maître.

@oliviertassinari quand sera-t-il disponible sur npm?

quand sera disponible sur npm

Je ne sais pas quand nous aurons une version sans bogue. Cependant, vous pouvez essayer la branche principale avec npm.

Doit être corrigé avec la dernière version v0.13.0
Merci evreybody pour votre aide.

@oliviertassinari merci!

merci!

Des idées si ce problème existera toujours dans la dernière version de material-ui? Je peux utiliser la plupart des composants mais ceux qui utilisent this.refs.xxx.par exemple, si j'essaye d'utiliser le composant DatePicker, j'obtiens une erreur "Impossible de lire la propriété 'show' d'undefined" et undefined ici est this.refs.dialogWindow.

Je suis sur react 0.14.8 et material-ui 0.14.4 ...

la même erreur

On dirait que material-ui ne fonctionne pas avec React 0.14.8 et 0.14.9 et c'est pathétique.
Webpack émettant de nombreuses plaintes étranges sur ma console. Je ne comprends pas quoi faire.

@ topgun743 C'est très blessant de votre part de décrire l'excellent travail ici (offert gratuitement ) comme pathétique.

Depuis que ce numéro a été ouvert, React 15 a été publié, avec lequel Material-ui est compatible. Je suggère de mettre à jour React dans votre projet.