Material-ui: Material-UI não compatível com React 0.14

@tleunen Você está com a bola! React 0.14 beta foi lançado hoje.

@ hai-cea Eu dei uma olhada em alguns dos problemas (encontrei ~ 50 em 21 arquivos). Esta pode ser uma boa oportunidade para um marco. Eu estava olhando para os arquivos dialog / dialog-window / overlay e há muito acoplamento via this.refs.xxx.yyy (), portanto, pode não ser uma tarefa simples. Se você quiser fazer um marco de compatibilidade do React 0.14, me avise e eu posso ajudar na redação de problemas (tenho certeza que @tleunen gostaria de se envolver - não quero

Obrigado pessoal @tleunen!

Eu concordo, isso vai causar alguns problemas. Qual é a alternativa? Salvar o elemento em uma variável dentro de render?

@jkruder Você está no gitter - https://gitter.im/callemall/material-ui ? Por favor, envie-me uma mensagem instantânea lá e nós começaremos a organizar questões / marcos.

Na maioria das vezes, os componentes não devem ter funções públicas. Tudo tem que ser passado com adereços ou quando são montados.

Por exemplo, o componente Dialog não precisa de show e hide . Se estiver no dom, será exibido; caso contrário, não será.

Estou começando a usar o Material-UI, então não estou muito ciente dos problemas com outros componentes, mas acho que a maioria deles poderia ser reescrita para não ter funções públicas (de qualquer forma, não há outras opções).
O fato é que será uma grande mudança inovadora em relação à versão atual.

@tleunen Não posso concordar mais sobre os métodos de exibição e ocultação do Dialog.

@tleunen @oliviertassinari Sim, concordo com vocês dois. Este foi um debate que tivemos ao projetar aquele componente. O problema que tivemos foi o recurso clickaway. Se abrir / fechar foi manipulado no estado, ele pode se preocupar em fechar-se ao clicar. Se abrir / fechar fosse passado como suporte, todos os que usarem o diálogo teriam que lidar com o clickaway por conta própria.

Agora, uma solução intermediária seria adicionar um objeto onClickAway ao diálogo e permitir que o usuário do componente abra / feche.

@ hai-cea, sugiro usar a mesma abordagem de https://github.com/rackt/react-modal. Esta é basicamente sua solução intermediária.

Para que outra coisa esta biblioteca usa this.refs ao interagir com um componente DOM do que para dizer getDOMNode() ? Esta mudança no React só se aplica a componentes como <div/> e <i/> , não é? Seus componentes personalizados ainda podem ser acessados ​​por this.refs.xxx como de costume. Corrija-me se estiver errado, eu não tentei React 0.14 ainda, mas esta mesma coisa apareceu no HackerNews.

Você quer dizer que se o React detectar o ref estiver em um componente personalizado, ele retornará o componente em vez do elemento DOM dentro do componente?

@tleunen esse é o meu entendimento. Precisa de verificação :)

@mull Isso seria muito bom se for esse o caso. :)

@ hai-cea @mull @tleunen Apenas executei um teste rápido e ref em um componente personalizado (algo que estende React.Component) (this.refs.customComponent) retornará uma referência ao componente React NÃO ao nó DOM subjacente. Se você tiver uma referência para um nó DOM (div / a / img / etc), this.refs.domRef retornará o nó.

@ hai-cea Dito isso, ainda acho uma boa ideia deixar de usar métodos de chamada em this.refs.XXX.

@jkruder obrigado, feliz por não estar falando fora do meu ... :)

ok Obrigado por fazer a pesquisa @jkruder. Acho que estamos salvos para fechar isso. Embora, eu acho que ainda precisamos fazer um marco de 0,14?

Além disso, o que vocês acham sobre o # 1033?

Acho que podemos fechar então. Mas deve ser bom reescrever alguns dos componentes para remover a necessidade de chamar funções neles. Não é assim que os componentes devem funcionar: /

@ hai-cea Concordo. Estou trabalhando em um rascunho do trabalho proposto para o marco 0.14 que enviarei para você para feedback.

Em relação ao # 1033, acho que não devemos dar o salto ainda. Eu sou a favor de criar um branch separado onde possamos converter MUI para que seja compatível com o que é proposto para 0,14 e tornar os componentes mais funcionais (minimizar / eliminar this.refs.XXX.YYY ()).

