This is the first day of my participation in Gwen Challenge

I. Toast component development

1.1 write the UI

import React, {Component} from 'react'
import './style.css'

class Swiper extends Component {
    render() {
        console.log(this.props.swiperList[0].src.default )
        return (
            <div className={'my-swiper'} >
                {
                    this.props.swiperList && this.props.swiperList.length > 0 && this.props.swiperList.map( (v,i) => (
                        <div className={'my-swiper-item'} key={i}>
                            <a href={v.url} target={'_blank'} rel='noreferrer noopener'>
                                <img src={v.src.default}  alt={"} "/ >
                            </a>
                        </div>))}</div>)}}export default Swiper

Copy the code

.my-toast {
    position: fixed;
    width: auto;
    height: auto;
    padding: 10px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0.0.0.0.8);
    z-index: 100;
    color: #ffffff;
    border-radius: 4px;
}

Copy the code

The effect

1.2 Application scenarios

Verify username and password dialog box as shown in the following figure

Implement custom copywriting by encapsulating toast components, timing hide, and hiding callback functions

app.js

import React from 'react'
import './assets/css/app.css'
import  Toast from  './component/toast'

class App extends React.Component {
    / / the constructor
    constructor() {
        super(a);this.state = {
            username: ' '.password: ' '
        };
    }

    // Login method
    confirmLogin() {
        console.log(this.state.username,'Username')
        console.log(this.state.password,'password')
        if(this.state.username.match(/^\s*$/)) {
          return  Toast({
                text: 'Please enter a user name'.duration: 500.callback: () = > {
                    console.log('User name popup closes... ')}})` `
        }
        if(this.state.password.match(/^\s*$/)) {
          return  Toast({
                text: 'Please enter your password'.duration: 500.callback: () = > {
                  console.log('Password pop-up box closed... ')}})}}/ / rendering dom
    render() {
        return (
            <div className="App">
                <input value={this.state.username} onChange={e= > {this.setState( {username: e.target.value})}} />
                <br/>
                <input type={'password'} value={this.state.password} onChange={e= > {this.setState( {password: e.target.value})}} />
                <br/>
                <button onClick={this.confirmLogin.bind(this)}>The login</button>
            </div>)}}export default App;

Copy the code

index.js

import React from 'react'
import ReactDom from 'react-dom'
import Toast from "./toast";

export default function (opts) {
    console.log(opts)
    let duringTime = opts.duration || 1500
    let div = document.createElement('div')
    document.body.appendChild(div)
    // Attach Toast and div to render
    let toastInit = ReactDom.render(<Toast/>,div)
    toastInit.setOpts(opts)
    // Automatically hide toast
    setTimeout(() = > {
        document.body.removeChild(div)
        // Close the popbox callback
        if(opts.callback && typeof opts.callback === 'function') {
            opts.callback()
        }
    },duringTime)
}

Copy the code

toast.js

import React from 'react'
import './style.css'

export default class Toast extends React.Component {
    constructor() {
        super(a);this.state = {
            text: ' '}}setOpts(opts) {
        this.setState({text: opts.text})
    }

    render() {
        return (
            <div className={'my-toast'} >
                {this.state.text}
            </div>)}}Copy the code

The effect

Plus the fade-in effect

Define the animation

.my-toast {
    position: fixed;
    width: auto;
    height: auto;
    padding: 10px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0.0.0.0.8);
    z-index: 100;
    color: #ffffff;
    border-radius: 4px;
    animation: showToast 0.3 s forwards;
}

@keyframes showToast {
    0%{opacity: 0}
    100%{opacity: 1}}@keyframes hideToast {
    0%{opacity: 1}
    100%{opacity: 0} \}Copy the code

Fade out

 // Automatically hide toast
    setTimeout(() = > {
        div.querySelector('.my-toast').style.animation = 's recently hideToast 0.3'
        // Execute hidden animation after 300ms
        setTimeout(() = >{
            document.body.removeChild(div)
            // Close the popbox callback
            if(opts.callback && typeof opts.callback === 'function') {
                opts.callback()
            }
        },300)
    },duringTime)
Copy the code

The effect

Comfirm component development

2.1 The old rules of UI first

import React from 'react'
import './style.css'

