Reusable resizable flex HOC #1488

Adds a higher-order component that injects drag-to-resize flex functionality into any component with a draggable flex layout. All calculations and state are managed by the HOC, reducing a presentational component’s responsibilities to forwarding refs, using the flex values given, and delegating drag events back to the handler prop. Unlike the previous implementation, the logic here follows a simple rule that dragging a divider will only affect the size of the regions adjacent to that divider. While there is no obvious right or wrong answer here, the new behavior is consistent with other drag-to-resize implementations I’ve played with, and makes it particularly easy to support an arbitrary number of flex regions. Anyway, the fundamental structure of this code could accommodate different logic, so it wouldn’t be difficult to refine in the future. The implementation here assumes that the final size of flex regions will be primarily determined by the `flex-grow` property: the initial main size represents the _smallest_ that the region should be, and then the regions grow to fill available space. So, dragging to resize simply calculates what the ratio of `flex-grow` between the two divider-adjacent regions should be, and updates them accordingly. If a drag would cause one of the regions to be smaller than its initial main size, it is ignored.

Applies new `resizableFlex` higher-order component to the `<Workspace>` component to control resizing of the flex regions containing the editors column and output respectively. Fully removes the tightly-coupled flex resizing support from Redux and React infrastructure. Differences between calculating flex for row and column flex directions are encapsulated in a pair of adapters. Flex direction-specific property access now in adapter Fix adapter usage Use generic HOC for drag-to-resize editors column and preview Only works in one direction because of pointer capture Restore start/stop drag Fix lint Remove explicit Redux-level support for drag-to-resize Removes support for resizing the center vertical divider, now that this functionality has been migrated to the resizeable flex module. One dangling rowflex reference

Ensures we don’t propagate prop updates from the resizable flex HOC unless something relevant has actually changed. The main functions in the `resizableFlex` module are independent of the current state, so we should just define them once and then merge them into the final props returned by the component. The props-returning function should return the same instance as previously if the props themselves are unchanged. To do this, we want to memoize the function so that new props are only returned if: * The flex list (received from Redux) has changed * The `ownProps` (passed directly to the component) have changed In the latter case, we can’t rely on `ownProps` to be strictly equal, however; instead, we need to create a custom memoized function that does a shallow value check (the same kind of check used for pure `react-redux` containers)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reusable resizable flex HOC #1488

Reusable resizable flex HOC #1488

Commits on Jul 17, 2018