packages/hooks/examples/OverscrollBehaviorExample.tsx - develop - kaws/ui-kit-ce

packages/hooks/examples/OverscrollBehaviorExample.tsx
92 строки5 KB
Ivan Iakovlev
docs(hooks): добавлены stories по хукам
20 ноя 2024, 11:54
20 ноя 2024, 11:547538000
import * as React from 'react'
import { useOverscrollBehavior, Text, createUseStyles } from '@v-uik/base'

const useStyles = createUseStyles((theme) => ({
  root: {
    margin: '0 auto',
    height: 400,
    width: '100%',
    padding: '0 10px',
    overflowY: 'auto',
    position: 'relative',
  },
  overscrollWrapper: { position: 'relative', height: 100, width: '100%' },
  overscrollBlock: {
    position: 'absolute',
    bottom: 0,
    right: 0,
    height: 100,
    overflowY: 'auto',
    width: 'calc(100% - 16px)',
    backgroundColor: theme.ref.palette.amber95,
    color: theme.ref.palette.amber20,
    padding: 8,
  },
}))

export const OverscrollBehaviorExample = (): JSX.Element => {
  const ref = useOverscrollBehavior<HTMLElement>()
  const classes = useStyles()

  return (
    <div className={classes.root}>
      <Text>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
        numquam minus corrupti, sapiente esse commodi, ut autem ducimus, placeat
        amet excepturi voluptates expedita suscipit ex iusto quae rerum impedit.
        Qui? Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
        numquam minus corrupti, sapiente esse commodi, ut autem ducimus, placeat
        amet excepturi voluptates expedita suscipit ex iusto quae rerum impedit.
        Qui? Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
        numquam minus corrupti, sapiente esse commodi, ut autem ducimus, placeat
        amet excepturi voluptates expedita suscipit ex iusto quae rerum impedit.
        Qui? Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
        numquam minus corrupti, sapiente esse commodi, ut autem ducimus, placeat
        amet excepturi voluptates expedita suscipit ex iusto quae rerum impedit.
        Qui? Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
        numquam minus corrupti, sapiente esse commodi, ut autem ducimus, placeat
        amet excepturi voluptates expedita suscipit ex iusto quae rerum impedit.
        Qui?
      </Text>
      <div className={classes.overscrollWrapper}>
        <Text ref={ref} className={classes.overscrollBlock}>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
          numquam minus corrupti, sapiente esse commodi, ut autem ducimus,
          placeat amet excepturi voluptates expedita suscipit ex iusto quae
          rerum impedit. Qui? Lorem ipsum dolor sit amet consectetur adipisicing
          elit. Nesciunt numquam minus corrupti, sapiente esse commodi, ut autem
          ducimus, placeat amet excepturi voluptates expedita suscipit ex iusto
          quae rerum impedit. Qui? Lorem ipsum dolor sit amet consectetur
          adipisicing elit. Nesciunt numquam minus corrupti, sapiente esse
          commodi, ut autem ducimus, placeat amet excepturi voluptates expedita
          suscipit ex iusto quae rerum impedit. Qui? Lorem ipsum dolor sit amet
          consectetur adipisicing elit. Nesciunt numquam minus corrupti,
          sapiente esse commodi, ut autem ducimus, placeat amet excepturi
          voluptates expedita suscipit ex iusto quae rerum impedit. Qui? Lorem
          ipsum dolor sit amet consectetur adipisicing elit. Nesciunt numquam
          minus corrupti, sapiente esse commodi, ut autem ducimus, placeat amet
          excepturi voluptates expedita suscipit ex iusto quae rerum impedit.
          Qui?
        </Text>
      </div>
      <Text>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
        numquam minus corrupti, sapiente esse commodi, ut autem ducimus, placeat
        amet excepturi voluptates expedita suscipit ex iusto quae rerum impedit.
        Qui? Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
        numquam minus corrupti, sapiente esse commodi, ut autem ducimus, placeat
        amet excepturi voluptates expedita suscipit ex iusto quae rerum impedit.
        Qui? Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
        numquam minus corrupti, sapiente esse commodi, ut autem ducimus, placeat
        amet excepturi voluptates expedita suscipit ex iusto quae rerum impedit.
        Qui? Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
        numquam minus corrupti, sapiente esse commodi, ut autem ducimus, placeat
        amet excepturi voluptates expedita suscipit ex iusto quae rerum impedit.
        Qui? Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
        numquam minus corrupti, sapiente esse commodi, ut autem ducimus, placeat
        amet excepturi voluptates expedita suscipit ex iusto quae rerum impedit.
        Qui?
      </Text>
    </div>
  )
}