@aliretail/react-material-selector/es/SideBar/index.js

素材选择

import React, { useState, useRef, useEffect } from 'react';
import './index.scss';
import { treeData } from './config';

var SideBar = function SideBar(_ref) {
  var openList = _ref.openList,
      setOpenList = _ref.setOpenList,
      setInputValue = _ref.setInputValue,
      setTitleName = _ref.setTitleName,
      setSideBarIdFn = _ref.setSideBarIdFn,
      sidebarData = _ref.sidebarData,
      activeId = _ref.activeId,
      setActiveId = _ref.setActiveId,
      treeTotal = _ref.treeTotal,
      setcontentPage = _ref.setcontentPage;

  // console.log('sidebarData',sidebarData);
  // 右键操作的目录id,控制显示
  var _useState = useState(-1),
      rightClickId = _useState[0],
      setRightClickId = _useState[1]; // 右键操作的目录id,留作上传入参


  var _useState2 = useState(''),
      renameOrDelId = _useState2[0],
      setRenameOrDelId = _useState2[1]; // 删除目录时，是否勾选了 同时删除子类目， 勾选="2"  不勾选="1"
  // 默认选中展开目录树
  // const expandTree=()=>{
  //     let List = []
  //     if(sidebarData&&sidebarData[0]){
  //         List.push(sidebarData[0].id);
  //         if(sidebarData[0].children&&sidebarData[0].children[0]){
  //             List.push(sidebarData[0].children[0].id);
  //             if(sidebarData[0].children[0].children&&sidebarData[0].children[0].children[0]){
  //                 List.push(sidebarData[0].children[0].children[0].id);
  //             }
  //         }
  //     }
  //     setOpenList(List);
  // }
  // useEffect(()=>{
  //     expandTree();
  // },[])


  var clickThreeTitle = function clickThreeTitle(e, id, name) {
    // console.log('3级id',id);
    // 点击三级素材目录
    setActiveId(id);
    setcontentPage(1); // 父组件获取 选中信息
    // setTitleName(name);

    setSideBarIdFn(id);
    e.stopPropagation();
  };

  var clickOneOrTwoTitle = function clickOneOrTwoTitle(e, id, child, name) {
    // console.log('12级id',id);
    // 点击一级或二级标题
    var index = openList.indexOf(id);

    if (child) {
      if (index === -1) {
        setOpenList([].concat(openList, [id]));
      } else {
        openList.splice(index, 1);
        setOpenList([].concat(openList));
      }
    } else {
      setActiveId(id); // 父组件获取 选中信息
      // setTitleName(name);

      setSideBarIdFn(id);
      setcontentPage(1);
    }

    e.stopPropagation();
  };

  var handleRightClick = function handleRightClick(e, id) {
    setRightClickId(id);
    setRenameOrDelId(id);
    e.stopPropagation();
    e.preventDefault();
  };

  return /*#__PURE__*/React.createElement("div", {
    className: "sidebar"
  }, /*#__PURE__*/React.createElement("div", {
    className: "top"
  }), /*#__PURE__*/React.createElement("div", {
    className: "bottom"
  }, sidebarData.map(function (item) {
    return /*#__PURE__*/React.createElement("div", {
      className: "one",
      key: item.id
    }, /*#__PURE__*/React.createElement("div", {
      onClick: function onClick(e) {
        return clickOneOrTwoTitle(e, item.id, item.children, item.title);
      },
      className: "one-title " + (activeId === item.id && 'active1'),
      id: item.id,
      onContextMenu: function onContextMenu(e) {
        return handleRightClick(e, item.id);
      }
    }, item.children && /*#__PURE__*/React.createElement("i", {
      className: "iconfont iconsanjiaodown " + (openList.indexOf(item.id) === -1 && 'closed'),
      id: item.id
    }), !item.children && /*#__PURE__*/React.createElement("span", null, "\xA0\xA0\xA0\xA0"), item.title, !item.children && item.materialNumbers !== 0 && /*#__PURE__*/React.createElement("span", {
      className: "material-num"
    }, item.materialNumbers)), /*#__PURE__*/React.createElement("div", null, item.children && item.children.map(function (item1) {
      return /*#__PURE__*/React.createElement("div", {
        key: item1.id
      }, /*#__PURE__*/React.createElement("div", {
        className: "two-title " + (activeId === item1.id && 'active1'),
        style: {
          display: openList.indexOf(item.id) === -1 ? 'none' : ''
        },
        onClick: function onClick(e) {
          return clickOneOrTwoTitle(e, item1.id, item1.children, item1.title);
        },
        key: item1.id,
        id: item1.id,
        onContextMenu: function onContextMenu(e) {
          return handleRightClick(e, item1.id);
        }
      }, item1.children && /*#__PURE__*/React.createElement("i", {
        className: "iconfont iconsanjiaodown " + (openList.indexOf(item1.id) === -1 && 'closed')
      }), !item1.children && /*#__PURE__*/React.createElement("span", null, "\xA0\xA0\xA0\xA0"), item1.title, !item1.children && item1.materialNumbers !== 0 && /*#__PURE__*/React.createElement("span", {
        className: "material-num"
      }, item1.materialNumbers)), /*#__PURE__*/React.createElement("div", null, item1.children && item1.children.map(function (item2) {
        return (
          /*#__PURE__*/
          // 三级标题
          React.createElement("div", {
            className: "three-title " + (activeId === item2.id ? 'active' : ''),
            style: {
              display: openList.indexOf(item1.id) === -1 || openList.indexOf(item.id) === -1 ? 'none' : ''
            },
            onClick: function onClick(e) {
              return clickThreeTitle(e, item2.id, item2.title);
            },
            key: item2.id,
            id: item2.id,
            onContextMenu: function onContextMenu(e) {
              return handleRightClick(e, item2.id);
            }
          }, /*#__PURE__*/React.createElement("div", {
            className: "title",
            id: item2.id
          }, item2.title), /*#__PURE__*/React.createElement("div", {
            className: "number",
            id: item2.id
          }, item2.materialNumbers))
        );
      })));
    })));
  })));
};

export default SideBar;