ReactJS с Redux покажет всплывающую подсказку о компоненте SVG - PullRequest
Новая
       28

ReactJS с Redux покажет всплывающую подсказку о компоненте SVG

0 голосов
/ 11 февраля 2019

Я пытаюсь показать всплывающую подсказку о компоненте SVG.Для всплывающей подсказки я пытаюсь использовать reactstap компонент.

Если я использую обычный компонент внутри SVG, он не отображает компонент SVG.

getServiceStatus = (serviceStatus, serviceName) => {
        return Object.keys(serviceStatus).map((date, index) => {
            const downTime = serviceStatus[date].filter(value => { return value === 0 }).length
            const color = downTime ? "#bcbe2a" : "#36b37e"
            const toolTipText = downTime ? date + "No DownTime report for this date" : date + " service was down for " + downTime

            return (
                <span key={index}>
                <rect key={date} id={serviceName+'-'+ index}  height="34" width="3" x={(index + 1) * 5} y="0" fill={color} />
                    <Tooltip placement="top" isOpen={this.props.toolTipOpen} target={serviceName+'-'+ index} toggle={this.toggleToolTip}>
                        {toolTipText}
                    </Tooltip>
                </span>
            )
        })
    }

Если я создаю отдельный компонент для SVG и Tooltip, проблема заключается в том, что всплывающая подсказка отображается для двух различных компонентов вместе. 

getServiceStatus = (serviceStatus, serviceName) => {
    return Object.keys(serviceStatus).map((date, index) => {
        const downTime = serviceStatus[date].filter(value => { return value === 0 }).length
        const color = downTime ? "#bcbe2a" : "#36b37e"
        const toolTipText = downTime ? date + "No DownTime report for this date" : date + " service was down for " + downTime

        return (
            <rect key={date} id={serviceName+'-'+ index}  height="34" width="3" x={(index + 1) * 5} y="0" fill={color} />
       )

    })
}

getToolTip = (serviceStatus, serviceName) => {
    console.log(serviceStatus.toString())
    return Object.keys(serviceStatus).map((date, index) => {
        const downTime = serviceStatus[date].filter(value => { return value === 0 }).length
        const toolTipText = downTime ? date + "No DownTime report for this date" : date + " service was down for " + downTime

        return (
            <span key={index}>
                <Tooltip placement="top" isOpen={this.props.toolTipOpen} target={serviceName+'-'+ index} toggle={this.toggleToolTip}>
                    {toolTipText}
                </Tooltip>
            </span>
        )
    })
}

https://codesandbox.io/s/8zzk6qq662

1 Ответ

0 голосов
/ 11 февраля 2019

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

полный код: https://codesandbox.io/s/2vv782j6z0

Действие: 

export function toogleToolTipAction(id) {
  console.log("toogleToolTipAction", id);
  return {
    type: "TOOGLE_TOOLTIP",
    id // here i'm using the tooltip id
  };
}

Редуктор: 

case "TOOGLE_TOOLTIP":
  return {
    ...state,
    toolTipOpen: action.id // here i'm using the tooltip id
  };

Контейнер: 

const mapDispatchToProps = dispatch => {
  return {
    fetchServiceStatus: () => dispatch(getServiceStatusAction()),
    toogleToolTip: id => dispatch(toogleToolTipAction(id)), // here i'm using the tooltip id
    dummy: () => dispatch(toogleToolTipAction())
  };
};

Компонент: 

  toggleToolTip = (id, e) => {
    if (e.type === "mouseout") {
      this.props.toogleTooltip(null);
    } else {
      this.props.toogleTooltip(id);
    }
  };

и 

  return (
    <span key={index}>
      <Tooltip
        placement="top"
        isOpen={this.props.toolTipOpen === serviceName + "-" + index}
        target={serviceName + "-" + index}
        toggle={this.toggleToolTip.bind(this, serviceName + "-" + index)}
      >
        {toolTipText}
      </Tooltip>
    </span>
  );
...