quickblox-react-ui-kit 0.1.6 → 0.1.8

package/src/Presentation/components/UI/svgs/Icons/Toggle/Speaker/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function Speaker(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.5 16.5V27.5H12.8333L22 36.6666V7.3333L12.8333 16.5H5.5ZM30.25 22C30.25 18.755 28.38 15.9683 25.6667 14.6116V29.37C28.38 28.0316 30.25 25.245 30.25 22ZM25.6667 5.92163V9.6983C30.965 11.275 34.8333 16.1883 34.8333 22C34.8333 27.8116 30.965 32.725 25.6667 34.3016V38.0783C33.0183 36.41 38.5 29.8466 38.5 22C38.5 14.1533 33.0183 7.58996 25.6667 5.92163Z"
+        id="Speaker"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default Speaker;

package/src/Presentation/components/UI/svgs/Icons/Toggle/SpeakerOff/Speaker off.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.25 22C30.25 18.755 28.38 15.9683 25.6667 14.6117V18.6633L30.1583 23.155C30.2133 22.7883 30.25 22.4033 30.25 22ZM34.8333 22C34.8333 23.7233 34.4667 25.3367 33.8433 26.84L36.6117 29.6083C37.8217 27.335 38.5 24.75 38.5 22C38.5 14.1533 33.0183 7.59 25.6667 5.92167V9.69833C30.965 11.275 34.8333 16.1883 34.8333 22ZM7.82833 5.5L5.5 7.82833L14.1717 16.5H5.5V27.5H12.8333L22 36.6667V24.3283L29.7917 32.12C28.5633 33.0733 27.1883 33.825 25.6667 34.2833V38.06C28.1967 37.4917 30.4883 36.3183 32.4317 34.7417L36.1717 38.5L38.5 36.1717L7.82833 5.5ZM22 7.33333L18.1683 11.165L22 14.9967V7.33333Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Toggle/SpeakerOff/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function SpeakerOff(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M30.25 22C30.25 18.755 28.38 15.9683 25.6667 14.6117V18.6633L30.1583 23.155C30.2133 22.7883 30.25 22.4033 30.25 22ZM34.8333 22C34.8333 23.7233 34.4667 25.3367 33.8433 26.84L36.6117 29.6083C37.8217 27.335 38.5 24.75 38.5 22C38.5 14.1533 33.0183 7.59 25.6667 5.92167V9.69833C30.965 11.275 34.8333 16.1883 34.8333 22ZM7.82833 5.5L5.5 7.82833L14.1717 16.5H5.5V27.5H12.8333L22 36.6667V24.3283L29.7917 32.12C28.5633 33.0733 27.1883 33.825 25.6667 34.2833V38.06C28.1967 37.4917 30.4883 36.3183 32.4317 34.7417L36.1717 38.5L38.5 36.1717L7.82833 5.5ZM22 7.33333L18.1683 11.165L22 14.9967V7.33333Z"
+        id="SpeakerOff"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default SpeakerOff;

package/src/Presentation/components/UI/svgs/Icons/Toggle/StopRecord/Stop record.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 11H33V33H11V11Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Toggle/StopRecord/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function StopRecord(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11 11H33V33H11V11Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+        id="StopRecord"
+      />
+    </svg>
+  );
+}
+
+export default StopRecord;

package/src/Presentation/components/UI/svgs/Icons/Toggle/StopShare/Stop share.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.9033 32.615L42.57 36.2817H44V32.615H38.9033ZM40.315 28.9483L40.3333 10.615C40.3333 8.58 38.6833 6.94833 36.6667 6.94833H13.2367L22.825 16.5367C23.155 16.4633 23.485 16.4083 23.8333 16.3533V12.4483L31.1667 19.2867L28.27 21.9817L38.4267 32.1383C39.545 31.5333 40.315 30.3233 40.315 28.9483ZM4.38167 2.75L2.035 5.07833L4.85833 7.90167C4.125 8.56167 3.66667 9.53333 3.66667 10.615V28.9483C3.66667 30.965 5.29833 32.615 7.33333 32.615H0V36.2817H33.2383L38.2067 41.25L40.535 38.9217L4.38167 2.75ZM12.8333 27.115C13.4017 24.4017 14.52 21.7067 16.6283 19.6717L19.5433 22.5867C16.72 23.2833 14.5933 24.75 12.8333 27.115Z" fill="black"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Toggle/StopShare/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function StopShare(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M38.9033 32.615L42.57 36.2817H44V32.615H38.9033ZM40.315 28.9483L40.3333 10.615C40.3333 8.58 38.6833 6.94833 36.6667 6.94833H13.2367L22.825 16.5367C23.155 16.4633 23.485 16.4083 23.8333 16.3533V12.4483L31.1667 19.2867L28.27 21.9817L38.4267 32.1383C39.545 31.5333 40.315 30.3233 40.315 28.9483ZM4.38167 2.75L2.035 5.07833L4.85833 7.90167C4.125 8.56167 3.66667 9.53333 3.66667 10.615V28.9483C3.66667 30.965 5.29833 32.615 7.33333 32.615H0V36.2817H33.2383L38.2067 41.25L40.535 38.9217L4.38167 2.75ZM12.8333 27.115C13.4017 24.4017 14.52 21.7067 16.6283 19.6717L19.5433 22.5867C16.72 23.2833 14.5933 24.75 12.8333 27.115Z"
+        id="StopShare"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default StopShare;

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

@@ -0,0 +1,6 @@
+$column-container-width: 320px;
+.column-container{
+  width: $column-container-width;
+  display: flex;
+  flex-flow: column nowrap;
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import './ColumnContainer.scss';
+import { ContainerProps } from '../../layouts/LayoutCommonTypes';
+
+// eslint-disable-next-line react/function-component-definition
+const ColumnContainer: React.FC<ContainerProps> = ({
+  children,
+  gapBetweenItem,
+  maxWidth,
+}: ContainerProps) => {
+  const containerStyles = gapBetweenItem ? { gap: gapBetweenItem } : {};
+
+  const resumeStyles = maxWidth
+    ? { ...containerStyles, width: maxWidth }
+    : containerStyles;
+
+  return (
+    <div style={resumeStyles} className="column-container">
+      {children}
+    </div>
+  );
+};
+
+export default ColumnContainer;

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

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

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

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

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

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

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

@@ -0,0 +1,45 @@
+.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;
+  //}
+}
+