flexlayout-react 0.8.12 → 0.8.14

package/src/view/BorderButton.tsx

@@ -1,201 +0,0 @@
-import * as React from "react";
-import { I18nLabel } from "../I18nLabel";
-import { Actions } from "../model/Actions";
-import { TabNode } from "../model/TabNode";
-import { IIcons, LayoutInternal } from "./Layout";
-import { ICloseType } from "../model/ICloseType";
-import { CLASSES } from "../Types";
-import { getRenderStateEx, isAuxMouseEvent } from "./Utils";
-
-/** @internal */
-export interface IBorderButtonProps {
-    layout: LayoutInternal;
-    node: TabNode;
-    selected: boolean;
-    border: string;
-    icons: IIcons;
-    path: string;
-}
-
-/** @internal */
-export const BorderButton = (props: IBorderButtonProps) => {
-    const { layout, node, selected, border, icons, path } = props;
-    const selfRef = React.useRef<HTMLDivElement | null>(null);
-    const contentRef = React.useRef<HTMLInputElement | null>(null);
-
-    const onDragStart = (event: React.DragEvent<HTMLElement>) => {
-        if (node.isEnableDrag()) {
-            event.stopPropagation();
-            layout.setDragNode(event.nativeEvent, node as TabNode);
-        } else {
-            event.preventDefault();
-        }
-    };
-
-    const onDragEnd = (event: React.DragEvent<HTMLElement>) => {
-        event.stopPropagation();
-        layout.clearDragMain();
-    };
-
-    const onAuxMouseClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-        if (isAuxMouseEvent(event)) {
-            layout.auxMouseClick(node, event);
-        } 
-    };
-
-    const onContextMenu = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-        layout.showContextMenu(node, event);
-    };
-
-    const onClick = () => {
-        layout.doAction(Actions.selectTab(node.getId()));
-    };
-
-    // const onDoubleClick = (event: Event) => {
-    //     // if (node.isEnableRename()) {
-    //     //     onRename();
-    //     // }
-    // };
-
-    // const onRename = () => {
-    //     layout.setEditingTab(node);
-    //     layout.getCurrentDocument()!.body.addEventListener("pointerdown", onEndEdit);
-    // };
-
-    const onEndEdit = (event: Event) => {
-        if (event.target !== contentRef.current!) {
-            layout.getCurrentDocument()!.body.removeEventListener("pointerdown", onEndEdit);
-            layout.setEditingTab(undefined);
-        }
-    };
-
-    const isClosable = () => {
-        const closeType = node.getCloseType();
-        if (selected || closeType === ICloseType.Always) {
-            return true;
-        }
-        if (closeType === ICloseType.Visible) {
-            // not selected but x should be visible due to hover
-            if (window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches) {
-                return true;
-            }
-        }
-        return false;
-    };
-
-    const onClose = (event: React.MouseEvent<HTMLElement>) => {
-        if (isClosable()) {
-            layout.doAction(Actions.deleteTab(node.getId()));
-            event.stopPropagation();
-        }
-    };
-
-    const onClosePointerDown = (event: React.PointerEvent<HTMLElement>) => {
-        event.stopPropagation();
-    };
-
-    React.useLayoutEffect(() => {
-        node.setTabRect(layout.getBoundingClientRect(selfRef.current!));
-        if (layout.getEditingTab() === node) {
-            (contentRef.current! as HTMLInputElement).select();
-        }
-    });
-
-    const onTextBoxPointerDown = (event: React.PointerEvent<HTMLInputElement>) => {
-        event.stopPropagation();
-    };
-
-    const onTextBoxKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
-        if (event.code === 'Escape') {
-            // esc
-            layout.setEditingTab(undefined);
-        } else if (event.code === 'Enter' || event.code === 'NumpadEnter') {
-            // enter
-            layout.setEditingTab(undefined);
-            layout.doAction(Actions.renameTab(node.getId(), (event.target as HTMLInputElement).value));
-        }
-    };
-
-    const cm = layout.getClassName;
-    let classNames = cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_ + border);
-
-    if (selected) {
-        classNames += " " + cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON__SELECTED);
-    } else {
-        classNames += " " + cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON__UNSELECTED);
-    }
-
-    if (node.getClassName() !== undefined) {
-        classNames += " " + node.getClassName();
-    }
-
-    let iconAngle = 0;
-    if (node.getModel().isEnableRotateBorderIcons() === false) {
-        if (border === "left") {
-            iconAngle = 90;
-        } else if (border === "right") {
-            iconAngle = -90;
-        }
-    }
-
-    const renderState = getRenderStateEx(layout, node, iconAngle);
-
-    let content = renderState.content ? (
-        <div className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_CONTENT)}>
-            {renderState.content}
-        </div>) : null;
-
-    const leading = renderState.leading ? (
-        <div className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_LEADING)}>
-            {renderState.leading}
-        </div>) : null;
-
-    if (layout.getEditingTab() === node) {
-        content = (
-            <input
-                ref={contentRef}
-                className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX)}
-                data-layout-path={path + "/textbox"}
-                type="text"
-                autoFocus={true}
-                defaultValue={node.getName()}
-                onKeyDown={onTextBoxKeyPress}
-                onPointerDown={onTextBoxPointerDown}
-            />
-        );
-    }
-
-    if (node.isEnableClose()) {
-        const closeTitle = layout.i18nName(I18nLabel.Close_Tab);
-        renderState.buttons.push(
-            <div
-                key="close"
-                data-layout-path={path + "/button/close"}
-                title={closeTitle}
-                className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING)}
-                onPointerDown={onClosePointerDown}
-                onClick={onClose}>
-                {(typeof icons.close === "function") ? icons.close(node) : icons.close}
-            </div>
-        );
-    }
-
-    return (
-        <div
-            ref={selfRef}
-            data-layout-path={path}
-            className={classNames}
-            onClick={onClick}
-            onAuxClick={onAuxMouseClick}
-            onContextMenu={onContextMenu}
-            title={node.getHelpText()}
-            draggable={true}
-            onDragStart={onDragStart}
-            onDragEnd={onDragEnd}
-        >
-            {leading}
-            {content}
-            {renderState.buttons}
-        </div>
-    );
-};

