GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 08:01:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #18499 from storybookjs/fix-interactions-array

Browse Source 
Interactions: Fix broken UI on nested interactions
This commit is contained in:
Michael Shilman 2022-06-17 18:44:41 +08:00 committed by GitHub
commit 3863591a8f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx
View File

@ -35,6 +35,12 @@ export const Demo: CSF2Story = (args) => (
Demo.play = async ({ args, canvasElement }) => {
await userEvent.click(within(canvasElement).getByRole('button'));
await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
await expect([{ name: 'John', age: 42 }]).toEqual(
expect.arrayContaining([
expect.objectContaining({ name: 'John' }),
expect.objectContaining({ age: 42 }),
])
);
};
export const FindBy: CSF2Story = (args) => {

16
addons/interactions/src/components/MethodCall.tsx
View File

@ -112,7 +112,7 @@ export const Node = ({
case value === undefined:
return <UndefinedNode {...props} />;
case Array.isArray(value):
return <ArrayNode {...props} value={value} />;
return <ArrayNode {...props} value={value} callsById={callsById} />;
case typeof value === 'string':
return <StringNode {...props} value={value} />;
case typeof value === 'number':
@ -191,12 +191,22 @@ export const BooleanNode = ({ value, ...props }: { value: boolean }) => {
);
};
export const ArrayNode = ({ value, nested = false }: { value: any[]; nested?: boolean }) => {
export const ArrayNode = ({
value,
nested = false,
callsById,
}: {
value: any[];
nested?: boolean;
callsById?: Map<Call['id'], Call>;
}) => {
const colors = useThemeColors();
if (nested) {
return <span style={{ color: colors.base }}>[…]</span>;
}
const nodes = value.slice(0, 3).map((v) => <Node key={v} value={v} nested />);
const nodes = value
.slice(0, 3)
.map((v) => <Node key={JSON.stringify(v)} value={v} nested callsById={callsById} />);
const nodelist = interleave(nodes, <span>, </span>);
if (value.length <= 3) {
return <span style={{ color: colors.base }}>[{nodelist}]</span>;