Value component

This component was already shown in the introduction. We re-present it here as a complete sample.

Remember, Styletron does not allow descendant selectors. Because of this, we need to render a separate child component (ValueLabel), which has its own styling engine.

styles.js

export default {
  textAlign:  'center',
  fontSize:   '20px',
  lineHeight: '1',
  fontWeight: 'bold'
};

export function dynamicStyle({props, componentTheme}) {
  return Object.assign(
    {},
    componentTheme,
    props.color && {color: props.color}
  );
}

value.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Styled} from 'styletron-themer';
import staticStyle, {dynamicStyle} from './styles';

// load the private component
import ValueLabel from './label/value-label';

export default class Value extends Component {
  static propTypes = {
    label:      PropTypes.node,
    color:      PropTypes.string,
    labelColor: PropTypes.string
  };

  render() {  


    return (
      <Styled
        themeName = 'ValueLabel'
        staticStyle = {staticStyle}
        dynamicStyle = {dynamicStyle}
        {...this.props}
      >
        {(className, props) => {
          const {label, labelColor, ...otherProps} = props;
          return (
            <div {...otherProps} className={className}>
              {this.props.children}
              {label && <ValueLabel color={labelColor}>{label}</ValueLabel>}
            </div>
          );
        }}
      </Styled>
    );
  }
}