package/src/view/BorderTab.tsx

@@ -1,81 +0,0 @@
-import * as React from "react";
-import { Orientation } from "../Orientation";
-import { LayoutInternal } from "./Layout";
-import { BorderNode } from "../model/BorderNode";
-import { Rect } from "../Rect";
-import { Splitter, splitterDragging } from "./Splitter";
-import { DockLocation } from "../DockLocation";
-import { CLASSES } from "../Types";
-
-/** @internal */
-export interface IBorderTabProps {
-    layout: LayoutInternal;
-    border: BorderNode;
-    show: boolean;
-}
-
-export function BorderTab(props: IBorderTabProps) {
-    const { layout, border, show } = props;
-    const selfRef = React.useRef<HTMLDivElement | null>(null);
-    const timer = React.useRef<NodeJS.Timeout | undefined>(undefined);
-
-    React.useLayoutEffect(() => {
-        const outerRect = layout.getBoundingClientRect(selfRef.current!);
-        const contentRect = Rect.getContentRect(selfRef.current!).relativeTo(layout.getDomRect()!);
-        if (outerRect.width > 0) {
-            border.setOuterRect(outerRect);
-            if (!border.getContentRect().equals(contentRect) && !isNaN(contentRect.x)) {
-                border.setContentRect(contentRect);
-                if (splitterDragging) { // next movement will draw tabs again, only redraw after pause/end
-                    if (timer.current) {
-                        clearTimeout(timer.current);
-                    }
-                    timer.current = setTimeout(() => {
-                        layout.redrawInternal("border content rect " + contentRect);
-                        timer.current = undefined;
-                    }, 50);
-                } else {
-                    layout.redrawInternal("border content rect " + contentRect);
-                }
-            }
-        }
-
-    });
-
-    let horizontal = true;
-    const style: Record<string, any> = {};
-
-    if (border.getOrientation() === Orientation.HORZ) {
-        style.width = border.getSize();
-        style.minWidth = border.getMinSize();
-        style.maxWidth = border.getMaxSize();
-    } else {
-        style.height = border.getSize();
-        style.minHeight = border.getMinSize();
-        style.maxHeight = border.getMaxSize();
-        horizontal = false;
-    }
-
-    style.display = show ? "flex" : "none";
-
-    const className = layout.getClassName(CLASSES.FLEXLAYOUT__BORDER_TAB_CONTENTS);
-
-    if (border.getLocation() === DockLocation.LEFT || border.getLocation() === DockLocation.TOP) {
-        return (
-            <>
-                <div ref={selfRef} style={style} className={className}>
-                </div>
-                {show && <Splitter layout={layout} node={border} index={0} horizontal={horizontal} />}
-            </>
-        );
-    } else {
-        return (
-            <>
-                {show && <Splitter layout={layout} node={border} index={0} horizontal={horizontal} />}
-                <div ref={selfRef} style={style} className={className}>
-                </div>
-            </>
-        );
-
-    }
-}

