Home Reference Source Repository

src/material/Label.js

import React from 'react';
import PropTypes from 'prop-types';

function getStyles(props, context) {
    const { style } = props;
    return Object.assign({
        padding: `${context.muiTheme.baseTheme.spacing.desktopGutter / 2}px ${context.muiTheme.baseTheme.spacing.desktopGutter}px`,
        background: context.muiTheme.baseTheme.palette.accent3Color,
        color: 'white',
        textTransform: 'uppercase',
    }, style);
}

/**
 * @desc
 * Default styles:
 * ```
 * {
 *   padding: `${context.muiTheme.baseTheme.spacing.desktopGutter / 2}px ${context.muiTheme.baseTheme.spacing.desktopGutter}px`
 *   background context.muiTheme.baseTheme.palette.accent3Color,
 *   color: 'white',
 *   textTransform: 'uppercase'
 * }
 * ```
 */
class Label extends React.Component {
    /**
     * @type {Object}
     * @property {Node} children child nodes
     * @property {string} className class
     * @property {Object} style styles
     */
    static propTypes = {
        children: PropTypes.node,
        className: PropTypes.string,
        style: PropTypes.object,
    };

    /**
     * @type {Object}
     * @property {Object} muiTheme theme
     */
    static contextTypes = {
        muiTheme: PropTypes.object.isRequired,
    };


    /**
     * @return {Node}
     */
    render() {
        const styles = getStyles(this.props, this.context);
        return (
            <div style={styles}>{this.props.children}</div>
        );
    }
}

export default Label;