Use proper keys to ensure no collisions between instruction and objects in InstructionOrObjectSelector

This commit is contained in:
Florian Rival
2019-07-29 00:05:21 +01:00
committed by Florian Rival
parent ac0778ef02
commit 5deaf5f5f2
9 changed files with 48 additions and 20 deletions

View File

@@ -274,7 +274,6 @@ export type InstructionFilteringOptions = {|
searchText: string,
|};
// TODO: Move near filterEnumeratedInstructionOrExpressionMetadataByScope?
export const filterInstructionsList = (
list: Array<EnumeratedInstructionOrExpressionMetadata>,
{ searchText }: InstructionFilteringOptions

View File

@@ -12,6 +12,7 @@ import { renderInstructionTree } from '../SelectorListItems/SelectorInstructions
import EmptyMessage from '../../../UI/EmptyMessage';
import ScrollView from '../../../UI/ScrollView';
import { Column, Line } from '../../../UI/Grid';
import { getInstructionListItemKey } from '../SelectorListItems/Keys';
const SelectableList = makeSelectable(List);
@@ -65,6 +66,7 @@ export default class InstructionOrExpressionSelector extends React.Component<
instructionsInfoTree,
onChoose,
searchBarHintText,
useSubheaders,
} = this.props;
const { searchText } = this.state;
const displayedInstructionsList = searchText
@@ -98,7 +100,7 @@ export default class InstructionOrExpressionSelector extends React.Component<
style={{ backgroundColor: muiTheme.list.itemsBackgroundColor }}
>
{hasResults && (
<SelectableList value={selectedType}>
<SelectableList value={getInstructionListItemKey(selectedType)}>
{searchText
? displayedInstructionsList.map(
enumeratedInstructionOrExpressionMetadata =>
@@ -116,7 +118,7 @@ export default class InstructionOrExpressionSelector extends React.Component<
instructionTreeNode: instructionsInfoTree,
iconSize,
onChoose,
useSubheaders: true,
useSubheaders,
})}
</SelectableList>
)}

View File

