Skip to content

Instantly share code, notes, and snippets.

@hokaccha
Last active August 7, 2017 13:52
Show Gist options
  • Save hokaccha/0362fc2e48035f9a15e742cf672e68ee to your computer and use it in GitHub Desktop.
Save hokaccha/0362fc2e48035f9a15e742cf672e68ee to your computer and use it in GitHub Desktop.
import React from 'react';
import { Frame, FrameSet } from './react-flex-frame';
class App extends React.Component {
render() {
return (
<FrameSet direction="row">
<Frame width="300" resiable={true} className="side">
<h1>Side Bar</h1>
</Frame>
<FrameSet direction="column" width="auto">
<Frame height="200" resiable={true} className="mainTop">
<h2>Main Top</h2>
</Frame>
<Frame height="auto" className="mainBottom">
<h2>Main Bottom</h2>
</Frame>
</FrameSet>
</FrameSet>
);
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
export class FrameSet extends React.Component {
render() {
let style = {
display: 'flex',
flexDirection: this.props.direction,
position: 'relative',
};
if (this.props.height === 'auto' || this.props.width === 'auto') {
style.flex = 1;
}
else if (this.props.width) {
style.width = `${this.props.width}px`;
}
else if (this.props.height) {
style.height = `${this.props.height}px`;
}
return <div style={style}>
{this.props.children}
</div>;
}
}
export class Frame extends React.Component {
handleResizeStart(e) {
e.preventDefault();
let el = ReactDOM.findDOMNode(this);
let param = this.props.width ? el.clientWidth : el.clientHeight;
let posProp = this.props.width ? 'pageX' : 'pageY';
let pos = e[posProp];
let handleResize = (e) => {
let newParam = param + (e[posProp] - pos);
if (newParam < 0) newParam = 0;
el.style[this.props.width ? 'width' : 'height'] = `${newParam}px`;
};
let handleResizeStop = () => {
document.removeEventListener('mouseup', handleResizeStop);
document.removeEventListener('mousemove', handleResize);
};
document.addEventListener('mousemove', handleResize);
document.addEventListener('mouseup', handleResizeStop);
}
render() {
let style = { position: 'relative' };
if (this.props.height === 'auto' || this.props.width === 'auto') {
style.flex = 1;
}
else if (this.props.width) {
style.width = `${this.props.width}px`;
}
else if (this.props.height) {
style.height = `${this.props.height}px`;
}
if (this.props.resiable) {
let style = {
position: 'absolute',
}
if (this.props.width) {
Object.assign(style, {
right: '0',
top: '0',
width: '5px',
height: '100%',
cursor: 'col-resize',
});
}
else {
Object.assign(style, {
left: '0',
bottom: '0',
width: '100%',
height: '5px',
cursor: 'row-resize',
});
}
this.resizeBar = <div style={style} onMouseDown={this.handleResizeStart.bind(this)}></div>;
}
return <div style={style} className={this.props.className}>
{this.props.children}
{this.resizeBar}
</div>;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment