quickblox-react-ui-kit 0.1.0 → 0.1.2

package/src/Presentation/components/UI/Dialogs/InviteMembers/InviteMembers.tsx

@@ -1,374 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import './InviteMembers.scss';
-import ColumnContainer from '../../../containers/ColumnContainer/ColumnContainer';
-import RowRightContainer from '../../../containers/RowRightContainer/RowRightContainer';
-import MainButton, { TypeButton } from '../../Buttons/MainButton/MainButton';
-import Search from '../../svgs/Icons/Navigation/Search';
-import LoaderComponent from '../../Placeholders/LoaderComponent/LoaderComponent';
-import ErrorComponent from '../../Placeholders/ErrorComponent/ErrorComponent';
-import { InviteMembersViewModel } from './InviteMembersViewModel';
-import useInviteMembersViewModel from './useInviteMembersViewModel';
-import { Pagination } from '../../../../../Domain/repository/Pagination';
-import ScrollableContainer from '../../../containers/ScrollableContainer/ScrollableContainer';
-import { UserEntity } from '../../../../../Domain/entity/UserEntity';
-import SingleUserWithCheckBox from './InviteUsersList/SingleUserWithCheckBox/SingleUserWithCheckBox';
-import { FunctionTypeVoidToVoid } from '../../../../Views/Base/BaseViewModel';
-import { DialogType } from '../../../../../Domain/entity/DialogTypes';
-import NotFoundContent from './NotFoundContent/NotFoundContent';
-import Remove from '../../svgs/Icons/Actions/Remove';
-
-type SelectedItemInfo = { isChecked: boolean; userid: number };
-
-export type FunctionTypeUserEntitiesToVoid = (
-  userIdsForInvite: number[],
-  usersIdsForRemove: number[],
-) => void;
-
-type InviteMembersProps = {
-  // inviteUsersViewModel: InviteUsersResultViewModel;
-  typeDialog: DialogType;
-  idOwnerDialog: string;
-  applyInviteUsersHandler: FunctionTypeUserEntitiesToVoid;
-  participants?: number[];
-  cancelInviteMembersHandler?: FunctionTypeVoidToVoid;
-};
-// eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
-const InviteMembers: React.FC<InviteMembersProps> = ({
-  // inviteUsersViewModel, [participants]
-  typeDialog,
-  idOwnerDialog,
-  applyInviteUsersHandler,
-  participants,
-  cancelInviteMembersHandler,
-}) => {
-  const userperPage = 12;
-  const userViewModel: InviteMembersViewModel = useInviteMembersViewModel();
-  // const usersResultViewModel: InviteUsersResultViewModel =
-  //   new InviteUsersResultViewModel(userViewModel.users, []);
-
-  // const [usersSelected, setUsersSelected] = React.useState<number>([]);
-  const initRecord: Record<number, SelectedItemInfo> = {};
-
-  if (participants?.length && participants?.length > 0) {
-    console.log(
-      'InviteMembers : init participants: ',
-      JSON.stringify(participants),
-    );
-    participants.forEach((item) => {
-      initRecord[item] = { isChecked: true, userid: item };
-    });
-  }
-
-  const [selectedItems, setSelectedItems] =
-    React.useState<Record<number, SelectedItemInfo>>(initRecord);
-  const [countSelectedItems, setCountSelected] = React.useState(
-    participants ? participants?.length : 0,
-  );
-
-  useEffect(() => {
-    userViewModel.getUsers(new Pagination(0, userperPage));
-    console.log('useEffect InviteMembers, getUsers()');
-  }, []);
-
-  const getUsersForIncludeInDialog = () => {
-    const listSelectedUsers: number[] = [];
-
-    Object.entries(selectedItems).map((x) => {
-      if (x[1].isChecked) {
-        listSelectedUsers.push(x[1].userid);
-      }
-
-      return x[1].isChecked;
-    });
-
-    return listSelectedUsers;
-  };
-
-  const getUsersForExcludedFromDialog = () => {
-    const listExcludedUsers: number[] = [];
-
-    Object.entries(selectedItems).map((x) => {
-      if (!x[1].isChecked) {
-        listExcludedUsers.push(x[1].userid);
-      }
-
-      return x[1].isChecked;
-    });
-
-    return listExcludedUsers;
-  };
-
-  const userSelectedHandler = (item: UserEntity, checkedStatus: boolean) => {
-    console.log('call userSelectedHandler: ', item.id);
-    const newItems = selectedItems;
-
-    newItems[item.id] = { isChecked: checkedStatus, userid: item.id };
-    console.log('newItems: ', JSON.stringify(newItems));
-    setSelectedItems(newItems);
-    const countCheckedUsers = getUsersForIncludeInDialog().length;
-
-    setCountSelected(countCheckedUsers);
-  };
-
-  const containsSelectedUser = (id: number) => {
-    let result = false;
-
-    // Object.entries(selectedItems).map((x) => {
-    //   if (x[1].userid === id) {
-    //     result = true;
-    //   }
-    //
-    //   return x;
-    // });
-
-    const r = Object.entries(selectedItems).findIndex(
-      (x) => x[1].userid === id && x[1].isChecked,
-    );
-
-    if (r >= 0) {
-      result = true;
-    }
-
-    return result;
-  };
-
-  const getDisabledStatus = (user: UserEntity) => {
-    if (user.id.toString() === idOwnerDialog) {
-      return true;
-    }
-    if (
-      typeDialog === DialogType.private &&
-      getUsersForIncludeInDialog().length >= 1 &&
-      !containsSelectedUser(user.id)
-    ) {
-      return true;
-    }
-
-    return false;
-  };
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const renderUserComponent = (user: UserEntity, index: number) => {
-    const checkedValue = selectedItems[user.id]?.isChecked || false;
-    // const flrt = participants?.filter((item) => item === user.id);
-    //
-    // if (flrt && flrt?.length > 0) {
-    //   console.log('All participants: ', JSON.stringify(participants));
-    //   console.log(
-    //     `have for participant ${user.id}
-    //     status ${checkedValue ? 'checked' : 'unchecked'} in ${JSON.stringify(
-    //       selectedItems[user.id],
-    //     )}`,
-    //   );
-    // }
-
-    return (
-      <SingleUserWithCheckBox
-        user={user}
-        checkedHandler={userSelectedHandler}
-        isElementChecked={checkedValue}
-        keyValue={user.id}
-        isDisabled={getDisabledStatus(user)}
-      />
-    );
-  };
-
-  const fetchMoreData = () => {
-    console.log('call user fetchMoreData');
-    console.log(
-      'before pagination: ',
-      JSON.stringify(userViewModel.pagination),
-    );
-    if (userViewModel.pagination.hasNextPage()) {
-      const newPagination = userViewModel.pagination;
-
-      newPagination.perPage = 12;
-      newPagination.nextPage();
-
-      console.log(
-        'after pagination: ',
-        JSON.stringify(userViewModel.pagination),
-      );
-      userViewModel.getUsers(newPagination);
-    }
-  };
-
-  const [userNameForFilter, setUserNameForFilter] = useState<string>('');
-
-  useEffect(() => {
-    if (userNameForFilter.length > 2) {
-      const newFilter: string = userNameForFilter;
-
-      userViewModel.updateFilter(newFilter);
-    }
-    if (userNameForFilter.length === 0) {
-      userViewModel.updateFilter('');
-    }
-  }, [userNameForFilter]);
-
-  useEffect(() => {
-    if (userNameForFilter.length > 2) {
-      userViewModel.getUsers(new Pagination(0, userperPage));
-    }
-    if (userNameForFilter.length === 0) {
-      userViewModel.getUsers(new Pagination(0, userperPage));
-    }
-  }, [userViewModel.filter]);
-
-  return (
-    <ColumnContainer gapBetweenItem="8px">
-      <div className="container-invite-members">
-        <div className="container-invite-members--add-members-container">
-          <div className="container-invite-members--add-members-container--wrapper">
-            <div className="container-invite-members--add-members-container--wrapper__dialog-name-input">
-              <Search
-                applyZoom
-                width="24"
-                height="24"
-                color="var(--tertiary-elements)"
-              />
-              <input
-                type="text"
-                style={{ width: '268px' }}
-                value={userNameForFilter}
-                onChange={(event) => {
-                  setUserNameForFilter(event.target.value);
-                }}
-                placeholder="Search"
-              />
-              {userNameForFilter.length > 0 ? (
-                <div
-                  style={{ cursor: 'pointer' }}
-                  onClick={() => {
-                    setUserNameForFilter('');
-                  }}
-                >
-                  <Remove
-                    width="24"
-                    height="24"
-                    color="var(--tertiary-elements)"
-                  />
-                </div>
-              ) : null}
-            </div>
-            <div className="container-invite-members--add-members-container--wrapper__inf">
-              {countSelectedItems} selected
-            </div>
-            <div className="container-invite-members--add-members-container--wrapper__members">
-              <ColumnContainer>
-                {userViewModel?.loading && (
-                  <div
-                    style={{
-                      height: '44px',
-                      width: '44px',
-                    }}
-                  >
-                    <LoaderComponent width="44" height="44" />
-                  </div>
-                )}
-                {userViewModel?.error && (
-                  <ErrorComponent
-                    title={userViewModel?.error}
-                    ClickActionHandler={() => {
-                      alert('call click retry');
-                    }}
-                  />
-                )}
-                {userViewModel.users && userViewModel.users.length > 0 ? (
-                  <ScrollableContainer
-                    data={userViewModel.users}
-                    renderItem={renderUserComponent}
-                    onEndReached={fetchMoreData}
-                    onEndReachedThreshold={0.8}
-                    refreshing={false}
-                  />
-                ) : (
-                  <div className="container-invite-members--add-members-container--wrapper__members__empty-members">
-                    <NotFoundContent message="There are no members" />
-                  </div>
-                )}
-              </ColumnContainer>
-            </div>
-          </div>
-          <div className="container-invite-members--btn-container">
-            <RowRightContainer
-              minHeightContainer="32px"
-              gapBetweenItem="8px"
-              RightContainerSize={{
-                flexBasis: '63px',
-                minWidth: '63px',
-                maxWidth: '63px',
-                minHeight: '32px',
-                maxHeight: '32px',
-              }}
-              RightItem={
-                <div>
-                  <MainButton
-                    title="Create"
-                    typeButton={TypeButton.default}
-                    disabled={
-                      typeDialog === DialogType.private &&
-                      getUsersForIncludeInDialog().length <= 0
-                    }
-                    clickHandler={
-                      () => {
-                        const listUsersForInvite: number[] =
-                          getUsersForIncludeInDialog();
-                        const listUsersForRemove: number[] =
-                          getUsersForExcludedFromDialog();
-
-                        if (applyInviteUsersHandler) {
-                          applyInviteUsersHandler(
-                            listUsersForInvite,
-                            listUsersForRemove,
-                          );
-                        }
-                      }
-                      // {
-                      //   const listSelectedUsers: number[] = [];
-                      //
-                      //   Object.entries(selectedItems).map((x) => {
-                      //     if (x[1].isChecked) {
-                      //       listSelectedUsers.push(x[1].userid);
-                      //     }
-                      //
-                      //     return x[1].isChecked;
-                      //   });
-                      //
-                      //   if (applyInviteUsersHandler) {
-                      //     applyInviteUsersHandler(listSelectedUsers);
-                      //   }
-                      // }
-                    }
-                  />
-                </div>
-              }
-              CenterContainerSize={{
-                flexBasis: '78px',
-                minWidth: '78px',
-                maxWidth: '78px',
-                minHeight: '32px',
-                maxHeight: '32px',
-              }}
-              CenterItem={
-                <div>
-                  <MainButton
-                    title="Cancel"
-                    typeButton={TypeButton.outlined}
-                    clickHandler={() => {
-                      if (cancelInviteMembersHandler) {
-                        cancelInviteMembersHandler();
-                      }
-                    }}
-                  />
-                </div>
-              }
-            />
-          </div>
-        </div>
-      </div>
-    </ColumnContainer>
-  );
-};
-
-export default InviteMembers;

