79 lines
1.6 KiB
Text
79 lines
1.6 KiB
Text
import { action } from '@storybook/addon-actions';
|
|
import { ArgsTable, Meta, Preview, Story } from '@storybook/addon-docs';
|
|
|
|
import Modals from '@treejs/components/Modal/components/Modals';
|
|
import TimePicker from '@treejs/components/TimePicker';
|
|
|
|
import StoreProvider from './Modal/redux';
|
|
|
|
<Meta
|
|
title={'Components/TimePicker'}
|
|
component={TimePicker}
|
|
argTypes={{
|
|
modalProps: {
|
|
control: {
|
|
disable: true,
|
|
},
|
|
table: {
|
|
disable: true,
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
|
|
# TimePicker
|
|
|
|
`import TimePicker from '@treejs/components/TimePicker';`
|
|
|
|
### Requirements
|
|
|
|
1. Wrapped with redux store provider.
|
|
|
|
```tsx dark
|
|
import { ROOT_REDUCER_NAME } from '@treejs/constants/redux';
|
|
|
|
import { MODAL_REDUCER_NAME } from '@treejs/components/Modal/constants';
|
|
import modalReducer from '@treejs/components/Modal/reducer';
|
|
|
|
export const mainReducer = combineReducers({
|
|
[ROOT_REDUCER_NAME]: combineReducers({
|
|
[MODAL_REDUCER_NAME]: modalReducer,
|
|
}),
|
|
});
|
|
```
|
|
|
|
2. Somewhere in redux store provider must be used `Modals` component
|
|
from `@treejs/components/Modal/components/Modals`
|
|
|
|
<ArgsTable />
|
|
|
|
export const Template = (args) => {
|
|
const { modalProps, ...select } = args;
|
|
return (
|
|
<StoreProvider>
|
|
<TimePicker onChange={action('clicked')} {...select} />
|
|
<Modals {...modalProps} />
|
|
</StoreProvider>
|
|
);
|
|
};
|
|
|
|
## Default
|
|
|
|
<Preview>
|
|
<Story
|
|
name="Default"
|
|
height="400px"
|
|
args={{
|
|
name: 'datePicker',
|
|
title: 'Choose time',
|
|
value: new Date(new Date().setHours(20, 0)),
|
|
}}
|
|
argTypes={{
|
|
value: {
|
|
control: { type: 'Date' },
|
|
},
|
|
}}
|
|
>
|
|
{Template.bind({})}
|
|
</Story>
|
|
</Preview>
|