package/src/view/BorderTabSet.tsx

@@ -1,259 +0,0 @@
-import * as React from "react";
-import { DockLocation } from "../DockLocation";
-import { BorderNode } from "../model/BorderNode";
-import { TabNode } from "../model/TabNode";
-import { BorderButton } from "./BorderButton";
-import { LayoutInternal, ITabSetRenderValues } from "./Layout";
-import { showPopup } from "./PopupMenu";
-import { Actions } from "../model/Actions";
-import { I18nLabel } from "../I18nLabel";
-import { useTabOverflow } from "./TabOverflowHook";
-import { Orientation } from "../Orientation";
-import { CLASSES } from "../Types";
-import { isAuxMouseEvent } from "./Utils";
-
-/** @internal */
-export interface IBorderTabSetProps {
-    border: BorderNode;
-    layout: LayoutInternal;
-    size: number;
-}
-
-/** @internal */
-export const BorderTabSet = (props: IBorderTabSetProps) => {
-    const { border, layout, size } = props;
-
-    const toolbarRef = React.useRef<HTMLDivElement | null>(null);
-    const miniScrollRef = React.useRef<HTMLDivElement | null>(null);
-    const overflowbuttonRef = React.useRef<HTMLButtonElement | null>(null);
-    const stickyButtonsRef = React.useRef<HTMLDivElement | null>(null);
-    const tabStripInnerRef = React.useRef<HTMLDivElement | null>(null);
-
-    const icons = layout.getIcons();
-
-    React.useLayoutEffect(() => {
-        border.setTabHeaderRect(layout.getBoundingClientRect(selfRef.current!));
-    });
-
-    const { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isDockStickyButtons, isShowHiddenTabs } =
-        useTabOverflow(layout, border, Orientation.flip(border.getOrientation()), tabStripInnerRef, miniScrollRef,
-            layout.getClassName(CLASSES.FLEXLAYOUT__BORDER_BUTTON)
-        );
-
-    const onAuxMouseClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-        if (isAuxMouseEvent(event)) {
-            layout.auxMouseClick(border, event);
-        }
-    };
-
-    const onContextMenu = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-        layout.showContextMenu(border, event);
-    };
-
-    const onInterceptPointerDown = (event: React.PointerEvent) => {
-        event.stopPropagation();
-    };
-
-    const onOverflowClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-        const callback = layout.getShowOverflowMenu();
-        const items = hiddenTabs.map(h => { return { index: h, node: (border.getChildren()[h] as TabNode) }; });
-        if (callback !== undefined) {
-
-            callback(border, event, items, onOverflowItemSelect);
-        } else {
-            const element = overflowbuttonRef.current!;
-            showPopup(
-                element,
-                border,
-                items,
-                onOverflowItemSelect,
-                layout);
-        }
-        event.stopPropagation();
-    };
-
-    const onOverflowItemSelect = (item: { node: TabNode; index: number }) => {
-        layout.doAction(Actions.selectTab(item.node.getId()));
-        userControlledPositionRef.current = false;
-    };
-
-    const onPopoutTab = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-        const selectedTabNode = border.getChildren()[border.getSelected()] as TabNode;
-        if (selectedTabNode !== undefined) {
-            layout.doAction(Actions.popoutTab(selectedTabNode.getId()));
-        }
-        event.stopPropagation();
-    };
-
-    const cm = layout.getClassName;
-
-    const tabButtons: any = [];
-
-    const layoutTab = (i: number) => {
-        let isSelected = border.getSelected() === i;
-        let child = border.getChildren()[i] as TabNode;
-
-        tabButtons.push(
-            <BorderButton
-                layout={layout}
-                border={border.getLocation().getName()}
-                node={child}
-                path={border.getPath() + "/tb" + i}
-                key={child.getId()}
-                selected={isSelected}
-                icons={icons}
-            />
-        );
-        if (i < border.getChildren().length - 1) {
-            tabButtons.push(
-                <div key={"divider" + i} className={cm(CLASSES.FLEXLAYOUT__BORDER_TAB_DIVIDER)}></div>
-            );
-        }
-    };
-
-    for (let i = 0; i < border.getChildren().length; i++) {
-        layoutTab(i);
-    }
-
-    let borderClasses = cm(CLASSES.FLEXLAYOUT__BORDER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_ + border.getLocation().getName());
-    if (border.getClassName() !== undefined) {
-        borderClasses += " " + border.getClassName();
-    }
-
-    // allow customization of tabset right/bottom buttons
-    let buttons: any[] = [];
-    let stickyButtons: any[] = [];
-    const renderState: ITabSetRenderValues = { buttons, stickyButtons: stickyButtons, overflowPosition: undefined };
-    layout.customizeTabSet(border, renderState);
-    buttons = renderState.buttons;
-
-    if (renderState.overflowPosition === undefined) {
-        renderState.overflowPosition = stickyButtons.length;
-    }
-
-    if (stickyButtons.length > 0) {
-        if (isDockStickyButtons) {
-            buttons = [...stickyButtons, ...buttons];
-        } else {
-            tabButtons.push(<div
-                ref={stickyButtonsRef}
-                key="sticky_buttons_container"
-                onPointerDown={onInterceptPointerDown}
-                onDragStart={(e) => { e.preventDefault() }}
-                className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER)}
-            >
-                {stickyButtons}
-            </div>);
-        }
-    }
-
-    if (isShowHiddenTabs) {
-        const overflowTitle = layout.i18nName(I18nLabel.Overflow_Menu_Tooltip);
-        let overflowContent;
-        if (typeof icons.more === "function") {
-            const items = hiddenTabs.map(h => { return { index: h, node: (border.getChildren()[h] as TabNode) }; });
-
-            overflowContent = icons.more(border, items);
-        } else {
-            overflowContent = (<>
-                {icons.more}
-                <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT)}>{hiddenTabs.length>0?hiddenTabs.length: ""}</div>
-            </>);
-        }
-        buttons.splice(Math.min(renderState.overflowPosition, buttons.length), 0,
-            <button
-                key="overflowbutton"
-                ref={overflowbuttonRef}
-                className={cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ + border.getLocation().getName())}
-                title={overflowTitle}
-                onClick={onOverflowClick}
-                onPointerDown={onInterceptPointerDown}
-            >
-                {overflowContent}
-            </button>
-        );
-    }
-
-    const selectedIndex = border.getSelected();
-    if (selectedIndex !== -1) {
-        const selectedTabNode = border.getChildren()[selectedIndex] as TabNode;
-        if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnablePopout()) {
-            const popoutTitle = layout.i18nName(I18nLabel.Popout_Tab);
-            buttons.push(
-                <button
-                    key="popout"
-                    title={popoutTitle}
-                    className={cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT)}
-                    onClick={onPopoutTab}
-                    onPointerDown={onInterceptPointerDown}
-                >
-                    {(typeof icons.popout === "function") ? icons.popout(selectedTabNode) : icons.popout}
-                </button>
-            );
-        }
-    }
-    const toolbar = (
-        <div key="toolbar" ref={toolbarRef} className={cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_ + border.getLocation().getName())}>
-            {buttons}
-        </div>
-    );
-
-    let innerStyle = {};
-    let outerStyle = {};
-    const borderHeight = size - 1;
-    if (border.getLocation() === DockLocation.LEFT) {
-        innerStyle = { right: "100%", top: 0 };
-        outerStyle = { width: borderHeight, overflowY: "auto" };
-    } else if (border.getLocation() === DockLocation.RIGHT) {
-        innerStyle = { left: "100%", top: 0 };
-        outerStyle = { width: borderHeight, overflowY: "auto" };
-    } else {
-        innerStyle = { left: 0 };
-        outerStyle = { height: borderHeight, overflowX: "auto" };
-    }
-
-    let miniScrollbar = undefined;
-    if (border.isEnableTabScrollbar()) {
-        miniScrollbar = (
-            <div ref={miniScrollRef}
-                className={cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR)}
-                onPointerDown={onScrollPointerDown}
-            />
-        );
-    }
-
-    return (
-        <div
-            ref={selfRef}
-            style={{
-                display: "flex",
-                flexDirection: (border.getOrientation() === Orientation.VERT ? "row" : "column")
-            }}
-            className={borderClasses}
-            data-layout-path={border.getPath()}
-            onClick={onAuxMouseClick}
-            onAuxClick={onAuxMouseClick}
-            onContextMenu={onContextMenu}
-            onWheel={onMouseWheel}
-        >
-            <div className={cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR_CONTAINER)}>
-                <div
-                    ref={tabStripInnerRef}
-                    className={cm(CLASSES.FLEXLAYOUT__BORDER_INNER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName())}
-                    style={outerStyle}
-                    onScroll={onScroll}
-                >
-                    <div
-                        style={innerStyle}
-                        className={cm(CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ + border.getLocation().getName())}
-                    >
-                        {tabButtons}
-                    </div>
-                </div>
-                {miniScrollbar}
-            </div>
-            {toolbar}
-        </div >
-    );
-
-};

