background

Recently, when we used React as the mobile terminal, we needed a message prompt component. Then, our UI library used MATERIAL-UI, and we found antD-Moblie Toast was good. Although it was possible to use antD Mobile’s components and didn’t add much to the packaging volume by simply configuring them to load on demand, it felt a bit wasteful to use just one component for the next library, so decided to build a wheel of its own

The finished product

rmc-notification

I put the antd-moblie After downloading, I read his source code and found that he was relying on onercA library of seriesrmc-notification. What’s next

npm instsall

NPM I RC-animate –save

run

When it runs, the base component looks like thisLet’s not worry about ugly and let’s see if the API works

Basic version

Documentation is simple to write and simple to function

var Notification = require('rmc-notification');
Notification.newInstance({}, notification= > {
  notification.notice({
    content: 'content'
  });
});
Copy the code

Updated version

The official example unlocks more poses

import 'rmc-notification/assets/index.css';
import Notification from 'rmc-notification';
import React from 'react';
import ReactDOM from 'react-dom';
let notification = null;
Notification.newInstance({}, (n) = > notification = n);

function simpleFn() {
  notification.notice({
    content: <span>simple show</span>.onClose() {
      console.log('simple close'); }}); }function durationFn() {
  notification.notice({
    content: <span>can not close...</span>,
    duration: null}); }function closableFn() {
  notification.notice({
    content: <span>closable</span>,
    duration: null.onClose() {
      console.log('closable close');
    },
    closable: true}); }function close(key) {
  notification.removeNotice(key);
}

function manualClose() {
  const key = Date.now();
  notification.notice({
    content: <div>
      <p>click below button to close</p>
      <button onClick={close.bind(null, key)} >close</button>
    </div>,
    key,
    duration: null}); }Copy the code

After watching it, we found that it satisfies our own function. Let’s transform it first

beautify

design

  • General tips
  • Successful tip
  • Failure prompted
  • loaing
  • configuration

encapsulation

Let’s start with a base class

 class Toast {
    duration = 2;
    loadingText = 'Trying to load';
    config(c){}info(tip, duration){}success(tip, duration){}fail(tip, duration){}loading(loadingText){}hide(){}Copy the code

Then start filling the basic code. Loading is a special option

class Toast {
    duration = 2;
    loadingText = 'Trying to load';
    config(c) {
        this.duration = c.duration;
        this.loadingText = c.loadingText;
    }
    info(tip, duration) {
        notification.notice({
            content: <div className="toast_body">{tip}</div>,
            duration,
        });
    }
    success(tip, duration) {
        notification.notice({
            content: (
                <div className="toast_body">
                    <CheckIcon className="toast_success" />
                    <div className="toast_tip">{tip}</div>
                </div>
            ),
            duration: duration || this.duration,
        });
    }
    fail(tip, duration) {
        notification.notice({
            content: (
                <div className="toast_body">
                    <FailIcon className="toast_success" />
                    <div className="toast_tip">{tip}</div>
                </div>
            ),
            duration: duration || this.duration,
        });
    }
    loading(loadingText){}hide(){}}Copy the code

loading

The reason why Loading is special is that its scenes are different from others, which disappear in a few seconds. Loading waits for the request to end before disappearing. The API provided by RC-Notification to make Toast disappear requires a unique key, so we write this

loading(loadingText) {
        const key = Date.now();
        this.key = key;
        notification.notice({
            content: (
                <div className="toast_body">
                    <LoadingIcon className="toast_loading" spin rotate={90} />
                    <div className="toast_tip">{loadingText || this.loadingText}</div>
                </div>
            ),
            duration: null,
            key,
        });
    }
    hide() {
        notification.removeNotice(this.key);
    }
Copy the code

The CSS part

.rmc-notification-notice {background: RGBA (58, 58, 58, 0.9); padding: 7px 10px; } .rmc-notification-notice-content { color: #fff ! important; font-family: "Roboto", "Helvetica", "Arial", sans-serif; The font - size: 0.875 rem; font-weight: 200; } .toast_success { font-weight: 200; The font - size: 2.25 rem; display: block; } .toast_body { display: flex; flex-direction: column; align-items: center; }.toast_loading {font-size: 2.25rem; Width: 2.25 rem; Height: 2.25 rem; display: inline-block; -webkit-transform: rotate(360deg); -moz-animation: rotation 1s linear infinite; -webkit-animation: rotation 1s linear infinite; -o-animation: rotation 1s linear infinite; }.toast_tip {margin-top: 0.375rem; } @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); }}Copy the code

The last

There are still more functions that need to be added by myself. Of course, my code also has a lot of room for optimization, but the purpose of this article is the library of AMway RMC-Notification. After all, REACT does not have as many component libraries as VUE. ღ(´ · ᴗ · ‘)