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): add cellSize option and use it to calculate grid sizes

Browse Source
This commit is contained in:
Michael Mok 2019-09-01 23:57:09 +08:00
parent 64f5ec4cc9
commit f42a99dff7
1 changed files with 13 additions and 3 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,15 +1,20 @@
import React, { FunctionComponent } from 'react';
import { useAddonState } from '@storybook/api';
import { useAddonState, useParameter } from '@storybook/api';
import { Global } from '@storybook/theming';
import { Icons, IconButton } from '@storybook/components';
import { ADDON_ID } from '../constants';
import { ADDON_ID, GRID_PARAM_KEY } from '../constants';
export interface BackgroundGridParameters {
cellSize: number;
}
const iframeId = 'storybook-preview-iframe';
export const GridSelector: FunctionComponent = () => {
const [state, setState] = useAddonState<boolean>(`${ADDON_ID}/grid`);
const { cellSize } = useParameter<BackgroundGridParameters>(GRID_PARAM_KEY, { cellSize: 20 });
return (
<IconButton
@ -23,7 +28,12 @@ export const GridSelector: FunctionComponent = () => {
<Global
styles={{
[`#${iframeId}`]: {
backgroundSize: '100px 100px, 100px 100px, 20px 20px, 20px 20px',
backgroundSize: [
`${cellSize * 5}px ${cellSize * 5}px`,
`${cellSize * 5}px ${cellSize * 5}px`,
`${cellSize}px ${cellSize}px`,
`${cellSize}px ${cellSize}px`,
].join(', '),
backgroundPosition: '-1px -1px, -1px -1px, -1px -1px, -1px -1px',
backgroundBlendMode: 'difference',
backgroundImage: [