diff --git a/Libraries/LogBox/UI/LogBoxInspectorHeader.js b/Libraries/LogBox/UI/LogBoxInspectorHeader.js index 66f1c05a2fb8ae..9d5ecc49774590 100644 --- a/Libraries/LogBox/UI/LogBoxInspectorHeader.js +++ b/Libraries/LogBox/UI/LogBoxInspectorHeader.js @@ -29,19 +29,18 @@ type Props = $ReadOnly<{| |}>; function LogBoxInspectorHeader(props: Props): React.Node { - const prevIndex = props.selectedIndex - 1; - const nextIndex = props.selectedIndex + 1; + const prevIndex = + props.selectedIndex - 1 < 0 ? props.total - 1 : props.selectedIndex - 1; + const nextIndex = + props.selectedIndex + 1 > props.total - 1 ? 0 : props.selectedIndex + 1; - const titleText = - props.total === 1 - ? 'Log' - : `Log ${props.selectedIndex + 1} of ${props.total}`; + const titleText = `Log ${props.selectedIndex + 1} of ${props.total}`; return ( props.onSelectIndex(prevIndex)} @@ -50,7 +49,7 @@ function LogBoxInspectorHeader(props: Props): React.Node { {titleText} = props.total} + disabled={props.total <= 1} level={props.level} image={LogBoxImageSource.chevronRight} onPress={() => props.onSelectIndex(nextIndex)} diff --git a/Libraries/LogBox/UI/__tests__/LogBoxInspectorHeader-test.js b/Libraries/LogBox/UI/__tests__/LogBoxInspectorHeader-test.js index 5c113f4ea06618..b919f08e48b21d 100644 --- a/Libraries/LogBox/UI/__tests__/LogBoxInspectorHeader-test.js +++ b/Libraries/LogBox/UI/__tests__/LogBoxInspectorHeader-test.js @@ -29,7 +29,7 @@ describe('LogBoxInspectorHeader', () => { expect(output).toMatchSnapshot(); }); - it('should render one left button for two total, right selected', () => { + it('should render both buttons for two total', () => { const output = render.shallowRender( {}} @@ -42,7 +42,7 @@ describe('LogBoxInspectorHeader', () => { expect(output).toMatchSnapshot(); }); - it('should render two buttons for three total, middle selected (warning)', () => { + it('should render two buttons for three or more total', () => { const output = render.shallowRender( {}} @@ -54,30 +54,4 @@ describe('LogBoxInspectorHeader', () => { expect(output).toMatchSnapshot(); }); - - it('should render two buttons for three total, middle selected (error)', () => { - const output = render.shallowRender( - {}} - selectedIndex={0} - total={1} - level="error" - />, - ); - - expect(output).toMatchSnapshot(); - }); - - it('should render one right button for two total, left selected', () => { - const output = render.shallowRender( - {}} - selectedIndex={0} - total={2} - level="warn" - />, - ); - - expect(output).toMatchSnapshot(); - }); }); diff --git a/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorHeader-test.js.snap b/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorHeader-test.js.snap index 6dc7cd8287d05a..f18fcfdfddd2ee 100644 --- a/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorHeader-test.js.snap +++ b/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorHeader-test.js.snap @@ -1,61 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`LogBoxInspectorHeader should render no buttons for one total 1`] = ` - - - - - - Log - - - - - -`; - -exports[`LogBoxInspectorHeader should render one left button for two total, right selected 1`] = ` +exports[`LogBoxInspectorHeader should render both buttons for two total 1`] = ` `; -exports[`LogBoxInspectorHeader should render one right button for two total, left selected 1`] = ` +exports[`LogBoxInspectorHeader should render no buttons for one total 1`] = ` - Log 1 of 2 - - - - - -`; - -exports[`LogBoxInspectorHeader should render two buttons for three total, middle selected (error) 1`] = ` - - - - - - Log + Log 1 of 1 `; -exports[`LogBoxInspectorHeader should render two buttons for three total, middle selected (warning) 1`] = ` +exports[`LogBoxInspectorHeader should render two buttons for three or more total 1`] = ` - Log + Log 1 of 1