uiconfig-blueprint 0.1.0-dev.6 → 0.1.0-dev.8

package/src/components/TreeNode2.tsx

@@ -0,0 +1,192 @@
+/*
+ * 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 {ChevronRight} 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 (
+                <ChevronRight
+                    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/common.scss

@@ -1,7 +1,10 @@
+@import './tree2.scss';
 
 .bpButton {
   display: flex;
   justify-content: space-between;
+  min-height: 24px;
+  //max-height: 40px;
 }
 
 .bpIconButton {

package/src/components/tree2.scss

@@ -0,0 +1,42 @@
+
+// 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;
+  }
+}

package/src/components/treeTypes.ts

@@ -0,0 +1,97 @@
+/*
+ * 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;

package/src/renderer.scss

@@ -54,11 +54,23 @@
 @import "components/common";
 @import "bpComponents/index";
 
-.bp5-form-group.bp5-inline label.bp5-label{
+:root { font-family: Inter, sans-serif; }
+
+.bp5-vars, :root {
+  --pt-text-color: var(--gray-1) !important;
+  --pt-font-family-sans: Inter, ui-sans-serif, -apple-system,"BlinkMacSystemFont","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Open Sans","Helvetica Neue","Icons16",sans-serif;
+}
+.bp5-dark {
+  --pt-text-color: var(--light-gray2) !important;
+  --pt-font-family-sans: Inter, ui-sans-serif, -apple-system,"BlinkMacSystemFont","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Open Sans","Helvetica Neue","Icons16",sans-serif;
+}
+
+.bp5-form-group.bp5-inline label.bp5-label, .switch .bp5-label {
   text-overflow: ellipsis;
   overflow: hidden;
-  max-width: calc(min(50%, 7*$pt-font-size-small));
-  width: 50%;
+  max-width: calc(8 * $pt-font-size-small);
+  min-width: calc(8 * $pt-font-size-small);
+  width: calc(8 * $pt-font-size-small);
   font-size: $pt-font-size-small;
   height: $pt-input-height;
   line-height: normal;
@@ -68,11 +80,16 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
+
+  color: $dark-gray1;
+  .bp5-dark & {
+    color: $gray5;
+  }
 }
 
 .switch{
   display: flex;
-  justify-content: space-between;
+  justify-content: left;
   align-items: center;
   flex-direction: row-reverse;
   margin-bottom: 0;
@@ -94,7 +111,7 @@
 }
 
 :root{
-  --background-color-transition-time: 0.1s;
+  --background-color-transition-time: 0.2s;
   --background-color-transition: background-color var(--background-color-transition-time) ease-in-out;
 }
 .bp5-panel-stack-view {
@@ -114,6 +131,10 @@
   position: relative;
   overflow-y: scroll;
   padding: 0 0 0 0;
+
+  .bp5-panel-stack2-header{
+    box-shadow: none;
+  }
 }
 #blueprintUiContainer {
   height: 100%;
@@ -126,7 +147,7 @@
   width: var(--blueprint-ui-container-width);
   pointer-events: auto;
   max-height: calc(100% - 40px);
-  border-radius: 0.5rem;
+  border-radius: $pt-grid-size;
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
@@ -144,6 +165,7 @@
 .folderContent {
   flex: 1 1 auto;
   max-width: 100%;
+  margin-left: calc($pt-grid-size * 0.5);
 }
 
 //button {
@@ -210,3 +232,14 @@
 .bp5-panel-stack2-view{
   background: transparent;
 }
+
+.bp5-slider-handle{
+  border-radius: 100%;
+}
+
+.bp5-collapse .bp5-collapse-body {
+  transition: transform 0.3s var(--pt-transition-ease), opacity 0.3s;
+}
+.bp5-collapse {
+  transition: height 0.3s var(--pt-transition-ease);
+}