ydb-embedded-ui 3.1.0 → 3.2.1

package/dist/components/AsideNavigation/Settings/SettingsMenu/SettingsMenu.tsx

@@ -1,141 +0,0 @@
-import React from 'react';
-import block from 'bem-cn-lite';
-
-import {Icon, IconProps, Link} from '@gravity-ui/uikit';
-
-import {useCurrent, useStableCallback} from '../helpers';
-
-import './SettingsMenu.scss';
-
-const b = block('nv-settings-menu');
-
-interface GroupItem {
-    groupTitle: string;
-    items: Item[];
-}
-
-interface Item {
-    id: string;
-    title: string;
-    icon?: IconProps;
-    disabled?: boolean;
-    withBadge?: boolean;
-}
-
-export type SettingsMenuItems = (GroupItem | Item)[];
-
-interface SettingsMenuProps {
-    items: SettingsMenuItems;
-    onChange: (id: string) => void;
-    activeItem?: string;
-    focusItem?: string;
-}
-
-export interface SettingsMenuInstance {
-    handleKeyDown(event: React.KeyboardEvent): boolean;
-    clearFocus(): void;
-}
-
-export const SettingsMenu = React.forwardRef<SettingsMenuInstance, SettingsMenuProps>(
-    function SettingsMenu({items, onChange, activeItem}, ref) {
-        const [focusItem, setFocus] = React.useState<string>();
-        const containerRef = React.useRef<HTMLDivElement>(null);
-        const handleChange = useStableCallback(onChange);
-        const getFocused = useCurrent(focusItem);
-
-        React.useImperativeHandle(
-            ref,
-            () => ({
-                handleKeyDown(event) {
-                    if (!containerRef.current) {
-                        return false;
-                    }
-                    const focused = getFocused();
-                    if (focused && event.key === 'Enter') {
-                        handleChange(focused);
-                        return true;
-                    } else if (event.key === 'ArrowDown') {
-                        setFocus(focusNext(containerRef.current, focused, 1));
-                        return true;
-                    } else if (event.key === 'ArrowUp') {
-                        setFocus(focusNext(containerRef.current, focused, -1));
-                        return true;
-                    }
-                    return false;
-                },
-                clearFocus() {
-                    setFocus(undefined);
-                },
-            }),
-            [getFocused, handleChange],
-        );
-
-        return (
-            <div ref={containerRef} className={b()}>
-                {items.map((firstLevelItem) => {
-                    if ('groupTitle' in firstLevelItem) {
-                        return (
-                            <div key={firstLevelItem.groupTitle} className={b('group')}>
-                                <span className={b('group-heading')}>
-                                    {firstLevelItem.groupTitle}
-                                </span>
-                                {firstLevelItem.items.map((item) => {
-                                    return renderMenuItem(item, onChange, activeItem, focusItem);
-                                })}
-                            </div>
-                        );
-                    }
-                    return renderMenuItem(firstLevelItem, onChange, activeItem, focusItem);
-                })}
-            </div>
-        );
-    },
-);
-
-function renderMenuItem(
-    item: Item,
-    onChange: (id: string) => void,
-    activeItem: string | undefined,
-    focusItem: string | undefined,
-) {
-    return (
-        <Link
-            key={item.title}
-            // @ts-ignore
-            extraProps={{'data-id': item.id, tabIndex: -1, disabled: item.disabled}}
-            className={b('item', {
-                selected: activeItem === item.id,
-                disabled: item.disabled,
-                focused: focusItem === item.id,
-                badge: item.withBadge,
-            })}
-            iconLeft={
-                item.icon ? <Icon size={16} {...item.icon} className={b('item-icon')} /> : undefined
-            }
-            onClick={() => {
-                onChange(item.id);
-            }}
-        >
-            {item.icon ? <Icon size={16} {...item.icon} className={b('item-icon')} /> : undefined}
-            <span>{item.title}</span>
-        </Link>
-    );
-}
-
-function focusNext(container: HTMLElement, focused: string | undefined, direction: number) {
-    const elements = container.querySelectorAll(`.${b('item')}:not(.${b('item')}_disabled)`);
-    if (elements.length === 0) {
-        return undefined;
-    }
-
-    let currentIndex = direction > 0 ? -1 : 0;
-    if (focused) {
-        currentIndex = Array.prototype.findIndex.call(
-            elements,
-            (element) => element.getAttribute('data-id') === focused,
-        );
-    }
-
-    currentIndex = (elements.length + currentIndex + direction) % elements.length;
-    return elements[currentIndex].getAttribute('data-id') ?? undefined;
-}

