@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.
Files changed (46) hide show
  1. package/README.md +10 -0
  2. package/build/cjs/__e2e__/calendarInput.stories.e2e.js +58 -0
  3. package/build/cjs/calendar/calendar-prop-types.js +24 -0
  4. package/build/cjs/calendar/calendar-table-cell.js +55 -0
  5. package/build/cjs/calendar/calendar-table-days-header.js +40 -0
  6. package/build/cjs/calendar/calendar-table.js +57 -0
  7. package/build/cjs/calendar/index.js +93 -0
  8. package/build/cjs/calendar/navigation-container.js +134 -0
  9. package/build/cjs/calendar-input/index.js +117 -0
  10. package/build/cjs/features/supports_ethiopic_calendar/supports_ethiopic_calendar.js +39 -0
  11. package/build/cjs/features/supports_ethiopic_calendar.feature +19 -0
  12. package/build/cjs/features/supports_gregorian_calendar/supports_gregorian_calendar.js +39 -0
  13. package/build/cjs/features/supports_gregorian_calendar.feature +19 -0
  14. package/build/cjs/features/supports_islamic_calendar/supports_islamic_calendar.js +18 -0
  15. package/build/cjs/features/supports_islamic_calendar.feature +5 -0
  16. package/build/cjs/features/supports_nepali_calendar/supports_nepali_calendar.js +42 -0
  17. package/build/cjs/features/supports_nepali_calendar.feature +19 -0
  18. package/build/cjs/index.js +21 -0
  19. package/build/cjs/locales/en/translations.json +4 -0
  20. package/build/cjs/locales/index.js +27 -0
  21. package/build/cjs/stories/calendar.stories.js +66 -0
  22. package/build/cjs/stories/calendarInput.stories.js +107 -0
  23. package/build/cjs/stories/calendarStoryWrapper.js +196 -0
  24. package/build/es/__e2e__/calendarInput.stories.e2e.js +6 -0
  25. package/build/es/calendar/calendar-prop-types.js +13 -0
  26. package/build/es/calendar/calendar-table-cell.js +39 -0
  27. package/build/es/calendar/calendar-table-days-header.js +25 -0
  28. package/build/es/calendar/calendar-table.js +40 -0
  29. package/build/es/calendar/index.js +71 -0
  30. package/build/es/calendar/navigation-container.js +116 -0
  31. package/build/es/calendar-input/index.js +95 -0
  32. package/build/es/features/supports_ethiopic_calendar/supports_ethiopic_calendar.js +36 -0
  33. package/build/es/features/supports_ethiopic_calendar.feature +19 -0
  34. package/build/es/features/supports_gregorian_calendar/supports_gregorian_calendar.js +36 -0
  35. package/build/es/features/supports_gregorian_calendar.feature +19 -0
  36. package/build/es/features/supports_islamic_calendar/supports_islamic_calendar.js +15 -0
  37. package/build/es/features/supports_islamic_calendar.feature +5 -0
  38. package/build/es/features/supports_nepali_calendar/supports_nepali_calendar.js +39 -0
  39. package/build/es/features/supports_nepali_calendar.feature +19 -0
  40. package/build/es/index.js +2 -0
  41. package/build/es/locales/en/translations.json +4 -0
  42. package/build/es/locales/index.js +13 -0
  43. package/build/es/stories/calendar.stories.js +44 -0
  44. package/build/es/stories/calendarInput.stories.js +84 -0
  45. package/build/es/stories/calendarStoryWrapper.js +176 -0
  46. 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,5 @@
1
+ Feature: The Calendar renders in the islamic-civil calendar system
2
+
3
+ Scenario: A Calendar for the Islamic calendar
4
+ Given an Islamic calendar is rendered with Arabic locale
5
+ Then days should be rendered in Arabic
@@ -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,4 @@
1
+ {
2
+ "Go to previous year": "Go to previous year",
3
+ "Go to next year": "Go to next year"
4
+ }
@@ -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
+ };