fix: pickMatch return value based on generic

thearnica · Mar 13, 2019 · b2db650 · b2db650
1 parent 90441ed
commit b2db650
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 10 deletions.
diff --git a/__tests__/index.tsx b/__tests__/index.tsx
@@ -126,6 +126,49 @@ describe('Specs', () => {
   });
 
   it('pickMatch', () => {
+    expect(pickMatch({
+      mobile: false,
+      tablet: false,
+      desktop: false,
+    }, {
+      tablet: 2,
+    })).toBe(2);
+
+    expect(pickMatch({
+      mobile: false,
+      tablet: false,
+      desktop: false,
+    }, {
+    })).toBe(undefined);
+
+    expect(pickMatch({
+      mobile: false,
+      tablet: false,
+      desktop: false,
+    }, {
+      desktop: 3,
+    })).toBe(3);
+
+    expect(pickMatch({
+      mobile: false,
+      tablet: false,
+      desktop: false,
+    }, {
+      mobile: 1,
+      tablet: 2,
+      desktop: 3,
+    })).toBe(3);
+
+    expect(pickMatch({
+      mobile: true,
+      tablet: true,
+      desktop: true,
+    }, {
+      mobile: 1,
+      tablet: 2,
+      desktop: 3,
+    })).toBe(1);
+
     expect(pickMatch({
       mobile: false,
       tablet: true,
@@ -156,7 +199,6 @@ describe('Specs', () => {
     })).toBe(1);
   })
 
-
   describe('SSR', () => {
     it('Render', () => {
       const wrapper =
@@ -173,9 +215,9 @@ describe('Specs', () => {
       const wrapper =
         create(
           <MediaMock tablet>
-          <MediaServerRender predicted="tablet">
-            <MediaMatcher mobile="1" tablet="2" desktop="3"/>
-          </MediaServerRender>
+            <MediaServerRender predicted="tablet">
+              <MediaMatcher mobile="1" tablet="2" desktop="3"/>
+            </MediaServerRender>
           </MediaMock>
         );
       expect(wrapper.toJSON()).toEqual("2");

diff --git a/src/createMediaMatcher.tsx b/src/createMediaMatcher.tsx
@@ -19,7 +19,7 @@ const castPointsTo = (points: { [key: string]: any }, targetType: any) => (
 export type NoChildren = { children?: never };
 
 export type MediaMatcherType<T> = {
-  pickMatch<K>(matches: BoolOf<T>, slots: Partial<ObjectOf<T, K>>): React.ReactNode | null,
+  pickMatch<K>(matches: BoolOf<T>, slots: Partial<ObjectOf<T, K>>): K,
 
   Provider: React.SFC<{ state?: MediaRulesOf<T>, override?: false }>;
   Mock: React.SFC<Partial<RenderOf<T>>>;
@@ -40,11 +40,11 @@ export type MediaMatcherType<T> = {
 export function createMediaMatcher<T>(breakPoints: MediaRulesOf<T>): MediaMatcherType<T> {
   const MediaContext = React.createContext<BoolHash>({});
 
-  function pickMatch<K>(matches: BoolOf<T>, slots: Partial<ObjectOf<T, K>>): K | null {
+  function pickMatch<K>(matches: BoolOf<T>, slots: Partial<ObjectOf<T, K>>): K {
     return pickMediaMatch<T, K>(breakPoints, matches, slots)
   }
 
-  function pickMatchEx<M extends Partial<ObjectOf<T, React.ReactNode>>>(matches: BoolOf<T>, slots: M): React.ReactNode | null {
+  function pickMatchEx<M extends Partial<ObjectOf<T, React.ReactNode>>>(matches: BoolOf<T>, slots: M): React.ReactNode {
     return pickMediaMatch<T, React.ReactNode>(breakPoints, matches, slots)
   }
 

diff --git a/src/utils.ts b/src/utils.ts
@@ -26,7 +26,7 @@ export function getMaxMatch<T>(mediaRules: MediaRulesOf<T>, matches: BoolOf<any>
 }
 
 export function pickMediaMatch<T, K>
-(mediaRules: MediaRulesOf<T>, matches: BoolOf<any>, slots: Partial<ObjectOf<any, K>>): K | null {
+(mediaRules: MediaRulesOf<T>, matches: BoolOf<any>, slots: Partial<ObjectOf<any, K>>): K {
   const keys = Object.keys(mediaRules);
   const len = keys.length;
 
@@ -44,7 +44,8 @@ export function pickMediaMatch<T, K>
     }
   }
 
-  return null;
+  // could be only possible if no slots is given, so K is undefined
+  return undefined as any;
 }
 
 export type Names = {
@@ -88,4 +89,4 @@ export function notNulls(matches: { [key: string]: boolean | undefined }): { [ke
 
       return acc;
     }, {})
-}
+}