Devextreme-reactive: [Typescript] `name` and `dependencies` attributes missing in <Plugin> element

[franklixuefei]

• [x] I have searched this repository's issues and believe that this is not a duplicate.

Current Behaviour

Expected Behaviour

No error should be reported.

Steps to Reproduce (for Bugs)

1. Go to the implementation of SearchPanel - https://github.com/DevExpress/devextreme-reactive/blob/master/packages/dx-react-grid/src/plugins/search-panel.jsx
2. Take a look at the <Plugin> component.

Your Environment

devextreme-reactive: 1.2.0-beta2
react: 16.2.0

[kvet]

Hi,

The name and dependencies properties of Plugin are not public. They are not documented in our docs. We don't recommend using them as they are subject to change.

[franklixuefei]

@kvet Thanks for the reply! However, currently I built myself a grid refresh plugin, and I want that plugin to depend on Toolbar and another state management plugin I wrote for delegating onRefresh callback when a user presses on the refresh button. The reason that I want it to depend on Toolbar is that I want that button to show up next to the SearchPanel inside the Toolbar. Without name and dependencies being public, how am I supposed to do this?

[franklixuefei]

Implementation

This is the code for the plugin, in TypeScript:
ModuleAugmentation.d.ts

import '@devexpress/dx-react-core';

// TODO: remove this file after this is fixed:
// https://github.com/DevExpress/devextreme-reactive/issues/969

declare module '@devexpress/dx-react-core' {
  export interface PluginProps {
    /** React elements that expose the plugin's state and actions and render the plugin's UI. */
    children: React.ReactNode;
    name?: string;
    dependencies?: Array<{name: string}>
  }
}

TableRefresh.tsx

import RefreshIcon from '@material-ui/icons/Refresh';
import IconButton from 'material-ui/IconButton';
import Tooltip from 'material-ui/Tooltip';
import * as React from 'react';
import TableRefreshBase, {
  ITableRefreshBasePluginProps,
  ITableRefreshBasePluginRefreshButtonProps
} from './TableRefreshBase';

export interface ITableRefreshPluginProps extends Partial<ITableRefreshBasePluginProps> { }

export default class TableRefresh extends React.Component<ITableRefreshPluginProps> {
  constructor(props: ITableRefreshPluginProps) {
    super(props);
    this.RefreshButtonComponent = this.RefreshButtonComponent.bind(this);
  }

  render() {
    return (
      <TableRefreshBase
        refreshButtonComponent={this.RefreshButtonComponent}
        {...this.props}
      />
    );
  }

  private RefreshButtonComponent(props: ITableRefreshBasePluginRefreshButtonProps) {
    const { onRefresh } = props;
    return (
      <Tooltip
        title="Refresh Table"
        placement="bottom"
        enterDelay={300}
      >
        <IconButton
          // the following is done so that we make sure we don't pass any parameters
          // to `onRefresh()`.
          onClick={() => onRefresh()}
        >
          <RefreshIcon />
        </IconButton>
      </Tooltip>
    );
  }
}

TableRefreshBase.tsx

import {
  Plugin,
  Template,
  TemplateConnector,
  TemplatePlaceholder,
} from '@devexpress/dx-react-core';
import * as React from 'react';

const pluginDependencies = [
  { name: 'Toolbar' },
  { name: 'TableRefreshState' },
];

export interface ITableRefreshBasePluginProps {
  refreshButtonComponent: React.ComponentType<ITableRefreshBasePluginRefreshButtonProps>;
}

export interface ITableRefreshBasePluginRefreshButtonProps {
  onRefresh: () => void;
}

export default class TableRefreshBase extends React.Component<ITableRefreshBasePluginProps> {
  render() {
    const { refreshButtonComponent: RefreshButton } = this.props;
    return (
      <Plugin
        name="TableRefresh"
        dependencies={pluginDependencies}
      >
        <Template name="toolbarContent">
          <TemplatePlaceholder />
          <TemplateConnector>
            {(getters, { clickRefresh }) => (
              <RefreshButton
                onRefresh={clickRefresh}
              />
            )}
          </TemplateConnector>
        </Template>
      </Plugin>
    );
  }
}

TableRefreshState.tsx

import { Action, Plugin } from '@devexpress/dx-react-core';
import * as React from 'react';

export interface ITableRefreshStateProps {
  onRefreshClick?: () => void;
}

export default class TableRefreshState extends React.PureComponent<ITableRefreshStateProps> {
  render() {
    const {onRefreshClick} = this.props;
    return (
      <Plugin
        name="TableRefreshState"
      >
        {onRefreshClick && <Action name="clickRefresh" action={onRefreshClick} />}
      </Plugin>
    );
  }
}

Usage

<Grid>
  ...
  <TableRefreshState
    onRefreshClick={...}
  />
  ...
  <Toolbar />
  <SearchPanel />
  <TableRefresh />
  ...
</Grid>

Result:

[franklixuefei]

Related to #968

[kvet]

You can simply avoid setting the name and dependencies properties. They are created to notify users that they placed a plugin incorrectly. When you are creating your own plugin, this functionality can be easily omitted as you know your custom plugin requirements.

[DanHarman]

@kvet Would you consider making these properties public as I too have plugins and when shared with other team members, or even when I forget, the feature is extremely useful.

[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.