I’m participating in nuggets Creators Camp # 4, click here to learn more and learn together!

One, foreword

When I first received this requirement, I did not want to write it, because it was not difficult to change all the pages and ensure that there would be no problems, but the workload was a little heavy. I had a little hesitation and went ahead with it, because I found that once I got it right, it would help the business.

Our business is workflow. There are about ten nodes in the whole process. Each node has a separate page, and the operations of different nodes have the same or different operations. The new requirement is to make a to-do page that contains all the nodes and needs to aggregate all the actions.

This design idea is quite simple, according to the page dimension, all page operations are distilled into the button group business components, and then need to aggregate the page to introduce.

The project is based on the React framework, so the code is written using JSX syntax, component development using hooks function components, and THE UI framework using ANTD.

Second, the implementation

2.1 Refining Components

Extract the page button component buttonGroup.jsx from the page dimension. Here is my project file structure:

The action button component of the processing page

File relative path: / accept/components/ButtonGroup JSX

The main operations include accept and edit, and the interaction between the two operations is to open the form popup.

return (
  <>
    <button onClick={()= >Enclosing updataOperate (' visible ')} > edit</button>
    <button onClick={()= >Enclosing updataOperate (' acceptVisible ')} > accepted</button>
  </>
);
Copy the code

Basically all pages are similar to the above changes, the difference is that some pages have more buttons, some pages have fewer buttons. Whatever the interaction, refine the public method as much as you can.

2.2 Special Treatment

For example, the edit button is displayed on all nodes of the to-do page, but only the acceptance page has it in the node page. At this time, the acceptance node of the to-do page should not display the edit button repeatedly, so I set a btnFlag variable. There are two main values, accept- accept page and other- all other entries into the accept button group pass this value.

The action button component of the processing page

File relative path: / accept/components/ButtonGroup JSX

Judge whether the edit button is displayed according to the value of btnFlag. When the value is Accept, the display is displayed, and other values are not displayed.

return (
  <>
    {btnFlag === 'accept' ? <button onClick={()= >Enclosing updataOperate (' visible ')} > edit</button> : null}
    <button onClick={()= >Enclosing updataOperate (' acceptVisible ')} > accepted</button>
  </>
);
Copy the code

2.3 Introduction

To do the page

Relative file path: pending.jsx

After all the button groups are introduced into the to-do page, they are sorted by node value.

import AcceptButtonGroup from '.. /accept/components/ButtonGroup'; / / accepted
import defineButtonGroup from '.. /define/components/ButtonGroup'; / / to be determined

/** * list operation */
columns = columns.concat([
  {
    title: 'operation'.key: 'action'.width: 160.fixed: 'right'.render: (text, record) = > (
      <>
        {record.node === 'accept' && <AcceptButtonGroup record={record} />}
        {record.node === 'define' && <DefineButtonGroup record={record} />}
      </>),},]);Copy the code

2.4 Follow-up Development

With the start of the polymerization, behind have a new demand, our product manager would be in accordance with the he wants to plan the placement of the action button, such as a particular processing operations, he will need to list on which pages, this time, to handle button refining, development is very happy, all the needed page directly into the finished.

Third, summary

In terms of small tricks, this feature is not difficult to implement, in fact, it brings me more inspiration, subsequent development benefit.

Breaking the original habit will be a little painful at first, but once you start, you will always think how to do things better, you will find fault with yourself, always feel inadequate.

At the same time, I will consider some functions in advance according to the development of the business, and how to design and develop them to be reused as much as possible in the subsequent requirements, so as to reduce repeated development.

I never thought of action buttons as a way to refine common components, because I’m so used to developing them straight up. However, with current business development, many operations may cross over into different pages, and it is necessary to refine common components.