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

Wulper Studio Library Components CMS

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React from 'react';
import { Drawer } from '../Drawer';
import { TextFieldV5LabelOut } from '../../components/TextFieldV5LabelOut';
import { AutocompleteCreate } from './components/AutocompleteCreate';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var DrawerCreateChat = function DrawerCreateChat(props) {
  var _React$useState = React.useState(''),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    group = _React$useState2[0],
    setGroup = _React$useState2[1];
  var _React$useState3 = React.useState([]),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    members = _React$useState4[0],
    setMembers = _React$useState4[1];
  var _React$useState5 = React.useState(false),
    _React$useState6 = _slicedToArray(_React$useState5, 2),
    req = _React$useState6[0],
    setReq = _React$useState6[1];
  var handleInputChange = function handleInputChange(e) {
    setGroup(e.target.value);
  };
  React.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__*/_jsxs(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__*/_jsx(TextFieldV5LabelOut, {
      label: "Group name",
      id: "group",
      placeholder: "group name",
      name: "group",
      value: group,
      onChange: handleInputChange
    }), /*#__PURE__*/_jsx(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
    })]
  });
};