nyx_server/ui/app/components/Templates.js

Node内容发布

import React from 'react';
import { fromJS, toJS } from 'immutable';
import { Table, QueueAnim, Modal, Input } from 'antd';

// export default React.createClass({
export default class Templates extends React.Component {
  constructor () {
    super();
    this.state = {
      visible: false
    };
  }

  getTemplates() {
    return this.props.templates || fromJS([]);
  }

  getDataIds () {
    return this.props.dataIds || fromJS({});
  }

  createLink(template, type) {
    var id = this.getDataIds().get(template.basePath) || '';
    var devices =  template.devices || '';
    devices = devices.split(',')[0];
    var extra = template.extra || '';
    extra = extra.split(',')[0];
    var link = REQUESTADDRESS + '/template/' + type + '/' + 
        template.matchPath + '/' + id + '_' +
        template.fileType + '_' +
        devices + '_' +
        extra + '_' + '1.html';
    return link;
  }

  previewLink(template) {
    const link = this.createLink(template, 'preview');
    return (
      <a href={link} target="_blank">预览</a>
    )
  }

  editLink (template) {
    const link = this.createLink(template, 'edit');
    return (
      <a href={link} target="_blank">编辑</a>
    )
  }

  manageLink (template) {
    const link = this.createLink(template, 'ui/index');
    return (
      <a href={link} target="_blank">管理</a>
    )
  }

  publishLink (template) {
    const link = this.createLink(template, 'publish');
    return (
      <a href={link} target="_blank">发布</a>
    )
  }

  setIdButton(template) {
    var basePath = template.basePath;
    var id = this.getDataIds().get(basePath) || '';
    var text = id ? '修改当前ID('+ id +')' : '设置ID';
    return (
      <a href="#" onClick={() => {
          this.setState({
            visible: true,
            basePath: basePath,
            id: id
          });
        }}>{text}</a>
    )
  }

  handleOk () {
    this.props.onChangeId(this.state.id, this.state.basePath);
    this.setState({
      visible: false
    })
  }

  handleCancel () {
    this.setState({
      visible: false
    });
  }

  handleChange (e) {
    this.setState({
      visible: this.state.visible,
      basePath: this.state.basePath,
      id: e.target.value
    });
  }

  render() {
    const columns = [{
      title: '模板名称',
      dataIndex: 'name',
      key: 'name'
    }, {
      title: '设备类型',
      dataIndex: 'devices',
      key: 'devices'
    }, {
      title: '扩展类型',
      dataIndex: 'extra',
      key: 'extra'
    }, {
      title: '路径',
      dataIndex: 'matchPath',
      key: 'matchPath'
    }, {
      title: '模板类型',
      dataIndex: 'fileType',
      key: 'fileType'
    }, {
      title: '操作',
      key: 'operation',
      width: 350,
      render: function (text, template) {
        return (
          <span>
            {this.previewLink(template)}
            <span className="ant-divider"></span>
            {this.editLink(template)}
            <span className="ant-divider"></span>
            {this.publishLink(template)}
            <span className="ant-divider"></span>
            {this.manageLink(template)}
            <span className="ant-divider"></span>
            {this.setIdButton(template)}
          </span>
        )
      }.bind(this)
    }];

    return (
      <div>
        <QueueAnim delay={100}>
          <Table key="a" columns={columns} pagination={false} dataSource={this.getTemplates().toJS()} bordered/>
        </QueueAnim>
        <Modal title="设置ID" visible={this.state.visible} onOk={this.handleOk.bind(this)} onCancel={this.handleCancel.bind(this)}>
          <Input placeholder="请输入ID" ref="inputId" value={this.state.id} onChange={this.handleChange.bind(this)}/>
        </Modal>
      </div>
    )
  }
}