kanban-client/kanban-client/app/component/factory.dev.js

import React from 'react';
import Container from './Layout.dev.js';
import Title from '../src/Title/Title.jsx';
import MessageBox from '../src/MsgBox/MessageBox.jsx';
import { converter } from './converter.js';
import URL from '../constants/url.dev.json';

import tempdata from '../data/cc.json';

class Factory extends React.Component {

    constructor(props) {
        super(props);
        this.dev = 'local ';
        this.index = 0;
        this.state = {
            titleHeight: 0,
            error: null
        };
        window.forceUpdate = this.forceUpdate.bind(this);
    }

    getModelConfig(mid) {
        let me = this;
        fetch(URL.path + mid, {
            method: 'POST',
            credentials: 'include',
            mode: 'no-cors',
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        }).then(function (response) {
            return (response.json())
        }).then((json) => {
            if(!json.instance) {
                var errorObj = json.message.split('：');
                throw {name: errorObj[0], message: errorObj[1] || ''};
            }
            let instance = json.instance;
            if (!me.state.instance) {
                me.setState({
                    instance: instance
                }, me.setRefresh);
            }
            return json.data[0];
        }).then(function (modelconfig) {
            if(!modelconfig.content) {
                throw {name: 'empty board model', message: '该看板内容为空'}
            }
            me.setState({
                error: null,
                model: converter(modelconfig),
                // titleHeight: 73
            });
        }).catch(function (ex) {
            me.setState({
                error: {name: ex.name, message: ex.message}
            });
            console.log('parsing failed', ex);
        });
    }

    getTitleHeight() {
        let titleEl = document.getElementsByClassName('rc-title');
        let titleHeight = titleEl.length > 0 ? titleEl[0].offsetHeight : 0;
        titleHeight = titleHeight || 0;
        return titleHeight;
    }

    setTitleHeight(height) {
        this.setState({
            titleHeight: height
        });
    }

    setRefresh() {
        let { instance } = this.state;
        if (!instance) { return; }
        let codes = instance.enabledKanbanCodes;
        let display = instance.display;
        let next = {
            enable: instance.switchFrequency > 0 ? true : false,
            interval: instance.switchFrequency
        };
        let current = {
            enable: instance.refreshFrequency > 0 ? true : false,
            interval: instance.refreshFrequency
        };
        let refresh = {
            current: current,
            next: next
        };
        // 刷新
        if (refresh.current) {
            if (refresh.current.enable) {
                this.refreshThis = setInterval(function () {
                    this.getModelConfig(this.props.code[0] + '?relatedKanban=' + codes[this.index]);
                }.bind(this), refresh.current.interval * 1000 || 10000)
            }
        }
        // 切换
        if (refresh.next) {
            if (refresh.next.enable) {
                this.refreshNext = setInterval(function () {
                    if (this.index >= codes.length - 1) {
                        this.index = 0;
                    } else {
                        this.index++;
                    }
                }.bind(this), refresh.next.interval * 1000 || 30000)
            }
        }
    }

    onWindowResize() {
        this.forceUpdate();
    }

    componentDidUpdate() {
    }

    componentWillMount() {
        let { code } = this.props;
        if(this.dev == 'local') {
            this.setState({
                model: converter(tempdata.data[0]),
            });
        }else {
            this.getModelConfig(code[0]);
        }
    }

    componentDidMount() {
        window.addEventListener('resize', this.onWindowResize);
        this.setState({
            titleHeight: this.getTitleHeight()
        });
    }
    componentWillUnmount() {
        window.removeEventListener('resize', this.onWindowResize);
        if (this.refreshThis) {
            if (this.refreshThis.interval > 0) {
                window.clearInterval(this.refreshThis);
            }
        }
        if (this.refreshNext) {
            if (this.refreshNext.interval > 0) {
                window.clearInterval(this.refreshNext);
            }
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            titleHeight: this.getTitleHeight()
        });
    }

    render() {
        let { titleHeight, model, error } = this.state;
        if (this.state.error) {
            return <MessageBox static={this.props.static} titleHeight={titleHeight} error={error} />
        }
        if (!this.state.model) {
            return <div style={{color: 'white'}}>loading...</div>
        }
        
        const { title, content, fixedbox } = model;
        let titleConfig = title;
        let items = [];
        if (fixedbox) {
            items = fixedbox.items || [];
        }
        return (
            <div ref='body'>
                <Title static={this.props.static} setTitleHeight={this.setTitleHeight.bind(this)} {...titleConfig} />
                <Container static={this.props.static} items={content.items} rowHeight={(window.innerHeight - titleHeight) / 10} />
            </div>
        );
    }

};

module.exports = Factory;