Support for 12-hour clock (AM/PM) for TimePicker component #2151

colinbr96 · 2018-02-19T01:18:40Z

Fixes #1409

Checklist

Enable CircleCI for your fork
Include tests
Update documentation

Changes proposed in this pull request:

Adding an additional prop ~~hourFormat~~ useAmPm to the TimePicker component to support a 12-hour clock and AM/PM switcher. ~~hourFormat can be set to either of the two strings "12hour" or "24hour" to toggle the AM/PM switcher and type of hour unit being used.~~ useAmPm is a boolean which defaults to false (using the 24-hour clock by default to maintain backwards compatibility) and can be set to true to set the hour range to 12-hours and display an AM/PM dropdown.

I also added a switch to the TimePicker documentation page to set the example component's hourFormat.

Reviewers should focus on:

Video Demo

https://media.giphy.com/media/39m89EvdXoQFbCPKYk/giphy.gif

colinbr96 · 2018-02-22T18:01:29Z

FYI, I am currently in progress on adding test cases and linting so that CI will accept this branch.

giladgray · 2018-02-22T18:31:53Z

@colinbr96 amazing work! Thanks in advance for tests.

API-wise, I'm not a fan of the two strings
An enum is better, or even a boolean as there are only two options, but I'm not settled on a name. Perhaps something like twelveHour or showAmPm?

Finally, would you kindly configure your circle build so the preview comment will post correctly? There's a wiki page with instructions for the environment variable.

colinbr96 · 2018-02-27T08:04:43Z

Changed API to useAmPm prop

Preview: documentation | landing | table

colinbr96 · 2018-02-27T09:05:57Z

I have updated the API to use a boolean instead. Now the TimePicker prop will be called useAmPm. By default, it will be set to false (so that the 24-hour clock is used initially).

colinbr96 · 2018-02-27T09:24:30Z

Added tests for remaining dateUtils functions

Preview: documentation | landing | table

giladgray

@colinbr96 sorry to leave you hanging for so long!

this looks pretty good, and the approach is solid. here's a hefty code review to get this feature to the next level! 🌴

giladgray · 2018-03-07T02:08:27Z

packages/datetime/src/_timepicker.scss

@@ -73,6 +74,10 @@ $timepicker-control-width: $pt-grid-size * 3.3 !default;
    }
  }

+  .pt-timepicker-ampm-select {
+    margin-left: 2px;


$pt-grid-size / 2 please: typical small spacing.

giladgray · 2018-03-07T02:10:14Z

packages/datetime/src/common/dateUtils.ts

+    if (hour < 0 || hour > 23) {
+        throw new Error(`hour must be between [0,23] inclusive: got ${hour}`);
+    }
+    hour = hour % 12;


🙅‍♂️ please refrain from modifying arguments. create new const variables.

giladgray · 2018-03-07T02:10:30Z

packages/datetime/src/common/dateUtils.ts

+    if (hour === 0) {
+        hour = 12;
+    }
+    return hour;


we love ternary statements here: return hour === 0 ? 12 : hour;

giladgray · 2018-03-07T02:11:44Z

packages/datetime/src/common/dateUtils.ts

+
+export function get24HourFrom12Hour(hour: number, isPm: boolean): number {
+    if (hour < 1 || hour > 12) {
+        throw new Error(`hour must be between [0,12] inclusive: got ${hour}`);


< 1 and [0,12] don't match up

giladgray · 2018-03-07T02:12:07Z

packages/datetime/src/common/dateUtils.ts

+        throw new Error(`hour must be between [0,12] inclusive: got ${hour}`);
+    }
+    if (isPm) {
+        hour = hour + 12;


avoid modifying arguments. new variables please.

giladgray · 2018-03-07T02:24:22Z

packages/datetime/src/timePicker.tsx

@@ -375,3 +439,8 @@ function handleKeyEvent(e: React.KeyboardEvent<HTMLInputElement>, actions: IKeyE
        }
    }
 }
+
+/** Event handler that exposes the target element's value as a string. */
+function handleStringChange(handler: (value: string) => void) {


please remove this. it's my favorite util function, too, but it does not belong here.

🤔 we should move them from docs-theme to core utils, in a future PR. #helpwanted 😄

giladgray · 2018-03-07T02:25:35Z

packages/datetime/src/timePicker.tsx

+                    </option>
+                    <option key={1} value={"pm"}>
+                        PM
+                    </option>


key is only necessary when rendering an array. refactor these to: <option value="pm">PM</option>

giladgray · 2018-03-07T02:27:54Z

packages/datetime/src/timePicker.tsx

+        const didUseAmPmChange = nextProps.useAmPm !== this.props.useAmPm;
+
+        let value = this.state.value;
+        let useAmPm = this.props.useAmPm || TimePicker.defaultProps.useAmPm;


no need for the || defaultProps here. React already does that for us 😄

giladgray · 2018-03-07T02:28:38Z

packages/datetime/src/timePicker.tsx

    };

    public static displayName = "Blueprint2.TimePicker";

    public constructor(props?: ITimePickerProps, context?: any) {
        super(props, context);

+        let value = props.minTime;
+        let useAmPm = TimePicker.defaultProps.useAmPm;


this is not necessary. props.useAmPm will already be set to this. you can remove this variable entirely.

giladgray · 2018-03-07T02:28:51Z

packages/datetime/src/timePicker.tsx

        }
+
+        this.state = this.getFullStateFromValue(value, useAmPm);


just pass props.useAmPm along here

colinbr96 · 2018-03-08T21:53:11Z

Thanks for the code review. I got the requested changes completed. Hopefully it's better this time! 🕰️

colinbr96 · 2018-03-08T21:54:18Z

Remove explicit references to defaultProps for useAmPm

Preview: documentation | landing | table

giladgray

nice, now we're cooking with 🔥

giladgray · 2018-03-08T23:57:41Z

packages/datetime/src/timePicker.tsx

@@ -329,6 +307,18 @@ export class TimePicker extends React.Component<ITimePickerProps, ITimePickerSta
        }
    };

