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

package/src/bpComponents/BPVectorInputComponent.tsx

@@ -2,22 +2,24 @@ import React from "react";
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
 import {BPInputComponent} from "./BPInputComponent";
 import {BPValueComponentState} from "./BPValueComponent";
-import type {Vector2, Vector3, Vector4} from "three";
+import type {Vector2, Vector3,Euler, Vector4} from "three";
 import {ExtendedNumericInput} from "../components/ExtendedNumericInput";
 import {wIcon3, xIcon3, yIcon3, zIcon3} from "../components/variableIcons";
 import {getOrCall} from 'ts-browser-helpers'
 import {getNumberTransformFunctions} from "./GetNumberTransformFunctions";
+import {HTMLSelect} from "@blueprintjs/core";
 
-export type BPVectorComponentState = BPValueComponentState<Vector2|Vector3|Vector4> & {
+export type BPVectorComponentState = BPValueComponentState<Vector2|Vector3|Euler|Vector4> & {
     min: number,
     max: number,
     step: number,
     components: 1|2|3|4,
     unit?: string,
+    isEuler: boolean,
 }
 
-export class BPVectorInputComponent extends BPInputComponent<Vector2|Vector3|Vector4, BPVectorComponentState> {
-    constructor(props: BPComponentProps<Vector2|Vector3|Vector4>, context: UiConfigRendererContextType) {
+export class BPVectorInputComponent extends BPInputComponent<Vector2|Vector3|Euler|Vector4, BPVectorComponentState> {
+    constructor(props: BPComponentProps<Vector2|Vector3|Euler|Vector4>, context: UiConfigRendererContextType) {
         super(props, context, {
             value: new context.THREE!.Vector2(),
             label: 'Vector',
@@ -25,6 +27,7 @@ export class BPVectorInputComponent extends BPInputComponent<Vector2|Vector3|Vec
             max: Infinity,
             step: 0.01,
             components: 2,
+            isEuler: false,
         });
     }
 
@@ -46,6 +49,10 @@ export class BPVectorInputComponent extends BPInputComponent<Vector2|Vector3|Vec
         // console.warn(state.value)
         let com = this.props.config.type!.replace('vector', '').replace('vec', '')
         let components: any = 0;
+        // Check if this is an Euler object
+        const isEuler = typeof (state.value as any).order === 'string';
+        state.isEuler = isEuler;
+
         // console.log(com, components)
         if(!com.length){
             let v = state.value as any;
@@ -62,6 +69,8 @@ export class BPVectorInputComponent extends BPInputComponent<Vector2|Vector3|Vec
     }
 
     private _inputs = [React.createRef<ExtendedNumericInput>(), React.createRef<ExtendedNumericInput>(), React.createRef<ExtendedNumericInput>(), React.createRef<ExtendedNumericInput>()]
+    private _parent = React.createRef<HTMLDivElement>()
+    private _lastWidth?: number
 
     async refreshConfigState(state?: BPVectorComponentState): Promise<void> {
         await super.refreshConfigState(state);
@@ -70,6 +79,28 @@ export class BPVectorInputComponent extends BPInputComponent<Vector2|Vector3|Vec
         await this._inputs[2].current?.setValue((this.state.value as any).z)
         await this._inputs[3].current?.setValue((this.state.value as any).w)
     }
+    // todo can we do it with css instead of ResizeObserver
+    private _resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+            const newWidth = entry.contentRect.width
+            if (Math.abs(newWidth - (this._lastWidth||0)) > 5) {
+                this._lastWidth = newWidth
+                this.forceUpdate()
+            }
+        }
+    })
+
+    componentDidMount() {
+        if (this._parent.current) {
+            this._resizeObserver.observe(this._parent.current)
+        }
+        super.componentDidMount()
+    }
+
+    componentWillUnmount() {
+        this._resizeObserver.disconnect()
+        super.componentWillUnmount()
+    }
 
     renderInput() {
         let ret = []
@@ -92,13 +123,25 @@ export class BPVectorInputComponent extends BPInputComponent<Vector2|Vector3|Vec
             ...transformValue,
         } as const
 
-        // console.warn(this.state.value)
+        const showIcon = this._parent.current?.offsetWidth ? this._parent.current.offsetWidth > (60 * this.state.components) : true
+
+        // Euler rotation order options
+        const eulerOrderOptions = [
+            { label: 'XYZ', value: 'XYZ' },
+            { label: 'YXZ', value: 'YXZ' },
+            { label: 'ZXY', value: 'ZXY' },
+            { label: 'ZYX', value: 'ZYX' },
+            { label: 'YZX', value: 'YZX' },
+            { label: 'XZY', value: 'XZY' }
+        ];
+
         if (this.state.components > 0) {
             const x = (
                 <ExtendedNumericInput
                     style={{maxWidth: "8rem", minWidth: "2rem"}}
                     // defaultValue={state}
                     leftIcon={xIcon3}
+                    draggableIcon={showIcon}
                     value={this.state.value.x}
                     key={this.props.config.uuid + '_x'}
                     ref={this._inputs[0]}
@@ -117,6 +160,7 @@ export class BPVectorInputComponent extends BPInputComponent<Vector2|Vector3|Vec
                     // defaultValue={state}
                     value={this.state.value.y}
                     leftIcon={yIcon3}
+                    draggableIcon={showIcon}
                     key={this.props.config.uuid + '_y'}
                     ref={this._inputs[1]}
                     {...props}
@@ -132,26 +176,48 @@ export class BPVectorInputComponent extends BPInputComponent<Vector2|Vector3|Vec
                 <ExtendedNumericInput
                     style={{maxWidth: "8rem", minWidth: "2rem"}}
                     // defaultValue={state}
-                    value={(this.state.value as Vector3|Vector4).z}
+                    value={(this.state.value as Vector3|Euler|Vector4).z}
                     key={this.props.config.uuid + '_z'}
                     leftIcon={zIcon3}
+                    draggableIcon={showIcon}
                     ref={this._inputs[2]}
                     {...props}
                     onChange2={(v, last) => {
-                        (this.state.value as Vector3 | Vector4).z = v
+                        (this.state.value as Vector3|Euler | Vector4).z = v
                         this.setValue(this.state.value, last) // todo: does need refresh?
                     }}
                 />)
             ret.push(z)
+
+            // Add Euler rotation order dropdown after z component
+            if(this.state.isEuler && this.props.config.showOrderSelector) { // todo add showOrderSelector to uiconfig types and other renderers
+                const eulerOrderDropdown = (
+                    <HTMLSelect
+                        options={eulerOrderOptions}
+                        minimal={true}
+                        fill={false}
+                        disabled={this.state.disabled || this.state.readOnly}
+                        value={(this.state.value as Euler).order}
+                        key={this.props.config.uuid + '_order'}
+                        onChange={(event) => {
+                            (this.state.value as Euler).order = event.currentTarget.value as any;
+                            this.setValue(this.state.value, true);
+                        }}
+                        style={{maxWidth: "6rem", minWidth: "2rem"}}
+                    />
+                );
+                ret.push(eulerOrderDropdown);
+            }
         }
         if(this.state.components>3) {
-            const z = (
+            const w = (
                 <ExtendedNumericInput
                     style={{maxWidth: "8rem", minWidth: "2rem"}}
                     // defaultValue={state}
                     value={(this.state.value as Vector4).w}
                     key={this.props.config.uuid + '_w'}
                     leftIcon={wIcon3}
+                    draggableIcon={showIcon}
                     ref={this._inputs[3]}
                     {...props}
                     onChange2={(v, last) => {
@@ -159,8 +225,12 @@ export class BPVectorInputComponent extends BPInputComponent<Vector2|Vector3|Vec
                         this.setValue(this.state.value, last) // todo: does need refresh?
                     }}
                 />)
-            ret.push(z)
+            ret.push(w)
         }
-        return ret
+        return <div ref={this._parent}
+                    className={"formGroupContent"}
+        >
+            {ret}
+        </div>
     }
 }