Se o uso atual de this.ref.xxx não quebrar o material-ui quando usado junto com o react 0.14.0-beta1, então não sinto vontade de me afastar desse padrão que deve bloquear # 1033. Ao tornar mais fácil instalar o material-ui junto com o react 0.14.0-beta1, você se preparará para receber feedback antecipado sobre problemas reais que possam surgir; é melhor receber esse feedback quando o 0.14 ainda está em beta.

Talvez uma boa alternativa (que gerencie melhor as expectativas) seja lançar uma versão alfa / beta / rc de material-ui no npm que tem 0.14.0 como uma dependência de par (e é voltada para tornar material-ui 0.14 compatível). Dessa forma, é mais fácil para as pessoas seguirem em frente e encontrar / corrigir quaisquer problemas que possam existir.

@jkruder Alguma atualização sobre isso?

@ashtonwar Nenhum ainda - tenho me concentrado em estabelecer alguns testes e resolver alguns compromissos externos. Devo ter algum tempo esta semana para dar uma olhada e ver no que estamos trabalhando. Alguns outros já fizeram algumas tentativas de migração para o 0.14.

Parabéns por olhar isso. Eu vi material-ui-io de # 1033. Parece funcionar para alguns componentes (menus suspensos, botões, barra de ferramentas), mas cai e morre em outros (caixa de seleção, controle deslizante, alternar). Não tenho conhecimento de quaisquer outras tentativas de migração.

@tleunen Acontece que ainda podemos usar this.refs.XXX para componentes personalizados. Obrigado @jkruder .

Sem problemas; Ainda acredito que é melhor evitar usar this.refs.doSomething() que possível.

Alguma atualização? O React JS 0.14 RC 1 acaba de ser lançado e realmente gostaria de usar o Material-UI com ele.

mesmo aqui, existe uma maneira de apoiar a migração para 14?

Estou usando material-ui-io na produção - parece OK.

Então eu sou o cara que publicou material-ui-io e foi uma tentativa muito dura e triste de transferir material-ui.

Eu recomendo fortemente que você não use esta biblioteca na produção ! Fiz a port e publiquei em um dia para testar o material-ui, mas acabei mudando para criar minha própria biblioteca em cima do MDL

Eu diria que a melhor maneira de todos nós ajudarmos a ter material-ui examinado no React 14 é atualizar para o React 14-rc1 e relatar os problemas que surgem individualmente. Começar o título do problema com "React 14-rc1: este erro específico acontece ...." ou apenas deixar o problema ser marcado com um rótulo apropriado talvez seja uma boa ideia.

Mas talvez não. Nesse caso, espero que os principais mantenedores me corrijam

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

Pode precisar de alguns retoques em relação a peer-deps vs dev-deps vs deps e há o problema com eventos de toque que está pendente.

No React 0.14 onTouchCancel, onTouchEnd, onTouchMove, onTouchStart funcionam automaticamente, consulte https://facebook.github.io/react/blog/#breaking -changes.
Para ativar o onTouchTap sem o plugin react-tap-event-plugin:

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

Ainda temos o atraso de 300ms do iOS Safari?

Eu não tenho IOS ...
Mas na primeira postagem aqui https://github.com/facebook/react/issues/436 , a injeção de TapEventPlugin é sugerida como solução.
Além disso, https://github.com/facebook/react/commit/ff12423d639413c1934dfc2ff337b298952e99ef encontrei commit relevante.

Existe algum cronograma provisório para apoiar React 14 ?? Este problema é muito antigo e seria bom se fosse resolvido em breve!

Eu também estava muito animado para usar este kit de ferramentas de UI e evitar Bootstrap, Foundation e até Elemental UI ... mas estou usando React 0.14 com Redux e não vou voltar para 0.13. Quanto tempo antes de uma atualização?

Além disso, não tenho certeza se estou qualificado para pedir / fornecer essas informações, mas com relação aos refs, (também não tenho certeza se isso é 0,14 coisa .. ou 0,12 / 0,13) Eu geralmente adiciono isso aos meus elementos de entrada de formulário:

No meu código onclick (ou qualquer outro manipulador), posso acessar o valor por meio de this.name.value. Torna muito fácil obter qualquer um dos valores de entrada. Alguma chance disso é tudo o que é necessário para atualizar o kit de ferramentas com a referência funcional?

+1 sobre isso. Encontrei o material-ui hoje e fiquei muito animado para experimentá-lo! Infelizmente, não há dados.

+1. Também gostaria de saber a linha do tempo dessa atualização!

: +1:

Estamos chegando lá, pessoal! Veja # 1751. Neste ponto, um pouco mais de trabalho é necessário para atualizar para a nova react-router api.

