Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ability to change gridColumns per Container #113

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,8 @@ declare module 'react-grid-system' {
xl?: boolean
fluid?: boolean,
style?: object,
component?: () => string | string
component?: () => string | string,
gridColumns?: number,
}

type RowProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
Expand Down
16 changes: 10 additions & 6 deletions src/grid/Col/index.jsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React, { createElement } from 'react';
import PropTypes from 'prop-types';
import getStyle from './style';
import { getConfiguration } from '../../config';
import { GutterWidthContext } from '../Row';
import ScreenClassResolver from '../../context/ScreenClassResolver';
import { CustomGridColumnsContext } from '../Container';

export default class Col extends React.PureComponent {
static propTypes = {
Expand Down Expand Up @@ -105,7 +105,7 @@ export default class Col extends React.PureComponent {
component: 'div',
};

renderCol = (gutterWidth, screenClass) => {
renderCol = (gutterWidth, screenClass, gridColumns) => {
const {
children,
xs,
Expand Down Expand Up @@ -135,7 +135,7 @@ export default class Col extends React.PureComponent {
debug,
screenClass,
gutterWidth,
gridColumns: getConfiguration().gridColumns,
gridColumns,
moreStyle: style,
});
return createElement(component, { style: theStyle, ...otherProps, children });
Expand All @@ -144,9 +144,13 @@ export default class Col extends React.PureComponent {
render = () => (
<ScreenClassResolver>
{screenClass => (
<GutterWidthContext.Consumer>
{gutterWidth => this.renderCol(gutterWidth, screenClass)}
</GutterWidthContext.Consumer>
<CustomGridColumnsContext.Consumer>
{gridColumns => (
<GutterWidthContext.Consumer>
{gutterWidth => this.renderCol(gutterWidth, screenClass, gridColumns)}
</GutterWidthContext.Consumer>
)}
</CustomGridColumnsContext.Consumer>
)}
</ScreenClassResolver>
);
Expand Down
15 changes: 12 additions & 3 deletions src/grid/Container/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import getStyle, { getAfterStyle } from './style';
import { getConfiguration } from '../../config';
import ScreenClassResolver from '../../context/ScreenClassResolver';

export const CustomGridColumnsContext = React.createContext(getConfiguration().gridColumns);

export default class Container extends React.PureComponent {
static propTypes = {
/**
Expand Down Expand Up @@ -47,6 +49,10 @@ export default class Container extends React.PureComponent {
* Use your own component
*/
component: PropTypes.elementType,
/**
* Use your own gridColumns value for Container
*/
gridColumns: PropTypes.number,
};

static defaultProps = {
Expand All @@ -58,11 +64,12 @@ export default class Container extends React.PureComponent {
xl: false,
style: {},
component: 'div',
gridColumns: getConfiguration().gridColumns,
};

render() {
const {
children, fluid, xs, sm, md, lg, xl, style, component, ...otherProps
children, fluid, xs, sm, md, lg, xl, style, component, gridColumns, ...otherProps
} = this.props;

return (
Expand All @@ -85,8 +92,10 @@ export default class Container extends React.PureComponent {
...otherProps,
},
<React.Fragment>
{children}
<span style={getAfterStyle()} />
<CustomGridColumnsContext.Provider value={gridColumns}>
{children}
<span style={getAfterStyle()} />
</CustomGridColumnsContext.Provider>
</React.Fragment>,
)
}
Expand Down
21 changes: 21 additions & 0 deletions src/grid/Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -247,3 +247,24 @@ Resize your browser or load on different devices to test the grid system.
</Row>
</Container>
```

You can define a custom grid columns value to specific Container

### Example: Custom grid columns param

```
<Container fluid style={{ lineHeight: '32px' }} gridColumns={15}>
<Row debug>
<Col lg={10} debug>1 of 2</Col>
<Col lg={5} debug>2 of 2</Col>
</Row>
<br />
<Row debug>
<Col debug>1 of 3</Col>
<Col debug>2 of 3</Col>
<Col debug>3 of 3</Col>
</Row>
</Container>
```