package/src/Presentation/components/UI/Dialogs/InviteMembers/InviteMembersViewModel.ts

@@ -1,18 +0,0 @@
-import BaseViewModel, {
-  FunctionTypePaginationToVoid,
-  FunctionTypeStringToVoid,
-  FunctionTypeVoidToVoid,
-} from '../../../../Views/Base/BaseViewModel';
-import { Pagination } from '../../../../../Domain/repository/Pagination';
-import { UserEntity } from '../../../../../Domain/entity/UserEntity';
-
-export interface InviteMembersViewModel extends BaseViewModel<UserEntity> {
-  loading: boolean;
-  error: string;
-  pagination: Pagination;
-  users: UserEntity[]; // content,
-  filter: string;
-  getUsers: FunctionTypePaginationToVoid; // prepareContent
-  release: FunctionTypeVoidToVoid; // release Content,
-  updateFilter: FunctionTypeStringToVoid;
-}

package/src/Presentation/components/UI/Dialogs/InviteMembers/InviteUsersList/SingleUserWithCheckBox/SingleUserWithCheckBox.scss

@@ -1,113 +0,0 @@
-$user-single-container-height: 336px;
-.user-single-container-chbox {
-  min-height: $user-single-container-height;
-  max-height: $user-single-container-height;
-  height: $user-single-container-height;
-  //border: 1px solid green;
-
-  &--search-wrapper{
-    min-height: 56px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 16px;
-
-    //border: 1px solid blue;
-
-    &__search-text{
-      min-height: 24px;
-      // margin: 16px 16px 16px 16px;
-      font-family: 'Roboto';
-      font-style: normal;
-      font-weight: 400;
-      font-size: 16px;
-      line-height: 24px;
-      letter-spacing: 0.15px;
-      flex: 2 2 268px;
-      letter-spacing: 0.15px;
-
-      //border: 1px solid orange;
-    }
-    &__search-icon{
-      min-height: 24px;
-      margin-left: 10px;
-      flex: 1 1 24px;
-      cursor: pointer;
-
-      //border: 1px solid red;
-    }
-  }
-
-  &--wrapper {
-    min-height: 56px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 16px;
-
-    border-bottom: 1px solid var(--color-divider);
-
-    &__username {
-      //min-height: 24px;
-      //min-width: 193px;
-      //max-width: 193px;
-      //// margin: 16px 16px 16px 16px;
-      //font-family: 'Roboto';
-      //font-style: normal;
-      //font-weight: 400;
-      //font-size: 16px;
-      //line-height: 24px;
-      //letter-spacing: 0.15px;
-      //flex: 2 2 268px;
-      //letter-spacing: 0.15px;
-
-      width: 193px;
-      height: 24px;
-      font-family: 'Roboto';
-      font-style: normal;
-      font-weight: 400;
-      font-size: 16px;
-      line-height: 24px;
-
-      display: flex;
-      align-items: center;
-      letter-spacing: 0.15px;
-      color: var(--main-text);
-
-     // border: 1px solid orange;
-    }
-    &__select {
-      min-height: 24px;
-      min-width: 24px;
-      max-width: 24px;
-    }
-
-    &__icon {
-      min-height: 40px;
-      min-width: 40px;
-      max-height: 40px;
-      max-width: 40px;
-      margin-left: 16px;
-      margin-top: 8px;
-      margin-bottom: 8px;
-      // flex: 1 1 24px;
-      display: flex;
-      //cursor: pointer;
-      background-color: var(--disabled-elements);
-      border-radius: 50%;
-      align-items: center;
-      text-align: center;
-      align-content: center;
-
-     // border: 1px solid red;
-
-      &__content {
-        margin: 6px;
-      }
-    }
-  }
-}

