React Practice - Added emoticons to chat screen

React Practice – Added emoticons to chat screen

takeaway

React React

Antd component is used
CSS style and layout structure
componentization
Parent and child components pass values
Event, data function callback
React Builds the chat interface

Operating practice

Add display emoticon display position

Add an actionable area above the input box

Need to support extensions to add some other operations to display (send files, other…)

. <div className={styles['chat-input-operator']} > {/ * * /}
    <span className={styles.emoticon} title="Expression">
      <EmoticonView onChooseEmoji={onChooseEmoji} />
    </span>
</div>

...
Copy the code

onChooseEmojiThe callback event can be clicked in the child componentemojiItem that calls back to the parent component to know which one was clicked

EmoticonView

The show emoticon button is packaged as a component and is implemented using the ANTD Tooltip component

const EmoticonView = () = > {
  return (
    <Tooltip// Set the color to white (overwrites the font color)color="white"// Trigger condition, trigger when clickedtrigger="click"// Float style, you can change the float sizeoverlayClassName={styles["emoticon-box-tip-tootip"]} // Display the componenttitle={<EmoticonBox onEmojiItemClick={onChooseEmoji} />} > {/* display as an expression */}<img src={require("./icons/emoticon.svg")} alt="" />
    </Tooltip>
  );
};
Copy the code

onEmojiItemClickPass parent component events, layer by layer
You can also use the Redux \ dVA state management framework to listen for state changes directly

EmoticonBox

const EmoticonBox = ({ onEmojiItemClick }) = > {
  const [emotionType, setEmotionType] = useState(0);
  return (
    <div className={styles["emoticon-box-tip-card"]} >
      <span className={styles["emoticon-title"]} >{emotionType === 0 ? Default emoji: "Favorite emoji "}</span>
      <div className={styles["emoticon-box"]} >
        {emotionType === 0 ? (
          <DefaultEmoticonBox onEmojiItemClick={onEmojiItemClick} />
        ) : (
          <CollectEmotionBox />
        )}
      </div>
      <div className={styles["emoticon-type"]} >
        <Tooltip title="Default expression">
          <img
            src={require("./icons/default.svg")}
            alt="Default expression"
            onClick={()= > setEmotionType(0)}
          />
        </Tooltip>

        <Tooltip title="Collecting emojis." arrowContent={null}>
          <img
            className={styles.collect}
            src={require("./icons/collect.svg")}
            alt="Collecting emojis."
            onClick={()= > setEmotionType(1)}
          />
        </Tooltip>
      </div>
    </div>
  );
};
Copy the code

EmotionType Controls the emotionType. Currently, only two emotionTypes are added: default emotionType and favorite emotionType.
Click to switch the current type setEmotionType

Add the expression

Add loops using mock data, which you can view

Gitee.com/shizidada/m…

The default expression

DefaultEmoticonBox

const DefaultEmoticonBox = ({ onEmojiItemClick }) = > {
  return (
    <div className={styles["emoji-icons"]} >
      {defaultEmojiIconGroup1.map((item) => {
        return (
          <Tooltip title={item.name} key={item.id}>
            <div
              className={styles["emoji-box"]}
              onClick={()= > onEmojiItemClick(item)}
            >
              <img
                className={styles["emoji-item"]}
                src={item.path}
                alt={item.name}
              />
            </div>
          </Tooltip>
        );
      })}
    </div>
  );
};
Copy the code

Collect the expression

CollectEmotionBox

const CollectEmotionBox = ({ onEmojiItemClick }) = > {
  return (
    <div className={styles["collect-icons"]} >
      {collectIcons.map((item) => {
        return (
          <Tooltip title={item.name} key={item.iconPath}>
            <div
              className={styles.collect}
              onClick={()= > onEmojiItemClick(item)}
            >
              <img src={item.iconPath} alt={item.name} />
            </div>
          </Tooltip>
        );
      })}
    </div>
  );
};
Copy the code

Consolidation issues

The default and favorite emojis can be combined into one group and need to pass props for control display

The size of the default expression and the favorite expression may be different, and some additional styles may need to be added, so the display is divided into two components

Image resources

The image resources used are all inIconfont - Alibaba vector icon librarySearch for downloads.www.iconfont.cn/
Used in the code, you can view

Gitee.com/shizidada/m…

These image data are all through the front-end Mock data, the image can be stored in the data, through the way of interface request presentation
The commonly used picture function records the number of emoji pictures sent based on the previous one and displays them in the list of commonly used expressions

Review past

React get started quickly

React Practice – Build chat interface

React practice – Separates front and back ends to receive and push messages

React practice – The front and back ends separate and page request historical chat messages

SpringBoot practice – front and back end separation, message receiving, push

Learn more

Pay attention to the public account full stack technology department, continue to learn more interesting technical knowledge.

React Practice – Added emoticons to chat screen