@krowdy-ui/views/esm/Filters/FiltersTree/FiltersTree.js

React components that implement Google's Material Design.

import React from 'react';
import PropTypes from 'prop-types';
import SortableTree, { removeNodeAtPath } from 'react-sortable-tree';
import Theme from './Theme';
import { IconButton } from '@krowdy-ui/core';
import { Close as CloseIcon, Edit as EdiIcon } from '@material-ui/icons';

var _ref2 = /*#__PURE__*/React.createElement(CloseIcon, {
  fontSize: "small"
});

var _ref3 = /*#__PURE__*/React.createElement(EdiIcon, {
  fontSize: "small"
});

function FiltersTree(props) {
  var treeData = props.treeData,
      _props$onChange = props.onChange,
      onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
      _props$onClickEdit = props.onClickEdit,
      onClickEdit = _props$onClickEdit === void 0 ? function () {} : _props$onClickEdit,
      dots = props.dots; // const [ treeData, setTreeData ] = React.useState([])
  // React.useEffect(() => {
  // setTreeData(treeDataProps)
  // eslint-disable-next-line react-hooks/exhaustive-deps
  // }, [ treeDataProps ])

  var _handleUpdateTreeData = function _handleUpdateTreeData(data) {
    // setTreeData(data)
    onChange(data);
  };

  var _handleClickDelete = function _handleClickDelete(rowInfo) {
    return function () {
      var newTree = removeNodeAtPath({
        getNodeKey: function getNodeKey(_ref) {
          var treeIndex = _ref.treeIndex;
          return treeIndex;
        },
        path: rowInfo.path,
        treeData: treeData
      });

      _handleUpdateTreeData(newTree);
    };
  };

  var _handleClickEdit = function _handleClickEdit(rowInfo) {
    return function () {
      onClickEdit(rowInfo.node);
    };
  };

  return /*#__PURE__*/React.createElement(SortableTree, {
    generateNodeProps: function generateNodeProps(rowInfo) {
      return {
        buttons: [/*#__PURE__*/React.createElement(React.Fragment, {
          key: rowInfo.node._id
        }, /*#__PURE__*/React.createElement(IconButton, {
          onClick: _handleClickDelete(rowInfo),
          size: "small"
        }, _ref2), /*#__PURE__*/React.createElement(IconButton, {
          onClick: _handleClickEdit(rowInfo),
          size: "small"
        }, _ref3))],
        dots: dots
      };
    },
    isVirtualized: false,
    onChange: _handleUpdateTreeData,
    theme: Theme,
    treeData: treeData
  });
}

process.env.NODE_ENV !== "production" ? FiltersTree.propTypes = {
  onChange: PropTypes.func,
  treeData: PropTypes.array
} : void 0;
export default FiltersTree;