@dhis2-ui/calendar 8.8.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/README.md +10 -0
- package/build/cjs/__e2e__/calendarInput.stories.e2e.js +58 -0
- package/build/cjs/calendar/calendar-prop-types.js +24 -0
- package/build/cjs/calendar/calendar-table-cell.js +55 -0
- package/build/cjs/calendar/calendar-table-days-header.js +40 -0
- package/build/cjs/calendar/calendar-table.js +57 -0
- package/build/cjs/calendar/index.js +93 -0
- package/build/cjs/calendar/navigation-container.js +134 -0
- package/build/cjs/calendar-input/index.js +117 -0
- package/build/cjs/features/supports_ethiopic_calendar/supports_ethiopic_calendar.js +39 -0
- package/build/cjs/features/supports_ethiopic_calendar.feature +19 -0
- package/build/cjs/features/supports_gregorian_calendar/supports_gregorian_calendar.js +39 -0
- package/build/cjs/features/supports_gregorian_calendar.feature +19 -0
- package/build/cjs/features/supports_islamic_calendar/supports_islamic_calendar.js +18 -0
- package/build/cjs/features/supports_islamic_calendar.feature +5 -0
- package/build/cjs/features/supports_nepali_calendar/supports_nepali_calendar.js +42 -0
- package/build/cjs/features/supports_nepali_calendar.feature +19 -0
- package/build/cjs/index.js +21 -0
- package/build/cjs/locales/en/translations.json +4 -0
- package/build/cjs/locales/index.js +27 -0
- package/build/cjs/stories/calendar.stories.js +66 -0
- package/build/cjs/stories/calendarInput.stories.js +107 -0
- package/build/cjs/stories/calendarStoryWrapper.js +196 -0
- package/build/es/__e2e__/calendarInput.stories.e2e.js +6 -0
- package/build/es/calendar/calendar-prop-types.js +13 -0
- package/build/es/calendar/calendar-table-cell.js +39 -0
- package/build/es/calendar/calendar-table-days-header.js +25 -0
- package/build/es/calendar/calendar-table.js +40 -0
- package/build/es/calendar/index.js +71 -0
- package/build/es/calendar/navigation-container.js +116 -0
- package/build/es/calendar-input/index.js +95 -0
- package/build/es/features/supports_ethiopic_calendar/supports_ethiopic_calendar.js +36 -0
- package/build/es/features/supports_ethiopic_calendar.feature +19 -0
- package/build/es/features/supports_gregorian_calendar/supports_gregorian_calendar.js +36 -0
- package/build/es/features/supports_gregorian_calendar.feature +19 -0
- package/build/es/features/supports_islamic_calendar/supports_islamic_calendar.js +15 -0
- package/build/es/features/supports_islamic_calendar.feature +5 -0
- package/build/es/features/supports_nepali_calendar/supports_nepali_calendar.js +39 -0
- package/build/es/features/supports_nepali_calendar.feature +19 -0
- package/build/es/index.js +2 -0
- package/build/es/locales/en/translations.json +4 -0
- package/build/es/locales/index.js +13 -0
- package/build/es/stories/calendar.stories.js +44 -0
- package/build/es/stories/calendarInput.stories.js +84 -0
- package/build/es/stories/calendarStoryWrapper.js +176 -0
- package/package.json +53 -0
@@ -0,0 +1,39 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _steps = require("cypress-cucumber-preprocessor/steps");
|
4
|
+
|
5
|
+
(0, _steps.Given)('a Gregorian calendar is rendered in {word}', language => {
|
6
|
+
cy.visitStory('CalendarInputTesting', "Gregorian With ".concat(language));
|
7
|
+
cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]').click();
|
8
|
+
cy.get('[data-test=calendar]').should('be.visible');
|
9
|
+
});
|
10
|
+
(0, _steps.Then)('days should be rendered in "{word}"', language => {
|
11
|
+
const days = language === 'arabic' ? ['الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت', 'الأحد'] : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
|
12
|
+
days.forEach(day => {
|
13
|
+
cy.contains(day).should('be.visible');
|
14
|
+
});
|
15
|
+
});
|
16
|
+
(0, _steps.And)('months should be rendered in "{word}" with navigation', language => {
|
17
|
+
const months = language === 'english' ? {
|
18
|
+
current: 'October',
|
19
|
+
previous: 'September',
|
20
|
+
next: 'November'
|
21
|
+
} : {
|
22
|
+
current: 'أكتوبر',
|
23
|
+
previous: 'سبتمبر',
|
24
|
+
next: 'نوفمبر'
|
25
|
+
};
|
26
|
+
cy.contains(months.current).should('be.visible');
|
27
|
+
cy.get('[data-test="calendar-next-month"]').click();
|
28
|
+
cy.contains(months.next).should('be.visible');
|
29
|
+
cy.get('[data-test="calendar-previous-month"]').click();
|
30
|
+
cy.get('[data-test="calendar-previous-month"]').click();
|
31
|
+
cy.contains(months.previous).should('be.visible');
|
32
|
+
});
|
33
|
+
(0, _steps.Then)('we should be able to select a day', () => {
|
34
|
+
const date = '2021-10-13';
|
35
|
+
cy.get("[data-test=\"".concat(date, "\"]")).click();
|
36
|
+
cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should('have.value', date);
|
37
|
+
cy.get('[data-test="storybook-calendar-result"]').should('have.text', date);
|
38
|
+
cy.get('[data-test="storybook-calendar-result-iso"]').should('have.text', '13 October 2021');
|
39
|
+
});
|
@@ -0,0 +1,19 @@
|
|
1
|
+
Feature: The Calendar renders in the Gregorian calendar system
|
2
|
+
|
3
|
+
Scenario: Display a Gregorian calendar in arabic
|
4
|
+
Given a Gregorian calendar is rendered in "arabic"
|
5
|
+
Then days should be rendered in "arabic"
|
6
|
+
And months should be rendered in "arabic" with navigation
|
7
|
+
|
8
|
+
Scenario: Select a day in the Gregorian calendar in arabic
|
9
|
+
Given a Gregorian calendar is rendered in "arabic"
|
10
|
+
Then we should be able to select a day
|
11
|
+
|
12
|
+
Scenario: Display a Gregorian calendar in English
|
13
|
+
Given a Gregorian calendar is rendered in "english"
|
14
|
+
Then days should be rendered in "english"
|
15
|
+
And months should be rendered in "english" with navigation
|
16
|
+
|
17
|
+
Scenario: Select a day in the Gregorian calendar in English
|
18
|
+
Given a Gregorian calendar is rendered in English
|
19
|
+
Then we should be able to select a day
|
@@ -0,0 +1,18 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _steps = require("cypress-cucumber-preprocessor/steps");
|
4
|
+
|
5
|
+
(0, _steps.Given)('an Islamic calendar is rendered with Arabic locale', () => {
|
6
|
+
cy.visitStory('CalendarInputTesting', "Islamic With Arabic");
|
7
|
+
cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]').click();
|
8
|
+
cy.get('[data-test=calendar]').should('be.visible');
|
9
|
+
});
|
10
|
+
(0, _steps.Then)('days should be rendered in Arabic', () => {
|
11
|
+
cy.contains('الأحد').should('be.visible');
|
12
|
+
cy.contains('السبت').should('be.visible');
|
13
|
+
cy.contains('الجمعة').should('be.visible');
|
14
|
+
cy.contains('الخميس').should('be.visible');
|
15
|
+
cy.contains('الأربعاء').should('be.visible');
|
16
|
+
cy.contains('الثلاثاء').should('be.visible');
|
17
|
+
cy.contains('الاثنين').should('be.visible');
|
18
|
+
});
|
@@ -0,0 +1,42 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _steps = require("cypress-cucumber-preprocessor/steps");
|
4
|
+
|
5
|
+
(0, _steps.Given)('a nepali calendar in "{word}" is rendered', language => {
|
6
|
+
cy.visitStory('CalendarInputTesting', "Nepali With ".concat(language));
|
7
|
+
cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]', {
|
8
|
+
timeout: 10000
|
9
|
+
}).click();
|
10
|
+
cy.get('[data-test=calendar]').should('be.visible');
|
11
|
+
});
|
12
|
+
(0, _steps.Then)('nepali days should be rendered in "{word}"', language => {
|
13
|
+
const days = language === 'nepali' ? ['आइत', 'सोम', 'सोम', 'बुध', 'बिही', 'शुक्र', 'शनि'] : ['Som', 'Mangl', 'Budha', 'Bihi', 'Shukra', 'Shani', 'Aaita'];
|
14
|
+
days.forEach(day => {
|
15
|
+
cy.contains(day).should('be.visible');
|
16
|
+
});
|
17
|
+
});
|
18
|
+
(0, _steps.And)('months should be rendered in "{word}" with navigation', language => {
|
19
|
+
//
|
20
|
+
const months = language === 'nepali' ? {
|
21
|
+
current: 'असोज',
|
22
|
+
previous: 'भदौ',
|
23
|
+
next: 'कार्तिक'
|
24
|
+
} : {
|
25
|
+
current: 'Ashwin',
|
26
|
+
previous: 'Bhadra',
|
27
|
+
next: 'Kartik'
|
28
|
+
};
|
29
|
+
cy.contains(months.current).should('be.visible');
|
30
|
+
cy.get('[data-test="calendar-next-month"]').click();
|
31
|
+
cy.contains(months.next).should('be.visible');
|
32
|
+
cy.get('[data-test="calendar-previous-month"]').click();
|
33
|
+
cy.get('[data-test="calendar-previous-month"]').click();
|
34
|
+
cy.contains(months.previous).should('be.visible');
|
35
|
+
});
|
36
|
+
(0, _steps.Then)('we should be able to select a day', () => {
|
37
|
+
const nepaliDate = '2078-06-27';
|
38
|
+
cy.get("[data-test=\"".concat(nepaliDate, "\"]")).click();
|
39
|
+
cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should('have.value', nepaliDate);
|
40
|
+
cy.get('[data-test="storybook-calendar-result"]').should('have.text', nepaliDate);
|
41
|
+
cy.get('[data-test="storybook-calendar-result-iso"]').should('have.text', '13 October 2021');
|
42
|
+
});
|
@@ -0,0 +1,19 @@
|
|
1
|
+
Feature: The Calendar renders in Nepali calendar system
|
2
|
+
|
3
|
+
Scenario: Display a Nepali calendar in Nepali
|
4
|
+
Given a nepali calendar in "nepali" is rendered
|
5
|
+
Then nepali days should be rendered in "nepali"
|
6
|
+
And months should be rendered in "nepali" with navigation
|
7
|
+
|
8
|
+
Scenario: Select a day in the Nepali calendar in Nepali
|
9
|
+
Given a nepali calendar in "nepali" is rendered
|
10
|
+
Then we should be able to select a day
|
11
|
+
|
12
|
+
Scenario: Display a Nepali calendar in English
|
13
|
+
Given a nepali calendar in "english" is rendered
|
14
|
+
Then nepali days should be rendered in "english"
|
15
|
+
And months should be rendered in "english" with navigation
|
16
|
+
|
17
|
+
Scenario: Select a day in the Nepali calendar in English
|
18
|
+
Given a nepali calendar in "english" is rendered
|
19
|
+
Then we should be able to select a day
|
@@ -0,0 +1,21 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
Object.defineProperty(exports, "Calendar", {
|
7
|
+
enumerable: true,
|
8
|
+
get: function () {
|
9
|
+
return _index.Calendar;
|
10
|
+
}
|
11
|
+
});
|
12
|
+
Object.defineProperty(exports, "CalendarInput", {
|
13
|
+
enumerable: true,
|
14
|
+
get: function () {
|
15
|
+
return _index2.CalendarInput;
|
16
|
+
}
|
17
|
+
});
|
18
|
+
|
19
|
+
var _index = require("./calendar/index.js");
|
20
|
+
|
21
|
+
var _index2 = require("./calendar-input/index.js");
|
@@ -0,0 +1,27 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.default = void 0;
|
7
|
+
|
8
|
+
var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
|
9
|
+
|
10
|
+
var _translations = _interopRequireDefault(require("./en/translations.json"));
|
11
|
+
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
13
|
+
|
14
|
+
//------------------------------------------------------------------------------
|
15
|
+
// <auto-generated>
|
16
|
+
// This code was generated by d2-i18n-generate.
|
17
|
+
//
|
18
|
+
// Changes to this file may cause incorrect behavior and will be lost if
|
19
|
+
// the code is regenerated.
|
20
|
+
// </auto-generated>
|
21
|
+
//------------------------------------------------------------------------------
|
22
|
+
const namespace = 'default';
|
23
|
+
|
24
|
+
_d2I18n.default.addResources('en', namespace, _translations.default);
|
25
|
+
|
26
|
+
var _default = _d2I18n.default;
|
27
|
+
exports.default = _default;
|
@@ -0,0 +1,66 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.default = exports.WithAnyCalendar = exports.Nepali = exports.Ethiopic = void 0;
|
7
|
+
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
9
|
+
|
10
|
+
var _index = require("../calendar/index.js");
|
11
|
+
|
12
|
+
var _calendarStoryWrapper = require("./calendarStoryWrapper.js");
|
13
|
+
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
15
|
+
|
16
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
17
|
+
|
18
|
+
const subtitle = "[Experimental] Calendar component is useful for creating a variety of calendars including Ethiopic, Islamic etc..";
|
19
|
+
const description = "\nUse a Calendar where there is a need to let the user select a date.\n\nNote that it requires a parent, like [Box](../?path=/docs/layout-box--default), to define its size.\n\n```js\nimport { Calendar } from '@dhis2/ui'\n```\n";
|
20
|
+
var _default = {
|
21
|
+
title: 'Calendar',
|
22
|
+
component: _index.Calendar,
|
23
|
+
parameters: {
|
24
|
+
componentSubtitle: subtitle,
|
25
|
+
docs: {
|
26
|
+
description: {
|
27
|
+
component: description
|
28
|
+
}
|
29
|
+
}
|
30
|
+
}
|
31
|
+
};
|
32
|
+
exports.default = _default;
|
33
|
+
|
34
|
+
const Ethiopic = args => {
|
35
|
+
return /*#__PURE__*/_react.default.createElement(_calendarStoryWrapper.CalendarStoryWrapper, _extends({
|
36
|
+
calendar: "ethiopic",
|
37
|
+
locale: "am-et",
|
38
|
+
numberingSystem: "ethi",
|
39
|
+
date: "2014-04-05" // 13th of October 2022
|
40
|
+
,
|
41
|
+
timeZone: "Africa/Khartoum"
|
42
|
+
}, args));
|
43
|
+
};
|
44
|
+
|
45
|
+
exports.Ethiopic = Ethiopic;
|
46
|
+
|
47
|
+
const Nepali = args => {
|
48
|
+
return /*#__PURE__*/_react.default.createElement(_calendarStoryWrapper.CalendarStoryWrapper, _extends({
|
49
|
+
calendar: "nepali",
|
50
|
+
locale: "ne-NP",
|
51
|
+
date: "2079-06-29" // 13th of October 2022
|
52
|
+
,
|
53
|
+
timeZone: "Africa/Khartoum"
|
54
|
+
}, args));
|
55
|
+
};
|
56
|
+
|
57
|
+
exports.Nepali = Nepali;
|
58
|
+
|
59
|
+
const WithAnyCalendar = args => {
|
60
|
+
return /*#__PURE__*/_react.default.createElement(_calendarStoryWrapper.CalendarStoryWrapper, _extends({
|
61
|
+
calendar: "gregory",
|
62
|
+
locale: "en-GB"
|
63
|
+
}, args));
|
64
|
+
};
|
65
|
+
|
66
|
+
exports.WithAnyCalendar = WithAnyCalendar;
|
@@ -0,0 +1,107 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.default = exports.WithAnyCalendar = exports.NepaliWithNepali = exports.NepaliWithEnglish = exports.IslamicWithArabic = exports.GregorianWithEnglish = exports.GregorianWithArabic = exports.EthiopicWithEnglish = exports.EthiopicWithAmharic = void 0;
|
7
|
+
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
9
|
+
|
10
|
+
var _index = require("../calendar-input/index.js");
|
11
|
+
|
12
|
+
var _calendarStoryWrapper = require("./calendarStoryWrapper.js");
|
13
|
+
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
15
|
+
|
16
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
17
|
+
|
18
|
+
const subtitle = "[Experimental] Calendar Input is a wrapper around Calendar displaying an input that triggers the calendar";
|
19
|
+
const description = "\nUse a CalendarInput where there is a need to let the user input a date.\n\nNote that it requires a parent, like [Box](../?path=/docs/layout-box--default), to define its size.\n\n```js\nimport { CalendarInput } from '@dhis2/ui'\n```\n";
|
20
|
+
var _default = {
|
21
|
+
title: 'CalendarInput',
|
22
|
+
component: _index.CalendarInput,
|
23
|
+
parameters: {
|
24
|
+
componentSubtitle: subtitle,
|
25
|
+
docs: {
|
26
|
+
description: {
|
27
|
+
component: description
|
28
|
+
}
|
29
|
+
}
|
30
|
+
}
|
31
|
+
};
|
32
|
+
exports.default = _default;
|
33
|
+
|
34
|
+
const buildCalendar = _ref => {
|
35
|
+
let {
|
36
|
+
date,
|
37
|
+
locale,
|
38
|
+
calendar
|
39
|
+
} = _ref;
|
40
|
+
return () => /*#__PURE__*/_react.default.createElement(_calendarStoryWrapper.CalendarStoryWrapper, {
|
41
|
+
component: _index.CalendarInput,
|
42
|
+
dir: "ltr",
|
43
|
+
timeZone: "Africa/Khartoum",
|
44
|
+
weekDayFormat: "short",
|
45
|
+
date: date,
|
46
|
+
locale: locale,
|
47
|
+
calendar: calendar
|
48
|
+
});
|
49
|
+
};
|
50
|
+
|
51
|
+
const EthiopicWithAmharic = buildCalendar({
|
52
|
+
calendar: 'ethiopic',
|
53
|
+
locale: 'am-ET',
|
54
|
+
date: '2014-02-03' // 13 Oct 2021
|
55
|
+
|
56
|
+
});
|
57
|
+
exports.EthiopicWithAmharic = EthiopicWithAmharic;
|
58
|
+
const EthiopicWithEnglish = buildCalendar({
|
59
|
+
calendar: 'ethiopic',
|
60
|
+
locale: 'en-ET',
|
61
|
+
date: '2014-02-03' // 13 Oct 2021
|
62
|
+
|
63
|
+
});
|
64
|
+
exports.EthiopicWithEnglish = EthiopicWithEnglish;
|
65
|
+
const NepaliWithNepali = buildCalendar({
|
66
|
+
calendar: 'nepali',
|
67
|
+
locale: 'ne-NP',
|
68
|
+
date: '2078-06-27' // 13 Oct 2021
|
69
|
+
|
70
|
+
});
|
71
|
+
exports.NepaliWithNepali = NepaliWithNepali;
|
72
|
+
const NepaliWithEnglish = buildCalendar({
|
73
|
+
calendar: 'nepali',
|
74
|
+
locale: 'en-NP',
|
75
|
+
date: '2078-06-27' // 13 Oct 2021
|
76
|
+
|
77
|
+
});
|
78
|
+
exports.NepaliWithEnglish = NepaliWithEnglish;
|
79
|
+
const GregorianWithEnglish = buildCalendar({
|
80
|
+
calendar: 'gregorian',
|
81
|
+
locale: 'en-CA',
|
82
|
+
date: '2021-10-13'
|
83
|
+
});
|
84
|
+
exports.GregorianWithEnglish = GregorianWithEnglish;
|
85
|
+
const GregorianWithArabic = buildCalendar({
|
86
|
+
calendar: 'gregorian',
|
87
|
+
locale: 'ar-SD',
|
88
|
+
date: '2021-10-13'
|
89
|
+
});
|
90
|
+
exports.GregorianWithArabic = GregorianWithArabic;
|
91
|
+
const IslamicWithArabic = buildCalendar({
|
92
|
+
calendar: 'islamic-civil',
|
93
|
+
locale: 'ar-SD',
|
94
|
+
date: '2015-01-13'
|
95
|
+
});
|
96
|
+
exports.IslamicWithArabic = IslamicWithArabic;
|
97
|
+
|
98
|
+
const WithAnyCalendar = args => {
|
99
|
+
return /*#__PURE__*/_react.default.createElement(_calendarStoryWrapper.CalendarStoryWrapper, _extends({
|
100
|
+
calendarInput: true,
|
101
|
+
calendar: "islamic-civil",
|
102
|
+
locale: "en",
|
103
|
+
timeZone: "Africa/Khartoum"
|
104
|
+
}, args));
|
105
|
+
};
|
106
|
+
|
107
|
+
exports.WithAnyCalendar = WithAnyCalendar;
|
@@ -0,0 +1,196 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.CalendarStoryWrapper = void 0;
|
7
|
+
|
8
|
+
var _multiCalendarDates = require("@dhis2/multi-calendar-dates");
|
9
|
+
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
11
|
+
|
12
|
+
var _react = _interopRequireWildcard(require("react"));
|
13
|
+
|
14
|
+
var _index = require("../calendar/index.js");
|
15
|
+
|
16
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
17
|
+
|
18
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
19
|
+
|
20
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
21
|
+
|
22
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
23
|
+
|
24
|
+
const {
|
25
|
+
calendars,
|
26
|
+
numberingSystems
|
27
|
+
} = _multiCalendarDates.constants;
|
28
|
+
|
29
|
+
const CalendarStoryWrapper = props => {
|
30
|
+
const {
|
31
|
+
calendar,
|
32
|
+
locale,
|
33
|
+
timeZone,
|
34
|
+
dir,
|
35
|
+
component: Component,
|
36
|
+
date,
|
37
|
+
weekDayFormat
|
38
|
+
} = props;
|
39
|
+
const [selectedCalendar, setSelectedCalendar] = (0, _react.useState)(calendar);
|
40
|
+
const [selectedNumberingSystem, setSelectedNumberingSystem] = (0, _react.useState)();
|
41
|
+
const [selectedDirection, setSelectedDirection] = (0, _react.useState)(dir);
|
42
|
+
const [selectedWeekFormat, setWeekDayFormat] = (0, _react.useState)(weekDayFormat);
|
43
|
+
const [selectedLocale, setLocale] = (0, _react.useState)(locale);
|
44
|
+
const [selectedDate, setSelectedDate] = (0, _react.useState)();
|
45
|
+
|
46
|
+
const changeCalendar = _ref => {
|
47
|
+
let {
|
48
|
+
target: {
|
49
|
+
value
|
50
|
+
}
|
51
|
+
} = _ref;
|
52
|
+
setSelectedCalendar(value);
|
53
|
+
};
|
54
|
+
|
55
|
+
const changeNumberingSystem = _ref2 => {
|
56
|
+
let {
|
57
|
+
target: {
|
58
|
+
value
|
59
|
+
}
|
60
|
+
} = _ref2;
|
61
|
+
|
62
|
+
if (value === '-1') {
|
63
|
+
setSelectedNumberingSystem(null);
|
64
|
+
} else {
|
65
|
+
setSelectedNumberingSystem(value);
|
66
|
+
}
|
67
|
+
};
|
68
|
+
|
69
|
+
const changeDirection = _ref3 => {
|
70
|
+
let {
|
71
|
+
target: {
|
72
|
+
value
|
73
|
+
}
|
74
|
+
} = _ref3;
|
75
|
+
setSelectedDirection(value);
|
76
|
+
};
|
77
|
+
|
78
|
+
const changeWeekFormat = _ref4 => {
|
79
|
+
let {
|
80
|
+
target: {
|
81
|
+
value
|
82
|
+
}
|
83
|
+
} = _ref4;
|
84
|
+
setWeekDayFormat(value);
|
85
|
+
};
|
86
|
+
|
87
|
+
const onLocaleChanged = _ref5 => {
|
88
|
+
let {
|
89
|
+
target: {
|
90
|
+
value
|
91
|
+
}
|
92
|
+
} = _ref5;
|
93
|
+
setLocale(value);
|
94
|
+
};
|
95
|
+
|
96
|
+
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
|
97
|
+
style: {
|
98
|
+
fontSize: '0.8em',
|
99
|
+
marginBottom: 20,
|
100
|
+
gap: 5,
|
101
|
+
display: 'flex',
|
102
|
+
alignItems: 'center'
|
103
|
+
}
|
104
|
+
}, /*#__PURE__*/_react.default.createElement("div", null, "Options"), /*#__PURE__*/_react.default.createElement("input", {
|
105
|
+
defaultValue: locale,
|
106
|
+
placeholder: "locale",
|
107
|
+
onBlur: onLocaleChanged
|
108
|
+
}), /*#__PURE__*/_react.default.createElement("select", {
|
109
|
+
onChange: changeCalendar,
|
110
|
+
value: selectedCalendar
|
111
|
+
}, /*#__PURE__*/_react.default.createElement("option", {
|
112
|
+
disabled: true,
|
113
|
+
key: calendar,
|
114
|
+
value: "-1"
|
115
|
+
}, "Select calendar"), calendars.map(calendar => {
|
116
|
+
return /*#__PURE__*/_react.default.createElement("option", {
|
117
|
+
value: calendar,
|
118
|
+
key: calendar
|
119
|
+
}, calendar);
|
120
|
+
})), /*#__PURE__*/_react.default.createElement("select", {
|
121
|
+
onChange: changeNumberingSystem,
|
122
|
+
value: selectedNumberingSystem
|
123
|
+
}, /*#__PURE__*/_react.default.createElement("option", {
|
124
|
+
disabled: true,
|
125
|
+
key: calendar,
|
126
|
+
value: "-1"
|
127
|
+
}, "Select numbering system"), numberingSystems.map(system => {
|
128
|
+
return /*#__PURE__*/_react.default.createElement("option", {
|
129
|
+
value: system,
|
130
|
+
key: system
|
131
|
+
}, system);
|
132
|
+
})), /*#__PURE__*/_react.default.createElement("select", {
|
133
|
+
onChange: changeDirection,
|
134
|
+
value: selectedDirection
|
135
|
+
}, /*#__PURE__*/_react.default.createElement("option", {
|
136
|
+
disabled: true,
|
137
|
+
value: "-1"
|
138
|
+
}, "Select direction"), /*#__PURE__*/_react.default.createElement("option", {
|
139
|
+
value: "ltr"
|
140
|
+
}, "Left-To-Right"), /*#__PURE__*/_react.default.createElement("option", {
|
141
|
+
value: "rtl"
|
142
|
+
}, "Right-To-Left")), /*#__PURE__*/_react.default.createElement("select", {
|
143
|
+
onChange: changeWeekFormat,
|
144
|
+
value: selectedWeekFormat
|
145
|
+
}, /*#__PURE__*/_react.default.createElement("option", {
|
146
|
+
disabled: true,
|
147
|
+
value: "-1"
|
148
|
+
}, "Select format"), /*#__PURE__*/_react.default.createElement("option", {
|
149
|
+
value: "narrow"
|
150
|
+
}, "narrow"), /*#__PURE__*/_react.default.createElement("option", {
|
151
|
+
value: "short"
|
152
|
+
}, "short"), /*#__PURE__*/_react.default.createElement("option", {
|
153
|
+
value: "long"
|
154
|
+
}, "long"))), /*#__PURE__*/_react.default.createElement(Component, _extends({}, props, {
|
155
|
+
calendar: selectedCalendar,
|
156
|
+
dir: selectedDirection,
|
157
|
+
locale: selectedLocale,
|
158
|
+
date: date,
|
159
|
+
onDateSelect: date => {
|
160
|
+
setSelectedDate(date);
|
161
|
+
},
|
162
|
+
timeZone: timeZone,
|
163
|
+
weekDayFormat: selectedWeekFormat,
|
164
|
+
numberingSystem: selectedNumberingSystem
|
165
|
+
})), /*#__PURE__*/_react.default.createElement("div", {
|
166
|
+
style: {
|
167
|
+
marginTop: 10,
|
168
|
+
gap: 5,
|
169
|
+
fontSize: '12px',
|
170
|
+
display: 'flex',
|
171
|
+
flexDirection: 'column'
|
172
|
+
}
|
173
|
+
}, /*#__PURE__*/_react.default.createElement("div", null, selectedDate && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", null, "calendar date: "), /*#__PURE__*/_react.default.createElement("span", {
|
174
|
+
"data-test": "storybook-calendar-result"
|
175
|
+
}, selectedDate.calendarDateString)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", null, "iso date: "), /*#__PURE__*/_react.default.createElement("span", {
|
176
|
+
"data-test": "storybook-calendar-result-iso"
|
177
|
+
}, selectedDate.calendarDate.withCalendar('iso8601').toLocaleString('en-GB', {
|
178
|
+
dateStyle: 'long'
|
179
|
+
}))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", null, "callback:"), JSON.stringify(selectedDate, null, 2))))));
|
180
|
+
};
|
181
|
+
|
182
|
+
exports.CalendarStoryWrapper = CalendarStoryWrapper;
|
183
|
+
CalendarStoryWrapper.defaultProps = {
|
184
|
+
calendar: 'gregorian',
|
185
|
+
component: _index.Calendar,
|
186
|
+
weekDayFormat: 'narrow'
|
187
|
+
};
|
188
|
+
CalendarStoryWrapper.propTypes = {
|
189
|
+
calendar: _propTypes.default.string.isRequired,
|
190
|
+
component: _propTypes.default.elementType.isRequired,
|
191
|
+
date: _propTypes.default.string,
|
192
|
+
dir: _propTypes.default.oneOf(['ltr', 'rtl']),
|
193
|
+
locale: _propTypes.default.string,
|
194
|
+
timeZone: _propTypes.default.string,
|
195
|
+
weekDayFormat: _propTypes.default.string
|
196
|
+
};
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import { CalendarInput as component } from '../index.js';
|
2
|
+
export default {
|
3
|
+
title: 'CalendarInputTesting',
|
4
|
+
component
|
5
|
+
};
|
6
|
+
export { EthiopicWithAmharic, EthiopicWithEnglish, NepaliWithEnglish, NepaliWithNepali, GregorianWithArabic, GregorianWithEnglish, IslamicWithArabic } from '../stories/calendarInput.stories.js';
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import PropTypes from 'prop-types';
|
2
|
+
export const CalendarProps = {
|
3
|
+
calendar: PropTypes.any.isRequired,
|
4
|
+
cellSize: PropTypes.string,
|
5
|
+
date: PropTypes.string,
|
6
|
+
dir: PropTypes.oneOf(['ltr', 'rtl']),
|
7
|
+
locale: PropTypes.string,
|
8
|
+
numberingSystem: PropTypes.string,
|
9
|
+
timeZone: PropTypes.string,
|
10
|
+
weekDayFormat: PropTypes.string,
|
11
|
+
width: PropTypes.string,
|
12
|
+
onDateSelect: PropTypes.func
|
13
|
+
};
|
@@ -0,0 +1,39 @@
|
|
1
|
+
import _JSXStyle from "styled-jsx/style";
|
2
|
+
import { colors, spacers } from '@dhis2/ui-constants';
|
3
|
+
import cx from 'classnames';
|
4
|
+
import PropTypes from 'prop-types';
|
5
|
+
import React from 'react';
|
6
|
+
export const CalendarTableCell = _ref => {
|
7
|
+
let {
|
8
|
+
day,
|
9
|
+
cellSize
|
10
|
+
} = _ref;
|
11
|
+
const dayHoverBackgroundColor = colors.grey200;
|
12
|
+
const selectedDayBackgroundColor = colors.teal700;
|
13
|
+
return /*#__PURE__*/React.createElement("td", {
|
14
|
+
"data-test": day === null || day === void 0 ? void 0 : day.calendarDate,
|
15
|
+
onClick: day.onClick,
|
16
|
+
className: _JSXStyle.dynamic([["86824133", [cellSize, cellSize, cellSize, cellSize, spacers.dp2, colors.grey900, dayHoverBackgroundColor, selectedDayBackgroundColor, colors.grey600]]])
|
17
|
+
}, /*#__PURE__*/React.createElement("button", {
|
18
|
+
name: "day",
|
19
|
+
className: _JSXStyle.dynamic([["86824133", [cellSize, cellSize, cellSize, cellSize, spacers.dp2, colors.grey900, dayHoverBackgroundColor, selectedDayBackgroundColor, colors.grey600]]]) + " " + (cx('day', {
|
20
|
+
isSelected: day.isSelected,
|
21
|
+
isToday: day.isToday,
|
22
|
+
otherMonth: !day.isInCurrentMonth
|
23
|
+
}) || "")
|
24
|
+
}, day.label), /*#__PURE__*/React.createElement(_JSXStyle, {
|
25
|
+
id: "86824133",
|
26
|
+
dynamic: [cellSize, cellSize, cellSize, cellSize, spacers.dp2, colors.grey900, dayHoverBackgroundColor, selectedDayBackgroundColor, colors.grey600]
|
27
|
+
}, ["td.__jsx-style-dynamic-selector{width:".concat(cellSize, ";height:100%;height:").concat(cellSize, ";text-align:center;border:2px solid transparent;}"), "td.__jsx-style-dynamic-selector span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;padding:2px 2px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border:2px solid transparent;min-width:16px;}", "button.__jsx-style-dynamic-selector{border:0;overflow:hidden;width:".concat(cellSize, ";height:").concat(cellSize, ";border:2px solid transparent;border-radius:3px;background:none;margin:").concat(spacers.dp2, ";color:").concat(colors.grey900, ";}"), "button.__jsx-style-dynamic-selector:hover{background-color:".concat(dayHoverBackgroundColor, ";-webkit-text-decoration:underline;text-decoration:underline;}"), "button.isSelected.__jsx-style-dynamic-selector,button.otherMonth.isSelected.__jsx-style-dynamic-selector{background-color:".concat(selectedDayBackgroundColor, ";color:white;}"), "button.isToday.__jsx-style-dynamic-selector{-webkit-text-decoration:underline;text-decoration:underline;}", "button.otherMonth.__jsx-style-dynamic-selector{color:".concat(colors.grey600, ";}")]));
|
28
|
+
};
|
29
|
+
CalendarTableCell.propTypes = {
|
30
|
+
cellSize: PropTypes.string,
|
31
|
+
day: PropTypes.shape({
|
32
|
+
calendarDate: PropTypes.string,
|
33
|
+
isInCurrentMonth: PropTypes.bool,
|
34
|
+
isSelected: PropTypes.bool,
|
35
|
+
isToday: PropTypes.bool,
|
36
|
+
label: PropTypes.string,
|
37
|
+
onClick: PropTypes.func
|
38
|
+
})
|
39
|
+
};
|
@@ -0,0 +1,25 @@
|
|
1
|
+
import _JSXStyle from "styled-jsx/style";
|
2
|
+
import { colors } from '@dhis2/ui-constants';
|
3
|
+
import PropTypes from 'prop-types';
|
4
|
+
import React from 'react';
|
5
|
+
export const CalendarTableDaysHeader = _ref => {
|
6
|
+
let {
|
7
|
+
weekDayLabels
|
8
|
+
} = _ref;
|
9
|
+
const dayNamesColor = colors.grey700;
|
10
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("thead", {
|
11
|
+
className: _JSXStyle.dynamic([["275131861", [dayNamesColor]]])
|
12
|
+
}, /*#__PURE__*/React.createElement("tr", {
|
13
|
+
className: _JSXStyle.dynamic([["275131861", [dayNamesColor]]])
|
14
|
+
}, weekDayLabels.map((label, i) => /*#__PURE__*/React.createElement("th", {
|
15
|
+
scope: "col",
|
16
|
+
key: "weekday-".concat(i),
|
17
|
+
className: _JSXStyle.dynamic([["275131861", [dayNamesColor]]])
|
18
|
+
}, label)))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
19
|
+
id: "275131861",
|
20
|
+
dynamic: [dayNamesColor]
|
21
|
+
}, ["th.__jsx-style-dynamic-selector{color:".concat(dayNamesColor, ";font-weight:300;font-style:normal;padding:8px 8px;background:none;font-size:0.85em;border:none;}"), "tr.__jsx-style-dynamic-selector{border:none;}"]));
|
22
|
+
};
|
23
|
+
CalendarTableDaysHeader.propTypes = {
|
24
|
+
weekDayLabels: PropTypes.arrayOf(PropTypes.string)
|
25
|
+
};
|