Changelog do Cloudsupport for React Native

Versão 1.23.0

• Breaking changes no componente Screen:
  • Agora inclui KeyboardAvoidingView por padrão (pode ser desativado via prop keyboardAware)
  • A propriedade style foi dividida em duas: containerStyle e contentStyle
  • Estilo containerStyle do tema padrão tem backgroundColor (antes no style)
  • Estilo contentStyle do tema padrão tem verticalPadding (antes no style)
  • O containerStyle receberá flex 1 e paddings de safe area
  • A centralização padrão do conteúdo agora é implementada via tema, propriedades flex 1 e justifyContent em contentStyle
• Melhoramentos no componente Screen:
  • Agora automaticamente trata teclado (pode ser desativado via prop keyboardAware)
  • Agora aplica SafeAreaProvider se insideModal
  • iOS: Agora suporta modais (trata top offset da janela modal)
  • iOS: Ajusta dinamicamente a margem inferior de safe area conforme visibilidade de teclado
  • Adicionada propriedade keyboardAware (padrão true)
  • Adicionada propriedade insideModal (padrão false)
  • Adicionada propriedade containerStyle
  • Adicionada propriedade contentStyle
  • Removida propriedade style
  • Centralização padrão do conteúdo implementada via tema (contentStyle)
• Breaking changes no componente ScrollScreen:
  • Agora inclui KeyboardAvoidingView por padrão (pode ser desativado via prop keyboardAware)
  • Adicionada propriedade containerStyle, mantidas style e contentStyle
  • Estilo containerStyle do tema padrão tem backgroundColor (antes no style)
  • Estilo style do tema padrão é vazio (antes tinha backgroundColor)
  • Estilo contentStyle do tema padrão tem verticalPadding (mantido)
  • O containerStyle receberá flex 1 e paddings de safe area
• Melhoramentos no componente ScrollScreen:
  • Agora aplica SafeAreaProvider se insideModal
  • iOS: Agora suporta modais (trata top offset da janela modal)
  • iOS: Ajusta dinamicamente a margem inferior de safe area conforme visibilidade de teclado
  • Alterada propriedade keyboardAware (padrão true)
  • Adicionada propriedade insideModal (padrão false)
  • Adicionada propriedade containerStyle
• Ajustes no Tema de Screen:
  • Adicionado estilo containerStyle com backgroundColor
  • Adicionado estilo contentStyle com paddingVertical, flex 1 e justifyContent center
  • Removido estilo style
• Ajustes no Tema de ScrollScreen:
  • Adicionado estilo containerStyle com backgroundColor
  • Estilo style sem propriedades padrões
• Lista de questões resolvidas pelos componentes Screen e ScrollScreen:
  • KeyboardAvoidingView em modais do iOS: É necessário calcular o deslocamento superior da tela, pois o KeyboardAvoidingView não funciona corretamente dentro de modais no iOS. Usamos o evento onLayout para lidar com isso.
  • Insets da área segura em modais do iOS: Forçamos o preenchimento superior sempre para zero, pois o useSafeAreaInsets não funciona corretamente nesse cenário.
  • Suporte para views animadas aninhadas: Utilizamos o ‘useSafeAreaInsets’. O SafeAreaView tanto do react-native quanto do react-native-safe-area-context apresenta problemas relacionados a comportamentos instáveis durante animações.
  • Cintilação na parte inferior da tela no Android: O exemplo oficial do React define o comportamento como “height” no Android, mas isso causa uma cintilação no cenário abaixo. Definimos como null para contornar esse problema. 1) Abrir uma tela no React Navigation que contém um input 2) Focar no input para abrir o teclado 3) Navegar para a próxima tela usando um botão sem fechar o teclado 4) Se a próxima tela tiver conteúdo com altura suficiente, a parte inferior da tela piscará em loop
  • Preenchimento dinâmico da área segura inferior no iOS de acordo com o estado de visibilidade do teclado: alcançado aplicando a área segura antes do KeyboardAvoidingView.

