jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use fragments instead of arrays when returning elements

Browse Source 
Summary: Returning arrays from render kills react-reconciliation and produces missing key warnings. Turned all array rendering methods to use Fragments, where I could find them.

Reviewed By: jknoxville

Differential Revision: D21178253

fbshipit-source-id: 85ddf8adfa79732ccbe68409fdcf150399455983
This commit is contained in:
Michel Weststrate
2020-04-23 03:45:43 -07:00
committed by Facebook GitHub Bot
parent 67412bfb43
commit f07d898a35
5 changed files with 73 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
desktop/app/src/plugins/TableNativePlugin.tsx
View File

@@ -188,20 +188,22 @@ function renderToolbar(section: ToolbarSection) {
</Button> </Button>
); );
case 'input': case 'input':
return [ return (
<Label>{item.label}</Label>, <>
<Select <Label>{item.label}</Label>
options={item.options.reduce( <Select
(obj: {[key: string]: string}, item) => { options={item.options.reduce(
obj[item] = item; (obj: {[key: string]: string}, item) => {
return obj; obj[item] = item;
}, return obj;
{}, },
)} {},
selected={item.value} )}
onChange={() => {}} selected={item.value}
/>, onChange={() => {}}
]; />
</>
);
} }
}); });
return ( return (

34
desktop/app/src/ui/components/data-inspector/DataDescription.tsx
View File

@@ -566,12 +566,17 @@ class DataDescriptionContainer extends Component<{
return <UndefinedValue>(not set)</UndefinedValue>; return <UndefinedValue>(not set)</UndefinedValue>;
} else if (colorInfo) { } else if (colorInfo) {
const {a, b, g, r} = colorInfo; const {a, b, g, r} = colorInfo;
return [ return (
<ColorBox key="color-box" color={`rgba(${r}, ${g}, ${b}, ${a})`} />, <>
<ColorValue key="value"> <ColorBox
rgba({r}, {g}, {b}, {a === 1 ? '1' : a.toFixed(2)}) key="color-box"
</ColorValue>, color={`rgba(${r}, ${g}, ${b}, ${a})`}
]; />
<ColorValue key="value">
rgba({r}, {g}, {b}, {a === 1 ? '1' : a.toFixed(2)})
</ColorValue>
</>
);
} else { } else {
return <span>Malformed color</span>; return <span>Malformed color</span>;
} }
@@ -583,12 +588,17 @@ class DataDescriptionContainer extends Component<{
return <UndefinedValue>(not set)</UndefinedValue>; return <UndefinedValue>(not set)</UndefinedValue>;
} else if (colorInfo) { } else if (colorInfo) {
const {a, b, g, r} = colorInfo; const {a, b, g, r} = colorInfo;
return [ return (
<ColorBox key="color-box" color={`rgba(${r}, ${g}, ${b}, ${a})`} />, <>
<ColorValue key="value"> <ColorBox
rgba({r}, {g}, {b}, {a === 1 ? '1' : a.toFixed(2)}) key="color-box"
</ColorValue>, color={`rgba(${r}, ${g}, ${b}, ${a})`}
]; />
<ColorValue key="value">
rgba({r}, {g}, {b}, {a === 1 ? '1' : a.toFixed(2)})
</ColorValue>
</>
);
} else { } else {
return <span>Malformed color</span>; return <span>Malformed color</span>;
} }

6
desktop/app/src/ui/components/searchable/Searchable.tsx
View File

@@ -22,7 +22,7 @@ import styled from '@emotion/styled';
import debounce from 'lodash.debounce'; import debounce from 'lodash.debounce';
import ToggleButton from '../ToggleSwitch'; import ToggleButton from '../ToggleSwitch';
import React from 'react'; import React from 'react';
import VerticalContainer from '../Layout'; import Layout from '../Layout';
const SearchBar = styled(Toolbar)({ const SearchBar = styled(Toolbar)({
height: 42, height: 42,
@@ -466,7 +466,7 @@ const Searchable = (
render() { render() {
const {placeholder, actions, ...props} = this.props; const {placeholder, actions, ...props} = this.props;
return ( return (
<VerticalContainer scrollable> <Layout>
<SearchBar position="top" key="searchbar"> <SearchBar position="top" key="searchbar">
<SearchBox tabIndex={-1}> <SearchBox tabIndex={-1}>
<SearchIcon <SearchIcon
@@ -534,7 +534,7 @@ const Searchable = (
bodySearchEnabled={this.state.bodySearchEnabled} bodySearchEnabled={this.state.bodySearchEnabled}
filters={this.state.filters} filters={this.state.filters}
/> />
</VerticalContainer> </Layout>
); );
} }
}; };

10
desktop/plugins/databases/index.js
View File

@@ -1038,10 +1038,12 @@ export default class DatabasesPlugin extends FlipperPlugin<
}; };
renderStructure() { renderStructure() {
return [ return (
renderDatabaseColumns(this.state.currentStructure), <>
renderDatabaseIndexes(this.state.currentStructure), {renderDatabaseColumns(this.state.currentStructure)}
]; {renderDatabaseIndexes(this.state.currentStructure)}
</>
);
} }
renderSidebar = (table: QueriedTable) => { renderSidebar = (table: QueriedTable) => {

50
desktop/plugins/fresco/ImagesCacheOverview.tsx
View File

@@ -299,30 +299,32 @@ class ImageGrid extends PureComponent<{
return null; return null;
} }
return [ return (
<ImageGridHeader <>
key="header" <ImageGridHeader
title={this.props.title} key="header"
subtitle={this.props.subtitle} title={this.props.title}
onClear={this.props.onClear} subtitle={this.props.subtitle}
/>, onClear={this.props.onClear}
<ImageGrid.Content key="content"> />
{images.map((imageId) => ( <ImageGrid.Content key="content">
<ImageItem {images.map((imageId) => (
imageId={imageId} <ImageItem
image={this.props.imagesMap[imageId]} imageId={imageId}
key={imageId} image={this.props.imagesMap[imageId]}
selected={selectedImage != null && selectedImage === imageId} key={imageId}
onSelected={onImageSelected} selected={selectedImage != null && selectedImage === imageId}
size={this.props.size} onSelected={onImageSelected}
numberOfRequests={ size={this.props.size}
this.props.events.filter((e) => e.imageIds.includes(imageId)) numberOfRequests={
.length this.props.events.filter((e) => e.imageIds.includes(imageId))
} .length
/> }
))} />
</ImageGrid.Content>, ))}
]; </ImageGrid.Content>
</>
);
} }
} }