ydb-embedded-ui 0.1.0

package/dist/components/AsideNavigation/AsideHeaderTooltip/AsideHeaderTooltip.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import {Popup, PopupPlacement} from '@yandex-cloud/uikit';
+import './AsideHeaderTooltip.scss';
+
+const b = block('nv-aside-header-tooltip');
+const popupPlacement: PopupPlacement = ['right'];
+
+export interface AsideHeaderTooltipProps {
+    anchor: HTMLElement | null;
+    text: React.ReactNode;
+}
+
+export const AsideHeaderTooltip: React.FC<AsideHeaderTooltipProps> = ({anchor, text}) => {
+    const anchorRef = React.useRef(anchor);
+
+    React.useEffect(() => {
+        anchorRef.current = anchor;
+    }, [anchor]);
+    if (!anchor) {
+        return null;
+    }
+
+    return (
+        <Popup
+            className={b()}
+            open={true}
+            anchorRef={anchorRef}
+            placement={popupPlacement}
+            disableEscapeKeyDown={true}
+            disableOutsideClick={true}
+            disableLayer={true}
+        >
+            <div className={b('text')}>{text}</div>
+        </Popup>
+    );
+};

package/dist/components/AsideNavigation/CompositeBar/CompositeBar.scss

@@ -0,0 +1,108 @@
+.nv-composite-bar {
+    $class: &;
+
+    flex: 1 0 auto;
+
+    width: 100%;
+    min-height: 40px;
+
+    &__root-menu-item {
+        cursor: pointer;
+    }
+
+    &__root-menu-item.yc-list__item_selected:not(&__root-menu-item_compact) {
+        background-color: var(--yc-color-base-selection);
+    }
+
+    & &__root-menu-item_compact#{&}__root-menu-item {
+        background-color: transparent;
+    }
+
+    &__menu-item {
+        display: flex;
+        align-items: center;
+
+        width: 100%;
+        height: 100%;
+    }
+
+    &__menu-icon-place {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        justify-content: center;
+
+        width: var(--nv-aside-header-min-width);
+        height: 100%;
+    }
+
+    #{$class} &__menu-icon {
+        color: var(--yc-color-text-misc);
+    }
+
+    &__menu-title {
+        overflow: hidden;
+
+        width: 100%;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    &__root-collapse-item {
+        cursor: pointer;
+    }
+
+    &__collapse-item {
+        display: flex;
+        align-items: center;
+
+        width: 100%;
+        height: 100%;
+        padding: 0 16px;
+    }
+
+    &__collapse-items-popup-content {
+        padding: 4px 0;
+    }
+
+    &__link {
+        display: flex;
+        align-items: center;
+
+        width: 100%;
+        height: 100%;
+
+        &,
+        &:hover,
+        &:active,
+        &:visited,
+        &:focus {
+            text-decoration: none;
+
+            color: inherit;
+            outline: none;
+        }
+    }
+
+    &__btn-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        width: 100%;
+        height: 100%;
+
+        &::before {
+            border-radius: 0;
+        }
+
+        &_current {
+            background-color: var(--yc-color-base-selection);
+        }
+
+        @at-root .yc-list__item_active &:not(&_current) {
+            background-color: var(--yc-color-base-simple-hover);
+        }
+    }
+}

package/dist/components/AsideNavigation/CompositeBar/CompositeBar.tsx

