@transferwise/components 45.25.2 → 45.26.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.esm.js +152 -75
- package/build/index.esm.js.map +1 -1
- package/build/index.js +152 -75
- package/build/index.js.map +1 -1
- package/build/main.css +1 -1
- package/build/styles/chips/Chip.css +1 -1
- package/build/styles/dateLookup/DateLookup.css +1 -1
- package/build/styles/main.css +1 -1
- package/build/types/dateLookup/DateLookup.d.ts.map +1 -1
- package/build/types/dateLookup/getFocusableTime/getFocusableTime.d.ts +9 -0
- package/build/types/dateLookup/getFocusableTime/getFocusableTime.d.ts.map +1 -0
- package/build/types/dateLookup/monthCalendar/table/MonthCalendarTable.d.ts +1 -1
- package/build/types/dateLookup/monthCalendar/table/MonthCalendarTable.d.ts.map +1 -1
- package/build/types/dateLookup/tableLink/TableLink.d.ts +14 -4
- package/build/types/dateLookup/tableLink/TableLink.d.ts.map +1 -1
- package/build/types/dateLookup/tableLink/index.d.ts +1 -1
- package/build/types/dateLookup/tableLink/index.d.ts.map +1 -1
- package/build/types/dateLookup/yearCalendar/table/YearCalendarTable.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/chips/Chip.css +1 -1
- package/src/chips/Chip.less +9 -21
- package/src/dateLookup/DateLookup.css +1 -1
- package/src/dateLookup/DateLookup.js +19 -4
- package/src/dateLookup/DateLookup.keyboardEvents.spec.js +12 -0
- package/src/dateLookup/DateLookup.less +39 -49
- package/src/dateLookup/DateLookup.story.js +8 -7
- package/src/dateLookup/dayCalendar/table/DayCalendarTable.js +28 -3
- package/src/dateLookup/dayCalendar/table/DayCalendarTable.spec.js +25 -0
- package/src/dateLookup/getFocusableTime/getFocusable.spec.ts +40 -0
- package/src/dateLookup/getFocusableTime/getFocusableTime.tsx +14 -0
- package/src/dateLookup/monthCalendar/table/MonthCalendarTable.js +33 -20
- package/src/dateLookup/monthCalendar/table/MonthCalendarTable.spec.js +33 -0
- package/src/dateLookup/tableLink/TableLink.spec.js +6 -15
- package/src/dateLookup/tableLink/TableLink.tsx +79 -0
- package/src/dateLookup/yearCalendar/table/YearCalendarTable.js +33 -11
- package/src/dateLookup/yearCalendar/table/YearCalendarTable.spec.js +26 -0
- package/src/main.css +1 -1
- package/src/dateLookup/tableLink/TableLink.js +0 -70
- /package/src/dateLookup/tableLink/{index.js → index.ts} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateLookup.d.ts","sourceRoot":"","sources":["../../../src/dateLookup/DateLookup.js"],"names":[],"mappings":";AAqBA;
|
|
1
|
+
{"version":3,"file":"DateLookup.d.ts","sourceRoot":"","sources":["../../../src/dateLookup/DateLookup.js"],"names":[],"mappings":";AAqBA;IAoBE;;;;;;aAqBC;IApCD,wBAaC;IAjBD,wCAAsB;IAEtB,yCAAuB;IAIrB;;;;;;;;;;MAUC;IA0BH,6CAMC;IAFC,uCAAyE;IAI3E,6BAGC;IAED,iBAOE;IAEF,oBAME;IAEF,kBAME;IAEF,oCA6CE;IAEF,wEAmBE;IAEF,+DAOE;IAEF,gCAIE;IAEF,yBAA+C;IAE/C,2BAAmD;IAEnD,0BAAiD;IAEjD,sDAME;IAEF;;;eAEE;IAEF,+CA8BE;IAEF,wBAGE;IAEF,sCA0BC;CACF"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
interface FocusableTimeProps {
|
|
2
|
+
isActive: (time: number) => boolean;
|
|
3
|
+
isNow: (time: number) => boolean;
|
|
4
|
+
isDisabled: (time: number) => boolean;
|
|
5
|
+
timeSpan: number[];
|
|
6
|
+
}
|
|
7
|
+
export declare function getFocusableTime(props: FocusableTimeProps): number | undefined;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=getFocusableTime.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getFocusableTime.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/getFocusableTime/getFocusableTime.tsx"],"names":[],"mappings":"AAAA,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;IACpC,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;IACjC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;IACtC,QAAQ,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,kBAAkB,GAAG,MAAM,GAAG,SAAS,CAM9E"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export default MonthCalendarTable;
|
|
2
|
-
declare function MonthCalendarTable({ selectedDate
|
|
2
|
+
declare function MonthCalendarTable({ selectedDate, min, max, viewYear, placeholder, onSelect }: {
|
|
3
3
|
selectedDate: any;
|
|
4
4
|
min: any;
|
|
5
5
|
max: any;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MonthCalendarTable.d.ts","sourceRoot":"","sources":["../../../../../src/dateLookup/monthCalendar/table/MonthCalendarTable.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"MonthCalendarTable.d.ts","sourceRoot":"","sources":["../../../../../src/dateLookup/monthCalendar/table/MonthCalendarTable.js"],"names":[],"mappings":";AAWA;;;;;;;gCA4DC"}
|
|
@@ -1,5 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface TableLinkProps {
|
|
3
|
+
item: number;
|
|
4
|
+
type: 'day' | 'month' | 'year';
|
|
5
|
+
title?: string;
|
|
6
|
+
longTitle?: string;
|
|
7
|
+
active: boolean;
|
|
8
|
+
disabled: boolean;
|
|
9
|
+
today: boolean;
|
|
10
|
+
autofocus?: boolean;
|
|
11
|
+
onClick: (item: number) => void;
|
|
12
|
+
}
|
|
13
|
+
declare const TableLink: ({ item, type, title, longTitle, active, disabled, today, autofocus, onClick, }: TableLinkProps) => import("react").JSX.Element;
|
|
14
|
+
export default TableLink;
|
|
5
15
|
//# sourceMappingURL=TableLink.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableLink.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/TableLink.
|
|
1
|
+
{"version":3,"file":"TableLink.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/TableLink.tsx"],"names":[],"mappings":";AAMA,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED,QAAA,MAAM,SAAS,mFAUZ,cAAc,gCAgDhB,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default } from
|
|
1
|
+
export { default } from './TableLink';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/index.
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YearCalendarTable.d.ts","sourceRoot":"","sources":["../../../../../src/dateLookup/yearCalendar/table/YearCalendarTable.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"YearCalendarTable.d.ts","sourceRoot":"","sources":["../../../../../src/dateLookup/yearCalendar/table/YearCalendarTable.js"],"names":[],"mappings":";AAWA;;;;;;;gCAuDC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "45.
|
|
3
|
+
"version": "45.26.1",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"@testing-library/react-hooks": "^8.0.0",
|
|
54
54
|
"@testing-library/user-event": "^13.2.1",
|
|
55
55
|
"@transferwise/icons": "^3.7.0",
|
|
56
|
-
"@transferwise/neptune-tokens": "^8.
|
|
56
|
+
"@transferwise/neptune-tokens": "^8.8.0",
|
|
57
57
|
"@tsconfig/recommended": "^1.0.2",
|
|
58
58
|
"@types/babel__core": "^7.20.1",
|
|
59
59
|
"@types/jest": "^26.0.20",
|
package/src/chips/Chip.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.np-chip{background-color:transparent;border:1px solid #0000001a;border:1px solid var(--color-border-neutral);border-radius:16px;border-radius:var(--size-16);color:#5d7079;color:var(--color-content-secondary);height:32px;height:var(--size-32);margin-right:8px;margin-right:var(--size-8);padding:0 12px;padding:0 var(--size-12);transition:color .15s ease-in-out,border-color .15s ease-in-out,background-color .15s ease-in-out}@media (max-width:320px){.np-chip{height:40px;height:var(--size-40)}}.np-chip:hover{cursor:pointer}.np-chip .np-chip-label{padding-top:2px}.np-chip .np-close-button{
|
|
1
|
+
.np-chip{background-color:transparent;border:1px solid #0000001a;border:1px solid var(--color-border-neutral);border-radius:16px;border-radius:var(--size-16);color:#5d7079;color:var(--color-content-secondary);height:32px;height:var(--size-32);margin-right:8px;margin-right:var(--size-8);padding:0 12px;padding:0 var(--size-12);transition:color .15s ease-in-out,border-color .15s ease-in-out,background-color .15s ease-in-out}@media (max-width:320px){.np-chip{height:40px;height:var(--size-40)}}.np-chip:hover{cursor:pointer}.np-chip .np-chip-label{padding-top:2px}.np-chip .np-close-button{pointer-events:auto}.np-chip:last-child{margin-right:0}[dir=rtl] .np-chip:last-child{margin-left:0;margin-right:0}.np-chip:active{background-color:#0081ba;background-color:var(--color-interactive-accent-active);border-color:#0081ba;border-color:var(--color-interactive-accent-active);color:#fff}.np-chip--selected{background-color:#00a2dd;background-color:var(--color-interactive-accent);border-color:#00a2dd;border-color:var(--color-interactive-accent);color:#fff;pointer-events:none}.np-chip--selected:active,.np-chip--selected:hover{background-color:#008fc9;background-color:var(--color-interactive-accent-hover);border-color:#008fc9;border-color:var(--color-interactive-accent-hover);color:#fff}.np-chip--selected .np-close-button{color:#fff}.np-chip.has-error{background:#e74848;background:var(--color-interactive-negative);color:#fff}.np-chip.has-error .np-close-button{color:#fff}.np-theme-personal .np-chip.has-error{background:var(--color-sentiment-negative)}.np-theme-personal .np-chip.has-error,.np-theme-personal .np-chip.has-error:not(.disabled,:disabled):active,.np-theme-personal .np-chip.has-error:not(.disabled,:disabled):hover{color:var(--color-contrast)}.np-theme-personal .np-chip.has-error:not(.disabled,:disabled):hover{background:var(--color-sentiment-negative-hover);border-color:var(--color-sentiment-negative-hover)!important}.np-theme-personal .np-chip.has-error:not(.disabled,:disabled):active{background:var(--color-sentiment-negative-active);border-color:var(--color-sentiment-negative-active)!important}.np-theme-personal .np-chip{border-color:#c9cbce;border-color:var(--color-interactive-secondary);color:var(--color-interactive-primary);font-weight:600;font-weight:var(--font-weight-semi-bold);padding:0 16px;padding:0 var(--size-16)}.np-theme-personal .np-chip:not(.disabled,:disabled):hover{background-color:var(--color-background-screen-hover);border-color:#b5b7ba;border-color:var(--color-interactive-secondary-hover);color:var(--color-interactive-primary-hover)}.np-theme-personal .np-chip:not(.disabled,:disabled):active{background-color:var(--color-background-screen-active);border-color:#a7a9ab;border-color:var(--color-interactive-secondary-active);color:var(--color-interactive-primary-active)}.np-theme-personal .np-chip .np-close-button{border-radius:inherit;margin-right:-8px;margin-right:calc(var(--size-8)*-1)}.np-theme-personal .np-chip .np-close-button,.np-theme-personal .np-chip .np-close-button:hover,.np-theme-personal .np-chip .np-close-button:not(.disabled,:disabled):active,.np-theme-personal .np-chip .np-close-button:not(.disabled,:disabled):hover{background-color:transparent!important;color:inherit!important}.np-theme-personal .np-chip:not(.disabled,:disabled):focus-visible,.np-theme-personal .np-chip:not(.disabled,:disabled):has(:focus-visible){outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-theme-personal .np-chip:not(.disabled,:disabled):focus-visible .np-close-button,.np-theme-personal .np-chip:not(.disabled,:disabled):has(:focus-visible) .np-close-button{background:transparent;outline:none}.np-theme-personal .np-chip:not(.disabled,:disabled):focus-visible .np-close-button:hover,.np-theme-personal .np-chip:not(.disabled,:disabled):has(:focus-visible) .np-close-button:hover{color:inherit!important}.np-theme-personal .np-chip.np-chip--removable{position:relative}.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold{padding-right:24px;padding-right:var(--size-24)}@media (max-width:320px){.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold{padding-right:48px;padding-right:var(--size-48)}}.np-theme-personal .np-chip.np-chip--removable .np-close-button{height:100%;justify-content:flex-end;left:0;padding-right:8px;padding-right:var(--size-8);position:absolute;top:0;width:100%}.np-theme-personal .np-chip:has(.disabled,:disabled):focus-visible{outline:none}.np-theme-personal .np-chip--selected,.np-theme-personal .np-chip--valid{background-color:var(--color-interactive-primary);border-color:var(--color-interactive-primary);color:var(--color-interactive-contrast)}.np-theme-personal .np-chip--selected:not(.disabled,:disabled):hover,.np-theme-personal .np-chip--valid:not(.disabled,:disabled):hover{background-color:var(--color-interactive-primary-hover);border-color:var(--color-interactive-primary-hover);color:var(--color-interactive-contrast-hover)}.np-theme-personal .np-chip--selected:not(.disabled,:disabled):active,.np-theme-personal .np-chip--valid:not(.disabled,:disabled):active{background-color:var(--color-interactive-primary-active);border-color:var(--color-interactive-primary-active);color:var(--color-interactive-contrast-active)}.np-theme-personal .np-chip--selected .np-close-button,.np-theme-personal .np-chip--valid .np-close-button{color:inherit}.np-theme-personal .np-chip--selected .np-close-button:focus,.np-theme-personal .np-chip--selected .np-close-button:focus-within,.np-theme-personal .np-chip--valid .np-close-button:focus,.np-theme-personal .np-chip--valid .np-close-button:focus-within{outline:none}
|
package/src/chips/Chip.less
CHANGED
|
@@ -25,16 +25,7 @@
|
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
.np-close-button {
|
|
28
|
-
opacity: 1;
|
|
29
|
-
transition: opacity 0.15s ease-in-out;
|
|
30
28
|
pointer-events: auto;
|
|
31
|
-
color: var(--color-content-secondary);
|
|
32
|
-
|
|
33
|
-
&:hover,
|
|
34
|
-
&:focus {
|
|
35
|
-
color: #fff;
|
|
36
|
-
opacity: 0.85;
|
|
37
|
-
}
|
|
38
29
|
}
|
|
39
30
|
|
|
40
31
|
&:last-child {
|
|
@@ -169,23 +160,20 @@
|
|
|
169
160
|
|
|
170
161
|
&--selected,
|
|
171
162
|
&--valid {
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
&,
|
|
176
|
-
&:not(.disabled, :disabled):hover,
|
|
177
|
-
&:not(.disabled, :disabled):active {
|
|
178
|
-
color: var(--color-interactive-control);
|
|
179
|
-
}
|
|
163
|
+
color: var(--color-interactive-contrast);
|
|
164
|
+
background-color: var(--color-interactive-primary);
|
|
165
|
+
border-color: var(--color-interactive-primary);
|
|
180
166
|
|
|
181
167
|
&:not(.disabled, :disabled):hover {
|
|
182
|
-
|
|
183
|
-
|
|
168
|
+
color: var(--color-interactive-contrast-hover);
|
|
169
|
+
background-color: var(--color-interactive-primary-hover);
|
|
170
|
+
border-color: var(--color-interactive-primary-hover);
|
|
184
171
|
}
|
|
185
172
|
|
|
186
173
|
&:not(.disabled, :disabled):active {
|
|
187
|
-
|
|
188
|
-
|
|
174
|
+
color: var(--color-interactive-contrast-active);
|
|
175
|
+
background-color: var(--color-interactive-primary-active);
|
|
176
|
+
border-color: var(--color-interactive-primary-active);
|
|
189
177
|
}
|
|
190
178
|
|
|
191
179
|
.np-close-button {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tw-date-lookup-menu{width:400px}.tw-date-lookup-calendar{min-width:300px;table-layout:fixed;text-align:center}.tw-date-lookup-calendar>tbody>tr>td{padding:4px;padding:var(--size-4)}@media (max-width:320px){.tw-date-lookup-calendar>tbody>tr>td{padding:0}}.tw-date-lookup-calendar>tbody>tr>td button{background-color:transparent;border:transparent;border-radius:10px;border-radius:var(--radius-small);color:#0097c7;color:var(--color-content-accent);font-weight:600;font-weight:var(--font-weight-semi-bold);padding:4px 0;padding:var(--size-4) 0;width:100%}@media (max-width:320px){.tw-date-lookup-calendar>tbody>tr>td button{padding:0}}.tw-date-lookup-calendar>tbody>tr>td button
|
|
1
|
+
.tw-date-lookup-menu{width:400px}.tw-date-lookup-calendar{background-color:inherit;min-width:300px;table-layout:fixed;text-align:center}.tw-date-lookup-calendar>tbody>tr>td.weekend button{color:#5d7079;color:var(--color-content-secondary)}.tw-date-lookup-calendar>tbody>tr>td{padding:4px;padding:var(--size-4)}@media (max-width:320px){.tw-date-lookup-calendar>tbody>tr>td{padding:0}}.tw-date-lookup-calendar>tbody>tr>td:has(.tw-date-lookup-day-option){padding:1px}.tw-date-lookup-calendar>tbody>tr>td button{background-color:transparent;border:transparent;border-radius:10px;border-radius:var(--radius-small);color:#0097c7;color:var(--color-content-accent);color:#37517e;color:var(--color-content-primary);font-weight:600;font-weight:var(--font-weight-semi-bold);padding:4px 0;padding:var(--size-4) 0;width:100%}@media (max-width:320px){.tw-date-lookup-calendar>tbody>tr>td button{padding:0}}.tw-date-lookup-calendar>tbody>tr>td button.tw-date-lookup-day-option{align-items:center;border-radius:9999px;border-radius:var(--radius-full);display:inline-flex;height:40px;height:var(--size-40);justify-content:center;line-height:40px;line-height:var(--size-40);padding:0;width:40px;width:var(--size-40)}.tw-date-lookup-calendar>tbody>tr>td button.tw-date-lookup-day-option.today{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}.tw-date-lookup-calendar>tbody>tr>td:hover button:not(.disabled,:disabled),.tw-date-lookup-calendar>tbody>tr>td:not(.disabled,:disabled) button.show-focus{background-color:var(--color-background-screen-hover)}.tw-date-lookup-calendar>tbody>tr>td:not(.disabled,:disabled) button.active{background-color:var(--color-interactive-primary);color:var(--color-interactive-contrast)}.tw-date-lookup-calendar abbr{text-decoration:none}.tw-date-lookup-header-current-container{display:inline}.np-theme-personal .tw-date-lookup-menu .table-bordered,.np-theme-personal.tw-date-lookup-menu .table-bordered{border:none}.np-theme-personal .tw-date-lookup-menu thead,.np-theme-personal.tw-date-lookup-menu thead{background-color:unset}.np-theme-personal .tw-date-lookup-menu td,.np-theme-personal.tw-date-lookup-menu td{border:none}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current{color:#37517e;color:var(--color-content-primary)}
|
|
@@ -28,6 +28,7 @@ class DateLookup extends PureComponent {
|
|
|
28
28
|
super(props);
|
|
29
29
|
this.state = {
|
|
30
30
|
selectedDate: getStartOfDay(props.value),
|
|
31
|
+
originalDate: null,
|
|
31
32
|
min: getStartOfDay(props.min),
|
|
32
33
|
max: getStartOfDay(props.max),
|
|
33
34
|
viewMonth: (props.value || new Date()).getMonth(),
|
|
@@ -83,16 +84,24 @@ class DateLookup extends PureComponent {
|
|
|
83
84
|
}
|
|
84
85
|
};
|
|
85
86
|
|
|
87
|
+
discard = () => {
|
|
88
|
+
const { originalDate } = this.state;
|
|
89
|
+
if (originalDate !== null) {
|
|
90
|
+
this.props.onChange(originalDate);
|
|
91
|
+
}
|
|
92
|
+
this.close();
|
|
93
|
+
};
|
|
94
|
+
|
|
86
95
|
close = () => {
|
|
87
96
|
const { onBlur } = this.props;
|
|
88
|
-
this.setState({ open: false });
|
|
97
|
+
this.setState({ open: false, originalDate: null });
|
|
89
98
|
if (onBlur) {
|
|
90
99
|
onBlur();
|
|
91
100
|
}
|
|
92
101
|
};
|
|
93
102
|
|
|
94
103
|
handleKeyDown = (event) => {
|
|
95
|
-
const { open } = this.state;
|
|
104
|
+
const { open, originalDate } = this.state;
|
|
96
105
|
switch (event.keyCode) {
|
|
97
106
|
case KeyCodes.LEFT:
|
|
98
107
|
if (open) {
|
|
@@ -127,6 +136,9 @@ class DateLookup extends PureComponent {
|
|
|
127
136
|
event.preventDefault();
|
|
128
137
|
break;
|
|
129
138
|
case KeyCodes.ESCAPE:
|
|
139
|
+
if (originalDate !== null) {
|
|
140
|
+
this.props.onChange(originalDate);
|
|
141
|
+
}
|
|
130
142
|
this.close();
|
|
131
143
|
event.preventDefault();
|
|
132
144
|
break;
|
|
@@ -136,7 +148,10 @@ class DateLookup extends PureComponent {
|
|
|
136
148
|
};
|
|
137
149
|
|
|
138
150
|
adjustDate = (daysToAdd, monthsToAdd, yearsToAdd) => {
|
|
139
|
-
const { selectedDate, min, max, mode } = this.state;
|
|
151
|
+
const { selectedDate, min, max, mode, originalDate } = this.state;
|
|
152
|
+
if (originalDate === null) {
|
|
153
|
+
this.setState({ originalDate: selectedDate });
|
|
154
|
+
}
|
|
140
155
|
let date;
|
|
141
156
|
if (selectedDate) {
|
|
142
157
|
date = new Date(
|
|
@@ -243,7 +258,7 @@ class DateLookup extends PureComponent {
|
|
|
243
258
|
open={open}
|
|
244
259
|
className="tw-date-lookup-menu"
|
|
245
260
|
position={Position.BOTTOM}
|
|
246
|
-
onClose={this.
|
|
261
|
+
onClose={this.discard}
|
|
247
262
|
>
|
|
248
263
|
{this.getCalendar()}
|
|
249
264
|
</ResponsivePanel>
|
|
@@ -80,6 +80,18 @@ describe('DateLookup (keyboard events)', () => {
|
|
|
80
80
|
pressKey(KEY_CODES.DOWN);
|
|
81
81
|
onChangeCalledWith(new Date(2019, 0, 3));
|
|
82
82
|
});
|
|
83
|
+
|
|
84
|
+
it('resets to original date when escape key is pressed', () => {
|
|
85
|
+
pressKey(KEY_CODES.LEFT);
|
|
86
|
+
pressKey(KEY_CODES.ESCAPE);
|
|
87
|
+
onChangeCalledWith(date);
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
it('resets to original date when clicking outside modal', () => {
|
|
91
|
+
pressKey(KEY_CODES.LEFT);
|
|
92
|
+
component.find('.dimmer').simulate('click');
|
|
93
|
+
onChangeCalledWith(date);
|
|
94
|
+
});
|
|
83
95
|
});
|
|
84
96
|
|
|
85
97
|
describe('when open and in month mode', () => {
|
|
@@ -9,12 +9,21 @@
|
|
|
9
9
|
text-align: center;
|
|
10
10
|
table-layout: fixed;
|
|
11
11
|
|
|
12
|
+
> tbody > tr > td.weekend button {
|
|
13
|
+
color: var(--color-content-secondary);
|
|
14
|
+
&:extend(.np-text-body-default);
|
|
15
|
+
}
|
|
16
|
+
|
|
12
17
|
> tbody > tr > td {
|
|
13
18
|
padding: var(--size-4);
|
|
14
19
|
@media (--screen-400-zoom) {
|
|
15
20
|
padding: 0;
|
|
16
21
|
}
|
|
17
22
|
|
|
23
|
+
&:has(.tw-date-lookup-day-option) {
|
|
24
|
+
padding: 1px;
|
|
25
|
+
}
|
|
26
|
+
|
|
18
27
|
button {
|
|
19
28
|
width: 100%;
|
|
20
29
|
padding: var(--size-4) 0;
|
|
@@ -26,37 +35,34 @@
|
|
|
26
35
|
border-radius: var(--radius-small);
|
|
27
36
|
background-color: transparent;
|
|
28
37
|
font-weight: var(--font-weight-semi-bold);
|
|
38
|
+
color: var(--color-content-primary);
|
|
29
39
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
color: var(--color-interactive-control);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
&:not(.disabled, :disabled):hover {
|
|
48
|
-
color: var(--color-interactive-control);
|
|
40
|
+
&.tw-date-lookup-day-option {
|
|
41
|
+
height: var(--size-40);
|
|
42
|
+
border-radius: var(--radius-full);
|
|
43
|
+
line-height: var(--size-40);
|
|
44
|
+
width: var(--size-40);
|
|
45
|
+
padding: 0;
|
|
46
|
+
display: inline-flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
justify-content: center;
|
|
49
|
+
|
|
50
|
+
&.today {
|
|
51
|
+
text-decoration: underline;
|
|
52
|
+
text-decoration-thickness: 2px;
|
|
53
|
+
text-underline-offset: 4px;
|
|
49
54
|
}
|
|
50
55
|
}
|
|
51
56
|
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
57
|
+
|
|
58
|
+
&:not(.disabled, :disabled) button.show-focus,
|
|
59
|
+
&:hover button:not(.disabled, :disabled) {
|
|
60
|
+
background-color: var(--color-background-screen-hover);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&:not(.disabled, :disabled) button.active {
|
|
64
|
+
background-color: var(--color-interactive-primary);
|
|
65
|
+
color: var(--color-interactive-contrast);
|
|
60
66
|
}
|
|
61
67
|
}
|
|
62
68
|
|
|
@@ -64,9 +70,11 @@
|
|
|
64
70
|
text-decoration: none;
|
|
65
71
|
}
|
|
66
72
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
73
|
+
background-color: inherit;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.tw-date-lookup-header-current-container {
|
|
77
|
+
display: inline;
|
|
70
78
|
}
|
|
71
79
|
|
|
72
80
|
.np-theme-personal {
|
|
@@ -83,27 +91,9 @@
|
|
|
83
91
|
td {
|
|
84
92
|
border: none;
|
|
85
93
|
}
|
|
86
|
-
|
|
87
|
-
.tw-date-lookup-header-current-container {
|
|
88
|
-
display: inline-block;
|
|
89
|
-
|
|
90
|
-
.tw-date-lookup-header-current {
|
|
91
|
-
color: var(--color-content-primary);
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
94
|
|
|
95
|
-
.tw-date-lookup-
|
|
96
|
-
height: var(--size-32);
|
|
97
|
-
line-height: var(--size-32);
|
|
98
|
-
display: inline-flex;
|
|
99
|
-
align-items: center;
|
|
100
|
-
justify-content: center;
|
|
95
|
+
.tw-date-lookup-header-current {
|
|
101
96
|
color: var(--color-content-primary);
|
|
102
97
|
}
|
|
103
|
-
|
|
104
|
-
.tw-date-lookup-day-option.active {
|
|
105
|
-
background-color: var(--color-interactive-accent);
|
|
106
|
-
color: var(--color-interactive-primary);
|
|
107
|
-
}
|
|
108
98
|
}
|
|
109
99
|
}
|
|
@@ -13,6 +13,8 @@ export default {
|
|
|
13
13
|
|
|
14
14
|
let theFuture = new Date();
|
|
15
15
|
theFuture.setDate(theFuture.getDate() + 10);
|
|
16
|
+
let thePast = new Date();
|
|
17
|
+
thePast.setDate(thePast.getDate() - 10);
|
|
16
18
|
|
|
17
19
|
export const Basic = () => {
|
|
18
20
|
const [value, setValue] = useState(null);
|
|
@@ -22,16 +24,13 @@ export const Basic = () => {
|
|
|
22
24
|
const placeholder = text('placeholder', 'placeholder');
|
|
23
25
|
const size = select('size', Object.values(Size), Size.MEDIUM);
|
|
24
26
|
|
|
25
|
-
const minvalue = date('minvalue', new Date());
|
|
26
|
-
const maxvalue = date('maxvalue', theFuture);
|
|
27
27
|
const clearable = boolean('clearable', false);
|
|
28
28
|
|
|
29
29
|
return (
|
|
30
30
|
<DateLookup
|
|
31
31
|
disabled={disabled}
|
|
32
32
|
label={label}
|
|
33
|
-
|
|
34
|
-
min={new Date(minvalue)}
|
|
33
|
+
min={thePast}
|
|
35
34
|
monthFormat={monthFormat}
|
|
36
35
|
placeholder={placeholder}
|
|
37
36
|
size={size}
|
|
@@ -42,9 +41,11 @@ export const Basic = () => {
|
|
|
42
41
|
);
|
|
43
42
|
};
|
|
44
43
|
|
|
45
|
-
Basic.play = ({ canvasElement }) => {
|
|
44
|
+
Basic.play = async ({ canvasElement }) => {
|
|
45
|
+
// testing focus state on keyboard nav
|
|
46
46
|
const canvas = within(canvasElement);
|
|
47
|
-
userEvent.
|
|
47
|
+
userEvent.tab(canvas.getByRole('button'));
|
|
48
|
+
userEvent.keyboard('{space}');
|
|
48
49
|
};
|
|
49
50
|
|
|
50
51
|
export const Basic400Zoom = storyConfig(
|
|
@@ -60,7 +61,7 @@ export const RightAligned = () => {
|
|
|
60
61
|
const placeholder = text('placeholder', 'placeholder');
|
|
61
62
|
const size = select('size', Object.values(Size), Size.MEDIUM);
|
|
62
63
|
|
|
63
|
-
const minvalue = date('minvalue',
|
|
64
|
+
const minvalue = date('minvalue', thePast);
|
|
64
65
|
const maxvalue = date('maxvalue', theFuture);
|
|
65
66
|
const clearable = boolean('clearable', false);
|
|
66
67
|
|
|
@@ -4,6 +4,7 @@ import { PureComponent } from 'react';
|
|
|
4
4
|
import { injectIntl } from 'react-intl';
|
|
5
5
|
|
|
6
6
|
import { getDayNames, isWithinRange } from '../../../common/dateUtils';
|
|
7
|
+
import { getFocusableTime } from '../../getFocusableTime/getFocusableTime';
|
|
7
8
|
import { getStartOfDay } from '../../getStartOfDay';
|
|
8
9
|
import TableLink from '../../tableLink';
|
|
9
10
|
|
|
@@ -65,6 +66,21 @@ class DayCalendarTable extends PureComponent {
|
|
|
65
66
|
return !!(selectedDate && +new Date(viewYear, viewMonth, day) === +selectedDate);
|
|
66
67
|
};
|
|
67
68
|
|
|
69
|
+
isToday = (day) => {
|
|
70
|
+
const { viewMonth, viewYear } = this.props;
|
|
71
|
+
return Number(getStartOfDay(new Date())) === Number(new Date(viewYear, viewMonth, day));
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
getAutofocusDay = (weeks) => {
|
|
75
|
+
const days = weeks.flatMap((week) => week);
|
|
76
|
+
return getFocusableTime({
|
|
77
|
+
isActive: this.isActive,
|
|
78
|
+
isNow: this.isToday,
|
|
79
|
+
isDisabled: this.isDisabled,
|
|
80
|
+
timeSpan: days,
|
|
81
|
+
});
|
|
82
|
+
};
|
|
83
|
+
|
|
68
84
|
render() {
|
|
69
85
|
const {
|
|
70
86
|
viewMonth,
|
|
@@ -72,12 +88,20 @@ class DayCalendarTable extends PureComponent {
|
|
|
72
88
|
intl: { locale },
|
|
73
89
|
} = this.props;
|
|
74
90
|
const weeks = this.getTableStructure();
|
|
91
|
+
let autoFocusDay = this.getAutofocusDay(weeks, viewMonth, viewYear);
|
|
75
92
|
return (
|
|
76
93
|
<table className="table table-condensed table-bordered tw-date-lookup-calendar m-b-0">
|
|
77
94
|
<thead>
|
|
78
95
|
<tr>
|
|
79
96
|
{this.days.map((day, index) => (
|
|
80
|
-
<th
|
|
97
|
+
<th
|
|
98
|
+
key={day}
|
|
99
|
+
className={
|
|
100
|
+
index > 4
|
|
101
|
+
? 'text-xs-center np-text-body-default'
|
|
102
|
+
: 'text-xs-center np-text-body-default-bold'
|
|
103
|
+
}
|
|
104
|
+
>
|
|
81
105
|
<span className="hidden-xs">
|
|
82
106
|
<abbr title={this.daysLong[index]}>{day.slice(0, 3)}</abbr>
|
|
83
107
|
</span>
|
|
@@ -93,7 +117,7 @@ class DayCalendarTable extends PureComponent {
|
|
|
93
117
|
{weeks.map((week, weekIndex) => (
|
|
94
118
|
<tr key={weekIndex}>
|
|
95
119
|
{week.map((day, dayIndex) => (
|
|
96
|
-
<td key={dayIndex} className={dayIndex > 4 ? '
|
|
120
|
+
<td key={dayIndex} className={dayIndex > 4 ? 'weekend' : ''}>
|
|
97
121
|
{day && (
|
|
98
122
|
<TableLink
|
|
99
123
|
item={day}
|
|
@@ -103,10 +127,11 @@ class DayCalendarTable extends PureComponent {
|
|
|
103
127
|
locale,
|
|
104
128
|
SHORT_DAY_FORMAT,
|
|
105
129
|
)}
|
|
130
|
+
autofocus={day === autoFocusDay}
|
|
106
131
|
longTitle={formatDate(new Date(viewYear, viewMonth, day), locale)}
|
|
107
132
|
active={this.isActive(day)}
|
|
108
133
|
disabled={this.isDisabled(day)}
|
|
109
|
-
today={
|
|
134
|
+
today={this.isToday(day)}
|
|
110
135
|
onClick={this.selectDay}
|
|
111
136
|
/>
|
|
112
137
|
)}
|
|
@@ -117,6 +117,31 @@ describe('DayCalendarTable', () => {
|
|
|
117
117
|
expect(props.onSelect).toHaveBeenCalledWith(new Date(2018, 11, 1));
|
|
118
118
|
});
|
|
119
119
|
|
|
120
|
+
it('sets autofocus to true when 5 is the selected day', () => {
|
|
121
|
+
component.setProps({ selectedDate: new Date(2018, 11, 5) });
|
|
122
|
+
expect(getTableLinkAt(4).prop('autofocus')).toBe(true);
|
|
123
|
+
});
|
|
124
|
+
|
|
125
|
+
it('does not set autofocus to true when 5 is the selected day but not the right month', () => {
|
|
126
|
+
component.setProps({ selectedDate: new Date(2018, 10, 5) });
|
|
127
|
+
expect(getTableLinkAt(4).prop('autofocus')).toBe(false);
|
|
128
|
+
});
|
|
129
|
+
|
|
130
|
+
it('does not set autofocus to true when 5 is the selected day but not the right year', () => {
|
|
131
|
+
component.setProps({ selectedDate: new Date(2017, 11, 5) });
|
|
132
|
+
expect(getTableLinkAt(4).prop('autofocus')).toBe(false);
|
|
133
|
+
});
|
|
134
|
+
|
|
135
|
+
it('sets autofocus to true when selected date is null and current day is visible', () => {
|
|
136
|
+
const today = new Date();
|
|
137
|
+
component.setProps({
|
|
138
|
+
selectedDate: today,
|
|
139
|
+
viewMonth: today.getMonth(),
|
|
140
|
+
viewYear: today.getFullYear(),
|
|
141
|
+
});
|
|
142
|
+
expect(component.find(TableLink).find({ today: true }).prop('autofocus')).toBe(true);
|
|
143
|
+
});
|
|
144
|
+
|
|
120
145
|
const getTableLinkAt = (i) => component.find(TableLink).at(i);
|
|
121
146
|
const getTableDataAt = (i) => component.find('tbody td').at(i);
|
|
122
147
|
});
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { getFocusableTime } from './getFocusableTime';
|
|
2
|
+
|
|
3
|
+
describe('getFocusableTime', () => {
|
|
4
|
+
const isActive = (value: number) => value === 2;
|
|
5
|
+
const isNow = (value: number) => value === 3;
|
|
6
|
+
const isDisabled = (value: number) => value === 4;
|
|
7
|
+
const values = [1, 2, 3, 4, 5];
|
|
8
|
+
|
|
9
|
+
it('returns first selected value', () => {
|
|
10
|
+
expect(getFocusableTime({ isActive, isNow, isDisabled, timeSpan: values })).toBe(2);
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
it('returns first now value if nothing is selected', () => {
|
|
14
|
+
expect(getFocusableTime({ isActive: () => false, isNow, isDisabled, timeSpan: values })).toBe(
|
|
15
|
+
3,
|
|
16
|
+
);
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
it('returns first non disabled value when nothing is selected or now', () => {
|
|
20
|
+
expect(
|
|
21
|
+
getFocusableTime({
|
|
22
|
+
isActive: () => false,
|
|
23
|
+
isNow: () => false,
|
|
24
|
+
isDisabled,
|
|
25
|
+
timeSpan: values,
|
|
26
|
+
}),
|
|
27
|
+
).toBe(1);
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
it('returns null if no selected, now, or non-disabled', () => {
|
|
31
|
+
expect(
|
|
32
|
+
getFocusableTime({
|
|
33
|
+
isActive: () => false,
|
|
34
|
+
isNow: () => false,
|
|
35
|
+
isDisabled: () => true,
|
|
36
|
+
timeSpan: values,
|
|
37
|
+
}),
|
|
38
|
+
).toBeUndefined();
|
|
39
|
+
});
|
|
40
|
+
});
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
interface FocusableTimeProps {
|
|
2
|
+
isActive: (time: number) => boolean;
|
|
3
|
+
isNow: (time: number) => boolean;
|
|
4
|
+
isDisabled: (time: number) => boolean;
|
|
5
|
+
timeSpan: number[];
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
export function getFocusableTime(props: FocusableTimeProps): number | undefined {
|
|
9
|
+
return (
|
|
10
|
+
props.timeSpan.find((time: number) => props.isActive(time)) ||
|
|
11
|
+
props.timeSpan.find((time: number) => props.isNow(time) && !props.isDisabled(time)) ||
|
|
12
|
+
props.timeSpan.find((time: number) => !props.isDisabled(time))
|
|
13
|
+
);
|
|
14
|
+
}
|