nyx_server/ui/app/container/ColumnMenu.js

Node内容发布

import React from "react";
import ReactDom from "react-dom";
import { Menu, Icon, Modal, Button, Form, Input, Row, Col, Tooltip} from 'antd';
const FormItem = Form.Item;
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const createForm = Form.create;
import { connect } from "react-redux";
import fetch from 'isomorphic-fetch';

import {addColumn,
  openAddColumn,
  cleanAddColumnState,
  setColumnField,
  columnExist
} from "../actions/Columns";



class CreateColumnDialog extends React.Component {

  getValidateStatus(field) {
    const { isFieldValidating, getFieldError, getFieldValue } = this.props.form;
    if (isFieldValidating(field)) {
      return 'validating';
    } else if (!!getFieldError(field)) {
      return 'error';
    } else if (getFieldValue(field)) {
      return 'success';
    }
  }

  handleReset(e) {
    e.preventDefault();
    this.props.form.resetFields();
  }

  handleSubmit(e) {
    e.preventDefault();
    const {submitCb, form, pcolumn} = this.props;
    form.validateFields((errors, values) => {
      if (!!errors) {
        console.log('Errors in form!!!');
        return;
      }
      const { getFieldValue } = form;
      const parentColumn = pcolumn;
      var name = getFieldValue("name");
      var descr = getFieldValue("descr");
      submitCb();
    });
  }


  onNameChangeId = null;

  onFieldChange(name, event) {
    const _self = this;
    const {
      setColumnField, pcolumn, columnExist
    } = this.props;
    setColumnField(name, event.target.value);
    if (name == "name") {
      (function (value) {
        clearTimeout(_self.onNameChangeId);
        _self.onNameChangeId = setTimeout(function () {
          columnExist(pcolumn.id, value);
        }, 300);
      } (event.target.value));
    }
  }

  render() {

    const formItemLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 12 },
    };

    const parentColumn = this.props.pcolumn;  //父栏目
    const errorInfo = this.props.errorInfo;
    const formData = this.props.formData;
    return (

      <Form horizontal form={this.props.form}>
        <div>{errorInfo}</div>
        <FormItem
          {...formItemLayout}
          label="父栏目名称：">
          <Input value={parentColumn.name}  readOnly={true}/>
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="栏目名称："
          hasFeedback
          help={formData.name.error}
          >
          <Input placeholder="栏目名称" value={formData.name.value} onChange={this.onFieldChange.bind(this, "name") }/>
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="栏目描述：">
          <Input type="textarea" placeholder="栏目描述" value={formData.descr.value} onChange={this.onFieldChange.bind(this, "descr") }/>
        </FormItem>
        <FormItem wrapperCol={{ span: 12, offset: 7 }}>
          <Button type="primary" onClick={this.handleSubmit.bind(this) }>确定</Button>
          &nbsp; &nbsp; &nbsp;
          <Button type="ghost" onClick={this.handleReset.bind(this) }>重置</Button>
        </FormItem>
      </Form>
    );
  }
}

CreateColumnDialog = createForm()(CreateColumnDialog);

class ColumnMenu extends React.Component {

  constructor(props) {
    super(props);
  }

  state = { visible: false }

  submitCb() {
    const {currentSelected, addColumn, columnFormData} = this.props;
    if (currentSelected.type == "column") {

    }
    if (columnFormData.name.error || columnFormData.descr.error) {
      return;
    }
    const columnName = columnFormData.name.value;
    const descr = columnFormData.descr.value;
    addColumn(currentSelected.id, { name: columnName, descr: descr });
  }

  handleClick(e) {
    const {currentSelected, openAddColumn} = this.props;
    if (!currentSelected || currentSelected.type == "template") {
      alert("请选择一个父栏目");
      return;
    };
    const action = e.key;
    openAddColumn(true);
  }

  handleCancel() {
    const {cleanAddColumnState} = this.props;
    cleanAddColumnState();
  }

  render() {
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 }
    };

    const { currentSelected, openAddColumnState, createColumnResult, setColumnField, columnFormData, columnExist} = this.props;
    return (<div>
      <Menu onClick={this.handleClick.bind(this) }>
        <Menu.Item>创建栏目</Menu.Item>
      </Menu>
      <Modal title="创建栏目" visible={openAddColumnState || !!createColumnResult} maskClosable={false}
        footer={<div/>} onCancel={this.handleCancel.bind(this) }>
        <CreateColumnDialog submitCb={this.submitCb.bind(this) }
          ref="ccd" pcolumn={currentSelected}
          errorInfo={createColumnResult}
          setColumnField={setColumnField}
          formData={columnFormData}
          columnExist={columnExist}/>
      </Modal>
    </div>);
  }
}
function mapStateProps(state) {
  var {columns} = state;
  return {
    currentSelected: columns.currentSelected,
    createColumnResult: columns.createColumnResult, //添加栏目结果
    openAddColumnState: columns.openAddColumnState,
    columnFormData: columns.columnFormData
  };
}

export default connect(mapStateProps
  , {
    addColumn, openAddColumn
    , cleanAddColumnState, setColumnField
    , columnExist
  })(ColumnMenu);