@tencentcloud/chat-uikit-react 0.0.1

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

@@ -0,0 +1,44 @@
+.tui-kit-input-box {
+  //width: 100%;
+  display: flex;
+  align-items: center;
+  border-radius: 10px;
+  background:  rgba(249, 249, 249, 0.94);
+  padding: 0 8px;
+  height: 36px;
+  box-sizing: border-box;
+
+  &.tui-kit-input-box--focus {
+    outline: 1px solid #147AFF;
+  }
+  &.tui-kit-input-border--bottom {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    background-color: #fff;
+    outline: none;
+    border-radius: 0;
+  }
+  .tui-kit-input {
+    margin-left: 6px;
+    margin-right: auto;
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: transparent;
+    border-radius: 10px;
+    border: none;
+    box-sizing: border-box;
+
+    &:focus {
+      border: none;
+      outline: none;
+    }
+
+    &::placeholder {
+      font-weight: 400;
+      color: rgba(67, 60, 63, 0.6);
+      padding: 2px 0;
+    }
+  }
+
+}

package/src/components/Model/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import './styles/index.scss';
+
+interface PopupProps {
+  className?: string,
+  onClick?: (e?) => void,
+}
+
+export function Model<
+T extends PopupProps
+>(props:React.PropsWithChildren<T>):React.ReactElement {
+  const {
+    className,
+    onClick,
+    children,
+  } = props;
+
+  return (
+    <div role="button" tabIndex={0} className={`model ${className}`} onClick={onClick}>
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,2 @@
+@import "./layout.scss";
+@import "./color.scss";

package/src/components/Model/styles/layout.scss

@@ -0,0 +1,12 @@
+.model {
+  background: rgba(#000000, 0.5);
+  position: fixed;
+  z-index: 2;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/src/components/Plugins/hooks/index.ts

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

package/src/components/Plugins/hooks/usePluginsElement.tsx

@@ -0,0 +1,16 @@
+import React, { PropsWithChildren, useMemo } from 'react';
+
+interface PluginsElementProps {
+  plugins?: Array<any>,
+  showNumber?: number,
+}
+
+export function usePluginsElement <T extends PluginsElementProps>(
+  props: PropsWithChildren<T>,
+) {
+  const { plugins, showNumber } = props;
+  return useMemo(() => ({
+    showPicker: plugins?.slice(0, showNumber),
+    elements: plugins?.slice(showNumber),
+  }), [plugins]);
+}

package/src/components/Plugins/index.tsx

@@ -0,0 +1,99 @@
+import React, {
+  forwardRef,
+  PropsWithChildren, useImperativeHandle, useLayoutEffect, useRef, useState,
+} from 'react';
+import { Icon, IconTypes } from '../Icon';
+import { Popup } from '../Popup';
+import { usePluginsElement } from './hooks';
+
+import './styles/index.scss';
+
+export interface PluginsProps {
+  plugins?: Array<any>,
+  showNumber?: number,
+  MoreIcon?: any,
+  className?: string,
+  customClass?: string,
+  root?: any,
+  handleVisible?: (isVisible:any) => void,
+  showMore?: boolean,
+}
+
+function PluginsWithContext<T extends PluginsProps>(
+  props:PropsWithChildren<T>,
+  ref,
+):React.ReactElement {
+  const {
+    plugins = [],
+    showNumber,
+    MoreIcon,
+    className = '',
+    customClass = '',
+    root,
+    handleVisible,
+  } = props;
+
+  useImperativeHandle(ref, () => ({
+    closeMore: (newVal) => {
+      setShow(false);
+    },
+  }));
+
+  const { showPicker, elements } = usePluginsElement({ plugins, showNumber });
+
+  const [show, setShow] = useState(false);
+
+  const handleShow = (e) => {
+    e.stopPropagation();
+    setShow(!show);
+  };
+
+  return (
+    <ul className={`plugin ${className}`}>
+      {showPicker?.length > 0 && showPicker.map((Item, index:number) => {
+        const key = `${Item}${index}`;
+        return (
+          <li className="plugin-item" key={key}>
+            {Item}
+          </li>
+        );
+      })}
+      {
+        elements?.length > 0 && (
+          <div className="plugin-popup">
+            <div role="menuitem" tabIndex={0} className="more" onClick={handleShow}>
+              {
+                !MoreIcon && <Icon width={20} height={20} type={IconTypes.ADD} />
+              }
+              {
+                MoreIcon && MoreIcon
+              }
+            </div>
+            <Popup
+              className={`plugin-popup-box ${customClass}`}
+              show={show}
+              close={handleShow}
+              root={root}
+              handleVisible={handleVisible}
+            >
+              <ul>
+                {elements.map((Item, index:number) => {
+                  const key = `${Item}${index}`;
+                  return (
+                    <li className="plugin-item" key={key}>
+                      {Item}
+                    </li>
+                  );
+                })}
+              </ul>
+            </Popup>
+          </div>
+        )
+      }
+    </ul>
+  );
+}
+const Plugins = forwardRef(PluginsWithContext);
+export {
+  Plugins,
+};

package/src/components/Plugins/styles/color.scss

@@ -0,0 +1,7 @@
+.plugin-popup {
+  &-box {
+    background: #FFFFFF;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 16px;
+  }
+}

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

@@ -0,0 +1,2 @@
+@import "./layout.scss";
+@import "./color.scss";

package/src/components/Plugins/styles/layout.scss

@@ -0,0 +1,18 @@
+.plugin {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.plugin-popup {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 8px;
+  &-box {
+    position: absolute;
+    z-index: 2;
+    bottom: 100%;
+  }
+}

package/src/components/Popup/index.tsx

@@ -0,0 +1,76 @@
+import React, { useLayoutEffect, useRef, useState } from 'react';
+
+import './styles/index.scss';
+
+interface PopupProps {
+  className?: string,
+  show?: boolean,
+  close?: (e) => void,
+  root?: any,
+  handleVisible?: (isVisible:any) => void,
+}
+
+export function Popup<
+T extends PopupProps
+>(props:React.PropsWithChildren<T>):React.ReactElement {
+  const {
+    show,
+    close,
+    children,
+    className,
+    root,
+    handleVisible,
+  } = props;
+
+  const popup = useRef<HTMLInputElement>();
+
+  const [isSetPos, setIsSetPos] = useState(false);
+
+  useLayoutEffect(() => {
+    if (show) {
+      window.addEventListener('mouseup', close, false);
+      popup?.current?.addEventListener('mouseup', stopImmediatePropagation);
+    } else {
+      window.removeEventListener('mouseup', close, false);
+      popup?.current?.removeEventListener('mouseup', stopImmediatePropagation);
+    }
+    return () => {
+      window.removeEventListener('mouseup', close, false);
+      popup?.current?.removeEventListener('mouseup', stopImmediatePropagation);
+    };
+  }, [show]);
+
+  useLayoutEffect(() => {
+    const io = new IntersectionObserver(([change]) => {
+      const { boundingClientRect, rootBounds, intersectionRatio } = change;
+      if (handleVisible && intersectionRatio < 1) {
+        handleVisible({
+          left: (boundingClientRect.left - boundingClientRect.width) < rootBounds.left,
+          top: (boundingClientRect.bottom + boundingClientRect.height) < rootBounds.bottom,
+        });
+      }
+      setIsSetPos(true);
+    }, {
+      root,
+      threshold: [1],
+    });
+
+    if (popup && show) {
+      io.observe(popup?.current);
+    }
+    return () => {
+      io.disconnect();
+      setIsSetPos(false);
+    };
+  }, [popup, show]);
+
+  const stopImmediatePropagation = (e) => {
+    e.stopPropagation();
+  };
+
+  return show && (
+    <div role="button" tabIndex={0} className={`popup ${className} ${isSetPos && 'popup-show'}`} ref={popup}>
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,2 @@
+@import "./layout.scss";
+@import "./color.scss";

package/src/components/Popup/styles/layout.scss

@@ -0,0 +1,6 @@
+.popup {
+  opacity: 0;
+  &-show {
+    opacity: 1;
+  }
+}

package/src/components/Profile/Profile.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import './styles/index.scss';
+import { Profile as TProfile } from 'tim-js-sdk';
+import { Avatar, defaultUserAvatar } from '../Avatar';
+import { Icon, IconTypes } from '../Icon';
+
+export interface ProfileProps {
+  profile?: TProfile,
+  className?: string,
+  handleAvatar?: () => void,
+}
+export function Profile<T extends ProfileProps>(props: T) {
+  const { profile, className = '', handleAvatar } = props;
+  return (profile?.nick || profile?.userID) && (
+    <div className={`profile ${className}`}>
+      <div className="profile-content">
+        <Avatar size={32} image={profile.avatar || defaultUserAvatar} onClick={handleAvatar} />
+        <div className="profile-name">{profile.nick || profile.userID}</div>
+      </div>
+      <div className="profile-more">
+        <Icon type={IconTypes.ELLIPSE} width={18} height={5} onClick={handleAvatar} />
+      </div>
+    </div>
+  );
+}

package/src/components/Profile/hooks/useProfile.tsx

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from 'react';
+import { ChatSDK, Profile } from 'tim-js-sdk';
+
+export function useProfile(tim: ChatSDK, profileHandler?: (
+  profile: Profile,
+  setProfile?: React.Dispatch<React.SetStateAction<Profile>>,
+) => void) {
+  const [myProfile, setMyProfile] = useState<Profile>();
+
+  const getProfile = async (userIDList: Array<string>) => {
+    const res = await tim?.getUserProfile({
+      userIDList,
+    });
+    return res.data;
+  };
+  const getMyProfile = async () => {
+    const res = await tim?.getMyProfile();
+    setMyProfile(res?.data);
+  };
+  useEffect(() => {
+    getMyProfile();
+  }, [tim]);
+  return {
+    myProfile,
+    setMyProfile,
+    getProfile,
+  };
+}

package/src/components/Profile/index.ts

@@ -0,0 +1,2 @@
+export * from './Profile';
+export * from './hooks/useProfile';

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

@@ -0,0 +1,17 @@
+.profile {
+  background: #F9FAFB;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  .profile-content {
+    display: flex;
+    align-items: center;
+    .profile-name {
+      font-weight: 600;
+      margin-left: 10px;
+      font-size: 14px;
+    }
+  }
+}

package/src/components/Switch/Switch.scss

@@ -0,0 +1,37 @@
+.self-ui-switch {
+  display: inline-flex;
+  vertical-align: top;
+  &-input {
+    height: 0;
+    width: 0;
+    display: none;
+  }
+  &-label {
+    position: relative;
+    width: 51px;
+    height: 31px;
+    background-color: rgba(120, 120, 128, 0.16);;
+    border-radius: 100px;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  &-button {
+    position: absolute;
+    height: calc(100% - 4px);
+    width: 50%;
+    top: 50%;
+    left: 2px;
+    border-radius: 46px;
+    transform: translateY(-50%);
+    background-color: #fff;
+    transition: all 0.2s;
+    box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);
+  }
+  &-label &-input:checked+&-button {
+    left: calc(100% - 2px);
+    transform: translateX(-100%) translateY(-50%);
+  }
+  &-label:active &-button {
+    width: 66%;
+  }
+}

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useRef } from 'react';
+// Switch样式的大概逻辑：
+//    隐藏input,然后将通过label标签和label里的span来控制样式，并通过伪元素选择器:checked来为选中情况添加样式
+//    需要注意：设置display: inline;属性后，最好添加vertical-align:top;，否则会出现一些莫名其妙的bug
+import './Switch.scss';
+import { creteNewId } from './utils/newId';
+
+interface Props {
+  checked: boolean,
+  onChange: (e: React.ChangeEvent) => void,
+  checkedColor?: string,
+  className?: string,
+}
+// : React.FunctionComponent<Props>
+export function Switch(props:Props) {
+  const {
+    checked, onChange, checkedColor, className,
+  } = props;
+  const idRef = useRef<string>(creteNewId());
+  return (
+    <div className="self-ui-switch">
+      <label
+        style={{ backgroundColor: checked ? checkedColor : undefined }}
+        className={`self-ui-switch-label ${className}`}
+        htmlFor={idRef.current}
+      >
+        <input
+          checked={checked}
+          onChange={onChange}
+          id={idRef.current}
+          className="self-ui-switch-input"
+          type="checkbox"
+        />
+        <span className="self-ui-switch-button" />
+      </label>
+    </div>
+  );
+}
+Switch.defaultProps = {
+  checkedColor: '#34C759',
+};

package/src/components/Switch/index.ts

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

package/src/components/Switch/utils/newId.tsx

@@ -0,0 +1,6 @@
+let lastId = 0;
+const creteNewId = (prefix = 'id') => {
+  lastId += 1;
+  return `${prefix}-${lastId}`;
+};
+export { creteNewId };