import { $root } from 'startupjs'
import { useState } from 'react'
import Collapse from '../Collapse'
import Div from '../Div'
import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
import { Sandbox } from '@startupjs/docs'

# Collapse (коллапс)

Наследует [react-native-collapsible](https://github.com/oblador/react-native-collapsible).

Collapse позволяет переключать видимость содержимого.

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

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

```jsx example noscroll
const [open, setOpen] = useState(false)
return (
  <Collapse title='Simple collapse' open={open} onChange={() => setOpen(!open)}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </Collapse>
)
```

## Чистый коллапс

Чистый коллапс не содержит никаких стилей (фон, отступы и т.д.). Это полезно когда `Collapse` используется в качестве дочерних элементов других компонент, например `Card`. Чтобы сделать его чистым, передайте строку `pure` в свойство `variant`.

```jsx example noscroll
const [open, setOpen] = useState(false)
return (
  <Collapse
    variant='pure'
    open={open}
    onChange={() => setOpen(!open)}
    title='Pure collapse'
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </Collapse>
)
```

## Продвинутое использование

Коллапс состоит из двух частей - `Header` и `Content`. Эти части можно использовать для добавления пользовательской разметки, `Header` используется вместо `title` и `Content` используется вместо `children`. Их можно использовать по отдельности. Каждая из частей принимает значение свойства `variant` от родителя `Collapse`, который может быть переопределен путем передачи `variant` в себя.

```jsx example noscroll
const [open1, setOpen1] = useState(false)
const [open2, setOpen2] = useState(false)
return (
  <Collapse open={open1} onChange={() => setOpen1(!open1)}>
    <Collapse.Header>Advanced collapse</Collapse.Header>
    <Collapse.Content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </Collapse.Content>
  </Collapse>
)
```

## Кастомная иконка

При помощи опции `icon`, вы можете указать свою иконку. Она должна быть в виде стрелки, указывающей вправо.

```jsx example
const [open, setOpen] = useState(false)
return (
  <Collapse open={open} onChange={() => setOpen(!open)}>
    <Collapse.Header icon={faAngleRight}>
      Collapse with custom icon
    </Collapse.Header>
    <Collapse.Content>
      Collapse content
    </Collapse.Content>
  </Collapse>
)
```

### БЕЗ иконки

Вы можете убрать иконку вообще, указав `icon={false}`.

## Accordion (аккордеон)

Используя `Collapse` компонент, можно создать поведение, подобное аккордеону.

```jsx example noscroll
const [expand, setExpand] = useState()
const handleChange = (panel) => (shouldExpand) => {
  setExpand(shouldExpand ? panel : null)
}
const collapseStyle = {
  borderTopWidth: 1,
  borderStyle: 'solid',
  borderColor: '#ddd'
}
return (
  <Div>
    <Collapse
      open={expand === 'open1'}
      title='Accordion Header - 1'
      onChange={handleChange('open1')}
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
    </Collapse>
    <Collapse
      style={collapseStyle}
      open={expand === 'open2'}
      title='Accordion Header - 2'
      onChange={handleChange('open2')}
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
    </Collapse>
    <Collapse
      style={collapseStyle}
      open={expand === 'open3'}
      title='Accordion Header - 3'
      onChange={handleChange('open3')}
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
    </Collapse>
  </Div>
)
```

## Sandbox

### Collapse

<Sandbox
  Component={Collapse}
  props={{ $open: $root.scope('_session.Props.Collapse.open') }}
  $props={$root.scope('_session.Props.Collapse')}
  {...{ _comment: "HACK to make alive sandbox when user click on 'open' checkbox" }}
/>

### Collapse.Header

<Sandbox Component={Collapse.Header} />

### Collapse.Content

<Sandbox Component={Collapse.Content} />