nyx_server/ui/app/components/Chips.js

Node内容发布

import React from 'react';
import ReactDOM from 'react-dom';
import { fromJS } from 'immutable';

import { Table, QueueAnim, Modal, Input} from 'antd';

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

  getChips () {
    return this.props.chips || fromJS([]);
  }

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

  createBaseLink(chip, type) {
    var link = REQUESTADDRESS + '/chip/' + type + '/' +
        chip.projectName + '.' + chip.name;
    return link;
  }

  createLink(chip, type) {
    var id = this.getDataIds().get(chip.basePath) || 'null';
    var link = this.createBaseLink(chip, type) + '/' + id;
    return link;
  }

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

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

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

  setIdButton (chip) {
    var basePath = chip.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: 'basePath',
      key: 'basePath'
    }, {
      title: '操作',
      key: 'operation',
      width: 350,
      render: function (text, chip) {
        return (
          <span>
            {this.previewLink(chip)}
            <span className="ant-divider"></span>
            {this.publishLink(chip)}
            <span className="ant-divider"></span>
            {this.manageLink(chip)}
            <span className="ant-divider"></span>
            {this.setIdButton(chip)}
          </span>
        )
      }.bind(this)
    }];


    return (
      <div>
        <QueueAnim delay={100}>
          <Table key="a" columns={columns} pagination={false} dataSource={this.getChips().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>
    )
  }
}