feat(TouchSupportSensor): Add the TouchSupportSensor HOC and func

Author: mike-engel

README.md

@@ -69,6 +69,7 @@ const MyComponent = mock();
      - [`<ScrollSensor>`](./docs/en/ScrollSensor.md)
      - [`<SizeSensor>`](./docs/en/SizeSensor.md), [`withSize()`](./docs/en/SizeSensor.md#withsize-hoc), and [`@withSize`](./docs/en/SizeSensor.md#withsize-decorator) &mdash; [**example**](https://codesandbox.io/s/0y2qjm210p)
         - [`<WidthSensor>`](./docs/en/WidthSensor.md), [`withWidth()`](./docs/en/WidthSensor.md#withwidth-hoc-and-withwidth-decorator), and [`@withWidth`](./docs/en/WidthSensor.md#withwidth-hoc-and-withwidth-decorator)
+     - [`<TouchSupportSensor>`](./docs/en/TouchSupportSensor.md)
      - [`<ViewportSensor>`](./docs/en/ViewportSensor.md), [`withViewport()`](./docs/en/ViewportSensor.md#withviewport-hoc), and [`@withViewport`](./docs/en/ViewportSensor.md#withviewport-decorator)
         - [`<ViewportScrollSensor>`](./docs/en/ViewportSensor.md#viewportscrollsensor) and [`<ViewportObserverSensor>`](./docs/en/ViewportSensor.md#viewportobserversensor)
      - [`<WindowScrollSensor>`](./docs/en/WindowScrollSensor.md), [`withWindowScroll()`](./docs/en/WindowScrollSensor.md#withwindowscroll-hoc), and [`@withWindowScroll`](./docs/en/WindowScrollSensor.md#withwindowscroll-decorator)
@@ -114,6 +115,7 @@ const MyComponent = mock();
      - [`<Resolve>`](./docs/en/Resolve.md)
      - [`<Sms>`](./docs/en/Sms.md), [`<Mailto>`](./docs/en/Mailto.md)
      - [`getDisplayName()`](./docs/en/getDisplayName.md)
+     - [`touchSupported()`](./docs/en/TouchSupportSensor.md)
 
 
 ## License

docs/en/README.md

@@ -35,6 +35,7 @@
      - [`<ScrollSensor>`](./ScrollSensor.md)
      - [`<SizeSensor>`](./SizeSensor.md), [`withSize()`](./SizeSensor.md#withsize-hoc), and [`@withSize`](./SizeSensor.md#withsize-decorator)
         - [`<WidthSensor>`](./WidthSensor.md), [`withWidth()`](./WidthSensor.md#withwidth-hoc-and-withwidth-decorator), and [`@withWidth`](./WidthSensor.md#withwidth-hoc-and-withwidth-decorator)
+     - [`<TouchSupportSensor>`](./TouchSupportSensor.md)
      - [`<ViewportSensor>`](./ViewportSensor.md), [`withViewport()`](./ViewportSensor.md#withviewport-hoc), and [`@withViewport`](./ViewportSensor.md#withviewport-decorator)
         - [`<ViewportScrollSensor>`](./ViewportSensor.md#viewportscrollsensor) and [`<ViewportObserverSensor>`](./ViewportSensor.md#viewportobserversensor)
      - [`<WindowScrollSensor>`](./WindowScrollSensor.md), [`withWindowScroll()`](./WindowScrollSensor.md#withwindowscroll-hoc), and [`@withWindowScroll`](./WindowScrollSensor.md#withwindowscroll-decorator)
@@ -81,3 +82,4 @@
      - [`<Resolve>`](./Resolve.md)
      - [`<Sms>`](./Sms.md), [`<Mailto>`](./Mailto.md), and `<Tel>`
      - [`getDisplayName()`](./getDisplayName.md)
+     - [`touchSupported()`](./TouchSupportSensor.md)

docs/en/TouchSupportSensor.md

@@ -0,0 +1,43 @@
+# `<TouchSupportSensor>`
+
+[![React Universal Interface](https://img.shields.io/badge/React-Universal%20Interface-green.svg)](https://github.com/streamich/react-universal-interface)
+
+Render prop that detects if touch interactions are available or not.
+It's important to remember that touch detection can be [fallible](http://www.stucox.com/blog/you-cant-detect-a-touchscreen/).
+
+## Example
+
+Use it as FaCC, attach to root element
+
+```jsx
+import {TouchSupportSensor} from 'libreact/lib/TouchSupportSensor';
+
+<TouchSupportSensor>{({touchSupported}) =>
+  <div>{touchSupported ? 'touch interactions available' : 'touch interactions not available'}</div>
+}</TouchSupportSensor>
+```
+
+Use it as a plain function
+
+```js
+import { touchSupported } from 'libreact/lib/TouchSupportSensor';
+
+console.log(touchSupported())
+```
+
+
+## Props
+
+Prop signature
+
+```ts
+interface ITouchSupportSensorProps {
+  onlyMouse?: boolean;
+  onlyTouch?: boolean;
+}
+```
+
+, where
+
+  - `onlyMouse` - optional, boolean, will only render children if touch support is not detected.
+  - `onlyTouch` - optional, boolean, will only render children if touch support is detected.

src/MediaSensor/__story__/story.ts

@@ -3,7 +3,7 @@ import {storiesOf} from '@storybook/react';
 import {MediaSensor, withMedia} from '..';
 import ShowDocs from '../../ShowDocs'
 
-const IsBig = ({isBig}) => h('div', null, `WIDTH IS GREATED THAN 480PX: ${isBig}`);
+const IsBig = ({isBig}) => h('div', null, `WIDTH IS GREATER THAN 480PX: ${isBig}`);
 
 const IsBigWithMedia = withMedia(IsBig, 'isBig', {
   query: '(min-width: 480px)'
@@ -14,7 +14,7 @@ const IsBigWithMedia = withMedia(IsBig, 'isBig', {
 })
 class IsBigClass extends Component<any, any> {
   render () {
-    return h('div', null, `WIDTH IS GREATED THAN 480PX: ${this.props.isBig.matches}`);
+    return h('div', null, `WIDTH IS GREATER THAN 480PX: ${this.props.isBig.matches}`);
   }
 }
 
@@ -29,7 +29,7 @@ storiesOf('Sensors/MediaSensor', module)
           border: '1px solid red'
         }
       },
-        `WIDTH IS GREATED THAN 480PX: ${matches}`
+        `WIDTH IS GREATER THAN 480PX: ${matches}`
       )
     )
   )
@@ -42,7 +42,7 @@ storiesOf('Sensors/MediaSensor', module)
             border: '1px solid red'
           }
         },
-          `WIDTH IS GREATED THAN 480PX: ${matches}`
+          `WIDTH IS GREATER THAN 480PX: ${matches}`
         )
     })
   )

src/TouchSupportSensor/__story__/story.tsx

@@ -0,0 +1,51 @@
+import {createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {TouchSupportSensor} from '..';
+import ShowDocs from '../../ShowDocs'
+
+storiesOf('Sensors/TouchSupportSensor', module)
+  .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/TouchSupportSensor.md')}))
+  .add('Generic', () =>
+    <TouchSupportSensor>{({touchSupported}) =>
+      <div style={{
+        border: '1px solid tomato',
+        padding: 30
+      }}>
+        {touchSupported ? 'TOUCH SUPPORTED' : '...'}
+      </div>
+    }</TouchSupportSensor>
+  )
+  .add('Only render on touch devices', () =>
+    <TouchSupportSensor onlyTouch>{({touchSupported}) =>
+      <div style={{
+        border: '1px solid tomato',
+        padding: 30
+      }}>
+        {touchSupported ? 'TOUCH SUPPORTED' : '...'}
+        <div style={{
+          background: 'tomato',
+          color: 'white',
+          padding: 30
+        }}>
+          You won't see this on your desktop computer!
+        </div>
+      </div>
+    }</TouchSupportSensor>
+  )
+  .add('Only render on non-touch devices', () =>
+    <TouchSupportSensor onlyMouse>{({touchSupported}) =>
+      <div style={{
+        border: '1px solid tomato',
+        padding: 30
+      }}>
+        {touchSupported ? '...' : 'TOUCH NOT SUPPORTED'}
+        <div style={{
+          background: 'tomato',
+          color: 'white',
+          padding: 30
+        }}>
+          You won't see this on your touch screen devices!
+        </div>
+      </div>
+    }</TouchSupportSensor>
+  )

src/TouchSupportSensor/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TouchSupportSensor> returns expected default state 1`] = `
+Object {
+  "touchSupported": false,
+}
+`;

src/TouchSupportSensor/__tests__/index.test.tsx

@@ -0,0 +1,66 @@
+import { mount } from "enzyme";
+import { h } from "../../util";
+import { TouchSupportSensor } from "..";
+
+declare const jsdom;
+
+describe.only("<TouchSupportSensor>", () => {
+  beforeEach(() => {
+    jsdom.reconfigure({
+      windowTop: window,
+      url: "https://example.com/"
+    });
+  });
+
+  it("is a component", () => {
+    expect(TouchSupportSensor).toBeInstanceOf(Function);
+  });
+
+  it("renders without crashing", () => {
+    mount(<TouchSupportSensor>{() => null}</TouchSupportSensor>);
+  });
+
+  it("returns expected default state", () => {
+    mount(
+      <TouchSupportSensor>
+        {touchSupport => {
+          expect(touchSupport).toMatchSnapshot();
+
+          return null;
+        }}
+      </TouchSupportSensor>
+    );
+  });
+
+  it("renders nothing when onlyTouch is true and the device doesn't support touch", () => {
+    const component = mount(<TouchSupportSensor onlyTouch>(location) => <div /></TouchSupportSensor>)
+
+    expect(component.find('div')).toHaveLength(0)
+  })
+
+  it("renders nothing when onlyMouse is true and the device does support touch", () => {
+    window.ontouchstart = () => null
+
+    const component = mount(<TouchSupportSensor onlyMouse>(location) => <div /></TouchSupportSensor>)
+
+    expect(component.find('div')).toHaveLength(0)
+
+    delete window.ontouchstart
+  })
+
+  it("renders children when onlyTouch is true and the device does support touch", () => {
+    window.ontouchstart = () => null
+
+    const component = mount(<TouchSupportSensor onlyTouch>(location) => <div /></TouchSupportSensor>)
+
+    expect(component.find('div')).toHaveLength(1)
+
+    delete window.ontouchstart
+  })
+
+  it("renders children when onlyMouse is true and the device doesn't support touch", () => {
+    const component = mount(<TouchSupportSensor onlyMouse>(location) => <div /></TouchSupportSensor>)
+
+    expect(component.find('div')).toHaveLength(1)
+  })
+});

src/TouchSupportSensor/index.ts

@@ -0,0 +1,73 @@
+import * as React from "react";
+import renderProp from "../util/renderProp";
+import { IUniversalInterfaceProps } from "../typing";
+
+export interface DocumentTouchConstructor extends Document {
+  [key: string]: any;
+  new (): DocumentTouchConstructor;
+  readonly prototype: Document;
+}
+
+export interface TouchWindow extends Window {
+  DocumentTouch?: DocumentTouchConstructor;
+}
+
+let DocumentTouch: DocumentTouchConstructor;
+
+export interface ITouchSupportSensorState {
+  touchSupported: boolean;
+}
+
+export interface ITouchSupportSensorProps
+  extends IUniversalInterfaceProps<ITouchSupportSensorState> {
+  onlyTouch?: boolean;
+  onlyMouse?: boolean;
+}
+
+export const touchSupported = () => {
+  const prefixes = " -webkit- -moz- -o- -ms- ".split(" ");
+  // include the 'heartz' as a way to have a non matching MQ to help terminate the join
+  // https://git.io/vznFH
+  const query = ["(", prefixes.join("touch-enabled),("), "heartz", ")"].join(
+    ""
+  );
+
+  if (
+    "ontouchstart" in window ||
+    ((window as TouchWindow).DocumentTouch && document instanceof DocumentTouch)
+  ) {
+    return true;
+  }
+
+  // TypeScript seems to think "ontouchstart" will always be on window, causing incorrect type narrowing
+  return (window as Window).matchMedia(query).matches;
+};
+
+export class TouchSupportSensor extends React.Component<
+  ITouchSupportSensorProps,
+  ITouchSupportSensorState
+> {
+  constructor(props, context) {
+    super(props, context);
+
+    if (props.onlyMouse && props.onlyTouch) {
+      console.warn(
+        "You're using both `onlyMouse` and `onlyTouch` on the TouchSupportSensor component. This is unsupported and may lead to unexpected results."
+      );
+    }
+
+    this.state = { touchSupported: touchSupported() };
+  }
+
+  render() {
+    if (this.props.onlyMouse && this.state.touchSupported) {
+      return null;
+    }
+
+    if (this.props.onlyTouch && !this.state.touchSupported) {
+      return null;
+    }
+
+    return renderProp(this.props, this.state);
+  }
+}

src/__tests__/setup.js

@@ -7,4 +7,5 @@ configure({
 
 if (typeof window === 'object') {
   global.requestAnimationFrame = window.requestAnimationFrame = (callback) => setTimeout(callback, 17);
+  global.matchMedia = window.matchMedia = (() => { return { matches: false, addListener: () => {}, removeListener: () => {}, }; });
 }