package/src/Presentation/components/UI/Dialogs/InviteMembers/InviteUsersList/SingleUserWithCheckBox/SingleUserWithCheckBox.tsx

@@ -1,87 +0,0 @@
-import React from 'react';
-import './SingleUserWithCheckBox.scss';
-import { UserEntity } from '../../../../../../../Domain/entity/UserEntity';
-import ActiveSvg from '../../../../svgs/ActiveSvg/ActiveSvg';
-import User from '../../../../svgs/Icons/Contents/User';
-
-export type FunctionTypeUserEntityToVoid = (
-  item: UserEntity,
-  checkedStatus: boolean,
-) => void;
-
-type SingleUserWithCheckBoxProps = {
-  user: UserEntity;
-  isElementChecked: boolean;
-  isDisabled: boolean;
-  checkedHandler: FunctionTypeUserEntityToVoid;
-  keyValue?: number;
-};
-// eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
-const SingleUserWithCheckBox: React.FC<SingleUserWithCheckBoxProps> = ({
-  user,
-  checkedHandler,
-  isElementChecked,
-  keyValue,
-  isDisabled = false,
-}) => {
-  // const [isUserChecked, setIsUserChecked] =
-  //   React.useState<boolean>(isElementChecked);
-
-  function getChecked(index: number | undefined) {
-    const result = isElementChecked; // || isUserChecked;
-
-    console.log(index);
-
-    return result;
-  }
-
-  return (
-    <div key={keyValue} className="user-single-container-chbox--wrapper">
-      <div className="user-single-container-chbox--wrapper__icon">
-        <ActiveSvg
-          content={
-            <div className="user-single-container-chbox--wrapper__icon__content">
-              <User
-                width="26"
-                height="26"
-                applyZoom
-                color="var(--tertiary-elements)"
-              />
-            </div>
-          }
-          clickAction={() => {
-            console.log('user click...');
-          }}
-          touchAction={() => {
-            console.log('user touch...');
-          }}
-        />
-      </div>
-      <div className="user-single-container-chbox--wrapper__username">
-        {`${user?.full_name || user?.login || user?.email || user?.id} - ${
-          user?.id
-        }`}
-        {/* {`${user?.full_name} - ${user?.id} - ${ */}
-        {/*  isElementChecked ? 'true' : 'false' */}
-        {/* }`} */}
-      </div>
-      <div className="user-single-container-chbox--wrapper__select">
-        <input
-          type="checkbox"
-          checked={getChecked(keyValue)}
-          disabled={isDisabled}
-          onChange={() => {
-            console.log('have check in SingleUserWithCheckBox');
-            const newStatus = !isElementChecked;
-
-            if (checkedHandler) {
-              checkedHandler(user, newStatus);
-            }
-          }}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default SingleUserWithCheckBox;

package/src/Presentation/components/UI/Dialogs/InviteMembers/InviteUsersResultViewModel.ts

@@ -1,12 +0,0 @@
-import { UserEntity } from '../../../../../Domain/entity/UserEntity';
-
-export default class InviteUsersResultViewModel {
-  public users: UserEntity[];
-
-  public status: boolean[];
-
-  constructor(users: UserEntity[] = [], status: boolean[] = []) {
-    this.users = users;
-    this.status = status;
-  }
-}

package/src/Presentation/components/UI/Dialogs/InviteMembers/NotFoundContent/NotFoundContent.scss

@@ -1,37 +0,0 @@
-.not-found-content-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0px;
-  gap: 16px;
-
-  width: 332px;
-  height: 100px;
-
-  background: var(--main-background);
-
-  &__icon {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    padding: 4px;
-
-    width: 60px;
-    height: 60px;
-  }
-
-  &__message {
-    width: 164px;
-    height: 24px;
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-
-    text-align: center;
-    letter-spacing: 0.15px;
-    color: var(--caption);
-  }
-}

package/src/Presentation/components/UI/Dialogs/InviteMembers/NotFoundContent/NotFoundContent.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import './NotFoundContent.scss';
-import GroupChat from '../../../svgs/Icons/Contents/GroupChat';
-
-type NotFoundContentProps = {
-  message: string;
-};
-// eslint-disable-next-line react/function-component-definition
-const NotFoundContent: React.FC<NotFoundContentProps> = ({
-  message,
-}: NotFoundContentProps) => {
-  return (
-    <div className="not-found-content-container">
-      <div className="not-found-content-container__icon">
-        <GroupChat width="52" height="52" color="var(--caption)" />
-      </div>
-      <div className="not-found-content-container__message">{message}</div>
-    </div>
-  );
-};
-
-export default NotFoundContent;