@blueprintjs/table
Version:
Scalable interactive table component
100 lines • 3.81 kB
JavaScript
"use strict";
/*
* Copyright 2016 Palantir Technologies, Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.Resizable = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const core_1 = require("@blueprintjs/core");
const index_1 = require("../common/index");
const resizeHandle_1 = require("./resizeHandle");
class Resizable extends core_1.AbstractPureComponent {
constructor() {
super(...arguments);
this.state = Resizable.getDerivedStateFromProps(this.props, null);
this.onResizeMove = (_offset, delta) => {
var _a, _b;
this.offsetSize(delta);
(_b = (_a = this.props).onSizeChanged) === null || _b === void 0 ? void 0 : _b.call(_a, this.state.size);
};
this.onResizeEnd = (_offset) => {
var _a, _b;
// reset "unclamped" size on end
this.setState({ unclampedSize: this.state.size });
(_b = (_a = this.props).onResizeEnd) === null || _b === void 0 ? void 0 : _b.call(_a, this.state.size);
};
}
static getDerivedStateFromProps({ size }, prevState) {
if (prevState == null) {
return {
size,
unclampedSize: size,
};
}
return null;
}
componentDidUpdate(prevProps) {
if (prevProps.size !== this.props.size) {
this.setState(Resizable.getDerivedStateFromProps(this.props, null));
}
}
render() {
const child = React.Children.only(this.props.children);
const style = { ...child.props.style, ...this.getStyle() };
if (this.props.isResizable === false) {
return React.cloneElement(child, { style });
}
const resizeHandle = this.renderResizeHandle();
return React.cloneElement(child, { resizeHandle, style });
}
renderResizeHandle() {
const { onLayoutLock, onDoubleClick, orientation } = this.props;
return (React.createElement(resizeHandle_1.ResizeHandle, { key: "resize-handle", onDoubleClick: onDoubleClick, onLayoutLock: onLayoutLock, onResizeEnd: this.onResizeEnd, onResizeMove: this.onResizeMove, orientation: orientation }));
}
/**
* Returns the CSS style to apply to the child element given the state's
* size value.
*/
getStyle() {
if (this.props.orientation === resizeHandle_1.Orientation.VERTICAL) {
return {
flexBasis: `${this.state.size}px`,
minWidth: "0px",
width: `${this.state.size}px`,
};
}
else {
return {
flexBasis: `${this.state.size}px`,
height: `${this.state.size}px`,
minHeight: "0px",
};
}
}
offsetSize(offset) {
const unclampedSize = this.state.unclampedSize + offset;
this.setState({
size: index_1.Utils.clamp(unclampedSize, this.props.minSize, this.props.maxSize),
unclampedSize,
});
}
}
exports.Resizable = Resizable;
Resizable.defaultProps = {
isResizable: true,
minSize: 0,
};
//# sourceMappingURL=resizable.js.map