glamorous-grid
Advanced tools
Comparing version 1.0.0 to 1.0.1
@@ -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); |
165
lib/Row.js
@@ -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" | ||
} | ||
} |
107
src/Col.js
// @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>)) |
103
src/Row.js
// @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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No README
QualityPackage does not have a README. This may indicate a failed publish or a low quality package.
Found 1 instance in 1 package
177900
37
812
1
27
1
27
1
+ Addedfbjs@0.8.14
+ Addedasap@2.0.6(transitive)
+ Addedcore-js@1.2.7(transitive)
+ Addedencoding@0.1.13(transitive)
+ Addedfbjs@0.8.14(transitive)
+ Addediconv-lite@0.6.3(transitive)
+ Addedis-stream@1.1.0(transitive)
+ Addedisomorphic-fetch@2.2.1(transitive)
+ Addedjs-tokens@4.0.0(transitive)
+ Addedloose-envify@1.4.0(transitive)
+ Addednode-fetch@1.7.3(transitive)
+ Addedobject-assign@4.1.1(transitive)
+ Addedpromise@7.3.1(transitive)
+ Addedsafer-buffer@2.1.2(transitive)
+ Addedsetimmediate@1.0.5(transitive)
+ Addedua-parser-js@0.7.39(transitive)
+ Addedwhatwg-fetch@3.6.20(transitive)