+    private handleAmPmChange = (e: React.SyntheticEvent<HTMLSelectElement>) => {
+        const changeToAm = e.currentTarget.value === "am";
+        if (changeToAm !== this.state.isPm) {


comparing am to pm seems off. make both checks about pm.

if (isNextPm !== this.state.isPm) { const hour = ... // logic inside conditional }

giladgray · 2018-03-08T23:58:09Z

packages/datetime/src/timePicker.tsx

+            return;
+        }
+        const hour = DateUtils.convert24HourMeridiem(this.state.value.getHours(), changeToAm);
+


remove blank line, the next block follows directly from variable assignment.

giladgray · 2018-03-08T23:59:27Z

packages/datetime/src/timePicker.tsx

+
+        this.setState({ isPm: !changeToAm }, () => {
+            this.updateTime(hour, TimeUnit.HOUR_24);
+        });


nit: inline short functions like this. this.setState({ props }, () => this.updateTime())

giladgray · 2018-03-09T00:00:36Z

packages/datetime/test/common/dateUtilsTests.tsx

+            expect(DateUtils.getIsPmFrom24Hour(12)).to.equal(true);
+            expect(DateUtils.getIsPmFrom24Hour(23)).to.equal(true);
+
+            for (let hour = 12; hour <= 23; hour++) {


wait wait the point of my previous comment was to replace all for loops with a handful of explicit tests. you added explicit tests but didn't remove the loops.

no need to test 12 and 23 and then test 12 through 23.

(this comment applies to every test in this file. i want to see zero for loops when we're done.)

does it make sense to explicitly test for all values from 12 to 23?
e.g.
expect(DateUtils.getIsPmFrom24Hour(12)).to.equal(true);

expect(DateUtils.getIsPmFrom24Hour(13)).to.equal(true);

expect(DateUtils.getIsPmFrom24Hour(14)).to.equal(true);

expect(DateUtils.getIsPmFrom24Hour(15)).to.equal(true);

expect(DateUtils.getIsPmFrom24Hour(16)).to.equal(true);

expect(DateUtils.getIsPmFrom24Hour(17)).to.equal(true);

expect(DateUtils.getIsPmFrom24Hour(18)).to.equal(true);

expect(DateUtils.getIsPmFrom24Hour(19)).to.equal(true);

expect(DateUtils.getIsPmFrom24Hour(20)).to.equal(true);

expect(DateUtils.getIsPmFrom24Hour(21)).to.equal(true);

expect(DateUtils.getIsPmFrom24Hour(22)).to.equal(true);

expect(DateUtils.getIsPmFrom24Hour(23)).to.equal(true);

Normally I would just iterate this

giladgray · 2018-03-09T00:02:14Z

packages/datetime/src/timePicker.tsx

-                        PM
-                    </option>
+                    <option value={"am"}>AM</option>
+                    <option value={"pm"}>PM</option>


braces are not necessary for string literals. value="pm"

giladgray · 2018-03-09T00:04:14Z

packages/datetime/src/timePicker.tsx

-            this.setState(this.getFullStateFromValue(nextProps.value));
+            value = nextProps.value;
+        }
+        if (didUseAmPmChange) {


i think this check is useless and it is equivalent to just passing through nextProps.useAmPm. if props are unchanged then next is the same as this.props. please remove (just like we did on line 130).

giladgray · 2018-03-09T00:05:18Z

packages/datetime/src/timePicker.tsx

@@ -64,6 +64,12 @@ export interface ITimePickerProps extends IProps {
     */
    showArrowButtons?: boolean;

+    /**
+     * Whether to choose from a 12 hour format with an AM/PM dropdown.


"Whether to [use a] 12-hour format with an AM/PM dropdown."

giladgray · 2018-03-09T00:07:27Z

packages/datetime/test/common/dateUtilsTests.tsx

+
+    describe("convert24HourMeridiem", () => {
+        it("returns given hour, if hour is AM and toAm", () => {
+            for (let hour = 0; hour <= 11; hour++) {


this comment still stands. please address it in all tests.

giladgray · 2018-03-09T00:07:49Z

packages/datetime/test/common/dateUtilsTests.tsx

+
+            for (let hour = 12; hour <= 23; hour++) {
+                expect(DateUtils.getIsPmFrom24Hour(hour)).to.equal(true);
+            }


so you added some explicit values, now it's time to remove the for loop.
(this applies to several tests here)

colinbr96 · 2018-03-12T08:08:05Z

Fix misc code review requests

Preview: documentation | landing | table

colinbr96 · 2018-03-15T16:53:40Z

@giladgray For some reason this pull request still says "changes requested" however I have already finished making the requested changes 3 days ago. Not sure what I need to do next.

giladgray

👍 looks good, thanks @colinbr96!!

colinbr96 added 8 commits February 18, 2018 17:01

Added AM/PM support to TimePicker component

ff8ec1c

Added example for TimePicker hourFormat prop

d69b69c

Fixed AM/PM not setting correctly after props changed

0bce146

Styled AM/PM toggle as dropdown

58f60ab

Fixed incorrect conversion from PM to AM

97e799d

Linting

5eda91d

Refactored convert*Meridiem function, added param validation

94df3ae

Added unit test for convert24HourMeridiem

0fb8cb4

Changed API to useAmPm prop

fd64178

colinbr96 added 2 commits February 27, 2018 01:02

Linting TimePicker documentation

88f3697

Added tests for remaining dateUtils functions

22ccacb

giladgray suggested changes Mar 7, 2018

View reviewed changes

giladgray added the Status: waiting on author label Mar 8, 2018

colinbr96 added 5 commits March 8, 2018 13:44

Use standardized grid width for AM/PM select

02e3792

Make test cases more explicit and less programatic

3911abb

Simplify dateUtils boolean logic with ternaries

82d5020

Removed inline onChange handler for AM/PM select

a485060

Remove explicit references to defaultProps for useAmPm

e6f0ece

giladgray removed the Status: waiting on author label Mar 8, 2018

giladgray suggested changes Mar 9, 2018

View reviewed changes

colinbr96 added 3 commits March 12, 2018 01:00

Changed API of convert24HourMeridiem for more intuitive args

e7235b9

Removed all iteration from unit tests

23294df

Fix misc code review requests

c5dba82

giladgray approved these changes Mar 15, 2018

View reviewed changes

giladgray merged commit c105ac1 into palantir:develop Mar 15, 2018

This was referenced Mar 21, 2018

🌟 Prepare Release v2.0.0 🌟 #2290

Closed

Prepare Release v2.0.0-rc.4 #2291

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support for 12-hour clock (AM/PM) for TimePicker component #2151

Support for 12-hour clock (AM/PM) for TimePicker component #2151

colinbr96 commented Feb 19, 2018 •

edited by giladgray

Loading

colinbr96 commented Feb 22, 2018

giladgray commented Feb 22, 2018

colinbr96 commented Feb 27, 2018

colinbr96 commented Feb 27, 2018

colinbr96 commented Feb 27, 2018

giladgray left a comment

giladgray Mar 7, 2018

giladgray Mar 7, 2018

giladgray Mar 7, 2018

giladgray Mar 7, 2018

giladgray Mar 7, 2018

giladgray Mar 7, 2018

giladgray Mar 7, 2018

giladgray Mar 7, 2018

giladgray Mar 7, 2018

giladgray Mar 7, 2018

colinbr96 commented Mar 8, 2018

colinbr96 commented Mar 8, 2018

giladgray left a comment

giladgray Mar 8, 2018

giladgray Mar 8, 2018

giladgray Mar 8, 2018

giladgray Mar 9, 2018

colinbr96 Mar 9, 2018 •

edited

Loading

giladgray Mar 9, 2018

giladgray Mar 9, 2018

giladgray Mar 9, 2018

giladgray Mar 9, 2018

giladgray Mar 9, 2018

colinbr96 commented Mar 12, 2018

colinbr96 commented Mar 15, 2018

giladgray left a comment

Support for 12-hour clock (AM/PM) for TimePicker component #2151

Support for 12-hour clock (AM/PM) for TimePicker component #2151

Conversation

colinbr96 commented Feb 19, 2018 • edited by giladgray Loading

Fixes #1409

Checklist

Changes proposed in this pull request:

Reviewers should focus on:

Video Demo

colinbr96 commented Feb 22, 2018

giladgray commented Feb 22, 2018

colinbr96 commented Feb 27, 2018

Changed API to useAmPm prop

colinbr96 commented Feb 27, 2018

colinbr96 commented Feb 27, 2018

Added tests for remaining dateUtils functions

giladgray left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

colinbr96 commented Mar 8, 2018

colinbr96 commented Mar 8, 2018

Remove explicit references to defaultProps for useAmPm

giladgray left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

colinbr96 Mar 9, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

colinbr96 commented Mar 12, 2018

Fix misc code review requests

colinbr96 commented Mar 15, 2018

giladgray left a comment

Choose a reason for hiding this comment

colinbr96 commented Feb 19, 2018 •

edited by giladgray

Loading

colinbr96 Mar 9, 2018 •

edited

Loading