@trtc/calls-uikit-react 4.1.0

package/src/Components/components/base/GridLayout/GridPlusItem/GridPlusItem.scss

@@ -0,0 +1,11 @@
+@import '../../../../style/common/var.scss';
+
+.#{$prefix}-gridplus-item-container {
+  transition-property: width,height,left,top;
+  transition-duration: 0.3s;
+  transition-timing-function: ease-in;
+
+  &.center {
+    transform: translateX(50%);
+  }
+}

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

@@ -0,0 +1,37 @@
+import React, { CSSProperties } from 'react';
+import { classNames } from '../../../../util/classnames';
+import { classPrefix } from '../../../../const/common';
+import './GridPlusItem.scss';
+
+interface IGridPlusItemProps {
+  index: number;
+  className?: string;
+  style?: CSSProperties;
+  updateFocusItem?: (index?: number) => any;
+  children?: any;
+}
+
+function GridPlusItem(props: IGridPlusItemProps) {
+  const {
+    index, children, className, style, updateFocusItem,
+  } = props;
+
+  const classnames = classNames([
+    `${classPrefix}-gridplus-item-container`,
+    className,
+  ]);
+
+  return (
+    <div
+      className={classnames}
+      onClick={() => updateFocusItem?.(index)}
+      style={{ gridArea: `gridplus-item-${index}`, ...style }}
+    >
+      {children}
+    </div>
+  );
+}
+
+GridPlusItem.displayname = 'GridPlusItem';
+
+export default GridPlusItem;

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

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

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

@@ -0,0 +1,25 @@
+import React, { CSSProperties } from 'react';
+
+interface IconProps {
+  url?: string;
+  style?: CSSProperties;
+  className?: string;
+  onClick?: (e: any) => any;
+}
+export default function Icon(props: IconProps) {
+  const {
+    url,
+    style,
+    className,
+    onClick = () => null,
+  } = props;
+  return (
+    <img
+      className={className}
+      style={{ width: '100%', height: '100%', ...style }}
+      src={url}
+      onClick={onClick}
+      alt=''
+    />
+  );
+}

package/src/Components/components/base/Loading/Circle/Cilrcle.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { classPrefix } from '../../../../const/common';
+import loadingSrc from '../../../../assets/base/loading-circle.svg';
+import './Circle.scss';
+
+interface ICircleProps {
+  size?: number | string;
+}
+
+export default function Circle(props: ICircleProps) {
+  const { size } = props;
+  return (
+    <div
+      className={`${classPrefix}-circle-container`}
+      style={{ width: size, height: size }}
+    >
+      <img alt='' style={{ width: '100%', height: '100%' }} className={`${classPrefix}-circle-loading`} src={loadingSrc} />
+    </div>
+  );
+}

package/src/Components/components/base/Loading/Circle/Circle.scss

@@ -0,0 +1,29 @@
+@import '../../../../style/common/var.scss';
+
+.#{$prefix}-circle-container {
+  width: 30px;
+  height: 30px;
+  margin: 0 auto;
+  position: absolute;
+  z-index: 1;
+
+  .#{$prefix}-circle-loading {
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+  
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  
+  svg {
+    height: 100%;
+    width: 100%;
+  }
+}

package/src/Components/components/base/Loading/Dot/Dot.scss

