lucid-ui
Version:
A UI component library from AppNexus.
134 lines • 8.49 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
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.ResponsiveGrid = 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 Resizer_1 = __importDefault(require("../Resizer/Resizer"));
var cx = style_helpers_1.lucidClassNames.bind('&-ResponsiveGrid');
var string = prop_types_1.default.string, number = prop_types_1.default.number, arrayOf = prop_types_1.default.arrayOf;
var Cell = function (_props) { return null; };
Cell.displayName = 'ResponsiveGrid.Cell';
Cell.peek = {
description: "\n\t\tRenders a `<article>` as the grid cell\n\t",
};
var defaultProps = {
breakPoints: [960, 1430],
};
var ResponsiveGrid = /** @class */ (function (_super) {
__extends(ResponsiveGrid, _super);
function ResponsiveGrid() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.getColumnLayout = function (numberOfColumns) {
var cellProps = lodash_1.default.map(component_types_1.findTypes(_this.props, ResponsiveGridWrapper.Cell), 'props');
var columns = lodash_1.default.reduce(lodash_1.default.map(cellProps, function (props, key) { return (react_1.default.createElement("article", { key: key, className: cx('&-Cell') }, props.children)); }), function (columns, cell, idx) {
columns[idx % numberOfColumns].push(cell);
return columns;
}, lodash_1.default.times(numberOfColumns, function () { return []; }));
return (react_1.default.createElement("div", { className: cx('&', {
'&-one-column': numberOfColumns === 1,
}) }, lodash_1.default.map(columns, function (col, index) {
return (react_1.default.createElement("div", { key: index, className: cx('&-Column') }, col));
})));
};
return _this;
}
ResponsiveGrid.prototype.shouldComponentUpdate = function (nextProps) {
var _a = this.props, width = _a.width, breakPoints = _a.breakPoints;
var nextWidth = nextProps.width;
var breakOne = breakPoints[0], breakTwo = breakPoints[1];
if (nextWidth < width) {
return ((nextWidth < breakOne && width >= breakOne) ||
(nextWidth < breakTwo && width >= breakTwo));
}
else if (nextWidth > width) {
return ((nextWidth > breakOne && width <= breakOne) ||
(nextWidth > breakTwo && width <= breakTwo));
}
return false;
};
ResponsiveGrid.prototype.render = function () {
var _a = this.props, width = _a.width, breakPoints = _a.breakPoints;
var breakOne = breakPoints[0], breakTwo = breakPoints[1];
if (width < breakTwo) {
if (width < breakOne) {
return this.getColumnLayout(1);
}
return this.getColumnLayout(2);
}
return this.getColumnLayout(3);
};
ResponsiveGrid.displayName = 'ResponsiveGrid';
ResponsiveGrid.propTypes = {
width: number(templateObject_1 || (templateObject_1 = __makeTemplateObject(["Width of the grid. Note: this does not set the width of the grid, and should be\n\t\tprovided by calculating the width of the parent element."], ["Width of the grid. Note: this does not set the width of the grid, and should be\n\t\tprovided by calculating the width of the parent element."]))),
breakPoints: arrayOf(number)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\tBreak points for the grid to switch column layouts. Break points should be provided \n\t\tin ascending order. Currently only two break points are used. Example: [960, 1430]"], ["\n\t\tBreak points for the grid to switch column layouts. Break points should be provided \n\t\tin ascending order. Currently only two break points are used. Example: [960, 1430]"]))),
className: string(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\t\tAppended to the component-specific class names set on the root elements.\n\t\t"], ["\n\t\t\tAppended to the component-specific class names set on the root elements.\n\t\t"]))),
};
return ResponsiveGrid;
}(react_1.default.Component));
exports.ResponsiveGrid = ResponsiveGrid;
var ResponsiveGridWrapper = function (props) {
var breakPoints = props.breakPoints, children = props.children, className = props.className, passThroughs = __rest(props, ["breakPoints", "children", "className"]);
return (react_1.default.createElement(Resizer_1.default, __assign({ className: cx('&', className) }, component_types_1.omitProps(passThroughs, undefined, lodash_1.default.keys(ResponsiveGridWrapper.propTypes), false)), function (width) {
return (react_1.default.createElement(ResponsiveGrid, { width: width, breakPoints: breakPoints }, children));
}));
};
ResponsiveGridWrapper.Cell = Cell;
ResponsiveGridWrapper.defaultProps = defaultProps;
ResponsiveGridWrapper.displayName = ResponsiveGrid.displayName;
ResponsiveGridWrapper.propTypes = {
breakPoints: arrayOf(number)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\tBreak points for the grid to switch column layouts. Break points should be provided \n\t\tin ascending order. Currently only two break points are used. Example: [960, 1430]\n\t"], ["\n\t\tBreak points for the grid to switch column layouts. Break points should be provided \n\t\tin ascending order. Currently only two break points are used. Example: [960, 1430]\n\t"]))),
className: string(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\tAppended to the component-specific class names set on the root elements.\n\t"], ["\n\t\tAppended to the component-specific class names set on the root elements.\n\t"]))),
};
ResponsiveGridWrapper.peek = {
description: "\n\t\tA grid container that changes the number of grid columns in response to width changes. By default,\n\t\tthe grid cells are displayed in a single column for widths less than 960px, two columns for widths greater \n\t\tthan 960px and less than 1430px, and three columns for widths greater than 1430px. Custom break points can\n\t\tbe provided through the `breakPoints` prop.\n\t",
categories: ['utility'],
madeFrom: ['Resizer'],
};
exports.default = ResponsiveGridWrapper;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
//# sourceMappingURL=ResponsiveGrid.js.map