aboutsummaryrefslogtreecommitdiffstats
path: root/web/src/js
diff options
context:
space:
mode:
Diffstat (limited to 'web/src/js')
-rw-r--r--web/src/js/components/EventLog.jsx2
-rw-r--r--web/src/js/components/Footer.jsx1
-rw-r--r--web/src/js/components/Header/FlowMenu.jsx8
-rw-r--r--web/src/js/components/Header/OptionMenu.jsx5
-rw-r--r--web/src/js/components/Header/ViewMenu.jsx2
-rw-r--r--web/src/js/components/MainView.jsx2
-rw-r--r--web/src/js/components/common.js173
-rw-r--r--web/src/js/components/common/Button.jsx16
-rw-r--r--web/src/js/components/common/Splitter.jsx99
-rw-r--r--web/src/js/components/common/ToggleButton.jsx17
-rw-r--r--web/src/js/components/common/ToggleInputButton.jsx52
11 files changed, 194 insertions, 183 deletions
diff --git a/web/src/js/components/EventLog.jsx b/web/src/js/components/EventLog.jsx
index d9211e11..169162ee 100644
--- a/web/src/js/components/EventLog.jsx
+++ b/web/src/js/components/EventLog.jsx
@@ -1,7 +1,7 @@
import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { toggleEventLogFilter, toggleEventLogVisibility } from '../ducks/eventLog'
-import { ToggleButton } from './common'
+import ToggleButton from './common/ToggleButton'
import EventList from './EventLog/EventList'
class EventLog extends Component {
diff --git a/web/src/js/components/Footer.jsx b/web/src/js/components/Footer.jsx
index 903522f4..1f6de2d7 100644
--- a/web/src/js/components/Footer.jsx
+++ b/web/src/js/components/Footer.jsx
@@ -1,6 +1,5 @@
import React from 'react'
import { formatSize } from '../utils.js'
-import { SettingsState } from './common.js'
Footer.propTypes = {
settings: React.PropTypes.object.isRequired,
diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx
index 4a43f40f..96f42652 100644
--- a/web/src/js/components/Header/FlowMenu.jsx
+++ b/web/src/js/components/Header/FlowMenu.jsx
@@ -1,10 +1,10 @@
import React, { PropTypes } from 'react'
-import { Button } from '../common.js'
-import {FlowActions} from "../../actions.js";
-import {MessageUtils} from "../../flow/utils.js";
+import Button from '../common/Button'
+import { FlowActions } from '../../actions.js'
+import { MessageUtils } from '../../flow/utils.js'
import { connect } from 'react-redux'
-FlowMenu.title = "Flow"
+FlowMenu.title = 'Flow'
FlowMenu.propTypes = {
flow: PropTypes.object.isRequired,
diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx
index 6bbf15d5..44f309fd 100644
--- a/web/src/js/components/Header/OptionMenu.jsx
+++ b/web/src/js/components/Header/OptionMenu.jsx
@@ -1,8 +1,9 @@
import React, { PropTypes } from 'react'
-import { ToggleInputButton, ToggleButton } from '../common.js'
+import ToggleButton from '../common/ToggleButton'
+import ToggleInputButton from '../common/ToggleInputButton'
import { SettingsActions } from '../../actions.js'
-OptionMenu.title = "Options"
+OptionMenu.title = 'Options'
OptionMenu.propTypes = {
settings: PropTypes.object.isRequired,
diff --git a/web/src/js/components/Header/ViewMenu.jsx b/web/src/js/components/Header/ViewMenu.jsx
index a58b0a16..8d662c28 100644
--- a/web/src/js/components/Header/ViewMenu.jsx
+++ b/web/src/js/components/Header/ViewMenu.jsx
@@ -1,6 +1,6 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
-import { ToggleButton } from '../common.js'
+import ToggleButton from '../common/ToggleButton'
import { toggleEventLogVisibility } from '../../ducks/eventLog'
ViewMenu.title = 'View'
diff --git a/web/src/js/components/MainView.jsx b/web/src/js/components/MainView.jsx
index 78a7f9bf..7064d3bf 100644
--- a/web/src/js/components/MainView.jsx
+++ b/web/src/js/components/MainView.jsx
@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
import { FlowActions } from '../actions.js'
import { Query } from '../actions.js'
import { Key } from '../utils.js'
-import { Splitter } from './common.js'
+import Splitter from './common/Splitter'
import FlowTable from './FlowTable'
import FlowView from './FlowView'
import { selectFlow, setFilter, setHighlight } from '../ducks/flows'
diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js
deleted file mode 100644
index 1497e15d..00000000
--- a/web/src/js/components/common.js
+++ /dev/null
@@ -1,173 +0,0 @@
-import React from "react"
-import ReactDOM from "react-dom"
-import {Key} from "../utils.js";
-import _ from "lodash"
-
-export var Splitter = React.createClass({
- getDefaultProps: function () {
- return {
- axis: "x"
- };
- },
- getInitialState: function () {
- return {
- applied: false,
- startX: false,
- startY: false
- };
- },
- onMouseDown: function (e) {
- this.setState({
- startX: e.pageX,
- startY: e.pageY
- });
- window.addEventListener("mousemove", this.onMouseMove);
- window.addEventListener("mouseup", this.onMouseUp);
- // Occasionally, only a dragEnd event is triggered, but no mouseUp.
- window.addEventListener("dragend", this.onDragEnd);
- },
- onDragEnd: function () {
- ReactDOM.findDOMNode(this).style.transform = "";
- window.removeEventListener("dragend", this.onDragEnd);
- window.removeEventListener("mouseup", this.onMouseUp);
- window.removeEventListener("mousemove", this.onMouseMove);
- },
- onMouseUp: function (e) {
- this.onDragEnd();
-
- var node = ReactDOM.findDOMNode(this);
- var prev = node.previousElementSibling;
- var next = node.nextElementSibling;
-
- var dX = e.pageX - this.state.startX;
- var dY = e.pageY - this.state.startY;
- var flexBasis;
- if (this.props.axis === "x") {
- flexBasis = prev.offsetWidth + dX;
- } else {
- flexBasis = prev.offsetHeight + dY;
- }
-
- prev.style.flex = "0 0 " + Math.max(0, flexBasis) + "px";
- next.style.flex = "1 1 auto";
-
- this.setState({
- applied: true
- });
- this.onResize();
- },
- onMouseMove: function (e) {
- var dX = 0, dY = 0;
- if (this.props.axis === "x") {
- dX = e.pageX - this.state.startX;
- } else {
- dY = e.pageY - this.state.startY;
- }
- ReactDOM.findDOMNode(this).style.transform = "translate(" + dX + "px," + dY + "px)";
- },
- onResize: function () {
- // Trigger a global resize event. This notifies components that employ virtual scrolling
- // that their viewport may have changed.
- window.setTimeout(function () {
- window.dispatchEvent(new CustomEvent("resize"));
- }, 1);
- },
- reset: function (willUnmount) {
- if (!this.state.applied) {
- return;
- }
- var node = ReactDOM.findDOMNode(this);
- var prev = node.previousElementSibling;
- var next = node.nextElementSibling;
-
- prev.style.flex = "";
- next.style.flex = "";
-
- if (!willUnmount) {
- this.setState({
- applied: false
- });
- }
- this.onResize();
- },
- componentWillUnmount: function () {
- this.reset(true);
- },
- render: function () {
- var className = "splitter";
- if (this.props.axis === "x") {
- className += " splitter-x";
- } else {
- className += " splitter-y";
- }
- return (
- <div className={className}>
- <div onMouseDown={this.onMouseDown} draggable="true"></div>
- </div>
- );
- }
-});
-
-export const ToggleButton = ({checked, onToggle, text}) =>
- <div className={"btn btn-toggle " + (checked ? "btn-primary" : "btn-default")} onClick={onToggle}>
- <i className={"fa fa-fw " + (checked ? "fa-check-square-o" : "fa-square-o")}/>
- &nbsp;
- {text}
- </div>;
-
-ToggleButton.propTypes = {
- checked: React.PropTypes.bool.isRequired,
- onToggle: React.PropTypes.func.isRequired,
- text: React.PropTypes.string.isRequired
-};
-
-export const Button = ({onClick, text, icon}) =>
- <div className={"btn btn-default"} onClick={onClick}>
- <i className={"fa fa-fw " + icon}/>
- &nbsp;
- {text}
- </div>;
-
-Button.propTypes = {
- onClick: React.PropTypes.func.isRequired,
- text: React.PropTypes.string.isRequired
-};
-
-export class ToggleInputButton extends React.Component {
- constructor(props) {
- super(props);
- this.state = {txt: props.txt};
- }
-
- render() {
- return (
- <div className="input-group toggle-input-btn">
- <span
- className="input-group-btn"
- onClick={() => this.props.onToggleChanged(this.state.txt)}>
- <div className={"btn " + (this.props.checked ? "btn-primary" : "btn-default")}>
- <span className={"fa " + (this.props.checked ? "fa-check-square-o" : "fa-square-o")}/>
- &nbsp;{this.props.name}
- </div>
- </span>
- <input
- className="form-control"
- placeholder={this.props.placeholder}
- disabled={this.props.checked}
- value={this.state.txt}
- type={this.props.inputType}
- onChange={e => this.setState({txt: e.target.value})}
- onKeyDown={e => {if (e.keyCode === Key.ENTER) this.props.onToggleChanged(this.state.txt); e.stopPropagation()}}/>
- </div>
- );
- }
-}
-
-ToggleInputButton.propTypes = {
- name: React.PropTypes.string.isRequired,
- txt: React.PropTypes.string.isRequired,
- onToggleChanged: React.PropTypes.func.isRequired
-};
-
-
-
diff --git a/web/src/js/components/common/Button.jsx b/web/src/js/components/common/Button.jsx
new file mode 100644
index 00000000..cc2fe9dd
--- /dev/null
+++ b/web/src/js/components/common/Button.jsx
@@ -0,0 +1,16 @@
+import React, { PropTypes } from 'react'
+
+Button.propTypes = {
+ onClick: PropTypes.func.isRequired,
+ text: PropTypes.string.isRequired
+}
+
+export default function Button({ onClick, text, icon }) {
+ return (
+ <div className={"btn btn-default"} onClick={onClick}>
+ <i className={"fa fa-fw " + icon}/>
+ &nbsp;
+ {text}
+ </div>
+ )
+}
diff --git a/web/src/js/components/common/Splitter.jsx b/web/src/js/components/common/Splitter.jsx
new file mode 100644
index 00000000..9d22b6fd
--- /dev/null
+++ b/web/src/js/components/common/Splitter.jsx
@@ -0,0 +1,99 @@
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+import classnames from 'classnames'
+
+export default class Splitter extends Component {
+
+ static defaultProps = { axis: 'x' }
+
+ constructor(props, context) {
+ super(props, context)
+
+ this.state = { applied: false, startX: false, startY: false }
+
+ this.onMouseMove = this.onMouseMove.bind(this)
+ this.onMouseUp = this.onMouseUp.bind(this)
+ this.onDragEnd = this.onDragEnd.bind(this)
+ }
+
+ onMouseDown(e) {
+ this.setState({ startX: e.pageX, startY: e.pageY })
+
+ window.addEventListener('mousemove', this.onMouseMove)
+ window.addEventListener('mouseup', this.onMouseUp)
+ // Occasionally, only a dragEnd event is triggered, but no mouseUp.
+ window.addEventListener('dragend', this.onDragEnd)
+ }
+
+ onDragEnd() {
+ ReactDOM.findDOMNode(this).style.transform = ''
+
+ window.removeEventListener('dragend', this.onDragEnd)
+ window.removeEventListener('mouseup', this.onMouseUp)
+ window.removeEventListener('mousemove', this.onMouseMove)
+ }
+
+ onMouseUp(e) {
+ this.onDragEnd()
+
+ const node = ReactDOM.findDOMNode(this)
+ const prev = node.previousElementSibling
+
+ let flexBasis = prev.offsetHeight + e.pageY - this.state.startY
+
+ if (this.props.axis === 'x') {
+ flexBasis = prev.offsetWidth + e.pageX - this.state.startX
+ }
+
+ prev.style.flex = `0 0 ${Math.max(0, flexBasis)}px`
+ node.nextElementSibling.style.flex = '1 1 auto'
+
+ this.setState({ applied: true })
+ this.onResize()
+ }
+
+ onMouseMove(e) {
+ let dX = 0
+ let dY = 0
+ if (this.props.axis === 'x') {
+ dX = e.pageX - this.state.startX
+ } else {
+ dY = e.pageY - this.state.startY
+ }
+ ReactDOM.findDOMNode(this).style.transform = `translate(${dX}px, ${dY}px)`
+ }
+
+ onResize() {
+ // Trigger a global resize event. This notifies components that employ virtual scrolling
+ // that their viewport may have changed.
+ window.setTimeout(() => window.dispatchEvent(new CustomEvent('resize')), 1)
+ }
+
+ reset(willUnmount) {
+ if (!this.state.applied) {
+ return
+ }
+
+ const node = ReactDOM.findDOMNode(this)
+
+ node.previousElementSibling.style.flex = ''
+ node.nextElementSibling.style.flex = ''
+
+ if (!willUnmount) {
+ this.setState({ applied: false })
+ }
+ this.onResize()
+ }
+
+ componentWillUnmount() {
+ this.reset(true)
+ }
+
+ render() {
+ return (
+ <div className={classnames('splitter', this.props.axis === 'x' ? 'splitter-x' : 'splitter-y')}>
+ <div onMouseDown={this.onMouseDown} draggable="true"></div>
+ </div>
+ )
+ }
+}
diff --git a/web/src/js/components/common/ToggleButton.jsx b/web/src/js/components/common/ToggleButton.jsx
new file mode 100644
index 00000000..6027728b
--- /dev/null
+++ b/web/src/js/components/common/ToggleButton.jsx
@@ -0,0 +1,17 @@
+import React, { PropTypes } from 'react'
+
+ToggleButton.propTypes = {
+ checked: PropTypes.bool.isRequired,
+ onToggle: PropTypes.func.isRequired,
+ text: PropTypes.string.isRequired
+}
+
+export default function ToggleButton({ checked, onToggle, text }) {
+ return (
+ <div className={"btn btn-toggle " + (checked ? "btn-primary" : "btn-default")} onClick={onToggle}>
+ <i className={"fa fa-fw " + (checked ? "fa-check-square-o" : "fa-square-o")}/>
+ &nbsp;
+ {text}
+ </div>
+ )
+}
diff --git a/web/src/js/components/common/ToggleInputButton.jsx b/web/src/js/components/common/ToggleInputButton.jsx
new file mode 100644
index 00000000..25d620ae
--- /dev/null
+++ b/web/src/js/components/common/ToggleInputButton.jsx
@@ -0,0 +1,52 @@
+import React, { Component, PropTypes } from 'react'
+import classnames from 'classnames'
+import { Key } from '../../utils'
+
+export default class ToggleInputButton extends Component {
+
+ static propTypes = {
+ name: PropTypes.string.isRequired,
+ txt: PropTypes.string.isRequired,
+ onToggleChanged: PropTypes.func.isRequired
+ }
+
+ constructor(props) {
+ super(props)
+ this.state = { txt: props.txt }
+ }
+
+ onChange(e) {
+ this.setState({ txt: e.target.value })
+ }
+
+ onKeyDown(e) {
+ e.stopPropagation()
+ if (e.keyCode === Key.ENTER) {
+ this.props.onToggleChanged(this.state.txt)
+ }
+ }
+
+ render() {
+ return (
+ <div className="input-group toggle-input-btn">
+ <span className="input-group-btn"
+ onClick={() => this.props.onToggleChanged(this.state.txt)}>
+ <div className={classnames('btn', this.props.checked ? 'btn-primary' : 'btn-default')}>
+ <span className={classnames('fa', this.props.checked ? 'fa-check-square-o' : 'fa-square-o')}/>
+ &nbsp;
+ {this.props.name}
+ </div>
+ </span>
+ <input
+ className="form-control"
+ placeholder={this.props.placeholder}
+ disabled={this.props.checked}
+ value={this.state.txt}
+ type={this.props.inputType}
+ onChange={e => this.onChange(e)}
+ onKeyDown={e => this.onKeyDown(e)}
+ />
+ </div>
+ )
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-06 11:50:46 +0000