From f306cfa8b6445dd04c5f7188d1a5022bcb747a62 Mon Sep 17 00:00:00 2001
From: Jason <jason.daurus@gmail.com>
Date: Thu, 9 Jun 2016 17:46:14 +0800
Subject: [web] separate flowtable to multiple files

---
 web/src/js/components/flowtable.js | 201 -------------------------------------
 1 file changed, 201 deletions(-)
 delete mode 100644 web/src/js/components/flowtable.js

(limited to 'web/src/js/components/flowtable.js')

diff --git a/web/src/js/components/flowtable.js b/web/src/js/components/flowtable.js
deleted file mode 100644
index 5a0793ba..00000000
--- a/web/src/js/components/flowtable.js
+++ /dev/null
@@ -1,201 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import {connect} from 'react-redux'
-import classNames from "classnames";
-import _ from "lodash";
-import shallowEqual from "shallowequal";
-import AutoScroll from "./helpers/AutoScroll";
-import {calcVScroll} from "./helpers/VirtualScroll";
-import flowtable_columns from "./flowtable-columns.js";
-import Filt from "../filt/filt";
-import {setSort} from "../ducks/flows";
-
-
-FlowRow.propTypes = {
-    selectFlow: React.PropTypes.func.isRequired,
-    columns: React.PropTypes.array.isRequired,
-    flow: React.PropTypes.object.isRequired,
-    highlight: React.PropTypes.string,
-    selected: React.PropTypes.bool,
-};
-
-function FlowRow({flow, selected, highlight, columns, selectFlow}) {
-
-    const className = classNames({
-        "selected": selected,
-        "highlighted": highlight && parseFilter(highlight)(flow),
-        "intercepted": flow.intercepted,
-        "has-request": flow.request,
-        "has-response": flow.response,
-    });
-
-    return (
-        <tr className={className} onClick={() => selectFlow(flow)}>
-            {columns.map(Column => (
-                <Column key={Column.name} flow={flow}/>
-            ))}
-        </tr>
-    );
-}
-
-const FlowRowContainer = connect(
-    (state, ownProps) => ({
-        flow: state.flows.all.byId[ownProps.flowId],
-        highlight: state.flows.highlight,
-        selected: state.flows.selected.indexOf(ownProps.flowId) >= 0
-    })
-)(FlowRow)
-
-function FlowTableHead({setSort, columns, sort}) {
-        const sortColumn = sort.sortColumn;
-        const sortType = sort.sortDesc ? "sort-desc" : "sort-asc";
-
-        return (
-            <tr>
-                {columns.map(Column => (
-                    <Column.Title
-                        key={Column.name}
-                        onClick={() => setSort({sortColumn: Column.name, sortDesc: Column.name != sort.sortColumn ? false : !sort.sortDesc})}
-                        className={sortColumn === Column.name ? sortType : undefined}
-                    />
-                ))}
-            </tr>
-        );
-}
-
-FlowTableHead.propTypes = {
-        setSort: React.PropTypes.func.isRequired,
-        sort: React.PropTypes.object.isRequired,
-        columns: React.PropTypes.array.isRequired
-};
-
-const FlowTableHeadContainer = connect(
-    state => ({
-        sort: state.flows.sort
-    }),
-    dispatch => ({
-        setSort: (sort) => dispatch(setSort(sort)),
-    })
-)(FlowTableHead)
-
-class FlowTable extends React.Component {
-
-    static propTypes = {
-        rowHeight: React.PropTypes.number,
-    };
-
-    static defaultProps = {
-        rowHeight: 32,
-    };
-
-    constructor(props, context) {
-        super(props, context);
-
-        this.state = {vScroll: calcVScroll()};
-
-        this.onViewportUpdate = this.onViewportUpdate.bind(this);
-    }
-
-    componentWillMount() {
-        window.addEventListener("resize", this.onViewportUpdate);
-    }
-
-    componentWillUnmount() {
-        window.removeEventListener("resize", this.onViewportUpdate);
-    }
-
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.selected && nextProps.selected !== this.props.selected) {
-            window.setTimeout(() => this.scrollIntoView(nextProps.selected), 1)
-        }
-    }
-
-    componentDidUpdate() {
-        this.onViewportUpdate();
-    }
-
-    onViewportUpdate() {
-        const viewport = ReactDOM.findDOMNode(this);
-        const viewportTop = viewport.scrollTop;
-
-        const vScroll = calcVScroll({
-            viewportTop,
-            viewportHeight: viewport.offsetHeight,
-            itemCount: this.props.flows.length,
-            rowHeight: this.props.rowHeight,
-        });
-
-        if (!shallowEqual(this.state.vScroll, vScroll) ||
-            this.state.viewportTop !== viewportTop) {
-            this.setState({vScroll, viewportTop});
-        }
-    }
-
-    scrollIntoView(flow) {
-        const viewport = ReactDOM.findDOMNode(this);
-        const index = this.props.flows.indexOf(flow);
-        const rowHeight = this.props.rowHeight;
-        const head = ReactDOM.findDOMNode(this.refs.head);
-
-        const headHeight = head ? head.offsetHeight : 0;
-
-        const rowTop = (index * rowHeight) + headHeight;
-        const rowBottom = rowTop + rowHeight;
-
-        const viewportTop = viewport.scrollTop;
-        const viewportHeight = viewport.offsetHeight;
-
-        // Account for pinned thead
-        if (rowTop - headHeight < viewportTop) {
-            viewport.scrollTop = rowTop - headHeight;
-        } else if (rowBottom > viewportTop + viewportHeight) {
-            viewport.scrollTop = rowBottom - viewportHeight;
-        }
-    }
-
-    render() {
-        const vScroll = this.state.vScroll;
-        const flows = this.props.flows.slice(vScroll.start, vScroll.end);
-
-        const transform = `translate(0,${this.state.viewportTop}px)`;
-
-        return (
-            <div className="flow-table" onScroll={this.onViewportUpdate}>
-                <table>
-                    <thead ref="head" style={{ transform }}>
-                    <FlowTableHeadContainer
-                        columns={flowtable_columns}
-                        setSortKeyFun={this.props.setSortKeyFun}
-                        setSort={this.props.setSort}
-                    />
-                    </thead>
-                    <tbody>
-                    <tr style={{ height: vScroll.paddingTop }}></tr>
-                    {flows.map(flow => (
-                        <FlowRowContainer
-                            key={flow.id}
-                            flowId={flow.id}
-                            columns={flowtable_columns}
-                            selectFlow={this.props.selectFlow}
-                        />
-                    ))}
-                    <tr style={{ height: vScroll.paddingBottom }}></tr>
-                    </tbody>
-                </table>
-            </div>
-        );
-    }
-}
-
-FlowTable = AutoScroll(FlowTable)
-
-
-const parseFilter = _.memoize(Filt.parse)
-
-const FlowTableContainer = connect(
-    state => ({
-        flows: state.flows.view
-    })
-)(FlowTable)
-
-export default FlowTableContainer;
-- 
cgit v1.2.3