@thx/controls 17.3.2-alpha.0 → 17.3.5
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/package.json +5 -5
- package/dist/esm/date/DatePicker/styles.css.js +0 -7
- package/dist/esm/date/DatePicker/styles.css.js.map +0 -1
- package/dist/esm/date/LocalDatePicker/LocalDatePicker.js +0 -151
- package/dist/esm/date/LocalDatePicker/LocalDatePicker.js.map +0 -1
- package/dist/esm/date/LocalDatePicker/MaskedDateInput.js +0 -22
- package/dist/esm/date/LocalDatePicker/MaskedDateInput.js.map +0 -1
- package/dist/esm/date/LocalMonthSelect/LocalMonthSelect.js +0 -43
- package/dist/esm/date/LocalMonthSelect/LocalMonthSelect.js.map +0 -1
- package/dist/esm/date/LocalTimePicker/LocalTimePicker.js +0 -96
- package/dist/esm/date/LocalTimePicker/LocalTimePicker.js.map +0 -1
- package/dist/esm/date/LocalTimePicker/MaskedTimeInput.js +0 -22
- package/dist/esm/date/LocalTimePicker/MaskedTimeInput.js.map +0 -1
- package/dist/esm/date/MonthDayPicker/MonthDayPicker.js +0 -86
- package/dist/esm/date/MonthDayPicker/MonthDayPicker.js.map +0 -1
- package/dist/esm/date/MonthYearPicker/MonthYearPicker.js +0 -73
- package/dist/esm/date/MonthYearPicker/MonthYearPicker.js.map +0 -1
- package/dist/esm/date/YearSelect/YearSelect.js +0 -62
- package/dist/esm/date/YearSelect/YearSelect.js.map +0 -1
- package/dist/esm/external/style-inject/dist/style-inject.es.js +0 -29
- package/dist/esm/external/style-inject/dist/style-inject.es.js.map +0 -1
- package/dist/esm/form/TForm/TForm.js +0 -29
- package/dist/esm/form/TForm/TForm.js.map +0 -1
- package/dist/esm/form/TForm/useTForm.js +0 -90
- package/dist/esm/form/TForm/useTForm.js.map +0 -1
- package/dist/esm/index.js +0 -34
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/inputs/CreditCardInput/CreditCardInput.js +0 -71
- package/dist/esm/inputs/CreditCardInput/CreditCardInput.js.map +0 -1
- package/dist/esm/inputs/CreditCardInput/CreditCardNumberInput.js +0 -76
- package/dist/esm/inputs/CreditCardInput/CreditCardNumberInput.js.map +0 -1
- package/dist/esm/inputs/CreditCardInput/styles.css.js +0 -7
- package/dist/esm/inputs/CreditCardInput/styles.css.js.map +0 -1
- package/dist/esm/inputs/MaskedInput/MaskedInput.js +0 -26
- package/dist/esm/inputs/MaskedInput/MaskedInput.js.map +0 -1
- package/dist/esm/inputs/MaskedInput/useMaskedInput.js +0 -57
- package/dist/esm/inputs/MaskedInput/useMaskedInput.js.map +0 -1
- package/dist/esm/inputs/PhoneInput/PhoneInput.js +0 -59
- package/dist/esm/inputs/PhoneInput/PhoneInput.js.map +0 -1
- package/dist/esm/inputs/RadioGroup/RadioGroup.js +0 -25
- package/dist/esm/inputs/RadioGroup/RadioGroup.js.map +0 -1
- package/dist/esm/inputs/SinInput/SinInput.js +0 -54
- package/dist/esm/inputs/SinInput/SinInput.js.map +0 -1
- package/dist/esm/inputs/TableInput/CheckboxEditCell.js +0 -32
- package/dist/esm/inputs/TableInput/CheckboxEditCell.js.map +0 -1
- package/dist/esm/inputs/TableInput/DropdownCell.js +0 -26
- package/dist/esm/inputs/TableInput/DropdownCell.js.map +0 -1
- package/dist/esm/inputs/TableInput/HoverCell.js +0 -20
- package/dist/esm/inputs/TableInput/HoverCell.js.map +0 -1
- package/dist/esm/inputs/TableInput/LocalDateCell.js +0 -13
- package/dist/esm/inputs/TableInput/LocalDateCell.js.map +0 -1
- package/dist/esm/inputs/TableInput/LocalDateEditCell.js +0 -33
- package/dist/esm/inputs/TableInput/LocalDateEditCell.js.map +0 -1
- package/dist/esm/inputs/TableInput/LocalTimeEditCell.js +0 -31
- package/dist/esm/inputs/TableInput/LocalTimeEditCell.js.map +0 -1
- package/dist/esm/inputs/TableInput/MoneyCell.js +0 -13
- package/dist/esm/inputs/TableInput/MoneyCell.js.map +0 -1
- package/dist/esm/inputs/TableInput/MoneyEditCell.js +0 -37
- package/dist/esm/inputs/TableInput/MoneyEditCell.js.map +0 -1
- package/dist/esm/inputs/TableInput/MoneySumFooter.js +0 -20
- package/dist/esm/inputs/TableInput/MoneySumFooter.js.map +0 -1
- package/dist/esm/inputs/TableInput/NumberEditCell.js +0 -35
- package/dist/esm/inputs/TableInput/NumberEditCell.js.map +0 -1
- package/dist/esm/inputs/TableInput/StringEditCell.js +0 -34
- package/dist/esm/inputs/TableInput/StringEditCell.js.map +0 -1
- package/dist/esm/inputs/TableInput/TableInput.js +0 -79
- package/dist/esm/inputs/TableInput/TableInput.js.map +0 -1
- package/dist/esm/inputs/TableInput/addRowOnTab.js +0 -13
- package/dist/esm/inputs/TableInput/addRowOnTab.js.map +0 -1
- package/dist/esm/money/MoneyCurrencyInput/MoneyCurrencyInput.js +0 -51
- package/dist/esm/money/MoneyCurrencyInput/MoneyCurrencyInput.js.map +0 -1
- package/dist/esm/money/MoneyInput/MoneyInput.js +0 -31
- package/dist/esm/money/MoneyInput/MoneyInput.js.map +0 -1
- package/dist/esm/money/useMoneyInput.js +0 -75
- package/dist/esm/money/useMoneyInput.js.map +0 -1
- package/dist/esm/step/FormStep.js +0 -17
- package/dist/esm/step/FormStep.js.map +0 -1
- package/dist/esm/step/Step.js +0 -10
- package/dist/esm/step/Step.js.map +0 -1
- package/dist/esm/step/StepProvider.js +0 -95
- package/dist/esm/step/StepProvider.js.map +0 -1
- package/dist/esm/step/stepContext.js +0 -10
- package/dist/esm/step/stepContext.js.map +0 -1
- package/dist/esm/step/useStep.js +0 -10
- package/dist/esm/step/useStep.js.map +0 -1
- package/dist/stats.html +0 -2689
- package/dist/types/date/DatePicker/index.d.ts +0 -3
- package/dist/types/date/LocalDatePicker/LocalDatePicker.d.ts +0 -20
- package/dist/types/date/LocalDatePicker/MaskedDateInput.d.ts +0 -13
- package/dist/types/date/LocalDatePicker/index.d.ts +0 -2
- package/dist/types/date/LocalMonthSelect/LocalMonthSelect.d.ts +0 -11
- package/dist/types/date/LocalMonthSelect/index.d.ts +0 -2
- package/dist/types/date/LocalTimePicker/LocalTimePicker.d.ts +0 -13
- package/dist/types/date/LocalTimePicker/MaskedTimeInput.d.ts +0 -12
- package/dist/types/date/LocalTimePicker/index.d.ts +0 -2
- package/dist/types/date/MonthDayPicker/MonthDayPicker.d.ts +0 -13
- package/dist/types/date/MonthDayPicker/index.d.ts +0 -2
- package/dist/types/date/MonthYearPicker/MonthYearPicker.d.ts +0 -15
- package/dist/types/date/MonthYearPicker/index.d.ts +0 -2
- package/dist/types/date/YearSelect/YearSelect.d.ts +0 -10
- package/dist/types/date/YearSelect/index.d.ts +0 -2
- package/dist/types/form/TForm/TForm.d.ts +0 -3
- package/dist/types/form/TForm/index.d.ts +0 -3
- package/dist/types/form/TForm/types.d.ts +0 -32
- package/dist/types/form/TForm/useTForm.d.ts +0 -57
- package/dist/types/index.d.ts +0 -32
- package/dist/types/inputs/CreditCardInput/CreditCardInput.d.ts +0 -15
- package/dist/types/inputs/CreditCardInput/CreditCardNumberInput.d.ts +0 -7
- package/dist/types/inputs/CreditCardInput/index.d.ts +0 -2
- package/dist/types/inputs/MaskedInput/MaskedInput.d.ts +0 -11
- package/dist/types/inputs/MaskedInput/index.d.ts +0 -3
- package/dist/types/inputs/MaskedInput/useMaskedInput.d.ts +0 -7
- package/dist/types/inputs/PhoneInput/PhoneInput.d.ts +0 -6
- package/dist/types/inputs/PhoneInput/index.d.ts +0 -2
- package/dist/types/inputs/RadioGroup/RadioGroup.d.ts +0 -7
- package/dist/types/inputs/RadioGroup/index.d.ts +0 -2
- package/dist/types/inputs/SinInput/SinInput.d.ts +0 -6
- package/dist/types/inputs/SinInput/index.d.ts +0 -2
- package/dist/types/inputs/TableInput/CheckboxEditCell.d.ts +0 -11
- package/dist/types/inputs/TableInput/DropdownCell.d.ts +0 -3
- package/dist/types/inputs/TableInput/HoverCell.d.ts +0 -6
- package/dist/types/inputs/TableInput/LocalDateCell.d.ts +0 -10
- package/dist/types/inputs/TableInput/LocalDateEditCell.d.ts +0 -3
- package/dist/types/inputs/TableInput/LocalTimeEditCell.d.ts +0 -3
- package/dist/types/inputs/TableInput/MoneyCell.d.ts +0 -8
- package/dist/types/inputs/TableInput/MoneyEditCell.d.ts +0 -10
- package/dist/types/inputs/TableInput/MoneySumFooter.d.ts +0 -6
- package/dist/types/inputs/TableInput/NumberEditCell.d.ts +0 -11
- package/dist/types/inputs/TableInput/StringEditCell.d.ts +0 -11
- package/dist/types/inputs/TableInput/TableInput.d.ts +0 -32
- package/dist/types/inputs/TableInput/addRowOnTab.d.ts +0 -10
- package/dist/types/inputs/TableInput/index.d.ts +0 -14
- package/dist/types/money/MoneyCurrencyInput/MoneyCurrencyInput.d.ts +0 -10
- package/dist/types/money/MoneyCurrencyInput/index.d.ts +0 -2
- package/dist/types/money/MoneyInput/MoneyInput.d.ts +0 -14
- package/dist/types/money/MoneyInput/index.d.ts +0 -2
- package/dist/types/money/useMoneyInput.d.ts +0 -13
- package/dist/types/step/FormStep.d.ts +0 -8
- package/dist/types/step/Step.d.ts +0 -8
- package/dist/types/step/StepProvider.d.ts +0 -9
- package/dist/types/step/index.d.ts +0 -4
- package/dist/types/step/stepContext.d.ts +0 -4
- package/dist/types/step/useStep.d.ts +0 -1
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import React, { useCallback } from 'react';
|
|
2
|
-
import { toMoney } from '@thx/money';
|
|
3
|
-
import debug from 'debug';
|
|
4
|
-
import Money from 'js-money';
|
|
5
|
-
import { Input, Label, Dropdown } from 'semantic-ui-react';
|
|
6
|
-
import { useMoneyInput } from '../useMoneyInput.js';
|
|
7
|
-
|
|
8
|
-
const d = debug("thx.controls.money.MoneyCurrencyInput");
|
|
9
|
-
function MoneyCurrencyInput(props) {
|
|
10
|
-
const { name, onBlur, prefix, defaultCurrency, onChange, showPrefix, value, wholeNumber, currencies, locked, ...rest } = props;
|
|
11
|
-
const options = currencies || [
|
|
12
|
-
{ key: "CAD", text: "CAD", value: "CAD" },
|
|
13
|
-
{ key: "USD", text: "USD", value: "USD" }
|
|
14
|
-
];
|
|
15
|
-
const handleChange = useCallback((v) => {
|
|
16
|
-
if (!v) {
|
|
17
|
-
onChange && onChange(toMoney(0, defaultCurrency));
|
|
18
|
-
} else {
|
|
19
|
-
onChange && onChange(v);
|
|
20
|
-
}
|
|
21
|
-
}, [defaultCurrency, onChange]);
|
|
22
|
-
const val = !(value instanceof Money) && value !== void 0 ? toMoney(value) : value;
|
|
23
|
-
const [inputElement] = useMoneyInput({ onChange: handleChange, prefix, showPrefix, value: val, wholeNumber });
|
|
24
|
-
const handleDropdownChange = useCallback((e, v) => {
|
|
25
|
-
const newCurrencyCode = v.value;
|
|
26
|
-
const newMoney = new Money(value?.amount || 0, newCurrencyCode);
|
|
27
|
-
d("Change", value, newCurrencyCode, newMoney);
|
|
28
|
-
onChange && onChange(newMoney);
|
|
29
|
-
}, [onChange, value]);
|
|
30
|
-
const currencyCode = value?.currency || defaultCurrency?.code || "CAD";
|
|
31
|
-
d("Render", value, currencyCode);
|
|
32
|
-
return /* @__PURE__ */ React.createElement(Input, {
|
|
33
|
-
...rest,
|
|
34
|
-
labelPosition: "right"
|
|
35
|
-
}, /* @__PURE__ */ React.createElement("input", {
|
|
36
|
-
name,
|
|
37
|
-
ref: inputElement,
|
|
38
|
-
onBlur,
|
|
39
|
-
readOnly: locked
|
|
40
|
-
}), /* @__PURE__ */ React.createElement(Label, {
|
|
41
|
-
basic: true
|
|
42
|
-
}, /* @__PURE__ */ React.createElement(Dropdown, {
|
|
43
|
-
disabled: locked,
|
|
44
|
-
options,
|
|
45
|
-
value: currencyCode,
|
|
46
|
-
onChange: handleDropdownChange
|
|
47
|
-
})));
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
export { MoneyCurrencyInput };
|
|
51
|
-
//# sourceMappingURL=MoneyCurrencyInput.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MoneyCurrencyInput.js","sources":["../../../../src/money/MoneyCurrencyInput/MoneyCurrencyInput.tsx"],"sourcesContent":["import {toMoney} from '@thx/money';\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport debug from 'debug';\nimport Money, {type CurrencyString} from 'js-money';\nimport {type SyntheticEvent, useCallback} from 'react';\nimport {Dropdown, type DropdownProps, Input, type InputProps, Label} from 'semantic-ui-react';\nimport type {MoneyInputProps} from '../MoneyInput';\nimport {useMoneyInput} from '../useMoneyInput';\n\nconst d = debug('thx.controls.money.MoneyCurrencyInput');\n\nexport interface MoneyCurrencyInputProps extends MoneyInputProps {\n\tcurrencies?: {key: string; value: string; text: string}[];\n}\n\nexport function MoneyCurrencyInput(props: MoneyCurrencyInputProps & Omit<InputProps, 'onChange'>) {\n\tconst {name, onBlur, prefix, defaultCurrency, onChange, showPrefix, value, wholeNumber, currencies, locked, ...rest} = props;\n\n\tconst options = currencies || [\n\t\t{key: 'CAD', text: 'CAD', value: 'CAD'},\n\t\t{key: 'USD', text: 'USD', value: 'USD'},\n\t];\n\n\tconst handleChange = useCallback(\n\t\t(v?: Money) => {\n\t\t\tif (!v) {\n\t\t\t\tonChange && onChange(toMoney(0, defaultCurrency));\n\t\t\t} else {\n\t\t\t\tonChange && onChange(v);\n\t\t\t}\n\t\t},\n\t\t[defaultCurrency, onChange],\n\t);\n\n\tconst val = !(value instanceof Money) && value !== undefined ? toMoney(value) : value;\n\n\tconst [inputElement] = useMoneyInput({onChange: handleChange, prefix, showPrefix, value: val, wholeNumber});\n\n\tconst handleDropdownChange = useCallback(\n\t\t(e: SyntheticEvent<HTMLElement, Event>, v: DropdownProps) => {\n\t\t\tconst newCurrencyCode = v.value as CurrencyString;\n\t\t\tconst newMoney = new Money(value?.amount || 0, newCurrencyCode);\n\n\t\t\td('Change', value, newCurrencyCode, newMoney);\n\t\t\t// setInputValue(newMoney);\n\t\t\tonChange && onChange(newMoney);\n\t\t\t// forceUpdate();\n\t\t},\n\t\t[onChange, value],\n\t);\n\n\tconst currencyCode = value?.currency || defaultCurrency?.code || 'CAD';\n\td('Render', value, currencyCode);\n\n\treturn (\n\t\t<Input {...rest} labelPosition=\"right\">\n\t\t\t<input name={name} ref={inputElement} onBlur={onBlur} readOnly={locked} />\n\t\t\t<Label basic>\n\t\t\t\t<Dropdown disabled={locked} options={options} value={currencyCode} onChange={handleDropdownChange} />\n\t\t\t</Label>\n\t\t</Input>\n\t);\n}\n"],"names":[],"mappings":";;;;;;;AASA,MAAM,CAAA,GAAI,MAAM,uCAAuC,CAAA,CAAA;AAMhD,SAAA,kBAAA,CAA4B,KAA+D,EAAA;AACjG,EAAM,MAAA,EAAC,IAAM,EAAA,MAAA,EAAQ,MAAQ,EAAA,eAAA,EAAiB,QAAU,EAAA,UAAA,EAAY,KAAO,EAAA,WAAA,EAAa,UAAY,EAAA,MAAA,EAAA,GAAW,IAAQ,EAAA,GAAA,KAAA,CAAA;AAEvH,EAAA,MAAM,UAAU,UAAc,IAAA;AAAA,IAC7B,EAAC,GAAK,EAAA,KAAA,EAAO,IAAM,EAAA,KAAA,EAAO,OAAO,KAAK,EAAA;AAAA,IACtC,EAAC,GAAK,EAAA,KAAA,EAAO,IAAM,EAAA,KAAA,EAAO,OAAO,KAAK,EAAA;AAAA,GACvC,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,WACpB,CAAA,CAAC,CAAc,KAAA;AACd,IAAA,IAAI,CAAC,CAAG,EAAA;AACP,MAAA,QAAA,IAAY,QAAS,CAAA,OAAA,CAAQ,CAAG,EAAA,eAAe,CAAC,CAAA,CAAA;AAAA,KAC1C,MAAA;AACN,MAAA,QAAA,IAAY,SAAS,CAAC,CAAA,CAAA;AAAA,KACvB;AAAA,GAED,EAAA,CAAC,eAAiB,EAAA,QAAQ,CAC3B,CAAA,CAAA;AAEA,EAAM,MAAA,GAAA,GAAM,EAAmB,KAAA,YAAA,KAAA,CAAA,IAAU,UAAU,KAAY,CAAA,GAAA,OAAA,CAAQ,KAAK,CAAI,GAAA,KAAA,CAAA;AAEhF,EAAM,MAAA,CAAC,YAAgB,CAAA,GAAA,aAAA,CAAc,EAAC,QAAA,EAAU,YAAc,EAAA,MAAA,EAAQ,UAAY,EAAA,KAAA,EAAO,GAAK,EAAA,WAAA,EAAY,CAAA,CAAA;AAE1G,EAAA,MAAM,oBAAuB,GAAA,WAAA,CAC5B,CAAC,CAAA,EAAuC,CAAqB,KAAA;AAC5D,IAAA,MAAM,kBAAkB,CAAE,CAAA,KAAA,CAAA;AAC1B,IAAA,MAAM,WAAW,IAAI,KAAA,CAAM,KAAO,EAAA,MAAA,IAAU,GAAG,eAAe,CAAA,CAAA;AAE9D,IAAE,CAAA,CAAA,QAAA,EAAU,KAAO,EAAA,eAAA,EAAiB,QAAQ,CAAA,CAAA;AAE5C,IAAA,QAAA,IAAY,SAAS,QAAQ,CAAA,CAAA;AAAA,GAG9B,EAAA,CAAC,QAAU,EAAA,KAAK,CACjB,CAAA,CAAA;AAEA,EAAA,MAAM,YAAe,GAAA,KAAA,EAAO,QAAY,IAAA,eAAA,EAAiB,IAAQ,IAAA,KAAA,CAAA;AACjE,EAAE,CAAA,CAAA,QAAA,EAAU,OAAO,YAAY,CAAA,CAAA;AAE/B,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAU,GAAA,IAAA;AAAA,IAAM,aAAc,EAAA,OAAA;AAAA,GAAA,kBAC7B,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAA,IAAM,IAAA;AAAA,IAAY,GAAK,EAAA,YAAA;AAAA,IAAc,MAAA;AAAA,IAAgB,QAAU,EAAA,MAAA;AAAA,GAAQ,mBACvE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAM,KAAK,EAAA,IAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,IAAS,QAAU,EAAA,MAAA;AAAA,IAAQ,OAAA;AAAA,IAAkB,KAAO,EAAA,YAAA;AAAA,IAAc,QAAU,EAAA,oBAAA;AAAA,GAAsB,CACpG,CACD,CAAA,CAAA;AAEF;;;;"}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import React, { useCallback } from 'react';
|
|
2
|
-
import { toMoney } from '@thx/money';
|
|
3
|
-
import debug from 'debug';
|
|
4
|
-
import Money from 'js-money';
|
|
5
|
-
import { Input } from 'semantic-ui-react';
|
|
6
|
-
import { useMoneyInput } from '../useMoneyInput.js';
|
|
7
|
-
|
|
8
|
-
debug("thx.controls.money.MoneyInput");
|
|
9
|
-
function MoneyInput(props) {
|
|
10
|
-
const { name, onBlur, locked, prefix, defaultCurrency, onChange, showPrefix, value, wholeNumber, ...rest } = props;
|
|
11
|
-
const handleChange = useCallback((v) => {
|
|
12
|
-
if (!v) {
|
|
13
|
-
onChange && onChange(toMoney(0, defaultCurrency));
|
|
14
|
-
} else {
|
|
15
|
-
onChange && onChange(v);
|
|
16
|
-
}
|
|
17
|
-
}, [defaultCurrency, onChange]);
|
|
18
|
-
const val = !(value instanceof Money) && value !== void 0 ? toMoney(value) : value;
|
|
19
|
-
const [inputElement] = useMoneyInput({ onChange: handleChange, prefix, showPrefix, value: val, wholeNumber });
|
|
20
|
-
return /* @__PURE__ */ React.createElement(Input, {
|
|
21
|
-
...rest
|
|
22
|
-
}, /* @__PURE__ */ React.createElement("input", {
|
|
23
|
-
name,
|
|
24
|
-
ref: inputElement,
|
|
25
|
-
onBlur,
|
|
26
|
-
readOnly: locked
|
|
27
|
-
}));
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export { MoneyInput };
|
|
31
|
-
//# sourceMappingURL=MoneyInput.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MoneyInput.js","sources":["../../../../src/money/MoneyInput/MoneyInput.tsx"],"sourcesContent":["import {toMoney} from '@thx/money';\nimport debug from 'debug';\nimport Money, {type Currency, type MoneyObject} from 'js-money';\nimport {useCallback} from 'react';\nimport {Input, type InputProps} from 'semantic-ui-react';\nimport {useMoneyInput} from '../useMoneyInput';\n\nconst d = debug('thx.controls.money.MoneyInput');\n\nexport interface MoneyInputProps {\n\tname?: string;\n\tonChange?: (value: Money) => void;\n\tvalue?: Money | MoneyObject;\n\tdefaultCurrency?: Currency; // Defaults to Money.CAD\n\tonBlur?: (ev: any) => void;\n\tprefix?: string; // Defaults to currency symbol\n\tshowPrefix?: boolean; // Defaults to false\n\tlocked?: boolean; // Defaults to false\n\twholeNumber?: boolean; // Defaults to false\n}\n\nexport function MoneyInput(props: MoneyInputProps & Omit<InputProps, 'onChange'>) {\n\tconst {name, onBlur, locked, prefix, defaultCurrency, onChange, showPrefix, value, wholeNumber, ...rest} = props;\n\n\tconst handleChange = useCallback(\n\t\t(v?: Money) => {\n\t\t\tif (!v) {\n\t\t\t\tonChange && onChange(toMoney(0, defaultCurrency));\n\t\t\t} else {\n\t\t\t\tonChange && onChange(v);\n\t\t\t}\n\t\t},\n\t\t[defaultCurrency, onChange],\n\t);\n\n\tconst val = !(value instanceof Money) && value !== undefined ? toMoney(value) : value;\n\n\tconst [inputElement] = useMoneyInput({onChange: handleChange, prefix, showPrefix, value: val, wholeNumber});\n\n\treturn (\n\t\t<Input {...rest}>\n\t\t\t<input name={name} ref={inputElement} onBlur={onBlur} readOnly={locked} />\n\t\t</Input>\n\t);\n}\n"],"names":[],"mappings":";;;;;;;AAOU,MAAM,+BAA+B,EAAA;AAcxC,SAAA,UAAA,CAAoB,KAAuD,EAAA;AACjF,EAAM,MAAA,EAAC,IAAM,EAAA,MAAA,EAAQ,MAAQ,EAAA,MAAA,EAAQ,iBAAiB,QAAU,EAAA,UAAA,EAAY,KAAO,EAAA,WAAA,EAAA,GAAgB,IAAQ,EAAA,GAAA,KAAA,CAAA;AAE3G,EAAM,MAAA,YAAA,GAAe,WACpB,CAAA,CAAC,CAAc,KAAA;AACd,IAAA,IAAI,CAAC,CAAG,EAAA;AACP,MAAA,QAAA,IAAY,QAAS,CAAA,OAAA,CAAQ,CAAG,EAAA,eAAe,CAAC,CAAA,CAAA;AAAA,KAC1C,MAAA;AACN,MAAA,QAAA,IAAY,SAAS,CAAC,CAAA,CAAA;AAAA,KACvB;AAAA,GAED,EAAA,CAAC,eAAiB,EAAA,QAAQ,CAC3B,CAAA,CAAA;AAEA,EAAM,MAAA,GAAA,GAAM,EAAmB,KAAA,YAAA,KAAA,CAAA,IAAU,UAAU,KAAY,CAAA,GAAA,OAAA,CAAQ,KAAK,CAAI,GAAA,KAAA,CAAA;AAEhF,EAAM,MAAA,CAAC,YAAgB,CAAA,GAAA,aAAA,CAAc,EAAC,QAAA,EAAU,YAAc,EAAA,MAAA,EAAQ,UAAY,EAAA,KAAA,EAAO,GAAK,EAAA,WAAA,EAAY,CAAA,CAAA;AAE1G,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAU,GAAA,IAAA;AAAA,GAAA,kBACT,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAA,IAAM,IAAA;AAAA,IAAY,GAAK,EAAA,YAAA;AAAA,IAAc,MAAA;AAAA,IAAgB,QAAU,EAAA,MAAA;AAAA,GAAQ,CACzE,CAAA,CAAA;AAEF;;;;"}
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { toMoney } from '@thx/money';
|
|
2
|
-
import debug from 'debug';
|
|
3
|
-
import InputmaskImport from 'inputmask';
|
|
4
|
-
import Money from 'js-money';
|
|
5
|
-
import { useRef, useEffect, useCallback } from 'react';
|
|
6
|
-
|
|
7
|
-
const d = debug("thx.controls.money.useMoneyInput");
|
|
8
|
-
const InputmaskClass = InputmaskImport.default || InputmaskImport;
|
|
9
|
-
function useMoneyInput(props) {
|
|
10
|
-
const { value, onChange, onSet, showPrefix, prefix, wholeNumber } = props;
|
|
11
|
-
const inputElement = useRef(null);
|
|
12
|
-
const maskInstance = useRef(null);
|
|
13
|
-
const currencyCode = value?.currency || "CAD";
|
|
14
|
-
useEffect(() => {
|
|
15
|
-
if (!inputElement.current)
|
|
16
|
-
throw new Error("Could not get input element");
|
|
17
|
-
d("Creating input mask instance");
|
|
18
|
-
maskInstance.current = new InputmaskClass({
|
|
19
|
-
alias: "numeric",
|
|
20
|
-
groupSeparator: ",",
|
|
21
|
-
digits: wholeNumber ? "0" : Money[currencyCode].decimal_digits.toString(),
|
|
22
|
-
digitsOptional: false,
|
|
23
|
-
prefix: showPrefix ? prefix || Money[currencyCode].symbol : void 0,
|
|
24
|
-
placeholder: "0",
|
|
25
|
-
autoUnmask: true,
|
|
26
|
-
oncomplete() {
|
|
27
|
-
if (onChange) {
|
|
28
|
-
if (inputElement.current?.value) {
|
|
29
|
-
onChange(toMoney(inputElement.current?.value, currencyCode));
|
|
30
|
-
} else {
|
|
31
|
-
onChange();
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
oncleared() {
|
|
36
|
-
if (onChange)
|
|
37
|
-
onChange();
|
|
38
|
-
},
|
|
39
|
-
onincomplete() {
|
|
40
|
-
if (onChange)
|
|
41
|
-
onChange(toMoney(inputElement.current?.value, currencyCode));
|
|
42
|
-
}
|
|
43
|
-
});
|
|
44
|
-
maskInstance.current.mask(inputElement.current);
|
|
45
|
-
return () => {
|
|
46
|
-
if (maskInstance.current) {
|
|
47
|
-
d("Cleaning up input mask instance");
|
|
48
|
-
maskInstance.current.remove();
|
|
49
|
-
maskInstance.current = null;
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
}, [currencyCode, prefix, showPrefix, wholeNumber]);
|
|
53
|
-
const setVal = useCallback((v) => {
|
|
54
|
-
if (inputElement.current) {
|
|
55
|
-
d("Value is being set:", v);
|
|
56
|
-
if (v) {
|
|
57
|
-
inputElement.current.value = v.toDecimal().toString();
|
|
58
|
-
} else {
|
|
59
|
-
inputElement.current.value = "";
|
|
60
|
-
}
|
|
61
|
-
onSet && onSet(v);
|
|
62
|
-
}
|
|
63
|
-
}, [onSet]);
|
|
64
|
-
useEffect(() => {
|
|
65
|
-
const whatCurrentlyIsDisplayed = inputElement.current?.value || "";
|
|
66
|
-
const whatWeAreSetting = value ? value.toString() : "";
|
|
67
|
-
if (whatCurrentlyIsDisplayed !== whatWeAreSetting) {
|
|
68
|
-
setVal(value);
|
|
69
|
-
}
|
|
70
|
-
}, [setVal, value]);
|
|
71
|
-
return [inputElement, setVal];
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
export { useMoneyInput };
|
|
75
|
-
//# sourceMappingURL=useMoneyInput.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useMoneyInput.js","sources":["../../../src/money/useMoneyInput.ts"],"sourcesContent":["import {toMoney} from '@thx/money';\nimport debug from 'debug';\nimport Inputmask from 'inputmask';\nimport Money from 'js-money';\nimport {type MutableRefObject, useCallback, useEffect, useRef} from 'react';\n\nconst d = debug('thx.controls.money.useMoneyInput');\n\n// @ts-ignore inputmask .d.ts file is correct, but ESM causes some difficulty. -mk\nconst InputmaskClass = Inputmask.default || Inputmask;\n\ninterface UseMoneyInputProps {\n\tvalue?: Money;\n\tonChange?: (value?: Money) => void;\n\tonSet?: (value?: Money) => void;\n\t// defaultCurrency?: Currency; // Defaults to Money.CAD\n\tprefix?: string; // Defaults to currency symbol\n\tshowPrefix?: boolean; // Defaults to false\n\twholeNumber?: boolean; // Defaults to false\n}\n\ntype SetValueFn = (value?: Money) => void;\n\nexport function useMoneyInput(props: UseMoneyInputProps): [MutableRefObject<HTMLInputElement | null>, SetValueFn] {\n\tconst {value, onChange, onSet, showPrefix, prefix, wholeNumber} = props;\n\n\tconst inputElement = useRef<HTMLInputElement | null>(null);\n\tconst maskInstance = useRef<Inputmask.Instance | null>(null);\n\n\t// set the adjCurrency\n\t// let adjCurrency = Money.CAD;\n\t// if (value?.currency && Money[value?.currency]) adjCurrency = Money[value?.currency];\n\t// if (defaultCurrency) adjCurrency = defaultCurrency;\n\tconst currencyCode = value?.currency || 'CAD';\n\n\tuseEffect(() => {\n\t\tif (!inputElement.current) throw new Error('Could not get input element');\n\n\t\td('Creating input mask instance');\n\t\tmaskInstance.current = new InputmaskClass({\n\t\t\talias: 'numeric',\n\t\t\tgroupSeparator: ',',\n\t\t\tdigits: wholeNumber ? '0' : Money[currencyCode].decimal_digits.toString(),\n\t\t\tdigitsOptional: false,\n\t\t\tprefix: showPrefix ? prefix || Money[currencyCode].symbol : undefined,\n\t\t\tplaceholder: '0',\n\t\t\tautoUnmask: true,\n\t\t\toncomplete() {\n\t\t\t\tif (onChange) {\n\t\t\t\t\tif (inputElement.current?.value) {\n\t\t\t\t\t\tonChange(toMoney(inputElement.current?.value, currencyCode));\n\t\t\t\t\t} else {\n\t\t\t\t\t\tonChange();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t\toncleared() {\n\t\t\t\tif (onChange) onChange();\n\t\t\t},\n\t\t\tonincomplete() {\n\t\t\t\tif (onChange) onChange(toMoney(inputElement.current?.value, currencyCode));\n\t\t\t},\n\t\t});\n\t\t// @ts-ignore We just created the instance but typescript can't figure it out. -mk\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\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [currencyCode, prefix, showPrefix, wholeNumber]);\n\n\tconst setVal = useCallback<SetValueFn>(\n\t\t(v?: Money) => {\n\t\t\tif (inputElement.current) {\n\t\t\t\td('Value is being set:', v);\n\t\t\t\tif (v) {\n\t\t\t\t\tinputElement.current.value = v.toDecimal().toString();\n\t\t\t\t} else {\n\t\t\t\t\tinputElement.current.value = '';\n\t\t\t\t}\n\t\t\t\tonSet && onSet(v);\n\t\t\t}\n\t\t},\n\t\t[onSet],\n\t);\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\tconst whatCurrentlyIsDisplayed = inputElement.current?.value || ''; // string | undef\n\t\tconst whatWeAreSetting = value ? value.toString() : ''; // money | undef\n\n\t\tif (whatCurrentlyIsDisplayed !== whatWeAreSetting) {\n\t\t\tsetVal(value);\n\t\t}\n\t}, [setVal, value]);\n\n\treturn [inputElement, setVal];\n}\n"],"names":["Inputmask"],"mappings":"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"}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import React, { cloneElement, Children } from 'react';
|
|
2
|
-
import debug from 'debug';
|
|
3
|
-
import { useStep } from './useStep.js';
|
|
4
|
-
|
|
5
|
-
debug("thx.controls.step.FormStep");
|
|
6
|
-
function FormStep(props) {
|
|
7
|
-
const [state, handleSubmit] = useStep();
|
|
8
|
-
const values = state[props.stepKey] || {};
|
|
9
|
-
const form = cloneElement(Children.only(props.children), {
|
|
10
|
-
values: values || {},
|
|
11
|
-
onSubmit: (vals) => handleSubmit(vals, props.stepKey)
|
|
12
|
-
});
|
|
13
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h1", null, props.title), form);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export { FormStep };
|
|
17
|
-
//# sourceMappingURL=FormStep.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FormStep.js","sources":["../../../src/step/FormStep.tsx"],"sourcesContent":["import debug from 'debug';\nimport {cloneElement, Children} from 'react';\nimport {useStep} from './useStep';\n\nconst d = debug('thx.controls.step.FormStep');\n\ninterface FormStepProps {\n\tchildren: JSX.Element;\n\ttitle?: string;\n\tstepKey: string;\n\thidden?: boolean | ((state: any, step: number) => boolean);\n}\n\nexport function FormStep(props: FormStepProps) {\n\tconst [state, handleSubmit] = useStep();\n\tconst values = state[props.stepKey] || {};\n\n\tconst form = cloneElement(Children.only(props.children), {\n\t\tvalues: values || {},\n\t\tonSubmit: (vals: unknown) => handleSubmit(vals, props.stepKey),\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t<h1>{props.title}</h1>\n\t\t\t{form}\n\t\t</>\n\t);\n}\n"],"names":[],"mappings":";;;;AAIU,MAAM,4BAA4B,EAAA;AASrC,SAAA,QAAA,CAAkB,KAAsB,EAAA;AAC9C,EAAM,MAAA,CAAC,KAAO,EAAA,YAAA,CAAA,GAAgB,OAAQ,EAAA,CAAA;AACtC,EAAA,MAAM,MAAS,GAAA,KAAA,CAAM,KAAM,CAAA,OAAA,CAAA,IAAY,EAAC,CAAA;AAExC,EAAA,MAAM,OAAO,YAAa,CAAA,QAAA,CAAS,IAAK,CAAA,KAAA,CAAM,QAAQ,CAAG,EAAA;AAAA,IACxD,MAAA,EAAQ,UAAU,EAAC;AAAA,IACnB,UAAU,CAAC,IAAA,KAAkB,YAAa,CAAA,IAAA,EAAM,MAAM,OAAO,CAAA;AAAA,GAC7D,CAAA,CAAA;AAED,EAAA,iFAEG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAI,KAAM,CAAA,KAAM,GAChB,IACF,CAAA,CAAA;AAEF;;;;"}
|
package/dist/esm/step/Step.js
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import debug from 'debug';
|
|
3
|
-
|
|
4
|
-
debug("thx.controls.step.Step");
|
|
5
|
-
function Step(props) {
|
|
6
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h1", null, props.title), props.children);
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export { Step };
|
|
10
|
-
//# sourceMappingURL=Step.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Step.js","sources":["../../../src/step/Step.tsx"],"sourcesContent":["import debug from 'debug';\n\nconst d = debug('thx.controls.step.Step');\n\ninterface StepProps {\n\tchildren?: JSX.Element | JSX.Element[];\n\ttitle?: string;\n\tstep?: number;\n\thidden?: boolean | ((state: any, step: number) => boolean);\n}\n\nexport function Step(props: StepProps) {\n\treturn (\n\t\t<>\n\t\t\t<h1>{props.title}</h1>\n\t\t\t{props.children}\n\t\t</>\n\t);\n}\n"],"names":[],"mappings":";;;AAEU,MAAM,wBAAwB,EAAA;AASjC,SAAA,IAAA,CAAc,KAAkB,EAAA;AACtC,EAAA,iFAEG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAI,MAAM,KAAM,CAAA,EAChB,MAAM,QACR,CAAA,CAAA;AAEF;;;;"}
|
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
import React, { useState, Children, cloneElement, useMemo } from 'react';
|
|
2
|
-
import debug from 'debug';
|
|
3
|
-
import { Prompt } from 'react-router-dom';
|
|
4
|
-
import { Grid, StepGroup, Step as Step$1 } from 'semantic-ui-react';
|
|
5
|
-
import { FormStep } from './FormStep.js';
|
|
6
|
-
import { Step } from './Step.js';
|
|
7
|
-
import { StepContext } from './stepContext.js';
|
|
8
|
-
|
|
9
|
-
debug("thx.controls.step.StepProvider");
|
|
10
|
-
function StepProvider(props) {
|
|
11
|
-
const [state, setState] = useState(props.values || {});
|
|
12
|
-
const [currentStep, setCurrentStep] = useState(0);
|
|
13
|
-
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
14
|
-
const titles = [];
|
|
15
|
-
const children = [];
|
|
16
|
-
Children.forEach(props?.children, (child, index) => {
|
|
17
|
-
if (!child)
|
|
18
|
-
return;
|
|
19
|
-
if (child?.type !== Step && child?.type !== FormStep) {
|
|
20
|
-
throw new Error(`Can not render '${child?.type}' as child of 'StepProvider'. Must be of type 'Step' or 'FormStep'`);
|
|
21
|
-
}
|
|
22
|
-
if (child.props.hidden) {
|
|
23
|
-
if (typeof child.props.hidden === "function" && !child.props.hidden(state, index)) {
|
|
24
|
-
titles.push(child?.props?.title || "");
|
|
25
|
-
children.push(cloneElement(child, { step: index, key: child?.key || index.toString() }));
|
|
26
|
-
}
|
|
27
|
-
} else {
|
|
28
|
-
titles.push(child?.props?.title || "");
|
|
29
|
-
children.push(cloneElement(child, { step: index, key: child?.key || index.toString() }));
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
const onNavigate = () => "Are you sure you want to end this process? All the entered data will be lost!";
|
|
33
|
-
const valueProps = useMemo(() => {
|
|
34
|
-
return {
|
|
35
|
-
state,
|
|
36
|
-
handleSubmit: (values, stepKey) => {
|
|
37
|
-
if (currentStep + 1 === children?.length) {
|
|
38
|
-
setState({ ...state, [stepKey]: values });
|
|
39
|
-
setIsSubmitting(true);
|
|
40
|
-
props.onSubmit({ ...state, [stepKey]: values });
|
|
41
|
-
} else {
|
|
42
|
-
setState({ ...state, [stepKey]: values });
|
|
43
|
-
setCurrentStep(currentStep + 1);
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
}, [children?.length, currentStep, props, state]);
|
|
48
|
-
if (props.vertical) {
|
|
49
|
-
return /* @__PURE__ */ React.createElement(StepContext.Provider, {
|
|
50
|
-
value: valueProps
|
|
51
|
-
}, props.warnOnReroute && /* @__PURE__ */ React.createElement(Prompt, {
|
|
52
|
-
message: onNavigate,
|
|
53
|
-
when: !isSubmitting
|
|
54
|
-
}), /* @__PURE__ */ React.createElement(Grid, {
|
|
55
|
-
divided: true,
|
|
56
|
-
stackable: true
|
|
57
|
-
}, /* @__PURE__ */ React.createElement(Grid.Row, null, /* @__PURE__ */ React.createElement(Grid.Column, {
|
|
58
|
-
width: 3
|
|
59
|
-
}, /* @__PURE__ */ React.createElement(StepGroup, {
|
|
60
|
-
ordered: true,
|
|
61
|
-
size: "mini",
|
|
62
|
-
vertical: true,
|
|
63
|
-
widths: 1
|
|
64
|
-
}, titles?.map((title, index) => {
|
|
65
|
-
return /* @__PURE__ */ React.createElement(Step$1, {
|
|
66
|
-
key: index.toString(),
|
|
67
|
-
completed: index < Object.keys(state).length,
|
|
68
|
-
active: currentStep === index,
|
|
69
|
-
onClick: () => setCurrentStep(index),
|
|
70
|
-
disabled: index > Object.keys(state).length
|
|
71
|
-
}, /* @__PURE__ */ React.createElement(Step$1.Content, null, /* @__PURE__ */ React.createElement(Step$1.Title, null, title)));
|
|
72
|
-
}))), /* @__PURE__ */ React.createElement(Grid.Column, {
|
|
73
|
-
width: 13
|
|
74
|
-
}, children?.[currentStep]))));
|
|
75
|
-
}
|
|
76
|
-
return /* @__PURE__ */ React.createElement(StepContext.Provider, {
|
|
77
|
-
value: valueProps
|
|
78
|
-
}, props.warnOnReroute && /* @__PURE__ */ React.createElement(Prompt, {
|
|
79
|
-
message: onNavigate
|
|
80
|
-
}), /* @__PURE__ */ React.createElement(StepGroup, {
|
|
81
|
-
ordered: true,
|
|
82
|
-
size: "mini"
|
|
83
|
-
}, titles?.map((title, index) => {
|
|
84
|
-
return /* @__PURE__ */ React.createElement(Step$1, {
|
|
85
|
-
key: index.toString(),
|
|
86
|
-
completed: index < Object.keys(state).length,
|
|
87
|
-
active: currentStep === index,
|
|
88
|
-
onClick: () => setCurrentStep(index),
|
|
89
|
-
disabled: index > Object.keys(state).length
|
|
90
|
-
}, /* @__PURE__ */ React.createElement(Step$1.Content, null, /* @__PURE__ */ React.createElement(Step$1.Title, null, title)));
|
|
91
|
-
})), children?.[currentStep]);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
export { StepProvider };
|
|
95
|
-
//# sourceMappingURL=StepProvider.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StepProvider.js","sources":["../../../src/step/StepProvider.tsx"],"sourcesContent":["/* eslint-disable react/no-array-index-key */\nimport debug from 'debug';\nimport {cloneElement, Children, useMemo, useState} from 'react';\nimport {Prompt} from 'react-router-dom';\nimport {Grid, Step as SemanticStep, StepGroup} from 'semantic-ui-react';\nimport {FormStep} from './FormStep';\nimport {Step} from './Step';\nimport {StepContext} from './stepContext';\n\nconst d = debug('thx.controls.step.StepProvider');\n\ninterface StepProviderProps {\n\tchildren: (JSX.Element | null | false)[];\n\tonSubmit: (values: any) => void;\n\tvalues?: any;\n\twarnOnReroute?: boolean;\n\tvertical?: boolean;\n}\n\nexport function StepProvider(props: StepProviderProps) {\n\tconst [state, setState] = useState(props.values || {});\n\tconst [currentStep, setCurrentStep] = useState(0);\n\tconst [isSubmitting, setIsSubmitting] = useState(false);\n\n\tconst titles: string[] = [];\n\tconst children: JSX.Element[] = [];\n\n\tChildren.forEach(props?.children, (child, index) => {\n\t\tif (!child) return;\n\t\tif (child?.type !== Step && child?.type !== FormStep) {\n\t\t\tthrow new Error(`Can not render '${child?.type}' as child of 'StepProvider'. Must be of type 'Step' or 'FormStep'`);\n\t\t}\n\t\tif (child.props.hidden) {\n\t\t\tif (typeof child.props.hidden === 'function' && !child.props.hidden(state, index)) {\n\t\t\t\ttitles.push(child?.props?.title || '');\n\t\t\t\tchildren.push(cloneElement(child, {step: index, key: child?.key || index.toString()}));\n\t\t\t}\n\t\t} else {\n\t\t\ttitles.push(child?.props?.title || '');\n\t\t\tchildren.push(cloneElement(child, {step: index, key: child?.key || index.toString()}));\n\t\t}\n\t});\n\n\tconst onNavigate = () => 'Are you sure you want to end this process? All the entered data will be lost!';\n\n\tconst valueProps = useMemo(() => {\n\t\treturn {\n\t\t\tstate,\n\t\t\thandleSubmit: (values: any, stepKey: string) => {\n\t\t\t\tif (currentStep + 1 === children?.length) {\n\t\t\t\t\tsetState({...state, [stepKey]: values});\n\t\t\t\t\tsetIsSubmitting(true);\n\t\t\t\t\tprops.onSubmit({...state, [stepKey]: values});\n\t\t\t\t} else {\n\t\t\t\t\tsetState({...state, [stepKey]: values});\n\t\t\t\t\tsetCurrentStep(currentStep + 1);\n\t\t\t\t}\n\t\t\t},\n\t\t};\n\t}, [children?.length, currentStep, props, state]);\n\n\tif (props.vertical) {\n\t\treturn (\n\t\t\t<StepContext.Provider value={valueProps}>\n\t\t\t\t{props.warnOnReroute && <Prompt message={onNavigate} when={!isSubmitting} />}\n\t\t\t\t<Grid divided stackable>\n\t\t\t\t\t<Grid.Row>\n\t\t\t\t\t\t<Grid.Column width={3}>\n\t\t\t\t\t\t\t<StepGroup ordered size=\"mini\" vertical widths={1}>\n\t\t\t\t\t\t\t\t{titles?.map((title, index) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<SemanticStep\n\t\t\t\t\t\t\t\t\t\t\tkey={index.toString()}\n\t\t\t\t\t\t\t\t\t\t\tcompleted={index < Object.keys(state).length}\n\t\t\t\t\t\t\t\t\t\t\tactive={currentStep === index}\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => setCurrentStep(index)}\n\t\t\t\t\t\t\t\t\t\t\tdisabled={index > Object.keys(state).length}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<SemanticStep.Content>\n\t\t\t\t\t\t\t\t\t\t\t\t<SemanticStep.Title>{title}</SemanticStep.Title>\n\t\t\t\t\t\t\t\t\t\t\t</SemanticStep.Content>\n\t\t\t\t\t\t\t\t\t\t</SemanticStep>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</StepGroup>\n\t\t\t\t\t\t</Grid.Column>\n\t\t\t\t\t\t<Grid.Column width={13}>{children?.[currentStep]}</Grid.Column>\n\t\t\t\t\t</Grid.Row>\n\t\t\t\t</Grid>\n\t\t\t</StepContext.Provider>\n\t\t);\n\t}\n\n\treturn (\n\t\t<StepContext.Provider value={valueProps}>\n\t\t\t{props.warnOnReroute && <Prompt message={onNavigate} />}\n\t\t\t<StepGroup ordered size=\"mini\">\n\t\t\t\t{titles?.map((title, index) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<SemanticStep\n\t\t\t\t\t\t\tkey={index.toString()}\n\t\t\t\t\t\t\tcompleted={index < Object.keys(state).length}\n\t\t\t\t\t\t\tactive={currentStep === index}\n\t\t\t\t\t\t\tonClick={() => setCurrentStep(index)}\n\t\t\t\t\t\t\tdisabled={index > Object.keys(state).length}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SemanticStep.Content>\n\t\t\t\t\t\t\t\t<SemanticStep.Title>{title}</SemanticStep.Title>\n\t\t\t\t\t\t\t</SemanticStep.Content>\n\t\t\t\t\t\t</SemanticStep>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</StepGroup>\n\t\t\t{children?.[currentStep]}\n\t\t</StepContext.Provider>\n\t);\n}\n"],"names":["SemanticStep"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"stepContext.js","sources":["../../../src/step/stepContext.ts"],"sourcesContent":["import {createContext} from 'react';\n\nexport const StepContext = createContext<{handleSubmit: (values: unknown, stepKey: string) => void; state: Record<string, any>}>({\n\thandleSubmit: () => {},\n\tstate: {},\n});\n"],"names":[],"mappings":";;AAEO,MAAM,cAAc,aAAsG,CAAA;AAAA,EAChI,cAAc,MAAM;AAAA,GAAC;AAAA,EACrB,OAAO,EAAC;AACT,CAAC;;;;"}
|
package/dist/esm/step/useStep.js
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { useContext } from 'react';
|
|
2
|
-
import { StepContext } from './stepContext.js';
|
|
3
|
-
|
|
4
|
-
function useStep() {
|
|
5
|
-
const { state, handleSubmit } = useContext(StepContext);
|
|
6
|
-
return [state, handleSubmit];
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export { useStep };
|
|
10
|
-
//# sourceMappingURL=useStep.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useStep.js","sources":["../../../src/step/useStep.ts"],"sourcesContent":["import {useContext} from 'react';\nimport {StepContext} from './stepContext';\n\nexport function useStep(): [any, (values: unknown, stepKey: string) => void] {\n\tconst {state, handleSubmit} = useContext(StepContext);\n\n\treturn [state, handleSubmit];\n}\n"],"names":[],"mappings":";;;AAG6E,SAAA,OAAA,GAAA;AAC5E,EAAA,MAAM,EAAC,KAAA,EAAO,YAAgB,EAAA,GAAA,UAAA,CAAW,WAAW,CAAA,CAAA;AAEpD,EAAO,OAAA,CAAC,OAAO,YAAY,CAAA,CAAA;AAC5B;;;;"}
|