ответ-сетка-макет не отображает макет я передаю ему - PullRequest
Новая
       13

ответ-сетка-макет не отображает макет я передаю ему

0 голосов
/ 29 октября 2018

Я столкнулся с проблемой с библиотекой response-grid-layout и не знаю, является ли это ошибкой или я плохо что-то делаю. Я открыл вопрос здесь , но чем больше я об этом думаю, тем меньше вероятность того, что такая большая проблема осталась незамеченной. Вы можете найти демонстрацию того, что я испытываю здесь

Что я пытаюсь сделать

Я бы хотел создать панель мониторинга, используя ответную сетку. Я пытаюсь реализовать шаблон контейнера , поэтому у меня есть компонент DashboardContainer, управляющий макетом через его состояние и передающий этот макет компоненту Dashboard в подпорках.

Проблема, с которой я сталкиваюсь

Элементы размещаются правильно для начального состояния, но когда я добавляю элементы, x, y, w и h добавленного элемента не являются правильными. Это должно быть (5,0,2,2) для первого добавления, и в конечном итоге он помещается в (0,4,1,1) Я видел, что элементы можно изменить до 1 ширины и высоты, если у них нет правильного ключа, но я думаю, что мои ключи правильные.

Пример: этот макет передается в Dashboard данные макета

Но это отображаемая раскладка (элемент "new0" не соответствует) отображаемый макет

Мой код

Вот (упрощенный) код моего компонента DashboardContainer 

import React from "react";
import ReactDOM from "react-dom";
import Dashboard from "./Dashboard";

class DashboardContainer extends React.Component {
  static defaultProps = {
    maxRows: 8,
    cols: 12
  };

  state = {
    layout: [
      { i: "key0", x: 0, y: 0, w: 2, h: 2 },
      { i: "key1", x: 2, y: 0, w: 3, h: 2 },
      { i: "key2", x: 2, y: 2, w: 2, h: 2 },
      { i: "key3", x: 8, y: 0, w: 3, h: 2 }
    ],
    newElementsCount: 0
  };

  onLayoutChange = l => {
    this.setState({ layout: l });
  };

  add = () => {
    // here we calculate where the new element should be placed
    var x = foundX, y = foundY, w = foundW, h = foundH;
    var newLayout = this.state.layout;

    newLayout.push({
      i: "new" + this.state.newElementsCount,
      x: x,
      y: y,
      w: w,
      h: h
    });

    this.setState({
      newElementsCount: this.state.newElementsCount + 1,
      layout: newLayout
    });
  };

  render() {
    return (
      <div>
        <Dashboard
          layout={this.state.layout}
          add={this.add}
          cols={this.props.cols}
          maxRows={this.props.maxRows}
          onLayoutChange={this.onLayoutChange}
          preventCollision={true}
        />
      </div>
    );
  }
}

const contentDiv = document.getElementById("root");
ReactDOM.render(React.createElement(DashboardContainer), contentDiv);

А вот компонент Dashboard: 

import React from "react";
import RGL, { WidthProvider } from "react-grid-layout";
const ReactGridLayout = WidthProvider(RGL);

class Dashboard extends React.Component {
  generateDOM() {
    return this.props.layout.map(function(item) {
      return <div key={item.i}>{item.i}</div>;
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.props.add}>Add</button>
        <ReactGridLayout
          rowHeight={30}
          maxRows={this.props.maxRows}
          cols={this.props.cols}
          layout={this.props.layout}
          compactType={null}
          onLayoutChange={this.props.onLayoutChange}
        >
          {this.generateDOM()}
        </ReactGridLayout>
      </div>
    );
  }
}

module.exports = Dashboard;

Полный (почти) рабочий код можно найти в этом codesandbox

Я все еще новичок в React и RGL, поэтому любые предложения приветствуются!

Спасибо

...