@git-temporal/git-temporal-react
Version:
<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
67 lines (66 loc) • 2.81 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const styles_1 = require("app/styles");
const HorizontalScroller_1 = require("app/components/HorizontalScroller");
const initialState = {
zoom: 100,
};
const outerStyle = {
_extends: 'fill',
position: 'relative',
};
const scrollContainerStyle = {
height: '100%',
};
const zoomSelectorStyle = {
position: 'absolute',
right: 18,
background: 'transparent',
};
const availableZooms = [100, 200, 300, 500, 800, 1300];
class ZoomContainer extends react_1.default.Component {
constructor() {
super(...arguments);
this.state = initialState;
this.onZoomChange = evt => {
const value = parseInt(evt.target.value, 10);
this.setState({ zoom: value });
};
}
componentDidUpdate(prevProps, prevState) {
if (prevState.zoom !== this.state.zoom && this.props.onZoom) {
this.props.onZoom(this.state.zoom);
}
if (!availableZooms.includes(this.state.zoom) &&
JSON.stringify(prevProps.customZooms) !==
JSON.stringify(this.props.customZooms)) {
this.setState({ zoom: initialState.zoom });
}
}
render() {
const zoomStyle = {
width: `${this.state.zoom || 100}%`,
};
return (react_1.default.createElement("div", { style: styles_1.style(outerStyle), onMouseEnter: this.props.onMouseEnter, onMouseLeave: this.props.onMouseLeave },
react_1.default.createElement(HorizontalScroller_1.HorizontalScroller, { onScroll: this.props.onScroll, scrollLeft: this.props.scrollLeft },
react_1.default.createElement("div", { style: styles_1.style(scrollContainerStyle, zoomStyle) }, this.props.children)),
react_1.default.createElement("div", { style: styles_1.style(zoomSelectorStyle, this.props.style) },
react_1.default.createElement("label", { style: styles_1.style('normalText') },
react_1.default.createElement("select", { onChange: this.onZoomChange, value: this.state.zoom }, this.renderZoomOptions())))));
}
renderZoomOptions() {
const customZooms = this.props.customZooms || [];
const standardZooms = availableZooms.map(zoom => ({
value: zoom,
label: `${zoom}% zoom`,
}));
return customZooms.concat(standardZooms).map(({ value, label }, index) => {
return (react_1.default.createElement("option", { key: index, value: value }, label));
});
}
}
exports.ZoomContainer = ZoomContainer;