@@ -229,9 +200,23 @@ const SettingsControl = (props: ControlInnerProps) => {
);
}}
/>
-
-
+ }
+ >
+
+
);
};
-export default withTranslation('controls')(SettingsControl);
+export default SettingsControl;
diff --git a/src/components/Controls/single-controls/SinglePageControl.tsx b/src/components/Controls/single-controls/SinglePageControl.tsx
index bed7cd43..80c36b8c 100644
--- a/src/components/Controls/single-controls/SinglePageControl.tsx
+++ b/src/components/Controls/single-controls/SinglePageControl.tsx
@@ -1,58 +1,45 @@
-import React, {useCallback, useEffect} from 'react';
-import {WithTranslation, withTranslation, WithTranslationProps} from 'react-i18next';
-import {Icon as IconComponent} from '@gravity-ui/uikit';
+import React, {memo, useCallback, useContext} from 'react';
-import {Control} from '../../Control';
-import {ControlSizes, Lang} from '../../../models';
-import {PopperPosition} from '../../../hooks';
+import {ChevronsCollapseToLine, ChevronsExpandToLines} from '@gravity-ui/icons';
+import block from 'bem-cn-lite';
-import SinglePageIcon from '../../../../assets/icons/single-page.svg';
-import SinglePageClickedIcon from '../../../../assets/icons/single-page-clicked.svg';
+import {useTranslation} from '../../../hooks';
+import {Control} from '../../Control';
+import {ControlsLayoutContext} from '../ControlsLayout';
interface ControlProps {
- lang: Lang;
value?: boolean;
- onChange?: (value: boolean) => void;
- isVerticalView?: boolean;
- className?: string;
- size?: ControlSizes;
- popupPosition?: PopperPosition;
+ onChange: (value: boolean) => void;
}
-type ControlInnerProps = ControlProps & WithTranslation & WithTranslationProps;
+const b = block('dc-controls');
-const SinglePageControl = (props: ControlInnerProps) => {
- const {className, isVerticalView, size, value, onChange, lang, i18n, popupPosition, t} = props;
+const SinglePageControl = memo
((props) => {
+ const {t} = useTranslation('controls');
+ const {controlClassName, controlSize, isVerticalView, popupPosition} =
+ useContext(ControlsLayoutContext);
+ const {value, onChange} = props;
const onClick = useCallback(() => {
- if (onChange) {
- onChange(!value);
- }
+ onChange(!value);
}, [value, onChange]);
- useEffect(() => {
- i18n.changeLanguage(lang);
- }, [i18n, lang]);
-
const activeMode = value ? 'enabled' : 'disabled';
-
- if (!onChange) {
- return null;
- }
+ const Icon = value ? ChevronsExpandToLines : ChevronsCollapseToLine;
return (
(
-
- )}
+ icon={(args) => }
popupPosition={popupPosition}
/>
);
-};
+});
+
+SinglePageControl.displayName = 'SinglePageControl';
-export default withTranslation('controls')(SinglePageControl);
+export default SinglePageControl;
diff --git a/src/components/Controls/single-controls/index.ts b/src/components/Controls/single-controls/index.ts
index b0c435a8..e3211962 100644
--- a/src/components/Controls/single-controls/index.ts
+++ b/src/components/Controls/single-controls/index.ts
@@ -4,3 +4,4 @@ export {default as SinglePageControl} from './SinglePageControl';
export {default as LangControl} from './LangControl';
export {default as DividerControl} from './DividerControl/DividerControl';
export {default as PdfControl} from './PdfControl';
+export {default as EditControl} from './EditControl';
diff --git a/src/components/DocLayout/DocLayout.scss b/src/components/DocLayout/DocLayout.scss
index 19b78135..866dcc9b 100644
--- a/src/components/DocLayout/DocLayout.scss
+++ b/src/components/DocLayout/DocLayout.scss
@@ -1,12 +1,12 @@
-@import '../../../styles/variables';
-@import '../../../styles/mixins';
+@import '../../styles/variables';
+@import '../../styles/mixins';
.dc-doc-layout {
display: flex;
align-items: center;
margin: 0 auto;
height: 100%;
- background: var(--yc-color-base-background);
+ background: var(--g-color-base-background);
@media (max-width: map-get($screenBreakpoints, 'md') - 1) {
align-items: normal;
@@ -61,7 +61,7 @@
top: var(--dc-header-height, #{$headerHeight});
padding-left: 24px;
width: 252px;
- background-color: var(--yc-color-base-background);
+ background-color: var(--g-color-base-background);
@include text-size(body-1);
}
diff --git a/src/components/DocLayout/DocLayout.tsx b/src/components/DocLayout/DocLayout.tsx
index 8516557e..6e8bbc70 100644
--- a/src/components/DocLayout/DocLayout.tsx
+++ b/src/components/DocLayout/DocLayout.tsx
@@ -1,7 +1,8 @@
-import React, {ReactElement} from 'react';
+import React, {PropsWithChildren, ReactElement} from 'react';
+
import block from 'bem-cn-lite';
-import {TocData, Router, Lang} from '../../models';
+import {Router, TocData} from '../../models';
import {getStateKey} from '../../utils';
import {Toc} from '../Toc';
@@ -9,14 +10,13 @@ import './DocLayout.scss';
const b = block('dc-doc-layout');
-const Left: React.FC = () => null;
-const Center: React.FC = () => null;
-const Right: React.FC = () => null;
+const Left: React.FC = () => null;
+const Center: React.FC = () => null;
+const Right: React.FC = () => null;
export interface DocLayoutProps {
toc: TocData;
router: Router;
- lang: Lang;
children: (ReactElement | null)[] | ReactElement;
fullScreen?: boolean;
hideRight?: boolean;
@@ -103,7 +103,6 @@ export class DocLayout extends React.Component {
wideFormat,
hideTocHeader,
hideToc,
- lang,
singlePage,
onChangeSinglePage,
pdfLink,
@@ -123,7 +122,6 @@ export class DocLayout extends React.Component {
headerHeight={headerHeight}
tocTitleIcon={tocTitleIcon}
hideTocHeader={hideTocHeader}
- lang={lang}
singlePage={singlePage}
onChangeSinglePage={onChangeSinglePage}
pdfLink={pdfLink}
diff --git a/src/components/DocLeadingPage/DocLeadingPage.scss b/src/components/DocLeadingPage/DocLeadingPage.scss
index f86be419..08293250 100644
--- a/src/components/DocLeadingPage/DocLeadingPage.scss
+++ b/src/components/DocLeadingPage/DocLeadingPage.scss
@@ -1,5 +1,5 @@
-@import '../../../styles/variables';
-@import '../../../styles/mixins';
+@import '../../styles/variables';
+@import '../../styles/mixins';
.dc-doc-leading-page {
display: flex;
@@ -58,7 +58,7 @@
width: calc(50% - 20px);
padding-bottom: 40px;
margin-bottom: $blockMarginBottomLarge;
- border-bottom: 1px solid var(--yc-color-line-generic);
+ border-bottom: 1px solid var(--g-color-line-generic);
}
}
diff --git a/src/components/DocLeadingPage/DocLeadingPage.tsx b/src/components/DocLeadingPage/DocLeadingPage.tsx
index e32604de..786bd58e 100644
--- a/src/components/DocLeadingPage/DocLeadingPage.tsx
+++ b/src/components/DocLeadingPage/DocLeadingPage.tsx
@@ -1,13 +1,13 @@
import React from 'react';
+
import block from 'bem-cn-lite';
-import {DocLeadingPageData, DocLeadingLinks, Router, Lang} from '../../models';
+import {DEFAULT_SETTINGS} from '../../constants';
+import {DocLeadingLinks, DocLeadingPageData, Router} from '../../models';
import {DocLayout} from '../DocLayout';
import {DocPageTitle} from '../DocPageTitle';
-import {Text} from '../Text';
import {HTML} from '../HTML';
-
-import {DEFAULT_SETTINGS} from '../../constants';
+import {Text} from '../Text';
import './DocLeadingPage.scss';
@@ -17,7 +17,6 @@ const {wideFormat: defaultWideFormat} = DEFAULT_SETTINGS;
export interface DocLeadingPageProps extends DocLeadingPageData {
router: Router;
- lang: Lang;
headerHeight?: number;
wideFormat?: boolean;
hideTocHeader?: boolean;
@@ -106,7 +105,6 @@ export const DocLeadingPage: React.FC = ({
data: {title, description, links},
toc,
router,
- lang,
headerHeight,
wideFormat = defaultWideFormat,
hideTocHeader,
@@ -122,7 +120,6 @@ export const DocLeadingPage: React.FC = ({
{
const {
toc,
router,
- lang,
headerHeight,
wideFormat,
fullScreen,
@@ -157,7 +145,6 @@ class DocPage extends React.Component {
{
{this.renderTocNavPanel()}
{this.renderLoader()}
+ {this.renderSinglePageControls()}