@thx/controls 17.0.0-mantine.0 → 17.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 (174) hide show
  1. package/dist/esm/date/DatePicker/styles.css.js +7 -0
  2. package/dist/esm/date/DatePicker/styles.css.js.map +1 -0
  3. package/dist/esm/date/LocalDatePicker/LocalDatePicker.js +140 -17
  4. package/dist/esm/date/LocalDatePicker/LocalDatePicker.js.map +1 -1
  5. package/dist/esm/date/LocalDatePicker/MaskedDateInput.js +22 -0
  6. package/dist/esm/date/LocalDatePicker/MaskedDateInput.js.map +1 -0
  7. package/dist/esm/date/LocalMonthSelect/LocalMonthSelect.js +23 -19
  8. package/dist/esm/date/LocalMonthSelect/LocalMonthSelect.js.map +1 -1
  9. package/dist/esm/date/LocalTimePicker/LocalTimePicker.js +55 -6
  10. package/dist/esm/date/LocalTimePicker/LocalTimePicker.js.map +1 -1
  11. package/dist/esm/date/LocalTimePicker/MaskedTimeInput.js +21 -0
  12. package/dist/esm/date/LocalTimePicker/MaskedTimeInput.js.map +1 -0
  13. package/dist/esm/date/MonthDayPicker/MonthDayPicker.js +69 -13
  14. package/dist/esm/date/MonthDayPicker/MonthDayPicker.js.map +1 -1
  15. package/dist/esm/date/MonthYearPicker/MonthYearPicker.js +57 -14
  16. package/dist/esm/date/MonthYearPicker/MonthYearPicker.js.map +1 -1
  17. package/dist/esm/date/YearSelect/YearSelect.js +39 -25
  18. package/dist/esm/date/YearSelect/YearSelect.js.map +1 -1
  19. package/dist/esm/external/style-inject/dist/style-inject.es.js +29 -0
  20. package/dist/esm/external/style-inject/dist/style-inject.es.js.map +1 -0
  21. package/dist/esm/form/TForm/useTForm.js +8 -12
  22. package/dist/esm/form/TForm/useTForm.js.map +1 -1
  23. package/dist/esm/index.js +23 -1
  24. package/dist/esm/index.js.map +1 -1
  25. package/dist/esm/inputs/CreditCardInput/CreditCardInput.js +71 -0
  26. package/dist/esm/inputs/CreditCardInput/CreditCardInput.js.map +1 -0
  27. package/dist/esm/inputs/CreditCardInput/CreditCardNumberInput.js +76 -0
  28. package/dist/esm/inputs/CreditCardInput/CreditCardNumberInput.js.map +1 -0
  29. package/dist/esm/inputs/CreditCardInput/styles.css.js +7 -0
  30. package/dist/esm/inputs/CreditCardInput/styles.css.js.map +1 -0
  31. package/dist/esm/inputs/MaskedInput/MaskedInput.js +19 -8
  32. package/dist/esm/inputs/MaskedInput/MaskedInput.js.map +1 -1
  33. package/dist/esm/inputs/MaskedInput/useMaskedInput.js +3 -2
  34. package/dist/esm/inputs/MaskedInput/useMaskedInput.js.map +1 -1
  35. package/dist/esm/inputs/PhoneInput/PhoneInput.js.map +1 -1
  36. package/dist/esm/inputs/RadioGroup/RadioGroup.js +25 -0
  37. package/dist/esm/inputs/RadioGroup/RadioGroup.js.map +1 -0
  38. package/dist/esm/inputs/Scriptel/Scriptel.js +52 -0
  39. package/dist/esm/inputs/Scriptel/Scriptel.js.map +1 -0
  40. package/dist/esm/inputs/Scriptel/ScriptelContext.js +6 -0
  41. package/dist/esm/inputs/Scriptel/ScriptelContext.js.map +1 -0
  42. package/dist/esm/inputs/Scriptel/scriptel/enums.js +21 -0
  43. package/dist/esm/inputs/Scriptel/scriptel/enums.js.map +1 -0
  44. package/dist/esm/inputs/Scriptel/scriptel/index.js +93 -0
  45. package/dist/esm/inputs/Scriptel/scriptel/index.js.map +1 -0
  46. package/dist/esm/inputs/Scriptel/withScriptel.js +15 -0
  47. package/dist/esm/inputs/Scriptel/withScriptel.js.map +1 -0
  48. package/dist/esm/inputs/ScriptelInput/ScriptelInput.js +67 -0
  49. package/dist/esm/inputs/ScriptelInput/ScriptelInput.js.map +1 -0
  50. package/dist/esm/inputs/SinInput/SinInput.js +54 -0
  51. package/dist/esm/inputs/SinInput/SinInput.js.map +1 -0
  52. package/dist/esm/inputs/TableInput/CheckboxEditCell.js +32 -0
  53. package/dist/esm/inputs/TableInput/CheckboxEditCell.js.map +1 -0
  54. package/dist/esm/inputs/TableInput/DropdownCell.js +26 -0
  55. package/dist/esm/inputs/TableInput/DropdownCell.js.map +1 -0
  56. package/dist/esm/inputs/TableInput/HoverCell.js +20 -0
  57. package/dist/esm/inputs/TableInput/HoverCell.js.map +1 -0
  58. package/dist/esm/inputs/TableInput/LocalDateCell.js +13 -0
  59. package/dist/esm/inputs/TableInput/LocalDateCell.js.map +1 -0
  60. package/dist/esm/inputs/TableInput/LocalDateEditCell.js +33 -0
  61. package/dist/esm/inputs/TableInput/LocalDateEditCell.js.map +1 -0
  62. package/dist/esm/inputs/TableInput/MoneyCell.js +13 -0
  63. package/dist/esm/inputs/TableInput/MoneyCell.js.map +1 -0
  64. package/dist/esm/inputs/TableInput/MoneyEditCell.js +32 -0
  65. package/dist/esm/inputs/TableInput/MoneyEditCell.js.map +1 -0
  66. package/dist/esm/inputs/TableInput/MoneySumFooter.js +20 -0
  67. package/dist/esm/inputs/TableInput/MoneySumFooter.js.map +1 -0
  68. package/dist/esm/inputs/TableInput/StringEditCell.js +34 -0
  69. package/dist/esm/inputs/TableInput/StringEditCell.js.map +1 -0
  70. package/dist/esm/inputs/TableInput/TableInput.js +75 -0
  71. package/dist/esm/inputs/TableInput/TableInput.js.map +1 -0
  72. package/dist/esm/inputs/TableInput/addRowOnTab.js +13 -0
  73. package/dist/esm/inputs/TableInput/addRowOnTab.js.map +1 -0
  74. package/dist/esm/money/MoneyCurrencyInput/MoneyCurrencyInput.js +51 -0
  75. package/dist/esm/money/MoneyCurrencyInput/MoneyCurrencyInput.js.map +1 -0
  76. package/dist/esm/money/MoneyInput/MoneyInput.js +31 -0
  77. package/dist/esm/money/MoneyInput/MoneyInput.js.map +1 -0
  78. package/dist/esm/money/useMoneyInput.js +75 -0
  79. package/dist/esm/money/useMoneyInput.js.map +1 -0
  80. package/dist/esm/step/FormStep.js +17 -0
  81. package/dist/esm/step/FormStep.js.map +1 -0
  82. package/dist/esm/step/Step.js +10 -0
  83. package/dist/esm/step/Step.js.map +1 -0
  84. package/dist/esm/step/StepProvider.js +95 -0
  85. package/dist/esm/step/StepProvider.js.map +1 -0
  86. package/dist/esm/step/stepContext.js +10 -0
  87. package/dist/esm/step/stepContext.js.map +1 -0
  88. package/dist/esm/step/useStep.js +10 -0
  89. package/dist/esm/step/useStep.js.map +1 -0
  90. package/dist/stats.html +1 -1
  91. package/dist/stats.txt +89 -27
  92. package/dist/types/date/DatePicker/index.d.ts +3 -0
  93. package/dist/types/date/LocalDatePicker/LocalDatePicker.d.ts +11 -5
  94. package/dist/types/date/LocalDatePicker/MaskedDateInput.d.ts +14 -0
  95. package/dist/types/date/LocalMonthSelect/LocalMonthSelect.d.ts +3 -2
  96. package/dist/types/date/LocalTimePicker/LocalTimePicker.d.ts +6 -2
  97. package/dist/types/date/LocalTimePicker/MaskedTimeInput.d.ts +11 -0
  98. package/dist/types/date/MonthDayPicker/MonthDayPicker.d.ts +6 -7
  99. package/dist/types/date/MonthYearPicker/MonthYearPicker.d.ts +11 -10
  100. package/dist/types/date/YearSelect/YearSelect.d.ts +3 -1
  101. package/dist/types/form/TForm/useTForm.d.ts +4 -4
  102. package/dist/types/index.d.ts +18 -2
  103. package/dist/types/inputs/CreditCardInput/CreditCardInput.d.ts +2 -3
  104. package/dist/types/inputs/CreditCardInput/CreditCardNumberInput.d.ts +2 -2
  105. package/dist/types/inputs/CreditCardInput/index.d.ts +2 -0
  106. package/dist/types/inputs/MaskedInput/MaskedInput.d.ts +8 -3
  107. package/dist/types/inputs/MaskedInput/useMaskedInput.d.ts +1 -2
  108. package/dist/types/inputs/PhoneInput/PhoneInput.d.ts +2 -1
  109. package/dist/types/inputs/RadioGroup/RadioGroup.d.ts +8 -0
  110. package/dist/types/inputs/RadioGroup/index.d.ts +2 -0
  111. package/dist/types/inputs/Scriptel/Scriptel.d.ts +11 -0
  112. package/dist/types/inputs/Scriptel/ScriptelContext.d.ts +9 -0
  113. package/dist/types/inputs/Scriptel/index.d.ts +4 -0
  114. package/dist/types/inputs/Scriptel/scriptel/classes.d.ts +144 -0
  115. package/dist/types/inputs/Scriptel/scriptel/enums.d.ts +16 -0
  116. package/dist/types/inputs/Scriptel/scriptel/index.d.ts +17 -0
  117. package/dist/types/inputs/Scriptel/scriptel/messages.d.ts +52 -0
  118. package/dist/types/inputs/Scriptel/withScriptel.d.ts +9 -0
  119. package/dist/types/inputs/ScriptelInput/ScriptelInput.d.ts +8 -0
  120. package/dist/types/inputs/ScriptelInput/index.d.ts +2 -0
  121. package/dist/types/inputs/SinInput/SinInput.d.ts +1 -0
  122. package/dist/types/inputs/SinInput/index.d.ts +2 -0
  123. package/dist/types/inputs/TableInput/CheckboxEditCell.d.ts +12 -0
  124. package/dist/types/inputs/TableInput/DropdownCell.d.ts +2 -2
  125. package/dist/types/inputs/TableInput/HoverCell.d.ts +2 -1
  126. package/dist/types/inputs/TableInput/LocalDateCell.d.ts +9 -0
  127. package/dist/types/inputs/TableInput/LocalDateEditCell.d.ts +4 -0
  128. package/dist/types/inputs/TableInput/MoneyCell.d.ts +1 -0
  129. package/dist/types/inputs/TableInput/MoneyEditCell.d.ts +4 -4
  130. package/dist/types/inputs/TableInput/MoneySumFooter.d.ts +1 -0
  131. package/dist/types/inputs/TableInput/StringEditCell.d.ts +3 -2
  132. package/dist/types/inputs/TableInput/TableInput.d.ts +3 -5
  133. package/dist/types/inputs/TableInput/addRowOnTab.d.ts +0 -1
  134. package/dist/types/inputs/TableInput/index.d.ts +12 -0
  135. package/dist/types/money/MoneyCurrencyInput/MoneyCurrencyInput.d.ts +4 -2
  136. package/dist/types/money/MoneyCurrencyInput/index.d.ts +2 -0
  137. package/dist/types/money/MoneyInput/MoneyInput.d.ts +5 -4
  138. package/dist/types/step/FormStep.d.ts +9 -0
  139. package/dist/types/step/Step.d.ts +9 -0
  140. package/dist/types/step/StepProvider.d.ts +10 -0
  141. package/dist/types/step/index.d.ts +4 -0
  142. package/dist/types/step/stepContext.d.ts +5 -0
  143. package/dist/types/step/useStep.d.ts +1 -0
  144. package/package.json +66 -69
  145. package/dist/esm/form/TMForm/TMForm.js +0 -55
  146. package/dist/esm/form/TMForm/TMForm.js.map +0 -1
  147. package/dist/esm/form/TMForm/errorMessages.js +0 -39
  148. package/dist/esm/form/TMForm/errorMessages.js.map +0 -1
  149. package/dist/esm/form/TMForm/graphqlErrorTypes.js +0 -6
  150. package/dist/esm/form/TMForm/graphqlErrorTypes.js.map +0 -1
  151. package/dist/types/commonTypes.d.ts +0 -1
  152. package/dist/types/date/LocalDatePicker/localdatepicker.stories.d.ts +0 -6
  153. package/dist/types/date/LocalMonthSelect/localmonthselect.stories.d.ts +0 -5
  154. package/dist/types/date/LocalTimePicker/localtimepicker.stories.d.ts +0 -5
  155. package/dist/types/date/MonthDayPicker/monthdaypicker.stories.d.ts +0 -5
  156. package/dist/types/date/MonthYearPicker/monthyearpicker.stories.d.ts +0 -6
  157. package/dist/types/date/YearSelect/yearselect.stories.d.ts +0 -7
  158. package/dist/types/form/TForm/tform.stories.d.ts +0 -19
  159. package/dist/types/form/TMForm/TMForm.d.ts +0 -8
  160. package/dist/types/form/TMForm/errorMessages.d.ts +0 -5
  161. package/dist/types/form/TMForm/graphqlErrorTypes.d.ts +0 -50
  162. package/dist/types/form/TMForm/tmform.stories.d.ts +0 -12
  163. package/dist/types/inputs/CreditCardInput/creditcardinput.stories.d.ts +0 -5
  164. package/dist/types/inputs/CreditCardInput/creditcardnumberinput.stories.d.ts +0 -5
  165. package/dist/types/inputs/MaskedInput/maskedinput.stories.d.ts +0 -6
  166. package/dist/types/inputs/PhoneInput/phoneinput.stories.d.ts +0 -5
  167. package/dist/types/inputs/RadioGroup/radiogroup.stories.d.ts +0 -5
  168. package/dist/types/inputs/SinInput/sininput.stories.d.ts +0 -5
  169. package/dist/types/inputs/TableInput/main.story.d.ts +0 -7
  170. package/dist/types/inputs/TableInput/tableinput.stories.d.ts +0 -5
  171. package/dist/types/inputs/TableInput/withHover.story.d.ts +0 -7
  172. package/dist/types/money/MoneyCurrencyInput/moneycurrencyinput.stories.d.ts +0 -5
  173. package/dist/types/money/MoneyInput/moneyinput.stories.d.ts +0 -6
  174. package/dist/types/storyDecorator.d.ts +0 -6
