Sha256: 6cd729cb5e8e83bc7f74dc96b621fdd5f12a0bec8b2245c6145d831a70a2c01c
Contents?: true
Size: 1.52 KB
Versions: 51
Compression:
Stored size: 1.52 KB
Contents
import { Meta, Story, Preview, Props, action } from '@theforeman/stories';
import { TASKS_DASHBOARD_AVAILABLE_TIMES } from '../../../../TasksDashboardConstants';
import TimeDropDown from './TimeDropDown';
<Meta
title="TasksDashboard/TasksTimeRow/TimeDropDown"
component={TimeDropDown}
/>
# TimeDropDown
Render a dropdown with the available dashboard times to render.
<Props of={TimeDropDown} />
The available-times defined as a constant at `Components/TasksDashboard/TasksDashboardConstants.js`:
```js
import { TASKS_DASHBOARD_AVAILABLE_TIMES } from './Components/TasksDashboard/TasksDashboardConstants';
```
To set the current selected time, set the `selectedTime` prop to `TASKS_DASHBOARD_AVAILABLE_TIMES.H24`.
<Preview>
<Story name="24 hours">
<TimeDropDown
id="time-period-dropdown"
selectedTime={TASKS_DASHBOARD_AVAILABLE_TIMES.H24}
onChange={action('onChange')}
/>
</Story>
</Preview>
To set the current selected time, set the `selectedTime` prop to `TASKS_DASHBOARD_AVAILABLE_TIMES.H12`.
<Preview>
<Story name="12 hours">
<TimeDropDown
id="time-period-dropdown"
selectedTime={TASKS_DASHBOARD_AVAILABLE_TIMES.H12}
onChange={action('onChange')}
/>
</Story>
</Preview>
To set the current selected time, set the `selectedTime` prop to `TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK`.
<Preview>
<Story name="week">
<TimeDropDown
id="time-period-dropdown"
selectedTime={TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK}
onChange={action('onChange')}
/>
</Story>
</Preview>
Version data entries
51 entries across 51 versions & 1 rubygems