quickblox-react-ui-kit 0.1.0 → 0.1.2

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

@@ -1,262 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import './EditDialog.scss';
-import ColumnContainer from '../../../containers/ColumnContainer/ColumnContainer';
-import User from '../../svgs/Icons/Contents/User';
-import RowRightContainer from '../../../containers/RowRightContainer/RowRightContainer';
-import MainButton, { TypeButton } from '../../Buttons/MainButton/MainButton';
-import {
-  EditDialogParams,
-  FunctionTypeEditDialogParamsToVoid,
-  FunctionTypeVoidToVoid,
-} from '../../../../Views/Base/BaseViewModel';
-import UserAvatar from './UserAvatar/UserAvatar';
-import { DialogType } from '../../../../../Domain/entity/DialogTypes';
-import GroupChat from '../../svgs/Icons/Contents/GroupChat';
-import PublicChannel from '../../svgs/Icons/Contents/PublicChannel';
-// import { QBCreateAndUploadContent } from '../../../../../qb-api-calls';
-
-export const TypeOpenDialog = {
-  edit: 'edit',
-  create: 'create',
-} as const;
-
-export type OpenDialogArcheType = keyof typeof TypeOpenDialog;
-
-type EditDialogProps = {
-  nameDialog: string;
-  typeDialog: DialogType;
-  ulrIcon?: string;
-  typeAddEditDialog: OpenDialogArcheType;
-  clickUpdatedHandler?: FunctionTypeEditDialogParamsToVoid;
-  clickCancelHandler?: FunctionTypeVoidToVoid;
-};
-// eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
-const EditDialog: React.FC<EditDialogProps> = ({
-  nameDialog = '',
-  typeDialog,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ulrIcon = '',
-  typeAddEditDialog = TypeOpenDialog.create,
-  clickUpdatedHandler,
-  clickCancelHandler,
-}) => {
-  const minLengthNameDialog = 3;
-  const maxLengthNameDialog = 60;
-  const [dialogName, setDialogName] = useState(nameDialog);
-  const [fileUploadAvatar, setFileUploadAvatar] = useState<File | null>(null);
-  const [urlAvatar, setUrlAvatar] = useState(ulrIcon || '');
-  const [disabledButton, setDisabledButton] = useState<boolean>(
-    nameDialog.length < minLengthNameDialog ||
-      nameDialog.length > maxLengthNameDialog,
-  );
-
-  useEffect(() => {
-    setDisabledButton(
-      dialogName.length < minLengthNameDialog ||
-        dialogName.length > maxLengthNameDialog,
-    );
-  }, [dialogName]);
-
-  const ChangeFileHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const reader = new FileReader();
-    const file = event.currentTarget.files
-      ? event.currentTarget.files[0]
-      : null;
-
-    reader.onloadend = () => {
-      setFileUploadAvatar(file);
-      setUrlAvatar(reader.result ? (reader.result as string) : '');
-    };
-
-    if (file !== null) reader.readAsDataURL(file);
-
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const imgUrl = urlAvatar; // event.currentTarget.files[0].name;
-
-    // TODO: upload file to server
-    console.log('imgUrl :', imgUrl);
-  };
-
-  // eslint-disable-next-line consistent-return
-  const renderAvatar = () => {
-    if (urlAvatar.length < 1 || urlAvatar === 'null') {
-      switch (typeDialog) {
-        case DialogType.private:
-          return (
-            <User
-              width="36"
-              height="36"
-              applyZoom
-              color="var(--secondary-text)"
-            />
-          );
-          break;
-        case DialogType.group:
-          return (
-            <GroupChat
-              width="36"
-              height="36"
-              applyZoom
-              color="var(--secondary-text)"
-            />
-          );
-          break;
-        case DialogType.public:
-          return (
-            <PublicChannel
-              width="36"
-              height="36"
-              applyZoom
-              color="var(--secondary-text)"
-            />
-          );
-          break;
-        default:
-          return (
-            <User
-              width="36"
-              height="36"
-              applyZoom
-              color="var(--secondary-text)"
-            />
-          );
-      }
-    } else {
-      return (
-        <UserAvatar
-          urlAvatar={urlAvatar}
-          clickRemoveAvatarHandler={() => setUrlAvatar('null')}
-        />
-      );
-    }
-  };
-
-  return (
-    <ColumnContainer gapBetweenItem="8px">
-      <div
-        style={{
-          // maxHeight: '236px',
-          // maxWidth: '380px',
-          backgroundColor: 'var(--main-background)',
-        }}
-        className="edit-container"
-      >
-        <div className="edit-dialog-container">
-          <div className="edit-dialog-container--wrapper">
-            <div className="edit-dialog-container--wrapper__inf">
-              Dialog image
-            </div>
-            <div className="edit-dialog-container--wrapper__icon-container">
-              <div className="edit-dialog-container--wrapper__icon-container__icon">
-                <div className="edit-dialog-container--wrapper__icon-container__icon__content">
-                  {renderAvatar()}
-                </div>
-              </div>
-              <div className="edit-dialog-container--wrapper__icon-container__upload">
-                <label
-                  htmlFor="uploadBtn"
-                  style={{
-                    cursor: typeDialog !== DialogType.private ? 'pointer' : '',
-                  }}
-                >
-                  <div>{typeDialog !== DialogType.private ? 'Upload' : ''}</div>
-                  <input
-                    id="uploadBtn"
-                    type="file"
-                    accept="image/*"
-                    style={{ display: 'none' }}
-                    // onChange={uploadIconHandler}
-                    onChange={(event) => {
-                      ChangeFileHandler(event);
-                    }}
-                    disabled={typeDialog === DialogType.private}
-                  />
-                </label>
-              </div>
-            </div>
-            <div className="edit-dialog-container--wrapper__dialog-name-inf">
-              Dialog name
-            </div>
-            <div className="edit-dialog-container--wrapper__dialog-name-input">
-              <input
-                type="text"
-                style={{ width: '280px' }}
-                value={dialogName?.length > 0 ? dialogName : undefined}
-                onChange={(event) => setDialogName(event.target.value)}
-                placeholder="Enter name"
-              />
-            </div>
-          </div>
-        </div>
-        <div className="edit-btn-container">
-          <RowRightContainer
-            minHeightContainer="32px"
-            gapBetweenItem="8px"
-            RightContainerSize={{
-              flexBasis: '63px',
-              minWidth: '63px',
-              maxWidth: '63px',
-              minHeight: '32px',
-              maxHeight: '32px',
-            }}
-            RightItem={
-              <div>
-                <MainButton
-                  clickHandler={() => {
-                    if (clickUpdatedHandler) {
-                      if (urlAvatar !== 'null') {
-                        setUrlAvatar(
-                          fileUploadAvatar === null
-                            ? ''
-                            : fileUploadAvatar.name,
-                        );
-                      }
-
-                      const params: EditDialogParams = {
-                        dialogTitle: dialogName,
-                        dialogAvatar:
-                          urlAvatar === 'null' ? 'null' : fileUploadAvatar,
-                      };
-
-                      clickUpdatedHandler(params);
-                    }
-                  }}
-                  title={
-                    typeAddEditDialog === TypeOpenDialog.create
-                      ? 'Next'
-                      : 'Save'
-                  }
-                  typeButton={TypeButton.default}
-                  disabled={disabledButton}
-                />
-              </div>
-            }
-            CenterContainerSize={{
-              flexBasis: '78px',
-              minWidth: '78px',
-              maxWidth: '78px',
-              minHeight: '32px',
-              maxHeight: '32px',
-            }}
-            CenterItem={
-              <div>
-                <MainButton
-                  title="Cancel"
-                  clickHandler={() => {
-                    if (clickCancelHandler) {
-                      clickCancelHandler();
-                    }
-                  }}
-                  typeButton={TypeButton.outlined}
-                />
-              </div>
-            }
-          />
-        </div>
-      </div>
-    </ColumnContainer>
-  );
-};
-
-export default EditDialog;

