@trtc/calls-uikit-react 4.1.0

package/src/Components/components/base/Overlayer/Overlayer.tsx

@@ -0,0 +1,49 @@
+import React, { CSSProperties, useEffect, useState } from 'react';
+import { classPrefix, TObjectFit } from '../../../const/common';
+import { classNames } from '../../../util/classnames';
+import './Overlayer.scss';
+
+interface IOverlayerProps {
+  style?: CSSProperties;
+  className?: string;
+  showOverlayer?: boolean;
+  background?: string;
+  fit?: TObjectFit;
+  defaultSrc?: string;
+  onError?: (event?: object) => void;
+}
+
+export default function Overlayer(props: IOverlayerProps) {
+  const {
+    style,
+    className,
+    background,
+    showOverlayer = true,
+    fit = 'cover',
+    defaultSrc,
+    onError,
+  } = props;
+  const classnames = classNames([
+    className,
+    `${classPrefix}-overlayer-container`,
+  ]);
+  const [imgSrc, setImgSrc] = useState(background || defaultSrc);
+  const [objectFit, setObjectFit] = useState({ objectFit: fit });
+  const imgStyle = { width: '100%', height: '100%' };
+
+  useEffect(() => {
+    setObjectFit({ objectFit: fit });
+  }, [fit]);
+
+  function handleError(event) {
+    onError?.(event);
+    setImgSrc(defaultSrc);
+  }
+
+  return (
+    <div className={classnames}>
+      {showOverlayer && <div style={style} className='overlay' />}
+      {imgSrc && <img alt='bg' style={{ ...imgStyle, ...objectFit }} src={imgSrc} onError={handleError} />}
+    </div>
+  );
+}

package/src/Components/components/base/Popup/Popup.scss

@@ -0,0 +1,34 @@
+@use "../../../style/theme/util" as *;
+@import '../../../style/common/var.scss';
+
+.#{$prefix}-popup__arrow {
+  left: 50%;
+  width: 10px;
+  height: 10px;
+  z-index: -1;
+  margin-top: -3px;
+  position: absolute;
+  @include theme() {
+    background-color: get(black-4);
+    border: 0.5px solid get(white-7);
+  }
+  backdrop-filter: blur(15px);
+  -webkit-backdrop-filter: blur(15px);
+  transform: rotate(45deg) translateX(-50%);
+  border-top-left-radius: 100%;
+}
+
+.#{$prefix}-popup__content {
+  backdrop-filter: blur(15px);
+  -webkit-backdrop-filter: blur(15px);
+  border-radius: 6px;
+  padding: 3px;
+  font-size: $font-size-m;
+  
+
+  @include theme() {
+    background-color: get(black-4);
+    border: 0.5px solid get(white-7);
+    color: get(white-1);
+  }
+}

package/src/Components/components/base/Popup/Popup.tsx

