Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

glamorous-grid

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

glamorous-grid - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

.travis.yml

1

.eslintrc.json

@@ -17,2 +17,3 @@ {

"consistent-return": 0,
"space-infix-ops": 0,
"no-unused-vars": 1,

@@ -19,0 +20,0 @@ "comma-dangle": 0,

177

lib/Col.js

@@ -7,102 +7,111 @@ 'use strict';

var _jsx = function () { var REACT_ELEMENT_TYPE = typeof Symbol === "function" && Symbol.for && Symbol.for("react.element") || 0xeac7; return function createRawReactElement(type, props, key, children) { var defaultProps = type && type.defaultProps; var childrenLength = arguments.length - 3; if (!props && childrenLength !== 0) { props = {}; } if (props && defaultProps) { for (var propName in defaultProps) { if (props[propName] === void 0) { props[propName] = defaultProps[propName]; } } } else if (!props) { props = defaultProps || {}; } if (childrenLength === 1) { props.children = children; } else if (childrenLength > 1) { var childArray = Array(childrenLength); for (var i = 0; i < childrenLength; i++) { childArray[i] = arguments[i + 3]; } props.children = childArray; } return { $$typeof: REACT_ELEMENT_TYPE, type: type, key: key === undefined ? null : '' + key, ref: null, props: props, _owner: null }; }; }();
var _glamorous = require('glamorous');
var _react = require('react');
var _glamorous2 = _interopRequireDefault(_glamorous);
var React = _interopRequireWildcard(_react);
var _shallowEqual = require('fbjs/lib/shallowEqual');
var _glamorous = require('glamorous');
var _shallowEqual2 = _interopRequireDefault(_shallowEqual);
var _glamorous2 = _interopRequireDefault(_glamorous);
var _getTheme = require('./getTheme');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _getTheme2 = _interopRequireDefault(_getTheme);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
var _breakpoints = require('./breakpoints');
// import { breakpointMap, withSpacing, withDividers, shallowEqual, shouldUpdate } from '../helpers'
// import theme from '../theme'
var _breakpoints2 = _interopRequireDefault(_breakpoints);
exports.default = function () {
return _jsx('div', {}, void 0, 'I am a col');
var _withSpacing = require('./withSpacing');
var _withSpacing2 = _interopRequireDefault(_withSpacing);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var alignMap = {
start: 'flex-start',
end: 'flex-end'
};
// const AlignEnum = oneOf(['start', 'end', 'center'])
// const TextAlignEnum = oneOf(['left', 'right', 'center'])
var isNil = function isNil(val) {
return val === undefined || val === null;
};
// const alignMap = {
// start: 'flex-start',
// end: 'flex-end'
// }
var Col = (0, _glamorous2.default)('div', {
shouldClassNameUpdate: function shouldClassNameUpdate(props, nextProps, context, nextContext) {
return !(0, _shallowEqual2.default)(context.theme, nextContext.theme) || !(0, _shallowEqual2.default)(props.span, nextProps.span) || !(0, _shallowEqual2.default)(props.equalWidth, nextProps.equalWidth) || !(0, _shallowEqual2.default)(props.auto, nextProps.auto) || !(0, _shallowEqual2.default)(props.offset, nextProps.offset) || !(0, _shallowEqual2.default)(props.alignSelf, nextProps.alignSelf) || !(0, _shallowEqual2.default)(props.textAlign, nextProps.textAlign);
}
})({
position: 'relative',
width: '100%',
minHeight: 1,
boxSizing: 'border-box'
}, function (props) {
var gridTheme = (0, _getTheme2.default)(props);
var gutters = gridTheme.column_gutter;
// const propTypes = {
// /**
// * The ratio the column should span. Use `equalWidth: true` instead if you want all
// * col's in a row to have the same width, or `auto: true` if you want to adjust to the col's
// * content
// */
// span: oneOfType([number, objectOf(number)]),
return (0, _breakpoints2.default)(gutters, gridTheme, function (size) {
return !isNil(size) && {
paddingLeft: parseFloat(size) / 2,
paddingRight: parseFloat(size) / 2
};
});
}, function (props) {
var gridTheme = (0, _getTheme2.default)(props);
// /**
// * Will be set to true if:
// * 1. `span` is _not_ set in any breakpoint
// * 2. `equalWidth` is _not_ set in `sm`, `md`, `lg`, or `xl`
// */
// equalWidth: oneOfType([bool, objectOf(bool)]),
// auto: oneOfType([bool, objectOf(bool)]),
// offset: oneOfType([number, objectOf(number)]),
// alignSelf: oneOfType([AlignEnum, objectOf(string)]),
// textAlign: oneOfType([TextAlignEnum, objectOf(string)])
// }
return (0, _breakpoints2.default)(props.span, gridTheme, function (span) {
return span && {
flex: '0 0 ' + span * 100 + '%',
maxWidth: span * 100 + '%'
};
});
}, function (props) {
var gridTheme = (0, _getTheme2.default)(props);
// const defaultProps = {
// span: undefined,
// equalWidth: false,
// auto: false,
// offset: undefined,
// alignSelf: undefined,
// textAlign: undefined
// }
return (0, _breakpoints2.default)(props.equalWidth, gridTheme, function () {
var equalWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
// const Col = glamorous('div', {
// shouldClassNameUpdate: shouldUpdate(Object.keys(propTypes))
// })(
// {
// position: 'relative',
// width: '100%',
// minHeight: 1,
// ...(breakpointMap(theme.column_gutter, (size = theme.column_gutter_base) => ({
// paddingLeft: size / 2,
// paddingRight: size / 2
// })))
// },
// (props => breakpointMap(props.span, (span = defaultProps.span) => span && {
// flex: `0 0 ${span * 100}%`,
// maxWidth: `${span * 100}%`
// })),
// (props => breakpointMap(
// props.equalWidth,
// (eqWidth = defaultProps.equalWidth) => (eqWidth || (!props.equalWidth && !props.span)) && {
// flexBasis: 0,
// flexGrow: 1,
// maxWidth: '100%'
// }
// )),
// (props => breakpointMap(props.auto, (auto = defaultProps.auto) => auto && {
// flex: '0 0 auto',
// width: 'auto'
// })),
// (props => breakpointMap(props.offset, (offset = defaultProps.offset) => offset && {
// marginLeft: `${offset * 100}%`
// })),
// (props => breakpointMap(props.alignSelf, (align = defaultProps.alignSelf) => align && {
// alignSelf: `${alignMap[align] || align}`
// })),
// (props => breakpointMap(props.textAlign, (align = defaultProps.textAlign) => align && {
// textAlign: align
// }))
// )
if (equalWidth || !props.equalWidth && !props.span) {
return {
flexBasis: 0,
flexGrow: 1,
maxWidth: '100%'
};
}
});
}, function (props) {
var gridTheme = (0, _getTheme2.default)(props);
// Col.propTypes = propTypes
// Col.defaultProps = defaultProps
return (0, _breakpoints2.default)(props.auto, gridTheme, function () {
var auto = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
return auto && {
flex: '0 0 auto',
width: 'auto'
};
});
}, function (props) {
var gridTheme = (0, _getTheme2.default)(props);
// export default withSpacing(withDividers(Col))
return (0, _breakpoints2.default)(props.offset, gridTheme, function (offset) {
return !isNil(offset) && {
marginLeft: offset * 100 + '%'
};
});
}, function (props) {
var gridTheme = (0, _getTheme2.default)(props);
return (0, _breakpoints2.default)(props.alignSelf, gridTheme, function (align) {
return align && {
alignSelf: '' + (alignMap[align] || align)
};
});
}, function (props) {
var gridTheme = (0, _getTheme2.default)(props);
return (0, _breakpoints2.default)(props.textAlign, gridTheme, function (align) {
return align && {
textAlign: align
};
});
});
exports.default = (0, _withSpacing2.default)(Col);

@@ -7,31 +7,57 @@ 'use strict';

var _jsx = function () { var REACT_ELEMENT_TYPE = typeof Symbol === "function" && Symbol.for && Symbol.for("react.element") || 0xeac7; return function createRawReactElement(type, props, key, children) { var defaultProps = type && type.defaultProps; var childrenLength = arguments.length - 3; if (!props && childrenLength !== 0) { props = {}; } if (props && defaultProps) { for (var propName in defaultProps) { if (props[propName] === void 0) { props[propName] = defaultProps[propName]; } } } else if (!props) { props = defaultProps || {}; } if (childrenLength === 1) { props.children = children; } else if (childrenLength > 1) { var childArray = Array(childrenLength); for (var i = 0; i < childrenLength; i++) { childArray[i] = arguments[i + 3]; } props.children = childArray; } return { $$typeof: REACT_ELEMENT_TYPE, type: type, key: key === undefined ? null : '' + key, ref: null, props: props, _owner: null }; }; }();
var _glamorous = require('glamorous');
var _react = require('react');
var _glamorous2 = _interopRequireDefault(_glamorous);
var React = _interopRequireWildcard(_react);
var _shallowEqual = require('fbjs/lib/shallowEqual');
var _glamorous = require('glamorous');
var _shallowEqual2 = _interopRequireDefault(_shallowEqual);
var _glamorous2 = _interopRequireDefault(_glamorous);
var _getTheme = require('./getTheme');
var _getTheme2 = _interopRequireDefault(_getTheme);
var _breakpoints = require('./breakpoints');
var _breakpoints2 = _interopRequireDefault(_breakpoints);
var _withSpacing = require('./withSpacing');
var _withSpacing2 = _interopRequireDefault(_withSpacing);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
var Container = (0, _glamorous2.default)('div', {
shouldClassNameUpdate: function shouldClassNameUpdate(props, nextProps, context, nextContext) {
return props.fluid !== nextProps.fluid || !(0, _shallowEqual2.default)(context.theme, nextContext.theme);
}
})({
width: '100%',
position: 'relative',
marginLeft: 'auto',
marginRight: 'auto',
boxSizing: 'border-box'
}, function (props) {
var gridTheme = (0, _getTheme2.default)(props);
exports.default = function () {
return _jsx('div', {}, void 0, 'i am a container');
};
return (0, _breakpoints2.default)(gridTheme.outer_gutter, gridTheme, function (size) {
return size && {
paddingLeft: size,
paddingRight: size
};
});
}, function (props) {
if (props.fluid) return;
// import { breakpointMap } from '../helpers'
// import theme from '../theme'
var gridTheme = (0, _getTheme2.default)(props);
var containerWidths = gridTheme.max_container_width;
// const Container = glamorous.div({
// position: 'relative',
// ...breakpointMap(theme.outer_gutter, (size = theme.outer_gutter_base) => ({
// paddingLeft: size,
// paddingRight: size
// }))
// })
return (0, _breakpoints2.default)(containerWidths, gridTheme, function (size) {
return size && {
width: size,
maxWidth: '100%'
};
});
});
// export default Container
exports.default = (0, _withSpacing2.default)(Container);

@@ -7,91 +7,112 @@ 'use strict';

var _jsx = function () { var REACT_ELEMENT_TYPE = typeof Symbol === "function" && Symbol.for && Symbol.for("react.element") || 0xeac7; return function createRawReactElement(type, props, key, children) { var defaultProps = type && type.defaultProps; var childrenLength = arguments.length - 3; if (!props && childrenLength !== 0) { props = {}; } if (props && defaultProps) { for (var propName in defaultProps) { if (props[propName] === void 0) { props[propName] = defaultProps[propName]; } } } else if (!props) { props = defaultProps || {}; } if (childrenLength === 1) { props.children = children; } else if (childrenLength > 1) { var childArray = Array(childrenLength); for (var i = 0; i < childrenLength; i++) { childArray[i] = arguments[i + 3]; } props.children = childArray; } return { $$typeof: REACT_ELEMENT_TYPE, type: type, key: key === undefined ? null : '' + key, ref: null, props: props, _owner: null }; }; }();
var _glamorous = require('glamorous');
var _react = require('react');
var _glamorous2 = _interopRequireDefault(_glamorous);
var React = _interopRequireWildcard(_react);
var _shallowEqual = require('fbjs/lib/shallowEqual');
var _glamorous = require('glamorous');
var _shallowEqual2 = _interopRequireDefault(_shallowEqual);
var _glamorous2 = _interopRequireDefault(_glamorous);
var _getTheme = require('./getTheme');
var _getTheme2 = _interopRequireDefault(_getTheme);
var _breakpoints = require('./breakpoints');
var _breakpoints2 = _interopRequireDefault(_breakpoints);
var _withSpacing = require('./withSpacing');
var _withSpacing2 = _interopRequireDefault(_withSpacing);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
var justifyMap = {
start: 'flex-start',
end: 'flex-end',
between: 'space-between',
around: 'space-around'
};
exports.default = function () {
return _jsx('div', {}, void 0, 'I am a row');
var alignMap = {
start: 'flex-start',
end: 'flex-end',
stretch: 'stretch'
};
// import { breakpointMap, withSpacing, withDividers, shouldUpdate } from '../helpers'
// import theme from '../theme'
var isNil = function isNil(val) {
return val === undefined || val === null;
};
// const JustifyEnum = oneOf(['start', 'end', 'center', 'between', 'around'])
// const AlignEnum = oneOf(['start', 'end', 'center', 'stretch'])
// const WrapEnum = oneOf(['wrap', 'nowrap'])
// const DirectionEnum = oneOf(['row', 'column'])
var Row = (0, _glamorous2.default)('div', {
shouldClassNameUpdate: function shouldClassNameUpdate(props, nextProps, context, nextContext) {
return !(0, _shallowEqual2.default)(context.theme, nextContext.theme) || !(0, _shallowEqual2.default)(props.wrap, nextProps.wrap) || !(0, _shallowEqual2.default)(props.justifyContent, nextProps.justifyContent) || !(0, _shallowEqual2.default)(props.alignItems, nextProps.alignItems) || !(0, _shallowEqual2.default)(props.flexDirection, nextProps.flexDirection) || !(0, _shallowEqual2.default)(props.noGutters, nextProps.noGutters);
}
})({
display: 'flex',
boxSizing: 'border-box'
}, function (props) {
var gridTheme = (0, _getTheme2.default)(props);
var gutters = gridTheme.column_gutter;
// const justifyMap = {
// start: 'flex-start',
// end: 'flex-end',
// between: 'space-between',
// around: 'space-around'
// }
return (0, _breakpoints2.default)(gutters, gridTheme, function (size) {
return !isNil(size) && {
marginLeft: parseFloat(size) / -2,
marginRight: parseFloat(size) / -2
};
});
}, function (props) {
var gridTheme = (0, _getTheme2.default)(props);
// const alignMap = {
// start: 'flex-start',
// end: 'flex-end'
// }
return (0, _breakpoints2.default)(props.wrap, gridTheme, function () {
var wrap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'wrap';
return {
flexWrap: wrap
};
});
}, function (props) {
var gridTheme = (0, _getTheme2.default)(props);
var justifyContent = props.justifyContent;
// const propTypes = {
// wrap: oneOfType([WrapEnum, objectOf(string)]),
// justifyContent: oneOfType([JustifyEnum, objectOf(string)]),
// alignItems: oneOfType([AlignEnum, objectOf(string)]),
// direction: oneOfType([DirectionEnum, objectOf(string)]),
// noGutters: oneOfType([bool, objectOf(bool)])
// }
return (0, _breakpoints2.default)(justifyContent, gridTheme, function () {
var justify = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'start';
return {
justifyContent: justifyMap[justify] || justify
};
});
}, function (props) {
var gridTheme = (0, _getTheme2.default)(props);
var alignItems = props.alignItems;
// const defaultProps = {
// wrap: 'wrap',
// justifyContent: 'start',
// alignItems: 'stretch',
// direction: 'row',
// noGutters: false
// }
return (0, _breakpoints2.default)(alignItems, gridTheme, function () {
var align = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'stretch';
return {
alignItems: alignMap[align] || align
};
});
}, function (props) {
var gridTheme = (0, _getTheme2.default)(props);
// const Row = glamorous('div', {
// shouldClassNameUpdate: shouldUpdate(Object.keys(propTypes))
// })(
// {
// display: 'flex',
// ...(breakpointMap(theme.column_gutter, (size = theme.column_gutter_base) => ({
// marginLeft: size / -2,
// marginRight: size / -2
// })))
// },
// (props => breakpointMap(props.wrap, (wrap = defaultProps.wrap) => ({
// flexWrap: 'wrap'
// }))),
// (props => breakpointMap(props.justifyContent, (justify = defaultProps.justifyContent) => ({
// justifyContent: justifyMap[justify] || justify
// }))),
// (props => breakpointMap(props.alignItems, (align = defaultProps.alignItems) => ({
// alignItems: alignMap[align] || align
// }))),
// (props => breakpointMap(props.direction, (direction = defaultProps.direction) => ({
// flexDirection: direction
// }))),
// (props => breakpointMap(props.noGutters, (noGutters = defaultProps.noGutters) => noGutters && {
// marginRight: '0 !important',
// marginLeft: '0 !important',
// '& > [class*="Col"]': {
// paddingRight: 0,
// paddingLeft: 0
// }
// }))
// )
return (0, _breakpoints2.default)(props.direction, gridTheme, function () {
var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'row';
return {
flexDirection: direction
};
});
}, function (props) {
var gridTheme = (0, _getTheme2.default)(props);
// Row.propTypes = propTypes
// Row.defaultProps = defaultProps
return (0, _breakpoints2.default)(props.noGutters, gridTheme, function () {
var noGutters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
return noGutters && {
marginRight: '0 !important',
marginLeft: '0 !important',
'& > div': {
paddingRight: 0,
paddingLeft: 0
}
};
});
});
// export default withDividers(withSpacing(Row))
exports.default = (0, _withSpacing2.default)(Row);
{
"name": "glamorous-grid",
"version": "1.0.0",
"version": "1.0.1",
"description": "Responsive React grid layout components built with glamorous",
"main": "lib/index.js",
"scripts": {
"build": "rimraf lib && babel src -d lib --ignore .spec.js",
"build": "rimraf lib && babel src -d lib --ignore .spec.js && flow-copy-source -v src lib",
"docs:publish": "cd docs && gatsby build --prefix-paths && gh-pages -d public && cd ..",
"test": "yarn lint && yarn flow && yarn jest",
"lint": "eslint src docs/src --ignore-pattern '**/*.test.js' --ext .js",
"lint": "eslint src --ignore-pattern '**/*.test.js' --ext .js",
"flow": "flow check --show-all-errors",

@@ -26,3 +27,3 @@ "jest": "jest",

],
"author": "Dylan Mozlowski <dylan.mozlowski@gmail.com> (http://www.dylanmozlowski.com)",
"author": "Dylan Mozlowski <dylan.mozlowski@gmail.com> (http://dylanmoz.github.io)",
"license": "MIT",

@@ -54,2 +55,3 @@ "bugs": {

"flow-bin": "^0.54.0",
"flow-copy-source": "^1.2.1",
"glamor": "^2.20.40",

@@ -74,3 +76,6 @@ "glamorous": "^4.7.0",

]
},
"dependencies": {
"fbjs": "0.8.14"
}
}
// @flow
import * as React from 'react'
import type { ComponentType } from 'react'
import glamorous from 'glamorous'
import shallowEqual from 'fbjs/lib/shallowEqual'
export default () => <div>I am a col</div>
import type { ValueOrValueMap } from './types'
import getTheme from './getTheme'
import breakpoints from './breakpoints'
import withSpacing from './withSpacing'
type Props = {
span?: ValueOrValueMap<number>,
equalWidth?: ValueOrValueMap<boolean>,
auto?: ValueOrValueMap<boolean>,
offset?: ValueOrValueMap<number>,
alignSelf?: ValueOrValueMap<'start' | 'end' | 'center'>,
textAlign?: ValueOrValueMap<'left' | 'right' | 'center'>,
}
const alignMap = {
start: 'flex-start',
end: 'flex-end'
}
const isNil = val => (val === undefined || val === null)
const Col = glamorous(
'div',
{
shouldClassNameUpdate: (props, nextProps, context, nextContext) => (
!shallowEqual(context.theme, nextContext.theme)
|| !shallowEqual(props.span, nextProps.span)
|| !shallowEqual(props.equalWidth, nextProps.equalWidth)
|| !shallowEqual(props.auto, nextProps.auto)
|| !shallowEqual(props.offset, nextProps.offset)
|| !shallowEqual(props.alignSelf, nextProps.alignSelf)
|| !shallowEqual(props.textAlign, nextProps.textAlign)
)
}
)(
{
position: 'relative',
width: '100%',
minHeight: 1,
boxSizing: 'border-box'
},
(props) => {
const gridTheme = getTheme(props)
const gutters = gridTheme.column_gutter
return breakpoints(gutters, gridTheme, size => !isNil(size) && ({
paddingLeft: parseFloat(size) / 2,
paddingRight: parseFloat(size) / 2
}))
},
(props) => {
const gridTheme = getTheme(props)
return breakpoints(props.span, gridTheme, span => span && ({
flex: `0 0 ${span * 100}%`,
maxWidth: `${span * 100}%`
}))
},
(props) => {
const gridTheme = getTheme(props)
return breakpoints(props.equalWidth, gridTheme, (equalWidth = false) => {
if (equalWidth || (!props.equalWidth && !props.span)) {
return {
flexBasis: 0,
flexGrow: 1,
maxWidth: '100%'
}
}
})
},
(props) => {
const gridTheme = getTheme(props)
return breakpoints(props.auto, gridTheme, (auto = false) => auto && ({
flex: '0 0 auto',
width: 'auto'
}))
},
(props) => {
const gridTheme = getTheme(props)
return breakpoints(props.offset, gridTheme, offset => !isNil(offset) && ({
marginLeft: `${offset * 100}%`
}))
},
(props) => {
const gridTheme = getTheme(props)
return breakpoints(props.alignSelf, gridTheme, align => align && ({
alignSelf: `${alignMap[align] || align}`
}))
},
(props) => {
const gridTheme = getTheme(props)
return breakpoints(props.textAlign, gridTheme, align => align && ({
textAlign: align
}))
},
)
export default withSpacing((Col: ComponentType<Props>))
// @flow
import * as React from 'react'
import type { ComponentType } from 'react'
import glamorous from 'glamorous'
import shallowEqual from 'fbjs/lib/shallowEqual'
export default () => <div>i am a container</div>
import getTheme from './getTheme'
import breakpoints from './breakpoints'
import withSpacing from './withSpacing'
type Props = {
fluid?: boolean
}
const Container = glamorous(
'div',
{
shouldClassNameUpdate: (props, nextProps, context, nextContext) => (
(props.fluid !== nextProps.fluid) || !shallowEqual(context.theme, nextContext.theme)
)
}
)(
{
width: '100%',
position: 'relative',
marginLeft: 'auto',
marginRight: 'auto',
boxSizing: 'border-box'
},
(props) => {
const gridTheme = getTheme(props)
return breakpoints(gridTheme.outer_gutter, gridTheme, size => size && ({
paddingLeft: size,
paddingRight: size
}))
},
(props) => {
if (props.fluid) return
const gridTheme = getTheme(props)
const containerWidths = gridTheme.max_container_width
return breakpoints(containerWidths, gridTheme, size => size && ({
width: size,
maxWidth: '100%'
}))
}
)
export default withSpacing((Container: ComponentType<Props>))
// @flow
import * as React from 'react'
import type { ComponentType } from 'react'
import glamorous from 'glamorous'
import shallowEqual from 'fbjs/lib/shallowEqual'
export default () => <div>I am a row</div>
import type { ValueOrValueMap } from './types'
import getTheme from './getTheme'
import breakpoints from './breakpoints'
import withSpacing from './withSpacing'
type Props = {
wrap?: ValueOrValueMap<'wrap' | 'nowrap'>,
justifyContent?: ValueOrValueMap<'start' | 'end' | 'between' | 'around'>,
alignItems?: ValueOrValueMap<'start' | 'end' | 'stretch' | 'center'>,
direction?: ValueOrValueMap<'row' | 'column'>,
noGutters?: ValueOrValueMap<boolean>
}
const justifyMap = {
start: 'flex-start',
end: 'flex-end',
between: 'space-between',
around: 'space-around'
}
const alignMap = {
start: 'flex-start',
end: 'flex-end',
stretch: 'stretch'
}
const isNil = val => (val === undefined || val === null)
const Row = glamorous(
'div',
{
shouldClassNameUpdate: (props, nextProps, context, nextContext) => (
!shallowEqual(context.theme, nextContext.theme)
|| !shallowEqual(props.wrap, nextProps.wrap)
|| !shallowEqual(props.justifyContent, nextProps.justifyContent)
|| !shallowEqual(props.alignItems, nextProps.alignItems)
|| !shallowEqual(props.flexDirection, nextProps.flexDirection)
|| !shallowEqual(props.noGutters, nextProps.noGutters)
)
}
)(
{
display: 'flex',
boxSizing: 'border-box'
},
(props) => {
const gridTheme = getTheme(props)
const gutters = gridTheme.column_gutter
return breakpoints(gutters, gridTheme, size => !isNil(size) && ({
marginLeft: parseFloat(size) / -2,
marginRight: parseFloat(size) / -2
}))
},
(props) => {
const gridTheme = getTheme(props)
return breakpoints(props.wrap, gridTheme, (wrap = 'wrap') => ({
flexWrap: wrap
}))
},
(props) => {
const gridTheme = getTheme(props)
const justifyContent = props.justifyContent
return breakpoints(justifyContent, gridTheme, (justify = 'start') => ({
justifyContent: justifyMap[justify] || justify
}))
},
(props) => {
const gridTheme = getTheme(props)
const alignItems = props.alignItems
return breakpoints(alignItems, gridTheme, (align = 'stretch') => ({
alignItems: alignMap[align] || align
}))
},
(props) => {
const gridTheme = getTheme(props)
return breakpoints(props.direction, gridTheme, (direction = 'row') => ({
flexDirection: direction
}))
},
(props) => {
const gridTheme = getTheme(props)
return breakpoints(props.noGutters, gridTheme, (noGutters = false) => noGutters && ({
marginRight: '0 !important',
marginLeft: '0 !important',
'& > div': {
paddingRight: 0,
paddingLeft: 0
}
}))
}
)
export default withSpacing((Row: ComponentType<Props>))

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc