Custom Loader не применяется в отношении таблицы реакции - PullRequest
Новая
       31

Custom Loader не применяется в отношении таблицы реакции

0 голосов
/ 01 октября 2019

Я пытаюсь перегрузить загрузчик по умолчанию, предоставляемый response-table, со Spinner, предоставленным semantic-ui-реакции. Но это не похоже на работу. Я сохранил три компонента;одно приложение, одно для Data Grid, другое для Spinner. Может кто-нибудь помочь мне здесь?

Песочница: https://codesandbox.io/s/react-table-row-table-g3kd5

Компонент приложения 

import * as React from "react";
import { render } from "react-dom";
import DataGrid from "./DataGrid";

interface IProps {}

interface IState {
  data: {}[];
  columns: {}[];
  loading: boolean;
}

class App extends React.Component<IProps, IState> {
  constructor(props: any) {
    super(props);
    this.state = {
      data: [],
      columns: [],
      loading: true
    };
  }

  componentDidMount() {
    this.getData();
    this.getColumns();
  }

  getData = () => {
    let data = [
      { firstName: "Jack", status: "Submitted" },
      { firstName: "Simon", status: "Pending" },
      { firstName: "Pete", status: "Approved" }
    ];
    setTimeout(() => {
      this.setState({ data, loading: false });
    }, 2000);
  };

  getColumns = () => {
    let columns = [
      {
        Header: "First Name",
        accessor: "firstName"
      },
      {
        Header: "Status",
        accessor: "status"
      }
    ];
    this.setState({ columns });
  };

  render() {
    return (
      <>
        <DataGrid
          loading={this.state.loading}
          data={this.state.data}
          columns={this.state.columns}
        />
      </>
    );
  }
}

DataGrid 

import * as React from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";
import Spinner from "./Spinner";

interface IProps {
  data: any;
  columns: any;
  loading: boolean;
}

interface IState {}

export default class DataGrid extends React.Component<IProps, IState> {
  render() {
    return (
      <>
        <ReactTable
          loading={this.props.loading}
          data={this.props.data}
          LoadingComponent={Spinner}
          columns={this.props.columns}
        />
      </>
    );
  }
}

Spinner 

import { Loader } from "semantic-ui-react";
import * as React from "react";

interface IProps {
  spinnerFlag: boolean;
}

const Spinner: React.FunctionComponent<IProps> = props => {
  return (
    <div>
      <Loader active={props.spinnerFlag}>Loading</Loader>
    </div>
  );
};

export default Spinner;

1 Ответ

1 голос
/ 01 октября 2019

Хорошо, вы что-то упустили.

Во-первых, если вы проверяете свою песочницу, она показывает загрузку в конце, но есть проблема. Вам нужно сделать две вещи

1 - придать вашему Spinner надлежащий стиль, чтобы он отображался на вашем столе, а не под ним.

2 - вам нужно использовать подпорку загрузки, которую вы передаете ReactTableСоставная часть. Потому что сейчас ваш Spinner всегда виден и не контролируется загрузкой prop

Ваш компонент Spinner должен использовать props.loading вместо props.spinnerFlag, потому что это то, что передается компоненту ReactTable

Измените Spinnerфайл как этот 

const Spinner: React.FunctionComponent<IProps> = props => {
return props.loading ? (
<div
  style={{
    display: "block",
    position: "absolute",
    left: 0,
    right: 0,
    background: "rgba(255,255,255,0.8)",
    transition: "all .3s ease",
    top: 0,
    bottom: 0,
    textAlign: "center"
  }}
>
  <Loader>Loading</Loader>
</div>
) : null;
};

export default Spinner;

Теперь вы должны увидеть ваш загрузчик. Вот Песочница

Надеюсь, это поможет

...