@@ -0,0 +1,69 @@
+@use "../../../../style/theme/util" as *;
+@import '../../../../style/common/var.scss';
+
+.#{$prefix}-dot-container {
+  position: absolute;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 50px;
+  height: 50px;
+  margin: 0 auto;
+  z-index: 1;
+
+  & .dot:nth-child(1) {
+    opacity: 0;
+    animation-duration: 0.8s;
+    animation-delay: 0s;
+    animation-play-state: running;
+  }
+
+  & .dot:nth-child(2) {
+    opacity: 0.083;
+    animation-duration: 0.8s;
+    animation-delay: 0.26666666666666666s;
+    animation-play-state: running;
+  }
+
+  & .dot:nth-child(3) {
+    opacity: 0.1667;
+    animation-duration: 0.8s;
+    animation-delay: 0.5333333333333333s;
+    animation-play-state: running;
+  }
+
+  .dot {
+    width: 20%;
+    height: 20%;
+    border-radius: 50%;
+    background-color: currentColor;
+    animation-duration: 1.8s;
+    animation-name: dotting;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-fill-mode: both;
+    @include theme() {
+      color: get(white-1);
+    }
+  }
+
+}
+
+@keyframes dotting {
+  0% {
+    opacity: 0.15;
+  }
+
+  1% {
+    opacity: 0.8;
+  }
+  33% {
+    opacity: 0.8;
+  }
+  34% {
+    opacity: 0.15;
+  }
+  100% {
+    opacity: 0.15;
+  }
+}

package/src/Components/components/base/Loading/Dot/Dot.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { classPrefix } from '../../../../const/common';
+import './Dot.scss';
+
+interface IDotProps {
+  size?: number | string;
+}
+
+export default function Dot(props: IDotProps) {
+  const { size } = props;
+  return (
+    <div
+      className={`${classPrefix}-dot-container`}
+      style={{ width: size, height: size }}
+    >
+      <div className='dot' />
+      <div className='dot' />
+      <div className='dot' />
+    </div>
+  );
+}

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

@@ -0,0 +1,22 @@
+@use "../../../style/theme/util" as *;
+@import '../../../style/common/var.scss';
+
+.#{$prefix}-loading-container  {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: none;
+
+  &.#{$prefix}-loading-overlayer{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    @include theme() {
+      background-color: get(black-4);
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import { classPrefix } from '../../../const/common';
+import { classNames } from '../../../util/classnames';
+import CircleLoading from './Circle/Cilrcle';
+import DotLoading from './Dot/Dot';
+import Overlayer from '../Overlayer/Overlayer';
+import './Loading.scss';
+
+type TObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+interface ILoadingProps {
+  theme?: 'circle' | 'dot';
+  size?: number | string;
+  showOverlayer?: boolean;
+  showLoading?: boolean;
+  style?: CSSProperties;
+  children?: ReactNode | ReactNode[];
+  fit?: TObjectFit;
+}
+
+export default function Loading(props: ILoadingProps) {
+  const {
+    theme = 'circle',
+    size,
+    showOverlayer = true,
+    children,
+    style = {},
+    showLoading = true,
+    fit,
+  } = props;
+
+  const renderContent = () => (theme === 'dot' ? <DotLoading size={size} /> : <CircleLoading size={size} />);
+
+  const classnames = classNames([
+    `${classPrefix}-loading-container`,
+    {
+      [`${classPrefix}-loading-overlayer`]: showOverlayer,
+    },
+  ]);
+
+  return (
+    <div className={classnames} style={style}>
+      {showOverlayer && <Overlayer fit={fit} />}
+      {showLoading && renderContent()}
+      {children}
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,61 @@
+@use '../../../style/theme/util' as *;
+@import '../../../style/common/var.scss';
+
+.#{$prefix}-message-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: fit-content;
+  margin-bottom: 10px;
+  border-radius: $radius-default;
+  @include theme() {
+    box-shadow: 0px 1px 5px get(black-8), 0px 8px 12px get(black-8), 0px 12px 26px get(black-8);
+  }
+
+  padding: 10px;
+
+  @include theme() {
+    background-color: get(toast-color-default);
+    color: get(text-color-primary);
+  }
+
+  svg {
+    @include theme() {
+      margin-right: 4px;
+      fill: get(text-color-primary);
+    }
+  }
+
+  &.#{$prefix}-message-plaintext {
+    background: none;
+    border: 0;
+    box-shadow: none;
+    margin: 0;
+    padding: 0;
+    @include theme() {
+      color: get(white-1);
+    }
+  }
+
+  .#{$prefix}-message-icon {
+    width: 1em !important;
+    height: 1em !important;
+
+    &.tip-icon {
+      margin-right: 8px;
+    }
+
+    &.close-icon {
+      margin-left: 24px;
+    }
+  }
+}
+
+.message-list-container {
+  top: 0;
+  position: fixed;
+  left: 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}

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

