Merge pull request #66 from vankeisb/feature/eventlisteners-with-options

eventlisteners with options

Author: vankeisb

samples/src/App.tsx

@@ -58,6 +58,7 @@ import * as Sful from './Samples/StatefulInView';
 import * as Rest from './Samples/Rest';
 import * as TimeSample from './Samples/TimeSample';
 import * as EventsSample from './Samples/EventsSample';
+import * as SelectSample from './Samples/SelectSample';
 import * as PortsSample from './Samples/PortsSample';
 import { appSamplePorts } from "./Samples/PortsSample";
 
@@ -166,6 +167,7 @@ interface Samples {
   readonly rest: Rest.Model;
   readonly time: TimeSample.Model;
   readonly events: EventsSample.Model;
+  readonly select: SelectSample.Model;
   readonly ports: PortsSample.Model;
 }
 
@@ -180,6 +182,7 @@ type Msg =
   | { type: 'rest'; child: Rest.Msg }
   | { type: 'timeSample'; child: TimeSample.Msg }
   | { type: 'eventsSample'; child: EventsSample.Msg }
+  | { type: 'selectSample'; child: SelectSample.Msg }
   | { type: 'portsSample'; child: PortsSample.Msg }
   | { type: 'urlChange'; location: Location }
   | { type: 'newUrl'; url: string }
@@ -199,6 +202,7 @@ function initSamples(): [Model, Cmd<Msg>] {
   const rest = Rest.init();
   const time = TimeSample.init();
   const events = EventsSample.init();
+  const select = SelectSample.init();
   const ports = PortsSample.init();
   return [
     {
@@ -214,6 +218,7 @@ function initSamples(): [Model, Cmd<Msg>] {
         rest: rest[0],
         time: time[0],
         events: events[0],
+        select: select[0],
         ports: ports[0],
       },
     },
@@ -228,6 +233,7 @@ function initSamples(): [Model, Cmd<Msg>] {
       rest[1].map(mapRest),
       time[1].map(mapTimeSample),
       events[1].map(mapEventsSample),
+      select[1].map(mapSelectSample),
       ports[1].map(mapPortsSample),
     ]),
   ];
@@ -350,6 +356,13 @@ function mapEventsSample(m: EventsSample.Msg): Msg {
   };
 }
 
