@digigov/ui 0.15.1 → 0.16.0

package/CHANGELOG.md

@@ -1,6 +1,17 @@
 # Change Log - @digigov/ui
 
-This log was last generated on Wed, 30 Mar 2022 12:28:30 GMT and should not be manually modified.
+This log was last generated on Thu, 14 Apr 2022 12:32:51 GMT and should not be manually modified.
+
+## 0.16.0
+Thu, 14 Apr 2022 12:32:51 GMT
+
+### Minor changes
+
+- create I18nText component which translates complex sentences
+
+### Patches
+
+- add text translations in en and el locales
 
 ## 0.15.1
 Wed, 30 Mar 2022 12:28:30 GMT

package/api/APIErrors.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 export declare class APIErrors extends React.Component<{
-    fallback: React.ElementType<any>;
+    fallback: any;
 }> {
     state: {
         hasError: boolean;
         error: null;
     };
-    static getDerivedStateFromError(error: Error): object;
-    render(): React.ReactNode;
+    static getDerivedStateFromError(error: Error): Record<string, any>;
+    render(): any;
 }
 export default APIErrors;
 export declare class APIError extends Error {

package/app/I18nText.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface I18nTextProps {
+    children?: React.ReactNode;
+    i18nKey?: string;
+}
+export declare const I18nText: ({ i18nKey, children }: {
+    i18nKey: any;
+    children: any;
+}) => JSX.Element;
+export default I18nText;

package/app/I18nText.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.I18nText = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _i18n = require("@digigov/ui/app/i18n");
+
+var _app = require("@digigov/ui/app");
+
+var isObject = function isObject(value) {
+  return !!(value && (0, _typeof2["default"])(value) === 'object' && !Array.isArray(value));
+};
+
+var resultTranslate = function resultTranslate(translation, children) {
+  var parser = new DOMParser();
+  var childrenCloned = (0, _toConsumableArray2["default"])(children);
+  console.log('children cloned are', childrenCloned);
+  var doc1 = parser.parseFromString("<div>".concat(translation.replace(/<([0-9])>/g, '<t$1>').replace(/<\/([0-9])>/g, '</t$1>'), "</div>"), 'application/xml');
+  return recursiveReplace(childrenCloned, doc1.children[0].childNodes);
+};
+
+var recursiveReplace = function recursiveReplace(original, translation) {
+  if (!Array.isArray(original)) {
+    original = [original];
+  }
+
+  original.forEach(function (element, i) {
+    if (typeof element === 'string' || typeof element === 'number') {
+      var text = [];
+      var regex = /{([^}]+)}/;
+
+      if (regex.test(translation[i].textContent)) {
+        var textArray = translation[i].textContent.split(' ');
+        console.log('textArray is', textArray);
+
+        if (textArray.length === 1) {
+          return false;
+        } else {
+          textArray.forEach(function (txt) {
+            if (!regex.test(txt)) {
+              text.push(txt);
+            } else {
+              text.push(original[i]);
+            }
+          });
+          return original[i] = text.join(' ');
+        }
+      } else {
+        return original[i] = translation[i].textContent;
+      }
+    }
+
+    if (isObject(element)) {
+      original[i] = /*#__PURE__*/_react["default"].cloneElement(original[i], (0, _extends2["default"])({}, original[i].props, {
+        children: recursiveReplace(original[i].props.children, translation[i].childNodes)
+      }));
+    }
+  });
+  return original;
+};
+
+var I18nText = function I18nText(_ref) {
+  var i18nKey = _ref.i18nKey,
+      children = _ref.children;
+  var translation = (0, _i18n.defaultTranslate)(i18nKey);
+  var result = resultTranslate(translation, children);
+
+  var _useTranslation = (0, _app.useTranslation)(),
+      Trans = _useTranslation.Trans;
+
+  if (Trans) {
+    return /*#__PURE__*/_react["default"].createElement(Trans, {
+      i18nKey: i18nKey
+    }, children);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, result);
+};
+
+exports.I18nText = I18nText;
+var _default = I18nText;
+exports["default"] = _default;

package/app/i18n.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 export interface I18NContextProps {
+    Trans?: any;
     t: (str: string) => string;
     children?: React.ReactNode;
     i18n?: any;
 }
+export declare const defaultTranslate: (key: any) => any;
 export declare const I18NContext: React.Context<I18NContextProps>;
 export declare const I18NProvider: React.FC<I18NContextProps>;
 export declare const useTranslation: () => I18NContextProps;

