react intl formatted duration

Форматированная продолжительность

React-intl — замечательная библиотека, предоставляющая компоненты React и API для локализации вашего приложения, однако в ней отсутствует компонент Duration .

Если вы хотите показать время, необходимое для выполнения чего-то вроде 1 minute или 5 minutes или даже простого таймера 0:30 вам не повезло, потому что комитет ECMA еще не определил формат DurationFormat.

Этот компонент предоставляет очень простую абстракцию, которая работает в React (DOM), React Native и любой другой целевой среде для форматирования простых длительностей.

Использование

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

Расширенный формат

 // 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`
}

Формат по умолчанию показывает только минуты и секунды. Для более сложных задач проверьте раздел пользовательского формата.

По умолчанию выводимый текст заключен в span , вы можете указать любой компонент, который вам нравится, доступный в вашей целевой среде:

 // 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`
} 

Стилизация чисел

Если вы хотите стилизовать числа иначе, чем текст, вы можете передать valueComponent

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

// renders

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

Наличие разных компонентов полезно не только для стилизации. В некоторых языках используются разные системы нумерации. Например, в японском языке есть числа полной ширины, поэтому вы можете захотеть отобразить １０分вместо 10分, для этого вы можете использовать:

 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 `１０分`
}

Пользовательский формат

Часы и дни

По умолчанию компонент отображает только минуты и секунды. Если вы хотите отображать часы или дни, вы можете использовать собственный формат:

 < 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`
}

Секунды также не являются обязательными, и если они отсутствуют, минуты будут округлены до закрытого значения.

 < 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`

Пользовательский формат сам по себе можно локализовать, передав идентификатор сообщения вместо фактического значения.

 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 }
    / >
  ) ;
} 

Индикация единиц измерения

В то время как format позволяет выбирать, какие единицы отображать, unitDisplay позволяет настроить способ визуализации каждой единицы.

 < 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` 

Формат таймера

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

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

Локализация

react-intl-formatted-duration ожидает следующие ключи внутри вашего файла перевода

• react-intl-formatted-duration.longFormatting — формат по умолчанию, который генерирует что-то вроде 1 minute 30 seconds . Он использует значения {days} , {hours} , {minutes} и {seconds} . Например, вы можете изменить его на {minutes} and {seconds} .
• react-intl-formatted-duration.duration формат, используемый переменными minutes и seconds описанными выше. Он использует значения {value} и {unit} . По умолчанию используется {value} {unit} , где value — число, а {unit} — текстовая единица измерения, например minute(s) или second(s) .
• react-intl-formatted-duration.timerFormatting Формат для TIMER_FORMAT по умолчанию равен {minutes}:{seconds} , где оба значения представляют собой числа, дополненные так, чтобы их минимальная длина составляла 2 символа.
• react-intl-formatted-duration.daysUnit строка для форматирования дней, по умолчанию {value, plural, one {day} other {days}}
• строка react-intl-formatted-duration.hoursUnit для форматирования часов, по умолчанию {value, plural, one {hour} other {hours}}
• строка react-intl-formatted-duration.minutesUnit для форматирования минут, по умолчанию {value, plural, one {minute} other {minutes}}
• react-intl-formatted-duration.secondsUnit строка для форматирования секунд, по умолчанию {value, plural, one {second} other {seconds}}

Сообщения для daysUnit , hoursUnit , minutesUnit , secondsUnit используют синтаксис format-js и используются только в том случае, если unitDisplay не указан.

Если вы используете сценарий extract-intl из реакции-шаблона, вы можете импортировать react-intl-formatted-duration/messages , чтобы автоматически генерировать ключи в ваших файлах перевода.

Обновление с версии 1.0

Версия 2.x позволяет использовать всю мощь синтаксиса сообщений format-js. Все, что вам нужно сделать, это удалить все ключи, такие как daysSingular , dayPlural , и просто использовать daysUnit в формате, описанном выше.

Обновление с версии 2.0

Версия 3.x имеет тот же API, что и версия 2.x , но полностью переписана. Вам не нужно менять свой код.

Обновление с версии 3.0

Версия 4.x не меняет поведение версии 3.x по умолчанию и содержит только новые функции. Однако внутри он меняет версию intl-unofficial-duration-unit-format с 1.x на 3.x , что теперь требует, чтобы Intl.NumberFormat был доступен глобально. Если вы правильно установили react-intl , скорее всего, вам не нужно менять свой код.