New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-reflex
Advanced tools
react-reflex - npm Package Compare versions
Comparing version 1.0.1 to 1.0.2
| { | ||
| "name": "react-reflex", | ||
| "version": "1.0.1", | ||
| "version": "1.0.2", | ||
| "description": "A flex-based React layout component that works", | ||
@@ -44,3 +44,5 @@ "main": "dist/lib/index.min.js", | ||
| "eslint-plugin-react": "^2.3.0", | ||
| "lodash.throttle": "^4.1.1", | ||
| "node-sass": "^3.13.1", | ||
| "react-measure": "^1.4.5", | ||
| "sass-loader": "^2.0.1", | ||
@@ -47,0 +49,0 @@ "style-loader": "^0.12.4", |
@@ -7,4 +7,3 @@ import ReactDOM from 'react-dom' | ||
| ReflexSplitter, | ||
| ReflexElement, | ||
| ReflexResizer | ||
| ReflexElement | ||
| } from '../../src/lib' | ||
@@ -210,151 +209,123 @@ | ||
| this.containerProps = { | ||
| onResize: this.onResizeContainer.bind(this) | ||
| this.resizeProps = { | ||
| onStopResize: this.onStopResize.bind(this), | ||
| onResize: this.onResize.bind(this) | ||
| } | ||
| this.elementProps = { | ||
| onStopResize: this.onStopResizeElement.bind(this), | ||
| onResize: this.onResizeElement.bind(this) | ||
| } | ||
| this.onResizeWindow = | ||
| this.onResizeWindow.bind(this) | ||
| } | ||
| componentDidMount () { | ||
| onResize (e) { | ||
| window.addEventListener('resize', | ||
| this.onResizeWindow) | ||
| if (e.domElement) { | ||
| // fix for safari compatibility | ||
| this.forceUpdate() | ||
| e.domElement.classList.add('resizing') | ||
| } | ||
| } | ||
| componentWillUnmount () { | ||
| onStopResize (e) { | ||
| window.removeEventListener('resize', | ||
| this.onResizeWindow) | ||
| } | ||
| if (e.domElement) { | ||
| onResizeContainer (e) { | ||
| // fix for safari compatibility | ||
| this.forceUpdate() | ||
| e.domElement.classList.remove('resizing') | ||
| } | ||
| } | ||
| onResizeElement (e) { | ||
| e.domElement.classList.add('resizing') | ||
| } | ||
| onStopResizeElement (e) { | ||
| e.domElement.classList.remove('resizing') | ||
| } | ||
| onResizeWindow () { | ||
| this.forceUpdate() | ||
| } | ||
| render () { | ||
| return ( | ||
| <ReflexContainer orientation="horizontal" {...this.containerProps}> | ||
| <ReflexContainer orientation="horizontal"> | ||
| <ReflexElement className="header" flex={0.1}> | ||
| <ReflexResizer className="pane-content"> | ||
| <div className="pane-content"> | ||
| <label> | ||
| Header (fixed) | ||
| </label> | ||
| </ReflexResizer> | ||
| </div> | ||
| </ReflexElement> | ||
| <ReflexElement> | ||
| <ReflexResizer> | ||
| <ReflexContainer orientation="vertical" {...this.containerProps}> | ||
| <ReflexElement {...this.elementProps}> | ||
| <ReflexContainer orientation="horizontal" {...this.containerProps}> | ||
| <ReflexElement {...this.elementProps}> | ||
| <ReflexResizer className="pane-content"> | ||
| <label> | ||
| Left Pane <br/> Top | ||
| <br/> | ||
| (splitter propagation) | ||
| </label> | ||
| </ReflexResizer> | ||
| </ReflexElement> | ||
| <ReflexSplitter propagate={true}/> | ||
| <ReflexElement {...this.elementProps}> | ||
| <ReflexResizer className="pane-content"> | ||
| <label> | ||
| Left Pane <br/> Middle | ||
| <br/> | ||
| (splitter propagation) | ||
| </label> | ||
| </ReflexResizer> | ||
| </ReflexElement> | ||
| <ReflexSplitter propagate={true}/> | ||
| <ReflexElement {...this.elementProps}> | ||
| <ReflexResizer className="pane-content"> | ||
| <label> | ||
| Left Pane <br/> Bottom | ||
| <br/> | ||
| (splitter propagation) | ||
| </label> | ||
| </ReflexResizer> | ||
| </ReflexElement> | ||
| </ReflexContainer> | ||
| </ReflexElement> | ||
| <ReflexSplitter/> | ||
| <ReflexElement flex={0.5} {...this.elementProps}> | ||
| <ReflexResizer className="pane-content"> | ||
| <label> | ||
| Middle Pane | ||
| </label> | ||
| </ReflexResizer> | ||
| </ReflexElement> | ||
| <ReflexSplitter/> | ||
| <ReflexElement {...this.elementProps}> | ||
| <ReflexResizer> | ||
| <ReflexContainer orientation="horizontal" {...this.containerProps}> | ||
| <ReflexElement {...this.elementProps}> | ||
| <ReflexResizer> | ||
| <ReflexContainer orientation="vertical" {...this.containerProps}> | ||
| <ReflexElement {...this.elementProps}> | ||
| <ReflexResizer className="pane-content"> | ||
| <label> | ||
| Right Pane <br/> Upper-Left | ||
| </label> | ||
| </ReflexResizer> | ||
| </ReflexElement> | ||
| <ReflexSplitter/> | ||
| <ReflexElement {...this.elementProps}> | ||
| <ReflexResizer className="pane-content"> | ||
| <label> | ||
| Right Pane <br/> Upper-Right | ||
| </label> | ||
| </ReflexResizer> | ||
| </ReflexElement> | ||
| </ReflexContainer> | ||
| </ReflexResizer> | ||
| </ReflexElement> | ||
| <ReflexSplitter/> | ||
| <ReflexElement {...this.elementProps}> | ||
| <ReflexResizer className="pane-content"> | ||
| <label> | ||
| Right Pane <br/> Bottom | ||
| </label> | ||
| </ReflexResizer> | ||
| </ReflexElement> | ||
| </ReflexContainer> | ||
| </ReflexResizer> | ||
| </ReflexElement> | ||
| </ReflexContainer> | ||
| </ReflexResizer> | ||
| <ReflexContainer orientation="vertical"> | ||
| <ReflexElement {...this.resizeProps}> | ||
| <ReflexContainer orientation="horizontal"> | ||
| <ReflexElement {...this.resizeProps}> | ||
| <div className="pane-content"> | ||
| <div style={{height: '30%'}}/> | ||
| <label style={{height: '0%'}}> | ||
| Left Pane <br/> Top | ||
| <br/> | ||
| (splitter propagation) | ||
| </label> | ||
| </div> | ||
| </ReflexElement> | ||
| <ReflexSplitter propagate={true} {...this.resizeProps}/> | ||
| <ReflexElement {...this.resizeProps}> | ||
| <div className="pane-content"> | ||
| <div style={{height: '30%'}}/> | ||
| <label style={{height: '0%'}}> | ||
| Left Pane <br/> Middle | ||
| <br/> | ||
| (splitter propagation) | ||
| </label> | ||
| </div> | ||
| </ReflexElement> | ||
| <ReflexSplitter propagate={true} {...this.resizeProps}/> | ||
| <ReflexElement {...this.resizeProps}> | ||
| <div className="pane-content"> | ||
| <div style={{height: '30%'}}/> | ||
| <label style={{height: '0%'}}> | ||
| Left Pane <br/> Bottom | ||
| <br/> | ||
| (splitter propagation) | ||
| </label> | ||
| </div> | ||
| </ReflexElement> | ||
| </ReflexContainer> | ||
| </ReflexElement> | ||
| <ReflexSplitter {...this.resizeProps}/> | ||
| <ReflexElement flex={0.5} {...this.resizeProps}> | ||
| <div className="pane-content"> | ||
| <label> | ||
| Middle Pane | ||
| </label> | ||
| </div> | ||
| </ReflexElement> | ||
| <ReflexSplitter{...this.resizeProps}/> | ||
| <ReflexElement {...this.resizeProps}> | ||
| <ReflexContainer orientation="horizontal"> | ||
| <ReflexElement {...this.resizeProps}> | ||
| <div> | ||
| <ReflexContainer orientation="vertical"> | ||
| <ReflexElement {...this.resizeProps}> | ||
| <div className="pane-content"> | ||
| <label> | ||
| Right Pane <br/> Upper-Left | ||
| </label> | ||
| </div> | ||
| </ReflexElement> | ||
| <ReflexSplitter/> | ||
| <ReflexElement {...this.resizeProps}> | ||
| <div className="pane-content"> | ||
| <label> | ||
| Right Pane <br/> Upper-Right | ||
| </label> | ||
| </div> | ||
| </ReflexElement> | ||
| </ReflexContainer> | ||
| </div> | ||
| </ReflexElement> | ||
| <ReflexSplitter {...this.resizeProps}/> | ||
| <ReflexElement {...this.resizeProps}> | ||
| <div className="pane-content"> | ||
| <label> | ||
| Right Pane <br/> Bottom | ||
| </label> | ||
| </div> | ||
| </ReflexElement> | ||
| </ReflexContainer> | ||
| </ReflexElement> | ||
| </ReflexContainer> | ||
| </ReflexElement> | ||
| <ReflexElement className="footer" flex={0.1}> | ||
| <ReflexResizer className="pane-content"> | ||
| <div className="pane-content"> | ||
| <label> | ||
| Footer (fixed) | ||
| </label> | ||
| </ReflexResizer> | ||
| </div> | ||
| </ReflexElement> | ||
@@ -490,3 +461,3 @@ </ReflexContainer> | ||
| <ReflexElement size={this.state.size} {...this.props}> | ||
| <ReflexResizer className="pane-content"> | ||
| <div className="pane-content"> | ||
| <div className="pane-control"> | ||
@@ -511,3 +482,3 @@ <label> | ||
| </div> | ||
| </ReflexResizer> | ||
| </div> | ||
| </ReflexElement> | ||
@@ -525,9 +496,2 @@ ) | ||
| this.containerProps = { | ||
| onResize: this.onResizeContainer.bind(this) | ||
| } | ||
| this.onResizeWindow = | ||
| this.onResizeWindow.bind(this) | ||
| this.onLockSize = | ||
@@ -564,28 +528,2 @@ this.onLockSize.bind(this) | ||
| componentDidMount () { | ||
| window.addEventListener('resize', | ||
| this.onResizeWindow) | ||
| // fix for safari compatibility | ||
| this.forceUpdate() | ||
| } | ||
| componentWillUnmount () { | ||
| window.removeEventListener('resize', | ||
| this.onResizeWindow) | ||
| } | ||
| onResizeWindow () { | ||
| this.forceUpdate() | ||
| } | ||
| onResizeContainer (e) { | ||
| // fix for safari compatibility | ||
| this.forceUpdate() | ||
| } | ||
| onLockSize (data) { | ||
@@ -608,4 +546,3 @@ | ||
| this.setState(Object.assign({}, | ||
| this.state)) | ||
| this.setState(Object.assign({}, this.state)) | ||
| } | ||
@@ -616,7 +553,7 @@ | ||
| return ( | ||
| <ReflexContainer orientation="vertical" {...this.containerProps}> | ||
| <ReflexContainer orientation="vertical"> | ||
| <ReflexElement flex={0.4}> | ||
| <ReflexResizer className="pane-content"> | ||
| <ReflexContainer orientation="horizontal" {...this.containerProps}> | ||
| <div className="pane-content"> | ||
| <ReflexContainer orientation="horizontal"> | ||
@@ -634,3 +571,3 @@ <ControlledElement {...this.state.pane1}/> | ||
| </ReflexContainer> | ||
| </ReflexResizer> | ||
| </div> | ||
| </ReflexElement> | ||
@@ -640,8 +577,8 @@ | ||
| <ReflexElement onResize={this.onResizeElement}> | ||
| <ReflexResizer className="pane-content"> | ||
| <ReflexElement> | ||
| <div className="pane-content"> | ||
| <label> | ||
| App Pane | ||
| </label> | ||
| </ReflexResizer> | ||
| </div> | ||
| </ReflexElement> | ||
@@ -648,0 +585,0 @@ |
| import ReflexContainer from './reflex-container' | ||
| import ReflexSplitter from './reflex-splitter' | ||
| import ReflexElement from './reflex-element' | ||
| import ReflexResizer from './reflex-resizer' | ||
| import './reflex-styles.scss' | ||
@@ -10,4 +9,3 @@ | ||
| ReflexSplitter, | ||
| ReflexElement, | ||
| ReflexResizer | ||
| ReflexElement | ||
| } |
@@ -168,4 +168,2 @@ /////////////////////////////////////////////////////////// | ||
| this.elements, 'onStartResize') | ||
| this.emitEvent('onStartResize') | ||
| } | ||
@@ -214,4 +212,2 @@ | ||
| this.emitEvent('onResize') | ||
| //this.elements.forEach((element)=>{ | ||
@@ -237,4 +233,2 @@ // | ||
| this.children, 'onStopResize') | ||
| this.emitEvent('onStopResize') | ||
| } | ||
@@ -279,4 +273,2 @@ | ||
| this.emitEvent('onResize') | ||
| resolve() | ||
@@ -568,17 +560,2 @@ }) | ||
| ///////////////////////////////////////////////////////// | ||
| // Emits given if event if present in the component props | ||
| // | ||
| ///////////////////////////////////////////////////////// | ||
| emitEvent (event) { | ||
| if (this.props[event]) { | ||
| this.props[event]({ | ||
| domElement: ReactDOM.findDOMNode(this), | ||
| component: this | ||
| }) | ||
| } | ||
| } | ||
| ///////////////////////////////////////////////////////// | ||
| // Emits given if event for each given element | ||
@@ -585,0 +562,0 @@ // if present in the component props |
@@ -7,2 +7,4 @@ /////////////////////////////////////////////////////////// | ||
| /////////////////////////////////////////////////////////// | ||
| import throttle from 'lodash.throttle' | ||
| import Measure from 'react-measure' | ||
| import ReactDOM from 'react-dom' | ||
@@ -19,2 +21,5 @@ import React from 'react' | ||
| static propTypes = { | ||
| renderOnResizeRate: React.PropTypes.number, | ||
| propagateDimensions: React.PropTypes.bool, | ||
| renderOnResize: React.PropTypes.bool, | ||
| className: React.PropTypes.string | ||
@@ -28,2 +33,5 @@ } | ||
| static defaultProps = { | ||
| propagateDimensions: false, | ||
| renderOnResizeRate: 60, | ||
| renderOnResize: true, | ||
| className: '' | ||
@@ -40,4 +48,13 @@ } | ||
| this.onMeasure = this.onMeasure.bind(this) | ||
| this.setStateThrottled = throttle((state) => { | ||
| this.setState(state) | ||
| }, this.props.renderOnResizeRate) | ||
| this.state = { | ||
| style: {} | ||
| dimensions: { | ||
| height: "100%", | ||
| width: "100%" | ||
| } | ||
| } | ||
@@ -80,2 +97,36 @@ } | ||
| ///////////////////////////////////////////////////////// | ||
| onMeasure (dimensions) { | ||
| if (this.props.renderOnResize) { | ||
| this.setStateThrottled({dimensions}) | ||
| } | ||
| } | ||
| /////////////////////////////////////////////////////////////////// | ||
| // | ||
| // | ||
| /////////////////////////////////////////////////////////////////// | ||
| renderChildren() { | ||
| if (this.props.propagateDimensions) { | ||
| return React.Children.map(this.props.children, (child) => { | ||
| const newProps = Object.assign({}, | ||
| child.props, { | ||
| dimensions: this.state.dimensions | ||
| }) | ||
| return React.cloneElement(child, newProps) | ||
| }) | ||
| } | ||
| return this.props.children | ||
| } | ||
| ///////////////////////////////////////////////////////// | ||
| // | ||
| // | ||
| ///////////////////////////////////////////////////////// | ||
| render () { | ||
@@ -97,7 +148,14 @@ | ||
| return ( | ||
| <div className={classNames.join(' ')} style={style}> | ||
| { this.props.children } | ||
| </div> | ||
| <Measure onMeasure={(dimensions) => this.onMeasure(dimensions)}> | ||
| <div className={classNames.join(' ')} style={style}> | ||
| <div style={{ | ||
| height: this.state.dimensions.height, | ||
| width: this.state.dimensions.width | ||
| }}> | ||
| { this.renderChildren() } | ||
| </div> | ||
| </div> | ||
| </Measure> | ||
| ) | ||
| } | ||
| } |
@@ -119,3 +119,6 @@ /////////////////////////////////////////////////////////// | ||
| this.props.onResize() | ||
| this.props.onResize({ | ||
| domElement: ReactDOM.findDOMNode(this), | ||
| component: this | ||
| }) | ||
| } | ||
@@ -143,3 +146,6 @@ | ||
| // to onStartResize | ||
| if (this.props.onStartResize(event)) { | ||
| if (this.props.onStartResize({ | ||
| domElement: ReactDOM.findDOMNode(this), | ||
| component: this | ||
| })) { | ||
@@ -176,3 +182,6 @@ event.stopPropagation() | ||
| this.props.onStopResize(event) | ||
| this.props.onStopResize({ | ||
| domElement: ReactDOM.findDOMNode(this), | ||
| component: this | ||
| }) | ||
| } | ||
@@ -179,0 +188,0 @@ |
@@ -48,3 +48,3 @@ var clean = require('clean-webpack-plugin') | ||
| new webpack.NoErrorsPlugin() | ||
| new webpack.NoEmitOnErrorsPlugin() | ||
| ], | ||
@@ -51,0 +51,0 @@ |
@@ -50,3 +50,3 @@ var clean = require('clean-webpack-plugin') | ||
| new webpack.NoErrorsPlugin() | ||
| new webpack.NoEmitOnErrorsPlugin() | ||
| ], | ||
@@ -53,0 +53,0 @@ |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Fixed alerts
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by43.34%
4635820
Worsened metrics
- Dev dependency count
- increased by9.09%
24
- Lines of code
- decreased by-0.22%
35951
- Number of medium supply chain risk alerts
- increased by33.33%
8
No dependency changes