Skip to content
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.

Sign up for GitHub

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

New props, functionalities and behaviour #18

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
Open

New props, functionalities and behaviour #18

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
be91fd6
Added minutesSteps, cancelOnClose and calling onChange when time changes
Serg4554 Aug 20, 2018
9683c74
Fixed code style
Serg4554 Aug 20, 2018
49cb3ff
Bugs in uncontrolled mode fixed
Serg4554 Aug 20, 2018
aabcbaf
Updated snapshots and test specs
Serg4554 Aug 20, 2018
1e069f5
Ammend last removed line
Serg4554 Aug 20, 2018
c513fc1
inputClasses property added
Serg4554 Aug 20, 2018
3f2953f
Updated snapshot
Serg4554 Aug 20, 2018
2add890
Disabled numbers with less opacity (disabled class)
Serg4554 Aug 20, 2018
b66f299
Code cleaned
Serg4554 Oct 12, 2018
dfe2d86
Added updateImmediately property
Serg4554 Oct 12, 2018
4c9eb3a
Set initValue when value prop is updated
Serg4554 Oct 12, 2018
256e1ab
Updated snapshots
Serg4554 Oct 12, 2018
7328a86
Renamed property: cancelOnClose to selectOnClose
Serg4554 Oct 12, 2018
8aba6e0
Props alphabetically sorted
Serg4554 Oct 12, 2018
bb09972
Standard style
Serg4554 Oct 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/TimeInput.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,6 @@ describe('<TimeInput />', () => {
tree.find(Button).at(0).simulate('click')

expect(getValue(tree)).toBe('13:37') // unchanged
expect(changeHandler).not.toHaveBeenCalled()
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now is called in every date change and restored when canceled

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why? There is no reason to call the change handler when the date isn't changed.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did that change because I needed the time text field (and some other components) to be updated when the user changes the hour in real time, so every time the user moves the clock hands, changeHandler is called.

Copy link
Member

@leMaik leMaik Sep 13, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see, that's a good point. 🤔 We should make that optional and turn it off by default. Maybe call that prop updateImmediately?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In fact, I think that's the best option, thus maintaining the same behavior (avoiding some developers from going crazy when updating 🙃) and providing that functionality, which in my case is very useful

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That was my intention. 👍 Adding your use case while keeping this a minor update (i.e. no breaking changes).

})
})
})
Expand Down
2 changes: 0 additions & 2 deletions src/TimePicker.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,6 @@ describe('<TimePicker />', () => {
.simulate('click', testUtils.stubClickEvent(190, 230)) // click on 25
.simulate('mouseup', testUtils.stubClickEvent(190, 230)) // click on 25

expect(changeHandler).toBeCalled()
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed by mistake, amended in the next commit

expect(changeHandler.mock.calls[0][0].getHours()).toBe(12)
expect(changeHandler.mock.calls[0][0].getMinutes()).toBe(25)
})
Expand Down Expand Up @@ -260,7 +259,6 @@ describe('<TimePicker />', () => {
.simulate('click', testUtils.stubClickEvent(190, 230)) // click on 25
.simulate('mouseup', testUtils.stubClickEvent(190, 230)) // click on 25

expect(changeHandler).toBeCalled()
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed by mistake, amended in the next commit

expect(changeHandler.mock.calls[0][0].getHours()).toBe(12)
expect(changeHandler.mock.calls[0][0].getMinutes()).toBe(25)
})
Expand Down
12 changes: 12 additions & 0 deletions src/__snapshots__/Clock.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -566,6 +566,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
key="5"
style={
Object {
"color": "rgba(0, 0, 0, 0.87)",
"transform": "translate(54.000000000000014px, -93.53074360871936px)",
}
}
Expand All @@ -577,6 +578,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
key="10"
style={
Object {
"color": "rgba(0, 0, 0, 0.87)",
"transform": "translate(93.53074360871938px, -53.99999999999999px)",
}
}
Expand All @@ -588,6 +590,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
key="15"
style={
Object {
"color": "rgba(0, 0, 0, 0.87)",
"transform": "translate(108px, 0px)",
}
}
Expand All @@ -599,6 +602,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
key="20"
style={
Object {
"color": "rgba(0, 0, 0, 0.87)",
"transform": "translate(93.53074360871938px, 53.99999999999999px)",
}
}
Expand All @@ -610,6 +614,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
key="25"
style={
Object {
"color": "rgba(0, 0, 0, 0.87)",
"transform": "translate(54.000000000000014px, 93.53074360871936px)",
}
}
Expand All @@ -621,6 +626,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
key="30"
style={
Object {
"color": "rgba(0, 0, 0, 0.87)",
"transform": "translate(6.6130927153957075e-15px, 108px)",
}
}
Expand All @@ -632,6 +638,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
key="35"
style={
Object {
"color": "rgba(0, 0, 0, 0.87)",
"transform": "translate(-53.99999999999998px, 93.53074360871938px)",
}
}
Expand All @@ -643,6 +650,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
key="40"
style={
Object {
"color": "rgba(0, 0, 0, 0.87)",
"transform": "translate(-93.53074360871938px, 53.99999999999999px)",
}
}
Expand All @@ -654,6 +662,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
key="45"
style={
Object {
"color": "rgba(0, 0, 0, 0.87)",
"transform": "translate(-108px, 1.3226185430791415e-14px)",
}
}
Expand All @@ -665,6 +674,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
key="50"
style={
Object {
"color": "rgba(0, 0, 0, 0.87)",
"transform": "translate(-93.53074360871939px, -53.99999999999997px)",
}
}
Expand All @@ -676,6 +686,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
key="55"
style={
Object {
"color": "rgba(0, 0, 0, 0.87)",
"transform": "translate(-54.00000000000005px, -93.53074360871936px)",
}
}
Expand All @@ -687,6 +698,7 @@ exports[`<Clock /> minutes matches the snapshot 1`] = `
key="60"
style={
Object {
"color": "rgba(0, 0, 0, 0.87)",
"transform": "translate(-1.983927814618712e-14px, -108px)",
}
}
Expand Down
56 changes: 36 additions & 20 deletions src/__snapshots__/TimeInput.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,15 @@ exports[`<TimeInput /> 12h matches the snapshot 1`] = `
<TimeInput
autoOk={false}
cancelLabel="Cancel"
cancelOnClose={true}
classes={
Object {
"body": "TimeInput-body-2",
"header": "TimeInput-header-1",
}
}
defaultValue={2017-10-15T13:37:00.000Z}
minutesStep={1}
mode="12h"
okLabel="Ok"
>
Expand Down Expand Up @@ -79,13 +81,17 @@ exports[`<TimeInput /> 12h matches the snapshot 1`] = `
TransitionComponent={[Function]}
classes={
Object {
"paper": "MuiDialog-paper-17",
"paperFullScreen": "MuiDialog-paperFullScreen-22",
"paperFullWidth": "MuiDialog-paperFullWidth-21",
"paperWidthMd": "MuiDialog-paperWidthMd-20",
"paperWidthSm": "MuiDialog-paperWidthSm-19",
"paperWidthXs": "MuiDialog-paperWidthXs-18",
"paper": "MuiDialog-paper-19",
"paperFullScreen": "MuiDialog-paperFullScreen-26",
"paperFullWidth": "MuiDialog-paperFullWidth-25",
"paperScrollBody": "MuiDialog-paperScrollBody-21",
"paperScrollPaper": "MuiDialog-paperScrollPaper-20",
"paperWidthMd": "MuiDialog-paperWidthMd-24",
"paperWidthSm": "MuiDialog-paperWidthSm-23",
"paperWidthXs": "MuiDialog-paperWidthXs-22",
"root": "MuiDialog-root-16",
"scrollBody": "MuiDialog-scrollBody-18",
"scrollPaper": "MuiDialog-scrollPaper-17",
}
}
disableBackdropClick={false}
Expand All @@ -95,6 +101,7 @@ exports[`<TimeInput /> 12h matches the snapshot 1`] = `
maxWidth="xs"
onClose={[Function]}
open={false}
scroll="paper"
transitionDuration={
Object {
"enter": 225,
Expand All @@ -111,7 +118,7 @@ exports[`<TimeInput /> 12h matches the snapshot 1`] = `
},
}
}
className="MuiDialog-root-16"
className="MuiDialog-root-16 MuiDialog-scrollPaper-17"
disableBackdropClick={false}
disableEscapeKeyDown={false}
onClose={[Function]}
Expand All @@ -128,17 +135,18 @@ exports[`<TimeInput /> 12h matches the snapshot 1`] = `
},
}
}
className="MuiDialog-root-16"
className="MuiDialog-root-16 MuiDialog-scrollPaper-17"
classes={
Object {
"hidden": "MuiModal-hidden-24",
"root": "MuiModal-root-23",
"hidden": "MuiModal-hidden-28",
"root": "MuiModal-root-27",
}
}
disableAutoFocus={false}
disableBackdropClick={false}
disableEnforceFocus={false}
disableEscapeKeyDown={false}
disablePortal={false}
disableRestoreFocus={false}
hideBackdrop={false}
keepMounted={false}
Expand Down Expand Up @@ -170,13 +178,15 @@ exports[`<TimeInput /> 24h matches the snapshot 1`] = `
<TimeInput
autoOk={false}
cancelLabel="Cancel"
cancelOnClose={true}
classes={
Object {
"body": "TimeInput-body-2",
"header": "TimeInput-header-1",
}
}
defaultValue={2017-10-15T13:37:00.000Z}
minutesStep={1}
mode="24h"
okLabel="Ok"
>
Expand Down Expand Up @@ -241,13 +251,17 @@ exports[`<TimeInput /> 24h matches the snapshot 1`] = `
TransitionComponent={[Function]}
classes={
Object {
"paper": "MuiDialog-paper-17",
"paperFullScreen": "MuiDialog-paperFullScreen-22",
"paperFullWidth": "MuiDialog-paperFullWidth-21",
"paperWidthMd": "MuiDialog-paperWidthMd-20",
"paperWidthSm": "MuiDialog-paperWidthSm-19",
"paperWidthXs": "MuiDialog-paperWidthXs-18",
"paper": "MuiDialog-paper-19",
"paperFullScreen": "MuiDialog-paperFullScreen-26",
"paperFullWidth": "MuiDialog-paperFullWidth-25",
"paperScrollBody": "MuiDialog-paperScrollBody-21",
"paperScrollPaper": "MuiDialog-paperScrollPaper-20",
"paperWidthMd": "MuiDialog-paperWidthMd-24",
"paperWidthSm": "MuiDialog-paperWidthSm-23",
"paperWidthXs": "MuiDialog-paperWidthXs-22",
"root": "MuiDialog-root-16",
"scrollBody": "MuiDialog-scrollBody-18",
"scrollPaper": "MuiDialog-scrollPaper-17",
}
}
disableBackdropClick={false}
Expand All @@ -257,6 +271,7 @@ exports[`<TimeInput /> 24h matches the snapshot 1`] = `
maxWidth="xs"
onClose={[Function]}
open={false}
scroll="paper"
transitionDuration={
Object {
"enter": 225,
Expand All @@ -273,7 +288,7 @@ exports[`<TimeInput /> 24h matches the snapshot 1`] = `
},
}
}
className="MuiDialog-root-16"
className="MuiDialog-root-16 MuiDialog-scrollPaper-17"
disableBackdropClick={false}
disableEscapeKeyDown={false}
onClose={[Function]}
Expand All @@ -290,17 +305,18 @@ exports[`<TimeInput /> 24h matches the snapshot 1`] = `
},
}
}
className="MuiDialog-root-16"
className="MuiDialog-root-16 MuiDialog-scrollPaper-17"
classes={
Object {
"hidden": "MuiModal-hidden-24",
"root": "MuiModal-root-23",
"hidden": "MuiModal-hidden-28",
"root": "MuiModal-root-27",
}
}
disableAutoFocus={false}
disableBackdropClick={false}
disableEnforceFocus={false}
disableEscapeKeyDown={false}
disablePortal={false}
disableRestoreFocus={false}
hideBackdrop={false}
keepMounted={false}
Expand Down
4 changes: 4 additions & 0 deletions src/__snapshots__/TimePicker.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ exports[`<TimePicker /> 12h matches the snapshot 1`] = `
className="TimePicker-body-7"
>
<WithStyles(Clock)
minutesStep={1}
mode="12h"
onChange={[Function]}
onMouseUp={[Function]}
Expand All @@ -86,6 +87,7 @@ exports[`<TimePicker /> 12h matches the snapshot 1`] = `
"smallPointer": "Clock-smallPointer-14",
}
}
minutesStep={1}
mode="12h"
onChange={[Function]}
onMouseUp={[Function]}
Expand Down Expand Up @@ -317,6 +319,7 @@ exports[`<TimePicker /> 24h matches the snapshot 1`] = `
className="TimePicker-body-7"
>
<WithStyles(Clock)
minutesStep={1}
mode="24h"
onChange={[Function]}
onMouseUp={[Function]}
Expand All @@ -338,6 +341,7 @@ exports[`<TimePicker /> 24h matches the snapshot 1`] = `
"smallPointer": "Clock-smallPointer-14",
}
}
minutesStep={1}
mode="24h"
onChange={[Function]}
onMouseUp={[Function]}
Expand Down