Support for Stateless Components

Breaking changes:

Seamstress.createDecorator / Seamstress.createContainer

The main export is no longer a decorator function.

Before:

import seamstress from 'react-seamstress';

@seamstress
class MyComponent extends React.Component {
  styles: { ... },
  styleStateTypes: { ... },
  subComponentTypes: { ... },
  getStyleState: function () { ... },

  ...

}

After:

import Seamstress from 'react-seamstress';

@Seamstress.createDecorator({
  styles: { ... },
  styleStateTypes: { ... },
  subComponentTypes: { ... },
  getStyleState: function () { ... },
})
class MyComponent extends React.Component { ... }

Stateless components must use Seamstress.createContainer to wrap with a HoC:

import Seamstress from 'react-seamstress';

function MyComponent (props) { ... }

MyComponent = Seamstress.createContainer(MyComponent, {
  styles: { ... },
  styleStateTypes: { ... },
  subComponentTypes: { ... },
  getStyleState: function () { ... },
});

computedStyles

When using createDecorator, all computed styles are accessed with this.getComputedStyles().

When using createContainer, a computedStyles prop will be provided by the HoC.

Before:

<div {...this.getStyleProps()}>
  <div {...this.getStylePropsFor('indicator')} />
</div>

After:

// With createDecorator:
const computedStyles = this.getComputedStyles();

// With createContainer:
const computedStyles = props.computedStyles;

<div {...computedStyles.root}>
  <div {...computedStyles.indicator} />
</div>

See the API Reference for details.