@trtc/calls-uikit-react 4.1.0

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

@@ -0,0 +1,107 @@
+import React, { CSSProperties, ReactNode, forwardRef } from 'react';
+import { classNames } from '../../../util/classnames';
+import { classPrefix } from '../../../const/common';
+import Loading from '../Loading/Loading';
+import './Button.scss';
+
+interface IButtonProps {
+  children?: ReactNode;
+  danger?: boolean;
+  disabled?: boolean;
+  icon?: ReactNode;
+  showText?: boolean;
+  ghost?: boolean;
+  loading?: boolean;
+  content?: string;
+  shape?: 'default' | 'cicle' | 'round';
+  size?: 'large' | 'middle' | 'small';
+  iconSize?: string;
+  type?: 'primary' | 'dashed' | 'link' | 'text' | 'default';
+  direction?: 'horizontal' | 'vertical';
+  className?: string;
+  iconClassName?: string;
+  isMobile?: boolean;
+  style?: CSSProperties;
+  isStopPropagation?: boolean;
+  onClick?: (event?: any) => void;
+}
+
+const Button = forwardRef((props: IButtonProps, ref: React.ForwardedRef<any>) => {
+  const {
+    icon,
+    iconSize,
+    content,
+    loading,
+    children,
+    showText = true,
+    ghost = false,
+    onClick = (event?: any) => null,
+    isStopPropagation = false,
+    size = 'middle',
+    direction = 'vertical',
+    className = '',
+    iconClassName = '',
+    isMobile = false,
+    style,
+    ...rest
+  } = props;
+
+  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    if (isStopPropagation) {
+      event.stopPropagation();
+    }
+
+    // eslint-disable-next-line no-unused-expressions
+    !loading && onClick?.(event);
+  };
+
+  const renderIconNode = () => {
+    const classnames = classNames([
+      `${classPrefix}-icon`,
+      iconClassName,
+      {
+        [`${classPrefix}-size-s`]: size === 'small',
+        [`${classPrefix}-size-m`]: size === 'middle',
+        [`${classPrefix}-size-l`]: size === 'large',
+      },
+    ]);
+    const iconStyle = iconSize ? { width: iconSize, height: iconSize } : {};
+    return (
+      <div
+        className={classnames}
+        onClick={handleClick}
+        style={iconStyle}
+      >
+        {loading ? <Loading showOverlayer={false} /> : icon}
+      </div>
+    );
+  };
+  const renderChildren = () => showText && <div className={`${classPrefix}-content`}>{content || children}</div>;
+
+  return (
+    <div
+      ref={ref}
+      style={style}
+      className={classNames([
+        className,
+        `${classPrefix}-btn-container`,
+        {
+          mobile: isMobile,
+          pc: !isMobile,
+          [`${classPrefix}-flex-vertical`]: direction === 'vertical',
+          [`${classPrefix}-flex-horizontal`]: direction === 'horizontal',
+          [`${classPrefix}-size-s`]: size === 'small',
+          [`${classPrefix}-size-m`]: size === 'middle',
+          [`${classPrefix}-size-l`]: size === 'large',
+          [`${classPrefix}-ghost`]: ghost === true,
+        },
+      ])}
+      {...rest}
+    >
+      {icon && renderIconNode()}
+      {renderChildren()}
+    </div>
+  );
+});
+
+export default Button;

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

@@ -0,0 +1,3 @@
+import Button from './Button';
+
+export default Button;

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

