@6thquake/react-material
Version:
React components that implement Google's Material Design.
293 lines (241 loc) • 9.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.styles = void 0;
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
var _createBreakpoints = require("../styles/createBreakpoints");
var _Hidden = _interopRequireDefault(require("../Hidden"));
var GUTTERS = [0, 8, 16, 24, 40];
var GRID_SIZES = [true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var breakpointValues = {
xs: 0,
sm: 600,
md: 960,
lg: 1280,
xl: 1920
};
function generateGrid(globalStyles, theme, breakpoint) {
// For the auto layouting
var styles = (0, _defineProperty2.default)({}, "grid-".concat(breakpoint), {
position: 'relative',
float: 'left',
width: '100%'
});
GRID_SIZES.forEach(function (size) {
if (typeof size === 'boolean') {
// Skip the first one as handle above.
return;
} // Only keep 6 significant numbers.
var width = "".concat(Math.round(size / 12 * 10e6) / 10e4, "%");
/* eslint-disable max-len */
// Close to the bootstrap implementation:
// https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
/* eslint-enable max-len */
styles["grid-".concat(breakpoint, "-").concat(size)] = {
position: 'relative',
float: 'left',
minHeight: 1,
width: width
};
styles["offset-".concat(breakpoint, "-").concat(size)] = {
marginLeft: width
};
styles["push-".concat(breakpoint, "-").concat(size)] = {
left: width
};
styles["pull-".concat(breakpoint, "-").concat(size)] = {
right: width
};
}); // No need for a media query for the first size.
if (breakpoint === 'xs') {
(0, _extends3.default)(globalStyles, styles);
} else {
globalStyles[theme.breakpoints.up(breakpoint)] = styles;
}
}
function generateGutter(theme, breakpoint) {
var styles = {};
GUTTERS.forEach(function (spacing, index) {
if (index === 0) {
// Skip the default style.
return;
}
styles["spacing-".concat(breakpoint, "-").concat(spacing)] = {
margin: -spacing / 2,
width: "calc(100% + ".concat(spacing, "px)"),
'& > $item': {
padding: spacing / 2
}
};
});
return styles;
}
var styles = function styles(theme) {
return (0, _extends3.default)({
container: {
boxSizing: 'border-box',
marginRight: 'auto',
marginLeft: 'auto',
'&:after, &:before': {
display: 'table',
content: 'close-quote',
clear: 'both'
}
},
item: {
boxSizing: 'border-box',
margin: '0' // For instance, it's useful when used with a `figure` element.
}
}, generateGutter(theme, 'xs'), _createBreakpoints.keys.reduce(function (accumulator, key) {
// Use side effect over immutability for better performance.
generateGrid(accumulator, theme, key);
return accumulator;
}, {}));
};
exports.styles = styles;
function Grid(props) {
var _classNames;
var classes = props.classes,
classNameProp = props.className,
Component = props.component,
container = props.container,
hidden = props.hidden,
item = props.item,
lg = props.lg,
md = props.md,
sm = props.sm,
spacing = props.spacing,
xl = props.xl,
xs = props.xs,
offset = props.offset,
pull = props.pull,
push = props.push,
other = (0, _objectWithoutProperties2.default)(props, ["classes", "className", "component", "container", "hidden", "item", "lg", "md", "sm", "spacing", "xl", "xs", "offset", "pull", "push"]);
var sizeClassObj = {};
_createBreakpoints.keys.forEach(function (size) {
var _extends2;
var sizeProps = {};
if (typeof props[size] === 'number') {
sizeProps.span = props[size];
sizeProps.offset = props.offset;
sizeProps.push = props.push;
sizeProps.pull = props.pull;
} else if ((0, _typeof2.default)(props[size]) === 'object') {
sizeProps = props[size] || {};
}
sizeClassObj = (0, _extends3.default)({}, sizeClassObj, (_extends2 = {}, (0, _defineProperty2.default)(_extends2, classes["grid-".concat(size, "-").concat(sizeProps.span)], item && sizeProps.span), (0, _defineProperty2.default)(_extends2, classes["offset-".concat(size, "-").concat(sizeProps.offset)], item && sizeProps.offset), (0, _defineProperty2.default)(_extends2, classes["push-".concat(size, "-").concat(sizeProps.push)], item && sizeProps.push), (0, _defineProperty2.default)(_extends2, classes["pull-".concat(size, "-").concat(sizeProps.pull)], item && sizeProps.pull), _extends2));
});
var className = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.container, container), (0, _defineProperty2.default)(_classNames, classes.item, item), (0, _defineProperty2.default)(_classNames, classes["spacing-xs-".concat(String(spacing))], container && spacing !== 0), _classNames), classNameProp, sizeClassObj);
var gridProps = (0, _extends3.default)({
className: className
}, other);
if (hidden) {
return _react.default.createElement(_Hidden.default, hidden, _react.default.createElement(Component, gridProps));
}
return _react.default.createElement(Component, gridProps);
}
Grid.propTypes = {
/**
* The content of the component.
*/
children: _propTypes.default.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css-api) below for more details.
*/
classes: _propTypes.default.object.isRequired,
/**
* @ignore
*/
className: _propTypes.default.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
/**
* If `true`, the component will have the flex *container* behavior.
* You should be wrapping *items* with a *container*.
*/
container: _propTypes.default.bool,
/**
* If provided, will wrap with [Hidden](/api/hidden) component and given properties.
*/
hidden: _propTypes.default.object,
/**
* If `true`, the component will have the flex *item* behavior.
* You should be wrapping *items* with a *container*.
*/
item: _propTypes.default.bool,
/**
* Defines the number of grids the component is going to use.
* It's applied for the `lg` breakpoint and wider screens if not overridden.
*/
lg: _propTypes.default.oneOfType([_propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), _propTypes.default.object]),
/**
* Defines the number of grids the component is going to use.
* It's applied for the `md` breakpoint and wider screens if not overridden.
*/
md: _propTypes.default.oneOfType([_propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), _propTypes.default.object]),
/**
* Defines the number of grids the component is going to use.
* It's applied for the `sm` breakpoint and wider screens if not overridden.
*/
// sm: PropTypes.oneOf([false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, PropTypes.object]),
offset: _propTypes.default.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
/**
* Defines the space between the type `item` component.
* It can only be used on a type `container` component.
*/
pull: _propTypes.default.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
/**
* Defines the number of grids the component is going to use.
* It's applied for the `xl` breakpoint and wider screens.
*/
push: _propTypes.default.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
/**
* Defines the number of grids the component is going to use.
* It's applied for all the screen sizes with the lowest priority.
*/
sm: _propTypes.default.oneOfType([_propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), _propTypes.default.object]),
/**
* The number of cells to offset Col from the left
*/
spacing: _propTypes.default.oneOf(GUTTERS),
/**
* The number of cells that raster is moved to the left
*/
span: _propTypes.default.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
/**
* The number of cells that raster is moved to the right
*/
xl: _propTypes.default.oneOfType([_propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), _propTypes.default.object]),
/**
* Raster number of cells to occupy
*/
xs: _propTypes.default.oneOfType([_propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), _propTypes.default.object])
};
Grid.defaultProps = {
component: 'div',
container: false,
item: false,
lg: 0,
md: 0,
sm: 0,
spacing: 0,
xl: 0,
xs: 0
};
var _default = (0, _withStyles.default)(styles, {
name: 'RMGrid'
})(Grid);
exports.default = _default;