@@ -0,0 +1,91 @@
+import React, {
+  ReactNode, useCallback, useEffect, useRef, useState, forwardRef,
+} from 'react';
+import { usePopper } from 'react-popper';
+import Portal from '../Portal/Portal';
+import { classPrefix } from '../common';
+import { classNames } from '../../../util/classnames';
+import useMutationObserver from '../hooks/useMutationObserver';
+import useOnClickOutSide from '../hooks/useOnClickOutSide';
+import useControlled from '../hooks/useControlled';
+import useTrigger from './hooks/useTrigger';
+import './Popup.scss';
+
+interface IPopupProps {
+  content?: ReactNode;
+  onVisibleChange?: (r: any) => any;
+  children: any;
+  visible?: boolean;
+  trigger?: 'hover' | 'click';
+  disabled?: boolean;
+  teleported?: boolean;
+}
+
+const Popup = forwardRef((props: IPopupProps, ref: any) => {
+  const {
+    children, content, trigger = 'hover', disabled = false, teleported = true,
+  } = props;
+  const [referenceElement, setReferenceElement] = useState(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const contentRef = useRef(null); // The content section.
+  const updateTimeRef = useRef<any>();
+  const popupRef = useRef(null);
+  const { styles } = usePopper(referenceElement, popperElement, {
+    modifiers: [{ name: 'arrow', options: { element: arrowElement } }],
+    placement: 'top',
+  });
+
+  const [visible, onVisibleChange] = useControlled({
+    props,
+    key: 'visible',
+    onChange: props.onVisibleChange,
+    defaultOptions: { visible: false },
+  });
+  useOnClickOutSide([popupRef], () => visible && onVisibleChange(false));
+  const {
+    getTriggerNode, getPopupProps,
+  } = useTrigger({
+    trigger, disabled, visible, onVisibleChange,
+  });
+  // Listens for changes in the trigger node to dynamically update the position of the popup.
+  const cb = useCallback(() => {
+    clearTimeout(updateTimeRef.current);
+    updateTimeRef.current = setTimeout(() => popperElement?.update?.(), 0);
+  }, [popperElement, styles]);
+  useMutationObserver(referenceElement, cb);
+  useEffect(() => () => clearTimeout(updateTimeRef.current), []);
+
+  const triggerNode = React.cloneElement(getTriggerNode(children), { ref: setReferenceElement });
+
+  const overlayContent = (
+    <div style={{ ...styles.popper, paddingBottom: '10px' }} ref={setPopperElement} {...getPopupProps()}>
+      <div
+        ref={contentRef}
+        className={classNames(
+          `${classPrefix}-popup__content`,
+        )}
+      >
+        {content}
+      </div>
+      <div ref={arrowElement} style={styles.arrow} className={`${classPrefix}-popup__arrow`} />
+    </div>
+  );
+
+  const overlay = teleported ? (
+    <Portal>
+      {overlayContent}
+    </Portal>
+  ) : (
+    overlayContent
+  );
+
+  return (
+    <div ref={popupRef}>
+      {triggerNode}
+      {visible && overlay}
+    </div>
+  );
+});
+
+export default Popup;

package/src/Components/components/base/Popup/hooks/useTrigger.tsx

@@ -0,0 +1,67 @@
+import React, { isValidElement, useRef } from 'react';
+
+export default function useTrigger({
+  trigger, visible, disabled, onVisibleChange,
+}) {
+  const visibleTimer = useRef<any>(null);
+
+  function getPopupProps(): any {
+    if (disabled) return {};
+
+    return {
+      onMouseEnter: () => {
+        if (trigger === 'hover') {
+          clearTimeout(visibleTimer.current);
+          onVisibleChange(true);
+        }
+      },
+      onMouseLeave: () => {
+        if (trigger === 'hover') {
+          clearTimeout(visibleTimer.current);
+          onVisibleChange(false);
+        }
+      },
+    };
+  }
+  function getTriggerProps(triggerNode) {
+    if (disabled) return {};
+
+    const triggerProps: any = {
+      onClick: (e) => {
+        if (trigger === 'click') {
+          onVisibleChange(!visible);
+        }
+
+        triggerNode.props?.onClick?.(e);
+      },
+      onTouchStart: () => {
+        if (trigger === 'hover') {
+          onVisibleChange(true);
+        }
+      },
+      onMouseEnter: () => {
+        if (trigger === 'hover') {
+          onVisibleChange(true);
+        }
+      },
+      onMouseLeave: () => {
+        if (trigger === 'hover') {
+          onVisibleChange(false);
+        }
+      },
+    };
+
+    return triggerProps;
+  }
+
+  function getTriggerNode(children) {
+    const triggerNode = isValidElement(children) ? children : <span className='t-trigger'>{children}</span>;
+    const triggerProps = getTriggerProps(triggerNode);
+
+    return React.cloneElement(triggerNode, triggerProps);
+  }
+  return {
+    getTriggerNode,
+    getPopupProps,
+  };
+}

package/src/Components/components/base/Portal/Portal.tsx

@@ -0,0 +1,74 @@
+import React, {
+  forwardRef, useEffect, useMemo, useImperativeHandle, CSSProperties,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { AttachNode, AttachNodeReturnValue, classPrefix } from '../common';
+import { canUseDocument } from '../util';
+
+export interface PortalProps {
+  /**
+   * Specifies the HTML node to mount, with false being mounted on the body.
+   */
+  attach?: React.ReactElement | AttachNode | boolean;
+  /**
+   * Trigger element.
+   */
+  triggerNode?: HTMLElement;
+  children: React.ReactNode;
+  className?: string;
+  onClick?: (e: any) => any;
+  style?: CSSProperties;
+}
+
+export function getAttach(attach: PortalProps['attach'], triggerNode?: HTMLElement): AttachNodeReturnValue {
+  if (!canUseDocument) return null;
+
+  let el: AttachNodeReturnValue;
+  if (typeof attach === 'string') {
+    el = document.querySelector(attach);
+  }
+  if (typeof attach === 'function') {
+    el = attach(triggerNode);
+  }
+  if (typeof attach === 'object' && attach instanceof window.HTMLElement) {
+    el = attach;
+  }
+
+  // fix el in iframe
+  if (el && el.nodeType === 1) return el;
+
+  return document.body;
+}
+
+const Portal = forwardRef((props: PortalProps, ref) => {
+  const {
+    attach, children, triggerNode, className, style = {},
+  } = props;
+
+  const container = useMemo(() => {
+    if (!canUseDocument) return null;
+    const el = document.createElement('div');
+    el.className = `${classPrefix}-portal-wrapper ${className}`;
+    Object.keys(style).forEach((key) => {
+      el.style[key] = style[key];
+    });
+    return el;
+  }, [classPrefix, className]);
+
+  useEffect(() => {
+    const parentElement = getAttach(attach, triggerNode);
+    parentElement?.appendChild?.(container);
+
+    return () => {
+      parentElement?.removeChild?.(container);
+    };
+  }, [container, attach, triggerNode]);
+
+  useImperativeHandle(ref, () => container);
+
+  return createPortal(children, container);
+});
+
+Portal.displayName = 'Portal';
+
+export default Portal;

package/src/Components/components/base/Text/Text.scss

@@ -0,0 +1,15 @@
+@import '../../../style/common/var.scss';
+
+.#{$prefix}-text {
+  display: inline-block;
+  overflow: hidden;
+  text-align: center;
+  line-height: normal;
+  white-space: nowrap;
+
+  &.#{$prefix}-text--line-clamp {
+    display: -webkit-inline-box;
+    -webkit-box-orient: vertical;
+    white-space: normal;
+  }
+}

