feat(Switch): Implement

package-lock.json

@@ -20,6 +20,52 @@
         "@atlaskit/analytics-next": "^3.0.6",
         "@atlaskit/theme": "^6.0.1",
         "@atlaskit/tooltip": "^12.0.10"
+      },
+      "dependencies": {
+        "@atlaskit/theme": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-6.0.3.tgz",
+          "integrity": "sha512-s90qPe3S0fXtf1xHxH4uhT2IIbvGkMWLp1HW66rv0c8VSBj0f5VaJW+xVs7BLii5rN1QnOtsYS3ykx307mZOJQ==",
+          "requires": {
+            "prop-types": "^15.5.10"
+          }
+        },
+        "@atlaskit/tooltip": {
+          "version": "12.1.0",
+          "resolved": "https://registry.npmjs.org/@atlaskit/tooltip/-/tooltip-12.1.0.tgz",
+          "integrity": "sha512-GrCLvEgfRaeCCwcfTAP+BKIK2/rGCWXshfbLEKnza+C3uEJW8VAn8NAob0R1h4WE1vjmdLTgTtFjek3rK1HgSw==",
+          "requires": {
+            "@atlaskit/analytics-next": "^3.0.6",
+            "@atlaskit/portal": "^0.0.9",
+            "@atlaskit/theme": "^6.0.2",
+            "babel-runtime": "^6.26.0",
+            "flushable": "^1.0.0",
+            "react-node-resolver": "^1.0.1",
+            "react-transition-group": "^2.2.1"
+          }
+        },
+        "react-transition-group": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.4.0.tgz",
+          "integrity": "sha512-Xv5d55NkJUxUzLCImGSanK8Cl/30sgpOEMGc5m86t8+kZwrPxPCPcFqyx83kkr+5Lz5gs6djuvE5By+gce+VjA==",
+          "requires": {
+            "dom-helpers": "^3.3.1",
+            "loose-envify": "^1.3.1",
+            "prop-types": "^15.6.2",
+            "react-lifecycles-compat": "^3.0.4"
+          },
+          "dependencies": {
+            "prop-types": {
+              "version": "15.6.2",
+              "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
+              "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+              "requires": {
+                "loose-envify": "^1.3.1",
+                "object-assign": "^4.1.1"
+              }
+            }
+          }
+        }
       }
     },
     "@atlaskit/blanket": {
@@ -40,6 +86,48 @@
         "@atlaskit/spinner": "9.0.8",
         "@atlaskit/theme": "^6.0.2",
         "babel-runtime": "^6.26.0"
+      },
+      "dependencies": {
+        "@atlaskit/spinner": {
+          "version": "9.0.8",
+          "resolved": "https://registry.npmjs.org/@atlaskit/spinner/-/spinner-9.0.8.tgz",
+          "integrity": "sha512-jYv8VSuXcvppONSquL7cmHQMR7WBS8VDB0kpWQPVJngrGfzG691kdW32C6q6A1bzNB88QpEIQxcme7bLlM5/hg==",
+          "requires": {
+            "@atlaskit/theme": "^6.0.2",
+            "babel-runtime": "^6.26.0",
+            "react-transition-group": "^2.2.1"
+          }
+        },
+        "@atlaskit/theme": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-6.0.3.tgz",
+          "integrity": "sha512-s90qPe3S0fXtf1xHxH4uhT2IIbvGkMWLp1HW66rv0c8VSBj0f5VaJW+xVs7BLii5rN1QnOtsYS3ykx307mZOJQ==",
+          "requires": {
+            "prop-types": "^15.5.10"
+          }
+        },
+        "react-transition-group": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.4.0.tgz",
+          "integrity": "sha512-Xv5d55NkJUxUzLCImGSanK8Cl/30sgpOEMGc5m86t8+kZwrPxPCPcFqyx83kkr+5Lz5gs6djuvE5By+gce+VjA==",
+          "requires": {
+            "dom-helpers": "^3.3.1",
+            "loose-envify": "^1.3.1",
+            "prop-types": "^15.6.2",
+            "react-lifecycles-compat": "^3.0.4"
+          },
+          "dependencies": {
+            "prop-types": {
+              "version": "15.6.2",
+              "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
+              "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+              "requires": {
+                "loose-envify": "^1.3.1",
+                "object-assign": "^4.1.1"
+              }
+            }
+          }
+        }
       }
     },
     "@atlaskit/checkbox": {
@@ -52,6 +140,16 @@
         "@atlaskit/theme": "^6.0.2",
         "babel-runtime": "^6.26.0",
         "prop-types": "^15.5.10"
+      },
+      "dependencies": {
+        "@atlaskit/theme": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-6.0.3.tgz",
+          "integrity": "sha512-s90qPe3S0fXtf1xHxH4uhT2IIbvGkMWLp1HW66rv0c8VSBj0f5VaJW+xVs7BLii5rN1QnOtsYS3ykx307mZOJQ==",
+          "requires": {
+            "prop-types": "^15.5.10"
+          }
+        }
       }
     },
     "@atlaskit/dropdown-menu": {
@@ -68,6 +166,16 @@
         "array-find": "^1.0.0",
         "prop-types": "^15.5.10",
         "uuid": "^3.1.0"
+      },
+      "dependencies": {
+        "@atlaskit/theme": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-6.0.3.tgz",
+          "integrity": "sha512-s90qPe3S0fXtf1xHxH4uhT2IIbvGkMWLp1HW66rv0c8VSBj0f5VaJW+xVs7BLii5rN1QnOtsYS3ykx307mZOJQ==",
+          "requires": {
+            "prop-types": "^15.5.10"
+          }
+        }
       }
     },
     "@atlaskit/droplist": {
@@ -86,6 +194,62 @@
         "classnames": "^2.2.5",
         "keycode": "^2.1.7",
         "prop-types": "^15.5.10"
+      },
+      "dependencies": {
+        "@atlaskit/spinner": {
+          "version": "9.0.9",
+          "resolved": "https://registry.npmjs.org/@atlaskit/spinner/-/spinner-9.0.9.tgz",
+          "integrity": "sha512-hoaed3P0sxV2VNdx1elo5SQZ5I4RYRlJTVEJ8NUt/BGrIYtJj3KIxbjgOYUQmKqZs5lWWYnRtHZTIyzZA4GqIg==",
+          "requires": {
+            "@atlaskit/theme": "^6.0.3",
+            "babel-runtime": "^6.26.0",
+            "react-transition-group": "^2.2.1"
+          }
+        },
+        "@atlaskit/theme": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-6.0.3.tgz",
+          "integrity": "sha512-s90qPe3S0fXtf1xHxH4uhT2IIbvGkMWLp1HW66rv0c8VSBj0f5VaJW+xVs7BLii5rN1QnOtsYS3ykx307mZOJQ==",
+          "requires": {
+            "prop-types": "^15.5.10"
+          }
+        },
+        "@atlaskit/tooltip": {
+          "version": "12.1.0",
+          "resolved": "https://registry.npmjs.org/@atlaskit/tooltip/-/tooltip-12.1.0.tgz",
+          "integrity": "sha512-GrCLvEgfRaeCCwcfTAP+BKIK2/rGCWXshfbLEKnza+C3uEJW8VAn8NAob0R1h4WE1vjmdLTgTtFjek3rK1HgSw==",
+          "requires": {
+            "@atlaskit/analytics-next": "^3.0.6",
+            "@atlaskit/portal": "^0.0.9",
+            "@atlaskit/theme": "^6.0.2",
+            "babel-runtime": "^6.26.0",
+            "flushable": "^1.0.0",
+            "react-node-resolver": "^1.0.1",
+            "react-transition-group": "^2.2.1"
+          }
+        },
+        "react-transition-group": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.4.0.tgz",
+          "integrity": "sha512-Xv5d55NkJUxUzLCImGSanK8Cl/30sgpOEMGc5m86t8+kZwrPxPCPcFqyx83kkr+5Lz5gs6djuvE5By+gce+VjA==",
+          "requires": {
+            "dom-helpers": "^3.3.1",
+            "loose-envify": "^1.3.1",
+            "prop-types": "^15.6.2",
+            "react-lifecycles-compat": "^3.0.4"
+          },
+          "dependencies": {
+            "prop-types": {
+              "version": "15.6.2",
+              "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
+              "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+              "requires": {
+                "loose-envify": "^1.3.1",
+                "object-assign": "^4.1.1"
+              }
+            }
+          }
+        }
       }
     },
     "@atlaskit/field-base": {
@@ -110,6 +274,46 @@
             "@atlaskit/theme": "^6.0.2",
             "react-node-resolver": "^1.0.1"
           }
