quickblox-react-ui-kit 0.1.0 → 0.1.2

package/src/Presentation/components/containers/RowCenterContainer/RowCenterContainer.scss

@@ -1,45 +0,0 @@
-.row-layout-main-container{
-  // max-width: $row--main-container-max-width;
-  // min-width: $row--main-container-max-width;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-
-  justify-content: space-between;
-  align-items: center;
-  margin: 0 auto;
-
-  gap: 16px;
-
-
-  &__item-left {
-    // flex: 1 1 $row-main-container-item-width;
-    flex-grow: 1;
-    flex-shrink: 1;
-
-    //flex-basis: 56px;
-    //min-width: 56px;
-    //max-width: 56px;
-    //min-height: 56px;
-    //max-height: 56px;
-
-  }
-  &__item-center {
-    // flex: 3 2 $row-main-container-item-center-width;
-    flex-grow: 3;
-    flex-shrink: 2;
-
-    //flex-basis: 50px;
-    //min-height: 50px;
-    //max-height: 50px;
-
-  }
-  &__item-right {
-    // flex: 1 1 $row-main-container-item-width;
-    flex-grow: 1;
-    flex-shrink: 1;
-    // min-width: calc(100% / 5 );
-
-  }
-
-}

package/src/Presentation/components/containers/RowCenterContainer/RowCenterContainer.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import './RowCenterContainer.scss';
-
-export type RowCenterContainerProps = {
-  LeftItem?: React.ReactNode;
-  CenterItem?: React.ReactNode;
-  RightItem?: React.ReactNode;
-  gapBetweenItem?: string;
-  minWidthContainer?: string;
-  minHeightContainer?: string;
-  LeftContainerSize?: {
-    flexBasis: string;
-    minWidth: string;
-    maxWidth: string;
-    minHeight: string;
-    maxHeight: string;
-  };
-  CenterContainerSize?: {
-    flexBasis: string;
-    minWidth?: string;
-    maxWidth?: string;
-    minHeight: string;
-    maxHeight: string;
-  };
-  RightContainerSize?: {
-    flexBasis: string;
-    minWidth: string;
-    maxWidth: string;
-    minHeight: string;
-    maxHeight: string;
-  };
-};
-
-// eslint-disable-next-line react/function-component-definition
-const RowCenterContainer: React.FC<RowCenterContainerProps> = ({
-  LeftItem,
-  CenterItem,
-  RightItem,
-  gapBetweenItem,
-  minWidthContainer,
-  minHeightContainer,
-  LeftContainerSize,
-  CenterContainerSize,
-  RightContainerSize,
-}: RowCenterContainerProps) => {
-  const gapBetweenStyles = gapBetweenItem ? { gap: gapBetweenItem } : {};
-
-  const widthStyles = minWidthContainer
-    ? { ...gapBetweenStyles, minWidth: minWidthContainer }
-    : gapBetweenStyles;
-
-  const containerStyles = minHeightContainer
-    ? { ...widthStyles, minHeight: minHeightContainer }
-    : widthStyles;
-
-  const leftContainerStyles = LeftContainerSize || {};
-
-  const centerContainerStyles = CenterContainerSize || {};
-
-  const rightContainerStyles = RightContainerSize || {};
-
-  return (
-    <div style={containerStyles} className="row-layout-main-container">
-      <div
-        style={leftContainerStyles}
-        className="row-layout-main-container__item-left"
-      >
-        {LeftItem}
-      </div>
-      <div
-        style={centerContainerStyles}
-        className="row-layout-main-container__item-center"
-      >
-        {CenterItem}
-      </div>
-      {RightItem && (
-        <div
-          style={rightContainerStyles}
-          className="row-layout-main-container__item-right"
-        >
-          {RightItem}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default RowCenterContainer;
-
-/*
- *
- *
- *
- *
- * */

package/src/Presentation/components/containers/RowLeftContainer/RowLeftContainer.scss

@@ -1,45 +0,0 @@
-.row-left-layout-main-container{
-  // max-width: $row--main-container-max-width;
-  // min-width: $row--main-container-max-width;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-
-  justify-content: flex-start;
-  align-items: center;
-  margin: 0 auto;
-
-  gap: 1px;
-
-  width: 100%;
-
-
-  &__item-left {
-    // flex: 1 1 $row-main-container-item-width;
-    flex-grow: 1;
-    flex-shrink: 1;
-
-    //flex-basis: 56px;
-    //min-width: 56px;
-    //max-width: 56px;
-    //min-height: 56px;
-    //max-height: 56px;
-
-  }
-  &__item-center {
-    // flex: 3 2 $row-main-container-item-center-width;
-    flex-grow: 1;
-    flex-shrink: 1;
-    //flex-basis: 50px;
-    //min-height: 50px;
-    //max-height: 50px;
-
-  }
-  &__item-right {
-    // flex: 1 1 $row-main-container-item-width;
-    flex-grow: 1;
-    flex-shrink: 1;
-    // min-width: calc(100% / 5 );
-  }
-
-}

package/src/Presentation/components/containers/RowLeftContainer/RowLeftContainer.tsx

@@ -1,97 +0,0 @@
-import React from 'react';
-import './RowLeftContainer.scss';
-
-export type RowLeftContainerProps = {
-  LeftItem?: React.ReactNode;
-  CenterItem?: React.ReactNode;
-  RightItem?: React.ReactNode;
-  gapBetweenItem?: string;
-  minWidthContainer?: string;
-  minHeightContainer?: string;
-  LeftContainerSize?: {
-    flexBasis: string;
-    minWidth: string;
-    maxWidth: string;
-    minHeight: string;
-    maxHeight: string;
-  };
-  CenterContainerSize?: {
-    flexBasis: string;
-    minWidth?: string;
-    maxWidth?: string;
-    minHeight: string;
-    maxHeight: string;
-  };
-  RightContainerSize?: {
-    flexBasis: string;
-    minWidth: string;
-    maxWidth: string;
-    minHeight: string;
-    maxHeight: string;
-  };
-};
-
-// eslint-disable-next-line react/function-component-definition
-const RowLeftContainer: React.FC<RowLeftContainerProps> = ({
-  LeftItem,
-  CenterItem,
-  RightItem,
-  gapBetweenItem,
-  minWidthContainer,
-  minHeightContainer,
-  LeftContainerSize,
-  CenterContainerSize,
-  RightContainerSize,
-}: RowLeftContainerProps) => {
-  const gapBetweenStyles = gapBetweenItem ? { gap: gapBetweenItem } : {};
-
-  const widthStyles = minWidthContainer
-    ? { ...gapBetweenStyles, minWidth: minWidthContainer }
-    : gapBetweenStyles;
-
-  const containerStyles = minHeightContainer
-    ? { ...widthStyles, minHeight: minHeightContainer }
-    : widthStyles;
-
-  const leftContainerStyles = LeftContainerSize || {};
-
-  const centerContainerStyles = CenterContainerSize || {};
-
-  const rightContainerStyles = RightContainerSize || {};
-
-  return (
-    <div style={containerStyles} className="row-left-layout-main-container">
-      {LeftItem && (
-        <div
-          style={leftContainerStyles}
-          className="row-left-layout-main-container__item-left"
-        >
-          {LeftItem}
-        </div>
-      )}
-      <div
-        style={centerContainerStyles}
-        className="row-left-layout-main-container__item-center"
-      >
-        {CenterItem}
-      </div>
-      {RightItem && (
-        <div
-          style={rightContainerStyles}
-          className="row-left-layout-main-container__item-right"
-        >
-          {RightItem}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default RowLeftContainer;
-
-/*
- *
- *
- *
- *
- * */

package/src/Presentation/components/containers/RowRightContainer/RowRightContainer.scss

@@ -1,46 +0,0 @@
-.row-right-layout-main-container{
-  // max-width: $row--main-container-max-width;
-  // min-width: $row--main-container-max-width;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-
-  justify-content: flex-end;
-  align-items: flex-end;
-  margin: 0 auto;
-
-  gap: 1px;
-
-  width: 100%;
-
-
-  &__item-left {
-    // flex: 1 1 $row-main-container-item-width;
-    flex-grow: 1;
-    flex-shrink: 1;
-
-    //flex-basis: 56px;
-    //min-width: 56px;
-    //max-width: 56px;
-    //min-height: 56px;
-    //max-height: 56px;
-
-  }
-  &__item-center {
-    // flex: 3 2 $row-main-container-item-center-width;
-    flex-grow: 1;
-    flex-shrink: 1;
-    //flex-basis: 50px;
-    //min-height: 50px;
-    //max-height: 50px;
-//border: 1px solid green;
-  }
-  &__item-right {
-    // flex: 1 1 $row-main-container-item-width;
-    flex-grow: 1;
-    flex-shrink: 1;
-    // min-width: calc(100% / 5 );
-   // border: 1px solid red;
-  }
-
-}

package/src/Presentation/components/containers/RowRightContainer/RowRightContainer.tsx

@@ -1,97 +0,0 @@
-import React from 'react';
-import './RowRightContainer.scss';
-
-export type RowRightContainerProps = {
-  LeftItem?: React.ReactNode;
-  CenterItem?: React.ReactNode;
-  RightItem?: React.ReactNode;
-  gapBetweenItem?: string;
-  minWidthContainer?: string;
-  minHeightContainer?: string;
-  LeftContainerSize?: {
-    flexBasis: string;
-    minWidth: string;
-    maxWidth: string;
-    minHeight: string;
-    maxHeight: string;
-  };
-  CenterContainerSize?: {
-    flexBasis: string;
-    minWidth?: string;
-    maxWidth?: string;
-    minHeight: string;
-    maxHeight: string;
-  };
-  RightContainerSize?: {
-    flexBasis: string;
-    minWidth: string;
-    maxWidth: string;
-    minHeight: string;
-    maxHeight: string;
-  };
-};
-
-// eslint-disable-next-line react/function-component-definition
-const RowRightContainer: React.FC<RowRightContainerProps> = ({
-  LeftItem,
-  CenterItem,
-  RightItem,
-  gapBetweenItem,
-  minWidthContainer,
-  minHeightContainer,
-  LeftContainerSize,
-  CenterContainerSize,
-  RightContainerSize,
-}: RowRightContainerProps) => {
-  const gapBetweenStyles = gapBetweenItem ? { gap: gapBetweenItem } : {};
-
-  const widthStyles = minWidthContainer
-    ? { ...gapBetweenStyles, minWidth: minWidthContainer }
-    : gapBetweenStyles;
-
-  const containerStyles = minHeightContainer
-    ? { ...widthStyles, minHeight: minHeightContainer }
-    : widthStyles;
-
-  const leftContainerStyles = LeftContainerSize || {};
-
-  const centerContainerStyles = CenterContainerSize || {};
-
-  const rightContainerStyles = RightContainerSize || {};
-
-  return (
-    <div style={containerStyles} className="row-right-layout-main-container">
-      {LeftItem && (
-        <div
-          style={leftContainerStyles}
-          className="row-right-layout-main-container__item-left"
-        >
-          {LeftItem}
-        </div>
-      )}
-      <div
-        style={centerContainerStyles}
-        className="row-right-layout-main-container__item-center"
-      >
-        {CenterItem}
-      </div>
-      {RightItem && (
-        <div
-          style={rightContainerStyles}
-          className="row-right-layout-main-container__item-right"
-        >
-          {RightItem}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default RowRightContainer;
-
-/*
- *
- *
- *
- *
- * */

package/src/Presentation/components/containers/ScrollableContainer/ScrollableContainer.scss

@@ -1,46 +0,0 @@
-.list {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-
-}
-
-.list .spinner {
-  display: block;
-  height: 16px;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: -16px;
-  transition: all 0.2s ease;
-}
-
-.list .spinner.active {
-  top: 8px;
-}
-
-.list .list-content {
-  flex: 1;
-  overflow-x: hidden;
-  // overflow-y: hidden;
-  overflow-y: auto;
-  width: 100%;
-
-
-}
-
-.list {
-  ::-webkit-scrollbar{
-    // display: none;
-    width: 0px !important;
-    background: transparent;
-  }
-  ::-webkit-scrollbar-thumb {
-    background: transparent;
-  }
-  :hover{
-    overflow-y: scroll;
-  }
-}

package/src/Presentation/components/containers/ScrollableContainer/ScrollableContainer.tsx

@@ -1,85 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import cn from 'classnames';
-
-import './ScrollableContainer.scss';
-
-interface FlatListProps<T> {
-  className?: string;
-  data: Array<T>;
-  ListEmptyComponent?: React.ComponentClass | React.FunctionComponent;
-  onEndReached?: VoidFunction;
-  onEndReachedThreshold?: number;
-  refreshing?: boolean;
-  autoScrollToBottom?: boolean;
-  renderItem: (item: T, index: number) => React.ReactElement | null;
-}
-
-export default function ScrollableContainer<T>(props: FlatListProps<T>) {
-  const {
-    className,
-    data,
-    ListEmptyComponent,
-    onEndReached,
-    onEndReachedThreshold,
-    refreshing,
-    autoScrollToBottom,
-    renderItem,
-  } = props;
-
-  const container = useRef<HTMLDivElement>(null);
-
-  const scrollHandler = () => {
-    console.log('call scrollHandler');
-    if (container.current) {
-      const { scrollHeight, clientHeight, scrollTop } = container.current;
-      const scrollOffset = (scrollTop + clientHeight) / scrollHeight;
-      let endReached = false;
-
-      if (typeof onEndReachedThreshold === 'number') {
-        if (scrollOffset >= onEndReachedThreshold) {
-          endReached = true;
-        }
-      } else if (scrollOffset >= 0.99) {
-        endReached = true;
-      }
-
-      if (endReached && onEndReached) {
-        onEndReached();
-      }
-    }
-  };
-  const messageEndRef = useRef<HTMLDivElement>(null);
-
-  const scrollToBottom = () => {
-    console.log('call scrollToBottom start');
-    if (autoScrollToBottom)
-      messageEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  };
-
-  useEffect(() => {
-    console.log('useEffect []');
-    if (autoScrollToBottom) scrollToBottom();
-  }, []);
-
-  useEffect(() => {
-    console.log('useEffect messages');
-    if (autoScrollToBottom) scrollToBottom();
-  }, [data.length]);
-  console.log('çount items to scroll:', data.length);
-  console.log('data to scrolling: ', JSON.stringify(data));
-
-  return (
-    <div className={cn('list', className)}>
-      {refreshing && <div>loading...</div>}
-      {data && data.length ? (
-        <div className="list-content" onScroll={scrollHandler} ref={container}>
-          {/* {data.map(renderItem)} */}
-          {data.map((it, index) => renderItem(it, index))}
-          <div style={{ float: 'left', clear: 'both' }} ref={messageEndRef} />
-        </div>
-      ) : (
-        !refreshing && ListEmptyComponent && <ListEmptyComponent />
-      )}
-    </div>
-  );
-}

package/src/Presentation/components/layouts/Desktop/Desktop.tsx

@@ -1,103 +0,0 @@
-import React, { useEffect } from 'react';
-import './DesktopLayout.scss';
-import ColumnContainer from '../../containers/ColumnContainer/ColumnContainer';
-import BaseViewModel from '../../../Views/Base/BaseViewModel';
-import { ModalContext } from '../../providers/ModalContextProvider/Modal';
-import DialogsComponent from '../../../Views/Dialogs/Dialogs';
-import HeaderDialogs from '../../UI/Dialogs/HeaderDialogs/HeaderDialogs';
-import DialogInformation from '../../UI/Dialogs/DialogInformation/DialogInformation';
-import { DialogsViewModel } from '../../../Views/Dialogs/DialogViewModel';
-import useDialogsViewModel from '../../../Views/Dialogs/useDialogsViewModel';
-import { DialogEntity } from '../../../../Domain/entity/DialogEntity';
-import { Pagination } from '../../../../Domain/repository/Pagination';
-import CreateDialog from '../../UI/Dialogs/CreateDialog/CreateDialog';
-
-function Desktop() {
-  console.log('create DesktopLayoutDesktopLayout');
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { handleModal } = React.useContext(ModalContext);
-  const [selectedDialog, setSelectedDialog] =
-    React.useState<BaseViewModel<DialogEntity>>();
-
-  const dialogsViewModel: DialogsViewModel = useDialogsViewModel();
-
-  useEffect(() => {
-    console.log('DESKTOP USE EFFECT in DesktopLayoutDesktopLayout');
-    const pagination: Pagination = new Pagination();
-
-    dialogsViewModel?.getDialogs(pagination);
-
-    return () => {
-      // console.log('call removeListener()');
-      // listChatsViewModel?.removeListener();
-    };
-  }, []);
-
-  return (
-    <div className="desktop-layout-main-container">
-      <div className="desktop-layout-main-container__item-left">
-        <DialogsComponent
-          dialogsViewModel={dialogsViewModel}
-          itemSelectHandler={setSelectedDialog}
-          header={
-            <HeaderDialogs
-              title="Dialogs"
-              ClickActionHandler={() => {
-                handleModal(
-                  true,
-                  <CreateDialog
-                    createPrivateDialogClickHandler={() =>
-                      console.log('click private')
-                    }
-                    createPrivateDialogTouchHandler={() =>
-                      console.log('touch private')
-                    }
-                    createGroupDialogClickHandler={() =>
-                      console.log('click group')
-                    }
-                    createGroupDialogTouchHandler={() =>
-                      console.log('touch group')
-                    }
-                    createPublicDialogClickHandler={() =>
-                      console.log('click public')
-                    }
-                    createPublicDialogTouchHandler={() =>
-                      console.log('touch public')
-                    }
-                  />,
-                  'New dialog',
-                  false,
-                  false,
-                );
-              }}
-            />
-          }
-        />
-      </div>
-      <div className="desktop-layout-main-container__item-center">2</div>
-      <div className="desktop-layout-main-container__item-right">
-        <ColumnContainer>
-          {/* selected dialog: */}
-          {/* {selectedDialog?.entity.name} */}
-          {/* <br /> */}
-          {/* id: */}
-          {/* {selectedDialog?.entity.id} */}
-          {/* <hr /> */}
-          {selectedDialog ? (
-            <DialogInformation
-              dialog={selectedDialog.entity}
-              dialogViewModel={dialogsViewModel}
-              closeInformationHandler={() => {
-                console.log('close dialog');
-              }}
-            />
-          ) : (
-            <div>Select dialog to chatting</div>
-          )}
-        </ColumnContainer>
-      </div>
-    </div>
-  );
-}
-
-export default Desktop;

package/src/Presentation/components/layouts/Desktop/DesktopLayout.scss

@@ -1,31 +0,0 @@
-$desktop-main-container-max-width: 1360px;
-$desktop-main-container-min-height: 800px;
-$desktop-main-container-item-width: 320px;
-$desktop-main-container-item-center-width: 720px;
-// $desktop-main-container-item-center-width: 1040px;
-
-.desktop-layout-main-container{
-  // border: 10px solid #6c38cc;
-  min-height: $desktop-main-container-min-height;
-  max-width: $desktop-main-container-max-width;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: flex-start;
-  align-items: flex-start;
-  margin: 0 auto;
-
-  &__item-left {
-    border-bottom: 1px solid var(--divider);
-    flex: 1 1 $desktop-main-container-item-width;
-    max-width: $desktop-main-container-item-width
-  }
-  &__item-right {
-    border: 1px solid  var(--divider);
-    flex: 1 1 $desktop-main-container-item-width;
-    max-width: $desktop-main-container-item-width
-  }
-  &__item-center {
-    border: 1px solid  var(--divider);
-    flex: 3 2 $desktop-main-container-item-center-width;
-  }
-}