ukelli-ui/core/grid/grid.js

Base on React's UI lib. Make frontend's dev simpler and faster.

import React from 'react';
import classNames from 'classnames';
import { tuple } from 'basic-helper/utils/type';
var JustifyMap = {
    start: 'j-c-s',
    end: 'j-c-e',
    center: 'j-c-c',
    between: 'j-c-b',
    around: 'j-c-a',
};
var AlignContentMap = {
    start: 'a-c-start',
    end: 'a-c-e',
    center: 'a-c-c',
    between: 'a-c-b',
    around: 'a-c-around',
    stretch: 'a-c-str',
};
var AlignItemMap = {
    start: 'a-i-start',
    end: 'a-i-e',
    center: 'a-i-c',
    baseline: 'a-i-bl',
    stretch: 'a-i-str',
};
var WrapMap = {
    wrap: 'wrap',
    nowrap: 'nowrap',
};
var DirectionMap = {
    col: 'col',
    reCol: 're-col',
    row: 'row',
    reRow: 're-row',
};
var JustifyProps = tuple.apply(void 0, Object.keys(JustifyMap));
var AlignContentProps = tuple.apply(void 0, Object.keys(AlignContentMap));
var AlignItemProps = tuple.apply(void 0, Object.keys(AlignItemMap));
var DirectionProps = tuple.apply(void 0, Object.keys(DirectionMap));
var WrapProps = tuple.apply(void 0, Object.keys(WrapMap));
var Grid = function (props) {
    var _a;
    var children = props.children, _b = props.className, className = _b === void 0 ? '' : _b, style = props.style, _c = props.component, component = _c === void 0 ? 'div' : _c, space = props.space, container = props.container, item = props.item, _d = props.direction, direction = _d === void 0 ? '' : _d, _e = props.wrap, wrap = _e === void 0 ? '' : _e, _f = props.justify, justify = _f === void 0 ? '' : _f, _g = props.alignContent, alignContent = _g === void 0 ? '' : _g, _h = props.alignItem, alignItem = _h === void 0 ? '' : _h, xs = props.xs, sm = props.sm, lg = props.lg, xl = props.xl;
    var C = component;
    var isItem = typeof item != 'undefined' ? item : !container;
    var _className = classNames((_a = {},
        _a[className] = className || '',
        _a[JustifyMap[justify]] = container && justify,
        _a[AlignContentMap[alignContent]] = container && alignContent,
        _a[AlignItemMap[alignItem]] = container && alignItem,
        _a[WrapMap[wrap]] = container && wrap,
        _a[DirectionMap[direction]] = container && direction,
        _a["xs-" + xs] = xs,
        _a["sm-" + sm] = sm,
        _a["lg-" + lg] = lg,
        _a["xl-" + xl] = xl,
        _a["j-c-c"] = xl,
        _a['g-container'] = container,
        _a['g-item'] = isItem,
        _a));
    return (React.createElement(C, { style: style, className: (container ? "grid space-" + space + " " : '') + " " + _className }, children));
};
Grid.defaultProps = {
    component: 'div',
    space: 0,
    direction: 'row',
    wrap: 'wrap',
    container: false,
};
export default Grid;