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

React js components

"use strict";

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

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

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

var _InputBase = _interopRequireDefault(require("@material-ui/core/InputBase"));

var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));

var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));

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

//import AddBoxOutlinedIcon from '@material-ui/icons/AddBoxOutlined';
var useStyles = (0, _styles.makeStyles)(function () {
  return {
    root: {
      backgroundColor: 'rgba(0, 0, 0, .04)',
      borderRadius: 40,
      width: '100%'
    },
    input: {
      boxSizing: 'border-box',
      minHeight: 36
    },
    icon: {
      color: 'rgb(0, 153, 255)',
      width: 35,
      height: 35
    }
  };
});
var useAdornStyles = (0, _styles.makeStyles)(function () {
  return {
    root: {
      paddingLeft: 12,
      '& svg': {
        color: 'rgba(0,0,0,0.38)'
      }
    }
  };
});

var MessengerSearch = function MessengerSearch() {
  var styles = useStyles();
  var adornStyles = useAdornStyles();
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_InputBase["default"], {
    classes: styles,
    startAdornment: /*#__PURE__*/_react["default"].createElement(_InputAdornment["default"], {
      position: 'start',
      classes: adornStyles
    }, /*#__PURE__*/_react["default"].createElement(_Search["default"], null)),
    placeholder: 'Search Messenger'
  }));
};

var _default = MessengerSearch;
/*
import React from 'react';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import Grow from '@material-ui/core/Grow';
import Paper from '@material-ui/core/Paper';
import Popper from '@material-ui/core/Popper';
import MenuItem from '@material-ui/core/MenuItem';
import MenuList from '@material-ui/core/MenuList';
import { makeStyles } from '@material-ui/core/styles';
import InputBase from '@material-ui/core/InputBase';
import InputAdornment from '@material-ui/core/InputAdornment';
import Search from '@material-ui/icons/Search';
import PropTypes from "prop-types";

const useStyles = makeStyles(() => ({
  root: {
    backgroundColor: 'rgba(0, 0, 0, .04)',
    borderRadius: 40,
    width: '100%'
  },
  input: {
    boxSizing: 'border-box',
    minHeight: 36
  },
  icon: {
    color: 'rgb(0, 153, 255)',
    width: 35,
    height: 35,
  },
}));

const useAdornStyles = makeStyles(() => ({
  root: {
    paddingLeft: 12,
    '& svg': {
      color: 'rgba(0,0,0,0.38)',
    },
  },
}));

const MessengerSearch = ({getContactSuggestions,queryAction}) => {
  const styles = useStyles();
  const adornStyles = useAdornStyles();
  const [open, setOpen] = React.useState(false);
  const anchorRef = React.useRef(null);
  const [list, setList] = React.useState(["one","two","three"]);

  const handleToggle = (search) => {
    setOpen((prevOpen) => true);
    const queryData = getContactSuggestions(search);
    setList(queryData);
  };

  const handleClose = (event,data) => {
    if (anchorRef.current && anchorRef.current.contains(event.target)) {
      return;
    }

    setOpen(false);
    if(data)
      queryAction(data);
  };

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

  const prevOpen = React.useRef(open);
  React.useEffect(() => {
    if (prevOpen.current === true && open === false) {
      anchorRef.current.focus();
    }

    prevOpen.current = open;
  }, [open]);

  const menuList = list.map((item,index) => (
    <MenuItem onClick={(event) => handleClose(event,item)}>{item ? item.title : ''}</MenuItem>
  ));

  return (
    <>
    <InputBase
      autoFocus
      classes={styles}
      startAdornment={
        <InputAdornment position={'start'} classes={adornStyles}>
          <Search />
        </InputAdornment>
      }
      placeholder={'Search Messenger'}
      onChange={e => {
        handleToggle(e.target.value);
      }}
      ref={anchorRef}
    />
    <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal style={{zIndex:'999',width:"80%",margin:"10px"}}>
      {({ TransitionProps, placement }) => (
        <Grow
          {...TransitionProps}
          style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
        >
          <Paper>
            <ClickAwayListener onClickAway={handleClose}>
              <MenuList id="menu-list-grow" onKeyDown={handleListKeyDown}>
                {menuList}
              </MenuList>
            </ClickAwayListener>
          </Paper>
        </Grow>
      )}
    </Popper>
    </>
  );
};

MessengerSearch.defaultProps = {
  getContactSuggestions: () => console.log(""),
  queryAction: () => console.log("")
}

MessengerSearch.propTypes = {
  getContactSuggestions: PropTypes.func,
  queryAction: PropTypes.func
};

export default MessengerSearch;
*/

exports["default"] = _default;