labo-components
Version:
113 lines (99 loc) • 3.51 kB
JSX
import React from "react";
import PropTypes from "prop-types";
import IDUtil from "../../../../util/IDUtil";
// Show and handle timeline actions, like search, zoom and navigation
class Actions extends React.PureComponent {
onSearch = (e) => {
this.props.onSearch(e.target.value);
};
onZoomIn = () => {
this.props.onZoom(1.1, 0.5);
};
onZoomOut = () => {
this.props.onZoom(0.9, 0.5);
};
onBackward = () => {
this.props.onMove(-0.1 * this.props.duration);
};
onForward = () => {
this.props.onMove(0.1 * this.props.duration);
};
render() {
const hasSelected = this.props.onZoomToSelected;
return (
<div className={IDUtil.cssClassName("tl-actions")}>
{/* Search input */}
<input
ref={this.searchRef}
placeholder="Search in layers..."
defaultValue=""
onChange={this.onSearch}
/>
<div className="right">
{/* Zoom to selected */}
{hasSelected && (
<div
title="Zoom to selected"
className="zoom-selected"
onClick={this.props.onZoomToSelected}
>
Zoom to Selected
</div>
)}
{/* Zoom in */}
<div
className="zoom-in"
onClick={this.onZoomIn}
title="Zoom in"
>
Zoom in
</div>
{/* Zoom out */}
<div
className="zoom-out"
onClick={this.onZoomOut}
title="Zoom out"
>
Zoom out
</div>
{/* Navigate to previous selected, or backwards in time */}
<div
className="prev"
title={
this.props.onSelectPrev ? "Previous" : "Backward"
}
onClick={
this.props.onSelectPrev
? this.props.onSelectPrev
: this.onBackward
}
>
Previous
</div>
{/* Navigate to next selected, or forwards in time */}
<div
className="next"
title={this.props.onSelectNext ? "Next" : "Forward"}
onClick={
this.props.onSelectNext
? this.props.onSelectNext
: this.onForward
}
>
Next
</div>
</div>
</div>
);
}
}
Actions.propTypes = {
onSearch: PropTypes.func.isRequired,
onZoom: PropTypes.func.isRequired,
onMove: PropTypes.func.isRequired,
onSelectPrev: PropTypes.func,
onSelectNext: PropTypes.func,
onZoomToSelected: PropTypes.func,
duration: PropTypes.number.isRequired,
};
export default Actions;