From bd916b1ed9b8d25a659673b48a3d9ede64cf375b Mon Sep 17 00:00:00 2001 From: Aniket Kumar Date: Fri, 31 Jul 2020 00:38:38 +0530 Subject: [PATCH 1/2] fix description footer and add support for more types Co-authored-by: Aniket Kumar Co-authored-by: Ayush Jain --- .../scripts/sync-api-docs/generateMarkdown.js | 16 +++++++++++++--- website/scripts/sync-api-docs/magic.js | 4 ++++ website/scripts/sync-api-docs/propFormatter.js | 7 +++++++ 3 files changed, 24 insertions(+), 3 deletions(-) diff --git a/website/scripts/sync-api-docs/generateMarkdown.js b/website/scripts/sync-api-docs/generateMarkdown.js index 37ffe22ebae..8a81d0ffa7e 100644 --- a/website/scripts/sync-api-docs/generateMarkdown.js +++ b/website/scripts/sync-api-docs/generateMarkdown.js @@ -215,13 +215,21 @@ function preprocessDescription(desc) { }\n\n${classBlock}\n\n${ descriptionTokenized.examples[1].raw }\n\n${endBlock}`; - return descriptionTokenized.description + `\n## Example\n` + wrapper; + return ( + descriptionTokenized.description + + `\n## Example\n` + + wrapper + + '\n' + + descriptionTokenized?.footer + ); } if (descriptionTokenized.examples.length === 1 && tabs === 1) { return ( descriptionTokenized.description + '\n## Example\n' + - descriptionTokenized?.examples[0]?.raw + descriptionTokenized?.examples[0]?.raw + + '\n' + + descriptionTokenized?.footer ); } if (descriptionTokenized.examples.length > 0 && tabs === 1) { @@ -232,7 +240,9 @@ function preprocessDescription(desc) { '\n' + descriptionTokenized?.examples[0]?.raw + '\n## Example\n' + - descriptionTokenized?.examples[1]?.raw + descriptionTokenized?.examples[1]?.raw + + '\n' + + descriptionTokenized?.footer ); } else { return desc; diff --git a/website/scripts/sync-api-docs/magic.js b/website/scripts/sync-api-docs/magic.js index 664aa9d9573..e40137628e1 100644 --- a/website/scripts/sync-api-docs/magic.js +++ b/website/scripts/sync-api-docs/magic.js @@ -25,5 +25,9 @@ module.exports = { text: 'PressEvent', url: 'pressevent.md', }, + 'RefreshLayoutConsts.SIZE.DEFAULT': { + text: 'RefreshControl.SIZE', + url: 'refreshcontrol.md#refreshlayoutconstssize', + }, }, }; diff --git a/website/scripts/sync-api-docs/propFormatter.js b/website/scripts/sync-api-docs/propFormatter.js index e91c63fd679..4bd9210a633 100644 --- a/website/scripts/sync-api-docs/propFormatter.js +++ b/website/scripts/sync-api-docs/propFormatter.js @@ -130,6 +130,13 @@ function formatTypeColumn(prop) { return prop.flowType.type; } } + } else if (prop.flowType.name.includes('Array')) { + prop?.flowType?.elements[0]?.elements.forEach(elem => { + if (Object.hasOwnProperty.call(magic.linkableTypeAliases, elem.name)) { + ({url, text} = magic.linkableTypeAliases[elem.name]); + } + }); + if (url) return `array of [${text}](${url})`; } else { // Get text and url from magic aliases prop?.flowType?.elements?.forEach(elem => { From 7ebeb43c8e13952ed93b9076eef33154e5218cc8 Mon Sep 17 00:00:00 2001 From: Aniket Kumar Date: Fri, 31 Jul 2020 01:52:32 +0530 Subject: [PATCH 2/2] add support for more prop type Co-authored-by: Aniket Kumar Co-authored-by: Ayush Jain --- docs/refreshcontrol.md | 48 +++++------ docs/switch.md | 82 +++++++++++++------ .../scripts/sync-api-docs/generateMarkdown.js | 2 + .../scripts/sync-api-docs/propFormatter.js | 19 +++++ 4 files changed, 102 insertions(+), 49 deletions(-) diff --git a/docs/refreshcontrol.md b/docs/refreshcontrol.md index 763278e8926..aca0db896d5 100644 --- a/docs/refreshcontrol.md +++ b/docs/refreshcontrol.md @@ -63,6 +63,8 @@ const styles = StyleSheet.create({ export default App; ``` +> Note: `refreshing` is a controlled prop, this is why it needs to be set to true in the `onRefresh` function otherwise the refresh indicator will stop immediately. + --- # Reference @@ -71,23 +73,23 @@ export default App; Inherits [View Props](view.md#props). -### `colors` +### `colors`
Android
The colors (at least one) that will be used to draw the refresh indicator. | Type | | --------------------------- | -| \$ReadOnlyArray | +| array of [color](colors.md) | --- -### `enabled` +### `enabled`
Android
Whether the pull to refresh functionality is enabled. -| Type | -| ---- | -| bool | +| Type | Default | +| ---- | ------- | +| bool | `true` | --- @@ -95,13 +97,13 @@ Whether the pull to refresh functionality is enabled. Called when the view starts refreshing. -| Type | -| ----------------------------------------------------------- | -| () => void | Promise<void> | +| Type | +| -------- | +| function | --- -### `progressBackgroundColor` +### `progressBackgroundColor`
Android
The background color of the refresh indicator. @@ -111,13 +113,13 @@ The background color of the refresh indicator. --- -### `progressViewOffset` +### `progressViewOffset`
Android
Progress view top offset -| Type | -| ------ | -| number | +| Type | Default | +| ------ | ------- | +| number | `0` | --- @@ -131,17 +133,17 @@ Whether the view should be indicating an active refresh. --- -### `size` +### `size`
Android
-Size of the refresh indicator, see RefreshControl.SIZE. +Size of the refresh indicator. -| Type | -| -------------------------------------------------------------------------------------------------------- | -| | typeof RefreshLayoutConsts.SIZE.DEFAULT | typeof RefreshLayoutConsts.SIZE.LARGE | +| Type | Default | +| ---------------------------------------------------------------- | ---------------------------------- | +| [RefreshControl.SIZE](refreshcontrol.md#refreshlayoutconstssize) | `RefreshLayoutConsts.SIZE.DEFAULT` | --- -### `tintColor` +### `tintColor`
iOS
The color of the refresh indicator. @@ -151,7 +153,7 @@ The color of the refresh indicator. --- -### `title` +### `title`
iOS
The title displayed under the refresh indicator. @@ -161,9 +163,9 @@ The title displayed under the refresh indicator. --- -### `titleColor` +### `titleColor`
iOS
-Title color. +The color of the refresh indicator title. | Type | | ------------------ | diff --git a/docs/switch.md b/docs/switch.md index 8c02cdba493..58574c3de6d 100644 --- a/docs/switch.md +++ b/docs/switch.md @@ -3,10 +3,44 @@ id: switch title: Switch --- -A visual toggle between two mutually exclusive states. +Renders a boolean input. 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=Switch +import React, { useState } from "react"; +import { View, Switch, StyleSheet } from "react-native"; + +const App = () => { + const [isEnabled, setIsEnabled] = useState(false); + const toggleSwitch = () => setIsEnabled(previousState => !previousState); + + return ( + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: "center", + justifyContent: "center" + } +}); + +export default App; +``` + --- # Reference @@ -17,11 +51,11 @@ Inherits [View Props](view.md#props). ### `disabled` -Whether the switch is disabled. Defaults to false. +If true the user won't be able to toggle the switch. -| Type | -| ---- | -| bool | +| Type | Default | +| ---- | ------- | +| bool | `false` | --- @@ -37,31 +71,27 @@ On iOS, custom color for the background. This background color can be seen eithe ### `onChange` -Called when the user tries to change the value of the switch. - -Receives the change event as an argument. If you want to only receive the new value, use `onValueChange` instead. +Invoked when the user tries to change the value of the switch. Receives the change event as an argument. If you want to only receive the new value, use `onValueChange` instead. -| Type | -| ----------------------------------------------------------------------------------- | -| (event: SwitchChangeEvent) => Promise<void> | void | +| Type | +| --------------------------- | +| function(SwitchChangeEvent) | --- ### `onValueChange` -Called when the user tries to change the value of the switch. - -Receives the new value as an argument. If you want to instead receive an event, use `onChange`. +Invoked when the user tries to change the value of the switch. Receives the new value as an argument. If you want to instead receive an event, use `onChange`. -| Type | -| ------------------------------------------------------------------------- | -| (value: boolean) => Promise<void> | void | +| Type | +| ----------------- | +| function(boolean) | --- ### `thumbColor` -Custom color for the switch thumb. +Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow. | Type | | ------------------ | @@ -73,18 +103,18 @@ Custom color for the switch thumb. Custom colors for the switch track. -NOTE: On iOS when the switch value is false, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use `ios_backgroundColor`. +_iOS_: When the switch value is false, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use [`ios_backgroundColor`](https://reactnative.dev/docs/switch#ios_backgroundColor). -| Type | -| ------------------------------------------------------------------------------------------- | -| \$ReadOnly<{| false?: ?ColorValue, true?: ?ColorValue, |}> | +| Type | +| ------------------------------------------------------------- | +| object: {false: [color](colors.md), true: [color](colors.md)} | --- ### `value` -Boolean value of the switch. Defaults to false. +The value of the switch. If true the switch will be turned on. -| Type | -| ---- | -| bool | +| Type | Default | +| ---- | ------- | +| bool | `false` | diff --git a/website/scripts/sync-api-docs/generateMarkdown.js b/website/scripts/sync-api-docs/generateMarkdown.js index 8a81d0ffa7e..38177a9a19f 100644 --- a/website/scripts/sync-api-docs/generateMarkdown.js +++ b/website/scripts/sync-api-docs/generateMarkdown.js @@ -226,6 +226,8 @@ function preprocessDescription(desc) { if (descriptionTokenized.examples.length === 1 && tabs === 1) { return ( descriptionTokenized.description + + '\n\n' + + descriptionTokenized?.examples[0]?.description + '\n## Example\n' + descriptionTokenized?.examples[0]?.raw + '\n' + diff --git a/website/scripts/sync-api-docs/propFormatter.js b/website/scripts/sync-api-docs/propFormatter.js index 4bd9210a633..c28ecf34ab9 100644 --- a/website/scripts/sync-api-docs/propFormatter.js +++ b/website/scripts/sync-api-docs/propFormatter.js @@ -137,6 +137,25 @@ function formatTypeColumn(prop) { } }); if (url) return `array of [${text}](${url})`; + } else if (prop.flowType.name === '$ReadOnly') { + // Special Case: switch#trackcolor + let markdown = ''; + if (prop.flowType.elements[0]?.type === 'object') { + prop?.flowType?.elements[0]?.signature?.properties.forEach( + ({key, value}) => { + value.elements.forEach(elem => { + if ( + Object.hasOwnProperty.call(magic.linkableTypeAliases, elem.name) + ) { + ({url, text} = magic.linkableTypeAliases[elem.name]); + markdown += `${key}: [${text}](${url})` + ', '; + } + }); + } + ); + if (markdown.match(/, $/)) markdown = markdown.replace(/, $/, ''); + return `${prop.flowType.elements[0]?.type}: {${markdown}}`; + } } else { // Get text and url from magic aliases prop?.flowType?.elements?.forEach(elem => {