@synerise/ds-date-picker 1.4.0 → 1.4.2
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/CHANGELOG.md +8 -0
- package/README.md +8 -7
- package/dist/DatePicker.const.js +6 -3
- package/dist/DatePicker.d.ts +2 -2
- package/dist/DatePicker.js +61 -101
- package/dist/DatePicker.styles.d.ts +4 -4
- package/dist/DatePicker.styles.js +17 -14
- package/dist/DatePicker.types.d.ts +6 -6
- package/dist/DatePicker.types.js +1 -1
- package/dist/Elements/DayPicker/DayPicker.d.ts +3 -3
- package/dist/Elements/DayPicker/DayPicker.js +60 -60
- package/dist/Elements/DayPicker/DayPicker.styles.d.ts +6 -6
- package/dist/Elements/DayPicker/DayPicker.styles.js +18 -75
- package/dist/Elements/DayPicker/DayPicker.types.d.ts +4 -4
- package/dist/Elements/DayPicker/DayPicker.types.js +1 -1
- package/dist/Elements/DecadePicker/DecadePicker.d.ts +2 -2
- package/dist/Elements/DecadePicker/DecadePicker.js +85 -71
- package/dist/Elements/DecadePicker/DecadePicker.types.js +1 -1
- package/dist/Elements/Footer/Footer.d.ts +3 -3
- package/dist/Elements/Footer/Footer.js +39 -55
- package/dist/Elements/Footer/Footer.styles.d.ts +4 -4
- package/dist/Elements/Footer/Footer.styles.js +13 -7
- package/dist/Elements/Footer/Footer.types.d.ts +2 -2
- package/dist/Elements/Footer/Footer.types.js +1 -1
- package/dist/Elements/GridPicker/GridPicker.d.ts +2 -2
- package/dist/Elements/GridPicker/GridPicker.js +36 -44
- package/dist/Elements/GridPicker/GridPicker.styles.d.ts +2 -2
- package/dist/Elements/GridPicker/GridPicker.styles.js +9 -19
- package/dist/Elements/GridPicker/GridPicker.types.d.ts +1 -1
- package/dist/Elements/GridPicker/GridPicker.types.js +1 -1
- package/dist/Elements/MonthPicker/MonthPicker.d.ts +3 -3
- package/dist/Elements/MonthPicker/MonthPicker.js +85 -85
- package/dist/Elements/MonthPicker/MonthPicker.types.d.ts +1 -1
- package/dist/Elements/MonthPicker/MonthPicker.types.js +1 -1
- package/dist/Elements/Navbar/Navbar.d.ts +2 -2
- package/dist/Elements/Navbar/Navbar.js +31 -69
- package/dist/Elements/Navbar/Navbar.styles.d.ts +6 -6
- package/dist/Elements/Navbar/Navbar.styles.js +19 -19
- package/dist/Elements/Navbar/Navbar.types.d.ts +1 -1
- package/dist/Elements/Navbar/Navbar.types.js +1 -1
- package/dist/Elements/PickerInput/PickerInput.d.ts +5 -5
- package/dist/Elements/PickerInput/PickerInput.js +56 -80
- package/dist/Elements/PickerInput/PickerInput.styles.d.ts +8 -8
- package/dist/Elements/PickerInput/PickerInput.styles.js +35 -40
- package/dist/Elements/PickerInput/PickerInput.types.d.ts +5 -5
- package/dist/Elements/PickerInput/PickerInput.types.js +1 -1
- package/dist/Elements/QuickPicks/QuickPicks.d.ts +2 -2
- package/dist/Elements/QuickPicks/QuickPicks.js +48 -29
- package/dist/Elements/QuickPicks/QuickPicks.styles.d.ts +1 -1
- package/dist/Elements/QuickPicks/QuickPicks.styles.js +6 -5
- package/dist/Elements/TimePicker/TimePicker.d.ts +2 -2
- package/dist/Elements/TimePicker/TimePicker.js +32 -47
- package/dist/Elements/TimePicker/TimePicker.styles.d.ts +1 -1
- package/dist/Elements/TimePicker/TimePicker.styles.js +6 -3
- package/dist/Elements/TimePicker/TimePicker.types.js +1 -1
- package/dist/Elements/YearPicker/YearPicker.d.ts +2 -2
- package/dist/Elements/YearPicker/YearPicker.js +90 -83
- package/dist/Elements/YearPicker/YearPicker.types.js +1 -1
- package/dist/RawDatePicker/RawDatePicker.d.ts +4 -4
- package/dist/RawDatePicker/RawDatePicker.js +202 -222
- package/dist/RawDatePicker/RawDatePicker.types.d.ts +1 -1
- package/dist/RawDatePicker/RawDatePicker.types.js +1 -1
- package/dist/fns.d.ts +22 -22
- package/dist/fns.js +46 -44
- package/dist/format.js +38 -17
- package/dist/index.js +15 -7
- package/dist/localeUtils.d.ts +1 -1
- package/dist/localeUtils.js +34 -52
- package/dist/modules.d.js +1 -1
- package/dist/modules.d.ts +0 -0
- package/dist/utils/getDefaultTexts.d.ts +2 -2
- package/dist/utils/getDefaultTexts.js +17 -24
- package/dist/utils.js +44 -19
- package/package.json +14 -14
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { DecadePickerProps, DecadePickerState } from './DecadePicker.types';
|
|
3
3
|
export default class DecadePicker extends React.PureComponent<DecadePickerProps, DecadePickerState> {
|
|
4
4
|
state: DecadePickerState;
|
|
5
5
|
getSnapshotBeforeUpdate(prevProps: Readonly<DecadePickerProps>): null;
|
|
@@ -1,106 +1,120 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import range from "lodash.range";
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { legacyParse } from "@date-fns/upgrade/v2";
|
|
5
|
+
import "date-fns/addDays";
|
|
6
|
+
import "date-fns/addMonths";
|
|
7
|
+
import "date-fns/addSeconds";
|
|
8
|
+
import fnsAddYears from "date-fns/addYears";
|
|
9
|
+
import "date-fns/differenceInSeconds";
|
|
10
|
+
import "date-fns/differenceInYears";
|
|
11
|
+
import "date-fns/endOfDay";
|
|
12
|
+
import "date-fns/endOfMonth";
|
|
13
|
+
import "date-fns/format";
|
|
14
|
+
import "date-fns/getSeconds";
|
|
15
|
+
import fnsGetYear from "date-fns/getYear";
|
|
16
|
+
import "date-fns/isAfter";
|
|
17
|
+
import "date-fns/isBefore";
|
|
18
|
+
import "date-fns/isEqual";
|
|
19
|
+
import "date-fns/isSameDay";
|
|
20
|
+
import "date-fns/isSameMonth";
|
|
21
|
+
import "date-fns/isSameYear";
|
|
22
|
+
import "date-fns/setDate";
|
|
23
|
+
import "date-fns/setMonth";
|
|
24
|
+
import fnsSetYear from "date-fns/setYear";
|
|
25
|
+
import "date-fns/startOfDay";
|
|
26
|
+
import "date-fns/startOfMonth";
|
|
27
|
+
import { getCenturyRange, getDecadeRange } from "../../utils.js";
|
|
28
|
+
import GridPicker from "../GridPicker/GridPicker.js";
|
|
29
|
+
import Navbar from "../Navbar/Navbar.js";
|
|
10
30
|
function getInitialState(props) {
|
|
11
31
|
return {
|
|
12
|
-
cursor: props.value || new Date()
|
|
32
|
+
cursor: props.value || /* @__PURE__ */ new Date()
|
|
13
33
|
};
|
|
14
34
|
}
|
|
15
35
|
function getCells(cursor) {
|
|
16
|
-
|
|
17
|
-
return range(0, 10).map(
|
|
18
|
-
|
|
36
|
+
const startYear = getCenturyRange(cursor)[0];
|
|
37
|
+
return range(0, 10).map((index) => {
|
|
38
|
+
const date = fnsAddYears(fnsSetYear(cursor, startYear), index * 10);
|
|
19
39
|
return {
|
|
20
40
|
key: date.toISOString(),
|
|
21
|
-
text: getDecadeRange(date).join(
|
|
41
|
+
text: getDecadeRange(date).join("-")
|
|
22
42
|
};
|
|
23
43
|
});
|
|
24
44
|
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
var cursor = _this.state.cursor;
|
|
35
|
-
_this.setState({
|
|
45
|
+
class DecadePicker extends React.PureComponent {
|
|
46
|
+
constructor() {
|
|
47
|
+
super(...arguments);
|
|
48
|
+
this.state = getInitialState(this.props);
|
|
49
|
+
this.handleLongPrev = () => {
|
|
50
|
+
const {
|
|
51
|
+
cursor
|
|
52
|
+
} = this.state;
|
|
53
|
+
this.setState({
|
|
36
54
|
cursor: fnsAddYears(cursor, -100)
|
|
37
55
|
});
|
|
38
56
|
};
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
57
|
+
this.handleLongNext = () => {
|
|
58
|
+
const {
|
|
59
|
+
cursor
|
|
60
|
+
} = this.state;
|
|
61
|
+
this.setState({
|
|
42
62
|
cursor: fnsAddYears(cursor, 100)
|
|
43
63
|
});
|
|
44
64
|
};
|
|
45
|
-
|
|
46
|
-
|
|
65
|
+
this.handleCellClick = (isoDate) => {
|
|
66
|
+
const {
|
|
67
|
+
onChange
|
|
68
|
+
} = this.props;
|
|
47
69
|
if (isoDate === -1) {
|
|
48
|
-
|
|
70
|
+
this.handleLongPrev();
|
|
49
71
|
return;
|
|
50
72
|
}
|
|
51
73
|
if (isoDate === 1) {
|
|
52
|
-
|
|
74
|
+
this.handleLongNext();
|
|
53
75
|
return;
|
|
54
76
|
}
|
|
55
77
|
onChange && onChange(new Date(isoDate));
|
|
56
78
|
};
|
|
57
|
-
return _this;
|
|
58
79
|
}
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
if (
|
|
80
|
+
getSnapshotBeforeUpdate(prevProps) {
|
|
81
|
+
const {
|
|
82
|
+
value
|
|
83
|
+
} = this.props;
|
|
84
|
+
if (prevProps?.value !== value) {
|
|
64
85
|
this.setState(getInitialState(this.props));
|
|
65
86
|
}
|
|
66
87
|
return null;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
88
|
+
}
|
|
89
|
+
render() {
|
|
90
|
+
const {
|
|
91
|
+
cursor
|
|
92
|
+
} = this.state;
|
|
93
|
+
const {
|
|
94
|
+
value,
|
|
95
|
+
onTitleClick
|
|
96
|
+
} = this.props;
|
|
97
|
+
const centuryRange = getCenturyRange(cursor);
|
|
98
|
+
let cells = getCells(cursor);
|
|
99
|
+
const valueCell = value ? cells.find((cell) => {
|
|
100
|
+
const valueYear = fnsGetYear(value);
|
|
101
|
+
const minYear = fnsGetYear(legacyParse(cell.key));
|
|
102
|
+
const maxYear = minYear + 10;
|
|
79
103
|
return valueYear >= minYear && valueYear < maxYear;
|
|
80
104
|
}) : null;
|
|
81
|
-
|
|
105
|
+
const selectedKey = valueCell ? valueCell.key : null;
|
|
82
106
|
cells = [{
|
|
83
107
|
key: -1,
|
|
84
|
-
text: centuryRange[0] - 10
|
|
108
|
+
text: `${centuryRange[0] - 10}-${centuryRange[0] - 1}`,
|
|
85
109
|
outside: true
|
|
86
|
-
}
|
|
110
|
+
}, ...cells, {
|
|
87
111
|
key: 1,
|
|
88
|
-
text: centuryRange[1] + 1
|
|
112
|
+
text: `${centuryRange[1] + 1}-${centuryRange[1] + 10}`,
|
|
89
113
|
outside: true
|
|
90
|
-
}]
|
|
91
|
-
return [
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
}), /*#__PURE__*/React.createElement(GridPicker, {
|
|
98
|
-
selectedKey: selectedKey,
|
|
99
|
-
cells: cells,
|
|
100
|
-
onCellClick: this.handleCellClick,
|
|
101
|
-
key: "body"
|
|
102
|
-
})];
|
|
103
|
-
};
|
|
104
|
-
return DecadePicker;
|
|
105
|
-
}(React.PureComponent);
|
|
106
|
-
export { DecadePicker as default };
|
|
114
|
+
}];
|
|
115
|
+
return [/* @__PURE__ */ jsx(Navbar, { title: centuryRange.join("-"), onTitleClick, onLongPrev: this.handleLongPrev, onLongNext: this.handleLongNext }, "head"), /* @__PURE__ */ jsx(GridPicker, { selectedKey, cells, onCellClick: this.handleCellClick }, "body")];
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
export {
|
|
119
|
+
DecadePicker as default
|
|
120
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
declare const _default: React.FC<import(
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { Props } from './Footer.types';
|
|
3
|
+
declare const _default: React.FC<import('react-intl').WithIntlProps<Props>> & {
|
|
4
4
|
WrappedComponent: React.ComponentType<Props>;
|
|
5
5
|
};
|
|
6
6
|
export default _default;
|
|
@@ -1,56 +1,40 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
})
|
|
35
|
-
},
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
"data-testid": "range-now",
|
|
41
|
-
type: "tertiary",
|
|
42
|
-
onClick: function onClick() {
|
|
43
|
-
onApply && onApply(new Date());
|
|
44
|
-
}
|
|
45
|
-
}, texts.now), /*#__PURE__*/React.createElement(S.ActionsPlaceholder, null), /*#__PURE__*/React.createElement(S.Actions, null, !dateOnly && SwitchModeButton, /*#__PURE__*/React.createElement(Tooltip, {
|
|
46
|
-
title: message
|
|
47
|
-
}, /*#__PURE__*/React.createElement(Button, {
|
|
48
|
-
"data-testid": "date-picker-apply",
|
|
49
|
-
disabled: !canApply,
|
|
50
|
-
type: "primary",
|
|
51
|
-
onClick: function onClick() {
|
|
52
|
-
onApply && onApply();
|
|
53
|
-
}
|
|
54
|
-
}, texts.apply))));
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { injectIntl } from "react-intl";
|
|
4
|
+
import { v4 } from "uuid";
|
|
5
|
+
import Button from "@synerise/ds-button";
|
|
6
|
+
import Icon, { CalendarM, ClockM } from "@synerise/ds-icon";
|
|
7
|
+
import Tooltip from "@synerise/ds-tooltip";
|
|
8
|
+
import { Container, Range, ActionsPlaceholder, Actions } from "./Footer.styles.js";
|
|
9
|
+
const Footer = ({
|
|
10
|
+
text,
|
|
11
|
+
canApply,
|
|
12
|
+
onApply,
|
|
13
|
+
intl,
|
|
14
|
+
canSwitchMode,
|
|
15
|
+
onSwitchMode,
|
|
16
|
+
mode,
|
|
17
|
+
dateOnly,
|
|
18
|
+
message,
|
|
19
|
+
texts,
|
|
20
|
+
hideNow,
|
|
21
|
+
...rest
|
|
22
|
+
}) => {
|
|
23
|
+
const SwitchModeButton = React.useMemo(() => /* @__PURE__ */ jsx(Button, { type: "ghost", mode: "single-icon", disabled: !canSwitchMode, onClick: onSwitchMode, className: "ds-date-time-switch", children: /* @__PURE__ */ jsx(Icon, { component: mode === "time" ? /* @__PURE__ */ jsx(CalendarM, {}) : /* @__PURE__ */ jsx(ClockM, {}) }) }, v4()), [mode, onSwitchMode, canSwitchMode]);
|
|
24
|
+
return /* @__PURE__ */ jsxs(Container, { className: "ds-date-picker-footer", ...rest, children: [
|
|
25
|
+
!hideNow && /* @__PURE__ */ jsx(Range, { "data-testid": "range-now", type: "tertiary", onClick: () => {
|
|
26
|
+
onApply && onApply(/* @__PURE__ */ new Date());
|
|
27
|
+
}, children: texts.now }),
|
|
28
|
+
/* @__PURE__ */ jsx(ActionsPlaceholder, {}),
|
|
29
|
+
/* @__PURE__ */ jsxs(Actions, { children: [
|
|
30
|
+
!dateOnly && SwitchModeButton,
|
|
31
|
+
/* @__PURE__ */ jsx(Tooltip, { title: message, children: /* @__PURE__ */ jsx(Button, { "data-testid": "date-picker-apply", disabled: !canApply, type: "primary", onClick: () => {
|
|
32
|
+
onApply && onApply();
|
|
33
|
+
}, children: texts.apply }) })
|
|
34
|
+
] })
|
|
35
|
+
] }, "date-picker-footer");
|
|
36
|
+
};
|
|
37
|
+
const Footer$1 = injectIntl(Footer);
|
|
38
|
+
export {
|
|
39
|
+
Footer$1 as default
|
|
55
40
|
};
|
|
56
|
-
export default injectIntl(Footer);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare const Container: import(
|
|
3
|
-
export declare const Actions: import(
|
|
1
|
+
import { StyledButton } from '@synerise/ds-button';
|
|
2
|
+
export declare const Container: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
3
|
+
export declare const Actions: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
4
4
|
export declare const Range: StyledButton;
|
|
5
|
-
export declare const ActionsPlaceholder: import(
|
|
5
|
+
export declare const ActionsPlaceholder: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
@@ -1,18 +1,24 @@
|
|
|
1
|
-
import styled from
|
|
2
|
-
import Button from
|
|
3
|
-
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
import Button from "@synerise/ds-button";
|
|
3
|
+
const Container = /* @__PURE__ */ styled.div.withConfig({
|
|
4
4
|
displayName: "Footerstyles__Container",
|
|
5
5
|
componentId: "sc-4iuhtr-0"
|
|
6
6
|
})(["display:flex;align-items:center;padding:12px 24px;"]);
|
|
7
|
-
|
|
7
|
+
const Actions = /* @__PURE__ */ styled.div.withConfig({
|
|
8
8
|
displayName: "Footerstyles__Actions",
|
|
9
9
|
componentId: "sc-4iuhtr-1"
|
|
10
10
|
})(["flex:0;display:flex;align-items:center;white-space:nowrap;> *:not(:last-child){margin-right:8px;}"]);
|
|
11
|
-
|
|
11
|
+
const Range = /* @__PURE__ */ styled(Button).withConfig({
|
|
12
12
|
displayName: "Footerstyles__Range",
|
|
13
13
|
componentId: "sc-4iuhtr-2"
|
|
14
14
|
})(["&&{margin:4px 0;&:not(:last-child){margin-right:8px;}}"]);
|
|
15
|
-
|
|
15
|
+
const ActionsPlaceholder = /* @__PURE__ */ styled.div.withConfig({
|
|
16
16
|
displayName: "Footerstyles__ActionsPlaceholder",
|
|
17
17
|
componentId: "sc-4iuhtr-3"
|
|
18
|
-
})(["display:flex;flex:1;"]);
|
|
18
|
+
})(["display:flex;flex:1;"]);
|
|
19
|
+
export {
|
|
20
|
+
Actions,
|
|
21
|
+
ActionsPlaceholder,
|
|
22
|
+
Container,
|
|
23
|
+
Range
|
|
24
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { WrappedComponentProps } from 'react-intl';
|
|
2
|
+
import { Texts } from '../../DatePicker.types';
|
|
3
3
|
export type Props = {
|
|
4
4
|
text?: string;
|
|
5
5
|
mode: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { Cell, GridPickerProps } from './GridPicker.types';
|
|
3
3
|
export default class GridPicker extends React.PureComponent<GridPickerProps> {
|
|
4
4
|
handleCellClick: (cell: Cell) => void;
|
|
5
5
|
renderCell: (cell: Cell) => React.ReactNode;
|
|
@@ -1,51 +1,43 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
10
|
-
args[_key] = arguments[_key];
|
|
11
|
-
}
|
|
12
|
-
_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
|
|
13
|
-
_this.handleCellClick = function (cell) {
|
|
1
|
+
import { jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import classNames from "classnames";
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { CellContainer, GridContainer } from "./GridPicker.styles.js";
|
|
5
|
+
class GridPicker extends React.PureComponent {
|
|
6
|
+
constructor() {
|
|
7
|
+
super(...arguments);
|
|
8
|
+
this.handleCellClick = (cell) => {
|
|
14
9
|
if (cell.disabled) {
|
|
15
10
|
return;
|
|
16
11
|
}
|
|
17
|
-
|
|
12
|
+
const {
|
|
13
|
+
onCellClick
|
|
14
|
+
} = this.props;
|
|
18
15
|
onCellClick && onCellClick(cell.key);
|
|
19
16
|
};
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
"data-attr": key,
|
|
36
|
-
key: key
|
|
37
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
38
|
-
className: "cell-content"
|
|
39
|
-
}, text));
|
|
17
|
+
this.renderCell = (cell) => {
|
|
18
|
+
const {
|
|
19
|
+
selectedKey
|
|
20
|
+
} = this.props;
|
|
21
|
+
const {
|
|
22
|
+
key,
|
|
23
|
+
text,
|
|
24
|
+
disabled,
|
|
25
|
+
outside
|
|
26
|
+
} = cell;
|
|
27
|
+
return /* @__PURE__ */ jsx(CellContainer, { className: classNames("cell", {
|
|
28
|
+
"cell--selected": selectedKey === key,
|
|
29
|
+
"cell--disabled": disabled,
|
|
30
|
+
"cell--outside": outside
|
|
31
|
+
}), onClick: () => this.handleCellClick(cell), "data-attr": key, children: /* @__PURE__ */ jsx("div", { className: "cell-content", children: text }) }, key);
|
|
40
32
|
};
|
|
41
|
-
return _this;
|
|
42
33
|
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
return
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
34
|
+
render() {
|
|
35
|
+
const {
|
|
36
|
+
cells
|
|
37
|
+
} = this.props;
|
|
38
|
+
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(GridContainer, { children: cells.map(this.renderCell) }) });
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
export {
|
|
42
|
+
GridPicker as default
|
|
43
|
+
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const GridContainer: import(
|
|
2
|
-
export declare const CellContainer: import(
|
|
1
|
+
export declare const GridContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export declare const CellContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
@@ -1,23 +1,13 @@
|
|
|
1
|
-
import styled from
|
|
2
|
-
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
const GridContainer = /* @__PURE__ */ styled.div.withConfig({
|
|
3
3
|
displayName: "GridPickerstyles__GridContainer",
|
|
4
4
|
componentId: "sc-i8w1ym-0"
|
|
5
|
-
})(["display:grid;grid-template-columns:1fr 1fr 1fr;font-size:12px;padding:0 8px;.cell{height:32px;margin:auto 8px;cursor:pointer;position:relative;vertical-align:middle;text-align:center;> div{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-radius:16px;&:hover{background-color:", ";color:", ";}}&--selected{font-weight:500;}&--outside{color:", ";}&--disabled{cursor:default;color:", ";}}.cell--selected:not(.cell--disabled):not(.cell--outside){> div{background-color:", ";color:", ";&:hover{background-color:", ";}}}"],
|
|
6
|
-
|
|
7
|
-
}, function (props) {
|
|
8
|
-
return props.theme.palette['blue-600'];
|
|
9
|
-
}, function (props) {
|
|
10
|
-
return props.theme.palette['grey-400'];
|
|
11
|
-
}, function (props) {
|
|
12
|
-
return props.theme.palette['grey-400'];
|
|
13
|
-
}, function (props) {
|
|
14
|
-
return props.theme.palette['blue-600'];
|
|
15
|
-
}, function (props) {
|
|
16
|
-
return props.theme.palette.white;
|
|
17
|
-
}, function (props) {
|
|
18
|
-
return props.theme.palette['blue-600'];
|
|
19
|
-
});
|
|
20
|
-
export var CellContainer = styled.div.withConfig({
|
|
5
|
+
})(["display:grid;grid-template-columns:1fr 1fr 1fr;font-size:12px;padding:0 8px;.cell{height:32px;margin:auto 8px;cursor:pointer;position:relative;vertical-align:middle;text-align:center;> div{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-radius:16px;&:hover{background-color:", ";color:", ";}}&--selected{font-weight:500;}&--outside{color:", ";}&--disabled{cursor:default;color:", ";}}.cell--selected:not(.cell--disabled):not(.cell--outside){> div{background-color:", ";color:", ";&:hover{background-color:", ";}}}"], (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["grey-400"], (props) => props.theme.palette["grey-400"], (props) => props.theme.palette["blue-600"], (props) => props.theme.palette.white, (props) => props.theme.palette["blue-600"]);
|
|
6
|
+
const CellContainer = /* @__PURE__ */ styled.div.withConfig({
|
|
21
7
|
displayName: "GridPickerstyles__CellContainer",
|
|
22
8
|
componentId: "sc-i8w1ym-1"
|
|
23
|
-
})([""]);
|
|
9
|
+
})([""]);
|
|
10
|
+
export {
|
|
11
|
+
CellContainer,
|
|
12
|
+
GridContainer
|
|
13
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
declare const _default: React.FC<import(
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { MonthPickerProps } from './MonthPicker.types';
|
|
3
|
+
declare const _default: React.FC<import('react-intl').WithIntlProps<MonthPickerProps>> & {
|
|
4
4
|
WrappedComponent: React.ComponentType<MonthPickerProps>;
|
|
5
5
|
};
|
|
6
6
|
export default _default;
|