@gravity-ui/date-components 1.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.
Files changed (217) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +15 -0
  3. package/dist/cjs/components/Calendar/Calendar.css +220 -0
  4. package/dist/cjs/components/Calendar/Calendar.d.ts +13 -0
  5. package/dist/cjs/components/Calendar/Calendar.js +15 -0
  6. package/dist/cjs/components/Calendar/CalendarBase.d.ts +18 -0
  7. package/dist/cjs/components/Calendar/CalendarBase.js +89 -0
  8. package/dist/cjs/components/Calendar/RangeCalendar.d.ts +13 -0
  9. package/dist/cjs/components/Calendar/RangeCalendar.js +22 -0
  10. package/dist/cjs/components/Calendar/hooks/types.d.ts +124 -0
  11. package/dist/cjs/components/Calendar/hooks/types.js +2 -0
  12. package/dist/cjs/components/Calendar/hooks/useCalendarCellProps.d.ts +19 -0
  13. package/dist/cjs/components/Calendar/hooks/useCalendarCellProps.js +98 -0
  14. package/dist/cjs/components/Calendar/hooks/useCalendarGridProps.d.ts +5 -0
  15. package/dist/cjs/components/Calendar/hooks/useCalendarGridProps.js +57 -0
  16. package/dist/cjs/components/Calendar/hooks/useCalendarProps.d.ts +10 -0
  17. package/dist/cjs/components/Calendar/hooks/useCalendarProps.js +110 -0
  18. package/dist/cjs/components/Calendar/hooks/useCalendarState.d.ts +7 -0
  19. package/dist/cjs/components/Calendar/hooks/useCalendarState.js +178 -0
  20. package/dist/cjs/components/Calendar/hooks/useRangeCalendarState.d.ts +7 -0
  21. package/dist/cjs/components/Calendar/hooks/useRangeCalendarState.js +82 -0
  22. package/dist/cjs/components/Calendar/i18n/en.json +4 -0
  23. package/dist/cjs/components/Calendar/i18n/index.d.ts +1 -0
  24. package/dist/cjs/components/Calendar/i18n/index.js +11 -0
  25. package/dist/cjs/components/Calendar/i18n/ru.json +4 -0
  26. package/dist/cjs/components/Calendar/index.d.ts +8 -0
  27. package/dist/cjs/components/Calendar/index.js +23 -0
  28. package/dist/cjs/components/Calendar/utils.d.ts +4 -0
  29. package/dist/cjs/components/Calendar/utils.js +40 -0
  30. package/dist/cjs/components/DateField/DateField.css +4 -0
  31. package/dist/cjs/components/DateField/DateField.d.ts +6 -0
  32. package/dist/cjs/components/DateField/DateField.js +38 -0
  33. package/dist/cjs/components/DateField/hooks/useDateFieldProps.d.ts +6 -0
  34. package/dist/cjs/components/DateField/hooks/useDateFieldProps.js +203 -0
  35. package/dist/cjs/components/DateField/hooks/useDateFieldState.d.ts +67 -0
  36. package/dist/cjs/components/DateField/hooks/useDateFieldState.js +628 -0
  37. package/dist/cjs/components/DateField/i18n/en.json +10 -0
  38. package/dist/cjs/components/DateField/i18n/index.d.ts +1 -0
  39. package/dist/cjs/components/DateField/i18n/index.js +11 -0
  40. package/dist/cjs/components/DateField/i18n/ru.json +10 -0
  41. package/dist/cjs/components/DateField/index.d.ts +3 -0
  42. package/dist/cjs/components/DateField/index.js +19 -0
  43. package/dist/cjs/components/DateField/types.d.ts +67 -0
  44. package/dist/cjs/components/DateField/types.js +2 -0
  45. package/dist/cjs/components/DateField/utils.d.ts +14 -0
  46. package/dist/cjs/components/DateField/utils.js +276 -0
  47. package/dist/cjs/components/DatePicker/DatePicker.css +19 -0
  48. package/dist/cjs/components/DatePicker/DatePicker.d.ts +5 -0
  49. package/dist/cjs/components/DatePicker/DatePicker.js +66 -0
  50. package/dist/cjs/components/DatePicker/DesktopCalendar.d.ts +15 -0
  51. package/dist/cjs/components/DatePicker/DesktopCalendar.js +56 -0
  52. package/dist/cjs/components/DatePicker/MobileCalendar.css +49 -0
  53. package/dist/cjs/components/DatePicker/MobileCalendar.d.ts +14 -0
  54. package/dist/cjs/components/DatePicker/MobileCalendar.js +78 -0
  55. package/dist/cjs/components/DatePicker/hooks/useDatePickerState.d.ts +45 -0
  56. package/dist/cjs/components/DatePicker/hooks/useDatePickerState.js +114 -0
  57. package/dist/cjs/components/DatePicker/i18n/en.json +3 -0
  58. package/dist/cjs/components/DatePicker/i18n/index.d.ts +1 -0
  59. package/dist/cjs/components/DatePicker/i18n/index.js +11 -0
  60. package/dist/cjs/components/DatePicker/i18n/ru.json +3 -0
  61. package/dist/cjs/components/DatePicker/index.d.ts +2 -0
  62. package/dist/cjs/components/DatePicker/index.js +18 -0
  63. package/dist/cjs/components/DatePicker/utils.d.ts +1 -0
  64. package/dist/cjs/components/DatePicker/utils.js +5 -0
  65. package/dist/cjs/components/RelativeDateField/RelativeDateField.css +16 -0
  66. package/dist/cjs/components/RelativeDateField/RelativeDateField.d.ts +11 -0
  67. package/dist/cjs/components/RelativeDateField/RelativeDateField.js +37 -0
  68. package/dist/cjs/components/RelativeDateField/hooks/useRelativeDateFieldProps.d.ts +12 -0
  69. package/dist/cjs/components/RelativeDateField/hooks/useRelativeDateFieldProps.js +66 -0
  70. package/dist/cjs/components/RelativeDateField/hooks/useRelativeDateFieldState.d.ts +30 -0
  71. package/dist/cjs/components/RelativeDateField/hooks/useRelativeDateFieldState.js +66 -0
  72. package/dist/cjs/components/RelativeDateField/index.d.ts +3 -0
  73. package/dist/cjs/components/RelativeDateField/index.js +19 -0
  74. package/dist/cjs/components/RelativeDatePicker/RelativeDatePicker.css +16 -0
  75. package/dist/cjs/components/RelativeDatePicker/RelativeDatePicker.d.ts +6 -0
  76. package/dist/cjs/components/RelativeDatePicker/RelativeDatePicker.js +32 -0
  77. package/dist/cjs/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.d.ts +17 -0
  78. package/dist/cjs/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.js +175 -0
  79. package/dist/cjs/components/RelativeDatePicker/hooks/useRelativeDatePickerState.d.ts +36 -0
  80. package/dist/cjs/components/RelativeDatePicker/hooks/useRelativeDatePickerState.js +109 -0
  81. package/dist/cjs/components/RelativeDatePicker/i18n/en.json +4 -0
  82. package/dist/cjs/components/RelativeDatePicker/i18n/index.d.ts +1 -0
  83. package/dist/cjs/components/RelativeDatePicker/i18n/index.js +11 -0
  84. package/dist/cjs/components/RelativeDatePicker/i18n/ru.json +4 -0
  85. package/dist/cjs/components/RelativeDatePicker/index.d.ts +3 -0
  86. package/dist/cjs/components/RelativeDatePicker/index.js +19 -0
  87. package/dist/cjs/components/hooks/useControlledState.d.ts +1 -0
  88. package/dist/cjs/components/hooks/useControlledState.js +30 -0
  89. package/dist/cjs/components/index.d.ts +5 -0
  90. package/dist/cjs/components/index.js +21 -0
  91. package/dist/cjs/components/types/datePicker.d.ts +16 -0
  92. package/dist/cjs/components/types/datePicker.js +2 -0
  93. package/dist/cjs/components/types/events.d.ts +17 -0
  94. package/dist/cjs/components/types/events.js +2 -0
  95. package/dist/cjs/components/types/index.d.ts +4 -0
  96. package/dist/cjs/components/types/index.js +2 -0
  97. package/dist/cjs/components/types/inputs.d.ts +79 -0
  98. package/dist/cjs/components/types/inputs.js +2 -0
  99. package/dist/cjs/components/types/style.d.ts +7 -0
  100. package/dist/cjs/components/types/style.js +2 -0
  101. package/dist/cjs/components/utils/getButtonSizeForInput.d.ts +2 -0
  102. package/dist/cjs/components/utils/getButtonSizeForInput.js +20 -0
  103. package/dist/cjs/components/utils/mergeProps.d.ts +13 -0
  104. package/dist/cjs/components/utils/mergeProps.js +47 -0
  105. package/dist/cjs/components/variables.css +0 -0
  106. package/dist/cjs/index.d.ts +1 -0
  107. package/dist/cjs/index.js +17 -0
  108. package/dist/cjs/utils/cn.d.ts +2 -0
  109. package/dist/cjs/utils/cn.js +6 -0
  110. package/dist/esm/components/Calendar/Calendar.css +220 -0
  111. package/dist/esm/components/Calendar/Calendar.d.ts +13 -0
  112. package/dist/esm/components/Calendar/Calendar.js +9 -0
  113. package/dist/esm/components/Calendar/CalendarBase.d.ts +18 -0
  114. package/dist/esm/components/Calendar/CalendarBase.js +83 -0
  115. package/dist/esm/components/Calendar/RangeCalendar.d.ts +13 -0
  116. package/dist/esm/components/Calendar/RangeCalendar.js +16 -0
  117. package/dist/esm/components/Calendar/hooks/types.d.ts +124 -0
  118. package/dist/esm/components/Calendar/hooks/types.js +1 -0
  119. package/dist/esm/components/Calendar/hooks/useCalendarCellProps.d.ts +19 -0
  120. package/dist/esm/components/Calendar/hooks/useCalendarCellProps.js +91 -0
  121. package/dist/esm/components/Calendar/hooks/useCalendarGridProps.d.ts +5 -0
  122. package/dist/esm/components/Calendar/hooks/useCalendarGridProps.js +54 -0
  123. package/dist/esm/components/Calendar/hooks/useCalendarProps.d.ts +10 -0
  124. package/dist/esm/components/Calendar/hooks/useCalendarProps.js +103 -0
  125. package/dist/esm/components/Calendar/hooks/useCalendarState.d.ts +7 -0
  126. package/dist/esm/components/Calendar/hooks/useCalendarState.js +171 -0
  127. package/dist/esm/components/Calendar/hooks/useRangeCalendarState.d.ts +7 -0
  128. package/dist/esm/components/Calendar/hooks/useRangeCalendarState.js +75 -0
  129. package/dist/esm/components/Calendar/i18n/en.json +4 -0
  130. package/dist/esm/components/Calendar/i18n/index.d.ts +1 -0
  131. package/dist/esm/components/Calendar/i18n/index.js +5 -0
  132. package/dist/esm/components/Calendar/i18n/ru.json +4 -0
  133. package/dist/esm/components/Calendar/index.d.ts +8 -0
  134. package/dist/esm/components/Calendar/index.js +7 -0
  135. package/dist/esm/components/Calendar/utils.d.ts +4 -0
  136. package/dist/esm/components/Calendar/utils.js +34 -0
  137. package/dist/esm/components/DateField/DateField.css +4 -0
  138. package/dist/esm/components/DateField/DateField.d.ts +6 -0
  139. package/dist/esm/components/DateField/DateField.js +31 -0
  140. package/dist/esm/components/DateField/hooks/useDateFieldProps.d.ts +6 -0
  141. package/dist/esm/components/DateField/hooks/useDateFieldProps.js +196 -0
  142. package/dist/esm/components/DateField/hooks/useDateFieldState.d.ts +67 -0
  143. package/dist/esm/components/DateField/hooks/useDateFieldState.js +621 -0
  144. package/dist/esm/components/DateField/i18n/en.json +10 -0
  145. package/dist/esm/components/DateField/i18n/index.d.ts +1 -0
  146. package/dist/esm/components/DateField/i18n/index.js +5 -0
  147. package/dist/esm/components/DateField/i18n/ru.json +10 -0
  148. package/dist/esm/components/DateField/index.d.ts +3 -0
  149. package/dist/esm/components/DateField/index.js +3 -0
  150. package/dist/esm/components/DateField/types.d.ts +67 -0
  151. package/dist/esm/components/DateField/types.js +1 -0
  152. package/dist/esm/components/DateField/utils.d.ts +14 -0
  153. package/dist/esm/components/DateField/utils.js +268 -0
  154. package/dist/esm/components/DatePicker/DatePicker.css +19 -0
  155. package/dist/esm/components/DatePicker/DatePicker.d.ts +5 -0
  156. package/dist/esm/components/DatePicker/DatePicker.js +59 -0
  157. package/dist/esm/components/DatePicker/DesktopCalendar.d.ts +15 -0
  158. package/dist/esm/components/DatePicker/DesktopCalendar.js +48 -0
  159. package/dist/esm/components/DatePicker/MobileCalendar.css +49 -0
  160. package/dist/esm/components/DatePicker/MobileCalendar.d.ts +14 -0
  161. package/dist/esm/components/DatePicker/MobileCalendar.js +73 -0
  162. package/dist/esm/components/DatePicker/hooks/useDatePickerState.d.ts +45 -0
  163. package/dist/esm/components/DatePicker/hooks/useDatePickerState.js +107 -0
  164. package/dist/esm/components/DatePicker/i18n/en.json +3 -0
  165. package/dist/esm/components/DatePicker/i18n/index.d.ts +1 -0
  166. package/dist/esm/components/DatePicker/i18n/index.js +5 -0
  167. package/dist/esm/components/DatePicker/i18n/ru.json +3 -0
  168. package/dist/esm/components/DatePicker/index.d.ts +2 -0
  169. package/dist/esm/components/DatePicker/index.js +2 -0
  170. package/dist/esm/components/DatePicker/utils.d.ts +1 -0
  171. package/dist/esm/components/DatePicker/utils.js +2 -0
  172. package/dist/esm/components/RelativeDateField/RelativeDateField.css +16 -0
  173. package/dist/esm/components/RelativeDateField/RelativeDateField.d.ts +11 -0
  174. package/dist/esm/components/RelativeDateField/RelativeDateField.js +30 -0
  175. package/dist/esm/components/RelativeDateField/hooks/useRelativeDateFieldProps.d.ts +12 -0
  176. package/dist/esm/components/RelativeDateField/hooks/useRelativeDateFieldProps.js +59 -0
  177. package/dist/esm/components/RelativeDateField/hooks/useRelativeDateFieldState.d.ts +30 -0
  178. package/dist/esm/components/RelativeDateField/hooks/useRelativeDateFieldState.js +59 -0
  179. package/dist/esm/components/RelativeDateField/index.d.ts +3 -0
  180. package/dist/esm/components/RelativeDateField/index.js +3 -0
  181. package/dist/esm/components/RelativeDatePicker/RelativeDatePicker.css +16 -0
  182. package/dist/esm/components/RelativeDatePicker/RelativeDatePicker.d.ts +6 -0
  183. package/dist/esm/components/RelativeDatePicker/RelativeDatePicker.js +25 -0
  184. package/dist/esm/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.d.ts +17 -0
  185. package/dist/esm/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.js +168 -0
  186. package/dist/esm/components/RelativeDatePicker/hooks/useRelativeDatePickerState.d.ts +36 -0
  187. package/dist/esm/components/RelativeDatePicker/hooks/useRelativeDatePickerState.js +102 -0
  188. package/dist/esm/components/RelativeDatePicker/i18n/en.json +4 -0
  189. package/dist/esm/components/RelativeDatePicker/i18n/index.d.ts +1 -0
  190. package/dist/esm/components/RelativeDatePicker/i18n/index.js +5 -0
  191. package/dist/esm/components/RelativeDatePicker/i18n/ru.json +4 -0
  192. package/dist/esm/components/RelativeDatePicker/index.d.ts +3 -0
  193. package/dist/esm/components/RelativeDatePicker/index.js +3 -0
  194. package/dist/esm/components/hooks/useControlledState.d.ts +1 -0
  195. package/dist/esm/components/hooks/useControlledState.js +23 -0
  196. package/dist/esm/components/index.d.ts +5 -0
  197. package/dist/esm/components/index.js +5 -0
  198. package/dist/esm/components/types/datePicker.d.ts +16 -0
  199. package/dist/esm/components/types/datePicker.js +1 -0
  200. package/dist/esm/components/types/events.d.ts +17 -0
  201. package/dist/esm/components/types/events.js +1 -0
  202. package/dist/esm/components/types/index.d.ts +4 -0
  203. package/dist/esm/components/types/index.js +1 -0
  204. package/dist/esm/components/types/inputs.d.ts +79 -0
  205. package/dist/esm/components/types/inputs.js +1 -0
  206. package/dist/esm/components/types/style.d.ts +7 -0
  207. package/dist/esm/components/types/style.js +1 -0
  208. package/dist/esm/components/utils/getButtonSizeForInput.d.ts +2 -0
  209. package/dist/esm/components/utils/getButtonSizeForInput.js +16 -0
  210. package/dist/esm/components/utils/mergeProps.d.ts +13 -0
  211. package/dist/esm/components/utils/mergeProps.js +43 -0
  212. package/dist/esm/components/variables.css +0 -0
  213. package/dist/esm/index.d.ts +1 -0
  214. package/dist/esm/index.js +1 -0
  215. package/dist/esm/utils/cn.d.ts +2 -0
  216. package/dist/esm/utils/cn.js +3 -0
  217. package/package.json +119 -0
