web-sdk-im
Version:
React js components
537 lines (457 loc) • 21.2 kB
JavaScript
"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 _reactRouterDom = require("react-router-dom");
var _reactDom = _interopRequireDefault(require("react-dom"));
var _Sms = _interopRequireDefault(require("@material-ui/icons/Sms"));
var _VideoCall = _interopRequireDefault(require("@material-ui/icons/VideoCall"));
var _Contacts = _interopRequireDefault(require("@material-ui/icons/Contacts"));
var _Dashboard = _interopRequireDefault(require("@material-ui/icons/Dashboard"));
var _Settings = _interopRequireDefault(require("@material-ui/icons/Settings"));
var _Business = _interopRequireDefault(require("@material-ui/icons/Business"));
var _ExpandLess = _interopRequireDefault(require("@material-ui/icons/ExpandLess"));
var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
var _Person = _interopRequireDefault(require("@material-ui/icons/Person"));
var _Stars = _interopRequireDefault(require("@material-ui/icons/Stars"));
var _LaptopWindows = _interopRequireDefault(require("@material-ui/icons/LaptopWindows"));
var _Public = _interopRequireDefault(require("@material-ui/icons/Public"));
var _ExitToApp = _interopRequireDefault(require("@material-ui/icons/ExitToApp"));
var _reactRedux = require("react-redux");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _core = require("@material-ui/core");
require("./Custom.css");
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 SideBar(props) {
var _props$security = props.security,
validToken = _props$security.validToken,
user = _props$security.user; // alert(JSON.stringify(user));
// const classes = useStyles();
var _useState = (0, _react.useState)(false),
_useState2 = _slicedToArray(_useState, 2),
profile = _useState2[0],
setProfile = _useState2[1]; // const preventDefault = (event) => event.preventDefault();
var _useState3 = (0, _react.useState)(false),
_useState4 = _slicedToArray(_useState3, 2),
open1 = _useState4[0],
setOpen1 = _useState4[1];
var _useState5 = (0, _react.useState)(false),
_useState6 = _slicedToArray(_useState5, 2),
open2 = _useState6[0],
setOpen2 = _useState6[1];
var _useState7 = (0, _react.useState)(false),
_useState8 = _slicedToArray(_useState7, 2),
open3 = _useState8[0],
setOpen3 = _useState8[1];
var _useState9 = (0, _react.useState)(false),
_useState10 = _slicedToArray(_useState9, 2),
open4 = _useState10[0],
setOpen4 = _useState10[1];
var _useState11 = (0, _react.useState)(false),
_useState12 = _slicedToArray(_useState11, 2),
open5 = _useState12[0],
setOpen5 = _useState12[1];
var handleClick1 = function handleClick1() {
setOpen1(!open1);
};
var handleClick2 = function handleClick2() {
setOpen2(!open2);
};
var handleClick3 = function handleClick3() {
setOpen3(!open3);
};
var handleClick4 = function handleClick4() {
setOpen4(!open4);
};
var handleClick5 = function handleClick5() {
setOpen5(!open5);
};
var _useState13 = (0, _react.useState)(true),
_useState14 = _slicedToArray(_useState13, 2),
isClicked1 = _useState14[0],
setIsClicked1 = _useState14[1];
var closeMobileSidebar1 = function closeMobileSidebar1() {
setIsClicked1(!isClicked1);
};
(0, _react.useEffect)(function () {
var element1 = document.getElementById('messagesSideMenuMobile');
if (window.innerWidth <= 960 && !isClicked1 === false) {
_reactDom["default"].findDOMNode(element1).classList.add('side-menu', 'side-menu-show');
_reactDom["default"].findDOMNode(element1).classList.remove('side-menu-hide');
if (_reactDom["default"].findDOMNode(element1).classList.contains('side-menu-show')) {
_reactDom["default"].findDOMNode(element1).classList.add('side-menu-show', 'side-menu-proxy');
}
} else if (window.innerWidth <= 960 && !isClicked1 === true) {
_reactDom["default"].findDOMNode(element1).classList.remove('side-menu-show');
if (_reactDom["default"].findDOMNode(element1).classList.contains('side-menu-hide')) {
_reactDom["default"].findDOMNode(element1).classList.remove('side-menu-hide');
_reactDom["default"].findDOMNode(element1).classList.add('side-menu-show', 'side-menu-proxy');
} else {
_reactDom["default"].findDOMNode(element1).classList.remove('side-menu', 'side-menu-show');
_reactDom["default"].findDOMNode(element1).classList.add('side-menu', 'side-menu-hide');
}
}
}, [isClicked1]);
var _useState15 = (0, _react.useState)(true),
_useState16 = _slicedToArray(_useState15, 2),
isClicked2 = _useState16[0],
setIsClicked2 = _useState16[1];
var closeMobileSidebar2 = function closeMobileSidebar2() {
setIsClicked2(!isClicked2);
};
(0, _react.useEffect)(function () {
var element2 = document.getElementById('contactsSideMenuMobile');
if (window.innerWidth <= 960 && !isClicked2 === false) {
_reactDom["default"].findDOMNode(element2).classList.add('side-menu', 'side-menu-show');
_reactDom["default"].findDOMNode(element2).classList.remove('side-menu-hide');
if (_reactDom["default"].findDOMNode(element2).classList.contains('side-menu-show')) {
_reactDom["default"].findDOMNode(element2).classList.add('side-menu-show', 'side-menu-proxy');
}
} else if (window.innerWidth <= 960 && !isClicked2 === true) {
_reactDom["default"].findDOMNode(element2).classList.remove('side-menu-show');
if (_reactDom["default"].findDOMNode(element2).classList.contains('side-menu-hide')) {
_reactDom["default"].findDOMNode(element2).classList.remove('side-menu-hide');
_reactDom["default"].findDOMNode(element2).classList.add('side-menu-show', 'side-menu-proxy');
} else {
_reactDom["default"].findDOMNode(element2).classList.remove('side-menu', 'side-menu-show');
_reactDom["default"].findDOMNode(element2).classList.add('side-menu', 'side-menu-hide');
}
}
}, [isClicked2]);
var _useState17 = (0, _react.useState)(true),
_useState18 = _slicedToArray(_useState17, 2),
isClicked3 = _useState18[0],
setIsClicked3 = _useState18[1];
var closeMobileSidebar3 = function closeMobileSidebar3() {
setIsClicked3(!isClicked3);
};
(0, _react.useEffect)(function () {
var element3 = document.getElementById('settingsSideMenuMobile');
if (window.innerWidth <= 960 && !isClicked3 === false) {
_reactDom["default"].findDOMNode(element3).classList.add('side-menu', 'side-menu-show');
_reactDom["default"].findDOMNode(element3).classList.remove('side-menu-hide');
if (_reactDom["default"].findDOMNode(element3).classList.contains('side-menu-show')) {
_reactDom["default"].findDOMNode(element3).classList.add('side-menu-show', 'side-menu-proxy');
}
} else if (window.innerWidth <= 960 && !isClicked3 === true) {
_reactDom["default"].findDOMNode(element3).classList.remove('side-menu-show');
if (_reactDom["default"].findDOMNode(element3).classList.contains('side-menu-hide')) {
_reactDom["default"].findDOMNode(element3).classList.remove('side-menu-hide');
_reactDom["default"].findDOMNode(element3).classList.add('side-menu-show', 'side-menu-proxy');
} else {
_reactDom["default"].findDOMNode(element3).classList.remove('side-menu', 'side-menu-show');
_reactDom["default"].findDOMNode(element3).classList.add('side-menu', 'side-menu-hide');
}
}
}, [isClicked3]);
var headerBody = '';
var unsecureHeader = /*#__PURE__*/_react["default"].createElement("div", null);
var secureHeader = /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, profile ? /*#__PURE__*/_react["default"].createElement(_core.Grid, {
container: true,
direction: "row",
className: "profile_box_container"
}, /*#__PURE__*/_react["default"].createElement(_core.Grid, {
item: true,
xs: 12,
className: "profile_box_row"
}, /*#__PURE__*/_react["default"].createElement(_core.Grid, {
container: true,
direction: "row",
justify: "center",
alignItems: "center",
className: "profile_box_inner"
}, /*#__PURE__*/_react["default"].createElement(_core.Grid, {
item: true,
xs: 3
}, /*#__PURE__*/_react["default"].createElement(_core.Avatar, {
alt: "Gopal",
src: "./assets/images/1.jpg"
})), /*#__PURE__*/_react["default"].createElement(_core.Grid, {
item: true,
xs: 9
}, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
variant: "h6"
}, "Miracy"), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
variant: "body2",
gutterBottom: true
}, /*#__PURE__*/_react["default"].createElement(_Business["default"], null), " ZKTeco"))), /*#__PURE__*/_react["default"].createElement(_core.Grid, {
container: true,
direction: "row"
}, /*#__PURE__*/_react["default"].createElement(_core.Grid, {
item: true,
xs: 12
}, /*#__PURE__*/_react["default"].createElement(_core.List, {
component: "nav",
"aria-labelledby": "nested-list-subheader"
}, /*#__PURE__*/_react["default"].createElement(_core.ListItem, {
button: true,
onClick: handleClick1
}, /*#__PURE__*/_react["default"].createElement(_core.ListItemIcon, {
style: {
minWidth: '0'
}
}, /*#__PURE__*/_react["default"].createElement(_Person["default"], {
style: {
fontSize: '20px',
fill: '#36c96d'
}
})), /*#__PURE__*/_react["default"].createElement(_core.ListItemText, {
className: "list-item-text",
primary: "Personal Information",
style: {
margin: '4px 8px'
}
}), open1 ? /*#__PURE__*/_react["default"].createElement(_ExpandLess["default"], {
style: {
fill: '#36c96d'
}
}) : /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], {
style: {
fill: '#36c96d'
}
})), /*#__PURE__*/_react["default"].createElement(_core.ListItem, {
button: true,
onClick: handleClick2
}, /*#__PURE__*/_react["default"].createElement(_core.ListItemIcon, {
style: {
minWidth: '0'
}
}, /*#__PURE__*/_react["default"].createElement(_Stars["default"], {
style: {
fontSize: '20px',
fill: '#36c96d'
}
})), /*#__PURE__*/_react["default"].createElement(_core.ListItemText, {
className: "list-item-text",
primary: "Member Center",
style: {
margin: '4px 8px'
}
}), open2 ? /*#__PURE__*/_react["default"].createElement(_ExpandLess["default"], {
style: {
fill: '#36c96d'
}
}) : /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], {
style: {
fill: '#36c96d'
}
})), /*#__PURE__*/_react["default"].createElement(_core.ListItem, {
button: true,
onClick: handleClick3
}, /*#__PURE__*/_react["default"].createElement(_core.ListItemIcon, {
style: {
minWidth: '0'
}
}, /*#__PURE__*/_react["default"].createElement(_LaptopWindows["default"], {
style: {
fontSize: '20px',
fill: '#36c96d'
}
})), /*#__PURE__*/_react["default"].createElement(_core.ListItemText, {
className: "list-item-text",
primary: "Service Provider Platform",
style: {
margin: '4px 8px'
}
}), open3 ? /*#__PURE__*/_react["default"].createElement(_ExpandLess["default"], {
style: {
fill: '#36c96d'
}
}) : /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], {
style: {
fill: '#36c96d'
}
}))), /*#__PURE__*/_react["default"].createElement(_core.Divider, null), /*#__PURE__*/_react["default"].createElement(_core.List, {
component: "nav",
"aria-labelledby": "nested-list-subheader"
}, /*#__PURE__*/_react["default"].createElement(_core.ListItem, {
button: true,
onClick: handleClick4
}, /*#__PURE__*/_react["default"].createElement(_core.ListItemIcon, {
style: {
minWidth: '0'
}
}, /*#__PURE__*/_react["default"].createElement(_Business["default"], {
style: {
fontSize: '20px',
fill: '#36c96d'
}
})), /*#__PURE__*/_react["default"].createElement(_core.ListItemText, {
className: "list-item-text",
primary: "Switch Company",
style: {
margin: '4px 8px'
}
}), open4 ? /*#__PURE__*/_react["default"].createElement(_ExpandLess["default"], {
style: {
fill: '#36c96d'
}
}) : /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], {
style: {
fill: '#36c96d'
}
})), /*#__PURE__*/_react["default"].createElement(_core.ListItem, {
button: true,
onClick: handleClick5
}, /*#__PURE__*/_react["default"].createElement(_core.ListItemIcon, {
style: {
minWidth: '0'
}
}, /*#__PURE__*/_react["default"].createElement(_Public["default"], {
style: {
fontSize: '20px',
fill: '#36c96d'
}
})), /*#__PURE__*/_react["default"].createElement(_core.ListItemText, {
className: "list-item-text",
primary: "Switch Language",
style: {
margin: '4px 8px'
}
}), open5 ? /*#__PURE__*/_react["default"].createElement(_ExpandLess["default"], {
style: {
fill: '#36c96d'
}
}) : /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], {
style: {
fill: '#36c96d'
}
}))), /*#__PURE__*/_react["default"].createElement(_core.Divider, null), /*#__PURE__*/_react["default"].createElement(_core.List, {
component: "nav",
"aria-labelledby": "nested-list-subheader"
}, /*#__PURE__*/_react["default"].createElement(_core.ListItem, {
button: true,
component: "a",
href: "/"
}, /*#__PURE__*/_react["default"].createElement(_core.ListItemIcon, {
style: {
minWidth: '0'
}
}, /*#__PURE__*/_react["default"].createElement(_ExitToApp["default"], {
style: {
fontSize: '20px',
fill: '#36c96d'
}
})), /*#__PURE__*/_react["default"].createElement(_core.ListItemText, {
className: "list-item-text",
primary: "Log Out",
style: {
margin: '4px 8px'
}
}))))))) : null, /*#__PURE__*/_react["default"].createElement("div", {
className: "side-bar"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "profile"
}, /*#__PURE__*/_react["default"].createElement(_core.Link, {
href: "#",
onClick: function onClick() {
return setProfile(!profile);
}
}, /*#__PURE__*/_react["default"].createElement(_core.Avatar, {
alt: "Gopal",
src: "#",
style: {
border: '2px solid #fff'
}
}))), /*#__PURE__*/_react["default"].createElement("div", {
className: "side-bar-items__block"
}, /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement(_core.Tooltip, {
arrow: true,
disableFocusListener: true,
TransitionComponent: _core.Fade,
TransitionProps: {
timeout: 500
},
title: "Messages",
placement: "right"
}, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, {
exact: true,
activeClassName: "active",
to: "/im/chatmessage",
onClick: closeMobileSidebar1
}, /*#__PURE__*/_react["default"].createElement(_Sms["default"], null)))), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement(_core.Tooltip, {
arrow: true,
disableFocusListener: true,
TransitionComponent: _core.Fade,
TransitionProps: {
timeout: 500
},
title: "Video Conference",
placement: "right"
}, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, {
exact: true,
activeClassName: "active",
to: "/im/videoconference"
}, /*#__PURE__*/_react["default"].createElement(_VideoCall["default"], null)))), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement(_core.Tooltip, {
arrow: true,
disableFocusListener: true,
TransitionComponent: _core.Fade,
TransitionProps: {
timeout: 500
},
title: "Contacts",
placement: "right"
}, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, {
exact: true,
activeClassName: "active",
to: "/im/contacts",
onClick: closeMobileSidebar2
}, /*#__PURE__*/_react["default"].createElement(_Contacts["default"], null)))), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement(_core.Tooltip, {
arrow: true,
disableFocusListener: true,
TransitionComponent: _core.Fade,
TransitionProps: {
timeout: 500
},
title: "Workbench",
placement: "right"
}, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, {
exact: true,
activeClassName: "active",
to: "/im/workbench"
}, /*#__PURE__*/_react["default"].createElement(_Dashboard["default"], null)))), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement(_core.Tooltip, {
arrow: true,
disableFocusListener: true,
TransitionComponent: _core.Fade,
TransitionProps: {
timeout: 500
},
title: "Settings",
placement: "right"
}, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, {
exact: true,
activeClassName: "active",
to: "/im/settings",
onClick: closeMobileSidebar3
}, /*#__PURE__*/_react["default"].createElement(_Settings["default"], null))))))));
if (validToken && user) {
headerBody = secureHeader;
} else {
headerBody = unsecureHeader;
}
return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, headerBody);
}
SideBar.propTypes = {
fixed: true,
absolute: _propTypes["default"].bool,
//logout: PropTypes.func.isRequired,
security: _propTypes["default"].object.isRequired
};
var mapStateToProps = function mapStateToProps(state) {
return {
security: state.security
};
}; //export default connect(mapStateToProps, { logout })(SideBar)
var _default = (0, _reactRedux.connect)(mapStateToProps)(SideBar);
exports["default"] = _default;