package/app/i18n.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTranslation = exports["default"] = exports.I18NProvider = exports.I18NContext = void 0;
+exports.useTranslation = exports.defaultTranslate = exports["default"] = exports.I18NProvider = exports.I18NContext = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -34,6 +34,8 @@ var defaultTranslate = function defaultTranslate(key) {
   }
 };
 
+exports.defaultTranslate = defaultTranslate;
+
 var I18NContext = /*#__PURE__*/_react["default"].createContext({
   t: defaultTranslate
 });

package/app/index.d.ts

@@ -3,3 +3,4 @@ export * from '@digigov/ui/app/PageTitle';
 export * from '@digigov/ui/app/QrCodeScanner';
 export * from '@digigov/ui/app/Header';
 export * from '@digigov/ui/app/i18n';
+export * from '@digigov/ui/app/I18nText';

package/app/index.js

@@ -67,4 +67,17 @@ Object.keys(_i18n).forEach(function (key) {
       return _i18n[key];
     }
   });
+});
+
+var _I18nText = require("@digigov/ui/app/I18nText");
+
+Object.keys(_I18nText).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _I18nText[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _I18nText[key];
+    }
+  });
 });

package/core/PaginationLabel/index.js

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _PaginationLabel = _interopRequireDefault(require("@digigov/react-extensions/admin/PaginationLabel"));
 
-var _app = require("@digigov/ui/app");
+var _I18nText = require("@digigov/ui/app/I18nText");
 
 /**
  * PaginationLabel component is used for placing the pagination results label.
@@ -20,13 +20,11 @@ var PaginationLabel = /*#__PURE__*/_react["default"].forwardRef(function Paginat
   var start = _ref.start,
       end = _ref.end,
       total = _ref.total;
-
-  var _useTranslation = (0, _app.useTranslation)(),
-      t = _useTranslation.t;
-
   return /*#__PURE__*/_react["default"].createElement(_PaginationLabel["default"], {
     ref: ref
-  }, t('pagination.show'), " ", /*#__PURE__*/_react["default"].createElement("b", null, start), " ", t('pagination.to'), " ", /*#__PURE__*/_react["default"].createElement("b", null, end), ' ', t('pagination.of'), " ", /*#__PURE__*/_react["default"].createElement("b", null, total), " ", t('pagination.results'));
+  }, /*#__PURE__*/_react["default"].createElement(_I18nText.I18nText, {
+    i18nKey: "pagination.label"
+  }, "Showing ", /*#__PURE__*/_react["default"].createElement("b", null, start), " to ", /*#__PURE__*/_react["default"].createElement("b", null, end), " of ", /*#__PURE__*/_react["default"].createElement("b", null, total), " results."));
 });
 
 exports.PaginationLabel = PaginationLabel;

package/es/app/I18nText.js

@@ -0,0 +1,79 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _typeof from "@babel/runtime/helpers/typeof";
+import React from 'react';
+import { defaultTranslate } from '@digigov/ui/app/i18n';
+import { useTranslation } from '@digigov/ui/app';
+
+var isObject = function isObject(value) {
+  return !!(value && _typeof(value) === 'object' && !Array.isArray(value));
+};
+
+var resultTranslate = function resultTranslate(translation, children) {
+  var parser = new DOMParser();
+
+  var childrenCloned = _toConsumableArray(children);
+
+  console.log('children cloned are', childrenCloned);
+  var doc1 = parser.parseFromString("<div>".concat(translation.replace(/<([0-9])>/g, '<t$1>').replace(/<\/([0-9])>/g, '</t$1>'), "</div>"), 'application/xml');
+  return recursiveReplace(childrenCloned, doc1.children[0].childNodes);
+};
+
+var recursiveReplace = function recursiveReplace(original, translation) {
+  if (!Array.isArray(original)) {
+    original = [original];
+  }
+
+  original.forEach(function (element, i) {
+    if (typeof element === 'string' || typeof element === 'number') {
+      var text = [];
+      var regex = /{([^}]+)}/;
+
+      if (regex.test(translation[i].textContent)) {
+        var textArray = translation[i].textContent.split(' ');
+        console.log('textArray is', textArray);
+
+        if (textArray.length === 1) {
+          return false;
+        } else {
+          textArray.forEach(function (txt) {
+            if (!regex.test(txt)) {
+              text.push(txt);
+            } else {
+              text.push(original[i]);
+            }
+          });
+          return original[i] = text.join(' ');
+        }
+      } else {
+        return original[i] = translation[i].textContent;
+      }
+    }
+
+    if (isObject(element)) {
+      original[i] = /*#__PURE__*/React.cloneElement(original[i], _extends({}, original[i].props, {
+        children: recursiveReplace(original[i].props.children, translation[i].childNodes)
+      }));
+    }
+  });
+  return original;
+};
+
+export var I18nText = function I18nText(_ref) {
+  var i18nKey = _ref.i18nKey,
+      children = _ref.children;
+  var translation = defaultTranslate(i18nKey);
+  var result = resultTranslate(translation, children);
+
+  var _useTranslation = useTranslation(),
+      Trans = _useTranslation.Trans;
+
+  if (Trans) {
+    return /*#__PURE__*/React.createElement(Trans, {
+      i18nKey: i18nKey
+    }, children);
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, result);
+};
+export default I18nText;

