The source code

TableOption component source code

background

After the service platform reconstruction, the new framework is based on antD ecology and adopts declarative design thinking. It can quickly build query forms, Table forms and new edit forms of CRUD pages by MEANS of JSON

However, every time we define the operation column of the Table, we have to write a lot of repeated “template code”. On the one hand, it is inefficient and on the other hand, it is not convenient to pass the interaction details. Therefore, we abstract and encapsulate this scene into a pass component

As shown above, the following “template code” is repeated each time before the component is wrapped:

{
  title: 'operation'.render: (text, record, index) = > {
    const tableMoreBtns = (
      <Menu>
        <Menu.Item>
          <Button type="text" size="small">xxx111</Button>
        </Menu.Item>
        <Menu.Item>
          <Button type="text" size="small">xxx222</Button>
        </Menu.Item>
        <Menu.Item>
          <Button type="text" size="small">xxx333</Button>
        </Menu.Item>
      </Menu>
    );

    return (
      <Space size={0} split={<Divider type="vertical" />} wrap>
        <Button type="link" size="small">xxx</Button>
        <Button type="link" size="small">record</Button>

        <Dropdown overlay={tableMoreBtns}>
          <Button type="link" size="small">More and more<DownOutlined />
          </Button>
        </Dropdown>
      </Space>); }},Copy the code

Another big problem is that the interaction is not unified. For example, when you click the “Record” button, you need to request and then review the interface, and then open the edit box. In this case, it is easy to forget to add the loading effect, which affects the user experience

Demand analysis

Based on the current business scenario, there are several requirements for this through component:

  1. The action column contains only three types of buttons: plain Text button, Popconfirm button, and drop-down menu button
  2. Automatically manages the loading effect of buttons. If an asynchronous function is specified, the loading effect is automatically enabled
  3. For the Popconfirm button, if an asynchronous operation is performed, the Popconfirm button cannot be loaded. Instead, the Popconfirm button can be loaded directly in the position of the button
  4. In the case of a push-down menu button, if there is an asynchronous operation, close the push-down menu after loading
  5. The reserved authentication interface can be displayed or not by permission control button

Core components

ButtonExt

Antd extends the button to add the onAsyncClick callback function, which automatically manages the loading effect on or off if you use it asynchronously

PopconfirmBtn

Popconfirm and Button components are combined to define configuration items to achieve the effect of JSON generation of buttons requiring secondary confirmation

DropdownBtn

Combination of Dropdown and Button two components, define configuration items, achieve JSON to generate a drop-down menu Button

TableOption

Custom action column buttons, sort out the above several types of buttons, through JSON declarative generation of corresponding components