index.js

import React, { useState, useMemo } from 'react';
import { Button, Collapse, Select, Col, Form, Input } from 'antd';
import Icon from '@ant-design/icons';
import { useCallback } from 'react';
import './index.css';
import { useEffect } from 'react';
const { TextArea } = Input;
const { Panel } = Collapse;
const Page = ({
  // form: { getFieldDecorator, validateFields, resetFields },
  onEventValueChange,
  canvasData
}) => {

  console.log('canvasData ====>>>', canvasData);

  const [eventData, setEventData] = useState(canvasData.line ? canvasData.line.events : canvasData.node.events);

  useEffect(() => {
    setEventData(canvasData.line ? canvasData.line.events : canvasData.node.events);
  }, [canvasData])
  

  /**
   * 新增事件
   */

  const onHandleAddEventListener = () => {
    const arr = [...eventData];
    arr.push({ type: '0', action: '0' });
    setEventData(arr);
  };

  const onHandleEventTypeChange = (e, idx) => {
    const data = [...eventData];
    data[idx].type = e;
    setEventData(data);
  };

  const handleFormChangeEvent = (values, idx) => {
    const data = [...eventData];
    console.log('values ======', values);
    data[idx].type = values[`eventType${idx}`];
    data[idx].action = values[`event${idx}`];
    data[idx].name = values[`name${idx}`];
    data[idx].value = values[`code${idx}`];
    data[idx].params = values[`params${idx}`];
    console.log('datas ======', data );
    console.log(`data[${idx}] ======`, data[idx]);
    setEventData(data);
    onEventValueChange(data);
  };

  /**
   * 渲染自定义事件表单入口
   */

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const renderFontForm = (item, idx) => {
    return (
      <Form onValuesChange={ (value, values) => handleFormChangeEvent(values, idx) }>
        <Col span={24}>
          <Form.Item label="事件类型" name={`eventType${idx}`} initialValue={item.type ? parseInt(item.type) : 0}>
            <Select
                placeholder="请选择事件类型"
                onSelect={(value) => onHandleEventTypeChange(value, idx)}
              >
              <Select.Option value={0}>单击</Select.Option>
              <Select.Option value={1}>双击</Select.Option>
              <Select.Option value={2}>webSocket事件</Select.Option>
              {/* <Select.Option value={3}>MQTT</Select.Option> */}
            </Select>
          </Form.Item>
        </Col>
        {renderFormByEventType(item, idx)}
      </Form>
    );
  };

  /**
   * 根据事件类型渲染事件行为表单
   */

  const renderFormByEventType = (item, idx) => {
    const renderCommonForm = () => {
      return (
        <>
          <Col span={24}>
            <Form.Item label="事件行为" name={`event${idx}`} initialValue={item.action ? parseInt(item.action) : 0}>
              <Select
                placeholder="请选择事件行为"
              >
                <Select.Option value={0}>跳转链接</Select.Option>
                <Select.Option value={1}>执行动画</Select.Option>
                <Select.Option value={5}>停止动画</Select.Option>
                <Select.Option value={2}>执行函数</Select.Option>
                <Select.Option value={3}>执行window下的全局函数</Select.Option>
                <Select.Option value={4}>更新属性数据</Select.Option>
              </Select>
            </Form.Item>
          </Col>
          {renderFormByEvent(item, idx)}
        </>
      );
    };

    switch (item.type) {
      case '0':
      case '1':
        return renderCommonForm();
      case '2':
        return (
          <>
            <Col span={24}>
              {
                <Form.Item label="消息名" name={`name${idx}`} initialValue={item.name || 0}>
                  <Input placeholder="请输入自定义消息名" />
                </Form.Item>
              }
            </Col>
            {renderCommonForm()}
          </>
        );
      case '3':
        return (
          <>
            <Form.Item label="Topic" name={`name${idx}`}>
              <Col span={24}>
                <Input placeholder="请输入Topic/subtopic" />
              </Col>
            </Form.Item>
            {renderCommonForm()}
          </>
        );
      default:
        break;
    }
  };

  /**
   * 根据事件行为生成不同的表单
   */

  const renderFormByEvent = (item, idx) => {
    switch (item.action) {
      case '0':
        return (
          <>
            <Col span={24}>
              <Form.Item label="链接地址" name={`code${idx}`} initialValue={item.value}>
                <Input
                  placeholder="请输入链接地址"
                />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item label="参数值" name={`params${idx}`} initialValue={ item.params }>
                <Input />
              </Form.Item>
            </Col>
          </>
        );
      case '1':
      case '5':
        return (
          <>
            <Col span={24}>
              <Form.Item label="动画标签" name={`code${idx}`} initialValue={item.value}>
                <Input />
              </Form.Item>
            </Col>
          </>
        );
      case '2':
        return (
          <Col span={24}>
            <Form.Item label="自定义代码" name={`code${idx}`} initialValue={ item.value }>
              <TextArea
                placeholder="请输入自定义代码"
                rows={10}
              />
            </Form.Item>
          </Col>
        );
      default:
        break;
    }
  };

  /**
   * value值的变化, 通知canvas更新画布的数据
   */

  // const onHandleCodeChange = (code, idx) => {
  //   form.validateFields().then(value => {
  //     console.log('code =====>>>> ', code);
  //     console.log('value =====>>>> ')
  //     console.log(value)
  //     eventData[idx] = {
  //       type: null,
  //       action: null,
  //       value: null
  //     };
  //     eventData[idx].type = +value[`eventType${idx}`];
  //     eventData[idx].action = +value[`event${idx}`];
  //     eventData[idx].value = code;
  //     eventData[idx].params = value[`params${idx}`] || '';
  //     onEventValueChange(eventData);
  //   });
  // };

  /**
   * 删除自定义事件
   */

  const onHandleDeleteItem = useCallback(
    (idx) => {
      const data = [...eventData];
      delete data[idx];
      // resetFields();
      setEventData(data.filter(Boolean));
    },
    [eventData]
  );

  /**
   * 渲染事件列表
   */

  const renderPanel = useMemo(() => {
    if (eventData.length < 1) return;
    return (
      <Collapse >
        {eventData
          .map((item) => ({ ...item, action: String(item.action), type: String(item.type) }))
          .map((item, index) => (
            <Panel
              header={
                <div>
                  {`自定义事件${index + 1}`}{' '}
                  <Icon onClick={() => onHandleDeleteItem(index)} type="delete" />
                </div>
              }
              key={index}
            >
              {renderFontForm(item, index)}
            </Panel>
          ))}
      </Collapse>
    );
  }, [eventData, renderFontForm, onHandleDeleteItem]);

  return (
    <div>
      <Button type="primary" className="event-button" onClick={onHandleAddEventListener}>
        新增事件
      </Button>
      {renderPanel}
    </div>
  );
};

export default (Page);