@@ -0,0 +1,7 @@
1
+ import styleInject from './../../external/style-inject/dist/style-inject.es.js';
2
+
3
+ var css_248z = ".rw-datetimepicker > input {\n\tborder: none !important;\n}\n\n.rw-datetimepicker .rw-calendar-grid.rw-nav-view .rw-btn {\n\tpadding: 0 !important;\n}\n\n.dateTimePickerAutoWidth {\n\twidth: auto;\n\tdisplay: inline-flex;\n}\n\n.dateTimePickerAutoWidth > input {\n\twidth: auto;\n}\n\n.react-datepicker-wrapper {\n\twidth: 100%;\n\tdisplay: inline !important;\n}\n\n.react-datepicker__input-container {\n\tdisplay: inline !important;\n}\n\n.react-datepicker-popper {\n\tz-index: 5 !important;\n}\n";
4
+ styleInject(css_248z);
5
+
6
+ export { css_248z as default };
7
+ //# sourceMappingURL=styles.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,uDAAyD;AACjF;AACA;AACA;AACA;AACA;"}
@@ -1,26 +1,149 @@
1
- import React from 'react';
2
- import { DatePicker } from '@mantine/dates';
1
+ import React, { useState, useRef, useEffect } from 'react';
3
2
  import { toDate, toLocalDate } from '@thx/date';
4
3
  import debug from 'debug';
4
+ import { Input, Icon } from 'semantic-ui-react';
5
+ import DatePicker from 'react-datepicker';
6
+ import '../DatePicker/styles.css.js';
7
+ import { MaskedDateInput } from './MaskedDateInput.js';
5
8
 
6
9
  debug("thx.controls.date.LocalDatePicker");