Versão 1.22.0

• Corrigido import do Hook useQueue
• Removido atributo package do AndroidManifest para compatibilidade com RN 0.76 (Android 35, Gradle 8.10)

Versão 1.21.0

• Melhoramentos no Hook useQueue:

    const queue = useQueue();
  

  • Reescrito queue.enqueue(asyncFunction), mesma semântica
  • Reescrito queue.enqueueIfIdle(asyncFunction), mesma semântica
  • Novo método queue.setNextTask(asyncFunction): Remove todas as tarefas pendentes de início de processamento e adiciona a tarefa informada na fila

Versão 1.20.0

• Melhoramento na classe útil Objects:
  • Adicionada função cleanNullUndefined
• Melhoramento em Hooks (mudança de impacto):
  • useQueue agora retorna { enqueue, enqueueIfIdle } em vez de array para evitar uso indevido
• Corrigido método enqueueIfIdle do Hook useQueue

Versão 1.19.3

• Corrigido Hook useUpdateEffect

Versão 1.19.2

• Ajustes na documentação

Versão 1.19.1

• Ajustes no Tema:
  • Removida propriedade contentStyle de Screen (não era usada)
  • Adicionado padding defs.spacingVertical no Screen para consistência com o tema padrão de ScrollScreen

Versão 1.19.0

• Melhoramento no componente ScrollScreen:
  • Adicionada propagação de ref para o ScrollView interno nativo
• Melhoramento nos componentes Screen e ScrollScreen:
  • Atributos adicioanis são propagados para o elemento interno View/ScrollView
• Novos Hooks:

    useMountEffect
    useUpdateEffect
    useInterval
    useQueue
  

Versão 1.18.1

• Remoção de códigos temporários

Versão 1.18.0

• Adicionado namespace no ‘build.gradle’ para suporte a novas versões do Gradle/Metro/ReactNative
• Ajustado ‘package.json’ para suporte a novas versões do Metro/ReactNative

Versão 1.17.0

• Melhoramentos no componente Alert:
  • Adicionado método isOpen
  • Adicionadas duas novas assinaturas no método show:

      show(message, <undefined>, callback)
      show(message, <undefined>, details)
    

• Corrigido ZoomableView.isOpen(), fora de sincronia
• Restaurado Confirm.isOpen()
• Restaurado Modal.isOpen()

Versão 1.16.0

• Melhoramentos no componente InputOption:
  • Adicionada propriedade sheetTitle
• Melhoramentos no Tema:
  • Adicionado estilo sheetTitleStyle ao componente InputOption
  • Adicionado estilo optionContainerStyle ao componente InputOption
  • Adicionado estilo optionStyle ao componente InputOption
  • Adicionada propriedade optionDividerColor ao componente InputOption
• Melhoramentos diversos na documentação

Versão 1.15.0

• Melhoramentos no componente OptionSheet:
  • Agora baseado no Modal do Cloudsupport no lugar do padrão do React Native
  • Adicionado suporte a lista longa de opções
• Melhoramentos no componente InputOption:
  • Agora baseado unicamente no OptionSheet (anteriormente misto com OptionList e OptionListItem)
  • Removida propriedade dynamic (não mais necessária)
• Melhoramentos no Tema:
  • Aprimorado estilo padrão do Switch para Android and iOS
  • Adicionado estilo containerWrapperStyle ao componente OptionSheet
  • Adicionado estilo contentContainerStyle ao componente OptionSheet
• Corrigido Modal contendo inputs on Android: Keyboard avoiding não surtia efeito
  • Workaround: Removida propriedade statusBarTranslucent do Modal porque KeyboardAvoidingView não suporta esse recurso no Android (bug/limitação do Android ainda não resolvido)

Versão 1.14.0

• Melhoramentos no componente Modal:
  • Adicionado suporte para reconhecimento de teclado (Modal com Inputs internos)
  • Adicionada propriedade scrollProps (permite personalizar qualquer parâmetro do ScrollView)
  • UX de rolagem aprimorado: rolagem de conteúdo em vez de rolagem do Modal completo
