Use persian numerals for farsi language strings

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+#### v7.0.0
+- Use Intl to render persian number for farsi languages
+- Looking for help testing the results and then doing the same for Arabic
+
 #### v7.0.0
 - Added support for React 18
 - Added hi.js language strings
@@ -8,13 +12,6 @@
 - Update ru.js language strings
 - Fix memory leak
 - Update dependencies
-  - Bump ansi-regex from 5.0.0 to 5.0.1
-  - Bump ansi-regex from 5.0.0 to 5.0.1
-  - Bump minimist from 1.2.5 to 1.2.6
-  - Bump minimist from 1.2.5 to 1.2.6
-  - Bump path-parse from 1.0.6 to 1.0.7
-  - Bump tmpl from 1.0.4 to 1.0.5
-  - Bump tmpl from 1.0.4 to 1.0.5
 
 #### v6.1.0
 - Added `eslint-plugin-react-hooks` and fixed the dependencies for hooks used in the library.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-timeago",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "description": "A simple Time-Ago component for ReactJs",
   "main": "lib/index.js",
   "module": "es6/index.js",
@@ -14,6 +14,9 @@
     "prepublish": "npm run build",
     "test": "jest --coverage"
   },
+  "jest": {
+    "testEnvironment": "jsdom"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/naman34/react-timeago.git"
@@ -36,36 +39,37 @@
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.16",
-    "@babel/core": "^7.14.2",
-    "@babel/eslint-parser": "^7.14.2",
-    "@babel/plugin-syntax-flow": "^7.12.13",
-    "@babel/plugin-syntax-jsx": "^7.12.13",
-    "@babel/plugin-transform-flow-strip-types": "^7.13.0",
-    "@babel/plugin-transform-react-jsx": "^7.13.12",
-    "@babel/preset-env": "^7.14.2",
-    "@babel/preset-flow": "^7.13.13",
-    "@babel/preset-react": "^7.13.13",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.2",
+    "@babel/eslint-parser": "^7.18.2",
+    "@babel/plugin-syntax-flow": "^7.17.12",
+    "@babel/plugin-syntax-jsx": "^7.17.12",
+    "@babel/plugin-transform-flow-strip-types": "^7.17.12",
+    "@babel/plugin-transform-react-jsx": "^7.17.12",
+    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-flow": "^7.17.12",
+    "@babel/preset-react": "^7.17.12",
     "@babel/preset-stage-1": "^7.8.3",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
-    "@rollup/plugin-replace": "^2.4.2",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.0.4",
-    "babel-jest": "^26.3.0",
-    "eslint": "^7.26.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-flowtype": "^5.7.2",
-    "eslint-plugin-import": "^2.23.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "flow-bin": "^0.151.0",
-    "jest": "^26.4.2",
-    "prettier": "^2.3.0",
-    "react": "^17.0.2",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-replace": "^4.0.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "babel-jest": "^28.1.1",
+    "eslint": "^8.17.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "flow-bin": "^0.180.0",
+    "jest": "^28.1.1",
+    "jest-environment-jsdom": "^28.1.1",
+    "prettier": "^2.6.2",
+    "react": "^18.1.0",
     "react-addons-test-utils": "^15.6.2",
-    "react-dom": "^17.0.2",
-    "rollup": "^2.48.0"
+    "react-dom": "^18.1.0",
+    "rollup": "^2.75.6"
   },
   "dependencies": {},
   "prettier": {

src/index.js

@@ -65,15 +65,15 @@ export default function TimeAgo({
   minPeriod = 0,
   maxPeriod = WEEK,
   title,
-  now = Date.now,
+  now = () => Date.now(),
   ...passDownProps
 }: Props): null | React.MixedElement {
   const [timeNow, setTimeNow] = useState(now())
   useEffect(() => {
     if (!live) {
       return
     }
-    const tick = (): number => {
+    const tick = (): 0 | TimeoutID => {
       const then = dateParser(date).valueOf()
       if (!then) {
         console.warn('[react-timeago] Invalid Date provided')

src/language-strings/fa-short.js

@@ -1,23 +1,50 @@
 /* @flow */
 import type { L10nsStrings } from '../formatters/buildFormatter'
 
+const hasIntl = typeof Intl !== 'undefined' && Intl.NumberFormat != null
+
 // persion shortened
 const strings: L10nsStrings = {
   prefixAgo: null,
   prefixFromNow: null,
   suffixAgo: '',
   suffixFromNow: '',
-  seconds: '1دقیقه',
-  minute: '1دقیقه',
-  minutes: '%dدقیقه',
-  hour: '1ساعت',
-  hours: '%dساعت',
-  day: '1روز',
-  days: '%dروز',
-  month: '1ماه',
-  months: '%dماه',
-  year: '1سال',
-  years: '%dسال',
+  seconds: '۱دقیقه',
+  minute: '۱دقیقه',
+  minutes: (value) => {
+    if (hasIntl) {
+      return new Intl.NumberFormat('fa').format(value) + 'دقیقه'
+    }
+    return '%dدقیقه'
+  },
+  hour: '۱ساعت',
+  hours: (value) => {
+    if (hasIntl) {
+      return new Intl.NumberFormat('fa').format(value) + 'ساعت'
+    }
+    return '%dساعت'
+  },
+  day: '۱روز',
+  days: (value) => {
+    if (hasIntl) {
+      return new Intl.NumberFormat('fa').format(value) + 'روز'
+    }
+    return '%dروز'
+  },
+  month: '۱ماه',
+  months: (value) => {
+    if (hasIntl) {
+      return new Intl.NumberFormat('fa').format(value) + 'ماه'
+    }
+    return '%dماه'
+  },
+  year: '۱سال',
+  years: (value) => {
+    if (hasIntl) {
+      return new Intl.NumberFormat('fa').format(value) + 'سال'
+    }
+    return '%dسال'
+  },
   wordSeparator: ' ',
 }
 

src/language-strings/fa.js

@@ -1,6 +1,8 @@
 /* @flow */
 import type { L10nsStrings } from '../formatters/buildFormatter'
 
+const hasIntl = typeof Intl !== 'undefined' && Intl.NumberFormat != null
+
 // Persian
 // Use DIR attribute for RTL text in Persian Language for ABBR tag .
 // By MB.seifollahi@gmail.com
@@ -11,15 +13,43 @@ const strings: L10nsStrings = {
   suffixFromNow: 'از حال',
   seconds: 'کمتر از یک دقیقه',
   minute: 'حدود یک دقیقه',
-  minutes: '%d دقیقه',
+  minutes: (value) => {
+    if (hasIntl) {
+      return new Intl.NumberFormat('fa').format(value) + ' دقیقه'
+    }
+    return '%d دقیقه'
+  },
   hour: 'حدود یک ساعت',
-  hours: 'حدود %d ساعت',
+  hours: (value) => {
+    if (hasIntl) {
+      return 'حدود %d ساعت'.replace(
+        '%d',
+        new Intl.NumberFormat('fa').format(value),
+      )
+    }
+    return 'حدود %d ساعت'
+  },
   day: 'یک روز',
-  days: '%d روز',
+  days: (value) => {
+    if (hasIntl) {
+      return '%d روز'.replace('%d', new Intl.NumberFormat('fa').format(value))
+    }
+    return '%d روز'
+  },
   month: 'حدود یک ماه',
-  months: '%d ماه',
+  months: (value) => {
+    if (hasIntl) {
+      return '%d ماه'.replace('%d', new Intl.NumberFormat('fa').format(value))
+    }
+    return '%d ماه'
+  },
   year: 'حدود یک سال',
-  years: '%d سال',
+  years: (value) => {
+    if (hasIntl) {
+      return '%d سال'.replace('%d', new Intl.NumberFormat('fa').format(value))
+    }
+    return '%d سال'
+  },
   wordSeparator: ' ',
 }
 

src/language-strings/uz.js

@@ -9,25 +9,15 @@ const strings: L10nsStrings = {
   suffixFromNow: null,
   seconds: 'bir necha soniya',
   minute: '1 daqiqa',
-  minutes: function (_value) {
-    return '%d daqiqa'
-  },
+  minutes: '%d daqiqa',
   hour: '1 soat',
-  hours: function (_value) {
-    return '%d soat'
-  },
+  hours: '%d soat',
   day: '1 kun',
-  days: function (_value) {
-    return '%d kun'
-  },
+  days: '%d kun',
   month: '1 oy',
-  months: function (_value) {
-    return '%d oy'
-  },
+  months: '%d oy',
   year: '1 yil',
-  years: function (_value) {
-    return '%d yil'
-  },
+  years: '%d yil',
   wordSeparator: ' ',
 }