7
10
  function LocalDatePicker(props) {
8
- const { minDate, maxDate, value, onChange, onChangeRaw, defaultValue, initialMonth, ...rest } = props;
9
- const selected = value ? toDate(value) : null;
10
- return /* @__PURE__ */ React.createElement(DatePicker, {
11
- defaultValue: defaultValue ? toDate(defaultValue) : void 0,
12
- initialMonth: initialMonth ? toDate(initialMonth) : void 0,
13
- allowFreeInput: true,
14
- minDate: minDate ? toDate(minDate) : void 0,
15
- maxDate: maxDate ? toDate(maxDate) : void 0,
16
- value: selected,
17
- onChange: (date) => {
18
- if (onChange)
19
- onChange(date ? toLocalDate(date) : null);
20
- if (onChangeRaw)
21
- onChangeRaw(date);
22
- },
11
+ const {
12
+ minDate,
13
+ maxDate,
14
+ value,
15
+ onChange,
16
+ onBlur,
17
+ as,
18
+ action,
19
+ actionPosition,
20
+ className,
21
+ error,
22
+ fluid,
23
+ focus,
24
+ icon = true,
25
+ inverted,
26
+ label,
27
+ labelPosition,
28
+ loading,
29
+ size,
30
+ tabIndex,
31
+ transparent,
32
+ openOnFocus = false,
33
+ startFocused,
34
+ startSelected,
23
35
  ...rest
36
+ } = props;
37
+ const inputProps = {
38
+ as,
39
+ action,
40
+ actionPosition,
41
+ className: `${className || ""} icon`,
42
+ error,
43
+ focus,
44
+ fluid,
45
+ inverted,
46
+ label,
47
+ labelPosition,
48
+ loading,
49
+ size,
50
+ tabIndex,
51
+ transparent
52
+ };
53
+ const maskedInputProps = {
54
+ as,
55
+ action,
56
+ actionPosition,
57
+ className,
58
+ error,
59
+ focus,
60
+ inverted,
61
+ label,
62
+ labelPosition,
63
+ loading,
64
+ size,
65
+ tabIndex,
66
+ transparent
67
+ };
68
+ const iconProps = {
69
+ className,
70
+ inverted,
71
+ loading,
72
+ size,
73
+ transparent
74
+ };
75
+ const [isOpen, setIsOpen] = useState(false);
76
+ const [selected, setSelected] = useState();
77
+ const ref = useRef(null);
78
+ useEffect(() => {
79
+ setSelected(value ? toDate(value) : null);
80
+ }, [value]);
81
+ useEffect(() => {
82
+ if (startFocused) {
83
+ ref.current?.focus();
84
+ }
85
+ }, [startFocused]);
86
+ useEffect(() => {
87
+ if (startSelected) {
88
+ ref.current?.select();
89
+ }
90
+ }, [startSelected]);
91
+ const handleDateChange = (date) => {
92
+ let allowedDate = toLocalDate(date);
93
+ if (minDate?.isAfter(allowedDate)) {
94
+ allowedDate = minDate;
95
+ }
96
+ if (maxDate?.isBefore(allowedDate)) {
97
+ allowedDate = maxDate;
98
+ }
99
+ onChange && onChange(date ? allowedDate : null);
100
+ setSelected(toDate(allowedDate));
101
+ setIsOpen(false);
102
+ };
103
+ const handleInputChange = (e) => {
104
+ const inputValue = e.target.value;
105
+ const date = inputValue ? toDate(inputValue) : null;
106
+ date && handleDateChange(date);
107
+ };
108
+ const handleDatePickerBlur = (e) => {
109
+ setIsOpen(false);
110
+ onBlur && onBlur(e);
111
+ handleInputChange(e);
112
+ };
113
+ const toggleDatePicker = () => {
114
+ setIsOpen(!isOpen);
115
+ };
116
+ const handleOnKeyDown = (e) => {
117
+ e?.key === "Enter" && toggleDatePicker();
118
+ e?.key === "Escape" && setIsOpen(false);
119
+ };
120
+ return /* @__PURE__ */ React.createElement(DatePicker, {
121
+ ...rest,
122
+ selected,
123
+ onChange: handleDateChange,
124
+ customInput: /* @__PURE__ */ React.createElement(Input, {
125
+ ...inputProps
126
+ }, /* @__PURE__ */ React.createElement(MaskedDateInput, {
127
+ ...maskedInputProps,
128
+ onBlur: handleDatePickerBlur,
129
+ value: selected,
130
+ onClick: ({ target }) => openOnFocus ? setIsOpen(!isOpen) : target.select(),
131
+ onKeyDown: handleOnKeyDown,
132
+ ref
133
+ }), icon && /* @__PURE__ */ React.createElement(Icon, {
134
+ ...iconProps,
135
+ onClick: toggleDatePicker,
136
+ tabIndex: -1,
137
+ name: "calendar alternate",
138
+ link: true
139
+ })),
140
+ minDate: minDate ? toDate(minDate) : null,
141
+ maxDate: maxDate ? toDate(maxDate) : null,
142
+ open: isOpen,
143
+ enableTabLoop: openOnFocus,
144
+ preventOpenOnFocus: openOnFocus,
145
+ onBlur: handleDatePickerBlur,
146
+ onClickOutside: () => setIsOpen(false)
24
147
  });
25
148
  }
26
149
 
@@ -1 +1 @@
1
- {"version":3,"file":"LocalDatePicker.js","sources":["../../../../src/date/LocalDatePicker/LocalDatePicker.tsx"],"sourcesContent":["import type {LocalDate} from '@js-joda/core';\nimport {DatePicker} from '@mantine/dates';\nimport type {DatePickerProps} from '@mantine/dates';\nimport {toDate, toLocalDate} from '@thx/date';\nimport debug from 'debug';\n\nconst d = debug('thx.controls.date.LocalDatePicker');\n\ninterface ILocalDatePicker {\n\tdefaultValue?: LocalDate | number | null;\n\tinitialMonth?: LocalDate | number | null;\n\tvalue?: LocalDate | number | null;\n\tonChange?: (value: LocalDate | null) => void;\n\tonChangeRaw?: (value: Date | null) => void;\n\tminDate?: LocalDate;\n\tmaxDate?: LocalDate;\n}\n\nexport type LocalDatePickerProps = ILocalDatePicker &\n\tOmit<DatePickerProps, 'onChange' | 'value' | 'defaultValue' | 'initialMonth' | 'minDate' | 'maxDate'>;\n\nexport function LocalDatePicker(props: LocalDatePickerProps): JSX.Element {\n\tconst {minDate, maxDate, value, onChange, onChangeRaw, defaultValue, initialMonth, ...rest} = props;\n\n\tconst selected = value ? toDate(value) : null;\n\n\treturn (\n\t\t<DatePicker\n\t\t\tdefaultValue={defaultValue ? toDate(defaultValue) : undefined}\n\t\t\tinitialMonth={initialMonth ? toDate(initialMonth) : undefined}\n\t\t\tallowFreeInput\n\t\t\tminDate={minDate ? toDate(minDate) : undefined}\n\t\t\tmaxDate={maxDate ? toDate(maxDate) : undefined}\n\t\t\tvalue={selected}\n\t\t\tonChange={date => {\n\t\t\t\tif (onChange) onChange(date ? toLocalDate(date) : null);\n\t\t\t\tif (onChangeRaw) onChangeRaw(date);\n\t\t\t}}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n"],"names":[],"mappings":";;;;;AAMU,MAAM,mCAAmC,EAAA;AAe5C,SAAA,eAAA,CAAyB,KAA0C,EAAA;AACzE,EAAM,MAAA,EAAC,SAAS,OAAS,EAAA,KAAA,EAAO,UAAU,WAAa,EAAA,YAAA,EAAc,iBAAiB,IAAQ,EAAA,GAAA,KAAA,CAAA;AAE9F,EAAA,MAAM,QAAW,GAAA,KAAA,GAAQ,MAAO,CAAA,KAAK,CAAI,GAAA,IAAA,CAAA;AAEzC,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,IACA,YAAc,EAAA,YAAA,GAAe,MAAO,CAAA,YAAY,CAAI,GAAA,KAAA,CAAA;AAAA,IACpD,YAAc,EAAA,YAAA,GAAe,MAAO,CAAA,YAAY,CAAI,GAAA,KAAA,CAAA;AAAA,IACpD,cAAc,EAAA,IAAA;AAAA,IACd,OAAS,EAAA,OAAA,GAAU,MAAO,CAAA,OAAO,CAAI,GAAA,KAAA,CAAA;AAAA,IACrC,OAAS,EAAA,OAAA,GAAU,MAAO,CAAA,OAAO,CAAI,GAAA,KAAA,CAAA;AAAA,IACrC,KAAO,EAAA,QAAA;AAAA,IACP,UAAU,CAAQ,IAAA,KAAA;AACjB,MAAI,IAAA,QAAA;AAAU,QAAA,QAAA,CAAS,IAAO,GAAA,WAAA,CAAY,IAAI,CAAA,GAAI,IAAI,CAAA,CAAA;AACtD,MAAI,IAAA,WAAA;AAAa,QAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAAA,KAClC;AAAA,IACI,GAAA,IAAA;AAAA,GACL,CAAA,CAAA;AAEF;;;;"}
1
+ {"version":3,"file":"LocalDatePicker.js","sources":["../../../../src/date/LocalDatePicker/LocalDatePicker.tsx"],"sourcesContent":["import type {LocalDate} from '@js-joda/core';\nimport {toDate, toLocalDate} from '@thx/date';\nimport debug from 'debug';\nimport {useEffect, useRef, useState} from 'react';\nimport type {ReactDatePickerProps} from 'react-datepicker';\nimport {Icon, Input, InputProps} from 'semantic-ui-react';\nimport {DatePicker} from '../DatePicker/index';\nimport '../DatePicker/styles.css';\nimport {MaskedDateInput, MaskedDateInputRef} from './MaskedDateInput';\n\nconst d = debug('thx.controls.date.LocalDatePicker');\n\ninterface ILocalDatePicker {\n\tvalue?: LocalDate | number | null;\n\tonChange?: (value: LocalDate | null) => void;\n\tonChangeRaw?: () => void;\n\tminDate?: LocalDate;\n\tmaxDate?: LocalDate;\n\ticon?: boolean;\n\topenOnFocus?: boolean;\n\tstartFocused?: boolean;\n\tstartSelected?: boolean;\n}\n\ntype InputPropsOmitted = Omit<InputProps, 'onChange'>;\ntype ReactDatePickerPropsOmitted = Omit<Omit<ReactDatePickerProps, 'value'>, 'onChange' | 'minDate' | 'maxDate' | 'icon'>;\nexport type LocalDatePickerProps = ILocalDatePicker & InputPropsOmitted & ReactDatePickerPropsOmitted;\n\nexport function LocalDatePicker(props: LocalDatePickerProps): JSX.Element {\n\tconst {\n\t\tminDate,\n\t\tmaxDate,\n\t\tvalue,\n\t\tonChange,\n\t\tonBlur,\n\t\tas,\n\t\taction,\n\t\tactionPosition,\n\t\tclassName,\n\t\terror,\n\t\tfluid,\n\t\tfocus,\n\t\ticon = true,\n\t\tinverted,\n\t\tlabel,\n\t\tlabelPosition,\n\t\tloading,\n\t\tsize,\n\t\ttabIndex,\n\t\ttransparent,\n\t\topenOnFocus = false,\n\t\tstartFocused,\n\t\tstartSelected,\n\t\t...rest\n\t} = props;\n\n\tconst inputProps = {\n\t\tas,\n\t\taction,\n\t\tactionPosition,\n\t\tclassName: `${className || ''} icon`,\n\t\terror,\n\t\tfocus,\n\t\tfluid,\n\t\tinverted,\n\t\tlabel,\n\t\tlabelPosition,\n\t\tloading,\n\t\tsize,\n\t\ttabIndex,\n\t\ttransparent,\n\t};\n\n\tconst maskedInputProps = {\n\t\tas,\n\t\taction,\n\t\tactionPosition,\n\t\tclassName,\n\t\terror,\n\t\tfocus,\n\t\tinverted,\n\t\tlabel,\n\t\tlabelPosition,\n\t\tloading,\n\t\tsize,\n\t\ttabIndex,\n\t\ttransparent,\n\t};\n\n\tconst iconProps = {\n\t\tclassName,\n\t\tinverted,\n\t\tloading,\n\t\tsize,\n\t\ttransparent,\n\t};\n\n\tconst [isOpen, setIsOpen] = useState(false);\n\tconst [selected, setSelected] = useState<Date | null>();\n\tconst ref = useRef<MaskedDateInputRef>(null);\n\n\tuseEffect(() => {\n\t\tsetSelected(value ? toDate(value) : null);\n\t}, [value]);\n\n\tuseEffect(() => {\n\t\tif (startFocused) {\n\t\t\tref.current?.focus();\n\t\t}\n\t}, [startFocused]);\n\n\tuseEffect(() => {\n\t\tif (startSelected) {\n\t\t\tref.current?.select();\n\t\t}\n\t}, [startSelected]);\n\n\tconst handleDateChange = (date: Date) => {\n\t\tlet allowedDate = toLocalDate(date);\n\n\t\tif (minDate?.isAfter(allowedDate)) {\n\t\t\tallowedDate = minDate;\n\t\t}\n\t\tif (maxDate?.isBefore(allowedDate)) {\n\t\t\tallowedDate = maxDate;\n\t\t}\n\t\tonChange && onChange(date ? allowedDate : null);\n\t\tsetSelected(toDate(allowedDate));\n\t\tsetIsOpen(false);\n\t};\n\n\tconst handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\tconst inputValue = e.target.value;\n\t\tconst date = inputValue ? toDate(inputValue) : null;\n\n\t\tdate && handleDateChange(date);\n\t};\n\n\tconst handleDatePickerBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n\t\tsetIsOpen(false);\n\t\tonBlur && onBlur(e);\n\t\thandleInputChange(e);\n\t};\n\n\tconst toggleDatePicker = () => {\n\t\tsetIsOpen(!isOpen);\n\t};\n\n\tconst handleOnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n\t\t// toggle on enter\n\t\te?.key === 'Enter' && toggleDatePicker();\n\t\t// hide on escape\n\t\te?.key === 'Escape' && setIsOpen(false);\n\t};\n\n\treturn (\n\t\t<DatePicker\n\t\t\t{...rest}\n\t\t\tselected={selected}\n\t\t\tonChange={handleDateChange}\n\t\t\tcustomInput={\n\t\t\t\t<Input {...inputProps}>\n\t\t\t\t\t<MaskedDateInput\n\t\t\t\t\t\t{...maskedInputProps}\n\t\t\t\t\t\tonBlur={handleDatePickerBlur}\n\t\t\t\t\t\tvalue={selected}\n\t\t\t\t\t\tonClick={({target}: {target: HTMLInputElement}) => (openOnFocus ? setIsOpen(!isOpen) : target.select())}\n\t\t\t\t\t\tonKeyDown={handleOnKeyDown}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t/>\n\t\t\t\t\t{icon && <Icon {...iconProps} onClick={toggleDatePicker} tabIndex={-1} name=\"calendar alternate\" link />}\n\t\t\t\t</Input>\n\t\t\t}\n\t\t\tminDate={minDate ? toDate(minDate) : null}\n\t\t\tmaxDate={maxDate ? toDate(maxDate) : null}\n\t\t\topen={isOpen}\n\t\t\tenableTabLoop={openOnFocus}\n\t\t\tpreventOpenOnFocus={openOnFocus}\n\t\t\tonBlur={handleDatePickerBlur}\n\t\t\tonClickOutside={() => setIsOpen(false)}\n\t\t/>\n\t);\n}\n"],"names":[],"mappings":"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"}
@@ -0,0 +1,22 @@
1
+ import React, { forwardRef } from 'react';
2
+ import debug from 'debug';
3
+ import { MaskedInput } from '../../inputs/MaskedInput/MaskedInput.js';
4
+ import '../../inputs/MaskedInput/useMaskedInput.js';
5
+
6
+ debug("thx.controls.date.LocalDatePicker.MaskedDateInput");
7
+ const MaskedDateInput = forwardRef((props, ref) => {
8
+ const { onChange, name, ...rest } = props;
9
+ return /* @__PURE__ */ React.createElement(MaskedInput, {
10
+ ...rest,
11
+ ref,
12
+ name,
13
+ mask: { alias: "datetime", inputFormat: "mm/dd/yyyy" },
14
+ onChange: (value) => {
15
+ if (onChange)
16
+ onChange({ target: { value: value || "" } });
17
+ }
18
+ });
19
+ });
20
+
21
+ export { MaskedDateInput };
22
+ //# sourceMappingURL=MaskedDateInput.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MaskedDateInput.js","sources":["../../../../src/date/LocalDatePicker/MaskedDateInput.tsx"],"sourcesContent":["import debug from 'debug';\nimport {forwardRef} from 'react';\nimport {MaskedInput, MaskedInputProps} from '../../inputs/MaskedInput';\nimport type {MaskedInputRef} from '../../inputs/MaskedInput/MaskedInput';\n\nconst d = debug('thx.controls.date.LocalDatePicker.MaskedDateInput');\n\nexport type MaskedDateInputRef = MaskedInputRef;\n\nexport interface MaskedDateInputValue {\n\ttarget: {\n\t\tvalue: string;\n\t};\n}\n\nexport interface MaskedDateInputProps {\n\tname?: string;\n\tonChange?: (value: MaskedDateInputValue) => void;\n}\n\nexport const MaskedDateInput = forwardRef<MaskedDateInputRef, MaskedDateInputProps & Omit<MaskedInputProps, 'onChange'>>((props, ref) => {\n\tconst {onChange, name, ...rest} = props;\n\n\treturn (\n\t\t<MaskedInput\n\t\t\t{...rest}\n\t\t\tref={ref}\n\t\t\tname={name}\n\t\t\tmask={{alias: 'datetime', inputFormat: 'mm/dd/yyyy'}}\n\t\t\tonChange={(value: string) => {\n\t\t\t\tif (onChange) onChange({target: {value: value || ''}});\n\t\t\t}}\n\t\t/>\n\t);\n});\n"],"names":[],"mappings":";;;;;AAKU,MAAM,mDAAmD,EAAA;AAe5D,MAAM,eAAkB,GAAA,UAAA,CAA0F,CAAC,KAAA,EAAO,GAAQ,KAAA;AACxI,EAAM,MAAA,EAAC,QAAU,EAAA,IAAA,EAAA,GAAS,IAAQ,EAAA,GAAA,KAAA,CAAA;AAElC,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAA,IACI,GAAA,IAAA;AAAA,IACJ,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAM,EAAA,EAAC,KAAO,EAAA,UAAA,EAAY,aAAa,YAAY,EAAA;AAAA,IACnD,QAAA,EAAU,CAAC,KAAkB,KAAA;AAC5B,MAAI,IAAA,QAAA;AAAU,QAAA,QAAA,CAAS,EAAC,MAAQ,EAAA,EAAC,OAAO,KAAS,IAAA,EAAA,IAAI,CAAA,CAAA;AAAA,KACtD;AAAA,GACD,CAAA,CAAA;AAEF,CAAC;;;;"}
@@ -1,36 +1,40 @@
1
1
  import React from 'react';
2
2
  import { LocalDate } from '@js-joda/core';
3
- import { Select } from '@mantine/core';
4
3
  import debug from 'debug';
4
+ import { Select } from 'semantic-ui-react';
5
5
 
6
6
  debug("thx.controls.date.LocalMonthSelect");
7
7
  const monthOptions = [
8
- { label: "January", value: "1" },
9
- { label: "February", value: "2" },
10
- { label: "March", value: "3" },
11
- { label: "April", value: "4" },
12
- { label: "May", value: "5" },
13
- { label: "June", value: "6" },
14
- { label: "July", value: "7" },
15
- { label: "August", value: "8" },
16
- { label: "September", value: "9" },
17
- { label: "October", value: "10" },
18
- { label: "November", value: "11" },
19
- { label: "December", value: "12" }
8
+ { text: "January", value: 1, key: 1 },
9
+ { text: "February", value: 2, key: 2 },
10
+ { text: "March", value: 3, key: 3 },
11
+ { text: "April", value: 4, key: 4 },
12
+ { text: "May", value: 5, key: 5 },
13
+ { text: "June", value: 6, key: 6 },
14
+ { text: "July", value: 7, key: 7 },
15
+ { text: "August", value: 8, key: 8 },
16
+ { text: "September", value: 9, key: 9 },
17
+ { text: "October", value: 10, key: 10 },
18
+ { text: "November", value: 11, key: 11 },
19
+ { text: "December", value: 12, key: 12 }
20
20
  ];
21
21
  function LocalMonthSelect(props) {
22
- const { value, onChange, year, ...rest } = props;
22
+ const { value, onChange, year, handleBlur, ...rest } = props;
23
23
  const theYear = year || LocalDate.now().year();
24
24
  return /* @__PURE__ */ React.createElement(Select, {
25
- data: monthOptions,
26
- value: value ? `${value.monthValue()}` : null,
27
- onChange: (v) => {
25
+ placeholder: "Select Month",
26
+ options: monthOptions,
27
+ value: value ? value.monthValue() : "",
28
+ onChange: (ev, v) => {
28
29
  if (onChange) {
29
- if (v) {
30
- onChange(LocalDate.of(theYear, parseInt(v, 10), 1));
30
+ if (typeof v.value === "number") {
31
+ onChange(v ? LocalDate.of(theYear, v.value, 1) : null);
32
+ } else {
33
+ onChange(null);
31
34
  }
32
35
  }
33
36
  },
37
+ onBlur: handleBlur,
34
38
  ...rest
35
39
  });
36
40
  }
@@ -1 +1 @@
1
- {"version":3,"file":"LocalMonthSelect.js","sources":["../../../../src/date/LocalMonthSelect/LocalMonthSelect.tsx"],"sourcesContent":["import {LocalDate} from '@js-joda/core';\nimport {Select} from '@mantine/core';\nimport type {SelectProps} from '@mantine/core';\nimport debug from 'debug';\n\nconst d = debug('thx.controls.date.LocalMonthSelect');\n\nconst monthOptions = [\n\t{label: 'January', value: '1'},\n\t{label: 'February', value: '2'},\n\t{label: 'March', value: '3'},\n\t{label: 'April', value: '4'},\n\t{label: 'May', value: '5'},\n\t{label: 'June', value: '6'},\n\t{label: 'July', value: '7'},\n\t{label: 'August', value: '8'},\n\t{label: 'September', value: '9'},\n\t{label: 'October', value: '10'},\n\t{label: 'November', value: '11'},\n\t{label: 'December', value: '12'},\n];\n\ninterface ILocalMonthSelectProps {\n\tonChange?: (value: LocalDate | null) => void;\n\tvalue?: LocalDate | null;\n\tyear?: number;\n}\n\nexport type LocalMonthSelectProps = ILocalMonthSelectProps & Omit<SelectProps, 'options' | 'data' | 'value' | 'onChange'>;\n\nexport function LocalMonthSelect(props: LocalMonthSelectProps): JSX.Element {\n\tconst {value, onChange, year, ...rest} = props;\n\n\tconst theYear = year || LocalDate.now().year();\n\n\treturn (\n\t\t<Select\n\t\t\tdata={monthOptions}\n\t\t\tvalue={value ? `${value.monthValue()}` : null}\n\t\t\tonChange={v => {\n\t\t\t\tif (onChange) {\n\t\t\t\t\tif (v) {\n\t\t\t\t\t\tonChange(LocalDate.of(theYear, parseInt(v, 10), 1));\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n"],"names":[],"mappings":";;;;;AAKU,MAAM,oCAAoC,EAAA;AAEpD,MAAM,YAAe,GAAA;AAAA,EACpB,EAAC,KAAA,EAAO,SAAW,EAAA,KAAA,EAAO,GAAG,EAAA;AAAA,EAC7B,EAAC,KAAA,EAAO,UAAY,EAAA,KAAA,EAAO,GAAG,EAAA;AAAA,EAC9B,EAAC,KAAA,EAAO,OAAS,EAAA,KAAA,EAAO,GAAG,EAAA;AAAA,EAC3B,EAAC,KAAA,EAAO,OAAS,EAAA,KAAA,EAAO,GAAG,EAAA;AAAA,EAC3B,EAAC,KAAA,EAAO,KAAO,EAAA,KAAA,EAAO,GAAG,EAAA;AAAA,EACzB,EAAC,KAAA,EAAO,MAAQ,EAAA,KAAA,EAAO,GAAG,EAAA;AAAA,EAC1B,EAAC,KAAA,EAAO,MAAQ,EAAA,KAAA,EAAO,GAAG,EAAA;AAAA,EAC1B,EAAC,KAAA,EAAO,QAAU,EAAA,KAAA,EAAO,GAAG,EAAA;AAAA,EAC5B,EAAC,KAAA,EAAO,WAAa,EAAA,KAAA,EAAO,GAAG,EAAA;AAAA,EAC/B,EAAC,KAAA,EAAO,SAAW,EAAA,KAAA,EAAO,IAAI,EAAA;AAAA,EAC9B,EAAC,KAAA,EAAO,UAAY,EAAA,KAAA,EAAO,IAAI,EAAA;AAAA,EAC/B,EAAC,KAAA,EAAO,UAAY,EAAA,KAAA,EAAO,IAAI,EAAA;AAChC,CAAA,CAAA;AAUO,SAAA,gBAAA,CAA0B,KAA2C,EAAA;AAC3E,EAAA,MAAM,EAAC,KAAA,EAAO,QAAU,EAAA,IAAA,EAAA,GAAS,IAAQ,EAAA,GAAA,KAAA,CAAA;AAEzC,EAAA,MAAM,OAAU,GAAA,IAAA,IAAQ,SAAU,CAAA,GAAA,GAAM,IAAK,EAAA,CAAA;AAE7C,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACA,IAAM,EAAA,YAAA;AAAA,IACN,KAAO,EAAA,KAAA,GAAQ,CAAG,EAAA,KAAA,CAAM,YAAiB,CAAA,CAAA,GAAA,IAAA;AAAA,IACzC,UAAU,CAAK,CAAA,KAAA;AACd,MAAA,IAAI,QAAU,EAAA;AACb,QAAA,IAAI,CAAG,EAAA;AACN,UAAS,QAAA,CAAA,SAAA,CAAU,GAAG,OAAS,EAAA,QAAA,CAAS,GAAG,EAAE,CAAA,EAAG,CAAC,CAAC,CAAA,CAAA;AAAA,SACnD;AAAA,OACD;AAAA,KACD;AAAA,IACI,GAAA,IAAA;AAAA,GACL,CAAA,CAAA;AAEF;;;;"}
1
+ {"version":3,"file":"LocalMonthSelect.js","sources":["../../../../src/date/LocalMonthSelect/LocalMonthSelect.tsx"],"sourcesContent":["import {LocalDate} from '@js-joda/core';\nimport debug from 'debug';\nimport {Select, SelectProps} from 'semantic-ui-react';\n\nconst d = debug('thx.controls.date.LocalMonthSelect');\n\nconst monthOptions = [\n\t{text: 'January', value: 1, key: 1},\n\t{text: 'February', value: 2, key: 2},\n\t{text: 'March', value: 3, key: 3},\n\t{text: 'April', value: 4, key: 4},\n\t{text: 'May', value: 5, key: 5},\n\t{text: 'June', value: 6, key: 6},\n\t{text: 'July', value: 7, key: 7},\n\t{text: 'August', value: 8, key: 8},\n\t{text: 'September', value: 9, key: 9},\n\t{text: 'October', value: 10, key: 10},\n\t{text: 'November', value: 11, key: 11},\n\t{text: 'December', value: 12, key: 12},\n];\n\ninterface ILocalMonthSelectProps {\n\tonChange?: (value: LocalDate | null) => void;\n\tvalue?: LocalDate | null;\n\tyear?: number;\n\thandleBlur?: (event: any) => void;\n}\n\nexport type LocalMonthSelectProps = ILocalMonthSelectProps & Omit<SelectProps, 'options'>;\n\nexport function LocalMonthSelect(props: LocalMonthSelectProps): JSX.Element {\n\tconst {value, onChange, year, handleBlur, ...rest} = props;\n\n\tconst theYear = year || LocalDate.now().year();\n\n\treturn (\n\t\t<Select\n\t\t\tplaceholder=\"Select Month\"\n\t\t\toptions={monthOptions}\n\t\t\tvalue={value ? value.monthValue() : ''}\n\t\t\tonChange={(ev, v) => {\n\t\t\t\tif (onChange) {\n\t\t\t\t\tif (typeof v.value === 'number') {\n\t\t\t\t\t\tonChange(v ? LocalDate.of(theYear, v.value, 1) : null);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tonChange(null);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}}\n\t\t\tonBlur={handleBlur}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n"],"names":[],"mappings":";;;;;AAIU,MAAM,oCAAoC,EAAA;AAEpD,MAAM,YAAe,GAAA;AAAA,EACpB,EAAC,IAAM,EAAA,SAAA,EAAW,KAAO,EAAA,CAAA,EAAG,KAAK,CAAC,EAAA;AAAA,EAClC,EAAC,IAAM,EAAA,UAAA,EAAY,KAAO,EAAA,CAAA,EAAG,KAAK,CAAC,EAAA;AAAA,EACnC,EAAC,IAAM,EAAA,OAAA,EAAS,KAAO,EAAA,CAAA,EAAG,KAAK,CAAC,EAAA;AAAA,EAChC,EAAC,IAAM,EAAA,OAAA,EAAS,KAAO,EAAA,CAAA,EAAG,KAAK,CAAC,EAAA;AAAA,EAChC,EAAC,IAAM,EAAA,KAAA,EAAO,KAAO,EAAA,CAAA,EAAG,KAAK,CAAC,EAAA;AAAA,EAC9B,EAAC,IAAM,EAAA,MAAA,EAAQ,KAAO,EAAA,CAAA,EAAG,KAAK,CAAC,EAAA;AAAA,EAC/B,EAAC,IAAM,EAAA,MAAA,EAAQ,KAAO,EAAA,CAAA,EAAG,KAAK,CAAC,EAAA;AAAA,EAC/B,EAAC,IAAM,EAAA,QAAA,EAAU,KAAO,EAAA,CAAA,EAAG,KAAK,CAAC,EAAA;AAAA,EACjC,EAAC,IAAM,EAAA,WAAA,EAAa,KAAO,EAAA,CAAA,EAAG,KAAK,CAAC,EAAA;AAAA,EACpC,EAAC,IAAM,EAAA,SAAA,EAAW,KAAO,EAAA,EAAA,EAAI,KAAK,EAAE,EAAA;AAAA,EACpC,EAAC,IAAM,EAAA,UAAA,EAAY,KAAO,EAAA,EAAA,EAAI,KAAK,EAAE,EAAA;AAAA,EACrC,EAAC,IAAM,EAAA,UAAA,EAAY,KAAO,EAAA,EAAA,EAAI,KAAK,EAAE,EAAA;AACtC,CAAA,CAAA;AAWO,SAAA,gBAAA,CAA0B,KAA2C,EAAA;AAC3E,EAAA,MAAM,EAAC,KAAA,EAAO,QAAU,EAAA,IAAA,EAAM,eAAe,IAAQ,EAAA,GAAA,KAAA,CAAA;AAErD,EAAA,MAAM,OAAU,GAAA,IAAA,IAAQ,SAAU,CAAA,GAAA,GAAM,IAAK,EAAA,CAAA;AAE7C,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACA,WAAY,EAAA,cAAA;AAAA,IACZ,OAAS,EAAA,YAAA;AAAA,IACT,KAAO,EAAA,KAAA,GAAQ,KAAM,CAAA,UAAA,EAAe,GAAA,EAAA;AAAA,IACpC,QAAA,EAAU,CAAC,EAAA,EAAI,CAAM,KAAA;AACpB,MAAA,IAAI,QAAU,EAAA;AACb,QAAI,IAAA,OAAO,CAAE,CAAA,KAAA,KAAU,QAAU,EAAA;AAChC,UAAS,QAAA,CAAA,CAAA,GAAI,UAAU,EAAG,CAAA,OAAA,EAAS,EAAE,KAAO,EAAA,CAAC,IAAI,IAAI,CAAA,CAAA;AAAA,SAC/C,MAAA;AACN,UAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AAAA,SACd;AAAA,OACD;AAAA,KACD;AAAA,IACA,MAAQ,EAAA,UAAA;AAAA,IACJ,GAAA,IAAA;AAAA,GACL,CAAA,CAAA;AAEF;;;;"}
@@ -1,25 +1,74 @@
1
1
  import React from 'react';
2
2
  import { LocalTime } from '@js-joda/core';
3
- import { TimeInput } from '@mantine/dates';
4
3
  import { toDate, toLocalTime } from '@thx/date';
5
4
  import debug from 'debug';
5
+ import DatePicker from 'react-datepicker';
6
+ import '../DatePicker/styles.css.js';
7
+ import { MaskedTimeInput } from './MaskedTimeInput.js';
6
8
 
7
9
  debug("thx.controls.date.LocalTimePicker");
8
10
  function LocalTimePicker(props) {
9
- const { value, onChange, ...rest } = props;
11
+ const {
12
+ value,
13
+ onChange,
14
+ as,
15
+ action,
16
+ actionPosition,
17
+ className,
18
+ disabled,
19
+ error,
20
+ fluid,
21
+ focus,
22
+ icon,
23
+ iconPosition,
24
+ inverted,
25
+ label,
26
+ labelPosition,
27
+ loading,
28
+ size,
29
+ tabIndex,
30
+ transparent,
31
+ ...rest
32
+ } = props;
10
33
  let selected;
11
34
  if (typeof value === "number")
12
35
  selected = toDate(LocalTime.ofSecondOfDay(value));
13
36
  else
14
37
  selected = value ? toDate(value) : null;
15
- return /* @__PURE__ */ React.createElement(TimeInput, {
16
- value: selected,
38
+ const inputProps = {
39
+ as,
40
+ action,
41
+ actionPosition,
42
+ className,
43
+ disabled,
44
+ error,
45
+ fluid,
46
+ focus,
47
+ icon,
48
+ iconPosition,
49
+ inverted,
50
+ label,
51
+ labelPosition,
52
+ loading,
53
+ size,
54
+ tabIndex,
55
+ transparent
56
+ };
57
+ return /* @__PURE__ */ React.createElement(DatePicker, {
58
+ ...rest,
59
+ selected,
17
60
  onChange: (date) => {
18
61
  if (onChange)
19
62
  onChange(date ? toLocalTime(date) : null);
20
63
  },
21
- format: "12",
22
- ...rest
64
+ showTimeSelect: true,
65
+ showTimeSelectOnly: true,
66
+ timeIntervals: 15,
67
+ timeCaption: "Time",
68
+ dateFormat: "hh:mm aa",
69
+ customInput: /* @__PURE__ */ React.createElement(MaskedTimeInput, {
70
+ ...inputProps
71
+ })
23
72
  });
24
73
  }
25
74
 
@@ -1 +1 @@
1
- {"version":3,"file":"LocalTimePicker.js","sources":["../../../../src/date/LocalTimePicker/LocalTimePicker.tsx"],"sourcesContent":["import {LocalTime} from '@js-joda/core';\nimport {TimeInput} from '@mantine/dates';\nimport type {TimeInputProps} from '@mantine/dates';\nimport {toDate, toLocalTime} from '@thx/date';\nimport debug from 'debug';\n\nconst d = debug('thx.controls.date.LocalTimePicker');\n\ninterface ILocalTimePicker {\n\tvalue?: LocalTime | number | null;\n\tonChange?: (value: LocalTime | null) => void;\n}\n\nexport type LocalTimePickerProps = ILocalTimePicker & Omit<TimeInputProps, 'onChange' | 'value'>;\n\nexport function LocalTimePicker(props: LocalTimePickerProps): JSX.Element {\n\tconst {value, onChange, ...rest} = props;\n\n\tlet selected: Date | null;\n\tif (typeof value === 'number') selected = toDate(LocalTime.ofSecondOfDay(value));\n\telse selected = value ? toDate(value) : null;\n\n\treturn (\n\t\t<TimeInput\n\t\t\tvalue={selected}\n\t\t\tonChange={date => {\n\t\t\t\tif (onChange) onChange(date ? toLocalTime(date) : null);\n\t\t\t}}\n\t\t\tformat=\"12\"\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n"],"names":[],"mappings":";;;;;;AAMU,MAAM,mCAAmC,EAAA;AAS5C,SAAA,eAAA,CAAyB,KAA0C,EAAA;AACzE,EAAM,MAAA,EAAC,KAAO,EAAA,QAAA,EAAA,GAAa,IAAQ,EAAA,GAAA,KAAA,CAAA;AAEnC,EAAI,IAAA,QAAA,CAAA;AACJ,EAAA,IAAI,OAAO,KAAU,KAAA,QAAA;AAAU,IAAA,QAAA,GAAW,MAAO,CAAA,SAAA,CAAU,aAAc,CAAA,KAAK,CAAC,CAAA,CAAA;AAAA;AAC1E,IAAW,QAAA,GAAA,KAAA,GAAQ,MAAO,CAAA,KAAK,CAAI,GAAA,IAAA,CAAA;AAExC,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IACA,KAAO,EAAA,QAAA;AAAA,IACP,UAAU,CAAQ,IAAA,KAAA;AACjB,MAAI,IAAA,QAAA;AAAU,QAAA,QAAA,CAAS,IAAO,GAAA,WAAA,CAAY,IAAI,CAAA,GAAI,IAAI,CAAA,CAAA;AAAA,KACvD;AAAA,IACA,MAAO,EAAA,IAAA;AAAA,IACH,GAAA,IAAA;AAAA,GACL,CAAA,CAAA;AAEF;;;;"}
1
+ {"version":3,"file":"LocalTimePicker.js","sources":["../../../../src/date/LocalTimePicker/LocalTimePicker.tsx"],"sourcesContent":["import {LocalTime} from '@js-joda/core';\nimport {toDate, toLocalTime} from '@thx/date';\nimport debug from 'debug';\nimport type {ReactDatePickerProps} from 'react-datepicker';\nimport type {InputProps} from 'semantic-ui-react';\nimport {DatePicker} from '../DatePicker/index';\nimport {MaskedTimeInput} from './MaskedTimeInput';\n\nconst d = debug('thx.controls.date.LocalTimePicker');\n\ninterface ILocalTimePicker {\n\tvalue?: LocalTime | number | null;\n\tonChange?: (value: LocalTime | null) => void;\n\tonChangeRaw?: () => void;\n}\n\ntype InputPropsOmitted = Omit<InputProps, 'onChange'>;\ntype ReactDatePickerPropsOmitted = Omit<Omit<ReactDatePickerProps, 'value'>, 'onChange'>;\nexport type LocalTimePickerProps = ILocalTimePicker & InputPropsOmitted & ReactDatePickerPropsOmitted;\n\nexport function LocalTimePicker(props: LocalTimePickerProps): JSX.Element {\n\tconst {\n\t\tvalue,\n\t\tonChange,\n\t\tas,\n\t\taction,\n\t\tactionPosition,\n\t\tclassName,\n\t\tdisabled,\n\t\terror,\n\t\tfluid,\n\t\tfocus,\n\t\ticon,\n\t\ticonPosition,\n\t\tinverted,\n\t\tlabel,\n\t\tlabelPosition,\n\t\tloading,\n\t\tsize,\n\t\ttabIndex,\n\t\ttransparent,\n\t\t...rest\n\t} = props;\n\n\tlet selected;\n\tif (typeof value === 'number') selected = toDate(LocalTime.ofSecondOfDay(value));\n\telse selected = value ? toDate(value) : null;\n\n\tconst inputProps = {\n\t\tas,\n\t\taction,\n\t\tactionPosition,\n\t\tclassName,\n\t\tdisabled,\n\t\terror,\n\t\tfluid,\n\t\tfocus,\n\t\ticon,\n\t\ticonPosition,\n\t\tinverted,\n\t\tlabel,\n\t\tlabelPosition,\n\t\tloading,\n\t\tsize,\n\t\ttabIndex,\n\t\ttransparent,\n\t};\n\n\treturn (\n\t\t<DatePicker\n\t\t\t{...rest}\n\t\t\tselected={selected}\n\t\t\tonChange={date => {\n\t\t\t\tif (onChange) onChange(date ? toLocalTime(date) : null);\n\t\t\t}}\n\t\t\tshowTimeSelect\n\t\t\tshowTimeSelectOnly\n\t\t\ttimeIntervals={15}\n\t\t\ttimeCaption=\"Time\"\n\t\t\tdateFormat=\"hh:mm aa\"\n\t\t\tcustomInput={<MaskedTimeInput {...inputProps} />}\n\t\t/>\n\t);\n}\n"],"names":[],"mappings":";;;;;;;;AAQU,MAAM,mCAAmC,EAAA;AAY5C,SAAA,eAAA,CAAyB,KAA0C,EAAA;AACzE,EAAM,MAAA;AAAA,IACL,KAAA;AAAA,IACA,QAAA;AAAA,IACA,EAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACA,GAAA,KAAA,CAAA;AAEJ,EAAI,IAAA,QAAA,CAAA;AACJ,EAAA,IAAI,OAAO,KAAU,KAAA,QAAA;AAAU,IAAA,QAAA,GAAW,MAAO,CAAA,SAAA,CAAU,aAAc,CAAA,KAAK,CAAC,CAAA,CAAA;AAAA;AAC1E,IAAW,QAAA,GAAA,KAAA,GAAQ,MAAO,CAAA,KAAK,CAAI,GAAA,IAAA,CAAA;AAExC,EAAA,MAAM,UAAa,GAAA;AAAA,IAClB,EAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,GACD,CAAA;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,IACI,GAAA,IAAA;AAAA,IACJ,QAAA;AAAA,IACA,UAAU,CAAQ,IAAA,KAAA;AACjB,MAAI,IAAA,QAAA;AAAU,QAAA,QAAA,CAAS,IAAO,GAAA,WAAA,CAAY,IAAI,CAAA,GAAI,IAAI,CAAA,CAAA;AAAA,KACvD;AAAA,IACA,cAAc,EAAA,IAAA;AAAA,IACd,kBAAkB,EAAA,IAAA;AAAA,IAClB,aAAe,EAAA,EAAA;AAAA,IACf,WAAY,EAAA,MAAA;AAAA,IACZ,UAAW,EAAA,UAAA;AAAA,IACX,6BAAc,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,MAAoB,GAAA,UAAA;AAAA,KAAY,CAAA;AAAA,GAC/C,CAAA,CAAA;AAEF;;;;"}
@@ -0,0 +1,21 @@
1
+ import React, { forwardRef } from 'react';
2
+ import debug from 'debug';
3
+ import { MaskedInput } from '../../inputs/MaskedInput/MaskedInput.js';
4
+ import '../../inputs/MaskedInput/useMaskedInput.js';
5
+
6
+ debug("thx.controls.date.LocalTimePicker.MaskedTimeInput");
7
+ function MaskedTimeInputInner(props, ref) {
8
+ const { onChange, ...rest } = props;
9
+ return /* @__PURE__ */ React.createElement(MaskedInput, {
10
+ mask: { alias: "datetime", inputFormat: "hh:MM TT" },
11
+ onChange: (value) => {
12
+ if (onChange)
13
+ onChange({ target: { value: value || "" } });
14
+ },
15
+ ...rest
16
+ });
17
+ }
18
+ const MaskedTimeInput = forwardRef(MaskedTimeInputInner);
19
+
20
+ export { MaskedTimeInput };
21
+ //# sourceMappingURL=MaskedTimeInput.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MaskedTimeInput.js","sources":["../../../../src/date/LocalTimePicker/MaskedTimeInput.tsx"],"sourcesContent":["import debug from 'debug';\nimport {forwardRef} from 'react';\nimport {MaskedInput, MaskedInputProps} from '../../inputs/MaskedInput';\n\nconst d = debug('thx.controls.date.LocalTimePicker.MaskedTimeInput');\n\nexport interface MaskedTimeInputValue {\n\ttarget: {\n\t\tvalue: string;\n\t};\n}\n\nexport interface MaskedTimeInputProps {\n\tonChange?: (value: MaskedTimeInputValue) => void;\n}\n\n// eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars\nfunction MaskedTimeInputInner(props: MaskedTimeInputProps & Omit<MaskedInputProps, 'onChange'>, ref: any) {\n\tconst {onChange, ...rest} = props;\n\n\treturn (\n\t\t<MaskedInput\n\t\t\tmask={{alias: 'datetime', inputFormat: 'hh:MM TT'}}\n\t\t\tonChange={(value: string) => {\n\t\t\t\tif (onChange) onChange({target: {value: value || ''}});\n\t\t\t}}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n\nexport const MaskedTimeInput = forwardRef(MaskedTimeInputInner);\n"],"names":[],"mappings":";;;;;AAIU,MAAM,mDAAmD,EAAA;AAanE,SAAA,oBAAA,CAA8B,OAAkE,GAAU,EAAA;AACzG,EAAM,MAAA,EAAC,aAAa,IAAQ,EAAA,GAAA,KAAA,CAAA;AAE5B,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAA,IACA,IAAM,EAAA,EAAC,KAAO,EAAA,UAAA,EAAY,aAAa,UAAU,EAAA;AAAA,IACjD,QAAA,EAAU,CAAC,KAAkB,KAAA;AAC5B,MAAI,IAAA,QAAA;AAAU,QAAA,QAAA,CAAS,EAAC,MAAQ,EAAA,EAAC,OAAO,KAAS,IAAA,EAAA,IAAI,CAAA,CAAA;AAAA,KACtD;AAAA,IACI,GAAA,IAAA;AAAA,GACL,CAAA,CAAA;AAEF,CAAA;AAEa,MAAA,eAAA,GAAkB,WAAW,oBAAoB;;;;"}
@@ -1,28 +1,84 @@
1
1
  import React from 'react';
2
- import { DatePicker } from '@mantine/dates';
3
2
  import { toDate, toLocalDate } from '@thx/date';
4
3
  import debug from 'debug';
4
+ import { Input } from 'semantic-ui-react';
5
+ import DatePicker from 'react-datepicker';
6
+ import '../DatePicker/styles.css.js';
5
7
 
6
8
  debug("thx.controls.date.MonthDayPicker");
9
+ const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
10
+ function MonthDayHeader(props) {
11
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
12
+ className: "react-datepicker__current-month"
13
+ }, months[props.date.getMonth()]), /* @__PURE__ */ React.createElement("button", {
14
+ type: "button",
15
+ className: "react-datepicker__navigation react-datepicker__navigation--previous",
16
+ "aria-label": "Previous Month",
17
+ onClick: props.decreaseMonth,
18
+ disabled: props.prevMonthButtonDisabled
19
+ }, "Previous Month"), /* @__PURE__ */ React.createElement("button", {
20
+ type: "button",
21
+ className: "react-datepicker__navigation react-datepicker__navigation--next",
22
+ "aria-label": "Next Month",
23
+ onClick: props.increaseMonth,
24
+ disabled: props.nextMonthButtonDisabled
25
+ }, "Next Month"));
26
+ }
7
27
  function MonthDayPicker(props) {
8
- const { defaultValue, initialMonth, minDate, maxDate, value, onChange, onChangeRaw, ...rest } = props;
28
+ const {
29
+ value,
30
+ onChange,
31
+ as,
32
+ action,
33
+ actionPosition,
34
+ className,
35
+ disabled,
36
+ error,
37
+ fluid,
38
+ focus,
39
+ icon,
40
+ iconPosition,
41
+ inverted,
42
+ label,
43
+ labelPosition,
44
+ loading,
45
+ size,
46
+ tabIndex,
47
+ transparent,
48
+ ...rest
49
+ } = props;
9
50
  const selected = value ? toDate(value) : null;
51
+ const inputProps = {
52
+ as,
53
+ action,
54
+ actionPosition,
55
+ className,
56
+ disabled,
57
+ error,
58
+ fluid,
59
+ focus,
60
+ icon,
61
+ iconPosition,
62
+ inverted,
63
+ label,
64
+ labelPosition,
65
+ loading,
66
+ size,
67
+ tabIndex,
68
+ transparent
69
+ };
10
70
  return /* @__PURE__ */ React.createElement(DatePicker, {
11
- inputFormat: "MMMM D",
12
- labelFormat: "MMMM D",
13
- defaultValue: defaultValue ? toDate(defaultValue) : void 0,
14
- initialMonth: initialMonth ? toDate(initialMonth) : void 0,
15
- allowFreeInput: true,
16
- minDate: minDate ? toDate(minDate) : void 0,
17
- maxDate: maxDate ? toDate(maxDate) : void 0,
18
- value: selected,
71
+ ...rest,
72
+ selected,
19
73
  onChange: (date) => {
20
74
  if (onChange)
21
75
  onChange(date ? toLocalDate(date) : null);
22
- if (onChangeRaw)
23
- onChangeRaw(date);
24
76
  },
25
- ...rest
77
+ customInput: /* @__PURE__ */ React.createElement(Input, {
78
+ ...inputProps
79
+ }),
80
+ renderCustomHeader: MonthDayHeader,
81
+ dateFormat: "MMMM d"
26
82
  });
27
83
  }
28
84
 
@@ -1 +1 @@
1
- {"version":3,"file":"MonthDayPicker.js","sources":["../../../../src/date/MonthDayPicker/MonthDayPicker.tsx"],"sourcesContent":["import type {LocalDate} from '@js-joda/core';\nimport {DatePicker} from '@mantine/dates';\nimport type {DatePickerProps} from '@mantine/dates';\nimport {toDate, toLocalDate} from '@thx/date';\nimport debug from 'debug';\n\nconst d = debug('thx.controls.date.MonthDayPicker');\n\ninterface IMonthDayPickerProps {\n\tdefaultValue?: LocalDate | number | null;\n\tinitialMonth?: LocalDate | number | null;\n\tvalue?: LocalDate | number | null;\n\tonChange?: (value: LocalDate | null) => void;\n\tonChangeRaw?: (value: Date | null) => void;\n\tminDate?: LocalDate;\n\tmaxDate?: LocalDate;\n}\n\nexport type MonthDayPickerProps = IMonthDayPickerProps & Omit<DatePickerProps, 'onChange' | 'value'>;\n\nexport function MonthDayPicker(props: MonthDayPickerProps): JSX.Element {\n\tconst {defaultValue, initialMonth, minDate, maxDate, value, onChange, onChangeRaw, ...rest} = props;\n\n\tconst selected = value ? toDate(value) : null;\n\n\treturn (\n\t\t<DatePicker\n\t\t\tinputFormat=\"MMMM D\"\n\t\t\tlabelFormat=\"MMMM D\"\n\t\t\tdefaultValue={defaultValue ? toDate(defaultValue) : undefined}\n\t\t\tinitialMonth={initialMonth ? toDate(initialMonth) : undefined}\n\t\t\tallowFreeInput\n\t\t\tminDate={minDate ? toDate(minDate) : undefined}\n\t\t\tmaxDate={maxDate ? toDate(maxDate) : undefined}\n\t\t\tvalue={selected}\n\t\t\tonChange={date => {\n\t\t\t\tif (onChange) onChange(date ? toLocalDate(date) : null);\n\t\t\t\tif (onChangeRaw) onChangeRaw(date);\n\t\t\t}}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n"],"names":[],"mappings":";;;;;AAMU,MAAM,kCAAkC,EAAA;AAc3C,SAAA,cAAA,CAAwB,KAAyC,EAAA;AACvE,EAAM,MAAA,EAAC,cAAc,YAAc,EAAA,OAAA,EAAS,SAAS,KAAO,EAAA,QAAA,EAAU,gBAAgB,IAAQ,EAAA,GAAA,KAAA,CAAA;AAE9F,EAAA,MAAM,QAAW,GAAA,KAAA,GAAQ,MAAO,CAAA,KAAK,CAAI,GAAA,IAAA,CAAA;AAEzC,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,IACA,WAAY,EAAA,QAAA;AAAA,IACZ,WAAY,EAAA,QAAA;AAAA,IACZ,YAAc,EAAA,YAAA,GAAe,MAAO,CAAA,YAAY,CAAI,GAAA,KAAA,CAAA;AAAA,IACpD,YAAc,EAAA,YAAA,GAAe,MAAO,CAAA,YAAY,CAAI,GAAA,KAAA,CAAA;AAAA,IACpD,cAAc,EAAA,IAAA;AAAA,IACd,OAAS,EAAA,OAAA,GAAU,MAAO,CAAA,OAAO,CAAI,GAAA,KAAA,CAAA;AAAA,IACrC,OAAS,EAAA,OAAA,GAAU,MAAO,CAAA,OAAO,CAAI,GAAA,KAAA,CAAA;AAAA,IACrC,KAAO,EAAA,QAAA;AAAA,IACP,UAAU,CAAQ,IAAA,KAAA;AACjB,MAAI,IAAA,QAAA;AAAU,QAAA,QAAA,CAAS,IAAO,GAAA,WAAA,CAAY,IAAI,CAAA,GAAI,IAAI,CAAA,CAAA;AACtD,MAAI,IAAA,WAAA;AAAa,QAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAAA,KAClC;AAAA,IACI,GAAA,IAAA;AAAA,GACL,CAAA,CAAA;AAEF;;;;"}
1
+ {"version":3,"file":"MonthDayPicker.js","sources":["../../../../src/date/MonthDayPicker/MonthDayPicker.tsx"],"sourcesContent":["import type {LocalDate} from '@js-joda/core';\nimport {toDate, toLocalDate} from '@thx/date';\nimport debug from 'debug';\nimport type {ReactDatePickerProps} from 'react-datepicker';\nimport {InputProps, Input} from 'semantic-ui-react';\nimport {DatePicker} from '../DatePicker/index';\n\nconst d = debug('thx.controls.date.MonthDayPicker');\n\nconst months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n\ninterface MonthDayHeaderProps {\n\tdate: Date;\n\tchangeYear(year: number): void;\n\tchangeMonth(month: number): void;\n\tdecreaseMonth(): void;\n\tincreaseMonth(): void;\n\tprevMonthButtonDisabled: boolean;\n\tnextMonthButtonDisabled: boolean;\n\tdecreaseYear(): void;\n\tincreaseYear(): void;\n\tprevYearButtonDisabled: boolean;\n\tnextYearButtonDisabled: boolean;\n}\n\nfunction MonthDayHeader(props: MonthDayHeaderProps) {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"react-datepicker__current-month\">{months[props.date.getMonth()]}</div>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName=\"react-datepicker__navigation react-datepicker__navigation--previous\"\n\t\t\t\taria-label=\"Previous Month\"\n\t\t\t\tonClick={props.decreaseMonth}\n\t\t\t\tdisabled={props.prevMonthButtonDisabled}\n\t\t\t>\n\t\t\t\tPrevious Month\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName=\"react-datepicker__navigation react-datepicker__navigation--next\"\n\t\t\t\taria-label=\"Next Month\"\n\t\t\t\tonClick={props.increaseMonth}\n\t\t\t\tdisabled={props.nextMonthButtonDisabled}\n\t\t\t>\n\t\t\t\tNext Month\n\t\t\t</button>\n\t\t</>\n\t);\n}\n\ninterface IMonthDayPickerProps {\n\tvalue?: LocalDate | number | null;\n\tonChange?: (value: LocalDate | null) => void;\n\tonChangeRaw?: () => void;\n}\n\ntype InputPropsOmitted = Omit<InputProps, 'onChange'>;\ntype ReactDatePickerPropsOmitted = Omit<Omit<ReactDatePickerProps, 'value'>, 'onChange'>;\nexport type MonthDayPickerProps = IMonthDayPickerProps & InputPropsOmitted & ReactDatePickerPropsOmitted;\n\nexport function MonthDayPicker(props: MonthDayPickerProps): JSX.Element {\n\tconst {\n\t\tvalue,\n\t\tonChange,\n\t\tas,\n\t\taction,\n\t\tactionPosition,\n\t\tclassName,\n\t\tdisabled,\n\t\terror,\n\t\tfluid,\n\t\tfocus,\n\t\ticon,\n\t\ticonPosition,\n\t\tinverted,\n\t\tlabel,\n\t\tlabelPosition,\n\t\tloading,\n\t\tsize,\n\t\ttabIndex,\n\t\ttransparent,\n\t\t...rest\n\t} = props;\n\n\tconst selected = value ? toDate(value) : null;\n\n\tconst inputProps = {\n\t\tas,\n\t\taction,\n\t\tactionPosition,\n\t\tclassName,\n\t\tdisabled,\n\t\terror,\n\t\tfluid,\n\t\tfocus,\n\t\ticon,\n\t\ticonPosition,\n\t\tinverted,\n\t\tlabel,\n\t\tlabelPosition,\n\t\tloading,\n\t\tsize,\n\t\ttabIndex,\n\t\ttransparent,\n\t};\n\n\treturn (\n\t\t<DatePicker\n\t\t\t{...rest}\n\t\t\tselected={selected}\n\t\t\tonChange={date => {\n\t\t\t\tif (onChange) onChange(date ? toLocalDate(date) : null);\n\t\t\t}}\n\t\t\tcustomInput={<Input {...inputProps} />}\n\t\t\trenderCustomHeader={MonthDayHeader}\n\t\t\tdateFormat=\"MMMM d\"\n\t\t/>\n\t);\n}\n"],"names":[],"mappings":";;;;;;;AAOU,MAAM,kCAAkC,EAAA;AAElD,MAAM,MAAS,GAAA,CAAC,SAAW,EAAA,UAAA,EAAY,OAAS,EAAA,OAAA,EAAS,KAAO,EAAA,MAAA,EAAQ,MAAQ,EAAA,QAAA,EAAU,WAAa,EAAA,SAAA,EAAW,YAAY,UAAU,CAAA,CAAA;AAgBxI,SAAA,cAAA,CAAwB,KAA4B,EAAA;AACnD,EAAA,iFAEG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,iCAAA;AAAA,GAAA,EAAmC,OAAO,KAAM,CAAA,IAAA,CAAK,QAAS,EAAA,CAAG,mBAC/E,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IACL,SAAU,EAAA,qEAAA;AAAA,IACV,YAAW,EAAA,gBAAA;AAAA,IACX,SAAS,KAAM,CAAA,aAAA;AAAA,IACf,UAAU,KAAM,CAAA,uBAAA;AAAA,GAChB,EAAA,gBAED,mBACC,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IACL,SAAU,EAAA,iEAAA;AAAA,IACV,YAAW,EAAA,YAAA;AAAA,IACX,SAAS,KAAM,CAAA,aAAA;AAAA,IACf,UAAU,KAAM,CAAA,uBAAA;AAAA,GAAA,EAChB,YAED,CACD,CAAA,CAAA;AAEF,CAAA;AAYO,SAAA,cAAA,CAAwB,KAAyC,EAAA;AACvE,EAAM,MAAA;AAAA,IACL,KAAA;AAAA,IACA,QAAA;AAAA,IACA,EAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACA,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,QAAW,GAAA,KAAA,GAAQ,MAAO,CAAA,KAAK,CAAI,GAAA,IAAA,CAAA;AAEzC,EAAA,MAAM,UAAa,GAAA;AAAA,IAClB,EAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,GACD,CAAA;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,IACI,GAAA,IAAA;AAAA,IACJ,QAAA;AAAA,IACA,UAAU,CAAQ,IAAA,KAAA;AACjB,MAAI,IAAA,QAAA;AAAU,QAAA,QAAA,CAAS,IAAO,GAAA,WAAA,CAAY,IAAI,CAAA,GAAI,IAAI,CAAA,CAAA;AAAA,KACvD;AAAA,IACA,6BAAc,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAU,GAAA,UAAA;AAAA,KAAY,CAAA;AAAA,IACpC,kBAAoB,EAAA,cAAA;AAAA,IACpB,UAAW,EAAA,QAAA;AAAA,GACZ,CAAA,CAAA;AAEF;;;;"}