package/es/app/i18n.js

@@ -3,8 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["t", "children"];
 import React from 'react';
 import el from '@digigov/ui/locales/el';
-
-var defaultTranslate = function defaultTranslate(key) {
+export var defaultTranslate = function defaultTranslate(key) {
   try {
     if (key.split('.').length > 0) {
       return key.split('.').reduce(function (locale, path) {
@@ -20,7 +19,6 @@ var defaultTranslate = function defaultTranslate(key) {
     return key;
   }
 };
-
 export var I18NContext = /*#__PURE__*/React.createContext({
   t: defaultTranslate
 });

package/es/app/index.js

@@ -2,4 +2,5 @@ export * from '@digigov/ui/app/App';
 export * from '@digigov/ui/app/PageTitle';
 export * from '@digigov/ui/app/QrCodeScanner';
 export * from '@digigov/ui/app/Header';
-export * from '@digigov/ui/app/i18n';
+export * from '@digigov/ui/app/i18n';
+export * from '@digigov/ui/app/I18nText';

package/es/core/PaginationLabel/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import CorePaginationLabel from '@digigov/react-extensions/admin/PaginationLabel';
-import { useTranslation } from '@digigov/ui/app';
+import { I18nText } from '@digigov/ui/app/I18nText';
 
 /**
  * PaginationLabel component is used for placing the pagination results label.
@@ -9,12 +9,10 @@ export var PaginationLabel = /*#__PURE__*/React.forwardRef(function PaginationLa
   var start = _ref.start,
       end = _ref.end,
       total = _ref.total;
-
-  var _useTranslation = useTranslation(),
-      t = _useTranslation.t;
-
   return /*#__PURE__*/React.createElement(CorePaginationLabel, {
     ref: ref
-  }, t('pagination.show'), " ", /*#__PURE__*/React.createElement("b", null, start), " ", t('pagination.to'), " ", /*#__PURE__*/React.createElement("b", null, end), ' ', t('pagination.of'), " ", /*#__PURE__*/React.createElement("b", null, total), " ", t('pagination.results'));
+  }, /*#__PURE__*/React.createElement(I18nText, {
+    i18nKey: "pagination.label"
+  }, "Showing ", /*#__PURE__*/React.createElement("b", null, start), " to ", /*#__PURE__*/React.createElement("b", null, end), " of ", /*#__PURE__*/React.createElement("b", null, total), " results."));
 });
 export default PaginationLabel;

package/es/locales/el.js

@@ -56,6 +56,13 @@ export default {
     show: 'Εμφανίζονται',
     to: 'έως',
     of: 'από',
-    results: 'αποτελέσματα'
+    results: 'αποτελέσματα',
+    label: 'Εμφανίζονται <1>{{start}}</1> έως <3>{{end}}</3> από <5>{{total}}</5> αποτελέσματα.'
+  },
+  upload: {
+    file: 'Αρχείο',
+    choose_file: 'Επιλογή αρχείου',
+    change_file: 'Αντικατάσταση αρχείου',
+    no_file: 'Δεν έχετε επιλέξει αρχείο'
   }
 };

package/es/locales/en.js

@@ -56,6 +56,13 @@ export default {
     show: 'Showing',
     to: 'to',
     of: 'of',
-    results: 'results'
+    results: 'results',
+    label: 'Showing <b>{start}</b> to <b>{end}</b> of <b>{total}</b> results'
+  },
+  upload: {
+    file: 'File',
+    choose_file: 'Choose file',
+    change_file: 'Change file',
+    no_file: 'You have not selected a file'
   }
 };

