React-галерея изображений

Question

Я пытаюсь создать галерею изображений с React-изображениями (https://github.com/jossmac/react-images).

Вот мой код.

https://codesandbox.io/s/gallant-yalow-7srs6

Здесь я пытаюсь достичь двух вещей:

1. Реализация модального режима, и модальное окно откроется с текущим выбранным изображением из базовой галереи.
2. Изменить "из" в активном представлении общего просмотра нижнего колонтитула. то есть в настоящее время это "1 из 4", поэтому мне нужно это как "1/4"

Может кто-нибудь, пожалуйста, помогите мне? Я отчасти заблудился: (

Заранее спасибо.

Answer 1

Чтобы я смог выполнить ваше требование, Рабочий пример : https://codesandbox.io/s/xenodochial-dawn-scjsv

А вот код:

 class gall extends React.Component {
  state = { modalIsOpen: false, currentIndex: 0 };
  toggleModal = () => {
    this.setState(state => ({ modalIsOpen: !state.modalIsOpen }));
  };
  onImageChange = (index) => {
    console.log(index)
    this.setState(state => ({ currentIndex: index }));
  };

  render() {
    const { modalIsOpen } = this.state;

    const CustomModalFooter = ({ currentIndex, views }) => {
      const activeView = currentIndex + 1;
      const totalViews = views.length;

      if (!activeView || !totalViews) return null;
      return (
        <span class="react-images__footer__count css-w6xjhe css-1ycyyax">
          {activeView} / {totalViews}
        </span>
      );
    };

    return (
      <>
        <button
          type="button"
          className="btn-fullScreen"
          onClick={this.toggleModal}
        >
          Open Modal
        </button>
        <ModalGateway>
          {modalIsOpen ? (
            <Modal onClose={this.toggleModal}>
              <Carousel
                currentIndex={this.state.currentIndex}
                components={{ FooterCount: CustomModalFooter }}
                views={images}
              />
            </Modal>
          ) : null}
        </ModalGateway>

        <Carousel
        onClick={this.onImageClick}
        trackProps={{onViewChange:(index) => this.onImageChange(index)}}
          components={{ FooterCount: CustomModalFooter }}
          views={images}
        />
      </>
    );
  }
}

export default gall;