export default class Confirm extends React.Component {
    constructor() {
        super(a);this.state = {

        }
    }

    render() {
        return (
            <div className={'my-confirm'} >
                <div className={'message'} >
                    <div className={'title'} >Are you sure you want to delete?</div>
                    <div className={'btn-group'} >
                        <div className={'btn'} >cancel</div>
                        <div className={'btn'} >Sure < / div</div>
                </div>
            </div>)}}Copy the code

.my-confirm {
    position: fixed;
    font-size: 16px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    background-color: rgba(0.0.0.0.8);
}
.message {
    position: absolute;
    width: 300px;
    height: 150px;
    border-radius: 4px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background-color: #fff;
}
.title {
    margin-top: 40px;
    text-align: center;
}
.btn-group {
    margin-top: 40px;
    display: flex;
    align-items: center;
}
.btn {
    flex: 1;
    text-align: center;
    cursor: pointer;
}

Copy the code

The effect

For example, prompt before deleting data

The complete code

import React from 'react'
import './assets/css/app.css'
import  Toast from  './component/toast'
import Confirm from './component/comfirm'

class App extends React.Component {
    / / the constructor
    constructor() {
        super(a);this.state = {
            username: ' '.password: ' '.userList: [{username: 'Joe'}, {username: 'bill'}, {username: 'Cathy',}]}; }// Login method
    confirmLogin() {
        console.log(this.state.username,'Username')
        console.log(this.state.password,'password')
        if(this.state.username.match(/^\s*$/)) {
            return  Toast({
                text: 'Please enter a user name'.duration: 500.callback: () = > {
                    console.log('User name popup closes... ')}}}if(this.state.password.match(/^\s*$/)) {
            return  Toast({
                text: 'Please enter your password'.duration: 1000.callback: () = > {
                    console.log('Password pop-up box closed... ')}})}}// Delete method
    del(index) {
        Confirm(
            'Are you sure you want to delete it? '[{text: 'cancel'.onPress: () = > {
                            console.log('cancel')}}, {text: 'sure'.onPress: () = > {
                            let userList = this.state.userList
                            console.log(` deleted${ userList[index].username}`)
                            userList.splice(index,1)
                            this.setState({userList})
                            console.log('sure')}}])}/ / rendering dom
    render() {
        return (
            <div className="App">
                <input value={this.state.username} onChange={e= > {this.setState( {username: e.target.value})}} />
                <br/>
                <input type={'password'} value={this.state.password} onChange={e= > {this.setState( {password: e.target.value})}} />
                <br/>
                <button onClick={this.confirmLogin.bind(this)}>The login</button>
                <ul>
                    {
                        this.state.userList.length > 0 && this.state.userList.map((item,index) => {
                            return (
                                <li key={index}>{item.username}<button onClick={this.del.bind(this,index)}>delete</button>
                                </li>)})}</ul>
            </div>)}}export default App;

Copy the code

import React from 'react'
import ReactDom from 'react-dom'
import Confirm from "./confirm";

export default function (title =' ', btnList =[]) {
    let div = document.createElement('div')
    document.body.appendChild(div)
    let initDom = ReactDom.render(<Confirm/> , div)
    initDom.setData(title,btnList,div)
}

Copy the code

import React from 'react'
import './style.css'

export default class Confirm extends React.Component {
    constructor() {
        super(a);this.state = {
            title: ' '.btnList: []}this.div = null
    }

    // Set the data
    setData(title,btnList,div) {
        this.div = div
        this.setState({title,btnList})
    }

    // Confirm the popbox click event
    handleBtnClick(index) {
        console.log(index)
        // Close the confirmation bullet
        document.body.removeChild(this.div)
        let cb = this.state.btnList[index].onPress
        if(cb && typeof cb === 'function' && index === 1) {
            cb()
        }
    }

    render() {
        return (
            <div className={'my-confirm'} >
                <div className={'message'} >
                    <div className={'title'} >{this.state.title}</div>
                    <div className={'btn-group'} >
                        {
                            this.state.btnList.length > 0 && this.state.btnList.map((item,index) => {
                                return (
                                    <div className={'btn'} key={index} onClick={this.handleBtnClick.bind(this,index)}>{item.text}</div>)})}</div>
                </div>
            </div>)}}Copy the code