Eu recomendaria experimentar o branch react-0.14-support e relatar quaisquer problemas com o prefixo [React0.14] no título. Assim que conseguirmos que esse branch funcione totalmente, encerrarei este problema (finalmente!) :)

Que bom ouvir! Ansiosos por uma versão final. Tenho trabalhado com
Redux, React, react-router e até agora é um bom caminho a seguir. Veja
ansiosos para incorporar a IU de material a isso.

Na terça-feira, 29 de setembro de 2015 às 13h31, Shaurya Arora [email protected]
escrevi:

Estamos chegando lá, pessoal! Veja # 1751
https://github.com/callemall/material-ui/pull/1751. Neste ponto, um
pouco mais trabalho é necessário para atualizar para a nova API do roteador react.

Eu recomendaria experimentar o branch react-0.14-support e relatórios
quaisquer problemas com o prefixo [React0.14] no título

-
Responda a este e-mail diretamente ou visualize-o no GitHub
https://github.com/callemall/material-ui/issues/1030#issuecomment -144183104
.

Legal! Estarei colocando problemas se houver alguma coisa ...

Alguma notícia sobre a data de lançamento do suporte do React 0.14?

@amagdas você conhece a filial react-0.14-support ? É um esforço contínuo. Sinta-se à vontade para testá-lo e relatar quaisquer problemas com o prefixo [React0.14]

@ shaurya947 Sim, estou ciente disso, mas não consigo instalar o branch usando npm, tentando novamente.
Ter algum tipo de Leiame / wiki sobre como testar este branch usando o react 0.14 seria bom.

você pode npm link de um clone ou fazer npm i 'git://github.com/callemall/material-ui#react-0.14-support' em seu projeto.

Para ficar claro, você precisa fazer a instalação do npm no diretório node_modules
não a raiz do seu diretório
Em 2 de outubro de 2015 às 08:01, "Chia-liang Kao" [email protected] escreveu:

você pode ligar o npm a partir de um clone ou fazer o npm i 'git: //
github.com/callemall/material-ui#react-0.14-support 'em seu projeto.

-
Responda a este e-mail diretamente ou visualize-o no GitHub
https://github.com/callemall/material-ui/issues/1030#issuecomment -145051787
.

@amagdas este branch não está funcionando no npm ainda, pois ainda tem alguns problemas e está em andamento.

Você pode fazer o que @clkao disse ou, após clonar o repositório em sua máquina, mudar para o branch react-0.14-support usando git checkout react-0.14-support .

Depois disso, quando você executa npm i no diretório raiz, todos os arquivos de origem são compilados na pasta lib . Você pode então usar esta pasta lib em seu projeto.

Sim, feito isso e funciona, vou dar um feedback.

Que tal aproveitar essa ferramenta FB para fazer as alterações automaticamente? https://github.com/facebook/react/blob/master/packages/react-codemod/README.md

Veja "Correções de bugs notáveis" em react 0.14 announce (http://facebook.github.io/react/blog/2015/10/07/react-v0.14.html):
"Os eventos de clique são gerenciados pelo React DOM de maneira mais confiável em navegadores móveis, especialmente no Mobile Safari."
...

@kinolaev Para mais detalhes: https://github.com/callemall/material-ui/pull/1732#issuecomment -143478944

react-0.14-support removido?

@ovaris I foi mesclado com o master.

@oliviertassinari quando estará disponível no npm?

quando estará disponível às npm

Não tenho ideia de quando teremos uma versão sem bugs. No entanto, você pode tentar o branch master com o npm.

Deve ser corrigido com a versão mais recente v0.13.0
Obrigado a todos pela ajuda.

@oliviertassinari obrigado!

obrigado!

Alguma ideia se esse problema ainda existirá na versão mais recente do material-ui? Posso usar a maioria dos componentes, exceto os que usam this.refs.xxx.Por exemplo, se eu tentar usar o componente DatePicker, recebo um erro "Não é possível ler a propriedade 'show' de indefinido" e indefinido aqui é this.refs.dialogWindow.

Estou reagindo 0.14.8 e material-ui 0.14.4 ...

o mesmo erro

Parece que material-ui não funciona com React 0.14.8 e 0.14.9 e isso é patético.
Webpack emitindo muitas reclamações estranhas no meu console. Não entendo o que fazer.

@ topgun743 É muito doloroso da sua parte descrever o excelente trabalho aqui (distribuído de graça ) como patético.

Desde que esta edição foi aberta, o React 15 foi lançado, com o qual o material-ui é compatível. Eu sugiro atualizar o React dentro do seu projeto.