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

import React from 'react';
import Container from './Layout.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.json';

class Factory extends React.Component {

    constructor(props) {
        super(props);
        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'
        }).then(function (response) {
            return (response.json())
        }).then((json) => {
            if(!json.instance) {
                throw {message: json.message};
            }
            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 {message: '该看板内容为空'}
            }
            me.setState({
                error: null,
                model: converter(modelconfig),
            });
        }).catch(function (ex) {
            me.setState({
                error: {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 () {
                    if (this.index == codes.length - 1) {
                        this.index = 0;
                    } else {
                        this.index++;
                    }
                    this.getModelConfig(this.props.code[0] + '?kanbanCode=' + codes[this.index]);
                }.bind(this), refresh.current.interval * 1000 || 10000)
            }
        }
    }

    onWindowResize() {
        this.forceUpdate();
    }

    componentDidUpdate() {
    }

    componentWillMount() {
        let { code } = this.props;
        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>
                <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;