packages/typography/examples/EllipsisExample.tsx - develop - Bybaleshqa/Forktest

packages/typography/examples/EllipsisExample.tsx

70 строк2 KB

OUT-Albov.A.A

feat(text): расширен функционал ellipsis

03 окт 2024, 13:04

03 окт 2024, 13:04d7415bf

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: { 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: true,
        }}
      >
        <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>
  )
}