@@ -0,0 +1,94 @@
+import React, {
+  CSSProperties, ReactNode, useEffect, useRef,
+} from 'react';
+import { classNames } from '../../../util/classnames';
+import { classPrefix } from '../../../const/common';
+import Icon from '../Icon/Icon';
+import CloseSrc from '../../../assets/base/close.svg';
+import MessageInfoIcon from './MessageIcon/Info';
+import MessageErrorIcon from './MessageIcon/Error';
+import MessageSuccessIcon from './MessageIcon/Success';
+import MessageWarningIcon from './MessageIcon/Warning';
+import './Message.scss';
+
+const IconSrcMap = {
+  info: <MessageInfoIcon />,
+  waring: <MessageWarningIcon />,
+  success: <MessageSuccessIcon />,
+  error: <MessageErrorIcon />,
+};
+
+export interface IMessageProps {
+  icon?: ReactNode;
+  showIcon?: boolean;
+  duration?: number;
+  theme?: 'info' | 'waring' | 'success' | 'error';
+  closeBtn?: ReactNode | boolean;
+  showCloseBtn?: boolean;
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  plaintext?: boolean;
+  onClose?: () => any;
+}
+
+export function Message(props: IMessageProps) {
+  const {
+    icon,
+    showIcon = true,
+    duration = 3000,
+    theme = 'info',
+    style,
+    closeBtn,
+    showCloseBtn,
+    className,
+    children,
+    plaintext = false,
+    onClose = () => null,
+  } = props;
+  const timer = useRef<any>();
+  const classnames = classNames([
+    className,
+    `${classPrefix}-message-container`,
+    { [`${classPrefix}-message-plaintext`]: plaintext },
+  ]);
+
+  useEffect(() => {
+    if (timer.current) clearTimeout(timer.current);
+
+    if (duration > 0) {
+      timer.current = setTimeout(() => {
+        onClose?.();
+      }, duration);
+    }
+
+    return () => {
+      if (timer) clearTimeout(timer.current);
+    };
+  }, [duration, onClose]);
+
+  const renderIcon = () => (icon || (
+    <>
+      { IconSrcMap[theme] }
+    </>
+  ));
+
+  const renderCloseIcon = () => (closeBtn || (
+    <Icon
+      onClick={onClose}
+      className={classNames([
+        `${classPrefix}-message-icon`,
+        'close-icon',
+      ])}
+      url={CloseSrc}
+    />
+  ));
+
+  return (
+    <div className={classnames} style={style}>
+      {(showIcon && !plaintext) && renderIcon()} 
+      {children}
+      {(showCloseBtn && !plaintext) && renderCloseIcon()}
+    </div>
+  );
+}

package/src/Components/components/base/Message/MessageIcon/Error.tsx

@@ -0,0 +1,7 @@
+export default function MessageInfoSvg() {
+  return (
+    <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fillRule="evenodd" clipRule="evenodd" d="M10.0016 17.0007C14.1438 17.0007 17.5016 13.6428 17.5016 9.50065C17.5016 5.35852 14.1438 2.00065 10.0016 2.00065C5.85949 2.00065 2.50163 5.35852 2.50163 9.50065C2.50163 13.6428 5.85949 17.0007 10.0016 17.0007ZM19.1683 9.50065C19.1683 14.5632 15.0642 18.6673 10.0016 18.6673C4.93902 18.6673 0.834961 14.5632 0.834961 9.50065C0.834961 4.43804 4.93902 0.333984 10.0016 0.333984C15.0642 0.333985 19.1683 4.43804 19.1683 9.50065ZM6.17119 12.1526L8.82313 9.50065L6.17119 6.84872L7.34969 5.67021L10.0016 8.32215L12.653 5.67078L13.8315 6.84929L11.1801 9.50065L13.8315 12.152L12.653 13.3306L10.0016 10.6792L7.34969 13.3311L6.17119 12.1526Z" fill="#E54545"/>
+    </svg>
+  )
+}

