From ae7a8821885c1f1e2198c4e4144995c62c080aa1 Mon Sep 17 00:00:00 2001 From: hristoterezov Date: Mon, 24 Sep 2018 19:03:36 -0500 Subject: [PATCH] feat(Switch): Implement --- package-lock.json | 289 +++++++++++++++++- package.json | 1 + .../base/react/components/native/Switch.js | 3 + .../base/react/components/native/index.js | 5 +- .../base/react/components/web/Switch.js | 62 ++++ .../base/react/components/web/index.js | 1 + 6 files changed, 356 insertions(+), 5 deletions(-) create mode 100644 react/features/base/react/components/native/Switch.js create mode 100644 react/features/base/react/components/web/Switch.js diff --git a/package-lock.json b/package-lock.json index bb7d063e7..e0e02cb47 100644 --- 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", diff --git a/package.json b/package.json index d66d8cc41..9e7f26cb1 100644 --- 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", diff --git a/react/features/base/react/components/native/Switch.js b/react/features/base/react/components/native/Switch.js new file mode 100644 index 000000000..ee32d4bc3 --- /dev/null +++ b/react/features/base/react/components/native/Switch.js @@ -0,0 +1,3 @@ +// @flow + +export { Switch as default } from 'react-native'; diff --git a/react/features/base/react/components/native/index.js b/react/features/base/react/components/native/index.js index d0df15f25..1f570ef86 100644 --- 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'; diff --git a/react/features/base/react/components/web/Switch.js b/react/features/base/react/components/web/Switch.js new file mode 100644 index 000000000..322925a11 --- /dev/null +++ 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 { + /** + * 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 ( +
+ +
+ ); + } +} diff --git a/react/features/base/react/components/web/index.js b/react/features/base/react/components/web/index.js index 90e892131..e9d62334d 100644 --- 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';