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/common.js | 173 ---------------------------------------- 1 file changed, 173 deletions(-) delete mode 100644 web/src/js/components/common.js (limited to 'web/src/js/components/common.js') 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 -}; - - - -- cgit v1.2.3