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);
}
}