@tencentcloud/chat-uikit-react 0.0.1

package/src/components/DivWithEdit/styles/index.scss

@@ -0,0 +1,68 @@
+.div-with-edit {
+  flex: 1;
+  display: flex;
+  max-width: 100%;
+  box-sizing: border-box;
+  &-popup{
+    flex: 1;
+    display: flex;
+    max-width: 100%;
+  }
+  .show {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    word-break: break-all;
+    &:hover {
+      .icon-edit {
+        display: flex;
+      }
+    }
+    .icon-edit {
+      display: none;
+    }
+  }
+  .icon {
+    margin-left: 10px;
+    width: 25px;
+  }
+  .edit {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    border-bottom: 1px solid #EEEEEE;
+    padding: 0 10px;
+    input {
+      flex: 1;
+      font-size: inherit;
+      border: none;
+      &:focus {
+        border: none;
+        outline: none;
+      }
+    }
+    .select {
+      position: absolute;
+      box-sizing: border-box;
+      min-width: 100%;
+      z-index: 2;
+      background: #FFFFFF;
+      box-shadow: 0 11px 20px 0 rgb(0 0 0 / 30%);
+      top: 100%;
+      border-radius: 5px;
+      padding: 10px 0;
+      &-list {
+        &-item {
+          padding: 5px 10px;
+          &:hover {
+            background: #f2f7ff;
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx

@@ -0,0 +1,23 @@
+import React, { PropsWithChildren } from 'react';
+
+export interface EmptyStateIndicatorProps{
+  /** List Type: conversation | message */
+  listType?: 'conversation' | 'message' | 'chat';
+}
+
+function UnMemoizedEmptyStateIndicator
+<T extends EmptyStateIndicatorProps>(props: PropsWithChildren<T>) {
+  const { listType } = props;
+
+  if (listType === 'conversation') { return <p role="listitem">You have no conversation currently</p>; }
+
+  if (listType === 'message') return null;
+
+  if (listType === 'chat') return null;
+
+  return <p>No items exist</p>;
+}
+
+export const EmptyStateIndicator = React.memo(
+  UnMemoizedEmptyStateIndicator,
+) as typeof UnMemoizedEmptyStateIndicator;

package/src/components/EmptyStateIndicator/index.ts

@@ -0,0 +1 @@
+export * from './EmptyStateIndicator';

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import './styles/index.scss';
+import { IconTypes } from './type';
+import { ICON_CONFIG } from './config';
+
+const changeTypeToIconComponent = (type:IconTypes) => {
+  const src = ICON_CONFIG[type].url || '';
+  return <img className={`icon-image icon-image-${type}`} src={src} alt={type} />;
+};
+export const changeTypeToIconClassName = (type:IconTypes) => ICON_CONFIG[type]?.className || '';
+
+export interface IconProps {
+  type?: IconTypes,
+  height?: number,
+  width?: number,
+  onClick?: (event: React.BaseSyntheticEvent) => void,
+  className?: string
+}
+export function Icon(props: React.PropsWithChildren<IconProps>) {
+  const {
+    children, type, height = 24, width = 24, onClick, className = '',
+  } = props;
+  const iconStyle = {
+    width: typeof width === 'string' ? width : `${width}px`,
+    minWidth: typeof width === 'string' ? width : `${width}px`,
+    height: typeof height === 'string' ? height : `${height}px`,
+    minHeight: typeof height === 'string' ? height : `${height}px`,
+  };
+  return (
+    <div
+      className={`tui-kit-icon ${changeTypeToIconClassName(type)} ${className}`}
+      role="button"
+      tabIndex={0}
+      style={iconStyle}
+      onClick={onClick}
+    >
+      {children || changeTypeToIconComponent(type)}
+    </div>
+  );
+}

package/src/components/Icon/config.ts

@@ -0,0 +1,164 @@
+import IconMoreUrl from './images/more.png';
+import IconCreateUrl from './images/create.png';
+import IconClearUrl from './images/clear.png';
+import IconSearchUrl from './images/search.png';
+import IconBackUrl from './images/back.png';
+import IconEmojiUrl from './images/emoji.png';
+import IconProgressUrl from './images/progress.png';
+import IconFileUrl from './images/file.png';
+import IconAddUrl from './images/add.png';
+import IconImageUrl from './images/image.png';
+import IconVideoUrl from './images/video.png';
+import IconDocumentUrl from './images/document.png';
+import IconStarUrl from './images/star.png';
+import IconCopyUrl from './images/copy.png';
+import IconDelUrl from './images/del.png';
+import IconForwardUrl from './images/forward.png';
+import IconReplyUrl from './images/reply.png';
+import IconCloseUrl from './images/close.png';
+import IconArrowRightUrl from './images/arrow-right.png';
+import IconRightUrl from './images/right.png';
+import IconEllipseUrl from './images/ellipse.png';
+import IconCancelUrl from './images/cancel.png';
+import IconArrowDownUrl from './images/arrow-down.png';
+import IconEditUrl from './images/edit.png';
+import IconConfirmUrl from './images/confirm.png';
+import IconCameraUrl from './images/camera.png';
+import IconQuoteUrl from './images/quote.png';
+import IconRevocationUrl from './images/revocation.png';
+import IconEffortUrl from './images/effort.png';
+import IconCryUrl from './images/cry.png';
+
+import { IconTypes } from './type';
+
+interface IconConfigItem {
+  url: string,
+  className: string,
+}
+
+interface IconConfig {
+  [propName: string]: IconConfigItem
+}
+
+export const ICON_CONFIG:IconConfig = {
+  [IconTypes.MORE]: {
+    url: IconMoreUrl,
+    className: 'tui-kit-icon-more',
+  },
+  [IconTypes.CREATE]: {
+    url: IconCreateUrl,
+    className: 'tui-kit-icon-create',
+  },
+  [IconTypes.CLEAR]: {
+    url: IconClearUrl,
+    className: 'tui-kit-icon-clear',
+  },
+  [IconTypes.SEARCH]: {
+    url: IconSearchUrl,
+    className: 'tui-kit-icon-search',
+  },
+  [IconTypes.BACK]: {
+    url: IconBackUrl,
+    className: 'tui-kit-icon-back',
+  },
+  [IconTypes.EMOJI]: {
+    url: IconEmojiUrl,
+    className: 'tui-kit-icon-emoji',
+  },
+  [IconTypes.PROGRESS]: {
+    url: IconProgressUrl,
+    className: 'tui-kit-icon-progress',
+  },
+  [IconTypes.FILE]: {
+    url: IconFileUrl,
+    className: 'tui-kit-icon-file',
+  },
+  [IconTypes.ADD]: {
+    url: IconAddUrl,
+    className: 'tui-kit-icon-add',
+  },
+  [IconTypes.IMAGE]: {
+    url: IconImageUrl,
+    className: 'tui-kit-icon-image',
+  },
+  [IconTypes.VIDEO]: {
+    url: IconVideoUrl,
+    className: 'tui-kit-icon-video',
+  },
+  [IconTypes.DOCUMENT]: {
+    url: IconDocumentUrl,
+    className: 'tui-kit-icon-document',
+  },
+  [IconTypes.STAR]: {
+    url: IconStarUrl,
+    className: 'tui-kit-icon-star',
+  },
+  [IconTypes.COPY]: {
+    url: IconCopyUrl,
+    className: 'tui-kit-icon-copy',
+  },
+  [IconTypes.DEL]: {
+    url: IconDelUrl,
+    className: 'tui-kit-icon-del',
+  },
+  [IconTypes.FORWARD]: {
+    url: IconForwardUrl,
+    className: 'tui-kit-icon-forward',
+  },
+  [IconTypes.REPLY]: {
+    url: IconReplyUrl,
+    className: 'tui-kit-icon-reply',
+  },
+  [IconTypes.CLOSE]: {
+    url: IconCloseUrl,
+    className: 'tui-kit-icon-close',
+  },
+  [IconTypes.ARROW_RIGHT]: {
+    url: IconArrowRightUrl,
+    className: 'tui-kit-icon-arrow-right',
+  },
+  [IconTypes.RIGHT]: {
+    url: IconRightUrl,
+    className: 'tui-kit-icon-right',
+  },
+  [IconTypes.ELLIPSE]: {
+    url: IconEllipseUrl,
+    className: 'tui-kit-icon-ellipse',
+  },
+  [IconTypes.CANCEL]: {
+    url: IconCancelUrl,
+    className: 'tui-kit-icon-cancel',
+  },
+  [IconTypes.ARROW_DOWN]: {
+    url: IconArrowDownUrl,
+    className: 'tui-kit-icon-arrow-down',
+  },
+  [IconTypes.EDIT]: {
+    url: IconEditUrl,
+    className: 'tui-kit-icon-edit',
+  },
+  [IconTypes.CONFIRM]: {
+    url: IconConfirmUrl,
+    className: 'tui-kit-icon-confirm',
+  },
+  [IconTypes.CAMERA]: {
+    url: IconCameraUrl,
+    className: 'tui-kit-icon-camera',
+  },
+  [IconTypes.QUOTE]: {
+    url: IconQuoteUrl,
+    className: 'tui-kit-icon-quote',
+  },
+  [IconTypes.REVOCATION]: {
+    url: IconRevocationUrl,
+    className: 'tui-kit-icon-revocation',
+  },
+  [IconTypes.EFFORT]: {
+    url: IconEffortUrl,
+    className: 'tui-kit-icon-effort',
+  },
+  [IconTypes.CRY]: {
+    url: IconCryUrl,
+    className: 'tui-kit-icon-cry',
+  },
+};

package/src/components/Icon/index.ts

@@ -0,0 +1,2 @@
+export * from './Icon';
+export * from './type';

package/src/components/Icon/styles/index.scss

@@ -0,0 +1,31 @@
+$primary-color: royalblue;
+
+.tui-kit-icon {
+  display: flex;
+  text-align: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  .icon-image {
+    width: 100%;
+    height: 100%;
+  }
+  &:hover{
+    color: $primary-color;
+    border-color: currentColor;
+  }
+  &::after{
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    opacity: 0;
+    box-shadow: 0 0 0 6px $primary-color;
+    transition: .3s;
+  }
+  &:active::after{
+    box-shadow: none;
+    opacity: 0.4;
+    transition: 0s;
+  }
+}

package/src/components/Icon/type.ts

@@ -0,0 +1,32 @@
+export enum IconTypes {
+  MORE = 'more',
+  CREATE = 'create',
+  CLEAR = 'clear',
+  SEARCH = 'search',
+  BACK = 'back',
+  EMOJI = 'emoji',
+  PROGRESS = 'progress',
+  FILE = 'file',
+  CLOSE = 'close',
+  CANCEL = 'cancel',
+  ADD = 'plus',
+  IMAGE = 'image',
+  VIDEO = 'video',
+  DOCUMENT = 'document',
+  STAR = 'star',
+  COPY = 'copy',
+  DEL = 'del',
+  FORWARD = 'forward',
+  REPLY = 'reply',
+  RIGHT = 'right',
+  ARROW_RIGHT = 'arrow-right',
+  ELLIPSE = 'ellipse',
+  ARROW_DOWN = 'arrow-down',
+  EDIT = 'edit',
+  CONFIRM = 'confirm',
+  CAMERA = 'camera',
+  QUOTE = 'quote',
+  REVOCATION = 'revocation',
+  EFFORT = 'effort',
+  CRY = 'cry',
+}

package/src/components/InfiniteScrollPaginator/InfiniteScroll.tsx

@@ -0,0 +1,115 @@
+import React, {
+  PropsWithChildren, useCallback, useEffect, useRef,
+} from 'react';
+
+/**
+ * Prevents Chrome hangups
+ * See: https://stackoverflow.com/questions/47524205/random-high-content-download-time-in-chrome/47684257#47684257
+ */
+const mousewheelListener = (event: Event) => {
+  if (event instanceof WheelEvent && event.deltaY === 1) {
+    event.preventDefault();
+  }
+};
+
+export interface InfiniteScrollProps {
+  className?: string;
+  element?: React.ElementType;
+  hasMore?: boolean;
+  hasMoreNewer?: boolean;
+  initialLoad?: boolean;
+  isLoading?: boolean;
+  listenToScroll?: (offset: number, reverseOffset: number, threshold: number) => void;
+  loader?: React.ReactNode;
+  loading?: React.ReactNode;
+  loadMore?: () => void;
+  loadMoreNewer?: () => void;
+  pageStart?: number;
+  threshold?: number;
+  useCapture?: boolean;
+}
+
+export function InfiniteScroll(props: PropsWithChildren<InfiniteScrollProps>) {
+  const {
+    children,
+    element = 'div',
+    hasMore = false,
+    hasMoreNewer = false,
+    initialLoad = true,
+    isLoading = false,
+    listenToScroll,
+    loader,
+    loadMore,
+    loadMoreNewer,
+    threshold = 150,
+    useCapture = false,
+    ...elementProps
+  } = props;
+
+  const scrollComponent = useRef<HTMLElement>();
+
+  const scrollListener = useCallback(() => {
+    const ele = scrollComponent.current;
+
+    if (!ele || ele.offsetParent === null) {
+      return;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const parentElement = ele.parentElement!;
+
+    const offset = ele.scrollHeight - parentElement.scrollTop - parentElement.clientHeight;
+    const reverseOffset = parentElement.scrollTop;
+
+    if (listenToScroll) {
+      listenToScroll(offset, reverseOffset, threshold);
+    }
+
+    if (reverseOffset < Number(threshold) && typeof loadMore === 'function' && hasMore) {
+      loadMore();
+    }
+
+    if (offset < Number(threshold) && typeof loadMoreNewer === 'function' && hasMoreNewer) {
+      loadMoreNewer();
+    }
+  }, [hasMore, hasMoreNewer, threshold, listenToScroll, loadMore, loadMoreNewer]);
+
+  useEffect(() => {
+    const scrollElement = scrollComponent.current?.parentNode;
+
+    if (isLoading || !scrollElement) {
+      return () => undefined;
+    }
+
+    scrollElement.addEventListener('scroll', scrollListener, useCapture);
+    scrollElement.addEventListener('resize', scrollListener, useCapture);
+
+    return () => {
+      scrollElement.removeEventListener('scroll', scrollListener, useCapture);
+      scrollElement.removeEventListener('resize', scrollListener, useCapture);
+    };
+  }, [initialLoad, isLoading, scrollListener, useCapture]);
+
+  useEffect(() => {
+    const scrollElement = scrollComponent.current?.parentNode;
+    if (scrollElement) {
+      scrollElement.addEventListener('wheel', mousewheelListener, { passive: false });
+    }
+    return () => {
+      if (scrollElement) {
+        scrollElement.removeEventListener('wheel', mousewheelListener, useCapture);
+      }
+    };
+  }, [useCapture]);
+
+  const attributes = {
+    ...elementProps,
+    ref: (ele: HTMLElement) => {
+      scrollComponent.current = ele;
+    },
+  };
+
+  const childrenArray = [loader, children];
+
+  return React.createElement(element, attributes, childrenArray);
+}

package/src/components/InfiniteScrollPaginator/index.ts

@@ -0,0 +1 @@
+export * from './InfiniteScroll';

package/src/components/Input/Input.tsx

@@ -0,0 +1,108 @@
+import React, {
+  useRef, useState, useImperativeHandle, InputHTMLAttributes,
+} from 'react';
+import './styles/index.scss';
+import { Icon, IconTypes } from '../Icon';
+
+export interface InputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'>
+{
+  className?: string,
+  customClassName?: string,
+  placeholder?: string,
+  clearable?: boolean,
+  prefix?: React.ReactNode,
+  suffix?: React.ReactNode,
+  value?: InputHTMLAttributes<HTMLInputElement>['value'],
+  border?: '' | 'bottom',
+  disabled?: boolean,
+  maxLength?: number
+}
+export interface InputRef {
+  focus: (options?: object) => void;
+  blur: () => void;
+  input: HTMLInputElement | null;
+}
+export const Input = React.forwardRef<InputRef, InputProps>(
+  (props:InputProps, ref):React.ReactElement => {
+    const {
+      className = '',
+      customClassName = '',
+      placeholder,
+      clearable = false,
+      prefix,
+      suffix,
+      onChange,
+      onBlur,
+      onFocus,
+      value: propsValue = '',
+      border = '',
+      disabled = false,
+      maxLength = undefined,
+    } = props;
+
+    const [focused, setFocused] = useState<boolean>(false);
+
+    const [value, setValue] = useState(propsValue);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const handleFocus = (e) => {
+      setFocused(true);
+      onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+      setFocused(false);
+      onBlur?.(e);
+    };
+    const clearInput = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+      setValue('');
+      focus();
+      const currentTarget = inputRef.current.cloneNode(true) as HTMLInputElement;
+      const event = Object.create(e, {
+        target: { value: currentTarget },
+        currentTarget: { value: currentTarget },
+      });
+      currentTarget.value = '';
+      onChange?.(event as React.ChangeEvent<HTMLInputElement>);
+    };
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value);
+      if (inputRef.current) {
+        onChange?.(e);
+      }
+    };
+    const focus = () => {
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    };
+    useImperativeHandle(ref, () => ({
+      focus,
+      blur: () => {
+        inputRef.current?.blur();
+      },
+      input: inputRef.current,
+    }));
+
+    return (
+      <div className={`${className} tui-kit-input-container`}>
+        <div className={`tui-kit-input-box ${border && `tui-kit-input-border--${border}`} ${focused ? 'tui-kit-input-box--focus' : 'tui-kit-input-box--blur'}`}>
+          {prefix}
+          <input
+            maxLength={maxLength}
+            disabled={disabled}
+            className={`tui-kit-input ${customClassName}`}
+            placeholder={placeholder}
+            ref={inputRef}
+            value={value}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onChange={handleChange}
+          />
+          {suffix}
+          {(clearable && value)
+          && <Icon type={IconTypes.CLEAR} height={13} width={13} onClick={clearInput} />}
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/Input/index.ts

@@ -0,0 +1 @@
+export * from './Input';