uiconfig-blueprint 0.1.0-dev.13 → 0.1.0-dev.14

package/src/components/TreeNode2.tsx

@@ -1,192 +0,0 @@
-/*
- * Copyright 2015 Palantir Technologies, Inc. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Changes:
- * - Added support for drag and drop
- */
-
-import classNames from "classnames";
-import * as React from "react";
-
-import {CaretRight} from "@blueprintjs/icons";
-
-import type {TreeEventHandler, TreeNodeInfo} from "@blueprintjs/core";
-import {Classes, Collapse, DISPLAYNAME_PREFIX, Icon} from "@blueprintjs/core";
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-export interface TreeNodeProps<T = {}> extends TreeNodeInfo<T> {
-    children?: React.ReactNode;
-    contentRef?: (node: TreeNodeInfo<T>, element: HTMLDivElement | null) => void;
-    depth: number;
-    key?: string | number;
-    onClick?: TreeEventHandler<T>;
-    onCollapse?: TreeEventHandler<T>;
-    onContextMenu?: TreeEventHandler<T>;
-    onDoubleClick?: TreeEventHandler<T>;
-    onExpand?: TreeEventHandler<T>;
-    onMouseEnter?: TreeEventHandler<T>;
-    onMouseLeave?: TreeEventHandler<T>;
-    path: number[];
-    draggable?: boolean;
-    onDragStart?: (node: TreeNodeInfo<T>, path: number[], e: React.DragEvent<HTMLElement>) => void;
-    onDragOver?: (node: TreeNodeInfo<T>, path: number[], e: React.DragEvent<HTMLElement>) => void;
-    onDrop?: (node: TreeNodeInfo<T>, path: number[], e: React.DragEvent<HTMLElement>) => void;
-    onDragEnd?: (node: TreeNodeInfo<T>, path: number[], e: React.DragEvent<HTMLElement>) => void;
-    onDragEnter?: (node: TreeNodeInfo<T>, path: number[], e: React.DragEvent<HTMLElement>) => void;
-    onDragLeave?: (node: TreeNodeInfo<T>, path: number[], e: React.DragEvent<HTMLElement>) => void;
-}
-
-/**
- * Tree node component.
- *
- * @see https://blueprintjs.com/docs/#core/components/tree.tree-node
- */
-// eslint-disable-next-line @typescript-eslint/ban-types
-export class TreeNode2<T = {}> extends React.Component<TreeNodeProps<T>> {
-    public static displayName = `${DISPLAYNAME_PREFIX}.TreeNode`;
-
-    /** @deprecated no longer necessary now that the TypeScript parser supports type arguments on JSX element tags */
-    public static ofType<U>() {
-        return TreeNode2 as new (props: TreeNodeProps<U>) => TreeNode2<U>;
-    }
-
-    public render() {
-        const { children, className, disabled, icon, isExpanded, isSelected, label, draggable } = this.props;
-        const classes = classNames(
-            Classes.TREE_NODE,
-            {
-                [Classes.DISABLED]: disabled,
-                [Classes.TREE_NODE_SELECTED]: isSelected,
-                [Classes.TREE_NODE_EXPANDED]: isExpanded,
-            },
-            className,
-        );
-
-        const contentClasses = classNames(
-            Classes.TREE_NODE_CONTENT,
-            `${Classes.TREE_NODE_CONTENT}-${this.props.depth}`,
-        );
-
-        const eventHandlers =
-            disabled === true
-                ? {}
-                : {
-                    onClick: this.handleClick,
-                    onContextMenu: this.handleContextMenu,
-                    onDoubleClick: this.handleDoubleClick,
-                    onMouseEnter: this.handleMouseEnter,
-                    onMouseLeave: this.handleMouseLeave,
-                    draggable: draggable,
-                    onDragStart: this.handleDragStart,
-                    onDragOver: this.handleDragOver,
-                    onDrop: this.handleDrop,
-                    onDragEnd: this.handleDragEnd,
-                    onDragEnter: this.handleDragEnter,
-                    onDragLeave: this.handleDragLeave,
-                };
-
-        return (
-            <li className={classes}>
-                <div className={contentClasses} ref={this.handleContentRef} {...eventHandlers}>
-                    {this.maybeRenderCaret()}
-                    <Icon className={Classes.TREE_NODE_ICON} icon={icon} aria-hidden={true} tabIndex={-1} />
-                    <span className={Classes.TREE_NODE_LABEL}>{label}</span>
-                    {this.maybeRenderSecondaryLabel()}
-                </div>
-                <Collapse isOpen={isExpanded}>{children}</Collapse>
-            </li>
-        );
-    }
-
-    private maybeRenderCaret() {
-        const { children, isExpanded, disabled, hasCaret = React.Children.count(children) > 0 } = this.props;
-        if (hasCaret) {
-            const caretClasses = classNames(
-                Classes.TREE_NODE_CARET,
-                isExpanded ? Classes.TREE_NODE_CARET_OPEN : Classes.TREE_NODE_CARET_CLOSED,
-            );
-            return (
-                <CaretRight
-                    title={isExpanded ? "Collapse group" : "Expand group"}
-                    className={caretClasses}
-                    onClick={disabled === true ? undefined : this.handleCaretClick}
-                />
-            );
-        }
-        return <span className={Classes.TREE_NODE_CARET_NONE} />;
-    }
-
-    private maybeRenderSecondaryLabel() {
-        if (this.props.secondaryLabel != null) {
-            return <span className={Classes.TREE_NODE_SECONDARY_LABEL}>{this.props.secondaryLabel}</span>;
-        } else {
-            return undefined;
-        }
-    }
-
-    private handleCaretClick = (e: React.MouseEvent<HTMLElement>) => {
-        e.stopPropagation();
-        const { isExpanded, onCollapse, onExpand } = this.props;
-        (isExpanded ? onCollapse : onExpand)?.(this.props, this.props.path, e);
-    };
-
-    private handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
-        this.props.onClick?.(this.props, this.props.path, e);
-    };
-
-    private handleContentRef = (element: HTMLDivElement | null) => {
-        this.props.contentRef?.(this.props, element);
-    };
-
-    private handleContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
-        this.props.onContextMenu?.(this.props, this.props.path, e);
-    };
-
-    private handleDoubleClick = (e: React.MouseEvent<HTMLDivElement>) => {
-        this.props.onDoubleClick?.(this.props, this.props.path, e);
-    };
-
-    private handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
-        this.props.onMouseEnter?.(this.props, this.props.path, e);
-    };
-
-    private handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
-        this.props.onMouseLeave?.(this.props, this.props.path, e);
-    };
-
-    private handleDragStart = (e: React.DragEvent<HTMLDivElement>) => {
-        this.props.onDragStart?.(this.props, this.props.path, e);
-    };
-
-    private handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
-        this.props.onDragOver?.(this.props, this.props.path, e);
-    };
-
-    private handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
-        this.props.onDrop?.(this.props, this.props.path, e);
-    };
-
-    private handleDragEnd = (e: React.DragEvent<HTMLDivElement>) => {
-        this.props.onDragEnd?.(this.props, this.props.path, e);
-    };
-
-    private handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
-        this.props.onDragEnter?.(this.props, this.props.path, e);
-    };
-
-    private handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
-        this.props.onDragLeave?.(this.props, this.props.path, e);
-    };
-}

