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

package/src/bpComponents/BPFileComponent.tsx

@@ -1,24 +1,27 @@
-import {FileComponent} from "../components/FileComponent";
+import {FileComponent, FileComponentProps} from "../components/FileComponent";
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
 import {BPValueComponent, BPValueComponentState} from "./BPValueComponent";
 import {FormGroupComponent} from "../components/FormGroupComponent";
 
 type StateValue = string | File | null
 type FileImportType = any
-export type BPFileComponentState = BPValueComponentState<StateValue> & {
-    mode: 'url'|'file',
+export type BPFileComponentState<TSV=never> = BPValueComponentState<TSV|StateValue> & {
+    mode: 'url'|'file'|'asset',
     preview?: string,
 }
 
-type BPFileComponentExtras = {fileLoader?: {load: (v: string|File|{path: string, file: File|Blob})=>Promise<FileImportType>}}
-type BPFileComponentContextType = UiConfigRendererContextType & BPFileComponentExtras
+type BPFileComponentProps<TSV=never> = {
+    fileLoader?: {load: (v: string|File|{path: string, file: File|Blob})=>Promise<FileImportType>},
+    AssetPicker?: FileComponentProps<TSV>['AssetPicker']
+}
+type BPFileComponentContextType<TSV=never> = UiConfigRendererContextType & BPFileComponentProps<TSV>
 
 // todo make this abstract?
 // @ts-ignore
-export class BPFileComponent<T extends FileImportType=FileImportType, TP = {}> extends BPValueComponent<T | null, BPFileComponentState, StateValue> {
-    declare context: BPFileComponentContextType
-    declare props: BPComponentProps<T | null> & BPFileComponentExtras & TP
-    constructor(props: BPComponentProps<T | null> & BPFileComponentExtras & TP, context: BPFileComponentContextType) {
+export class BPFileComponent<T extends FileImportType=FileImportType, TP = {}, TSV = never> extends BPValueComponent<T | null, BPFileComponentState<TSV>, TSV|StateValue> {
+    declare context: BPFileComponentContextType<TSV>
+    declare props: BPComponentProps<T | null> & BPFileComponentProps<TSV> & TP
+    constructor(props: BPComponentProps<T | null> & BPFileComponentProps<TSV> & TP, context: BPFileComponentContextType<TSV>) {
         super(props, context, {
             mode: 'url',
             value: null,
@@ -28,7 +31,7 @@ export class BPFileComponent<T extends FileImportType=FileImportType, TP = {}> e
     }
 
     // reimplemented in subclass
-    convertValueToState(_val: T | null, _state: BPFileComponentState): BPFileComponentState {
+    convertValueToState(_val: T | null, _state: BPFileComponentState<TSV>): BPFileComponentState<TSV> {
         throw new Error('Not Implemented')
         // let mode: BPFileComponentState['mode'] = state.mode
         // let value = state.value
@@ -46,19 +49,19 @@ export class BPFileComponent<T extends FileImportType=FileImportType, TP = {}> e
         // return {...state, mode, value}
     }
 
-    async convertStateToValue(state: BPFileComponentState): Promise<T|null> {
+    async convertStateToValue(state: BPFileComponentState<TSV>): Promise<T|null> {
         const value = state.value
+        if(!value) return null
         let val: any
         const last = this.context.methods.getRawValue(this.props.config as any) ?? null
         const lastState = this.convertValueToState(last as any, {...this.state, value: null})
-        if (value === null) {
-            val = null
-        } else if (typeof value === 'string') {
+        if (typeof value === 'string') {
             val = value === lastState.value ? last : await (this.context.fileLoader ?? this.props.fileLoader)!.load(value);
-        } else {
+        } else if(typeof (value as File).arrayBuffer === 'function'){
+            const file = (value as File)
             // todo handle blob with no name
-            val = value === lastState.value ? last : await (this.context.fileLoader ?? this.props.fileLoader)!.load({path: value.name || 'file', file: value});
-        }
+            val = file === lastState.value ? last : await (this.context.fileLoader ?? this.props.fileLoader)!.load({path: file.name || 'file', file: file});
+        }else val = value
         // console.log(val)
         return val;
     }
@@ -91,9 +94,15 @@ export class BPFileComponent<T extends FileImportType=FileImportType, TP = {}> e
                 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}/>
+                <FileComponent<TSV>
+                    previewSlot={this.renderPreviewSlot()}
+                    state={this.state} // ignore ts f
+                    onChange={(s) =>
+                        this.updateStateValue({...this.state, preview: undefined, ...s}) // todo: set loading while this promise is happening.
+                    }
+                    key={this.props.config.uuid}
+                    AssetPicker={this.props.AssetPicker ?? this.context.AssetPicker} // todo which one first?
+                />
             </FormGroupComponent>
         ) : null
     }

package/src/bpComponents/BPFolderComponent.scss

@@ -47,9 +47,11 @@
 //}
 
 
-.folder-trigger-button {
+.folder-trigger-text {
   font-size: 12px !important;
   font-weight: 550 !important;
+}
+.folder-trigger-button {
 
   margin-top: 1px;
   display: flex;
@@ -102,8 +104,8 @@
     //margin-right: $pt-grid-size;
     margin-right: 6px;
     //margin-left: $pt-grid-size;
-    padding-top: 6px;
-    padding-bottom: 6px;
+    padding-top: 8px;
+    padding-bottom: 8px;
     min-height: 36px;
   }
 }
@@ -116,6 +118,12 @@
   //box-shadow: 0 1px $pt-divider-black;
   //z-index: 1;
 
+  > .folder-trigger-button {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    min-height: 36px;
+  }
+
   > button {
     border-radius: 0;
   }
@@ -131,7 +139,4 @@
     font-size: var(--pt-font-size-small);
   }
 
-  .bp5-button{
-    font-size: var(--pt-font-size-small);
-  }
 }

package/src/bpComponents/BPFolderComponent.tsx

@@ -1,10 +1,19 @@
 import React, {ChangeEventHandler, DOMAttributes} from "react";
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
-import {Button, Checkbox, Collapse, Icon, Intent} from "@blueprintjs/core";
+import {
+    Button,
+    Checkbox,
+    Collapse,
+    Divider,
+    Icon,
+    IconName,
+    Intent,
+    MaybeElement, Menu, MenuItem, Popover
+} from "@blueprintjs/core";
 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 {getOrCall, safeSetProperty} from 'ts-browser-helpers'
+import {BPContainerComponent, BPContainerComponentState, BPContainerComponentProps} from './BPContainerComponent'
 import classNames from "classnames";
 import {Classes} from "@blueprintjs/core/src/common";
 import {AnimationStates} from "@blueprintjs/core/lib/esm/components/collapse/collapse";
@@ -12,41 +21,80 @@ import {AnimationStates} from "@blueprintjs/core/lib/esm/components/collapse/col
 export type BPFolderComponentState = BPContainerComponentState & {
 }
 
-export class BPFolderComponent extends BPContainerComponent<BPFolderComponentState> {
-    constructor(props: BPComponentProps<void>&PanelActions, context: UiConfigRendererContextType) {
+export type BPFolderComponentProps = BPContainerComponentProps & {
+    icon?: IconName | MaybeElement
+}
+
+
+export class BPFolderComponent extends BPContainerComponent<BPFolderComponentState, BPFolderComponentProps> {
+    constructor(props: BPComponentProps<void>&PanelActions&BPFolderComponentProps, context: UiConfigRendererContextType) {
         super(props, context, {children: [], expanded: false, label: 'Folder'});
     }
 
     render() {
+        const {
+            icon,
+            config,
+            level,
+            filter,
+            ...props
+        } = this.props
+
         const setExpanded = (e: boolean) => {
             if (e === this.state.expanded) return
             this.setState({...this.state, expanded: e})
-            safeSetProperty(this.props.config, "expanded", e, true)
+            safeSetProperty(config, "expanded", e, true)
             // if (e) this.state.children.forEach(c => Array.isArray(c) ? null : c.uiRefresh?.("postFrame", true, 1)) // todo: handle array and functions
         }
-        const children = this.state.children
+        let children = this.state.children
         const enabledToggle = children[0] && this.context.methods.getBinding(children[0])[1] === 'enabled' ? children[0] : undefined
-        enabledToggle && (enabledToggle.hidden = true)
+        if(enabledToggle) children = children.slice(1)
+
+        const ctxMenuBtns = children.filter(c=>{
+            return c.type === 'button' && c.tags?.includes('context-menu')
+        })
+        let endIcon: MaybeElement = undefined
+        if(ctxMenuBtns.length > 0){
+            children = children.filter(c=>!ctxMenuBtns.includes(c))
+            endIcon = (
+                <Popover
+                    content={<ContextMenu buttons={ctxMenuBtns} context={this.context} />}
+                    placement="bottom-end"
+                >
+                    <Button
+                        icon="more"
+                        variant={"minimal"}
+                        size={"small"}
+                    />
+                </Popover>
+            )
+        }
+
         return !this.state.hidden ? (
             <FolderHeadCard
-                key={this.props.config.uuid}
+                key={config.uuid}
                 open={this.state.expanded}
                 disabled={this.state.disabled}
-                level={this.props.level ?? 0}
-                minimal={(this.props.level ?? 0) > 0}
+                level={level ?? 0}
+                minimal={(level ?? 0) > 0}
                 onClick={() => {
                     if(this.state.readOnly) return
                     setExpanded(!this.state.expanded)
                 }}
+                icon={icon}
+                endIcon={endIcon}
                 label={this.state.label}
                 enabled={enabledToggle ? this.context.methods.getRawValue(enabledToggle) : undefined}
                 onEnabledChange={(e) => enabledToggle && this.context.methods.setValue(enabledToggle, e.target.checked, {}).then(() => this.setState(this.state))}
             >
                 <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*/}
+                    <div className="folder-children" style={{
+                        listStyleType: "none",
+                        paddingLeft: level??0 > 2 ? "6px" : 0}
+                    }> {/*todo use parameter instead of const 6*/}
                         {children.map((c, i) =>
-                            <ConfigObject key={'c' + i} {...this.props} config={c}
-                                          level={(this.props.level ?? 0) + 1}/>
+                            <ConfigObject key={'c' + i} {...props} config={c}
+                                          level={(level ?? 0) + 1}/>
                         )}
                     </div>
                 </Collapse2>
@@ -55,7 +103,15 @@ export class BPFolderComponent extends BPContainerComponent<BPFolderComponentSta
     }
 }
 
-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) => {
+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']
+    icon?: IconName | MaybeElement
+    endIcon?: IconName | MaybeElement
+}>> = (props) => {
     const hasEnabled = (props.enabled !== undefined)
     return (
         <div
@@ -63,7 +119,13 @@ export const FolderHeadCard: React.FC<React.PropsWithChildren<{ open: boolean, l
             className="folder-card"
             // elevation={props.open ? 3 : undefined}
         >
-            <div className={props.minimal ? 'folder-head-card-minimal' : 'folder-head-card'}>
+            {props.level === 0 &&
+            <Divider style={{margin: 0}}/>
+            }
+            <div className={props.minimal ? 'folder-head-card-minimal' : 'folder-head-card'} style={{
+                paddingTop: props.level > 0 ? "unset" : undefined,
+                paddingBottom: props.level > 0 ? "unset" : undefined,
+            }}>
                 {/*<H6 className="folder-head-label"*/}
                 {/*    onClick={props.onClick}>{props.label}</H6>*/}
                 {/*<Icon icon="chevron-right" style={{*/}
@@ -71,9 +133,9 @@ export const FolderHeadCard: React.FC<React.PropsWithChildren<{ open: boolean, l
                 {/*    transition: "rotate 0.25s ease-in-out"*/}
                 {/*}} className="folder-head-label-icon"/>*/}
 
-                {/*<Button className="folder-trigger-button" onClick={props.onClick}*/}
-                {/*        fill={true} minimal={true}*/}
-                {/*        rightIcon={(*/}
+                {/*<Button className="folder-trigger-button folder-trigger-text" onClick={props.onClick}*/}
+                {/*        fill={true} variant={"minimal"}*/}
+                {/*        endIcon={(*/}
                 {/*            <Icon icon="chevron-right" style={{*/}
                 {/*                rotate: props.open ? "90deg" : "0deg",*/}
                 {/*                transition: "rotate 0.25s ease-in-out"*/}
@@ -82,18 +144,18 @@ export const FolderHeadCard: React.FC<React.PropsWithChildren<{ open: boolean, l
                 {/*</Button>*/}
 
                 <Button
-                    className={"folder-trigger-button " + (props.open ? "folder-trigger-button-expanded" : "")}
+                    className={"folder-trigger-button folder-trigger-text " + (props.open ? "folder-trigger-button-expanded" : "")}
                     // fill={!props.minimal}
                     fill={true}
                     onClick={props.onClick}
-                    minimal={true}
+                    variant={"minimal"}
                     disabled={props.disabled}
-                    small={props.minimal}
+                    size={props.minimal?"small":"medium"}
                     style={props.level ? {marginLeft: "6px"} : {fontSize: "0.95rem", paddingTop: "8px", paddingBottom: "8px"}}
                     // intent={props.open ? Intent.PRIMARY : Intent.NONE}
                     intent={Intent.NONE}
                     // icon={props.enabled !== undefined  && <span style={{minWidth: '20px'}}></span>} // adding a span here will center the text in the button
-                    icon={(
+                    icon={props.icon ?? (
                         <>
                             <Icon icon="caret-right" style={{
                                 rotate: props.open ? "90deg" : "0deg",
@@ -105,12 +167,15 @@ export const FolderHeadCard: React.FC<React.PropsWithChildren<{ open: boolean, l
                 </Button>
                 {hasEnabled && <Checkbox
                     style={{margin: 0, position: 'absolute', left: '10px'}}
-                    large inline
+                    inline size={"large"}
                     defaultChecked={props.enabled}
                     onChange={props.onEnabledChange}
                     disabled={props.disabled}
                     onClick={(e) => e.stopPropagation()}
                 />}
+                {props.endIcon && <div style={{position: 'absolute', right: '10px'}}>
+                    {props.endIcon}
+                </div>}
             </div>
             {props.children}
         </div>
@@ -180,3 +245,36 @@ export class Collapse2 extends Collapse{
     }
 
 }
+
+export const ContextMenu: React.FC<{
+    buttons: any[];
+    context: UiConfigRendererContextType;
+}> = ({ buttons, context }) => {
+    return (
+        <Menu>
+            {buttons.map((btn, i) => {
+                const getProps = ()=>{ // todo use UiConfigMethods.getBaseProps
+                    const hidden = getOrCall(btn.hidden) ?? false
+                    const disabled = getOrCall(btn.disabled) ?? false
+                    const readOnly = getOrCall(btn.readOnly) ?? false
+                    return { hidden, disabled, readOnly }
+                }
+                const props = getProps()
+                return props.hidden ? null : (
+                    <MenuItem
+                        key={'ctx' + i}
+                        disabled={props.disabled || props.readOnly}
+                        text={context.methods.getLabel(btn)}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            const {hidden, disabled, readOnly} = getProps()
+                            if (hidden || disabled || readOnly) return;
+                            // todo loading state for promise
+                            context.methods.clickButton(btn, { args: [e] });
+                        }}
+                    />
+                );
+            })}
+        </Menu>
+    );
+};

package/src/bpComponents/BPInputComponent.tsx

@@ -29,6 +29,7 @@ export abstract class BPInputComponent<
             <FormGroupComponent disabled={this.state.disabled}
                                 label={this.state.label}
                                 flexBasis={this.state.baseWidth ?? this.flexBasis}
+                                key={this.props.config.uuid}
             >
                 {this.renderInput()}
             </FormGroupComponent>

package/src/bpComponents/BPPanelComponent.tsx

@@ -4,15 +4,15 @@ import {BPLabelledComponentState} from "./BPLabelledComponent";
 import {PanelActions} from "@blueprintjs/core/lib/esm/components/panel-stack2/panelTypes";
 import {UiObjectConfig} from 'uiconfig.js'
 import {safeSetProperty} from 'ts-browser-helpers'
-import {BPContainerComponent} from './BPContainerComponent'
+import {BPContainerComponent, BPContainerComponentProps} from './BPContainerComponent'
 
 export type BPPanelComponentState = BPLabelledComponentState & {
     children: UiObjectConfig[]
     expanded: boolean
 }
 
-export class BPPanelComponent extends BPContainerComponent<BPPanelComponentState> {
-    constructor(props: BPComponentProps<void>&PanelActions, context: UiConfigRendererContextType) {
+export class BPPanelComponent extends BPContainerComponent<BPPanelComponentState, BPContainerComponentProps> {
+    constructor(props: BPComponentProps<void>&PanelActions&BPContainerComponentProps, context: UiConfigRendererContextType) {
         super(props, context, {
             children: [],
             expanded: false,
@@ -41,7 +41,7 @@ export class BPPanelComponent extends BPContainerComponent<BPPanelComponentState
         return !this.state.hidden ? (
             <div
                 key={this.props.config.uuid}
-                className="folder-children" style={{listStyleType: "none", paddingLeft: "0"}}>
+                className="folder-children" style={{listStyleType: "none", paddingLeft: "0", overflowAnchor: 'none', paddingBottom: '400px'}}>
                 {this.state.children.map((c, i) => c ? <ConfigObject key={'c' + i} {...this.props} config={c}/> : null)}
             </div>
         ) : null

package/src/bpComponents/BPTextInputComponent.tsx

@@ -1,22 +1,55 @@
-import {ChangeEventHandler} from "react";
+import React, {ChangeEventHandler} from "react";
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
-import {InputGroup} from "@blueprintjs/core";
+import {InputGroup, TextArea} from "@blueprintjs/core";
 import {BPInputComponent} from "./BPInputComponent";
+import {BPValueComponentState} from "./BPValueComponent";
 
 export class BPTextInputComponent extends BPInputComponent<string> {
     constructor(props: BPComponentProps<string>, context: UiConfigRendererContextType) {
         super(props, context, {value: '', label: 'Input'});
     }
 
+    private _inputRef = React.createRef<HTMLInputElement|HTMLTextAreaElement>()
+
+    private _iv = 0
+    async refreshConfigState(state?: BPValueComponentState<string>): Promise<void> {
+        const iv = this._iv
+        await super.refreshConfigState(state);
+        if(iv === this._iv) {
+            if (this._inputRef.current && this._inputRef.current.value !== this.state.value)
+                this._inputRef.current.value = this.state.value
+        }
+    }
+
     private _onChange: ChangeEventHandler<HTMLInputElement> = (e) => {
-        this.setValue(e.target.value); // todo: set loading while this promise is happening.
+        this._iv+=1
+        this.setValue(e.target.value, false); // todo: set loading while this promise is happening.
     }
 
     renderInput() {
+        const config = this.props.config as any;
+        const isMultiline = config.multiline === true;
+
+        if (isMultiline) {
+            return (
+                <TextArea
+                    defaultValue={this.state.value}
+                    inputRef={this._inputRef as any}
+                    disabled={this.state.disabled}
+                    readOnly={this.state.readOnly}
+                    key={this.props.config.uuid}
+                    fill={true}
+                    rows={config.rows}
+                    cols={config.cols}
+                    autoResize={config.autoResize}
+                    onChange={this._onChange as any}/>
+            )
+        }
+
         return (
             <InputGroup
-                // defaultValue={this.state.value} // for uncontrolled usage, we will also need ref and set ref.value on change: https://reactjs.org/docs/uncontrolled-components.html
-                value={this.state.value}
+                defaultValue={this.state.value}
+                inputRef={this._inputRef as any}
                 disabled={this.state.disabled}
                 readOnly={this.state.readOnly}
                 key={this.props.config.uuid}

package/src/bpComponents/BPValueComponent.tsx

@@ -49,13 +49,13 @@ export abstract class BPValueComponent<TValue extends PrimitiveVal, TState exten
         super.setState(state, callback);
     }
 
-    async setValue(value: TStateValue, last?: boolean) {
-        return this.updateStateValue({...this.state, value}, last)
+    async setValue(value: TStateValue, last?: boolean, refreshState = true) {
+        return this.updateStateValue({...this.state, value}, last, refreshState)
     }
 
     forceOnChange: boolean = false
 
-    async updateStateValue(state: TState, last?: boolean) {
+    async updateStateValue(state: TState, last?: boolean, refreshState = true) {
         if (!this.doesNeedRefresh(state, last)) {
             await this.setStatePromise(state)
             return
@@ -63,7 +63,7 @@ export abstract class BPValueComponent<TValue extends PrimitiveVal, TState exten
         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)
+        if(refreshState) await this.refreshConfigState(state)
     }
 
 }