React-admin: [ChipField] allow to customize label

Created on 25 Apr 2019  路  4Comments  路  Source: marmelab/react-admin

Is your feature request related to a problem? Please describe.
It's hard to customize ChipField label, e.g. use firstName + lastName instead of single field value.
Currently, it's possible to create custom component using Chip from material-ui, style it (add margins, like ChipField does).
We can make it way easier 馃殌

Describe the solution you'd like
Add formatLabel function prop. It will accept record as argument and return label.

<ChipField formatLabel={record => `${record.firstName} ${record.lastName}`} />

Describe alternatives you've considered
There's an alternative, described above, but it's an overkill for such basic use case.

Additional context
I'd like to hear from you guys what do you think about that.
And, of course, I can submit a PR.

enhancement good first issue

All 4 comments

Current solution:

import React from 'react';
import PropTypes from 'prop-types';
import Chip from '@material-ui/core/Chip';
import withStyles from '@material-ui/core/styles/withStyles';

const styles = {
  root: {
    margin: 4,
  },
};

function CustomChipField({ classes, record, onClick }) {
  const {
    firstName, lastName,
  } = record;
  return (
    <Chip className={classes.root} label={`${firstName} ${lastName}`} onClick={onClick} />
  );
}

CustomChipField.propTypes = {
  classes: PropTypes.shape({}).isRequired,
  record: PropTypes.shape({}),
  onClick: PropTypes.func.isRequired,
};

CustomChipField.defaultProps = {
  record: {},
};

export default withStyles(styles)(CustomChipField);

Proposed solution:

<ChipField formatLabel={record => `${record.firstName} ${record.lastName}`} />

This might be useful for other fields too.
Instead of adding a new formatLabel prop, what about accepting a function as a label ?

Like:

<ChipField label={record => `${record.firstName} ${record.lastName}`} />

@Kmaschta given that in most parts of react-admin label is a string (and often path to translation value), it may be confusing.

As explained in #3169, this is really easy enough to do in userland, so we won't implement it.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kopax picture kopax  路  3Comments

aserrallerios picture aserrallerios  路  3Comments

Dragomir-Ivanov picture Dragomir-Ivanov  路  3Comments

ilaif picture ilaif  路  3Comments

nicgirault picture nicgirault  路  3Comments