• Melhoramentos no Tema:
  • Adicionado containerWrapperStyle ao componente Modal
  • Adicionado contentContainerStyle ao componente Modal

• Corrigido o operador “coalesce” (

  alterado para ?? em 89 lugares)

Versão 1.13.0

• Novos componentes derivados de InputText:

    InputCd
    InputCep
    InputCnpj
    InputCpf
    InputCpfCnpj
    InputDatetime
    InputDecimal
    InputEmail
    InputInteger
    InputMoney
    InputMonth
    InputPassword
    InputTel
    InputUrl
  

• Mudança nos componentes InputCd, InputPassword e Type Month (InputMonth):
  • Propriedade minLength alterada para min
  • Propriedade maxLength alterada para max
• Aprimorado Type Numeric (InputInteger):
  • Adicionado suporte para separador de milhar para valores inteiros
• Adicionado message bundle para InputMonth
• Correção da validação min/max de InputDatetime
• Correção da validação min/max no Type Month (InputMonth)
• Correção da formatação no Type Month (InputMonth) quando o usuário insere o valor válido completo
• Correção da formatação no Type Numeric (InputInteger, InputDecimal) quando o componente é instanciado com valor inicial

Versão 1.12.0

• Melhoramento no componente Icon:
  • Adicionado suporte ao modificador solid (FontAwesome5)
• Correção do erro “aspectRatio” no componente Image
• Correção da animação “snap to edge” do ZoomableView quando o zoom ultrapassava o maxZoom
• Correção da animação “fade in” na abertura do ZoomableView quando a visualização anterior foi fechada pelo gesto de diminuir o zoom

Versão 1.11.2

• Ajuste no componente Icon:
  • Incluído bundle Ionicons

Versão 1.11.1

• Pacote de correções nos componentes InputText, RichInputText, RichInputOption e RichInputImage:
  • Mudança no value poderia não ser propagada para o Input
  • O método isValid() poderia retornar um estado desatualizado
  • Erro “Não é possível ler a propriedade ‘formattedText’ de undefined” ao usar Type Numeric ou Money
  • Validação completa quando o Input recebe foco (não apenas validação do campo obrigatório)
  • Valores numéricos que terminavam com um símbolo decimal geravam erro desnecessário de número inválido
  • Backspace poderia não surtir efeito
  • Comportamento inesperado quando o valor era passado no tipo errado (por exemplo: String no lugar de Number para Type Numeric)
  • Comportamento inesperado quando o componente era renderizado novamente

Versão 1.11.0

• Melhoramentos nos componentes InputText, InputOption, InputImage e Button:
  • Adicionada propriedade disabled
• Melhoramentos no componente Image:
  • Efeito de opacidade removido ao tocar na imagem de preview (aplica-se a InputImage)
• Melhoramentos no componente ECharts:
  • Um ícone de erro é apresentado no caso de erro no carregamento do ECharts
  • O ícone de erro pode ser tocado para mostrar a descrição do erro
  • Adicionada propriedade errorIcon
  • Adicionada propriedade showError
  • Adicionada propriedade showErrorOk
• Melhoramentos no Tema:
  • Adicionada propriedade disabledOpacity ao estilo do Button
• Corrigido o travamento do Android quando ECharts (WebView) está dentro de um ScrollView e o usuário rola até o final
• Corrigido o travamento do Android ao abrir InputOption dinâmico ou Modal
• Corrigidos problemas menores de animações do Android do ZoomableView

Versão 1.10.0

• Melhoramentos no componente ZoomableView:
  • Gestos simultâneos de panorâmica e pinça
  • Novo gesto para fechar: diminuir o zoom quando a escala começar em 100%
  • Os gestos Pull down ou Pull up para fechar continuam válidos
  • Todas as animações são enfileiradas para evitar qualquer efeito de cintilação
