-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Labs] Timezone Picker #1568
Merged
Merged
[Labs] Timezone Picker #1568
Changes from all commits
Commits
Show all changes
83 commits
Select commit
Hold shift + click to select a range
356743c
Remove non-existent tsconfig include dir
66c6edc
Install moment and moment-timezone
4a4aef2
Remove unused import
b6d8302
Shorten imports
456303a
Timezone Input V0
7de36a1
Use Select component
67ca676
Seed list with representative timezones
dad05d1
Additional timezone metadata
75dd866
Specify general tab size and scss-specific tab size in workspace sett…
a1ee5cb
Left-aligned time zone offset label
5739478
Labels look better on right
f61607c
Enforce a min-width, so the menu doesn't jump around while filtering
185a671
Move abbreviation after name, so offsets align
4bb8e12
Additional props: disabled, defaultTimezone, selectedTimezoneFormat
50f8e78
Clean up naming and initial timezone getter
0b0237c
showUserTimezoneGuess prop
25176ab
Pass through popoverProps
c08169f
placeholder prop
3e4a482
targetClassName prop
8823063
Add disabled switch to example; Use handler helpers
4c2def9
Add interface to docs page
e5dc667
Add example switches for default timezone and use guess
ba10a57
Timezone query candidates
86ade6b
Change empty state text
cbf7ee3
Only show user timezone if query is empty
72c143a
Controlled mode for selected timezone
cd0f2ad
Don't exclude popular guess
8671cc0
Add onQueryChange to account for the query being changed through reset
d0f1e4f
Use onQueryChange
f6f8b93
Add defaultToUserTimezoneGuess prop
c7b76d2
Make timezone input look more like an input
1946977
Make placeholder consistent with display format
b359c1a
Show the timezone input example in the context of date and time pickers
020d02f
More documentation
0cc560c
Clean up props; Add documentation
44e70d1
timezone input -> timezone select
4d55db2
Custom target renderer
f237bdc
Handle empty date
1054cea
Merge remote-tracking branch 'origin/master' into bb/timezone
f6858a7
Only use text cursor if not disabled
9400904
Basic and extended examples
d2f7f78
Placeholder style
e10b3d3
Fix lint
2114c6a
Improve documentation
d9d00bc
Improve props docs
f652ffe
Optional icon name
dc85ca6
Don't use the `||` pattern
b586639
Use custom class name last
add9e49
Fix nits
900c07e
Reorder documentation
bbf0ff1
Rename TimezoneSelect to TimezonePicker
7fc4720
Remove the display tag from the example
8782648
Remove confusing default value
15947e6
Add buttonProps; Better placeholder
5afc0d7
Remove pt-timezone-picker-target-placeholder
ef932e9
Remove defaultToLocalTimezone prop
cd20736
Split timezone utilities into separate files
b23c37c
Expose input props; More descriptive input placeholder
4c8cb85
Don't make example button primary
4ca31e4
Use radio group for formats in example
7b96c8a
Composite display format
bf15ba5
Clean up timezone querying
11631b8
Basic query match ranking
76cad64
Prioritize exact matches
bd9ef19
Add fuzzaldrin-plus
b2b4788
Use fuzzaldrin-plus for timezone item sorting and filtering
ff49db9
Remove unneeded query candidates because fuzzaldrin is that good
d427502
Use filter key constant for clarity
ab8d5d5
Docs nits
b8e6c32
Merge remote-tracking branch 'origin/master' into bb/timezone
68ce37c
Make timezone code "prettier"
7f5df58
Fix lints
b0be6b6
[Labs/Select] Sync input props value with query value
ffbb9d3
[Labs/TimezonePicker] Sync input props value with query value
956b612
Fix misnamed test
76fccc2
Timezone picker tests
c208968
Fix nits
56bf58e
Use module augmentation instead of casting for zone.population
d5ab205
Don't import `from ".."`
3453ce0
Fix doc nits
b14a7c2
Make test style more consistent
248f670
Fix tests
2b37613
Concatenate item query candidates for better ranking
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,94 @@ | ||
/* | ||
* Copyright 2017 Palantir Technologies, Inc. All rights reserved. | ||
* Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy | ||
* of the license at https://github.com/palantir/blueprint/blob/master/LICENSE | ||
* and https://github.com/palantir/blueprint/blob/master/PATENTS | ||
*/ | ||
|
||
import * as React from "react"; | ||
|
||
import { Radio, RadioGroup, Switch } from "@blueprintjs/core"; | ||
import { BaseExample, handleBooleanChange, handleStringChange } from "@blueprintjs/docs"; | ||
|
||
import { TimezoneDisplayFormat, TimezonePicker } from "../src"; | ||
|
||
export interface ITimezonePickerExampleState { | ||
date?: Date; | ||
disabled?: boolean; | ||
showLocalTimezone?: boolean; | ||
targetDisplayFormat?: TimezoneDisplayFormat; | ||
timezone?: string; | ||
} | ||
|
||
export class TimezonePickerExample extends BaseExample<ITimezonePickerExampleState> { | ||
public state: ITimezonePickerExampleState = { | ||
date: new Date(), | ||
disabled: false, | ||
showLocalTimezone: true, | ||
targetDisplayFormat: TimezoneDisplayFormat.OFFSET, | ||
timezone: "", | ||
}; | ||
|
||
private handleDisabledChange = handleBooleanChange(disabled => this.setState({ disabled })); | ||
private handleShowLocalTimezoneChange = handleBooleanChange(showLocalTimezone => | ||
this.setState({ showLocalTimezone }), | ||
); | ||
private handleFormatChange = handleStringChange((targetDisplayFormat: TimezoneDisplayFormat) => | ||
this.setState({ targetDisplayFormat }), | ||
); | ||
|
||
protected renderExample() { | ||
const { date, timezone, targetDisplayFormat, disabled, showLocalTimezone } = this.state; | ||
|
||
return ( | ||
<TimezonePicker | ||
date={date} | ||
value={timezone} | ||
onChange={this.handleTimezoneChange} | ||
valueDisplayFormat={targetDisplayFormat} | ||
showLocalTimezone={showLocalTimezone} | ||
disabled={disabled} | ||
/> | ||
); | ||
} | ||
|
||
protected renderOptions() { | ||
return [ | ||
[ | ||
<Switch | ||
checked={this.state.showLocalTimezone} | ||
label="Show local timezone in initial list" | ||
key="show-local-timezone" | ||
onChange={this.handleShowLocalTimezoneChange} | ||
/>, | ||
<Switch | ||
checked={this.state.disabled} | ||
label="Disabled" | ||
key="disabled" | ||
onChange={this.handleDisabledChange} | ||
/>, | ||
], | ||
[this.renderDisplayFormatOption()], | ||
]; | ||
} | ||
|
||
private renderDisplayFormatOption() { | ||
return ( | ||
<RadioGroup | ||
key="display-format" | ||
label="Display format" | ||
onChange={this.handleFormatChange} | ||
selectedValue={this.state.targetDisplayFormat} | ||
> | ||
<Radio label="Abbreviation" value={TimezoneDisplayFormat.ABBREVIATION} /> | ||
<Radio label="Name" value={TimezoneDisplayFormat.NAME} /> | ||
<Radio label="Offset" value={TimezoneDisplayFormat.OFFSET} /> | ||
<Radio label="Composite" value={TimezoneDisplayFormat.COMPOSITE} /> | ||
</RadioGroup> | ||
); | ||
} | ||
|
||
private handleTimezoneChange = (timezone: string) => { | ||
this.setState({ timezone }); | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
14 changes: 14 additions & 0 deletions
14
packages/labs/src/components/timezone-picker/_timezone-picker.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
/* | ||
* Copyright 2017 Palantir Technologies, Inc. All rights reserved. | ||
* Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy | ||
* of the license at https://github.com/palantir/blueprint/blob/master/LICENSE | ||
* and https://github.com/palantir/blueprint/blob/master/PATENTS | ||
*/ | ||
|
||
@import "~@blueprintjs/core/src/common/variables"; | ||
@import "~@blueprintjs/core/src/components/forms/common"; | ||
@import "~@blueprintjs/core/src/components/tag/common"; | ||
|
||
.pt-timezone-picker-popover { | ||
min-width: 370px; | ||
} |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nice! this seems like a valuable fix and could use a unit test (since
Select
has actual coverage).in fact you could go so far as to pull this change to a separate PR focused solely on supporting controlled input value.
though in truth we probably want an obvious
query
prop instead ofinputProps.value
?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Going to start on this in a separate PR
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
#1597