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 string สำหรับการจัดรูปแบบนาที ค่าเริ่มต้น {value, plural, one {minute} other {minutes}}
• react-intl-formatted-duration.secondsUnit string สำหรับการจัดรูปแบบวินาที, ค่าเริ่มต้น {value, plural, one {second} other {seconds}}

ข้อความสำหรับ daysUnit , hoursUnit , minutesUnit , secondsUnit ใช้ไวยากรณ์ format-js และใช้เมื่อไม่ได้ระบุ unitDisplay เท่านั้น

หากคุณใช้สคริปต์ extract-intl จาก react-boilerplate คุณสามารถนำเข้า 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 อย่างถูกต้อง คุณไม่จำเป็นต้องเปลี่ยนโค้ด