• Melhoramentos no componente Modal:
  • “Safe Area” agora é aplicada por padrão
  • Adicionada propriedade unsafeEdges
  • Adicionada propriedade unsafeTop
  • Adicionada propriedade unsafeBottom
  • Adicionada propriedade unsafeLeft
  • Adicionada propriedade unsafeRight
  • Adicionada propriedade center
  • O conteúdo será rolável se sua altura for maior que a da tela
• Melhoramentos no componente Alert:
  • “Safe Area” agora é aplicada
  • Adicionada propriedade center
  • Adicionada propriedade title
  • Método show agora tem 8 assinaturas:

      show(message)
      show(message, closeCallback)
      show(message, details)
      show(message, details closeCallback)
      show(title, message)
      show(title, message, closeCallback)
      show(title, message, details)
      show(title, message, details closeCallback)
    

• Melhoramentos no componente Confirm:
  • “Safe Area” agora é aplicada
  • Adicionada propriedade center
• Melhoramentos nos componentes Modal, Alert, Confirm e OpenSheet:
  • Os eventos onPress/onCancel/onClose agora são invocados após o cancelamento total do Modal, o que evita problemas do iOS, como abrir a biblioteca de câmeras (isso não pode ser feito se o Modal não for descartado)
• Melhoramentos no componente OptionListItem:
  • Adicionada propriedade center
  • Adicionada propriedade hideArrow
• Melhoramentos no componente InputOption:
  • Adicionada propriedade dynamic, destinada a apresentar grande conjunto de valores (tela cheia rolável com base em OptionList)
  • No modo dinâmico, o OptionListItem é centralizado
• Melhoramentos no Tema:
  • Adicionado titleStyle ao componente Alert
• Método isOpen removido dos componentes Modal e Confirm
• Corrigido componente Alert no método show (bug de 1.9.0)
• Corrigido componente InputImage - problemas no iOS
• Corrigido componente ZoomableView - gesto de fechar por zoom out poderia iniciar com zoom acima de 100%
• Corrigido componente ZoomableView - opacidade do overlay poderia ficar errada no gesto zoom out seguido de rápido zoom in
• Corrigido componente ZoomableView - gesto de fechar não era descartado se o zoom subir de 100%
• Corrigido componente ZoomableView - gesto de arrastar poderia sofrer “flicker” em zoom muito alto quando a imagem estava colada nas laterais
• Corrigido componente Image - atualização do Aspect Ratio na mudança de source, style, width ou height
• Corrigido componente Image - imagem borrada no iOS (afetava InputImage e RichInputImage)
• Corrigidos componentes InputOption e OptionSheet - não fechava teclado (dismiss)

Versão 1.9.0

• Melhoramentos nos componentes Modal, Alert e Confirm:
  • StatusBar fica oculta no Android para consistência de UX com iOS
• Melhoramentos no componente Alert:
  • O mimeType do details é agora ‘text/plain’ por padrão
  • O tamanho da fonte do details text/plain agora é baseada no tema (2 x defs.fontSize)
• Melhoramentos no componente Button:
  • Atributo title é agora opcional (ícone fica centralizado)
• Melhoramentos no componente Image:
  • Adicionada propriedade zoomable (torna a imagem touchable, via ZoomableView)
  • Adicionado método showViewer (exibe o visualizador em tela cheia, via ZoomableView)
  • Adicionado evento onPress (quando o usuário toca na imagem, por padrão exibe o visualizador ZoomableView)
• Melhoramentos no componente InputImage:
  • Adicionada propriedade controls (ativa os botões de ação, por padrão false)
  • Adicionado método requestImageFromLibrary
  • Adicionado método requestImageFromCamera
  • Adicionado método requestImage (o componente mostrará menu com as opções de Biblioteca e Câmera)
  • Adicionado método showViewer (exibe o visualizador em tela cheia)
  • Adicionado evento onPressPreview (quando o usuário toca no preview, por padrão exibe o visualizador ZoomableView)
  • Preview por padrão é touchable e exibe o visualizador ZoomableView
  • Os melhoramentos acima (adição da API) permitem um layout customizável
