import * as React from "react" ; import { polyfill } from "react-lifecycles-compat" ; import { AbstractPureComponent2 , Props , Utils as CoreUtils } from "@blueprintjs/core" ; import { Utils } from "../common/index" ; import { ILockableLayout , Orientation , ResizeHandle } from "./resizeHandle" ; export type IIndexedResizeCallback = ( index : number , size : number ) => void ; export type IndexedResizeCallback = IIndexedResizeCallback ; export interface IResizableProps extends Props , ILockableLayout { default isResizable ? : boolean ; /**
     * The optional maximum width of the column.
     */ maxSize ? : number ; /**
     * The optional minimum width of the column.
     */ minSize ? : number ; param size onSizeChanged ? : ( size : number ) => void ; param size onResizeEnd ? : ( size : number ) => void ; /**
     * A callback that is called when the user double clicks the resize handle
     */ onDoubleClick ? : ( ) => void ; /**
     * Determines how the resize handle is oriented in the resizable child.
     */ orientation : Orientation ; /**
     * The initial dimensional size.
     */ size : number ; } export interface IResizeableState { /**
     * The dimensional size, respecting minimum and maximum constraints.
     */ size ? : number ; /**
     * The dimensional size, ignoring minimum and maximum constraints.
     */ unclampedSize ? : number ; } @ ( polyfill as CoreUtils . LifecycleCompatPolyfill < IResizableProps , any > ) export class Resizable extends AbstractPureComponent2 < IResizableProps , IResizeableState > { public static defaultProps = { isResizable : true , minSize : 0 , } ; public static getDerivedStateFromProps ( { size } , prevState ) { if ( prevState == null ) { return { size , unclampedSize : size , } ; } return null ; } public state : IResizeableState = Resizable . getDerivedStateFromProps ( this . props , null ) ; public componentDidUpdate ( prevProps ) { if ( prevProps . size !== this . props . size ) { this . setState ( Resizable . getDerivedStateFromProps ( this . props , null ) ) ; } } public render ( ) { const child = React . Children . only ( this . props . children ) as React . ReactElement ; 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 , { style , resizeHandle } ) ; } private renderResizeHandle ( ) { const { onLayoutLock , onDoubleClick , orientation } = this . props ; return ( < ResizeHandle key = "resize-handle" onDoubleClick = { onDoubleClick } onLayoutLock = { onLayoutLock } onResizeEnd = { this . onResizeEnd } onResizeMove = { this . onResizeMove } orientation = { orientation } / > ) ; } private onResizeMove = ( _offset , delta ) => { this . offsetSize ( delta ) ; if ( this . props . onSizeChanged != null ) { this . props . onSizeChanged ( this . state . size ) ; } } ; private onResizeEnd = ( _offset ) => { this . setState ( { unclampedSize : this . state . size } ) ; if ( this . props . onResizeEnd != null ) { this . props . onResizeEnd ( this . state . size ) ; } } ; /**
     * Returns the CSS style to apply to the child element given the state's
     * size value.
     */ private getStyle ( ) { if ( this . props . orientation === 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" , } ; } } private offsetSize ( offset ) { const unclampedSize = this . state . unclampedSize + offset ; this . setState ( { size : Utils . clamp ( unclampedSize , this . props . minSize , this . props . maxSize ) , unclampedSize , } ) ; } }