4

有没有人通过自定义排序、过滤和操作扩展了引用的许多字段功能。使用内置网格或类似“React Grid”的东西。

有一些例子会很棒。

编辑：我开始参考我自己的许多控制器，这些控制器专为与开发极端反应网格一起使用而定制。显示数据和排序，但无法过滤工作。这就是我到目前为止所拥有的。如您所见，主要是参考许多控制器的副本。

我尝试将过滤器置于控制器状态，因为它适用于分页，但这样做会导致组件进入无限递归。我猜我需要调度一个动作，以便过滤器状态驻留在 redux 状态。

我欢迎任何帮助。

import { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";

import { crudGetManyReference as crudGetManyReferenceAction } from "react-admin";
import { getIds, getReferences, nameRelatedTo } from "react-admin";

    export class Controller extends Component {
      constructor(props) {
        super(props);
        this.state = {
          sort: props.sort
        };
      }

      componentDidMount() {
        this.fetchReferences();
      }

      componentWillReceiveProps(nextProps) {
        if (this.props.record.id !== nextProps.record.id) {
          this.fetchReferences(nextProps);
        }
      }

      setSort = (field, order) => {
        this.setState({ sort: { field, order } }, this.fetchReferences);
      };

      setFilter = filter => {
        // How to do this?
        // The filters coming in is correct format as object with keys and 
        // values. 
        console.log(filter);
      };

      fetchReferences(
        { reference, record, resource, target, perPage, source, filter } = this
          .props
      ) {
        const { crudGetManyReference } = this.props;
        const pagination = { page: 1, perPage };
        const relatedTo = nameRelatedTo(
          reference,
          record[source],
          resource,
          target,
          filter
        );
        crudGetManyReference(
          reference,
          target,
          record[source],
          relatedTo,
          pagination,
          this.state.sort,
          filter
        );
      }

      render() {
        const { resource, reference, data, ids, children, basePath, filter } = this.props;
        const referenceBasePath = basePath.replace(resource, reference);
        return children({
          currentSort: this.state.sort,
          currentFilter: filter,
          data,
          ids,
          isLoading: typeof ids === "undefined",
          referenceBasePath,
          setSort: this.setSort,
          setFilter: this.setFilter
        });
      }
    }

    Controller.propTypes = {
      basePath: PropTypes.string.isRequired,
      children: PropTypes.func.isRequired,
      crudGetManyReference: PropTypes.func.isRequired,
      filter: PropTypes.object,
      ids: PropTypes.array,
      perPage: PropTypes.number,
      record: PropTypes.object,
      reference: PropTypes.string.isRequired,
      data: PropTypes.object,
      resource: PropTypes.string.isRequired,
      sort: PropTypes.shape({
        field: PropTypes.string,
        order: PropTypes.oneOf(["ASC", "DESC"])
      }),
      source: PropTypes.string.isRequired,
      target: PropTypes.string.isRequired,
      isLoading: PropTypes.bool
    };

    Controller.defaultProps = {
      filter: {},
      perPage: 25,
      sort: { field: "id", order: "DESC" },
      source: "id"
    };

    function mapStateToProps(state, props) {
      const relatedTo = nameRelatedTo(
        props.reference,
        props.record[props.source],
        props.resource,
        props.target,
        props.filter
      );
      return {
        data: getReferences(state, props.reference, relatedTo),
        ids: getIds(state, relatedTo)
      };
    }

    export default connect(mapStateToProps, {
      crudGetManyReference: crudGetManyReferenceAction
    })(Controller);
4

0 回答 0