feature(show-when): add orientation support, recalc on resize event

packages/core/src/components.d.ts

@@ -1135,6 +1135,7 @@ declare global {
       mediaQuery?: string;
       mode?: string;
       or?: boolean;
+      orientation?: string;
       platform?: string;
       size?: string;
     }
@@ -2906,6 +2907,7 @@ declare global {
       mediaQuery?: string;
       mode?: string;
       or?: boolean;
+      orientation?: string;
       platform?: string;
       size?: string;
     }

packages/core/src/components/show-when/readme.md

@@ -22,6 +22,11 @@ string
 boolean
 
 
+#### orientation
+
+string
+
+
 #### platform
 
 string
@@ -49,6 +54,11 @@ string
 boolean
 
 
+#### orientation
+
+string
+
+
 #### platform
 
 string

packages/core/src/components/show-when/show-when.tsx

@@ -1,9 +1,9 @@
-import { Component, Element, Prop } from '@stencil/core';
+import { Component, Element, Listen, Prop, State } from '@stencil/core';
 import { Config, PlatformConfig } from '../../index';
 
 import {
   DisplayWhen,
-  componentWillLoadImpl,
+  updateTestResults,
 } from '../../utils/show-hide-when-utils';
 
 @Component({
@@ -16,16 +16,18 @@ export class ShowWhen implements DisplayWhen {
   @Prop({ context: 'config' }) config: Config;
   @Prop({ context: 'platforms' }) calculatedPlatforms: PlatformConfig[];
 
+  @Prop() orientation: string = null;
   @Prop() mediaQuery: string = null;
   @Prop() size: string = null;
   @Prop() mode: string = null;
   @Prop() platform: string = null;
   @Prop() or = false;
 
-  passesTest = false;
+  @State() passesTest = false;
 
+  @Listen('window:resize')
   componentWillLoad() {
-    return componentWillLoadImpl(this);
+    return updateTestResults(this);
   }
 
   hostData() {

packages/core/src/components/show-when/test/basic/index.html

@@ -32,6 +32,15 @@
           <div>Shows on iOS only</div>
         </ion-show-when>
 
+        <h2>Orientation Tests</h2>
+        <ion-show-when orientation="portrait">
+          <div>Shows on portrait orientation</div>
+        </ion-show-when>
+
+        <ion-show-when orientation="landscape">
+          <div>Shows on landscape orientation</div>
+        </ion-show-when>
+
         <h2>Platform Tests</h2>
 
         <ion-show-when platform="android,ios">

packages/core/src/utils/show-hide-when-utils.ts

@@ -1,6 +1,6 @@
 import { Config, PlatformConfig } from '../index';
 
-export function componentWillLoadImpl(displayWhen: DisplayWhen) {
+export function updateTestResults(displayWhen: DisplayWhen) {
   displayWhen.passesTest = getTestResult(displayWhen);
 }
 
@@ -61,6 +61,9 @@ export function getTestResult(displayWhen: DisplayWhen) {
     const platformNames = displayWhen.calculatedPlatforms.map(platformConfig => platformConfig.name);
     resultsToConsider.push(isPlatformMatch(platformNames, displayWhen.platform));
   }
+  if (displayWhen.orientation) {
+    resultsToConsider.push(isOrientationMatch(displayWhen.orientation));
+  }
 
   if (!resultsToConsider.length) {
     return true;
@@ -76,6 +79,20 @@ export function getTestResult(displayWhen: DisplayWhen) {
   });
 }
 
+export function isOrientationMatch(orientation: string) {
+  if (orientation == 'portrait') {
+    return isPortrait();
+  } else if (orientation === 'landscape') {
+    return !isPortrait();
+  }
+  // it's an invalid orientation, so just return it
+  return false;
+}
+
+export function isPortrait(): boolean {
+  return window.matchMedia('(orientation: portrait)').matches;
+}
+
 const sizeToMediaQueryMap = new Map<string, string>();
 sizeToMediaQueryMap.set('xs', '(min-width: 0px)');
 sizeToMediaQueryMap.set('sm', '(min-width: 576px)');
@@ -89,6 +106,7 @@ export interface DisplayWhen {
   mediaQuery: string;
   mode: string;
   or: boolean;
+  orientation: string;
   passesTest: boolean;
   platform: string;
   size: string;