package/src/components/tree2.scss

@@ -1,69 +0,0 @@
-
-// blueprint tree drag and drop styles
-
-//.bp5-tree-node-dragging{
-//    opacity: 0.5;
-//    background-color: green !important;
-//    box-shadow: none;
-//}
-//.bp5-tree-node-dragover{
-//    opacity: 0.5;
-//    background-color: red;
-//    box-shadow: none;
-//}
-.bp5-tree-node-dragover{
-  //opacity: 0.5;
-  //background-color: red;
-  //box-shadow: none;
-  outline: var(--pt-intent-primary) solid 2px;
-  outline-offset: -2px;
-}
-
-.bp5-tree-drop-spacer {
-  width: 100%;
-  height: 0;
-  overflow: visible;
-  font-size: 0;
-  background: none;
-  pointer-events: none;
-  position: relative;
-
-  div{
-    width: 100%;
-    min-height: 10px;
-    background: transparent;
-    position: absolute;
-    transform: translateY(-50%);
-    z-index: 100;
-  }
-  .bp5-tree-dragging-node &{
-    pointer-events: auto;
-  }
-}
-
-.bp5-tree-node-content{
-  transition: background-color 0.2s ease-in-out;
-}
-
-@for $i from 1 through 10 {
-  .bp5-tree-node-content-#{$i} {
-    padding-left: calc(10px * $i);
-  }
-}
-
-.bp5-tree-node-caret{
-  padding: 7px 5px;
-}
-
-.bp5-tree-node-content:has(.bp5-icon) {
-  .bp5-tree-node-caret, .bp5-tree-node-caret-none {
-    min-width: 0px;
-  }
-
-  // because bp5-tree-node-icon is not applied on this icon
-  .bp5-icon:has(.bp5-tree-node-icon-svg), .bp5-tree-node-icon{
-    margin-right: 0px;
-    padding: 0 5px;
-    position: relative;
-  }
-}

package/src/components/treeTypes.ts

@@ -1,97 +0,0 @@
-/*
- * Copyright 2021 Palantir Technologies, Inc. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type {IconName, MaybeElement} from "@blueprintjs/core";
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-export interface TreeNodeInfo<T = {}> {
-    /**
-     * A space-delimited list of class names for this tree node element.
-     */
-    className?: string;
-
-    /**
-     * Child tree nodes of this node.
-     */
-    childNodes?: Array<TreeNodeInfo<T>>;
-
-    /**
-     * Whether this tree node is non-interactive. Enabling this prop will ignore
-     * mouse event handlers (in particular click, down, enter, leave).
-     */
-    disabled?: boolean;
-
-    /**
-     * Whether the caret to expand/collapse a node should be shown.
-     * If not specified, this will be true if the node has children and false otherwise.
-     */
-    hasCaret?: boolean;
-
-    /**
-     * The name of a Blueprint icon (or an icon element) to render next to the node's label.
-     */
-    icon?: IconName | MaybeElement;
-
-    /**
-     * A unique identifier for the node.
-     */
-    id: string | number;
-
-    /**
-     */
-    isExpanded?: boolean;
-
-    /**
-     * Whether this node is selected.
-     *
-     * @default false
-     */
-    isSelected?: boolean;
-
-    /**
-     * The main label for the node.
-     */
-    label: string | React.JSX.Element;
-
-    /**
-     * A secondary label/component that is displayed at the right side of the node.
-     */
-    secondaryLabel?: string | MaybeElement;
-
-    /**
-     * An optional custom user object to associate with the node.
-     * This property can then be used in the `onClick`, `onContextMenu` and `onDoubleClick`
-     * event handlers for doing custom logic per node.
-     */
-    nodeData?: T;
-
-    /**
-     * Whether this node can be dragged. If false, drag events will not be enabled for this node.
-     */
-    draggable?: boolean;
-
-    /**
-     * Whether this node can be a drop target. If false, drop events will not be enabled for this node.
-     */
-    droppable?: boolean;
-}
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-export type TreeEventHandler<T = {}> = (
-    node: TreeNodeInfo<T>,
-    nodePath: number[],
-    e: React.MouseEvent<HTMLElement>,
-) => void;