package/src/Components/components/base/Message/MessageIcon/Info.tsx

@@ -0,0 +1,7 @@
+export default function MessageInfoSvg() {
+  return (
+    <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fillRule="evenodd" clipRule="evenodd" d="M9.99967 16.9987C14.1418 16.9987 17.4997 13.6409 17.4997 9.4987C17.4997 5.35657 14.1418 1.9987 9.99967 1.9987C5.85754 1.9987 2.49967 5.35657 2.49967 9.4987C2.49967 13.6409 5.85754 16.9987 9.99967 16.9987ZM19.1663 9.4987C19.1663 14.5613 15.0623 18.6654 9.99967 18.6654C4.93707 18.6654 0.833008 14.5613 0.833008 9.4987C0.833008 4.43609 4.93707 0.332031 9.99967 0.332031C15.0623 0.332032 19.1663 4.43609 19.1663 9.4987ZM9.16634 14.082V7.83203H10.833V14.082H9.16634ZM10.833 6.58203H9.16309V4.91211H10.833V6.58203Z" fillOpacity="0.9"/>
+    </svg>
+  )
+}

package/src/Components/components/base/Message/MessageIcon/Success.tsx

@@ -0,0 +1,8 @@
+export default function MessageInfoSvg() {
+  return (
+    <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M5.58317 9.57612L9.17951 13.2052L14.6332 7.05264L13.5732 6.16634L8.97764 10.4388L6.42478 8.66748L5.58317 9.57612Z" fill="#0ABF77"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M19.1663 9.49967C19.1663 14.5623 15.0623 18.6663 9.99967 18.6663C4.93706 18.6663 0.833008 14.5623 0.833008 9.49967C0.833008 4.43706 4.93706 0.333008 9.99967 0.333008C15.0623 0.333008 19.1663 4.43706 19.1663 9.49967ZM17.4997 9.49967C17.4997 13.6418 14.1418 16.9997 9.99967 16.9997C5.85754 16.9997 2.49967 13.6418 2.49967 9.49967C2.49967 5.35754 5.85754 1.99967 9.99967 1.99967C14.1418 1.99967 17.4997 5.35754 17.4997 9.49967Z" fill="#0ABF77"/>
+    </svg>
+  )
+}

package/src/Components/components/base/Message/MessageIcon/Warning.tsx

@@ -0,0 +1,7 @@
+export default function MessageInfoSvg() {
+  return (
+    <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fillRule="evenodd" clipRule="evenodd" d="M9.99967 1.9987C14.1418 1.9987 17.4997 5.35653 17.4997 9.4987C17.4997 13.6408 14.1418 16.9987 9.99967 16.9987C5.85754 16.9987 2.49967 13.6408 2.49967 9.4987C2.49967 5.35653 5.85754 1.9987 9.99967 1.9987ZM19.1663 9.4987C19.1663 4.43612 15.0623 0.332031 9.99967 0.332031C4.93707 0.332031 0.833008 4.43612 0.833008 9.4987C0.833008 14.5613 4.93707 18.6654 9.99967 18.6654C15.0623 18.6654 19.1663 14.5613 19.1663 9.4987ZM9.16634 4.91536V11.1654H10.833V4.91536H9.16634ZM10.833 12.4154H9.16309V14.0853H10.833V12.4154Z" fill="#FF7200"/>
+    </svg>
+  )
+}

package/src/Components/components/base/Message/MessagePlugin.tsx

