@transferwise/components 0.0.0-experimental-3e282e9 → 0.0.0-experimental-65e51cb
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 +70 -134
- package/build/index.esm.js.map +1 -1
- package/build/index.js +70 -134
- package/build/index.js.map +1 -1
- package/build/main.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 +2 -16
- 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/build/types/info/Info.d.ts +6 -2
- package/build/types/info/Info.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/dateLookup/DateLookup.css +1 -1
- package/src/dateLookup/DateLookup.js +0 -3
- package/src/dateLookup/DateLookup.less +47 -57
- package/src/dateLookup/DateLookup.story.js +5 -7
- package/src/dateLookup/dayCalendar/table/DayCalendarTable.js +1 -35
- package/src/dateLookup/monthCalendar/table/MonthCalendarTable.js +20 -43
- package/src/dateLookup/tableLink/TableLink.js +70 -0
- package/src/dateLookup/yearCalendar/table/YearCalendarTable.js +11 -39
- package/src/info/Info.tsx +6 -1
- package/src/main.css +1 -1
- package/src/dateLookup/tableLink/TableLink.tsx +0 -77
- /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;IAmBE;;;;;;aAqBC;IAnCD,wBAYC;IAhBD,wCAAsB;IAEtB,yCAAuB;IAIrB;;;;;;;;;MASC;IA0BH,6CAMC;IAFC,uCAAyE;IAI3E,6BAGC;IAED,iBAOE;IAEF,kBAME;IAEF,
|
|
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":";AAUA;;;;;;;
|
|
1
|
+
{"version":3,"file":"MonthCalendarTable.d.ts","sourceRoot":"","sources":["../../../../../src/dateLookup/monthCalendar/table/MonthCalendarTable.js"],"names":[],"mappings":";AAUA;;;;;;;gCAgDC"}
|
|
@@ -1,19 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
interface TableLinkProps {
|
|
4
|
-
item: number;
|
|
5
|
-
type: 'day' | 'month' | 'year';
|
|
6
|
-
title?: string;
|
|
7
|
-
longTitle?: string;
|
|
8
|
-
active: boolean;
|
|
9
|
-
disabled: boolean;
|
|
10
|
-
today: boolean;
|
|
11
|
-
autofocus?: boolean;
|
|
12
|
-
onClick: (item: number) => void;
|
|
13
|
-
intl: IntlShape;
|
|
14
|
-
}
|
|
15
|
-
declare const _default: import("react").FC<import("react-intl").WithIntlProps<TableLinkProps>> & {
|
|
16
|
-
WrappedComponent: import("react").ComponentType<TableLinkProps>;
|
|
1
|
+
declare const _default: import("react").FC<import("react-intl").WithIntlProps<any>> & {
|
|
2
|
+
WrappedComponent: import("react").ComponentType<any>;
|
|
17
3
|
};
|
|
18
4
|
export default _default;
|
|
19
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":";AAUA;;;;;;;
|
|
1
|
+
{"version":3,"file":"YearCalendarTable.d.ts","sourceRoot":"","sources":["../../../../../src/dateLookup/yearCalendar/table/YearCalendarTable.js"],"names":[],"mappings":";AAUA;;;;;;;gCAkCC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { SizeSmall, SizeLarge } from '../common';
|
|
2
|
+
import { Position, SizeSmall, SizeLarge } from '../common';
|
|
3
3
|
export interface Props {
|
|
4
4
|
'aria-label': string;
|
|
5
5
|
/**
|
|
@@ -23,7 +23,11 @@ export interface Props {
|
|
|
23
23
|
* Title displayed inside a Popover a Modal
|
|
24
24
|
*/
|
|
25
25
|
title?: React.ReactNode;
|
|
26
|
+
/**
|
|
27
|
+
* Prferred placement of the Popover, does not apply to Modal
|
|
28
|
+
*/
|
|
29
|
+
preferredPlacement?: Position;
|
|
26
30
|
}
|
|
27
|
-
declare const Info: ({ className, content, onClick, presentation, size, title, "aria-label": ariaLabel, }: Props) => import("react").JSX.Element;
|
|
31
|
+
declare const Info: ({ className, content, onClick, presentation, size, title, "aria-label": ariaLabel, preferredPlacement, }: Props) => import("react").JSX.Element;
|
|
28
32
|
export default Info;
|
|
29
33
|
//# sourceMappingURL=Info.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Info.d.ts","sourceRoot":"","sources":["../../../src/info/Info.tsx"],"names":[],"mappings":";AAIA,OAAO,
|
|
1
|
+
{"version":3,"file":"Info.d.ts","sourceRoot":"","sources":["../../../src/info/Info.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAQ,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAMjE,MAAM,WAAW,KAAK;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,kBAAkB,CAAC,EAAE,QAAQ,CAAC;CAC/B;AAED,QAAA,MAAM,IAAI,6GASP,KAAK,gCAgDP,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
package/package.json
CHANGED
|
@@ -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)}
|
|
@@ -9,24 +9,12 @@
|
|
|
9
9
|
text-align: center;
|
|
10
10
|
table-layout: fixed;
|
|
11
11
|
|
|
12
|
-
> thead > tr > th:nth-child(7n+6),
|
|
13
|
-
> thead > tr > th:nth-child(7n+7),
|
|
14
|
-
> tbody > tr > td:nth-child(7n+6) button,
|
|
15
|
-
> tbody > tr > td:nth-child(7n+7) button {
|
|
16
|
-
color: var(--color-content-secondary);
|
|
17
|
-
font-weight: var(--font-weight-regular);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
12
|
> tbody > tr > td {
|
|
21
13
|
padding: var(--size-4);
|
|
22
14
|
@media (--screen-400-zoom) {
|
|
23
15
|
padding: 0;
|
|
24
16
|
}
|
|
25
17
|
|
|
26
|
-
&:has(.tw-date-lookup-day-option) {
|
|
27
|
-
padding: 1px;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
18
|
button {
|
|
31
19
|
width: 100%;
|
|
32
20
|
padding: var(--size-4) 0;
|
|
@@ -38,41 +26,37 @@
|
|
|
38
26
|
border-radius: var(--radius-small);
|
|
39
27
|
background-color: transparent;
|
|
40
28
|
font-weight: var(--font-weight-semi-bold);
|
|
41
|
-
color: var(--color-content-primary);
|
|
42
29
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
30
|
+
&:not(.disabled, :disabled).active {
|
|
31
|
+
color: #fff;
|
|
32
|
+
background-color: var(--color-interactive-accent-active);
|
|
33
|
+
}
|
|
34
|
+
|
|
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);
|
|
57
45
|
}
|
|
58
46
|
|
|
59
|
-
&:
|
|
60
|
-
|
|
61
|
-
// background-color: var(--color-background-screen-hover);
|
|
62
|
-
// color: var(--color-interactive-accent);
|
|
47
|
+
&:not(.disabled, :disabled):hover {
|
|
48
|
+
color: var(--color-interactive-control);
|
|
63
49
|
}
|
|
64
50
|
}
|
|
65
51
|
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
background-color: var(--color-interactive-primary);
|
|
75
|
-
color: var(--color-interactive-accent);
|
|
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);
|
|
76
60
|
}
|
|
77
61
|
}
|
|
78
62
|
|
|
@@ -80,16 +64,9 @@
|
|
|
80
64
|
text-decoration: none;
|
|
81
65
|
}
|
|
82
66
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
.tw-date-lookup-header-current-container {
|
|
87
|
-
display: inline !important;
|
|
88
|
-
}
|
|
89
|
-
.tw-date-lookup-header-current {
|
|
90
|
-
font-weight: var(--font-weight-bold);
|
|
91
|
-
|
|
92
|
-
|
|
67
|
+
.np-theme-personal & {
|
|
68
|
+
background-color: inherit;
|
|
69
|
+
}
|
|
93
70
|
}
|
|
94
71
|
|
|
95
72
|
.np-theme-personal {
|
|
@@ -106,14 +83,27 @@
|
|
|
106
83
|
td {
|
|
107
84
|
border: none;
|
|
108
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
|
+
}
|
|
109
94
|
|
|
110
|
-
.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;
|
|
111
101
|
color: var(--color-content-primary);
|
|
112
102
|
}
|
|
113
103
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
104
|
+
.tw-date-lookup-day-option.active {
|
|
105
|
+
background-color: var(--color-interactive-accent);
|
|
106
|
+
color: var(--color-interactive-primary);
|
|
107
|
+
}
|
|
118
108
|
}
|
|
119
|
-
}
|
|
109
|
+
}
|
|
@@ -15,9 +15,7 @@ let theFuture = new Date();
|
|
|
15
15
|
theFuture.setDate(theFuture.getDate() + 10);
|
|
16
16
|
|
|
17
17
|
export const Basic = () => {
|
|
18
|
-
|
|
19
|
-
// const [value, setValue] = useState(new Date(2030, 6, 6));
|
|
20
|
-
const [value, setValue] = useState(new Date());
|
|
18
|
+
const [value, setValue] = useState(null);
|
|
21
19
|
const disabled = boolean('disabled', false);
|
|
22
20
|
const label = text('label', 'label');
|
|
23
21
|
const monthFormat = select('monthFormat', ['long', 'short']);
|
|
@@ -25,12 +23,14 @@ export const Basic = () => {
|
|
|
25
23
|
const size = select('size', Object.values(Size), Size.MEDIUM);
|
|
26
24
|
|
|
27
25
|
const minvalue = date('minvalue', new Date());
|
|
26
|
+
const maxvalue = date('maxvalue', theFuture);
|
|
28
27
|
const clearable = boolean('clearable', false);
|
|
29
28
|
|
|
30
29
|
return (
|
|
31
30
|
<DateLookup
|
|
32
31
|
disabled={disabled}
|
|
33
32
|
label={label}
|
|
33
|
+
max={new Date(maxvalue)}
|
|
34
34
|
min={new Date(minvalue)}
|
|
35
35
|
monthFormat={monthFormat}
|
|
36
36
|
placeholder={placeholder}
|
|
@@ -42,11 +42,9 @@ export const Basic = () => {
|
|
|
42
42
|
);
|
|
43
43
|
};
|
|
44
44
|
|
|
45
|
-
Basic.play =
|
|
46
|
-
// testing focus state on keyboard nav
|
|
45
|
+
Basic.play = ({ canvasElement }) => {
|
|
47
46
|
const canvas = within(canvasElement);
|
|
48
|
-
userEvent.
|
|
49
|
-
userEvent.keyboard('{space}');
|
|
47
|
+
userEvent.click(canvas.getByRole('button'));
|
|
50
48
|
};
|
|
51
49
|
|
|
52
50
|
export const Basic400Zoom = storyConfig(
|
|
@@ -65,38 +65,6 @@ class DayCalendarTable extends PureComponent {
|
|
|
65
65
|
return !!(selectedDate && +new Date(viewYear, viewMonth, day) === +selectedDate);
|
|
66
66
|
};
|
|
67
67
|
|
|
68
|
-
isToday = (day, viewMonth, viewYear) => {
|
|
69
|
-
return +getStartOfDay(new Date()) === +new Date(viewYear, viewMonth, day);
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
getAutofocusDay = (weeks, viewMonth, viewYear) => {
|
|
73
|
-
let activeDay = null;
|
|
74
|
-
let today = null;
|
|
75
|
-
let lowestNonDisabledDay = null;
|
|
76
|
-
|
|
77
|
-
for (const week of weeks) {
|
|
78
|
-
for (const day of week) {
|
|
79
|
-
if (this.isActive(day)) {
|
|
80
|
-
activeDay = day;
|
|
81
|
-
break;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
if (this.isToday(day, viewMonth, viewYear)) {
|
|
85
|
-
today = day;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
if (day && !this.isDisabled(day) && lowestNonDisabledDay === null) {
|
|
89
|
-
lowestNonDisabledDay = day;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
if (activeDay !== null) {
|
|
94
|
-
break;
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
return activeDay || today || lowestNonDisabledDay;
|
|
98
|
-
};
|
|
99
|
-
|
|
100
68
|
render() {
|
|
101
69
|
const {
|
|
102
70
|
viewMonth,
|
|
@@ -104,7 +72,6 @@ class DayCalendarTable extends PureComponent {
|
|
|
104
72
|
intl: { locale },
|
|
105
73
|
} = this.props;
|
|
106
74
|
const weeks = this.getTableStructure();
|
|
107
|
-
let autoFocusDay = this.getAutofocusDay(weeks, viewMonth, viewYear);
|
|
108
75
|
return (
|
|
109
76
|
<table className="table table-condensed table-bordered tw-date-lookup-calendar m-b-0">
|
|
110
77
|
<thead>
|
|
@@ -136,11 +103,10 @@ class DayCalendarTable extends PureComponent {
|
|
|
136
103
|
locale,
|
|
137
104
|
SHORT_DAY_FORMAT,
|
|
138
105
|
)}
|
|
139
|
-
autofocus={day === autoFocusDay}
|
|
140
106
|
longTitle={formatDate(new Date(viewYear, viewMonth, day), locale)}
|
|
141
107
|
active={this.isActive(day)}
|
|
142
108
|
disabled={this.isDisabled(day)}
|
|
143
|
-
today={
|
|
109
|
+
today={+getStartOfDay(new Date()) === +new Date(viewYear, viewMonth, day)}
|
|
144
110
|
onClick={this.selectDay}
|
|
145
111
|
/>
|
|
146
112
|
)}
|
|
@@ -6,31 +6,29 @@ import TableLink from '../../tableLink';
|
|
|
6
6
|
|
|
7
7
|
const ROWS = 3;
|
|
8
8
|
const COLS = 4;
|
|
9
|
-
const
|
|
9
|
+
const MONTH_ONLY_FORMAY = { month: 'short' };
|
|
10
10
|
|
|
11
|
-
const MonthCalendarTable = ({
|
|
11
|
+
const MonthCalendarTable = ({
|
|
12
|
+
selectedDate: selected,
|
|
13
|
+
min,
|
|
14
|
+
max,
|
|
15
|
+
viewYear,
|
|
16
|
+
placeholder,
|
|
17
|
+
onSelect,
|
|
18
|
+
}) => {
|
|
12
19
|
const { locale } = useIntl();
|
|
13
|
-
const getLink = (month) => {
|
|
14
|
-
return (
|
|
15
|
-
<TableLink
|
|
16
|
-
item={month}
|
|
17
|
-
type="month"
|
|
18
|
-
title={formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAT)}
|
|
19
|
-
active={
|
|
20
|
-
!!(
|
|
21
|
-
selectedDate &&
|
|
22
|
-
month === selectedDate.getMonth() &&
|
|
23
|
-
viewYear === selectedDate.getFullYear()
|
|
24
|
-
)
|
|
25
|
-
}
|
|
26
|
-
disabled={isDisabled(month)}
|
|
27
|
-
today={viewYear === new Date().getFullYear() && month === new Date().getMonth()}
|
|
28
|
-
autofocus={autofocusMonth === month}
|
|
29
|
-
onClick={onSelect}
|
|
30
|
-
/>
|
|
31
|
-
);
|
|
32
|
-
};
|
|
33
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
|
+
);
|
|
34
32
|
const isDisabled = (month) => {
|
|
35
33
|
const date = new Date(viewYear, month);
|
|
36
34
|
return !!(
|
|
@@ -38,27 +36,6 @@ const MonthCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onS
|
|
|
38
36
|
(max && date > new Date(max.getFullYear(), max.getMonth()))
|
|
39
37
|
);
|
|
40
38
|
};
|
|
41
|
-
|
|
42
|
-
const months = [...new Array(ROWS * COLS)].map((_, index) => index);
|
|
43
|
-
const autofocusMonth = (() => {
|
|
44
|
-
let activeMonth = null;
|
|
45
|
-
let lowestNonDisabledMonth = null;
|
|
46
|
-
|
|
47
|
-
for (const month of months) {
|
|
48
|
-
if (selectedDate && month === selectedDate.getMonth()) {
|
|
49
|
-
activeMonth = month;
|
|
50
|
-
}
|
|
51
|
-
if (!isDisabled(month) && lowestNonDisabledMonth === null) {
|
|
52
|
-
lowestNonDisabledMonth = month;
|
|
53
|
-
}
|
|
54
|
-
if (activeMonth !== null) {
|
|
55
|
-
break;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
return activeMonth || lowestNonDisabledMonth;
|
|
60
|
-
})();
|
|
61
|
-
|
|
62
39
|
return (
|
|
63
40
|
<table className="table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0">
|
|
64
41
|
<thead className="sr-only">
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import PropTypes from 'prop-types';
|
|
2
|
+
import { PureComponent } from 'react';
|
|
3
|
+
import { injectIntl } from 'react-intl';
|
|
4
|
+
|
|
5
|
+
import messages from '../DateLookup.messages';
|
|
6
|
+
|
|
7
|
+
class TableLink extends PureComponent {
|
|
8
|
+
onClick = (event) => {
|
|
9
|
+
event.preventDefault();
|
|
10
|
+
if (!this.props.disabled) {
|
|
11
|
+
this.props.onClick(this.props.item);
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
calculateAriaLabel = (longTitle, title, active, type, formatMessage) => {
|
|
16
|
+
if (active) {
|
|
17
|
+
return `${longTitle || title}, ${formatMessage(messages.selected)} ${formatMessage(
|
|
18
|
+
messages[type],
|
|
19
|
+
)}`;
|
|
20
|
+
}
|
|
21
|
+
return longTitle || title;
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
render() {
|
|
25
|
+
const {
|
|
26
|
+
item,
|
|
27
|
+
type,
|
|
28
|
+
title,
|
|
29
|
+
longTitle,
|
|
30
|
+
active,
|
|
31
|
+
disabled,
|
|
32
|
+
today,
|
|
33
|
+
intl: { formatMessage },
|
|
34
|
+
} = this.props;
|
|
35
|
+
return (
|
|
36
|
+
<>
|
|
37
|
+
<button
|
|
38
|
+
type="button"
|
|
39
|
+
className={`tw-date-lookup-${type}-option ${active ? 'active' : ''} ${
|
|
40
|
+
today ? 'today' : ''
|
|
41
|
+
} np-text-body-default-bold`}
|
|
42
|
+
disabled={disabled}
|
|
43
|
+
aria-label={this.calculateAriaLabel(longTitle, title, active, type, formatMessage)}
|
|
44
|
+
aria-pressed={active}
|
|
45
|
+
onClick={this.onClick}
|
|
46
|
+
>
|
|
47
|
+
{title || item}
|
|
48
|
+
</button>
|
|
49
|
+
</>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
TableLink.propTypes = {
|
|
55
|
+
item: PropTypes.number.isRequired, // day (1-31), month (0-11) or year (2018 etc)
|
|
56
|
+
type: PropTypes.oneOf(['day', 'month', 'year']).isRequired,
|
|
57
|
+
title: PropTypes.string,
|
|
58
|
+
longTitle: PropTypes.string,
|
|
59
|
+
active: PropTypes.bool.isRequired,
|
|
60
|
+
disabled: PropTypes.bool.isRequired,
|
|
61
|
+
today: PropTypes.bool.isRequired,
|
|
62
|
+
onClick: PropTypes.func.isRequired,
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
TableLink.defaultProps = {
|
|
66
|
+
title: null,
|
|
67
|
+
longTitle: null,
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
export default injectIntl(TableLink);
|
|
@@ -11,45 +11,17 @@ const YEAR_ONLY_FORMAT = { year: 'numeric' };
|
|
|
11
11
|
const YearCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onSelect }) => {
|
|
12
12
|
const { locale } = useIntl();
|
|
13
13
|
const startYear = viewYear - (viewYear % 20);
|
|
14
|
-
const getLink = (year) =>
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
/>
|
|
26
|
-
);
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
const isDisabled = (year) => {
|
|
30
|
-
return !!((min && year < min.getFullYear()) || (max && year > max.getFullYear()));
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
const years = [...new Array(ROWS * COLS)].map((_, index) => startYear + index);
|
|
34
|
-
const autofocusYear = (() => {
|
|
35
|
-
let activeYear = null;
|
|
36
|
-
let lowestNonDisabledYear = null;
|
|
37
|
-
|
|
38
|
-
for (const year of years) {
|
|
39
|
-
if (selectedDate && year === selectedDate.getFullYear()) {
|
|
40
|
-
activeYear = year;
|
|
41
|
-
}
|
|
42
|
-
if (!isDisabled(year) && lowestNonDisabledYear === null) {
|
|
43
|
-
lowestNonDisabledYear = year;
|
|
44
|
-
}
|
|
45
|
-
if (activeYear !== null) {
|
|
46
|
-
break;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
return activeYear || lowestNonDisabledYear;
|
|
51
|
-
})();
|
|
52
|
-
|
|
14
|
+
const getLink = (year) => (
|
|
15
|
+
<TableLink
|
|
16
|
+
item={year}
|
|
17
|
+
type="year"
|
|
18
|
+
title={formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT)}
|
|
19
|
+
active={!!(selectedDate && year === selectedDate.getFullYear())}
|
|
20
|
+
disabled={!!((min && year < min.getFullYear()) || (max && year > max.getFullYear()))}
|
|
21
|
+
today={year === new Date().getFullYear()}
|
|
22
|
+
onClick={onSelect}
|
|
23
|
+
/>
|
|
24
|
+
);
|
|
53
25
|
return (
|
|
54
26
|
<table className="table table-condensed table-bordered tw-date-lookup-calendar m-b-0">
|
|
55
27
|
<thead className="sr-only">
|
package/src/info/Info.tsx
CHANGED
|
@@ -31,6 +31,10 @@ export interface Props {
|
|
|
31
31
|
* Title displayed inside a Popover a Modal
|
|
32
32
|
*/
|
|
33
33
|
title?: React.ReactNode;
|
|
34
|
+
/**
|
|
35
|
+
* Prferred placement of the Popover, does not apply to Modal
|
|
36
|
+
*/
|
|
37
|
+
preferredPlacement?: Position;
|
|
34
38
|
}
|
|
35
39
|
|
|
36
40
|
const Info = ({
|
|
@@ -41,6 +45,7 @@ const Info = ({
|
|
|
41
45
|
size = Size.SMALL,
|
|
42
46
|
title = undefined,
|
|
43
47
|
'aria-label': ariaLabel,
|
|
48
|
+
preferredPlacement = Position.BOTTOM,
|
|
44
49
|
}: Props) => {
|
|
45
50
|
const [open, setOpen] = useState(false);
|
|
46
51
|
|
|
@@ -75,7 +80,7 @@ const Info = ({
|
|
|
75
80
|
<Modal body={content} open={open} title={title} onClose={() => setOpen(false)} />
|
|
76
81
|
</>
|
|
77
82
|
) : (
|
|
78
|
-
<Popover content={content} preferredPlacement={
|
|
83
|
+
<Popover content={content} preferredPlacement={preferredPlacement} title={title}>
|
|
79
84
|
<button
|
|
80
85
|
type="button"
|
|
81
86
|
{...buttonProps}
|