The UXF Core

This uses many libraries that are mostly based on React, but with additional custom elements that would otherwise not be covered.

Components

The component library offers many useful React helpers, which are documented below.

Display Name

React identifies the display name of a component either by a static string property displayName or by the function (constructor) name. For the latter, the name may change when applying decorators as these create a different constructor that calls the original which causes the name to become the same as the constructor that was used for the last decorator applied.

If the Component decorator is applied as the first decorator, then it will set the display name as the name of the constructor:

'use strict';

import * as React from 'react';
import { Component } from 'ix-tools-ux-core';

@Component.Decorator()
export default class MyComponent extends React.Component<{}, {}> {

    constructor(props?: {}, context?: any) {
        super(props, context);
    }

    render() {
        ...
    }

}

Pure Components

Pure components are those where rendering depends only on the props and state. React offers a lifecycle function called shouldComponentUpdate() which in the event it returns false, indicates that the component and its children do not need to be reconciled.

Marking the component pure, automatically adds a function to the component that returns false if the props and state did not change.

'use strict';

import * as React from 'react';
import { Component } from 'ix-tools-ux-core';

@Component.Decorator({ pure: true })
export default class MyComponent extends React.Component<{}, {}> {

    constructor(props?: {}, context?: any) {
        super(props, context);
    }

    render() {
        ...
    }

}

Prop Types and Context Types

React allows components to specify the prop types and context types that are expected and in development issue warnings when they do not match. The component director allows specifying these in the decorator body.

The example below shows how to define prop types, context types and child context types:

'use strict';

import * as React from 'react';
import { Component } from 'ix-tools-ux-core';

export interface MyComponentProps {
    propertyOne: string,
    propertyTwo?: string
}

@Component.Decorator({
     props: {
        propertyOne: {
            type: React.PropTypes.string,
            defaultValue: 'propOneDefaultValue'
        }
        propertyTwo: React.PropTypes.string.isRequired
    },
    context: {
        contextOne: React.PropTypes.string
    },
    childContext: {
        childContextOne: React.PropTypes.string
    }
})

export default class MyComponent extends React.Component<MyComponentProps, {}> {

    constructor(props?: MyComponentProps, context?: any) {
        super(props, context);
    }

    render() {
        ...
    }

}

This decorator also allows the specifying of child validation in a simpler way, as React only supports specifying a validation function. Child validation is defined by specifying a number of entries for expected children. These are compared against the list of children and if an expectation is not met, or there are children that do not fit any expectation, then the validation will fail.

The following example shows how to define an expectation for a single child.

'use strict';

import * as React from 'react';
import { Component } from 'ix-tools-ux-core';

@Component.Decorator({
    children: {
        single: Component.ChildValidation.exactlyOne
    }
})

export default class MyComponent extends React.Component<{}, {}> {

    constructor(props?: {}, context?: any) {
        super(props, context);
    }

    render() {
        return React.Children.only(this.props.children);
    }

}