React Admin - Просмотр списка List Кнопка «Дополнительные параметры» - PullRequest
Новая
       5

React Admin - Просмотр списка List Кнопка «Дополнительные параметры»

0 голосов
/ 19 сентября 2018

Я использую React-Admin и хочу объединить действия кнопки с одной ⋮ опцией кнопки.

По сути, я хочу превратить это:

enter image description here

В это!

enter image description here

Я думаю, что это выглядит намного менее загроможденным, и кнопка ⋮ широко используется для большего количества опций.

Существует ли для этого существующее решение?или как это легко сделать?

Редактировать: Мое решение:

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';

Работает довольно хорошо!

1 Ответ

0 голосов
/ 26 сентября 2018

Мое решение состояло в том, чтобы создать новый компонент, который инкапсулировал все кнопки в одну ячейку.Я также не показываю лейбл.Я уверен, что есть более чистое решение, но мой быстрый путь таков: 

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)

С таким же успехом вы могли бы создать компонент React первого класса, который является контейнером кнопок, который сделал бы его более пригодным для повторного использования.

...