react intl formatted duration
v4.0.0
React-intl هي مكتبة مذهلة توفر مكونات React وواجهة برمجة التطبيقات (API) لتوطين تطبيقك، إلا أنها تفتقر إلى مكون Duration .
إذا كنت تريد إظهار الوقت المستغرق للقيام بشيء مثل 1 minute أو 5 minutes أو حتى مؤقت بسيط 0:30 فأنت غير محظوظ لأن لجنة ECMA لم تحدد تنسيق المدة بعد.
يوفر هذا المكون تجريدًا بسيطًا للغاية يعمل على 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} حيث تكون القيمتان عبارة عن أرقام مبطنة بحيث لا يقل طولها عن حرفين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-boilerplate، فيمكنك استيراد react-intl-formatted-duration/messages لإنشاء المفاتيح تلقائيًا في ملفات الترجمة الخاصة بك.
يسمح الإصدار 2.x باستخدام القوة الكاملة لبناء جملة رسالة format-js. كل ما عليك فعله هو إزالة جميع المفاتيح مثل daysSingular و dayPlural واستخدام daysUnit بالتنسيق الموضح أعلاه.
يحتوي الإصدار 3.x على نفس واجهة برمجة التطبيقات تمامًا مثل الإصدار 2.x ولكنه عبارة عن إعادة كتابة كاملة. لا تحتاج إلى تغيير الرمز الخاص بك.
لا يغير الإصدار 4.x أيًا من السلوك الافتراضي للإصدار 3.x ويحتوي فقط على ميزات جديدة. ومع ذلك، فهو يعمل داخليًا على رفع إصدار تنسيق intl-unofficial-duration-unit-format من 1.x إلى 3.x والذي يتطلب الآن أن يكون Intl.NumberFormat متاحًا عالميًا. إذا قمت بتثبيت react-intl بشكل صحيح، فمن المحتمل أنك لا تحتاج إلى تغيير التعليمات البرمجية الخاصة بك.