package/src/Components/components/base/Text/Text.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { classNames } from '../../../util/classnames';
+import { classPrefix } from '../common';
+import './Text.scss';
+
+interface IText {
+  maxWidth?: string;
+  truncated?: boolean;
+  lineClamp?: number;
+  className?: string;
+  children?: any;
+}
+
+export default function Text(props: IText) {
+  const {
+    maxWidth, truncated, lineClamp, children, className,
+  } = props;
+
+  const classnames = classNames([
+    className,
+    `${classPrefix}-text`,
+  ]);
+
+  const style = {
+    maxWidth,
+    textOverflow: truncated ? 'ellipsis' : 'auto',
+    WebkitLineClamp: lineClamp,
+  };
+  return <span style={style} className={classnames}>{children}</span>;
+}

package/src/Components/components/base/Time/Time.scss

@@ -0,0 +1,14 @@
+@use "../../../style/theme/util" as *;
+@import "../../../style/common/var.scss";
+
+.#{$prefix}-time {
+  font-family: PingFang SC;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: 0px;
+  text-align: center;
+  @include theme() {
+    color: get(white-1);  
+  }
+}

package/src/Components/components/base/Time/Time.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { classPrefix } from '../../../const/common';
+import './Time.scss';
+
+interface ITimeProps {
+  callDuration?: string;
+  style?: object;
+}
+
+export default function Time(props: ITimeProps) {
+  const { callDuration, style } = props;
+  return <div className={`${classPrefix}-time`} style={style}>{callDuration}</div>;
+}

