quickblox-react-ui-kit 0.1.0

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

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

@@ -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/components/UI/Dialogs/EditDialog/UserAvatar/UserAvatar.tsx

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

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

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

@@ -0,0 +1,146 @@
+$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;
+  }
+}
+
+
+
+