react intl formatted duration

Duração formatada

react-intl é uma biblioteca incrível que fornece componentes React e API para localizar seu aplicativo, porém falta um componente Duration .

Se você quiser mostrar o tempo que leva para fazer algo como 1 minute ou 5 minutes ou até mesmo um simples cronômetro 0:30 você está sem sorte porque o comitê ECMA ainda não especificou o DurationFormat.

Este componente fornece uma abstração muito simples que funciona em React (DOM), React Native e qualquer outro ambiente de destino para formatar durações simples.

Uso

npm i --save react-intl-formatted-duration

Formato estendido

 // Using React DOM
import React from 'react' ;
import FormattedDuration from 'react-intl-formatted-duration' ;

export default MyComponent ( ) {
  return < FormattedDuration seconds = { 60 } / >
  // will render `1 minute`
}

O formato padrão mostra apenas minutos e segundos. Para necessidades mais complexas, verifique a seção de formato personalizado.

Por padrão, o texto de saída é encapsulado em um span , você pode especificar qualquer componente que desejar, disponível em seu ambiente de destino:

 // Using React Native
import React from 'react' ;
import FormattedDuration from 'react-intl-formatted-duration' ;

import { Text } from 'react-native' ;

export default MyComponent ( ) {
  return < FormattedDuration seconds = { 60 } textComponent = { Text } / >
  // will render `1 minute`
} 

 // Using styled components
import React from 'react' ;
import FormattedDuration from 'react-intl-formatted-duration' ;

import styled from 'styled-components' ;
const Text = styled . span `` ;

export default MyComponent ( ) {
  return < FormattedDuration seconds = { 60 } textComponent = { Text } / >
  // will render `1 minute`
} 

Números de estilo

Se você quiser estilizar os números de forma diferente do texto, você pode passar um valueComponent

 < FormattedDuration seconds = { 90 } textComponent = { Text } valueComponent = { Value } / >

// renders

< Value > 1 < / Value> minute< / Text > < Value > 30 < / Value > < Text > seconds < / Text>

Ter componentes diferentes é útil não apenas para estilizar. Alguns idiomas usam sistemas de numeração diferentes. Por exemplo, o japonês tem números de largura total, então você pode querer renderizar １０分em vez de 10分, para fazer isso você pode usar:

 import React from 'react' ;
import { FormattedNumber } from 'react-intl' ;
import FormattedDuration from 'react-intl-formatted-duration' ;

/*
You'll also need to select Japanese locale and configure the IntlProvider to use
`ja-JP-u-nu-fullwide`

Somewhere in you application
import { IntlProvider } from 'react-intl';

   locale="ja-JP-u-nu-fullwide"
/>
 */

export default MyComponent ( ) {
  return < FormattedDuration seconds = { 600 } textComponent = { Text } valueComponent = { FormattedNumber } / >
  // will render `１０分`
}

Formato personalizado

Horas e dias

Por padrão o componente renderiza apenas minutos e segundos, se quiser exibir horas ou dias você pode usar um formato personalizado:

 < FormattedDuration seconds = { 180000 } format = "{days} {hours} {minutes} {seconds}" / >
// will render `2 days 2 hours`

< FormattedDuration seconds = { 180000 } format = "{hours} {minutes} {seconds}" / >
// will render `50 hours`

< FormattedDuration seconds = { 180000 } format = "{minutes} {seconds}" / >
// will render `3000 minutes`
}

Segundos também são opcionais e se faltarem, os minutos serão arredondados para o valor fechado

 < FormattedDuration seconds = { 10 } format = "{minutes}" / >
// will render `0 minutes`

< FormattedDuration seconds = { 30 } format = "{minutes}" / >
// will render `1 minute`

< FormattedDuration seconds = { 70 } format = "{minutes}" / >
// will render `1 minute`

O formato personalizado pode ser localizado passando um ID de mensagem em vez do valor real

 import React from 'react' ;
import FormattedDuration from 'react-intl-formatted-duration' ;

import messages from './messages' ;

export default MyComponent ( ) {
  return (
    < FormattedDuration
      seconds = { 600 }
      format = { messages . customFormat . id }
    / >
  ) ;
} 

Exibição da unidade

Enquanto format permite selecionar quais unidades serão renderizadas, unitDisplay permite configurar a forma como cada unidade é renderizada.

 < FormattedDuration seconds = { 60 } unitDisplay = "long" / >
// will render `1 minute`

< FormattedDuration seconds = { 60 } unitDisplay = "short" / >
// will render `1 min`

< FormattedDuration seconds = { 60 } unitDisplay = "narrow" / >
// will render `1m` 

Formato do temporizador

 import FormattedDuration , { TIMER_FORMAT } from 'react-intl-formatted-duration' ;

export default MyComponent ( ) {
  return < FormattedDuration seconds = { 60 } format = { TIMER_FORMAT } / >
  // will render `1:00`
} 

Localização

react-intl-formatted-duration espera as seguintes chaves dentro do seu arquivo de tradução

• react-intl-formatted-duration.longFormatting o formato padrão que gera algo como 1 minute 30 seconds . Ele usa os valores {days} , {hours} , {minutes} e {seconds} . Por exemplo, você pode alterá-lo para {minutes} and {seconds} .
• react-intl-formatted-duration.duration o formato usado pelas variáveis minutes e seconds descritas acima. Ele usa os valores {value} e {unit} . O padrão é {value} {unit} onde value é um número e {unit} é a unidade textual como minute(s) ou second(s) .
• formato react-intl-formatted-duration.timerFormatting para TIMER_FORMAT , o padrão é {minutes}:{seconds} onde ambos os valores são números preenchidos para ter um comprimento mínimo de 2 caracteres
• string react-intl-formatted-duration.daysUnit para formatação de dias, padrão {value, plural, one {day} other {days}}
• react-intl-formatted-duration.hoursUnit unit para formatação de horas, padrão {value, plural, one {hour} other {hours}}
• react-intl-formatted-duration.minutesUnit unit para formatação de minutos, padrão {value, plural, one {minute} other {minutes}}
• react-intl-formatted-duration.secondsUnit unit para formatação de segundos, padrão {value, plural, one {second} other {seconds}}

As mensagens para daysUnit , hoursUnit , minutesUnit , secondsUnit usam a sintaxe format-js e são usadas somente quando unitDisplay não é especificado.

Se você estiver usando o script extract-intl do react-boilerplate você pode importar react-intl-formatted-duration/messages para gerar automaticamente as chaves em seus arquivos de tradução.

Atualizando da versão 1.0

A versão 2.x permite usar todo o poder da sintaxe da mensagem format-js. Tudo que você precisa fazer é remover todas as chaves como daysSingular , dayPlural e simplesmente usar daysUnit com o formato descrito acima.

Atualizando da versão 2.0

A versão 3.x tem exatamente a mesma API da versão 2.x mas é uma reescrita completa. Você não precisa alterar seu código.

Atualizando da versão 3.0

A versão 4.x não altera nenhum comportamento padrão da versão 3.x e contém apenas novos recursos. No entanto, internamente, ele altera a versão do intl-unofficial-duration-unit-format de 1.x para 3.x , que agora exige que Intl.NumberFormat esteja disponível globalmente. Se você instalou react-intl corretamente, é provável que não precise alterar seu código.