@proprioo/salatim 31.2.1 → 32.0.0
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 +4 -0
- package/lib/date/index.d.ts +1 -1
- package/lib/date/index.js +2 -2
- package/lib/date/index.js.map +1 -1
- package/lib/date/src/datePicker/DatePicker.d.ts +5 -14
- package/lib/date/src/datePicker/DatePicker.js +4 -20
- package/lib/date/src/datePicker/DatePicker.js.map +1 -1
- package/lib/date/src/datePicker/DatePicker.stories.js +29 -0
- package/lib/date/src/datePicker/DatePicker.stories.js.map +1 -0
- package/lib/date/src/datePicker/DatePicker.styles.js +12 -22
- package/lib/date/src/datePicker/DatePicker.styles.js.map +1 -1
- package/lib/date/src/datePicker/DatePicker.test.js +31 -17
- package/lib/date/src/datePicker/DatePicker.test.js.map +1 -1
- package/lib/date/src/datePickerWrapper/DatePickerWrapper.d.ts +2 -7
- package/lib/date/src/datePickerWrapper/DatePickerWrapper.js +20 -23
- package/lib/date/src/datePickerWrapper/DatePickerWrapper.js.map +1 -1
- package/lib/date/src/datePickerWrapper/DatePickerWrapper.stories.js +8 -10
- package/lib/date/src/datePickerWrapper/DatePickerWrapper.stories.js.map +1 -1
- package/lib/date/src/datePickerWrapper/DatePickerWrapper.test.js +21 -38
- package/lib/date/src/datePickerWrapper/DatePickerWrapper.test.js.map +1 -1
- package/lib/date/src/datePickerWrapper/DatepickerWrapper.styles.d.ts +1 -3
- package/lib/date/src/datePickerWrapper/DatepickerWrapper.styles.js +6 -1
- package/lib/date/src/datePickerWrapper/DatepickerWrapper.styles.js.map +1 -1
- package/lib/date/src/interfaces.d.ts +12 -0
- package/lib/date/src/interfaces.js +3 -0
- package/lib/date/src/interfaces.js.map +1 -0
- package/lib/index.js +899 -973
- package/lib/index.js.map +1 -1
- package/package.json +2 -3
- package/lib/date/src/DayPicker.d.ts +0 -4
- package/lib/date/src/DayPicker.js +0 -14
- package/lib/date/src/DayPicker.js.map +0 -1
- package/lib/date/src/singleMonth/SingleMonth.d.ts +0 -11
- package/lib/date/src/singleMonth/SingleMonth.js +0 -20
- package/lib/date/src/singleMonth/SingleMonth.js.map +0 -1
- package/lib/date/src/singleMonth/SingleMonth.stories.js +0 -29
- package/lib/date/src/singleMonth/SingleMonth.stories.js.map +0 -1
- package/lib/date/src/singleMonth/SingleMonth.styles.d.ts +0 -1
- package/lib/date/src/singleMonth/SingleMonth.styles.js +0 -61
- package/lib/date/src/singleMonth/SingleMonth.styles.js.map +0 -1
- package/lib/date/src/singleMonth/SingleMonth.test.d.ts +0 -1
- package/lib/date/src/singleMonth/SingleMonth.test.js +0 -37
- package/lib/date/src/singleMonth/SingleMonth.test.js.map +0 -1
- /package/lib/date/src/{singleMonth/SingleMonth.stories.d.ts → datePicker/DatePicker.stories.d.ts} +0 -0
package/CHANGELOG.md
CHANGED
package/lib/date/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default as DatePicker } from './src/datePickerWrapper/DatePickerWrapper';
|
|
2
|
-
export { default as SingleMonth } from './src/
|
|
2
|
+
export { default as SingleMonth } from './src/datePicker/DatePicker';
|
package/lib/date/index.js
CHANGED
|
@@ -6,6 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.SingleMonth = exports.DatePicker = void 0;
|
|
7
7
|
var DatePickerWrapper_1 = require("./src/datePickerWrapper/DatePickerWrapper");
|
|
8
8
|
Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return __importDefault(DatePickerWrapper_1).default; } });
|
|
9
|
-
var
|
|
10
|
-
Object.defineProperty(exports, "SingleMonth", { enumerable: true, get: function () { return __importDefault(
|
|
9
|
+
var DatePicker_1 = require("./src/datePicker/DatePicker");
|
|
10
|
+
Object.defineProperty(exports, "SingleMonth", { enumerable: true, get: function () { return __importDefault(DatePicker_1).default; } });
|
|
11
11
|
//# sourceMappingURL=index.js.map
|
package/lib/date/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../packages/date/index.ts"],"names":[],"mappings":";;;;;;AAAA,+EAAkF;AAAzE,gIAAA,OAAO,OAAc;AAC9B,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../packages/date/index.ts"],"names":[],"mappings":";;;;;;AAAA,+EAAkF;AAAzE,gIAAA,OAAO,OAAc;AAC9B,0DAAqE;AAA5D,0HAAA,OAAO,OAAe"}
|
|
@@ -1,14 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
hasFocus: boolean;
|
|
7
|
-
language?: Language;
|
|
8
|
-
onDateChange(date: Date): void;
|
|
9
|
-
onFocusChange(focused: nullOrBoolean): void;
|
|
10
|
-
isDayBlocked?(date: Date): boolean;
|
|
11
|
-
};
|
|
12
|
-
export declare const defaultBlockedDays: (day: Moment) => boolean;
|
|
13
|
-
declare const _default: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
|
|
14
|
-
export default _default;
|
|
1
|
+
import 'react-day-picker/dist/style.css';
|
|
2
|
+
import { FC } from 'react';
|
|
3
|
+
import { DatePickerProps } from '../interfaces';
|
|
4
|
+
declare const PickerDate: FC<DatePickerProps>;
|
|
5
|
+
export default PickerDate;
|
|
@@ -1,25 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.defaultBlockedDays = void 0;
|
|
7
3
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
-
|
|
9
|
-
const
|
|
10
|
-
const hokkaido_1 = require("@proprioo/hokkaido");
|
|
11
|
-
const DayPicker_1 = require("../DayPicker");
|
|
4
|
+
require("react-day-picker/dist/style.css");
|
|
5
|
+
const react_day_picker_1 = require("react-day-picker");
|
|
12
6
|
const DatePicker_styles_1 = require("./DatePicker.styles");
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
exports.defaultBlockedDays = defaultBlockedDays;
|
|
16
|
-
const DatePicker = ({ date, hasFocus, language = hokkaido_1.Language.FRENCH, layoutRef, isDayBlocked, onDateChange, onFocusChange }) => {
|
|
17
|
-
moment_1.default.locale(language);
|
|
18
|
-
return ((0, jsx_runtime_1.jsx)(DatePicker_styles_1.DatePickerLayout, { "data-test": "date-picker", ref: layoutRef, children: (0, jsx_runtime_1.jsx)(DayPicker_1.DayPicker, { date: date && (0, moment_1.default)(date), onDateChange: (newDate) => onDateChange(newDate.toDate()), focused: hasFocus,
|
|
19
|
-
// tslint:disable-next-line: no-any
|
|
20
|
-
onFocusChange: ({ focused }) => onFocusChange(focused), isDayBlocked: (day) => isDayBlocked
|
|
21
|
-
? isDayBlocked(day.toDate())
|
|
22
|
-
: (0, exports.defaultBlockedDays)((0, moment_1.default)(day)) }) }));
|
|
23
|
-
};
|
|
24
|
-
exports.default = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(DatePicker, Object.assign({ layoutRef: ref }, props))));
|
|
7
|
+
const PickerDate = ({ date, disabledDays, locale, onDateChange }) => ((0, jsx_runtime_1.jsx)(DatePicker_styles_1.DatePickerLayout, { "data-test": "date-picker", children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, Object.assign({ mode: "single", disabled: disabledDays, locale: locale, onSelect: selectedDay => onDateChange(selectedDay || null) }, (date && { selected: date }))) }));
|
|
8
|
+
exports.default = PickerDate;
|
|
25
9
|
//# sourceMappingURL=DatePicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../packages/date/src/datePicker/DatePicker.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../packages/date/src/datePicker/DatePicker.tsx"],"names":[],"mappings":";;;AAAA,2CAAyC;AAGzC,uDAA6C;AAG7C,2DAAuD;AAEvD,MAAM,UAAU,GAAwB,CAAC,EACvC,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,YAAY,EACb,EAAE,EAAE,CAAC,CACJ,uBAAC,oCAAgB,iBAAW,aAAa,YACvC,uBAAC,4BAAS,kBACR,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,WAAW,CAAC,EAAE,CAAC,YAAY,CAAC,WAAW,IAAI,IAAI,CAAC,IACtD,CAAC,IAAI,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,EAChC,GACe,CACpB,CAAC;AAEF,kBAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
|
+
const react_1 = require("react");
|
|
8
|
+
const storybook_state_1 = require("@sambego/storybook-state");
|
|
9
|
+
const addon_actions_1 = require("@storybook/addon-actions");
|
|
10
|
+
const react_2 = require("@storybook/react");
|
|
11
|
+
const DatePicker_1 = __importDefault(require("./DatePicker"));
|
|
12
|
+
const onDateChange = (0, addon_actions_1.action)('onDateChange');
|
|
13
|
+
const onFocusChange = (0, addon_actions_1.action)('onFocusChange');
|
|
14
|
+
const datePickerState = new storybook_state_1.Store({
|
|
15
|
+
date: null,
|
|
16
|
+
focused: true
|
|
17
|
+
});
|
|
18
|
+
const defaultProps = {
|
|
19
|
+
label: 'Le',
|
|
20
|
+
disabled: false,
|
|
21
|
+
error: false,
|
|
22
|
+
onDateChange,
|
|
23
|
+
onFocusChange
|
|
24
|
+
};
|
|
25
|
+
datePickerState.subscribe(() => (0, react_2.forceReRender)());
|
|
26
|
+
(0, react_2.storiesOf)('DatePickerSingle', module).add('default', () => {
|
|
27
|
+
return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(storybook_state_1.State, { store: datePickerState, children: state => ((0, jsx_runtime_1.jsx)(DatePicker_1.default, Object.assign({}, defaultProps, { date: state.date, onDateChange: (date) => datePickerState.set({ date }) }))) }) }));
|
|
28
|
+
});
|
|
29
|
+
//# sourceMappingURL=DatePicker.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatePicker.stories.js","sourceRoot":"","sources":["../../../../packages/date/src/datePicker/DatePicker.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,iCAAwC;AAExC,8DAAwD;AACxD,4DAAkD;AAClD,4CAA4D;AAE5D,8DAAsC;AAEtC,MAAM,YAAY,GAAG,IAAA,sBAAM,EAAC,cAAc,CAAC,CAAC;AAC5C,MAAM,aAAa,GAAG,IAAA,sBAAM,EAAC,eAAe,CAAC,CAAC;AAE9C,MAAM,eAAe,GAAG,IAAI,uBAAK,CAAC;IAChC,IAAI,EAAE,IAAI;IACV,OAAO,EAAE,IAAI;CACd,CAAC,CAAC;AAEH,MAAM,YAAY,GAAQ;IACxB,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,KAAK;IACZ,YAAY;IACZ,aAAa;CACd,CAAC;AAEF,eAAe,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAA,qBAAa,GAAE,CAAC,CAAC;AAEjD,IAAA,iBAAS,EAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,EAAE,GAAG,EAAE;IACxD,OAAO,CACL,uBAAC,gBAAQ,cACP,uBAAC,uBAAK,IAAC,KAAK,EAAE,eAAe,YAC1B,KAAK,CAAC,EAAE,CAAC,CACR,uBAAC,oBAAU,oBACL,YAAY,IAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,YAAY,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,CAAC,IAC1D,CACH,GACK,GACC,CACZ,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -8,29 +8,19 @@ const styled_components_1 = __importDefault(require("styled-components"));
|
|
|
8
8
|
const utils_1 = require("../../../utils");
|
|
9
9
|
exports.DatePickerLayout = styled_components_1.default.div `
|
|
10
10
|
position: absolute;
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
z-index: 1;
|
|
12
|
+
border: 1px ${utils_1.colors.grey.base10} solid;
|
|
13
|
+
border-radius: ${utils_1.radius.bigger};
|
|
14
|
+
box-shadow: ${utils_1.shadows.level3};
|
|
13
15
|
|
|
14
|
-
.
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
color: ${utils_1.colors.
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
.CalendarDay__blocked_calendar,
|
|
24
|
-
.CalendarDay__blocked_calendar:hover {
|
|
25
|
-
background: white;
|
|
26
|
-
color: ${utils_1.colors.dark.base20};
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.CalendarDay__selected,
|
|
30
|
-
.CalendarDay__selected:hover {
|
|
31
|
-
color: white;
|
|
32
|
-
background: ${utils_1.colors.green.base};
|
|
33
|
-
border-color: ${utils_1.colors.green.base};
|
|
16
|
+
.rdp {
|
|
17
|
+
--rdp-cell-size: ${(0, utils_1.convertPxToRem)(36)};
|
|
18
|
+
--rdp-caption-font-size: ${utils_1.fonts.base};
|
|
19
|
+
--rdp-accent-color: ${utils_1.colors.green.base};
|
|
20
|
+
--rdp-background-color: ${utils_1.colors.terracota.base};
|
|
21
|
+
--rdp-accent-color-dark: ${utils_1.colors.terracota.base};
|
|
22
|
+
--rdp-background-color-dark: ${utils_1.colors.dark.base};
|
|
23
|
+
margin: ${(0, utils_1.convertPxToRem)(8)};
|
|
34
24
|
}
|
|
35
25
|
`;
|
|
36
26
|
//# sourceMappingURL=DatePicker.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.styles.js","sourceRoot":"","sources":["../../../../packages/date/src/datePicker/DatePicker.styles.ts"],"names":[],"mappings":";;;;;;AAAA,0EAAuC;AAEvC,
|
|
1
|
+
{"version":3,"file":"DatePicker.styles.js","sourceRoot":"","sources":["../../../../packages/date/src/datePicker/DatePicker.styles.ts"],"names":[],"mappings":";;;;;;AAAA,0EAAuC;AAEvC,0CAAgF;AAEnE,QAAA,gBAAgB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;gBAG1B,cAAM,CAAC,IAAI,CAAC,MAAM;mBACf,cAAM,CAAC,MAAM;gBAChB,eAAO,CAAC,MAAM;;;uBAGP,IAAA,sBAAc,EAAC,EAAE,CAAC;+BACV,aAAK,CAAC,IAAI;0BACf,cAAM,CAAC,KAAK,CAAC,IAAI;8BACb,cAAM,CAAC,SAAS,CAAC,IAAI;+BACpB,cAAM,CAAC,SAAS,CAAC,IAAI;mCACjB,cAAM,CAAC,IAAI,CAAC,IAAI;cACrC,IAAA,sBAAc,EAAC,CAAC,CAAC;;CAE9B,CAAC"}
|
|
@@ -13,33 +13,47 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
13
13
|
};
|
|
14
14
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
15
15
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
16
|
-
const
|
|
17
|
-
const hokkaido_1 = require("@proprioo/hokkaido");
|
|
16
|
+
const mockdate_1 = __importDefault(require("mockdate"));
|
|
18
17
|
const react_1 = require("@testing-library/react");
|
|
19
18
|
const user_event_1 = __importDefault(require("@testing-library/user-event"));
|
|
20
19
|
const DatePicker_1 = __importDefault(require("./DatePicker"));
|
|
21
20
|
const mockOnDateChange = vi.fn();
|
|
22
|
-
const mockOnFocusChange = vi.fn();
|
|
23
21
|
const defaultProps = {
|
|
24
|
-
date:
|
|
25
|
-
|
|
26
|
-
onDateChange: mockOnDateChange,
|
|
27
|
-
onFocusChange: mockOnFocusChange
|
|
22
|
+
date: null,
|
|
23
|
+
onDateChange: mockOnDateChange
|
|
28
24
|
};
|
|
29
25
|
describe('DatePicker component', () => {
|
|
30
|
-
it('should render', () => {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
});
|
|
26
|
+
it('should render', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
27
|
+
const now = new Date();
|
|
28
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(DatePicker_1.default, Object.assign({}, defaultProps, { date: new Date() })));
|
|
29
|
+
expect(react_1.screen.getAllByRole('columnheader')).toHaveLength(7);
|
|
30
|
+
}));
|
|
35
31
|
it('should trigger methods', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
32
|
+
mockdate_1.default.set(new Date('2021-01-01'));
|
|
36
33
|
(0, react_1.render)((0, jsx_runtime_1.jsx)(DatePicker_1.default, Object.assign({}, defaultProps)));
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
yield user_event_1.default.click(buttons[buttons.length - 1]);
|
|
34
|
+
expect(react_1.screen.getByLabelText('January 2021')).toBeInTheDocument();
|
|
35
|
+
['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map(day => expect(react_1.screen.getByText(day)));
|
|
36
|
+
yield user_event_1.default.click(react_1.screen.getByRole('gridcell', { name: '10' }));
|
|
41
37
|
expect(mockOnDateChange).toHaveBeenCalled();
|
|
42
|
-
|
|
38
|
+
mockdate_1.default.reset();
|
|
43
39
|
}));
|
|
40
|
+
it('should blocked some days in future', () => {
|
|
41
|
+
mockdate_1.default.set(new Date('2021-02-01'));
|
|
42
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(DatePicker_1.default, Object.assign({}, defaultProps, { disabledDays: { after: new Date('2021-02-10') } })));
|
|
43
|
+
const days = react_1.screen.getAllByRole('gridcell');
|
|
44
|
+
const disabledDays = days.filter(day => day.getAttribute('disabled') !== null);
|
|
45
|
+
expect(days.length).toEqual(35);
|
|
46
|
+
expect(disabledDays.length).toEqual(18);
|
|
47
|
+
mockdate_1.default.reset();
|
|
48
|
+
});
|
|
49
|
+
it('should blocked some days in past', () => {
|
|
50
|
+
mockdate_1.default.set(new Date('2021-02-01'));
|
|
51
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(DatePicker_1.default, Object.assign({}, defaultProps, { disabledDays: { before: new Date('2021-02-10') } })));
|
|
52
|
+
const days = react_1.screen.getAllByRole('gridcell');
|
|
53
|
+
const disabledDays = days.filter(day => day.getAttribute('disabled') !== null);
|
|
54
|
+
expect(days.length).toEqual(35);
|
|
55
|
+
expect(disabledDays.length).toEqual(9);
|
|
56
|
+
mockdate_1.default.reset();
|
|
57
|
+
});
|
|
44
58
|
});
|
|
45
59
|
//# sourceMappingURL=DatePicker.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.test.js","sourceRoot":"","sources":["../../../../packages/date/src/datePicker/DatePicker.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"DatePicker.test.js","sourceRoot":"","sources":["../../../../packages/date/src/datePicker/DatePicker.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,14 +1,9 @@
|
|
|
1
|
-
import { Moment } from 'moment';
|
|
2
1
|
import { FC } from 'react';
|
|
3
|
-
import { Language } from '@proprioo/hokkaido';
|
|
4
2
|
import { GenericInputProps } from '../../../utils';
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
import { DatePickerProps } from '../interfaces';
|
|
4
|
+
export type DatePickerWrapperProps = GenericInputProps & DatePickerProps & {
|
|
7
5
|
formatter?: string;
|
|
8
|
-
isDayBlocked?(date: Date): boolean;
|
|
9
|
-
language?: Language;
|
|
10
6
|
onDateChange(date: Date | null): void;
|
|
11
7
|
};
|
|
12
|
-
export declare const formatDate: (date: Moment, formatter?: string) => string;
|
|
13
8
|
declare const DatePickerWrapper: FC<DatePickerWrapperProps>;
|
|
14
9
|
export default DatePickerWrapper;
|
|
@@ -3,39 +3,36 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.formatDate = void 0;
|
|
7
6
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
-
const
|
|
7
|
+
const date_fns_1 = require("date-fns");
|
|
9
8
|
const react_1 = require("react");
|
|
9
|
+
const useOnClickOutside_1 = __importDefault(require("../../../hooks/useOnClickOutside/useOnClickOutside"));
|
|
10
10
|
const InputBase_1 = __importDefault(require("../../../ui/src/inputBase/InputBase"));
|
|
11
11
|
const DatePicker_1 = __importDefault(require("../datePicker/DatePicker"));
|
|
12
12
|
const DatepickerWrapper_styles_1 = require("./DatepickerWrapper.styles");
|
|
13
|
-
const
|
|
14
|
-
exports.formatDate = formatDate;
|
|
15
|
-
const DatePickerWrapper = ({ date, dataTest, disabled, error, focused = false, formatter, isDayBlocked, label, language, onDateChange, zIndex }) => {
|
|
13
|
+
const DatePickerWrapper = ({ date, dataTest, disabled, disabledDays, error, formatter = 'EEEE dd MMMM yyyy', label, locale, onDateChange, zIndex }) => {
|
|
16
14
|
const ref = (0, react_1.useRef)(null);
|
|
17
|
-
const [
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}, [ref]);
|
|
15
|
+
const [stateDatePicker, updateReducer] = (0, react_1.useReducer)((prev, next) => (Object.assign(Object.assign({}, prev), next)), {
|
|
16
|
+
isFocused: false,
|
|
17
|
+
isOpen: false
|
|
18
|
+
});
|
|
19
|
+
const { isOpen, isFocused } = stateDatePicker;
|
|
23
20
|
const handleSelect = (newDate) => {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
setIsOpen(false);
|
|
27
|
-
}
|
|
21
|
+
onDateChange(newDate || null);
|
|
22
|
+
updateReducer({ isFocused: false, isOpen: false });
|
|
28
23
|
};
|
|
29
|
-
|
|
30
|
-
if (
|
|
31
|
-
|
|
24
|
+
const handleOpen = () => {
|
|
25
|
+
if (!isFocused && !disabled) {
|
|
26
|
+
updateReducer({ isFocused: true, isOpen: true });
|
|
32
27
|
}
|
|
33
|
-
|
|
34
|
-
|
|
28
|
+
};
|
|
29
|
+
(0, useOnClickOutside_1.default)(ref, ({ target }) => {
|
|
30
|
+
var _a;
|
|
31
|
+
if (!((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(target))) {
|
|
32
|
+
updateReducer({ isFocused: false, isOpen: false });
|
|
35
33
|
}
|
|
36
|
-
|
|
37
|
-
},
|
|
38
|
-
return ((0, jsx_runtime_1.jsx)(DatepickerWrapper_styles_1.DatePickerWrapperLayout, { ref: ref, "data-test": dataTest || 'date-picker-wrapper', isOpen: isOpen, onClick: () => !disabled && setIsOpen(true), children: (0, jsx_runtime_1.jsx)(InputBase_1.default, { value: date && (0, exports.formatDate)((0, moment_1.default)(date), formatter), disabled: disabled, label: label, error: error, zIndex: zIndex, focused: isFocused, field: isOpen ? ((0, jsx_runtime_1.jsx)(DatePicker_1.default, { date: date, hasFocus: focused, isDayBlocked: isDayBlocked, language: language, onDateChange: handleSelect, onFocusChange: hasFocus => setIsFocused(!!hasFocus) })) : ((0, jsx_runtime_1.jsx)(react_1.Fragment, {})) }) }));
|
|
34
|
+
});
|
|
35
|
+
return ((0, jsx_runtime_1.jsx)(DatepickerWrapper_styles_1.DatePickerWrapperLayout, { ref: ref, "data-test": dataTest || 'date-picker-wrapper', onClick: handleOpen, children: (0, jsx_runtime_1.jsx)(InputBase_1.default, { disabled: disabled, label: label, error: error, zIndex: zIndex, focused: isFocused, value: date && (0, date_fns_1.format)(date, formatter, { locale }), field: isOpen ? ((0, jsx_runtime_1.jsx)(DatePicker_1.default, { date: date, disabledDays: disabledDays, locale: locale, onDateChange: handleSelect })) : ((0, jsx_runtime_1.jsx)(react_1.Fragment, {})) }) }));
|
|
39
36
|
};
|
|
40
37
|
exports.default = DatePickerWrapper;
|
|
41
38
|
//# sourceMappingURL=DatePickerWrapper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerWrapper.js","sourceRoot":"","sources":["../../../../packages/date/src/datePickerWrapper/DatePickerWrapper.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DatePickerWrapper.js","sourceRoot":"","sources":["../../../../packages/date/src/datePickerWrapper/DatePickerWrapper.tsx"],"names":[],"mappings":";;;;;;AAAA,uCAAkC;AAClC,iCAAgE;AAIhE,2GAAmF;AACnF,oFAA4D;AAE5D,0EAAkD;AAElD,yEAAqE;AAQrE,MAAM,iBAAiB,GAA+B,CAAC,EACrD,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,SAAS,GAAG,mBAAmB,EAC/B,KAAK,EACL,MAAM,EACN,YAAY,EACZ,MAAM,EACP,EAAE,EAAE;IACH,MAAM,GAAG,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IAEhD,MAAM,CAAC,eAAe,EAAE,aAAa,CAAC,GAAG,IAAA,kBAAU,EACjD,CAAC,IAAuB,EAAE,IAAgC,EAAE,EAAE,CAAC,iCAC1D,IAAI,GACJ,IAAI,EACP,EACF;QACE,SAAS,EAAE,KAAK;QAChB,MAAM,EAAE,KAAK;KACd,CACF,CAAC;IAEF,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,CAAC;IAE9C,MAAM,YAAY,GAAG,CAAC,OAAmB,EAAE,EAAE;QAC3C,YAAY,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC;QAE9B,aAAa,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;IACrD,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,CAAC,SAAS,IAAI,CAAC,QAAQ,EAAE;YAC3B,aAAa,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;SAClD;IACH,CAAC,CAAC;IAEF,IAAA,2BAAiB,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;;QACpC,IAAI,CAAC,CAAA,MAAA,GAAG,CAAC,OAAO,0CAAE,QAAQ,CAAC,MAAc,CAAC,CAAA,EAAE;YAC1C,aAAa,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;SACpD;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,uBAAC,kDAAuB,IACtB,GAAG,EAAE,GAAG,eACG,QAAQ,IAAI,qBAAqB,EAC5C,OAAO,EAAE,UAAU,YAEnB,uBAAC,mBAAS,IACR,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,IAAI,IAAI,IAAA,iBAAM,EAAC,IAAI,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAClD,KAAK,EACH,MAAM,CAAC,CAAC,CAAC,CACP,uBAAC,oBAAU,IACT,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC,CAAC,CAAC,CACF,uBAAC,gBAAQ,KAAG,CACb,GAEH,GACsB,CAC3B,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,iBAAiB,CAAC"}
|
|
@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
|
+
const date_fns_1 = require("date-fns");
|
|
7
8
|
const react_1 = require("react");
|
|
8
9
|
const storybook_state_1 = require("@sambego/storybook-state");
|
|
9
10
|
const addon_actions_1 = require("@storybook/addon-actions");
|
|
@@ -22,19 +23,16 @@ const defaultProps = {
|
|
|
22
23
|
onDateChange,
|
|
23
24
|
onFocusChange
|
|
24
25
|
};
|
|
26
|
+
datePickerState.subscribe(() => (0, react_2.forceReRender)());
|
|
25
27
|
(0, react_2.storiesOf)('DatePicker', module)
|
|
26
28
|
.add('default', () => {
|
|
27
|
-
return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(storybook_state_1.State, { store: datePickerState, children: state => ((0, jsx_runtime_1.jsx)(DatePickerWrapper_1.default, Object.assign({}, defaultProps, { date: state.date,
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(storybook_state_1.State, { store: datePickerState, children: state => ((0, jsx_runtime_1.jsx)(DatePickerWrapper_1.default, Object.assign({}, defaultProps, { date: state.date, onDateChange: (date) => datePickerState.set({ date }) }))) }) }));
|
|
30
|
+
})
|
|
31
|
+
.add('disabled days', () => {
|
|
32
|
+
const today = new Date();
|
|
33
|
+
return ((0, jsx_runtime_1.jsx)(storybook_state_1.State, { store: datePickerState, children: state => ((0, jsx_runtime_1.jsx)(DatePickerWrapper_1.default, Object.assign({}, defaultProps, { date: today, disabledDays: { after: (0, date_fns_1.addDays)(today, 2) }, onDateChange: (date) => datePickerState.set({ date }) }))) }));
|
|
32
34
|
})
|
|
33
35
|
.add('disabled', () => {
|
|
34
|
-
return ((0, jsx_runtime_1.jsx)(storybook_state_1.State, { store: datePickerState, children: state => ((0, jsx_runtime_1.jsx)(DatePickerWrapper_1.default, Object.assign({}, defaultProps, { date: state.date, disabled: true,
|
|
35
|
-
focused && datePickerState.set({ focused });
|
|
36
|
-
}, onDateChange: (date) => {
|
|
37
|
-
date && datePickerState.set({ date });
|
|
38
|
-
} }))) }));
|
|
36
|
+
return ((0, jsx_runtime_1.jsx)(storybook_state_1.State, { store: datePickerState, children: state => ((0, jsx_runtime_1.jsx)(DatePickerWrapper_1.default, Object.assign({}, defaultProps, { date: state.date, disabled: true, onDateChange: (date) => datePickerState.set({ date }) }))) }));
|
|
39
37
|
});
|
|
40
38
|
//# sourceMappingURL=DatePickerWrapper.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerWrapper.stories.js","sourceRoot":"","sources":["../../../../packages/date/src/datePickerWrapper/DatePickerWrapper.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,iCAAwC;AAExC,8DAAwD;AACxD,4DAAkD;AAClD,
|
|
1
|
+
{"version":3,"file":"DatePickerWrapper.stories.js","sourceRoot":"","sources":["../../../../packages/date/src/datePickerWrapper/DatePickerWrapper.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,uCAAmC;AACnC,iCAAwC;AAExC,8DAAwD;AACxD,4DAAkD;AAClD,4CAA4D;AAE5D,4EAA6C;AAE7C,MAAM,YAAY,GAAG,IAAA,sBAAM,EAAC,cAAc,CAAC,CAAC;AAC5C,MAAM,aAAa,GAAG,IAAA,sBAAM,EAAC,eAAe,CAAC,CAAC;AAE9C,MAAM,eAAe,GAAG,IAAI,uBAAK,CAAC;IAChC,IAAI,EAAE,IAAI;IACV,OAAO,EAAE,IAAI;CACd,CAAC,CAAC;AAEH,MAAM,YAAY,GAAQ;IACxB,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,KAAK;IACZ,YAAY;IACZ,aAAa;CACd,CAAC;AAEF,eAAe,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAA,qBAAa,GAAE,CAAC,CAAC;AAEjD,IAAA,iBAAS,EAAC,YAAY,EAAE,MAAM,CAAC;KAC5B,GAAG,CAAC,SAAS,EAAE,GAAG,EAAE;IACnB,OAAO,CACL,uBAAC,gBAAQ,cACP,uBAAC,uBAAK,IAAC,KAAK,EAAE,eAAe,YAC1B,KAAK,CAAC,EAAE,CAAC,CACR,uBAAC,2BAAU,oBACL,YAAY,IAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,YAAY,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,CAAC,IAC1D,CACH,GACK,GACC,CACZ,CAAC;AACJ,CAAC,CAAC;KACD,GAAG,CAAC,eAAe,EAAE,GAAG,EAAE;IACzB,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAC;IAEzB,OAAO,CACL,uBAAC,uBAAK,IAAC,KAAK,EAAE,eAAe,YAC1B,KAAK,CAAC,EAAE,CAAC,CACR,uBAAC,2BAAU,oBACL,YAAY,IAChB,IAAI,EAAE,KAAK,EACX,YAAY,EAAE,EAAE,KAAK,EAAE,IAAA,kBAAO,EAAC,KAAK,EAAE,CAAC,CAAC,EAAE,EAC1C,YAAY,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,CAAC,IAC1D,CACH,GACK,CACT,CAAC;AACJ,CAAC,CAAC;KACD,GAAG,CAAC,UAAU,EAAE,GAAG,EAAE;IACpB,OAAO,CACL,uBAAC,uBAAK,IAAC,KAAK,EAAE,eAAe,YAC1B,KAAK,CAAC,EAAE,CAAC,CACR,uBAAC,2BAAU,oBACL,YAAY,IAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,IAAI,EACd,YAAY,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,CAAC,IAC1D,CACH,GACK,CACT,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -14,11 +14,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
14
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
15
15
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
16
16
|
const mockdate_1 = __importDefault(require("mockdate"));
|
|
17
|
-
const moment_1 = __importDefault(require("moment"));
|
|
18
17
|
const react_test_renderer_1 = __importDefault(require("react-test-renderer"));
|
|
19
18
|
const react_1 = require("@testing-library/react");
|
|
20
19
|
const user_event_1 = __importDefault(require("@testing-library/user-event"));
|
|
21
|
-
const DatePicker_1 = require("../datePicker/DatePicker");
|
|
22
20
|
const DatePickerWrapper_1 = __importDefault(require("./DatePickerWrapper"));
|
|
23
21
|
const mockOnDateChange = vi.fn();
|
|
24
22
|
const defaultProps = {
|
|
@@ -30,6 +28,10 @@ const defaultProps = {
|
|
|
30
28
|
onDateChange: mockOnDateChange
|
|
31
29
|
};
|
|
32
30
|
describe('DatePicker component', () => {
|
|
31
|
+
it('should render', () => {
|
|
32
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(DatePickerWrapper_1.default, Object.assign({}, defaultProps)));
|
|
33
|
+
expect(react_1.screen.getByTestId('date-picker-wrapper')).toBeInTheDocument();
|
|
34
|
+
});
|
|
33
35
|
it('should equal snapshot rendering', () => {
|
|
34
36
|
mockdate_1.default.set(new Date('2021-01-01'));
|
|
35
37
|
const tree = react_test_renderer_1.default
|
|
@@ -41,54 +43,35 @@ describe('DatePicker component', () => {
|
|
|
41
43
|
it('should equal snapshot rendering with custom formatter', () => {
|
|
42
44
|
mockdate_1.default.set(new Date('2021-01-01'));
|
|
43
45
|
const tree = react_test_renderer_1.default
|
|
44
|
-
.create((0, jsx_runtime_1.jsx)(DatePickerWrapper_1.default, Object.assign({}, defaultProps, { date: new Date()
|
|
46
|
+
.create((0, jsx_runtime_1.jsx)(DatePickerWrapper_1.default, Object.assign({}, defaultProps, { date: new Date() })))
|
|
45
47
|
.toJSON();
|
|
46
48
|
expect(tree).toMatchSnapshot();
|
|
47
49
|
mockdate_1.default.reset();
|
|
48
50
|
});
|
|
49
|
-
it('should
|
|
50
|
-
|
|
51
|
-
expect(react_1.screen.getByTestId('date-picker-wrapper')).toBeInTheDocument();
|
|
52
|
-
});
|
|
53
|
-
it('should open', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
51
|
+
it('should open the date picker on click', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
52
|
+
mockdate_1.default.set(new Date('2021-01-01'));
|
|
54
53
|
(0, react_1.render)((0, jsx_runtime_1.jsx)(DatePickerWrapper_1.default, Object.assign({}, defaultProps)));
|
|
55
|
-
expect(react_1.screen.queryByTestId('date-picker')).not.toBeInTheDocument();
|
|
56
54
|
yield user_event_1.default.click(react_1.screen.getByTestId('date-picker-wrapper'));
|
|
57
|
-
expect(react_1.screen.
|
|
55
|
+
expect(react_1.screen.getByRole('grid', { name: 'January 2021' })).toBeInTheDocument();
|
|
56
|
+
expect(react_1.screen.getByRole('button', { name: 'Go to previous month' })).toBeInTheDocument();
|
|
57
|
+
expect(react_1.screen.getByRole('button', { name: 'Go to next month' })).toBeInTheDocument();
|
|
58
|
+
mockdate_1.default.reset();
|
|
58
59
|
}));
|
|
59
|
-
it('should not open
|
|
60
|
+
it('should not open the date because disabled', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
61
|
+
mockdate_1.default.set(new Date('2021-01-01'));
|
|
60
62
|
(0, react_1.render)((0, jsx_runtime_1.jsx)(DatePickerWrapper_1.default, Object.assign({}, defaultProps, { disabled: true })));
|
|
61
|
-
expect(react_1.screen.
|
|
63
|
+
expect(react_1.screen.queryByRole('grid', { name: 'January 2021' })).not.toBeInTheDocument();
|
|
62
64
|
yield user_event_1.default.click(react_1.screen.getByTestId('date-picker-wrapper'));
|
|
63
|
-
expect(react_1.screen.
|
|
64
|
-
|
|
65
|
-
it('should open when selecting', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
66
|
-
(0, react_1.render)((0, jsx_runtime_1.jsx)(DatePickerWrapper_1.default, Object.assign({}, defaultProps)));
|
|
67
|
-
expect(react_1.screen.queryByTestId('date-picker')).not.toBeInTheDocument();
|
|
68
|
-
yield user_event_1.default.click(react_1.screen.getByTestId('date-picker-wrapper'));
|
|
69
|
-
expect(react_1.screen.getByTestId('date-picker')).toBeInTheDocument();
|
|
65
|
+
expect(react_1.screen.queryByRole('grid', { name: 'January 2021' })).not.toBeInTheDocument();
|
|
66
|
+
mockdate_1.default.reset();
|
|
70
67
|
}));
|
|
71
|
-
it('should close selecting', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
68
|
+
it('should close when selecting a date', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
69
|
+
mockdate_1.default.set(new Date('2021-01-01'));
|
|
72
70
|
(0, react_1.render)((0, jsx_runtime_1.jsx)(DatePickerWrapper_1.default, Object.assign({}, defaultProps)));
|
|
73
|
-
expect(react_1.screen.queryByTestId('date-picker')).not.toBeInTheDocument();
|
|
74
71
|
yield user_event_1.default.click(react_1.screen.getByTestId('date-picker-wrapper'));
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
yield user_event_1.default.click(buttons[buttons.length - 1]);
|
|
79
|
-
expect(mockOnDateChange).toHaveBeenCalled();
|
|
80
|
-
expect(react_1.screen.queryByTestId('date-picker')).not.toBeInTheDocument();
|
|
72
|
+
yield user_event_1.default.click(react_1.screen.getByRole('gridcell', { name: '10' }));
|
|
73
|
+
expect(react_1.screen.queryByRole('grid', { name: 'January 2021' })).not.toBeInTheDocument();
|
|
74
|
+
mockdate_1.default.reset();
|
|
81
75
|
}));
|
|
82
76
|
});
|
|
83
|
-
describe('defaultBlockedDays', () => {
|
|
84
|
-
const day = (0, moment_1.default)().startOf('day');
|
|
85
|
-
const sunday = (0, moment_1.default)().endOf('week').startOf('day');
|
|
86
|
-
it('should return true', () => {
|
|
87
|
-
expect((0, DatePicker_1.defaultBlockedDays)(sunday)).toStrictEqual(true);
|
|
88
|
-
expect((0, DatePicker_1.defaultBlockedDays)((0, moment_1.default)(day).subtract(2, 'day'))).toStrictEqual(true);
|
|
89
|
-
});
|
|
90
|
-
it('should return false', () => {
|
|
91
|
-
expect((0, DatePicker_1.defaultBlockedDays)((0, moment_1.default)(sunday).add(1, 'day'))).toStrictEqual(false);
|
|
92
|
-
});
|
|
93
|
-
});
|
|
94
77
|
//# sourceMappingURL=DatePickerWrapper.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerWrapper.test.js","sourceRoot":"","sources":["../../../../packages/date/src/datePickerWrapper/DatePickerWrapper.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,wDAAgC;AAChC,
|
|
1
|
+
{"version":3,"file":"DatePickerWrapper.test.js","sourceRoot":"","sources":["../../../../packages/date/src/datePickerWrapper/DatePickerWrapper.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,8 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.DatePickerWrapperLayout = void 0;
|
|
7
7
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
8
|
+
const utils_1 = require("../../../utils");
|
|
9
|
+
const DatePicker_styles_1 = require("../datePicker/DatePicker.styles");
|
|
8
10
|
exports.DatePickerWrapperLayout = styled_components_1.default.div `
|
|
9
11
|
position: relative;
|
|
10
|
-
|
|
12
|
+
|
|
13
|
+
${DatePicker_styles_1.DatePickerLayout} {
|
|
14
|
+
top: ${(0, utils_1.convertPxToRem)(60)};
|
|
15
|
+
}
|
|
11
16
|
`;
|
|
12
17
|
//# sourceMappingURL=DatepickerWrapper.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatepickerWrapper.styles.js","sourceRoot":"","sources":["../../../../packages/date/src/datePickerWrapper/DatepickerWrapper.styles.ts"],"names":[],"mappings":";;;;;;AAAA,0EAAuC;
|
|
1
|
+
{"version":3,"file":"DatepickerWrapper.styles.js","sourceRoot":"","sources":["../../../../packages/date/src/datePickerWrapper/DatepickerWrapper.styles.ts"],"names":[],"mappings":";;;;;;AAAA,0EAAuC;AAEvC,0CAAgD;AAChD,uEAAmE;AAEtD,QAAA,uBAAuB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;IAG7C,oCAAgB;WACT,IAAA,sBAAc,EAAC,EAAE,CAAC;;CAE5B,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Matcher } from 'react-day-picker';
|
|
2
|
+
import { nullOrDate } from '@proprioo/hokkaido';
|
|
3
|
+
export type DatePickerProps = {
|
|
4
|
+
date: nullOrDate;
|
|
5
|
+
disabledDays?: Matcher | Matcher[] | undefined;
|
|
6
|
+
locale?: Locale;
|
|
7
|
+
onDateChange(date: nullOrDate): void;
|
|
8
|
+
};
|
|
9
|
+
export type ReducerDatePicker = {
|
|
10
|
+
isFocused: boolean;
|
|
11
|
+
isOpen: boolean;
|
|
12
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../packages/date/src/interfaces.ts"],"names":[],"mappings":""}
|