package/src/Presentation/components/UI/Dialogs/EditDialog/UserAvatar/UserAvatar.scss

@@ -1,32 +0,0 @@
-.user-avatar-wrapper {
-  background: var(--disabled-elements);
-  //width: 55px;
-  //height: 55px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  margin: 0 auto;
-
-  &--btn {
-    position: relative;
-    isolation: isolate;
-    right: 5px;
-    top: -20px;
-
-    cursor: pointer;
-
-    color: var(--main-elements);
-
-    //border: 1px solid orange;
-  }
-
-  &--img {
-    //width: 55px;
-    //height: 55px;
-    position: relative;
-    right: 0px;
-    top: 0px;
-    border-radius: 50%;
-  }
-}

package/src/Presentation/components/UI/Dialogs/EditDialog/UserAvatar/UserAvatar.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import './UserAvatar.scss';
-import { IconTheme } from '../../../svgs/Icons/IconsCommonTypes';
-import ActiveSvg from '../../../svgs/ActiveSvg/ActiveSvg';
-import Remove from '../../../svgs/Icons/Actions/Remove';
-import { FunctionTypeVoidToVoid } from '../../../../../Views/Base/BaseViewModel';
-
-type UserAvatarProps = {
-  urlAvatar: string;
-  iconTheme?: IconTheme;
-  clickRemoveAvatarHandler?: FunctionTypeVoidToVoid;
-};
-
-// eslint-disable-next-line react/function-component-definition
-const UserAvatar: React.FC<UserAvatarProps> = ({
-  urlAvatar,
-  iconTheme = { width: '55px', height: '55px' },
-  clickRemoveAvatarHandler,
-}) => {
-  return (
-    <div
-      className="user-avatar-wrapper"
-      style={{ width: iconTheme.width, height: iconTheme.height }}
-    >
-      <div
-        style={{
-          margin: '0 auto',
-        }}
-      >
-        <img
-          src={urlAvatar}
-          className="user-avatar-wrapper--img"
-          style={{ width: iconTheme.width, height: iconTheme.height }}
-        />
-        {/* <div>{urlAvatar}</div> */}
-      </div>
-      {clickRemoveAvatarHandler ? (
-        <div className="user-avatar-wrapper--btn">
-          <ActiveSvg
-            content={
-              <Remove
-                width="20"
-                height="20"
-                color="var(--secondary-elements)"
-              />
-            }
-            clickAction={() => {
-              if (clickRemoveAvatarHandler) {
-                clickRemoveAvatarHandler();
-              }
-            }}
-          />
-        </div>
-      ) : null}
-    </div>
-  );
-};
-
-export default UserAvatar;

