✨ (entity selector) display selection at top in single-mode

owid · Apr 9, 2024 · eb67434 · eb67434
1 parent ea10308
commit eb67434
Showing 1 changed file with 50 additions and 14 deletions.
diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx
@@ -548,21 +548,57 @@ export class EntitySelector extends React.Component<{
     }
 
     private renderAllEntitiesInSingleMode(): JSX.Element {
+        const { selected, unselected } = this.partitionedEntities
+
         return (
-            <ul>
-                {this.sortedAvailableEntities.map((entity) => (
-                    <li key={entity.name}>
-                        <SelectableEntity
-                            name={entity.name}
-                            type="radio"
-                            checked={this.isEntitySelected(entity)}
-                            bar={this.getBarConfigForEntity(entity)}
-                            onChange={() => this.onChange(entity.name)}
-                            local={entity.local}
-                        />
-                    </li>
-                ))}
-            </ul>
+            <Flipper
+                spring={{
+                    stiffness: 300,
+                    damping: 33,
+                }}
+                flipKey={this.selectionArray.selectedEntityNames.join(",")}
+            >
+                <ul>
+                    {selected.map((entity) => (
+                        <Flipped
+                            key={entity.name}
+                            flipId={entity.name}
+                            translate
+                            opacity
+                        >
+                            <li key={entity.name}>
+                                <SelectableEntity
+                                    name={entity.name}
+                                    type="radio"
+                                    checked={this.isEntitySelected(entity)}
+                                    bar={this.getBarConfigForEntity(entity)}
+                                    onChange={() => this.onChange(entity.name)}
+                                    local={entity.local}
+                                />
+                            </li>
+                        </Flipped>
+                    ))}
+                    {unselected.map((entity) => (
+                        <Flipped
+                            key={entity.name}
+                            flipId={entity.name}
+                            translate
+                            opacity
+                        >
+                            <li key={entity.name}>
+                                <SelectableEntity
+                                    name={entity.name}
+                                    type="radio"
+                                    checked={this.isEntitySelected(entity)}
+                                    bar={this.getBarConfigForEntity(entity)}
+                                    onChange={() => this.onChange(entity.name)}
+                                    local={entity.local}
+                                />
+                            </li>
+                        </Flipped>
+                    ))}
+                </ul>
+            </Flipper>
         )
     }