package/src/Components/components/base/ToggleWindow/ToggleWindow.scss

@@ -0,0 +1,9 @@
+@import '../../../style/common/var.scss';
+@import '../../../style/common/mixin.scss';
+
+.#{$prefix}-togglewindow-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 6px;
+}

package/src/Components/components/base/ToggleWindow/ToggleWindow.tsx

@@ -0,0 +1,83 @@
+/* eslint-disable react/jsx-no-constructed-context-values */
+import React, {
+  useMemo, useState, createContext, useEffect,
+} from 'react';
+import { classNames } from '../../../util/classnames';
+import { classPrefix } from '../../../const/common';
+import './ToggleWindow.scss';
+
+function getNonSpecifiedElement<T>(array: T[], specified: T) {
+  for (let i = 0; i < array.length; i++) {
+    if (array[i] !== specified) {
+      return array[i];
+    }
+  }
+}
+
+export const ToggleWindowContext = createContext({ bigWindow: null });
+interface IToggleWindowProps {
+  bigWindow: string;
+  className?: string;
+  isMobile?: boolean;
+  showSmallWindow?: boolean;
+  children?: any;
+  onToggle?: (r?: any) => any;
+}
+export function ToggleWindow(props: IToggleWindowProps) {
+  const {
+    bigWindow: initBigWindow,
+    className,
+    isMobile,
+    showSmallWindow = true,
+    onToggle,
+    children = null,
+  } = props;
+  const [bigWindow, setBigWindow] = useState(initBigWindow);
+
+  useEffect(() => {
+    setBigWindow(initBigWindow);
+  }, [initBigWindow]);
+
+  const classnames = classNames([
+    `${classPrefix}-togglewindow-container`,
+    className,
+  ]);
+
+  const filterChildren = useMemo(() => {
+    const toggleWindowChildren: any[] = [];
+    const values: string[] = [];
+
+    if (children) {
+      React.Children.map(children, (child) => {
+        if (child?.type?.displayName === 'ToggleWindowItem' && toggleWindowChildren.length < 2) {
+          // @ts-ignore
+          toggleWindowChildren.push(React.cloneElement(child, { isMobile, showSmallWindow }));
+          values.push(child?.props?.value);
+        }
+
+        if (toggleWindowChildren.length >= 2) {
+          return null;
+        }
+      });
+    }
+
+    const updateBigWindow = () => {
+      setBigWindow((state) => {
+        const result = getNonSpecifiedElement<string>(values, state);
+        onToggle?.(result);
+        return result;
+      });
+    };
+    return toggleWindowChildren.map(
+      (child) => React.cloneElement(child, { updateBigWindow }),
+    );
+  }, [children]);
+
+  return (
+    <div className={classnames}>
+      <ToggleWindowContext.Provider value={{ bigWindow }}>
+        {filterChildren}
+      </ToggleWindowContext.Provider>
+    </div>
+  );
+}

package/src/Components/components/base/ToggleWindow/ToggleWindowItem/ToggleWindowItem.scss

@@ -0,0 +1,51 @@
+@use "../../../../style/theme/util" as *;
+@import '../../../../style/common/var.scss';
+
+.#{$prefix}-togglewindowitem-container {
+  position: absolute;
+  border-radius: 12px;
+  overflow: hidden;
+
+  &.mobile {
+    border-radius: 0;
+  }
+
+  &.#{$prefix}-togglewindowitem-big {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    
+    @include theme() {
+      background-color: get(black-2);
+    }
+  }
+
+  &.#{$prefix}-togglewindowitem-small {
+    top: 2%;
+    left: 2%;
+    width: 22%;
+    height: 21%;
+    z-index: 2;
+    border-radius: 12px;
+    @include theme() {
+      background-color: get(black-2);
+    }
+
+    &.mobile {
+      // transform: translate(284px, 43.3281px);
+      width: 24.3%;
+      height: 19.7%;
+      // left: auto;
+      // right: 3.2vw;
+      // top: 3.7vh;
+      border-radius: 5px;
+      left: 98%;
+      position: absolute;
+      top: 8%;
+      transform: translateX(-100%);
+    }
+  }
+}