@@ -36,6 +36,10 @@ import {
buildTagsMenuTemplate,
getTagsFromString,
} from '../../Utils/TagsHelper';
import {
getObjectOrObjectGroupListItemKey,
getInstructionListItemKey,
} from './SelectorListItems/Keys';
const styles = {
searchBar: {
@@ -235,8 +239,11 @@ export default class InstructionOrObjectSelector extends React.Component<
{hasResults && (
<SelectableList
value={
chosenObjectName ||
chosenInstructionType /* TODO: use prefixes to distinguish object (or groups) and instructions */
chosenObjectName
? getObjectOrObjectGroupListItemKey(chosenObjectName)
: chosenInstructionType
? getInstructionListItemKey(chosenInstructionType)
: ''
}
>
{(isSearching || currentTab === 'objects') &&

View File

@@ -0,0 +1,13 @@
// @flow
// ListItem created must have consistent keys that include their type
// (object, group, instruction) to allow them to be living
// in the same list (in search results) and be selected.
export const getObjectOrObjectGroupListItemKey = (
objectOrObjectGroupName: string
) => `object-or-object-group-${objectOrObjectGroupName}`;
export const getInstructionListItemKey = (instructionType: string) =>
`instruction-${instructionType}`;
export const getSubheaderListItemKey = (subheader: string) =>
`subheader-${subheader}`;

View File

@@ -3,6 +3,7 @@ import * as React from 'react';
import { ListItem } from 'material-ui/List';
import ListIcon from '../../../UI/ListIcon';
import type { GroupWithContext } from '../../../ObjectsList/EnumerateObjects';
import { getObjectOrObjectGroupListItemKey } from './Keys';
type Props = {|
groupWithContext: GroupWithContext,
@@ -18,8 +19,11 @@ export const renderGroupObjectsListItem = ({
const groupName: string = groupWithContext.group.getName();
return (
<ListItem
key={'group-' + groupWithContext.group.ptr}
value={groupName} // TODO: same as key
key={
getObjectOrObjectGroupListItemKey(groupName) +
(groupWithContext.global ? '-global' : '')
}
value={getObjectOrObjectGroupListItemKey(groupName)}
primaryText={groupName}
leftIcon={
<ListIcon

View File

@@ -3,6 +3,7 @@ import * as React from 'react';
import { ListItem } from 'material-ui/List';
import ListIcon from '../../../UI/ListIcon';
import { type EnumeratedInstructionOrExpressionMetadata } from '../InstructionOrExpressionSelector/EnumeratedInstructionOrExpressionMetadata.js';
import { getInstructionListItemKey } from './Keys';
type Props = {|
instructionOrExpressionMetadata: EnumeratedInstructionOrExpressionMetadata,
@@ -17,8 +18,8 @@ export const renderInstructionOrExpressionListItem = ({
}: Props) => {
return (
<ListItem
key={'instruction-' + instructionOrExpressionMetadata.type}
value={instructionOrExpressionMetadata.type} // TODO: same as key
key={getInstructionListItemKey(instructionOrExpressionMetadata.type)}
value={getInstructionListItemKey(instructionOrExpressionMetadata.type)}
primaryText={instructionOrExpressionMetadata.displayedName}
secondaryText={instructionOrExpressionMetadata.fullGroupName}
leftIcon={

View File

@@ -6,6 +6,7 @@ import { type InstructionOrExpressionTreeNode } from '../InstructionOrExpression
import { type EnumeratedInstructionOrExpressionMetadata } from '../InstructionOrExpressionSelector/EnumeratedInstructionOrExpressionMetadata.js';
import Subheader from 'material-ui/Subheader';
import flatten from 'lodash/flatten';
import { getSubheaderListItemKey, getInstructionListItemKey } from './Keys';
type Props = {|
instructionTreeNode: InstructionOrExpressionTreeNode,
@@ -38,11 +39,12 @@ export const renderInstructionTree = ({
if (typeof instructionOrGroup.type === 'string') {
// $FlowFixMe - see above
const instructionInformation: EnumeratedInstructionOrExpressionMetadata = instructionOrGroup;
const value = getInstructionListItemKey(instructionOrGroup.type);
return (
<ListItem
key={key}
key={value}
primaryText={key}
value={instructionOrGroup.type}
value={value}
leftIcon={
<ListIcon
iconSize={iconSize}
@@ -58,7 +60,9 @@ export const renderInstructionTree = ({
// $FlowFixMe - see above
const groupOfInstructionInformation: InstructionOrExpressionTreeNode = instructionOrGroup;
if (useSubheaders) {
return [<Subheader key={'subheader-' + key}>{key}</Subheader>].concat(
return [
<Subheader key={getSubheaderListItemKey(key)}>{key}</Subheader>,
].concat(
renderInstructionTree({
instructionTreeNode: groupOfInstructionInformation,
onChoose,

View File

@@ -4,6 +4,7 @@ import { ListItem } from 'material-ui/List';
import ListIcon from '../../../UI/ListIcon';
import ObjectsRenderingService from '../../../ObjectsRendering/ObjectsRenderingService';
import type { ObjectWithContext } from '../../../ObjectsList/EnumerateObjects';
import { getObjectOrObjectGroupListItemKey } from './Keys';
type Props = {|
project: gdProject,
@@ -21,9 +22,12 @@ export const renderObjectListItem = ({
const objectName: string = objectWithContext.object.getName();
return (
<ListItem
key={'object-' + objectWithContext.object.ptr}
key={
getObjectOrObjectGroupListItemKey(objectName) +
(objectWithContext.global ? '-global' : '')
}
value={getObjectOrObjectGroupListItemKey(objectName)}
primaryText={objectName}
value={objectName} // TODO: same as key
leftIcon={
<ListIcon
iconSize={iconSize}

View File

@@ -126,12 +126,6 @@ export const filterObjectsList = (
});
};
// TODO
// export type GroupFilteringOptions = {|
// searchText: string,
// selectedTags: SelectedTags,
// |};
export const filterGroupsList = (
list: GroupWithContextList,
searchText: string