quickblox-react-ui-kit 0.4.1 → 0.4.2-beta.2

package/src/Presentation/Views/DialogListHeader/DialogListHeader.tsx

@@ -1,90 +0,0 @@
-import React from 'react';
-import './DialogListHeader.scss';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-// import stl from './DialogListHeader.scss';
-import Search from '../../components/UI/svgs/Icons/Navigation/Search';
-import NewChat from '../../components/UI/svgs/Icons/Actions/NewChat';
-import ActiveSvg from '../../components/UI/svgs/ActiveSvg/ActiveSvg';
-import { FunctionTypeVoidToVoid } from '../../../CommonTypes/BaseViewModel';
-import UiKitTheme from '../../themes/UiKitTheme';
-
-type DialogListHeaderProps = {
-  title?: string;
-  clickSearchHandler?: FunctionTypeVoidToVoid;
-  touchSearchHandler?: FunctionTypeVoidToVoid;
-  clickActionHandler?: FunctionTypeVoidToVoid;
-  touchActionHandler?: FunctionTypeVoidToVoid;
-  theme?: UiKitTheme;
-  settings?: any;
-};
-// eslint-disable-next-line react/function-component-definition
-const DialogListHeader: React.FC<DialogListHeaderProps> = ({
-  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,
-}: DialogListHeaderProps) => {
-  // 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: '24',
-      height: '24',
-      viewBox: '0 0 24 24',
-      path: {
-        fill: theme?.mainElements(),
-      },
-    },
-  };
-
-  return (
-    <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 width="24" height="24" applyZoom />}
-          onTouch={touchSearchHandler}
-          onClick={clickSearchHandler}
-        />
-        <ActiveSvg
-          content={<NewChat width="24" height="24" applyZoom />}
-          onTouch={touchActionHandler}
-          onClick={clickActionHandler}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default DialogListHeader;

package/src/Presentation/Views/EditDialog/EditDialog.scss

@@ -1,175 +0,0 @@
-$container-width: 332px;
-$container-height: 236px;
-$create-dialog-container-width: 332px;
-$create-dialog-container-height: 180px;
-
-.edit-container {
-  //border: 1px solid blue;
-  min-height: $container-height;
-  max-height: $container-height;
-  height: $container-height;
-  //min-width: $container-width;
-  //max-width: $container-width;
-  //width: $container-width;
-  width: 100%;
-
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  align-items: flex-start;
-}
-
-.edit-btn-container {
-  //border: 3px solid black;
-  min-height: 34px;
-  max-height: 34px;
-  height: 34px;
-  //min-width: $container-width;
-  //max-width: $container-width;
-  //width: $container-width;
-  width: 100%;
-
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: flex-end;
-  align-items: flex-end;
-}
-
-.edit-dialog-container {
-  min-height: $create-dialog-container-height;
-  max-height: $create-dialog-container-height;
-  height: $create-dialog-container-height;
-  //min-width: $create-dialog-container-width;
-  //max-width: $create-dialog-container-width;
-  //width: $create-dialog-container-width;
-  width: 100%;
-
-  //border: 3px solid green;
-
-  margin-bottom: 24px;
-
-  &--disable {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 100;
-    display: block;
-  }
-
-  &--wrapper {
-    min-height: 180px;
-    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: 400;
-      font-size: 14px;
-      line-height: 20px;
-      letter-spacing: 0.25px;
-      color: var(--main-text);
-      // color: var(--color-background);
-
-      //border: 1px solid orange;
-    }
-
-    &__icon-container {
-      min-height: 56px;
-      max-height: 56px;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: nowrap;
-      justify-content: flex-start;
-      align-items: flex-start;
-
-      &__icon {
-        min-height: 56px;
-        max-height: 56px;
-        height: 56px;
-        min-width: 56px;
-        max-width: 56px;
-        height: 56px;
-        margin-top: 8px;
-
-        background-color: var(--disabled-elements);
-        border-radius: 50%;
-        text-align: center;
-        align-content: center;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        //border: 1px solid red;
-
-        &__content {
-          // margin: 10px;
-        }
-      }
-
-      &__upload {
-        min-height: 32px;
-        max-height: 32px;
-        min-width: 80px;
-        max-width: 80px;
-        margin-top: 8px;
-        padding-left: 16px;
-        padding-top: 20px;
-
-        font-family: 'Roboto';
-        font-style: normal;
-        font-weight: 700;
-        font-size: 14px;
-        line-height: 16px;
-        letter-spacing: 0.4px;
-        color: var(--color-icon);
-        //cursor: pointer;
-
-        // border: 1px solid green;
-      }
-    }
-
-    &__upload-error {
-      min-height: 20px;
-
-      font-family: 'Roboto';
-      font-style: normal;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 20px;
-      letter-spacing: 0.25px;
-      margin-top: 5px;
-      color: var(--error);
-    }
-
-    &__dialog-name-inf {
-      min-height: 20px;
-
-      font-family: 'Roboto';
-      font-style: normal;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 20px;
-      letter-spacing: 0.25px;
-      margin-top: 24px;
-
-      //border: 1px solid orange;
-    }
-
-    &__text-field {
-      width: 100%;
-    }
-  }
-}