• Novo componente ZoomableView:
  • Destaques de UX:
    • Animação fade in na abertura
    • Animação fade out + zoom out (simultâneo) no fechamento
    • Gesto de Pinça centralizado nos dedos
    • Adicionado Slop para que a Pinça seja reconhecida de fora do conteúdo
    • Se a Pinça reduzir o zoom para menos que 100%, a escala volta para 100%, animada
    • Se a Pinça aumentar o zoom para mais que maxZoom, a escala volta para maxZoom, animada (padrão 500%)
    • Retorno para maxZoom aplica translação X/Y, animada, para manter a Pinça centralizada nos dedos
    • Após gestos de Pinça e Arrastar, aplica-se translação X/Y, animada, para remover espaços vazios nas laterais da tela
    • Se o zoom não for grande suficiente, o conteúdo retorna para o centro da tela, animado
    • Gestos Puxar para Cima ou para Baixo, se começado na escala 100%, fecham o visualizador
    • A opacidade do overlay diminuirá gradativamente durantes os gestos de fechamento, indicando que eles estão em processo de reconhecimento/ativação
    • StatusBar oculto no Android (consistência de fullscreen com iOS)
    • O botão de voltar do Android fecha o componente
• Melhoramentos no Tema:
  • Adicionado estilo para o componente ZoomableView
• Corrigido paddings do preview image de InputImage
• Corrigido cálculo do aspectRatio de Image, afetava alguns cenários
• Desativado cálculo do aspectRatio de Image se seu valor estiver definido no estilo ou via ambas as propriedades width e height
• Várias correções e refinamentos em toda a documentação do código-fonte

Versão 1.8.0

• Melhoramentos no componente InputOption:
  • Adicionada propriedade required
  • Adicionada propriedade onValidate
  • Adicionada propriedade nullable (onSelect será disparado com valor undefined)
  • Propriedade ‘titleAttr’ renomeada para ‘labelAttr’
• Melhoramentos no componente InputImage:
  • Adicionada propriedade required
  • Adicionada propriedade onValidate
  • Adicionado Message bundle para labels e mensagens
• Novo componente RichInputOption
• Novo componente RichInputImage
• Corrigido evento onSelect de InputImage quando o usuário removia a imagem

Versão 1.7.0

• Melhoramentos no componente Icon:
  • Adicionado bundle Octicons
  • Adicionado bundle Foundation
  • Adicionado bundle SimpleLineIcons

Versão 1.6.0

• Melhoramentos no componente Alert:
  • Adicionada assinatura do método show:

      show(messageText, detailsObj)
    

  • Ajustado tamanho da fonte no details com HTML no Android
• Melhoramentos no componente Image:
  • Adicionado suporte a source base64
• Melhoramentos no Tema:
  • Adicionada propriedade spacing ao estilo do Switch
  • Removidos estilos não usados
  • Adicionado estilo para o componente ECharts
• Melhoramentos no componente InputText:
  • Adicionada propriedade required
  • Adicionado forwarding method para blur()
  • Adicionado forwarding method para clear()
  • Adicionado forwarding method para isFocused()
  • Adicionado framework para validação e formatação
    • Exemplo:

        import { InputText, Types } from '@bernardo-dias/react-native-cloudsupport';
        const { Email } = Types;
      

    • Types incluídos:

        Text (default)
        Email
        Url
        Password
        Number
        Money
        Cd (check digits)
        DateTime
        Month
        Tel (BR)
        Cpf (BR)
        Cnpj (BR)
        Cpfcnpj (BR)
        Cep (BR)
      

    • Criando seu próprio Type (vide detalhes na documentação do código-fonte):

        import { Type } from '@bernardo-dias/react-native-cloudsupport';
        //...
        class MyType extends Type {
            format = (valueOrTypedText, typeProps, previousState) => valueOrTypedText ?? '';
            parse = (formattedText, typeProps) => formattedText;
            validate = (text, typeProps) => { };
            defaultInputProps = (typeProps) => { };
        }
      

    • Os Types podem ser customizados (vide detalhes na documentação do código-fonte):

        <InputText type={Password} typeProps={{minLength: 10, minUpper: 2, minSpecial: 1, specialChars: '!@#$' }} />
      

    • Capturando eventos de validação:

        <InputText type={Email} onValidate={(valid, errorMessage) => {...}} />
      

    • Obtendo o valor parsed (string, number, date etc) conforme cada Type:

        <InputText onChangeValue={value => {...}} />
      

