web-sdk-im/dist/components/ContactsTree.js

React js components

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireWildcard(require("react"));

var _reactCustomScrollbars = require("react-custom-scrollbars");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _axios = _interopRequireDefault(require("axios"));

var _styles = require("@material-ui/core/styles");

var _lab = require("@material-ui/lab");

var _core = require("@material-ui/core");

var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));

var _ChevronRight = _interopRequireDefault(require("@material-ui/icons/ChevronRight"));

var _Mail = _interopRequireDefault(require("@material-ui/icons/Mail"));

var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));

var _Label = _interopRequireDefault(require("@material-ui/icons/Label"));

var _SupervisorAccount = _interopRequireDefault(require("@material-ui/icons/SupervisorAccount"));

var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));

var _Forum = _interopRequireDefault(require("@material-ui/icons/Forum"));

var _LocalOffer = _interopRequireDefault(require("@material-ui/icons/LocalOffer"));

var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));

var _ArrowRight = _interopRequireDefault(require("@material-ui/icons/ArrowRight"));

var _Tune = _interopRequireDefault(require("@material-ui/icons/Tune"));

var _AccountTree = _interopRequireDefault(require("@material-ui/icons/AccountTree"));

var _Folder = _interopRequireDefault(require("@material-ui/icons/Folder"));

var _MoreVert = _interopRequireDefault(require("@material-ui/icons/MoreVert"));

var _Action = require("../Action/Action");

var _reactRedux = require("react-redux");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

// const useStyles = makeStyles({
//   root: {
//     height: 240,
//     flexGrow: 1,
//     maxWidth: 400,
//   },
// });
var useTreeItemStyles = (0, _styles.makeStyles)(function (theme) {
  return {
    root: {
      color: theme.palette.text.secondary,
      '&:hover > $content': {
        backgroundColor: theme.palette.action.hover
      },
      '&:focus > $content, &$selected > $content': {
        backgroundColor: "var(--tree-view-bg-color, ".concat(theme.palette.grey[400], ")"),
        color: 'var(--tree-view-color)'
      },
      '&:focus > $content $label, &:hover > $content $label, &$selected > $content $label': {
        backgroundColor: 'transparent'
      }
    },
    content: {
      color: theme.palette.text.secondary,
      borderTopRightRadius: theme.spacing(2),
      borderBottomRightRadius: theme.spacing(2),
      paddingRight: theme.spacing(1),
      fontWeight: theme.typography.fontWeightMedium,
      '$expanded > &': {
        fontWeight: theme.typography.fontWeightRegular
      }
    },
    group: {
      marginLeft: 0,
      '& $content': {
        paddingLeft: theme.spacing(2)
      }
    },
    expanded: {},
    selected: {},
    label: {
      fontWeight: 'inherit',
      color: 'inherit'
    },
    labelRoot: {
      display: 'flex',
      alignItems: 'center',
      padding: theme.spacing(0.5, 0)
    },
    labelIcon: {
      marginRight: theme.spacing(1)
    },
    labelText: {
      fontWeight: 'inherit',
      flexGrow: 1
    }
  };
});

function StyledTreeItem(props) {
  var classes = useTreeItemStyles();

  var labelText = props.labelText,
      LabelIcon = props.labelIcon,
      labelInfo = props.labelInfo,
      color = props.color,
      bgColor = props.bgColor,
      other = _objectWithoutProperties(props, ["labelText", "labelIcon", "labelInfo", "color", "bgColor"]);

  return /*#__PURE__*/_react["default"].createElement(_lab.TreeItem, _extends({
    label: /*#__PURE__*/_react["default"].createElement("div", {
      className: classes.labelRoot
    }, /*#__PURE__*/_react["default"].createElement(LabelIcon, {
      color: "inherit",
      className: classes.labelIcon
    }), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
      variant: "body2",
      className: classes.labelText
    }, labelText), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
      variant: "caption",
      color: "inherit"
    }, labelInfo)),
    style: {
      '--tree-view-color': color,
      '--tree-view-bg-color': bgColor
    },
    classes: {
      root: classes.root,
      content: classes.content,
      expanded: classes.expanded,
      selected: classes.selected,
      group: classes.group,
      label: classes.label
    }
  }, other));
}