package/src/Components/components/base/ToggleWindow/ToggleWindowItem/ToggleWindowItem.tsx

@@ -0,0 +1,50 @@
+import React, { useContext } from 'react';
+import { classPrefix } from '../../../../const/common';
+import { classNames } from '../../../../util/classnames';
+import { ToggleWindowContext } from '../ToggleWindow';
+import { Visibility } from '../../common';
+import './ToggleWindowItem.scss';
+
+interface IToggleWindowItem {
+  value?: string;
+  isMobile?: boolean;
+  children?: any;
+  className?: string;
+  updateBigWindow?: () => any;
+  showSmallWindow?: boolean;
+}
+
+export default function ToggleWindowItem(props: IToggleWindowItem) {
+  const {
+    children, value, isMobile, updateBigWindow, showSmallWindow, className,
+  } = props;
+  const { bigWindow } = useContext(ToggleWindowContext);
+  const isSmallWindow = bigWindow !== value;
+  const classnames = classNames([
+    className,
+    `${classPrefix}-togglewindowitem-container`,
+    `${classPrefix}-togglewindowitem-${isSmallWindow ? 'small' : 'big'}`,
+    { mobile: isMobile },
+  ]);
+
+  const render = () => {
+    let visibility: Visibility;
+
+    if (!showSmallWindow && isSmallWindow) {
+      visibility = 'hidden';
+    }
+
+    return (
+      <div
+        onClick={() => isSmallWindow && updateBigWindow()}
+        className={classnames}
+        style={{ visibility }}
+      >
+        {children}
+      </div>
+    );
+  };
+  return <>{render()}</>;
+}
+
+ToggleWindowItem.displayName = 'ToggleWindowItem';

package/src/Components/components/base/ToggleWindow/index.ts

@@ -0,0 +1,7 @@
+import ToggleWindowItem from './ToggleWindowItem/ToggleWindowItem';
+import { ToggleWindow } from './ToggleWindow';
+
+export {
+  ToggleWindow,
+  ToggleWindowItem,
+};

package/src/Components/components/base/common.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+
+export const classPrefix = 'tk';
+
+export type CSSSelector = string;
+export type AttachNodeReturnValue = HTMLElement | Element | Document;
+export type AttachNode = CSSSelector | ((triggerNode?: HTMLElement) => AttachNodeReturnValue);
+
+export type TNode<T = undefined> = T extends undefined
+  ? ReactNode
+  : ReactNode | ((props: T) => ReactNode);
+
+export type Visibility = 'visible' | 'hidden';

package/src/Components/components/base/hooks/useControlled.ts

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { noop } from '../util';
+
+interface IUseControlledProps<R, K> {
+  props: R
+  key: K;
+  onChange?: (e?: any) => any;
+  defaultOptions?: any
+}
+
+export default function useControlled<R extends object, K extends keyof R>({
+  props, key, onChange, defaultOptions,
+}: IUseControlledProps<R, K>) {
+  const controlled = Reflect.has(props, key);
+  const value = props[key];
+  const defaultValue = defaultOptions[key];
+
+  if (controlled) {
+    return [value, onChange || noop];
+  }
+
+  const [internalValue, setInternalValue] = useState(defaultValue);
+
+  return [
+    internalValue,
+    (newValue) => {
+      setInternalValue(newValue);
+      onChange?.(newValue);
+    },
+  ];
+}