BaseDrawer

BaseDrawer

import React, { 
  useState, forwardRef, useImperativeHandle, cloneElement, isValidElement
} from 'react';
import {string, func, object, number, bool, node, oneOfType} from 'prop-types';
import { Drawer, Button } from 'antd';
function DrawerModal(props, ref) {
  const {children, element, buttonProps, trigger, onClose, ...rest} = props;
  const [visible, setVisible] = useState(false);
  useImperativeHandle(ref, () => ({
    onShow,
    onClose: handleClose,
  }))
  function onShow() {
    setVisible(true)
  }
  function handleClose() {
    if(typeof onClose === 'function') { onClose() }
    setVisible(false)
  }
  function renderAction() {
    if(isValidElement(element)) {
      return cloneElement(element, {
        [trigger]: onShow,
      })
    }
    if(buttonProps) {
      return <Button type='primary' {...buttonProps} onClick={onShow} />
    }
    return null;
  }
  const attrs = {
    width,
    title,
    closable: false, // 不显示标题右侧的X
    // maskClosable: false, // 点击遮罩不关闭抽递
    destroyOnClose: true,
    bodyStyle: {padding: 16, ...bodyStyle},
  };
  return (
    <>
      { renderAction() }
      {
        visible && (
          <Drawer
            {...rest}
            visible={visible}
            onClose={handleClose}
          >
            {children}
          </Drawer>
        )
      }
    </>
  );
}
const BaseDrawer = forwardRef(DrawerModal);
BaseDrawer.propTypes = {
  onSubmit: func.isRequired,
  onClose: func,
  title: node,
  width: oneOfType([number, string]),
  buttonProps: object,
  closable: bool,
  destroyOnClose: bool,
  trigger: string,
};
BaseDrawer.defaultProps = {
  width: 560,
  buttonProps: { children: '新建' },
  closable: false, // 不显示标题右侧的X
  destroyOnClose: true, // 关闭销毁子元素
  maskClosable: false, // 点击遮罩不关闭抽递，默认 true关闭
  trigger: 'onClick',
};
export default BaseDrawer;

DrawerTable

import React, { useRef, useState } from 'react';
import { array } from 'prop-types';
import { Table } from 'antd';
import { BaseDrawer, Progress, FormRender } from '$components';
const columnData = [
  { label: '姓名', key: 'username' },
  { label: '注册时间', key: 'createdAt' },
];
const columns = [
  {
    title: '姓名',
    dataIndex: 'username',
  },
  {
    title: '注册时间',
    render: (text, data) => data.endTime - data.startTime ? data.endTime - data.startTime : '0',
  },
  {
    title: '更新时间',
    dataIndex: 'dur',
  },
  {
    title: 'API',
    dataIndex: 'component',
  },
];
TableList.propTypes = {
  dataSource: array,
};
function TableList({ dataSource }) {
  const modalRef = useRef(null);
  const [state, setState] = useState([]);
  function rowChange(row) {
    const { tags } = row;
    const newData = listData.map(it => {
      it.value = row[it.key];
      return it;
    });
    if (Array.isArray(tags)) {
      const child = tags.map(({ key, value }) => ({ label: key, value }));
      newData.push(...child);
    }
    setState(newData);
    modalRef.current.onShow();
  }
  function onSubmit() {}
  return (
    <>
      <BaseDrawer
        ref={modalRef}
            title='列表信息'
        onSubmit={onSubmit}
     >
        <FormRender col={24} dataSource={state} />
      </BaseDrawer>
      <Table
        columns={columns},
        dataSource={dataSource},
        pagination={false},
        rowKey='id'
        onRow={
          record => ({
            onClick: () => rowChange(record),
          })
        }
      />
    </>
  );
}
export default TableList;