@@ -0,0 +1,628 @@
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
+ exports.useDateFieldState = void 0;
7
+ const react_1 = __importDefault(require("react"));
8
+ const date_utils_1 = require("@gravity-ui/date-utils");
9
+ const useControlledState_1 = require("../../hooks/useControlledState");
10
+ const utils_1 = require("../utils");
11
+ const EDITABLE_SEGMENTS = {
12
+ year: true,
13
+ month: true,
14
+ day: true,
15
+ hour: true,
16
+ minute: true,
17
+ second: true,
18
+ dayPeriod: true,
19
+ weekday: true,
20
+ };
21
+ const TYPE_MAPPING = {
22
+ weekday: 'day',
23
+ day: 'date',
24
+ dayPeriod: 'hour',
25
+ };
26
+ const PAGE_STEP = {
27
+ year: 5,
28
+ month: 2,
29
+ weekday: 3,
30
+ day: 7,
31
+ hour: 2,
32
+ minute: 15,
33
+ second: 15,
34
+ };
35
+ function useDateFieldState(props) {
36
+ var _a;
37
+ const [value, setDate] = (0, useControlledState_1.useControlledState)(props.value, props.defaultValue, props.onUpdate);
38
+ const [placeholderDate, setPlaceholderDate] = react_1.default.useState(() => {
39
+ return (0, utils_1.createPlaceholderValue)({
40
+ placeholderValue: props.placeholderValue,
41
+ timeZone: props.timeZone,
42
+ });
43
+ });
44
+ const format = props.format || 'L';
45
+ const sections = useFormatSections(format);
46
+ const allSegments = react_1.default.useMemo(() => sections
47
+ .filter((seg) => EDITABLE_SEGMENTS[seg.type])
48
+ .reduce((p, seg) => {
49
+ p[seg.type] = true;
50
+ return p;
51
+ }, {}), [sections]);
52
+ const validSegmentsState = react_1.default.useState(() => props.value || props.defaultValue ? Object.assign({}, allSegments) : {});
53
+ let validSegments = validSegmentsState[0];
54
+ const setValidSegments = validSegmentsState[1];
55
+ if (value && Object.keys(validSegments).length < Object.keys(allSegments).length) {
56
+ setValidSegments(Object.assign({}, allSegments));
57
+ }
58
+ if (!value &&
59
+ Object.keys(validSegments).length > 0 &&
60
+ Object.keys(validSegments).length === Object.keys(allSegments).length) {
61
+ validSegments = {};
62
+ setValidSegments(validSegments);
63
+ setPlaceholderDate((0, utils_1.createPlaceholderValue)({ timeZone: props.timeZone }));
64
+ }
65
+ const displayValue = value &&
66
+ (0, date_utils_1.isValid)(value) &&
67
+ Object.keys(validSegments).length >= Object.keys(allSegments).length
68
+ ? value
69
+ : placeholderDate;
70
+ const sectionsState = useSectionsState(sections, displayValue, validSegments);
71
+ const [selectedSections, setSelectedSections] = react_1.default.useState(() => {
72
+ var _a, _b;
73
+ return (_b = (_a = sectionsState.editableSections[0]) === null || _a === void 0 ? void 0 : _a.previousEditableSection) !== null && _b !== void 0 ? _b : -1;
74
+ });
75
+ const selectedSectionIndexes = react_1.default.useMemo(() => {
76
+ if (selectedSections === -1) {
77
+ return null;
78
+ }
79
+ if (selectedSections === 'all') {
80
+ return {
81
+ startIndex: 0,
82
+ endIndex: sectionsState.editableSections.length - 1,
83
+ };
84
+ }
85
+ if (typeof selectedSections === 'number') {
86
+ return { startIndex: selectedSections, endIndex: selectedSections };
87
+ }
88
+ if (typeof selectedSections === 'string') {
89
+ const selectedSectionIndex = sectionsState.editableSections.findIndex((section) => section.type === selectedSections);
90
+ return { startIndex: selectedSectionIndex, endIndex: selectedSectionIndex };
91
+ }
92
+ return selectedSections;
93
+ }, [selectedSections, sectionsState.editableSections]);
94
+ function setValue(newValue) {
95
+ if (props.disabled || props.readOnly) {
96
+ return;
97
+ }
98
+ if (Object.keys(validSegments).length >= Object.keys(allSegments).length) {
99
+ setDate(newValue);
100
+ }
101
+ else {
102
+ setPlaceholderDate(newValue);
103
+ }
104
+ }
105
+ function markValid(part) {
106
+ validSegments[part] = true;
107
+ if (validSegments.day && validSegments.month && validSegments.year && allSegments.weekday) {
108
+ validSegments.weekday = true;
109
+ }
110
+ if (validSegments.hour && allSegments.dayPeriod) {
111
+ validSegments.dayPeriod = true;
112
+ }
113
+ setValidSegments(Object.assign({}, validSegments));
114
+ }
115
+ function setSection(section, amount) {
116
+ markValid(section.type);
117
+ setValue(setSegment(section, displayValue, amount));
118
+ }
119
+ function adjustSection(sectionIndex, amount) {
120
+ const section = sectionsState.editableSections[sectionIndex];
121
+ if (validSegments[section.type]) {
122
+ setValue(addSegment(section, displayValue, amount));
123
+ }
124
+ else {
125
+ markValid(section.type);
126
+ if (Object.keys(validSegments).length >= Object.keys(allSegments).length) {
127
+ setValue(displayValue);
128
+ }
129
+ }
130
+ }
131
+ const enteredKeys = react_1.default.useRef('');
132
+ const validationState = props.validationState ||
133
+ ((0, utils_1.isInvalid)(value, props.minValue, props.maxValue) ? 'invalid' : undefined) ||
134
+ (value && ((_a = props.isDateUnavailable) === null || _a === void 0 ? void 0 : _a.call(props, value)) ? 'invalid' : undefined);
135
+ return {
136
+ value: value !== null && value !== void 0 ? value : null,
137
+ isEmpty: Object.keys(validSegments).length === 0,
138
+ displayValue,
139
+ setValue,
140
+ text: sectionsState.editableSections.map((s) => s.textValue).join(''),
141
+ readOnly: props.readOnly,
142
+ disabled: props.disabled,
143
+ sections: sectionsState.editableSections,
144
+ selectedSectionIndexes,
145
+ validationState,
146
+ setSelectedSections(position) {
147
+ enteredKeys.current = '';
148
+ setSelectedSections(position);
149
+ },
150
+ focusSectionInPosition(position) {
151
+ const nextSectionIndex = this.sections.findIndex((s) => s.end >= position);
152
+ const index = nextSectionIndex === -1 ? 0 : nextSectionIndex;
153
+ const nextSection = this.sections[index];
154
+ if (nextSection) {
155
+ this.setSelectedSections(EDITABLE_SEGMENTS[nextSection.type] ? index : nextSection.nextEditableSection);
156
+ }
157
+ },
158
+ focusNextSection() {
159
+ var _a, _b;
160
+ const currentIndex = selectedSections === 'all' ? 0 : selectedSections;
161
+ const newIndex = (_b = (_a = this.sections[currentIndex]) === null || _a === void 0 ? void 0 : _a.nextEditableSection) !== null && _b !== void 0 ? _b : -1;
162
+ if (newIndex !== -1) {
163
+ this.setSelectedSections(newIndex);
164
+ }
165
+ },
166
+ focusPreviousSection() {
167
+ var _a, _b;
168
+ const currentIndex = selectedSections === 'all' ? 0 : selectedSections;
169
+ const newIndex = (_b = (_a = this.sections[currentIndex]) === null || _a === void 0 ? void 0 : _a.previousEditableSection) !== null && _b !== void 0 ? _b : -1;
170
+ if (newIndex !== -1) {
171
+ this.setSelectedSections(newIndex);
172
+ }
173
+ },
174
+ focusFirstSection() {
175
+ var _a, _b;
176
+ const newIndex = (_b = (_a = this.sections[0]) === null || _a === void 0 ? void 0 : _a.previousEditableSection) !== null && _b !== void 0 ? _b : -1;
177
+ if (newIndex !== -1) {
178
+ setSelectedSections(newIndex);
179
+ }
180
+ },
181
+ focusLastSection() {
182
+ var _a, _b;
183
+ const newIndex = (_b = (_a = this.sections[this.sections.length - 1]) === null || _a === void 0 ? void 0 : _a.nextEditableSection) !== null && _b !== void 0 ? _b : -1;
184
+ if (newIndex !== -1) {
185
+ this.setSelectedSections(newIndex);
186
+ }
187
+ },
188
+ increment() {
189
+ if (this.readOnly || this.disabled) {
190
+ return;
191
+ }
192
+ enteredKeys.current = '';
193
+ const sectionIndex = getCurrentEditableSectionIndex(this.sections, selectedSections);
194
+ if (sectionIndex !== -1) {
195
+ adjustSection(sectionIndex, 1);
196
+ }
197
+ },
198
+ decrement() {
199
+ if (this.readOnly || this.disabled) {
200
+ return;
201
+ }
202
+ enteredKeys.current = '';
203
+ const sectionIndex = getCurrentEditableSectionIndex(this.sections, selectedSections);
204
+ if (sectionIndex !== -1) {
205
+ adjustSection(sectionIndex, -1);
206
+ }
207
+ },
208
+ incrementPage() {
209
+ if (this.readOnly || this.disabled) {
210
+ return;
211
+ }
212
+ enteredKeys.current = '';
213
+ const sectionIndex = getCurrentEditableSectionIndex(this.sections, selectedSections);
214
+ if (sectionIndex !== -1) {
215
+ adjustSection(sectionIndex, PAGE_STEP[this.sections[sectionIndex].type] || 1);
216
+ }
217
+ },
218
+ decrementPage() {
219
+ if (this.readOnly || this.disabled) {
220
+ return;
221
+ }
222
+ enteredKeys.current = '';
223
+ const sectionIndex = getCurrentEditableSectionIndex(this.sections, selectedSections);
224
+ if (sectionIndex !== -1) {
225
+ adjustSection(sectionIndex, -(PAGE_STEP[this.sections[sectionIndex].type] || 1));
226
+ }
227
+ },
228
+ clearSection() {
229
+ if (this.readOnly || this.disabled) {
230
+ return;
231
+ }
232
+ enteredKeys.current = '';
233
+ if (selectedSections === 'all') {
234
+ this.clearAll();
235
+ return;
236
+ }
237
+ const sectionIndex = getCurrentEditableSectionIndex(this.sections, selectedSections);
238
+ if (sectionIndex === -1) {
239
+ return;
240
+ }
241
+ const section = this.sections[sectionIndex];
242
+ delete validSegments[section.type];
243
+ setValidSegments(Object.assign({}, validSegments));
244
+ const placeholder = (0, utils_1.createPlaceholderValue)({
245
+ placeholderValue: props.placeholderValue,
246
+ timeZone: props.timeZone,
247
+ });
248
+ let currentValue = displayValue;
249
+ // Reset day period to default without changing the hour.
250
+ if (section.type === 'dayPeriod') {
251
+ const isPM = displayValue.hour() >= 12;
252
+ const shouldBePM = placeholder.hour() >= 12;
253
+ if (isPM && !shouldBePM) {
254
+ currentValue = displayValue.set('hour', displayValue.hour() - 12);
255
+ }
256
+ else if (!isPM && shouldBePM) {
257
+ currentValue = displayValue.set('hour', displayValue.hour() + 12);
258
+ }
259
+ }
260
+ else {
261
+ const type = getDurationUnitFromSectionType(section.type);
262
+ currentValue = displayValue.set(type, placeholder[type]());
263
+ }
264
+ if (value) {
265
+ setDate(null);
266
+ }
267
+ setValue(currentValue);
268
+ },
269
+ clearAll() {
270
+ if (this.readOnly || this.disabled) {
271
+ return;
272
+ }
273
+ enteredKeys.current = '';
274
+ validSegments = {};
275
+ setValidSegments({});
276
+ if (value !== null) {
277
+ setDate(null);
278
+ }
279
+ setValue((0, utils_1.createPlaceholderValue)({
280
+ placeholderValue: props.placeholderValue,
281
+ timeZone: props.timeZone,
282
+ }));
283
+ },
284
+ // eslint-disable-next-line complexity
285
+ onInput(key) {
286
+ if (this.readOnly || this.disabled) {
287
+ return;
288
+ }
289
+ const sectionIndex = getCurrentEditableSectionIndex(this.sections, selectedSections);
290
+ if (sectionIndex === -1) {
291
+ return;
292
+ }
293
+ const section = this.sections[sectionIndex];
294
+ let newValue = enteredKeys.current + key;
295
+ const onInputNumber = (numberValue) => {
296
+ var _a, _b, _c;
297
+ let sectionValue = section.type === 'month' ? numberValue - 1 : numberValue;
298
+ const allowsZero = section.minValue === 0;
299
+ if (section.type === 'hour' &&
300
+ (section.minValue === 12 || section.maxValue === 11)) {
301
+ if (numberValue > 12) {
302
+ sectionValue = Number(key);
303
+ }
304
+ if (section.minValue === 12 && sectionValue > 1) {
305
+ sectionValue += 12;
306
+ }
307
+ }
308
+ else if (sectionValue > ((_a = section.maxValue) !== null && _a !== void 0 ? _a : 0)) {
309
+ sectionValue = Number(key) - (section.type === 'month' ? 1 : 0);
310
+ newValue = key;
311
+ if (sectionValue > ((_b = section.maxValue) !== null && _b !== void 0 ? _b : 0)) {
312
+ enteredKeys.current = '';
313
+ return;
314
+ }
315
+ }
316
+ const shouldSetValue = sectionValue > 0 || (sectionValue === 0 && allowsZero);
317
+ if (shouldSetValue) {
318
+ setSection(section, sectionValue);
319
+ }
320
+ if (Number(numberValue + '0') > ((_c = section.maxValue) !== null && _c !== void 0 ? _c : 0) ||
321
+ newValue.length >= String(section.maxValue).length) {
322
+ enteredKeys.current = '';
323
+ if (shouldSetValue) {
324
+ this.focusNextSection();
325
+ }
326
+ }
327
+ else {
328
+ enteredKeys.current = newValue;
329
+ }
330
+ };
331
+ const onInputString = (stringValue) => {
332
+ var _a;
333
+ const options = (_a = section.options) !== null && _a !== void 0 ? _a : [];
334
+ let sectionValue = stringValue.toLocaleUpperCase();
335
+ let foundOptions = options.filter((v) => v.startsWith(sectionValue));
336
+ if (foundOptions.length === 0) {
337
+ if (stringValue !== key) {
338
+ sectionValue = key.toLocaleUpperCase();
339
+ foundOptions = options.filter((v) => v.startsWith(sectionValue));
340
+ }
341
+ if (foundOptions.length === 0) {
342
+ enteredKeys.current = '';
343
+ return;
344
+ }
345
+ }
346
+ const foundValue = foundOptions[0];
347
+ const index = options.indexOf(foundValue);
348
+ if (section.type === 'dayPeriod') {
349
+ setSection(section, index === 1 ? 12 : 0);
350
+ }
351
+ else {
352
+ setSection(section, index);
353
+ }
354
+ if (foundOptions.length > 1) {
355
+ enteredKeys.current = newValue;
356
+ }
357
+ else {
358
+ enteredKeys.current = '';
359
+ this.focusNextSection();
360
+ }
361
+ };
362
+ switch (section.type) {
363
+ case 'day':
364
+ case 'hour':
365
+ case 'minute':
366
+ case 'second':
367
+ case 'year': {
368
+ if (!Number.isInteger(Number(newValue))) {
369
+ return;
370
+ }
371
+ const numberValue = Number(newValue);
372
+ onInputNumber(numberValue);
373
+ break;
374
+ }
375
+ case 'dayPeriod': {
376
+ onInputString(newValue);
377
+ break;
378
+ }
379
+ case 'weekday':
380
+ case 'month': {
381
+ if (Number.isInteger(Number(newValue))) {
382
+ const numberValue = Number(newValue);
383
+ onInputNumber(numberValue);
384
+ }
385
+ else {
386
+ onInputString(newValue);
387
+ }
388
+ break;
389
+ }
390
+ }
391
+ },
392
+ setValueFromString(str) {
393
+ let date = parseDate({ input: str, format, timeZone: props.timeZone });
394
+ if ((0, date_utils_1.isValid)(date)) {
395
+ if (props.timeZone && !isDateStringWithTimeZone(str)) {
396
+ const time = parseDate({ input: str, format });
397
+ date = (0, utils_1.mergeDateTime)(date, time);
398
+ }
399
+ setDate(date);
400
+ return true;
401
+ }
402
+ return false;
403
+ },
404
+ };
405
+ }
406
+ exports.useDateFieldState = useDateFieldState;
407
+ function parseDate(options) {
408
+ let date = (0, date_utils_1.dateTime)(options);
409
+ if (!(0, date_utils_1.isValid)(date)) {
410
+ date = (0, date_utils_1.dateTime)(Object.assign(Object.assign({}, options), { format: undefined }));
411
+ }
412
+ return date;
413
+ }
414
+ function isDateStringWithTimeZone(str) {
415
+ return /z$/i.test(str) || /[+-]\d\d:\d\d$/.test(str);
416
+ }
417
+ function addSegment(section, date, amount) {
418
+ var _a;
419
+ let val = (_a = section.value) !== null && _a !== void 0 ? _a : 0;
420
+ if (section.type === 'dayPeriod') {
421
+ val = date.hour() + (date.hour() > 12 ? -12 : 12);
422
+ }
423
+ else {
424
+ val = val + amount;
425
+ const min = section.minValue;
426
+ const max = section.maxValue;
427
+ if (typeof min === 'number' && typeof max === 'number') {
428
+ const length = max - min + 1;
429
+ val = ((val - min + length) % length) + min;
430
+ }
431
+ }
432
+ const type = getDurationUnitFromSectionType(section.type);
433
+ return date.set(type, val);
434
+ }
435
+ function setSegment(section, date, amount) {
436
+ const type = section.type;
437
+ switch (type) {
438
+ case 'day':
439
+ case 'weekday':
440
+ case 'month':
441
+ case 'year': {
442
+ return date.set(getDurationUnitFromSectionType(type), amount);
443
+ }
444
+ case 'dayPeriod': {
445
+ const hours = date.hour();
446
+ const wasPM = hours >= 12;
447
+ const isPM = amount >= 12;
448
+ if (isPM === wasPM) {
449
+ return date;
450
+ }
451
+ return date.set('hour', wasPM ? hours - 12 : hours + 12);
452
+ }
453
+ case 'hour': {
454
+ // In 12 hour time, ensure that AM/PM does not change
455
+ let sectionAmount = amount;
456
+ if (section.minValue === 12 || section.maxValue === 11) {
457
+ const hours = date.hour();
458
+ const wasPM = hours >= 12;
459
+ if (!wasPM && sectionAmount === 12) {
460
+ sectionAmount = 0;
461
+ }
462
+ if (wasPM && sectionAmount < 12) {
463
+ sectionAmount += 12;
464
+ }
465
+ }
466
+ return date.set('hour', sectionAmount);
467
+ }
468
+ case 'minute':
469
+ case 'second': {
470
+ return date.set(type, amount);
471
+ }
472
+ }
473
+ return date;
474
+ }
475
+ function getCurrentEditableSectionIndex(sections, selectedSections) {
476
+ const currentIndex = selectedSections === 'all' || selectedSections === -1 ? 0 : selectedSections;
477
+ const section = sections[currentIndex];
478
+ if (section && !EDITABLE_SEGMENTS[section.type]) {
479
+ return section.nextEditableSection;
480
+ }
481
+ return section ? currentIndex : -1;
482
+ }
483
+ function useFormatSections(format) {
484
+ const usedFormat = format;
485
+ const [sections, setSections] = react_1.default.useState(() => (0, utils_1.splitFormatIntoSections)(usedFormat));
486
+ const [previousFormat, setFormat] = react_1.default.useState(usedFormat);
487
+ if (usedFormat !== previousFormat) {
488
+ setFormat(usedFormat);
489
+ setSections((0, utils_1.splitFormatIntoSections)(usedFormat));
490
+ }
491
+ return sections;
492
+ }
493
+ function useSectionsState(sections, value, validSegments) {
494
+ const [state, setState] = react_1.default.useState(() => {
495
+ return {
496
+ value,
497
+ sections,
498
+ validSegments,
499
+ editableSections: getEditableSections(sections, value, validSegments),
500
+ };
501
+ });
502
+ if (sections !== state.sections ||
503
+ validSegments !== state.validSegments ||
504
+ !value.isSame(state.value)) {
505
+ setState({
506
+ value,
507
+ sections,
508
+ validSegments,
509
+ editableSections: getEditableSections(sections, value, validSegments),
510
+ });
511
+ }
512
+ return state;
513
+ }
514
+ function getEditableSections(sections, value, validSegments) {
515
+ let position = 0;
516
+ const newSections = [];
517
+ let previousEditableSection = -1;
518
+ for (let i = 0; i < sections.length; i++) {
519
+ const section = sections[i];
520
+ const isEditable = EDITABLE_SEGMENTS[section.type];
521
+ let renderedValue = section.placeholder;
522
+ if ((isEditable && validSegments[section.type]) || section.type === 'timeZoneName') {
523
+ renderedValue = value.format(section.format);
524
+ }
525
+ const sectionLength = renderedValue.length;
526
+ const newSection = Object.assign(Object.assign(Object.assign({}, section), { value: getValue(value, section.type), textValue: renderedValue, start: position, end: position + sectionLength, modified: false, previousEditableSection, nextEditableSection: previousEditableSection }), getSectionLimits(value, section.type, { hour12: isHour12(section) }));
527
+ newSections.push(newSection);
528
+ if (isEditable) {
529
+ for (let j = Math.max(0, previousEditableSection); j <= i; j++) {
530
+ const prevSection = newSections[j];
531
+ if (prevSection) {
532
+ prevSection.nextEditableSection = i;
533
+ if (prevSection.previousEditableSection === -1) {
534
+ prevSection.previousEditableSection = i;
535
+ }
536
+ }
537
+ }
538
+ previousEditableSection = i;
539
+ }
540
+ position += sectionLength;
541
+ }
542
+ return newSections;
543
+ }
544
+ function getValue(date, type) {
545
+ switch (type) {
546
+ case 'year':
547
+ case 'month':
548
+ case 'hour':
549
+ case 'minute':
550
+ case 'second': {
551
+ return date[type]();
552
+ }
553
+ case 'day': {
554
+ return date.date();
555
+ }
556
+ case 'weekday': {
557
+ return date.day();
558
+ }
559
+ case 'dayPeriod': {
560
+ return date.hour() >= 12 ? 12 : 0;
561
+ }
562
+ }
563
+ return undefined;
564
+ }
565
+ function isHour12(section) {
566
+ if (section.type === 'hour') {
567
+ return (0, date_utils_1.dateTime)().set('hour', 15).format(section.format) !== '15';
568
+ }
569
+ return false;
570
+ }
571
+ function getSectionLimits(date, type, options) {
572
+ switch (type) {
573
+ case 'year': {
574
+ return {
575
+ minValue: 1,
576
+ maxValue: 9999,
577
+ };
578
+ }
579
+ case 'month': {
580
+ return {
581
+ minValue: 0,
582
+ maxValue: 11,
583
+ };
584
+ }
585
+ case 'weekday': {
586
+ return {
587
+ minValue: 0,
588
+ maxValue: 6,
589
+ };
590
+ }
591
+ case 'day': {
592
+ return {
593
+ minValue: 1,
594
+ maxValue: date ? date.daysInMonth() : 31,
595
+ };
596
+ }
597
+ case 'hour': {
598
+ if (options.hour12) {
599
+ const isPM = date.hour() >= 12;
600
+ return {
601
+ minValue: isPM ? 12 : 0,
602
+ maxValue: isPM ? 23 : 11,
603
+ };
604
+ }
605
+ return {
606
+ minValue: 0,
607
+ maxValue: 23,
608
+ };
609
+ }
610
+ case 'minute':
611
+ case 'second': {
612
+ return {
613
+ minValue: 0,
614
+ maxValue: 59,
615
+ };
616
+ }
617
+ }
618
+ return {};
619
+ }
620
+ function getDurationUnitFromSectionType(type) {
621
+ if (type === 'literal' || type === 'timeZoneName' || type === 'unknown') {
622
+ throw new Error(`${type} section does not have duration unit.`);
623
+ }
624
+ if (type in TYPE_MAPPING) {
625
+ return TYPE_MAPPING[type];
626
+ }
627
+ return type;
628
+ }
@@ -0,0 +1,10 @@
1
+ {
2
+ "year_placeholder": "Y",
3
+ "month_placeholder": "M",
4
+ "weekday_placeholder": "E",
5
+ "day_placeholder": "D",
6
+ "hour_placeholder": "h",
7
+ "minute_placeholder": "m",
8
+ "second_placeholder": "s",
9
+ "dayPeriod_placeholder": "aa"
10
+ }
@@ -0,0 +1 @@
1
+ export declare const i18n: (key: "year_placeholder" | "month_placeholder" | "weekday_placeholder" | "day_placeholder" | "hour_placeholder" | "minute_placeholder" | "second_placeholder" | "dayPeriod_placeholder", params?: import("@gravity-ui/i18n").Params | undefined) => string;
@@ -0,0 +1,11 @@
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
+ exports.i18n = void 0;
7
+ const i18n_1 = require("@gravity-ui/uikit/i18n");
8
+ const cn_1 = require("../../../utils/cn");
9
+ const en_json_1 = __importDefault(require("./en.json"));
10
+ const ru_json_1 = __importDefault(require("./ru.json"));
11
+ exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, `${cn_1.NAMESPACE}date-field`);
@@ -0,0 +1,10 @@
1
+ {
2
+ "year_placeholder": "Г",
3
+ "month_placeholder": "М",
4
+ "weekday_placeholder": "ДН",
5
+ "day_placeholder": "Д",
6
+ "hour_placeholder": "ч",
7
+ "minute_placeholder": "м",
8
+ "second_placeholder": "с",
9
+ "dayPeriod_placeholder": "(д|п)п"
10
+ }
@@ -0,0 +1,3 @@
1
+ export * from './DateField';
2
+ export * from './hooks/useDateFieldState';
3
+ export * from './hooks/useDateFieldProps';
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./DateField"), exports);
18
+ __exportStar(require("./hooks/useDateFieldState"), exports);
19
+ __exportStar(require("./hooks/useDateFieldProps"), exports);