uiconfig-blueprint 0.1.0-dev.1 → 0.1.0-dev.11

package/src/components/ExtendedNumericInput.tsx

@@ -20,7 +20,7 @@
 import React from "react";
 
 import type {HTMLInputProps, NumericInputProps} from "@blueprintjs/core";
-import {NumericInput} from "@blueprintjs/core";
+import {NumericInput} from "./NumericInput";
 import {DraggableIcon} from "./DraggableIcon";
 
 export interface IExtendedNumericInputState {
@@ -35,39 +35,87 @@ const NumberAbbreviation = {
 
 const NUMBER_ABBREVIATION_REGEX = /((\.\d+)|(\d+(\.\d+)?))(k|m|b)\b/gi;
 const SCIENTIFIC_NOTATION_REGEX = /((\.\d+)|(\d+(\.\d+)?))(e\d+)\b/gi;
+type Props = HTMLInputProps & NumericInputProps & {
+    onChange2?: (v: number, last?: boolean) => void,
+    transformValue?: (v: number) => number,
+    invTransformValue?: (v: number) => number,
+    draggableIcon?: boolean
+    value?: number | undefined
+    defaultValue?: number | undefined
+}
 // todo: bounds and stepsize
-export class ExtendedNumericInput extends React.PureComponent<HTMLInputProps & NumericInputProps & { onChange2: (v: number, last?: boolean) => void }, IExtendedNumericInputState> {
+export class ExtendedNumericInput extends React.PureComponent<Props, IExtendedNumericInputState> {
+    invTransformValue = (v: number|undefined) => {
+        v = v || 0
+        const v1 = this.props.invTransformValue ? this.props.invTransformValue(v) : v;
+        return v1
+    }
+    transformValue = (v: number|undefined) => {
+        v = v || 0
+        const v1 = this.props.transformValue ? this.props.transformValue(v) : v;
+        return v1
+    }
+
     public state: IExtendedNumericInputState = {
-        value: (this.props.value ?? this.props.defaultValue ?? '').toString(),
+        value: this.invTransformValue(this.props.value ?? this.props.defaultValue).toString(),
     };
 
     async setValue(val?: number) {
         return new Promise<void>((resolve) => {
-            this.setState({value: (val ?? this.props.value ?? this.props.defaultValue ?? '').toString()}, resolve)
+            this.setState({value: this.invTransformValue(val ?? this.props.value ?? this.props.defaultValue).toString()}, resolve)
         })
     }
 
+    componentDidUpdate(prevProps: Props) {
+        if (prevProps.value !== this.props.value && this.props.value !== undefined) {
+            this.setState({ value: this.invTransformValue(this.props.value).toString() });
+        }
+    }
     public render() {
         const {value} = this.state;
-        const props2: HTMLInputProps & NumericInputProps & { onChange2?: (v: number, last?: boolean) => void } = {...this.props}
-        if (props2.onChange2) delete props2.onChange2
+       const {
+            invTransformValue,
+            transformValue,
+            draggableIcon,
+            onChange2,
+            value: _value,
+            leftIcon,
+            defaultValue,
+            ...props2
+        } = this.props;
+
+        if(transformValue && !invTransformValue ||
+              !transformValue && invTransformValue) {
+            console.error('ExtendedNumericInput: Both transformValue and invTransformValue must be provided or neither. This is to ensure that the value can be transformed back and forth correctly.');
+        }
+
+        if(transformValue){
+            if(props2.min !== undefined) props2.min = this.invTransformValue(props2.min);
+            if(props2.max !== undefined) props2.max = this.invTransformValue(props2.max);
+            if(props2.stepSize !== undefined) props2.stepSize = this.invTransformValue(props2.stepSize);
+            if(props2.minorStepSize /*!== undefined*/) props2.minorStepSize = this.invTransformValue(props2.minorStepSize);
+            if(props2.majorStepSize /*!== undefined*/) props2.majorStepSize = this.invTransformValue(props2.majorStepSize);
+        }
 
         return (
             <NumericInput
                 {...props2}
-                leftElement={(
-                    <DraggableIcon icon={this.props.leftIcon ?? "variable"}
+                leftElement={(  // props2.leftElement could be null
+                    props2.leftElement !== undefined ? props2.leftElement :
+                        draggableIcon !== false ? <DraggableIcon icon={leftIcon ?? "variable"}
                                    size={16}
-                                   small={this.props.small}
+                                   disabled={props2.readOnly}
+                                   small={props2.small}
                                    value={parseFloat(value ?? '0')}
-                                   stepSize={this.props.stepSize}
+                                   stepSize={props2.stepSize}
                                    onChange={(v, last) => {
                                        this.handleValueChange(v, v.toString(), null, last, true)
-                                   }}/>
+                                   }}/> : undefined
                 )}
                 // leftIcon={"variable"}
-                buttonPosition={this.props.buttonPosition ?? (this.props.disabled ? "none" : "right")}
+                buttonPosition={props2.buttonPosition ?? (props2.disabled ? "none" : "right")}
                 allowNumericCharactersOnly={false}
+                clampValueOnBlur={true}
                 onBlur={this.handleBlur}
                 onKeyDown={this.handleKeyDown}
                 onButtonClick={this.handleButtonClick}
@@ -107,9 +155,11 @@ export class ExtendedNumericInput extends React.PureComponent<HTMLInputProps & N
     private handleValueChange = (_valueAsNumber: number, valueAsString: string, inputElement: HTMLInputElement | null, last?: boolean, dispatchOnChange2 = false) => {
         this._lastChangedValue = [_valueAsNumber, valueAsString]
         this.setState({value: valueAsString}, () => {
-            this.props.onValueChange?.(_valueAsNumber, valueAsString, inputElement)
-            if(dispatchOnChange2)
-                this.props.onChange2?.(_valueAsNumber, last)
+            const transformed = this.transformValue(_valueAsNumber)
+            this.props.onValueChange?.(transformed, valueAsString, inputElement)
+            if(dispatchOnChange2) {
+                this.props.onChange2?.(transformed, last)
+            }
         });
     };
 
@@ -124,8 +174,10 @@ export class ExtendedNumericInput extends React.PureComponent<HTMLInputProps & N
         result = this.evaluateSimpleMathExpression(result);
         result = this.nanStringToEmptyString(result);
         this.setState({value: result}, () => {
-            this.props.onValueChange?.(parseFloat(result) || 0, result, null)
-            this.props.onChange2?.(parseFloat(result) || 0)
+            const _valueAsNumber = parseFloat(result) || 0;
+            const transformed = this.transformValue(_valueAsNumber)
+            this.props.onValueChange?.(transformed, result, null)
+            this.props.onChange2?.(transformed, true)
         });
 
         // the user could have typed a different expression that evaluates to
@@ -151,7 +203,7 @@ export class ExtendedNumericInput extends React.PureComponent<HTMLInputProps & N
     };
 
     // Adapted from http://stackoverflow.com/questions/2276021/evaluating-a-string-as-a-mathematical-expression-in-javascript
-    // maybe try a better solution from above, right now it only works left to right
+    // todo - use a proper parser and evaluator, right now it only works left to right
     private evaluateSimpleMathExpression = (value: string) => {
         // leave empty strings empty
         if (!value) {

package/src/components/FileComponent.tsx

@@ -1,12 +1,15 @@
 import React, {useEffect, useRef} from "react";
 import {Button, ControlGroup, FileInput, HTMLSelect, InputGroup} from "@blueprintjs/core";
 import {BPFileComponentState} from "../bpComponents/BPFileComponent";
+import {useLoadingStateKey} from './loadingState'
 
 export interface FileComponentProps {
     state: BPFileComponentState
-    onChange: (state: Partial<BPFileComponentState>)=>void
+    onChange: (state: Partial<BPFileComponentState>)=>Promise<void>
+    previewSlot?: React.ReactNode,
+    uuid?: string
 }
-export const FileComponent: React.FC<FileComponentProps> = ({state, onChange})=>{
+export const FileComponent: React.FC<FileComponentProps> = ({state, onChange, previewSlot})=>{
     const fileInputRef = useRef<HTMLInputElement>()
     const textInputRef = useRef<HTMLInputElement>()
     // console.log('render file component', state)
@@ -33,47 +36,67 @@ export const FileComponent: React.FC<FileComponentProps> = ({state, onChange})=>
     //     fileInputRef.current && (fileInputRef.current.placeholder = 'https://example.com/file.png')
     // }, []);
 
+    // const hasValue = !!state.value || !!state.preview
+
+    const {loadingState, updateLoading} = useLoadingStateKey()
+
     return (
-        <div style={{flexGrow: "1", display: "flex", height: "100%"}}>
-            <ControlGroup fill={false} vertical={false} style={{width: "100%"}}>
-                {!state.readOnly ? (<HTMLSelect options={['url', 'file']} minimal={true} fill={false}
+        <div style={{position: "relative", flexGrow: "1", display: "flex", height: "100%", flexDirection: "column"}}>
+            {!!state.preview && (
+                <>
+                    {previewSlot}
+                    <Button icon="small-cross"
+                            minimal={false}
+                            small={true}
                             disabled={state.disabled}
-                            value={state.mode} onChange={(e)=>{
-                    onChange({mode: e.target.value as 'url'|'file'})
-                }} /> ) : null}
+                            intent={"danger"}
+                            style={{position: "absolute", top: 0, right: 0, opacity: 0.7}}
+                            loading={loadingState}
+                            onClick={() => updateLoading(onChange({value: null}))}></Button>
+                </>
+            )}
+            {(!state.preview || !previewSlot) && <ControlGroup fill={false} vertical={false} style={{width: "100%"}}>
+                {!state.readOnly && !state.value ? (<HTMLSelect options={['url', 'file']} minimal={true} fill={false}
+                                                                disabled={state.disabled}
+                                                                className={"file-component-select"}
+                                                                value={state.mode} onChange={(e) => {
+                    onChange({mode: e.target.value as 'url' | 'file'})
+                }}/>) : null}
                 {state.mode === 'url' ? (
-                    <InputGroup style={{flexGrow: "1", flexShrink: "1"}} inputRef={textInputRef as any} type="url" defaultValue={typeof state.value === 'string' ? state.value : ''}
+                    <InputGroup style={{flexGrow: "1", flexShrink: "1"}} inputRef={textInputRef as any} type="url"
+                                defaultValue={typeof state.value === 'string' ? state.value : ''}
                                 rightElement={(
-                                    <Button disabled={state.readOnly} minimal={true} icon="arrow-right" onClick={()=>{
-                                        onChange({mode:'url', value: textInputRef.current?.value??''})
-                                    }} ></Button>
+                                    <Button disabled={state.readOnly} minimal={true} icon="arrow-right" onClick={() => {
+                                        onChange({mode: 'url', value: textInputRef.current?.value ?? ''})
+                                    }}></Button>
                                 )}
                                 disabled={state.disabled} readOnly={state.readOnly}
-                                onChange={(_)=>{
+                                onChange={(_) => {
                                 }} placeholder="https://example.com/file.png"/>
                 ) : (
-                    <FileInput inputProps={{ref: fileInputRef as any}} style={{flexGrow: "1", flexShrink: "1", minWidth: "50px"}}
+                    <FileInput inputProps={{ref: fileInputRef as any}}
+                               style={{flexGrow: "1", flexShrink: "1", minWidth: "50px"}}
                                text={(state.value as File)?.name || 'No file'}
                                disabled={state.disabled}
-                               onClick={(e)=>{
-                                   if(state.readOnly) {
+                               onClick={(e) => {
+                                   if (state.readOnly) {
                                        e.preventDefault()
                                        e.stopPropagation()
                                    }
                                }}
                                buttonText={state.readOnly ? '-' : state.value ? 'Change' : 'Choose'}
-                               onChange={()=>{
-                                   onChange({mode: 'file', value: fileInputRef.current?.files?.[0]??null})
-                               }} className="inputGroupFile" />
+                               onChange={() => {
+                                   onChange({mode: 'file', value: fileInputRef.current?.files?.[0] ?? null})
+                               }} className="inputGroupFile"/>
                 )}
                 {!state.readOnly && state.value && (
-                <Button minimal={true} icon="small-cross"
-                        disabled={state.disabled}
-                        onClick={()=>{
-                    onChange({value: null})
-                }}></Button>
+                    <Button minimal={true} icon="small-cross"
+                            disabled={state.disabled}
+                            loading={loadingState}
+                            onClick={() => updateLoading(onChange({value: null}))
+                            }></Button>
                 )}
-            </ControlGroup>
+            </ControlGroup>}
         </div>
     )
 }

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 id="bpInspectorCard" style={{height: "100%", flexGrow: "1", position: "relative"}}>
+        <Card className={"bpInspectorCard " + className||''} style={{borderRadius: 0}}>
             <PanelStack2 className="inspectorPanelStack"
                          showPanelHeader={true}
                          renderActivePanelOnly={true}