Всплывающая подсказка для React Material в списке не будет открыта при наведении - PullRequest
Новая
       12

Всплывающая подсказка для React Material в списке не будет открыта при наведении

0 голосов
/ 22 ноября 2018

Я реализую пользовательский интерфейс материала List, который отображает список пользователей и генерирует новый ListItem для каждого из них.Каждый из этих ListItem является изображением профиля пользователя, и я хочу, чтобы при наведении курсора на это изображение появлялась всплывающая подсказка с информацией о пользователе.

Это работает просто отлично.Однако я не могу понять, почему у меня возникают проблемы при попытке заставить Tooltip внутри каждого ListItem оставаться открытым при наведении на него курсора.В настоящее время, как только оно покидает изображение, всплывающая подсказка удаляется (что, опять же, я не хочу, чтобы это происходило).

Из документации кажется, что использование interactive в компоненте Tooltip должноисправить это поведение, но оно просто не работает для меня ...

Если отбросить некоторую внутреннюю логику, то по сути это то, о чем я говорю: 

import React, { Component } from 'react'
import {
  List,
  ListItem,
  ListItemText,
  Tooltip
} from '@material-ui/core'
import { withStyles } from '@material-ui/core/styles'
import classNames from 'classnames'

const styles = theme => ({
  flex: {
    display: 'flex',
    flexWrap: 'wrap'
  },
  defaultIconContainer: {
    position: 'relative',
    borderRadius: '50%',
    backgroundColor: 'orange', // use theme global variable
    width: '40px',
    height: '40px'
  },
  defaultIconTextContainer: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    padding: '0 !important'
  },
  defaultIconText: {
    color: theme.palette.text.contrastText
  },
  thumbnailImage: {
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    margin: '0 5px 10px'
  }
})

type Props = {
  type: ?string,
  usersList: Array
}

class HelpUsers extends Component<Props> {
  defaultProps = {
    type: 'thumbnail',
    usersList: []
  }

  thumbnail = ({ user, classes }) => (
      <ListItem
        key={user.id}
        disableGutters
        className={classNames(
          classes.defaultIconContainer,
          classes.thumbnailImage
        )}
        style={{
          backgroundImage: `url(${user.profilePicture})`
        }}
      >
        <Tooltip
          title={
            <React.Fragment>
              <div>{user.name}</div>
              <div>{user.title}</div>
              <div>{user.company}</div>
              <div>p: {user.mobilePhone}</div>
              <div>c: {user.workPhone}</div>
              <div>e: {user.email}</div>
            </React.Fragment>
          }
          interactive
        >
          <div style={{ opacity: 0 }}>{user.name}</div>
        </Tooltip>
      </ListItem>
  )

  render() {
    const { usersList, classes } = this.props

    if (this.props.type === 'thumbnail') {
      return (
        <List className={classes.flex}>
          {
            usersList.map(user => this.thumbnail({ user, classes }))
          }
        </List>
      )
    }

    return <div>Hello</div>
  }
}

export default withStyles(styles)(HelpUsers)

А вот пример userList: 

const users = [
  {
    id: 1,
    name: 'Test Name 1',
    profilePicture: 'https://fillmurray.com/200/300',
    workPhone: '123-123-1231',
    mobilePhone: '456-456-4564',
    email: 'test1@test.com',
    company: 'Company Name',
    title: 'Senior Something'
  },
  {
    id: 2,
    name: 'Test Name 2',
    profilePicture: 'https://fillmurray.com/100/300',
    workPhone: '123-123-1231',
    mobilePhone: '456-456-4564',
    email: 'test2@test.com',
    company: 'Company Name',
    title: 'Senior Something'
  },
  {
    id: 3,
    name: 'Test Name 3',
    profilePicture: 'https://fillmurray.com/200/400',
    workPhone: '123-123-1231',
    mobilePhone: '456-456-4564',
    email: 'test3@test.com',
    company: 'Company Name',
    title: 'Senior Something'
  },
  {
    id: 4,
    name: 'Test Name 4',
    profilePicture: 'https://fillmurray.com/400/400',
    workPhone: '123-123-1231',
    mobilePhone: '456-456-4564',
    email: 'test4@test.com',
    company: 'Company Name',
    title: 'Senior Something'
  },
  {
    id: 5,
    name: 'Test Name 5',
    profilePicture: 'https://fillmurray.com/400/500',
    workPhone: '123-123-1231',
    mobilePhone: '456-456-4564',
    email: 'test5@test.com',
    company: 'Company Name',
    title: 'Senior Something'
  }
]

Любая помощь будет высоко оценена!

,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

EDIT :

Я на самом деле только что создал следующие коды и окно, и по какой-то причине он работает правильно здесь, но не в моем приложении ... Я мог бынужно взглянуть на некоторые уровни вверх, чтобы понять, почему это влияет на поведение:

https://codesandbox.io/s/00x4z00040

1 Ответ

0 голосов
/ 22 ноября 2018

Что ж, это неловко ... Похоже, я работал со старой версией пользовательского интерфейса Material в моем приложении, поэтому коды и boxbox работали.Я решил сменить версию на последнюю (3.5.1), и проблема решена ... Оставив ее здесь, потому что, возможно, это может как-то помочь / напомнить людям также о проверке версий.

...