package/src/bpComponents/InputGroup2.tsx

@@ -0,0 +1,175 @@
+import {
+    AbstractPureComponent,
+    Classes,
+    DISPLAYNAME_PREFIX,
+    Icon,
+    InputGroupProps,
+    removeNonHTMLProps
+} from "@blueprintjs/core";
+import {InputGroupState} from "@blueprintjs/core/lib/esnext/components/forms/inputGroup";
+import classNames from "classnames";
+import * as React from "react";
+
+export interface InputGroup2Props extends InputGroupProps{
+    leftElementWidth?: number|string
+    rightElementWidth?: number|string
+}
+export const NON_HTML_PROPS: Array<keyof InputGroup2Props> = ["inputSize", "onValueChange", "leftElementWidth", "rightElementWidth"];
+
+export class InputGroup2 extends AbstractPureComponent<InputGroup2Props, InputGroupState> {
+    public static displayName = `${DISPLAYNAME_PREFIX}.InputGroup`;
+
+    public state: InputGroupState = {};
+
+    private leftElement: HTMLElement | null = null;
+
+    private rightElement: HTMLElement | null = null;
+
+    private refHandlers = {
+        leftElement: (ref: HTMLSpanElement | null) => (this.leftElement = ref),
+        rightElement: (ref: HTMLSpanElement | null) => (this.rightElement = ref),
+    };
+
+    public render() {
+        const {
+            // asyncControl = false,
+            className,
+            disabled,
+            fill,
+            inputClassName,
+            inputRef,
+            inputSize,
+            intent,
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            large,
+            readOnly,
+            round,
+            size = "medium",
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            small,
+            tagName = "div",
+        } = this.props;
+        const inputGroupClasses = classNames(
+            Classes.INPUT_GROUP,
+            Classes.intentClass(intent),
+            {
+                [Classes.DISABLED]: disabled,
+                [Classes.READ_ONLY]: readOnly,
+                [Classes.FILL]: fill,
+                [Classes.ROUND]: round,
+            },
+            Classes.sizeClass(size, {large, small}),
+            className,
+        );
+
+        const paddingLeft = this.state.leftElementWidth || this.props.leftElementWidth || undefined
+        const paddingRight = this.state.rightElementWidth || this.props.rightElementWidth || undefined
+        const style: React.CSSProperties = {
+            ...this.props.style,
+            // paddingLeft: this.state.leftElementWidth || this.props.leftElementWidth || 0,
+            // paddingRight: this.state.rightElementWidth || this.props.rightElementWidth || 0,
+        };
+        if(paddingLeft !== undefined)
+            style.paddingLeft = paddingLeft
+        if(paddingRight !== undefined)
+            style.paddingRight = paddingRight
+
+        const inputProps = {
+            type: "text",
+            ...removeNonHTMLProps(this.props, NON_HTML_PROPS, true),
+            "aria-disabled": disabled,
+            className: classNames(Classes.INPUT, inputClassName),
+            onChange: this.handleInputChange,
+            size: inputSize ?? (typeof size === "number" ? size : undefined),
+            style,
+        } satisfies React.HTMLProps<HTMLInputElement>;
+        const inputElement = /*asyncControl ? (
+            <AsyncControllableInput {...inputProps} inputRef={inputRef} />
+        ) : */(
+            <input {...inputProps} ref={inputRef}/>
+        );
+
+        return React.createElement(
+            tagName,
+            {className: inputGroupClasses},
+            this.maybeRenderLeftElement(),
+            inputElement,
+            this.maybeRenderRightElement(),
+        );
+    }
+
+    public componentDidMount() {
+        this.updateInputWidth();
+    }
+
+    public componentDidUpdate(prevProps: InputGroupProps) {
+        const {leftElement, rightElement} = this.props;
+        if (prevProps.leftElement !== leftElement || prevProps.rightElement !== rightElement) {
+            this.updateInputWidth();
+        }
+    }
+
+    protected validateProps(_props: InputGroupProps) {
+        // if (props.leftElement != null && props.leftIcon != null) {
+        //     console.warn(INPUT_WARN_LEFT_ELEMENT_LEFT_ICON_MUTEX);
+        // }
+    }
+
+    private handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value = event.target.value;
+        this.props.onChange?.(event);
+        this.props.onValueChange?.(value, event.target);
+    };
+
+    private maybeRenderLeftElement() {
+        const {leftElement, leftIcon} = this.props;
+
+        if (leftElement != null) {
+            return (
+                <span className={Classes.INPUT_LEFT_CONTAINER} ref={this.refHandlers.leftElement}>
+                    {leftElement}
+                </span>
+            );
+        } else if (leftIcon != null) {
+            return <Icon icon={leftIcon} aria-hidden={true} tabIndex={-1}/>;
+        }
+
+        return undefined;
+    }
+
+    private maybeRenderRightElement() {
+        const {rightElement} = this.props;
+        if (rightElement == null) {
+            return undefined;
+        }
+        return (
+            <span className={Classes.INPUT_ACTION} ref={this.refHandlers.rightElement}>
+                {rightElement}
+            </span>
+        );
+    }
+
+    private updateInputWidth() {
+        const {leftElementWidth, rightElementWidth} = this.state;
+
+        if (this.leftElement != null) {
+            const {clientWidth} = this.leftElement;
+            // small threshold to prevent infinite loops
+            if (leftElementWidth === undefined || Math.abs(clientWidth - leftElementWidth) > 2) {
+                this.setState({leftElementWidth: clientWidth});
+            }
+        } else {
+            this.setState({leftElementWidth: undefined});
+        }
+
+        if (this.rightElement != null) {
+            const {clientWidth} = this.rightElement;
+            // small threshold to prevent infinite loops
+            if (rightElementWidth === undefined || Math.abs(clientWidth - rightElementWidth) > 2) {
+                this.setState({rightElementWidth: clientWidth});
+            }
+        } else {
+            this.setState({rightElementWidth: undefined});
+        }
+    }
+}

