import { useState } from 'react'
import Row from '../Row'
import Div from '../Div'
import Span from '../typography/Span'
import Content from '../Content'
import { u } from 'startupjs'
import Radio from '../forms/Radio'
import Checkbox from '../forms/Checkbox'
import Br from '../Br'
import Divider from '../Divider'
import { Sandbox } from '@startupjs/docs'
import './index.mdx.styl'

# Row (строка)

Наследует [Div props](/docs/components/Div).

`Строка` используется для горизонтальной группировки элементов. Внутри она использует [css flexbox](https://www.w3schools.com/css/css3_flexbox.asp).

```jsx
import { Row } from '@startupjs/ui'
```

## Простой пример

```jsx example
const itemStyle = {
  width: u(5),
  height: u(5),
  alignItems: 'center',
  justifyContent: 'center'
}
return (
  <Row>
    <Div style={[itemStyle, { backgroundColor: '#FF7900'}]}>
      <Span>1</Span>
    </Div>
    <Div style={[itemStyle, { backgroundColor: '#F5A623'}]}>
      <Span>2</Span>
    </Div>
    <Div style={[itemStyle, { backgroundColor: '#F5BE59'}]}>
      <Span>3</Span>
    </Div>
  </Row>
)
```

## Горизонтальное выравнивание

Свойство `align` изменяет горизонтальное выравнивание элементов внутри `строки`. Значение по умолчанию - `left`.

```jsx example
const itemStyle = {
  width: u(5),
  height: u(5),
  alignItems: 'center',
  justifyContent: 'center'
}
const alignOptions = [
  { value: null, label: 'left (default)' },
  { value: 'center', label: 'center' },
  { value: 'right', label: 'right' },
  { value: 'around', label: 'around' },
  { value: 'between', label: 'between' }
]
const [align, setAlign] = useState(null)
return (
  <Div>
    <Span>Please select a value for `align` prop</Span>
    <Divider />
    <Radio
      value={align}
      onChange={(newState) => setAlign(newState)}
      options={alignOptions}
    />
    <Br />
    <Content
      padding
      width='full'
      style={{ backgroundColor: '#cfe8fc' }}
    >
      <Row align={align}>
        <Div style={[itemStyle, { backgroundColor: '#FF7900'}]}>
          <Span>1</Span>
        </Div>
        <Div style={[itemStyle, { backgroundColor: '#F5A623'}]}>
          <Span>2</Span>
        </Div>
        <Div style={[itemStyle, { backgroundColor: '#F5BE59'}]}>
          <Span>3</Span>
        </Div>
      </Row>
    </Content>
  </Div>
)
```

## Вертикальное выравнивание

Свойство `vAlign` изменяет вертикальное выравнивание элементов внутри `строки`. Значение по умолчанию - `start`.

```jsx example
const itemStyle = {
  width: u(5),
  alignItems: 'center',
  justifyContent: 'center'
}
const vAlignOptions = [
  { value: 'stretch', label: 'stretch (default)' },
  { value: 'start', label: 'start' },
  { value: 'center', label: 'center' },
  { value: 'end', label: 'end' }
]
const [vAlign, setVAlign] = useState('stretch')
return (
  <Div>
    <Span>Please select a value for `vAlign` prop</Span>
    <Divider />
    <Radio
      value={vAlign}
      onChange={(newState) => setVAlign(newState)}
      options={vAlignOptions}
    />
    <Br />
    <Content
      padding
      width='full'
      style={{ backgroundColor: '#cfe8fc' }}
    >
      <Row style={{ height: u(25) }} vAlign={vAlign}>
        <Div style={[itemStyle, { backgroundColor: '#FF7900'}]}>
          <Span>1</Span>
        </Div>
        <Div style={[itemStyle, { backgroundColor: '#F5A623'}]}>
          <Span>2</Span>
        </Div>
        <Div style={[itemStyle, { backgroundColor: '#F5BE59'}]}>
          <Span>3</Span>
        </Div>
      </Row>
    </Content>
  </Div>
)
```

## Обратное направление

Свойство `reverse` используется для изменения горизонтального направления (элементы выводятся справа налево). Значение по умолчанию - `false`.

```jsx example
const itemStyle = {
  width: u(5),
  height: u(5),
  alignItems: 'center',
  justifyContent: 'center'
}
const [reverse, setReverse] = useState(true)
return (
  <Div>
    <Checkbox
      label='reverse'
      value={reverse}
      onChange={(newState) => setReverse(newState)}
    />
    <Br />
    <Content
      padding
      width='full'
      style={{ backgroundColor: '#cfe8fc' }}
    >
      <Row
        reverse={reverse}
      >
        <Div style={[itemStyle, { backgroundColor: '#FF7900'}]}>
          <Span>1</Span>
        </Div>
        <Div style={[itemStyle, { backgroundColor: '#F5A623'}]}>
          <Span>2</Span>
        </Div>
        <Div style={[itemStyle, { backgroundColor: '#F5BE59'}]}>
          <Span>3</Span>
        </Div>
      </Row>
    </Content>
  </Div>
)
```

## Многострочный режим

Свойство `wrap` определяет, будут ли элементы принудительно помещены в одну строку или могут быть помещены в несколько строк. Значение по умолчанию - `false`.

```jsx example
const [width, setWidth] = useState(0)
const itemStyle = {
  width: width,
  height: u(5),
  flexShrink: 1,
  alignItems: 'center',
  justifyContent: 'center'
}
const [wrap, setWrap] = useState(true)
return (
  <Div>
    <Checkbox
      label='wrap'
      value={wrap}
      onChange={(newState) => setWrap(newState)}
    />
    <Br />
    <Content
      padding
      style={{ backgroundColor: '#cfe8fc' }}
    >
      <Row
        wrap={wrap}
        onLayout={(event) => setWidth(event.nativeEvent.layout.width)}
      >
        <Div style={[itemStyle, { backgroundColor: '#FF7900'}]}>
          <Span>1</Span>
        </Div>
        <Div style={[itemStyle, { backgroundColor: '#F5A623'}]}>
          <Span>2</Span>
        </Div>
        <Div style={[itemStyle, { backgroundColor: '#F5BE59'}]}>
          <Span>3</Span>
        </Div>
      </Row>
    </Content>
  </Div>
)
```

## Sandbox

<Sandbox
  Component={Row}
  props={{
    children: [
      <Div key='first' styleName={['div', 'first']}>
        <Span>1</Span>
      </Div>,
      <Div key='second' styleName={['div', 'second']}>
        <Span>2</Span>
      </Div>,
      <Div key='third' styleName={['div', 'third']}>
        <Span>3</Span>
      </Div>
    ],
    style: { maxWidth: u(70), minHeight: u(15),  backgroundColor: '#cfe8fc' },
    onPress: () => alert('"onPress" event on "Row" component'),
    onLongPress: () => alert('"onLongPress" event on "Row" component')
  }}
  block
/>