uiconfig-blueprint 0.1.0-dev.2 → 0.1.0-dev.4

package/src/bpComponents/BPSliderInputComponent.tsx

@@ -46,7 +46,11 @@ export class BPSliderInputComponent extends BPInputComponent<number, BPSliderCom
                 // labelValues={[]}
                 onChange={(v) => {
                     if(this.state.readOnly) return
-                    this.setValue(v)
+                    this.setValue(v, false)
+                }}
+                onRelease={(v) => {
+                    if(this.state.readOnly) return
+                    this.setValue(v, true)
                 }}
             />
         ),(
@@ -56,13 +60,21 @@ export class BPSliderInputComponent extends BPInputComponent<number, BPSliderCom
                 disabled={this.state.disabled}
                 value={Math.min(this.state.max, Math.max(this.state.min, this.state.value))}
                 key={this.props.config.uuid + '_input'}
-                min={this.state.min} max={this.state.max} stepSize={this.state.step}
+                min={this.state.min} max={this.state.max}
+                stepSize={this.state.step}
                 minorStepSize={this.state.step/10}
                 majorStepSize={this.state.step*10}
                 buttonPosition="none"
                 onValueChange={(v) => {
                     if(this.state.readOnly) return
-                    this.setValue(v)
+                    this.setValue(v, false)
+                }}
+                onBlur={(e) => {
+                    if(this.state.readOnly) return
+                    this.setValue(parseFloat(e.currentTarget.value), true)
+                }}
+                onKeyDown={(e) => {
+                    if (e.code === 'Enter') this.setValue(parseFloat(e.currentTarget.value), true)
                 }}
             />)
     ]

package/src/bpComponents/BPTreeComponent.tsx

@@ -1,5 +1,6 @@
 import {BPComponent, BPComponentProps, BPComponentState, UiConfigRendererContextType} from "./BPComponent";
 import {Tree, TreeNodeInfo} from "@blueprintjs/core";
