From 1a0a40d9beef2a3e597126adc06307143dea8ea9 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Sat, 8 Jul 2017 20:24:49 -0700 Subject: [PATCH] Minor improvements to docs text formatting --- .../1-components/ScrollView/ScrollViewDocs.js | 31 ++++++++++--------- .../2-apis/AppRegistry/AppRegistryDocs.js | 19 +++++++----- .../2-apis/Dimensions/DimensionsDocs.js | 1 - docs/storybook/2-apis/NetInfo/NetInfoDocs.js | 24 +++++++++++--- docs/storybook/ui-explorer/Code.js | 3 +- docs/storybook/ui-explorer/DocItem.js | 11 +++++-- docs/storybook/ui-explorer/TextList.js | 3 -- docs/storybook/ui-explorer/UIExplorer.js | 9 +----- docs/storybook/ui-explorer/insertBetween.js | 9 ++++++ 9 files changed, 69 insertions(+), 41 deletions(-) create mode 100644 docs/storybook/ui-explorer/insertBetween.js diff --git a/docs/storybook/1-components/ScrollView/ScrollViewDocs.js b/docs/storybook/1-components/ScrollView/ScrollViewDocs.js index 21e60f29..ba816be0 100644 --- a/docs/storybook/1-components/ScrollView/ScrollViewDocs.js +++ b/docs/storybook/1-components/ScrollView/ScrollViewDocs.js @@ -26,7 +26,7 @@ const sections = [ }} @@ -41,9 +41,15 @@ const sections = [ , + none (the default): drags do not dismiss the keyboard. + , + + on-drag: the keyboard is dismissed when a drag begins. + , + + interactive (not supported on web; same as none) + ]} /> ]} @@ -54,8 +60,8 @@ const sections = [ typeInfo="?function" description={ - Called when scrollable content view of the ScrollView - changes. It's implemented using the onLayout handler + Called when scrollable content view of the ScrollView changes. + It's implemented using the onLayout handler attached to the content container which this ScrollView renders. } @@ -97,8 +103,7 @@ const sections = [ time interval in ms). A lower number yields better accuracy for code that is tracking the scroll position, but can lead to scroll performance problems. The default value is 0, which means the scroll event will be sent only once - each - time the view is scrolled. + each time the view is scrolled. } /> @@ -126,8 +131,7 @@ const sections = [ Returns a reference to the underlying scroll responder, which supports operations like scrollTo. All ScrollView-like components - should implement - this method so that they can be composed while providing access to the + should implement this method so that they can be composed while providing access to the underlying scroll responder's methods. } @@ -159,10 +163,9 @@ storiesOf('Components', module).add('ScrollView', () => description={ A scrollable View that provides itegration with the touch-locking responder - system. ScrollView's - must have a bounded height: either set the height of the view directly (discouraged) or make - sure all parent views have - bounded height (e.g., transfer {'{ flex: 1}'} down the view stack). + system. ScrollView's must have a bounded height: either set the height of the + view directly (discouraged) or make sure all parent views have bounded height (e.g., + transfer {'{ flex: 1}'} down the view stack). } sections={sections} diff --git a/docs/storybook/2-apis/AppRegistry/AppRegistryDocs.js b/docs/storybook/2-apis/AppRegistry/AppRegistryDocs.js index d78996f7..2673cda2 100644 --- a/docs/storybook/2-apis/AppRegistry/AppRegistryDocs.js +++ b/docs/storybook/2-apis/AppRegistry/AppRegistryDocs.js @@ -18,12 +18,14 @@ const sections = [ />, - Register multiple applications. AppConfig is of type - {'{ appKey: string; component: ComponentProvider; run?: Function }'}. - - } + description={[ + Register multiple applications. AppConfig type is:, + {`{ + appKey: string; + component: ComponentProvider; + run?: function +}`} + ]} name="static registerConfig" typeInfo="(config: Array) => avoid" />, @@ -60,9 +62,10 @@ const sections = [ - Runs the application that was registered under appKey. The + Runs the application that was registered under appKey. The{' '} appParameters must include the rootTag into which the - application is rendered, and optionally any initialProps. + application is rendered, and optionally + any initialProps. } example={{ diff --git a/docs/storybook/2-apis/Dimensions/DimensionsDocs.js b/docs/storybook/2-apis/Dimensions/DimensionsDocs.js index 3789a26a..50905b7c 100644 --- a/docs/storybook/2-apis/Dimensions/DimensionsDocs.js +++ b/docs/storybook/2-apis/Dimensions/DimensionsDocs.js @@ -26,7 +26,6 @@ const sections = [ typeInfo="(type: string, handler: function) => void" description={[ Add an event handler. Supported events:, - diff --git a/docs/storybook/2-apis/NetInfo/NetInfoDocs.js b/docs/storybook/2-apis/NetInfo/NetInfoDocs.js index 637fdd63..ccfaf627 100644 --- a/docs/storybook/2-apis/NetInfo/NetInfoDocs.js +++ b/docs/storybook/2-apis/NetInfo/NetInfoDocs.js @@ -4,16 +4,32 @@ import React from 'react'; import { storiesOf } from '@kadira/storybook'; -import UIExplorer, { AppText, Code, DocItem } from '../../ui-explorer'; +import UIExplorer, { AppText, Code, DocItem, TextList } from '../../ui-explorer'; const sections = [ { title: 'Methods', entries: [ + Invokes the listener whenever network status changes. The listener receives one of the + following connectivity types (from the DOM connection API): + , + + ]} example={{ code: "NetInfo.addEventListener('change', (connectionType) => {})" }} diff --git a/docs/storybook/ui-explorer/Code.js b/docs/storybook/ui-explorer/Code.js index 3d215a93..7f849219 100644 --- a/docs/storybook/ui-explorer/Code.js +++ b/docs/storybook/ui-explorer/Code.js @@ -11,6 +11,7 @@ export default Code; const styles = StyleSheet.create({ code: { fontFamily: 'monospace, monospace', - lineHeight: '1.3125em' + lineHeight: '1.3125em', + whiteSpace: 'pre' } }); diff --git a/docs/storybook/ui-explorer/DocItem.js b/docs/storybook/ui-explorer/DocItem.js index 3af1d3f2..1a9ce68a 100644 --- a/docs/storybook/ui-explorer/DocItem.js +++ b/docs/storybook/ui-explorer/DocItem.js @@ -5,16 +5,24 @@ */ import AppText from './AppText'; +import insertBetween from './insertBetween'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; +const Divider = () => ; + const DocItem = ({ description, example = {}, name, typeInfo, label }) => {name && } - {description && {description}} + {description && + + {Array.isArray(description) + ? insertBetween(, description) + : {description}} + } {(example.render || example.code) && Example @@ -61,7 +69,6 @@ const styles = StyleSheet.create({ color: '#025268' }, description: { - fontSize: '1rem', marginTop: 'calc(0.5 * 1.3125rem)' }, renderBox: { diff --git a/docs/storybook/ui-explorer/TextList.js b/docs/storybook/ui-explorer/TextList.js index 1bb41946..a5fc16a7 100644 --- a/docs/storybook/ui-explorer/TextList.js +++ b/docs/storybook/ui-explorer/TextList.js @@ -15,9 +15,6 @@ const TextList = ({ items }) => ; const styles = StyleSheet.create({ - list: { - marginTop: '1rem' - }, item: { position: 'relative', paddingLeft: 20, diff --git a/docs/storybook/ui-explorer/UIExplorer.js b/docs/storybook/ui-explorer/UIExplorer.js index b45bb1c3..8c0e11c8 100644 --- a/docs/storybook/ui-explorer/UIExplorer.js +++ b/docs/storybook/ui-explorer/UIExplorer.js @@ -5,6 +5,7 @@ */ import AppText from './AppText'; +import insertBetween from './insertBetween'; import React from 'react'; import { StyleSheet, View } from 'react-native'; @@ -12,14 +13,6 @@ const Title = ({ children }) => {children} {children}; const SectionTitle = ({ children }) => {children}; -const insertBetween = (item, array) => - array.reduce((acc, curr, i, { length }) => { - if (i && i < length) { - return [...acc, item, curr]; - } - return [...acc, curr]; - }, []); - const Divider = () => ; const SourceLink = ({ uri }) => diff --git a/docs/storybook/ui-explorer/insertBetween.js b/docs/storybook/ui-explorer/insertBetween.js new file mode 100644 index 00000000..08df34a8 --- /dev/null +++ b/docs/storybook/ui-explorer/insertBetween.js @@ -0,0 +1,9 @@ +const insertBetween = (item, array) => + array.reduce((acc, curr, i, { length }) => { + if (i && i < length) { + return [...acc, item, curr]; + } + return [...acc, curr]; + }, []); + +export default insertBetween;