React in Divi - Handling Events on our Author Card Module

SUGGESTED POSTS

The following article assumes you have already read the articles on the side. Take a look!

Divi React II - Handling Event in React Workflow

Hi everyone, today we will see how to put in practice what we learned about the Handling Events workflow in React Js; in order to do it we will customize further our Author Card Divi custom module.

Let’s give a look at how we will do it!

A SNEAKPEEK

We created a Divi custom module called Author Card in which we have just two custom Content fields, an Author Intro and an Author Description and in between the post author will automatically appears thanks to an Ajax call in our componentDidMount (we will talk about it in the next week!). We also added a purple background color circle at the top right corner of the module and from here we will continue… we want to make this purple circle appears only if a background color has been added, then clicking on it a color picker will fade in and we will be able to select a different background color that will immediately replace our module background itself… a lot of words, i know, this is a sneakpeek of what we are going to do… and now let’s get our hands dirty with pure React code!

REACT HANDLING EVENTS IN OUR MODULE

We have already seen how the Handling Events works in React; in our Divi module the things work exactly the same way. We just have to add an Event Listener in our ‘render()’ method and pass as value the method we want to be called:

// Handling Events in our module

return(
<Fragment>
 <span id="bgCircle" className="changeBg" onClick={this.handleClick} style= {style}>
 </span>
</Fragment>
);

In our example we will add several events and relative methods to be called: the first event will listen for a click on the background purple circle, if it will be clicked will be called a method we just name ‘handleClick()’ that will make a color picker appears; a second event listener will be added right inside our color picker component and will be responsible for calling an ‘handleChange()’ method that will replace our background color with that selected in the color picker. Finally we will add a third event listener responsible for closing the color picker popup and we will add it to the color picker container so that when our mouse will leave it the popup disappears and the new color will be saved.

So, starting from our previous code (do you remember? see here for a refresh!) first of all let’s add in our constructor another state that we will name ‘displayColorPicker’. This is a boolean and we assign it a default ‘false’ value. We also add a ‘color’ state that is an array with the ‘r’, ‘g’, ‘b components of the color and a ‘null’ value assigned by default to them; we will use later on this ‘color’ state for save our color from the Color Picker:

// Adding state in constructor

constructor(props) {
 super(props);
 this.state = {
 isLoading: false,
 author: 'Howidivit',
 color: {
 r: null,
 g: null,
 b: null,
 },
 displayColorPicker: false
 };

 }

Then we move to our ‘render()’ method and wrap our background circle html/jsx element in an if statement to check if a background color has been set by the user in the Content -> Background field. If not the module appears as default and we will not see the background circle, otherwise it will be visible in the top-right corner (we have also added an icon in it in our css file).

// Check if background color is set

 {
 this.props.background_color ?
 <span id="bgCircle" className="changeBg" onClick={this.handleClick} style={style}>
 </span> : null
 }

Finally we will add in the ‘render()’ method our html structure for the color picker container:

// Html structure in render()

<Fragment>
 <div style={ styles.color } >
 <div>
 {
 this.props.background_color ?
 <span id="bgCircle" className="changeBg" style={style}>
 </span> : null
 }
 { this.state.displayColorPicker ? <div style={ styles.container } ><div style={ styles.popup } >
 // here goes the color picker
 </div>
 </div> : null 
}
 </div>

</Fragment>

NOTE that we added some css style using the ReactCss module, after importing it from ‘reactcss’ we add it in the render() method as follows:

// ReactCss

import reactCSS from 'reactcss';

render() {

const styles = reactCSS({
 'default': {
 color: {
 background: `rgba(${ this.state.color.r }, ${ this.state.color.g }, ${ this.state.color.b })`,
 },
 container: {
 position: 'absolute',
 padding: '2%',
 background: '#fff',
 borderRadius: '10px',
 boxShadow: '0 2px 3px 1px rgba(0,0,0,.4)',
 display: 'inline-block',
 right: '-200px',
 top: '-80px',
 width: '240px',
 height: '60px',
 cursor: 'pointer',
 },
 popup: {
 position: 'absolute',
 width: '90%',
 height: '85%',
 zIndex: '2',
 },
 },
 });


}

However we will talk in the next weeks about the Css styling in React, for now let’s continue with our color picker…

ADDING A COLOR PICKER IN REACT

It’s time now to add our color picker. In order to do this we could also work with jQuery and the standard Wp Color Picker but in our example we will use a color picker built in React called React Color. We just have to install it running ‘yarn add react-color’ in the terminal; then we will import the color picker we prefer – in our case the SliderPicker – and we can use it in our ‘render()’ method:

// Add the React color picker

