chore(pkg): update deps

Author: STRML

.babelrc

@@ -10,7 +10,7 @@
     "@babel/preset-flow"
   ],
   "plugins": [
-    "@babel/plugin-proposal-class-properties",
+    ["@babel/plugin-proposal-class-properties", {"loose": true}],
     "@babel/plugin-proposal-object-rest-spread"
   ]
 }

.eslintrc

@@ -1,6 +1,6 @@
 {
   "root": true,
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "plugins": [
     "react"
   ],

.flowconfig

@@ -1,5 +1,5 @@
 [version]
-^0.133.0
+^0.150.1
 
 [ignore]
 .*/node_modules/@babel.*
@@ -18,10 +18,6 @@ implicit-inexact-object=error
 
 [options]
 suppress_type=$FlowFixMe
-esproposal.class_static_fields=enable
-esproposal.class_instance_fields=enable
-esproposal.decorators=ignore
-esproposal.export_star_as=enable
 experimental.strict_call_arity=true
 module.system.node.allow_root_relative=true
 module.use_strict=true

lib/Resizable.js

@@ -4,15 +4,15 @@ import type {Node as ReactNode} from 'react';
 import {DraggableCore} from 'react-draggable';
 import {cloneElement} from './utils';
 import {resizableProps} from "./propTypes";
-import type {ResizeHandleAxis, Props, ResizableState, DragCallbackData} from './propTypes';
+import type {ResizeHandleAxis, DefaultProps, Props, ReactRef, ResizableState, DragCallbackData} from './propTypes';
 
 export default class Resizable extends React.Component<Props, ResizableState> {
   static propTypes = resizableProps;
 
-  static defaultProps =  {
+  static defaultProps: DefaultProps =  {
+    axis: 'both',
     handleSize: [20, 20],
     lockAspectRatio: false,
-    axis: 'both',
     minConstraints: [20, 20],
     maxConstraints: [Infinity, Infinity],
     resizeHandles: ['se'],

lib/ResizableBox.js

@@ -28,7 +28,7 @@ export default class ResizableBox extends React.Component<ResizableBoxProps, Res
     propsHeight: this.props.height,
   };
 
-  static getDerivedStateFromProps(props: ResizableBoxProps, state: ResizableBoxState) {
+  static getDerivedStateFromProps(props: ResizableBoxProps, state: ResizableBoxState): ?ResizableBoxState {
     // If parent changes height/width, set that in our state.
     if (state.propsWidth !== props.width || state.propsHeight !== props.height) {
       return {
@@ -41,7 +41,7 @@ export default class ResizableBox extends React.Component<ResizableBoxProps, Res
     return null;
   }
 
-  onResize = (e: SyntheticEvent<>, data: ResizeCallbackData) => {
+  onResize: (e: SyntheticEvent<>, data: ResizeCallbackData) => void = (e, data) => {
     const {size} = data;
     if (this.props.onResize) {
       e.persist && e.persist();

lib/propTypes.js

@@ -3,46 +3,56 @@ import PropTypes from 'prop-types';
 import {DraggableCore} from "react-draggable";
 import type {Element as ReactElement, ElementConfig} from 'react';
 
+export type ReactRef<T: HTMLElement> = {
+  current: T | null
+};
+
 export type Axis = 'both' | 'x' | 'y' | 'none';
 export type ResizeHandleAxis = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';
 export type ResizableState = void;
-export type ResizableBoxState = {|
+export type ResizableBoxState = {
   width: number, height: number,
   propsWidth: number, propsHeight: number
-|};
-export type DragCallbackData = {|
+};
+export type DragCallbackData = {
   node: HTMLElement,
   x: number, y: number,
   deltaX: number, deltaY: number,
   lastX: number, lastY: number
-|};
-export type ResizeCallbackData = {|
+};
+export type ResizeCallbackData = {
   node: HTMLElement,
-  size: {|width: number, height: number|},
+  size: {width: number, height: number},
   handle: ResizeHandleAxis
-|};
+};
 
 // <Resizable>
-export type Props = {|
+export type DefaultProps = {
   axis: Axis,
+  handleSize: [number, number],
+  lockAspectRatio: boolean,
+  minConstraints: [number, number],
+  maxConstraints: [number, number],
+  resizeHandles: ResizeHandleAxis[],
+  transformScale: number,
+};
+
+export type Props = {
+  ...DefaultProps,
   children: ReactElement<any>,
   className?: ?string,
   draggableOpts?: ?ElementConfig<typeof DraggableCore>,
   height: number,
   handle?: ReactElement<any> | (resizeHandleAxis: ResizeHandleAxis) => ReactElement<any>,
-  handleSize: [number, number],
-  lockAspectRatio: boolean,
-  minConstraints: [number, number],
-  maxConstraints: [number, number],
   onResizeStop?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
   onResizeStart?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
   onResize?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
-  resizeHandles: ResizeHandleAxis[],
-  transformScale: number,
   width: number,
-|};
+};
+
+
 
-export const resizableProps = {
+export const resizableProps: Object = {
   /*
   * Restricts resizing to a particular axis (default: 'both')
   * 'both' - allows resizing by width or height

package.json

@@ -36,20 +36,20 @@
   "devDependencies": {
     "@babel/cli": "^7.11.6",
     "@babel/core": "^7.11.6",
+    "@babel/eslint-parser": "^7.13.14",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-flow": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
-    "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
     "cross-env": "^7.0.2",
     "css-loader": "^4.2.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.4",
     "eslint": "^7.8.1",
     "eslint-plugin-react": "^7.20.6",
-    "flow-bin": "^0.133.0",
+    "flow-bin": "^0.150.1",
     "jest": "^26.4.2",
     "lodash": "^4.17.20",
     "pre-commit": "^1.1.2",