Devextreme-reactive: Cannot pass the props to formatterComponent

[up209d]

Our standard way of assigning style with Material UI now is using classes object:
const BlueText =({classes}) => ( <span className={classes.blueText}>Hello World</span> )
, but it seems to be not possible in the case of DataTypeProvider and many other React Grid Components. If I want to assign className classes.blueText to a CurrencyFormatter

const CurrencyFormatter = props =>
  <div className={props.classes.blueText}>${props.value}</div>;

const CurrencyTypeProvider = props => (
  <DataTypeProvider
    formatterComponent={CurrencyFormatter}
    {...props}
  />
);

As you can see, CurrencyTypeProvider can receive the classes from a mother Component. However I cannot pass the props classes through formatterComponent unless i do:

const CurrencyTypeProvider = props => (
  <DataTypeProvider
    formatterComponent={({value}) => <div className={props.classes.blueText}>${value}</div>}
    {...props}
  />
);

Doing that way will create a new instance of a 'blue text component' every time thus if the table is big, the performance will be very poor. Anyone tell me, what should I do in order to pass classes to the
formatterComponent. Cheers!

[SergeyAlexeev]

Hi,

In your case, I suggest you customize your formatter component using the withStyles function as shown in this sample.

Please note, I'm using separate styles for the formatter component.

[up209d]

Yeah, I also ended up that way. However, it would be nice if we can pass some props to formatterComponent from mother component, so we can gather all JSS code in one place.

const CurrencyFormatter = props => {
  return (
    <div className={props.classes.format}>${props.value.toLocaleString()}</div>
  )
};

const CurrencyFormatterStyled = withStyles(theme => ({
  // JSS Here
  format: {
    '&::before': {}
  }
}), {withTheme: true})(CurrencyFormatter);

const CurrencyTypeProvider = props => {
  return (
    <DataTypeProvider
      formatterComponent={CurrencyFormatterStyled}
      {...props}
    />
  )
};

[klassicd]

I'd like to second the idea that any extra props passed to DataTypeProvider should be forwarded to the formatterComponent.

For example, I created a LinkTypeProvider and LinkFormatter. I have to pass the full URL and path of the link in the row object to make it usable within LinkFormatter. Instead I would like to pass a prop down called basePath

let LinkFormatter = (props: Object) => {
  const { basePath, classes, row, value } = props;
  return (
    <Button component={Link} to={`${basePath}/${row.id}`} className={classes.link}>
      {value}
    </Button>
  );
};

LinkFormatter = withStyles(styles)(LinkFormatter);

const LinkTypeProvider = (props: Object) => {
  return <DataTypeProvider formatterComponent={LinkFormatter} {...props} />;
};

[lpanichi]

Actually, I have another problem related to the lack of properties in the formatterComponent. The actual formatterComopnent does not allow to dispatch any action in a redux store, so this is quit limitating.
Maybe a plugin could be a solution but I have not succeed so far.

[up209d]

@lpanichi Yeah, that's a pain. However, in your case, you still can connect redux store directly to the formatterComponent and dispatch some actions inside.

const CurrencyFormatter = props => {
  return (
    <div className={props.classes.format}>${props.value.toLocaleString()}</div>
  )
};

const CurrencyFormatterConnectedStyled = connect(mapStateToProps, mapDispatchToProps)(
  withStyles(theme => ({
    // JSS Here
  }), {withTheme: true})(CurrencyFormatter)
);

const CurrencyTypeProvider = props => {
  return (
    <DataTypeProvider
      formatterComponent={CurrencyFormatterConnectedStyled}
      {...props}
    />
  )
};

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.