lucid-ui
Version:
A UI component library from Xandr.
221 lines • 7.42 kB
JavaScript
;
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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
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 = __importStar(require("lodash"));
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("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;
var Cell = function (_props) { return null; };
Cell.displayName = 'Grid.Cell';
Cell.peek = {
description: "Renders an `<article>` as the grid cell",
};
Cell.propTypes = {
/**
fill all twelve columns of the primary grid axis
*/
isFull: bool,
/**
fill six columns of the primary grid axis
*/
isHalf: bool,
/**
fill four columns of the primary grid axis
*/
isThird: bool,
/**
fill three columns of the primary grid axis
*/
isQuarter: bool,
/**
fill 2 columns of 12
*/
is2: bool,
/**
fill 3 columns of 12
*/
is3: bool,
/**
fill 4 columns of 12
*/
is4: bool,
/**
fill 5 columns of 12
*/
is5: bool,
/**
fill 6 columns of 12
*/
is6: bool,
/**
fill 7 columns of 12
*/
is7: bool,
/**
fill 8 columns of 12
*/
is8: bool,
/**
fill 9 columns of 12
*/
is9: bool,
/**
fill 10 columns of 12
*/
is10: bool,
/**
fill 11 columns of 12
*/
is11: bool,
/**
offset a grid cell by three columns
*/
isOffsetQuarter: bool,
/**
offset a grid cell by four columns
*/
isOffsetThird: bool,
/**
offset a grid cell by six columns
*/
isOffsetHalf: bool,
};
Cell.peek = {
description: "Renders an `<article>` as the grid cell.",
};
// TODO: This functional component should be refactored so it doesn't have to omit props
var nonPassThroughs = [
'isFull',
'isHalf',
'isThird',
'isQuarter',
'is2',
'is3',
'is4',
'is5',
'is6',
'is7',
'is8',
'is9',
'is10',
'is11',
'isOffsetQuarter',
'isOffsetThird',
'isOffsetHalf',
'initialState',
'callbackId',
];
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((0, component_types_1.findTypes)(props, exports.Grid.Cell), 'props');
return (react_1.default.createElement("section", __assign({}, passThroughs, { 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({}, (0, lodash_1.omit)(cellChildProp, nonPassThroughs), { 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: "This component is designed to be used in `Composites` as a layout tool. You can use the `Grid` components themselves or create your own components using the `Grid` styles from `Grid.less`. Please see examples for more information.",
categories: ['layout'],
};
exports.Grid.propTypes = {
/**
Appended to the component-specific class names set on the root element.
*/
className: string,
/**
explicitly set the primary axis of the grid to Y
*/
isVertical: bool,
/**
explicitly set the primary axis of the grid to X
*/
isHorizontal: bool,
/**
a grid without padding separating grid cells
*/
isGutterless: bool,
/**
Allow Grids to wrap multiple lines
*/
isMultiline: bool,
/**
Any valid React component
*/
children: node,
};
exports.default = exports.Grid;
//# sourceMappingURL=Grid.js.map