@@ -0,0 +1,155 @@
+import React, { CSSProperties, MutableRefObject, useEffect, useMemo, useRef, useState } from 'react';
+import { TUIGlobal } from '../../../../TUICallService';
+
+type TPosition = Pick<CSSProperties, 'left' | 'top' | 'right' | 'bottom'>;
+interface IDraggableProps {
+  nodeRef?: MutableRefObject<HTMLElement>;
+  disable?: boolean;
+  initialPosition?: TPosition;
+  style?: CSSProperties;
+  onMoveStart?: () => void;
+  onMoveEnd?: () => void;
+  onPositionChange?: (params: TPosition) => void;
+  children?: any;
+}
+
+const EventsFor = {
+  touch: {
+    start: 'onTouchStart',
+    move: 'touchmove',
+    stop: 'touchend',
+  },
+  mouse: {
+    start: 'onMouseDown',
+    move: 'mousemove',
+    stop: 'mouseup',
+  },
+};
+const pointerEvents = EventsFor[TUIGlobal.isH5 ? 'touch' : 'mouse'];
+
+function getClientXY(e) {
+  if (TUIGlobal.isH5) {
+    e = e.touches[0];
+  }
+
+  return { clientX: e.clientX, clientY: e.clientY };
+}
+
+export default function Draggable(props: IDraggableProps) {
+  const {
+    nodeRef,
+    children,
+    onMoveStart,
+    onMoveEnd,
+    onPositionChange,
+    initialPosition = { left: '0px', top: '0px' },
+  } = props;
+  const isMoving = useRef(false);
+  const boundSize = useRef<any>({});
+  const positionRef = useRef({ left: 0, top: 0 });
+  const [position, setPosition] = useState(initialPosition);
+  const [currentPosition, setCurrentPosition] = useState<TPosition>();
+  useEffect(() => {
+    return () => {
+      if (nodeRef.current) {
+        nodeRef.current.ownerDocument.removeEventListener(pointerEvents.move, onMove);
+        nodeRef.current.ownerDocument.removeEventListener(pointerEvents.stop, onStop);
+      }
+    }
+  }, [nodeRef.current]);
+
+  const getBoundSize = (e) => {
+    const { clientX, clientY } = getClientXY(e);
+    const oW = clientX - nodeRef.current?.getBoundingClientRect().left;
+    const oH = clientY - nodeRef.current?.getBoundingClientRect().top;
+    const htmlWidth = document.documentElement.clientWidth;
+    const htmlHeight = document.documentElement.clientHeight;
+    const bWidth = nodeRef.current.offsetWidth;
+    const bHeight = nodeRef.current.offsetHeight;
+
+    return { oW, oH, htmlWidth, htmlHeight, bWidth, bHeight };
+  };
+  const getPosition = (e) => {
+    const { clientX, clientY } = getClientXY(e);
+    const left = clientX - boundSize.current.oW;
+    const top = clientY - boundSize.current.oH;
+
+    return { left, top };
+  };
+  const onStart = (e) => {
+    isMoving.current = true;
+    boundSize.current = getBoundSize(e);
+    positionRef.current = getPosition(e);
+    setPosition({ left: '0px', top: '0px' });
+
+    nodeRef.current.ownerDocument.addEventListener(pointerEvents.move, onMove);
+    nodeRef.current.ownerDocument.addEventListener(pointerEvents.stop, onStop);
+  };
+  const onDragMove = (e) => {
+    onMoveStart?.();
+    let { left, top } = getPosition(e);
+
+    if (left < 0) {
+      left = 0;
+    } else if (left > boundSize.current.htmlWidth - boundSize.current.bWidth) {
+      left = boundSize.current.htmlWidth - boundSize.current.bWidth;
+    }
+
+    if (top < 0) {
+      top = 0;
+    } else if (top > boundSize.current.htmlHeight - boundSize.current.bHeight) {
+      top = boundSize.current.htmlHeight - boundSize.current.bHeight;
+    }
+
+    positionRef.current = { left, top };
+    onPositionChange?.({ left, top });
+    setCurrentPosition({ left, top });
+  };
+  const onMove = (e) => {
+    isMoving.current && onDragMove(e)
+  };
+  const onStop = (e) => {
+    isMoving.current = false;
+    let left = positionRef.current.left;
+    // @ts-ignore
+    if (left < (boundSize.current.htmlWidth - boundSize.current.bWidth) / 2) {
+      left = 0;
+    } else {
+      left = boundSize.current.htmlWidth - boundSize.current.bWidth;
+    }
+
+    positionRef.current = TUIGlobal.isH5 ? { left, top: positionRef.current.top } : { left: positionRef.current.left, top: positionRef.current.top };
+
+    setTimeout(() => {
+      onMoveEnd?.();
+    }, 0);
+
+    nodeRef.current.ownerDocument.removeEventListener(pointerEvents.move, onMove);
+    nodeRef.current.ownerDocument.removeEventListener(pointerEvents.stop, onStop);
+  };
+
+  const transform = useMemo(() =>
+    `translate(${positionRef.current.left}px, ${positionRef.current.top}px)`,
+    [positionRef.current],
+  );
+
+  return (
+    <>
+     {
+      React.cloneElement(children, {
+        style: {
+          ...(children?.props?.style || {}),
+          position: 'absolute',
+          zIndex: 999,
+          touchAction: 'none',
+          ...position,
+          transform,
+          userSelect: 'none',
+          WebkitUserSelect: 'none',
+        },
+        [pointerEvents.start]: onStart,
+      })
+     }
+    </>
+  );
+}