package/dist/components/AsideNavigation/Settings/SettingsSearch/SettingsSearch.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import block from 'bem-cn-lite';
-import {TextInput} from '@gravity-ui/uikit';
-
-import i18n from '../i18n';
-
-const b = block('nv-settings-search');
-
-interface SettingsSearchProps {
-    className?: string;
-    onChange: (search: string) => void;
-    debounce?: number;
-    inputRef?: React.Ref<HTMLInputElement>;
-}
-
-export function SettingsSearch({
-    className,
-    onChange,
-    debounce = 200,
-    inputRef,
-}: SettingsSearchProps) {
-    const [search, setSearch] = React.useState<string>();
-    const onChangeRef = React.useRef(onChange);
-    onChangeRef.current = onChange;
-    const debounceRef = React.useRef(debounce);
-    debounceRef.current = debounce;
-
-    React.useEffect(() => {
-        let timerId: number;
-        if (search !== undefined) {
-            timerId = window.setTimeout(() => {
-                onChangeRef.current(search);
-            }, debounceRef.current);
-        }
-        return () => {
-            clearTimeout(timerId);
-        };
-    }, [search]);
-    return (
-        <div className={b(null, className)}>
-            <TextInput
-                controlRef={(node) => {
-                    if (typeof inputRef === 'function') {
-                        inputRef(node as HTMLInputElement);
-                    } else if (inputRef) {
-                        (inputRef.current as HTMLInputElement) = node as HTMLInputElement;
-                    }
-                }}
-                hasClear
-                autoFocus
-                placeholder={i18n('placeholder_search')}
-                value={search}
-                onUpdate={setSearch}
-            />
-        </div>
-    );
-}

package/dist/components/AsideNavigation/Settings/collect-settings.ts

