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

package/src/bpComponents/BPFileComponent.tsx

@@ -7,50 +7,57 @@ type StateValue = string | File | null
 type FileImportType = any
 export type BPFileComponentState = BPValueComponentState<StateValue> & {
     mode: 'url'|'file',
+    preview?: string,
 }
 
 type BPFileComponentExtras = {fileLoader?: {load: (v: string|File|{path: string, file: File|Blob})=>Promise<FileImportType>}}
 type BPFileComponentContextType = UiConfigRendererContextType & BPFileComponentExtras
 
-export class BPFileComponent extends BPValueComponent<FileImportType | null, BPFileComponentState, StateValue> {
+// 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<FileImportType | null> & BPFileComponentExtras
-    constructor(props: BPComponentProps<FileImportType | null> & BPFileComponentExtras, context: BPFileComponentContextType) {
+    declare props: BPComponentProps<T | null> & BPFileComponentExtras & TP
+    constructor(props: BPComponentProps<T | null> & BPFileComponentExtras & TP, context: BPFileComponentContextType) {
         super(props, context, {
-            mode: 'file',
+            mode: 'url',
             value: null,
             label: 'File'
         });
         if(!context.fileLoader && !props.fileLoader) throw new Error('BPFileComponent requires fileLoader to be available in context')
     }
 
-    convertValueToState(val: FileImportType | null, state: BPFileComponentState): BPFileComponentState {
-        let mode: BPFileComponentState['mode'] = state.mode
-        let value = state.value
-        if (val) { // todo: move to subclass in threepipe
-            if (val.userData) {
-                if (val.userData.__sourceBlob) {
-                    value = val.userData.__sourceBlob
-                    mode = 'file'
-                } else if (val.userData.rootPath?.length) {
-                    value = val.userData.rootPath
-                    mode = 'url'
-                }
-            }
-        }
-        return {...state, mode, value}
+    // reimplemented in subclass
+    convertValueToState(_val: T | null, _state: BPFileComponentState): BPFileComponentState {
+        throw new Error('Not Implemented')
+        // let mode: BPFileComponentState['mode'] = state.mode
+        // let value = state.value
+        // if (val) {
+        //     if (val.userData) {
+        //         if (val.userData.__sourceBlob) {
+        //             value = val.userData.__sourceBlob
+        //             mode = 'file'
+        //         } else if (val.userData.rootPath?.length) {
+        //             value = val.userData.rootPath
+        //             mode = 'url'
+        //         }
+        //     }
+        // }
+        // return {...state, mode, value}
     }
 
-    async convertStateToValue(state: BPFileComponentState): Promise<FileImportType|null> {
+    async convertStateToValue(state: BPFileComponentState): Promise<T|null> {
         const value = state.value
         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') {
-            val = await (this.context.fileLoader ?? this.props.fileLoader)!.load(value);
+            val = value === lastState.value ? last : await (this.context.fileLoader ?? this.props.fileLoader)!.load(value);
         } else {
             // todo handle blob with no name
-            val = await (this.context.fileLoader ?? this.props.fileLoader)!.load({path: value.name || 'file', file: value});
+            val = value === lastState.value ? last : await (this.context.fileLoader ?? this.props.fileLoader)!.load({path: value.name || 'file', file: value});
         }
         // console.log(val)
         return val;
@@ -60,12 +67,33 @@ export class BPFileComponent extends BPValueComponent<FileImportType | null, BPF
     //     return super.doesNeedRefresh(state);
     // }
 
+    renderPreviewSlot() {
+        return <img src={"https://threepipe.org/logo.svg"}
+                    style={{width: "100%", maxHeight: "80px", objectFit: "contain"}}/>
+    }
+
+    // async updateStateValue(state: BPFileComponentState, last?: boolean): Promise<void> {
+    //     if(state.value !== this.state.value && state.preview) delete state.preview
+    //     return super.updateStateValue(state, last);
+    // }
+
+    protected flexBasis = "100%"
+
     render() {
-        return !this.state.hidden ? (
-            <FormGroupComponent label={this.state.label} flexBasis={"100%"} disabled={this.state.disabled}>
-                <FileComponent state={this.state} onChange={(s) => {
-                    this.updateStateValue({...this.state, ...s}); // todo: set loading while this promise is happening.
-                }} key={this.props.config.uuid}/>
+        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}/>
             </FormGroupComponent>
         ) : null
     }

package/src/bpComponents/BPFolderComponent.scss

@@ -27,9 +27,13 @@
   display: flex;
   flex-direction: column;
   background-color: $light-gray4 !important;
+
+
+  //border-top: #7c7c7c7c 1px solid !important;
+  //border-bottom: #7c7c7c7c 1px solid !important;
 }
 .bp5-dark .folder-card {
-  background-color: $dark-gray3 !important;
+  background-color: $dark-gray1 !important;
 }
 
 
@@ -44,6 +48,9 @@
 
 
 .folder-trigger-button {
+  font-size: 12px !important;
+  font-weight: 550 !important;
+
   margin-top: 1px;
   display: flex;
   align-items: center;
@@ -58,16 +65,25 @@
   &:active {
     background-color: $gray4 !important;
   }
+
+  .bp5-button-text {
+    text-align: left;
+    flex: 1 1 auto;
+  }
 }
 .bp5-dark .folder-trigger-button {
   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;
   }
 }
 
@@ -83,7 +99,12 @@
   flex-direction: row;
 
   > .folder-trigger-button {
-    margin-right: $pt-grid-size;
+    //margin-right: $pt-grid-size;
+    margin-right: 6px;
+    //margin-left: $pt-grid-size;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    min-height: 36px;
   }
 }
 