package/src/Components/components/base/Drag/index.tsx

@@ -0,0 +1,3 @@
+import Drag from './Drag';
+
+export { Drag }

package/src/Components/components/base/Grid/Col/Col.scss

@@ -0,0 +1,31 @@
+@import '../../../../style/common/var.scss';
+@import '../style/mixin.scss';
+
+.#{$prefix}-col-container {
+  display: flex;
+  box-sizing: border-box;
+  overflow: hidden;
+  align-items: center;
+
+  &.#{$prefix}-col-justify-content-start {
+    justify-content: flex-start;
+  }
+  &.#{$prefix}-col-justify-content-center {
+    justify-content: center;
+  }
+  &.#{$prefix}-col-justify-content-end {
+    justify-content: flex-end;
+  }
+
+  &.#{$prefix}-col-align-items-start {
+    align-items: flex-start;
+  }
+  &.#{$prefix}-col-align-items-center {
+    align-items: center;
+  }
+  &.#{$prefix}-col-align-items-end {
+    align-items: flex-end;
+  }
+}
+
+@include gen-grid();

package/src/Components/components/base/Grid/Col/Col.tsx

@@ -0,0 +1,52 @@
+import React, { CSSProperties, ReactNode, useContext } from 'react';
+import { classNames } from '../../../../util/classnames';
+import { RowContext } from '../Row';
+import { classPrefix } from '../../../../const/common';
+import './Col.scss';
+
+interface IColProps {
+  children?: ReactNode;
+  span?: number;
+  align?: 'start' | 'center' | 'end';
+  justify?: 'start' | 'center' | 'end';
+  style?: CSSProperties;
+}
+export default function Col(props: IColProps) {
+  const {
+    span = 12,
+    children,
+    style = {},
+    justify = 'center',
+    align = 'start',
+  } = props;
+  const { gutter } = useContext(RowContext);
+
+  const classnames = classNames([
+    `${classPrefix}-col-container`,
+    `${classPrefix}-col-${span}`,
+    `${classPrefix}-col-justify-content-${justify}`,
+    `${classPrefix}-col-align-items-${align}`,
+  ]);
+
+  const calcColStyle = () => {
+    if (typeof gutter === 'number') {
+      return {
+        paddingLeft: `${gutter / 2}px`,
+        paddingRight: `${gutter / 2}px`,
+      };
+    }
+  };
+
+  const colStyle = calcColStyle();
+
+  return (
+    <div
+      className={classnames}
+      style={{ ...colStyle, ...style }}
+    >
+      {children}
+    </div>
+  );
+}
+
+Col.displayName = 'Col';

package/src/Components/components/base/Grid/Col/index.ts

@@ -0,0 +1,3 @@
+import Col from './Col';
+
+export default Col;

package/src/Components/components/base/Grid/Row/Row.scss

@@ -0,0 +1,27 @@
+@import '../../../../style/common/var.scss';
+
+.#{$prefix}-row-container {
+  display: flex;
+  width: 100%;
+  // height: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-flow: row wrap;
+  flex-direction: row;
+  flex-wrap: nowrap;
+
+  &.#{$prefix}-row-justify-left {
+    justify-content: flex-start;
+  }
+
+  &.#{$prefix}-row-justify-center {
+    justify-content: center;
+  }
+
+  &.#{$prefix}-row-justify-right {
+    justify-content: flex-end;
+  }
+}

package/src/Components/components/base/Grid/Row/Row.tsx

