src/tools/Trees/TreeProduction/TreeProductionNode.jsx - master - DevDenzo/ERP

src/tools/Trees/TreeProduction/TreeProductionNode.jsx

56 строк2 KB

Denis Sklyarskij

Инициализирован репозиторий

14 янв 2026, 23:32

14 янв 2026, 23:321df3d47

// Подключаем библиотеку React для создания компонента
import React from "react";
// Подключаем библиотеку генерации CSS
import classNames from "classnames";

// Подключаем bootstrap иконки
import { Check, ChevronDown } from "react-bootstrap-icons";

// Подключаем дочернее дерево
import ChildProductionTree from "./ChildProductionTree.jsx";

// Подключаем стили узла дерева
import './_tree-production-node.less';

// Узел дерева производства
const TreeProductionNode = ({ node, isSelected, onToggle }) => {
    // отображаем представление дерева
    return (
        <li className={classNames("list-group-item", "tree-products-node")}>
            <div className={classNames("tree-products-node__space")}>
                <span className={classNames("tree-products-node__toggle-icon")}>
                    <ChevronDown size={18} />
                </span>
                <div className={classNames("form-check", "tree-products-node__space")}>
                    <input
                        type="checkbox"
                        className={classNames(
                        "form-check-input",
                            "tree-products-node__check-input"
                        )}
                        checked={isSelected(node.id)}
                        onChange={() => onToggle(node.id)}
                    />
                    <label
                        className={classNames(
                        "form-check-label",
                            "tree-products-node__check-label"
                        )}
                    >
                        <Check size={18} />
                    </label>
                    <span className={classNames("tree-products-node__check-text")}>
                        { node.name }
                    </span>
                </div>
            </div>
            {node.children && node.children.length > 0 && (
                <div className={classNames("tree-products-node__children")}>
                    <ChildProductionTree children={node.children} />
                </div>
            )}
        </li>
    );
};

export default TreeProductionNode;