{"size": 2248, "ext": "js", "max_stars_repo_path": "components/layout/grid/demo/ArticleInject.js", "max_stars_repo_name": "SUI-Components/SUIComponents", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "components/layout/grid/demo/ArticleInject.js", "max_issues_repo_name": "SUI-Components/SUIComponents", "max_issues_repo_issues_event_min_datetime": "2016-11-15T20:00:10.000Z", "max_issues_repo_issues_event_max_datetime": "2016-11-15T20:03:52.000Z", "max_forks_repo_path": "components/layout/grid/demo/ArticleInject.js", "max_forks_repo_name": "SUI-Components/SUIComponents", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 2, "max_forks_count": null, "avg_line_length": 25.8390804598, "max_line_length": 78, "alphanum_fraction": 0.5738434164}
import {useState} from 'react'
import PropTypes from 'prop-types'
import {
  Label,
  H2,
  Paragraph,
  Article,
  RadioButtonGroup,
  RadioButton
} from '@s-ui/documentation-library'

import LayoutGrid, {LayoutGridItem} from 'components/layout/grid/src/index.js'
import DemoWrapper from './demoWrapper.js'
import DemoBox from './demoBox.js'

const ArticleInjectDemo = ({columns, rows = 3}) => {
  const elements = columns * rows
  const size = 12 / columns
  return (
    <DemoWrapper>
      <LayoutGrid colSpan={size}>
        {Array(elements)
          .fill(0)
          .map((e, i) => i + 1)
          .map(index => (
            <>
              <LayoutGridItem key={index}>
                <DemoBox>
                  <Label style={{color: 'white'}}>s:{size}</Label>{' '}
                  <Label style={{color: 'white'}}>e:{index}</Label>
                </DemoBox>
              </LayoutGridItem>
            </>
          ))}
      </LayoutGrid>
    </DemoWrapper>
  )
}

ArticleInjectDemo.propTypes = {
  columns: PropTypes.number,
  rows: PropTypes.number
}

const ArticleInject = ({classname}) => {
  const [columnState, setColumnState] = useState('12')
  return (
    <Article className={classname}>
      <H2>Injector</H2>
      <Paragraph>
        To implement the grid you can use the Grid to inject the default
        GridItem props to each one.
      </Paragraph>
      <ArticleInjectDemo columns={12} rows={1} />
      <Paragraph>
        This gives us the possibility to also create other different grid
        options:
      </Paragraph>
      <RadioButtonGroup
        value={columnState}
        fullWidth
        onChange={(event, value) => setColumnState(value.toString())}
      >
        {[1, 2, 3, 4, 6, 12].reverse().map(column => (
          <RadioButton
            key={column}
            value={column.toString()}
            label={`${column} columns`}
          />
        ))}
      </RadioButtonGroup>
      <br />
      <br />
      <ArticleInjectDemo columns={columnState} rows={2} />
      <Paragraph>
        You can also use any kind of combination which sums 12 per row
      </Paragraph>
    </Article>
  )
}

ArticleInject.propTypes = {
  classname: PropTypes.string
}

export default ArticleInject
