From 1bfeae8fb3d5f408c973decebd5ca1618f624e9d Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Mon, 6 Apr 2020 14:12:10 +0200 Subject: [PATCH] add CheckBox page back to the sidebar, add Snack example (#1786) * add CheckBox page back to the sidebar, add Snack example * add deprecation notice to Checkbox, add deprecated version of the page to 0.61 docs --- docs/checkbox.md | 65 +++++++--- website/i18n/en.json | 5 +- .../versioned_docs/version-0.61/checkbox.md | 112 ++++++++++++++++++ .../versioned_docs/version-0.62/checkbox.md | 65 +++++++--- .../version-0.61-sidebars.json | 1 + 5 files changed, 219 insertions(+), 29 deletions(-) create mode 100644 website/versioned_docs/version-0.61/checkbox.md diff --git a/docs/checkbox.md b/docs/checkbox.md index 5377c485298..f3835a51c86 100644 --- a/docs/checkbox.md +++ b/docs/checkbox.md @@ -1,23 +1,56 @@ --- id: checkbox -title: CheckBox +title: 🚧 CheckBox --- +> **Deprecated.** Use [@react-native-community/checkbox](https://github.com/react-native-community/react-native-checkbox) instead. + Renders a boolean input (Android only). This is a controlled component that requires an `onValueChange` callback that updates the `value` prop in order for the component to reflect user actions. If the `value` prop is not updated, the component will continue to render the supplied `value` prop instead of the expected result of any user actions. -@keyword checkbox @keyword toggle - -### Props - -- [View props...](view#props) - -* [`disabled`](checkbox#disabled) -* [`onChange`](checkbox#onchange) -* [`onValueChange`](checkbox#onvaluechange) -* [`testID`](checkbox#testid) -* [`value`](checkbox#value) +## Example + +```SnackPlayer name=CheckBox%20Component%20Example&supportedPlatforms=android,web +import React, { useState } from "react"; +import { CheckBox, Text, StyleSheet, View } from "react-native"; + +export default App = () => { + const [isSelected, setSelection] = useState(false); + + return ( + + + + Do you like React Native? + + Is CheckBox selected: {isSelected ? "👍" : "👎"} + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: "center", + justifyContent: "center", + }, + checkboxContainer: { + flexDirection: "row", + marginBottom: 20, + }, + checkbox: { + alignSelf: "center", + }, + label: { + margin: 8, + }, +}); +``` --- @@ -25,9 +58,13 @@ This is a controlled component that requires an `onValueChange` callback that up ## Props +Inherits [View Props](view#props). + +--- + ### `disabled` -If true the user won't be able to toggle the checkbox. Default value is false. +If true the user won't be able to toggle the checkbox. Default value is `false`. | Type | Required | | ---- | -------- | @@ -67,7 +104,7 @@ Used to locate this view in end-to-end tests. ### `value` -The value of the checkbox. If true the checkbox will be turned on. Default value is false. +The value of the checkbox. If true the checkbox will be turned on. Default value is `false`. | Type | Required | | ---- | -------- | diff --git a/website/i18n/en.json b/website/i18n/en.json index c75ac130fe3..956b1285040 100644 --- a/website/i18n/en.json +++ b/website/i18n/en.json @@ -60,7 +60,7 @@ "title": "Button" }, "checkbox": { - "title": "CheckBox" + "title": "🚧 CheckBox" }, "clipboard": { "title": "🚧 Clipboard" @@ -3428,6 +3428,9 @@ "version-0.61/version-0.61-asyncstorage": { "title": "🚧 AsyncStorage" }, + "version-0.61/version-0.61-checkbox": { + "title": "🚧 CheckBox" + }, "version-0.61/version-0.61-clipboard": { "title": "🚧 Clipboard" }, diff --git a/website/versioned_docs/version-0.61/checkbox.md b/website/versioned_docs/version-0.61/checkbox.md new file mode 100644 index 00000000000..a4352fee1ae --- /dev/null +++ b/website/versioned_docs/version-0.61/checkbox.md @@ -0,0 +1,112 @@ +--- +id: version-0.61-checkbox +title: 🚧 CheckBox +original_id: checkbox +--- + +> **Deprecated.** Use [@react-native-community/checkbox](https://github.com/react-native-community/react-native-checkbox) instead. + +Renders a boolean input (Android only). + +This is a controlled component that requires an `onValueChange` callback that updates the `value` prop in order for the component to reflect user actions. If the `value` prop is not updated, the component will continue to render the supplied `value` prop instead of the expected result of any user actions. + +## Example + +```SnackPlayer name=CheckBox%20Component%20Example&supportedPlatforms=android,web +import React, { useState } from "react"; +import { CheckBox, Text, StyleSheet, View } from "react-native"; + +export default App = () => { + const [isSelected, setSelection] = useState(false); + + return ( + + + + Do you like React Native? + + Is CheckBox selected: {isSelected ? "👍" : "👎"} + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: "center", + justifyContent: "center", + }, + checkboxContainer: { + flexDirection: "row", + marginBottom: 20, + }, + checkbox: { + alignSelf: "center", + }, + label: { + margin: 8, + }, +}); +``` + +--- + +# Reference + +## Props + +Inherits [View Props](view#props). + +--- + +### `disabled` + +If true the user won't be able to toggle the checkbox. Default value is `false`. + +| Type | Required | +| ---- | -------- | +| bool | No | + +--- + +### `onChange` + +Used in case the props change removes the component. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `onValueChange` + +Invoked with the new value when the value changes. + +| Type | Required | +| -------- | -------- | +| function | No | + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| ------ | -------- | +| string | No | + +--- + +### `value` + +The value of the checkbox. If true the checkbox will be turned on. Default value is `false`. + +| Type | Required | +| ---- | -------- | +| bool | No | diff --git a/website/versioned_docs/version-0.62/checkbox.md b/website/versioned_docs/version-0.62/checkbox.md index c012f728182..d751e78acfc 100644 --- a/website/versioned_docs/version-0.62/checkbox.md +++ b/website/versioned_docs/version-0.62/checkbox.md @@ -1,24 +1,57 @@ --- id: version-0.62-checkbox -title: CheckBox +title: 🚧 CheckBox original_id: checkbox --- +> **Deprecated.** Use [@react-native-community/checkbox](https://github.com/react-native-community/react-native-checkbox) instead. + Renders a boolean input (Android only). This is a controlled component that requires an `onValueChange` callback that updates the `value` prop in order for the component to reflect user actions. If the `value` prop is not updated, the component will continue to render the supplied `value` prop instead of the expected result of any user actions. -@keyword checkbox @keyword toggle - -### Props - -- [View props...](view#props) - -* [`disabled`](checkbox#disabled) -* [`onChange`](checkbox#onchange) -* [`onValueChange`](checkbox#onvaluechange) -* [`testID`](checkbox#testid) -* [`value`](checkbox#value) +## Example + +```SnackPlayer name=CheckBox%20Component%20Example&supportedPlatforms=android,web +import React, { useState } from "react"; +import { CheckBox, Text, StyleSheet, View } from "react-native"; + +export default App = () => { + const [isSelected, setSelection] = useState(false); + + return ( + + + + Do you like React Native? + + Is CheckBox selected: {isSelected ? "👍" : "👎"} + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: "center", + justifyContent: "center", + }, + checkboxContainer: { + flexDirection: "row", + marginBottom: 20, + }, + checkbox: { + alignSelf: "center", + }, + label: { + margin: 8, + }, +}); +``` --- @@ -26,9 +59,13 @@ This is a controlled component that requires an `onValueChange` callback that up ## Props +Inherits [View Props](view#props). + +--- + ### `disabled` -If true the user won't be able to toggle the checkbox. Default value is false. +If true the user won't be able to toggle the checkbox. Default value is `false`. | Type | Required | | ---- | -------- | @@ -68,7 +105,7 @@ Used to locate this view in end-to-end tests. ### `value` -The value of the checkbox. If true the checkbox will be turned on. Default value is false. +The value of the checkbox. If true the checkbox will be turned on. Default value is `false`. | Type | Required | | ---- | -------- | diff --git a/website/versioned_sidebars/version-0.61-sidebars.json b/website/versioned_sidebars/version-0.61-sidebars.json index 109023de70f..e495931ba8a 100644 --- a/website/versioned_sidebars/version-0.61-sidebars.json +++ b/website/versioned_sidebars/version-0.61-sidebars.json @@ -62,6 +62,7 @@ "Components": [ "version-0.61-activityindicator", "version-0.61-button", + "version-0.61-checkbox", "version-0.61-datepickerios", "version-0.61-drawerlayoutandroid", "version-0.61-flatlist",