package/src/Presentation/components/UI/Dialogs/HeaderDialogs/HeaderDialogs.scss

@@ -1,67 +0,0 @@
-@import "../../../../../index";
-
-$header-color-divider: var(--color-divider);
-$header-container-height: 64px;
-$header-container-gap-width: 30px; // 140px;
-$header-container-bottom: 20px;
-$header-container-padding-interval: 16px;
-$header-container-title-font-family: 'Roboto';
-$header-container-title-font-size: 20px;
-$header-container-title-line-height: 24px;
-$header-container-title-width: 180px;
-$header-container-buttons-gap-width: 29px;
-$header-container-svg-icon-width: 32px;
-$header-container-svg-icon-height: 32px;
-$header-container-color-icon: var(--color-icon);
-
-.header-dialogs-container{
-  display: flex;
-  height: $header-container-height;
-  gap: 0 $header-container-gap-width;
-  padding: $header-container-padding-interval $header-container-padding-interval $header-container-padding-interval $header-container-bottom;
- &--title_wrapper{
-   font-family: $header-container-title-font-family;
-   font-style: normal;
-   font-weight: 500;
-   font-size: $header-container-title-font-size;
-   line-height: $header-container-title-line-height;
-   letter-spacing: 0.0015em;
-
-   width: $header-container-title-width;
-   text-align: left;
-
-   text-overflow: ellipsis;
-   white-space: nowrap;
-   overflow: hidden;
-}
-  &__title{
-  }
-  &__buttons{
-    display: flex;
-    align-items: center;
-    gap: $header-container-buttons-gap-width;
-    background: none;
-    color: $header-container-color-icon;
-
-    svg{
-      width:$header-container-svg-icon-width;
-      height:$header-container-svg-icon-height;
-      viewBox: 0 0 $header-container-svg-icon-width $header-container-svg-icon-height;
-    }
-    svg path {
-      fill: $header-container-color-icon;
-    }
-
-    //#Search{
-    //  fill: $header-container-color-icon;
-    //}
-    //#NewChat{
-    //  fill: $header-container-color-icon;
-    //}
-  }
-}
-.header-dialogs{
-  border: 1px solid $header-color-divider;
-}
-
-

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

