uiconfig-blueprint 0.1.0-dev.5 → 0.1.0-dev.7

package/src/bpComponents/BPDropdownInputComponent.tsx

@@ -59,12 +59,13 @@ export class BPDropdownInputComponent extends BPInputComponent<string|number, BP
                 activeItem={item}
                 key={this.props.config.uuid}
                 disabled={this.state.disabled}
+                fill={true}
                 popoverProps={{
                     minimal: true,
                 }}
                 popoverTargetProps={{
                     style: {
-                        height: "100%"
+                        height: "var(--pt-input-height)",
                     }
                 }}
                 noResults={<MenuItem disabled={true} text="No results."  roleStructure="listoption" />}

package/src/bpComponents/BPFileComponent.tsx

@@ -13,6 +13,7 @@ export type BPFileComponentState = BPValueComponentState<StateValue> & {
 type BPFileComponentExtras = {fileLoader?: {load: (v: string|File|{path: string, file: File|Blob})=>Promise<FileImportType>}}
 type BPFileComponentContextType = UiConfigRendererContextType & BPFileComponentExtras
 
+// todo make this abstract?
 // @ts-ignore
 export class BPFileComponent<T extends FileImportType=FileImportType, TP = {}> extends BPValueComponent<T | null, BPFileComponentState, StateValue> {
     declare context: BPFileComponentContextType
@@ -67,7 +68,7 @@ export class BPFileComponent<T extends FileImportType=FileImportType, TP = {}> e
     // }
 
     renderPreviewSlot() {
-        return <img src={"https://playground.ijewel3d.com/logo_black.png"}
+        return <img src={"https://threepipe.org/logo.svg"}
                     style={{width: "100%", maxHeight: "80px", objectFit: "contain"}}/>
     }
 
@@ -76,9 +77,20 @@ export class BPFileComponent<T extends FileImportType=FileImportType, TP = {}> e
     //     return super.updateStateValue(state, last);
     // }
 
+    protected flexBasis = "100%"
+
     render() {
-        return !this.state.hidden ? (
-            <FormGroupComponent label={this.state.label} flexBasis={"100%"} disabled={this.state.disabled}>
+        let show = !this.state.hidden
+        // todo - document hideOnEmpty. it hides the whole component if there is no value and no preview. (used in SSReflectionPlugin)
+        if (show && this.props.config.hideOnEmpty && !this.state.preview && !this.state.value) {
+            show = false
+        }
+        return show ? (
+            <FormGroupComponent
+                label={this.state.label}
+                disabled={this.state.disabled}
+                flexBasis={this.state.baseWidth ?? this.flexBasis}
+            >
                 <FileComponent previewSlot={this.renderPreviewSlot()} state={this.state} onChange={(s) =>
                     this.updateStateValue({...this.state, preview: undefined, ...s}) // todo: set loading while this promise is happening.
                 } key={this.props.config.uuid}/>

package/src/bpComponents/BPFolderComponent.scss

@@ -29,7 +29,7 @@
   background-color: $light-gray4 !important;
 }
 .bp5-dark .folder-card {
-  background-color: $dark-gray3 !important;
+  background-color: $dark-gray1 !important;
 }
 
 
@@ -68,11 +68,15 @@
   background-color: $dark-gray1 !important;
 
   &:hover {
-      background-color: $dark-gray3 !important;
+      background-color: $dark-gray2 !important;
   }
 
   &:active {
-      background-color: $dark-gray5 !important;
+      background-color: $dark-gray2 !important;
+  }
+
+  &.folder-trigger-button-expanded{
+    background-color: $dark-gray2 !important;
   }
 }
 
@@ -93,6 +97,7 @@
     //margin-left: $pt-grid-size;
     padding-top: 6px;
     padding-bottom: 6px;
+    min-height: 36px;
   }
 }
 

package/src/bpComponents/BPFolderComponent.tsx

@@ -5,6 +5,9 @@ import {ConfigObject} from "../ConfigObject";
 import {PanelActions} from "@blueprintjs/core/lib/esm/components/panel-stack2/panelTypes";
 import {safeSetProperty} from 'ts-browser-helpers'
 import {BPContainerComponent, BPContainerComponentState} from './BPContainerComponent'
+import classNames from "classnames";
+import {Classes} from "@blueprintjs/core/src/common";
+import {AnimationStates} from "@blueprintjs/core/lib/esm/components/collapse/collapse";
 
 export type BPFolderComponentState = BPContainerComponentState & {
 }
@@ -39,18 +42,21 @@ export class BPFolderComponent extends BPContainerComponent<BPFolderComponentSta
                 enabled={enabledToggle ? this.context.methods.getRawValue(enabledToggle) : undefined}
                 onEnabledChange={(e) => enabledToggle && this.context.methods.setValue(enabledToggle, e.target.checked, {}).then(() => this.setState(this.state))}
             >
-                <Collapse isOpen={this.state.expanded} keepChildrenMounted={false}>
+                <Collapse2 isOpen={this.state.expanded} keepChildrenMounted={true} transitionDuration={300}>
                     <div className="folder-children" style={{listStyleType: "none", paddingLeft: this.props.level??0 > 2 ? "6px" : 0}}> {/*todo use parameter instead of const 6*/}
-                        {this.state.children.map((c, i) => <ConfigObject key={'c' + i} {...this.props} config={c}
-                                                                         level={(this.props.level ?? 0) + 1}/>)}
+                        {this.state.children.map((c, i) =>
+                            <ConfigObject key={'c' + i} {...this.props} config={c}
+                                          level={(this.props.level ?? 0) + 1}/>
+                        )}
                     </div>
-                </Collapse>
+                </Collapse2>
             </FolderHeadCard>
         ) : null
     }
 }
 
 export const FolderHeadCard: React.FC<React.PropsWithChildren<{ open: boolean, label: string, minimal: boolean, level: number, disabled?: boolean, enabled?: boolean, onEnabledChange?: ChangeEventHandler<HTMLInputElement>, onClick: DOMAttributes<HTMLElement>['onClick'] }>> = (props) => {
+    const hasEnabled = (props.enabled !== undefined)
     return (
         <div
             // interactive={!props.open}
@@ -76,7 +82,7 @@ export const FolderHeadCard: React.FC<React.PropsWithChildren<{ open: boolean, l
                 {/*</Button>*/}
 
                 <Button
-                    className="folder-trigger-button"
+                    className={"folder-trigger-button " + (props.open ? "folder-trigger-button-expanded" : "")}
                     // fill={!props.minimal}
                     fill={true}
                     onClick={props.onClick}
@@ -85,16 +91,18 @@ export const FolderHeadCard: React.FC<React.PropsWithChildren<{ open: boolean, l
                     small={props.minimal}
                     style={props.level ? {marginLeft: "6px"} : {fontSize: "0.95rem", paddingTop: "8px", paddingBottom: "8px"}}
                     intent={props.open ? Intent.PRIMARY : Intent.NONE}
-                    icon={props.enabled !== undefined  && <span style={{minWidth: '20px'}}></span>} // adding a span here will center the text in the button
-                    rightIcon={(
-                        <Icon icon="chevron-right" style={{
-                            rotate: props.open ? "90deg" : "0deg",
-                            transition: "rotate 0.25s ease-in-out"
-                        }}/>
+                    // icon={props.enabled !== undefined  && <span style={{minWidth: '20px'}}></span>} // adding a span here will center the text in the button
+                    icon={(
+                        <>
+                            <Icon icon="caret-right" style={{
+                                rotate: props.open ? "90deg" : "0deg",
+                                transition: "rotate 0.25s ease-in-out"
+                            }}/>
+                        </>
                     )}>{props.label}
                 </Button>
-                {(props.enabled !== undefined) && <Checkbox
-                    style={{margin: 0, position: 'absolute', left: '5px'}}
+                {hasEnabled && <Checkbox
+                    style={{margin: 0, position: 'absolute', left: '10px'}}
                     large inline
                     defaultChecked={props.enabled}
                     onChange={props.onEnabledChange}
@@ -106,3 +114,67 @@ export const FolderHeadCard: React.FC<React.PropsWithChildren<{ open: boolean, l
         </div>
     )
 }
+
+export class Collapse2 extends Collapse{
+    private contentsRefHandler2 = (el: HTMLElement | null) => {
+        // @ts-ignore
+        this.contents = el;
+        // @ts-ignore
+        if (this.contents != null) {
+            // @ts-ignore
+            const height = this.contents.clientHeight;
+            this.setState({
+                animationState: this.props.isOpen ? AnimationStates.OPEN : AnimationStates.CLOSED,
+                height: height === 0 ? undefined : `${height}px`,
+                heightWhenOpen: height === 0 ? undefined : height,
+            });
+        }
+    };
+
+    public render() {
+        const isContentVisible = this.state.animationState !== AnimationStates.CLOSED;
+        const shouldRenderChildren = isContentVisible || this.props.keepChildrenMounted;
+        // const displayWithTransform = isContentVisible && this.state.animationState !== AnimationStates.CLOSING;
+        const isAutoHeight = this.state.height === "auto";
+
+        const containerStyle = {
+            height: isContentVisible ? this.state.height : undefined,
+            overflowY: isAutoHeight ? "visible" : undefined,
+            // transitions don't work with height: auto
+            transition: isAutoHeight ? "none" : undefined,
+        };
+
+        const contentsStyle = {
+            // only use heightWhenOpen while closing
+            // transform: displayWithTransform ? "translateY(0)" : `translateY(-${this.state.heightWhenOpen}px)`,
+            // transitions don't work with height: auto
+            // transition: isAutoHeight ? "none" : undefined,
+            display: "block", // for opacity animation
+            visibility: isContentVisible ? "visible" : "hidden",
+            opacity: this.state.animationState === AnimationStates.CLOSING ||  this.state.animationState === AnimationStates.CLOSED ? 0.1 : 1,
+        } as React.CSSProperties;
+
+        // if(isContentVisible && !isAutoHeight && this.state.heightWhenOpen && this.state.height){
+        //     const h = parseInt(this.state.height)
+        //     contentsStyle.opacity = h / this.state.heightWhenOpen;
+        //     console.log(contentsStyle.opacity)
+        // }
+
+        return React.createElement(
+            this.props.component!,
+            {
+                className: classNames(Classes.COLLAPSE, this.props.className),
+                style: containerStyle,
+            },
+            <div
+                className={Classes.COLLAPSE_BODY}
+                ref={this.contentsRefHandler2}
+                style={contentsStyle}
+                aria-hidden={!isContentVisible}
+            >
+                {shouldRenderChildren ? this.props.children : null}
+            </div>,
+        );
+    }
+
+}

package/src/bpComponents/BPInputComponent.tsx

@@ -26,7 +26,10 @@ export abstract class BPInputComponent<
 
     render() {
         return !this.state.hidden ? (
-            <FormGroupComponent disabled={this.state.disabled} label={this.state.label} flexBasis={this.flexBasis}>
+            <FormGroupComponent disabled={this.state.disabled}
+                                label={this.state.label}
+                                flexBasis={this.state.baseWidth ?? this.flexBasis}
+            >
                 {this.renderInput()}
             </FormGroupComponent>
         ) : null

package/src/bpComponents/BPNumberInputComponent.tsx

@@ -27,9 +27,10 @@ export class BPNumberInputComponent extends BPInputComponent<number> {
                 disabled={this.state.disabled}
                 readOnly={this.state.readOnly}
                 defaultValue={this.state.value}
+                fill={true}
                 ref={this._inputs[0]}
                 key={this.props.config.uuid}
-                onChange2={this._onChange} fill={false}/>
+                onChange2={this._onChange}/>
         )
     }
 }

package/src/bpComponents/BPTextInputComponent.tsx

@@ -20,6 +20,7 @@ export class BPTextInputComponent extends BPInputComponent<string> {
                 disabled={this.state.disabled}
                 readOnly={this.state.readOnly}
                 key={this.props.config.uuid}
+                fill={true}
                 onChange={this._onChange}/>
         )
     }

package/src/bpComponents/BPToggleInputComponent.tsx

@@ -16,14 +16,17 @@ export class BPToggleInputComponent extends BPInputComponent<boolean> {
         return (
             <Switch alignIndicator="right" defaultChecked={this.state.value}
                     disabled={this.state.disabled} readOnly={this.state.readOnly}
-                    label={this.state.label} onChange={this._onChange}
-                    className="switch" innerLabelChecked="on" innerLabel="off"/>
+                    labelElement={(<span className={"bp5-label"} title={this.state.label}>{this.state.label}</span>)} onChange={this._onChange}
+                    inline={false} large={false}
+                    className="switch"/>
         )
     }
 
     render() {
         return !this.state.hidden ? (
-            <div className="xPaddedContent folderContent" style={{flexBasis: "100%"}}>
+            <div className="xPaddedContent folderContent"
+                 style={{flexBasis: this.state.baseWidth ?? this.flexBasis}}
+            >
                 {this.renderInput()}
             </div>
         ) : null

package/src/bpComponents/BPTreeComponent.tsx

@@ -1,5 +1,7 @@
+import {Tree2} from "../components/Tree2";
 import {BPComponent, BPComponentProps, BPComponentState, UiConfigRendererContextType} from "./BPComponent";
-import {Tree, TreeNodeInfo} from "@blueprintjs/core";
+import {TreeNodeInfo} from "@blueprintjs/core";
+import React from "react";
 
 export type BPTreeComponentState<T = {}> = BPComponentState & {
     nodes: TreeNodeInfo<T>[]
@@ -8,8 +10,8 @@ export type BPTreeComponentState<T = {}> = BPComponentState & {
 // https://github.com/palantir/blueprint/blob/develop/packages/docs-app/src/examples/core-examples/treeExample.tsx
 type NodePath = (string|number)[];
 
-export abstract class BPTreeComponent<T = {}, TConfigVal extends any /*|PrimitiveVal|void*/ = void> extends BPComponent<TConfigVal, BPTreeComponentState<T>> {
-    constructor(props: BPComponentProps<TConfigVal>, context: UiConfigRendererContextType) {
+export abstract class BPTreeComponent<T = {}, TConfigVal extends any /*|PrimitiveVal|void*/ = void> extends BPComponent<TConfigVal, BPTreeComponentState<T>, BPComponentProps<TConfigVal> & {className: string}> {
+    constructor(props: BPComponentProps<TConfigVal> & {className: string}, context: UiConfigRendererContextType) {
         super(props, context, {nodes: []});
     }
 
@@ -53,7 +55,6 @@ export abstract class BPTreeComponent<T = {}, TConfigVal extends any /*|Primitiv
     protected _getNodePath(id: string, nodes?: TreeNodeInfo<T>[]): NodePath {
         let path1: NodePath|null = null
         this._forEachNode(nodes ?? this.state.nodes, (node, path) => {
-            if(!path1) return
             if (node.id === id) path1 = path
         })
         return path1 ?? []
@@ -116,7 +117,7 @@ export abstract class BPTreeComponent<T = {}, TConfigVal extends any /*|Primitiv
     async setSelected(id?: string, expand = false) {
         const nodes = this._cloneNodes(n => n.isSelected = n.id === id)
         if(expand && id!==undefined){
-            const parents = this._getNodePath(id)
+            const parents = this._getNodePath(id, nodes)
             for (let i = 0; i < parents.length; i++) {
                 const node = this._infoMap.get(parents[i])
                 if(node) node.isExpanded = true
@@ -190,8 +191,15 @@ export abstract class BPTreeComponent<T = {}, TConfigVal extends any /*|Primitiv
         e.stopPropagation()
     }
 
+    protected _canDropNode(_sourceNode: TreeNodeInfo<T>, _sourcePath: NodePath, _targetNode: TreeNodeInfo<T>, _targetPath: NodePath, _index?: number) {
+        return true
+    }
+    protected _onDropNode(_sourceNode: TreeNodeInfo<T>, _sourcePath: NodePath, _targetNode: TreeNodeInfo<T>, _targetPath: NodePath, _e?: React.DragEvent, _index?: number) {
+        return
+    }
+
     render() {
-        const TreeT = Tree.ofType<T>()
+        const TreeT = Tree2.ofType<T>()
         return !this.state.hidden ? (
             <div
                 style={{width: "100%", height: "100%"}}
@@ -200,7 +208,14 @@ export abstract class BPTreeComponent<T = {}, TConfigVal extends any /*|Primitiv
             >
             <TreeT
                 contents={this.state.nodes}
-                className="folderContent"
+                className={"folderContent " + (this.props.className||'')}
+                canDropNode={(node, path, targetNode, targetPath, index) => {
+                    return this._canDropNode(node, path, targetNode, targetPath, index)
+                }}
+                onNodeDrop={(node, path, targetNode, targetPath, e, index) => {
+                    console.log(node, path, targetNode, targetPath, e);
+                    this._onDropNode(node, path, targetNode, targetPath, e, index)
+                }}
                 onNodeExpand={(node, _path, _e) => {
                     this._onNodeExpandCollapse(node.id)
                 }}

package/src/components/ConfigurationPanelComponent.tsx

@@ -31,6 +31,7 @@ export function ConfigurationPanelComponent({config}: { config: UiObjectConfig<a
         } as Panel<{ config: UiObjectConfig }>
     }, [config])
     const [currentPanelStack, setCurrentPanelStack] = React.useState<Array<Panel<{ config: UiObjectConfig }>>>([stackItem()]);
+    const [isMinimized, setIsMinimized] = React.useState(false);
 
     React.useEffect(() => {
         setCurrentPanelStack([stackItem()])
@@ -40,7 +41,7 @@ export function ConfigurationPanelComponent({config}: { config: UiObjectConfig<a
 
     return (
         <VisualStyleContext.Provider value={{...defaultVisualStyle, ...style}}>
-        <Card className={`bpInspectorCard ${style.darkMode?Classes.DARK:""}`}>
+        <Card className={`bpInspectorCard ${style.darkMode?Classes.DARK:""}`} style={{display: isMinimized ? 'none' : 'block'}}>
             <PanelStack2 className="inspectorPanelStack"
                          showPanelHeader={true}
                          renderActivePanelOnly={true}
@@ -48,16 +49,26 @@ export function ConfigurationPanelComponent({config}: { config: UiObjectConfig<a
                          onClose={() => setCurrentPanelStack(currentPanelStack.slice(0, -1))}
                          stack={currentPanelStack}/>
             <div className={"bpPanelStackHeaderOverlay " + Classes.PANEL_STACK2_HEADER}>
-                <Popover targetProps={{style: {position: "absolute", right: "5px"}}}
+                <Popover targetProps={{style: {position: "absolute", right: "30px"}}}
                          minimal={true}
                          targetTagName={"div"}
                     content={
                     <ThemeSettingsMenuComponent/>
                 } placement="bottom">
-                    <Button icon="cog" small minimal text="" />
+                    <Button icon="more" small minimal text="" />
                 </Popover>
+                <Button icon="minus" small minimal text="" style={{position: "absolute", right: "5px"}}
+                        onClick={() => {
+                            setIsMinimized(!isMinimized);
+                        }}
+                />
             </div>
         </Card>
+        {isMinimized && <Button icon="cog" small text="Configuration" style={{position: "absolute", right: "5px"}}
+                onClick={() => {
+                    setIsMinimized(!isMinimized);
+                }}
+        />}
         </VisualStyleContext.Provider>
     )
 }

package/src/components/ExtendedNumericInput.tsx

@@ -49,7 +49,7 @@ export class ExtendedNumericInput extends React.PureComponent<HTMLInputProps & N
 
     public render() {
         const {value} = this.state;
-        const props2: HTMLInputProps & NumericInputProps & { onChange2?: (v: number, last?: boolean) => void } = {...this.props}
+        const props2: HTMLInputProps & NumericInputProps & { onChange2?: (v: number, last?: boolean) => void } = {...this.props, leftIcon: undefined}
         if (props2.onChange2) delete props2.onChange2
 
         return (

package/src/components/InspectorStackComponent.tsx

@@ -6,7 +6,7 @@ import {UiConfigRendererContext} from '../bpComponents/BPComponent'
 
 // import {ViewerAppContext} from "./ViewerAppComponent";
 
-export function InspectorStackComponent({config}: { config: UiObjectConfig<any, 'panel'> }) {
+export function InspectorStackComponent({config, className}: { config: UiObjectConfig<any, 'panel'>, className?: string }) {
     const renderer = React.useContext(UiConfigRendererContext)
     const stackItem = React.useCallback(() => {
         return {
@@ -30,7 +30,7 @@ export function InspectorStackComponent({config}: { config: UiObjectConfig<any,
     }, [setCurrentPanelStack, stackItem])
 
     return (
-        <Card className="bpInspectorCard" style={{borderRadius: 0}}>
+        <Card className={"bpInspectorCard " + className||''} style={{borderRadius: 0}}>
             <PanelStack2 className="inspectorPanelStack"
                          showPanelHeader={true}
                          renderActivePanelOnly={true}