@@ -0,0 +1,51 @@
+import React, { CSSProperties, createContext, useMemo } from 'react';
+import { classNames } from '../../../../util/classnames';
+import { classPrefix } from '../../../../const/common';
+import './Row.scss';
+
+interface IRowProps {
+  className?: string;
+  children?: any;
+  gutter?: number | Array<number>;
+  justify?: 'left' | 'center' | 'right';
+  style?: CSSProperties;
+}
+
+export const RowContext = createContext<{ gutter?: number | number[] }>({ gutter: undefined });
+
+export default function Row(props: IRowProps) {
+  const {
+    className = '',
+    children = [],
+    gutter,
+    style,
+    justify = 'center',
+  } = props;
+
+  const RowContextValue = useMemo(() => ({ gutter }), [gutter]);
+
+  const classnames = classNames([
+    `${classPrefix}-row-container`,
+    `${classPrefix}-row-justify-${justify}`,
+    className,
+  ]);
+
+  const renderCols = () => {
+    const childrenLen = children?.length || 0;
+
+    if (childrenLen < 2) {
+      return children;
+    }
+    return React.Children.map(children, (child) => {
+      if (child?.type?.displayName === 'Col') {
+        return child;
+      }
+    });
+  };
+
+  return (
+    <div className={classnames} style={style}>
+      <RowContext.Provider value={RowContextValue}>{renderCols()}</RowContext.Provider>
+    </div>
+  );
+}

package/src/Components/components/base/Grid/Row/index.ts

@@ -0,0 +1,5 @@
+import Row, { RowContext } from './Row';
+
+export default Row;
+
+export { RowContext };

package/src/Components/components/base/Grid/style/mixin.scss

@@ -0,0 +1,61 @@
+@use 'sass:math';
+@import '../../../../style/common/var.scss';
+
+@mixin gen-grid-columns($index, $class) {
+  @if $index > 0 {
+    .#{$prefix}-col#{$class}-#{$index} {
+      flex: 0 0 math.percentage(calc($index / $grid-columns));
+      max-width: math.percentage(calc($index / $grid-columns));
+    }
+
+    .#{$prefix}-col#{$class}-push-#{$index} {
+      left: math.percentage(calc($index / $grid-columns));
+    }
+
+    .#{$prefix}-col#{$class}-pull-#{$index} {
+      right: math.percentage(calc($index / $grid-columns));
+    }
+
+    .#{$prefix}-col#{$class}-offset-#{$index} {
+      margin-left: math.percentage(calc($index / $grid-columns));
+    }
+
+    .#{$prefix}-col#{$class}-order-#{$index} {
+      order: $index;
+    }
+
+    @include gen-grid-columns($index - 1, $class);
+  } @else {
+    .#{$prefix}-col#{$class}-#{$index} {
+      display: none;
+    }
+
+    .#{$prefix}-col-push-#{$index} {
+      left: auto;
+    }
+
+    .#{$prefix}-col-pull-#{$index} {
+      right: auto;
+    }
+
+    .#{$prefix}-col#{$class}-push-#{$index} {
+      left: auto;
+    }
+
+    .#{$prefix}-col#{$class}-pull-#{$index} {
+      right: auto;
+    }
+
+    .#{$prefix}-col#{$class}-offset-#{$index} {
+      margin-left: 0;
+    }
+
+    .#{$prefix}-col#{$class}-order-#{$index} {
+      order: 0;
+    }
+  }
+}
+
+@mixin gen-grid($class: '') {
+  @include gen-grid-columns($grid-columns, $class);
+}

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

