xblocks-core

import React from 'react';
import { element } from 'xblocks-core';
 
@element('xb-element')
class XBElement extends React.Component {
    render() {
        return (
            <div title={this.props.title}>{this.context.content()}</div>
        );
    }
}
 
XBElement.propTypes = {
    title: React.PropTypes.string
};

// define element
import { create } from 'xblocks-core';
 
create('xb-ico');

// define view
import { PropTypes } from 'react';
import { view } from 'xblocks-core';
import classnames from 'classnames';
 
view.register('xb-ico', {
    displayName: 'xb-ico',
 
    propTypes: {
        size: PropTypes.oneOf([ 's', 'm', 'l', 'xl' ]),
        type: PropTypes.oneOf([ 'remove', 'notification', 'check', 'dropdown' ]),
        active: PropTypes.bool,
        disabled: PropTypes.bool
    },
 
    getDefaultProps: function() {
        return {
            size: 'm',
            children: String.fromCharCode(160)
        };
    },
 
    render: function() {
        const classes = classnames({
            'xb-ico': true,
            '_active': this.props.active,
            '_disabled': this.props.disabled,
            [ `_type-${this.props.type}` ]: Boolean(this.props.type),
            [ `_size-${this.props.size}` ]: Boolean(this.props.size)
        });
 
        return (
            <span className={classes}>{this.context.content()}</span>
        );
    }
});