@@ -0,0 +1,282 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import {List, Icon, Popup, PopupPlacement} from '@yandex-cloud/uikit';
+
+import {AsideHeaderMenuItem} from '../types';
+import i18n from '../i18n';
+import {AsideHeaderTooltip} from '../AsideHeaderTooltip/AsideHeaderTooltip';
+
+import dotsIcon from '../../../assets/icons/dots.svg';
+
+import './CompositeBar.scss';
+
+const b = block('nv-composite-bar');
+export const ITEM_HEIGHT = 40;
+const POPUP_ITEM_HEIGHT = 28;
+const COLLAPSE_ITEM_ID = 'nv-collapse-item-id';
+const popupPlacement: PopupPlacement = ['right-start', 'right-end', 'right'];
+
+const getSelectedItemIndex = (items: AsideHeaderMenuItem[]) => {
+    const index = items.findIndex(({current}) => Boolean(current));
+    return index === -1 ? undefined : index;
+};
+
+interface ItemProps {
+    item: AsideHeaderMenuItem;
+    isCompact: boolean;
+    collapseItems: AsideHeaderMenuItem[] | null;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    onClick?: () => void;
+}
+
+const Item: React.FC<ItemProps> = ({item, isCompact, collapseItems, onClick}) => {
+    const [tooltipAnchor, setTooltipAnchor] = React.useState<HTMLDivElement | null>(null);
+    const [open, toggleOpen] = React.useState<boolean>(false);
+    const popupAnchor = React.useRef<HTMLDivElement>(null);
+
+    const tooltipText = item.tooltipText || item.title;
+    const iconSize = item.iconSize || 24;
+    const isCollapseItem = item.id === COLLAPSE_ITEM_ID;
+
+    const node = (
+        <div
+            className={b('menu-item')}
+            ref={popupAnchor}
+            onClick={() => {
+                if (typeof item.onItemClick === 'function') {
+                    item.onItemClick(item, false);
+                }
+                if (isCollapseItem) {
+                    toggleOpen(!open);
+                    setTooltipAnchor(null);
+                }
+                onClick?.();
+            }}
+        >
+            <div className={b('menu-icon-place')}>
+                {isCompact ? (
+                    <React.Fragment>
+                        <div
+                            onMouseEnter={(event) => !open && setTooltipAnchor(event.currentTarget)}
+                            onMouseLeave={() => setTooltipAnchor(null)}
+                            className={b('btn-icon', {current: Boolean(item.current)})}
+                        >
+                            {item.icon && (
+                                <Icon data={item.icon} size={iconSize} className={b('menu-icon')} />
+                            )}
+                        </div>
+                        <AsideHeaderTooltip anchor={tooltipAnchor} text={tooltipText} />
+                    </React.Fragment>
+                ) : (
+                    item.icon && (
+                        <Icon data={item.icon} size={iconSize} className={b('menu-icon')} />
+                    )
+                )}
+            </div>
+            <div className={b('menu-title')} title={item.title}>
+                {item.title}
+            </div>
+            {isCollapseItem && Array.isArray(collapseItems) && Boolean(popupAnchor.current) && (
+                <Popup
+                    placement={popupPlacement}
+                    open={open}
+                    anchorRef={popupAnchor}
+                    onClose={() => toggleOpen(false)}
+                >
+                    <div className={b('collapse-items-popup-content')}>
+                        <List
+                            itemClassName={b('root-collapse-item')}
+                            items={collapseItems}
+                            selectedItemIndex={getSelectedItemIndex(collapseItems)}
+                            itemHeight={POPUP_ITEM_HEIGHT}
+                            itemsHeight={collapseItems.length * POPUP_ITEM_HEIGHT}
+                            virtualized={false}
+                            filterable={false}
+                            sortable={false}
+                            renderItem={(collapseItem) => {
+                                const collapseNode = (
+                                    <div
+                                        className={b('collapse-item')}
+                                        onClick={() => {
+                                            if (typeof collapseItem.onItemClick === 'function') {
+                                                collapseItem.onItemClick(collapseItem, true);
+                                            }
+                                        }}
+                                    >
+                                        {collapseItem.title}
+                                    </div>
+                                );
+                                if (typeof collapseItem.itemWrapper === 'function') {
+                                    return collapseItem.itemWrapper(
+                                        collapseNode,
+                                        collapseItem,
+                                        true,
+                                        isCompact,
+                                    );
+                                }
+
+                                return collapseItem.link ? (
+                                    <a href={collapseItem.link} className={b('link')}>
+                                        {collapseNode}
+                                    </a>
+                                ) : (
+                                    collapseNode
+                                );
+                            }}
+                        />
+                    </div>
+                </Popup>
+            )}
+        </div>
+    );
+
+    if (typeof item.itemWrapper === 'function') {
+        return item.itemWrapper(node, item, false, isCompact) as React.ReactElement;
+    }
+
+    return item.link ? (
+        <a href={item.link} className={b('link')}>
+            {node}
+        </a>
+    ) : (
+        node
+    );
+};
+Item.displayName = 'Item';
+
+interface CompositeBarProps {
+    items: AsideHeaderMenuItem[];
+    isCompact: boolean;
+    onClickItem?: (item: AsideHeaderMenuItem) => void;
+}
+
+interface CompositeBarState {
+    height: string | number;
+    activeItemIndex?: number;
+}
+
+interface OnResizeArgs {
+    width: number;
+    height: number;
+}
+
+export class CompositeBar extends React.Component<CompositeBarProps> {
+    render() {
+        return (
+            <React.Fragment>
+                <div className={b()} style={{height: this.state.height}}>
+                    {this.props.items.length !== 0 && (
+                        <AutoSizer onResize={this.onResize}>
+                            {({width, height}) => {
+                                const style = {
+                                    width,
+                                    height,
+                                };
+                                return <div style={style}>{this.renderMenu(height)}</div>;
+                            }}
+                        </AutoSizer>
+                    )}
+                </div>
+            </React.Fragment>
+        );
+    }
+
+    state: CompositeBarState = {
+        height: 'auto',
+        activeItemIndex: undefined,
+    };
+
+    private currentItemsCount = 0;
+    private skipCheckResize = false;
+
+    private onResize = ({height}: OnResizeArgs) => {
+        if (this.skipCheckResize) {
+            this.skipCheckResize = false;
+            return;
+        }
+
+        const desiredHeight = this.currentItemsCount * ITEM_HEIGHT;
+        if (height < desiredHeight) {
+            if (this.state.height !== desiredHeight) {
+                this.skipCheckResize = true;
+                this.setState({height: desiredHeight});
+            }
+        } else if (this.state.height !== 'auto') {
+            this.skipCheckResize = true;
+            this.setState({height: 'auto'});
+        }
+    };
+
+    private renderMenu(height: number) {
+        const {items, isCompact, onClickItem} = this.props;
+        const capacity = Math.max(1, Math.floor(height / ITEM_HEIGHT));
+        let listItems: AsideHeaderMenuItem[] | null;
+        let collapseItems: AsideHeaderMenuItem[] | null = null;
+        if (capacity === 1) {
+            listItems = items.filter((item) => item.pinned);
+            collapseItems = [...items.filter((item) => !item.pinned)];
+            if (collapseItems.length > 0) {
+                listItems.push(this.getCollapseItem());
+            }
+        } else if (capacity < items.length) {
+            const extraCount = items.filter(
+                (item, idx) => item.pinned && idx >= capacity - 1,
+            ).length;
+            const pinnedFlag = items.reduceRight(
+                (acc, curr, idx) => {
+                    const useExtraCount = !curr.pinned && idx < capacity - 1 && acc.extraCount > 0;
+                    acc.flags.unshift(curr.pinned || useExtraCount);
+                    return {
+                        flags: acc.flags,
+                        extraCount: acc.extraCount - Number(useExtraCount),
+                    };
+                },
+                {flags: [] as boolean[], extraCount},
+            ).flags;
+            listItems = items.filter(
+                (item, idx) => item.pinned || (idx < capacity - 1 && !pinnedFlag[idx]),
+            );
+            collapseItems = items.filter(
+                (item, idx) => !item.pinned && (idx >= capacity - 1 || pinnedFlag[idx]),
+            );
+            if (collapseItems.length > 0) {
+                listItems.push(this.getCollapseItem());
+            }
+        } else {
+            listItems = [...items];
+        }
+        this.currentItemsCount = listItems.length;
+
+        return (
+            <List
+                items={listItems}
+                selectedItemIndex={isCompact ? undefined : getSelectedItemIndex(listItems)}
+                itemHeight={ITEM_HEIGHT}
+                itemClassName={b('root-menu-item', {compact: isCompact})}
+                itemsHeight={listItems.length * ITEM_HEIGHT}
+                virtualized={false}
+                filterable={false}
+                sortable={false}
+                renderItem={(item) => (
+                    <Item
+                        item={item}
+                        isCompact={isCompact}
+                        collapseItems={collapseItems}
+                        onClick={() => onClickItem?.(item)}
+                    />
+                )}
+            />
+        );
+    }
+
+    private getCollapseItem(): AsideHeaderMenuItem {
+        return {
+            id: COLLAPSE_ITEM_ID,
+            title: i18n('label_more'),
+            icon: dotsIcon,
+            iconSize: 16,
+        };
+    }
+}

