quickblox-react-ui-kit 0.2.8 → 0.3.0-beta.1

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

@@ -0,0 +1,203 @@
+$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;
+
+  &--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(--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;
+    }
+
+    &__dialog-name-input{
+      margin-top: 8px;
+
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      padding: 6px 8px;
+
+      //width: 320px;
+      width: 100%;
+      height: 44px;
+
+      border: 1px solid var(--tertiary-elements);//#90979F;
+      border-radius: 4px;
+
+      flex: none;
+      order: 1;
+      align-self: stretch;
+      flex-grow: 0;
+
+      background-color: var(--main-background);
+
+      input {
+        color: var(--secondary-text);
+        background-color: var(--main-background);
+
+        font-family: 'Roboto';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+
+        display: flex;
+        align-items: center;
+        letter-spacing: 0.15px;
+
+        border: none;
+        outline: none;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,279 @@
+import React, { useEffect, useState } from 'react';
+import './EditDialog.scss';
+import ColumnContainer from '../../components/containers/ColumnContainer/ColumnContainer';
+import User from '../../components/UI/svgs/Icons/Contents/User';
+import RowRightContainer from '../../components/containers/RowRightContainer/RowRightContainer';
+import MainButton, {
+  TypeButton,
+} from '../../components/UI/Buttons/MainButton/MainButton';
+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';
+
+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 currentContext = useQbInitializedDataContext();
+  const maxUploadFileSize = currentContext.InitParams.maxFileSize;
+  const minLengthNameDialog = 3;
+  const maxLengthNameDialog = 60;
+  const errorMessageUploadMaxSize = `file size must be less than ${
+    maxUploadFileSize / 1024 / 1024
+  } Mb`;
+  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('');
+
+  useEffect(() => {
+    setDisabledButton(
+      dialogName.length < minLengthNameDialog ||
+        dialogName.length > maxLengthNameDialog,
+    );
+  }, [dialogName]);
+
+  const ChangeFileHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setErrorMessageUpload('');
+    const reader = new FileReader();
+    const file = event.currentTarget.files
+      ? event.currentTarget.files[0]
+      : null;
+
+    console.log('file: ', file);
+
+    const fileSize = file?.size || 0;
+
+    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)"
+            />
+          );
+          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');
+            setErrorMessageUpload('');
+          }}
+        />
+      );
+    }
+  };
+
+  return (
+    <ColumnContainer gapBetweenItem="8px">
+      <div
+        style={{
+          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={(event) => {
+                      ChangeFileHandler(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>
+            <div className="edit-dialog-container--wrapper__dialog-name-input">
+              <input
+                type="text"
+                style={{ width: '100%' }}
+                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/Views/EditDialog/UserAvatar/UserAvatar.scss

@@ -0,0 +1,32 @@
+.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

@@ -0,0 +1,59 @@
+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;

package/src/Presentation/Views/Flow/CreateDialog/CreateDialog.scss

@@ -0,0 +1,93 @@
+$create-dialog-container-width: 380px;
+$create-dialog-container-height: 312px;
+
+.create-dialog-container {
+  min-height: $create-dialog-container-height;
+  max-height: $create-dialog-container-height;
+  height: $create-dialog-container-height;
+  //border: 1px solid green;
+  //&--btn-wrapper{
+  //  height: 64px;
+  //  // width: 280px;
+  //  display: flex;
+  //  flex-direction: row;
+  //  flex-wrap: nowrap;
+  //  justify-content: flex-start;
+  //  align-items: center;
+  //  gap: 16px;
+  //  cursor: pointer;
+  //  border-radius: 4px;
+  //
+  //  border: 1px solid var(--tertiary-elements);
+  //
+  //  &__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;
+  //  }
+  //  &__icon{
+  //    min-height: 24px;
+  //    margin-left: 10px;
+  //    flex: 1 1 24px;
+  //
+  //   // border: 1px solid red;
+  //  }
+  //}
+}
+
+
+.item-type-dialog,
+.item-type-dialog * {
+  box-sizing: border-box;
+}
+.item-type-dialog {
+  border-radius: 4px;
+  border-style: solid;
+  border-color: var(--light-theme-tertiaryelements, #636d78);
+  border-width: 1px;
+  padding: 16px;
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  align-items: center;
+  justify-content: flex-start;
+  align-self: stretch;
+  flex-shrink: 0;
+  position: relative;
+}
+.item-type-dialog-icon {
+  border-radius: 4px;
+  padding: 4px;
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  position: relative;
+}
+.item-type-dialog-name {
+  color: var(--light-theme-maintext, #0b1b0f);
+  text-align: left;
+  font-family: var(
+                  --body-body-medium-font-family,
+                  "Roboto-Regular",
+                  sans-serif
+  );
+  font-size: var(--body-body-medium-font-size, 14px);
+  line-height: var(--body-body-medium-line-height, 20px);
+  font-weight: var(--body-body-medium-font-weight, 400);
+  position: relative;
+  flex: 1;
+}