• Novo componente InputImage
  • Requer instalação de https://github.com/react-native-image-picker/react-native-image-picker.
• Novo componente RichInputText
• Novo componente ECharts
  • Adicionado suporte ao Apache Theme Builder
• Adicionado framework para internacionalização (i18n):
  • Exemplo de como personalizar mensagens (vide detalhes na documentação do código-fonte):

      import { setMessages } from '@bernardo-dias/react-native-cloudsupport';
      // ...
      setMessages({
      'input_invalid_text_min':        (props) => Informe pelo menos ${props.min} caracteres,
      'input_invalid_text_max':        (props) => Informe no máximo ${props.max} caracteres,
      'input_invalid_cpf':             (props) => 'CPF inválido',
      'input_invalid_url':             (props) => 'Endereço inválido',
      'input_invalid_email':           (props) => 'E-mail inválido',
      // ... (see source code for all message keys)
      });
    

• Melhoramentos nas configurações do node package:
  • Dependências movidas para peerDependencies para evitar duplicidade de inicialização no React Native
  • Os projetos devem instalar as dependências
• Melhoramentos no Tema:
  • Novo hook useTheme() que permite obter a instância do tema da aplicação
• Corrigida marginVertical do componente OptionList
• Corrigido componente Alert ao exibir details text/plain que continha entidades html

Versão 1.5.0

• Descontinuado componete IgnoreLogs em favor do novo componente Log
  • Deve ser ativado na primeira linha antes do componente de mais alto nível
  • Exemplo:

      import React from 'react';
      import { Log } from '@bernardo-dias/react-native-cloudsupport';
      // more imports
      Log.ignoreLogs();
      // ...
      export default App = () => {
          return (
              <...>
          );
      }
    

Versão 1.4.0

• Melhoramentos no componente OptionList:
  • Os elementos da lista são agora obtidos da propriedade ‘values’, em vez de tags internas
  • Exemplo:

      <OptionList values={[
          <OptionListItem title='Configurações'  onPress={pressItemMenu} />,
          <OptionListItem title='Sobre esse app' onPress={pressSobre} />
      ]} />
    

• Melhoramentos no Tema:
  • Adicionada propriedade dividerColor ao estilo do OptionList
  • Adicionada variável de personalização defs.brightnessStep3
  • Clareado tom do track do Switch quando desativado (brightnessStep2)
• Corrigido paddings nos ícones de Button

Versão 1.3.0

• Melhoramentos no componente StatusBar:
  • Agora suporta todos os atributos do React Native (como transparency)

Versão 1.2.0

• Melhoramentos no Tema:
  • Método createTheme tem nova assinatura: (customColors, customDefs, customStyles)
• Novo componente IgnoreLogs:
  • Permite desabilitar logs “irritantes” (ex: react-native-snap-carousel)
  • Log desabilitado por padrão: “ViewPropTypes will be removed from React Native”
  • O aplicativo deve importá-lo no topo de tudo (no App.js)
• Corrigida herança de estilos no Tema

Versão 1.1.0

• Novo componente KeyboardAware
• Melhoramentos no componente ScrollScreen:
  • Deixou de ser Novo componente por padrão (adequação ao React Navigation)
  • Propriedade keyboardShouldPersistTaps agora vale por padrão ‘handled’
  • Adicionada propriedade keyboardAware

Versão 1.0.0

• Primeira versão
• Compatibilidade: React Native 0.68