React Admin - 列表视图 ⋮ "More Options" 按钮

Question

我正在使用 React-Admin 框架并希望将按钮操作组合到单个 ⋮ 选项按钮。

基本上，我想转这个：

进入这个！

我认为它看起来不那么混乱，⋮ 按钮被广泛用于更多选项。

是否有现成的解决方案？或者如何轻松完成？

编辑：我的解决方案：

MoreOptions.jsx

import * as React from "react";
import { Link, DeleteButton } from "react-admin";
import IconButton from "@material-ui/core/IconButton";
import QueueIcon from "@material-ui/icons/Queue";
import EditIcon from "@material-ui/icons/Edit";

import _objectWithoutProperties from "babel-runtime/helpers/objectWithoutProperties";

const MyEditButton = (props) => (
  <IconButton 
    component={Link} 
    to={props.basePath + "/" + props.record.id} 
    color="primary" 
    aria-label="Edit"
  >
    <EditIcon style={{ fontSize: '20px' }} />
  </IconButton >
);

const MyCloneButton = (props) => (
  <IconButton component={Link} to={{
    pathname: props.basePath + '/create',
    state: {
      record: _objectWithoutProperties(props.record, ['id', 'paxDbName'])
    }
  }} color="primary" aria-label="Clone">
    <QueueIcon style={{ fontSize: '20px' }} />
  </IconButton>
);

const EditCloneDelete = (props) => {
  let a = props;
  return <div>
    <MyEditButton {...props} />
    <MyCloneButton {...props} />
    <DeleteButton basePath={props.basePath} record={props.record} resource={props.resource} label=""/>
  </div>;
};

export default EditCloneDelete

posts.jsx

import EditCloneDelete from './MoreOptions.jsx';

效果很好！

Answer 1

我的解决方案是创建一个新组件，将所有按钮封装到一个单元格中。我也不显示标签。我确定有更清洁的解决方案，但我的快速方法是：

const MyEditButton = (props) => (
    <IconButton classes={{root: props.classes.buttonSize}} component={Link} to={
        ${props.basePath} + "/" + ${props.record.id}
    } color="primary" aria-label="Edit"  ><EditIcon style={{fontSize: '20px'}}/></IconButton>
);

const MyCloneButton = (props) => (
    <IconButton classes={{root: props.classes.buttonSize}} component={Link} to={{
        pathname: props.basePath + '/create',
        state: {record: _objectWithoutProperties(props.record, ['id', 'paxDbName'])}
    }} color="primary" aria-label="Clone"><QueueIcon style={{fontSize: '20px'}}/></IconButton>
);

const styles = {
    buttonSize: {
        width: "28px",
        height: "28px",
    },
};

const EditCloneDelete = (props) => {
    let a = props;
    return (
        <div>
            <a href={
                `http://localhost:8001/api/v1/namespaces/kube-system/services/https:kubernetes-dashboard:/proxy/#!/overview?namespace=${props.record.customerName ? props.record.customerName : props.record.name}`
            } target="dashboard">
                <IconButton classes={{root: props.classes.buttonSize}} color="primary" aria-label="Edit"><img src={K8sIcon} style={{width: '20px', height: '20px'}}/></IconButton>
            </a>
            <MyEditButton {...props}/>
            <MyCloneButton {...props}/>
            <OptionalDeleteButton {...props} classes={{deleteButton: props.classes.buttonSize}} label={""} disabled={
                !props.showDelete(props.record)
            }/>
        </div>
    );
};

export default compose(withStyles(styles))(EditCloneDelete)

您可以同样轻松地创建第一个 class React 组件，它是一个按钮容器，可以使它更易于重用。

React Admin - 列表视图 ⋮ "More Options" 按钮

React Admin - List View ⋮ "More Options" Button

react-admin