+        },
+        "@atlaskit/spinner": {
+          "version": "9.0.9",
+          "resolved": "https://registry.npmjs.org/@atlaskit/spinner/-/spinner-9.0.9.tgz",
+          "integrity": "sha512-hoaed3P0sxV2VNdx1elo5SQZ5I4RYRlJTVEJ8NUt/BGrIYtJj3KIxbjgOYUQmKqZs5lWWYnRtHZTIyzZA4GqIg==",
+          "requires": {
+            "@atlaskit/theme": "^6.0.3",
+            "babel-runtime": "^6.26.0",
+            "react-transition-group": "^2.2.1"
+          }
+        },
+        "@atlaskit/theme": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-6.0.3.tgz",
+          "integrity": "sha512-s90qPe3S0fXtf1xHxH4uhT2IIbvGkMWLp1HW66rv0c8VSBj0f5VaJW+xVs7BLii5rN1QnOtsYS3ykx307mZOJQ==",
+          "requires": {
+            "prop-types": "^15.5.10"
+          }
+        },
+        "react-transition-group": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.4.0.tgz",
+          "integrity": "sha512-Xv5d55NkJUxUzLCImGSanK8Cl/30sgpOEMGc5m86t8+kZwrPxPCPcFqyx83kkr+5Lz5gs6djuvE5By+gce+VjA==",
+          "requires": {
+            "dom-helpers": "^3.3.1",
+            "loose-envify": "^1.3.1",
+            "prop-types": "^15.6.2",
+            "react-lifecycles-compat": "^3.0.4"
+          },
+          "dependencies": {
+            "prop-types": {
+              "version": "15.6.2",
+              "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
+              "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+              "requires": {
+                "loose-envify": "^1.3.1",
+                "object-assign": "^4.1.1"
+              }
+            }
+          }
         }
       }
     },
