@thx/controls 16.0.0-alpha.27 → 16.0.4
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/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 +12 -60
- package/dist/esm/date/LocalDatePicker/LocalDatePicker.js.map +1 -1
- package/dist/esm/date/LocalDatePicker/MaskedDateInput.js +6 -35
- package/dist/esm/date/LocalDatePicker/MaskedDateInput.js.map +1 -1
- package/dist/esm/date/LocalMonthSelect/LocalMonthSelect.js +6 -32
- package/dist/esm/date/LocalMonthSelect/LocalMonthSelect.js.map +1 -1
- package/dist/esm/date/LocalTimePicker/LocalTimePicker.js +12 -57
- package/dist/esm/date/LocalTimePicker/LocalTimePicker.js.map +1 -1
- package/dist/esm/date/LocalTimePicker/MaskedTimeInput.js +7 -33
- package/dist/esm/date/LocalTimePicker/MaskedTimeInput.js.map +1 -1
- package/dist/esm/date/MonthDayPicker/MonthDayPicker.js +12 -57
- package/dist/esm/date/MonthDayPicker/MonthDayPicker.js.map +1 -1
- package/dist/esm/date/MonthYearPicker/MonthYearPicker.js +14 -61
- package/dist/esm/date/MonthYearPicker/MonthYearPicker.js.map +1 -1
- package/dist/esm/date/YearSelect/YearSelect.js +6 -32
- package/dist/esm/date/YearSelect/YearSelect.js.map +1 -1
- 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 +4 -4
- package/dist/esm/form/TForm/TForm.js.map +1 -1
- package/dist/esm/form/TForm/useTForm.js +5 -35
- package/dist/esm/form/TForm/useTForm.js.map +1 -1
- package/dist/esm/index.js +5 -4
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/inputs/CreditCardInput/CreditCardInput.js +3 -2
- package/dist/esm/inputs/CreditCardInput/CreditCardInput.js.map +1 -1
- package/dist/esm/inputs/CreditCardInput/CreditCardNumberInput.js +5 -35
- package/dist/esm/inputs/CreditCardInput/CreditCardNumberInput.js.map +1 -1
- 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 +5 -30
- package/dist/esm/inputs/MaskedInput/MaskedInput.js.map +1 -1
- package/dist/esm/inputs/MaskedInput/useMaskedInput.js +13 -32
- package/dist/esm/inputs/MaskedInput/useMaskedInput.js.map +1 -1
- package/dist/esm/inputs/PhoneInput/PhoneInput.js +6 -34
- package/dist/esm/inputs/PhoneInput/PhoneInput.js.map +1 -1
- package/dist/esm/inputs/RadioGroup/RadioGroup.js +6 -32
- package/dist/esm/inputs/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/esm/inputs/Scriptel/Scriptel.js +1 -1
- package/dist/esm/inputs/Scriptel/Scriptel.js.map +1 -1
- package/dist/esm/inputs/Scriptel/ScriptelContext.js.map +1 -1
- package/dist/esm/inputs/Scriptel/scriptel/enums.js.map +1 -1
- package/dist/esm/inputs/Scriptel/scriptel/index.js.map +1 -1
- package/dist/esm/inputs/Scriptel/withScriptel.js +6 -17
- package/dist/esm/inputs/Scriptel/withScriptel.js.map +1 -1
- package/dist/esm/inputs/ScriptelInput/ScriptelInput.js +7 -10
- package/dist/esm/inputs/ScriptelInput/ScriptelInput.js.map +1 -1
- package/dist/esm/inputs/SinInput/SinInput.js +5 -35
- package/dist/esm/inputs/SinInput/SinInput.js.map +1 -1
- package/dist/esm/inputs/TableInput/DropdownCell.js +5 -34
- package/dist/esm/inputs/TableInput/DropdownCell.js.map +1 -1
- package/dist/esm/inputs/TableInput/HoverCell.js +4 -17
- package/dist/esm/inputs/TableInput/HoverCell.js.map +1 -1
- package/dist/esm/inputs/TableInput/MoneyCell.js +2 -1
- package/dist/esm/inputs/TableInput/MoneyCell.js.map +1 -1
- package/dist/esm/inputs/TableInput/MoneyEditCell.js +3 -3
- package/dist/esm/inputs/TableInput/MoneyEditCell.js.map +1 -1
- package/dist/esm/inputs/TableInput/MoneySumFooter.js +1 -0
- package/dist/esm/inputs/TableInput/MoneySumFooter.js.map +1 -1
- package/dist/esm/inputs/TableInput/StringEditCell.js +5 -24
- package/dist/esm/inputs/TableInput/StringEditCell.js.map +1 -1
- package/dist/esm/inputs/TableInput/TableInput.js +24 -27
- package/dist/esm/inputs/TableInput/TableInput.js.map +1 -1
- package/dist/esm/inputs/TableInput/addRowOnTab.js.map +1 -1
- package/dist/esm/money/MoneyCurrencyInput/MoneyCurrencyInput.js +7 -37
- package/dist/esm/money/MoneyCurrencyInput/MoneyCurrencyInput.js.map +1 -1
- package/dist/esm/money/MoneyInput/MoneyInput.js +5 -31
- package/dist/esm/money/MoneyInput/MoneyInput.js.map +1 -1
- package/dist/esm/money/useMoneyInput.js +7 -10
- package/dist/esm/money/useMoneyInput.js.map +1 -1
- package/dist/esm/step/FormStep.js +1 -1
- package/dist/esm/step/FormStep.js.map +1 -1
- package/dist/esm/step/Step.js +1 -0
- package/dist/esm/step/Step.js.map +1 -1
- package/dist/esm/step/StepProvider.js +17 -37
- package/dist/esm/step/StepProvider.js.map +1 -1
- package/dist/esm/step/stepContext.js.map +1 -1
- package/dist/esm/step/useStep.js.map +1 -1
- package/dist/stats.html +2689 -0
- package/dist/stats.txt +94 -0
- package/dist/types/date/LocalDatePicker/LocalDatePicker.d.ts +1 -0
- package/dist/types/inputs/MaskedInput/useMaskedInput.d.ts +1 -1
- package/package.json +12 -20
|
@@ -1 +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":"
|
|
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;;;;"}
|
|
@@ -1,43 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { LocalDate } from '@js-joda/core';
|
|
2
3
|
import { toDate, toLocalDate } from '@thx/date';
|
|
3
4
|
import debug from 'debug';
|
|
4
5
|
import { Input } from 'semantic-ui-react';
|
|
5
6
|
import DatePicker from 'react-datepicker';
|
|
7
|
+
import '../DatePicker/styles.css.js';
|
|
6
8
|
|
|
7
|
-
var __defProp = Object.defineProperty;
|
|
8
|
-
var __defProps = Object.defineProperties;
|
|
9
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
10
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
11
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
12
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
13
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
14
|
-
var __spreadValues = (a, b) => {
|
|
15
|
-
for (var prop in b || (b = {}))
|
|
16
|
-
if (__hasOwnProp.call(b, prop))
|
|
17
|
-
__defNormalProp(a, prop, b[prop]);
|
|
18
|
-
if (__getOwnPropSymbols)
|
|
19
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
20
|
-
if (__propIsEnum.call(b, prop))
|
|
21
|
-
__defNormalProp(a, prop, b[prop]);
|
|
22
|
-
}
|
|
23
|
-
return a;
|
|
24
|
-
};
|
|
25
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
26
|
-
var __objRest = (source, exclude) => {
|
|
27
|
-
var target = {};
|
|
28
|
-
for (var prop in source)
|
|
29
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
30
|
-
target[prop] = source[prop];
|
|
31
|
-
if (source != null && __getOwnPropSymbols)
|
|
32
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
33
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
34
|
-
target[prop] = source[prop];
|
|
35
|
-
}
|
|
36
|
-
return target;
|
|
37
|
-
};
|
|
38
9
|
debug("thx.controls.date.MonthYearPicker");
|
|
39
10
|
function MonthYearPicker(props) {
|
|
40
|
-
const
|
|
11
|
+
const {
|
|
41
12
|
value,
|
|
42
13
|
onChange,
|
|
43
14
|
as,
|
|
@@ -58,30 +29,9 @@ function MonthYearPicker(props) {
|
|
|
58
29
|
tabIndex,
|
|
59
30
|
transparent,
|
|
60
31
|
minDate,
|
|
61
|
-
maxDate
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
"onChange",
|
|
65
|
-
"as",
|
|
66
|
-
"action",
|
|
67
|
-
"actionPosition",
|
|
68
|
-
"className",
|
|
69
|
-
"disabled",
|
|
70
|
-
"error",
|
|
71
|
-
"fluid",
|
|
72
|
-
"focus",
|
|
73
|
-
"icon",
|
|
74
|
-
"iconPosition",
|
|
75
|
-
"inverted",
|
|
76
|
-
"label",
|
|
77
|
-
"labelPosition",
|
|
78
|
-
"loading",
|
|
79
|
-
"size",
|
|
80
|
-
"tabIndex",
|
|
81
|
-
"transparent",
|
|
82
|
-
"minDate",
|
|
83
|
-
"maxDate"
|
|
84
|
-
]);
|
|
32
|
+
maxDate,
|
|
33
|
+
...rest
|
|
34
|
+
} = props;
|
|
85
35
|
const selected = value ? toDate(value) : null;
|
|
86
36
|
const inputProps = {
|
|
87
37
|
as,
|
|
@@ -102,18 +52,21 @@ function MonthYearPicker(props) {
|
|
|
102
52
|
tabIndex,
|
|
103
53
|
transparent
|
|
104
54
|
};
|
|
105
|
-
return /* @__PURE__ */ React.createElement(DatePicker,
|
|
55
|
+
return /* @__PURE__ */ React.createElement(DatePicker, {
|
|
56
|
+
...rest,
|
|
106
57
|
selected,
|
|
107
58
|
onChange: (date) => {
|
|
108
59
|
if (onChange)
|
|
109
60
|
onChange(date ? toLocalDate(date) : void 0);
|
|
110
61
|
},
|
|
111
|
-
customInput: /* @__PURE__ */ React.createElement(Input,
|
|
62
|
+
customInput: /* @__PURE__ */ React.createElement(Input, {
|
|
63
|
+
...inputProps
|
|
64
|
+
}),
|
|
112
65
|
dateFormat: "MMMM yyyy",
|
|
113
66
|
showMonthYearPicker: true,
|
|
114
|
-
minDate: toDate(
|
|
115
|
-
maxDate: toDate(
|
|
116
|
-
})
|
|
67
|
+
minDate: toDate(minDate?.withDayOfMonth(1) || LocalDate.ofEpochDay(0)),
|
|
68
|
+
maxDate: toDate(maxDate?.plusMonths(1).withDayOfMonth(1).minusDays(1) || LocalDate.now().plusYears(20))
|
|
69
|
+
});
|
|
117
70
|
}
|
|
118
71
|
|
|
119
72
|
export { MonthYearPicker };
|
|
@@ -1 +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":"
|
|
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;;;;"}
|
|
@@ -1,47 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import debug from 'debug';
|
|
2
3
|
import { Segment, Button, Icon, Dropdown } from 'semantic-ui-react';
|
|
3
4
|
|
|
4
|
-
var __defProp = Object.defineProperty;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
-
var __spreadValues = (a, b) => {
|
|
10
|
-
for (var prop in b || (b = {}))
|
|
11
|
-
if (__hasOwnProp.call(b, prop))
|
|
12
|
-
__defNormalProp(a, prop, b[prop]);
|
|
13
|
-
if (__getOwnPropSymbols)
|
|
14
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
-
if (__propIsEnum.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
}
|
|
18
|
-
return a;
|
|
19
|
-
};
|
|
20
|
-
var __objRest = (source, exclude) => {
|
|
21
|
-
var target = {};
|
|
22
|
-
for (var prop in source)
|
|
23
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
-
target[prop] = source[prop];
|
|
25
|
-
if (source != null && __getOwnPropSymbols)
|
|
26
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
}
|
|
30
|
-
return target;
|
|
31
|
-
};
|
|
32
5
|
debug("thx.controls.date.YearSelect");
|
|
33
6
|
function YearSelect(props) {
|
|
34
7
|
const thisYear = new Date().getFullYear();
|
|
35
|
-
const
|
|
8
|
+
const { value, minYear = 1970, maxYear = thisYear, onChange, onBlur, error, ...rest } = props;
|
|
36
9
|
const availableYears = [];
|
|
37
10
|
for (let i = maxYear; i >= minYear; i--) {
|
|
38
11
|
availableYears.push({ value: i, text: i.toString(), key: i });
|
|
39
12
|
}
|
|
40
|
-
return /* @__PURE__ */ React.createElement(Segment,
|
|
13
|
+
return /* @__PURE__ */ React.createElement(Segment, {
|
|
41
14
|
basic: true,
|
|
42
15
|
compact: true,
|
|
43
|
-
style: { padding: 0, margin: 0 }
|
|
44
|
-
|
|
16
|
+
style: { padding: 0, margin: 0 },
|
|
17
|
+
...rest
|
|
18
|
+
}, /* @__PURE__ */ React.createElement(Button, {
|
|
45
19
|
basic: true,
|
|
46
20
|
icon: true,
|
|
47
21
|
type: "button",
|
|
@@ -1 +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":"
|
|
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;;;;"}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
+
import React, { useImperativeHandle, createElement, Children } from 'react';
|
|
1
2
|
import debug from 'debug';
|
|
2
3
|
import { isFunction, isEmptyChildren, FormikProvider } from 'formik';
|
|
3
|
-
import * as React from 'react';
|
|
4
4
|
import { useTForm } from './useTForm.js';
|
|
5
5
|
|
|
6
6
|
debug("thx.controls.form.TForm");
|
|
7
7
|
function TForm(props) {
|
|
8
8
|
const tbag = useTForm(props);
|
|
9
9
|
const { component, render, children, innerRef } = props;
|
|
10
|
-
|
|
10
|
+
useImperativeHandle(innerRef, () => tbag);
|
|
11
11
|
let child = null;
|
|
12
12
|
if (component) {
|
|
13
|
-
child =
|
|
13
|
+
child = createElement(component, tbag);
|
|
14
14
|
} else if (render) {
|
|
15
15
|
child = render(tbag);
|
|
16
16
|
} else if (children) {
|
|
17
17
|
if (isFunction(children)) {
|
|
18
18
|
child = children(tbag);
|
|
19
19
|
} else if (!isEmptyChildren(children)) {
|
|
20
|
-
child =
|
|
20
|
+
child = Children.only(children);
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
return /* @__PURE__ */ React.createElement(FormikProvider, {
|
|
@@ -1 +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
|
|
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;;;;"}
|
|
@@ -1,42 +1,11 @@
|
|
|
1
|
+
import React, { useEffect, useState } from 'react';
|
|
1
2
|
import flatten from 'flat';
|
|
2
3
|
import { useFormik } from 'formik';
|
|
3
4
|
import { uniq, get, property } from 'lodash-es';
|
|
4
|
-
import { useEffect, useState } from 'react';
|
|
5
5
|
import { Message, Segment } from 'semantic-ui-react';
|
|
6
6
|
|
|
7
|
-
var __defProp = Object.defineProperty;
|
|
8
|
-
var __defProps = Object.defineProperties;
|
|
9
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
10
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
11
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
12
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
13
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
14
|
-
var __spreadValues = (a, b) => {
|
|
15
|
-
for (var prop in b || (b = {}))
|
|
16
|
-
if (__hasOwnProp.call(b, prop))
|
|
17
|
-
__defNormalProp(a, prop, b[prop]);
|
|
18
|
-
if (__getOwnPropSymbols)
|
|
19
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
20
|
-
if (__propIsEnum.call(b, prop))
|
|
21
|
-
__defNormalProp(a, prop, b[prop]);
|
|
22
|
-
}
|
|
23
|
-
return a;
|
|
24
|
-
};
|
|
25
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
26
|
-
var __objRest = (source, exclude) => {
|
|
27
|
-
var target = {};
|
|
28
|
-
for (var prop in source)
|
|
29
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
30
|
-
target[prop] = source[prop];
|
|
31
|
-
if (source != null && __getOwnPropSymbols)
|
|
32
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
33
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
34
|
-
target[prop] = source[prop];
|
|
35
|
-
}
|
|
36
|
-
return target;
|
|
37
|
-
};
|
|
38
7
|
function useTForm(config) {
|
|
39
|
-
const
|
|
8
|
+
const { render, children, ...rest } = config;
|
|
40
9
|
const formik = useFormik(rest);
|
|
41
10
|
useEffect(() => {
|
|
42
11
|
if (config.onValidate)
|
|
@@ -102,7 +71,8 @@ function useTForm(config) {
|
|
|
102
71
|
setErrorCleared(false);
|
|
103
72
|
formik.handleSubmit(e);
|
|
104
73
|
}
|
|
105
|
-
return
|
|
74
|
+
return {
|
|
75
|
+
...formik,
|
|
106
76
|
hasErrors: hasErrors && !errorCleared,
|
|
107
77
|
hasWarnings,
|
|
108
78
|
isValid: !hasWarnings,
|
|
@@ -113,7 +83,7 @@ function useTForm(config) {
|
|
|
113
83
|
renderWarnings,
|
|
114
84
|
fieldError,
|
|
115
85
|
handleSubmit
|
|
116
|
-
}
|
|
86
|
+
};
|
|
117
87
|
}
|
|
118
88
|
|
|
119
89
|
export { useTForm };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTForm.js","sources":["../../../../src/form/TForm/useTForm.tsx"],"sourcesContent":["import flatten from 'flat';\nimport {FormikValues, useFormik, FormikErrors, FormikTouched} from 'formik';\nimport {get, property, uniq} from 'lodash-es';\nimport {FormEvent, useEffect, useState} from 'react';\nimport {Message, Segment} from 'semantic-ui-react';\nimport type {TFormConfig} from './types';\n\nexport function useTForm<Values extends FormikValues = FormikValues, InitialValues = any>(config: TFormConfig<Values, InitialValues>) {\n\tconst {render, children, ...rest} = config;\n\t// @ts-ignore\n\tconst formik = useFormik(rest);\n\n\tuseEffect(() => {\n\t\tif (config.onValidate) config.onValidate(formik.isValid);\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [formik.isValid, config.onValidate]);\n\n\t// Get submit function\n\tuseEffect(() => {\n\t\tif (config.getSubmitFn) config.getSubmitFn(formik.submitForm);\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [formik.submitForm, config.getSubmitFn]);\n\n\t// On change event (if this ends up changing values it will cycle)\n\tuseEffect(() => {\n\t\tif (config.onChange) config.onChange(formik.values);\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [formik.values]);\n\n\t// Mark the error cleared if the form has been edited after an error\n\tconst [errorCleared, setErrorCleared] = useState(false);\n\tuseEffect(() => {\n\t\tif (config.error && config.error.message && !formik.isSubmitting) {\n\t\t\tsetErrorCleared(true);\n\t\t}\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [formik.values, config.error]);\n\n\t// Flatten the warnings (formik errors) and touch objects.\n\tconst flatWarnings = flatten<FormikErrors<Values>, {[key: string]: string}>(formik.errors);\n\tconst flatTouched = flatten<FormikTouched<Values>, {[key: string]: string}>(formik.touched);\n\n\t// Create an array of strings that are warnings (formik errors). If the submit count is greater than 0\n\t// then it will show all warnings. Otherwise only touched field warnings will be added to this array.\n\tconst warnings: string[] = uniq(\n\t\tObject.keys(flatWarnings).reduce<string[]>((memo, value) => {\n\t\t\tconst isTouched = flatTouched[value];\n\t\t\tif (isTouched || formik.submitCount > 0) {\n\t\t\t\treturn [...memo, get(flatWarnings, value)];\n\t\t\t}\n\t\t\treturn memo;\n\t\t}, []),\n\t);\n\n\t// Create an array of strings that are errors (graphql errors).\n\tlet errors: string[] = [];\n\tlet errorHeader = '';\n\tif (config.error && config.error.message) {\n\t\tif (config.error.graphQLErrors) {\n\t\t\terrors = config.error.graphQLErrors.reduce((memo, v) => {\n\t\t\t\tif (v.message) return [...memo, v.message];\n\t\t\t\treturn memo;\n\t\t\t}, [] as string[]);\n\t\t} else {\n\t\t\tconst errorMessage = config.error.message.slice(config.error.message.indexOf(': ') + 1);\n\t\t\terrors.push(errorMessage);\n\t\t}\n\t\terrorHeader = config.error.message.slice(0, config.error.message.indexOf(': '));\n\t}\n\terrors = uniq(errors);\n\n\t// Check if there are warnings or errors\n\tconst hasWarnings = !(formik.isValid || warnings.length === 0);\n\tconst hasErrors = errors.length > 0;\n\n\t// Render the warnings\n\tfunction renderWarnings() {\n\t\tif (!hasWarnings && !hasErrors) return null;\n\t\treturn (\n\t\t\t<Message warning={hasWarnings} error={hasErrors && !hasWarnings}>\n\t\t\t\t<Message.Header>{hasWarnings ? 'Some fields are not complete:' : `${errorHeader}:`}</Message.Header>\n\t\t\t\t{/* Put it in a segment to make sure the errorMessage isn't too big when there are a lot of errors */}\n\t\t\t\t<Segment style={{overflow: 'auto', maxHeight: 100}}>\n\t\t\t\t\t{(hasWarnings ? warnings : errors).map(msg => (\n\t\t\t\t\t\t<div key={msg}>{msg}</div>\n\t\t\t\t\t))}\n\t\t\t\t</Segment>\n\t\t\t</Message>\n\t\t);\n\t}\n\n\t// Returns true if the field has an error\n\tfunction fieldError(fieldName: keyof Values | string | number) {\n\t\treturn (!!property(fieldName)(formik.touched) || formik.submitCount > 0) && !!property(fieldName)(formik.errors);\n\t}\n\n\t// Handles the form submit\n\tfunction handleSubmit(e?: FormEvent<HTMLFormElement>) {\n\t\tsetErrorCleared(false);\n\t\tformik.handleSubmit(e);\n\t}\n\n\treturn {\n\t\t...formik,\n\t\thasErrors: hasErrors && !errorCleared,\n\t\thasWarnings,\n\t\tisValid: !hasWarnings,\n\t\tloading: config.loading ? config.loading : false,\n\t\tsubmitDisabled: hasWarnings || formik.isSubmitting,\n\t\terrorMarkedCleared: errorCleared,\n\t\tformError: hasErrors && !hasWarnings && !errorCleared && !formik.isSubmitting, // Convenience\n\t\trenderWarnings,\n\t\tfieldError,\n\t\thandleSubmit,\n\t};\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useTForm.js","sources":["../../../../src/form/TForm/useTForm.tsx"],"sourcesContent":["import flatten from 'flat';\nimport {FormikValues, useFormik, FormikErrors, FormikTouched} from 'formik';\nimport {get, property, uniq} from 'lodash-es';\nimport {FormEvent, useEffect, useState} from 'react';\nimport {Message, Segment} from 'semantic-ui-react';\nimport type {TFormConfig} from './types';\n\nexport function useTForm<Values extends FormikValues = FormikValues, InitialValues = any>(config: TFormConfig<Values, InitialValues>) {\n\tconst {render, children, ...rest} = config;\n\t// @ts-ignore\n\tconst formik = useFormik(rest);\n\n\tuseEffect(() => {\n\t\tif (config.onValidate) config.onValidate(formik.isValid);\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [formik.isValid, config.onValidate]);\n\n\t// Get submit function\n\tuseEffect(() => {\n\t\tif (config.getSubmitFn) config.getSubmitFn(formik.submitForm);\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [formik.submitForm, config.getSubmitFn]);\n\n\t// On change event (if this ends up changing values it will cycle)\n\tuseEffect(() => {\n\t\tif (config.onChange) config.onChange(formik.values);\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [formik.values]);\n\n\t// Mark the error cleared if the form has been edited after an error\n\tconst [errorCleared, setErrorCleared] = useState(false);\n\tuseEffect(() => {\n\t\tif (config.error && config.error.message && !formik.isSubmitting) {\n\t\t\tsetErrorCleared(true);\n\t\t}\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [formik.values, config.error]);\n\n\t// Flatten the warnings (formik errors) and touch objects.\n\tconst flatWarnings = flatten<FormikErrors<Values>, {[key: string]: string}>(formik.errors);\n\tconst flatTouched = flatten<FormikTouched<Values>, {[key: string]: string}>(formik.touched);\n\n\t// Create an array of strings that are warnings (formik errors). If the submit count is greater than 0\n\t// then it will show all warnings. Otherwise only touched field warnings will be added to this array.\n\tconst warnings: string[] = uniq(\n\t\tObject.keys(flatWarnings).reduce<string[]>((memo, value) => {\n\t\t\tconst isTouched = flatTouched[value];\n\t\t\tif (isTouched || formik.submitCount > 0) {\n\t\t\t\treturn [...memo, get(flatWarnings, value)];\n\t\t\t}\n\t\t\treturn memo;\n\t\t}, []),\n\t);\n\n\t// Create an array of strings that are errors (graphql errors).\n\tlet errors: string[] = [];\n\tlet errorHeader = '';\n\tif (config.error && config.error.message) {\n\t\tif (config.error.graphQLErrors) {\n\t\t\terrors = config.error.graphQLErrors.reduce((memo, v) => {\n\t\t\t\tif (v.message) return [...memo, v.message];\n\t\t\t\treturn memo;\n\t\t\t}, [] as string[]);\n\t\t} else {\n\t\t\tconst errorMessage = config.error.message.slice(config.error.message.indexOf(': ') + 1);\n\t\t\terrors.push(errorMessage);\n\t\t}\n\t\terrorHeader = config.error.message.slice(0, config.error.message.indexOf(': '));\n\t}\n\terrors = uniq(errors);\n\n\t// Check if there are warnings or errors\n\tconst hasWarnings = !(formik.isValid || warnings.length === 0);\n\tconst hasErrors = errors.length > 0;\n\n\t// Render the warnings\n\tfunction renderWarnings() {\n\t\tif (!hasWarnings && !hasErrors) return null;\n\t\treturn (\n\t\t\t<Message warning={hasWarnings} error={hasErrors && !hasWarnings}>\n\t\t\t\t<Message.Header>{hasWarnings ? 'Some fields are not complete:' : `${errorHeader}:`}</Message.Header>\n\t\t\t\t{/* Put it in a segment to make sure the errorMessage isn't too big when there are a lot of errors */}\n\t\t\t\t<Segment style={{overflow: 'auto', maxHeight: 100}}>\n\t\t\t\t\t{(hasWarnings ? warnings : errors).map(msg => (\n\t\t\t\t\t\t<div key={msg}>{msg}</div>\n\t\t\t\t\t))}\n\t\t\t\t</Segment>\n\t\t\t</Message>\n\t\t);\n\t}\n\n\t// Returns true if the field has an error\n\tfunction fieldError(fieldName: keyof Values | string | number) {\n\t\treturn (!!property(fieldName)(formik.touched) || formik.submitCount > 0) && !!property(fieldName)(formik.errors);\n\t}\n\n\t// Handles the form submit\n\tfunction handleSubmit(e?: FormEvent<HTMLFormElement>) {\n\t\tsetErrorCleared(false);\n\t\tformik.handleSubmit(e);\n\t}\n\n\treturn {\n\t\t...formik,\n\t\thasErrors: hasErrors && !errorCleared,\n\t\thasWarnings,\n\t\tisValid: !hasWarnings,\n\t\tloading: config.loading ? config.loading : false,\n\t\tsubmitDisabled: hasWarnings || formik.isSubmitting,\n\t\terrorMarkedCleared: errorCleared,\n\t\tformError: hasErrors && !hasWarnings && !errorCleared && !formik.isSubmitting, // Convenience\n\t\trenderWarnings,\n\t\tfieldError,\n\t\thandleSubmit,\n\t};\n}\n"],"names":[],"mappings":"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"}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
export { useMoneyInput } from './money/useMoneyInput.js';
|
|
2
1
|
export { LocalDatePicker } from './date/LocalDatePicker/LocalDatePicker.js';
|
|
3
2
|
export { LocalMonthSelect } from './date/LocalMonthSelect/LocalMonthSelect.js';
|
|
4
3
|
export { LocalTimePicker } from './date/LocalTimePicker/LocalTimePicker.js';
|
|
5
4
|
export { MonthDayPicker } from './date/MonthDayPicker/MonthDayPicker.js';
|
|
6
5
|
export { MonthYearPicker } from './date/MonthYearPicker/MonthYearPicker.js';
|
|
7
6
|
export { YearSelect } from './date/YearSelect/YearSelect.js';
|
|
8
|
-
export { useTForm } from './form/TForm/useTForm.js';
|
|
9
7
|
export { TForm } from './form/TForm/TForm.js';
|
|
8
|
+
export { useTForm } from './form/TForm/useTForm.js';
|
|
10
9
|
export { MaskedInput } from './inputs/MaskedInput/MaskedInput.js';
|
|
10
|
+
import './inputs/MaskedInput/useMaskedInput.js';
|
|
11
11
|
export { RadioGroup } from './inputs/RadioGroup/RadioGroup.js';
|
|
12
12
|
export { Scriptel } from './inputs/Scriptel/Scriptel.js';
|
|
13
13
|
export { withScriptel } from './inputs/Scriptel/withScriptel.js';
|
|
@@ -23,10 +23,11 @@ export { StringEditCell } from './inputs/TableInput/StringEditCell.js';
|
|
|
23
23
|
export { DropdownCell } from './inputs/TableInput/DropdownCell.js';
|
|
24
24
|
export { HoverCell } from './inputs/TableInput/HoverCell.js';
|
|
25
25
|
export { addRowOnTab } from './inputs/TableInput/addRowOnTab.js';
|
|
26
|
+
export { useMoneyInput } from './money/useMoneyInput.js';
|
|
26
27
|
export { MoneyInput } from './money/MoneyInput/MoneyInput.js';
|
|
27
28
|
export { MoneyCurrencyInput } from './money/MoneyCurrencyInput/MoneyCurrencyInput.js';
|
|
29
|
+
export { Step } from './step/Step.js';
|
|
30
|
+
export { useStep } from './step/useStep.js';
|
|
28
31
|
export { FormStep } from './step/FormStep.js';
|
|
29
32
|
export { StepProvider } from './step/StepProvider.js';
|
|
30
|
-
export { useStep } from './step/useStep.js';
|
|
31
|
-
export { Step } from './step/Step.js';
|
|
32
33
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
1
2
|
import { formatDate } from '@thx/date';
|
|
2
3
|
import debug from 'debug';
|
|
3
|
-
import { useState } from 'react';
|
|
4
4
|
import CreditCards from 'react-credit-cards';
|
|
5
5
|
import 'react-credit-cards/es/styles-compiled.css';
|
|
6
6
|
import { Grid, Form, Input } from 'semantic-ui-react';
|
|
7
|
-
import { CreditCardNumberInput } from './CreditCardNumberInput.js';
|
|
8
7
|
import { MonthYearPicker } from '../../date/MonthYearPicker/MonthYearPicker.js';
|
|
8
|
+
import { CreditCardNumberInput } from './CreditCardNumberInput.js';
|
|
9
|
+
import './styles.css.js';
|
|
9
10
|
|
|
10
11
|
const d = debug("thx.controls.inputs.CreditCardInput");
|
|
11
12
|
function CreditCardInput(props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CreditCardInput.js","sources":["../../../../src/inputs/CreditCardInput/CreditCardInput.tsx"],"sourcesContent":["import type {LocalDate} from '@js-joda/core';\nimport {formatDate} from '@thx/date';\nimport debug from 'debug';\nimport {useState} from 'react';\nimport CreditCards, {Focused} from 'react-credit-cards';\nimport 'react-credit-cards/es/styles-compiled.css';\nimport {Form, Grid, Input, InputProps} from 'semantic-ui-react';\nimport {MonthYearPicker} from '../../date/MonthYearPicker';\nimport {CreditCardNumberInput} from './CreditCardNumberInput';\nimport './styles.css';\n\nconst d = debug('thx.controls.inputs.CreditCardInput');\n\nexport interface CreditCardData {\n\tnumber?: string;\n\tname?: string;\n\tcvc?: string;\n\texpiry?: LocalDate;\n}\n\nexport type CreditCardInputProps = {\n\tvalue?: CreditCardData;\n\tonChange?: (data: CreditCardData) => void;\n} & Pick<InputProps, 'disabled' | 'onBlur'>;\n\nexport function CreditCardInput(props: CreditCardInputProps) {\n\tconst {onBlur, disabled, onChange, value} = props;\n\tconst {name, number, cvc, expiry} = value || {};\n\n\tconst [focus, setFocus] = useState<Focused>('number');\n\n\treturn (\n\t\t<Grid>\n\t\t\t<Grid.Column width={4}>\n\t\t\t\t<Form>\n\t\t\t\t\t<Form.Group>\n\t\t\t\t\t\t<Form.Field width={9}>\n\t\t\t\t\t\t\t<label>Number</label>\n\t\t\t\t\t\t\t<CreditCardNumberInput\n\t\t\t\t\t\t\t\tonFocus={() => setFocus('number')}\n\t\t\t\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\t\t\t\tonChange={v => {\n\t\t\t\t\t\t\t\t\tonChange && onChange({name, number: v, cvc, expiry});\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Form.Field>\n\t\t\t\t\t\t<Form.Field width={4}>\n\t\t\t\t\t\t\t<label>CVC</label>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tvalue={cvc || ''}\n\t\t\t\t\t\t\t\tonChange={(ev, v) => {\n\t\t\t\t\t\t\t\t\tonChange && onChange({name, number, cvc: v.value, expiry});\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonFocus={() => setFocus('cvc')}\n\t\t\t\t\t\t\t\tonBlur={() => setFocus('name')}\n\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Form.Field>\n\t\t\t\t\t</Form.Group>\n\t\t\t\t\t<Form.Group>\n\t\t\t\t\t\t<Form.Field width={9}>\n\t\t\t\t\t\t\t<label>Name</label>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tvalue={name || ''}\n\t\t\t\t\t\t\t\tonChange={(ev, v) => {\n\t\t\t\t\t\t\t\t\tonChange && onChange({name: v.value, number, cvc, expiry});\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonFocus={() => setFocus('name')}\n\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t\tfluid\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Form.Field>\n\t\t\t\t\t\t<Form.Field width={6}>\n\t\t\t\t\t\t\t<label>Expiry</label>\n\t\t\t\t\t\t\t<MonthYearPicker\n\t\t\t\t\t\t\t\tvalue={expiry}\n\t\t\t\t\t\t\t\tonChange={v => {\n\t\t\t\t\t\t\t\t\tonChange && onChange({name, number, cvc, expiry: v});\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonFocus={() => setFocus('expiry')}\n\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Form.Field>\n\t\t\t\t\t</Form.Group>\n\t\t\t\t</Form>\n\t\t\t</Grid.Column>\n\t\t\t<Grid.Column width={12}>\n\t\t\t\t<CreditCards\n\t\t\t\t\tcvc={cvc || ''}\n\t\t\t\t\texpiry={formatDate(expiry, {format: 'MMuu'}) || ''}\n\t\t\t\t\tname={name || ''}\n\t\t\t\t\tnumber={number || ''}\n\t\t\t\t\tfocused={focus}\n\t\t\t\t\tcallback={(a, b) => {\n\t\t\t\t\t\td(a, b);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</Grid.Column>\n\t\t</Grid>\n\t);\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CreditCardInput.js","sources":["../../../../src/inputs/CreditCardInput/CreditCardInput.tsx"],"sourcesContent":["import type {LocalDate} from '@js-joda/core';\nimport {formatDate} from '@thx/date';\nimport debug from 'debug';\nimport {useState} from 'react';\nimport CreditCards, {Focused} from 'react-credit-cards';\nimport 'react-credit-cards/es/styles-compiled.css';\nimport {Form, Grid, Input, InputProps} from 'semantic-ui-react';\nimport {MonthYearPicker} from '../../date/MonthYearPicker';\nimport {CreditCardNumberInput} from './CreditCardNumberInput';\nimport './styles.css';\n\nconst d = debug('thx.controls.inputs.CreditCardInput');\n\nexport interface CreditCardData {\n\tnumber?: string;\n\tname?: string;\n\tcvc?: string;\n\texpiry?: LocalDate;\n}\n\nexport type CreditCardInputProps = {\n\tvalue?: CreditCardData;\n\tonChange?: (data: CreditCardData) => void;\n} & Pick<InputProps, 'disabled' | 'onBlur'>;\n\nexport function CreditCardInput(props: CreditCardInputProps) {\n\tconst {onBlur, disabled, onChange, value} = props;\n\tconst {name, number, cvc, expiry} = value || {};\n\n\tconst [focus, setFocus] = useState<Focused>('number');\n\n\treturn (\n\t\t<Grid>\n\t\t\t<Grid.Column width={4}>\n\t\t\t\t<Form>\n\t\t\t\t\t<Form.Group>\n\t\t\t\t\t\t<Form.Field width={9}>\n\t\t\t\t\t\t\t<label>Number</label>\n\t\t\t\t\t\t\t<CreditCardNumberInput\n\t\t\t\t\t\t\t\tonFocus={() => setFocus('number')}\n\t\t\t\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\t\t\t\tonChange={v => {\n\t\t\t\t\t\t\t\t\tonChange && onChange({name, number: v, cvc, expiry});\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Form.Field>\n\t\t\t\t\t\t<Form.Field width={4}>\n\t\t\t\t\t\t\t<label>CVC</label>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tvalue={cvc || ''}\n\t\t\t\t\t\t\t\tonChange={(ev, v) => {\n\t\t\t\t\t\t\t\t\tonChange && onChange({name, number, cvc: v.value, expiry});\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonFocus={() => setFocus('cvc')}\n\t\t\t\t\t\t\t\tonBlur={() => setFocus('name')}\n\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Form.Field>\n\t\t\t\t\t</Form.Group>\n\t\t\t\t\t<Form.Group>\n\t\t\t\t\t\t<Form.Field width={9}>\n\t\t\t\t\t\t\t<label>Name</label>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tvalue={name || ''}\n\t\t\t\t\t\t\t\tonChange={(ev, v) => {\n\t\t\t\t\t\t\t\t\tonChange && onChange({name: v.value, number, cvc, expiry});\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonFocus={() => setFocus('name')}\n\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t\tfluid\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Form.Field>\n\t\t\t\t\t\t<Form.Field width={6}>\n\t\t\t\t\t\t\t<label>Expiry</label>\n\t\t\t\t\t\t\t<MonthYearPicker\n\t\t\t\t\t\t\t\tvalue={expiry}\n\t\t\t\t\t\t\t\tonChange={v => {\n\t\t\t\t\t\t\t\t\tonChange && onChange({name, number, cvc, expiry: v});\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonFocus={() => setFocus('expiry')}\n\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Form.Field>\n\t\t\t\t\t</Form.Group>\n\t\t\t\t</Form>\n\t\t\t</Grid.Column>\n\t\t\t<Grid.Column width={12}>\n\t\t\t\t<CreditCards\n\t\t\t\t\tcvc={cvc || ''}\n\t\t\t\t\texpiry={formatDate(expiry, {format: 'MMuu'}) || ''}\n\t\t\t\t\tname={name || ''}\n\t\t\t\t\tnumber={number || ''}\n\t\t\t\t\tfocused={focus}\n\t\t\t\t\tcallback={(a, b) => {\n\t\t\t\t\t\td(a, b);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</Grid.Column>\n\t\t</Grid>\n\t);\n}\n"],"names":[],"mappings":";;;;;;;;;;AAWA,MAAM,CAAA,GAAI,MAAM,qCAAqC,CAAA,CAAA;AAc9C,SAAA,eAAA,CAAyB,KAA6B,EAAA;AAC5D,EAAA,MAAM,EAAC,MAAA,EAAQ,QAAU,EAAA,QAAA,EAAU,KAAS,EAAA,GAAA,KAAA,CAAA;AAC5C,EAAA,MAAM,EAAC,IAAM,EAAA,MAAA,EAAQ,GAAK,EAAA,MAAA,EAAA,GAAU,SAAS,EAAC,CAAA;AAE9C,EAAA,MAAM,CAAC,KAAA,EAAO,QAAY,CAAA,GAAA,QAAA,CAAkB,QAAQ,CAAA,CAAA;AAEpD,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,kBACC,KAAA,CAAA,aAAA,CAAA,IAAA,CAAK,MAAL,EAAA;AAAA,IAAY,KAAO,EAAA,CAAA;AAAA,GACnB,kBAAA,KAAA,CAAA,aAAA,CAAC,4BACC,KAAA,CAAA,aAAA,CAAA,IAAA,CAAK,OAAL,IACA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,KAAL,EAAA;AAAA,IAAW,KAAO,EAAA,CAAA;AAAA,GAAA,kBACjB,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAM,QAAM,CAAA,kBACZ,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA;AAAA,IACA,OAAA,EAAS,MAAM,QAAA,CAAS,QAAQ,CAAA;AAAA,IAChC,MAAA;AAAA,IACA,UAAU,CAAK,CAAA,KAAA;AACd,MAAA,QAAA,IAAY,SAAS,EAAC,IAAA,EAAM,QAAQ,CAAG,EAAA,GAAA,EAAK,QAAO,CAAA,CAAA;AAAA,KACpD;AAAA,IACA,QAAA;AAAA,GACD,CACD,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,IAAA,CAAK,KAAL,EAAA;AAAA,IAAW,KAAO,EAAA,CAAA;AAAA,GAAA,kBACjB,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAM,KAAG,CAAA,kBACT,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACA,OAAO,GAAO,IAAA,EAAA;AAAA,IACd,QAAA,EAAU,CAAC,EAAA,EAAI,CAAM,KAAA;AACpB,MAAY,QAAA,IAAA,QAAA,CAAS,EAAC,IAAM,EAAA,MAAA,EAAQ,KAAK,CAAE,CAAA,KAAA,EAAO,QAAO,CAAA,CAAA;AAAA,KAC1D;AAAA,IACA,OAAA,EAAS,MAAM,QAAA,CAAS,KAAK,CAAA;AAAA,IAC7B,MAAA,EAAQ,MAAM,QAAA,CAAS,MAAM,CAAA;AAAA,IAC7B,QAAA;AAAA,GACD,CACD,CACD,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,KAAL,EAAA,IAAA,kBACC,KAAA,CAAA,aAAA,CAAA,IAAA,CAAK,KAAL,EAAA;AAAA,IAAW,KAAO,EAAA,CAAA;AAAA,GAAA,kBACjB,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAM,MAAI,CAAA,kBACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACA,OAAO,IAAQ,IAAA,EAAA;AAAA,IACf,QAAA,EAAU,CAAC,EAAA,EAAI,CAAM,KAAA;AACpB,MAAY,QAAA,IAAA,QAAA,CAAS,EAAC,IAAM,EAAA,CAAA,CAAE,OAAO,MAAQ,EAAA,GAAA,EAAK,QAAO,CAAA,CAAA;AAAA,KAC1D;AAAA,IACA,OAAA,EAAS,MAAM,QAAA,CAAS,MAAM,CAAA;AAAA,IAC9B,QAAA;AAAA,IACA,KAAK,EAAA,IAAA;AAAA,GACN,CACD,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,IAAA,CAAK,KAAL,EAAA;AAAA,IAAW,KAAO,EAAA,CAAA;AAAA,GAAA,kBACjB,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAM,QAAM,CAAA,kBACZ,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,IACA,KAAO,EAAA,MAAA;AAAA,IACP,UAAU,CAAK,CAAA,KAAA;AACd,MAAA,QAAA,IAAY,SAAS,EAAC,IAAA,EAAM,QAAQ,GAAK,EAAA,MAAA,EAAQ,GAAE,CAAA,CAAA;AAAA,KACpD;AAAA,IACA,OAAA,EAAS,MAAM,QAAA,CAAS,QAAQ,CAAA;AAAA,IAChC,QAAA;AAAA,GACD,CACD,CACD,CACD,CACD,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,MAAL,EAAA;AAAA,IAAY,KAAO,EAAA,EAAA;AAAA,GAAA,kBAClB,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAA,IACA,KAAK,GAAO,IAAA,EAAA;AAAA,IACZ,QAAQ,UAAW,CAAA,MAAA,EAAQ,EAAC,MAAQ,EAAA,MAAA,EAAO,CAAK,IAAA,EAAA;AAAA,IAChD,MAAM,IAAQ,IAAA,EAAA;AAAA,IACd,QAAQ,MAAU,IAAA,EAAA;AAAA,IAClB,OAAS,EAAA,KAAA;AAAA,IACT,QAAA,EAAU,CAAC,CAAA,EAAG,CAAM,KAAA;AACnB,MAAA,CAAA,CAAE,GAAG,CAAC,CAAA,CAAA;AAAA,KACP;AAAA,GACD,CACD,CACD,CAAA,CAAA;AAEF;;;;"}
|