web.components: PageLayout: added translations, applied Text component, added new packages
This commit is contained in:
parent
c16cd68f8f
commit
09be019952
@ -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",
|
||||
|
31
web/ASC.Web.Components/src/components/page-layout/i18n.js
Normal file
31
web/ASC.Web.Components/src/components/page-layout/i18n.js
Normal file
@ -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;
|
@ -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);
|
||||
|
@ -0,0 +1,4 @@
|
||||
{
|
||||
"PinPanel": "Pin this panel",
|
||||
"UnpinPanel": "Unpin this panel"
|
||||
}
|
@ -0,0 +1,4 @@
|
||||
{
|
||||
"PinPanel": "Закрепить панель",
|
||||
"UnpinPanel": "Открепить панель"
|
||||
}
|
@ -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>
|
||||
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user