[added] TogglableProperty

Summary:
Used to track a simple boolean state, like whether or not a panel is open.  `onValue` and `offValue` may become properties or streams, to make it easier to do things like this:

```
createTogglableProperty({
  onValue: constantProperty(0),
  offValue: viewportBounds.y().offset(-56)
})
```

and have the property respond accordingly.

Reviewers: O3 Material JavaScript platform reviewers, #material_motion, O2 Material Motion, featherless

Reviewed By: #material_motion, O2 Material Motion, featherless

Subscribers: featherless

Tags: #material_motion

Differential Revision: http://codereview.cc/D2492

packages/demos-react/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "jsxstyle": "1.0.2",
+    "material-motion-experimental-addons": "0.0.0",
     "material-motion-runtime": "1.0.0",
     "material-motion-springs-adaptor-rebound": "0.0.0",
     "material-motion-streams": "0.0.0",

packages/demos-react/src/bottom-sheet/components/BottomSheetMain.tsx

@@ -23,6 +23,10 @@ import {
   curry,
 } from 'jsxstyle';
 
+import {
+  TogglableProperty,
+} from 'material-motion-experimental-addons';
+
 // How the contents of a bottom sheet transition between states vary from app-
 // to-app.  For instance, an app could choose any of these:
 //
@@ -46,13 +50,17 @@ import {
 // when the user crosses a threshold.
 
 class BottomSheetMain extends React.Component {
-  model = {
+  _isOpen = new TogglableProperty();
+
+  _model = {
     title: 'A really interesting talk',
     artist: 'Britta Holt',
     avatar: '/images/album-art.png',
   };
 
   render() {
+    this._isOpen.subscribe(console.log);
+
     return (
       <Col
         backgroundColor = '#ECECEC'
@@ -84,15 +92,17 @@ class BottomSheetMain extends React.Component {
             position = 'absolute'
             top = { 0 }
             zIndex = { -1 }
-            model = { this.model }
+            model = { this._model }
           />
 
           <CollapsedBottomSheetContents
-            model = { this.model }
+            model = { this._model }
             cursor = 'pointer'
+            onTap = { this._isOpen.toggle }
           />
           <ExpandedBottomSheetContents
-            model = { this.model }
+            model = { this._model }
+            onCloseTap = { this._isOpen.turnOff }
           />
         </Col>
       </Col>
@@ -200,14 +210,16 @@ function CollapsedBottomSheetContents({
   );
 }
 
-function ExpandedBottomSheetContents({ model }) {
+function ExpandedBottomSheetContents({ model, onCloseTap }) {
   return (
     <Col
       width = '100%'
       height = '100%'
       justifyContent = 'space-between'
     >
-      <BottomSheetAppBar />
+      <BottomSheetAppBar
+        onCloseTap = { onCloseTap }
+      />
 
       <PlaybackControls
         model = { model }

packages/experimental-addons/package.json

@@ -12,6 +12,8 @@
     "build": "yarn run clean; $( yarn bin )/tsc"
   },
   "dependencies": {
+    "indefinite-observable": "0.3.0",
+    "material-motion-streams": "0.0.0",
     "tslib": "^1.2.0"
   },
   "devDependencies": {

packages/experimental-addons/src/TogglableProperty.ts

@@ -14,7 +14,50 @@
  *  under the License.
  */
 
-export function TogglableProperty() {
+import {
+  Observable,
+  Observer,
+} from 'indefinite-observable';
 
+import {
+  ReactiveProperty,
+  ScopedReadable,
+  ScopedWritable,
+} from 'material-motion-streams';
+
+export class TogglableProperty<T> implements Observable<T>, ScopedReadable<T>, ScopedWritable<T> {
+  _property = new ReactiveProperty<T>();
+  _isOn = false;
+  _onValue: T;
+  _offValue: T;
+
+  constructor({ onValue, offValue }: { onValue: T, offValue: T } = { onValue: true, offValue: false }) {
+    this._onValue = onValue;
+    this._offValue = offValue;
+  }
+
+  turnOn = (): void => {
+    this._isOn = true;
+    this._property.write(this._onValue);
+  }
+
+  turnOff = (): void => {
+    this._isOn = false;
+    this._property.write(this._offValue);
+  }
+
+  toggle = (): void => {
+    this._isOn = !this._isOn;
+
+    this._property.write(
+      this._isOn
+        ? this._onValue
+        : this._offValue
+    );
+  }
+
+  read = this._property.read;
+  write = this._property.write;
+  subscribe = this._property.subscribe;
 }
 export default TogglableProperty;