import './demo8.css';
import Grid from '..';
import React from 'react';
import ReactDOM from 'react-dom';
const { Row, Col } = Grid;
const breakpoints = {
    xxs: 320,
    xs: 480,
    s: 720,
    m: 990,
    l: 1200,
    xl: 1500,
};
class Demo extends React.Component {
    constructor() {
        super(...arguments);
        this.handleResize = () => {
            const row = ReactDOM.findDOMNode(this.refs.fixCol);
            let point = '';
            const innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            const keys = Object.keys(breakpoints);
            for (let i = 0; i < keys.length; i++) {
                const width = breakpoints[keys[i]];
                const nextWidth = breakpoints[keys[i + 1]];
                if (innerWidth > width && (innerWidth < nextWidth || !nextWidth)) {
                    point = keys[i];
                    break;
                }
            }
            if (point) {
                row.innerHTML = `${breakpoints[point]}px`;
            }
        };
    }
    componentDidMount() {
        window.addEventListener('resize', this.handleResize);
        this.handleResize();
    }
    componentWillUnmount() {
        window.removeEventListener('resize', this.handleResize);
    }
    render() {
        return (React.createElement("div", { className: "type-demo" },
            React.createElement("div", { className: "grid-fixed-demo-title" }, "Default"),
            React.createElement(Row, null,
                React.createElement(Col, null, "100%")),
            React.createElement("div", { className: "grid-fixed-demo-title" }, "Set fixed to true"),
            React.createElement(Row, { ref: "fixedRow", fixed: true },
                React.createElement(Col, { ref: "fixCol" })),
            React.createElement("div", { className: "grid-fixed-demo-title" }, "Set fixedWidth to 's'"),
            React.createElement(Row, { fixedWidth: "s" },
                React.createElement(Col, null, "720px"))));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('grid-demo-8'));
