From 035989f1f38313716616c43da622601568b968b7 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Thu, 26 Mar 2020 20:59:21 +0100 Subject: [PATCH 1/2] add CheckBox page back to the sidebar, add Snack example --- docs/checkbox.md | 61 +++++++++++++++---- website/sidebars.json | 2 +- .../versioned_docs/version-0.62/checkbox.md | 61 +++++++++++++++---- .../version-0.61-sidebars.json | 1 + .../version-0.62-sidebars.json | 1 + 5 files changed, 99 insertions(+), 27 deletions(-) diff --git a/docs/checkbox.md b/docs/checkbox.md index 5377c485298..6e279dc1aa9 100644 --- a/docs/checkbox.md +++ b/docs/checkbox.md @@ -7,17 +7,48 @@ 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 +56,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 +102,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/sidebars.json b/website/sidebars.json index a4149958a07..7a5932505c6 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -88,7 +88,7 @@ { "type": "subcategory", "label": "Android Components", - "ids": ["drawerlayoutandroid", "touchablenativefeedback"] + "ids": ["checkbox", "drawerlayoutandroid", "touchablenativefeedback"] }, { "type": "subcategory", diff --git a/website/versioned_docs/version-0.62/checkbox.md b/website/versioned_docs/version-0.62/checkbox.md index c012f728182..c242c405bf0 100644 --- a/website/versioned_docs/version-0.62/checkbox.md +++ b/website/versioned_docs/version-0.62/checkbox.md @@ -8,17 +8,48 @@ 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 +57,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 +103,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", diff --git a/website/versioned_sidebars/version-0.62-sidebars.json b/website/versioned_sidebars/version-0.62-sidebars.json index 689f13ad182..56193647b0d 100644 --- a/website/versioned_sidebars/version-0.62-sidebars.json +++ b/website/versioned_sidebars/version-0.62-sidebars.json @@ -99,6 +99,7 @@ "type": "subcategory", "label": "Android Components", "ids": [ + "version-0.62-checkbox", "version-0.62-drawerlayoutandroid", "version-0.62-touchablenativefeedback" ] From ae422bae3a4e985f1dfd0b61f0206790d89b8de9 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Fri, 27 Mar 2020 15:34:22 +0100 Subject: [PATCH 2/2] add deprecation notice to Checkbox, add deprecated version of the page to 0.61 docs --- docs/checkbox.md | 4 +- website/i18n/en.json | 5 +- website/sidebars.json | 2 +- .../versioned_docs/version-0.61/checkbox.md | 112 ++++++++++++++++++ .../versioned_docs/version-0.62/checkbox.md | 4 +- .../version-0.62-sidebars.json | 1 - 6 files changed, 123 insertions(+), 5 deletions(-) create mode 100644 website/versioned_docs/version-0.61/checkbox.md diff --git a/docs/checkbox.md b/docs/checkbox.md index 6e279dc1aa9..f3835a51c86 100644 --- a/docs/checkbox.md +++ b/docs/checkbox.md @@ -1,8 +1,10 @@ --- 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. diff --git a/website/i18n/en.json b/website/i18n/en.json index 4b2a198c9ef..9e9d138270f 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/sidebars.json b/website/sidebars.json index 7a5932505c6..a4149958a07 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -88,7 +88,7 @@ { "type": "subcategory", "label": "Android Components", - "ids": ["checkbox", "drawerlayoutandroid", "touchablenativefeedback"] + "ids": ["drawerlayoutandroid", "touchablenativefeedback"] }, { "type": "subcategory", 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 c242c405bf0..d751e78acfc 100644 --- a/website/versioned_docs/version-0.62/checkbox.md +++ b/website/versioned_docs/version-0.62/checkbox.md @@ -1,9 +1,11 @@ --- 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. diff --git a/website/versioned_sidebars/version-0.62-sidebars.json b/website/versioned_sidebars/version-0.62-sidebars.json index 56193647b0d..689f13ad182 100644 --- a/website/versioned_sidebars/version-0.62-sidebars.json +++ b/website/versioned_sidebars/version-0.62-sidebars.json @@ -99,7 +99,6 @@ "type": "subcategory", "label": "Android Components", "ids": [ - "version-0.62-checkbox", "version-0.62-drawerlayoutandroid", "version-0.62-touchablenativefeedback" ]