@react-slate/core/build/components/View.js

Write interactive CLI apps with React

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const View_1 = __importDefault(require("../host/nodes/View"));
const layout_1 = require("../layout");
function View(props) {
    const { children, onLayout, bgColor, testID } = props;
    return (
    // @ts-ignore
    react_1.default.createElement(View_1.default.TAG, { onLayout: onLayout, onClick: props.onClick, onWheel: props.onWheel, layoutStyle: reduceLayoutStyle(props), style: { bgColor }, testID: testID }, children));
}
exports.default = View;
function reduceLayoutStyle(props) {
    return {
        display: props.display === 'none' ? layout_1.Display.None : layout_1.Display.Flex,
        positionType: props.position === 'absolute'
            ? layout_1.PositionType.Absolute
            : layout_1.PositionType.Relative,
        flexDirection: {
            row: layout_1.FlexDirection.Row,
            'row-reverse': layout_1.FlexDirection.RowReverse,
            column: layout_1.FlexDirection.Column,
            'column-reverse': layout_1.FlexDirection.ColumnReverse,
        }[props.flexDirection || 'row'],
        flexWrap: props.flexWrap &&
            {
                'no-wrap': layout_1.FlexWrap.NoWrap,
                wrap: layout_1.FlexWrap.Wrap,
                'wrap-reverse': layout_1.FlexWrap.WrapReverse,
            }[props.flexWrap],
        overflow: layout_1.Overflow.Hidden,
        alignItems: props.alignItems &&
            {
                'flex-start': layout_1.AlignItems.FlexStart,
                'flex-end': layout_1.AlignItems.FlexEnd,
                center: layout_1.AlignItems.Center,
                baseline: layout_1.AlignItems.Baseline,
                stretch: layout_1.AlignItems.Stretch,
            }[props.alignItems],
        alignSelf: props.alignSelf &&
            {
                auto: layout_1.AlignSelf.Auto,
                'flex-start': layout_1.AlignSelf.FlexStart,
                'flex-end': layout_1.AlignSelf.FlexEnd,
                center: layout_1.AlignSelf.Center,
                baseline: layout_1.AlignSelf.Baseline,
                stretch: layout_1.AlignSelf.Stretch,
            }[props.alignSelf],
        alignContent: props.alignContent &&
            {
                'flex-start': layout_1.AlignContent.FlexStart,
                'flex-end': layout_1.AlignContent.FlexEnd,
                center: layout_1.AlignContent.Center,
                stretch: layout_1.AlignContent.Stretch,
                'space-between': layout_1.AlignContent.SpaceBetween,
                'space-around': layout_1.AlignContent.SpaceAround,
            }[props.alignContent],
        justifyContent: props.justifyContent &&
            {
                'flex-start': layout_1.JustifyContent.FlexStart,
                'flex-end': layout_1.JustifyContent.FlexEnd,
                center: layout_1.JustifyContent.Center,
                'space-between': layout_1.JustifyContent.SpaceBetween,
                'space-around': layout_1.JustifyContent.SpaceAround,
                'space-evenly': layout_1.JustifyContent.SpaceEvenly,
            }[props.justifyContent],
        start: props.left,
        end: props.right,
        top: props.top,
        bottom: props.bottom,
        marginStart: props.marginLeft,
        marginEnd: props.marginRight,
        marginTop: props.marginTop,
        marginBottom: props.marginBottom,
        paddingStart: props.paddingLeft,
        paddingEnd: props.paddingRight,
        paddingTop: props.paddingTop,
        paddingBottom: props.paddingBottom,
        flexGrow: props.flexGrow,
        flexShrink: props.flexShrink,
        flexBasis: props.flexBasis,
        width: props.width,
        height: props.height,
        minWidth: props.minWidth,
        minHeight: props.minHeight,
        maxWidth: props.maxWidth,
        maxHeight: props.maxHeight,
        zIndex: props.position === 'absolute' ? props.zIndex || 1 : 0,
    };
}
exports.reduceLayoutStyle = reduceLayoutStyle;
//# sourceMappingURL=View.js.map