+function mapSelectSample(m: SelectSample.Msg): Msg {
+  return {
+    type: 'selectSample',
+    child: m,
+  };
+}
+
 function mapPortsSample(m: PortsSample.Msg): Msg {
   return {
     type: 'portsSample',
@@ -576,6 +589,8 @@ function viewSamples(dispatch: Dispatcher<Msg>, samples: Samples) {
       {TimeSample.view(map(dispatch, mapTimeSample), samples.time)}
       <h2>Events</h2>
       {EventsSample.view(map(dispatch, mapEventsSample), samples.events)}
+      <h2>Select</h2>
+      {SelectSample.view(map(dispatch, mapSelectSample), samples.select)}
       <h2>Ports</h2>
       {PortsSample.view(map(dispatch, mapPortsSample), samples.ports)}
       <button onClick={() => {
@@ -657,6 +672,12 @@ function update(msg: Msg, model: Model): [Model, Cmd<Msg>] {
         return [{ ...s, events: macEvents[0] }, macEvents[1].map(mapEventsSample)];
       });
 
+    case 'selectSample':
+      return mapSample((s: Samples) => {
+        const macSelect = SelectSample.update(msg.child, s.select);
+        return [{ ...s, select: macSelect[0] }, macSelect[1].map(mapSelectSample)];
+      });
+
     case 'urlChange':
       return init(msg.location);
 
@@ -672,13 +693,14 @@ function update(msg: Msg, model: Model): [Model, Cmd<Msg>] {
 function subscriptions(model: Model): Sub<Msg> {
   switch (model.tag) {
     case 'samples':
-      const { counter, parentChild, raf, time, events } = model.samples;
+      const { counter, parentChild, raf, time, events, select } = model.samples;
       return Sub.batch([
         Counter.subscriptions(counter).map(mapCounter),
         ParentChild.subscriptions(parentChild).map(mapParentChild),
         Raf.subscriptions(raf).map(mapRaf),
         TimeSample.subscriptions(time).map(mapTimeSample),
         EventsSample.subscriptions(events).map(mapEventsSample),
+        SelectSample.subscriptions(select).map(mapSelectSample),
         PortsSample.subscriptions().map(mapPortsSample),
       ]);
     default:

samples/src/Samples/SelectSample.tsx

@@ -0,0 +1,105 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2019 Rémi Van Keisbelck
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ *
+ */
+
+import * as React from 'react';
+import {Cmd, Dispatcher, just, Maybe, noCmd, nothing, Sub} from 'tea-cup-core';
+import {DocumentEvents} from "react-tea-cup";
+
+export type Model = {
+    selected: Maybe<string>
+    mouseUpCounter: number
+};
+
+export type Msg = {
+        type: 'selected',
+        value: string
+    }
+    | { type: 'mouse-up' };
+
+export function init(): [Model, Cmd<Msg>] {
+    return noCmd({
+        selected: nothing,
+        mouseUpCounter: 0
+    });
+}
+
+export function view(dispatch: Dispatcher<Msg>, model: Model) {
+    const value = model.selected.withDefault("select me");
+    console.log("rendering value", value)
+    return (
+        <div className="select">
+            <p><em>(Use me with Firefox, too.)</em></p>
+            <select value={value}
+                    onChange={e => {
+                        console.log("FW onChange", e.target.value)
+                        dispatch({type: 'selected', value: e.target.value});
+                    }}
+            >
+                <option value={"select me"}>Select me...</option>
+                {Array.of(1, 2, 3, 4, 5)
+                    .map(i =>
+                        <option
+                            key={i}
+                            value={i}>
+                            {`Option ${i}`}
+                        </option>)
+                }
+            </select>
+            <br/>
+            <p>{`Saw ${model.mouseUpCounter} mouse up events.`}</p>
+        </div>
+    );
+}
+
+export function update(msg: Msg, model: Model): [Model, Cmd<Msg>] {
+    switch (msg.type) {
+        case 'selected': {
+            const model1: Model = {
+                ...model,
+                selected: msg.value !== 'select me' ? just(msg.value) : nothing
+            };
+            return [model1, Cmd.none()];
+        }
+        case "mouse-up": {
+            const model1: Model = {
+                ...model,
+                mouseUpCounter: model.mouseUpCounter + 1
+            };
+            return [model1, Cmd.none()];
+        }
+    }
+}
+
+const documentEvents = new DocumentEvents<Msg>();
+
+export function subscriptions(model: Model): Sub<Msg> {
+    return Sub.batch([
+        documentEvents.on('mouseup', (e: MouseEvent) => (
+            {
+                type: 'mouse-up',
+            } as Msg
+        ), {passive: true, capture: false}),
+    ]);
+}

tea-cup/src/TeaCup/DocumentEvents.test.tsx

@@ -51,30 +51,30 @@ describe('DocumentEvents Test', () => {
     expect(addSpy.mock.calls.length).toBe(1);
   });
 
-  it('second sub adds no listener', () => {
+  it('second sub adds another listener', () => {
     const sub = documentEvents.on('click', (e) => 'clicked');
     sub.init(() => ({}));
 
     expect(addSpy.mock.calls.length).toBe(1);
 
-    const sub2 = documentEvents.on('click', (e) => 'clicked2');
+    const sub2 = documentEvents.on('click', (e) => 'clicked2', true);
     sub2.init(() => ({}));
 
-    expect(addSpy.mock.calls.length).toBe(1);
+    expect(addSpy.mock.calls.length).toBe(2);
   });
 
-  it('last sub removes listener', () => {
+  it('all subs remove listeners', () => {
     const sub = documentEvents.on('click', (e) => 'clicked');
     sub.init(() => ({}));
 
-    const sub2 = documentEvents.on('click', (e) => 'clicked2');
+    const sub2 = documentEvents.on('click', (e) => 'clicked2', { capture: true });
     sub2.init(() => ({}));
 
     sub.release();
-    expect(removeSpy.mock.calls.length).toBe(0);
+    expect(removeSpy.mock.calls.length).toBe(1);
 
     sub2.release();
-    expect(removeSpy.mock.calls.length).toBe(1);
+    expect(removeSpy.mock.calls.length).toBe(2);
   });
 
   it('sub receives event from listener', () => {
@@ -93,23 +93,30 @@ describe('DocumentEvents Test', () => {
     expect(msgs).toEqual(['clicked1']);
   });
 
-  it('two subs receive events from listener', () => {
+  it('each sub receive events its listener', () => {
     const msgs: string[] = [];
     const collectMsgs = (msg: string): void => {
       msgs.push(msg);
     };
+    const msgs2: string[] = [];
+    const collectMsgs2 = (msg: string): void => {
+      msgs2.push(msg);
+    };
 
-    const sub = documentEvents.on('click', (e) => 'clicked1');
+    const sub = documentEvents.on('click', (e) => 'clicked');
     const sub2 = documentEvents.on('click', (e) => 'clicked2');
 
     sub.init(collectMsgs);
-    sub2.init(collectMsgs);
+    sub2.init(collectMsgs2);
 
-    expect(addSpy.mock.calls.length).toBe(1);
+    expect(addSpy.mock.calls.length).toBe(2);
     const listener = addSpy.mock.calls[0][1];
+    const listener2 = addSpy.mock.calls[1][1];
 
     listener({ event: 'event' });
-    expect(msgs).toEqual(['clicked1', 'clicked2']);
+    expect(msgs).toEqual(['clicked']);
+    listener2({ event: 'event' });
+    expect(msgs2).toEqual(['clicked2']);
   });
 
   it('sub stops receiving events from listener', () => {
@@ -132,16 +139,4 @@ describe('DocumentEvents Test', () => {
     expect(msgs).toEqual(['clicked1', 'clicked1']);
   });
 
-  it('release removes all listeners', () => {
-    const sub = documentEvents.on('click', (e) => 'clicked1');
-    sub.init(() => ({}));
-    const sub2 = documentEvents.on('click', (e) => 'clicked2');
-    sub2.init(() => ({}));
-    const sub3 = documentEvents.on('mousemove', (e) => 'moved3');
-    sub3.init(() => ({}));
-    expect(addSpy.mock.calls.length).toBe(2);
-
-    documentEvents.release();
-    expect(removeSpy.mock.calls.length).toBe(2);
-  });
 });