package/dist/components/AsideNavigation/Content/Content.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+export type RenderContentType = (data: {size: number}) => React.ReactNode;
+
+interface ContentProps {
+    renderContent?: RenderContentType;
+    className?: string;
+    size: number;
+}
+
+interface RenderContentProps {
+    renderContent: RenderContentType;
+    size: number;
+}
+
+const RenderContent: React.FC<RenderContentProps> = React.memo(({renderContent, size}) => {
+    return <React.Fragment>{renderContent({size})}</React.Fragment>;
+});
+
+RenderContent.displayName = 'RenderContent';
+
+export const Content: React.FC<ContentProps> = ({size, className, renderContent}) => {
+    return (
+        <div
+            className={className}
+            style={{
+                ...({'--nv-aside-header-size': `${size}px`} as React.CSSProperties),
+            }}
+        >
+            {typeof renderContent === 'function' && (
+                <RenderContent size={size} renderContent={renderContent} />
+            )}
+        </div>
+    );
+};

package/dist/components/AsideNavigation/Drawer/Drawer.scss

@@ -0,0 +1,76 @@
+.nv-drawer {
+    &__item {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+
+        height: 100%;
+
+        background-color: var(--yc-color-base-background);
+        will-change: transform;
+    }
+
+    &__item-transition-enter {
+        transform: translate(-100%, 0);
+    }
+
+    &__item-transition-enter-active {
+        transition: transform 300ms;
+        transform: translate(0, 0);
+    }
+
+    &__item-transition-enter-done {
+        // Хак, чтобы не размывался текст после анимации в некоторых браузерах
+        filter: blur(0px);
+
+        transform: translateZ(0);
+    }
+
+    &__item-transition-exit {
+        transform: translate(0, 0);
+    }
+
+    &__item-transition-exit-active {
+        transition: transform 300ms;
+        transform: translate(-100%, 0);
+    }
+
+    &__item-transition-exit-done {
+        visibility: hidden;
+    }
+
+    &__veil {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        background-color: var(--yc-color-sfx-veil);
+    }
+
+    &__veil-transition-enter {
+        opacity: 0;
+    }
+
+    &__veil-transition-enter-active {
+        transition: opacity 300ms;
+
+        opacity: 1;
+    }
+
+    &__veil-transition-exit {
+        opacity: 1;
+    }
+
+    &__veil-transition-exit-active {
+        transition: opacity 300ms;
+
+        opacity: 0;
+    }
+
+    &__veil-transition-exit-done {
+        visibility: hidden;
+    }
+}