+import {PrimitiveVal} from "uiconfig.js";
 
 export type BPTreeComponentState<T = {}> = BPComponentState & {
     nodes: TreeNodeInfo<T>[]
@@ -8,7 +9,7 @@ export type BPTreeComponentState<T = {}> = BPComponentState & {
 // https://github.com/palantir/blueprint/blob/develop/packages/docs-app/src/examples/core-examples/treeExample.tsx
 type NodePath = number[];
 
-export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPComponent<TConfigVal, BPTreeComponentState<T>> {
+export abstract class BPTreeComponent<T = {}, TConfigVal extends PrimitiveVal|void = void> extends BPComponent<TConfigVal, BPTreeComponentState<T>> {
     constructor(props: BPComponentProps<TConfigVal>, context: UiConfigRendererContextType) {
         super(props, context, {nodes: []});
     }
@@ -32,10 +33,10 @@ export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPCompo
 
     protected abstract _getRootNodes(): T[]
 
-    protected async _onNodeClick(_id: string | number, _path: number[]) {
+    protected async _onNodeClick(_id: string | number) {
     }
 
-    protected async _onNodeDoubleClick(_id: string | number, _path: number[]) {
+    protected async _onNodeDoubleClick(_id: string | number) {
     }
 
     protected _cloneNodes(callback?: (t:TreeNodeInfo<T>)=>void, state?: TreeNodeInfo<T>[]): TreeNodeInfo<T>[] {
@@ -50,13 +51,13 @@ export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPCompo
         })
     }
 
-    protected _forEachNode<T>(nodes: TreeNodeInfo<T>[] | undefined, callback: (node: TreeNodeInfo<T>) => void) {
+    protected _forEachNode<T>(nodes: TreeNodeInfo<T>[] | undefined, callback: (node: TreeNodeInfo<T>, path: NodePath) => void, path: NodePath = []) {
         if (nodes === undefined) {
             return nodes;
         }
         for (const node of nodes) {
-            callback(node);
-            this._forEachNode(node.childNodes, callback);
+            callback(node, path);
+            this._forEachNode(node.childNodes, callback, [...path, node.id] as NodePath);
         }
         return nodes
     }
@@ -64,16 +65,16 @@ export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPCompo
         callback(Tree.nodeFromPath(path, nodes));
     }
 
-    protected async _onNodeExpandCollapse(_id: string | number, _path: number[]) {
+    protected async _onNodeExpandCollapse(_id: string | number, expanded?: boolean) {
         const nodes = this._cloneNodes()
         const node = this._infoMap.get(_id)
         if (!node) return
-        node.isExpanded = !node.isExpanded
+        node.isExpanded = expanded ?? !node.isExpanded
         // forNodeAtPath(nodes, _path, node => (node.isExpanded = !node.isExpanded));
         await this.setStatePromise({...this.state, nodes})
     }
 
-    protected async _onNodeContextMenu(_id: string | number, _path: number[]) {
+    protected async _onNodeContextMenu(_id: string | number) {
     }
 
     protected buildData(data: TreeNodeInfo<T>[], obj: T, _?: any, _2?: any) {
@@ -116,28 +117,90 @@ export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPCompo
         super.componentWillUnmount();
     }
 
+    findSelectedNode(nodes?: TreeNodeInfo<T>[]): TreeNodeInfo<T> | undefined {
+        if (!nodes) nodes = this.state.nodes
+        for (const node of nodes) {
+            if (node.isSelected) return node
+            if (node.childNodes) {
+                const res = this.findSelectedNode(node.childNodes)
+                if (res) return res
+            }
+        }
+    }
+    getFlatNodes(onlyVisible = false, nodes?: TreeNodeInfo<T>[], res: TreeNodeInfo<T>[] = []): TreeNodeInfo<T>[] {
+        if (!nodes) nodes = this.state.nodes
+        for (const node of nodes) {
+            res.push(node)
+            if (node.childNodes && (!onlyVisible || node.isExpanded)) this.getFlatNodes(onlyVisible, node.childNodes, res)
+        }
+        return res
+    }
+
+    protected _handleKeyDown(e: React.KeyboardEvent) {
+        const nodes = this.getFlatNodes(true)
+        let current, next, previous;
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i]
+            if (node.isSelected) {
+                current = node
+                next = i < nodes.length - 1 ? nodes[i + 1] : undefined
+                previous = i > 0 ? nodes[i - 1] : undefined
+                break
+            }
+        }
+        switch (e.key) {
+            case "ArrowUp":
+                if (previous) this._onNodeClick(previous.id)
+                break
+            case "ArrowDown":
+                if (next) this._onNodeClick(next.id)
+                break
+            case "ArrowRight":
+                if (current) this._onNodeExpandCollapse(current.id, true)
+                break
+            case "ArrowLeft":
+                if (current) this._onNodeExpandCollapse(current.id, false)
+                break
+            case "Escape":
+                if (current) this._onNodeClick(current.id)
+                break
+            case "Enter":
+                if (current) this._onNodeDoubleClick(current.id)
+                break
+            default:
+                return
+        }
+        e.preventDefault()
+        e.stopPropagation()
+    }
+
     render() {
         const TreeT = Tree.ofType<T>()
         return !this.state.hidden ? (
+            <div
+                style={{width: "100%", height: "100%"}}
+                 onKeyDown={e => this._handleKeyDown(e)}
+                tabIndex={0}
+            >
             <TreeT
                 contents={this.state.nodes}
                 className="folderContent"
                 onNodeExpand={(node, _path, _e) => {
-                    this._onNodeExpandCollapse(node.id, _path)
+                    this._onNodeExpandCollapse(node.id)
                 }}
                 onNodeCollapse={(node, _path, _e) => {
-                    this._onNodeExpandCollapse(node.id, _path)
+                    this._onNodeExpandCollapse(node.id)
                 }}
                 onNodeClick={(node, _path, _e) => {
-                    this._onNodeClick(node.id, _path)
+                    this._onNodeClick(node.id)
                 }}
                 onNodeDoubleClick={(node, _path, _e) => {
-                    this._onNodeDoubleClick(node.id, _path)
+                    this._onNodeDoubleClick(node.id)
                 }}
                 onNodeContextMenu={(node, _path, _e) => {
-                    this._onNodeContextMenu(node.id, _path)
+                    this._onNodeContextMenu(node.id)
                 }}
-            />
+            /></div>
         ) : null
     }
 }

package/src/bpComponents/BPValueComponent.tsx

@@ -1,30 +1,52 @@
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
 import {BPLabelledComponent, BPLabelledComponentState} from "./BPLabelledComponent";
+import {equalsPrimitive, PrimitiveVal} from "uiconfig.js";
 
 export type BPValueComponentState<TStateValue> = BPLabelledComponentState & {
     value: TStateValue
 }
 
-export abstract class BPValueComponent<TValue, TState extends BPValueComponentState<TStateValue>, TStateValue> extends BPLabelledComponent<TValue, TState> {
+export abstract class BPValueComponent<TValue extends PrimitiveVal, TState extends BPValueComponentState<TStateValue>, TStateValue> extends BPLabelledComponent<TValue, TState> {
 
     protected constructor(props: BPComponentProps<TValue>, context: UiConfigRendererContextType, state: TState) {
         super(props, context, state);
+        this.setValue = this.setValue.bind(this)
     }
 
     abstract convertValueToState(value: TValue, state: TState): TState;
 
     abstract convertStateToValue(state: TState): Promise<TValue>;
 
+    // this should be state.value ideally which is initialValue in parent component
+    // a separate variable is made here so that it can be undefined in the beginning.
+    private _lastValRef: TValue | undefined
+
     getUpdatedState(state: TState): TState {
-        const val = this.context.methods.getValue(this.props.config)
+        const val = this.context.methods.getValue<TValue>(this.props.config, this._lastValRef, false) // this has to be false otherwise the children component will rerender everytime. like sliders
+        if(this._lastValRef !== undefined && val !== undefined){
+            // changed from outside, so we need to update the children
+            this.keyVersion++
+        }
+        this._lastValRef = val
+        // console.log('getUpdatedState', val);
         state = super.getUpdatedState(state)
-        return val ? this.convertValueToState(val, state) : state
+        state = val !== undefined ? this.convertValueToState(val, state) : state
+        return state
     }
 
     protected _previousLast = false
 
+    // is this really required?
     doesNeedRefresh(state: TState, _last?: boolean): boolean {
-        return this._previousLast !== _last || this.state.value !== state.value
+        const needsRefresh = this._previousLast !== _last || !equals(this.state.value, state.value);
+        this._previousLast = _last ?? true;
+        // console.log('doesNeedRefresh', needsRefresh, this.state.value, state.value);
+        return needsRefresh;
+    }
+
+    setState(state: TState, callback?: () => void) {
+        // this.keyVersion++ // dont in getUpdatedState
+        super.setState(state, callback);
     }
 
     async setValue(value: TStateValue, last?: boolean) {
@@ -39,8 +61,13 @@ export abstract class BPValueComponent<TValue, TState extends BPValueComponentSt
             return
         }
         let val = await this.convertStateToValue(state)
+        this._lastValRef = val
         await this.context.methods.setValue(this.props.config, val, {last}, this.forceOnChange)
         await this.refreshConfigState(state)
     }
 
 }
+
+function equals(a: any, b: any){
+    return equalsPrimitive(a, b)
+}

package/src/components/AppToaster.tsx

@@ -8,6 +8,26 @@ import {OverlayToaster, Toaster} from "@blueprintjs/core";
 
 // hack for blueprint 5, remove in blueprint 6
 export const AppToasterRef = {ref: null as Toaster | null}
+
+/**
+ * Usage
+ * ```
+ * AppToaster().show({
+ *    message: 'Message',
+ *    intent: 'primary',
+ *    icon: "tick",
+ *    isCloseButtonShown: false,
+ *    // action: {
+ *    //     onClick: () => {},
+ *    //     text: "Cancel",
+ *    // },
+ *    timeout: 5000,
+ * }, 'toast-id')
+ *
+ * AppToaster().dismiss('toast-id')
+ * ```
+ *
+ */
 export const AppToaster = ()=>AppToasterRef.ref ?? {show: ()=>{}, dismiss: ()=>{}} as any as Toaster
 
 /**

package/src/components/ConfigurationPanelComponent.tsx

@@ -40,7 +40,7 @@ export function ConfigurationPanelComponent({config}: { config: UiObjectConfig<a
 
     return (
         <VisualStyleContext.Provider value={{...defaultVisualStyle, ...style}}>
-        <Card id="bpInspectorCard" className={style.darkMode?Classes.DARK:""} style={{height: "100%", flexGrow: "1", position: "relative"}}>
+        <Card className={`bpInspectorCard ${style.darkMode?Classes.DARK:""}`}>
             <PanelStack2 className="inspectorPanelStack"
                          showPanelHeader={true}
                          renderActivePanelOnly={true}

package/src/components/DialogContext.tsx

@@ -23,10 +23,20 @@ export function setupDialog(){
         setDialog({...dialog, isOpen: true, ...d})
     }, [dialog, setDialog])
     const close = useCallback(()=>setDialog({...dialog, isOpen: false}), [dialog, setDialog])
-    return {dialog, open, close, setDialog}
+    const setDialogState = useCallback((state: any)=>{
+        setDialog({...dialog, state})
+    }, [dialog, setDialog])
+    return {dialog, open, close, setDialog, state: dialog.state, setState: setDialogState}
 }
-export const DialogContext = createContext<{dialog: DialogStateType, open: (d: Partial<DialogStateType>)=>void, close: ()=>void, setDialog: Dispatch<SetStateAction<DialogStateType>>}>(
-    {dialog: defaultDialogContext, open: ()=>{}, close: ()=>{}, setDialog: ()=>{}}
+export const DialogContext = createContext<{
+    dialog: DialogStateType,
+    open: (d: Partial<DialogStateType>)=>void,
+    close: ()=>void,
+    setDialog: Dispatch<SetStateAction<DialogStateType>>,
+    setState: Dispatch<SetStateAction<any>>,
+    state: any
+}>(
+    {dialog: defaultDialogContext, open: ()=>{}, close: ()=>{}, setDialog: ()=>{}, setState: ()=>{}, state: {}}
 )
 export const useDialog = () => useContext(DialogContext)
 
@@ -48,6 +58,21 @@ export function DialogComponent(){
     </Dialog>)
 }
 
+interface DialogPromptState {
+    value: string,
+    intent: Intent,
+    helperText: string,
+}
+interface DialogPromptProps extends Partial<DialogStateType>{
+    closeButtonText?: string,
+    submitButtonText?: string,
+    message?: string,
+    placeholder?: string,
+    value?: string,
+    showInput?: boolean,
+    onClose?: (value: string)=>boolean|undefined|Promise<boolean|undefined>, // does not close if false
+    onSubmit?: (value: string)=>boolean|undefined|any|Promise<boolean|undefined|any>, // does not close if false
+}
 /**
  * Usage:
  * ```tsx
@@ -66,9 +91,6 @@ export function DialogComponent(){
  */
 export function useDialogPrompt(){
     const {open, close} = useDialog()
-    const {loadingState, updateLoading} = useLoadingState()
-    const [intent, setIntent] = useState<Intent>(Intent.NONE)
-    const [helperText, setHelperText] = useState('')
     const prompt = useCallback(({
         closeButtonText = 'Close',
         submitButtonText = 'Okay',
@@ -77,74 +99,98 @@ export function useDialogPrompt(){
         value = '',
         showInput = true,
         onClose, onSubmit,
-        ...props}: Partial<DialogStateType> &
-        {
-            closeButtonText?: string,
-            submitButtonText?: string,
-            message?: string,
-            placeholder?: string,
-            value?: string,
-            showInput?: boolean,
-            onClose?: (value: string)=>boolean|undefined|Promise<boolean|undefined>, // does not close if false
-            onSubmit?: (value: string)=>boolean|undefined|any|Promise<boolean|undefined|any>, // does not close if false
-    }) => {
+        ...props}: DialogPromptProps) => {
         return new Promise<string|null>((resolve)=>{
-            const state = {value}
-            const doClose = async()=> {
-                if (onClose && (await onClose(state.value)) !== false) return
-                close()
-                resolve(null)
-            }
-            const doSubmit = async()=> {
-                if (onSubmit) {
-                    const res = await onSubmit(state.value)
-                    if(res.error){
-                        setIntent(Intent.DANGER)
-                        setHelperText(res.error)
-                    }
-                    if(res !== false) return
-                }
-                close()
-                resolve(state.value)
-            }
             open({
                 canClose: false,
                 ...props,
-                state,
+                state: {
+                    value,
+                    intent: Intent.NONE,
+                    helperText: '',
+                } as DialogPromptState,
                 content: (
-                    <FormGroup
-                        helperText={helperText||undefined}
-                        intent={intent}
-                        label={message}
-                        labelFor="dialog-prompt-text-input"
-                    >
-                        <InputGroup
-                            intent={intent}
-                            id="dialog-prompt-text-input"
-                            placeholder={placeholder}
-                            defaultValue={state.value}
-                            style={{display: showInput ? 'block' : 'none'}}
-                            onChange={(e: any) => {
-                                state.value = e.target.value
-                                if(helperText) setHelperText('')
-                                if(intent !== Intent.NONE) setIntent(Intent.NONE)
-                            }} // todo: submit on enter
-                        />
-                    </FormGroup>
+                    <DialogPromptContent message={message} showInput={showInput} placeholder={placeholder}/>
                 ),
                 actions: (
-                    <>
-                        <Button text={closeButtonText}
-                                loading={loadingState['popup-close']}
-                                onClick={() => updateLoading('popup-close', doClose())}/>
-                        <Button text={submitButtonText}
-                                intent="primary"
-                                loading={loadingState['popup-submit']}
-                                onClick={() => updateLoading('popup-submit', doSubmit())}/>
-                    </>
+                    <DialogPromptButtons closeButtonText={closeButtonText} submitButtonText={submitButtonText} onClose={onClose} onSubmit={onSubmit} resolve={resolve}/>
                 ),
             })
         })
-    }, [open, close, loadingState, updateLoading])
+    }, [open, close])
     return {prompt, close}
 }
+
+function DialogPromptButtons({
+    closeButtonText = 'Close',
+    submitButtonText = 'Okay',
+    onClose, onSubmit, resolve
+ }:{
+    closeButtonText?: string,
+    submitButtonText?: string,
+    onClose?: (value: string)=>boolean|undefined|Promise<boolean|undefined>, // does not close if false
+    onSubmit?: (value: string)=>boolean|undefined|{error: string}|Promise<boolean|undefined|{error: string}>, // does not close if false
+    resolve: (value: string|null)=>void,
+}){
+    const {loadingState, updateLoading} = useLoadingState()
+    const {state, setState, close} = useDialog() as {state: DialogPromptState, setState: Dispatch<SetStateAction<DialogPromptState>>, close: ()=>void}
+    const doClose = async()=> {
+        if (onClose && (await onClose(state.value)) !== true) return
+        close()
+        resolve(null)
+    }
+    const doSubmit = async()=> {
+        if (onSubmit) {
+            const res = await onSubmit(state.value)
+            if(res && (res as any).error){
+                setState({...state, intent: Intent.DANGER, helperText: (res as any).error})
+            }
+            if(res !== true) return
+        }
+        close()
+        resolve(state.value)
+    }
+    return <>
+        <Button text={closeButtonText}
+                loading={loadingState['popup-close']}
+                onClick={() => updateLoading('popup-close', doClose())}/>
+        <Button text={submitButtonText}
+                intent="primary"
+                loading={loadingState['popup-submit']}
+                onClick={() => updateLoading('popup-submit', doSubmit())}/>
+    </>
+
+}
+
+function DialogPromptContent({
+    message = 'Enter some text: ',
+    placeholder = '',
+    showInput = true,
+}: {
+    message?: string,
+    placeholder?: string,
+    showInput?: boolean,
+}){
+    const {state, setState} = useDialog() as {state: DialogPromptState, setState: Dispatch<SetStateAction<DialogPromptState>>}
+    return <FormGroup
+        helperText={state.helperText||undefined}
+        intent={state.intent}
+        label={message}
+        labelFor="dialog-prompt-text-input"
+    >
+        <InputGroup
+            intent={state.intent}
+            id="dialog-prompt-text-input"
+            placeholder={placeholder}
+            defaultValue={state.value}
+            style={{display: showInput ? 'block' : 'none'}}
+            onChange={(e: any) => {
+                state.value = e.target.value
+                state.helperText = ''
+                state.intent = Intent.NONE
+                setState({...state})
+            }} // todo: submit on enter
+        />
+    </FormGroup>
+
+}

package/src/components/DraggableIcon.tsx

@@ -2,13 +2,13 @@ import * as React from "react";
 import {Icon, IconName, MaybeElement} from "@blueprintjs/core";
 
 // todo: bounds and stepsize
-export class DraggableIcon extends React.Component<{ icon: IconName | MaybeElement, size?: number, value: number, stepSize?: number, small?: boolean, onChange: (v: number, last?: boolean) => void }> {
+export class DraggableIcon extends React.Component<{ icon: IconName | MaybeElement, size?: number, value: number, stepSize?: number, small?: boolean, disabled?: boolean, onChange: (v: number, last?: boolean) => void }> {
     private cursor = 'auto'
     private dragStartOffset = -Infinity
     private dragStartValue = -Infinity
     private lastValue = -Infinity
     private removeEvents = () => {
-        if (isFinite(this.lastValue)) this.props.onChange(this.lastValue)
+        if (isFinite(this.lastValue) && !this.props.disabled) this.props.onChange(this.lastValue)
         this.lastValue = -Infinity
         this.dragStartOffset = -Infinity
         this.dragStartValue = -Infinity
@@ -42,7 +42,7 @@ export class DraggableIcon extends React.Component<{ icon: IconName | MaybeEleme
                 let val = this.dragStartValue - off;
                 // val = Math.min(props.max, Math.max(props.min, val)); // todo
                 val = Number(val.toFixed(Math.max(1, -Math.log10(stepSize / 10)))); // clip decimal places depending on step size
-                this.props.onChange(val, false)
+                if(!this.props.disabled) this.props.onChange(val, false)
                 this.lastValue = val;
             }
         } else {
@@ -55,9 +55,10 @@ export class DraggableIcon extends React.Component<{ icon: IconName | MaybeEleme
         // const [dragging, setDragging] = React.useState(false)
 
         return (
-            <div style={{cursor: 'ew-resize', marginLeft: "6px", marginRight: "6px", marginTop: this.props.small ? "3px" : "6px", marginBottom: this.props.small ? "3px" : "6px"}}
+            <div style={{cursor: !this.props.disabled ? 'ew-resize': 'auto', marginLeft: "6px", marginRight: "6px", marginTop: this.props.small ? "3px" : "6px", marginBottom: this.props.small ? "3px" : "6px"}}
                  onMouseDown={(ev) => {
                      // if(dragging) return
+                     if(this.props.disabled) return
                      this.dragStartOffset = ev.clientX
                      this.dragStartValue = this.props.value
                      ev.stopPropagation()
@@ -69,7 +70,7 @@ export class DraggableIcon extends React.Component<{ icon: IconName | MaybeEleme
                      // setDragging(true)
                  }}
             >
-                <Icon icon={this.props.icon} size={this.props.size}/>
+                <Icon icon={this.props.icon} size={this.props.size} aria-disabled={this.props.disabled} />
             </div>
         )
     }

package/src/components/ExtendedNumericInput.tsx

@@ -58,6 +58,7 @@ export class ExtendedNumericInput extends React.PureComponent<HTMLInputProps & N
                 leftElement={(
                     <DraggableIcon icon={this.props.leftIcon ?? "variable"}
                                    size={16}
+                                   disabled={this.props.readOnly}
                                    small={this.props.small}
                                    value={parseFloat(value ?? '0')}
                                    stepSize={this.props.stepSize}