package/esm/app/I18nText.js

@@ -0,0 +1,79 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _typeof from "@babel/runtime/helpers/typeof";
+import React from 'react';
+import { defaultTranslate } from '@digigov/ui/app/i18n';
+import { useTranslation } from '@digigov/ui/app';
+
+var isObject = function isObject(value) {
+  return !!(value && _typeof(value) === 'object' && !Array.isArray(value));
+};
+
+var resultTranslate = function resultTranslate(translation, children) {
+  var parser = new DOMParser();
+
+  var childrenCloned = _toConsumableArray(children);
+
+  console.log('children cloned are', childrenCloned);
+  var doc1 = parser.parseFromString("<div>".concat(translation.replace(/<([0-9])>/g, '<t$1>').replace(/<\/([0-9])>/g, '</t$1>'), "</div>"), 'application/xml');
+  return recursiveReplace(childrenCloned, doc1.children[0].childNodes);
+};
+
+var recursiveReplace = function recursiveReplace(original, translation) {
+  if (!Array.isArray(original)) {
+    original = [original];
+  }
+
+  original.forEach(function (element, i) {
+    if (typeof element === 'string' || typeof element === 'number') {
+      var text = [];
+      var regex = /{([^}]+)}/;
+
+      if (regex.test(translation[i].textContent)) {
+        var textArray = translation[i].textContent.split(' ');
+        console.log('textArray is', textArray);
+
+        if (textArray.length === 1) {
+          return false;
+        } else {
+          textArray.forEach(function (txt) {
+            if (!regex.test(txt)) {
+              text.push(txt);
+            } else {
+              text.push(original[i]);
+            }
+          });
+          return original[i] = text.join(' ');
+        }
+      } else {
+        return original[i] = translation[i].textContent;
+      }
+    }
+
+    if (isObject(element)) {
+      original[i] = /*#__PURE__*/React.cloneElement(original[i], _extends({}, original[i].props, {
+        children: recursiveReplace(original[i].props.children, translation[i].childNodes)
+      }));
+    }
+  });
+  return original;
+};
+
+export var I18nText = function I18nText(_ref) {
+  var i18nKey = _ref.i18nKey,
+      children = _ref.children;
+  var translation = defaultTranslate(i18nKey);
+  var result = resultTranslate(translation, children);
+
+  var _useTranslation = useTranslation(),
+      Trans = _useTranslation.Trans;
+
+  if (Trans) {
+    return /*#__PURE__*/React.createElement(Trans, {
+      i18nKey: i18nKey
+    }, children);
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, result);
+};
+export default I18nText;

package/esm/app/i18n.js

@@ -3,8 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["t", "children"];
 import React from 'react';
 import el from '@digigov/ui/locales/el';