@@ -1,156 +0,0 @@
-import React from 'react';
-import {IconProps} from '@gravity-ui/uikit';
-import {invariant} from './helpers';
-
-type SettingsMenu = (SettingsMenuGroup | SettingsMenuItem)[];
-
-interface SettingsMenuGroup {
-    groupTitle: string;
-    items: SettingsMenuItem[];
-}
-
-interface SettingsMenuItem {
-    title: string;
-    icon?: IconProps;
-    pageId: string;
-    withBadge?: boolean;
-}
-
-export interface SettingsPage {
-    sections: SettingsPageSection[];
-    hide?: boolean;
-    withBadge?: boolean;
-}
-
-interface SettingsPageSection {
-    title: string;
-    header?: React.ReactNode;
-    items: SettingsItem[];
-    hide?: boolean;
-    withBadge?: boolean;
-}
-
-interface SettingsItem {
-    title: string;
-    children: React.ReactNode;
-    hide?: boolean;
-    titleComponent?: React.ReactNode;
-    renderTitleComponent?: (highlightedTitle: React.ReactNode | null) => React.ReactNode;
-}
-
-export function getSettingsFromChildren(
-    children: React.ReactNode,
-    basepath = '',
-): {menu: SettingsMenu; pages: Record<string, SettingsPage>} {
-    const menu: SettingsMenu = [];
-    const pages: Record<string, SettingsPage> = {};
-    let hasGroup = false;
-    let hasItems = false;
-    React.Children.forEach(children, (element) => {
-        if (!React.isValidElement(element)) {
-            // Ignore non-elements.
-            return;
-        }
-        if (element.type === React.Fragment) {
-            // Transparently support React.Fragment and its children.
-            const {menu: menuFragment, pages: pagesFragment} = getSettingsFromChildren(
-                element.props.children,
-                basepath,
-            );
-            menu.push(...menuFragment);
-            Object.assign(pages, pagesFragment);
-        } else if (element.props.groupTitle) {
-            if (process.env.NODE_ENV === 'development') {
-                invariant(!hasItems, 'Setting menu must not mix groups and pages on one level');
-            }
-
-            const pageId = `${basepath}/${element.props.id ?? element.props.groupTitle}`;
-            hasGroup = true;
-
-            const {menu: menuFragment, pages: pagesFragment} = getSettingsFromChildren(
-                element.props.children,
-                pageId,
-            );
-
-            if (process.env.NODE_ENV === 'development') {
-                const hasInnerGroup = menuFragment.some((item) => 'groupTitle' in item);
-                invariant(
-                    !hasInnerGroup,
-                    `Group ${element.props.groupTitle} should not include groups`,
-                );
-            }
-
-            menu.push({
-                groupTitle: element.props.groupTitle,
-                // @ts-ignore
-                items: menuFragment,
-            });
-            Object.assign(pages, pagesFragment);
-        } else {
-            hasItems = true;
-            const pageId = `${basepath}/${element.props.id ?? element.props.title}`;
-
-            if (process.env.NODE_ENV === 'development') {
-                invariant(Boolean(element.props.title), 'Component must include title prop');
-                invariant(!hasGroup, 'Setting menu must not mix groups and pages on one level');
-                invariant(!pages[pageId], `Setting menu page id must be uniq (${pageId})`);
-            }
-
-            pages[pageId] = getSettingsPageFromChildren(element.props.children);
-            menu.push({
-                pageId,
-                title: element.props.title,
-                icon: element.props.icon,
-                withBadge: pages[pageId].withBadge,
-            });
-        }
-    });
-    return {menu, pages};
-}
-
-function getSettingsPageFromChildren(children: React.ReactNode): SettingsPage {
-    const page: SettingsPage = {sections: []};
-    React.Children.forEach(children, (element) => {
-        if (!React.isValidElement(element)) {
-            // Ignore non-elements.
-            return;
-        }
-        if (element.type === React.Fragment) {
-            // Transparently support React.Fragment and its children.
-            const {sections, withBadge} = getSettingsPageFromChildren(element.props.children);
-            page.sections.push(...sections);
-            page.withBadge = withBadge || page.withBadge;
-        } else {
-            const {title, header} = element.props;
-            page.withBadge = element.props.withBadge || page.withBadge;
-            page.sections.push({
-                title,
-                header,
-                withBadge: element.props.withBadge,
-                items: getSettingsItemsFromChildren(element.props.children),
-            });
-        }
-    });
-    return page;
-}
-
-function getSettingsItemsFromChildren(children: React.ReactNode): SettingsItem[] {
-    const items: SettingsItem[] = [];
-    React.Children.forEach(children, (element) => {
-        if (!React.isValidElement(element)) {
-            // Ignore non-elements.
-            return;
-        }
-        if (element.type === React.Fragment) {
-            // Transparently support React.Fragment and its children.
-            items.push(...getSettingsItemsFromChildren(element.props.children));
-        } else {
-            items.push({
-                title: element.props.title,
-                renderTitleComponent: element.props.renderTitleComponent,
-                children: element,
-            });
-        }
-    });
-    return items;
-}

package/dist/components/AsideNavigation/Settings/filter-settings.ts

@@ -1,38 +0,0 @@
-import React from 'react';
-import {escapeStringForRegExp} from './helpers';
-import {SettingsPage} from './collect-settings';
-
-function identity(x: any) {
-    return x;
-}
-
-export function filterSettings(
-    pages: Record<string, SettingsPage>,
-    search = '',
-    wrapFoundTitle: (title: string, search: string) => React.ReactNode = identity,
-) {
-    // 'abc def fg' -> abc.*?cde.*?fg
-    const preparedFilter = escapeStringForRegExp(search).replace(/\s+/g, '.*?');
-    const filterRe = new RegExp(preparedFilter, 'i');
-    for (const page of Object.values(pages)) {
-        let hidePage = true;
-        for (const section of page.sections) {
-            let hideSection = true;
-            for (const item of section.items) {
-                item.hide = Boolean(search) && !filterRe.test(item.title);
-                if (item.renderTitleComponent) {
-                    item.titleComponent = item.renderTitleComponent(
-                        search && !item.hide ? wrapFoundTitle(item.title, search) : null,
-                    );
-                } else {
-                    item.titleComponent =
-                        search && !item.hide ? wrapFoundTitle(item.title, search) : item.title;
-                }
-                hideSection = hideSection && item.hide;
-            }
-            section.hide = hideSection;
-            hidePage = hidePage && hideSection;
-        }
-        page.hide = hidePage;
-    }
-}