package/src/Presentation/Views/EditDialog/EditDialog.tsx

@@ -1,273 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import cn from 'classnames';
-import ColumnContainer from '../../components/containers/ColumnContainer/ColumnContainer';
-import User from '../../components/UI/svgs/Icons/Contents/User';
-import RowRightContainer from '../../components/containers/RowRightContainer/RowRightContainer';
-import {
-  EditDialogParams,
-  FunctionTypeEditDialogParamsToVoid,
-  FunctionTypeVoidToVoid,
-} from '../../../CommonTypes/BaseViewModel';
-import UserAvatar from './UserAvatar/UserAvatar';
-import { DialogType } from '../../../Domain/entity/DialogTypes';
-import GroupChat from '../../components/UI/svgs/Icons/Contents/GroupChat';
-import PublicChannel from '../../components/UI/svgs/Icons/Contents/PublicChannel';
-import useQbInitializedDataContext from '../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
-import { Button, TextField } from '../../ui-components';
-import { formatFileSize } from '../../../utils/formatFileSize';
-import './EditDialog.scss';
-
-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;
-  disableActions?: boolean;
-};
-
-// eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
-const EditDialog: React.FC<EditDialogProps> = ({
-  nameDialog = '',
-  typeDialog,
-  ulrIcon = '',
-  typeAddEditDialog = TypeOpenDialog.create,
-  clickUpdatedHandler,
-  clickCancelHandler,
-  disableActions = false,
-}) => {
-  const currentContext = useQbInitializedDataContext();
-  const maxUploadFileSize = currentContext.InitParams.maxFileSize;
-  const minLengthNameDialog = 3;
-  const maxLengthNameDialog = 60;
-  const errorMessageUploadMaxSize = `The file should not exceed this size: ${formatFileSize(
-    maxUploadFileSize,
-  )}`;
-
-  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,
-  );
-  const [errorMessageUpload, setErrorMessageUpload] = useState('');
-
-  const handleUploadAvatar = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const allowedExtensions = ['jpg', 'jpeg', 'gif', 'png'];
-
-    setErrorMessageUpload('');
-    const reader = new FileReader();
-    const file = event.currentTarget.files
-      ? event.currentTarget.files[0]
-      : null;
-
-    if (file === null) return;
-
-    if (!allowedExtensions.includes(file.type.split('/')[1])) {
-      setErrorMessageUpload('Please use JPG, JPEG, PNG, or GIF.');
-
-      return;
-    }
-
-    const fileSize = file?.size || 0;
-
-    console.log('MAX_FILE_SIZE', maxUploadFileSize, ' fileSize', fileSize);
-    if (fileSize >= maxUploadFileSize) {
-      setErrorMessageUpload(errorMessageUploadMaxSize);
-
-      return;
-    }
-
-    reader.onloadend = () => {
-      setFileUploadAvatar(file);
-      setUrlAvatar(reader.result ? (reader.result as string) : '');
-    };
-
-    if (file !== null) reader.readAsDataURL(file);
-  };
-
-  // 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)"
-            />
-          );
-        case DialogType.group:
-          return (
-            <GroupChat
-              width="36"
-              height="36"
-              applyZoom
-              color="var(--secondary-text)"
-            />
-          );
-        case DialogType.public:
-          return (
-            <PublicChannel
-              width="36"
-              height="36"
-              applyZoom
-              color="var(--secondary-text)"
-            />
-          );
-        default:
-          return (
-            <User
-              width="36"
-              height="36"
-              applyZoom
-              color="var(--secondary-text)"
-            />
-          );
-      }
-    } else {
-      return (
-        <UserAvatar
-          urlAvatar={urlAvatar}
-          clickRemoveAvatarHandler={() => {
-            setUrlAvatar('null');
-            setErrorMessageUpload('');
-          }}
-        />
-      );
-    }
-  };
-
-  useEffect(() => {
-    setDisabledButton(
-      dialogName.length < minLengthNameDialog ||
-        dialogName.length > maxLengthNameDialog,
-    );
-  }, [dialogName]);
-
-  const handleUpdate = () => {
-    if (clickUpdatedHandler) {
-      const params: EditDialogParams = {
-        dialogTitle: dialogName,
-        // dialogAvatar: urlAvatar.length ? fileUploadAvatar : '',
-        dialogAvatar: urlAvatar === 'null' ? 'null' : fileUploadAvatar,
-      };
-
-      clickUpdatedHandler(params);
-    }
-  };
-
-  const handleCancel = () => {
-    if (clickCancelHandler) {
-      clickCancelHandler();
-    }
-  };
-
-  return (
-    <ColumnContainer gapBetweenItem="8px">
-      <div
-        style={{
-          backgroundColor: 'var(--main-background)',
-        }}
-        className="edit-container"
-      >
-        <div
-          className={cn('', {
-            'edit-dialog-container--disable': disableActions,
-          })}
-        />
-        <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={(event) => {
-                      handleUploadAvatar(event);
-                    }}
-                    disabled={typeDialog === DialogType.private}
-                  />
-                </label>
-              </div>
-            </div>
-            {errorMessageUpload.length > 0 ? (
-              <div className="edit-dialog-container--wrapper__upload-error">
-                {errorMessageUpload}
-              </div>
-            ) : null}
-            <div className="edit-dialog-container--wrapper__dialog-name-inf">
-              Dialog name
-            </div>
-            <TextField
-              value={dialogName}
-              onChange={(value) => setDialogName(value)}
-              placeholder="Enter name"
-              className="edit-dialog-container--wrapper__text-field"
-            />
-          </div>
-        </div>
-        <div className="edit-btn-container">
-          <RowRightContainer
-            minHeightContainer="32px"
-            gapBetweenItem="8px"
-            RightContainerSize={{
-              flexBasis: '63px',
-              minWidth: '63px',
-              maxWidth: '63px',
-              minHeight: '32px',
-              maxHeight: '32px',
-            }}
-            RightItem={
-              <Button onClick={handleUpdate} disabled={disabledButton}>
-                {typeAddEditDialog === TypeOpenDialog.create ? 'Next' : 'Save'}
-              </Button>
-            }
-            CenterContainerSize={{
-              flexBasis: '78px',
-              minWidth: '78px',
-              maxWidth: '78px',
-              minHeight: '32px',
-              maxHeight: '32px',
-            }}
-            CenterItem={
-              <Button variant="outlined" onClick={handleCancel}>
-                Cancel
-              </Button>
-            }
-          />
-        </div>
-      </div>
-    </ColumnContainer>
-  );
-};
-
-export default EditDialog;

package/src/Presentation/Views/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/Views/EditDialog/UserAvatar/UserAvatar.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import './UserAvatar.scss';
-import { IconTheme } from '../../../components/UI/svgs/Icons/IconsCommonTypes';
-import ActiveSvg from '../../../components/UI/svgs/ActiveSvg/ActiveSvg';
-import Remove from '../../../components/UI/svgs/Icons/Actions/Remove';
-import { FunctionTypeVoidToVoid } from '../../../../CommonTypes/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)"
-              />
-            }
-            onClick={() => {
-              if (clickRemoveAvatarHandler) {
-                clickRemoveAvatarHandler();
-              }
-            }}
-          />
-        </div>
-      ) : null}
-    </div>
-  );
-};
-
-export default UserAvatar;