Skip to content

fix description footer and add support for more types #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ayushjainrksh merged 2 commits into from
Jul 30, 2020
Merged

fix description footer and add support for more types #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bd916b1
fix description footer and add support for more types
ani4aniket Jul 30, 2020
7ebeb43
add support for more prop type
ani4aniket Jul 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 25 additions & 23 deletions docs/refreshcontrol.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -71,37 +73,37 @@ export default App;

Inherits [View Props](view.md#props).

### `colors`
### `colors`<div class="label android">Android</div>

The colors (at least one) that will be used to draw the refresh indicator.

| Type |
| --------------------------- |
| \$ReadOnlyArray<ColorValue> |
| array of [color](colors.md) |

---

### `enabled`
### `enabled`<div class="label android">Android</div>

Whether the pull to refresh functionality is enabled.

| Type |
| ---- |
| bool |
| Type | Default |
| ---- | ------- |
| bool | `true` |

---

### `onRefresh`

Called when the view starts refreshing.

| Type |
| ----------------------------------------------------------- |
| <code>() =&#x3E; void &#124; Promise&#x3C;void&#x3E;</code> |
| Type |
| -------- |
| function |

---

### `progressBackgroundColor`
### `progressBackgroundColor`<div class="label android">Android</div>

The background color of the refresh indicator.

Expand All @@ -111,13 +113,13 @@ The background color of the refresh indicator.

---

### `progressViewOffset`
### `progressViewOffset`<div class="label android">Android</div>

Progress view top offset

| Type |
| ------ |
| number |
| Type | Default |
| ------ | ------- |
| number | `0` |

---

Expand All @@ -131,17 +133,17 @@ Whether the view should be indicating an active refresh.

---

### `size`
### `size`<div class="label android">Android</div>

Size of the refresh indicator, see RefreshControl.SIZE.
Size of the refresh indicator.

| Type |
| -------------------------------------------------------------------------------------------------------- |
| <code>&#124; typeof RefreshLayoutConsts.SIZE.DEFAULT &#124; typeof RefreshLayoutConsts.SIZE.LARGE</code> |
| Type | Default |
| ---------------------------------------------------------------- | ---------------------------------- |
| [RefreshControl.SIZE](refreshcontrol.md#refreshlayoutconstssize) | `RefreshLayoutConsts.SIZE.DEFAULT` |

---

### `tintColor`
### `tintColor`<div class="label ios">iOS</div>

The color of the refresh indicator.

Expand All @@ -151,7 +153,7 @@ The color of the refresh indicator.

---

### `title`
### `title`<div class="label ios">iOS</div>

The title displayed under the refresh indicator.

Expand All @@ -161,9 +163,9 @@ The title displayed under the refresh indicator.

---

### `titleColor`
### `titleColor`<div class="label ios">iOS</div>

Title color.
The color of the refresh indicator title.

| Type |
| ------------------ |
Expand Down
82 changes: 56 additions & 26 deletions docs/switch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<View style={styles.container}>
<Switch
trackColor={{ false: "#767577", true: "#81b0ff" }}
thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
ios_backgroundColor="#3e3e3e"
onValueChange={toggleSwitch}
value={isEnabled}
/>
</View>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center"
}
});

export default App;
```

---

# Reference
Expand All @@ -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` |

---

Expand All @@ -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 |
| ----------------------------------------------------------------------------------- |
| <code>(event: SwitchChangeEvent) =&#x3E; Promise&#x3C;void&#x3E; &#124; void</code> |
| 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 |
| ------------------------------------------------------------------------- |
| <code>(value: boolean) =&#x3E; Promise&#x3C;void&#x3E; &#124; void</code> |
| 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 |
| ------------------ |
Expand All @@ -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 |
| ------------------------------------------------------------------------------------------- |
| <code>\$ReadOnly&#x3C;{&#124; false?: ?ColorValue, true?: ?ColorValue, &#124;}&#x3E;</code> |
| 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` |
18 changes: 15 additions & 3 deletions website/scripts/sync-api-docs/generateMarkdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,13 +215,23 @@ 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\n' +
descriptionTokenized?.examples[0]?.description +
'\n## Example\n' +
descriptionTokenized?.examples[0]?.raw
descriptionTokenized?.examples[0]?.raw +
'\n' +
descriptionTokenized?.footer
);
}
if (descriptionTokenized.examples.length > 0 && tabs === 1) {
Expand All @@ -232,7 +242,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;
Expand Down
4 changes: 4 additions & 0 deletions website/scripts/sync-api-docs/magic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,9 @@ module.exports = {
text: 'PressEvent',
url: 'pressevent.md',
},
'RefreshLayoutConsts.SIZE.DEFAULT': {
text: 'RefreshControl.SIZE',
url: 'refreshcontrol.md#refreshlayoutconstssize',
},
},
};
26 changes: 26 additions & 0 deletions website/scripts/sync-api-docs/propFormatter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,32 @@ 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 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 => {
Expand Down