feat: support custom scroll container (#30)

* feat: support custom scroll container

* feat: refactor all

* feat: refactor all

* fix: case sensitive scroll from main

* fix: rebase

* fix: typo

Author: Raubzeug

package.json

@@ -11,10 +11,15 @@
   "module": "build/esm/index.js",
   "types": "types/src/index.d.ts",
   "exports": {
-    ".": {
-      "types": "./types/src/index.d.ts",
-      "require": "./build/cjs/index.js",
-      "import": "./build/esm/index.js"
+    "./window-scroll": {
+      "types": "./types/src/window-scroll.d.ts",
+      "require": "./build/cjs/window-scroll.js",
+      "import": "./build/esm/window-scroll.js"
+    },
+    "./container-scroll": {
+      "types": "./types/src/container-scroll.d.ts",
+      "require": "./build/cjs/container-scroll.js",
+      "import": "./build/esm/container-scroll.js"
     }
   },
   "files": [

src/ReactUnipika/ReactUnipika.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+
+// @ts-expect-error
+import unipika from '@gravity-ui/unipika/lib/unipika';
+
+import {cn} from '../utils/classname';
+import {ReactUnipikaCommonProps} from './types';
+import {UnipikaSettings} from '../StructuredYson/types';
+import {defaultUnipikaSettings} from './constants';
+
+const block = cn('g-ru-react-unipika');
+
+interface ConvertedValue {
+    convertedValue?: any;
+    error?: any;
+}
+
+function convertValue(value: any, settings: UnipikaSettings): ConvertedValue {
+    try {
+        // TODO: fix me later
+        // The call is required because unipika.format() applies default values to a passed settings inplace.
+        // We have to leave this call without it the behaviour will be broken.
+        if (settings.format === 'raw-json') {
+            unipika.formatRaw(value, settings);
+        } else {
+            unipika.formatFromYSON(value, settings);
+        }
+
+        if (value === undefined) {
+            return {convertedValue: ''};
+        }
+
+        if (settings.format === 'raw-json') {
+            return {convertedValue: unipika.converters.raw(value, settings)};
+        }
+
+        return {convertedValue: unipika.converters.yson(value, settings)};
+    } catch (error) {
+        return {error};
+    }
+}
+
+interface WithReactUnipikaBaseProps<P extends ReactUnipikaCommonProps> {
+    renderVirtualized: (props: P, convertedValue: any) => React.ReactNode;
+}
+
+export function withReactUnipikaBase<P extends ReactUnipikaCommonProps>(
+    config: WithReactUnipikaBaseProps<P>,
+) {
+    return function ReactUnipikaBaseComponent(props: P) {
+        const {
+            value,
+            settings = defaultUnipikaSettings,
+            inline = false,
+            children,
+            virtualized = true,
+            className,
+            renderError,
+        } = props;
+
+        const {convertedValue, error} = React.useMemo(
+            () => convertValue(value, settings),
+            [value, settings],
+        );
+
+        const getFormattedTitle = React.useCallback(() => {
+            if (!inline) {
+                return undefined;
+            }
+
+            const titleSettings = Object.assign({}, settings, {asHTML: false});
+            return unipika.format(convertedValue, titleSettings);
+        }, [inline, settings, convertedValue]);
+
+        const getFormattedValue = React.useCallback(() => {
+            return unipika.format(convertedValue, settings);
+        }, [convertedValue, settings]);
+
+        const classes = block(
+            {
+                inline: inline && 'yes',
+            },
+            className,
+        );
+
+        if (error) {
+            return renderError?.(error);
+        }
+
+        return settings.asHTML ? (
+            <div className={classes} title={getFormattedTitle()} dir="auto">
+                {virtualized ? (
+                    config.renderVirtualized(props, convertedValue)
+                ) : (
+                    <pre
+                        className="unipika"
+                        dangerouslySetInnerHTML={{
+                            __html: getFormattedValue(),
+                        }}
+                    />
+                )}
+                {children}
+            </div>
+        ) : (
+            <div
+                className={classes}
+                title={getFormattedTitle()}
+                dangerouslySetInnerHTML={{
+                    __html: getFormattedValue(),
+                }}
+                dir="auto"
+            >
+                {children}
+            </div>
+        );
+    };
+}

src/ReactUnipika/ReactUnipikaBase.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import {StructuredYsonContainerScroll} from '../StructuredYson/StructuredYsonContainerScroll';
+import {withReactUnipikaBase} from './ReactUnipikaBase';
+import {ReactUnipikaWithScrollContainer} from './types';
+import {defaultUnipikaSettings} from './constants';
+
+export const ReactUnipikaContainerScroll = withReactUnipikaBase<ReactUnipikaWithScrollContainer>({
+    renderVirtualized: (props, convertedValue) => {
+        const {
+            settings = defaultUnipikaSettings,
+            extraTools,
+            customLayout,
+            toolbarStickyTop,
+            renderToolbar,
+            collapseIconType,
+            showContainerSize,
+            initiallyCollapsed,
+            caseInsensitiveSearch,
+            scrollContainerRef,
+        } = props;
+
+        return (
+            <StructuredYsonContainerScroll
+                value={convertedValue}
+                settings={settings}
+                extraTools={extraTools}
+                customLayout={customLayout}
+                toolbarStickyTop={toolbarStickyTop}
+                renderToolbar={renderToolbar}
+                collapseIconType={collapseIconType}
+                showContainerSize={showContainerSize}
+                initiallyCollapsed={initiallyCollapsed}
+                caseInsensitiveSearch={caseInsensitiveSearch}
+                scrollContainerRef={scrollContainerRef}
+            />
+        );
+    },
+});

src/ReactUnipika/ReactUnipikaContainerScroll.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import {StructuredYsonWindowScroll} from '../StructuredYson/StructuredYsonWindowScroll';
+import {withReactUnipikaBase} from './ReactUnipikaBase';
+import {ReactUnipikaCommonProps} from './types';
+import {defaultUnipikaSettings} from './constants';
+
+export const ReactUnipikaWindowScroll = withReactUnipikaBase<ReactUnipikaCommonProps>({
+    renderVirtualized: (props, convertedValue) => {
+        const {
+            settings = defaultUnipikaSettings,
+            extraTools,
+            customLayout,
+            toolbarStickyTop,
+            renderToolbar,
+            collapseIconType,
+            showContainerSize,
+            initiallyCollapsed,
+            caseInsensitiveSearch,
+        } = props;
+
+        return (
+            <StructuredYsonWindowScroll
+                value={convertedValue}
+                settings={settings}
+                extraTools={extraTools}
+                customLayout={customLayout}
+                toolbarStickyTop={toolbarStickyTop}
+                renderToolbar={renderToolbar}
+                collapseIconType={collapseIconType}
+                showContainerSize={showContainerSize}
+                initiallyCollapsed={initiallyCollapsed}
+                caseInsensitiveSearch={caseInsensitiveSearch}
+            />
+        );
+    },
+});