Commit 6ba1995a authored by Tasso Evangelista's avatar Tasso Evangelista
Browse files

Add a single Margins story

parent 8a8b5ac2
...@@ -26,7 +26,7 @@ const transforms = [ ...@@ -26,7 +26,7 @@ const transforms = [
mapClassNames, mapClassNames,
]; ];
export const UnmemoizedBox = forwardRef(function Box(props, ref) { export const Box = memo(forwardRef(function Box(props, ref) {
useStyleSheet(); useStyleSheet();
const contextProps = useContext(PropsContext); const contextProps = useContext(PropsContext);
...@@ -39,9 +39,7 @@ export const UnmemoizedBox = forwardRef(function Box(props, ref) { ...@@ -39,9 +39,7 @@ export const UnmemoizedBox = forwardRef(function Box(props, ref) {
} }
return children; return children;
}); }));
export const Box = memo(UnmemoizedBox);
Box.propTypes = { Box.propTypes = {
is: PropTypes.elementType, is: PropTypes.elementType,
......
import { storiesOf } from '@storybook/react'; import { storiesOf } from '@storybook/react';
import React, { StrictMode, useEffect, useState, useRef } from 'react'; import React, { StrictMode, useEffect, useState, useRef } from 'react';
import { Box, Margins, UnmemoizedBox } from '../..'; import { Box, Margins } from '../..';
const MountTest = ({ children }) => { const MountTest = ({ children }) => {
const [length, setLength] = useState(10); const [length, setLength] = useState(10);
...@@ -52,27 +52,11 @@ storiesOf('Box/Performance', module) ...@@ -52,27 +52,11 @@ storiesOf('Box/Performance', module)
<Box/> <Box/>
</Margins>} </Margins>}
</MountTest>) </MountTest>)
.lokiSkip('With One Margins', () => <Margins>
<MountTest>
{(i) => <Box key={i}/>}
</MountTest>
</Margins>)
.lokiSkip('With margin Prop', () => <MountTest> .lokiSkip('With margin Prop', () => <MountTest>
{(i) => <Box key={i} margin='none' />} {(i) => <Box key={i} margin='none' />}
</MountTest>); </MountTest>);
storiesOf('Box/Performance/Unmemoized', module)
.addParameters({
jest: ['Box/spec'],
docs: { disable: true },
})
.addDecorator((fn) => <StrictMode>{fn()}</StrictMode>)
.lokiSkip('Without Props', () => <MountTest>
{(i) => <UnmemoizedBox key={i} />}
</MountTest>)
.lokiSkip('With is Prop', () => <MountTest>
{(i) => <UnmemoizedBox key={i} is='button' />}
</MountTest>)
.lokiSkip('With Margins', () => <MountTest>
{(i) => <Margins key={i}>
<UnmemoizedBox/>
</Margins>}
</MountTest>)
.lokiSkip('With margin Prop', () => <MountTest>
{(i) => <UnmemoizedBox key={i} margin='none' />}
</MountTest>);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment