Skip to content

Commit

Permalink
feat:update callback story with new args
Browse files Browse the repository at this point in the history
  • Loading branch information
RyoSogawa committed Sep 1, 2023
1 parent 56ca723 commit d633d59
Showing 1 changed file with 26 additions and 31 deletions.
57 changes: 26 additions & 31 deletions stories/Callback.stories.tsx
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React from 'react';

import SampleBox from './components/SampleBox';
import SampleSeparator from './components/SampleSeparator';
Expand All @@ -16,34 +16,29 @@ export const Callback: StoryObj<typeof Resizable> = {
axis: 'x',
initial: 200,
},
render: (props) => {
const [date, setDate] = useState<Date | null>(null);

return (
<Resizable
{...props}
onResizeStart={() => setDate(new Date())}
onResizeEnd={() => alert(`You dragged!`)}
>
{({ position: x, separatorProps }) => (
<div style={{ display: 'flex', height: '100vh', overflow: 'hidden' }}>
<SampleBox
id="left-block"
theme="blue"
width={x}
size={x}
text={date && `dragging from ${date.toISOString()}`}
/>
<SampleSeparator id="splitter" {...separatorProps} />
<SampleBox
id="right-block"
theme="red"
width={`calc(100% - ${x}px)`}
text={date && `dragging from ${date.toISOString()}`}
/>
</div>
)}
</Resizable>
);
},
render: (props) => (
<Resizable
{...props}
onResizeStart={(args) => {
console.table(args);
}}
onResizeEnd={(args) => {
console.table(args);
}}
>
{({ position: x, separatorProps }) => (
<div style={{ display: 'flex', height: '100vh', overflow: 'hidden' }}>
<SampleBox
id="left-block"
theme="blue"
width={x}
size={x}
text="You can see the callback arguments in the log"
/>
<SampleSeparator id="splitter" {...separatorProps} />
<SampleBox id="right-block" theme="red" width={`calc(100% - ${x}px)`} />
</div>
)}
</Resizable>
),
};

1 comment on commit d633d59

@vercel
Copy link

@vercel vercel bot commented on d633d59 Sep 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.