react json editor ajrm
Locale Support & Other
Aviso:
Como você já deve saber, o projeto original do react-json-editor-ajrm não é mantido ativamente e eventualmente será descontinuado. Então decidi definir uma data oficial para a descontinuação. A data provisória para isso é 15 de junho de 2023.
Gostaria de agradecer a quem o utilizou em seus projetos e a quem contribuiu de alguma forma para o projeto. Simplesmente não desejo mais manter este projeto. Foi feito nos primeiros dias da minha carreira de engenheiro de software e não alcançou os padrões atuais nem os meus.
Mas não se preocupe. Pretendo dar nova vida a este projeto, reescrevendo-o do zero.
Eu gostaria de aproveitar os aprendizados do passado e evitar alguns dos problemas que o react-json-editor-ajrm tem atualmente. Gostaria também de destacar as coisas bem feitas e que desejo continuar.
Eu configurei a casa para este novo projeto aqui enio. Também criei uma discussão aqui se você tiver alguma dúvida ou comentário.
Um componente de reação elegante, semelhante a um editor e modular para visualização, edição e depuração de sintaxe de objeto javascript!
$ npm i --save react-json-editor-ajrm
import JSONInput from 'react-json-editor-ajrm';
import locale from 'react-json-editor-ajrm/locale/en';
<JSONInput
id = 'a_unique_id'
placeholder = { sampleObject }
colors = { darktheme }
locale = { locale }
height = '550px'
/>
Dica : Existem dois caminhos raiz diferentes: react-json-editor-ajrm e react-json-editor-ajrm/es . O primeiro contém código ES5 com preenchimento múltiplo, o segundo ES6 sem preenchimento. A versão react-json-editor-ajrm/es não é compatível com create-react-app . Se você não tiver certeza de qual precisa/deseja, escolha o primeiro - ele tem a melhor compatibilidade com ferramentas e navegadores.
A pasta ./examples contém dois exemplos:
$ cd path/to/repo/react-json-editor-ajrm/example/webpack-project
$ npm i
$ npm start
http://localhost:8080 no navegador da web placeholder para exibir após a montagem do componente.English , German , Spanish , Chinese , French , Indonesian , Russian , Hindi , Japanese e Tamil . | Nome | Descrição | Tipo | Obrigatório |
|---|---|---|---|
| localidade | A localidade do seu editor. Importe localidades como esta: import locale from 'react-json-editor-ajrm/locale/en' . Saber mais | objeto | Obrigatório |
| eu ia | Um id opcional a ser atribuído ao nó DOM de entrada de texto real. Além da entrada de texto, os seguintes nós também receberão um id: {id}-outer-box , {id}-container , {id}-warning-box , {id}-labels | corda | Opcional |
| espaço reservado | Envie um objeto javascript válido para ser mostrado assim que o componente for montado. Atribua um valor diferente para que o conteúdo inicial do componente seja renderizado novamente. | objeto | Opcional |
| reiniciar | Envie true para que o componente sempre seja renderizado novamente ou 'redefinido' para o valor fornecido na propriedade placeholder . | booleano | Opcional |
| visualizar apenas | Envie true se desejar que o conteúdo mostrado não seja editável. | booleano | Opcional |
| onChange | Sempre que o evento onKeyPress ocorrer, ele retornará valores de conteúdo. | objeto | Opcional |
| onBlur | Sempre que o evento onBlur ocorrer, ele retornará valores de conteúdo. | objeto | Opcional |
| confirmarBom | Envie false se desejar que a marca de seleção confirme que a boa sintaxe seja ocultada. | booleano | Opcional |
| altura | Uma propriedade abreviada para definir uma altura específica para todo o componente. | corda | Opcional |
| largura | Uma propriedade abreviada para definir uma largura específica para todo o componente. | corda | Opcional |
| onKeyPressUpdate | Envie false se desejar que o componente não seja atualizado automaticamente ao pressionar a tecla. | booleano | Opcional |
| waitAfterKeyPress | Quantidade de milissegundos de espera antes de renderizar novamente o conteúdo após pressionar a tecla. O valor padrão é 1000 quando não especificado. Em outras palavras, o componente será atualizado se não houver nenhuma tecla adicional após a última em 1 segundo. Menos de 100 milissegundos não faz diferença. | número | Opcional |
| modificarErrorText | Uma função personalizada para modificar o texto de aviso original do componente. Esta função receberá um único parâmetro do tipo string e deverá retornar igualmente uma string . | função | Opcional |
| erro | Contém as seguintes propriedades: | objeto | Opcional |
| erro.motivo | Uma string contendo uma mensagem de erro personalizada | corda | Opcional |
| erro.line | Um número que indica o número da linha relacionado à mensagem de erro personalizada | número | Opcional |
| tema | Especifique qual tema integrado usar. | corda | Opcional |
| cores | Contém as seguintes propriedades: | objeto | Opcional |
| cores.default | Código de cores hexadecimais para qualquer símbolo, como braces e comma . | corda | Opcional |
| cores.string | Código de cores hexadecimais para tokens identificados como valores string . | corda | Opcional |
| cores.número | Código de cores hexadecimais para tokens identificados como valores integeter , double ou float . | corda | Opcional |
| cores.dois pontos | Código de cores hexadecimais para tokens identificados como colon . | corda | Opcional |
| cores.keys | Código de cores hexadecimais para tokens identificados como keys ou nomes de propriedades. | corda | Opcional |
| cores.keys_whiteSpace | Código de cores hexadecimais para tokens identificados como keys entre aspas. | corda | Opcional |
| cores.primitivo | Código de cores hexadecimais para tokens identificados como valores boolean e nulos. | corda | Opcional |
| cores.erro | Código de cor hexadecimal para tokens marcados com uma etiqueta error . | corda | Opcional |
| cores.fundo | Código de cor hexadecimal para o plano de fundo do componente. | corda | Opcional |
| cores.background_warning | Código de cor hexadecimal para mensagem de aviso exibida na parte superior do componente. | corda | Opcional |
| estilo | Contém as seguintes propriedades: | objeto | Opcional |
| estilo.outerBox | Propriedade para modificar o estilo padrão da div do contêiner externo do componente. | objeto | Opcional |
| estilo.container | Propriedade para modificar o estilo padrão do container do componente. | objeto | Opcional |
| estilo.warningBox | Propriedade para modificar o estilo padrão do container div da mensagem de aviso. | objeto | Opcional |
| estilo.errorMessage | Propriedade para modificar o estilo padrão da mensagem de aviso. | objeto | Opcional |
| estilo.corpo | Propriedade para modificar o estilo padrão do div do contêiner de rótulos e códigos de linha. | objeto | Opcional |
| estilo.labelColumn | Propriedade para modificar o estilo padrão do div contêiner dos rótulos de linha. | objeto | Opcional |
| estilo.labels | Propriedade para modificar o estilo padrão de cada rótulo de linha. | objeto | Opcional |
| estilo.contentBox | Propriedade para modificar o estilo padrão da div contêiner do código. | objeto | Opcional |
outerBox
+-- container
+--- warningBox
+---- errorMessage
+--- body
+---- labelColumn
+----- labels
+---- contentBox
+----- auto generated markup
Sempre que o RJEA renderizar novamente seu conteúdo, qualquer função passada para a propriedade onChange receberá um único parâmetro de objeto com as seguintes chaves e valores:
| Chave | Descrição |
|---|---|
| texto simples | Uma representação de string do conteúdo que inclui quebras de linha e recuo. Ótimo para console.log() |
| marcaçãoText | Uma representação de string da marcação gerada automaticamente usada para renderizar conteúdo. |
| JSON | Uma versão JSON.stringify do conteúdo. |
| jsObject | Uma versão javascript object do conteúdo. Retornará undefined se a sintaxe do conteúdo estiver incorreta. |
| linhas | Número de linhas renderizadas para o conteúdo a ser exibido. |
| erro | Retorna false a menos que a sintaxe do conteúdo esteja incorreta; nesse caso, retorna um objeto com um token e um número line que corresponde ao local em que ocorreu o erro e um reason |
RJEA suporta tema integrado. Aqui está a lista.
Este projeto está licenciado sob a licença MIT - consulte o arquivo LICENSE.md para obter detalhes.
O agradecimento vai para essas pessoas maravilhosas?:
Andrew Redican ? ? | Patrick Sachs ? | Allan Kehl ? | esbenvb | Markus Petrykowski | Rick Brunstedt | ADirtyCat ? |
Cédrico ? | Radit ? | asketes ? | CGVedante ? | Shehbaz Jafri ? | Vasantha Kumar RB ? | Aditya Periwal ? |
Alexei Lyakhov | Terence Huynh | Richard Casco | tonynguyenit18 |
Este projeto segue a especificação de todos os contribuidores. Contribuições de qualquer tipo são bem-vindas!