package/src/bpComponents/index.scss

@@ -1,3 +1,2 @@
 @import "BPButtonComponent";
 @import "BPFolderComponent";
-@import "BPTreeComponent";

package/src/components/ConfigurationPanelComponent.tsx

@@ -21,10 +21,10 @@ export function ConfigurationPanelComponent({config}: { config: UiObjectConfig<a
             renderPanel(props: ConfigProps) {
                 // console.log(props.config === config)
                 return (
-                    <ul style={{listStyleType: "none", paddingLeft: "0", margin: "0"}}>
+                    <div style={{listStyleType: "none", paddingLeft: "0", margin: "0"}}>
                         {/*{v && (<ConfigObject {...props}/>)}*/}
                         {config && (<ConfigObject {...props} isPanel={true}/>)}
-                    </ul>
+                    </div>
                 )
             },
             title: renderer.methods.getLabel(config)

package/src/components/DialogContext.tsx

@@ -20,12 +20,12 @@ export const defaultDialogContext = {
 export function setupDialog(){
     const [dialog, setDialog] = useState<DialogStateType>(defaultDialogContext)
     const open = useCallback((d: Partial<DialogStateType>)=>{
-        setDialog({...dialog, isOpen: true, ...d})
-    }, [dialog, setDialog])
-    const close = useCallback(()=>setDialog({...dialog, isOpen: false}), [dialog, setDialog])
+        setDialog((d1)=>({...d1, ...d, isOpen: true}))
+    }, [])
+    const close = useCallback(()=>setDialog((d1)=>({...d1, isOpen: false})), [])
     const setDialogState = useCallback((state: any)=>{
-        setDialog({...dialog, state})
-    }, [dialog, setDialog])
+        setDialog((d1)=>({...d1, state}))
+    }, [])
     return {dialog, open, close, setDialog, state: dialog.state, setState: setDialogState}
 }
 export const DialogContext = createContext<{
@@ -50,7 +50,11 @@ export function DialogProvider({children}: {children: ReactNode}){
 export function DialogComponent(){
     const {dialog, close} = useDialog()
     return (
-        <Dialog title={dialog.title} isOpen={dialog.isOpen} isCloseButtonShown={dialog.canClose} onClose={() => {dialog.canClose && close()}}>
+        <Dialog title={dialog.title}
+                isOpen={dialog.isOpen}
+                usePortal={false}
+                isCloseButtonShown={dialog.canClose}
+                onClose={() => {dialog.canClose && close()}}>
         <DialogBody>
             {dialog.content}
         </DialogBody>
@@ -62,13 +66,13 @@ interface DialogPromptState {
     value: string,
     intent: Intent,
     helperText: string,
+    key: string,
 }
-interface DialogPromptProps extends Partial<DialogStateType>{
+interface DialogPromptProps extends Partial<DialogStateType>, Partial<DialogPromptState>{
     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
@@ -99,15 +103,17 @@ export function useDialogPrompt(){
         value = '',
         showInput = true,
         onClose, onSubmit,
+        helperText = '',
+        intent = Intent.NONE,
         ...props}: DialogPromptProps) => {
         return new Promise<string|null>((resolve)=>{
             open({
                 canClose: false,
-                ...props,
                 state: {
                     value,
-                    intent: Intent.NONE,
-                    helperText: '',
+                    intent,
+                    helperText,
+                    key: Math.random().toString(36).slice(2, 10),
                 } as DialogPromptState,
                 content: (
                     <DialogPromptContent message={message} showInput={showInput} placeholder={placeholder}/>
@@ -115,10 +121,11 @@ export function useDialogPrompt(){
                 actions: (
                     <DialogPromptButtons closeButtonText={closeButtonText} submitButtonText={submitButtonText} onClose={onClose} onSubmit={onSubmit} resolve={resolve}/>
                 ),
+                ...props,
             })
         })
     }, [open, close])
-    return {prompt, close}
+    return {prompt, close, open}
 }
 
 function DialogPromptButtons({
@@ -192,6 +199,7 @@ function DialogPromptContent({
         labelFor="dialog-prompt-text-input"
     >
         <InputGroup
+            key={state.key}
             intent={state.intent}
             id="dialog-prompt-text-input"
             placeholder={placeholder}

package/src/components/DraggableIcon.tsx

@@ -1,74 +1,96 @@
 import * as React from "react";
 import {Icon, IconName, MaybeElement} from "@blueprintjs/core";
+import {PointerLockManager} from "../utils/pointerLock";
 
 // todo: bounds and stepsize
+// todo use the old version in safari etc that change the page height on pointer lock
 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 pointerLockManager: PointerLockManager | null = null
+    private divRef = React.createRef<HTMLDivElement>()
     private removeEvents = () => {
         if (isFinite(this.lastValue) && !this.props.disabled) this.props.onChange(this.lastValue)
         this.lastValue = -Infinity
-        this.dragStartOffset = -Infinity
         this.dragStartValue = -Infinity
-        document.removeEventListener('mousemove', this.mouseMoveEvent)
-        document.removeEventListener('mouseup', this.mouseUpEvent)
+
+        if (this.pointerLockManager) {
+            this.pointerLockManager.releaseLock()
+            this.pointerLockManager = null
+        }
+
         document.documentElement.style.cursor = this.cursor
         // setDragging(false)
     };
-    private mouseUpEvent = (ev: MouseEvent) => {
-        ev.stopPropagation()
-        ev.preventDefault()
-        this.removeEvents()
-    };
-    private mouseMoveEvent = (ev: MouseEvent) => {
-        ev.stopPropagation()
-        ev.preventDefault()
-        if (ev.buttons > 0) {
-            if (isFinite(this.dragStartValue) && isFinite(this.dragStartOffset)) {
-                let stepSize = (this.props.stepSize ?? 1) / 10
-                let curr = ev.clientX;
-                let mm = 100;
-                let off = this.dragStartOffset - curr;
-                // off = Math.min(mm, Math.max(-mm, off));
-                off = off / mm; //-1, 1
-                // off = (off + 1)/2;
-                // off *= (props.max - props.min) / 2
-                off *= ((stepSize) * 100) / 2
-                if (ev.shiftKey) off *= 10
-                if (ev.altKey) off *= 0.1
-
-                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
-                if(!this.props.disabled) this.props.onChange(val, false)
-                this.lastValue = val;
-            }
-        } else {
-            this.removeEvents()
-            // setDragging(false)
+
+    private handlePointerMove = (movementX: number, _movementY: number, _cursorX: number, _cursorY: number) => {
+        if (isFinite(this.dragStartValue)) {
+            let stepSize = (this.props.stepSize ?? 1) / 10
+
+            // Use movementX for horizontal dragging
+            let off = movementX;
+
+            // Scale the movement
+            off *= stepSize;
+
+            // Apply modifiers - these need to be checked differently in pointer lock
+            // We'll accumulate the offset instead
+            if (!this.accumulatedOffset) this.accumulatedOffset = 0;
+            this.accumulatedOffset += off;
+
+            let val = this.dragStartValue + this.accumulatedOffset;
+            // 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
+
+            if(!this.props.disabled) this.props.onChange(val, false)
+            this.lastValue = val;
         }
     };
 
+    private accumulatedOffset = 0;
+
     render() {
         // const [dragging, setDragging] = React.useState(false)
 
         return (
-            <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()
-                     ev.preventDefault()
-                     this.cursor = document.documentElement.style.cursor
-                     document.documentElement.style.cursor = "ew-resize"
-                     document.addEventListener('mousemove', this.mouseMoveEvent)
-                     document.addEventListener('mouseup', this.mouseUpEvent)
-                     // setDragging(true)
-                 }}
+            <div
+                ref={this.divRef}
+                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
+                    if (!this.divRef.current) return;
+
+                    this.dragStartValue = this.props.value
+                    this.accumulatedOffset = 0
+
+                    this.cursor = document.documentElement.style.cursor
+                    document.documentElement.style.cursor = "none"
+
+                    // Create pointer lock manager
+                    this.pointerLockManager = new PointerLockManager(this.divRef.current, {
+                        onMove: this.handlePointerMove,
+                        onLockChange: (locked) => {
+                            if (!locked) {
+                                this.removeEvents();
+                            }
+                        }
+                    });
+
+                    this.pointerLockManager.requestLock(ev.clientX, ev.clientY);
+                    ev.stopPropagation()
+                    ev.preventDefault()
+
+                    // Add mouseup listener to release lock
+                    const handleMouseUp = () => {
+                        this.removeEvents();
+                        document.removeEventListener('mouseup', handleMouseUp);
+                    };
+                    document.addEventListener('mouseup', handleMouseUp);
+
+                    // setDragging(true)
+                }}
             >
                 <Icon icon={this.props.icon} size={this.props.size} aria-disabled={this.props.disabled} />
             </div>

package/src/components/ExtendedNumericInput.tsx

@@ -105,14 +105,14 @@ export class ExtendedNumericInput extends React.PureComponent<Props, IExtendedNu
                         draggableIcon !== false ? <DraggableIcon icon={leftIcon ?? "variable"}
                                    size={16}
                                    disabled={props2.readOnly}
-                                   small={props2.small}
+                                   small={props2.small || props2.size as any === 'small'}
                                    value={parseFloat(value ?? '0')}
                                    stepSize={props2.stepSize}
                                    onChange={(v, last) => {
                                        this.handleValueChange(v, v.toString(), null, last, true)
                                    }}/> : undefined
                 )}
-                // leftIcon={"variable"}
+                // leftIcon={draggableIcon ? undefined : leftIcon}
                 buttonPosition={props2.buttonPosition ?? (props2.disabled ? "none" : "right")}
                 allowNumericCharactersOnly={false}
                 clampValueOnBlur={true}