Реагировать - Развернуть / Свернуть все - PullRequest
Новая
       49

Реагировать - Развернуть / Свернуть все

0 голосов
/ 09 ноября 2019

Я хотел бы развернуть / свернуть все с помощью одного нажатия кнопки.

Создан новый компонент CollapsiblePanel с использованиемactstrap и с использованием созданного компонента в контейнере (index.js).

Теперь я могу развернуть / свернуть все контейнеры, нажав кнопку.

https://codesandbox.io/s/fervent-banzai-s9pst

CollapsiblePanel.js 

import React, { useState, useEffect } from "react";
import { Collapse } from "reactstrap";

function CollapsiblePanel({ children, ...props }) {
    const { title, collapse } = props;
    const [isCollapse, setIsCollapse] = useState(collapse);
    const [icon, setIcon] = useState("fa fa-chevron-down");
    const toggle = () => {
        setIsCollapse(!isCollapse);
        setIcon(state => {
            return state === "fa fa-chevron-down"
                ? "fa fa-chevron-right"
                : "fa fa-chevron-down";
        });
    };

    useEffect(() => {
        toggle();
    }, [collapse]);

    return (
        <div className="coll-panel">
            <button
                type="button"
                className="coll-panel-btn btn-primary btn-block text-left"
                onClick={() => toggle()}
            >
                <i className={icon} /> {title}
            </button>
            <Collapse className="border text-left p-2" isOpen={isCollapse}>
                {children}
            </Collapse>
        </div>
    );
}

CollapsiblePanel.defaultProps = {
    children: "Add node as a child",
    title: "Collapsible Panel",
    collapse: true
};

export default CollapsiblePanel;

index.js 

import React, { useState } from "react";
import ReactDOM from "react-dom";
import CollapsiblePanel from "./component/CollapsiblePanel";

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./styles.css";

function App() {
    const text =
        "Lorem ipsum dolor sit amet consectetur adipisicing elit.Nihil earum illo ipsa velit facilis provident qui eligendi, quia ut magnam tenetur. Accusantium nisi quos delectus in necessitatibus ad. Ducimus, id!";
    const [collapse, setCollapse] = useState(true);
    const [title, setTitle] = useState("Expand All");
    const [icon, setIcon] = useState("fa fa-chevron-right");
    const collapseAll = () => {
        setCollapse(!collapse);
        setIcon(state => {
            return state === "fa fa-chevron-right"
                ? "fa fa-chevron-down"
                : "fa fa-chevron-right";
        });
        setTitle(state => {
            return state === "Expand All" ? "Collapse All" : "Expand All";
        });
    };
    return (
        <div className="App container my-2">
            {/* Expand/Collapse All */}
            <button
                type="button"
                className="btn-warning mt-4 mb-3 float-left"
                onClick={collapseAll}
            >
                <i className={icon} /> {title}
            </button>
            <CollapsiblePanel title="Title 1" collapse={collapse}>
                <span>{text}</span>
            </CollapsiblePanel>
            <CollapsiblePanel title="Title 2" collapse={collapse}>
                <span>{text}</span>
            </CollapsiblePanel>
            <CollapsiblePanel title="Title 3" collapse={collapse}>
                <span>{text}</span>
            </CollapsiblePanel>
            <CollapsiblePanel title="Title 4" collapse={collapse}>
                <span>{text}</span>
            </CollapsiblePanel>
            <CollapsiblePanel title="Title 5" collapse={collapse}>
                <span>{text}</span>
            </CollapsiblePanel>
        </div>
    );
}

Сейчас: Перед нажатием кнопки Развернуть / Свернуть все, если щелкнуть любой из складных контейнеров (в index.js), а затемпри нажатии кнопки Развернуть / Свернуть не все контейнеры расширяются.

Открытое закрывается и наоборот.

Ожидается:

ХотяКонтейнер открывается / закрывается явно. При нажатии кнопки «Развернуть / свернуть» я хотел бы развернуть / свернуть все. Заранее спасибо.

1 Ответ

1 голос
/ 09 ноября 2019

На складной панели вы переключаете предыдущее состояние. Вместо этого вы должны явно установить состояние раскрытия / свертывания. 

  const animate = collapse => {
    setIsCollapse(collapse);
    setIcon(state => {
      return state === "fa fa-chevron-down"
        ? "fa fa-chevron-right"
        : "fa fa-chevron-down";
    });
  };

  useEffect(() => {
    animate(!collapse);
  }, [collapse]);

Попробуйте следующую песочницу.

https://codesandbox.io/s/festive-moore-cbqsn

...