@transferwise/components 0.0.0-experimental-8f9699a → 0.0.0-experimental-a25e4d8
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 +75 -152
- package/build/index.esm.js.map +1 -1
- package/build/index.js +75 -152
- 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/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 +4 -14
- 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 +4 -19
- package/src/dateLookup/DateLookup.keyboardEvents.spec.js +0 -12
- package/src/dateLookup/DateLookup.less +49 -39
- package/src/dateLookup/DateLookup.story.js +7 -8
- package/src/dateLookup/dayCalendar/table/DayCalendarTable.js +3 -28
- package/src/dateLookup/dayCalendar/table/DayCalendarTable.spec.js +0 -25
- package/src/dateLookup/monthCalendar/table/MonthCalendarTable.js +20 -33
- package/src/dateLookup/monthCalendar/table/MonthCalendarTable.spec.js +0 -33
- package/src/dateLookup/tableLink/TableLink.js +70 -0
- package/src/dateLookup/tableLink/TableLink.spec.js +15 -6
- package/src/dateLookup/yearCalendar/table/YearCalendarTable.js +11 -33
- package/src/dateLookup/yearCalendar/table/YearCalendarTable.spec.js +0 -26
- package/src/main.css +1 -1
- package/build/types/dateLookup/getFocusableTime/getFocusableTime.d.ts +0 -9
- package/build/types/dateLookup/getFocusableTime/getFocusableTime.d.ts.map +0 -1
- package/src/dateLookup/getFocusableTime/getFocusable.spec.ts +0 -40
- package/src/dateLookup/getFocusableTime/getFocusableTime.tsx +0 -14
- package/src/dateLookup/tableLink/TableLink.tsx +0 -79
- /package/src/dateLookup/tableLink/{index.ts → index.js} +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;IAmBE;;;;;;aAqBC;IAnCD,wBAYC;IAhBD,wCAAsB;IAEtB,yCAAuB;IAIrB;;;;;;;;;MASC;IA0BH,6CAMC;IAFC,uCAAyE;IAI3E,6BAGC;IAED,iBAOE;IAEF,kBAME;IAEF,oCA0CE;IAEF,wEAgBE;IAEF,+DAOE;IAEF,gCAIE;IAEF,yBAA+C;IAE/C,2BAAmD;IAEnD,0BAAiD;IAEjD,sDAME;IAEF;;;eAEE;IAEF,+CA8BE;IAEF,wBAGE;IAEF,sCA0BC;CACF"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export default MonthCalendarTable;
|
|
2
|
-
declare function MonthCalendarTable({ selectedDate, min, max, viewYear, placeholder, onSelect }: {
|
|
2
|
+
declare function MonthCalendarTable({ selectedDate: selected, 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":";AAUA;;;;;;;gCAgDC"}
|
|
@@ -1,15 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
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;
|
|
1
|
+
declare const _default: import("react").FC<import("react-intl").WithIntlProps<any>> & {
|
|
2
|
+
WrappedComponent: import("react").ComponentType<any>;
|
|
3
|
+
};
|
|
4
|
+
export default _default;
|
|
15
5
|
//# 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.js"],"names":[],"mappings":""}
|
|
@@ -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.js"],"names":[],"mappings":""}
|
|
@@ -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":";AAUA;;;;;;;gCAkCC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-a25e4d8",
|
|
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{
|
|
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:not(.disabled,:disabled).active{background-color:#0081ba;background-color:var(--color-interactive-accent-active);color:#fff}.tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{background-color:#008fc9;background-color:var(--color-interactive-accent-hover);color:#fff}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled).active,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{color:var(--color-interactive-control)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+6) button,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+7) button,.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+6),.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+7){color:#5d7079;color:var(--color-content-secondary);font-weight:400;font-weight:var(--font-weight-regular)}.tw-date-lookup-calendar abbr{text-decoration:none}.np-theme-personal .tw-date-lookup-calendar{background-color:inherit}.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-container,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current-container{display:inline-block}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current-container .tw-date-lookup-header-current,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current-container .tw-date-lookup-header-current{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-day-option,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-day-option{align-items:center;color:#37517e;color:var(--color-content-primary);display:inline-flex;height:32px;height:var(--size-32);justify-content:center;line-height:32px;line-height:var(--size-32)}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-day-option.active,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-day-option.active{background-color:#00a2dd;background-color:var(--color-interactive-accent);color:var(--color-interactive-primary)}
|
|
@@ -28,7 +28,6 @@ class DateLookup extends PureComponent {
|
|
|
28
28
|
super(props);
|
|
29
29
|
this.state = {
|
|
30
30
|
selectedDate: getStartOfDay(props.value),
|
|
31
|
-
originalDate: null,
|
|
32
31
|
min: getStartOfDay(props.min),
|
|
33
32
|
max: getStartOfDay(props.max),
|
|
34
33
|
viewMonth: (props.value || new Date()).getMonth(),
|
|
@@ -84,24 +83,16 @@ class DateLookup extends PureComponent {
|
|
|
84
83
|
}
|
|
85
84
|
};
|
|
86
85
|
|
|
87
|
-
discard = () => {
|
|
88
|
-
const { originalDate } = this.state;
|
|
89
|
-
if (originalDate !== null) {
|
|
90
|
-
this.props.onChange(originalDate);
|
|
91
|
-
}
|
|
92
|
-
this.close();
|
|
93
|
-
};
|
|
94
|
-
|
|
95
86
|
close = () => {
|
|
96
87
|
const { onBlur } = this.props;
|
|
97
|
-
this.setState({ open: false
|
|
88
|
+
this.setState({ open: false });
|
|
98
89
|
if (onBlur) {
|
|
99
90
|
onBlur();
|
|
100
91
|
}
|
|
101
92
|
};
|
|
102
93
|
|
|
103
94
|
handleKeyDown = (event) => {
|
|
104
|
-
const { open
|
|
95
|
+
const { open } = this.state;
|
|
105
96
|
switch (event.keyCode) {
|
|
106
97
|
case KeyCodes.LEFT:
|
|
107
98
|
if (open) {
|
|
@@ -136,9 +127,6 @@ class DateLookup extends PureComponent {
|
|
|
136
127
|
event.preventDefault();
|
|
137
128
|
break;
|
|
138
129
|
case KeyCodes.ESCAPE:
|
|
139
|
-
if (originalDate !== null) {
|
|
140
|
-
this.props.onChange(originalDate);
|
|
141
|
-
}
|
|
142
130
|
this.close();
|
|
143
131
|
event.preventDefault();
|
|
144
132
|
break;
|
|
@@ -148,10 +136,7 @@ class DateLookup extends PureComponent {
|
|
|
148
136
|
};
|
|
149
137
|
|
|
150
138
|
adjustDate = (daysToAdd, monthsToAdd, yearsToAdd) => {
|
|
151
|
-
const { selectedDate, min, max, mode
|
|
152
|
-
if (originalDate === null) {
|
|
153
|
-
this.setState({ originalDate: selectedDate });
|
|
154
|
-
}
|
|
139
|
+
const { selectedDate, min, max, mode } = this.state;
|
|
155
140
|
let date;
|
|
156
141
|
if (selectedDate) {
|
|
157
142
|
date = new Date(
|
|
@@ -258,7 +243,7 @@ class DateLookup extends PureComponent {
|
|
|
258
243
|
open={open}
|
|
259
244
|
className="tw-date-lookup-menu"
|
|
260
245
|
position={Position.BOTTOM}
|
|
261
|
-
onClose={this.
|
|
246
|
+
onClose={this.close}
|
|
262
247
|
>
|
|
263
248
|
{this.getCalendar()}
|
|
264
249
|
</ResponsivePanel>
|
|
@@ -80,18 +80,6 @@ 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
|
-
});
|
|
95
83
|
});
|
|
96
84
|
|
|
97
85
|
describe('when open and in month mode', () => {
|
|
@@ -9,21 +9,12 @@
|
|
|
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
|
-
|
|
17
12
|
> tbody > tr > td {
|
|
18
13
|
padding: var(--size-4);
|
|
19
14
|
@media (--screen-400-zoom) {
|
|
20
15
|
padding: 0;
|
|
21
16
|
}
|
|
22
17
|
|
|
23
|
-
&:has(.tw-date-lookup-day-option) {
|
|
24
|
-
padding: 1px;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
18
|
button {
|
|
28
19
|
width: 100%;
|
|
29
20
|
padding: var(--size-4) 0;
|
|
@@ -35,34 +26,37 @@
|
|
|
35
26
|
border-radius: var(--radius-small);
|
|
36
27
|
background-color: transparent;
|
|
37
28
|
font-weight: var(--font-weight-semi-bold);
|
|
38
|
-
color: var(--color-content-primary);
|
|
39
29
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
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;
|
|
54
|
-
}
|
|
30
|
+
&:not(.disabled, :disabled).active {
|
|
31
|
+
color: #fff;
|
|
32
|
+
background-color: var(--color-interactive-accent-active);
|
|
55
33
|
}
|
|
56
|
-
}
|
|
57
34
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
35
|
+
&:not(.disabled, :disabled):hover {
|
|
36
|
+
color: #fff;
|
|
37
|
+
background-color: var(--color-interactive-accent-hover);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.np-theme-personal & {
|
|
41
|
+
color: var(--color-content-primary);
|
|
42
|
+
|
|
43
|
+
&:not(.disabled, :disabled).active {
|
|
44
|
+
color: var(--color-interactive-control);
|
|
45
|
+
}
|
|
62
46
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
47
|
+
&:not(.disabled, :disabled):hover {
|
|
48
|
+
color: var(--color-interactive-control);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
> thead > tr > th:nth-child(7n+6),
|
|
54
|
+
> thead > tr > th:nth-child(7n+7),
|
|
55
|
+
> tbody > tr > td:nth-child(7n+6) button,
|
|
56
|
+
> tbody > tr > td:nth-child(7n+7) button {
|
|
57
|
+
.np-theme-personal & {
|
|
58
|
+
color: var(--color-content-secondary);
|
|
59
|
+
font-weight: var(--font-weight-regular);
|
|
66
60
|
}
|
|
67
61
|
}
|
|
68
62
|
|
|
@@ -70,11 +64,9 @@
|
|
|
70
64
|
text-decoration: none;
|
|
71
65
|
}
|
|
72
66
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
.tw-date-lookup-header-current-container {
|
|
77
|
-
display: inline;
|
|
67
|
+
.np-theme-personal & {
|
|
68
|
+
background-color: inherit;
|
|
69
|
+
}
|
|
78
70
|
}
|
|
79
71
|
|
|
80
72
|
.np-theme-personal {
|
|
@@ -91,9 +83,27 @@
|
|
|
91
83
|
td {
|
|
92
84
|
border: none;
|
|
93
85
|
}
|
|
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-
|
|
95
|
+
.tw-date-lookup-day-option {
|
|
96
|
+
height: var(--size-32);
|
|
97
|
+
line-height: var(--size-32);
|
|
98
|
+
display: inline-flex;
|
|
99
|
+
align-items: center;
|
|
100
|
+
justify-content: center;
|
|
96
101
|
color: var(--color-content-primary);
|
|
97
102
|
}
|
|
103
|
+
|
|
104
|
+
.tw-date-lookup-day-option.active {
|
|
105
|
+
background-color: var(--color-interactive-accent);
|
|
106
|
+
color: var(--color-interactive-primary);
|
|
107
|
+
}
|
|
98
108
|
}
|
|
99
109
|
}
|
|
@@ -13,8 +13,6 @@ 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);
|
|
18
16
|
|
|
19
17
|
export const Basic = () => {
|
|
20
18
|
const [value, setValue] = useState(null);
|
|
@@ -24,13 +22,16 @@ export const Basic = () => {
|
|
|
24
22
|
const placeholder = text('placeholder', 'placeholder');
|
|
25
23
|
const size = select('size', Object.values(Size), Size.MEDIUM);
|
|
26
24
|
|
|
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
|
-
|
|
33
|
+
max={new Date(maxvalue)}
|
|
34
|
+
min={new Date(minvalue)}
|
|
34
35
|
monthFormat={monthFormat}
|
|
35
36
|
placeholder={placeholder}
|
|
36
37
|
size={size}
|
|
@@ -41,11 +42,9 @@ export const Basic = () => {
|
|
|
41
42
|
);
|
|
42
43
|
};
|
|
43
44
|
|
|
44
|
-
Basic.play =
|
|
45
|
-
// testing focus state on keyboard nav
|
|
45
|
+
Basic.play = ({ canvasElement }) => {
|
|
46
46
|
const canvas = within(canvasElement);
|
|
47
|
-
userEvent.
|
|
48
|
-
userEvent.keyboard('{space}');
|
|
47
|
+
userEvent.click(canvas.getByRole('button'));
|
|
49
48
|
};
|
|
50
49
|
|
|
51
50
|
export const Basic400Zoom = storyConfig(
|
|
@@ -61,7 +60,7 @@ export const RightAligned = () => {
|
|
|
61
60
|
const placeholder = text('placeholder', 'placeholder');
|
|
62
61
|
const size = select('size', Object.values(Size), Size.MEDIUM);
|
|
63
62
|
|
|
64
|
-
const minvalue = date('minvalue',
|
|
63
|
+
const minvalue = date('minvalue', new Date());
|
|
65
64
|
const maxvalue = date('maxvalue', theFuture);
|
|
66
65
|
const clearable = boolean('clearable', false);
|
|
67
66
|
|
|
@@ -4,7 +4,6 @@ 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';
|
|
8
7
|
import { getStartOfDay } from '../../getStartOfDay';
|
|
9
8
|
import TableLink from '../../tableLink';
|
|
10
9
|
|
|
@@ -66,21 +65,6 @@ class DayCalendarTable extends PureComponent {
|
|
|
66
65
|
return !!(selectedDate && +new Date(viewYear, viewMonth, day) === +selectedDate);
|
|
67
66
|
};
|
|
68
67
|
|
|
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
|
-
|
|
84
68
|
render() {
|
|
85
69
|
const {
|
|
86
70
|
viewMonth,
|
|
@@ -88,20 +72,12 @@ class DayCalendarTable extends PureComponent {
|
|
|
88
72
|
intl: { locale },
|
|
89
73
|
} = this.props;
|
|
90
74
|
const weeks = this.getTableStructure();
|
|
91
|
-
let autoFocusDay = this.getAutofocusDay(weeks, viewMonth, viewYear);
|
|
92
75
|
return (
|
|
93
76
|
<table className="table table-condensed table-bordered tw-date-lookup-calendar m-b-0">
|
|
94
77
|
<thead>
|
|
95
78
|
<tr>
|
|
96
79
|
{this.days.map((day, index) => (
|
|
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
|
-
>
|
|
80
|
+
<th key={day} className="text-xs-center np-text-body-default-bold">
|
|
105
81
|
<span className="hidden-xs">
|
|
106
82
|
<abbr title={this.daysLong[index]}>{day.slice(0, 3)}</abbr>
|
|
107
83
|
</span>
|
|
@@ -117,7 +93,7 @@ class DayCalendarTable extends PureComponent {
|
|
|
117
93
|
{weeks.map((week, weekIndex) => (
|
|
118
94
|
<tr key={weekIndex}>
|
|
119
95
|
{week.map((day, dayIndex) => (
|
|
120
|
-
<td key={dayIndex} className={dayIndex > 4 ? '
|
|
96
|
+
<td key={dayIndex} className={dayIndex > 4 ? 'default' : ''}>
|
|
121
97
|
{day && (
|
|
122
98
|
<TableLink
|
|
123
99
|
item={day}
|
|
@@ -127,11 +103,10 @@ class DayCalendarTable extends PureComponent {
|
|
|
127
103
|
locale,
|
|
128
104
|
SHORT_DAY_FORMAT,
|
|
129
105
|
)}
|
|
130
|
-
autofocus={day === autoFocusDay}
|
|
131
106
|
longTitle={formatDate(new Date(viewYear, viewMonth, day), locale)}
|
|
132
107
|
active={this.isActive(day)}
|
|
133
108
|
disabled={this.isDisabled(day)}
|
|
134
|
-
today={
|
|
109
|
+
today={+getStartOfDay(new Date()) === +new Date(viewYear, viewMonth, day)}
|
|
135
110
|
onClick={this.selectDay}
|
|
136
111
|
/>
|
|
137
112
|
)}
|
|
@@ -117,31 +117,6 @@ 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
|
-
|
|
145
120
|
const getTableLinkAt = (i) => component.find(TableLink).at(i);
|
|
146
121
|
const getTableDataAt = (i) => component.find('tbody td').at(i);
|
|
147
122
|
});
|
|
@@ -2,40 +2,33 @@ import { formatDate } from '@transferwise/formatting';
|
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import { useIntl } from 'react-intl';
|
|
4
4
|
|
|
5
|
-
import { getFocusableTime } from '../../getFocusableTime/getFocusableTime';
|
|
6
5
|
import TableLink from '../../tableLink';
|
|
7
6
|
|
|
8
7
|
const ROWS = 3;
|
|
9
8
|
const COLS = 4;
|
|
10
|
-
const
|
|
9
|
+
const MONTH_ONLY_FORMAY = { month: 'short' };
|
|
11
10
|
|
|
12
|
-
const MonthCalendarTable = ({
|
|
11
|
+
const MonthCalendarTable = ({
|
|
12
|
+
selectedDate: selected,
|
|
13
|
+
min,
|
|
14
|
+
max,
|
|
15
|
+
viewYear,
|
|
16
|
+
placeholder,
|
|
17
|
+
onSelect,
|
|
18
|
+
}) => {
|
|
13
19
|
const { locale } = useIntl();
|
|
14
|
-
const getLink = (month) => {
|
|
15
|
-
return (
|
|
16
|
-
<TableLink
|
|
17
|
-
item={month}
|
|
18
|
-
type="month"
|
|
19
|
-
title={formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAT)}
|
|
20
|
-
active={isActive(month)}
|
|
21
|
-
disabled={isDisabled(month)}
|
|
22
|
-
today={viewYear === new Date().getFullYear() && month === new Date().getMonth()}
|
|
23
|
-
autofocus={autofocusMonth === month}
|
|
24
|
-
onClick={onSelect}
|
|
25
|
-
/>
|
|
26
|
-
);
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
const isActive = (month) => {
|
|
30
|
-
return (
|
|
31
|
-
selectedDate && month === selectedDate.getMonth() && viewYear === selectedDate.getFullYear()
|
|
32
|
-
);
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
const isThisMonth = (month) => {
|
|
36
|
-
return viewYear === new Date().getFullYear() && month === new Date().getMonth();
|
|
37
|
-
};
|
|
38
20
|
|
|
21
|
+
const getLink = (month) => (
|
|
22
|
+
<TableLink
|
|
23
|
+
item={month}
|
|
24
|
+
type="month"
|
|
25
|
+
title={formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAY)}
|
|
26
|
+
active={!!(selected && month === selected.getMonth() && viewYear === selected.getFullYear())}
|
|
27
|
+
disabled={isDisabled(month)}
|
|
28
|
+
today={viewYear === new Date().getFullYear() && month === new Date().getMonth()}
|
|
29
|
+
onClick={onSelect}
|
|
30
|
+
/>
|
|
31
|
+
);
|
|
39
32
|
const isDisabled = (month) => {
|
|
40
33
|
const date = new Date(viewYear, month);
|
|
41
34
|
return !!(
|
|
@@ -43,12 +36,6 @@ const MonthCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onS
|
|
|
43
36
|
(max && date > new Date(max.getFullYear(), max.getMonth()))
|
|
44
37
|
);
|
|
45
38
|
};
|
|
46
|
-
|
|
47
|
-
const autofocusMonth = (() => {
|
|
48
|
-
const months = [...new Array(ROWS * COLS)].map((_, index) => index);
|
|
49
|
-
return getFocusableTime({ isActive, isNow: isThisMonth, isDisabled, timeSpan: months });
|
|
50
|
-
})();
|
|
51
|
-
|
|
52
39
|
return (
|
|
53
40
|
<table className="table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0">
|
|
54
41
|
<thead className="sr-only">
|
|
@@ -82,39 +82,6 @@ describe('MonthCalendarTable', () => {
|
|
|
82
82
|
expect(component.find('.sr-only').text()).toBe('Enter date..');
|
|
83
83
|
});
|
|
84
84
|
|
|
85
|
-
it('sets autofocus to true when June is the selected month', () => {
|
|
86
|
-
component.setProps({ selectedDate: new Date(2018, 5, 1) });
|
|
87
|
-
expect(getTableLinkAt(5).prop('autofocus')).toBe(true);
|
|
88
|
-
});
|
|
89
|
-
|
|
90
|
-
it('does not set autofocus to true when June is the selected month but not the right year', () => {
|
|
91
|
-
component.setProps({ selectedDate: new Date(2017, 5, 1) });
|
|
92
|
-
expect(getTableLinkAt(5).prop('autofocus')).toBe(false);
|
|
93
|
-
});
|
|
94
|
-
|
|
95
|
-
it('sets autofocus to true when selected date is null and current month is visible', () => {
|
|
96
|
-
const today = new Date();
|
|
97
|
-
component.setProps({
|
|
98
|
-
selectedDate: null,
|
|
99
|
-
viewYear: today.getFullYear(),
|
|
100
|
-
viewMonth: today.getMonth(),
|
|
101
|
-
});
|
|
102
|
-
expect(getTableLink().find({ today: true }).prop('autofocus')).toBe(true);
|
|
103
|
-
});
|
|
104
|
-
|
|
105
|
-
it('sets autofocus to true on the second month when the first month is disabled', () => {
|
|
106
|
-
component.setProps({
|
|
107
|
-
selectedDate: null,
|
|
108
|
-
viewYear: 2022,
|
|
109
|
-
min: new Date(2022, 1, 28),
|
|
110
|
-
viewMonth: 0,
|
|
111
|
-
isDisabled: (month) => month === 0,
|
|
112
|
-
});
|
|
113
|
-
|
|
114
|
-
expect(getTableLinkAt(0).prop('autofocus')).toBe(false);
|
|
115
|
-
expect(getTableLinkAt(1).prop('autofocus')).toBe(true);
|
|
116
|
-
});
|
|
117
|
-
|
|
118
85
|
const getTableLinkAt = (i) => component.find('[title="MonthName"]').at(i);
|
|
119
86
|
const getTableLink = () => component.find('[title="MonthName"]');
|
|
120
87
|
});
|