@@ -1,112 +0,0 @@
-import React from 'react';
-import './HeaderDialogs.scss';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-// import stl from './HeaderDialogs.scss';
-import Search from '../../svgs/Icons/Navigation/Search';
-import NewChat from '../../svgs/Icons/Actions/NewChat';
-import ActiveSvg from '../../svgs/ActiveSvg/ActiveSvg';
-import { FunctionTypeVoidToVoid } from '../../../../Views/Base/BaseViewModel';
-import Theme from '../../../../assets/Theme';
-
-type HeaderDialogsProps = {
-  title?: string;
-  clickSearchHandler?: FunctionTypeVoidToVoid;
-  touchSearchHandler?: FunctionTypeVoidToVoid;
-  ClickActionHandler?: FunctionTypeVoidToVoid;
-  TouchActionHandler?: FunctionTypeVoidToVoid;
-  theme?: Theme;
-  settings?: any;
-};
-// eslint-disable-next-line react/function-component-definition
-const HeaderDialogs: React.FC<HeaderDialogsProps> = ({
-  title,
-  clickSearchHandler,
-  touchSearchHandler,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ClickActionHandler,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  TouchActionHandler,
-  theme = undefined,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  settings = undefined,
-}: HeaderDialogsProps) => {
-  // const s1 = stl.headerDialogsContainer;
-  // const s2 = stl.headerDialogs;
-  // const s3 = stl.headerDialogsContainerTitle_wrapper;
-  // // const s4 = stl.headerDialogsContainer__title;
-  // const s5 = stl.headerDialogsContainer__buttons;
-  //
-  // s5.color = '#FF3B30';
-  const titleContainerStyle = theme
-    ? {
-        border: `1px solid ${theme.divider()}`,
-        backgroundColor: theme.mainBackground(),
-      }
-    : {};
-  const textStyle = theme
-    ? {
-        color: theme.mainText(),
-        fontFamily: theme.fontFamily(),
-        backgroundColor: theme.mainBackground(),
-      }
-    : {};
-  const buttonsStyle = {
-    background: 'none',
-    svg: {
-      width: '44',
-      height: '44',
-      viewBox: '0 0 44 44',
-      path: {
-        fill: theme?.mainElements(),
-      },
-    },
-  };
-
-  return (
-    // <div className={[s1, s2].join(' ')}>
-    //   <div className={s3}>
-    //     <div>{title}</div>
-    //   </div>
-    //   <div className={s5}>
-    //     <Search />
-    //     <NewChat />
-    //   </div>
-    // </div>
-    // className="header-dialogs-container__title"
-    <div
-      className="header-dialogs-container header-dialogs"
-      style={titleContainerStyle}
-    >
-      <div className="header-dialogs-container--title_wrapper">
-        <div style={textStyle}>{title}</div>
-      </div>
-      <div style={buttonsStyle} className="header-dialogs-container__buttons">
-        <ActiveSvg
-          content={<Search />}
-          touchAction={() => {
-            console.log('touchSearchDialogsHandler');
-            if (touchSearchHandler) touchSearchHandler();
-          }}
-          clickAction={() => {
-            console.log('clickSearchDialogsHandler');
-            if (clickSearchHandler) clickSearchHandler();
-          }}
-        />
-        <ActiveSvg
-          content={<NewChat />}
-          touchAction={() => {
-            console.log('touchAction: Hello from component 1');
-            if (TouchActionHandler) TouchActionHandler();
-          }}
-          clickAction={() => {
-            console.log('clickAction: Hello from component 2');
-            if (ClickActionHandler) ClickActionHandler();
-          }}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default HeaderDialogs;

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

@@ -1,146 +0,0 @@
-$container-width: 332px;
-$container-height: 504px;
-$create-dialog-container-width: 332px;
-$create-dialog-container-height: 412px;
-
-.container-invite-members {
-  min-height: $container-height;
-  max-height: $container-height;
-  height: $container-height;
-  min-width: $container-width;
-  max-width: $container-width;
-  width: $container-width;
-
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  align-items: flex-start;
-
-  &--add-members-container {
-    min-height: $container-height;
-    max-height: $container-height;
-    height: $container-height;
-    min-width: $create-dialog-container-width;
-    max-width: $create-dialog-container-width;
-    width: $create-dialog-container-width;
-
-    //border: 5px solid green;
-
-    &--wrapper{
-      min-height: 432px;
-      display: flex;
-      flex-direction: column;
-      flex-wrap: nowrap;
-      justify-content: flex-start;
-      align-items: flex-start;
-
-      //border: 1px solid blue;
-
-      &__inf{
-        min-height: 20px;
-        font-family: 'Roboto';
-        font-style: normal;
-        font-weight: 500;
-        font-size: 14px;
-        line-height: 20px;
-        display: flex;
-        letter-spacing: 0.1px;
-        color: var(--main-elements);
-        margin-top: 24px;
-        //border: 1px solid green;
-      }
-
-      &__members{
-        //border: 3px solid firebrick;
-        display: flex;
-        max-height: 326px;
-        height: 356px;
-        font-family: 'Roboto';
-        font-style: normal;
-        font-weight: 500;
-        font-size: 14px;
-        line-height: 20px;
-        letter-spacing: 0.1px;
-        color: var(--main-elements);
-        margin-top: 8px;
-
-        &__empty-members {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          padding: 0px;
-          gap: 16px;
-
-          width: 332px;
-          height: 100px;
-
-        }
-      }
-
-
-      &__dialog-name-input{
-        margin-top: 8px;
-
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
-
-        align-items: center;
-        text-align: center;
-        padding: 8px;
-        width: 320px;
-        height: 44px;
-
-        border: 1px solid #90979F;
-        border-radius: 4px;
-
-        background-color: var(--main-background);
-        color: var(--secondary-text);
-
-        input {
-          color: var(--secondary-text);
-          background-color: var(--main-background);
-          margin-left: 6px;
-          margin-right: 6px;
-
-          font-family: 'Roboto';
-          font-style: normal;
-          font-weight: 400;
-          font-size: 16px;
-          line-height: 24px;
-
-          display: flex;
-          align-items: center;
-          letter-spacing: 0.15px;
-        }
-
-      }
-    }
-  }
-
-  &--btn-container{
-    min-height: 32px;
-    max-height: 32px;
-    height: 32px;
-    min-width: $container-width;
-    max-width: $container-width;
-    width: $container-width;
-    min-height: 34px;
-    margin-top: 24px;
-    margin-bottom: 24px;
-
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-end;
-    align-items: flex-end;
-
-    //border: 2px solid blue;
-  }
-}
-
-
-
-