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

feat(grid): fix backgroundImage property and memoize grid selector

Browse Source
This commit is contained in:
Michael Mok 2019-09-01 23:58:22 +08:00
parent f42a99dff7
commit 9410b0eca4
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
addons/backgrounds/src/containers/GridSelector.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent } from 'react';
import React, { FunctionComponent, memo } from 'react';
import { useAddonState, useParameter } from '@storybook/api';
import { Global } from '@storybook/theming';
@ -12,7 +12,7 @@ export interface BackgroundGridParameters {
const iframeId = 'storybook-preview-iframe';
export const GridSelector: FunctionComponent = () => {
export const GridSelector: FunctionComponent = memo(() => {
const [state, setState] = useAddonState<boolean>(`${ADDON_ID}/grid`);
const { cellSize } = useParameter<BackgroundGridParameters>(GRID_PARAM_KEY, { cellSize: 20 });
@ -37,15 +37,15 @@ export const GridSelector: FunctionComponent = () => {
backgroundPosition: '-1px -1px, -1px -1px, -1px -1px, -1px -1px',
backgroundBlendMode: 'difference',
backgroundImage: [
'linear-gradient(rgba(130, 130, 130,0.5) 1px,transparent 1px)',
'linear-gradient(90deg,rgb(130, 130, 130,0.5) 1px,transparent 1px)',
'linear-gradient(rgba(130, 130, 130, 0.25) 1px,transparent 1px)',
'linear-gradient(90deg,rgba(130, 130, 130, 0.25) 1px,transparent 1px)',
].join(','),
'linear-gradient(rgba(130, 130, 130, 0.5) 1px, transparent 1px)',
'linear-gradient(90deg, rgba(130, 130, 130, 0.5) 1px, transparent 1px)',
'linear-gradient(rgba(130, 130, 130, 0.25) 1px, transparent 1px)',
'linear-gradient(90deg, rgba(130, 130, 130, 0.25) 1px, transparent 1px)',
].join(', '),
},
}}
/>
) : null}
</IconButton>
);
};
});