feat: move template inside story

persian-tools · Aug 6, 2021 · 9bfba3d · 9bfba3d
1 parent 5747e6b
commit 9bfba3d
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 26 deletions.
diff --git a/src/stories/base.tsx b/src/stories/base.tsx
@@ -13,31 +13,19 @@ import type { PickerProps } from '../index.types';
 import type { WheelPickerSelectEvent } from '../index';
 import type { Event } from '../components/WheelPicker/index.types';
 
-export const Template: ComponentStory<typeof Picker> = (args) => {
-  const pickerProps = { theme: 'light', ...args } as Required<PickerProps>;
-  const [selectedDateValue, setSelectedDateValue] = React.useState<string>();
-  const [selectedDateEvents, setSelectedDateEvents] = React.useState<
-    Array<Event>
-  >([]);
-
-  function handleOnChange(data: WheelPickerSelectEvent) {
-    setSelectedDateValue(format(data.date!, 'd MMMM yyyy'));
-    setSelectedDateEvents(data.events);
-    action('onClick')(data);
-  }
+interface Props {
+  value: string;
+  events: Array<Event>;
+}
 
+export const BaseTemplate: React.FC<Props> = (props) => {
   return (
     <StoryWrapper>
       <p>تاریخ انتخابی:</p>
-      <input
-        type="string"
-        readOnly
-        value={selectedDateValue}
-        className="input"
-      />
+      <input type="string" readOnly value={props.value} className="input" />
       <p>رویداد های روز:</p>
       <ul>
-        {selectedDateEvents.map((event, index) => (
+        {props.events.map((event, index) => (
           <li key={`events_${index}`}>
             <label className="event-label">
               دسته بندی: <span className="event-label-value">{event.type}</span>
@@ -48,11 +36,7 @@ export const Template: ComponentStory<typeof Picker> = (args) => {
           </li>
         ))}
       </ul>
-      <Picker
-        {...pickerProps}
-        onChange={handleOnChange}
-        onSubmit={handleOnChange}
-      />
+      {props.children}
     </StoryWrapper>
   );
 };

diff --git a/src/stories/columns-caption-with-styles.stories.tsx b/src/stories/columns-caption-with-styles.stories.tsx
@@ -1,11 +1,46 @@
-import { createBaseStory, Template } from './base';
-import { createDateInstance } from '../index';
+import React from 'react';
+import { createBaseStory, BaseTemplate } from './base';
+import {
+  createDateInstance,
+  format,
+  Picker,
+  WheelPickerSelectEvent,
+} from '../index';
 // Types
 import type { DatePickerConfig } from '../index';
+import { ComponentStory } from '@storybook/react';
+import { PickerProps } from '../index.types';
+import { action } from '@storybook/addon-actions';
+import type { Event } from '../components/WheelPicker/index.types';
 
 export default createBaseStory('Columns Caption With Styles');
 
+const Template: ComponentStory<typeof Picker> = (args) => {
+  const pickerProps = { theme: 'light', ...args } as Required<PickerProps>;
+  const [selectedDateValue, setSelectedDateValue] = React.useState<string>();
+  const [selectedDateEvents, setSelectedDateEvents] = React.useState<
+    Array<Event>
+  >([]);
+
+  function handleOnChange(data: WheelPickerSelectEvent) {
+    setSelectedDateValue(format(data.date!, 'd MMMM yyyy'));
+    setSelectedDateEvents(data.events);
+    action('onClick')(data);
+  }
+
+  return (
+    <BaseTemplate value={selectedDateValue!} events={selectedDateEvents!}>
+      <Picker
+        {...pickerProps}
+        onChange={handleOnChange}
+        onSubmit={handleOnChange}
+      />
+    </BaseTemplate>
+  );
+};
+
 export const ColumnsCaptionWithStyles = Template.bind({});
+
 const ColumnsCaptionWithStyleConfig: DatePickerConfig = {
   year: {
     caption: {