@@ -0,0 +1,148 @@
+import { render, unmountComponentAtNode } from 'react-dom';
+import React, { CSSProperties, useEffect } from 'react';
+import { IMessageProps, Message } from './Message';
+import { noop } from '../../../../TUICallService/utils/common-utils';
+
+let keyIndex = 0;
+const messageList = [];
+
+function MessageContainer(props) {
+  const {
+    children, zIndex, id, renderCallback,
+  } = props;
+
+  const style: CSSProperties = {
+    zIndex,
+    top: '32px',
+    width: '100%',
+    position: 'absolute',
+    left: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  };
+
+  useEffect(() => {
+    renderCallback?.();
+    // eslint-disable-next-line
+  }, []);
+
+  return (
+    <div style={style} id={id}>
+      {children}
+    </div>
+  );
+}
+
+function createContainer(): Promise<Element> {
+  return new Promise((resolve) => {
+    // The default injection is into the body.
+    // If the user has specified a value, it will be used instead.
+    const mountedDom = document.body;
+
+    // The selector finds a container for mounting the message.
+    // If it does not exist, it will be created.
+    const containerId = 'tdesign-message-container--top';
+    const container = Array.from(mountedDom.querySelectorAll(`#${containerId}`));
+    if (container.length < 1) {
+      const div = document.createElement('div');
+      render(
+        <MessageContainer
+          id={containerId}
+          zIndex={1}
+          renderCallback={() => {
+            mountedDom.appendChild(div);
+            const containers = Array.from(mountedDom.querySelectorAll(`#${containerId}`));
+            resolve(containers[0]);
+          }}
+        />,
+        div,
+      );
+    } else {
+      resolve(container[0]);
+    }
+  });
+}
+
+async function createMessage(theme, config): Promise<any> {
+  const container = (await createContainer()) as HTMLElement;
+
+  const { content, offset, onClose = noop } = config;
+  const div = document.createElement('div');
+  // div.className = 'message-list-container';
+
+  keyIndex += 1;
+
+  const message = {
+    close: () => {
+      unmountComponentAtNode(div);
+      div.remove();
+      message.closed = true;
+    },
+    key: keyIndex,
+    closed: false,
+  };
+
+  let style: React.CSSProperties = { ...config.style };
+  if (Array.isArray(offset) && offset.length === 2) {
+    const [left, top] = offset;
+    style = {
+      left,
+      top,
+      ...style,
+      position: 'relative',
+    };
+  }
+
+  return new Promise((resolve) => {
+    // TODO
+    // ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
+    // Renders the component.
+    render(
+      <Message
+        key={keyIndex}
+        {...config}
+        theme={theme}
+        style={style}
+        onClose={(ctx) => {
+          onClose(ctx);
+          message.close();
+        }}
+      >
+        {content}
+      </Message>,
+      div,
+    );
+
+    // Mounts the current rendered message to the specified container.
+    container.appendChild(div);
+    // Adds the message to the message list.
+    messageList.push(message);
+    // Returns the message instance to the promise caller through the resolve function.
+    resolve(message);
+  });
+}
+
+function info(props: IMessageProps) {
+  createMessage('info', props);
+}
+function warn(props: IMessageProps) {
+  createMessage('warn', props);
+}
+function success(props: IMessageProps) {
+  createMessage('success', props);
+}
+function error(props: IMessageProps) {
+  createMessage('error', props);
+}
+function closeAll() {
+  messageList?.forEach((message) => message.close());
+}
+
+export const MessagePlugin = {
+  info,
+  warn,
+  success,
+  error,
+  closeAll,
+};

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

@@ -0,0 +1,17 @@
+@use "../../../style/theme/util" as *;
+@import '../../../style/common/var.scss';
+
+.#{$prefix}-overlayer-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
+  .overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    @include theme() {
+      background-color: get(black-4);
+    }
+  }
+}