package/dist/components/AsideNavigation/Drawer/Drawer.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import {CSSTransition, Transition} from 'react-transition-group';
+import './Drawer.scss';
+
+const b = block('nv-drawer');
+const TIMEOUT = 300;
+
+export interface DrawerItemProps {
+    visible: boolean;
+    className?: string;
+}
+
+export const DrawerItem: React.FC<DrawerItemProps> = ({className, visible, children}) => {
+    return (
+        <CSSTransition
+            in={visible}
+            timeout={TIMEOUT}
+            unmountOnExit={true}
+            classNames={b('item-transition')}
+        >
+            <div className={b('item', className)}>{children}</div>
+        </CSSTransition>
+    );
+};
+
+type DrawerChild = React.ReactElement<DrawerItemProps>;
+
+export interface DrawerProps {
+    children: DrawerChild | DrawerChild[];
+    preventSrcollBody?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    onVeilClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onEscape?: () => void;
+}
+
+export const Drawer: React.FC<DrawerProps> = ({
+    className,
+    children,
+    style,
+    onVeilClick,
+    onEscape,
+    preventSrcollBody = true,
+}) => {
+    let someItemVisible = false;
+    React.Children.forEach(children, (child) => {
+        const childElem = child as DrawerChild;
+        if (childElem.type === DrawerItem) {
+            const childVisible = Boolean(childElem.props.visible);
+            if (childVisible) {
+                someItemVisible = true;
+            }
+        }
+    });
+
+    React.useEffect(() => {
+        function onKeyDown(event: KeyboardEvent) {
+            if (event.key === 'Escape') {
+                onEscape?.();
+            }
+        }
+        if (someItemVisible) {
+            window.addEventListener('keydown', onKeyDown);
+        }
+        return () => {
+            window.removeEventListener('keydown', onKeyDown);
+        };
+    }, [onEscape, someItemVisible]);
+
+    React.useEffect(() => {
+        const prevPreventSrcollBody = preventSrcollBody;
+        const cleanupPreventScrollBody = () => {
+            document.body.style.paddingRight = '';
+            document.body.style.paddingBottom = '';
+            document.body.style.overflow = '';
+        };
+        const setPreventScrollBody = () => {
+            const vw = window.innerWidth - document.documentElement.clientWidth;
+            const hw = window.innerHeight - document.documentElement.clientHeight;
+            document.body.style.paddingRight = vw + 'px';
+            document.body.style.paddingBottom = hw + 'px';
+            document.body.style.overflow = 'hidden';
+        };
+        if (prevPreventSrcollBody) {
+            if (someItemVisible) {
+                setPreventScrollBody();
+            } else {
+                cleanupPreventScrollBody();
+            }
+        }
+        return () => {
+            if (prevPreventSrcollBody) {
+                cleanupPreventScrollBody();
+            }
+        };
+    }, [someItemVisible, preventSrcollBody]);
+
+    return (
+        <Transition
+            in={someItemVisible}
+            timeout={{enter: 0, exit: TIMEOUT}}
+            mountOnEnter
+            unmountOnExit
+        >
+            {(state) => {
+                const childrenVisible = someItemVisible && state === 'entered';
+                return (
+                    <div className={b(null, className)} style={style}>
+                        <CSSTransition
+                            in={childrenVisible}
+                            timeout={TIMEOUT}
+                            unmountOnExit={true}
+                            classNames={b('veil-transition')}
+                        >
+                            <div className={b('veil')} onClick={onVeilClick} />
+                        </CSSTransition>
+                        {React.Children.map(children, (child) => {
+                            const childElem = child as DrawerChild;
+                            if (childElem.type === DrawerItem) {
+                                const childVisible = Boolean(childElem.props.visible);
+                                return React.cloneElement(childElem, {
+                                    ...childElem.props,
+                                    visible: childVisible && childrenVisible,
+                                });
+                            }
+                            return child;
+                        })}
+                    </div>
+                );
+            }}
+        </Transition>
+    );
+};

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

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