Options
All
  • Public
  • Public/Protected
  • All
Menu

@mavenomics/ui

Index

Modules

Enumerations

Classes

Interfaces

Type aliases

Functions

Object literals

Type aliases

IDetailEditorConstructor

IDetailEditorConstructor<T>: object | ITypeEditorConstructor<T>

A fully controlled React component, or a Widget, for editing a given value.

Such editors appear in larger UI elements, such as popups or pinned tooltips, and are suitable for comprehensively editing a particular value.

They do not have to be React components- a Widget also works as a detail editor.

interface

Type parameters

  • T

ITypeEditorConstructor

ITypeEditorConstructor<T>: object | FunctionComponent<ITypeEditorProps<T>>

A fully controlled React component for editing a given value.

Type editors are passed through the EditorFactory, and are used extensively by the framework for a consistent, cohesive, and comprehensive editing UX. These are usually managed by a component, and aren't normally consumed directly by user code.

interface

Type parameters

  • T

Functions

Const Checkbox

  • Checkbox(__namedParameters: object): Element

Const DateEditor

  • DateEditor(__namedParameters: object): Element

Const FallbackEditor

  • FallbackEditor(__namedParameters: object): Element

Const InlineColor

  • InlineColor(__namedParameters: object): Element

Const StringEditor

  • StringEditor(__namedParameters: object): Element

Const UncontrolledInput

  • UncontrolledInput(__namedParameters: object): Element

  • STOP!

    This input control is special, and should not be used for all circumstances. It is uncontrolled, meaning it has hidden state that is not expressed in it's properties. This control is meant to be used with fields that should update in response to user input, but may also update asynchronously. Due to a spec bug in how browsers handle user state in input elements, React cannot normally handle this case on it's own without stomping on user context.

    Additionally, this control disables a number of browser features (like spell check and autocomplete) so that it can remain performant on large strings. If you want these features, you'll need to use a different component.

    Use this component with ReactHelpers#useIntermediate.

    Parameters

    • __namedParameters: object

    Returns Element

isWidgetCtor

renderOnEmit

  • renderOnEmit(this: void, obs: Observable<any>): void

  • Rerender a react component whenever an observable emits.

    This is useful for components that use Observables as a dirtiness signal, such as the TreeView.

    Parameters

    • this: void
    • obs: Observable<any>

    Returns void

useIntermediate

  • useIntermediate<T>(this: void, value: T, onValueChanged: function): [T, number, React.Dispatch<T>]

  • Helper for working with UncontrolledInput.

    For usage info, refer to the documentation for UncontrolledInput.

    export
    template

    T A value that can be compared using strict equality (===)

    Type parameters

    • T

    Parameters

    • this: void
    • value: T
    • onValueChanged: function
        • (this: void, arg: T): void

        • Parameters

          • this: void
          • arg: T

          Returns void

    Returns [T, number, React.Dispatch<T>]

usePrevious

  • usePrevious<T>(this: void, value: T): T | undefined

  • Helper function to fetch the previous value of a hook, for comparison

    export
    template

    T The type of the value to remember

    example

    function MyComponent() { const [val, setVal] = React.useHook(true); const lastVal = usePrevious(val);

    return (<button onClick={() => setVal(!val)}>
    WAS: {lastVal}. NOW: {val}
</button>);

    }

    Type parameters

    • T

    Parameters

    • this: void
    • value: T

      The value to remember

    Returns T | undefined

    The previous value given to this hook, or undefined.

useRender

  • useRender(this: void): forceRender

  • Helper function for imperatively rerendering a function component.

    example

    function MyReactComponent({onDirty}: {onDirty: Observable}) { const forceRender = useRender();

     setTimeout(() => forceRender(), 1000)

 return (<span>Hello, world! {Date.now()}</span>);

    }

    Parameters

    • this: void

    Returns forceRender

Object literals

Const defaultTypeEditors

defaultTypeEditors: object

autoStart

autoStart: true = true

id

id: string = "@mavenomics/ui:defaultTypeEditors"

requires

requires: Token<ITypeEditorFactory>[] = [ITypeEditorFactory]

activate

Const typeEditorFactoryPlugin

typeEditorFactoryPlugin: object

Plugin that provides the TypeEditor factory

NOTE: The TypeEditor factory cannot be disabled using Phosphor, as it holds global state. This is merely a convenience for setting it up, accessing it, and registering your own type editors.

autoStart

autoStart: true = true

id

id: string = "@mavenomics/ui:type-editor-factory"

provides

provides: Token<ITypeEditorFactory> = ITypeEditorFactory

activate

Generated using TypeDoc