Installation

Installing the package at ~/projects/packages/ is recommended.

~/projects/packages> git clone https://yourid@www.github.com/projectdots/thedots-timekeeper

The Dots Specific

Once you clone the repo, you have to do the following to compile.

~/projects/packages> cd react-timekeeper
~/projects/packages/react-timekeeper> npm install
~/projects/packages/react-timekeeper> npm run build
~/projects/packages/react-timekeeper> npm run dev
~/projects/packages/react-timekeeper> npm run lib

Now you have to make the connection with the main project by doing this.
~/projects/packages/react-timekeeper> sudo npm link

Move to the project directory right after the above
~/projects/packages/react-timekeeper> cd ~/projects/thedots-client

Complete the link
~/projects/thedots-client> npm link react-timekeeper

Usage

import Timekeeper from 'react-timekeeper';

render(){
    <Timekeeper
        time={this.state.time}
        // ...
    />
}

All styles are inlined via radium so no css imports are required.

API

Timepickeer component props:

time (string/object)

Time to set on component. Accepts time in 4 formats:

// string with meridiem
'4:55 pm'
'4:55pm'

// string without meridiem (assumes a 24 hour format)
'16:55'

// object with meridiem
{
    hour: 4,
    minute: 55,
    meridiem: 'pm'
}

// object without meridiem (assumes a 24 hour format)
{
    hour: 16,
    minute: 55
}

onChange (function)

Pass a function to be called when time is changed. Used to store time state in parent component. Function called returns object with updated time:

{
    formatted: '4:55 pm',	// 12 hour format
    formattedSimple: '4:55', // similar to formatted (12h), but no meridiem
    formatted24: '16:55',
    hour: 4,
    hour24: 16,
    minute: 55,
    meridiem: 'pm'
}

onDoneClick (function)

Displays the "Done" button and calls function when button is clicked. Useful for triggering some action on the parent component, like closing the timepicker

switchToMinuteOnHourSelect (bool)

Changes clock unit from hour to minute after selecting an hour. Exists mainly to provides a better user experience.

closeOnMinuteSelect (bool)

Whether or not to trigger "Done" button click when the user selects minutes. Similar to Google Keep functionality, where once the selects hour and minute, the picker automatically closes.

config (object)

Pass in object with any config properties to override. Currently supports overriding style properties. See full list of properties.

// example
config={{
    TIMEPICKER_BACKGROUND: 'red',
    FONT_FAMILY: '"Open Sans", sans-serif'
}}

Development

1. Clone the repo
2. nvm use 7.10 (or anything >7.6)
3. npm install
4. npm run dev
5. Navigate to localhost:3002

• build: npm run build
• run all tests: npm run test
• update test snapshots: npm run test:update-snapshots
• create lib to publish npm: npm run lib
• run individual test: npm run test -t SPEC_NAME, eg: npm run test -t compose-time to run compose-time.js in src/helpers/__tests__/compose-time.js