Home Reference Source Repository

src/Zippy.js

/**
 * @file Zippy
 * @author cxtom([email protected])
 */

import React, {PropTypes} from 'react';

import {create} from 'melon-core/classname/cxBuilder';

const cx = create('Zippy');

export default class Zippy extends React.Component {

    render() {

        const props = this.props;

        const {
            expand,
            horizontal,
            ...others
        } = props;

        /* eslint-disable fecs-min-vars-per-destructure */

        const className = cx(props)
            .addVariants(horizontal ? 'horizontal' : 'vertical')
            .addStates({close: !expand})
            .build();

        let style = this.props.style;

        if (!expand) {
            style = {
                ...style,
                [horizontal ? 'width' : 'height']: 0
            };
        }

        return (
            <div {...others} style={style} className={className} />
        );

    }

}

Zippy.displayName = 'Zippy';

Zippy.propTypes = {
    horizontal: PropTypes.bool,
    expand: PropTypes.bool
};

Zippy.defaultProps = {
    horizontal: false,
    expand: false
};