StyledTreeItem.propTypes = {
  bgColor: _propTypes["default"].string,
  color: _propTypes["default"].string,
  labelIcon: _propTypes["default"].elementType.isRequired,
  labelInfo: _propTypes["default"].string,
  labelText: _propTypes["default"].string.isRequired
};
var useStyles = (0, _styles.makeStyles)({
  root: {
    height: 264,
    flexGrow: 1,
    maxWidth: 400
  }
});

var ContactsTree = function ContactsTree() {
  var classes = useStyles();

  var preventDefault = function preventDefault(event) {
    return event.preventDefault();
  };

  var _React$useState = _react["default"].useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      open = _React$useState2[0],
      setOpen = _React$useState2[1];

  var anchorRef = _react["default"].useRef(null);

  var handleToggle = function handleToggle() {
    setOpen(function (prevOpen) {
      return !prevOpen;
    });
  };

  var handleClose = function handleClose(event) {
    if (anchorRef.current && anchorRef.current.contains(event.target)) {
      return;
    }

    setOpen(false);
  };

  var _React$useState3 = _react["default"].useState(true),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      contactMenu = _React$useState4[0],
      setContactMenu = _React$useState4[1];

  var showHideMobileTab = function showHideMobileTab(e) {
    if (window.innerWidth <= 960) {
      setContactMenu(!contactMenu);
    }
  };

  (0, _react.useEffect)(function () {
    if (window.innerWidth <= 960) {
      setContactMenu(false);
    }
  }, [contactMenu]);

  function handleListKeyDown(event) {
    if (event.key === 'Tab') {
      event.preventDefault();
      setOpen(false);
    }
  }

  var prevOpen = _react["default"].useRef(open);

  _react["default"].useEffect(function () {
    if (prevOpen.current === true && open === false) {
      anchorRef.current.focus();
    }

    prevOpen.current = open;
  }, [open]);
  /*--
      // HTTP Get Method
      const store = useSelector(state => state.im);
      const dispatch = useDispatch();
      const [departmentTreeHierarchy, setDepartmentTreeHierarchy] = React.useState([]);
      // const getTreeData = async () => {
      //     await axios.get(`http://192.168.11.13:9096/api/v1.0/department/company/2c9380847849924f017863201e9b0079`)
      //     .then((res) => {
      //         const response = res.data.data;
      //         console.log(response);
      //         setTreeData(response);
      //     })
      //     .catch((err) => {
      //         console.log(err);
      //     })
      // };
  
      const getDepartmentTreeHierarchy = async () => dispatch(getDepartmentHierarchy('2c93808275fa1c970175feb1ffa0000c'))
      React.useEffect(() => {
          getDepartmentTreeHierarchy();
      }, [store.companyId])
  
      React.useEffect(() => {
          setDepartmentTreeHierarchy(store.departmentHierarchy);
      }, [store.departmentHierarchy])
  --*/


  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactCustomScrollbars.Scrollbars, {
    style: {
      width: '100%',
      height: '100vh'
    }
  }, /*#__PURE__*/_react["default"].createElement(_lab.TreeView, {
    className: "tree-view",
    defaultExpanded: ['1'],
    defaultCollapseIcon: /*#__PURE__*/_react["default"].createElement(_ArrowDropDown["default"], null),
    defaultExpandIcon: /*#__PURE__*/_react["default"].createElement(_ArrowRight["default"], null),
    defaultEndIcon: /*#__PURE__*/_react["default"].createElement("div", {
      style: {
        width: 24
      }
    })
  }, /*#__PURE__*/_react["default"].createElement(StyledTreeItem, {
    nodeId: "1",
    labelText: "ZKTeco",
    labelIcon: _AccountTree["default"]
  }, /*#__PURE__*/_react["default"].createElement(StyledTreeItem, {
    nodeId: "2",
    labelText: "User Experience Department",
    labelIcon: _Folder["default"],
    onClick: showHideMobileTab
  }), /*#__PURE__*/_react["default"].createElement(StyledTreeItem, {
    nodeId: "3",
    labelText: "Product Department",
    labelIcon: _Folder["default"],
    onClick: showHideMobileTab
  }), /*#__PURE__*/_react["default"].createElement(StyledTreeItem, {
    nodeId: "4",
    labelText: "Development Department",
    labelIcon: _Folder["default"],
    onClick: showHideMobileTab
  }), /*#__PURE__*/_react["default"].createElement(StyledTreeItem, {
    nodeId: "5",
    labelText: "Sales Department",
    labelIcon: _Folder["default"],
    onClick: showHideMobileTab
  }), /*#__PURE__*/_react["default"].createElement(StyledTreeItem, {
    nodeId: "6",
    labelText: "Testing Department",
    labelIcon: _Folder["default"],
    onClick: showHideMobileTab
  }), /*#__PURE__*/_react["default"].createElement(StyledTreeItem, {
    nodeId: "7",
    labelText: "Customer Department",
    labelIcon: _Label["default"]
  }, /*#__PURE__*/_react["default"].createElement(StyledTreeItem, {
    nodeId: "8",
    labelText: "Customer 1",
    labelIcon: _Folder["default"] //labelInfo="90"
    ,
    color: "#1a73e8",
    bgColor: "#e8f0fe",
    onClick: showHideMobileTab
  }), /*#__PURE__*/_react["default"].createElement(StyledTreeItem, {
    nodeId: "9",
    labelText: "Customer 2",
    labelIcon: _Folder["default"],
    color: "#e3742f",
    bgColor: "#fcefe3",
    onClick: showHideMobileTab
  }), /*#__PURE__*/_react["default"].createElement(StyledTreeItem, {
    nodeId: "10",
    labelText: "Customer 3",
    labelIcon: _Folder["default"],
    color: "#a250f5",
    bgColor: "#f3e8fd",
    onClick: showHideMobileTab
  }), /*#__PURE__*/_react["default"].createElement(StyledTreeItem, {
    nodeId: "11",
    labelText: "Customer 4",
    labelIcon: _Folder["default"],
    color: "#3c8039",
    bgColor: "#e6f4ea",
    onClick: showHideMobileTab
  })), /*#__PURE__*/_react["default"].createElement(StyledTreeItem, {
    nodeId: "12",
    labelText: "President Office",
    labelIcon: _Folder["default"],
    onClick: showHideMobileTab
  }), /*#__PURE__*/_react["default"].createElement(StyledTreeItem, {
    nodeId: "13",
    labelText: "Design Department",
    labelIcon: _Label["default"]
  }, /*#__PURE__*/_react["default"].createElement(StyledTreeItem, {
    nodeId: "14",
    labelText: "UI Design Department",
    labelIcon: _Folder["default"],
    color: "#a250f5",
    bgColor: "#f3e8fd",
    onClick: showHideMobileTab
  }), /*#__PURE__*/_react["default"].createElement(StyledTreeItem, {
    nodeId: "15",
    labelText: "Web Design Department",
    labelIcon: _Folder["default"],
    color: "#3c8039",
    bgColor: "#e6f4ea",
    onClick: showHideMobileTab
  }), /*#__PURE__*/_react["default"].createElement(StyledTreeItem, {
    nodeId: "16",
    labelText: "Graphic Design Department",
    labelIcon: _Folder["default"],
    color: "#3c8039",
    bgColor: "#e6f4ea",
    onClick: showHideMobileTab
  })), /*#__PURE__*/_react["default"].createElement(StyledTreeItem, {
    nodeId: "17",
    labelText: "Business Department",
    labelIcon: _Folder["default"],
    onClick: showHideMobileTab
  })))));
};

var _default = ContactsTree;
exports["default"] = _default;