kylefang/react-native-web
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-web.git synced 2026-04-23 04:00:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update storybook dependencies

Browse Source
This commit is contained in:
Nicolas Gallagher
2019-12-18 14:52:03 +00:00
parent 1ad1693039
commit 3c9cc66264
24 changed files with 1176 additions and 429 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/docs/package.json
View File

@@ -8,11 +8,11 @@
"release": "yarn build && git checkout gh-pages && rm -rf ../../docs && mv dist ../../docs && git add -A && git commit -m \"Deploy documentation\" && git push origin gh-pages && git checkout -"
},
"dependencies": {
"@storybook/addon-docs": "5.3.0-alpha.43",
"@storybook/addon-options": "5.3.0-alpha.43",
"@storybook/cli": "5.3.0-alpha.43",
"@storybook/react": "5.3.0-alpha.43",
"@storybook/theming": "5.3.0-alpha.43",
"@storybook/addon-docs": "^5.3.0-beta.31",
"@storybook/addon-options": "^5.3.0-beta.31",
"@storybook/cli": "^5.3.0-beta.31",
"@storybook/react": "^5.3.0-beta.31",
"@storybook/theming": "^5.3.0-beta.31",
"react-native-web": "0.11.7"
},
"devDependencies": {

6
packages/docs/src/apis/AppState/AppState.stories.mdx
View File

@@ -1,5 +1,5 @@
import { Meta, Props, Preview, Story } from '@storybook/addon-docs/blocks';
import * as stories from './AppState.stories.js';
import * as Stories from './AppState.stories.js';
<Meta title="APIs|AppState" />
@@ -40,5 +40,7 @@ AppState.removeEventListener('change', handler);
## Example
<Preview withSource='none'>
<Story name="stateChanges">{stories.stateChanges}</Story>
<Story name="stateChanges">
<Stories.stateChanges />
</Story>
</Preview>

6
packages/docs/src/apis/Clipboard/Clipboard.stories.mdx
View File

@@ -1,5 +1,5 @@
import { Meta, Props, Preview, Story } from '@storybook/addon-docs/blocks';
import * as stories from './Clipboard.stories.js';
import * as Stories from './Clipboard.stories.js';
<Meta title="APIs|Clipboard" />
@@ -31,7 +31,9 @@ const wasSet = Clipboard.setString('add this to clipboard');
```
<Preview withSource='none'>
<Story name="setString">{stories.setString}</Story>
<Story name="setString">
<Stories.setString />
</Story>
</Preview>
### getString()

6
packages/docs/src/apis/Dimensions/Dimensions.stories.mdx
View File

@@ -1,5 +1,5 @@
import { Meta, Props, Preview, Story } from '@storybook/addon-docs/blocks';
import * as stories from './Dimensions.stories.js';
import * as Stories from './Dimensions.stories.js';
<Meta title="APIs|Dimensions" />
@@ -46,5 +46,7 @@ Remove an event handler.
## Example
<Preview withSource='none'>
<Story name="stateChanges">{stories.stateChanges}</Story>
<Story name="stateChanges">
<Stories.stateChanges />
</Story>
</Preview>

6
packages/docs/src/apis/I18nManager/I18nManager.stories.mdx
View File

@@ -1,5 +1,5 @@
import { Meta, Props, Preview, Story } from '@storybook/addon-docs/blocks';
import * as stories from './I18nManager.stories.js';
import * as Stories from './I18nManager.stories.js';
<Meta title="APIs|I18nManager" />
@@ -44,5 +44,7 @@ it's an RTL language. (Web-only)
## Example
<Preview withSource='none'>
<Story inline={false} name="layoutRTL">{stories.layoutRTL}</Story>
<Story inline={false} name="layoutRTL">
<Stories.layoutRTL />
</Story>
</Preview>

6
packages/docs/src/apis/Linking/Linking.stories.mdx
View File

@@ -1,5 +1,5 @@
import { Meta, Props, Preview, Story } from '@storybook/addon-docs/blocks';
import * as stories from './Linking.stories.js';
import * as Stories from './Linking.stories.js';
<Meta title="APIs|Linking" />
@@ -26,5 +26,7 @@ rejected.
## Example
<Preview withSource='none'>
<Story name="openURL">{stories.openURL}</Story>
<Story name="openURL">
<Stories.openURL />
</Story>
</Preview>

2
packages/docs/src/components/ActivityIndicator/ActivityIndicator.stories.js
View File

@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
const ofProps = () => {};
const ofProps = () => null;
ofProps.propTypes = {
'...ViewPropTypes': PropTypes.any,

20
packages/docs/src/components/ActivityIndicator/ActivityIndicator.stories.mdx
View File

@@ -1,5 +1,5 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import * as stories from './ActivityIndicator.stories.js';
import * as Stories from './ActivityIndicator.stories.js';
<Meta title="Components|ActivityIndicator" />
@@ -9,14 +9,16 @@ Displays a customizable activity indicator.
## Props
<Props of={stories.ofProps} />
<Props of={Stories.ofProps} />
### animating
Controls whether to show the indicator or hide it.
<Preview withSource='none'>
<Story name="animating">{stories.animating}</Story>
<Story name="animating">
<Stories.animating />
</Story>
</Preview>
### color
@@ -24,7 +26,9 @@ Controls whether to show the indicator or hide it.
Customize the foreground color of the indicator.
<Preview withSource='none'>
<Story name="color">{stories.color}</Story>
<Story name="color">
<Stories.color />
</Story>
</Preview>
### hidesWhenStopped
@@ -32,7 +36,9 @@ Customize the foreground color of the indicator.
Control whether to show the indicator when it is not animating.
<Preview withSource='none'>
<Story name="hidesWhenStopped">{stories.hidesWhenStopped}</Story>
<Story name="hidesWhenStopped">
<Stories.hidesWhenStopped />
</Story>
</Preview>
### size
@@ -41,5 +47,7 @@ Customize the size of the indicator. `small` has a height of `20px`, large has a
height of `36px`. Scale transforms can also be used.
<Preview withSource='none'>
<Story name="size">{stories.size}</Story>
<Story name="size">
<Stories.size />
</Story>
</Preview>

15
packages/docs/src/components/Button/Button.stories.mdx
View File

@@ -1,5 +1,5 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import * as stories from './Button.stories.js';
import * as Stories from './Button.stories.js';
<Meta title="Components|Button" />
@@ -10,14 +10,16 @@ build your own custom button using `TouchableOpacity` or `TouchableHighlight`.
## Props
<Props of={stories.ofProps} />
<Props of={Stories.ofProps} />
### color
Customize the background color of the button.
<Preview withSource='none'>
<Story name="color">{stories.color}</Story>
<Story name="color">
<Stories.color />
</Story>
</Preview>
### disabled
@@ -25,7 +27,9 @@ Customize the background color of the button.
Prevent all interactions with the button.
<Preview withSource='none'>
<Story name="disabled">{stories.disabled}</Story>
<Story name="disabled">
<Stories.disabled />
</Story>
</Preview>
### onPress
@@ -33,7 +37,8 @@ Prevent all interactions with the button.
Called when the button is pressed by a pointer or keyboard.
<Preview withSource='none'>
<Story name="onPress">{stories.onPress}</Story>
<Story name="onPress">
<Stories.onPress /></Story>
</Preview>
### title

24
packages/docs/src/components/CheckBox/CheckBox.stories.mdx
View File

@@ -1,5 +1,5 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import * as stories from './CheckBox.stories.js';
import * as Stories from './CheckBox.stories.js';
<Meta title="Components|CheckBox" />
@@ -12,14 +12,16 @@ supplied `value` prop instead of the expected result of any user actions.
## Props
<Props of={stories.ofProps} />
<Props of={Stories.ofProps} />
### color
Customize the color of the active checkbox.
<Preview withSource='none'>
<Story name="color">{stories.color}</Story>
<Story name="color">
<Stories.color />
</Story>
</Preview>
### disabled
@@ -27,7 +29,9 @@ Customize the color of the active checkbox.
Prevent interaction with the checkbox.
<Preview withSource='none'>
<Story name="disabled">{stories.disabled}</Story>
<Story name="disabled">
<Stories.disabled />
</Story>
</Preview>
### onValueChange
@@ -35,7 +39,9 @@ Prevent interaction with the checkbox.
Called with the event when the value changes.
<Preview withSource='none'>
<Story name="onValueChange">{stories.onValueChange}</Story>
<Story name="onValueChange">
<Stories.onValueChange />
</Story>
</Preview>
### value
@@ -43,7 +49,9 @@ Called with the event when the value changes.
Controls whether the checkbox is active or not.
<Preview withSource='none'>
<Story name="value">{stories.value}</Story>
<Story name="value">
<Stories.value />
</Story>
</Preview>
## Notes
@@ -52,5 +60,7 @@ The checkbox size can be controlled by changing the `height` and `width` style
properties.
<Preview withSource='none'>
<Story name="customSize">{stories.customSize}</Story>
<Story name="customSize">
<Stories.customSize />
</Story>
</Preview>

10
packages/docs/src/components/FlatList/FlatList.stories.mdx
View File

@@ -1,5 +1,5 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import * as stories from './FlatList.stories.js';
import * as Stories from './FlatList.stories.js';
<Meta title="Components|FlatList" />
@@ -16,11 +16,15 @@ alternatives such as
### Single column
<Preview withSource='none'>
<Story name="singleColumn">{stories.singleColumn}</Story>
<Story name="singleColumn">
<Stories.singleColumn />
</Story>
</Preview>
### Multiple columns
<Preview withSource='none'>
<Story name="multiColumn">{stories.multiColumn}</Story>
<Story name="multiColumn">
<Stories.multiColumn />
</Story>
</Preview>

46
packages/docs/src/components/Image/Image.stories.mdx
View File

@@ -1,5 +1,5 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import * as stories from './Image.stories.js';
import * as Stories from './Image.stories.js';
<Meta title="Components|Image" />
@@ -9,7 +9,7 @@ An accessible and responsive image component.
## Props
<Props of={stories.ofProps} />
<Props of={Stories.ofProps} />
### blurRadius
@@ -24,7 +24,9 @@ type Source = { uri: string, width: number, height: number }
```
<Preview withSource='none'>
<Story name="defaultSource">{stories.defaultSource}</Story>
<Story name="defaultSource">
<Stories.defaultSource />
</Story>
</Preview>
### draggable
@@ -33,7 +35,9 @@ This is a web-only prop that indicates whether the image can be dragged with
native browser behavior. The default is `false`.
<Preview withSource='none'>
<Story name="draggable">{stories.draggable}</Story>
<Story name="draggable">
<Stories.draggable />
</Story>
</Preview>
### onError
@@ -41,7 +45,9 @@ native browser behavior. The default is `false`.
Called on load error with ``{nativeEvent: {error}}``.
<Preview withSource='none'>
<Story name="onError">{stories.onError}</Story>
<Story name="onError">
<Stories.onError />
</Story>
</Preview>
### onLoad
@@ -49,7 +55,9 @@ Called on load error with ``{nativeEvent: {error}}``.
Called when load completes successfully.
<Preview withSource='none'>
<Story name="onLoad">{stories.onLoad}</Story>
<Story name="onLoad">
<Stories.onLoad />
</Story>
</Preview>
### resizeMode
@@ -61,7 +69,9 @@ type ResizeMode = 'center' | 'contain' | 'cover' | 'none' | 'repeat' | 'stretch'
```
<Preview withSource='none'>
<Story name="resizeMode">{stories.resizeMode}</Story>
<Story name="resizeMode">
<Stories.resizeMode />
</Story>
</Preview>
### source
@@ -73,7 +83,9 @@ type Source = { uri: string, width: number, height: number }
```
<Preview withSource='none'>
<Story name="source">{stories.source}</Story>
<Story name="source">
<Stories.source />
</Story>
</Preview>
### style
@@ -91,7 +103,9 @@ type Source = { uri: string, width: number, height: number }
Image shadows are derived exactly from the pixels.
<Preview withSource='none'>
<Story name="styleBoxShadow">{stories.styleBoxShadow}</Story>
<Story name="styleBoxShadow">
<Stories.styleBoxShadow />
</Story>
</Preview>
#### tintColor
@@ -99,12 +113,14 @@ Image shadows are derived exactly from the pixels.
Tint color is applied to all opaque pixels.
<Preview withSource='none'>
<Story name="styleTintColor">{stories.styleTintColor}</Story>
<Story name="styleTintColor">
<Stories.styleTintColor />
</Story>
</Preview>
## Static methods
<Props of={stories.ofStatics} />
<Props of={Stories.ofStatics} />
### getSize(url, callback)
@@ -129,7 +145,9 @@ Image.getSize(uri, ((width, height) => {
```
<Preview withSource='none'>
<Story name="getSize">{stories.getSize}</Story>
<Story name="getSize">
<Stories.getSize />
</Story>
</Preview>
### prefetch(url)
@@ -150,7 +168,9 @@ Image.prefetch(uri).then(() => {
```
<Preview withSource='none'>
<Story name="prefetch">{stories.prefetch}</Story>
<Story name="prefetch">
<Stories.prefetch />
</Story>
</Preview>
### queryCache(list)

8
packages/docs/src/components/ImageBackground/ImageBackground.stories.mdx
View File

@@ -1,5 +1,5 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import * as stories from './ImageBackground.stories.js';
import * as Stories from './ImageBackground.stories.js';
<Meta title="Components|ImageBackground" />
@@ -9,12 +9,14 @@ A image component with support for child content.
## Props
<Props of={stories.ofProps} />
<Props of={Stories.ofProps} />
### children
Content to display over the image.
<Preview withSource='none'>
<Story name="children">{stories.children}</Story>
<Story name="children">
<Stories.children />
</Story>
</Preview>

6
packages/docs/src/components/Picker/Picker.stories.mdx
View File

@@ -1,5 +1,5 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import * as stories from './Picker.stories.js';
import * as Stories from './Picker.stories.js';
<Meta title="Components|Picker" />
@@ -9,7 +9,7 @@ Renders the native `<select>` component.
## Props
<Props of={stories.ofProps} />
<Props of={Stories.ofProps} />
### children
@@ -51,7 +51,7 @@ Individual selectable item in a `Picker`.
## Props
<Props of={stories.ofPropsItem} />
<Props of={Stories.ofPropsItem} />
### color

24
packages/docs/src/components/ProgressBar/ProgressBar.stories.mdx
View File

@@ -1,5 +1,5 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import * as stories from './ProgressBar.stories.js';
import * as Stories from './ProgressBar.stories.js';
<Meta title="Components|ProgressBar" />
@@ -9,14 +9,16 @@ Display an activity progress bar.
## Props
<Props of={stories.ofProps} />
<Props of={Stories.ofProps} />
### color
Customize the color of the progress bar.
<Preview withSource='none'>
<Story name="color">{stories.color}</Story>
<Story name="color">
<Stories.color />
</Story>
</Preview>
### indeterminate
@@ -24,7 +26,9 @@ Customize the color of the progress bar.
Whether the progress bar will show indeterminate progress.
<Preview withSource='none'>
<Story name="indeterminate">{stories.indeterminate}</Story>
<Story name="indeterminate">
<Stories.indeterminate />
</Story>
</Preview>
### progress
@@ -32,7 +36,9 @@ Whether the progress bar will show indeterminate progress.
The progress value (between 0 and 1).
<Preview withSource='none'>
<Story name="progress">{stories.progress}</Story>
<Story name="progress">
<Stories.progress />
</Story>
</Preview>
### trackColor
@@ -40,7 +46,9 @@ The progress value (between 0 and 1).
Customize the color of the track bar.
<Preview withSource='none'>
<Story name="trackColor">{stories.trackColor}</Story>
<Story name="trackColor">
<Stories.trackColor />
</Story>
</Preview>
## Notes
@@ -55,5 +63,7 @@ Custom sizes can be created using `style`.
```
<Preview withSource='none'>
<Story name="customSize">{stories.customSize}</Story>
<Story name="customSize">
<Stories.customSize />
</Story>
</Preview>

20
packages/docs/src/components/ScrollView/ScrollView.stories.mdx
View File

@@ -1,5 +1,5 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import * as stories from './ScrollView.stories.js';
import * as Stories from './ScrollView.stories.js';
<Meta title="Components|ScrollView" />
@@ -12,7 +12,7 @@ view directly (discouraged) or make sure all parent views have bounded height
## Props
<Props of={stories.ofProps} />
<Props of={Stories.ofProps} />
### contentContainerStyle
@@ -23,11 +23,15 @@ These styles will be applied to the scroll view content container which wraps al
When `true`, the scroll view's children are arranged horizontally in a row instead of vertically in a column.
<Preview withSource='none'>
<Story name="vertical">{stories.vertical}</Story>
<Story name="vertical">
<Stories.vertical />
</Story>
</Preview>
<Preview withSource='none'>
<Story name="horizontal">{stories.horizontal}</Story>
<Story name="horizontal">
<Stories.horizontal />
</Story>
</Preview>
### keyboardDismissMode
@@ -62,7 +66,9 @@ Invoked on scroll with the following event:
```
<Preview withSource='none'>
<Story name="onScroll">{stories.onScroll}</Story>
<Story name="onScroll">
<Stories.onScroll />
</Story>
</Preview>
### pagingEnabled
@@ -74,7 +80,9 @@ When `true`, the scroll view snaps to individual items in the list when scrollin
When `false`, the content does not scroll.
<Preview withSource='none'>
<Story name="scrollEnabled">{stories.scrollEnabled}</Story>
<Story name="scrollEnabled">
<Stories.scrollEnabled />
</Story>
</Preview>
### scrollEventThrottle

36
packages/docs/src/components/Switch/Switch.stories.mdx
View File

@@ -1,5 +1,5 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import * as stories from './Switch.stories.js';
import * as Stories from './Switch.stories.js';
<Meta title="Components|Switch" />
@@ -12,14 +12,16 @@ supplied value prop instead of the expected result of any user actions.
## Props
<Props of={stories.ofProps} />
<Props of={Stories.ofProps} />
### activeThumbColor
The color of the thumb grip when the switch is turned on. (Web-only)
<Preview withSource='none'>
<Story name="activeThumbColor">{stories.activeThumbColor}</Story>
<Story name="activeThumbColor">
<Stories.activeThumbColor />
</Story>
</Preview>
### activeTrackColor
@@ -27,7 +29,9 @@ The color of the thumb grip when the switch is turned on. (Web-only)
The color of the track when the switch is turned on. (Web-only, equivalent to React Native's `onTintColor`)
<Preview withSource='none'>
<Story name="activeTrackColor">{stories.activeTrackColor}</Story>
<Story name="activeTrackColor">
<Stories.activeTrackColor />
</Story>
</Preview>
### disabled
@@ -35,7 +39,9 @@ The color of the track when the switch is turned on. (Web-only, equivalent to Re
If `true`, the user won't be able to interact with the switch.
<Preview withSource='none'>
<Story name="disabled">{stories.disabled}</Story>
<Story name="disabled">
<Stories.disabled />
</Story>
</Preview>
### onValueChange
@@ -43,7 +49,9 @@ If `true`, the user won't be able to interact with the switch.
Invoked with the new value when the value changes.
<Preview withSource='none'>
<Story name="onValueChange">{stories.onValueChange}</Story>
<Story name="onValueChange">
<Stories.onValueChange />
</Story>
</Preview>
### thumbColor
@@ -51,7 +59,9 @@ Invoked with the new value when the value changes.
The color of the thumb grip when the switch is turned off. (Web-only, equivalent to React Native's `thumbTintColor`)
<Preview withSource='none'>
<Story name="thumbColor">{stories.thumbColor}</Story>
<Story name="thumbColor">
<Stories.thumbColor />
</Story>
</Preview>
### trackColor
@@ -59,7 +69,9 @@ The color of the thumb grip when the switch is turned off. (Web-only, equivalent
The color of the track when the switch is turned off. (Web-only, equivalent to React Native's `tintColor`)
<Preview withSource='none'>
<Story name="trackColor">{stories.trackColor}</Story>
<Story name="trackColor">
<Stories.trackColor />
</Story>
</Preview>
### value
@@ -67,7 +79,9 @@ The color of the track when the switch is turned off. (Web-only, equivalent to R
The value of the switch. If `true` the switch will be turned on.
<Preview withSource='none'>
<Story name="value">{stories.value}</Story>
<Story name="value">
<Stories.value />
</Story>
</Preview>
## Notes
@@ -79,5 +93,7 @@ Custom sizes can be created using styles.
```
<Preview withSource='none'>
<Story name="customSize">{stories.customSize}</Story>
<Story name="customSize">
<Stories.customSize />
</Story>
</Preview>

24
packages/docs/src/components/Text/Text.stories.mdx
View File

@@ -1,5 +1,5 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import * as stories from './Text.stories.js';
import * as Stories from './Text.stories.js';
<Meta title="Components|Text" />
@@ -16,14 +16,16 @@ NOTE: Text currently transfers all other props to the rendered HTML element.
## Props
<Props of={stories.ofProps} />
<Props of={Stories.ofProps} />
### children
Nested text components will inherit the typographic styles of their parents.
<Preview withSource='none'>
<Story name="children">{stories.children}</Story>
<Story name="children">
<Stories.children />
</Story>
</Preview>
### numberOfLines
@@ -31,7 +33,9 @@ Nested text components will inherit the typographic styles of their parents.
Truncates the text with an ellipsis after this many lines.
<Preview withSource='none'>
<Story name="numberOfLines">{stories.numberOfLines}</Story>
<Story name="numberOfLines">
<Stories.numberOfLines />
</Story>
</Preview>
### onPress
@@ -39,7 +43,9 @@ Truncates the text with an ellipsis after this many lines.
Called when the `Text` is pressed.
<Preview withSource='none'>
<Story name="onPress">{stories.onPress}</Story>
<Story name="onPress">
<Stories.onPress />
</Story>
</Preview>
### selectable
@@ -47,7 +53,9 @@ Called when the `Text` is pressed.
When `false`, the text is not selectable.
<Preview withSource='none'>
<Story name="selectable">{stories.selectable}</Story>
<Story name="selectable">
<Stories.selectable />
</Story>
</Preview>
### style
@@ -87,5 +95,7 @@ Text supports typographic styles.
```
<Preview withSource='none'>
<Story name="style">{stories.style}</Story>
<Story name="style">
<Stories.style />
</Story>
</Preview>

58
packages/docs/src/components/TextInput/TextInput.stories.mdx
View File

@@ -1,5 +1,5 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import * as stories from './TextInput.stories.js';
import * as Stories from './TextInput.stories.js';
<Meta title="Components|TextInput" />
@@ -11,7 +11,7 @@ some props are exclusive to or excluded from `multiline`.
## Props
<Props of={stories.ofProps} />
<Props of={Stories.ofProps} />
### autoCapitalize
@@ -23,7 +23,9 @@ Automatically capitalize certain characters (only available in Chrome and iOS Sa
* `words`: Automatically capitalize the first letter of words.
<Preview withSource='none'>
<Story name="autoCapitalize">{stories.autoCapitalize}</Story>
<Story name="autoCapitalize">
<Stories.autoCapitalize />
</Story>
</Preview>
### autoComplete
@@ -49,7 +51,9 @@ field and trigger the `onSubmitEditing` event instead of inserting a newline
into the field.
<Preview withSource='none'>
<Story name="blurOnSubmit">{stories.blurOnSubmit}</Story>
<Story name="blurOnSubmit">
<Stories.blurOnSubmit />
</Story>
</Preview>
### clearTextOnFocus: ?boolean = false
@@ -57,7 +61,9 @@ into the field.
If `true`, clears the text field automatically when focused.
<Preview withSource='none'>
<Story name="clearTextOnFocus">{stories.clearTextOnFocus}</Story>
<Story name="clearTextOnFocus">
<Stories.clearTextOnFocus />
</Story>
</Preview>
### defaultValue
@@ -71,7 +77,9 @@ updating the value prop to keep the controlled state in sync.
If `false`, text is not editable (i.e., read-only).
<Preview withSource='none'>
<Story name="editable">{stories.editable}</Story>
<Story name="editable">
<Stories.editable />
</Story>
</Preview>
### keyboardType
@@ -83,7 +91,9 @@ requires an ancestral `<form action>` element to display the `search` keyboard).
(Not available when `multiline` is `true`.)
<Preview withSource='none'>
<Story name="keyboardType">{stories.keyboardType}</Story>
<Story name="keyboardType">
<Stories.keyboardType />
</Story>
</Preview>
### maxLength
@@ -91,7 +101,9 @@ requires an ancestral `<form action>` element to display the `search` keyboard).
Limits the maximum number of characters that can be entered.
<Preview withSource='none'>
<Story name="maxLength">{stories.maxLength}</Story>
<Story name="maxLength">
<Stories.maxLength />
</Story>
</Preview>
### multiline
@@ -99,7 +111,9 @@ Limits the maximum number of characters that can be entered.
If `true`, the text input can be multiple lines.
<Preview withSource='none'>
<Story name="multiline">{stories.multiline}</Story>
<Story name="multiline">
<Stories.multiline />
</Story>
</Preview>
### numberOfLines
@@ -107,7 +121,9 @@ If `true`, the text input can be multiple lines.
Sets the number of lines for a multiline `TextInput`. (Requires `multiline` to be `true`.)
<Preview withSource='none'>
<Story name="numberOfLines">{stories.numberOfLines}</Story>
<Story name="numberOfLines">
<Stories.numberOfLines />
</Story>
</Preview>
### onChange
@@ -138,7 +154,9 @@ Callback that is called when the text input's selection changes. This will be
called with `{ nativeEvent: { selection: { start, end } } }`.
<Preview withSource='none'>
<Story name="onSelectionChange">{stories.onSelectionChange}</Story>
<Story name="onSelectionChange">
<Stories.onSelectionChange />
</Story>
</Preview>
### onSubmitEditing
@@ -151,7 +169,9 @@ Callback that is called when the keyboard's submit button is pressed. When
The string that will be rendered in an empty `TextInput` before text has been entered.
<Preview withSource='none'>
<Story name="placeholder">{stories.placeholder}</Story>
<Story name="placeholder">
<Stories.placeholder />
</Story>
</Preview>
### placeholderTextColor: ?color
@@ -159,7 +179,9 @@ The string that will be rendered in an empty `TextInput` before text has been en
The text color of the placeholder string.
<Preview withSource='none'>
<Story name="placeholderTextColor">{stories.placeholderTextColor}</Story>
<Story name="placeholderTextColor">
<Stories.placeholderTextColor />
</Story>
</Preview>
### returnKeyType
@@ -175,7 +197,9 @@ If `true`, the text input obscures the text entered so that sensitive text like
passwords stay secure. (Not available when `multiline` is `true`.)
<Preview withSource='none'>
<Story name="secureTextEntry">{stories.secureTextEntry}</Story>
<Story name="secureTextEntry">
<Stories.secureTextEntry />
</Story>
</Preview>
### selection: ?{ start: number, end: ?number }
@@ -188,7 +212,9 @@ value to position the cursor.
If `true`, all text will automatically be selected on focus.
<Preview withSource='none'>
<Story name="selectTextOnFocus">{stories.selectTextOnFocus}</Story>
<Story name="selectTextOnFocus">
<Stories.selectTextOnFocus />
</Story>
</Preview>
### spellCheck
@@ -211,7 +237,7 @@ The value to show for the text input. TextInput is a controlled component, which
## Instance methods
<Props of={stories.ofMethods} />
<Props of={Stories.ofMethods} />
### blur()

4
packages/docs/src/components/TouchableHighlight/TouchableHighlight.stories.mdx
View File

@@ -1,5 +1,5 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import * as stories from './TouchableHighlight.stories.js';
import * as Stories from './TouchableHighlight.stories.js';
<Meta title="Components|TouchableHighlight" />
@@ -19,7 +19,7 @@ to have several child components, wrap them in a View.
## Props
<Props of={stories.ofProps} />
<Props of={Stories.ofProps} />
### activeOpacity

6
packages/docs/src/components/TouchableOpacity/TouchableOpacity.stories.mdx
View File

@@ -1,5 +1,5 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import * as stories from './TouchableOpacity.stories.js';
import * as Stories from './TouchableOpacity.stories.js';
<Meta title="Components|TouchableOpacity" />
@@ -13,7 +13,7 @@ added to the view hierarchy. Be aware that this can affect layout.
## Props
<Props of={stories.ofProps} />
<Props of={Stories.ofProps} />
### activeOpacity
@@ -25,4 +25,4 @@ Determines what the opacity of the wrapped view should be when it is focused.
## Instance methods
<Props of={stories.ofMethods} />
<Props of={Stories.ofMethods} />

16
packages/docs/src/components/TouchableWithoutFeedback/TouchableWithoutFeedback.stories.mdx
View File

@@ -1,5 +1,5 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import * as stories from './TouchableWithoutFeedback.stories.js';
import * as Stories from './TouchableWithoutFeedback.stories.js';
<Meta title="Components|TouchableWithoutFeedback" />
@@ -14,7 +14,7 @@ several child components, wrap them in a `View`.
## Props
<Props of={stories.ofProps} />
<Props of={Stories.ofProps} />
### delayLongPress
@@ -33,7 +33,9 @@ Delay in ms, from pointer up to before `onPressOut` is called.
Disables all pointer interactions with the element.
<Preview withSource='none'>
<Story name="disabled">{stories.disabled}</Story>
<Story name="disabled">
<Stories.disabled />
</Story>
</Preview>
### onLongPress
@@ -55,9 +57,13 @@ you pass in a constant to reduce memory allocations.
## Examples
<Preview withSource='none'>
<Story name="delayEvents">{stories.delayEvents}</Story>
<Story name="delayEvents">
<Stories.delayEvents />
</Story>
</Preview>
<Preview withSource='none'>
<Story name="feedbackEvents">{stories.feedbackEvents}</Story>
<Story name="feedbackEvents">
<Stories.feedbackEvents />
</Story>
</Preview>

24
packages/docs/src/components/View/View.stories.mdx
View File

@@ -1,5 +1,5 @@
import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import * as stories from './View.stories.js';
import * as Stories from './View.stories.js';
<Meta title="Components|View" />
@@ -13,7 +13,7 @@ another View and has zero-to-many children of any type.
Please also refer to the in-depth "Accessibility" and "Style" guides.
<Props of={stories.ofProps} />
<Props of={Stories.ofProps} />
### hitSlop
@@ -44,7 +44,9 @@ const onLayout = ({
```
<Preview withSource='none'>
<Story name="onLayout">{stories.onLayout}</Story>
<Story name="onLayout">
<Stories.onLayout />
</Story>
</Preview>
### onMoveShouldSetResponder
@@ -102,7 +104,9 @@ pointer events on the element's children; `box-only` disables pointer events on
the element's children.
<Preview withSource='none'>
<Story name="pointerEvents">{stories.pointerEvents}</Story>
<Story name="pointerEvents">
<Stories.pointerEvents />
</Story>
</Preview>
### testID
@@ -263,13 +267,17 @@ Flexbox is the default layout for Views. By default, every view has a column
layout that stretches its children, which is very similar to block layout.
<Preview withSource='none'>
<Story name="styleFlexbox">{stories.styleFlexbox}</Story>
<Story name="styleFlexbox">
<Stories.styleFlexbox />
</Story>
</Preview>
#### shadows
<Preview withSource='none'>
<Story name="styleBoxShadow">{stories.styleBoxShadow}</Story>
<Story name="styleBoxShadow">
<Stories.styleBoxShadow />
</Story>
</Preview>
#### transform
@@ -295,5 +303,7 @@ only be used to control the relative Z-axis stacking of siblings within their
parent.
<Preview withSource='none'>
<Story name="styleZIndex">{stories.styleZIndex}</Story>
<Story name="styleZIndex">
<Stories.styleZIndex />
</Story>
</Preview>

1222
yarn.lock
View File

File diff suppressed because it is too large Load Diff