typings: withSize add onSize callback (#167)

* typings: withSize add onSize callback

* readonly what we can

* review points

* Update react-sizeme.d.ts

Author: beckend

react-sizeme.d.ts

@@ -2,42 +2,50 @@
 
 import { Component, ComponentType, ReactNode, ReactElement } from 'react'
 
-declare namespace sizeMe {
-  type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
+type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
 
+declare namespace sizeMe {
   export interface SizeMeProps {
-    size: {
-      width: number | null
-      height: number | null
+    readonly size: {
+      readonly width: number | null
+      readonly height: number | null
     }
   }
 
   export interface SizeMeOptions {
-    monitorWidth?: boolean
     monitorHeight?: boolean
     monitorPosition?: boolean
-    refreshRate?: number
-    refreshMode?: 'throttle' | 'debounce'
+    monitorWidth?: boolean
     noPlaceholder?: boolean
+    refreshMode?: 'throttle' | 'debounce'
+    refreshRate?: number
   }
 
   export interface SizeMeRenderProps extends SizeMeOptions {
     children: (props: SizeMeProps) => ReactElement
   }
+
   export class SizeMe extends Component<SizeMeRenderProps> {}
 
-  export const withSize: (
+  export type WithSizeOnSizeCallback = (size: SizeMeProps['size']) => void
+
+  export interface WithSizeProps {
+    onSize?: WithSizeOnSizeCallback
+  }
+
+  export function withSize(
     options?: SizeMeOptions,
-  ) => <P extends object = {}>(
+  ): <P extends object = {}>(
     component: ComponentType<P>,
-  ) => ComponentType<Omit<P, 'size'>>
+  ) => ComponentType<Omit<P, 'size'> & WithSizeProps>
 
   export let noPlaceholders: boolean
 }
+
 declare function sizeMe(
   options?: sizeMe.SizeMeOptions,
 ): <P extends object = {}>(
   component: ComponentType<P>,
-) => ComponentType<sizeMe.Omit<P, 'size'>>
+) => ComponentType<Omit<P, 'size'> & sizeMe.WithSizeProps>
 
 export = sizeMe

src/__tests__/typescript/hoc.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { withSize, SizeMeProps } from 'react-sizeme'
+import { withSize, SizeMeProps, WithSizeOnSizeCallback } from 'react-sizeme'
 
 interface MyComponentProps extends SizeMeProps {
   id: number
@@ -22,4 +22,17 @@ function MyComponent({ id, size }: MyComponentProps) {
 
 const SizedMyComponent = withSize()(MyComponent)
 
-const foo = <SizedMyComponent id={1} />
+const onSize: WithSizeOnSizeCallback = ({ height, width }) => {
+  if (width) {
+    const foo = width + 1
+  }
+  if (height) {
+    const foo = height + 1
+  }
+  // typings:expect-error
+  const h1 = height + 1
+  // typings:expect-error
+  const w1 = width + 1
+}
+
+const foo = <SizedMyComponent id={1} onSize={onSize} />

src/__tests__/with-size.test.js

@@ -127,10 +127,12 @@ describe('withSize', () => {
 
       class SizeCallbackWrapper extends React.Component {
         state = {
+          // eslint-disable-next-line react/no-unused-state
           size: null,
         }
         onSize = size =>
           this.setState({
+            // eslint-disable-next-line react/no-unused-state
             size,
           })
         render() {