@@ -0,0 +1,189 @@
+import React, {
+  useState,
+  useMemo,
+  useContext,
+} from 'react';
+import { CallInfoContext } from '../../../context';
+
+interface IGridLayoutPRops {
+  rowHeight?: number;
+  children?: any;
+  unit?: 'vw' | '%';
+  className?: string;
+  enableFocus?: boolean;
+  isMobile?: boolean;
+  onHandleFocusChange?: (params?: any) => any;
+}
+
+export default function GridLayout(props: IGridLayoutPRops) {
+  const { isFloat } = useContext(CallInfoContext);
+  const width = 100;
+  let {
+    // eslint-disable-next-line prefer-const
+    rowHeight, unit = '%', className, isMobile, onHandleFocusChange, enableFocus = false, children,
+  } = props;
+  const [focus, setFocus] = useState(null);
+  const defaultLayout = useMemo(() => {
+    const len = children.length;
+    if (len <= 3) {
+      return [{
+        x: 0, y: 0, w: 6, h: 6,
+      }, {
+        x: 6, y: 0, w: 6, h: 6,
+      }, {
+        x: 3, y: 6, w: 6, h: 6,
+      }];
+    }
+    if (len === 4) {
+      return [{
+        x: 0, y: 0, w: 6, h: 6,
+      }, {
+        x: 6, y: 0, w: 6, h: 6,
+      }, {
+        x: 0, y: 6, w: 6, h: 6,
+      }, {
+        x: 6, y: 6, w: 6, h: 6,
+      }];
+    }
+    const layoutArr = [{
+      x: 0, y: 0, w: 4, h: 4,
+    }];
+    for (let i = 1; i < len; i++) {
+      const isWrap = layoutArr[i - 1].x + 4 === 12;
+      layoutArr[i] = {
+        x: layoutArr[i - 1].x + 4 === 12 ? 0 : layoutArr[i - 1].x + 4,
+        y: layoutArr[i - 1].y + (isWrap ? 4 : 0),
+        w: 4,
+        h: 4,
+      };
+    }
+
+    if (!isMobile) {
+      if (len % 3 === 1) {
+        layoutArr[len - 1].x += 2;
+      }
+      if (len % 3 === 2) {
+        layoutArr[len - 1].x += 2;
+        layoutArr[len - 2].x += 2;
+      }
+    }
+
+    return layoutArr;
+  }, [children, isMobile]);
+  function handleClick(index) {
+    if (index === focus) {
+      setFocus(null);
+      onHandleFocusChange?.(null);
+    } else {
+      setFocus(index);
+      onHandleFocusChange?.(index);
+    }
+  }
+  const colWidth = width / 12;
+  rowHeight = colWidth;
+  const arr = Object.keys(Array.from({ length: defaultLayout.length }));
+  const newLayout = useMemo(() => {
+    const defaultLayout1 = JSON.parse(JSON.stringify(defaultLayout));
+    let colIndex;
+    let rowIndex;
+    if (focus != null) {
+      if (arr.length < 5) {
+        const newArr = arr.concat();
+        newArr.splice(focus, 1);
+        newArr.unshift(focus);
+      } else {
+        rowIndex = focus % 3;
+        colIndex = Math.floor(focus / 3);
+      }
+
+      if (arr.length < 5) {
+        for (let i = 0; i < defaultLayout1.length; i++) {
+          const item = defaultLayout1[i];
+          if (i === 0) {
+            item.w += 6;
+            item.h += 6;
+          } else {
+            item.x = (i - 1) * 4;
+            item.y = 12;
+            item.w = 4;
+            item.h = 4;
+          }
+        }
+        const rs = defaultLayout1.shift();
+        defaultLayout1.splice(focus, 0, rs);
+      } else {
+        let focusStyle;
+        if (rowIndex === 0) {
+          if (defaultLayout1[focus + 1]) defaultLayout1[focus + 1].x += 4;
+          if (defaultLayout1[focus + 2]) defaultLayout1[focus + 2].y += 4;
+          focusStyle = {
+            x: 0,
+            y: colIndex * 4,
+            w: 8,
+            h: 8,
+          };
+        } else if (rowIndex === 2) {
+          focusStyle = {
+            x: 4,
+            y: colIndex * 4,
+            w: 8,
+            h: 8,
+          };
+          defaultLayout1[focus - 1].x = 0;
+          defaultLayout1[focus - 1].y += 4;
+        } else if (rowIndex === 1) {
+          focusStyle = {
+            x: 4,
+            y: colIndex * 4,
+            w: 8,
+            h: 8,
+          };
+          if (defaultLayout1[focus + 1]) {
+            defaultLayout1[focus + 1].x = 0;
+            defaultLayout1[focus + 1].y += 4;
+          }
+        }
+        const start = 3 - rowIndex;
+        for (let i = focus + start; i < defaultLayout1.length; i++) {
+          const item = defaultLayout1[i];
+          item.y += 4;
+        }
+        defaultLayout1[focus] = focusStyle;
+      }
+
+      return defaultLayout1;
+    }
+    return defaultLayout1;
+  }, [focus, defaultLayout]);
+  return (
+    <div className={className}>
+      {children?.map((child, index) => {
+        const {
+          x, y, w, h,
+        } = newLayout[index];
+        let style = {
+          width: w * colWidth + unit,
+          height: h * rowHeight + unit,
+          left: (x) * colWidth + unit,
+          top: (y) * rowHeight + unit,
+          position: 'absolute',
+        };
+
+        if (isFloat) {
+          style = {
+            width: '100%',
+            height: '100%',
+            left: '0px',
+            top: '0px',
+            position: 'absolute',
+          };
+        }
+
+        return React.cloneElement(
+          child,
+          { style, updateFocusItem: () => enableFocus && handleClick(index) },
+        );
+      })}
+    </div>
+  );
+}