@@ -121,6 +325,16 @@
         "@atlaskit/analytics-next": "^3.0.6",
         "@atlaskit/field-base": "^11.0.7",
         "@atlaskit/theme": "^6.0.2"
+      },
+      "dependencies": {
+        "@atlaskit/theme": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-6.0.3.tgz",
+          "integrity": "sha512-s90qPe3S0fXtf1xHxH4uhT2IIbvGkMWLp1HW66rv0c8VSBj0f5VaJW+xVs7BLii5rN1QnOtsYS3ykx307mZOJQ==",
+          "requires": {
+            "prop-types": "^15.5.10"
+          }
+        }
       }
     },
     "@atlaskit/field-text-area": {
@@ -133,6 +347,16 @@
         "@atlaskit/theme": "^6.0.2",
         "babel-runtime": "^6.26.0",
         "prop-types": "^15.5.10"
+      },
+      "dependencies": {
+        "@atlaskit/theme": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-6.0.3.tgz",
+          "integrity": "sha512-s90qPe3S0fXtf1xHxH4uhT2IIbvGkMWLp1HW66rv0c8VSBj0f5VaJW+xVs7BLii5rN1QnOtsYS3ykx307mZOJQ==",
+          "requires": {
+            "prop-types": "^15.5.10"
+          }
+        }
       }
     },
     "@atlaskit/flag": {
@@ -203,6 +427,16 @@
         "@atlaskit/theme": "^6.0.2",
         "babel-runtime": "^6.26.0",
         "uuid": "^3.1.0"
+      },
+      "dependencies": {
+        "@atlaskit/theme": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-6.0.3.tgz",
+          "integrity": "sha512-s90qPe3S0fXtf1xHxH4uhT2IIbvGkMWLp1HW66rv0c8VSBj0f5VaJW+xVs7BLii5rN1QnOtsYS3ykx307mZOJQ==",
+          "requires": {
+            "prop-types": "^15.5.10"
+          }
+        }
       }
     },
     "@atlaskit/inline-dialog": {
@@ -246,9 +480,9 @@
       },
       "dependencies": {
         "@atlaskit/inline-dialog": {
-          "version": "9.0.4",
-          "resolved": "https://registry.npmjs.org/@atlaskit/inline-dialog/-/inline-dialog-9.0.4.tgz",
-          "integrity": "sha512-MZ3uWZBIhLK0Bv8cAsKGXFXbAHsWqXiq5sHmzJbUHzK2Q/fw1naa40ER0qufSHwqOaL2A/17mSZInMuFTzE5mw==",
+          "version": "9.0.5",
+          "resolved": "https://registry.npmjs.org/@atlaskit/inline-dialog/-/inline-dialog-9.0.5.tgz",
+          "integrity": "sha512-gX/ouNLvIXCDlgqIdJka2KRgqE55yfffHg+Vu7foQCQiJDgofXhQGydDIbzV0yqR+0L7d9ze8SSYGYT33XtA8g==",
           "requires": {
             "@atlaskit/analytics-next": "^3.0.6",
             "@atlaskit/popper": "^0.2.3",
@@ -267,6 +501,16 @@
         "prop-types": "^15.5.10",
         "react-addons-text-content": "^0.0.4",
         "uuid": "^3.1.0"
+      },
+      "dependencies": {
+        "@atlaskit/theme": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-6.0.3.tgz",
+          "integrity": "sha512-s90qPe3S0fXtf1xHxH4uhT2IIbvGkMWLp1HW66rv0c8VSBj0f5VaJW+xVs7BLii5rN1QnOtsYS3ykx307mZOJQ==",
+          "requires": {
+            "prop-types": "^15.5.10"
+          }
+        }
       }
     },
     "@atlaskit/layer": {
@@ -473,6 +717,45 @@
         "prop-types": "^15.5.10"
       }
     },
