fix: add settings context to add a tag for pagination (#47)

* fix: add settings context to add <a> tag in paginationItem

* fix: add settings context to add <a> tag in paginationItem

* fix: add settings context to add <a> tag in paginationItem

* add readme about SettingsContext and change <> to <Fragment>

src/components/Paginator/Paginator.scss

@@ -15,7 +15,6 @@ $itemDimensions: 44px;
 
     &__link {
         text-decoration: none;
-        pointer-events: none;
         color: var(--yc-color-text-primary);
     }
 

src/components/Paginator/components/PaginatorItem.tsx

@@ -1,8 +1,9 @@
-import React, {useContext} from 'react';
+import React, {Fragment, useContext} from 'react';
 
 import {Button} from '@gravity-ui/uikit';
 
 import {LocaleContext} from '../../../contexts/LocaleContext';
+import {SettingsContext} from '../../../contexts/SettingsContext';
 import {block} from '../../../utils/cn';
 import {getBlogPath} from '../../../utils/common';
 import {ArrowType, PaginatorItemProps} from '../types';
@@ -20,27 +21,38 @@ export const PaginatorItem = ({
     index,
 }: PaginatorItemProps) => {
     const {locale} = useContext(LocaleContext);
+    const {addNavigationLinkForPages} = useContext(SettingsContext);
     const urlPath = getBlogPath(locale?.pathPrefix || '');
 
     const itemKey = Number(dataKey) > 0 ? Number(dataKey) : (dataKey as ArrowType);
     const navTag = index > 1 ? `?page=${index}` : '';
     const navigationLink = `${urlPath || ''}${navTag}`;
 
-    return (
+    const renderButton = (
         <Button
             view="flat"
             size="xl"
             className={b('item', mods)}
             onClick={() => onClick?.(itemKey)}
             loading={loading && Boolean(mods.active)}
         >
-            <a
-                href={navigationLink}
-                className={b('link')}
-                onClick={(event) => event.preventDefault()}
-            >
-                {content}
-            </a>
+            {content}
         </Button>
     );
+
+    return (
+        <Fragment>
+            {addNavigationLinkForPages ? (
+                <a
+                    href={navigationLink}
+                    className={b('link')}
+                    onClick={(event) => event.preventDefault()}
+                >
+                    {renderButton}
+                </a>
+            ) : (
+                <Fragment>{renderButton}</Fragment>
+            )}
+        </Fragment>
+    );
 };

src/constructor/BlogConstructorProvider.tsx

@@ -7,6 +7,7 @@ import {DeviceContext, DeviceContextProps} from '../contexts/DeviceContext';
 import {LocaleContext} from '../contexts/LocaleContext';
 import {MobileContext} from '../contexts/MobileContext';
 import {RouterContext, RouterContextProps} from '../contexts/RouterContext';
+import {SettingsContext, SettingsContextProps} from '../contexts/SettingsContext';
 import {ThemeValueContext, ThemeValueType} from '../contexts/theme/ThemeValueContext';
 import {Locale} from '../models/locale';
 
@@ -17,6 +18,7 @@ export interface BlogConstructorProviderProps {
     theme?: ThemeValueType;
     device?: DeviceContextProps;
     analytics?: AnalyticsContextProps;
+    settings?: SettingsContextProps;
     children?: React.ReactNode;
 }
 
@@ -27,6 +29,7 @@ export const BlogConstructorProvider: React.FC<BlogConstructorProviderProps> = (
     theme = DEFAULT_THEME,
     device = {},
     analytics = {},
+    settings = {},
     children,
 }) => {
     const context = [
@@ -35,6 +38,7 @@ export const BlogConstructorProvider: React.FC<BlogConstructorProviderProps> = (
         <RouterContext.Provider value={router} key="router-context" />,
         <MobileContext.Provider value={Boolean(isMobile)} key="is-mobile-context" />,
         <DeviceContext.Provider value={device} key="device-context" />,
+        <SettingsContext.Provider value={settings} key="settings-context" />,
         <AnalyticsContext.Provider value={analytics} key="analytics-context" />,
     ].reduceRight((prev, provider) => React.cloneElement(provider, {}, prev), children);
 

src/constructor/README.md

@@ -10,6 +10,7 @@ interface BlogConstructorProviderProps {
   theme?: ThemeValueType;
   device?: DeviceContextProps;
   analytics?: AnalyticsContextProps;
+  settings?: SettingsContextProps;
   children?: React.ReactNode;
 }
 ```
@@ -77,4 +78,14 @@ interface AnalyticsContextProps {
 
 **!!! Important thing** - We throw analytics settings in blog constructor provide, if we need analytics from only-blog components. If we need analytics in page-constructor blocks we need to throw analytics settings in [page settings props](../containers/BlogPage/README.md)
 
+### `Settings` - blog settings
+
+```jsx
+interface SettingsContextProps {
+  addNavigationLinkForPages?: boolean;
+}
+```
+
+**!!! Most important thing** - `addNavigationLinkForPages` is option to cover pagination buttons with a `<a>` tag and add a `href` link for page navigation
+
 ### `Children` - children react component

src/contexts/SettingsContext.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export interface SettingsContextProps {
+    addNavigationLinkForPages?: boolean;
+}
+
+export const SettingsContext = React.createContext<SettingsContextProps>({});