https://github.com/cloverinteractive/runtime-picker

Pick a runtime like you would microwave popcorn
https://github.com/cloverinteractive/runtime-picker

Last synced: about 6 hours ago
JSON representation

Pick a runtime like you would microwave popcorn

• Host: GitHub
• URL: https://github.com/cloverinteractive/runtime-picker
• Owner: cloverinteractive
• License: mit
• Created: 2018-06-29T23:26:38.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-01-07T17:40:17.000Z (almost 6 years ago)
• Last Synced: 2024-10-14T14:18:09.175Z (about 1 month ago)
• Language: JavaScript
• Size: 270 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[ ![Codeship Status for cloverinteractive/runtime-picker](https://app.codeship.com/projects/96305c50-5e62-0136-f3f4-6e975dd0f2b8/status?branch=master)](https://app.codeship.com/projects/296056)

[![Coverage Status](https://coveralls.io/repos/github/cloverinteractive/runtime-picker/badge.svg?branch=master)](https://coveralls.io/github/cloverinteractive/runtime-picker?branch=master)

Runtime-Picker

==============

A react-bootstrap Popover that let's you set a runtime like i fyou were entering time in a microwave.

---

## Dependencies

These are the things your project needs for runtime-picker to work.

* react

* react-dom

* react-bootstrap

## Installation

```

yarn add runtime-picker

```

You can then import it into your webpack components as follows:

```es6

import RuntimePicker from 'runtime-picker';

```

## Usage

Runtime-Picker generates a hidden text field containing the runtime picked calculated in seconds,

so you can submit this as part as our form, however you can send your custom `onChange` handler and

receive the number of seconds when the component updates.

### Runtime-Picker Props

| Property | Type | Default | Description |

|:---|:---|:---|:---|

| `disabled` | boolean | `false` | Whether the runtime picker should be disabled, this renders a hidden input as well and visible text field with the parsed runtime |

| `maxHours` | number | `9999` | This is the max number of hours you can enter in your runtime |

| `name` | string | `'runtime'` | The name of the hidden text field containing the runtime in seconds |

| `onChange` | Function | `undefined` | Event handler to be called after the component updates |

| `placeholder` | string | `'HHHH:MMM:SS'` | Visible text field placeholder text |

| `placement` | string | `'bottom' \| 'left' \| 'right' \| 'top'` | This is the Popover position relative to the visible text field |

| `skipSeconds` | boolean | `false` | Whether we wish to start from minutes instead of seconds and lose some granularity |

| `title` | string | `'Pick your Runtime'` | This is the Popover's title |

| `value` | number | `0` | This is the startoff value in seconds |

## Caveats

If you're rendering inside a `` make sure to set your modal's `enforceFocus` prop to `false`.