react-grid-system
Version:
A powerful Bootstrap-like responsive grid system for React.
91 lines (90 loc) • 2.67 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.GutterWidthContext = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _config = require("../../config");
var _style = _interopRequireDefault(require("./style"));
var _primitives = require("../../primitives");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const GutterWidthContext = exports.GutterWidthContext = /*#__PURE__*/_react.default.createContext(false);
const Row = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
let {
children,
style = {},
align = "normal",
justify = "start",
wrap = "wrap",
debug = false,
nogutter = false,
gutterWidth = null,
component = _primitives.Div,
direction = "row",
...otherProps
} = _ref;
let theGutterWidth = (0, _config.getConfiguration)().gutterWidth;
if (nogutter) theGutterWidth = 0;
if (typeof gutterWidth === "number") theGutterWidth = gutterWidth;
const theStyle = (0, _style.default)({
gutterWidth: theGutterWidth,
align,
justify,
debug,
moreStyle: style,
direction,
wrap
});
return /*#__PURE__*/_react.default.createElement(component, {
ref,
style: theStyle,
...otherProps
}, /*#__PURE__*/_react.default.createElement(GutterWidthContext.Provider, {
value: theGutterWidth
}, children));
});
Row.propTypes = {
/**
* Content of the element
*/
children: _propTypes.default.node.isRequired,
/**
* Vertical column alignment
*/
align: _propTypes.default.oneOf(["normal", "start", "center", "end", "stretch"]),
/**
* Horizontal column alignment
*/
justify: _propTypes.default.oneOf(["start", "center", "end", "between", "around", "initial", "inherit"]),
/**
* flex-direction style attribute
*/
direction: _propTypes.default.oneOf(["column", "row", "column-reverse", "row-reverse"]),
/**
* flex-wrap style attribute
*/
wrap: _propTypes.default.oneOf(["nowrap", "wrap", "reverse"]),
/**
* No gutter for this row
*/
nogutter: _propTypes.default.bool,
/**
* Custom gutter width for this row
*/
gutterWidth: _propTypes.default.number,
/**
* Optional styling
*/
style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])),
/**
* Set to apply some debug styling
*/
debug: _propTypes.default.bool,
/**
* Use your own component
*/
component: _propTypes.default.elementType
};
Row.displayName = "Row";
var _default = exports.default = Row;