Нужен единый блок для всех реагирующих сообщений о тостах, либо сбой, либо успех в реакции на подтверждение - PullRequest
Новая
       27

Нужен единый блок для всех реагирующих сообщений о тостах, либо сбой, либо успех в реакции на подтверждение

0 голосов
/ 31 марта 2020

По умолчанию в ответе мы получаем ответ-toastify, как на рисунке ниже. Но теперь проект требует все сообщения в одном блоке или блоке, с одной кросс-кнопкой и счетчиком уведомлений сверху с одним таймером и с полосой прокрутки, чтобы увидеть все сообщения.

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

enter image description here

import React, { useContext, useState, useReducer } from 'react';
import { ToastContext } from './App';

import { closeToast, showToast } from '../store/toast/action';
import { connect } from 'react-redux';
const ToastContainer = styled.div`
  width: 350px;
  position: absolute;
  top: 100px;
  right: 16px;
  background: #c12335;
  z-index: 9999;
  color: white;
  padding: 12px;
  display: ${props => (props.hide ? 'none' : '')};
`;
const ViewMore = styled.div`
  text-align: right;
  margin-top: 4px;
  text-decoration: underline;
  cursor: pointer;
`;
const CloseButton = styled.div`
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: right;
`;
const ToastList = styled.div`
  margin-top: 8px;
  max-height: 160px;
  overflow: auto;
`;

const CustomToast = props => {
  const { toastList, closeToast } = props;
  const [showAll, setShowAll] = useState(false);
  const toastCount = toastList.length;
  const list = showAll ? toastList : toastList.slice(0, 5);
  return (
    <ToastContainer hide={toastCount == 0}>
      <div>
        <CloseButton
          onClick={() => {
            setShowAll(false);
            closeToast();
          }}
        >
          x
        </CloseButton>
        {toastCount} New Notifications
      </div>
      <PerfectScrollbar>
        <ToastList>
          {list.map((toastContent, index) => (
            <div key={'toast-' + index}>
              <span class="fa fa-exclamation-triangle"></span> {toastContent}
            </div>
          ))}
        </ToastList>
      </PerfectScrollbar>
      {toastList.length > 5 && !showAll && (
        <ViewMore onClick={() => setShowAll(true)}>View More....</ViewMore>
      )}
    </ToastContainer>
  );
};
const mapStateToProps = state => {
  return {
    toastList: state.toast.toastList,
  };
};
const mapDispatchToProps = {
  showToast,
  closeToast,
};
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(CustomToast);
...