Skip to content

Commit

Permalink
fix: sync StoryContext on change story
Browse files Browse the repository at this point in the history
  • Loading branch information
@atanasster
atanasster committed Apr 12, 2020
1 parent 32024f2 commit b8ff182
Show file tree
Hide file tree
Showing 8 changed files with 136 additions and 133 deletions.
4 changes: 0 additions & 4 deletions integrations/storybook/src/preset.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,6 @@ module.exports = {
managerEntries: (entry: any[] = [], options: any = {}) => {
const result = [...entry];
result.push(require.resolve('./register'));
const { addonPanel = true } = options;
if (addonPanel) {
result.push(require.resolve('./register-panel'));
}
return result;
},
};
3 changes: 1 addition & 2 deletions ui/blocks/src/ControlsTable/SingleControlsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,9 +91,8 @@ export const SingleControlsTable: FC<SingleControlsTableProps> = ({
},
},
],
[],
[storyId],
);

return (
<Table
skipPageReset={skipPageReset}
Expand Down
128 changes: 67 additions & 61 deletions ui/blocks/src/Playground/Playground.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,71 +76,77 @@ export const Playground: FC<PlaygroundProps> = ({
const index = panels.findIndex((p: ActionItem) => p.title === openTab);
setTabsIndex(index > -1 ? index : undefined);
}, [openTab]);
const panelActions = userActions.map((panel: ActionItem) => {
return panel.panel
? {
...panel,
onClick: (e: MouseEvent<HTMLButtonElement>) => {
const index = panels.findIndex(
(p: ActionItem) => p.title === panel.title,
);
if (index < 0) {
return undefined;
}
if (tabsIndex === index) {
setTabsIndex(undefined);
} else {
if (panel.onClick) {
const ret = panel.onClick(e);
if (ret === true) {
setTabsIndex(index);
return ret;
} else if (ret === false) {
const panelActions = React.useMemo(
() =>
userActions.map((panel: ActionItem) => {
return panel.panel
? {
...panel,
onClick: (e: MouseEvent<HTMLButtonElement>) => {
const index = panels.findIndex(
(p: ActionItem) => p.title === panel.title,
);
if (index < 0) {
return undefined;
}
if (tabsIndex === index) {
setTabsIndex(undefined);
return ret;
} else {
if (panel.onClick) {
const ret = panel.onClick(e);
if (ret === true) {
setTabsIndex(index);
return ret;
} else if (ret === false) {
setTabsIndex(undefined);
return ret;
}
}
setTabsIndex(index);
}
}
setTabsIndex(index);
return undefined;
},
}
return undefined;
},
}
: panel;
});

const zoomActions = [
{
title: (
<Button onClick={() => setScale(1)} aria-label="reset zoom">
<Octicon icon={Sync} />
</Button>
),
id: 'zoomreset',
group: 'zoom',
},
{
title: (
<Button onClick={() => setScale(scale / 2)} aria-label="zoom out">
<Octicon icon={Dash} />
</Button>
),
id: 'zoomout',
group: 'zoom',
},
{
title: (
<Button onClick={() => setScale(scale * 2)} aria-label="zoom in">
<Octicon icon={Plus} />
</Button>
),
id: 'zoomin',
group: 'zoom',
},
];
const actions: ActionItem[] = [];
actions.push.apply(actions, panelActions);
: panel;
}),
[userActions],
);

const actionsItems = userScale ? [...zoomActions, ...actions] : actions;
const zoomActions = React.useMemo(
() => [
{
title: (
<Button onClick={() => setScale(1)} aria-label="reset zoom">
<Octicon icon={Sync} />
</Button>
),
id: 'zoomreset',
group: 'zoom',
},
{
title: (
<Button onClick={() => setScale(scale / 2)} aria-label="zoom out">
<Octicon icon={Dash} />
</Button>
),
id: 'zoomout',
group: 'zoom',
},
{
title: (
<Button onClick={() => setScale(scale * 2)} aria-label="zoom in">
<Octicon icon={Plus} />
</Button>
),
id: 'zoomin',
group: 'zoom',
},
],
[],
);
const actionsItems = userScale
? [...zoomActions, ...panelActions]
: panelActions;
return (
<StoryBlockContainer
name={name}
Expand Down
22 changes: 11 additions & 11 deletions ui/blocks/src/context/block/BlockContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,18 +34,18 @@ export const BlockContextProvider: React.FC<BlockContextInputProps> = ({
}) => {
const storeProvider = mockStore || storyStore;
return (
<BlockContext.Provider
value={{
storyId,
storeProvider,
}}
>
<BlockDataContextProvider store={storeProvider}>
<BlockControlsContextProvider store={storeProvider}>
<BlockDataContextProvider store={storeProvider}>
<BlockControlsContextProvider store={storeProvider}>
<BlockContext.Provider
value={{
storyId,
storeProvider,
}}
>
{children}
</BlockControlsContextProvider>
</BlockDataContextProvider>
</BlockContext.Provider>
</BlockContext.Provider>
</BlockControlsContextProvider>
</BlockDataContextProvider>
);
};

Expand Down
31 changes: 15 additions & 16 deletions ui/blocks/src/context/story/StoryContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export interface StoryContextProps {
*
* Context to be used by components that will display 'story' information
*/

export const useStoryContext = ({
id = CURRENT_STORY,
name,
Expand All @@ -57,33 +58,31 @@ export const useStoryContext = ({
component?: StoryComponent;
}>(getStoryData(storyId));

const updateData = () => {
const { story, kind, component } = getStoryData(storyId);
setData({ story, kind, component });
const updateData = (updateId?: string) => {
if (!updateId || updateId === storyId) {
const { story, kind, component } = getStoryData(storyId);
setData({ story, kind, component });
}
};

useEffect(() => {
const { story } = data;
if (story?.id !== storyId) {
updateData(storyId);
}
const onChange = (id?: string) => {
if (storyId === id) {
updateData();
}
updateData(id);
};
storeProvider.addObserver(onChange);

return () => {
storeProvider.removeObserver(onChange);
};
}, []);

useEffect(() => {
const { story } = data;
if (!story || story.id !== storyId) {
updateData();
}
}, [storyId]);

return {
id: storyId,
...data,
story: data.story,
kind: data.kind,
component: data.component,
};
};

Expand Down
68 changes: 32 additions & 36 deletions ui/components/src/ActionBar/ActionBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,37 @@ export const ActionBar: FunctionComponent<ActionBarProps> = ({
}) => {
const { theme } = useThemeUI();
const sortedItems = getSortedActions(actions);
const items = sortedItems.map(
({ title, onClick, disabled, 'aria-label': ariaLabel, group }, index) => {
const nextGroup =
index < sortedItems.length - 1 ? sortedItems[index + 1].group : group;
return (
<Box
key={`${typeof title === 'string' ? title : 'item'}_${index}`}
sx={{
mt: 1,
mr: index === 0 ? 1 : 0,
ml: nextGroup != group || group === undefined ? 2 : 1,
fontSize: 1,
a: ActionColors({ theme, disabled }),
button: ActionColors({ theme, disabled }),
}}
>
{typeof title === 'string' ? (
<Button
onClick={onClick}
disabled={disabled}
aria-label={ariaLabel}
>
{title}
</Button>
) : (
title
)}
</Box>
);
},
);

return (
<div
Expand All @@ -68,42 +99,7 @@ export const ActionBar: FunctionComponent<ActionBarProps> = ({
marginLeft: 'auto',
}}
>
{sortedItems.map(
(
{ title, onClick, disabled, 'aria-label': ariaLabel, group },
index,
) => {
const nextGroup =
index < sortedItems.length - 1
? sortedItems[index + 1].group
: group;
return (
<Box
key={`${typeof title === 'string' ? title : 'item'}_${index}`}
sx={{
mt: 1,
mr: index === 0 ? 1 : 0,
ml: nextGroup != group || group === undefined ? 2 : 1,
fontSize: 1,
a: ActionColors({ theme, disabled }),
button: ActionColors({ theme, disabled }),
}}
>
{typeof title === 'string' ? (
<Button
onClick={onClick}
disabled={disabled}
aria-label={ariaLabel}
>
{title}
</Button>
) : (
title
)}
</Box>
);
},
)}
{items}
</div>
</Flex>
</div>
Expand Down
4 changes: 2 additions & 2 deletions ui/components/src/Table/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {
Column,
Cell,
Row,
PluginHook,
TableOptions,
UseFiltersOptions,
UseExpandedOptions,
Expand All @@ -35,6 +34,7 @@ import { useTableLayout } from './useTableLayout';

const defaultColumn = memoize(() => ({
subRows: undefined,
accessor: '',
}));

interface TableOwnProps {
Expand Down Expand Up @@ -102,7 +102,7 @@ export const Table: FC<TableProps> = ({
skipPageReset,
...rest
}) => {
const plugins: PluginHook<any>[] = [
const plugins = [
useTableLayout,
useGlobalFilter,
useGroupBy,
Expand Down
9 changes: 8 additions & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4025,6 +4025,13 @@
"@webassemblyjs/wast-parser" "1.9.0"
"@xtuc/long" "4.2.2"

"@welldone-software/why-did-you-render@^4.0.7":
version "4.0.7"
resolved "https://registry.yarnpkg.com/@welldone-software/why-did-you-render/-/why-did-you-render-4.0.7.tgz#13c81eef665a34911c029dff821b23cd2495567b"
integrity sha512-Equ+x6Tp8ZaDcypdP36Ag/bzjIsYAUSQVScXWtRuOkBknP1UPM0Gc5plEeADLYRgrO8IEF/WGxJ7442EGbdyEA==
dependencies:
lodash "^4"

"@xtuc/ieee754@^1.2.0":
version "1.2.0"
resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
Expand Down Expand Up @@ -10700,7 +10707,7 @@ [email protected]:
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.14.tgz#9ce487ae66c96254fe20b599f21b6816028078ba"
integrity sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==

[email protected], lodash@^4.0.1, lodash@^4.11.2, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1:
[email protected], lodash@^4, lodash@^4.0.1, lodash@^4.11.2, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1:
version "4.17.15"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
Expand Down

0 comments on commit b8ff182

Please sign in to comment.