From 5077aeca5cb6a67ca5623426868afff09c2b556a Mon Sep 17 00:00:00 2001 From: Chris Glein <26607885+chrisglein@users.noreply.github.com> Date: Wed, 17 Apr 2024 17:59:53 -0700 Subject: [PATCH 1/8] Add radio button example page Uses the JS-only react-native-radio-buttons-group --- package.json | 1 + src/RNGalleryList.ts | 7 +++ src/examples/RadioButtonsExamplePage.tsx | 72 ++++++++++++++++++++++++ 3 files changed, 80 insertions(+) create mode 100644 src/examples/RadioButtonsExamplePage.tsx diff --git a/package.json b/package.json index 5b512233..8e8dd6e0 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "react-native-linear-gradient": "3.0.0-alpha.1", "react-native-permissions": "^3.8.1", "react-native-print": "0.8.0", + "react-native-radio-buttons-group": "^3.1.0", "react-native-reanimated": "^1.10.0", "react-native-safe-area-context": "^4.2.4", "react-native-screens": "^2.9.0", diff --git a/src/RNGalleryList.ts b/src/RNGalleryList.ts index 18f8bda0..0de16114 100644 --- a/src/RNGalleryList.ts +++ b/src/RNGalleryList.ts @@ -32,6 +32,7 @@ import {SensitiveInfoExamplePage} from './examples/SensitiveInfoExamplePage'; import {PopupExamplePage} from './examples/PopupExamplePage'; import {FlyoutExamplePage} from './examples/FlyoutExamplePage'; import {ProgressViewExamplePage} from './examples/ProgressViewExamplePage'; +import {RadioButtonsExamplePage} from './examples/RadioButtonsExamplePage'; import {XamlExamplePage} from './examples/XamlExamplePage'; import {TrackPlayerExamplePage} from './examples/TrackPlayerExamplePage'; import {WindowsHelloExamplePage} from './examples/WindowsHelloExamplePage'; @@ -199,6 +200,12 @@ export const RNGalleryList: Array = [ "Shows the apps progress on a task, or that the app is performing ongoing work that doesn't block user interaction.", type: 'Basic Input', }, + { + key: 'Radio Buttons', + component: RadioButtonsExamplePage, + icon: '\uECCB', + type: 'Basic Input', + }, { key: 'ScrollView', component: ScrollViewExamplePage, diff --git a/src/examples/RadioButtonsExamplePage.tsx b/src/examples/RadioButtonsExamplePage.tsx new file mode 100644 index 00000000..41689bcd --- /dev/null +++ b/src/examples/RadioButtonsExamplePage.tsx @@ -0,0 +1,72 @@ +'use strict'; +import React, {useState} from 'react'; +import {Text, View} from 'react-native'; +import {Example} from '../components/Example'; +import {Page} from '../components/Page'; +import RadioGroup from 'react-native-radio-buttons-group'; + +export const RadioButtonsExamplePage: React.FunctionComponent<{}> = () => { + const [radioSelection, setRadioSelection] = useState('3'); + const example1jsx = ``; + return ( + + + Options: + + + {`Output: +You selected Option ${radioSelection}`} + + + + ); +}; From 5428c61803f70e487c7deec9d1341eb573ca278a Mon Sep 17 00:00:00 2001 From: Chris Glein <26607885+chrisglein@users.noreply.github.com> Date: Tue, 16 Apr 2024 14:00:21 -0700 Subject: [PATCH 2/8] Add RNX-based radio group example --- src/examples/XamlExamplePage.tsx | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/src/examples/XamlExamplePage.tsx b/src/examples/XamlExamplePage.tsx index bfe176e1..4b1464da 100644 --- a/src/examples/XamlExamplePage.tsx +++ b/src/examples/XamlExamplePage.tsx @@ -1,5 +1,5 @@ 'use strict'; -import {View} from 'react-native'; +import {Text, View} from 'react-native'; import React, {useState} from 'react'; import {Example} from '../components/Example'; import {Page} from '../components/Page'; @@ -7,6 +7,7 @@ import { TextBlock, Button, Hyperlink, + RadioButton, Run, ToggleSwitch, ComboBox, @@ -24,6 +25,10 @@ export const XamlExamplePage: React.FunctionComponent<{}> = () => { const [menuFlyoutOption, setMenuFlyoutOption] = useState( 'MenuFlyout Option 1', ); + const [selectedRadioButton, setSelectedRadioButton] = useState('1'); + const onRadioButtonSelected = (event) => { + setSelectedRadioButton(event.nativeEvent?.sender.tag) + } const example1jsx = ''; const example2jsx = @@ -77,6 +82,17 @@ export const XamlExamplePage: React.FunctionComponent<{}> = () => { `; +const example9jsx = ` +const [selectedRadioButton, setSelectedRadioButton] = useState('1'); +const onRadioButtonSelected = (event) => { + setSelectedRadioButton(event.nativeEvent?.sender.tag) +} + + + + + +`; return ( = () => { + + + + + + + + {`Output: +You selected Option ${selectedRadioButton}`} + + From ce0b527806918997c0fe678da792fd3f69e724d9 Mon Sep 17 00:00:00 2001 From: Chris Glein <26607885+chrisglein@users.noreply.github.com> Date: Thu, 18 Apr 2024 17:37:00 -0700 Subject: [PATCH 3/8] Linting fixes --- src/examples/XamlExamplePage.tsx | 30 +++++++++++++++++++++--------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/src/examples/XamlExamplePage.tsx b/src/examples/XamlExamplePage.tsx index 4b1464da..198f5593 100644 --- a/src/examples/XamlExamplePage.tsx +++ b/src/examples/XamlExamplePage.tsx @@ -27,8 +27,8 @@ export const XamlExamplePage: React.FunctionComponent<{}> = () => { ); const [selectedRadioButton, setSelectedRadioButton] = useState('1'); const onRadioButtonSelected = (event) => { - setSelectedRadioButton(event.nativeEvent?.sender.tag) - } + setSelectedRadioButton(event.nativeEvent?.sender.tag); + }; const example1jsx = ''; const example2jsx = @@ -82,11 +82,10 @@ export const XamlExamplePage: React.FunctionComponent<{}> = () => { `; -const example9jsx = ` -const [selectedRadioButton, setSelectedRadioButton] = useState('1'); + const example9jsx = `const [selectedRadioButton, setSelectedRadioButton] = useState('1'); const onRadioButtonSelected = (event) => { - setSelectedRadioButton(event.nativeEvent?.sender.tag) -} + setSelectedRadioButton(event.nativeEvent?.sender.tag); +}; @@ -131,9 +130,22 @@ const onRadioButtonSelected = (event) => { - - - + + + {`Output: You selected Option ${selectedRadioButton}`} From 3944013088ca578069369fd48b21a2269fe1bf04 Mon Sep 17 00:00:00 2001 From: Chris Glein <26607885+chrisglein@users.noreply.github.com> Date: Thu, 18 Apr 2024 17:48:25 -0700 Subject: [PATCH 4/8] Update snapshots --- __tests__/App-test.js | 7 + __tests__/__snapshots__/App-test.js.snap | 591 ++++++++++++++++++++++- 2 files changed, 597 insertions(+), 1 deletion(-) diff --git a/__tests__/App-test.js b/__tests__/App-test.js index 64279663..e097c9db 100644 --- a/__tests__/App-test.js +++ b/__tests__/App-test.js @@ -34,6 +34,8 @@ import {XamlExamplePage} from '../src/examples/XamlExamplePage'; //import {TrackPlayerExamplePage} from '../src/examples/TrackPlayerExamplePage'; import {WindowsHelloExamplePage} from '../src/examples/WindowsHelloExamplePage'; import {ExpanderExamplePage} from '../src/examples/ExpanderExamplePage'; +// Unable to import: {export * from './types'; SyntaxError: Unexpected token 'export' +//import {RadioButtonsExamplePage} from '../src/examples/RadioButtonsExamplePage'; import {View} from 'react-native'; function Control() { @@ -137,6 +139,11 @@ test('ProgressView Example Page', () => { expect(tree).toMatchSnapshot(); }); +/*test('Radio Buttons Example Page', () => { + const tree = create().toJSON(); + expect(tree).toMatchSnapshot(); +});*/ + test('ScrollView Example Page', () => { const tree = create().toJSON(); expect(tree).toMatchSnapshot(); diff --git a/__tests__/__snapshots__/App-test.js.snap b/__tests__/__snapshots__/App-test.js.snap index 66e79d61..fee3a414 100644 --- a/__tests__/__snapshots__/App-test.js.snap +++ b/__tests__/__snapshots__/App-test.js.snap @@ -8156,7 +8156,7 @@ exports[`Expander Example Page 1`] = ` undefined, ] } - timeZoneOffsetInSeconds={-0} + timeZoneOffsetInSeconds={-28800} /> @@ -50159,6 +50159,595 @@ exports[`Xaml Example Page 1`] = ` + + + A simple XAML radio group. + + + + + + + + + + + Output: +You selected Option 1 + + + + + + + + + const + + + + [selectedRadioButton, setSelectedRadioButton] = useState( + + + + '1' + + + + ); + + + + + const + + + + onRadioButtonSelected = + + + + ( + + + + event + + + + ) => + + + + { + setSelectedRadioButton(event.nativeEvent?.sender.tag); +}; + + + + + + + < + + + + View + + + + > + + + + + + + + + < + + + + RadioButton + + + + + + + + content + + + + = + + + + "Option 1" + + + + + + + + tag + + + + = + + + + "1" + + + + + + + + isChecked + + + + = + + + + {true} + + + + + + + + onChecked + + + + = + + + + {onRadioButtonSelected}/ + + + + > + + + + + + + + + < + + + + RadioButton + + + + + + + + content + + + + = + + + + "Option 2" + + + + + + + + tag + + + + = + + + + "2" + + + + + + + + onChecked + + + + = + + + + {onRadioButtonSelected}/ + + + + > + + + + + + + + + < + + + + RadioButton + + + + + + + + content + + + + = + + + + "Option 3" + + + + + + + + tag + + + + = + + + + "3" + + + + + + + + onChecked + + + + = + + + + {onRadioButtonSelected}/ + + + + > + + + + + + + + + </ + + + + View + + + + > + + + + + + + + Date: Sat, 20 Apr 2024 10:57:23 -0700 Subject: [PATCH 5/8] Fix snapshot --- __tests__/__snapshots__/App-test.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/__tests__/__snapshots__/App-test.js.snap b/__tests__/__snapshots__/App-test.js.snap index fee3a414..d2053c9f 100644 --- a/__tests__/__snapshots__/App-test.js.snap +++ b/__tests__/__snapshots__/App-test.js.snap @@ -8156,7 +8156,7 @@ exports[`Expander Example Page 1`] = ` undefined, ] } - timeZoneOffsetInSeconds={-28800} + timeZoneOffsetInSeconds={-0} /> From 8cc6be1ece5b13a4020a69eba4a99c00328c00c8 Mon Sep 17 00:00:00 2001 From: Chris Glein <26607885+chrisglein@users.noreply.github.com> Date: Tue, 23 Apr 2024 14:07:58 -0700 Subject: [PATCH 6/8] Add tracking bug number --- __tests__/App-test.js | 1 + 1 file changed, 1 insertion(+) diff --git a/__tests__/App-test.js b/__tests__/App-test.js index e097c9db..b33b0ab2 100644 --- a/__tests__/App-test.js +++ b/__tests__/App-test.js @@ -34,6 +34,7 @@ import {XamlExamplePage} from '../src/examples/XamlExamplePage'; //import {TrackPlayerExamplePage} from '../src/examples/TrackPlayerExamplePage'; import {WindowsHelloExamplePage} from '../src/examples/WindowsHelloExamplePage'; import {ExpanderExamplePage} from '../src/examples/ExpanderExamplePage'; +// https://github.com/microsoft/react-native-gallery/issues/420 // Unable to import: {export * from './types'; SyntaxError: Unexpected token 'export' //import {RadioButtonsExamplePage} from '../src/examples/RadioButtonsExamplePage'; import {View} from 'react-native'; From c843d5eb3edb3d0b5abfce5b2e9145c3abb3ebcb Mon Sep 17 00:00:00 2001 From: Chris Glein <26607885+chrisglein@users.noreply.github.com> Date: Tue, 23 Apr 2024 17:13:03 -0700 Subject: [PATCH 7/8] Update snapshots --- __tests__/__snapshots__/App-test.js.snap | 94 +++++++++++++++++++++++- 1 file changed, 92 insertions(+), 2 deletions(-) diff --git a/__tests__/__snapshots__/App-test.js.snap b/__tests__/__snapshots__/App-test.js.snap index d2053c9f..e22f81f4 100644 --- a/__tests__/__snapshots__/App-test.js.snap +++ b/__tests__/__snapshots__/App-test.js.snap @@ -50177,7 +50177,7 @@ exports[`Xaml Example Page 1`] = ` style={ { "borderColor": "rgb(216, 216, 216)", - "borderRadius": 2, + "borderRadius": 8, "borderWidth": 1, } } @@ -50185,6 +50185,11 @@ exports[`Xaml Example Page 1`] = ` + + + +  + + + From 962a9cd5bd0d784870002bf60329137627d4492a Mon Sep 17 00:00:00 2001 From: Chris Glein <26607885+chrisglein@users.noreply.github.com> Date: Tue, 23 Apr 2024 17:30:29 -0700 Subject: [PATCH 8/8] Add full color icon image for radio --- src/RNGalleryList.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/RNGalleryList.ts b/src/RNGalleryList.ts index 0de16114..2a08df92 100644 --- a/src/RNGalleryList.ts +++ b/src/RNGalleryList.ts @@ -203,7 +203,10 @@ export const RNGalleryList: Array = [ { key: 'Radio Buttons', component: RadioButtonsExamplePage, - icon: '\uECCB', + textIcon: '\uECCB', + imageIcon: require('../assets/ControlImages/RadioButtons.png'), + subtitle: + 'A control that allows the user to select a single option from a group of options.', type: 'Basic Input', }, {