+    "@atlaskit/toggle": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/@atlaskit/toggle/-/toggle-5.0.8.tgz",
+      "integrity": "sha512-O+vZXljTEuxHGri33X3AqN5RPSqin2Tztt3y1oWIOSa4j7enNIf+lZ9mjiRmzgeEhJ8F3PGnmFBkJCuZuofinA==",
+      "requires": {
+        "@atlaskit/analytics-next": "^3.0.6",
+        "@atlaskit/icon": "^13.6.1",
+        "@atlaskit/theme": "^6.0.2",
+        "uuid": "^3.1.0"
+      },
+      "dependencies": {
+        "@atlaskit/analytics-next": {
+          "version": "3.0.7",
+          "resolved": "https://registry.npmjs.org/@atlaskit/analytics-next/-/analytics-next-3.0.7.tgz",
+          "integrity": "sha512-osUW2nntOjVKvJBQx2JE21cZ5H13mk8drQkSNw1KJWhV8bDIjZLuDBGqUI6kKbE+M0dGZP4se8YcwILcx1Vdaw==",
+          "requires": {
+            "prop-types": "^15.5.10"
+          }
+        },
+        "@atlaskit/icon": {
+          "version": "13.8.0",
+          "resolved": "https://registry.npmjs.org/@atlaskit/icon/-/icon-13.8.0.tgz",
+          "integrity": "sha512-uHm/g7oNyX+KcWFCBS3JtZyZdRxUL4BP8jkotUdRYpVepV6RoG3NcEgRiPJgTnP1BWiWyIAiJiNABT+DyTQuFQ==",
+          "requires": {
+            "@atlaskit/theme": "^6.0.2",
+            "babel-runtime": "^6.26.0",
+            "uuid": "^3.1.0"
+          }
+        },
+        "@atlaskit/theme": {
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-6.0.2.tgz",
+          "integrity": "sha512-GUnbTuxxcRaSubEFJJI6hWKwfCI6t1NKv1dVKCfIPhFdj/wBuyn/2rr8TKjwNRdhGHfY1kNq27fTX9Xt/sZ2QA==",
+          "requires": {
+            "prop-types": "^15.5.10"
+          }
+        }
+      }
+    },
     "@atlaskit/tooltip": {
       "version": "12.0.14",
       "resolved": "https://registry.npmjs.org/@atlaskit/tooltip/-/tooltip-12.0.14.tgz",

package.json

@@ -32,6 +32,7 @@
     "@atlaskit/spinner": "9.0.8",
     "@atlaskit/tabs": "8.0.8",
     "@atlaskit/theme": "6.0.2",
+    "@atlaskit/toggle": "5.0.8",
     "@atlaskit/tooltip": "12.0.14",
     "@microsoft/microsoft-graph-client": "1.1.0",
     "@webcomponents/url": "0.7.1",

react/features/base/react/components/native/Switch.js

@@ -0,0 +1,3 @@
+// @flow
+
+export { Switch as default } from 'react-native';

react/features/base/react/components/native/index.js

@@ -10,7 +10,8 @@ export { default as NavigateSectionListSectionHeader }
     from './NavigateSectionListSectionHeader';
 export { default as PagedList } from './PagedList';
 export { default as Pressable } from './Pressable';
+export { default as SectionList } from './SectionList';
 export { default as SideBar } from './SideBar';
+export { default as Switch } from './Switch';
 export { default as Text } from './Text';
-export { default as SectionList } from './SectionList';
 export { default as TintedView } from './TintedView';

react/features/base/react/components/web/Switch.js

@@ -0,0 +1,62 @@
+/* @flow */
+
+import { ToggleStateless } from '@atlaskit/toggle';
+import React, { Component } from 'react';
+
+type Props = {
+
+    /**
+     * CSS class name.
+     */
+    className: string,
+
+    /**
+     * Indicates whether the switch is disabled or not.
+     */
+    disabled: boolean,
+
+    /**
+     * Handler called when the user presses the switch.
+     */
+    onValueChange: Function,
+
+    /**
+     * The current value.
+     */
+    value: boolean
+};
+
+/**
+ * Renders a boolean input.
+ */
+export default class Switch extends Component<Props> {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const {
+            className,
+            disabled,
+            onValueChange,
+            value,
+            ...props
+        } = this.props;
+
+        // TODO: onChange will be called with parameter Event. It will be good
+        // if we translate it to calling the onValueChange with the value as a
+        // parameter to match the native implementation.
+
+        return (
+            <div className = { className }>
+                <ToggleStateless
+                    isChecked = { value }
+                    isDisabled = { disabled }
+                    onChange = { onValueChange }
+                    { ...props } />
+            </div>
+        );
+    }
+}

react/features/base/react/components/web/index.js

@@ -8,5 +8,6 @@ export { default as NavigateSectionListItem } from
 export { default as NavigateSectionListSectionHeader }
     from './NavigateSectionListSectionHeader';
 export { default as SectionList } from './SectionList';
+export { default as Switch } from './Switch';
 export { default as Text } from './Text';
 export { default as Watermarks } from './Watermarks';