64 lines
1.8 KiB
JavaScript
64 lines
1.8 KiB
JavaScript
import React, { Component, PropTypes } from 'react';
|
|
import { Icon } from '../../UI';
|
|
import styles from './Toolbar.css';
|
|
|
|
function button(label, icon, action) {
|
|
return (<li className={styles.Button}>
|
|
<button className={styles[label]} onClick={action} title={label}>
|
|
<Icon type={icon} />
|
|
</button>
|
|
</li>);
|
|
}
|
|
|
|
export default class Toolbar extends Component {
|
|
static propTypes = {
|
|
isOpen: PropTypes.bool,
|
|
selectionPosition: PropTypes.object,
|
|
onH1: PropTypes.func.isRequired,
|
|
onH2: PropTypes.func.isRequired,
|
|
onBold: PropTypes.func.isRequired,
|
|
onItalic: PropTypes.func.isRequired,
|
|
onLink: PropTypes.func.isRequired,
|
|
onToggleMode: PropTypes.func.isRequired,
|
|
};
|
|
|
|
componentDidUpdate() {
|
|
const { selectionPosition } = this.props;
|
|
if (selectionPosition) {
|
|
const rect = this.element.getBoundingClientRect();
|
|
const parentRect = this.element.parentElement.getBoundingClientRect();
|
|
const style = this.element.style;
|
|
const pos = {
|
|
top: selectionPosition.top - rect.height - 5,
|
|
left: Math.min(selectionPosition.left, parentRect.width - rect.width),
|
|
};
|
|
style.setProperty('top', `${ pos.top }px`);
|
|
style.setProperty('left', `${ pos.left }px`);
|
|
}
|
|
}
|
|
|
|
handleRef = (ref) => {
|
|
this.element = ref;
|
|
};
|
|
|
|
render() {
|
|
const { isOpen, onH1, onH2, onBold, onItalic, onLink, onToggleMode } = this.props;
|
|
const classNames = [styles.Toolbar];
|
|
|
|
if (isOpen) {
|
|
classNames.push(styles.Visible);
|
|
}
|
|
|
|
return (
|
|
<ul className={classNames.join(' ')} ref={this.handleRef}>
|
|
{button('Header 1', 'h1', onH1)}
|
|
{button('Header 2', 'h2', onH2)}
|
|
{button('Bold', 'bold', onBold)}
|
|
{button('Italic', 'italic', onItalic)}
|
|
{button('Link', 'link', onLink)}
|
|
{button('View Code', 'code', onToggleMode)}
|
|
</ul>
|
|
);
|
|
}
|
|
}
|