import { base } from '../base' ; import { BindCheckbox , Binding , BindRadioSelect , BindRange , NewSignal } from 'vega-typings' ; import { Explorer_Class } from '../explorer' ; import { FluentUITypes } from '@msrvida/fluentui-react-cdn-typings' ; export interface Props { newViewStateTarget ? : boolean ; collapseLabel ? : boolean ; explorer : Explorer_Class ; signal : NewSignal ; prefix ? : string ; disabled ? : boolean ; onChange ? : ( value : any ) => void ; } export function Signal ( props ) { if ( ! props . explorer . viewer || ! props . signal ) { return null ; } if ( props . signal . bind ) { const input = ( props . signal . bind as BindCheckbox | BindRadioSelect | BindRange ) . input ; if ( input ) { const fn = map [ input ] ; if ( fn ) { const prefix = props . prefix ? `${ props . prefix } ` : '' ; let initialValue ; try { initialValue = props . explorer . viewer . vegaViewGl . signal ( props . signal . name ) ; } catch ( error ) { } const control = fn ( prefix , props . signal . bind , initialValue , ( value ) => { props . onChange && props . onChange ( value ) ; props . explorer . signal ( props . signal . name , value , props . newViewStateTarget ) ; } , props . disabled , props . collapseLabel ) ; return ( < div className = "sanddance-signal" > { control } < /div>); } } } return null ; } const map = { } ; map [ 'range' ] = ( prefix , bind , initialValue , onChange , disabled , collapseLabel ) => { return ( < base . fluentUI . Slider label = { prefix + bind . name } max = { bind . max } min = { bind . min } step = { bind . step } defaultValue = { initialValue } onChange = { onChange } disabled = { disabled } / > ) ; } ; map [ 'select' ] = ( prefix , bind , initialValue , onChange , disabled , collapseLabel ) => { const options = bind . options . map ( ( o , i ) => { const option = { key : o , text : o } ; return option ; } ) ; const label = prefix + bind . name ; return ( < base . fluentUI . Dropdown onRenderTitle = { collapseLabel ? ( ( a , b ) => ( < span > { label } : { ( a [ 0 ] as FluentUITypes . IDropdownOption ) . text } < /span>)) : undefined } defaultSelectedKey = { initialValue } label = { collapseLabel ? undefined : label } options = { options } onChange = { ( e , o ) => onChange ( o . text ) } disabled = { disabled } / > ) ; } ; map [ 'checkbox' ] = ( prefix , bind , initialValue , onChange , disabled , collapseLabel ) => { return ( < base . fluentUI . Toggle defaultChecked = { initialValue } label = { prefix + bind . name } onChange = { ( e , checked ? ) => onChange ( checked ) } disabled = { disabled } / > ) ; } ;