package/dist/components/AsideNavigation/Settings/helpers.ts

@@ -1,39 +0,0 @@
-import * as React from 'react';
-
-type AnyFunc = (...args: any[]) => any;
-
-export function useStableCallback<T extends AnyFunc>(
-    func: T,
-): (...args: Parameters<T>) => ReturnType<T> | undefined {
-    const funcRef = React.useRef<T>();
-
-    React.useEffect(() => {
-        funcRef.current = func;
-        return () => {
-            funcRef.current = undefined;
-        };
-    }, [func]);
-
-    return React.useCallback((...args: Parameters<T>) => {
-        if (typeof funcRef.current === 'function') {
-            return funcRef.current(...args);
-        }
-        return undefined;
-    }, []);
-}
-
-export function useCurrent<T>(value: T) {
-    const ref = React.useRef(value);
-    ref.current = value;
-    return React.useCallback(() => ref.current, []);
-}
-
-export function invariant(cond: boolean, message: string): void {
-    if (!cond) {
-        throw new Error(message);
-    }
-}
-
-export function escapeStringForRegExp(input: string) {
-    return input.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}

package/dist/components/AsideNavigation/Settings/i18n/en.json

@@ -1,5 +0,0 @@
-{
-  "heading_settings": "Settings",
-  "placeholder_search": "Search settings",
-  "not-found": "No results found"
-}

package/dist/components/AsideNavigation/Settings/i18n/ru.json

@@ -1,5 +0,0 @@
-{
-  "heading_settings": "Настройки",
-  "placeholder_search": "Найти настройки",
-  "not-found": "Ничего не найдено"
-}

package/dist/components/AsideNavigation/Settings/index.ts

@@ -1 +0,0 @@
-export * from './Settings';

package/dist/components/AsideNavigation/constants.ts

@@ -1,28 +0,0 @@
-export const ASIDE_HEADER_COMPACT_WIDTH = 56;
-export const ASIDE_HEADER_EXPANDED_WIDTH = 236;
-export const ASIDE_HEADER_COLLAPSE_BUTTON_SIZE = 28;
-
-export const ASIDE_HEADER_ICON_SIZE = 24;
-
-export const ASIDE_HEADER_STORE_KEY = 'nvAsideHeader';
-
-export enum AsideHeaderEvent {
-    SETTINGS_OPEN = 'SETTINGS_OPEN',
-    SETTINGS_CLOSE = 'SETTINGS_CLOSE',
-}
-
-export enum AsideHeaderVisibleItem {
-    Settings = 'settings',
-}
-
-export enum FooterItemIcon {
-    Bug = 'bug',
-    Support = 'support',
-    Settings = 'settings',
-    SettingsWithDot = 'settings-with-dot',
-}
-
-export enum FooterItemIconView {
-    Normal = 'normal',
-    WithDot = 'with-dot',
-}

package/dist/components/AsideNavigation/helpers.ts

@@ -1,34 +0,0 @@
-import {ASIDE_HEADER_STORE_KEY} from './constants';
-import {AsideHeaderLocalStorage} from './types';
-
-function store<T = unknown>(key: string, data: T) {
-    try {
-        window.localStorage.setItem(key, JSON.stringify(data));
-    } catch (err) {
-        console.error(`data not saved in localeStorage: ${err}`);
-    }
-}
-
-function restore<T = any>(key: string): T | null {
-    try {
-        const data = window.localStorage.getItem(key);
-        if (data === null) {
-            return null;
-        }
-        return JSON.parse(data) as T;
-    } catch (err) {
-        return null;
-    }
-}
-
-export function getLocalData() {
-    return restore<AsideHeaderLocalStorage>(ASIDE_HEADER_STORE_KEY);
-}
-
-export function setLocalData(data: Partial<AsideHeaderLocalStorage> | null) {
-    const storeData = getLocalData();
-    store<AsideHeaderLocalStorage>(ASIDE_HEADER_STORE_KEY, {
-        ...storeData,
-        ...data,
-    });
-}

package/dist/components/AsideNavigation/i18n/en.json

