From 7a78970d10ab2dfc9b86dd30a76fb1513f43dd35 Mon Sep 17 00:00:00 2001 From: Jason Date: Fri, 17 Jun 2016 07:07:38 +0800 Subject: [web] common --- web/src/js/components/EventLog.jsx | 2 +- web/src/js/components/Footer.jsx | 1 - web/src/js/components/Header/FlowMenu.jsx | 8 +- web/src/js/components/Header/OptionMenu.jsx | 5 +- web/src/js/components/Header/ViewMenu.jsx | 2 +- web/src/js/components/MainView.jsx | 2 +- web/src/js/components/common.js | 173 --------------------- web/src/js/components/common/Button.jsx | 16 ++ web/src/js/components/common/Splitter.jsx | 99 ++++++++++++ web/src/js/components/common/ToggleButton.jsx | 17 ++ web/src/js/components/common/ToggleInputButton.jsx | 52 +++++++ 11 files changed, 194 insertions(+), 183 deletions(-) delete mode 100644 web/src/js/components/common.js create mode 100644 web/src/js/components/common/Button.jsx create mode 100644 web/src/js/components/common/Splitter.jsx create mode 100644 web/src/js/components/common/ToggleButton.jsx create mode 100644 web/src/js/components/common/ToggleInputButton.jsx (limited to 'web/src') 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 ( -
-
-
- ); - } -}); - -export const ToggleButton = ({checked, onToggle, text}) => -
- -   - {text} -
; - -ToggleButton.propTypes = { - checked: React.PropTypes.bool.isRequired, - onToggle: React.PropTypes.func.isRequired, - text: React.PropTypes.string.isRequired -}; - -export const Button = ({onClick, text, icon}) => -
- -   - {text} -
; - -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 ( -
- this.props.onToggleChanged(this.state.txt)}> -
- -  {this.props.name} -
- - this.setState({txt: e.target.value})} - onKeyDown={e => {if (e.keyCode === Key.ENTER) this.props.onToggleChanged(this.state.txt); e.stopPropagation()}}/> -
- ); - } -} - -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 ( +
+ +   + {text} +
+ ) +} 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 ( +
+
+
+ ) + } +} 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 ( +
+ +   + {text} +
+ ) +} 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 ( +
+ this.props.onToggleChanged(this.state.txt)}> +
+ +   + {this.props.name} +
+ + this.onChange(e)} + onKeyDown={e => this.onKeyDown(e)} + /> +
+ ) + } +} -- cgit v1.2.3