From 2769806afa24fc602318eb859018e8f1077513b9 Mon Sep 17 00:00:00 2001
From: Brian Chen <bzchen93@gmail.com>
Date: Mon, 4 Sep 2023 17:57:23 +1000
Subject: [PATCH] [react-responsive] Add definition (#4504)

* Create definition

* add tests

* function arg names from _
---
 .../flow_v0.83.x-/react-responsive_v9.x.x.js  | 92 +++++++++++++++++++
 .../test_react-responsive_v9.x.x.js           | 85 +++++++++++++++++
 2 files changed, 177 insertions(+)
 create mode 100644 definitions/npm/react-responsive_v9.x.x/flow_v0.83.x-/react-responsive_v9.x.x.js
 create mode 100644 definitions/npm/react-responsive_v9.x.x/flow_v0.83.x-/test_react-responsive_v9.x.x.js

diff --git a/definitions/npm/react-responsive_v9.x.x/flow_v0.83.x-/react-responsive_v9.x.x.js b/definitions/npm/react-responsive_v9.x.x/flow_v0.83.x-/react-responsive_v9.x.x.js
new file mode 100644
index 0000000000..ae6cb83879
--- /dev/null
+++ b/definitions/npm/react-responsive_v9.x.x/flow_v0.83.x-/react-responsive_v9.x.x.js
@@ -0,0 +1,92 @@
+declare module 'react-responsive' {
+  declare export type MediaQueryTypes = {|
+    all?: boolean,
+    grid?: boolean,
+    aural?: boolean,
+    braille?: boolean,
+    handheld?: boolean,
+    print?: boolean,
+    projection?: boolean,
+    screen?: boolean,
+    tty?: boolean,
+    tv?: boolean,
+    embossed?: boolean,
+  |};
+
+  declare export type MediaQueryType = $Keys<MediaQueryTypes>;
+
+  declare export type MediaQueryMatchers = {|
+    aspectRatio?: string,
+    deviceAspectRatio?: string,
+    height?: number | string,
+    deviceHeight?: number | string,
+    width?: number | string,
+    deviceWidth?: number | string,
+    color?: boolean,
+    colorIndex?: boolean,
+    monochrome?: boolean,
+    resolution?: number | string,
+    orientation?: 'portrait' | 'landscape',
+    scan?: 'progressive' | 'interlace',
+    type?: MediaQueryType,
+  |};
+
+  declare export type MediaQueryFeatures = {|
+    ...MediaQueryMatchers,
+    minAspectRatio?: string,
+    maxAspectRatio?: string,
+    minDeviceAspectRatio?: string,
+    maxDeviceAspectRatio?: string,
+    minHeight?: number | string,
+    maxHeight?: number | string,
+    minDeviceHeight?: number | string,
+    maxDeviceHeight?: number | string,
+    minWidth?: number | string,
+    maxWidth?: number | string,
+    minDeviceWidth?: number | string,
+    maxDeviceWidth?: number | string,
+    minColor?: number,
+    maxColor?: number,
+    minColorIndex?: number,
+    maxColorIndex?: number,
+    minMonochrome?: number,
+    maxMonochrome?: number,
+    minResolution?: number | string,
+    maxResolution?: number | string,
+  |};
+
+  declare export type MediaQueryAllQueryable = {|
+    ...MediaQueryFeatures,
+    ...MediaQueryTypes,
+  |};
+
+  declare export type MediaQuerySettings = {|
+    ...MediaQueryAllQueryable,
+    query?: string,
+  |};
+
+  declare export var useMediaQuery: (
+    settings: MediaQuerySettings,
+    device?: MediaQueryMatchers,
+    onChange?: ((matches: boolean) => void),
+  ) => boolean;
+
+  declare export var toQuery: (obj: MediaQueryAllQueryable) => string;
+
+  declare export var Context: React$Context<MediaQueryAllQueryable | void>;
+
+  declare type MediaQuery = React$ComponentType<{|
+    ...MediaQueryAllQueryable,
+    component?: React$Node,
+    children?: React$Node | ((matches: boolean) => React$Node),
+    query?: string,
+    style?: { ... },
+    className?: string,
+    device?: MediaQueryMatchers,
+    values?: MediaQueryMatchers,
+    onBeforeChange?: (matches: boolean) => void,
+    onChange?: (matches: boolean) => void,
+  |}>;
+
+  declare export default MediaQuery;
+}
diff --git a/definitions/npm/react-responsive_v9.x.x/flow_v0.83.x-/test_react-responsive_v9.x.x.js b/definitions/npm/react-responsive_v9.x.x/flow_v0.83.x-/test_react-responsive_v9.x.x.js
new file mode 100644
index 0000000000..d3aefe5ed5
--- /dev/null
+++ b/definitions/npm/react-responsive_v9.x.x/flow_v0.83.x-/test_react-responsive_v9.x.x.js
@@ -0,0 +1,85 @@
+// @flow
+import { describe, test } from 'flow-typed-test';
+import * as React from 'react';
+import MediaQuery, {
+  useMediaQuery,
+  toQuery,
+  Context,
+} from 'react-responsive';
+
+describe('react-responsive', () => {
+  test('MediaQuery', () => {
+    (
+      <MediaQuery
+        query="test"
+      >
+        child
+      </MediaQuery>
+    );
+
+    (
+      <MediaQuery
+        // $FlowExpectedError[incompatible-type]
+        query={123}
+      >
+        child
+      </MediaQuery>
+    );
+
+    (
+      // $FlowExpectedError[prop-missing]
+      <MediaQuery
+        foo="bar"
+      >
+        child
+      </MediaQuery>
+    );
+  });
+
+  test('useMediaQuery', () => {
+    (useMediaQuery({
+      query: '(max-width: 768px)',
+    }): boolean);
+
+    // $FlowExpectedError[incompatible-cast]
+    (useMediaQuery({
+      query: '(max-width: 768px)',
+    }): string);
+
+    useMediaQuery({
+      // $FlowExpectedError[incompatible-call]
+      query: 123,
+    });
+
+    // $FlowExpectedError[prop-missing]
+    useMediaQuery({
+      foo: 'bar',
+    });
+  });
+
+  test('toQuery', () => {
+    toQuery({});
+    (toQuery({}): string);
+    toQuery({ minAspectRatio: 'test' });
+
+    // $FlowExpectedError[incompatible-cast]
+    (toQuery({}): number);
+    // $FlowExpectedError[incompatible-call]
+    toQuery();
+    // $FlowExpectedError[incompatible-call]
+    toQuery({ minAspectRatio: 123 });
+    // $FlowExpectedError[prop-missing]
+    toQuery({ foo: 'bar' });
+    // $FlowExpectedError[extra-arg]
+    toQuery({}, {});
+  });
+
+  test('Context', () => {
+    const value = React.useContext(Context);
+    // $FlowExpectedError[incompatible-use]
+    value.colorIndex
+    if (value) {
+      value.colorIndex;
+    }
+  });
+});