import { Layout, Playground, Attributes } from 'lib/components'
import { Button, Spacer, useBodyScroll, Text } from 'components'

export const meta = {
  title: '锁定滚动 useBodyScroll',
  group: '实用工具',
}

## useBodyScroll / 工具包

禁用 `Body` 或其他任何元素的滚动，这在显示弹窗或菜单时非常有帮助。

如果容器的滚动条在禁止滚动之前被自定义设置了宽度，那么在在禁止滚动后会为自动当前容器添加 `paddingRight` 作为补偿。

<Playground
  desc="点击按钮以锁定滚动."
  scope={{ Button, Spacer, useBodyScroll, Text }}
  code={`
() => {
  const [hidden, setHidden] = useBodyScroll()
  return (
    <>
      <Text small b type={hidden ? 'error' : 'default'}>{hidden ? '已禁用滚动。' : '当前可以滚动。'}</Text>
      <Spacer h={.75} />
      <Button scale={0.5} type="success" auto onClick={() => setHidden(true)}>禁用滚动</Button>
      <Button ml="20px" scale={0.5} type="secondary" auto onClick={() => setHidden(false)}>重置</Button>
    </>
  )
}
`}
/>

<Attributes edit="/pages/zh-cn/hooks/use-body-scroll.mdx">
<Attributes.Title>useBodyScroll</Attributes.Title>

```ts
type BodyScrollOptions = {
  delayReset: number  //  延迟一段时间后恢复滚动，默认 0
}

const useBodyScroll = (
  elementRef?: RefObject<HTMLElement> | null,
  options?: BodyScrollOptions,
) => [boolean, Dispatch<SetStateAction<boolean>>]

```

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