package/src/view/DragContainer.tsx

@@ -1,32 +0,0 @@
-import * as React from "react";
-import { TabNode } from "../model/TabNode";
-import { LayoutInternal } from "./Layout";
-import { CLASSES } from "../Types";
-import { TabButtonStamp } from "./TabButtonStamp";
-
-/** @internal */
-export interface IDragContainerProps {
-    node: TabNode;
-    layout: LayoutInternal;
-}
-
-/** @internal */
-export const DragContainer = (props: IDragContainerProps) => {
-    const { layout, node} = props;
-    const selfRef = React.useRef<HTMLDivElement | null>(null);
-
-    React.useEffect(()=> {
-        node.setTabStamp(selfRef.current);
-    }, [node, selfRef.current]);
-
-    const cm = layout.getClassName;
-
-    let classNames = cm(CLASSES.FLEXLAYOUT__DRAG_RECT);
-
-    return (<div
-            ref={selfRef}
-            className={classNames}>
-            <TabButtonStamp key={node.getId()} layout={layout} node={node} />
-        </div>
-    );
-};

package/src/view/ErrorBoundary.tsx

@@ -1,42 +0,0 @@
-import * as React from "react";
-import { ErrorInfo } from "react";
-import { CLASSES } from "../Types";
-
-/** @internal */
-export interface IErrorBoundaryProps {
-    message: string;
-    children: React.ReactNode;
-}
-/** @internal */
-export interface IErrorBoundaryState {
-    hasError: boolean;
-}
-
-/** @internal */
-export class ErrorBoundary extends React.Component<IErrorBoundaryProps, IErrorBoundaryState> {
-    constructor(props: IErrorBoundaryProps) {
-        super(props);
-        this.state = { hasError: false };
-    }
-
-    static getDerivedStateFromError(error: Error) {
-        return { hasError: true };
-    }
-
-    componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-        console.debug(error);
-        console.debug(errorInfo);
-    }
-
-    render() {
-        if (this.state.hasError) {
-            return (
-                <div className={CLASSES.FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER}>
-                    <div className={CLASSES.FLEXLAYOUT__ERROR_BOUNDARY_CONTENT}>{this.props.message}</div>
-                </div>
-            );
-        }
-
-        return this.props.children;
-    }
-}