@@ -92,7 +113,7 @@
   align-items: center;
   justify-content: space-between;
   flex-direction: row;
-  box-shadow: 0 1px $pt-divider-black;
+  //box-shadow: 0 1px $pt-divider-black;
   //z-index: 1;
 
   > button {
@@ -100,8 +121,17 @@
   }
 
   .bp5-dark & {
-    box-shadow: 0 1px $pt-dark-divider-white;
+    //box-shadow: 0 1px $pt-dark-divider-white;
     //background-color: $dark-gray1;
   }
 }
 
+.folder-card{
+  .bp5-input-group .bp5-input{
+    font-size: var(--pt-font-size-small);
+  }
+
+  .bp5-button{
+    font-size: var(--pt-font-size-small);
+  }
+}

package/src/bpComponents/BPFolderComponent.tsx

@@ -1,10 +1,13 @@
-import React, {DOMAttributes} from "react";
+import React, {ChangeEventHandler, DOMAttributes} from "react";
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
-import {Button, Collapse, Icon, Intent} from "@blueprintjs/core";
+import {Button, Checkbox, Collapse, Icon, Intent} 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 classNames from "classnames";
+import {Classes} from "@blueprintjs/core/src/common";
+import {AnimationStates} from "@blueprintjs/core/lib/esm/components/collapse/collapse";
 
 export type BPFolderComponentState = BPContainerComponentState & {
 }
@@ -21,31 +24,39 @@ export class BPFolderComponent extends BPContainerComponent<BPFolderComponentSta
             safeSetProperty(this.props.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
+        const enabledToggle = children[0] && this.context.methods.getBinding(children[0])[1] === 'enabled' ? children[0] : undefined
+        enabledToggle && (enabledToggle.hidden = true)
         return !this.state.hidden ? (
             <FolderHeadCard
                 key={this.props.config.uuid}
                 open={this.state.expanded}
                 disabled={this.state.disabled}
+                level={this.props.level ?? 0}
                 minimal={(this.props.level ?? 0) > 0}
                 onClick={() => {
                     if(this.state.readOnly) return
                     setExpanded(!this.state.expanded)
                 }}
                 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))}
             >
