52 lines
1.1 KiB
JavaScript
52 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { connect } from 'react-redux';
|
|
|
|
import { dividerClicked } from './redux';
|
|
|
|
const mapStateToProps = null;
|
|
function mapDispatchToProps(dispatch, { name }) {
|
|
const dispatchers = {
|
|
dividerClicked: () => dispatch(dividerClicked(name))
|
|
};
|
|
return () => dispatchers;
|
|
}
|
|
|
|
const propTypes = {
|
|
dividerClicked: PropTypes.func.isRequired,
|
|
left: PropTypes.number.isRequired,
|
|
name: PropTypes.string.isRequired
|
|
};
|
|
|
|
export function Divider({ left, dividerClicked }) {
|
|
const style = {
|
|
borderLeft: '1px solid rgb(204, 204, 204)',
|
|
bottom: 0,
|
|
cursor: 'col-resize',
|
|
height: '100%',
|
|
left: left + '%',
|
|
marginLeft: '0px',
|
|
position: 'absolute',
|
|
right: 'auto',
|
|
top: 0,
|
|
width: '8px',
|
|
zIndex: 100
|
|
};
|
|
// use onMouseDown as onClick does not fire
|
|
// until onMouseUp
|
|
// note(berks): do we need touch support?
|
|
return (
|
|
<div
|
|
onMouseDown={ dividerClicked }
|
|
style={ style }
|
|
/>
|
|
);
|
|
}
|
|
Divider.displayName = 'Divider';
|
|
Divider.propTypes = propTypes;
|
|
|
|
export default connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(Divider);
|