From 505d58d65d4cbfa4deca49aec84c753187bc7114 Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Sun, 18 Mar 2018 18:44:30 +0100 Subject: [PATCH] docs: rename RadioGroup to RadioButtonGroup and fix docs --- example/src/ExampleList.js | 4 +- ...pExample.js => RadioButtonGroupExample.js} | 12 +++--- src/components/RadioButton.ios.js | 6 +-- src/components/RadioButton.js | 19 +++++---- .../{RadioGroup.js => RadioButtonGroup.js} | 42 +++++++++---------- src/index.js | 2 +- 6 files changed, 42 insertions(+), 43 deletions(-) rename example/src/{RadioGroupExample.js => RadioButtonGroupExample.js} (84%) rename src/components/{RadioGroup.js => RadioButtonGroup.js} (61%) diff --git a/example/src/ExampleList.js b/example/src/ExampleList.js index 7768091..58f598f 100644 --- a/example/src/ExampleList.js +++ b/example/src/ExampleList.js @@ -14,7 +14,7 @@ import FABExample from './FABExample'; import PaperExample from './PaperExample'; import ProgressBarExample from './ProgressBarExample'; import RadioButtonExample from './RadioButtonExample'; -import RadioGroupExample from './RadioGroupExample'; +import RadioButtonGroupExample from './RadioButtonGroupExample'; import RippleExample from './RippleExample'; import SearchBarExample from './SearchBarExample'; import SwitchExample from './SwitchExample'; @@ -39,7 +39,7 @@ export const examples = { paper: PaperExample, progressbar: ProgressBarExample, radio: RadioButtonExample, - radioGroup: RadioGroupExample, + radioGroup: RadioButtonGroupExample, ripple: RippleExample, searchbar: SearchBarExample, switch: SwitchExample, diff --git a/example/src/RadioGroupExample.js b/example/src/RadioButtonGroupExample.js similarity index 84% rename from example/src/RadioGroupExample.js rename to example/src/RadioButtonGroupExample.js index fc5fa7d..d4e34ca 100644 --- a/example/src/RadioGroupExample.js +++ b/example/src/RadioButtonGroupExample.js @@ -5,7 +5,7 @@ import { View, StyleSheet } from 'react-native'; import { Colors, withTheme, - RadioGroup, + RadioButtonGroup, RadioButton, Paragraph, } from 'react-native-paper'; @@ -19,8 +19,8 @@ type State = { value: string, }; -class RadioGroupExample extends React.Component { - static title = 'Radio group'; +class RadioButtonGroupExample extends React.Component { + static title = 'Radio button group'; state = { value: 'first', @@ -37,7 +37,7 @@ class RadioGroupExample extends React.Component { }, ]} > - this.setState({ value })} > @@ -49,7 +49,7 @@ class RadioGroupExample extends React.Component { Second - + ); } @@ -70,4 +70,4 @@ const styles = StyleSheet.create({ }, }); -export default withTheme(RadioGroupExample); +export default withTheme(RadioButtonGroupExample); diff --git a/src/components/RadioButton.ios.js b/src/components/RadioButton.ios.js index 2c83904..911f556 100644 --- a/src/components/RadioButton.ios.js +++ b/src/components/RadioButton.ios.js @@ -6,7 +6,7 @@ import color from 'color'; import Icon from './Icon'; import TouchableRipple from './TouchableRipple'; import withTheme from '../core/withTheme'; -import { RadioGroupContext } from './RadioGroup'; +import { RadioButtonContext } from './RadioButtonGroup'; import type { Theme } from '../types'; type Props = { @@ -42,7 +42,7 @@ type Props = { class RadioButton extends React.Component { render() { return ( - + {context => { const { disabled, onPress, theme, ...rest } = this.props; @@ -92,7 +92,7 @@ class RadioButton extends React.Component { ); }} - + ); } } diff --git a/src/components/RadioButton.js b/src/components/RadioButton.js index f15473e..74ce1d4 100644 --- a/src/components/RadioButton.js +++ b/src/components/RadioButton.js @@ -5,7 +5,7 @@ import { Animated, View, Platform, StyleSheet } from 'react-native'; import color from 'color'; import TouchableRipple from './TouchableRipple'; import withTheme from '../core/withTheme'; -import { RadioGroupContext } from './RadioGroup'; +import { RadioButtonContext } from './RadioButtonGroup'; import type { Theme } from '../types'; type Props = { @@ -43,7 +43,7 @@ type State = { const BORDER_WIDTH = 2; /** - * Radio buttons allow the selection a single option from a set + * Radio buttons allow the selection a single option from a set. * *
*
@@ -72,21 +72,22 @@ const BORDER_WIDTH = 2; * * export default class MyComponent extends React.Component { * state = { - * checked: 'firstOption', + * checked: 'first', * }; * * render() { * const { checked } = this.state; + * * return ( * * { this.setState({ checked: 'firstOption' }); }} * /> * { this.setState({ checked: 'secondOption' }); }} * /> * @@ -123,7 +124,7 @@ class RadioButton extends React.Component { render() { return ( - + {context => { const { disabled, onPress, theme, ...rest } = this.props; const checkedColor = this.props.color || theme.colors.accent; @@ -191,7 +192,7 @@ class RadioButton extends React.Component { ); }} - + ); } } diff --git a/src/components/RadioGroup.js b/src/components/RadioButtonGroup.js similarity index 61% rename from src/components/RadioGroup.js rename to src/components/RadioButtonGroup.js index 07221d6..4ded5e0 100644 --- a/src/components/RadioGroup.js +++ b/src/components/RadioButtonGroup.js @@ -5,31 +5,36 @@ import createReactContext, { type Context } from 'create-react-context'; type Props = { /** - * React elements containing radio buttons - */ - children: React.Node, - /** - * Function to execute on selection change + * Function to execute on selection change. */ onValueChange: (value: string) => mixed, /** - * Value of currently selected Radio + * Value of the currently selected radio button. */ value: string, + /** + * React elements containing radio buttons. + */ + children: React.Node, }; -type RadioContext = { +type RadioButtonContextType = { value: string, onValueChange: (item: string) => mixed, }; +export const RadioButtonContext: Context = createReactContext( + null +); + /** - * RadioGroup allows the selection of a single RadioButton + * Radio button group allows to control a group of radio buttons. + * * ## Usage * ```js * import * as React from 'react'; * import { View } from 'react-native'; - * import { RadioGroup, RadioButton } from 'react-native-paper'; + * import { RadioButtonGroup, RadioButton } from 'react-native-paper'; * * export default class MyComponent extends Component { * state = { @@ -38,7 +43,7 @@ type RadioContext = { * * render() { * return( - * this.setState({ value })} * value={this.state.value} * > @@ -50,29 +55,22 @@ type RadioContext = { * Second * * - * + * * ) * } * } *``` */ - -export const RadioGroupContext: Context = createReactContext( - null -); - -class RadioGroup extends React.Component { +class RadioButtonGroup extends React.Component { render() { const { value, onValueChange, children } = this.props; return ( - + {children} - + ); } } -export default RadioGroup; +export default RadioButtonGroup; diff --git a/src/index.js b/src/index.js index ddf7d71..606e4ee 100644 --- a/src/index.js +++ b/src/index.js @@ -32,7 +32,7 @@ export { default as Modal } from './components/Modal'; export { default as Paper } from './components/Paper'; export { default as ProgressBar } from './components/ProgressBar'; export { default as RadioButton } from './components/RadioButton'; -export { default as RadioGroup } from './components/RadioGroup'; +export { default as RadioButtonGroup } from './components/RadioButtonGroup'; export { default as SearchBar } from './components/SearchBar'; export { default as Switch } from './components/Switch'; export { default as Toolbar } from './components/Toolbar/Toolbar';