mirror of
https://github.com/4ian/GDevelop.git
synced 2025-10-15 10:19:04 +00:00
Use proper keys to ensure no collisions between instruction and objects in InstructionOrObjectSelector
This commit is contained in:

committed by
Florian Rival

parent
ac0778ef02
commit
5deaf5f5f2
@@ -274,7 +274,6 @@ export type InstructionFilteringOptions = {|
|
||||
searchText: string,
|
||||
|};
|
||||
|
||||
// TODO: Move near filterEnumeratedInstructionOrExpressionMetadataByScope?
|
||||
export const filterInstructionsList = (
|
||||
list: Array<EnumeratedInstructionOrExpressionMetadata>,
|
||||
{ searchText }: InstructionFilteringOptions
|
||||
|
@@ -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>
|
||||
)}
|
||||
|
@@ -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') &&
|
||||
|
@@ -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}`;
|
@@ -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
|
||||
|
@@ -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={
|
||||
|
@@ -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,
|
||||
|
@@ -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}
|
||||
|
@@ -126,12 +126,6 @@ export const filterObjectsList = (
|
||||
});
|
||||
};
|
||||
|
||||
// TODO
|
||||
// export type GroupFilteringOptions = {|
|
||||
// searchText: string,
|
||||
// selectedTags: SelectedTags,
|
||||
// |};
|
||||
|
||||
export const filterGroupsList = (
|
||||
list: GroupWithContextList,
|
||||
searchText: string
|
||||
|
Reference in New Issue
Block a user