package/src/view/Icons.tsx

@@ -1,57 +0,0 @@
-const style = { width: "1em", height: "1em", display: "flex", alignItems: "center" };
-
-export const CloseIcon = () => {
-    return (
-        <svg xmlns="http://www.w3.org/2000/svg" style={style} viewBox="0 0 24 24" >
-            <path fill="none" d="M0 0h24v24H0z" />
-            <path stroke="var(--color-icon)" fill="var(--color-icon)" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
-        </svg>
-    );
-}
-
-export const MaximizeIcon = () => {
-    return (
-        <svg xmlns="http://www.w3.org/2000/svg" style={style} viewBox="0 0 24 24" fill="var(--color-icon)"><path d="M0 0h24v24H0z" fill="none" /><path stroke="var(--color-icon)" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" /></svg>
-    );
-}
-
-export const OverflowIcon = () => {
-    return (
-        <svg xmlns="http://www.w3.org/2000/svg" style={style} viewBox="0 0 24 24" fill="var(--color-icon)"><path d="M0 0h24v24H0z" fill="none" /><path stroke="var(--color-icon)" d="M7 10l5 5 5-5z" /></svg>
-    );
-}
-
-export const EdgeIcon = () => {
-    return (
-        <svg xmlns="http://www.w3.org/2000/svg" style={{display:"block",  width:10, height:10}} preserveAspectRatio="none" viewBox="0 0 100 100"><path  fill="var(--color-edge-icon)" stroke="var(--color-edge-icon)" 
-            d="M10 30 L90 30 l-40 40 Z" /></svg>
-    );
-}
-
-export const PopoutIcon = () => {
-    return (
-        // <svg xmlns="http://www.w3.org/2000/svg"  style={style}  viewBox="0 0 24 24" fill="var(--color-icon)"><path d="M0 0h24v24H0z" fill="none"/><path stroke="var(--color-icon)" d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z"/></svg>
-        
-        // <svg xmlns="http://www.w3.org/2000/svg" style={style} fill="none" viewBox="0 0 24 24" stroke="var(--color-icon)" stroke-width="2">
-        //     <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-        // </svg>
-
-        <svg xmlns="http://www.w3.org/2000/svg" style={style} viewBox="0 0 20 20" fill="var(--color-icon)">
-            <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
-            <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
-        </svg>
-
-    );
-}
-
-export const RestoreIcon = () => {
-    return (
-        <svg xmlns="http://www.w3.org/2000/svg" style={style} viewBox="0 0 24 24" fill="var(--color-icon)"><path d="M0 0h24v24H0z" fill="none" /><path stroke="var(--color-icon)" d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" /></svg>
-    );
-}
-
-export const AsterickIcon = () => {
-    return (
-        <svg xmlns="http://www.w3.org/2000/svg" style={style} height="24px" viewBox="0 -960 960 960" width="24px" ><path fill="var(--color-icon)" stroke="var(--color-icon)" d="M440-120v-264L254-197l-57-57 187-186H120v-80h264L197-706l57-57 186 187v-264h80v264l186-187 57 57-187 186h264v80H576l187 186-57 57-186-187v264h-80Z"/></svg>
-    );
-}