web.components: PageLayout: added translations, applied Text component, added new packages

web/ASC.Web.Components/package.json

@@ -99,6 +99,7 @@
   "dependencies": {
     "email-addresses": "^3.1.0",
     "html-to-react": "^1.4.2",
+    "i18next": "^19.0.2",
     "lodash": "4.17.15",
     "lodash-es": "4.17.15",
     "moment": "^2.24.0",
@@ -110,7 +111,9 @@
     "react-avatar-editor": "^11.0.7",
     "react-custom-scrollbars": "^4.2.1",
     "react-dropzone": "^10.2.1",
+    "react-i18next": "^11.2.7",
     "react-lifecycles-compat": "^3.0.4",
+    "react-redux": "^7.1.3",
     "react-text-mask": "^5.4.3",
     "react-toastify": "^5.4.1",
     "react-tooltip": "^3.11.1",

web/ASC.Web.Components/src/components/page-layout/i18n.js

@@ -0,0 +1,31 @@
+import i18n from "i18next";
+import en from "./locales/en/translation.json";
+import ru from "./locales/ru/translation.json";
+
+const newInstance = i18n.createInstance();
+
+const resources = {
+  en: {
+    translation: en//require("./locales/en/translation.json")
+  },
+  ru: {
+    translation: ru//require("./locales/ru/translation.json")
+  }
+};
+
+newInstance.init({
+  resources: resources,
+  lng: 'en',
+  fallbackLng: "en",
+  debug: true,
+
+  interpolation: {
+    escapeValue: false, // not needed for react as it escapes by default
+  },
+
+  react: {
+    useSuspense: false
+  }
+});
+
+export default newInstance;

web/ASC.Web.Components/src/components/page-layout/index.js

@@ -1,6 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Backdrop from "../backdrop";
+import { withTranslation } from 'react-i18next';
+import i18n from './i18n';
+import { connect } from "react-redux";
 
 import Article from "./sub-components/article";
 import ArticleHeader from "./sub-components/article-header";
@@ -14,7 +17,7 @@ import SectionBody from "./sub-components/section-body";
 import SectionPaging from "./sub-components/section-paging";
 import SectionToggler from "./sub-components/section-toggler";
 
-class PageLayout extends React.PureComponent {
+class PageLayoutComponent extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = this.mapPropsToState(props);
@@ -141,9 +144,9 @@ class PageLayout extends React.PureComponent {
             {this.state.isArticleBodyAvailable && (
               <ArticlePinPanel
                 pinned={this.state.isArticlePinned}
-                pinText="Pin this panel"
+                pinText={this.props.t('PinPanel')}
                 onPin={this.pinArticle}
-                unpinText="Unpin this panel"
+                unpinText={this.props.t('UnpinPanel')}
                 onUnpin={this.unpinArticle}
               />
             )}
@@ -180,7 +183,19 @@ class PageLayout extends React.PureComponent {
   }
 }
 
-PageLayout.propTypes = {
+const PageLayoutTranslated = withTranslation()(PageLayoutComponent);
+const Pagelayout = props => {
+  const { language } = props;
+  i18n.changeLanguage(language);
+
+  return <PageLayoutTranslated i18n={i18n} {...props} />
+}
+
+Pagelayout.propTypes = {
+  language:PropTypes.string,
+}
+
+PageLayoutComponent.propTypes = {
   isBackdropVisible: PropTypes.bool,
   isArticleVisible: PropTypes.bool,
   isArticlePinned: PropTypes.bool,
@@ -214,14 +229,24 @@ PageLayout.propTypes = {
     PropTypes.node
   ]),
 
-  withBodyScroll: PropTypes.bool
+  withBodyScroll: PropTypes.bool,
+  t: PropTypes.func,
 };
 
-PageLayout.defaultProps = {
+PageLayoutComponent.defaultProps = {
   isBackdropVisible: false,
   isArticleVisible: false,
   isArticlePinned: false,
   withBodyScroll: true
 };
 
-export default PageLayout;
+function mapStateToProps(state) {
+  return {
+    language:
+      state.auth &&
+      ((state.auth.user && state.auth.user.cultureName) ||
+        (state.auth.settings && state.auth.settings.culture))
+  };
+}
+
+export default connect(mapStateToProps)(Pagelayout);

web/ASC.Web.Components/src/components/page-layout/locales/en/translation.json

@@ -0,0 +1,4 @@
+{
+    "PinPanel": "Pin this panel",
+    "UnpinPanel": "Unpin this panel"
+}

web/ASC.Web.Components/src/components/page-layout/locales/ru/translation.json

@@ -0,0 +1,4 @@
+{
+  "PinPanel": "Закрепить панель",
+  "UnpinPanel": "Открепить панель"
+}

web/ASC.Web.Components/src/components/page-layout/sub-components/article-pin-panel.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 import { tablet, mobile } from "../../../utils/device";
 import { Icons } from "../../icons";
+import Text from '../../text';
 
 const StyledArticlePinPanel = styled.div`
   border-top: 1px solid #eceef1;
@@ -40,12 +41,12 @@ const ArticlePinPanel = React.memo(props => {
       {pinned ? (
         <div onClick={onUnpin}>
           <Icons.CatalogUnpinIcon size="medium" />
-          <span>{unpinText}</span>
+          <Text as='span'>{unpinText}</Text>
         </div>
       ) : (
         <div onClick={onPin}>
           <Icons.CatalogPinIcon size="medium" />
-          <span>{pinText}</span>
+          <Text as='span'>{pinText}</Text>
         </div>
       )}
     </StyledArticlePinPanel>

web/ASC.Web.Components/yarn.lock

@@ -1630,6 +1630,13 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/runtime@^7.3.1":
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.7.tgz#194769ca8d6d7790ec23605af9ee3e42a0aa79cf"
+  integrity sha512-uCnC2JEVAu8AKB5do1WRIsvrdJ0flYx/A/9f/6chdacnEZ7LmavjdsDXr5ksYBegxtuTPR5Va9/+13QF/kFkCA==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/runtime@^7.6.0", "@babel/runtime@^7.6.2":
   version "7.7.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.6.tgz#d18c511121aff1b4f2cd1d452f1bac9601dd830f"
@@ -6921,6 +6928,13 @@ html-minifier@^4.0.0:
     relateurl "^0.2.7"
     uglify-js "^3.5.1"
 
+html-parse-stringify2@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz#dc5670b7292ca158b7bc916c9a6735ac8872834a"
+  integrity sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=
+  dependencies:
+    void-elements "^2.0.1"
+
 html-to-react@^1.4.2:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/html-to-react/-/html-to-react-1.4.2.tgz#7b628ab56cd63a52f2d0b79d0fa838a51f088a57"
@@ -7006,6 +7020,13 @@ https-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
+i18next@^19.0.2:
+  version "19.0.2"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.0.2.tgz#d72502ef031403572703f2e9f013cae005265444"
+  integrity sha512-fBa43Ann2udP1CQAz3IQpOZ1dGAkmi3mMfzisOhH17igneSRbvZ7P2RNbL+L1iRYKMufBmVwnC7G3gqcyviZ9g==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+
 iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -10635,6 +10656,14 @@ react-hotkeys@2.0.0-pre4:
   dependencies:
     prop-types "^15.6.1"
 
+react-i18next@^11.2.7:
+  version "11.2.7"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.2.7.tgz#d0dd61ae6127589e316c6293fc948fe413c63580"
+  integrity sha512-BBm6/ch6jgvpIBwyitNd0G7Z49+wNeyJ6x0rZFcXX6NPrla2GuDGH+oKSjmYRg8IqtL6aG9CwWb06YJCrXbk6w==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    html-parse-stringify2 "2.0.1"
+
 react-input-autosize@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2"
@@ -10681,7 +10710,7 @@ react-popper@^1.3.4:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
-react-redux@^7.0.2:
+react-redux@^7.0.2, react-redux@^7.1.3:
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.1.3.tgz#717a3d7bbe3a1b2d535c94885ce04cdc5a33fc79"
   integrity sha512-uI1wca+ECG9RoVkWQFF4jDMqmaw0/qnvaSvOoL/GA4dNxf6LoV8sUAcNDvE5NWKs4hFpn0t6wswNQnY3f7HT3w==
@@ -12862,6 +12891,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+void-elements@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
+  integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
+
 vuex@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.1.tgz#0c264bfe30cdbccf96ab9db3177d211828a5910e"