import { SliderPicker } from 'react-color';


render() {

return(
<Fragment>
 <div style={ styles.color } >
 <div>
 {
 this.props.background_color ?
 <span id="bgCircle" className="changeBg" style={style}>
 </span> : null
 }
 { this.state.displayColorPicker ? <div style={ styles.container } ><div style={ styles.popup } >

 <SliderPicker color={ this.state.color } />
 </div>
 </div> : null }
 </div>

</Fragment>
 );
}

Now we can add the event listeners we talked about above:

// Add the event listeners

<Fragment>
 <div style={ styles.color } >
 <div>
 {
 this.props.background_color ?
 <span id="bgCircle" className="changeBg" style={style} onClick={this.handleClick}>
 </span> : null
 }
 { this.state.displayColorPicker ? <div style={ styles.container } onMouseLeave={this.handleClose} ><div style={ styles.popup } >

 <SliderPicker color={ this.state.color } onChange={this.handleChange} />
 </div>
 </div> : null }
 </div>

</Fragment>

And finally we can write our callback functions using the ‘Arrow Functions’ ES6 syntax:

// Write the callback functions

 handleClick = () => {
 const picking = !this.state.displayColorPicker ? true : false;
 this.setState({ displayColorPicker: picking })
 };

 handleClose = () => {
 this.setState({ displayColorPicker: false })
 };

 handleChange = (color) => {
 this.setState({ color: color.rgb })
 };

FINAL CODE AND FINAL THOUGHTS

Ok, let’s recap our React code in the jsx file, it should be something like this:

// Jsx final code

// External Dependencies
import React, { Component, Fragment } from 'react';
import reactCSS from 'reactcss';
import { SliderPicker } from 'react-color';


// Internal Dependencies
import './style.css';


class AuthorCard extends Component {

 static slug = 'ac_author_card';

 constructor(props) {
 super(props);
 this.state = {
 isLoading: false,
 author: 'Howidivit',
 color: {
 r: null,
 g: null,
 b: null,
 },
 displayColorPicker: false
 };
 }

 componentDidMount() {

 var body = new FormData();
 body.append('action', 'ac_get_author_name');
 body.append('post_id', window.ETBuilderBackend.postId);

 fetch(
 window.et_fb_options.ajaxurl,
 {
 body: body,
 method: 'POST',
 }
 )
 .then(res => res.json())
 .then(
 (result) => {
 this.setState({
 isLoading: true,
 author: result.author
 });
 }
 )
 }

 handleClick = () => {
 const picking = !this.state.displayColorPicker ? true : false;
 this.setState({ displayColorPicker: picking })
 };

 handleClose = () => {
 this.setState({ displayColorPicker: false })
 };

 handleChange = (color) => {
 this.setState({ color: color.rgb })
 };

 render() {
 const { isLoading, color } = this.state;

 const styles = reactCSS({
 'default': {
 color: {
 background: `rgba(${ this.state.color.r }, ${ this.state.color.g }, ${ this.state.color.b })`,
 },
 container: {
 position: 'absolute',
 padding: '2%',
 background: '#fff',
 borderRadius: '10px',
 boxShadow: '0 2px 3px 1px rgba(0,0,0,.4)',
 display: 'inline-block',
 right: '-200px',
 top: '-80px',
 width: '240px',
 height: '60px',
 cursor: 'pointer',
 },
 popup: {
 position: 'absolute',
 width: '90%',
 height: '85%',
 zIndex: '2',
 },
 },
 });

 const style = {
 border: '8px solid' + this.state.color
 }

 if (!isLoading) {
 return (<div className="et-fb-loader-wrapper"><div className="et-fb-loader"></div></div>);
 } else {
 return (
 <Fragment>
 <div style={ styles.color } >
 <div>
 {
 this.props.background_color ?
 <span id="bgCircle" className="changeBg" onClick={this.handleClick} style={style}>
 </span> : null
 }
 { this.state.displayColorPicker ? <div style={ styles.container } onMouseLeave={this.handleClose} ><div style={ styles.popup } >

 <SliderPicker color={ this.state.color } onChange={ this.handleChange } />
 </div>
 </div> : null 
}
 </div>
 <h3>{this.props.author_intro}</h3>
 <h1>{this.state.author}</h1>
 <h5>{this.props.author_desc}</h5>
 </div>
 </Fragment>
 );
 }
 }
}

export default AuthorCard;

Next week we will talk about Lifecycle hooks like ‘componentDidMount’, ‘componentWillMount’, ‘componentWillReceiveProps’ and so on giving then a real example applied to our custom Divi module Author Card.

So, stay tuned. See you next post!