@wulperstudio/cms/node/organisms/DrawerCreateChat/DrawerCreateChat.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DrawerCreateChat = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _Drawer = require("../Drawer");
var _TextFieldV5LabelOut = require("../../components/TextFieldV5LabelOut");
var _AutocompleteCreate = require("./components/AutocompleteCreate");
var _jsxRuntime = require("react/jsx-runtime");
var DrawerCreateChat = exports.DrawerCreateChat = function DrawerCreateChat(props) {
  var _React$useState = _react["default"].useState(''),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    group = _React$useState2[0],
    setGroup = _React$useState2[1];
  var _React$useState3 = _react["default"].useState([]),
    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
    members = _React$useState4[0],
    setMembers = _React$useState4[1];
  var _React$useState5 = _react["default"].useState(false),
    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
    req = _React$useState6[0],
    setReq = _React$useState6[1];
  var handleInputChange = function handleInputChange(e) {
    setGroup(e.target.value);
  };
  _react["default"].useEffect(function () {
    if (req) {
      setMembers([]);
      setGroup('');
    }
  }, [req]);
  var handleSubmit = function handleSubmit() {
    // eslint-disable-next-line no-unused-expressions
    props.data && props.data({
      members: members,
      group: group
    });
    var timer = setTimeout(function () {
      // eslint-disable-next-line no-unused-expressions
      props.onCloseDrawer && props.onCloseDrawer();
    }, 1000);
    setReq(true);
    return function () {
      return clearTimeout(timer);
    };
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Drawer.Drawer, {
    moreInfo: props.drawerGroup ? 'float' : 'none',
    background: "#fff",
    hideBackIcon: true,
    hideTabs: true,
    showButton: true,
    titleHeaderDrawer: "Create",
    textButton: "Create group",
    onClickButton: function onClickButton() {
      return handleSubmit();
    },
    onClose: function onClose() {
      return props.onCloseDrawer && props.onCloseDrawer();
    },
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextFieldV5LabelOut.TextFieldV5LabelOut, {
      label: "Group name",
      id: "group",
      placeholder: "group name",
      name: "group",
      value: group,
      onChange: handleInputChange
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AutocompleteCreate.AutocompleteCreate, {
      label: "Add members",
      id: "members",
      showBorder: false,
      backgroundColor: true,
      borderColor: "#fff",
      showDivider: true,
      value: members,
      data: props.members,
      onChangeAutocomplete: function onChangeAutocomplete(data) {
        return setMembers(data);
      },
      textFieldProps: {
        placeholder: 'add members'
      },
      autocompleteProps: props.autocompleteProps
    })]
  });
};