@@ -1,4 +0,0 @@
-{
-  "switch_settings": "Settings",
-  "label_more": "More"
-}

package/dist/components/AsideNavigation/i18n/ru.json

@@ -1,4 +0,0 @@
-{
-  "switch_settings": "Настройки",
-  "label_more": "Ещё"
-}

package/dist/components/AsideNavigation/icons.ts

@@ -1,32 +0,0 @@
-import {FooterItemIcon, FooterItemIconView} from './constants';
-import {SlotName} from './AsideHeaderFooterSlot/AsideHeaderFooterSlot';
-
-import bugIcon from '../../assets/icons/bug.svg';
-import supportIcon from '../../assets/icons/support.svg';
-import settingsIcon from '../../assets/icons/settings.svg';
-import settingsWithDotIcon from '../../assets/icons/settings-with-dot.svg';
-
-export const footerItemIconMap = {
-    [FooterItemIcon.Bug]: bugIcon,
-    [FooterItemIcon.Support]: supportIcon,
-    [FooterItemIcon.Settings]: settingsIcon,
-    [FooterItemIcon.SettingsWithDot]: settingsWithDotIcon,
-};
-
-export function getFooterItemIcon(slot: SlotName, view?: FooterItemIconView) {
-    switch (slot) {
-        case SlotName.BugReport:
-            return footerItemIconMap[FooterItemIcon.Bug];
-        case SlotName.Support:
-            return footerItemIconMap[FooterItemIcon.Support];
-        case SlotName.Settings:
-            switch (view) {
-                case FooterItemIconView.WithDot:
-                    return footerItemIconMap[FooterItemIcon.SettingsWithDot];
-                default:
-                    return footerItemIconMap[FooterItemIcon.Settings];
-            }
-        default:
-            return undefined;
-    }
-}

package/dist/components/AsideNavigation/types.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-
-export interface AsideHeaderMenuItem {
-    id: string;
-    title: string;
-    tooltipText?: string;
-    icon?: SVGIconData;
-    iconSize?: number | string;
-    link?: string;
-    current?: boolean;
-    pinned?: boolean;
-    onItemClick?: (item: AsideHeaderMenuItem, isCollapsed: boolean) => void;
-    itemWrapper?: (
-        node: React.ReactNode,
-        item: AsideHeaderMenuItem,
-        isCollapsed: boolean,
-        isCompact: boolean,
-    ) => React.ReactNode;
-}
-
-export interface AsideHeaderLocalStorage {
-    isCompact?: boolean;
-}

package/dist/components/TabletsStatistic/TabletsStatistic.js

@@ -1,58 +0,0 @@
-import React from 'react';
-import cn from 'bem-cn-lite';
-import PropTypes from 'prop-types';
-import {Link} from 'react-router-dom';
-
-import {getTabletLabel} from '../../utils/constants';
-import routes, {createHref} from '../../routes';
-
-import './TabletsStatistic.scss';
-
-const b = cn('tablets-statistic');
-
-const prepareTablets = (tablets) => {
-    const res = tablets.map((tablet) => {
-        return {
-            label: getTabletLabel(tablet.Type),
-            type: tablet.Type,
-            count: tablet.Count,
-            state: tablet.State,
-        };
-    });
-
-    return res.sort((a, b) => a.label.localeCompare(b.label));
-};
-
-class TabletStatistic extends React.Component {
-    static propTypes = {
-        tablets: PropTypes.array,
-        path: PropTypes.string,
-        nodeIds: PropTypes.array,
-    };
-    renderTabletInfo = (item, index) => {
-        const {path, nodeIds} = this.props;
-
-        return (
-            <Link
-                to={createHref(routes.tabletsFilters, null, {
-                    nodeIds,
-                    state: item.state,
-                    type: item.type,
-                    path,
-                })}
-                key={index}
-                className={b('tablet', {state: item.state?.toLowerCase()})}
-            >
-                {item.label}: {item.count}
-            </Link>
-        );
-    };
-    render() {
-        const {tablets = []} = this.props;
-        const preparedTablets = prepareTablets(tablets);
-
-        return <div className={b()}>{preparedTablets.map(this.renderTabletInfo)}</div>;
-    }
-}
-
-export default TabletStatistic;