feat(Switch): Implement

2018-09-24 19:03:36 -05:00 · 2018-09-24 19:03:36 -05:00 · ae7a882188
parent a49e590e7c
commit ae7a882188
6 changed files with 356 additions and 5 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/react/features/base/react/components/native/Switch.js
+++ b/react/features/base/react/components/native/Switch.js
@ -0,0 +1,3 @@
+// @flow
+
+export { Switch as default } from 'react-native';
--- a/react/features/base/react/components/native/index.js
+++ b/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 SideBar } from './SideBar';
-export { default as Text } from './Text';
 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 TintedView } from './TintedView';
--- a/react/features/base/react/components/web/Switch.js
+++ b/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>
+        );
+    }
+}
--- a/react/features/base/react/components/web/index.js
+++ b/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';