Select Git revision
WorkspaceElastic.js
WorkspaceElastic.js 2.51 KiB
import React from 'react';
import PropTypes from 'prop-types';
import { Rnd } from 'react-rnd';
import Window from '../containers/Window';
import ElasticMinimap from '../containers/ElasticMinimap';
import ns from '../config/css-ns';
/**
* Represents a work area that contains any number of windows
* @memberof Workspace
* @private
*/
class WorkspaceElastic extends React.Component {
/**
*/
render() {
const {
workspace,
windows,
setWorkspaceViewportPosition,
updateWindowPosition,
setWindowSize,
} = this.props;
return (
<>
<Rnd
default={{
width: 5000,
height: 5000,
}}
position={{ x: workspace.viewport.x, y: workspace.viewport.y }}
enableResizing={{
top: false,
right: false,
bottom: false,
left: false,
topRight: false,
bottomRight: false,
bottomLeft: false,
topLeft: false,
}}
onDrag={(e, d) => {
setWorkspaceViewportPosition(d.x, d.y);
}}
cancel={`.${ns('window')}`}
className={ns('workspace')}
>
{
Object.values(windows).map(window => (
<Rnd
key={window.id}
size={{ width: window.width, height: window.height }}
position={{ x: window.x, y: window.y }}
bounds="parent"
onDrag={(e, d) => {
updateWindowPosition(window.id, { x: d.x, y: d.y });
}}
onResize={(e, direction, ref, delta, position) => {
setWindowSize(window.id, {
width: parseInt(ref.style.width, 10),
height: parseInt(ref.style.height, 10),
...position,
});
}}
dragHandleClassName={ns('window-top-bar')}
>
<Window
window={window}
/>
</Rnd>
))
}
</Rnd>
<ElasticMinimap />
</>
);
}
}
WorkspaceElastic.propTypes = {
setWorkspaceViewportPosition: PropTypes.func.isRequired,
windows: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
workspace: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
updateWindowPosition: PropTypes.func.isRequired,
setWindowSize: PropTypes.func.isRequired,
};
export default WorkspaceElastic;