@thx/controls 16.0.0-alpha.23 → 16.0.1
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 +13 -60
- package/dist/esm/date/LocalDatePicker/LocalDatePicker.js.map +1 -0
- package/dist/esm/date/LocalDatePicker/MaskedDateInput.js +7 -35
- package/dist/esm/date/LocalDatePicker/MaskedDateInput.js.map +1 -0
- package/dist/esm/date/LocalMonthSelect/LocalMonthSelect.js +7 -32
- package/dist/esm/date/LocalMonthSelect/LocalMonthSelect.js.map +1 -0
- package/dist/esm/date/LocalTimePicker/LocalTimePicker.js +13 -57
- package/dist/esm/date/LocalTimePicker/LocalTimePicker.js.map +1 -0
- package/dist/esm/date/LocalTimePicker/MaskedTimeInput.js +8 -33
- package/dist/esm/date/LocalTimePicker/MaskedTimeInput.js.map +1 -0
- package/dist/esm/date/MonthDayPicker/MonthDayPicker.js +13 -57
- package/dist/esm/date/MonthDayPicker/MonthDayPicker.js.map +1 -0
- package/dist/esm/date/MonthYearPicker/MonthYearPicker.js +15 -61
- package/dist/esm/date/MonthYearPicker/MonthYearPicker.js.map +1 -0
- package/dist/esm/date/YearSelect/YearSelect.js +7 -32
- 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 +5 -4
- package/dist/esm/form/TForm/TForm.js.map +1 -0
- package/dist/esm/form/TForm/useTForm.js +7 -38
- package/dist/esm/form/TForm/useTForm.js.map +1 -0
- package/dist/esm/index.js +6 -4
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/inputs/CreditCardInput/CreditCardInput.js +4 -2
- package/dist/esm/inputs/CreditCardInput/CreditCardInput.js.map +1 -0
- package/dist/esm/inputs/CreditCardInput/CreditCardNumberInput.js +6 -35
- 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 +6 -30
- package/dist/esm/inputs/MaskedInput/MaskedInput.js.map +1 -0
- package/dist/esm/inputs/MaskedInput/useMaskedInput.js +14 -32
- package/dist/esm/inputs/MaskedInput/useMaskedInput.js.map +1 -0
- package/dist/esm/inputs/PhoneInput/PhoneInput.js +7 -34
- package/dist/esm/inputs/PhoneInput/PhoneInput.js.map +1 -0
- package/dist/esm/inputs/RadioGroup/RadioGroup.js +7 -32
- package/dist/esm/inputs/RadioGroup/RadioGroup.js.map +1 -0
- package/dist/esm/inputs/Scriptel/Scriptel.js +2 -1
- package/dist/esm/inputs/Scriptel/Scriptel.js.map +1 -0
- package/dist/esm/inputs/Scriptel/ScriptelContext.js +1 -0
- package/dist/esm/inputs/Scriptel/ScriptelContext.js.map +1 -0
- package/dist/esm/inputs/Scriptel/scriptel/enums.js +1 -0
- package/dist/esm/inputs/Scriptel/scriptel/enums.js.map +1 -0
- package/dist/esm/inputs/Scriptel/scriptel/index.js +1 -0
- package/dist/esm/inputs/Scriptel/scriptel/index.js.map +1 -0
- package/dist/esm/inputs/Scriptel/withScriptel.js +7 -17
- package/dist/esm/inputs/Scriptel/withScriptel.js.map +1 -0
- package/dist/esm/inputs/ScriptelInput/ScriptelInput.js +8 -10
- package/dist/esm/inputs/ScriptelInput/ScriptelInput.js.map +1 -0
- package/dist/esm/inputs/SinInput/SinInput.js +6 -35
- package/dist/esm/inputs/SinInput/SinInput.js.map +1 -0
- package/dist/esm/inputs/TableInput/DropdownCell.js +6 -34
- package/dist/esm/inputs/TableInput/DropdownCell.js.map +1 -0
- package/dist/esm/inputs/TableInput/HoverCell.js +5 -17
- package/dist/esm/inputs/TableInput/HoverCell.js.map +1 -0
- package/dist/esm/inputs/TableInput/MoneyCell.js +3 -1
- package/dist/esm/inputs/TableInput/MoneyCell.js.map +1 -0
- package/dist/esm/inputs/TableInput/MoneyEditCell.js +4 -3
- package/dist/esm/inputs/TableInput/MoneyEditCell.js.map +1 -0
- package/dist/esm/inputs/TableInput/MoneySumFooter.js +2 -0
- package/dist/esm/inputs/TableInput/MoneySumFooter.js.map +1 -0
- package/dist/esm/inputs/TableInput/StringEditCell.js +6 -24
- package/dist/esm/inputs/TableInput/StringEditCell.js.map +1 -0
- package/dist/esm/inputs/TableInput/TableInput.js +25 -27
- package/dist/esm/inputs/TableInput/TableInput.js.map +1 -0
- package/dist/esm/inputs/TableInput/addRowOnTab.js +1 -0
- package/dist/esm/inputs/TableInput/addRowOnTab.js.map +1 -0
- package/dist/esm/money/MoneyCurrencyInput/MoneyCurrencyInput.js +8 -37
- package/dist/esm/money/MoneyCurrencyInput/MoneyCurrencyInput.js.map +1 -0
- package/dist/esm/money/MoneyInput/MoneyInput.js +6 -31
- package/dist/esm/money/MoneyInput/MoneyInput.js.map +1 -0
- package/dist/esm/money/useMoneyInput.js +8 -10
- package/dist/esm/money/useMoneyInput.js.map +1 -0
- package/dist/esm/step/FormStep.js +2 -1
- package/dist/esm/step/FormStep.js.map +1 -0
- package/dist/esm/step/Step.js +2 -0
- package/dist/esm/step/Step.js.map +1 -0
- package/dist/esm/step/StepProvider.js +18 -37
- package/dist/esm/step/StepProvider.js.map +1 -0
- package/dist/esm/step/stepContext.js +1 -0
- package/dist/esm/step/stepContext.js.map +1 -0
- package/dist/esm/step/useStep.js +1 -0
- package/dist/esm/step/useStep.js.map +1 -0
- 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 +11 -19
|
@@ -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;;;;"}
|
|
@@ -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",
|
|
@@ -85,3 +59,4 @@ function YearSelect(props) {
|
|
|
85
59
|
}
|
|
86
60
|
|
|
87
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;;;;"}
|
|
@@ -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, {
|
|
@@ -26,3 +26,4 @@ function TForm(props) {
|
|
|
26
26
|
}
|
|
27
27
|
|
|
28
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;;;;"}
|
|
@@ -1,44 +1,11 @@
|
|
|
1
|
+
import React, { useEffect, useState } from 'react';
|
|
1
2
|
import flatten from 'flat';
|
|
2
3
|
import { useFormik } from 'formik';
|
|
3
|
-
import get from 'lodash
|
|
4
|
-
import property from 'lodash/property';
|
|
5
|
-
import uniq from 'lodash/uniq';
|
|
6
|
-
import { useEffect, useState } from 'react';
|
|
4
|
+
import { uniq, get, property } from 'lodash-es';
|
|
7
5
|
import { Message, Segment } from 'semantic-ui-react';
|
|
8
6
|
|
|
9
|
-
var __defProp = Object.defineProperty;
|
|
10
|
-
var __defProps = Object.defineProperties;
|
|
11
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
12
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
13
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
14
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
15
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
16
|
-
var __spreadValues = (a, b) => {
|
|
17
|
-
for (var prop in b || (b = {}))
|
|
18
|
-
if (__hasOwnProp.call(b, prop))
|
|
19
|
-
__defNormalProp(a, prop, b[prop]);
|
|
20
|
-
if (__getOwnPropSymbols)
|
|
21
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
22
|
-
if (__propIsEnum.call(b, prop))
|
|
23
|
-
__defNormalProp(a, prop, b[prop]);
|
|
24
|
-
}
|
|
25
|
-
return a;
|
|
26
|
-
};
|
|
27
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
28
|
-
var __objRest = (source, exclude) => {
|
|
29
|
-
var target = {};
|
|
30
|
-
for (var prop in source)
|
|
31
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
32
|
-
target[prop] = source[prop];
|
|
33
|
-
if (source != null && __getOwnPropSymbols)
|
|
34
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
35
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
36
|
-
target[prop] = source[prop];
|
|
37
|
-
}
|
|
38
|
-
return target;
|
|
39
|
-
};
|
|
40
7
|
function useTForm(config) {
|
|
41
|
-
const
|
|
8
|
+
const { render, children, ...rest } = config;
|
|
42
9
|
const formik = useFormik(rest);
|
|
43
10
|
useEffect(() => {
|
|
44
11
|
if (config.onValidate)
|
|
@@ -104,7 +71,8 @@ function useTForm(config) {
|
|
|
104
71
|
setErrorCleared(false);
|
|
105
72
|
formik.handleSubmit(e);
|
|
106
73
|
}
|
|
107
|
-
return
|
|
74
|
+
return {
|
|
75
|
+
...formik,
|
|
108
76
|
hasErrors: hasErrors && !errorCleared,
|
|
109
77
|
hasWarnings,
|
|
110
78
|
isValid: !hasWarnings,
|
|
@@ -115,7 +83,8 @@ function useTForm(config) {
|
|
|
115
83
|
renderWarnings,
|
|
116
84
|
fieldError,
|
|
117
85
|
handleSubmit
|
|
118
|
-
}
|
|
86
|
+
};
|
|
119
87
|
}
|
|
120
88
|
|
|
121
89
|
export { useTForm };
|
|
90
|
+
//# sourceMappingURL=useTForm.js.map
|
|
@@ -0,0 +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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"}
|
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,9 +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
|
-
|
|
31
|
-
export { Step } from './step/Step.js';
|
|
33
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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) {
|
|
@@ -67,3 +68,4 @@ function CreditCardInput(props) {
|
|
|
67
68
|
}
|
|
68
69
|
|
|
69
70
|
export { CreditCardInput };
|
|
71
|
+
//# sourceMappingURL=CreditCardInput.js.map
|
|
@@ -0,0 +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":"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"}
|
|
@@ -1,41 +1,10 @@
|
|
|
1
|
+
import React, { useState, useCallback, useMemo } from 'react';
|
|
1
2
|
import creditCardType from 'credit-card-type';
|
|
2
3
|
import debug from 'debug';
|
|
3
4
|
import { validate } from 'luhn';
|
|
4
|
-
import { useState, useCallback, useMemo } from 'react';
|
|
5
5
|
import { Input, Icon } from 'semantic-ui-react';
|
|
6
6
|
import { useMaskedInput } from '../MaskedInput/useMaskedInput.js';
|
|
7
7
|
|
|
8
|
-
var __defProp = Object.defineProperty;
|
|
9
|
-
var __defProps = Object.defineProperties;
|
|
10
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
11
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
12
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
13
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
14
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
15
|
-
var __spreadValues = (a, b) => {
|
|
16
|
-
for (var prop in b || (b = {}))
|
|
17
|
-
if (__hasOwnProp.call(b, prop))
|
|
18
|
-
__defNormalProp(a, prop, b[prop]);
|
|
19
|
-
if (__getOwnPropSymbols)
|
|
20
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
21
|
-
if (__propIsEnum.call(b, prop))
|
|
22
|
-
__defNormalProp(a, prop, b[prop]);
|
|
23
|
-
}
|
|
24
|
-
return a;
|
|
25
|
-
};
|
|
26
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
27
|
-
var __objRest = (source, exclude) => {
|
|
28
|
-
var target = {};
|
|
29
|
-
for (var prop in source)
|
|
30
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
31
|
-
target[prop] = source[prop];
|
|
32
|
-
if (source != null && __getOwnPropSymbols)
|
|
33
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
34
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
35
|
-
target[prop] = source[prop];
|
|
36
|
-
}
|
|
37
|
-
return target;
|
|
38
|
-
};
|
|
39
8
|
const d = debug("thx.controls.inputs.CreditCardInput.CreditCardNumberInput");
|
|
40
9
|
function getIcon(type) {
|
|
41
10
|
switch (type) {
|
|
@@ -54,7 +23,7 @@ function getIcon(type) {
|
|
|
54
23
|
}
|
|
55
24
|
}
|
|
56
25
|
function CreditCardNumberInput(props) {
|
|
57
|
-
const
|
|
26
|
+
const { value, onChange, ...rest } = props;
|
|
58
27
|
const [icon, setIcon] = useState("credit card");
|
|
59
28
|
const [color, setColor] = useState("black");
|
|
60
29
|
const checkValidation = useCallback((valueArray) => {
|
|
@@ -91,9 +60,10 @@ function CreditCardNumberInput(props) {
|
|
|
91
60
|
onChange && onChange(v);
|
|
92
61
|
}
|
|
93
62
|
});
|
|
94
|
-
return /* @__PURE__ */ React.createElement(Input,
|
|
63
|
+
return /* @__PURE__ */ React.createElement(Input, {
|
|
64
|
+
...rest,
|
|
95
65
|
icon: true
|
|
96
|
-
}
|
|
66
|
+
}, /* @__PURE__ */ React.createElement("input", {
|
|
97
67
|
ref: cardNumberRef
|
|
98
68
|
}), /* @__PURE__ */ React.createElement(Icon, {
|
|
99
69
|
name: icon,
|
|
@@ -103,3 +73,4 @@ function CreditCardNumberInput(props) {
|
|
|
103
73
|
}
|
|
104
74
|
|
|
105
75
|
export { CreditCardNumberInput };
|
|
76
|
+
//# sourceMappingURL=CreditCardNumberInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CreditCardNumberInput.js","sources":["../../../../src/inputs/CreditCardInput/CreditCardNumberInput.tsx"],"sourcesContent":["import creditCardType from 'credit-card-type';\nimport debug from 'debug';\nimport {validate} from 'luhn';\nimport {useCallback, useMemo, useState} from 'react';\nimport {Icon, Input, InputProps, SemanticICONS, SemanticCOLORS} from 'semantic-ui-react';\nimport type {MaskedInputProps} from '../MaskedInput';\nimport {useMaskedInput} from '../MaskedInput/useMaskedInput';\n\nconst d = debug('thx.controls.inputs.CreditCardInput.CreditCardNumberInput');\n\ninterface CreditCardNumberInputProps {\n\tonChange?: (value: string | undefined) => void;\n\tvalue?: string;\n}\n\nfunction getIcon(type: string): SemanticICONS {\n\tswitch (type) {\n\t\tcase 'visa':\n\t\t\treturn 'cc visa';\n\t\tcase 'mastercard':\n\t\t\treturn 'cc mastercard';\n\t\tcase 'american-express':\n\t\t\treturn 'cc amex';\n\t\tcase 'diners-club':\n\t\t\treturn 'cc diners club';\n\t\tcase 'jcb':\n\t\t\treturn 'cc jcb';\n\t\tdefault:\n\t\t\treturn 'credit card';\n\t}\n}\n\nexport function CreditCardNumberInput(props: CreditCardNumberInputProps & Omit<InputProps, 'onChange'>) {\n\tconst {value, onChange, ...rest} = props;\n\tconst [icon, setIcon] = useState<SemanticICONS>('credit card');\n\tconst [color, setColor] = useState<SemanticCOLORS>('black');\n\n\tconst checkValidation = useCallback((valueArray: string[]) => {\n\t\tconst num = valueArray.join('').replaceAll(/(_|\\s)/g, '');\n\t\tconst typ = creditCardType(num);\n\t\tconst isValid = validate(num);\n\n\t\tif (typ.length === 1) {\n\t\t\tsetIcon(getIcon(typ[0].type));\n\t\t} else {\n\t\t\tsetIcon('credit card');\n\t\t}\n\n\t\tif (num.length > 0) {\n\t\t\tif (isValid) {\n\t\t\t\tsetColor('green');\n\t\t\t} else {\n\t\t\t\tsetColor('red');\n\t\t\t}\n\t\t} else {\n\t\t\tsetColor('black');\n\t\t}\n\n\t\treturn isValid;\n\t}, []);\n\n\tconst creditCardMask: MaskedInputProps['mask'] = useMemo(\n\t\t() => ({\n\t\t\tmask: '9999 9999 9999 9999',\n\t\t\tisComplete: checkValidation,\n\t\t\tautoUnmask: true,\n\t\t}),\n\t\t[checkValidation],\n\t);\n\n\tconst cardNumberRef = useMaskedInput({\n\t\tmask: creditCardMask,\n\t\tvalue,\n\t\tonChange: v => {\n\t\t\tconst typ = creditCardType(v || '');\n\t\t\td(v, typ);\n\t\t\t// checkValidation([v || '']);\n\t\t\tonChange && onChange(v);\n\t\t},\n\t});\n\n\treturn (\n\t\t<Input {...rest} icon>\n\t\t\t<input ref={cardNumberRef} />\n\t\t\t<Icon name={icon} color={color} size=\"large\" />\n\t\t</Input>\n\t);\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,uDAAyD;AACjF;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,40 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import debug from 'debug';
|
|
2
3
|
import { Input } from 'semantic-ui-react';
|
|
3
4
|
import { useMaskedInput } from './useMaskedInput.js';
|
|
4
5
|
|
|
5
|
-
var __defProp = Object.defineProperty;
|
|
6
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
-
var __spreadValues = (a, b) => {
|
|
11
|
-
for (var prop in b || (b = {}))
|
|
12
|
-
if (__hasOwnProp.call(b, prop))
|
|
13
|
-
__defNormalProp(a, prop, b[prop]);
|
|
14
|
-
if (__getOwnPropSymbols)
|
|
15
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
-
if (__propIsEnum.call(b, prop))
|
|
17
|
-
__defNormalProp(a, prop, b[prop]);
|
|
18
|
-
}
|
|
19
|
-
return a;
|
|
20
|
-
};
|
|
21
|
-
var __objRest = (source, exclude) => {
|
|
22
|
-
var target = {};
|
|
23
|
-
for (var prop in source)
|
|
24
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
-
target[prop] = source[prop];
|
|
26
|
-
if (source != null && __getOwnPropSymbols)
|
|
27
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
-
target[prop] = source[prop];
|
|
30
|
-
}
|
|
31
|
-
return target;
|
|
32
|
-
};
|
|
33
6
|
debug("thx.controls.inputs.MaskedInput");
|
|
34
7
|
function MaskedInput(props) {
|
|
35
|
-
const
|
|
8
|
+
const { name, onBlur, disabled, onChange, mask, value, ...rest } = props;
|
|
36
9
|
const inputRef = useMaskedInput({ mask, value, onChange });
|
|
37
|
-
return /* @__PURE__ */ React.createElement(Input,
|
|
10
|
+
return /* @__PURE__ */ React.createElement(Input, {
|
|
11
|
+
...rest
|
|
12
|
+
}, /* @__PURE__ */ React.createElement("input", {
|
|
38
13
|
disabled,
|
|
39
14
|
name,
|
|
40
15
|
ref: inputRef,
|
|
@@ -43,3 +18,4 @@ function MaskedInput(props) {
|
|
|
43
18
|
}
|
|
44
19
|
|
|
45
20
|
export { MaskedInput };
|
|
21
|
+
//# sourceMappingURL=MaskedInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MaskedInput.js","sources":["../../../../src/inputs/MaskedInput/MaskedInput.tsx"],"sourcesContent":["import debug from 'debug';\nimport {Input, InputProps} from 'semantic-ui-react';\nimport {useMaskedInput, UseMaskedInputProps} from './useMaskedInput';\n\nconst d = debug('thx.controls.inputs.MaskedInput');\n\nexport type MaskedInputProps = {\n\tname?: string;\n\tonBlur?: (event: any) => void;\n} & UseMaskedInputProps &\n\tOmit<InputProps, 'onChange'>;\n\nexport function MaskedInput(props: MaskedInputProps) {\n\tconst {name, onBlur, disabled, onChange, mask, value, ...rest} = props;\n\n\tconst inputRef = useMaskedInput({mask, value, onChange});\n\n\treturn (\n\t\t<Input {...rest}>\n\t\t\t<input disabled={disabled} name={name} ref={inputRef} onBlur={onBlur} />\n\t\t</Input>\n\t);\n}\n"],"names":[],"mappings":";;;;;AAIU,MAAM,iCAAiC,EAAA;AAQ1C,SAAA,WAAA,CAAqB,KAAyB,EAAA;AACpD,EAAA,MAAM,EAAC,IAAM,EAAA,MAAA,EAAQ,UAAU,QAAU,EAAA,IAAA,EAAM,UAAU,IAAQ,EAAA,GAAA,KAAA,CAAA;AAEjE,EAAA,MAAM,WAAW,cAAe,CAAA,EAAC,IAAM,EAAA,KAAA,EAAO,UAAS,CAAA,CAAA;AAEvD,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAU,GAAA,IAAA;AAAA,GAAA,kBACT,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAA,IAAM,QAAA;AAAA,IAAoB,IAAA;AAAA,IAAY,GAAK,EAAA,QAAA;AAAA,IAAU,MAAA;AAAA,GAAgB,CACvE,CAAA,CAAA;AAEF;;;;"}
|
|
@@ -1,27 +1,9 @@
|
|
|
1
1
|
import debug from 'debug';
|
|
2
|
-
import
|
|
2
|
+
import InputmaskImport from 'inputmask';
|
|
3
3
|
import { useRef, useEffect } from 'react';
|
|
4
4
|
import useDeepCompareEffect from 'use-deep-compare-effect';
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
var __defProps = Object.defineProperties;
|
|
8
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
9
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
10
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
-
var __spreadValues = (a, b) => {
|
|
14
|
-
for (var prop in b || (b = {}))
|
|
15
|
-
if (__hasOwnProp.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
if (__getOwnPropSymbols)
|
|
18
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
-
if (__propIsEnum.call(b, prop))
|
|
20
|
-
__defNormalProp(a, prop, b[prop]);
|
|
21
|
-
}
|
|
22
|
-
return a;
|
|
23
|
-
};
|
|
24
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
6
|
+
const { default: Inputmask } = InputmaskImport;
|
|
25
7
|
const d = debug("thx.controls.inputs.MaskedInput.useMaskedInput");
|
|
26
8
|
function useMaskedInput(props) {
|
|
27
9
|
const { value, onChange, onSet, mask } = props;
|
|
@@ -31,29 +13,29 @@ function useMaskedInput(props) {
|
|
|
31
13
|
if (!inputElement.current)
|
|
32
14
|
throw new Error("Could not get input element");
|
|
33
15
|
d("Creating input mask instance");
|
|
34
|
-
|
|
16
|
+
d(Inputmask);
|
|
17
|
+
maskInstance.current = new Inputmask({
|
|
18
|
+
...mask,
|
|
35
19
|
oncomplete() {
|
|
36
|
-
var _a;
|
|
37
20
|
if (onChange)
|
|
38
|
-
onChange(
|
|
39
|
-
if (mask
|
|
21
|
+
onChange(inputElement.current?.value);
|
|
22
|
+
if (mask?.oncomplete)
|
|
40
23
|
mask.oncomplete();
|
|
41
24
|
},
|
|
42
25
|
oncleared() {
|
|
43
26
|
if (onChange)
|
|
44
27
|
onChange();
|
|
45
|
-
if (mask
|
|
28
|
+
if (mask?.oncleared)
|
|
46
29
|
mask.oncleared();
|
|
47
30
|
},
|
|
48
31
|
onincomplete() {
|
|
49
|
-
var _a;
|
|
50
32
|
if (onChange)
|
|
51
|
-
onChange(
|
|
52
|
-
if (mask
|
|
33
|
+
onChange(inputElement.current?.value);
|
|
34
|
+
if (mask?.onincomplete)
|
|
53
35
|
mask.onincomplete();
|
|
54
36
|
}
|
|
55
|
-
})
|
|
56
|
-
maskInstance.current
|
|
37
|
+
});
|
|
38
|
+
maskInstance.current?.mask(inputElement.current);
|
|
57
39
|
return () => {
|
|
58
40
|
if (maskInstance.current) {
|
|
59
41
|
d("Cleaning up input mask instance");
|
|
@@ -63,8 +45,7 @@ function useMaskedInput(props) {
|
|
|
63
45
|
};
|
|
64
46
|
}, [mask]);
|
|
65
47
|
useEffect(() => {
|
|
66
|
-
|
|
67
|
-
if (inputElement.current && ((_a = inputElement.current) == null ? void 0 : _a.value) !== value && value !== void 0) {
|
|
48
|
+
if (inputElement.current && inputElement.current?.value !== value && value !== void 0) {
|
|
68
49
|
d("Value is changing:", value);
|
|
69
50
|
inputElement.current.value = value;
|
|
70
51
|
onSet && onSet(value);
|
|
@@ -74,3 +55,4 @@ function useMaskedInput(props) {
|
|
|
74
55
|
}
|
|
75
56
|
|
|
76
57
|
export { useMaskedInput };
|
|
58
|
+
//# sourceMappingURL=useMaskedInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMaskedInput.js","sources":["../../../../src/inputs/MaskedInput/useMaskedInput.ts"],"sourcesContent":["import debug from 'debug';\nimport InputmaskImport from 'inputmask';\nimport type InputmaskType from 'inputmask';\nimport {useEffect, useRef} from 'react';\nimport useDeepCompareEffect from 'use-deep-compare-effect';\n\n// @ts-ignore\nconst {default: Inputmask} = InputmaskImport;\n\nconst d = debug('thx.controls.inputs.MaskedInput.useMaskedInput');\n\nexport interface UseMaskedInputProps {\n\tvalue?: string;\n\tonChange?: (value?: string) => void;\n\tmask?: Inputmask.Options;\n\tonSet?: (value?: string) => void;\n}\n\nexport function useMaskedInput(props: UseMaskedInputProps) {\n\tconst {value, onChange, onSet, mask} = props;\n\n\tconst inputElement = useRef<HTMLInputElement | null>(null);\n\tconst maskInstance = useRef<InputmaskType.Instance | null>(null);\n\n\tuseDeepCompareEffect(() => {\n\t\tif (!inputElement.current) throw new Error('Could not get input element');\n\n\t\td('Creating input mask instance');\n\t\td(Inputmask);\n\t\tmaskInstance.current = new Inputmask({\n\t\t\t...mask,\n\t\t\toncomplete() {\n\t\t\t\tif (onChange) onChange(inputElement.current?.value);\n\t\t\t\tif (mask?.oncomplete) mask.oncomplete();\n\t\t\t},\n\t\t\toncleared() {\n\t\t\t\tif (onChange) onChange();\n\t\t\t\tif (mask?.oncleared) mask.oncleared();\n\t\t\t},\n\t\t\tonincomplete() {\n\t\t\t\tif (onChange) onChange(inputElement.current?.value);\n\t\t\t\tif (mask?.onincomplete) mask.onincomplete();\n\t\t\t},\n\t\t});\n\t\tmaskInstance.current?.mask(inputElement.current);\n\n\t\treturn () => {\n\t\t\tif (maskInstance.current) {\n\t\t\t\td('Cleaning up input mask instance');\n\t\t\t\tmaskInstance.current.remove();\n\t\t\t\tmaskInstance.current = null;\n\t\t\t}\n\t\t};\n\t}, [mask]);\n\n\t// If we change the value prop we need to sync the DOM value to display the new value\n\tuseEffect(() => {\n\t\tif (inputElement.current && inputElement.current?.value !== value && value !== undefined) {\n\t\t\td('Value is changing:', value);\n\t\t\tinputElement.current.value = value;\n\t\t\tonSet && onSet(value);\n\t\t}\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [value]);\n\n\treturn inputElement;\n}\n"],"names":[],"mappings":";;;;;AAOA,MAAM,EAAC,SAAS,SAAa,EAAA,GAAA,eAAA,CAAA;AAE7B,MAAM,CAAA,GAAI,MAAM,gDAAgD,CAAA,CAAA;AASzD,SAAA,cAAA,CAAwB,KAA4B,EAAA;AAC1D,EAAA,MAAM,EAAC,KAAA,EAAO,QAAU,EAAA,KAAA,EAAO,IAAQ,EAAA,GAAA,KAAA,CAAA;AAEvC,EAAM,MAAA,YAAA,GAAe,OAAgC,IAAI,CAAA,CAAA;AACzD,EAAM,MAAA,YAAA,GAAe,OAAsC,IAAI,CAAA,CAAA;AAE/D,EAAA,oBAAA,CAAqB,MAAM;AAC1B,IAAA,IAAI,CAAC,YAAa,CAAA,OAAA;AAAS,MAAM,MAAA,IAAI,MAAM,6BAA6B,CAAA,CAAA;AAExE,IAAA,CAAA,CAAE,8BAA8B,CAAA,CAAA;AAChC,IAAA,CAAA,CAAE,SAAS,CAAA,CAAA;AACX,IAAa,YAAA,CAAA,OAAA,GAAU,IAAI,SAAU,CAAA;AAAA,MACjC,GAAA,IAAA;AAAA,MACH,UAAa,GAAA;AACZ,QAAI,IAAA,QAAA;AAAU,UAAS,QAAA,CAAA,YAAA,CAAa,SAAS,KAAK,CAAA,CAAA;AAClD,QAAA,IAAI,IAAM,EAAA,UAAA;AAAY,UAAA,IAAA,CAAK,UAAW,EAAA,CAAA;AAAA,OACvC;AAAA,MACA,SAAY,GAAA;AACX,QAAI,IAAA,QAAA;AAAU,UAAS,QAAA,EAAA,CAAA;AACvB,QAAA,IAAI,IAAM,EAAA,SAAA;AAAW,UAAA,IAAA,CAAK,SAAU,EAAA,CAAA;AAAA,OACrC;AAAA,MACA,YAAe,GAAA;AACd,QAAI,IAAA,QAAA;AAAU,UAAS,QAAA,CAAA,YAAA,CAAa,SAAS,KAAK,CAAA,CAAA;AAClD,QAAA,IAAI,IAAM,EAAA,YAAA;AAAc,UAAA,IAAA,CAAK,YAAa,EAAA,CAAA;AAAA,OAC3C;AAAA,KACA,CAAA,CAAA;AACD,IAAa,YAAA,CAAA,OAAA,EAAS,IAAK,CAAA,YAAA,CAAa,OAAO,CAAA,CAAA;AAE/C,IAAA,OAAO,MAAM;AACZ,MAAA,IAAI,aAAa,OAAS,EAAA;AACzB,QAAA,CAAA,CAAE,iCAAiC,CAAA,CAAA;AACnC,QAAA,YAAA,CAAa,QAAQ,MAAO,EAAA,CAAA;AAC5B,QAAA,YAAA,CAAa,OAAU,GAAA,IAAA,CAAA;AAAA,OACxB;AAAA,KACD,CAAA;AAAA,GACD,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAGT,EAAA,SAAA,CAAU,MAAM;AACf,IAAA,IAAI,aAAa,OAAW,IAAA,YAAA,CAAa,SAAS,KAAU,KAAA,KAAA,IAAS,UAAU,KAAW,CAAA,EAAA;AACzF,MAAA,CAAA,CAAE,sBAAsB,KAAK,CAAA,CAAA;AAC7B,MAAA,YAAA,CAAa,QAAQ,KAAQ,GAAA,KAAA,CAAA;AAC7B,MAAA,KAAA,IAAS,MAAM,KAAK,CAAA,CAAA;AAAA,KACrB;AAAA,GAED,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AAEV,EAAO,OAAA,YAAA,CAAA;AACR;;;;"}
|
|
@@ -1,48 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import debug from 'debug';
|
|
2
3
|
import { MaskedInput } from '../MaskedInput/MaskedInput.js';
|
|
4
|
+
import '../MaskedInput/useMaskedInput.js';
|
|
3
5
|
|
|
4
|
-
var __defProp = Object.defineProperty;
|
|
5
|
-
var __defProps = Object.defineProperties;
|
|
6
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
10
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
11
|
-
var __spreadValues = (a, b) => {
|
|
12
|
-
for (var prop in b || (b = {}))
|
|
13
|
-
if (__hasOwnProp.call(b, prop))
|
|
14
|
-
__defNormalProp(a, prop, b[prop]);
|
|
15
|
-
if (__getOwnPropSymbols)
|
|
16
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
17
|
-
if (__propIsEnum.call(b, prop))
|
|
18
|
-
__defNormalProp(a, prop, b[prop]);
|
|
19
|
-
}
|
|
20
|
-
return a;
|
|
21
|
-
};
|
|
22
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
23
|
-
var __objRest = (source, exclude) => {
|
|
24
|
-
var target = {};
|
|
25
|
-
for (var prop in source)
|
|
26
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
27
|
-
target[prop] = source[prop];
|
|
28
|
-
if (source != null && __getOwnPropSymbols)
|
|
29
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
30
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
31
|
-
target[prop] = source[prop];
|
|
32
|
-
}
|
|
33
|
-
return target;
|
|
34
|
-
};
|
|
35
6
|
debug("thx.controls.inputs.PhoneInput");
|
|
36
7
|
function PhoneInput(props) {
|
|
37
|
-
const
|
|
8
|
+
const { extension, ...rest } = props;
|
|
38
9
|
const mask = {
|
|
39
10
|
mask: extension ? "((999) 999-9999[ x9999])|(+9 (999) 999-9999[ x9999])" : "((999) 999-9999)|( +9 (999) 999-9999)",
|
|
40
11
|
greedy: false,
|
|
41
12
|
autoUnmask: true
|
|
42
13
|
};
|
|
43
|
-
return /* @__PURE__ */ React.createElement(MaskedInput,
|
|
14
|
+
return /* @__PURE__ */ React.createElement(MaskedInput, {
|
|
15
|
+
...rest,
|
|
44
16
|
mask
|
|
45
|
-
})
|
|
17
|
+
});
|
|
46
18
|
}
|
|
47
19
|
|
|
48
20
|
export { PhoneInput };
|
|
21
|
+
//# sourceMappingURL=PhoneInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PhoneInput.js","sources":["../../../../src/inputs/PhoneInput/PhoneInput.tsx"],"sourcesContent":["import debug from 'debug';\nimport {MaskedInput, MaskedInputProps} from '../MaskedInput';\n\nconst d = debug('thx.controls.inputs.PhoneInput');\n\nexport interface PhoneInputProps {\n\textension?: boolean;\n\tonChange?: (value?: string) => void;\n}\n\nexport function PhoneInput(props: PhoneInputProps & Omit<MaskedInputProps, 'mask' | 'onChange'>) {\n\tconst {extension, ...rest} = props;\n\tconst mask = {\n\t\tmask: extension ? '((999) 999-9999[ x9999])|(+9 (999) 999-9999[ x9999])' : '((999) 999-9999)|( +9 (999) 999-9999)',\n\t\tgreedy: false,\n\t\tautoUnmask: true,\n\t};\n\n\treturn <MaskedInput {...rest} mask={mask} />;\n}\n"],"names":[],"mappings":";;;;;AAGU,MAAM,gCAAgC,EAAA;AAOzC,SAAA,UAAA,CAAoB,KAAsE,EAAA;AAChG,EAAM,MAAA,EAAC,cAAc,IAAQ,EAAA,GAAA,KAAA,CAAA;AAC7B,EAAA,MAAM,IAAO,GAAA;AAAA,IACZ,IAAA,EAAM,YAAY,sDAAyD,GAAA,uCAAA;AAAA,IAC3E,MAAQ,EAAA,KAAA;AAAA,IACR,UAAY,EAAA,IAAA;AAAA,GACb,CAAA;AAEA,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAA,IAAgB,GAAA,IAAA;AAAA,IAAM,IAAA;AAAA,GAAY,CAAA,CAAA;AAC3C;;;;"}
|