-                <Collapse isOpen={this.state.expanded} keepChildrenMounted={false}>
-                    <div className="folder-children" style={{listStyleType: "none", paddingLeft: "0"}}>
-                        {this.state.children.map((c, i) => <ConfigObject key={'c' + i} {...this.props} config={c}
-                                                                         level={(this.props.level ?? 0) + 1}/>)}
+                <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*/}
+                        {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, disabled?: boolean, 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'] }>> = (props) => {
+    const hasEnabled = (props.enabled !== undefined)
     return (
         <div
             // interactive={!props.open}
@@ -71,21 +82,101 @@ export const FolderHeadCard: React.FC<React.PropsWithChildren<{ open: boolean, l
                 {/*</Button>*/}
 
                 <Button
-                    className="folder-trigger-button" fill={!props.minimal} onClick={props.onClick}
+                    className={"folder-trigger-button " + (props.open ? "folder-trigger-button-expanded" : "")}
+                    // fill={!props.minimal}
+                    fill={true}
+                    onClick={props.onClick}
                     minimal={true}
                     disabled={props.disabled}
                     small={props.minimal}
-                    style={props.minimal ? {} : {fontSize: "0.95rem", paddingTop: "8px", paddingBottom: "8px"}}
-                    intent={props.open ? Intent.PRIMARY : Intent.NONE}
-                    rightIcon={(
-                        <Icon icon="chevron-right" style={{
-                            rotate: props.open ? "90deg" : "0deg",
-                            transition: "rotate 0.25s ease-in-out"
-                        }}/>
-                    )}>{props.label}
+                    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 icon="caret-right" style={{
+                                rotate: props.open ? "90deg" : "0deg",
+                                transition: "rotate 0.25s ease-in-out"
+                            }}/>
+                        </>
+                    )}
+                >{props.label}
                 </Button>
+                {hasEnabled && <Checkbox
+                    style={{margin: 0, position: 'absolute', left: '10px'}}
+                    large inline
+                    defaultChecked={props.enabled}
+                    onChange={props.onEnabledChange}
+                    disabled={props.disabled}
+                    onClick={(e) => e.stopPropagation()}
+                />}
             </div>
             {props.children}
         </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

@@ -2,9 +2,10 @@ import {BPValueComponent, BPValueComponentState} from "./BPValueComponent";
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
 import {ReactNode} from "react";
 import {FormGroupComponent} from "../components/FormGroupComponent";
+import {PrimitiveVal} from "uiconfig.js";
 
 export abstract class BPInputComponent<
-    TStateValue, TState extends BPValueComponentState<TStateValue> = BPValueComponentState<TStateValue>>
+    TStateValue extends PrimitiveVal, TState extends BPValueComponentState<TStateValue> = BPValueComponentState<TStateValue>>
     extends BPValueComponent<TStateValue, TState, TStateValue> {
 
     protected constructor(props: BPComponentProps<TStateValue>, context: UiConfigRendererContextType, state: TState) {
@@ -25,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/BPLabelledComponent.tsx

@@ -1,4 +1,5 @@
 import {BPComponent, BPComponentProps, BPComponentState, UiConfigRendererContextType} from "./BPComponent";
+import {cleanLabel} from "../utils";
 
 export type BPLabelledComponentState = BPComponentState & {
     label: string
@@ -12,8 +13,7 @@ export abstract class BPLabelledComponent<TValue, TState, TProps extends BPCompo
     getUpdatedState(state: TState & BPLabelledComponentState): TState & BPLabelledComponentState {
         return super.getUpdatedState({
             ...state,
-            label: this.context.methods.getLabel(this.props.config) || state.label,
+            label: cleanLabel(this.context.methods.getLabel(this.props.config)) || state.label,
         })
     }
-
 }

package/src/bpComponents/BPNumberInputComponent.tsx

@@ -3,8 +3,9 @@ import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
 import {BPInputComponent} from "./BPInputComponent";
 import {ExtendedNumericInput} from "../components/ExtendedNumericInput";
 import {BPValueComponentState} from "./BPValueComponent";
+import {getNumberTransformFunctions} from "./GetNumberTransformFunctions";
 
-export class BPNumberInputComponent extends BPInputComponent<number> {
+export class BPNumberInputComponent extends BPInputComponent<number, BPValueComponentState<number>&{unit?: string}> {
     constructor(props: BPComponentProps<number>, context: UiConfigRendererContextType) {
         super(props, context, {value: 0, label: 'Number'});
     }
@@ -21,15 +22,26 @@ export class BPNumberInputComponent extends BPInputComponent<number> {
     }
 
     renderInput() {
+
+        const unit = this.props.config.unit as string|undefined; // todo add to uiconfig, getOrCall
+        const unitType = this.props.config.unitType as string|undefined; // todo add to uiconfig, getOrCall
+        const targetUnit = this.state.unit || unit
+        const {transformValue, invTransformValue} = getNumberTransformFunctions(unit, unitType, targetUnit);
+
         return (
             <ExtendedNumericInput
                 className="numericInput"
                 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}
+                transformValue={transformValue}
+                invTransformValue={invTransformValue}
+            />
         )
     }
 }
+

package/src/bpComponents/BPPanelComponent.tsx

@@ -42,7 +42,7 @@ export class BPPanelComponent extends BPContainerComponent<BPPanelComponentState
             <div
                 key={this.props.config.uuid}
                 className="folder-children" style={{listStyleType: "none", paddingLeft: "0"}}>
-                {this.state.children.map((c, i) => <ConfigObject key={'c' + i} {...this.props} config={c}/>)}
+                {this.state.children.map((c, i) => c ? <ConfigObject key={'c' + i} {...this.props} config={c}/> : null)}
             </div>
         ) : null
     }

package/src/bpComponents/BPSliderInputComponent.tsx

@@ -1,13 +1,16 @@
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
-import {NumericInput, Slider} from "@blueprintjs/core";
+import {Slider} from "@blueprintjs/core";
 import {BPInputComponent} from "./BPInputComponent";
 import {BPValueComponentState} from "./BPValueComponent";
 import {getOrCall} from "ts-browser-helpers";
+import {ExtendedNumericInput} from "../components/ExtendedNumericInput";
+import {getNumberTransformFunctions} from "./GetNumberTransformFunctions";
 
 export type BPSliderComponentState = BPValueComponentState<number> & {
     min: number,
     max: number,
     step: number
+    unit?: string,
 }
 
 export class BPSliderInputComponent extends BPInputComponent<number, BPSliderComponentState> {
@@ -35,36 +38,53 @@ export class BPSliderInputComponent extends BPInputComponent<number, BPSliderCom
     flexBasis = "75%"
 
     renderInput() {
-        return [(
-            <Slider
+
+        const unit = this.props.config.unit as string|undefined; // todo add to uiconfig, getOrCall
+        const unitType = this.props.config.unitType as string|undefined; // todo add to uiconfig, getOrCall
+        const targetUnit = this.state.unit || unit
+        const {transformValue, invTransformValue} = getNumberTransformFunctions(unit, unitType, targetUnit);
+
+        const invTransformValue_ = invTransformValue || ((v: number) => v);
+        const transformValue_ = transformValue || ((v: number) => v);
+        return [(<ExtendedNumericInput
+                style={{maxWidth: "4rem", minWidth: "3rem"}}
+                // defaultValue={state}
+                disabled={this.state.disabled} readOnly={this.state.readOnly}
                 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}
+                minorStepSize={this.state.step/10}
+                majorStepSize={this.state.step*10}
+                buttonPosition="none"
+                draggableIcon={false}
+                transformValue={transformValue}
+                invTransformValue={invTransformValue}
+                onChange2={(v, last) => {
+                    if(this.state.readOnly) return
+                    this.setValue(v, last)
+                }}
+            />), (
+            <Slider
+                value={invTransformValue_(Math.min(this.state.max, Math.max(this.state.min, this.state.value)))}
                 key={this.props.config.uuid + '_slider'}
                 disabled={this.state.disabled}
-                min={this.state.min} max={this.state.max} stepSize={this.state.step}
+                min={invTransformValue_(this.state.min)}
+                max={invTransformValue_(this.state.max)}
+                stepSize={invTransformValue_(this.state.step)}
                 labelRenderer={false}
                 // labelStepSize={(max - min)}
                 // labelValues={[]}
                 onChange={(v) => {
                     if(this.state.readOnly) return
-                    this.setValue(v)
+                    this.setValue(transformValue_(v), false)
                 }}
-            />
-        ),(
-            <NumericInput
-                style={{maxWidth: "4rem", minWidth: "3rem"}}
-                // defaultValue={state}
-                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}
-                minorStepSize={this.state.step/10}
-                majorStepSize={this.state.step*10}
-                buttonPosition="none"
-                onValueChange={(v) => {
+                onRelease={(v) => {
                     if(this.state.readOnly) return
-                    this.setValue(v)
+                    this.setValue(transformValue_(v), true)
                 }}
-            />)
+            />
+        ),
     ]
     }
 }

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