storybook-host/lib/components/ComponentHost.js

"use strict";

var React = require('react');
var common_1 = require('../common');
var AlignmentContainer_1 = require('./AlignmentContainer');
var CropMarks_1 = require('./CropMarks');
var mobx_react_devtools_1 = require('mobx-react-devtools');
var RED = 'rgba(255, 0, 0, 0.1)';
var ComponentHost = common_1.Radium(function (props) {
    var story = props.story;
    var _props$mobXDevTools = props.mobXDevTools;
    var mobXDevTools = _props$mobXDevTools === undefined ? true : _props$mobXDevTools;
    var title = props.title;
    var align = props.align;
    var width = props.width;
    var height = props.height;
    var _props$padding = props.padding;
    var padding = _props$padding === undefined ? 50 : _props$padding;
    var background = props.background;
    var _props$backdrop = props.backdrop;
    var backdrop = _props$backdrop === undefined ? 'white' : _props$backdrop;
    var hr = props.hr;
    var _props$cropMarks = props.cropMarks;
    var cropMarks = _props$cropMarks === undefined ? true : _props$cropMarks;
    var _props$border = props.border;
    var border = _props$border === undefined ? 0 : _props$border;

    hr = hr === false ? false : true;
    var componentBackground = formatColor(background);
    var backdropColor = common_1.color.create(formatColor(backdrop));
    var isBackdropDark = isDark(backdropColor);
    var cropMarkColor = isBackdropDark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.1)';
    var titleColor = isBackdropDark ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.6)';
    var componentBorder = border;
    if (common_1.R.is(Number, border)) {
        componentBorder = 'solid 1px ' + common_1.color.toGrayAlpha(border);
    }
    if (border === true) {
        componentBorder = 'dashed 1px rgba(0, 0, 0, 0.2)';
    }
    var styles = common_1.css({
        base: {
            Absolute: 0,
            display: 'flex',
            flexDirection: 'column',
            background: backdropColor.toRgbString()
        },
        header: {
            borderBottom: hr && 'solid 1px ' + cropMarkColor,
            paddingTop: 2,
            paddingBottom: hr && 15,
            marginLeft: 15,
            marginTop: 15,
            marginRight: 15
        },
        h2: {
            fontWeight: 200,
            fontSize: 20,
            padding: 0,
            margin: 0,
            color: titleColor
        },
        body: {
            boxSizing: 'border-box',
            position: 'relative',
            flex: 1,
            margin: formatMarginPadding(padding)
        }
    });
    return React.createElement("div", { style: styles.base }, title && React.createElement("div", { style: styles.header }, React.createElement("h2", { style: styles.h2 }, title)), props.styles, React.createElement("div", { style: styles.body }, React.createElement(AlignmentContainer_1.default, { align: align }, React.createElement(CropMarks_1.default, { width: width, height: height, background: componentBackground, cropMarkColor: cropMarkColor, cropMarksVisible: cropMarks, border: componentBorder }, story()))), mobXDevTools && React.createElement(mobx_react_devtools_1.default, { position: { bottom: -1, right: -1 } }));
});
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = ComponentHost;
function formatColor(value) {
    if (value === undefined) {
        return;
    }
    if (common_1.R.is(Number, value)) {
        return common_1.color.toGrayHex(value);
    }
    if (value === true) {
        return RED;
    }
    return value;
}
function isDark(color) {
    return color.getAlpha() < 0.4 ? false : color.getBrightness() < 130;
}
function formatMarginPadding(value) {
    if (common_1.R.is(Array, value)) {
        return value.slice(0, 4).map(function (n) {
            return n + 'px';
        }).join(' ');
    }
    return value;
}