Хотите показать данные о событии onMouseDown в моем приложении REACT - PullRequest
Новая
       31

Хотите показать данные о событии onMouseDown в моем приложении REACT

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

У меня есть console.log, показывающий правильную информацию onMouseDown событие в моем приложении REACT, как мне изменить его, чтобы оно отображало данные во всплывающем окне?

Я с удовольствием использую модальное или наведенное на событие событие, что угодно, чтобы отобразить данные. Данные состоят из: 

on item click   

{id: 3, group: 1, title: "resiting", bgColor: "#ff9800", start_time: Moment, …}
bgColor: "#ff9800"
end_time: Moment {_isAMomentObject: true, _i: "2018-10-11T15:08:00", _f: "YYYY-MM-DDTHH:mm:ss", _isUTC: false, _pf: {…}, …}
group: 1
id: 3
start_time: Moment {_isAMomentObject: true, _i: "2018-10-11T10:29:00", _f: "YYYY-MM-DDTHH:mm:ss", _isUTC: false, _pf: {…}, …}
title: "resiting"
__proto__: Object


import React, { Component } from "react";
import moment from "moment";
import Timeline from "react-calendar-timeline";
import generateFakeData from "../../generate-fake-data";

export default class App extends Component {
constructor(props) {
super(props);

const { groups, items } = generateFakeData();
const defaultTimeStart = moment()
  .startOf("day")
  .toDate();
const defaultTimeEnd = moment()
  .startOf("day")
  .add(1, "day")
  .toDate();

this.state = {
  groups,
  items,
  defaultTimeStart,
  defaultTimeEnd
};
     }

    itemRenderer = ({
    item,
    timelineContext,
    itemContext,
    getItemProps,
    getResizeProps
    }) => {
    const { left: leftResizeProps, right: rightResizeProps } = getResizeProps();
const backgroundColor = itemContext.selected
  ? itemContext.dragging
    ? "red"
    : item.selectedBgColor
  : item.bgColor;
return (
  <div
    {...getItemProps({
      style: {
        backgroundColor,
        color: "#ffffff",
        borderColor: "none",
        borderStyle: "none",
        borderWidth: 0,
        borderRadius: 0,
        borderLeftWidth: itemContext.selected ? 1 : 1,
        borderRightWidth: itemContext.selected ? 1 : 1
      },
      onMouseDown: () => {
        console.log("on item click", item);
      }
    })}
  >
    {itemContext.useResizeHandle ? <div {...leftResizeProps} /> : null}

    <div
      style={{
        height: itemContext.dimensions.height,
        overflow: "hidden",
        paddingLeft: 3,
        textOverflow: "ellipsis",
        whiteSpace: "nowrap"
      }}
    >
      {itemContext.title}
    </div>

            {itemContext.useResizeHandle ? <div {...rightResizeProps} /> : null}
          </div>
        );
      };

      render() {
        const { groups, items, defaultTimeStart, defaultTimeEnd } = this.state;

        return (
          <Timeline
            groups={groups}
            items={items}
            sidebarContent={<div>Vehicle</div>}
            sidebarWidth={60}
            lineHeight={20}
            headerLabelGroupHeight={20}
            fullUpdate={false}
            itemsSorted
            itemTouchSendsClick={false}
            stackItems
            itemHeightRatio={0.98}
            showCursorLine
            canMove={true}
            canResize={true}
            defaultTimeStart={defaultTimeStart}
            defaultTimeEnd={defaultTimeEnd}
            itemRenderer={this.itemRenderer}
          />
        );
      }
    }

Вы можете найти его здесь на https://still -river-97856.herokuapp.com / tracking

1 Ответ

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

Попробуйте что-то вроде этого, вы можете использовать модальный дизайн муравья или реагирующий модал для модального (data = {item}). Но логика заключается в том, что как только вы нажимаете кнопку ОК / ВОД на модале, для clickedItem устанавливается значение null, чтобы модал больше не отображался. Посмотрите на этот код, 

onMouseDown: () => {
        console.log("on item click", item);
        this.setState({clickedItem: item});
      }

onModalOkClick = () => {
     this.setState({clickedItem: null})
     }

 render() {
    const { groups, items, defaultTimeStart, defaultTimeEnd, clickedItem } = this.state;

    return (
      <div>
      <Timeline
        groups={groups}
        items={items}
        sidebarContent={<div>Vehicle</div>}
        sidebarWidth={60}
        lineHeight={20}
        headerLabelGroupHeight={20}
        fullUpdate={false}
        itemsSorted
        itemTouchSendsClick={false}
        stackItems
        itemHeightRatio={0.98}
        showCursorLine
        canMove={true}
        canResize={true}
        defaultTimeStart={defaultTimeStart}
        defaultTimeEnd={defaultTimeEnd}
        itemRenderer={this.itemRenderer}
      />
     {clickedItem ? <Modal data={clickedItem}> : null}
   </div>
    );
  }

Дайте мне знать, если вам нужна помощь с модалом или вы все еще не знаете, как поступить. Приборная панель выглядит красиво, кстати. :)

...