@thx/controls 16.0.0-alpha.0 → 16.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/dist/esm/date/DatePicker/styles.css.js +7 -0
- package/dist/esm/date/DatePicker/styles.css.js.map +1 -0
- package/dist/esm/date/LocalDatePicker/LocalDatePicker.js +71 -0
- package/dist/esm/date/LocalDatePicker/LocalDatePicker.js.map +1 -0
- package/dist/esm/date/LocalDatePicker/MaskedDateInput.js +22 -0
- package/dist/esm/date/LocalDatePicker/MaskedDateInput.js.map +1 -0
- package/dist/esm/date/LocalMonthSelect/LocalMonthSelect.js +43 -0
- package/dist/esm/date/LocalMonthSelect/LocalMonthSelect.js.map +1 -0
- package/dist/esm/date/LocalTimePicker/LocalTimePicker.js +76 -0
- package/dist/esm/date/LocalTimePicker/LocalTimePicker.js.map +1 -0
- package/dist/esm/date/LocalTimePicker/MaskedTimeInput.js +21 -0
- package/dist/esm/date/LocalTimePicker/MaskedTimeInput.js.map +1 -0
- package/dist/esm/date/MonthDayPicker/MonthDayPicker.js +86 -0
- package/dist/esm/date/MonthDayPicker/MonthDayPicker.js.map +1 -0
- package/dist/esm/date/MonthYearPicker/MonthYearPicker.js +73 -0
- package/dist/esm/date/MonthYearPicker/MonthYearPicker.js.map +1 -0
- package/dist/esm/date/YearSelect/YearSelect.js +62 -0
- package/dist/esm/date/YearSelect/YearSelect.js.map +1 -0
- package/dist/esm/external/style-inject/dist/style-inject.es.js +29 -0
- package/dist/esm/external/style-inject/dist/style-inject.es.js.map +1 -0
- package/dist/esm/form/TForm/TForm.js +29 -0
- package/dist/esm/form/TForm/TForm.js.map +1 -0
- package/dist/esm/form/TForm/useTForm.js +90 -0
- package/dist/esm/form/TForm/useTForm.js.map +1 -0
- package/dist/esm/index.js +33 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/inputs/CreditCardInput/CreditCardInput.js +71 -0
- package/dist/esm/inputs/CreditCardInput/CreditCardInput.js.map +1 -0
- package/dist/esm/inputs/CreditCardInput/CreditCardNumberInput.js +76 -0
- package/dist/esm/inputs/CreditCardInput/CreditCardNumberInput.js.map +1 -0
- package/dist/esm/inputs/CreditCardInput/styles.css.js +7 -0
- package/dist/esm/inputs/CreditCardInput/styles.css.js.map +1 -0
- package/dist/esm/inputs/MaskedInput/MaskedInput.js +21 -0
- package/dist/esm/inputs/MaskedInput/MaskedInput.js.map +1 -0
- package/dist/esm/inputs/MaskedInput/useMaskedInput.js +58 -0
- package/dist/esm/inputs/MaskedInput/useMaskedInput.js.map +1 -0
- package/dist/esm/inputs/PhoneInput/PhoneInput.js +21 -0
- package/dist/esm/inputs/PhoneInput/PhoneInput.js.map +1 -0
- package/dist/esm/inputs/RadioGroup/RadioGroup.js +25 -0
- package/dist/esm/inputs/RadioGroup/RadioGroup.js.map +1 -0
- package/dist/esm/inputs/Scriptel/Scriptel.js +52 -0
- package/dist/esm/inputs/Scriptel/Scriptel.js.map +1 -0
- package/dist/esm/inputs/Scriptel/ScriptelContext.js +6 -0
- package/dist/esm/inputs/Scriptel/ScriptelContext.js.map +1 -0
- package/dist/esm/inputs/Scriptel/scriptel/enums.js +21 -0
- package/dist/esm/inputs/Scriptel/scriptel/enums.js.map +1 -0
- package/dist/esm/inputs/Scriptel/scriptel/index.js +93 -0
- package/dist/esm/inputs/Scriptel/scriptel/index.js.map +1 -0
- package/dist/esm/inputs/Scriptel/withScriptel.js +15 -0
- package/dist/esm/inputs/Scriptel/withScriptel.js.map +1 -0
- package/dist/esm/inputs/ScriptelInput/ScriptelInput.js +67 -0
- package/dist/esm/inputs/ScriptelInput/ScriptelInput.js.map +1 -0
- package/dist/esm/inputs/SinInput/SinInput.js +54 -0
- package/dist/esm/inputs/SinInput/SinInput.js.map +1 -0
- package/dist/esm/inputs/TableInput/DropdownCell.js +26 -0
- package/dist/esm/inputs/TableInput/DropdownCell.js.map +1 -0
- package/dist/esm/inputs/TableInput/HoverCell.js +20 -0
- package/dist/esm/inputs/TableInput/HoverCell.js.map +1 -0
- package/dist/esm/inputs/TableInput/MoneyCell.js +13 -0
- package/dist/esm/inputs/TableInput/MoneyCell.js.map +1 -0
- package/dist/esm/inputs/TableInput/MoneyEditCell.js +30 -0
- package/dist/esm/inputs/TableInput/MoneyEditCell.js.map +1 -0
- package/dist/esm/inputs/TableInput/MoneySumFooter.js +15 -0
- package/dist/esm/inputs/TableInput/MoneySumFooter.js.map +1 -0
- package/dist/esm/inputs/TableInput/StringEditCell.js +34 -0
- package/dist/esm/inputs/TableInput/StringEditCell.js.map +1 -0
- package/dist/esm/inputs/TableInput/TableInput.js +75 -0
- package/dist/esm/inputs/TableInput/TableInput.js.map +1 -0
- package/dist/esm/inputs/TableInput/addRowOnTab.js +13 -0
- package/dist/esm/inputs/TableInput/addRowOnTab.js.map +1 -0
- package/dist/esm/money/MoneyCurrencyInput/MoneyCurrencyInput.js +51 -0
- package/dist/esm/money/MoneyCurrencyInput/MoneyCurrencyInput.js.map +1 -0
- package/dist/esm/money/MoneyInput/MoneyInput.js +31 -0
- package/dist/esm/money/MoneyInput/MoneyInput.js.map +1 -0
- package/dist/esm/money/useMoneyInput.js +74 -0
- package/dist/esm/money/useMoneyInput.js.map +1 -0
- package/dist/esm/step/FormStep.js +17 -0
- package/dist/esm/step/FormStep.js.map +1 -0
- package/dist/esm/step/Step.js +10 -0
- package/dist/esm/step/Step.js.map +1 -0
- package/dist/esm/step/StepProvider.js +95 -0
- package/dist/esm/step/StepProvider.js.map +1 -0
- package/dist/esm/step/stepContext.js +10 -0
- package/dist/esm/step/stepContext.js.map +1 -0
- package/dist/esm/step/useStep.js +10 -0
- package/dist/esm/step/useStep.js.map +1 -0
- package/dist/stats.html +2689 -0
- package/dist/stats.txt +94 -0
- package/dist/{date → types/date}/DatePicker/index.d.ts +0 -0
- package/dist/{date → types/date}/LocalDatePicker/LocalDatePicker.d.ts +1 -0
- package/dist/{date → types/date}/LocalDatePicker/MaskedDateInput.d.ts +0 -0
- package/dist/{date → types/date}/LocalDatePicker/index.d.ts +0 -0
- package/dist/{date → types/date}/LocalMonthSelect/LocalMonthSelect.d.ts +0 -0
- package/dist/{date → types/date}/LocalMonthSelect/index.d.ts +0 -0
- package/dist/{date → types/date}/LocalTimePicker/LocalTimePicker.d.ts +0 -0
- package/dist/{date → types/date}/LocalTimePicker/MaskedTimeInput.d.ts +0 -0
- package/dist/{date → types/date}/LocalTimePicker/index.d.ts +0 -0
- package/dist/{date → types/date}/MonthDayPicker/MonthDayPicker.d.ts +0 -0
- package/dist/{date → types/date}/MonthDayPicker/index.d.ts +0 -0
- package/dist/{date → types/date}/MonthYearPicker/MonthYearPicker.d.ts +0 -0
- package/dist/{date → types/date}/MonthYearPicker/index.d.ts +0 -0
- package/dist/{date → types/date}/YearSelect/YearSelect.d.ts +0 -0
- package/dist/{date → types/date}/YearSelect/index.d.ts +0 -0
- package/dist/{form → types/form}/TForm/TForm.d.ts +0 -0
- package/dist/{form → types/form}/TForm/index.d.ts +0 -0
- package/dist/{form → types/form}/TForm/types.d.ts +0 -0
- package/dist/{form → types/form}/TForm/useTForm.d.ts +0 -0
- package/dist/{index.d.ts → types/index.d.ts} +2 -1
- package/dist/{inputs → types/inputs}/CreditCardInput/CreditCardInput.d.ts +0 -0
- package/dist/{inputs → types/inputs}/CreditCardInput/CreditCardNumberInput.d.ts +0 -0
- package/dist/{inputs → types/inputs}/CreditCardInput/index.d.ts +0 -0
- package/dist/{inputs → types/inputs}/MaskedInput/MaskedInput.d.ts +0 -0
- package/dist/{inputs → types/inputs}/MaskedInput/index.d.ts +0 -0
- package/dist/{inputs → types/inputs}/MaskedInput/useMaskedInput.d.ts +1 -1
- package/dist/{inputs → types/inputs}/PhoneInput/PhoneInput.d.ts +0 -0
- package/dist/{inputs → types/inputs}/PhoneInput/index.d.ts +0 -0
- package/dist/{inputs → types/inputs}/RadioGroup/RadioGroup.d.ts +0 -0
- package/dist/{inputs → types/inputs}/RadioGroup/index.d.ts +0 -0
- package/dist/{inputs → types/inputs}/Scriptel/Scriptel.d.ts +0 -0
- package/dist/{inputs → types/inputs}/Scriptel/ScriptelContext.d.ts +0 -0
- package/dist/{inputs → types/inputs}/Scriptel/index.d.ts +0 -0
- package/dist/{inputs → types/inputs}/Scriptel/scriptel/classes.d.ts +0 -0
- package/dist/{inputs → types/inputs}/Scriptel/scriptel/enums.d.ts +0 -0
- package/dist/{inputs → types/inputs}/Scriptel/scriptel/index.d.ts +0 -0
- package/dist/{inputs → types/inputs}/Scriptel/scriptel/messages.d.ts +0 -0
- package/dist/{inputs → types/inputs}/Scriptel/withScriptel.d.ts +0 -1
- package/dist/{inputs → types/inputs}/ScriptelInput/ScriptelInput.d.ts +0 -0
- package/dist/{inputs → types/inputs}/ScriptelInput/index.d.ts +0 -0
- package/dist/{inputs → types/inputs}/SinInput/SinInput.d.ts +0 -0
- package/dist/{inputs → types/inputs}/SinInput/index.d.ts +0 -0
- package/dist/{inputs → types/inputs}/TableInput/DropdownCell.d.ts +0 -1
- package/dist/{inputs → types/inputs}/TableInput/HoverCell.d.ts +0 -1
- package/dist/{inputs → types/inputs}/TableInput/MoneyCell.d.ts +0 -1
- package/dist/{inputs → types/inputs}/TableInput/MoneyEditCell.d.ts +0 -1
- package/dist/{inputs → types/inputs}/TableInput/MoneySumFooter.d.ts +0 -1
- package/dist/{inputs → types/inputs}/TableInput/StringEditCell.d.ts +0 -1
- package/dist/{inputs → types/inputs}/TableInput/TableInput.d.ts +0 -0
- package/dist/{inputs → types/inputs}/TableInput/addRowOnTab.d.ts +0 -0
- package/dist/{inputs → types/inputs}/TableInput/index.d.ts +0 -0
- package/dist/{money → types/money}/MoneyCurrencyInput/MoneyCurrencyInput.d.ts +0 -0
- package/dist/{money → types/money}/MoneyCurrencyInput/index.d.ts +0 -0
- package/dist/{money → types/money}/MoneyInput/MoneyInput.d.ts +0 -0
- package/dist/{money → types/money}/MoneyInput/index.d.ts +0 -0
- package/dist/{money → types/money}/useMoneyInput.d.ts +0 -0
- package/dist/{step → types/step}/FormStep.d.ts +0 -0
- package/dist/{step → types/step}/Step.d.ts +0 -0
- package/dist/{step → types/step}/StepProvider.d.ts +0 -0
- package/dist/{step → types/step}/index.d.ts +0 -0
- package/dist/{step → types/step}/stepContext.d.ts +0 -0
- package/dist/{step → types/step}/useStep.d.ts +0 -0
- package/package.json +16 -25
- package/dist/index.js +0 -5460
- package/dist/index.min.js +0 -2
- package/dist/index.min.js.map +0 -1
- package/index.js +0 -7
package/LICENSE
CHANGED
|
@@ -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;"}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { toDate, toLocalDate } from '@thx/date';
|
|
3
|
+
import debug from 'debug';
|
|
4
|
+
import DatePicker from 'react-datepicker';
|
|
5
|
+
import '../DatePicker/styles.css.js';
|
|
6
|
+
import { MaskedDateInput } from './MaskedDateInput.js';
|
|
7
|
+
|
|
8
|
+
debug("thx.controls.date.LocalDatePicker");
|
|
9
|
+
function LocalDatePicker(props) {
|
|
10
|
+
const {
|
|
11
|
+
minDate,
|
|
12
|
+
maxDate,
|
|
13
|
+
value,
|
|
14
|
+
onChange,
|
|
15
|
+
onBlur,
|
|
16
|
+
as,
|
|
17
|
+
action,
|
|
18
|
+
actionPosition,
|
|
19
|
+
className,
|
|
20
|
+
error,
|
|
21
|
+
fluid,
|
|
22
|
+
focus,
|
|
23
|
+
icon,
|
|
24
|
+
iconPosition,
|
|
25
|
+
inverted,
|
|
26
|
+
label,
|
|
27
|
+
labelPosition,
|
|
28
|
+
loading,
|
|
29
|
+
size,
|
|
30
|
+
tabIndex,
|
|
31
|
+
transparent,
|
|
32
|
+
...rest
|
|
33
|
+
} = props;
|
|
34
|
+
const selected = value ? toDate(value) : null;
|
|
35
|
+
const inputProps = {
|
|
36
|
+
as,
|
|
37
|
+
action,
|
|
38
|
+
actionPosition,
|
|
39
|
+
className,
|
|
40
|
+
error,
|
|
41
|
+
fluid,
|
|
42
|
+
focus,
|
|
43
|
+
icon,
|
|
44
|
+
iconPosition,
|
|
45
|
+
inverted,
|
|
46
|
+
label,
|
|
47
|
+
labelPosition,
|
|
48
|
+
loading,
|
|
49
|
+
size,
|
|
50
|
+
tabIndex,
|
|
51
|
+
transparent
|
|
52
|
+
};
|
|
53
|
+
return /* @__PURE__ */ React.createElement(DatePicker, {
|
|
54
|
+
...rest,
|
|
55
|
+
selected,
|
|
56
|
+
onChange: (date) => {
|
|
57
|
+
if (onChange)
|
|
58
|
+
onChange(date ? toLocalDate(date) : null);
|
|
59
|
+
},
|
|
60
|
+
onBlur,
|
|
61
|
+
customInput: /* @__PURE__ */ React.createElement(MaskedDateInput, {
|
|
62
|
+
...inputProps,
|
|
63
|
+
onBlur
|
|
64
|
+
}),
|
|
65
|
+
minDate: minDate ? toDate(minDate) : null,
|
|
66
|
+
maxDate: maxDate ? toDate(maxDate) : null
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
export { LocalDatePicker };
|
|
71
|
+
//# sourceMappingURL=LocalDatePicker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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 type {ReactDatePickerProps} from 'react-datepicker';\nimport type {InputProps} from 'semantic-ui-react';\nimport {DatePicker} from '../DatePicker/index';\nimport '../DatePicker/styles.css';\nimport {MaskedDateInput} 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}\n\ntype InputPropsOmitted = Omit<InputProps, 'onChange'>;\ntype ReactDatePickerPropsOmitted = Omit<Omit<ReactDatePickerProps, 'value'>, 'onChange' | 'minDate' | 'maxDate'>;\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,\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\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\tonBlur={onBlur}\n\t\t\tcustomInput={<MaskedDateInput {...inputProps} onBlur={onBlur} />}\n\t\t\tminDate={minDate ? toDate(minDate) : null}\n\t\t\tmaxDate={maxDate ? toDate(maxDate) : null}\n\t\t/>\n\t);\n}\n"],"names":[],"mappings":";;;;;;;AASU,MAAM,mCAAmC,EAAA;AAc5C,SAAA,eAAA,CAAyB,KAA0C,EAAA;AACzE,EAAM,MAAA;AAAA,IACL,OAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,EAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;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,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,MAAA;AAAA,IACA,6BAAc,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,MAAoB,GAAA,UAAA;AAAA,MAAY,MAAA;AAAA,KAAgB,CAAA;AAAA,IAC9D,OAAS,EAAA,OAAA,GAAU,MAAO,CAAA,OAAO,CAAI,GAAA,IAAA;AAAA,IACrC,OAAS,EAAA,OAAA,GAAU,MAAO,CAAA,OAAO,CAAI,GAAA,IAAA;AAAA,GACtC,CAAA,CAAA;AAEF;;;;"}
|
|
@@ -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
|
+
function MaskedDateInputInner(props, ref) {
|
|
8
|
+
const { onChange, name, ...rest } = props;
|
|
9
|
+
return /* @__PURE__ */ React.createElement(MaskedInput, {
|
|
10
|
+
...rest,
|
|
11
|
+
name,
|
|
12
|
+
mask: { alias: "datetime", inputFormat: "mm/dd/yyyy" },
|
|
13
|
+
onChange: (value) => {
|
|
14
|
+
if (onChange)
|
|
15
|
+
onChange({ target: { value: value || "" } });
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
const MaskedDateInput = forwardRef(MaskedDateInputInner);
|
|
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';\n\nconst d = debug('thx.controls.date.LocalDatePicker.MaskedDateInput');\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\n// eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars\nfunction MaskedDateInputInner(props: MaskedDateInputProps & Omit<MaskedInputProps, 'onChange'>, ref: any) {\n\tconst {onChange, name, ...rest} = props;\n\n\treturn (\n\t\t<MaskedInput\n\t\t\t{...rest}\n\t\t\tname={name}\n\t\t\tmask={{alias: 'datetime', inputFormat: 'mm/dd/yyyy'}}\n\t\t\tonChange={value => {\n\t\t\t\tif (onChange) onChange({target: {value: value || ''}});\n\t\t\t}}\n\t\t/>\n\t);\n}\n\nexport const MaskedDateInput = forwardRef(MaskedDateInputInner);\n"],"names":[],"mappings":";;;;;AAIU,MAAM,mDAAmD,EAAA;AAcnE,SAAA,oBAAA,CAA8B,OAAkE,GAAU,EAAA;AACzG,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,IAAA;AAAA,IACA,IAAM,EAAA,EAAC,KAAO,EAAA,UAAA,EAAY,aAAa,YAAY,EAAA;AAAA,IACnD,UAAU,CAAS,KAAA,KAAA;AAClB,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,CAAA;AAEa,MAAA,eAAA,GAAkB,WAAW,oBAAoB;;;;"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { LocalDate } from '@js-joda/core';
|
|
3
|
+
import debug from 'debug';
|
|
4
|
+
import { Select } from 'semantic-ui-react';
|
|
5
|
+
|
|
6
|
+
debug("thx.controls.date.LocalMonthSelect");
|
|
7
|
+
const monthOptions = [
|
|
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
|
+
];
|
|
21
|
+
function LocalMonthSelect(props) {
|
|
22
|
+
const { value, onChange, year, handleBlur, ...rest } = props;
|
|
23
|
+
const theYear = year || LocalDate.now().year();
|
|
24
|
+
return /* @__PURE__ */ React.createElement(Select, {
|
|
25
|
+
placeholder: "Select Month",
|
|
26
|
+
options: monthOptions,
|
|
27
|
+
value: value ? value.monthValue() : "",
|
|
28
|
+
onChange: (ev, v) => {
|
|
29
|
+
if (onChange) {
|
|
30
|
+
if (typeof v.value === "number") {
|
|
31
|
+
onChange(v ? LocalDate.of(theYear, v.value, 1) : null);
|
|
32
|
+
} else {
|
|
33
|
+
onChange(null);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
onBlur: handleBlur,
|
|
38
|
+
...rest
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export { LocalMonthSelect };
|
|
43
|
+
//# sourceMappingURL=LocalMonthSelect.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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;;;;"}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { LocalTime } from '@js-joda/core';
|
|
3
|
+
import { toDate, toLocalTime } from '@thx/date';
|
|
4
|
+
import debug from 'debug';
|
|
5
|
+
import DatePicker from 'react-datepicker';
|
|
6
|
+
import '../DatePicker/styles.css.js';
|
|
7
|
+
import { MaskedTimeInput } from './MaskedTimeInput.js';
|
|
8
|
+
|
|
9
|
+
debug("thx.controls.date.LocalTimePicker");
|
|
10
|
+
function LocalTimePicker(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;
|
|
33
|
+
let selected;
|
|
34
|
+
if (typeof value === "number")
|
|
35
|
+
selected = toDate(LocalTime.ofSecondOfDay(value));
|
|
36
|
+
else
|
|
37
|
+
selected = value ? toDate(value) : null;
|
|
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,
|
|
60
|
+
onChange: (date) => {
|
|
61
|
+
if (onChange)
|
|
62
|
+
onChange(date ? toLocalTime(date) : null);
|
|
63
|
+
},
|
|
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
|
+
})
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
export { LocalTimePicker };
|
|
76
|
+
//# sourceMappingURL=LocalTimePicker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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 => {\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,UAAU,CAAS,KAAA,KAAA;AAClB,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;;;;"}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { toDate, toLocalDate } from '@thx/date';
|
|
3
|
+
import debug from 'debug';
|
|
4
|
+
import { Input } from 'semantic-ui-react';
|
|
5
|
+
import DatePicker from 'react-datepicker';
|
|
6
|
+
import '../DatePicker/styles.css.js';
|
|
7
|
+
|
|
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
|
+
}
|
|
27
|
+
function MonthDayPicker(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;
|
|
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
|
+
};
|
|
70
|
+
return /* @__PURE__ */ React.createElement(DatePicker, {
|
|
71
|
+
...rest,
|
|
72
|
+
selected,
|
|
73
|
+
onChange: (date) => {
|
|
74
|
+
if (onChange)
|
|
75
|
+
onChange(date ? toLocalDate(date) : null);
|
|
76
|
+
},
|
|
77
|
+
customInput: /* @__PURE__ */ React.createElement(Input, {
|
|
78
|
+
...inputProps
|
|
79
|
+
}),
|
|
80
|
+
renderCustomHeader: MonthDayHeader,
|
|
81
|
+
dateFormat: "MMMM d"
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
export { MonthDayPicker };
|
|
86
|
+
//# sourceMappingURL=MonthDayPicker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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;;;;"}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { LocalDate } from '@js-joda/core';
|
|
3
|
+
import { toDate, toLocalDate } from '@thx/date';
|
|
4
|
+
import debug from 'debug';
|
|
5
|
+
import { Input } from 'semantic-ui-react';
|
|
6
|
+
import DatePicker from 'react-datepicker';
|
|
7
|
+
import '../DatePicker/styles.css.js';
|
|
8
|
+
|
|
9
|
+
debug("thx.controls.date.MonthYearPicker");
|
|
10
|
+
function MonthYearPicker(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
|
+
minDate,
|
|
32
|
+
maxDate,
|
|
33
|
+
...rest
|
|
34
|
+
} = props;
|
|
35
|
+
const selected = value ? toDate(value) : null;
|
|
36
|
+
const inputProps = {
|
|
37
|
+
as,
|
|
38
|
+
action,
|
|
39
|
+
actionPosition,
|
|
40
|
+
className,
|
|
41
|
+
disabled,
|
|
42
|
+
error,
|
|
43
|
+
fluid,
|
|
44
|
+
focus,
|
|
45
|
+
icon,
|
|
46
|
+
iconPosition,
|
|
47
|
+
inverted,
|
|
48
|
+
label,
|
|
49
|
+
labelPosition,
|
|
50
|
+
loading,
|
|
51
|
+
size,
|
|
52
|
+
tabIndex,
|
|
53
|
+
transparent
|
|
54
|
+
};
|
|
55
|
+
return /* @__PURE__ */ React.createElement(DatePicker, {
|
|
56
|
+
...rest,
|
|
57
|
+
selected,
|
|
58
|
+
onChange: (date) => {
|
|
59
|
+
if (onChange)
|
|
60
|
+
onChange(date ? toLocalDate(date) : void 0);
|
|
61
|
+
},
|
|
62
|
+
customInput: /* @__PURE__ */ React.createElement(Input, {
|
|
63
|
+
...inputProps
|
|
64
|
+
}),
|
|
65
|
+
dateFormat: "MMMM yyyy",
|
|
66
|
+
showMonthYearPicker: true,
|
|
67
|
+
minDate: toDate(minDate?.withDayOfMonth(1) || LocalDate.ofEpochDay(0)),
|
|
68
|
+
maxDate: toDate(maxDate?.plusMonths(1).withDayOfMonth(1).minusDays(1) || LocalDate.now().plusYears(20))
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
export { MonthYearPicker };
|
|
73
|
+
//# sourceMappingURL=MonthYearPicker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MonthYearPicker.js","sources":["../../../../src/date/MonthYearPicker/MonthYearPicker.tsx"],"sourcesContent":["import {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.MonthYearPicker');\n\ninterface IMonthYearPickerProps {\n\tvalue?: LocalDate | number | undefined;\n\tonChange?: (value: LocalDate | undefined) => void;\n\tonChangeRaw?: () => void;\n\tminDate?: LocalDate | undefined;\n\tmaxDate?: LocalDate | undefined;\n}\n\ntype InputPropsOmitted = Omit<InputProps, 'onChange'>;\ntype ReactDatePickerPropsOmitted = Omit<Omit<ReactDatePickerProps, 'value' | 'minDate' | 'maxDate'>, 'onChange'>;\nexport type MonthYearPickerProps = IMonthYearPickerProps & InputPropsOmitted & ReactDatePickerPropsOmitted;\n\nexport function MonthYearPicker(props: MonthYearPickerProps): 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\tminDate,\n\t\tmaxDate,\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) : undefined);\n\t\t\t}}\n\t\t\tcustomInput={<Input {...inputProps} />}\n\t\t\tdateFormat=\"MMMM yyyy\"\n\t\t\tshowMonthYearPicker\n\t\t\tminDate={toDate(minDate?.withDayOfMonth(1) || LocalDate.ofEpochDay(0))}\n\t\t\tmaxDate={toDate(maxDate?.plusMonths(1).withDayOfMonth(1).minusDays(1) || LocalDate.now().plusYears(20))}\n\t\t/>\n\t);\n}\n"],"names":[],"mappings":";;;;;;;;AAOU,MAAM,mCAAmC,EAAA;AAc5C,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,IACA,OAAA;AAAA,IACA,OAAA;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,KAAS,CAAA,CAAA,CAAA;AAAA,KAC5D;AAAA,IACA,6BAAc,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAU,GAAA,UAAA;AAAA,KAAY,CAAA;AAAA,IACpC,UAAW,EAAA,WAAA;AAAA,IACX,mBAAmB,EAAA,IAAA;AAAA,IACnB,OAAA,EAAS,OAAO,OAAS,EAAA,cAAA,CAAe,CAAC,CAAK,IAAA,SAAA,CAAU,UAAW,CAAA,CAAC,CAAC,CAAA;AAAA,IACrE,SAAS,MAAO,CAAA,OAAA,EAAS,UAAW,CAAA,CAAC,EAAE,cAAe,CAAA,CAAC,CAAE,CAAA,SAAA,CAAU,CAAC,CAAK,IAAA,SAAA,CAAU,KAAM,CAAA,SAAA,CAAU,EAAE,CAAC,CAAA;AAAA,GACvG,CAAA,CAAA;AAEF;;;;"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import debug from 'debug';
|
|
3
|
+
import { Segment, Button, Icon, Dropdown } from 'semantic-ui-react';
|
|
4
|
+
|
|
5
|
+
debug("thx.controls.date.YearSelect");
|
|
6
|
+
function YearSelect(props) {
|
|
7
|
+
const thisYear = new Date().getFullYear();
|
|
8
|
+
const { value, minYear = 1970, maxYear = thisYear, onChange, onBlur, error, ...rest } = props;
|
|
9
|
+
const availableYears = [];
|
|
10
|
+
for (let i = maxYear; i >= minYear; i--) {
|
|
11
|
+
availableYears.push({ value: i, text: i.toString(), key: i });
|
|
12
|
+
}
|
|
13
|
+
return /* @__PURE__ */ React.createElement(Segment, {
|
|
14
|
+
basic: true,
|
|
15
|
+
compact: true,
|
|
16
|
+
style: { padding: 0, margin: 0 },
|
|
17
|
+
...rest
|
|
18
|
+
}, /* @__PURE__ */ React.createElement(Button, {
|
|
19
|
+
basic: true,
|
|
20
|
+
icon: true,
|
|
21
|
+
type: "button",
|
|
22
|
+
color: error ? "red" : "green",
|
|
23
|
+
disabled: value <= minYear,
|
|
24
|
+
onClick: () => {
|
|
25
|
+
if (onChange)
|
|
26
|
+
onChange(value - 1);
|
|
27
|
+
},
|
|
28
|
+
onBlur
|
|
29
|
+
}, /* @__PURE__ */ React.createElement(Icon, {
|
|
30
|
+
name: "arrow left"
|
|
31
|
+
})), /* @__PURE__ */ React.createElement(Dropdown, {
|
|
32
|
+
icon: /* @__PURE__ */ React.createElement("div", null),
|
|
33
|
+
button: true,
|
|
34
|
+
basic: true,
|
|
35
|
+
scrolling: true,
|
|
36
|
+
value,
|
|
37
|
+
options: availableYears,
|
|
38
|
+
onChange: (e, val) => {
|
|
39
|
+
if (typeof val.value === "number" && onChange)
|
|
40
|
+
onChange(val.value);
|
|
41
|
+
},
|
|
42
|
+
error,
|
|
43
|
+
onBlur
|
|
44
|
+
}), /* @__PURE__ */ React.createElement(Button, {
|
|
45
|
+
basic: true,
|
|
46
|
+
icon: true,
|
|
47
|
+
type: "button",
|
|
48
|
+
color: error ? "red" : "green",
|
|
49
|
+
disabled: value >= maxYear,
|
|
50
|
+
onClick: () => {
|
|
51
|
+
if (onChange)
|
|
52
|
+
onChange(value + 1);
|
|
53
|
+
},
|
|
54
|
+
onBlur,
|
|
55
|
+
style: { marginRight: 0 }
|
|
56
|
+
}, /* @__PURE__ */ React.createElement(Icon, {
|
|
57
|
+
name: "arrow right"
|
|
58
|
+
})));
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
export { YearSelect };
|
|
62
|
+
//# sourceMappingURL=YearSelect.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"YearSelect.js","sources":["../../../../src/date/YearSelect/YearSelect.tsx"],"sourcesContent":["import debug from 'debug';\nimport {Icon, Button, Dropdown, DropdownItemProps, Segment, SegmentProps} from 'semantic-ui-react';\n\nconst d = debug('thx.controls.date.YearSelect');\n\nexport interface YearSelectProps {\n\tonChange?: (value: number) => void;\n\tonBlur?: (ev: any) => void;\n\tvalue: number;\n\tminYear?: number; // Defaults to 1970\n\tmaxYear?: number; // Defaults to current year\n\terror?: boolean; // Defaults to false\n}\n\nexport function YearSelect(props: YearSelectProps & Omit<SegmentProps, 'onChange'>) {\n\tconst thisYear = new Date().getFullYear();\n\tconst {value, minYear = 1970, maxYear = thisYear, onChange, onBlur, error, ...rest} = props;\n\n\tconst availableYears: DropdownItemProps[] = [];\n\tfor (let i = maxYear; i >= minYear; i--) {\n\t\tavailableYears.push({value: i, text: i.toString(), key: i});\n\t}\n\n\treturn (\n\t\t<Segment basic compact style={{padding: 0, margin: 0}} {...rest}>\n\t\t\t<Button\n\t\t\t\tbasic\n\t\t\t\ticon\n\t\t\t\ttype=\"button\"\n\t\t\t\tcolor={error ? 'red' : 'green'}\n\t\t\t\tdisabled={value <= minYear}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tif (onChange) onChange(value - 1);\n\t\t\t\t}}\n\t\t\t\tonBlur={onBlur}\n\t\t\t>\n\t\t\t\t<Icon name=\"arrow left\" />\n\t\t\t</Button>\n\t\t\t<Dropdown\n\t\t\t\ticon={<div />}\n\t\t\t\tbutton\n\t\t\t\tbasic\n\t\t\t\tscrolling\n\t\t\t\tvalue={value}\n\t\t\t\toptions={availableYears}\n\t\t\t\tonChange={(e, val) => {\n\t\t\t\t\tif (typeof val.value === 'number' && onChange) onChange(val.value);\n\t\t\t\t}}\n\t\t\t\terror={error}\n\t\t\t\tonBlur={onBlur}\n\t\t\t/>\n\t\t\t<Button\n\t\t\t\tbasic\n\t\t\t\ticon\n\t\t\t\ttype=\"button\"\n\t\t\t\tcolor={error ? 'red' : 'green'}\n\t\t\t\tdisabled={value >= maxYear}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tif (onChange) onChange(value + 1);\n\t\t\t\t}}\n\t\t\t\tonBlur={onBlur}\n\t\t\t\tstyle={{marginRight: 0}}\n\t\t\t>\n\t\t\t\t<Icon name=\"arrow right\" />\n\t\t\t</Button>\n\t\t</Segment>\n\t);\n}\n"],"names":[],"mappings":";;;;AAGU,MAAM,8BAA8B,EAAA;AAWvC,SAAA,UAAA,CAAoB,KAAyD,EAAA;AACnF,EAAA,MAAM,QAAW,GAAA,IAAI,IAAK,EAAA,CAAE,WAAY,EAAA,CAAA;AACxC,EAAM,MAAA,EAAC,OAAO,OAAU,GAAA,IAAA,EAAM,UAAU,QAAU,EAAA,QAAA,EAAU,MAAQ,EAAA,KAAA,EAAA,GAAU,IAAQ,EAAA,GAAA,KAAA,CAAA;AAEtF,EAAA,MAAM,iBAAsC,EAAC,CAAA;AAC7C,EAAA,KAAA,IAAS,CAAI,GAAA,OAAA,EAAS,CAAK,IAAA,OAAA,EAAS,CAAK,EAAA,EAAA;AACxC,IAAe,cAAA,CAAA,IAAA,CAAK,EAAC,KAAA,EAAO,CAAG,EAAA,IAAA,EAAM,EAAE,QAAS,EAAA,EAAG,GAAK,EAAA,CAAA,EAAE,CAAA,CAAA;AAAA,GAC3D;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAA,IAAQ,KAAK,EAAA,IAAA;AAAA,IAAC,OAAO,EAAA,IAAA;AAAA,IAAC,KAAO,EAAA,EAAC,OAAS,EAAA,CAAA,EAAG,QAAQ,CAAC,EAAA;AAAA,IAAO,GAAA,IAAA;AAAA,GAAA,kBACzD,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACA,KAAK,EAAA,IAAA;AAAA,IACL,IAAI,EAAA,IAAA;AAAA,IACJ,IAAK,EAAA,QAAA;AAAA,IACL,KAAA,EAAO,QAAQ,KAAQ,GAAA,OAAA;AAAA,IACvB,UAAU,KAAS,IAAA,OAAA;AAAA,IACnB,SAAS,MAAM;AACd,MAAI,IAAA,QAAA;AAAU,QAAA,QAAA,CAAS,QAAQ,CAAC,CAAA,CAAA;AAAA,KACjC;AAAA,IACA,MAAA;AAAA,GAAA,kBAEC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,IAAK,EAAA,YAAA;AAAA,GAAa,CACzB,mBACC,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,IACA,IAAA,sCAAO,KAAI,EAAA,IAAA,CAAA;AAAA,IACX,MAAM,EAAA,IAAA;AAAA,IACN,KAAK,EAAA,IAAA;AAAA,IACL,SAAS,EAAA,IAAA;AAAA,IACT,KAAA;AAAA,IACA,OAAS,EAAA,cAAA;AAAA,IACT,QAAA,EAAU,CAAC,CAAA,EAAG,GAAQ,KAAA;AACrB,MAAI,IAAA,OAAO,GAAI,CAAA,KAAA,KAAU,QAAY,IAAA,QAAA;AAAU,QAAA,QAAA,CAAS,IAAI,KAAK,CAAA,CAAA;AAAA,KAClE;AAAA,IACA,KAAA;AAAA,IACA,MAAA;AAAA,GACD,mBACC,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACA,KAAK,EAAA,IAAA;AAAA,IACL,IAAI,EAAA,IAAA;AAAA,IACJ,IAAK,EAAA,QAAA;AAAA,IACL,KAAA,EAAO,QAAQ,KAAQ,GAAA,OAAA;AAAA,IACvB,UAAU,KAAS,IAAA,OAAA;AAAA,IACnB,SAAS,MAAM;AACd,MAAI,IAAA,QAAA;AAAU,QAAA,QAAA,CAAS,QAAQ,CAAC,CAAA,CAAA;AAAA,KACjC;AAAA,IACA,MAAA;AAAA,IACA,KAAA,EAAO,EAAC,WAAA,EAAa,CAAC,EAAA;AAAA,GAAA,kBAErB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,IAAK,EAAA,aAAA;AAAA,GAAc,CAC1B,CACD,CAAA,CAAA;AAEF;;;;"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
function styleInject(css, ref) {
|
|
2
|
+
if ( ref === void 0 ) ref = {};
|
|
3
|
+
var insertAt = ref.insertAt;
|
|
4
|
+
|
|
5
|
+
if (!css || typeof document === 'undefined') { return; }
|
|
6
|
+
|
|
7
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
8
|
+
var style = document.createElement('style');
|
|
9
|
+
style.type = 'text/css';
|
|
10
|
+
|
|
11
|
+
if (insertAt === 'top') {
|
|
12
|
+
if (head.firstChild) {
|
|
13
|
+
head.insertBefore(style, head.firstChild);
|
|
14
|
+
} else {
|
|
15
|
+
head.appendChild(style);
|
|
16
|
+
}
|
|
17
|
+
} else {
|
|
18
|
+
head.appendChild(style);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
if (style.styleSheet) {
|
|
22
|
+
style.styleSheet.cssText = css;
|
|
23
|
+
} else {
|
|
24
|
+
style.appendChild(document.createTextNode(css));
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export { styleInject as default };
|
|
29
|
+
//# sourceMappingURL=style-inject.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style-inject.es.js","sources":["../../../../../../../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":"AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React, { useImperativeHandle, createElement, Children } from 'react';
|
|
2
|
+
import debug from 'debug';
|
|
3
|
+
import { isFunction, isEmptyChildren, FormikProvider } from 'formik';
|
|
4
|
+
import { useTForm } from './useTForm.js';
|
|
5
|
+
|
|
6
|
+
debug("thx.controls.form.TForm");
|
|
7
|
+
function TForm(props) {
|
|
8
|
+
const tbag = useTForm(props);
|
|
9
|
+
const { component, render, children, innerRef } = props;
|
|
10
|
+
useImperativeHandle(innerRef, () => tbag);
|
|
11
|
+
let child = null;
|
|
12
|
+
if (component) {
|
|
13
|
+
child = createElement(component, tbag);
|
|
14
|
+
} else if (render) {
|
|
15
|
+
child = render(tbag);
|
|
16
|
+
} else if (children) {
|
|
17
|
+
if (isFunction(children)) {
|
|
18
|
+
child = children(tbag);
|
|
19
|
+
} else if (!isEmptyChildren(children)) {
|
|
20
|
+
child = Children.only(children);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
return /* @__PURE__ */ React.createElement(FormikProvider, {
|
|
24
|
+
value: tbag
|
|
25
|
+
}, child);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export { TForm };
|
|
29
|
+
//# sourceMappingURL=TForm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TForm.js","sources":["../../../../src/form/TForm/TForm.tsx"],"sourcesContent":["import debug from 'debug';\nimport {FormikValues, isFunction, FormikProvider, isEmptyChildren} from 'formik';\nimport {useImperativeHandle, Children, createElement} from 'react';\nimport type {ReactNode} from 'react';\nimport type {TFormConfig, TFormProps} from './types';\nimport {useTForm} from './useTForm';\n\nconst d = debug('thx.controls.form.TForm');\n\nexport function TForm<Values extends FormikValues = FormikValues>(props: TFormConfig<Values>) {\n\tconst tbag = useTForm<Values>(props);\n\tconst {component, render, children, innerRef} = props;\n\n\t// This allows folks to pass a ref to <Formik />\n\tuseImperativeHandle(innerRef, () => tbag);\n\n\tlet child = null;\n\tif (component) {\n\t\t// @ts-ignore\n\t\tchild = createElement(component, tbag);\n\t} else if (render) {\n\t\tchild = render(tbag);\n\t} else if (children) {\n\t\tif (isFunction(children)) {\n\t\t\tchild = (children as (bag: TFormProps<Values>) => ReactNode)(tbag as TFormProps<Values>);\n\t\t} else if (!isEmptyChildren(children)) {\n\t\t\tchild = Children.only(children);\n\t\t}\n\t}\n\n\treturn <FormikProvider value={tbag}>{child}</FormikProvider>;\n}\n"],"names":[],"mappings":";;;;;AAOU,MAAM,yBAAyB,EAAA;AAElC,SAAA,KAAA,CAA2D,KAA4B,EAAA;AAC7F,EAAM,MAAA,IAAA,GAAO,SAAiB,KAAK,CAAA,CAAA;AACnC,EAAA,MAAM,EAAC,SAAA,EAAW,MAAQ,EAAA,QAAA,EAAU,QAAY,EAAA,GAAA,KAAA,CAAA;AAGhD,EAAoB,mBAAA,CAAA,QAAA,EAAU,MAAM,IAAI,CAAA,CAAA;AAExC,EAAA,IAAI,KAAQ,GAAA,IAAA,CAAA;AACZ,EAAA,IAAI,SAAW,EAAA;AAEd,IAAQ,KAAA,GAAA,aAAA,CAAc,WAAW,IAAI,CAAA,CAAA;AAAA,aAC3B,MAAQ,EAAA;AAClB,IAAA,KAAA,GAAQ,OAAO,IAAI,CAAA,CAAA;AAAA,aACT,QAAU,EAAA;AACpB,IAAI,IAAA,UAAA,CAAW,QAAQ,CAAG,EAAA;AACzB,MAAA,KAAA,GAAS,SAAoD,IAA0B,CAAA,CAAA;AAAA,KAC7E,MAAA,IAAA,CAAC,eAAgB,CAAA,QAAQ,CAAG,EAAA;AACtC,MAAQ,KAAA,GAAA,QAAA,CAAS,KAAK,QAAQ,CAAA,CAAA;AAAA,KAC/B;AAAA,GACD;AAEA,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAA,IAAe,KAAO,EAAA,IAAA;AAAA,GAAA,EAAO,KAAM,CAAA,CAAA;AAC5C;;;;"}
|