lucid-ui/dist/cjs/components/Grid/Grid.js

A UI component library from AppNexus.

"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Grid = void 0;
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("react-peek/prop-types"));
var style_helpers_1 = require("../../util/style-helpers");
var component_types_1 = require("../../util/component-types");
var cx = style_helpers_1.lucidClassNames.bind('&-Grid');
var string = prop_types_1.default.string, bool = prop_types_1.default.bool, node = prop_types_1.default.node;
// -----------------------------------------------------------------------------
// Cell child component
// -----------------------------------------------------------------------------
var Cell = function (_props) { return null; };
Cell.displayName = 'Grid.Cell';
Cell.peek = {
    description: "\n\t\tRenders an `<article>` as the grid cell\n\t",
};
Cell.propTypes = {
    isFull: bool(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\tfill all twelve columns of the primary grid axis\n\t"], ["\n\t\tfill all twelve columns of the primary grid axis\n\t"]))),
    isHalf: bool(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\tfill six columns of the primary grid axis\n\t"], ["\n\t\tfill six columns of the primary grid axis\n\t"]))),
    isThird: bool(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\tfill four columns of the primary grid axis\n\t"], ["\n\t\tfill four columns of the primary grid axis\n\t"]))),
    isQuarter: bool(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\tfill three columns of the primary grid axis\n\t"], ["\n\t\tfill three columns of the primary grid axis\n\t"]))),
    is2: bool(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\tfill 2 columns of 12\n\t"], ["\n\t\tfill 2 columns of 12\n\t"]))),
    is3: bool(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t\tfill 3 columns of 12\n\t"], ["\n\t\tfill 3 columns of 12\n\t"]))),
    is4: bool(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\t\tfill 4 columns of 12\n\t"], ["\n\t\tfill 4 columns of 12\n\t"]))),
    is5: bool(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n\t\tfill 5 columns of 12\n\t"], ["\n\t\tfill 5 columns of 12\n\t"]))),
    is6: bool(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n\t\tfill 6 columns of 12\n\t"], ["\n\t\tfill 6 columns of 12\n\t"]))),
    is7: bool(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n\t\tfill 7 columns of 12\n\t"], ["\n\t\tfill 7 columns of 12\n\t"]))),
    is8: bool(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n\t\tfill 8 columns of 12\n\t"], ["\n\t\tfill 8 columns of 12\n\t"]))),
    is9: bool(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n\t\tfill 9 columns of 12\n\t"], ["\n\t\tfill 9 columns of 12\n\t"]))),
    is10: bool(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n\t\tfill 10 columns of 12\n\t"], ["\n\t\tfill 10 columns of 12\n\t"]))),
    is11: bool(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n\t\tfill 11 columns of 12\n\t"], ["\n\t\tfill 11 columns of 12\n\t"]))),
    isOffsetQuarter: bool(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n\t\toffset a grid cell by three columns\n\t"], ["\n\t\toffset a grid cell by three columns\n\t"]))),
    isOffsetThird: bool(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n\t\toffset a grid cell by four columns\n\t"], ["\n\t\toffset a grid cell by four columns\n\t"]))),
    isOffsetHalf: bool(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n\t\toffset a grid cell by six columns\n\t"], ["\n\t\toffset a grid cell by six columns\n\t"]))),
};
Cell.peek = {
    description: "\n\t\tRenders an `<article>` as the grid cell\n\t",
};
// -----------------------------------------------------------------------------
// Grid
// -----------------------------------------------------------------------------
var Grid = function (props) {
    var className = props.className, children = props.children, isVertical = props.isVertical, isHorizontal = props.isHorizontal, isGutterless = props.isGutterless, isMultiline = props.isMultiline, passThroughs = __rest(props, ["className", "children", "isVertical", "isHorizontal", "isGutterless", "isMultiline"]);
    var cellChildProps = lodash_1.default.map(component_types_1.findTypes(props, exports.Grid.Cell), 'props');
    return (react_1.default.createElement("section", __assign({}, component_types_1.omitProps(passThroughs, undefined, lodash_1.default.keys(exports.Grid.propTypes)), { className: cx('&', {
            '&-is-vertical': isVertical,
            '&-is-horizontal': isHorizontal,
            '&-is-gutterless': isGutterless,
            '&-is-multiline': isMultiline,
        }, className) }),
        lodash_1.default.map(cellChildProps, function (cellChildProp, index) {
            return (react_1.default.createElement("article", __assign({}, component_types_1.omitProps(cellChildProp, undefined, lodash_1.default.keys(exports.Grid.Cell.propTypes)), { key: index, className: cx('&-Cell', {
                    '&-Cell-is-full': cellChildProp.isFull,
                    '&-Cell-is-half': cellChildProp.isHalf,
                    '&-Cell-is-quarter': cellChildProp.isQuarter,
                    '&-Cell-is-third': cellChildProp.isThird,
                    '&-Cell-is-2': cellChildProp.is2,
                    '&-Cell-is-3': cellChildProp.is3,
                    '&-Cell-is-4': cellChildProp.is4,
                    '&-Cell-is-5': cellChildProp.is5,
                    '&-Cell-is-6': cellChildProp.is6,
                    '&-Cell-is-7': cellChildProp.is7,
                    '&-Cell-is-8': cellChildProp.is8,
                    '&-Cell-is-9': cellChildProp.is9,
                    '&-Cell-is-10': cellChildProp.is10,
                    '&-Cell-is-11': cellChildProp.is11,
                    '&-Cell-is-offset-quarter': cellChildProp.isOffsetQuarter,
                    '&-Cell-is-offset-third': cellChildProp.isOffsetThird,
                    '&-Cell-is-offset-half': cellChildProp.isOffsetHalf,
                }, cellChildProp.className) }), cellChildProp.children));
        }),
        children));
};
exports.Grid = Grid;
exports.Grid.Cell = Cell;
exports.Grid.displayName = 'Grid';
exports.Grid.peek = {
    description: "\n\t\tThis component is designed to be used in Composites as a layout tool.\n\t\tYou can use the Grid components themselves or create your own\n\t\tcomponents using the Grid styles from Grid.less.  Please see examples\n\t\tfor more information.\n\t",
    categories: ['layout'],
};
exports.Grid.propTypes = {
    className: string(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n\t\tAppended to the component-specific class names set on the root element.\n\t"], ["\n\t\tAppended to the component-specific class names set on the root element.\n\t"]))),
    isVertical: bool(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n\t\texplicitly set the primary axis of the grid to Y\n\t"], ["\n\t\texplicitly set the primary axis of the grid to Y\n\t"]))),
    isHorizontal: bool(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n\t\texplicitly set the primary axis of the grid to X\n\t"], ["\n\t\texplicitly set the primary axis of the grid to X\n\t"]))),
    isGutterless: bool(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n\t\ta grid without padding separating grid cells\n\t"], ["\n\t\ta grid without padding separating grid cells\n\t"]))),
    isMultiline: bool(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n\t\tAllow Grids to wrap multiple lines\n\t"], ["\n\t\tAllow Grids to wrap multiple lines\n\t"]))),
    children: node(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n\t\tAny valid React component\n\t"], ["\n\t\tAny valid React component\n\t"]))),
};
exports.default = exports.Grid;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
//# sourceMappingURL=Grid.js.map