packages/typography/examples/EllipsisExample.tsx - develop - kaws/ui-kit-ce

packages/typography/examples/EllipsisExample.tsx

78 строк2 KB

Самарин Александр Андреевич

docs(text): исправления примеров Copy

07 окт 2025, 18:05

07 окт 2025, 18:057cfd145

import * as React from 'react'
import {
  clsx,
  createUseStyles,
  EllipsisExpandButtonProps,
  Text,
} from '@v-uik/base'

const useStyles = createUseStyles((theme) => ({
  button: {
    color: theme.ref.palette.electricBlue50,
  },
}))

function ExpandButton({
  expanded,
  className,
  ...restProps
}: EllipsisExpandButtonProps): React.ReactElement {
  const classes = useStyles()

  return (
    <span className={clsx(classes.button, className)} {...restProps}>
      {expanded ? 'свернуть' : 'развернуть'}
    </span>
  )
}

export function EllipsisExample(): React.ReactElement {
  const [expanded, setExpanded] = React.useState(false)

  return (
    <div>
      <Text ellipsis>
        1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
        aliquid, aperiam dignissimos, dolor earum fugiat impedit inventore ipsa
        itaque magnam magni modi officiis pariatur placeat possimus qui
        repudiandae sapiente ullam!
      </Text>
      <br />
      <Text
        ellipsis={{
          rows: 2,
          tooltip: {
            single: true,
            dropdownProps: { content: 'Важное сообщение!!!' },
          },
        }}
      >
        2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
        aliquid, aperiam dignissimos, dolor earum fugiat impedit inventore ipsa
        itaque magnam magni modi officiis pariatur placeat possimus qui
        repudiandae sapiente! Lore opus magnum
      </Text>
      <br />
      <Text
        components={{ ExpandButton }}
        ellipsis={{
          rows: 2,
          expandable: 'collapsible',
          expanded,
          onExpand: (value) => setExpanded(value),
          tooltip: {
            single: true,
            dropdownProps: {
              content: '3 Lorem ipsum dolor sit amet...',
            },
          },
        }}
      >
        <span>3</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Commodi, culpa cupiditate debitis deserunt dicta distinctio dolore enim
        expedita labore minima minus nesciunt numquam odit, quae rem,
        repudiandae. Lorem ipsum dolor sit amet.
      </Text>
    </div>
  )
}