react-cosmos-ui 6.0.0-alpha.11 → 6.0.0-alpha.13

package/dist/plugins/FixtureTree/FixtureTree/FixtureButton.d.ts

@@ -2,11 +2,11 @@ import { RefObject } from 'react';
 import { FixtureId } from 'react-cosmos-core';
 type Props = {
     name: string;
-    fixtureId: FixtureId;
+    fixturePath: string;
     indentLevel: number;
     selected: boolean;
     selectedRef: RefObject<HTMLElement>;
     onSelect: (fixtureId: FixtureId) => unknown;
 };
-export declare function FixtureButton({ name, fixtureId, indentLevel, selected, selectedRef, onSelect, }: Props): JSX.Element;
+export declare function FixtureButton({ name, fixturePath, indentLevel, selected, selectedRef, onSelect, }: Props): JSX.Element;
 export {};

package/dist/plugins/FixtureTree/FixtureTree/FixtureButton.js

@@ -3,8 +3,8 @@ import styled from 'styled-components';
 import { quick } from '../../../style/vars.js';
 import { FixtureLink } from './FixtureLink.js';
 import { FixtureTreeItem } from './FixtureTreeItem.js';
-export function FixtureButton({ name, fixtureId, indentLevel, selected, selectedRef, onSelect, }) {
-    return (React.createElement(FixtureLink, { fixtureId: fixtureId, onSelect: onSelect },
+export function FixtureButton({ name, fixturePath, indentLevel, selected, selectedRef, onSelect, }) {
+    return (React.createElement(FixtureLink, { fixtureId: { path: fixturePath }, onSelect: onSelect },
         React.createElement(FixtureTreeItem, { ref: selected ? selectedRef : undefined, indentLevel: indentLevel, selected: selected },
             React.createElement(Name, null, name))));
 }

package/dist/plugins/FixtureTree/FixtureTree/FixtureTree.js

@@ -1,8 +1,7 @@
-import { isEqual } from 'lodash-es';
 import React from 'react';
 import styled from 'styled-components';
 import { TreeView } from '../../../components/TreeView.js';
-import { nodeContainsFixtureId, recordContainsFixtureId, } from '../../../shared/fixtureTree.js';
+import { fixtureTreeNodeContainsFixtureId } from '../../../shared/fixtureTree.js';
 import { grey32 } from '../../../style/colors.js';
 import { FixtureButton } from './FixtureButton.js';
 import { FixtureDir } from './FixtureDir.js';
@@ -12,19 +11,18 @@ export const FixtureTree = React.memo(function FixtureTree({ rootNode, selectedF
         React.createElement(TreeView, { node: rootNode, expansion: expansion, setExpansion: setExpansion, renderNode: ({ node, name, parents, expanded, onToggle }) => {
                 const { data, children } = node;
                 if (data.type === 'fixture') {
-                    const selected = isEqual(selectedFixtureId, data.fixtureId);
-                    return (React.createElement(FixtureButton, { name: name, fixtureId: data.fixtureId, indentLevel: parents.length, selected: selected, selectedRef: selectedRef, onSelect: onSelect }));
+                    const selected = selectedFixtureId?.path === data.path;
+                    return (React.createElement(FixtureButton, { name: name, fixturePath: data.path, indentLevel: parents.length, selected: selected, selectedRef: selectedRef, onSelect: onSelect }));
                 }
                 if (data.type === 'multiFixture') {
-                    const selected = selectedFixtureId !== null &&
-                        recordContainsFixtureId(data.fixtureIds, selectedFixtureId);
-                    return (React.createElement(MultiFixtureButton, { name: name, fixtureIds: data.fixtureIds, indentLevel: parents.length, selected: selected, selectedFixtureId: selectedFixtureId, selectedRef: selectedRef, onSelect: onSelect }));
+                    const selected = selectedFixtureId?.path === data.path;
+                    return (React.createElement(MultiFixtureButton, { name: name, fixturePath: data.path, fixtureNames: data.names, indentLevel: parents.length, selected: selected, selectedFixtureId: selectedFixtureId, selectedRef: selectedRef, onSelect: onSelect }));
                 }
                 if (!children)
                     return null;
                 const selected = !expanded &&
                     selectedFixtureId !== null &&
-                    nodeContainsFixtureId(node, selectedFixtureId);
+                    fixtureTreeNodeContainsFixtureId(node, selectedFixtureId);
                 return (React.createElement(FixtureDir, { name: name, indentLevel: parents.length, expanded: expanded, selected: selected, onToggle: onToggle }));
             } })));
 });

package/dist/plugins/FixtureTree/FixtureTree/MultiFixtureButton.d.ts

@@ -2,12 +2,13 @@ import { RefObject } from 'react';
 import { FixtureId } from 'react-cosmos-core';
 type Props = {
     name: string;
-    fixtureIds: Record<string, FixtureId>;
+    fixturePath: string;
+    fixtureNames: string[];
     indentLevel: number;
     selected: boolean;
     selectedFixtureId: null | FixtureId;
     selectedRef: RefObject<HTMLElement>;
     onSelect: (fixtureId: FixtureId) => unknown;
 };
-export declare function MultiFixtureButton({ name, fixtureIds, indentLevel, selected, selectedFixtureId, selectedRef, onSelect, }: Props): JSX.Element | null;
+export declare function MultiFixtureButton({ name, fixturePath, fixtureNames, indentLevel, selected, selectedFixtureId, selectedRef, onSelect, }: Props): JSX.Element;
 export {};

package/dist/plugins/FixtureTree/FixtureTree/MultiFixtureButton.js

@@ -1,17 +1,12 @@
-import { isEqual } from 'lodash-es';
 import React from 'react';
 import styled from 'styled-components';
 import { grey8 } from '../../../style/colors.js';
 import { FixtureLink } from './FixtureLink.js';
 import { FixtureTreeItem } from './FixtureTreeItem.js';
 import { MultiFixtureChildButton } from './MultiFixtureChildButton.js';
-export function MultiFixtureButton({ name, fixtureIds, indentLevel, selected, selectedFixtureId, selectedRef, onSelect, }) {
-    const fixtureNames = Object.keys(fixtureIds);
-    const firstFixtureId = fixtureIds[fixtureNames[0]];
-    if (!firstFixtureId)
-        return null;
+export function MultiFixtureButton({ name, fixturePath, fixtureNames, indentLevel, selected, selectedFixtureId, selectedRef, onSelect, }) {
     if (!selected)
-        return (React.createElement(FixtureLink, { fixtureId: firstFixtureId, onSelect: onSelect },
+        return (React.createElement(FixtureLink, { fixtureId: { path: fixturePath }, onSelect: onSelect },
             React.createElement(FixtureTreeItem, { indentLevel: indentLevel, selected: false },
                 React.createElement(Name, null, name),
                 React.createElement(Count, null, fixtureNames.length))));
@@ -19,9 +14,14 @@ export function MultiFixtureButton({ name, fixtureIds, indentLevel, selected, se
         React.createElement(FixtureTreeItem, { indentLevel: indentLevel, selected: true },
             React.createElement(Name, null, name),
             React.createElement(Count, null, fixtureNames.length)),
-        fixtureNames.map(fixtureName => {
-            const fixtureId = fixtureIds[fixtureName];
-            const childSelected = isEqual(fixtureId, selectedFixtureId);
+        fixtureNames.map((fixtureName, index) => {
+            const fixtureId = { path: fixturePath, name: fixtureName };
+            // Select first child when only the path of a multi fixture is selected
+            const childSelected = selectedFixtureId !== null &&
+                selectedFixtureId.path === fixturePath &&
+                (selectedFixtureId.name === undefined
+                    ? index === 0
+                    : fixtureName === selectedFixtureId.name);
             return (React.createElement(MultiFixtureChildButton, { key: fixtureName, name: fixtureName, fixtureId: fixtureId, indentLevel: indentLevel + 1, selected: childSelected, selectedRef: selectedRef, onSelect: onSelect }));
         }),
         React.createElement(FooterPadding, null)));

package/dist/plugins/FixtureTree/revealFixture.js

@@ -1,5 +1,5 @@
 import { createFixtureTree, } from 'react-cosmos-core';
-import { nodeContainsFixtureId } from '../../shared/fixtureTree.js';
+import { fixtureTreeNodeContainsFixtureId } from '../../shared/fixtureTree.js';
 import { getTreeExpansion, setTreeExpansion, } from './shared.js';
 export function revealFixture(context, fixtureId) {
     const { getMethodsOf } = context;
@@ -32,7 +32,7 @@ function findDirPath({ data, children }, fixtureId, parents = []) {
     for (let childName of childNames) {
         const childNode = children[childName];
         if (childNode.data.type !== 'fileDir') {
-            if (nodeContainsFixtureId(childNode, fixtureId))
+            if (fixtureTreeNodeContainsFixtureId(childNode, fixtureId))
                 return parents;
         }
         else {

package/dist/plugins/RendererCore/isValidFixtureSelected.js

@@ -9,8 +9,9 @@ export function isValidFixtureSelected(context) {
         return false;
     }
     const fixtureItem = fixtures[fixtureId.path];
-    return fixtureItem.type === 'multi'
-        ? fixtureId.name !== undefined &&
-            fixtureItem.fixtureNames.indexOf(fixtureId.name) !== -1
-        : fixtureId.name === undefined;
+    return ((fixtureItem.type === 'single' && fixtureId.name === undefined) ||
+        // Allow selecting multi fixtures by path only
+        (fixtureItem.type === 'multi' &&
+            (fixtureId.name === undefined ||
+                fixtureItem.fixtureNames.indexOf(fixtureId.name) !== -1)));
 }

package/dist/plugins/RendererCore/receiveResponse/fixtureListItemUpdate.d.ts

@@ -0,0 +1,3 @@
+import { FixtureListItemUpdateResponse } from 'react-cosmos-core';
+import { RendererCoreContext } from '../shared/index.js';
+export declare function receiveFixtureListItemUpdateResponse(context: RendererCoreContext, { payload }: FixtureListItemUpdateResponse): void;

package/dist/plugins/RendererCore/receiveResponse/fixtureListItemUpdate.js

@@ -0,0 +1,14 @@
+export function receiveFixtureListItemUpdateResponse(context, { payload }) {
+    const { rendererId, fixturePath, fixtureItem } = payload;
+    const { primaryRendererId } = context.getState();
+    // Discard updates from secondary renderers
+    if (rendererId === primaryRendererId) {
+        context.setState(prevState => ({
+            ...prevState,
+            fixtures: {
+                ...prevState.fixtures,
+                [fixturePath]: fixtureItem,
+            },
+        }));
+    }
+}

package/dist/plugins/RendererCore/receiveResponse/index.js

@@ -1,3 +1,4 @@
+import { receiveFixtureListItemUpdateResponse } from './fixtureListItemUpdate.js';
 import { receiveFixtureListUpdateResponse } from './fixtureListUpdate.js';
 import { receiveFixtureStateChangeResponse } from './fixtureStateChange.js';
 import { receivePlaygroundCommandResponse } from './playgroundCommand.js';
@@ -10,6 +11,8 @@ export function receiveResponse(context, msg) {
             return receiveRendererReadyResponse(context, rendererResponse);
         case 'fixtureListUpdate':
             return receiveFixtureListUpdateResponse(context, rendererResponse);
+        case 'fixtureListItemUpdate':
+            return receiveFixtureListItemUpdateResponse(context, rendererResponse);
         case 'fixtureStateChange':
             return receiveFixtureStateChangeResponse(context, rendererResponse);
         case 'playgroundCommand':

package/dist/plugins/Root/RendererHeader.js

@@ -24,7 +24,12 @@ export const RendererHeader = React.memo(function RendererHeader({ fixtureItems,
             React.createElement(IconButton32, { icon: React.createElement(SlidersIcon, null), title: "Toggle control panel", selected: panelOpen, onClick: onTogglePanel }))));
 });
 function findFixtureItemById(fixtureItems, fixtureId) {
-    return fixtureItems.find(fixtureItem => isEqual(fixtureItem.fixtureId, fixtureId));
+    if (fixtureId.name) {
+        return fixtureItems.find(fixtureItem => isEqual(fixtureItem.fixtureId, fixtureId));
+    }
+    // When a multi fixture is selected by path only, the first of its named
+    // fixtures will be selected.
+    return fixtureItems.find(fixtureItem => fixtureItem.fixtureId.path === fixtureId.path);
 }
 function getFixtureName({ name, fileName }) {
     return name ? `${fileName} ${name}` : fileName;

package/dist/shared/fixtureTree.d.ts

@@ -1,3 +1,2 @@
 import { FixtureId, FixtureTreeNode } from 'react-cosmos-core';
-export declare function recordContainsFixtureId(fixtureIds: Record<string, FixtureId>, fixtureId: FixtureId): boolean;
-export declare function nodeContainsFixtureId({ data, children }: FixtureTreeNode, fixtureId: FixtureId): boolean;
+export declare function fixtureTreeNodeContainsFixtureId({ data, children }: FixtureTreeNode, fixtureId: FixtureId): boolean;

package/dist/shared/fixtureTree.js

@@ -1,12 +1,7 @@
-import { isEqual } from 'lodash-es';
-export function recordContainsFixtureId(fixtureIds, fixtureId) {
-    return Object.keys(fixtureIds).some(fixtureName => isEqual(fixtureIds[fixtureName], fixtureId));
-}
-export function nodeContainsFixtureId({ data, children }, fixtureId) {
-    if (data.type === 'fixture')
-        return isEqual(data.fixtureId, fixtureId);
-    if (data.type === 'multiFixture')
-        return recordContainsFixtureId(data.fixtureIds, fixtureId);
+export function fixtureTreeNodeContainsFixtureId({ data, children }, fixtureId) {
+    if (data.type === 'fixture' || data.type === 'multiFixture') {
+        return data.path === fixtureId.path;
+    }
     return (children !== undefined &&
-        Object.keys(children).some(childName => nodeContainsFixtureId(children[childName], fixtureId)));
+        Object.keys(children).some(childName => fixtureTreeNodeContainsFixtureId(children[childName], fixtureId)));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cosmos-ui",
-  "version": "6.0.0-alpha.11",
+  "version": "6.0.0-alpha.13",
   "description": "React Cosmos UI",
   "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/packages/react-cosmos-ui",
   "license": "MIT",
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "lodash-es": "^4.17.21",
-    "react-cosmos-core": "^6.0.0-alpha.11"
+    "react-cosmos-core": "6.0.0-alpha.13"
   },
   "devDependencies": {
     "fuzzaldrin-plus": "^0.6.0",
@@ -23,5 +23,5 @@
     "react-plugin": "^3.0.0-alpha.4",
     "styled-components": "^5.3.8"
   },
-  "gitHead": "8e9d1e52749388f471f6ec848a8c904ec8b89f67"
+  "gitHead": "cf95e67ce942f6a242f023ecebe45d6916d5b753"
 }