-
-var defaultTranslate = function defaultTranslate(key) {
+export var defaultTranslate = function defaultTranslate(key) {
   try {
     if (key.split('.').length > 0) {
       return key.split('.').reduce(function (locale, path) {
@@ -20,7 +19,6 @@ var defaultTranslate = function defaultTranslate(key) {
     return key;
   }
 };
-
 export var I18NContext = /*#__PURE__*/React.createContext({
   t: defaultTranslate
 });

package/esm/app/index.js

@@ -2,4 +2,5 @@ export * from '@digigov/ui/app/App';
 export * from '@digigov/ui/app/PageTitle';
 export * from '@digigov/ui/app/QrCodeScanner';
 export * from '@digigov/ui/app/Header';
-export * from '@digigov/ui/app/i18n';
+export * from '@digigov/ui/app/i18n';
+export * from '@digigov/ui/app/I18nText';

package/esm/core/PaginationLabel/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import CorePaginationLabel from '@digigov/react-extensions/admin/PaginationLabel';
-import { useTranslation } from '@digigov/ui/app';
+import { I18nText } from '@digigov/ui/app/I18nText';
 
 /**
  * PaginationLabel component is used for placing the pagination results label.
@@ -9,12 +9,10 @@ export var PaginationLabel = /*#__PURE__*/React.forwardRef(function PaginationLa
   var start = _ref.start,
       end = _ref.end,
       total = _ref.total;
-
-  var _useTranslation = useTranslation(),
-      t = _useTranslation.t;
-
   return /*#__PURE__*/React.createElement(CorePaginationLabel, {
     ref: ref
-  }, t('pagination.show'), " ", /*#__PURE__*/React.createElement("b", null, start), " ", t('pagination.to'), " ", /*#__PURE__*/React.createElement("b", null, end), ' ', t('pagination.of'), " ", /*#__PURE__*/React.createElement("b", null, total), " ", t('pagination.results'));
+  }, /*#__PURE__*/React.createElement(I18nText, {
+    i18nKey: "pagination.label"
+  }, "Showing ", /*#__PURE__*/React.createElement("b", null, start), " to ", /*#__PURE__*/React.createElement("b", null, end), " of ", /*#__PURE__*/React.createElement("b", null, total), " results."));
 });
 export default PaginationLabel;

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v0.15.1
+/** @license Digigov v0.16.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/esm/locales/el.js

@@ -56,6 +56,13 @@ export default {
     show: 'Εμφανίζονται',
     to: 'έως',
     of: 'από',
-    results: 'αποτελέσματα'
+    results: 'αποτελέσματα',
+    label: 'Εμφανίζονται <1>{{start}}</1> έως <3>{{end}}</3> από <5>{{total}}</5> αποτελέσματα.'
+  },
+  upload: {
+    file: 'Αρχείο',
+    choose_file: 'Επιλογή αρχείου',
+    change_file: 'Αντικατάσταση αρχείου',
+    no_file: 'Δεν έχετε επιλέξει αρχείο'
   }
 };

package/esm/locales/en.js

@@ -56,6 +56,13 @@ export default {
     show: 'Showing',
     to: 'to',
     of: 'of',
-    results: 'results'
+    results: 'results',
+    label: 'Showing <b>{start}</b> to <b>{end}</b> of <b>{total}</b> results'
+  },
+  upload: {
+    file: 'File',
+    choose_file: 'Choose file',
+    change_file: 'Change file',
+    no_file: 'You have not selected a file'
   }
 };

package/locales/el.d.ts

@@ -57,6 +57,13 @@ declare const _default: {
         to: string;
         of: string;
         results: string;
+        label: string;
+    };
+    upload: {
+        file: string;
+        choose_file: string;
+        change_file: string;
+        no_file: string;
     };
 };
 export default _default;

package/locales/el.js

@@ -62,7 +62,14 @@ var _default = {
     show: 'Εμφανίζονται',
     to: 'έως',
     of: 'από',
-    results: 'αποτελέσματα'
+    results: 'αποτελέσματα',
+    label: 'Εμφανίζονται <1>{{start}}</1> έως <3>{{end}}</3> από <5>{{total}}</5> αποτελέσματα.'
+  },
+  upload: {
+    file: 'Αρχείο',
+    choose_file: 'Επιλογή αρχείου',
+    change_file: 'Αντικατάσταση αρχείου',
+    no_file: 'Δεν έχετε επιλέξει αρχείο'
   }
 };
 exports["default"] = _default;

package/locales/en.d.ts

@@ -57,6 +57,13 @@ declare const _default: {
         to: string;
         of: string;
         results: string;
+        label: string;
+    };
+    upload: {
+        file: string;
+        choose_file: string;
+        change_file: string;
+        no_file: string;
     };
 };
 export default _default;

package/locales/en.js

@@ -62,7 +62,14 @@ var _default = {
     show: 'Showing',
     to: 'to',
     of: 'of',
-    results: 'results'
+    results: 'results',
+    label: 'Showing <b>{start}</b> to <b>{end}</b> of <b>{total}</b> results'
+  },
+  upload: {
+    file: 'File',
+    choose_file: 'Choose file',
+    change_file: 'Change file',
+    no_file: 'You have not selected a file'
   }
 };
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/ui",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "description": "@digigov reusable components toolkit",
   "module": "./esm/index.js",
   "publishConfig": {
@@ -18,8 +18,8 @@
     "clsx": "1.1.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "@digigov/react-core": "0.10.0",
-    "@digigov/react-extensions": "0.9.1"
+    "@digigov/react-core": "0.10.1",
+    "@digigov/react-extensions": "0.9.2"
   },
   "gitHead": "c903a46306f77f55ad7fc4d2e274006f39a6c871",
   "private": false,