@thx/controls 19.0.0 → 19.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/date/LocalDatePicker/LocalDatePicker.js.map +1 -1
- package/dist/esm/date/LocalDatePicker/MaskedDateInput.js.map +1 -1
- package/dist/esm/date/LocalMonthSelect/LocalMonthSelect.js.map +1 -1
- package/dist/esm/date/LocalTimePicker/LocalTimePicker.js.map +1 -1
- package/dist/esm/date/LocalTimePicker/MaskedTimeInput.js +15 -13
- package/dist/esm/date/LocalTimePicker/MaskedTimeInput.js.map +1 -1
- package/dist/esm/date/MonthDayPicker/MonthDayPicker.js.map +1 -1
- package/dist/esm/date/MonthYearPicker/MonthYearPicker.js.map +1 -1
- package/dist/esm/date/YearSelect/YearSelect.js.map +1 -1
- package/dist/esm/form/TForm/TForm.js.map +1 -1
- package/dist/esm/form/TForm/useTForm.js +9 -7
- package/dist/esm/form/TForm/useTForm.js.map +1 -1
- package/dist/esm/inputs/CreditCardInput/CreditCardInput.js.map +1 -1
- package/dist/esm/inputs/CreditCardInput/CreditCardNumberInput.js +8 -5
- package/dist/esm/inputs/CreditCardInput/CreditCardNumberInput.js.map +1 -1
- package/dist/esm/inputs/MaskedInput/MaskedInput.js +12 -8
- package/dist/esm/inputs/MaskedInput/MaskedInput.js.map +1 -1
- package/dist/esm/inputs/MaskedInput/useMaskedInput.js.map +1 -1
- package/dist/esm/inputs/PhoneInput/PhoneInput.js.map +1 -1
- package/dist/esm/inputs/RadioGroup/RadioGroup.js +11 -8
- package/dist/esm/inputs/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/esm/inputs/SinInput/SinInput.js +9 -6
- package/dist/esm/inputs/SinInput/SinInput.js.map +1 -1
- package/dist/esm/inputs/TableInput/CheckboxEditCell.js.map +1 -1
- package/dist/esm/inputs/TableInput/DropdownCell.js.map +1 -1
- package/dist/esm/inputs/TableInput/HoverCell.js.map +1 -1
- package/dist/esm/inputs/TableInput/LocalDateCell.js.map +1 -1
- package/dist/esm/inputs/TableInput/LocalDateEditCell.js.map +1 -1
- package/dist/esm/inputs/TableInput/LocalTimeEditCell.js.map +1 -1
- package/dist/esm/inputs/TableInput/MoneyCell.js.map +1 -1
- package/dist/esm/inputs/TableInput/MoneyEditCell.js.map +1 -1
- package/dist/esm/inputs/TableInput/MoneySumFooter.js.map +1 -1
- package/dist/esm/inputs/TableInput/NumberEditCell.js.map +1 -1
- package/dist/esm/inputs/TableInput/StringEditCell.js.map +1 -1
- package/dist/esm/inputs/TableInput/TableInput.js.map +1 -1
- package/dist/esm/inputs/TableInput/addRowOnTab.js.map +1 -1
- package/dist/esm/money/MoneyCurrencyInput/MoneyCurrencyInput.js +19 -13
- package/dist/esm/money/MoneyCurrencyInput/MoneyCurrencyInput.js.map +1 -1
- package/dist/esm/money/MoneyInput/MoneyInput.js +10 -7
- package/dist/esm/money/MoneyInput/MoneyInput.js.map +1 -1
- package/dist/esm/money/useMoneyInput.js +13 -10
- package/dist/esm/money/useMoneyInput.js.map +1 -1
- package/dist/esm/step/FormStep.js.map +1 -1
- package/dist/esm/step/Step.js.map +1 -1
- package/dist/esm/step/StepProvider.js.map +1 -1
- package/dist/esm/step/useStep.js.map +1 -1
- package/dist/stats.html +2612 -352
- package/dist/stats.txt +42 -42
- package/dist/types/date/LocalDatePicker/LocalDatePicker.d.ts +2 -1
- package/dist/types/date/LocalDatePicker/MaskedDateInput.d.ts +1 -1
- package/dist/types/date/LocalMonthSelect/LocalMonthSelect.d.ts +2 -1
- package/dist/types/date/LocalTimePicker/LocalTimePicker.d.ts +2 -1
- package/dist/types/date/LocalTimePicker/MaskedTimeInput.d.ts +1 -1
- package/dist/types/date/MonthDayPicker/MonthDayPicker.d.ts +2 -1
- package/dist/types/date/MonthYearPicker/MonthYearPicker.d.ts +2 -1
- package/dist/types/date/YearSelect/YearSelect.d.ts +1 -1
- package/dist/types/form/TForm/TForm.d.ts +1 -1
- package/dist/types/form/TForm/types.d.ts +2 -1
- package/dist/types/form/TForm/useTForm.d.ts +7 -7
- package/dist/types/inputs/CreditCardInput/CreditCardInput.d.ts +1 -1
- package/dist/types/inputs/CreditCardInput/CreditCardNumberInput.d.ts +1 -1
- package/dist/types/inputs/MaskedInput/MaskedInput.d.ts +1 -1
- package/dist/types/inputs/MaskedInput/useMaskedInput.d.ts +1 -1
- package/dist/types/inputs/PhoneInput/PhoneInput.d.ts +1 -1
- package/dist/types/inputs/RadioGroup/RadioGroup.d.ts +3 -2
- package/dist/types/inputs/SinInput/SinInput.d.ts +1 -1
- package/dist/types/inputs/TableInput/CheckboxEditCell.d.ts +1 -1
- package/dist/types/inputs/TableInput/DropdownCell.d.ts +1 -1
- package/dist/types/inputs/TableInput/HoverCell.d.ts +1 -1
- package/dist/types/inputs/TableInput/LocalDateCell.d.ts +1 -1
- package/dist/types/inputs/TableInput/LocalDateEditCell.d.ts +1 -1
- package/dist/types/inputs/TableInput/LocalTimeEditCell.d.ts +1 -1
- package/dist/types/inputs/TableInput/MoneyCell.d.ts +1 -1
- package/dist/types/inputs/TableInput/MoneyEditCell.d.ts +1 -1
- package/dist/types/inputs/TableInput/MoneySumFooter.d.ts +1 -1
- package/dist/types/inputs/TableInput/NumberEditCell.d.ts +1 -1
- package/dist/types/inputs/TableInput/StringEditCell.d.ts +1 -1
- package/dist/types/inputs/TableInput/TableInput.d.ts +1 -1
- package/dist/types/money/MoneyCurrencyInput/MoneyCurrencyInput.d.ts +1 -1
- package/dist/types/money/MoneyInput/MoneyInput.d.ts +1 -1
- package/dist/types/step/FormStep.d.ts +3 -2
- package/dist/types/step/Step.d.ts +3 -2
- package/dist/types/step/StepProvider.d.ts +3 -2
- package/package.json +7 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LocalDatePicker.js","sources":["../../../../src/date/LocalDatePicker/LocalDatePicker.tsx"],"sourcesContent":["import type {LocalDate} from '@js-joda/core';\nimport {toDate, toLocalDate} from '@thx/date';\nimport debug from 'debug';\nimport {useEffect, useRef, useState} from 'react';\nimport type {ReactDatePickerProps} from 'react-datepicker';\nimport {Icon, Input, type InputProps} from 'semantic-ui-react';\nimport {DatePicker} from '../DatePicker/index';\nimport '../DatePicker/styles.css';\nimport {MaskedDateInput, type MaskedDateInputRef} from './MaskedDateInput';\n\nconst d = debug('thx.controls.date.LocalDatePicker');\n\ninterface ILocalDatePicker {\n\tvalue?: LocalDate | number | null;\n\tonChange?: (value: LocalDate | null) => void;\n\tonChangeRaw?: () => void;\n\tminDate?: LocalDate;\n\tmaxDate?: LocalDate;\n\ticon?: boolean;\n\topenOnFocus?: boolean;\n\tstartFocused?: boolean;\n\tstartSelected?: boolean;\n}\n\ntype InputPropsOmitted = Omit<InputProps, 'onChange'>;\ntype ReactDatePickerPropsOmitted = Omit<Omit<ReactDatePickerProps, 'value'>, 'onChange' | 'minDate' | 'maxDate' | 'icon'>;\nexport type LocalDatePickerProps = ILocalDatePicker & InputPropsOmitted & ReactDatePickerPropsOmitted;\n\nexport function LocalDatePicker(props: LocalDatePickerProps):
|
|
1
|
+
{"version":3,"file":"LocalDatePicker.js","sources":["../../../../src/date/LocalDatePicker/LocalDatePicker.tsx"],"sourcesContent":["import type {LocalDate} from '@js-joda/core';\nimport {toDate, toLocalDate} from '@thx/date';\nimport debug from 'debug';\nimport {type ReactElement, useEffect, useRef, useState} from 'react';\nimport type {ReactDatePickerProps} from 'react-datepicker';\nimport {Icon, Input, type InputProps} from 'semantic-ui-react';\nimport {DatePicker} from '../DatePicker/index';\nimport '../DatePicker/styles.css';\nimport {MaskedDateInput, type MaskedDateInputRef} from './MaskedDateInput';\n\nconst d = debug('thx.controls.date.LocalDatePicker');\n\ninterface ILocalDatePicker {\n\tvalue?: LocalDate | number | null;\n\tonChange?: (value: LocalDate | null) => void;\n\tonChangeRaw?: () => void;\n\tminDate?: LocalDate;\n\tmaxDate?: LocalDate;\n\ticon?: boolean;\n\topenOnFocus?: boolean;\n\tstartFocused?: boolean;\n\tstartSelected?: boolean;\n}\n\ntype InputPropsOmitted = Omit<InputProps, 'onChange'>;\ntype ReactDatePickerPropsOmitted = Omit<Omit<ReactDatePickerProps, 'value'>, 'onChange' | 'minDate' | 'maxDate' | 'icon'>;\nexport type LocalDatePickerProps = ILocalDatePicker & InputPropsOmitted & ReactDatePickerPropsOmitted;\n\nexport function LocalDatePicker(props: LocalDatePickerProps): ReactElement {\n\tconst {\n\t\tminDate,\n\t\tmaxDate,\n\t\tvalue,\n\t\tonChange,\n\t\tonBlur,\n\t\tas,\n\t\taction,\n\t\tactionPosition,\n\t\tclassName,\n\t\terror,\n\t\tfluid,\n\t\tfocus,\n\t\ticon = true,\n\t\tinverted,\n\t\tlabel,\n\t\tlabelPosition,\n\t\tloading,\n\t\tsize,\n\t\ttabIndex,\n\t\ttransparent,\n\t\topenOnFocus = false,\n\t\tstartFocused,\n\t\tstartSelected,\n\t\t...rest\n\t} = props;\n\n\tconst inputProps = {\n\t\tas,\n\t\taction,\n\t\tactionPosition,\n\t\tclassName: `${className || ''} icon`,\n\t\terror,\n\t\tfocus,\n\t\tfluid,\n\t\tinverted,\n\t\tlabel,\n\t\tlabelPosition,\n\t\tloading,\n\t\tsize,\n\t\ttabIndex,\n\t\ttransparent,\n\t};\n\n\tconst maskedInputProps = {\n\t\tas,\n\t\taction,\n\t\tactionPosition,\n\t\tclassName,\n\t\terror,\n\t\tfocus,\n\t\tinverted,\n\t\tlabel,\n\t\tlabelPosition,\n\t\tloading,\n\t\tsize,\n\t\ttabIndex,\n\t\ttransparent,\n\t};\n\n\tconst iconProps = {\n\t\tclassName,\n\t\tinverted,\n\t\tloading,\n\t\tsize,\n\t\ttransparent,\n\t};\n\n\tconst [isOpen, setIsOpen] = useState(false);\n\tconst [selected, setSelected] = useState<Date | null>();\n\tconst ref = useRef<MaskedDateInputRef>(null);\n\n\tuseEffect(() => {\n\t\tsetSelected(value ? toDate(value) : null);\n\t}, [value]);\n\n\tuseEffect(() => {\n\t\tif (startFocused) {\n\t\t\tref.current?.focus();\n\t\t}\n\t}, [startFocused]);\n\n\tuseEffect(() => {\n\t\tif (startSelected) {\n\t\t\tref.current?.select();\n\t\t}\n\t}, [startSelected]);\n\n\tconst handleDateChange = (date: Date) => {\n\t\tlet allowedDate = toLocalDate(date);\n\n\t\tif (minDate?.isAfter(allowedDate)) {\n\t\t\tallowedDate = minDate;\n\t\t}\n\t\tif (maxDate?.isBefore(allowedDate)) {\n\t\t\tallowedDate = maxDate;\n\t\t}\n\t\tonChange && onChange(date ? allowedDate : null);\n\t\tsetSelected(toDate(allowedDate));\n\t\tsetIsOpen(false);\n\t};\n\n\tconst handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\tconst inputValue = e.target.value;\n\t\tconst date = inputValue ? toDate(inputValue) : null;\n\n\t\tdate && handleDateChange(date);\n\t};\n\n\tconst handleDatePickerBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n\t\tsetIsOpen(false);\n\t\tonBlur && onBlur(e);\n\t\thandleInputChange(e);\n\t};\n\n\tconst toggleDatePicker = () => {\n\t\tsetIsOpen(!isOpen);\n\t};\n\n\tconst handleOnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n\t\t// toggle on enter\n\t\te?.key === 'Enter' && toggleDatePicker();\n\t\t// hide on escape\n\t\te?.key === 'Escape' && setIsOpen(false);\n\t};\n\n\treturn (\n\t\t<DatePicker\n\t\t\t{...rest}\n\t\t\tselected={selected}\n\t\t\tonChange={handleDateChange}\n\t\t\tcustomInput={\n\t\t\t\t<Input {...inputProps}>\n\t\t\t\t\t<MaskedDateInput\n\t\t\t\t\t\t{...maskedInputProps}\n\t\t\t\t\t\tonBlur={handleDatePickerBlur}\n\t\t\t\t\t\tvalue={selected}\n\t\t\t\t\t\tonClick={({target}: {target: HTMLInputElement}) => (openOnFocus ? setIsOpen(!isOpen) : target.select())}\n\t\t\t\t\t\tonKeyDown={handleOnKeyDown}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t/>\n\t\t\t\t\t{icon && <Icon {...iconProps} onClick={toggleDatePicker} tabIndex={-1} name=\"calendar alternate\" link />}\n\t\t\t\t</Input>\n\t\t\t}\n\t\t\tminDate={minDate ? toDate(minDate) : null}\n\t\t\tmaxDate={maxDate ? toDate(maxDate) : null}\n\t\t\topen={isOpen}\n\t\t\tenableTabLoop={openOnFocus}\n\t\t\tpreventOpenOnFocus={openOnFocus}\n\t\t\tonBlur={handleDatePickerBlur}\n\t\t\tonClickOutside={() => setIsOpen(false)}\n\t\t/>\n\t);\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MaskedDateInput.js","sources":["../../../../src/date/LocalDatePicker/MaskedDateInput.tsx"],"sourcesContent":["import debug from 'debug';\nimport {forwardRef} from 'react';\nimport {MaskedInput, type MaskedInputProps} from '../../inputs/MaskedInput';\nimport type {MaskedInputRef} from '../../inputs/MaskedInput/MaskedInput';\n\nconst d = debug('thx.controls.date.LocalDatePicker.MaskedDateInput');\n\nexport type MaskedDateInputRef = MaskedInputRef;\n\nexport interface MaskedDateInputValue {\n\ttarget: {\n\t\tvalue: string;\n\t};\n}\n\nexport interface MaskedDateInputProps {\n\tname?: string;\n\tonChange?: (value: MaskedDateInputValue) => void;\n}\n\nexport const MaskedDateInput = forwardRef<MaskedDateInputRef, MaskedDateInputProps & Omit<MaskedInputProps, 'onChange'>>((props, ref) => {\n\tconst {onChange, name, ...rest} = props;\n\n\treturn (\n\t\t<MaskedInput\n\t\t\t{...rest}\n\t\t\tref={ref}\n\t\t\tname={name}\n\t\t\tmask={{alias: 'datetime', inputFormat: 'mm/dd/yyyy'}}\n\t\t\tonChange={(value: string) => {\n\t\t\t\tif (onChange) onChange({target: {value: value || ''}});\n\t\t\t}}\n\t\t/>\n\t);\n});\n"],"names":[],"mappings":";;;;;AAKU,MAAM,mDAAmD,EAAA;AAe5D,MAAM,eAAkB,GAAA,UAAA,CAA0F,CAAC,KAAA,EAAO,GAAQ,KAAA;AACxI,
|
|
1
|
+
{"version":3,"file":"MaskedDateInput.js","sources":["../../../../src/date/LocalDatePicker/MaskedDateInput.tsx"],"sourcesContent":["import debug from 'debug';\nimport {forwardRef} from 'react';\nimport {MaskedInput, type MaskedInputProps} from '../../inputs/MaskedInput';\nimport type {MaskedInputRef} from '../../inputs/MaskedInput/MaskedInput';\n\nconst d = debug('thx.controls.date.LocalDatePicker.MaskedDateInput');\n\nexport type MaskedDateInputRef = MaskedInputRef;\n\nexport interface MaskedDateInputValue {\n\ttarget: {\n\t\tvalue: string;\n\t};\n}\n\nexport interface MaskedDateInputProps {\n\tname?: string;\n\tonChange?: (value: MaskedDateInputValue) => void;\n}\n\nexport const MaskedDateInput = forwardRef<MaskedDateInputRef, MaskedDateInputProps & Omit<MaskedInputProps, 'onChange'>>((props, ref) => {\n\tconst {onChange, name, ...rest} = props;\n\n\treturn (\n\t\t<MaskedInput\n\t\t\t{...rest}\n\t\t\tref={ref}\n\t\t\tname={name}\n\t\t\tmask={{alias: 'datetime', inputFormat: 'mm/dd/yyyy'}}\n\t\t\tonChange={(value: string) => {\n\t\t\t\tif (onChange) onChange({target: {value: value || ''}});\n\t\t\t}}\n\t\t/>\n\t);\n});\n"],"names":[],"mappings":";;;;;AAKU,MAAM,mDAAmD,EAAA;AAe5D,MAAM,eAAkB,GAAA,UAAA,CAA0F,CAAC,KAAA,EAAO,GAAQ,KAAA;AACxI,EAAA,MAAM,EAAC,QAAA,EAAU,IAAS,EAAA,GAAA,IAAA,EAAQ,GAAA,KAAA,CAAA;AAElC,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAA,IACC,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAM,EAAA,EAAC,KAAO,EAAA,UAAA,EAAY,aAAa,YAAY,EAAA;AAAA,IACnD,QAAA,EAAU,CAAC,KAAkB,KAAA;AAC5B,MAAI,IAAA,QAAA;AAAU,QAAA,QAAA,CAAS,EAAC,MAAQ,EAAA,EAAC,OAAO,KAAS,IAAA,EAAA,IAAI,CAAA,CAAA;AAAA,KACtD;AAAA,GACD,CAAA,CAAA;AAEF,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LocalMonthSelect.js","sources":["../../../../src/date/LocalMonthSelect/LocalMonthSelect.tsx"],"sourcesContent":["import {LocalDate} from '@js-joda/core';\nimport debug from 'debug';\nimport {Select, type SelectProps} from 'semantic-ui-react';\n\nconst d = debug('thx.controls.date.LocalMonthSelect');\n\nconst monthOptions = [\n\t{text: 'January', value: 1, key: 1},\n\t{text: 'February', value: 2, key: 2},\n\t{text: 'March', value: 3, key: 3},\n\t{text: 'April', value: 4, key: 4},\n\t{text: 'May', value: 5, key: 5},\n\t{text: 'June', value: 6, key: 6},\n\t{text: 'July', value: 7, key: 7},\n\t{text: 'August', value: 8, key: 8},\n\t{text: 'September', value: 9, key: 9},\n\t{text: 'October', value: 10, key: 10},\n\t{text: 'November', value: 11, key: 11},\n\t{text: 'December', value: 12, key: 12},\n];\n\ninterface ILocalMonthSelectProps {\n\tonChange?: (value: LocalDate | null) => void;\n\tvalue?: LocalDate | null;\n\tyear?: number;\n\thandleBlur?: (event: any) => void;\n}\n\nexport type LocalMonthSelectProps = ILocalMonthSelectProps & Omit<SelectProps, 'options'>;\n\nexport function LocalMonthSelect(props: LocalMonthSelectProps):
|
|
1
|
+
{"version":3,"file":"LocalMonthSelect.js","sources":["../../../../src/date/LocalMonthSelect/LocalMonthSelect.tsx"],"sourcesContent":["import {LocalDate} from '@js-joda/core';\nimport debug from 'debug';\nimport {type ReactElement} from 'react';\nimport {Select, type SelectProps} from 'semantic-ui-react';\n\nconst d = debug('thx.controls.date.LocalMonthSelect');\n\nconst monthOptions = [\n\t{text: 'January', value: 1, key: 1},\n\t{text: 'February', value: 2, key: 2},\n\t{text: 'March', value: 3, key: 3},\n\t{text: 'April', value: 4, key: 4},\n\t{text: 'May', value: 5, key: 5},\n\t{text: 'June', value: 6, key: 6},\n\t{text: 'July', value: 7, key: 7},\n\t{text: 'August', value: 8, key: 8},\n\t{text: 'September', value: 9, key: 9},\n\t{text: 'October', value: 10, key: 10},\n\t{text: 'November', value: 11, key: 11},\n\t{text: 'December', value: 12, key: 12},\n];\n\ninterface ILocalMonthSelectProps {\n\tonChange?: (value: LocalDate | null) => void;\n\tvalue?: LocalDate | null;\n\tyear?: number;\n\thandleBlur?: (event: any) => void;\n}\n\nexport type LocalMonthSelectProps = ILocalMonthSelectProps & Omit<SelectProps, 'options'>;\n\nexport function LocalMonthSelect(props: LocalMonthSelectProps): ReactElement {\n\tconst {value, onChange, year, handleBlur, ...rest} = props;\n\n\tconst theYear = year || LocalDate.now().year();\n\n\treturn (\n\t\t<Select\n\t\t\tplaceholder=\"Select Month\"\n\t\t\toptions={monthOptions}\n\t\t\tvalue={value ? value.monthValue() : ''}\n\t\t\tonChange={(ev, v) => {\n\t\t\t\tif (onChange) {\n\t\t\t\t\tif (typeof v.value === 'number') {\n\t\t\t\t\t\tonChange(v ? LocalDate.of(theYear, v.value, 1) : null);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tonChange(null);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}}\n\t\t\tonBlur={handleBlur}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n"],"names":[],"mappings":";;;;;AAKU,MAAM,oCAAoC,EAAA;AAEpD,MAAM,YAAe,GAAA;AAAA,EACpB,EAAC,IAAM,EAAA,SAAA,EAAW,KAAO,EAAA,CAAA,EAAG,KAAK,CAAC,EAAA;AAAA,EAClC,EAAC,IAAM,EAAA,UAAA,EAAY,KAAO,EAAA,CAAA,EAAG,KAAK,CAAC,EAAA;AAAA,EACnC,EAAC,IAAM,EAAA,OAAA,EAAS,KAAO,EAAA,CAAA,EAAG,KAAK,CAAC,EAAA;AAAA,EAChC,EAAC,IAAM,EAAA,OAAA,EAAS,KAAO,EAAA,CAAA,EAAG,KAAK,CAAC,EAAA;AAAA,EAChC,EAAC,IAAM,EAAA,KAAA,EAAO,KAAO,EAAA,CAAA,EAAG,KAAK,CAAC,EAAA;AAAA,EAC9B,EAAC,IAAM,EAAA,MAAA,EAAQ,KAAO,EAAA,CAAA,EAAG,KAAK,CAAC,EAAA;AAAA,EAC/B,EAAC,IAAM,EAAA,MAAA,EAAQ,KAAO,EAAA,CAAA,EAAG,KAAK,CAAC,EAAA;AAAA,EAC/B,EAAC,IAAM,EAAA,QAAA,EAAU,KAAO,EAAA,CAAA,EAAG,KAAK,CAAC,EAAA;AAAA,EACjC,EAAC,IAAM,EAAA,WAAA,EAAa,KAAO,EAAA,CAAA,EAAG,KAAK,CAAC,EAAA;AAAA,EACpC,EAAC,IAAM,EAAA,SAAA,EAAW,KAAO,EAAA,EAAA,EAAI,KAAK,EAAE,EAAA;AAAA,EACpC,EAAC,IAAM,EAAA,UAAA,EAAY,KAAO,EAAA,EAAA,EAAI,KAAK,EAAE,EAAA;AAAA,EACrC,EAAC,IAAM,EAAA,UAAA,EAAY,KAAO,EAAA,EAAA,EAAI,KAAK,EAAE,EAAA;AACtC,CAAA,CAAA;AAWO,SAAS,iBAAiB,KAA4C,EAAA;AAC5E,EAAA,MAAM,EAAC,KAAO,EAAA,QAAA,EAAU,IAAM,EAAA,UAAA,EAAA,GAAe,MAAQ,GAAA,KAAA,CAAA;AAErD,EAAA,MAAM,OAAU,GAAA,IAAA,IAAQ,SAAU,CAAA,GAAA,GAAM,IAAK,EAAA,CAAA;AAE7C,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACA,WAAY,EAAA,cAAA;AAAA,IACZ,OAAS,EAAA,YAAA;AAAA,IACT,KAAO,EAAA,KAAA,GAAQ,KAAM,CAAA,UAAA,EAAe,GAAA,EAAA;AAAA,IACpC,QAAA,EAAU,CAAC,EAAA,EAAI,CAAM,KAAA;AACpB,MAAA,IAAI,QAAU,EAAA;AACb,QAAI,IAAA,OAAO,CAAE,CAAA,KAAA,KAAU,QAAU,EAAA;AAChC,UAAS,QAAA,CAAA,CAAA,GAAI,UAAU,EAAG,CAAA,OAAA,EAAS,EAAE,KAAO,EAAA,CAAC,IAAI,IAAI,CAAA,CAAA;AAAA,SAC/C,MAAA;AACN,UAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AAAA,SACd;AAAA,OACD;AAAA,KACD;AAAA,IACA,MAAQ,EAAA,UAAA;AAAA,IACP,GAAG,IAAA;AAAA,GACL,CAAA,CAAA;AAEF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LocalTimePicker.js","sources":["../../../../src/date/LocalTimePicker/LocalTimePicker.tsx"],"sourcesContent":["import {LocalTime} from '@js-joda/core';\nimport {toDate, toLocalTime} from '@thx/date';\nimport debug from 'debug';\nimport type {ReactDatePickerProps} from 'react-datepicker';\nimport {Input, type InputProps} from 'semantic-ui-react';\nimport {DatePicker} from '../DatePicker/index';\nimport {MaskedTimeInput} from './MaskedTimeInput';\n\nconst d = debug('thx.controls.date.LocalTimePicker');\n\ninterface ILocalTimePicker {\n\tvalue?: LocalTime | number | null;\n\tonChange?: (value: LocalTime | null) => void;\n\tonChangeRaw?: () => void;\n}\n\ntype InputPropsOmitted = Omit<InputProps, 'onChange'>;\ntype ReactDatePickerPropsOmitted = Omit<Omit<ReactDatePickerProps, 'value'>, 'onChange'>;\nexport type LocalTimePickerProps = ILocalTimePicker & InputPropsOmitted & ReactDatePickerPropsOmitted;\n\nexport function LocalTimePicker(props: LocalTimePickerProps):
|
|
1
|
+
{"version":3,"file":"LocalTimePicker.js","sources":["../../../../src/date/LocalTimePicker/LocalTimePicker.tsx"],"sourcesContent":["import {LocalTime} from '@js-joda/core';\nimport {toDate, toLocalTime} from '@thx/date';\nimport debug from 'debug';\nimport {type ReactElement} from 'react';\nimport type {ReactDatePickerProps} from 'react-datepicker';\nimport {Input, type InputProps} from 'semantic-ui-react';\nimport {DatePicker} from '../DatePicker/index';\nimport {MaskedTimeInput} from './MaskedTimeInput';\n\nconst d = debug('thx.controls.date.LocalTimePicker');\n\ninterface ILocalTimePicker {\n\tvalue?: LocalTime | number | null;\n\tonChange?: (value: LocalTime | null) => void;\n\tonChangeRaw?: () => void;\n}\n\ntype InputPropsOmitted = Omit<InputProps, 'onChange'>;\ntype ReactDatePickerPropsOmitted = Omit<Omit<ReactDatePickerProps, 'value'>, 'onChange'>;\nexport type LocalTimePickerProps = ILocalTimePicker & InputPropsOmitted & ReactDatePickerPropsOmitted;\n\nexport function LocalTimePicker(props: LocalTimePickerProps): ReactElement {\n\tconst {\n\t\tvalue,\n\t\tonChange,\n\t\tonBlur,\n\t\tas,\n\t\taction,\n\t\tactionPosition,\n\t\tclassName,\n\t\terror,\n\t\tfluid,\n\t\tfocus,\n\t\tinverted,\n\t\tlabel,\n\t\tlabelPosition,\n\t\tloading,\n\t\tsize,\n\t\ttabIndex,\n\t\ttransparent,\n\t\tstartFocused,\n\t\tstartSelected,\n\t\t...rest\n\t} = props;\n\n\tconst inputProps = {\n\t\tas,\n\t\taction,\n\t\tactionPosition,\n\t\tclassName: `${className || ''} icon`,\n\t\terror,\n\t\tfocus,\n\t\tfluid,\n\t\tinverted,\n\t\tlabel,\n\t\tlabelPosition,\n\t\tloading,\n\t\tsize,\n\t\ttabIndex,\n\t\ttransparent,\n\t};\n\n\tconst maskedInputProps = {\n\t\tas,\n\t\taction,\n\t\tactionPosition,\n\t\tclassName,\n\t\terror,\n\t\tfocus,\n\t\tinverted,\n\t\tlabel,\n\t\tlabelPosition,\n\t\tloading,\n\t\tsize,\n\t\ttabIndex,\n\t\ttransparent,\n\t};\n\n\tlet selected;\n\tif (typeof value === 'number') selected = toDate(LocalTime.ofSecondOfDay(value));\n\telse selected = value ? toDate(value) : null;\n\n\tconst handleDatePickerBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n\t\tonBlur && onBlur(e);\n\t};\n\n\treturn (\n\t\t<DatePicker\n\t\t\t{...rest}\n\t\t\tselected={selected}\n\t\t\tonChange={date => {\n\t\t\t\tif (onChange) onChange(date ? toLocalTime(date) : null);\n\t\t\t}}\n\t\t\tshowTimeSelect\n\t\t\tshowTimeSelectOnly\n\t\t\ttimeIntervals={15}\n\t\t\ttimeCaption=\"Time\"\n\t\t\tdateFormat=\"hh:mm aa\"\n\t\t\tcustomInput={\n\t\t\t\t<Input {...inputProps}>\n\t\t\t\t\t<MaskedTimeInput {...maskedInputProps} onBlur={handleDatePickerBlur} />\n\t\t\t\t</Input>\n\t\t\t}\n\t\t\tonBlur={handleDatePickerBlur}\n\t\t/>\n\t);\n}\n"],"names":[],"mappings":";;;;;;;;;AASU,MAAM,mCAAmC,EAAA;AAY5C,SAAS,gBAAgB,KAA2C,EAAA;AAC1E,EAAM,MAAA;AAAA,IACL,KAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,EAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACA,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,UAAa,GAAA;AAAA,IAClB,EAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA,EAAW,GAAG,SAAa,IAAA,EAAA,CAAA,KAAA,CAAA;AAAA,IAC3B,KAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;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,MAAM,gBAAmB,GAAA;AAAA,IACxB,EAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;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,EAAI,IAAA,QAAA,CAAA;AACJ,EAAA,IAAI,OAAO,KAAU,KAAA,QAAA;AAAU,IAAA,QAAA,GAAW,MAAO,CAAA,SAAA,CAAU,aAAc,CAAA,KAAK,CAAC,CAAA,CAAA;AAAA;AAC1E,IAAW,QAAA,GAAA,KAAA,GAAQ,MAAO,CAAA,KAAK,CAAI,GAAA,IAAA,CAAA;AAExC,EAAM,MAAA,oBAAA,GAAuB,CAAC,CAA0C,KAAA;AACvE,IAAA,MAAA,IAAU,OAAO,CAAC,CAAA,CAAA;AAAA,GACnB,CAAA;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,IACC,GAAG,IAAA;AAAA,IACJ,QAAA;AAAA,IACA,UAAU,CAAQ,IAAA,KAAA;AACjB,MAAI,IAAA,QAAA;AAAU,QAAA,QAAA,CAAS,IAAO,GAAA,WAAA,CAAY,IAAI,CAAA,GAAI,IAAI,CAAA,CAAA;AAAA,KACvD;AAAA,IACA,cAAc,EAAA,IAAA;AAAA,IACd,kBAAkB,EAAA,IAAA;AAAA,IAClB,aAAe,EAAA,EAAA;AAAA,IACf,WAAY,EAAA,MAAA;AAAA,IACZ,UAAW,EAAA,UAAA;AAAA,IACX,6BACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAO,GAAG,UAAA;AAAA,KAAA,kBACT,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,MAAiB,GAAG,gBAAA;AAAA,MAAkB,MAAQ,EAAA,oBAAA;AAAA,KAAsB,CACtE,CAAA;AAAA,IAED,MAAQ,EAAA,oBAAA;AAAA,GACT,CAAA,CAAA;AAEF;;;;"}
|
|
@@ -4,19 +4,21 @@ import { MaskedInput } from '../../inputs/MaskedInput/MaskedInput.js';
|
|
|
4
4
|
import '../../inputs/MaskedInput/useMaskedInput.js';
|
|
5
5
|
|
|
6
6
|
debug("thx.controls.date.LocalTimePicker.MaskedTimeInput");
|
|
7
|
-
const MaskedTimeInput = forwardRef(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
onChange
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
});
|
|
7
|
+
const MaskedTimeInput = forwardRef(
|
|
8
|
+
(props, ref) => {
|
|
9
|
+
const { onChange, name, ...rest } = props;
|
|
10
|
+
return /* @__PURE__ */ React.createElement(MaskedInput, {
|
|
11
|
+
...rest,
|
|
12
|
+
ref,
|
|
13
|
+
name,
|
|
14
|
+
mask: { alias: "datetime", inputFormat: "hh:MM TT" },
|
|
15
|
+
onChange: (value) => {
|
|
16
|
+
if (onChange)
|
|
17
|
+
onChange({ target: { value: value || "" } });
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
);
|
|
20
22
|
|
|
21
23
|
export { MaskedTimeInput };
|
|
22
24
|
//# sourceMappingURL=MaskedTimeInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MaskedTimeInput.js","sources":["../../../../src/date/LocalTimePicker/MaskedTimeInput.tsx"],"sourcesContent":["import debug from 'debug';\nimport {forwardRef} from 'react';\nimport {MaskedInput, type MaskedInputProps} from '../../inputs/MaskedInput';\nimport type {MaskedInputRef} from '../../inputs/MaskedInput/MaskedInput';\n\nconst d = debug('thx.controls.date.LocalTimePicker.MaskedTimeInput');\n\nexport type MaskedTimeInputRef = MaskedInputRef;\n\nexport interface MaskedTimeInputValue {\n\ttarget: {\n\t\tvalue: string;\n\t};\n}\n\nexport interface MaskedTimeInputProps {\n\tonChange?: (value: MaskedTimeInputValue) => void;\n}\n\nexport const MaskedTimeInput = forwardRef<MaskedTimeInputRef, MaskedTimeInputProps & Omit<MaskedInputProps, 'onChange'>>(\n\t(props: MaskedTimeInputProps & Omit<MaskedInputProps, 'onChange'>, ref: any) => {\n\t\tconst {onChange, name, ...rest} = props;\n\n\t\treturn (\n\t\t\t<MaskedInput\n\t\t\t\t{...rest}\n\t\t\t\tref={ref}\n\t\t\t\tname={name}\n\t\t\t\tmask={{alias: 'datetime', inputFormat: 'hh:MM TT'}}\n\t\t\t\tonChange={(value: string) => {\n\t\t\t\t\tif (onChange) onChange({target: {value: value || ''}});\n\t\t\t\t}}\n\t\t\t/>\n\t\t);\n\t},\n);\n"],"names":[],"mappings":";;;;;AAKU,MAAM,mDAAmD,EAAA;AAc5D,MAAM,eAAkB,GAAA,UAAA,
|
|
1
|
+
{"version":3,"file":"MaskedTimeInput.js","sources":["../../../../src/date/LocalTimePicker/MaskedTimeInput.tsx"],"sourcesContent":["import debug from 'debug';\nimport {forwardRef} from 'react';\nimport {MaskedInput, type MaskedInputProps} from '../../inputs/MaskedInput';\nimport type {MaskedInputRef} from '../../inputs/MaskedInput/MaskedInput';\n\nconst d = debug('thx.controls.date.LocalTimePicker.MaskedTimeInput');\n\nexport type MaskedTimeInputRef = MaskedInputRef;\n\nexport interface MaskedTimeInputValue {\n\ttarget: {\n\t\tvalue: string;\n\t};\n}\n\nexport interface MaskedTimeInputProps {\n\tonChange?: (value: MaskedTimeInputValue) => void;\n}\n\nexport const MaskedTimeInput = forwardRef<MaskedTimeInputRef, MaskedTimeInputProps & Omit<MaskedInputProps, 'onChange'>>(\n\t(props: MaskedTimeInputProps & Omit<MaskedInputProps, 'onChange'>, ref: any) => {\n\t\tconst {onChange, name, ...rest} = props;\n\n\t\treturn (\n\t\t\t<MaskedInput\n\t\t\t\t{...rest}\n\t\t\t\tref={ref}\n\t\t\t\tname={name}\n\t\t\t\tmask={{alias: 'datetime', inputFormat: 'hh:MM TT'}}\n\t\t\t\tonChange={(value: string) => {\n\t\t\t\t\tif (onChange) onChange({target: {value: value || ''}});\n\t\t\t\t}}\n\t\t\t/>\n\t\t);\n\t},\n);\n"],"names":[],"mappings":";;;;;AAKU,MAAM,mDAAmD,EAAA;AAc5D,MAAM,eAAkB,GAAA,UAAA;AAAA,EAC9B,CAAC,OAAkE,GAAa,KAAA;AAC/E,IAAA,MAAM,EAAC,QAAA,EAAU,IAAS,EAAA,GAAA,IAAA,EAAQ,GAAA,KAAA,CAAA;AAElC,IAAA,uBACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAM,EAAA,EAAC,KAAO,EAAA,UAAA,EAAY,aAAa,UAAU,EAAA;AAAA,MACjD,QAAA,EAAU,CAAC,KAAkB,KAAA;AAC5B,QAAI,IAAA,QAAA;AAAU,UAAA,QAAA,CAAS,EAAC,MAAQ,EAAA,EAAC,OAAO,KAAS,IAAA,EAAA,IAAI,CAAA,CAAA;AAAA,OACtD;AAAA,KACD,CAAA,CAAA;AAAA,GAEF;AACD;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MonthDayPicker.js","sources":["../../../../src/date/MonthDayPicker/MonthDayPicker.tsx"],"sourcesContent":["import type {LocalDate} from '@js-joda/core';\nimport {toDate, toLocalDate} from '@thx/date';\nimport debug from 'debug';\nimport type {ReactDatePickerProps} from 'react-datepicker';\nimport {type InputProps, Input} from 'semantic-ui-react';\nimport {DatePicker} from '../DatePicker/index';\n\nconst d = debug('thx.controls.date.MonthDayPicker');\n\nconst months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n\ninterface MonthDayHeaderProps {\n\tdate: Date;\n\tchangeYear(year: number): void;\n\tchangeMonth(month: number): void;\n\tdecreaseMonth(): void;\n\tincreaseMonth(): void;\n\tprevMonthButtonDisabled: boolean;\n\tnextMonthButtonDisabled: boolean;\n\tdecreaseYear(): void;\n\tincreaseYear(): void;\n\tprevYearButtonDisabled: boolean;\n\tnextYearButtonDisabled: boolean;\n}\n\nfunction MonthDayHeader(props: MonthDayHeaderProps) {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"react-datepicker__current-month\">{months[props.date.getMonth()]}</div>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName=\"react-datepicker__navigation react-datepicker__navigation--previous\"\n\t\t\t\taria-label=\"Previous Month\"\n\t\t\t\tonClick={props.decreaseMonth}\n\t\t\t\tdisabled={props.prevMonthButtonDisabled}\n\t\t\t>\n\t\t\t\tPrevious Month\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName=\"react-datepicker__navigation react-datepicker__navigation--next\"\n\t\t\t\taria-label=\"Next Month\"\n\t\t\t\tonClick={props.increaseMonth}\n\t\t\t\tdisabled={props.nextMonthButtonDisabled}\n\t\t\t>\n\t\t\t\tNext Month\n\t\t\t</button>\n\t\t</>\n\t);\n}\n\ninterface IMonthDayPickerProps {\n\tvalue?: LocalDate | number | null;\n\tonChange?: (value: LocalDate | null) => void;\n\tonChangeRaw?: () => void;\n}\n\ntype InputPropsOmitted = Omit<InputProps, 'onChange'>;\ntype ReactDatePickerPropsOmitted = Omit<Omit<ReactDatePickerProps, 'value'>, 'onChange'>;\nexport type MonthDayPickerProps = IMonthDayPickerProps & InputPropsOmitted & ReactDatePickerPropsOmitted;\n\nexport function MonthDayPicker(props: MonthDayPickerProps):
|
|
1
|
+
{"version":3,"file":"MonthDayPicker.js","sources":["../../../../src/date/MonthDayPicker/MonthDayPicker.tsx"],"sourcesContent":["import type {LocalDate} from '@js-joda/core';\nimport {toDate, toLocalDate} from '@thx/date';\nimport debug from 'debug';\nimport {type ReactElement} from 'react';\nimport type {ReactDatePickerProps} from 'react-datepicker';\nimport {type InputProps, Input} from 'semantic-ui-react';\nimport {DatePicker} from '../DatePicker/index';\n\nconst d = debug('thx.controls.date.MonthDayPicker');\n\nconst months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n\ninterface MonthDayHeaderProps {\n\tdate: Date;\n\tchangeYear(year: number): void;\n\tchangeMonth(month: number): void;\n\tdecreaseMonth(): void;\n\tincreaseMonth(): void;\n\tprevMonthButtonDisabled: boolean;\n\tnextMonthButtonDisabled: boolean;\n\tdecreaseYear(): void;\n\tincreaseYear(): void;\n\tprevYearButtonDisabled: boolean;\n\tnextYearButtonDisabled: boolean;\n}\n\nfunction MonthDayHeader(props: MonthDayHeaderProps) {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"react-datepicker__current-month\">{months[props.date.getMonth()]}</div>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName=\"react-datepicker__navigation react-datepicker__navigation--previous\"\n\t\t\t\taria-label=\"Previous Month\"\n\t\t\t\tonClick={props.decreaseMonth}\n\t\t\t\tdisabled={props.prevMonthButtonDisabled}\n\t\t\t>\n\t\t\t\tPrevious Month\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName=\"react-datepicker__navigation react-datepicker__navigation--next\"\n\t\t\t\taria-label=\"Next Month\"\n\t\t\t\tonClick={props.increaseMonth}\n\t\t\t\tdisabled={props.nextMonthButtonDisabled}\n\t\t\t>\n\t\t\t\tNext Month\n\t\t\t</button>\n\t\t</>\n\t);\n}\n\ninterface IMonthDayPickerProps {\n\tvalue?: LocalDate | number | null;\n\tonChange?: (value: LocalDate | null) => void;\n\tonChangeRaw?: () => void;\n}\n\ntype InputPropsOmitted = Omit<InputProps, 'onChange'>;\ntype ReactDatePickerPropsOmitted = Omit<Omit<ReactDatePickerProps, 'value'>, 'onChange'>;\nexport type MonthDayPickerProps = IMonthDayPickerProps & InputPropsOmitted & ReactDatePickerPropsOmitted;\n\nexport function MonthDayPicker(props: MonthDayPickerProps): ReactElement {\n\tconst {\n\t\tvalue,\n\t\tonChange,\n\t\tas,\n\t\taction,\n\t\tactionPosition,\n\t\tclassName,\n\t\tdisabled,\n\t\terror,\n\t\tfluid,\n\t\tfocus,\n\t\ticon,\n\t\ticonPosition,\n\t\tinverted,\n\t\tlabel,\n\t\tlabelPosition,\n\t\tloading,\n\t\tsize,\n\t\ttabIndex,\n\t\ttransparent,\n\t\t...rest\n\t} = props;\n\n\tconst selected = value ? toDate(value) : null;\n\n\tconst inputProps = {\n\t\tas,\n\t\taction,\n\t\tactionPosition,\n\t\tclassName,\n\t\tdisabled,\n\t\terror,\n\t\tfluid,\n\t\tfocus,\n\t\ticon,\n\t\ticonPosition,\n\t\tinverted,\n\t\tlabel,\n\t\tlabelPosition,\n\t\tloading,\n\t\tsize,\n\t\ttabIndex,\n\t\ttransparent,\n\t};\n\n\treturn (\n\t\t<DatePicker\n\t\t\t{...rest}\n\t\t\tselected={selected}\n\t\t\tonChange={date => {\n\t\t\t\tif (onChange) onChange(date ? toLocalDate(date) : null);\n\t\t\t}}\n\t\t\tcustomInput={<Input {...inputProps} />}\n\t\t\trenderCustomHeader={MonthDayHeader}\n\t\t\tdateFormat=\"MMMM d\"\n\t\t/>\n\t);\n}\n"],"names":[],"mappings":";;;;;;;AAQU,MAAM,kCAAkC,EAAA;AAElD,MAAM,MAAS,GAAA,CAAC,SAAW,EAAA,UAAA,EAAY,OAAS,EAAA,OAAA,EAAS,KAAO,EAAA,MAAA,EAAQ,MAAQ,EAAA,QAAA,EAAU,WAAa,EAAA,SAAA,EAAW,YAAY,UAAU,CAAA,CAAA;AAgBxI,SAAS,eAAe,KAA4B,EAAA;AACnD,EAAA,iFAEG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,iCAAA;AAAA,GAAA,EAAmC,OAAO,KAAM,CAAA,IAAA,CAAK,QAAS,EAAA,CAAG,mBAC/E,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IACL,SAAU,EAAA,qEAAA;AAAA,IACV,YAAW,EAAA,gBAAA;AAAA,IACX,SAAS,KAAM,CAAA,aAAA;AAAA,IACf,UAAU,KAAM,CAAA,uBAAA;AAAA,GAChB,EAAA,gBAED,mBACC,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IACL,SAAU,EAAA,iEAAA;AAAA,IACV,YAAW,EAAA,YAAA;AAAA,IACX,SAAS,KAAM,CAAA,aAAA;AAAA,IACf,UAAU,KAAM,CAAA,uBAAA;AAAA,GAAA,EAChB,YAED,CACD,CAAA,CAAA;AAEF,CAAA;AAYO,SAAS,eAAe,KAA0C,EAAA;AACxE,EAAM,MAAA;AAAA,IACL,KAAA;AAAA,IACA,QAAA;AAAA,IACA,EAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACA,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,QAAW,GAAA,KAAA,GAAQ,MAAO,CAAA,KAAK,CAAI,GAAA,IAAA,CAAA;AAEzC,EAAA,MAAM,UAAa,GAAA;AAAA,IAClB,EAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,GACD,CAAA;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,IACC,GAAG,IAAA;AAAA,IACJ,QAAA;AAAA,IACA,UAAU,CAAQ,IAAA,KAAA;AACjB,MAAI,IAAA,QAAA;AAAU,QAAA,QAAA,CAAS,IAAO,GAAA,WAAA,CAAY,IAAI,CAAA,GAAI,IAAI,CAAA,CAAA;AAAA,KACvD;AAAA,IACA,6BAAc,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAO,GAAG,UAAA;AAAA,KAAY,CAAA;AAAA,IACpC,kBAAoB,EAAA,cAAA;AAAA,IACpB,UAAW,EAAA,QAAA;AAAA,GACZ,CAAA,CAAA;AAEF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MonthYearPicker.js","sources":["../../../../src/date/MonthYearPicker/MonthYearPicker.tsx"],"sourcesContent":["import {LocalDate} from '@js-joda/core';\nimport {toDate, toLocalDate} from '@thx/date';\nimport debug from 'debug';\nimport type {ReactDatePickerProps} from 'react-datepicker';\nimport {type 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):
|
|
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 ReactElement} from 'react';\nimport type {ReactDatePickerProps} from 'react-datepicker';\nimport {type 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): ReactElement {\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":";;;;;;;;AAQU,MAAM,mCAAmC,EAAA;AAc5C,SAAS,gBAAgB,KAA2C,EAAA;AAC1E,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,IACC,GAAG,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,MAAO,GAAG,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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YearSelect.js","sources":["../../../../src/date/YearSelect/YearSelect.tsx"],"sourcesContent":["import debug from 'debug';\nimport {Icon, Button, Dropdown, type DropdownItemProps, Segment, type 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,
|
|
1
|
+
{"version":3,"file":"YearSelect.js","sources":["../../../../src/date/YearSelect/YearSelect.tsx"],"sourcesContent":["import debug from 'debug';\nimport {Icon, Button, Dropdown, type DropdownItemProps, Segment, type 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,SAAS,WAAW,KAAyD,EAAA;AACnF,EAAA,MAAM,QAAW,GAAA,IAAI,IAAK,EAAA,CAAE,WAAY,EAAA,CAAA;AACxC,EAAM,MAAA,EAAC,KAAO,EAAA,OAAA,GAAU,IAAM,EAAA,OAAA,GAAU,UAAU,QAAU,EAAA,MAAA,EAAQ,KAAU,EAAA,GAAA,IAAA,EAAQ,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,IAAI,GAAG,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;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TForm.js","sources":["../../../../src/form/TForm/TForm.tsx"],"sourcesContent":["import debug from 'debug';\nimport {type 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,
|
|
1
|
+
{"version":3,"file":"TForm.js","sources":["../../../../src/form/TForm/TForm.tsx"],"sourcesContent":["import debug from 'debug';\nimport {type 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,SAAS,MAAkD,KAA4B,EAAA;AAC7F,EAAM,MAAA,IAAA,GAAO,SAAiB,KAAK,CAAA,CAAA;AACnC,EAAA,MAAM,EAAC,SAAA,EAAW,MAAQ,EAAA,QAAA,EAAU,UAAY,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;;;;"}
|
|
@@ -27,13 +27,15 @@ function useTForm(config) {
|
|
|
27
27
|
}, [formik.values, config.error]);
|
|
28
28
|
const flatWarnings = flatten(formik.errors);
|
|
29
29
|
const flatTouched = flatten(formik.touched);
|
|
30
|
-
const warnings = uniq(
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
30
|
+
const warnings = uniq(
|
|
31
|
+
Object.keys(flatWarnings).reduce((memo, value) => {
|
|
32
|
+
const isTouched = flatTouched[value];
|
|
33
|
+
if (isTouched || formik.submitCount > 0) {
|
|
34
|
+
return [...memo, get(flatWarnings, value)];
|
|
35
|
+
}
|
|
36
|
+
return memo;
|
|
37
|
+
}, [])
|
|
38
|
+
);
|
|
37
39
|
let errors = [];
|
|
38
40
|
let errorHeader = "";
|
|
39
41
|
if (config.error && config.error.message) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTForm.js","sources":["../../../../src/form/TForm/useTForm.tsx"],"sourcesContent":["import flatten from 'flat';\nimport {type FormikValues, useFormik, type FormikErrors, type FormikTouched} from 'formik';\nimport {get, property, uniq} from 'lodash-es';\nimport {type 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":";;;;;;AAOO,
|
|
1
|
+
{"version":3,"file":"useTForm.js","sources":["../../../../src/form/TForm/useTForm.tsx"],"sourcesContent":["import flatten from 'flat';\nimport {type FormikValues, useFormik, type FormikErrors, type FormikTouched} from 'formik';\nimport {get, property, uniq} from 'lodash-es';\nimport {type FormEvent, useEffect, useState} from 'react';\nimport {Message, Segment} from 'semantic-ui-react';\nimport type {TFormConfig} from './types';\n\nexport function useTForm<Values extends FormikValues = FormikValues, InitialValues = any>(config: TFormConfig<Values, InitialValues>) {\n\tconst {render, children, ...rest} = config;\n\t// @ts-ignore\n\tconst formik = useFormik(rest);\n\n\tuseEffect(() => {\n\t\tif (config.onValidate) config.onValidate(formik.isValid);\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [formik.isValid, config.onValidate]);\n\n\t// Get submit function\n\tuseEffect(() => {\n\t\tif (config.getSubmitFn) config.getSubmitFn(formik.submitForm);\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [formik.submitForm, config.getSubmitFn]);\n\n\t// On change event (if this ends up changing values it will cycle)\n\tuseEffect(() => {\n\t\tif (config.onChange) config.onChange(formik.values);\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [formik.values]);\n\n\t// Mark the error cleared if the form has been edited after an error\n\tconst [errorCleared, setErrorCleared] = useState(false);\n\tuseEffect(() => {\n\t\tif (config.error && config.error.message && !formik.isSubmitting) {\n\t\t\tsetErrorCleared(true);\n\t\t}\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [formik.values, config.error]);\n\n\t// Flatten the warnings (formik errors) and touch objects.\n\tconst flatWarnings = flatten<FormikErrors<Values>, {[key: string]: string}>(formik.errors);\n\tconst flatTouched = flatten<FormikTouched<Values>, {[key: string]: string}>(formik.touched);\n\n\t// Create an array of strings that are warnings (formik errors). If the submit count is greater than 0\n\t// then it will show all warnings. Otherwise only touched field warnings will be added to this array.\n\tconst warnings: string[] = uniq(\n\t\tObject.keys(flatWarnings).reduce<string[]>((memo, value) => {\n\t\t\tconst isTouched = flatTouched[value];\n\t\t\tif (isTouched || formik.submitCount > 0) {\n\t\t\t\treturn [...memo, get(flatWarnings, value)];\n\t\t\t}\n\t\t\treturn memo;\n\t\t}, []),\n\t);\n\n\t// Create an array of strings that are errors (graphql errors).\n\tlet errors: string[] = [];\n\tlet errorHeader = '';\n\tif (config.error && config.error.message) {\n\t\tif (config.error.graphQLErrors) {\n\t\t\terrors = config.error.graphQLErrors.reduce((memo, v) => {\n\t\t\t\tif (v.message) return [...memo, v.message];\n\t\t\t\treturn memo;\n\t\t\t}, [] as string[]);\n\t\t} else {\n\t\t\tconst errorMessage = config.error.message.slice(config.error.message.indexOf(': ') + 1);\n\t\t\terrors.push(errorMessage);\n\t\t}\n\t\terrorHeader = config.error.message.slice(0, config.error.message.indexOf(': '));\n\t}\n\terrors = uniq(errors);\n\n\t// Check if there are warnings or errors\n\tconst hasWarnings = !(formik.isValid || warnings.length === 0);\n\tconst hasErrors = errors.length > 0;\n\n\t// Render the warnings\n\tfunction renderWarnings() {\n\t\tif (!hasWarnings && !hasErrors) return null;\n\t\treturn (\n\t\t\t<Message warning={hasWarnings} error={hasErrors && !hasWarnings}>\n\t\t\t\t<Message.Header>{hasWarnings ? 'Some fields are not complete:' : `${errorHeader}:`}</Message.Header>\n\t\t\t\t{/* Put it in a segment to make sure the errorMessage isn't too big when there are a lot of errors */}\n\t\t\t\t<Segment style={{overflow: 'auto', maxHeight: 100}}>\n\t\t\t\t\t{(hasWarnings ? warnings : errors).map(msg => (\n\t\t\t\t\t\t<div key={msg}>{msg}</div>\n\t\t\t\t\t))}\n\t\t\t\t</Segment>\n\t\t\t</Message>\n\t\t);\n\t}\n\n\t// Returns true if the field has an error\n\tfunction fieldError(fieldName: keyof Values | string | number) {\n\t\treturn (!!property(fieldName)(formik.touched) || formik.submitCount > 0) && !!property(fieldName)(formik.errors);\n\t}\n\n\t// Handles the form submit\n\tfunction handleSubmit(e?: FormEvent<HTMLFormElement>) {\n\t\tsetErrorCleared(false);\n\t\tformik.handleSubmit(e);\n\t}\n\n\treturn {\n\t\t...formik,\n\t\thasErrors: hasErrors && !errorCleared,\n\t\thasWarnings,\n\t\tisValid: !hasWarnings,\n\t\tloading: config.loading ? config.loading : false,\n\t\tsubmitDisabled: hasWarnings || formik.isSubmitting,\n\t\terrorMarkedCleared: errorCleared,\n\t\tformError: hasErrors && !hasWarnings && !errorCleared && !formik.isSubmitting, // Convenience\n\t\trenderWarnings,\n\t\tfieldError,\n\t\thandleSubmit,\n\t};\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +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, {type Focused} from 'react-credit-cards';\nimport 'react-credit-cards/es/styles-compiled.css';\nimport {Form, Grid, Input, type InputProps} from 'semantic-ui-react';\nimport {MonthYearPicker} from '../../date/MonthYearPicker';\nimport {CreditCardNumberInput} from './CreditCardNumberInput';\nimport './styles.css';\n\nconst d = debug('thx.controls.inputs.CreditCardInput');\n\nexport interface CreditCardData {\n\tnumber?: string;\n\tname?: string;\n\tcvc?: string;\n\texpiry?: LocalDate;\n}\n\nexport type CreditCardInputProps = {\n\tvalue?: CreditCardData;\n\tonChange?: (data: CreditCardData) => void;\n} & Pick<InputProps, 'disabled' | 'onBlur'>;\n\nexport function CreditCardInput(props: CreditCardInputProps) {\n\tconst {onBlur, disabled, onChange, value} = props;\n\tconst {name, number, cvc, expiry} = value || {};\n\n\tconst [focus, setFocus] = useState<Focused>('number');\n\n\treturn (\n\t\t<Grid>\n\t\t\t<Grid.Column width={4}>\n\t\t\t\t<Form>\n\t\t\t\t\t<Form.Group>\n\t\t\t\t\t\t<Form.Field width={9}>\n\t\t\t\t\t\t\t<label>Number</label>\n\t\t\t\t\t\t\t<CreditCardNumberInput\n\t\t\t\t\t\t\t\tonFocus={() => setFocus('number')}\n\t\t\t\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\t\t\t\tonChange={v => {\n\t\t\t\t\t\t\t\t\tonChange && onChange({name, number: v, cvc, expiry});\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Form.Field>\n\t\t\t\t\t\t<Form.Field width={4}>\n\t\t\t\t\t\t\t<label>CVC</label>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tvalue={cvc || ''}\n\t\t\t\t\t\t\t\tonChange={(ev, v) => {\n\t\t\t\t\t\t\t\t\tonChange && onChange({name, number, cvc: v.value, expiry});\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonFocus={() => setFocus('cvc')}\n\t\t\t\t\t\t\t\tonBlur={() => setFocus('name')}\n\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Form.Field>\n\t\t\t\t\t</Form.Group>\n\t\t\t\t\t<Form.Group>\n\t\t\t\t\t\t<Form.Field width={9}>\n\t\t\t\t\t\t\t<label>Name</label>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tvalue={name || ''}\n\t\t\t\t\t\t\t\tonChange={(ev, v) => {\n\t\t\t\t\t\t\t\t\tonChange && onChange({name: v.value, number, cvc, expiry});\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonFocus={() => setFocus('name')}\n\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t\tfluid\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Form.Field>\n\t\t\t\t\t\t<Form.Field width={6}>\n\t\t\t\t\t\t\t<label>Expiry</label>\n\t\t\t\t\t\t\t<MonthYearPicker\n\t\t\t\t\t\t\t\tvalue={expiry}\n\t\t\t\t\t\t\t\tonChange={v => {\n\t\t\t\t\t\t\t\t\tonChange && onChange({name, number, cvc, expiry: v});\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonFocus={() => setFocus('expiry')}\n\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Form.Field>\n\t\t\t\t\t</Form.Group>\n\t\t\t\t</Form>\n\t\t\t</Grid.Column>\n\t\t\t<Grid.Column width={12}>\n\t\t\t\t<CreditCards\n\t\t\t\t\tcvc={cvc || ''}\n\t\t\t\t\texpiry={formatDate(expiry, {format: 'MMuu'}) || ''}\n\t\t\t\t\tname={name || ''}\n\t\t\t\t\tnumber={number || ''}\n\t\t\t\t\tfocused={focus}\n\t\t\t\t\tcallback={(a, b) => {\n\t\t\t\t\t\td(a, b);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</Grid.Column>\n\t\t</Grid>\n\t);\n}\n"],"names":[],"mappings":";;;;;;;;;;AAWA,MAAM,CAAA,GAAI,MAAM,qCAAqC,CAAA,CAAA;AAc9C,
|
|
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, {type Focused} from 'react-credit-cards';\nimport 'react-credit-cards/es/styles-compiled.css';\nimport {Form, Grid, Input, type 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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"}
|
|
@@ -46,11 +46,14 @@ function CreditCardNumberInput(props) {
|
|
|
46
46
|
}
|
|
47
47
|
return isValid;
|
|
48
48
|
}, []);
|
|
49
|
-
const creditCardMask = useMemo(
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
49
|
+
const creditCardMask = useMemo(
|
|
50
|
+
() => ({
|
|
51
|
+
mask: "9999 9999 9999 9999",
|
|
52
|
+
isComplete: checkValidation,
|
|
53
|
+
autoUnmask: true
|
|
54
|
+
}),
|
|
55
|
+
[checkValidation]
|
|
56
|
+
);
|
|
54
57
|
const cardNumberRef = useMaskedInput({
|
|
55
58
|
mask: creditCardMask,
|
|
56
59
|
value,
|
|
@@ -1 +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, type InputProps, type SemanticICONS, type 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":";;;;;;;AAQA,MAAM,CAAA,GAAI,MAAM,2DAA2D,CAAA,CAAA;AAO3E,
|
|
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, type InputProps, type SemanticICONS, type 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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"}
|
|
@@ -6,14 +6,18 @@ debug("thx.controls.inputs.MaskedInput");
|
|
|
6
6
|
const MaskedInput = forwardRef((props, ref) => {
|
|
7
7
|
const { name, onBlur, disabled, onChange, mask, value } = props;
|
|
8
8
|
const inputRef = useMaskedInput({ mask, value, onChange });
|
|
9
|
-
useImperativeHandle(
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
9
|
+
useImperativeHandle(
|
|
10
|
+
ref,
|
|
11
|
+
() => ({
|
|
12
|
+
focus: () => {
|
|
13
|
+
inputRef.current?.focus();
|
|
14
|
+
},
|
|
15
|
+
select: () => {
|
|
16
|
+
inputRef.current?.select();
|
|
17
|
+
}
|
|
18
|
+
}),
|
|
19
|
+
[inputRef]
|
|
20
|
+
);
|
|
17
21
|
return /* @__PURE__ */ React.createElement("input", {
|
|
18
22
|
disabled,
|
|
19
23
|
name,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MaskedInput.js","sources":["../../../../src/inputs/MaskedInput/MaskedInput.tsx"],"sourcesContent":["import debug from 'debug';\nimport {forwardRef, useImperativeHandle} from 'react';\nimport type {InputProps} from 'semantic-ui-react';\nimport {useMaskedInput, type UseMaskedInputProps} from './useMaskedInput';\n\nconst d = debug('thx.controls.inputs.MaskedInput');\n\nexport interface MaskedInputRef {\n\tfocus: () => void;\n\tselect: () => void;\n}\n\nexport type MaskedInputProps = {\n\tname?: string;\n\tonBlur?: (event: any) => void;\n} & UseMaskedInputProps &\n\tOmit<InputProps, 'onChange'>;\n\nexport const MaskedInput = forwardRef<MaskedInputRef, MaskedInputProps>((props, ref) => {\n\tconst {name, onBlur, disabled, onChange, mask, value} = props;\n\n\tconst inputRef = useMaskedInput({mask, value, onChange});\n\n\tuseImperativeHandle(\n\t\tref,\n\t\t() => ({\n\t\t\tfocus: () => {\n\t\t\t\tinputRef.current?.focus();\n\t\t\t},\n\t\t\tselect: () => {\n\t\t\t\tinputRef.current?.select();\n\t\t\t},\n\t\t}),\n\t\t[inputRef],\n\t);\n\n\treturn <input disabled={disabled} name={name} ref={inputRef} onBlur={onBlur} />;\n});\n"],"names":[],"mappings":";;;;AAKU,MAAM,iCAAiC,EAAA;AAa1C,MAAM,WAAc,GAAA,UAAA,CAA6C,CAAC,KAAA,EAAO,GAAQ,KAAA;AACvF,EAAA,MAAM,EAAC,IAAM,EAAA,MAAA,EAAQ,QAAU,EAAA,
|
|
1
|
+
{"version":3,"file":"MaskedInput.js","sources":["../../../../src/inputs/MaskedInput/MaskedInput.tsx"],"sourcesContent":["import debug from 'debug';\nimport {forwardRef, useImperativeHandle} from 'react';\nimport type {InputProps} from 'semantic-ui-react';\nimport {useMaskedInput, type UseMaskedInputProps} from './useMaskedInput';\n\nconst d = debug('thx.controls.inputs.MaskedInput');\n\nexport interface MaskedInputRef {\n\tfocus: () => void;\n\tselect: () => void;\n}\n\nexport type MaskedInputProps = {\n\tname?: string;\n\tonBlur?: (event: any) => void;\n} & UseMaskedInputProps &\n\tOmit<InputProps, 'onChange'>;\n\nexport const MaskedInput = forwardRef<MaskedInputRef, MaskedInputProps>((props, ref) => {\n\tconst {name, onBlur, disabled, onChange, mask, value} = props;\n\n\tconst inputRef = useMaskedInput({mask, value, onChange});\n\n\tuseImperativeHandle(\n\t\tref,\n\t\t() => ({\n\t\t\tfocus: () => {\n\t\t\t\tinputRef.current?.focus();\n\t\t\t},\n\t\t\tselect: () => {\n\t\t\t\tinputRef.current?.select();\n\t\t\t},\n\t\t}),\n\t\t[inputRef],\n\t);\n\n\treturn <input disabled={disabled} name={name} ref={inputRef} onBlur={onBlur} />;\n});\n"],"names":[],"mappings":";;;;AAKU,MAAM,iCAAiC,EAAA;AAa1C,MAAM,WAAc,GAAA,UAAA,CAA6C,CAAC,KAAA,EAAO,GAAQ,KAAA;AACvF,EAAA,MAAM,EAAC,IAAM,EAAA,MAAA,EAAQ,UAAU,QAAU,EAAA,IAAA,EAAM,OAAS,GAAA,KAAA,CAAA;AAExD,EAAA,MAAM,WAAW,cAAe,CAAA,EAAC,IAAM,EAAA,KAAA,EAAO,UAAS,CAAA,CAAA;AAEvD,EAAA,mBAAA;AAAA,IACC,GAAA;AAAA,IACA,OAAO;AAAA,MACN,OAAO,MAAM;AACZ,QAAA,QAAA,CAAS,SAAS,KAAM,EAAA,CAAA;AAAA,OACzB;AAAA,MACA,QAAQ,MAAM;AACb,QAAA,QAAA,CAAS,SAAS,MAAO,EAAA,CAAA;AAAA,OAC1B;AAAA,KACD,CAAA;AAAA,IACA,CAAC,QAAQ,CAAA;AAAA,GACV,CAAA;AAEA,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAA,IAAM,QAAA;AAAA,IAAoB,IAAA;AAAA,IAAY,GAAK,EAAA,QAAA;AAAA,IAAU,MAAA;AAAA,GAAgB,CAAA,CAAA;AAC9E,CAAC;;;;"}
|
|
@@ -1 +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\nconst d = debug('thx.controls.inputs.MaskedInput.useMaskedInput');\n\n// @ts-ignore\nconst Inputmask = InputmaskImport.default || InputmaskImport;\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\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":";;;;;AAMA,MAAM,CAAA,GAAI,MAAM,gDAAgD,CAAA,CAAA;AAGhE,MAAM,SAAA,GAAY,gBAAgB,OAAW,IAAA,eAAA,CAAA;AAStC,
|
|
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\nconst d = debug('thx.controls.inputs.MaskedInput.useMaskedInput');\n\n// @ts-ignore\nconst Inputmask = InputmaskImport.default || InputmaskImport;\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\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":";;;;;AAMA,MAAM,CAAA,GAAI,MAAM,gDAAgD,CAAA,CAAA;AAGhE,MAAM,SAAA,GAAY,gBAAgB,OAAW,IAAA,eAAA,CAAA;AAStC,SAAS,eAAe,KAA4B,EAAA;AAC1D,EAAA,MAAM,EAAC,KAAA,EAAO,QAAU,EAAA,KAAA,EAAO,MAAQ,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,YAAA,CAAA,OAAA,GAAU,IAAI,SAAU,CAAA;AAAA,MACpC,GAAG,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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneInput.js","sources":["../../../../src/inputs/PhoneInput/PhoneInput.tsx"],"sourcesContent":["import debug from 'debug';\nimport {Input} from 'semantic-ui-react';\nimport {MaskedInput, type 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 {\n\t\tvalue,\n\t\tas,\n\t\taction,\n\t\tactionPosition,\n\t\tclassName,\n\t\terror,\n\t\tfluid,\n\t\tfocus,\n\t\tinverted,\n\t\tlabel,\n\t\tlabelPosition,\n\t\tloading,\n\t\tsize,\n\t\ttabIndex,\n\t\ttransparent,\n\t\textension,\n\t\t...rest\n\t} = props;\n\n\tconst inputProps = {\n\t\tas,\n\t\taction,\n\t\tactionPosition,\n\t\tclassName: `${className || ''} icon`,\n\t\terror,\n\t\tfocus,\n\t\tfluid,\n\t\tinverted,\n\t\tlabel,\n\t\tlabelPosition,\n\t\tloading,\n\t\tsize,\n\t\ttabIndex,\n\t\ttransparent,\n\t};\n\n\tconst 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 (\n\t\t<Input {...inputProps}>\n\t\t\t<MaskedInput {...rest} value={value} mask={mask} />\n\t\t</Input>\n\t);\n}\n"],"names":[],"mappings":";;;;;;AAIU,MAAM,gCAAgC,EAAA;AAOzC,
|
|
1
|
+
{"version":3,"file":"PhoneInput.js","sources":["../../../../src/inputs/PhoneInput/PhoneInput.tsx"],"sourcesContent":["import debug from 'debug';\nimport {Input} from 'semantic-ui-react';\nimport {MaskedInput, type 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 {\n\t\tvalue,\n\t\tas,\n\t\taction,\n\t\tactionPosition,\n\t\tclassName,\n\t\terror,\n\t\tfluid,\n\t\tfocus,\n\t\tinverted,\n\t\tlabel,\n\t\tlabelPosition,\n\t\tloading,\n\t\tsize,\n\t\ttabIndex,\n\t\ttransparent,\n\t\textension,\n\t\t...rest\n\t} = props;\n\n\tconst inputProps = {\n\t\tas,\n\t\taction,\n\t\tactionPosition,\n\t\tclassName: `${className || ''} icon`,\n\t\terror,\n\t\tfocus,\n\t\tfluid,\n\t\tinverted,\n\t\tlabel,\n\t\tlabelPosition,\n\t\tloading,\n\t\tsize,\n\t\ttabIndex,\n\t\ttransparent,\n\t};\n\n\tconst 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 (\n\t\t<Input {...inputProps}>\n\t\t\t<MaskedInput {...rest} value={value} mask={mask} />\n\t\t</Input>\n\t);\n}\n"],"names":[],"mappings":";;;;;;AAIU,MAAM,gCAAgC,EAAA;AAOzC,SAAS,WAAW,KAAsE,EAAA;AAChG,EAAM,MAAA;AAAA,IACL,KAAA;AAAA,IACA,EAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACA,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,UAAa,GAAA;AAAA,IAClB,EAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA,EAAW,GAAG,SAAa,IAAA,EAAA,CAAA,KAAA,CAAA;AAAA,IAC3B,KAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;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,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,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAO,GAAG,UAAA;AAAA,GAAA,kBACT,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAA,IAAa,GAAG,IAAA;AAAA,IAAM,KAAA;AAAA,IAAc,IAAA;AAAA,GAAY,CAClD,CAAA,CAAA;AAEF;;;;"}
|
|
@@ -8,14 +8,17 @@ function RadioGroup(props) {
|
|
|
8
8
|
return /* @__PURE__ */ React.createElement(Form.Group, {
|
|
9
9
|
...rest
|
|
10
10
|
}, Children.map(props.children, (child) => {
|
|
11
|
-
if (child
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
11
|
+
if (child && typeof child === "object" && "props" in child) {
|
|
12
|
+
if (child.type === FormRadio || child.type === Radio || child.type === Form.Radio) {
|
|
13
|
+
const radioChild = child;
|
|
14
|
+
return cloneElement(radioChild, {
|
|
15
|
+
onChange: (ev, args) => {
|
|
16
|
+
if (onChange)
|
|
17
|
+
onChange(args.value);
|
|
18
|
+
},
|
|
19
|
+
checked: value === radioChild.props.value
|
|
20
|
+
});
|
|
21
|
+
}
|
|
19
22
|
}
|
|
20
23
|
return child;
|
|
21
24
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sources":["../../../../src/inputs/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import debug from 'debug';\nimport {Children, cloneElement} from 'react';\nimport {Form, Radio, FormRadio, type FormGroupProps} from 'semantic-ui-react';\n\nconst d = debug('thx.controls.inputs.RadioGroup');\n\nexport interface RadioGroupProps {\n\tchildren?:
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sources":["../../../../src/inputs/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import debug from 'debug';\nimport {Children, cloneElement, type ReactElement} from 'react';\nimport {Form, Radio, FormRadio, type FormGroupProps, type FormRadioProps} from 'semantic-ui-react';\n\nconst d = debug('thx.controls.inputs.RadioGroup');\n\nexport interface RadioGroupProps {\n\tchildren?: ReactElement[] | ReactElement;\n\tonChange?: (value?: string | number) => void;\n\tvalue?: string | number;\n}\n\nexport function RadioGroup(props: RadioGroupProps & Omit<FormGroupProps, 'children'>) {\n\tconst {children, onChange, value, ...rest} = props;\n\n\treturn (\n\t\t<Form.Group {...rest}>\n\t\t\t{Children.map(props.children, child => {\n\t\t\t\tif (child && typeof child === 'object' && 'props' in child) {\n\t\t\t\t\tif (child.type === FormRadio || child.type === Radio || child.type === Form.Radio) {\n\t\t\t\t\t\tconst radioChild = child as ReactElement<FormRadioProps>;\n\t\t\t\t\t\treturn cloneElement(radioChild, {\n\t\t\t\t\t\t\tonChange: (ev: any, args: {value?: string | number}) => {\n\t\t\t\t\t\t\t\tif (onChange) onChange(args.value);\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tchecked: value === radioChild.props.value,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn child;\n\t\t\t})}\n\t\t</Form.Group>\n\t);\n}\n"],"names":[],"mappings":";;;;AAIU,MAAM,gCAAgC,EAAA;AAQzC,SAAS,WAAW,KAA2D,EAAA;AACrF,EAAA,MAAM,EAAC,QAAA,EAAU,QAAU,EAAA,KAAA,EAAA,GAAU,MAAQ,GAAA,KAAA,CAAA;AAE7C,EACC,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,KAAL,EAAA;AAAA,IAAY,GAAG,IAAA;AAAA,GAAA,EACd,QAAS,CAAA,GAAA,CAAI,KAAM,CAAA,QAAA,EAAU,CAAS,KAAA,KAAA;AACtC,IAAA,IAAI,KAAS,IAAA,OAAO,KAAU,KAAA,QAAA,IAAY,WAAW,KAAO,EAAA;AAC3D,MAAI,IAAA,KAAA,CAAM,SAAS,SAAa,IAAA,KAAA,CAAM,SAAS,KAAS,IAAA,KAAA,CAAM,IAAS,KAAA,IAAA,CAAK,KAAO,EAAA;AAClF,QAAA,MAAM,UAAa,GAAA,KAAA,CAAA;AACnB,QAAA,OAAO,aAAa,UAAY,EAAA;AAAA,UAC/B,QAAA,EAAU,CAAC,EAAA,EAAS,IAAoC,KAAA;AACvD,YAAI,IAAA,QAAA;AAAU,cAAA,QAAA,CAAS,KAAK,KAAK,CAAA,CAAA;AAAA,WAClC;AAAA,UACA,OAAA,EAAS,KAAU,KAAA,UAAA,CAAW,KAAM,CAAA,KAAA;AAAA,SACpC,CAAA,CAAA;AAAA,OACF;AAAA,KACD;AACA,IAAO,OAAA,KAAA,CAAA;AAAA,GACP,CACF,CAAA,CAAA;AAEF;;;;"}
|
|
@@ -22,12 +22,15 @@ function SinInput(props) {
|
|
|
22
22
|
}
|
|
23
23
|
return validate.isValid();
|
|
24
24
|
}, []);
|
|
25
|
-
const mask = useMemo(
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
25
|
+
const mask = useMemo(
|
|
26
|
+
() => ({
|
|
27
|
+
mask: "999-999-999",
|
|
28
|
+
isComplete: checkValidation,
|
|
29
|
+
greedy: false,
|
|
30
|
+
autoUnmask: true
|
|
31
|
+
}),
|
|
32
|
+
[checkValidation]
|
|
33
|
+
);
|
|
31
34
|
const cardNumberRef = useMaskedInput({
|
|
32
35
|
mask,
|
|
33
36
|
value,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SinInput.js","sources":["../../../../src/inputs/SinInput/SinInput.tsx"],"sourcesContent":["import debug from 'debug';\nimport {useCallback, useMemo, useState} from 'react';\nimport {Icon, Input, type SemanticCOLORS} from 'semantic-ui-react';\nimport SIN from 'social-insurance-number';\nimport type {MaskedInputProps} from '../MaskedInput';\nimport {useMaskedInput} from '../MaskedInput/useMaskedInput';\n\nconst d = debug('thx.controls.inputs.SinInput');\n\nexport interface SinInputProps extends Omit<MaskedInputProps, 'mask'> {\n\tvalue?: string;\n\tonChange(value?: string): void;\n}\n\nexport function SinInput(props: SinInputProps) {\n\tconst {value, onChange, ...rest} = props;\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 validate = new SIN(num);\n\t\tif (num.length > 0) {\n\t\t\tif (validate.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\t\treturn validate.isValid();\n\t}, []);\n\n\tconst mask: MaskedInputProps['mask'] = useMemo(\n\t\t() => ({\n\t\t\tmask: '999-999-999',\n\t\t\tisComplete: checkValidation,\n\t\t\tgreedy: false,\n\t\t\tautoUnmask: true,\n\t\t}),\n\t\t[checkValidation],\n\t);\n\n\tconst cardNumberRef = useMaskedInput({\n\t\tmask,\n\t\tvalue,\n\t\tonChange: v => {\n\t\t\tonChange && onChange(v);\n\t\t},\n\t\tonSet: v => {\n\t\t\tcheckValidation([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=\"id badge\" color={color} size=\"large\" />\n\t\t</Input>\n\t);\n}\n"],"names":[],"mappings":";;;;;;AAOU,MAAM,8BAA8B,EAAA;AAOvC,
|
|
1
|
+
{"version":3,"file":"SinInput.js","sources":["../../../../src/inputs/SinInput/SinInput.tsx"],"sourcesContent":["import debug from 'debug';\nimport {useCallback, useMemo, useState} from 'react';\nimport {Icon, Input, type SemanticCOLORS} from 'semantic-ui-react';\nimport SIN from 'social-insurance-number';\nimport type {MaskedInputProps} from '../MaskedInput';\nimport {useMaskedInput} from '../MaskedInput/useMaskedInput';\n\nconst d = debug('thx.controls.inputs.SinInput');\n\nexport interface SinInputProps extends Omit<MaskedInputProps, 'mask'> {\n\tvalue?: string;\n\tonChange(value?: string): void;\n}\n\nexport function SinInput(props: SinInputProps) {\n\tconst {value, onChange, ...rest} = props;\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 validate = new SIN(num);\n\t\tif (num.length > 0) {\n\t\t\tif (validate.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\t\treturn validate.isValid();\n\t}, []);\n\n\tconst mask: MaskedInputProps['mask'] = useMemo(\n\t\t() => ({\n\t\t\tmask: '999-999-999',\n\t\t\tisComplete: checkValidation,\n\t\t\tgreedy: false,\n\t\t\tautoUnmask: true,\n\t\t}),\n\t\t[checkValidation],\n\t);\n\n\tconst cardNumberRef = useMaskedInput({\n\t\tmask,\n\t\tvalue,\n\t\tonChange: v => {\n\t\t\tonChange && onChange(v);\n\t\t},\n\t\tonSet: v => {\n\t\t\tcheckValidation([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=\"id badge\" color={color} size=\"large\" />\n\t\t</Input>\n\t);\n}\n"],"names":[],"mappings":";;;;;;AAOU,MAAM,8BAA8B,EAAA;AAOvC,SAAS,SAAS,KAAsB,EAAA;AAC9C,EAAA,MAAM,EAAC,KAAA,EAAO,QAAa,EAAA,GAAA,IAAA,EAAQ,GAAA,KAAA,CAAA;AACnC,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAyB,OAAO,CAAA,CAAA;AAE1D,EAAM,MAAA,eAAA,GAAkB,WAAY,CAAA,CAAC,UAAyB,KAAA;AAC7D,IAAA,MAAM,MAAM,UAAW,CAAA,IAAA,CAAK,EAAE,CAAE,CAAA,UAAA,CAAW,aAAa,EAAE,CAAA,CAAA;AAC1D,IAAM,MAAA,QAAA,GAAW,IAAI,GAAA,CAAI,GAAG,CAAA,CAAA;AAC5B,IAAI,IAAA,GAAA,CAAI,SAAS,CAAG,EAAA;AACnB,MAAI,IAAA,QAAA,CAAS,SAAW,EAAA;AACvB,QAAA,QAAA,CAAS,OAAO,CAAA,CAAA;AAAA,OACV,MAAA;AACN,QAAA,QAAA,CAAS,KAAK,CAAA,CAAA;AAAA,OACf;AAAA,KACM,MAAA;AACN,MAAA,QAAA,CAAS,OAAO,CAAA,CAAA;AAAA,KACjB;AACA,IAAA,OAAO,SAAS,OAAQ,EAAA,CAAA;AAAA,GACzB,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,IAAiC,GAAA,OAAA;AAAA,IACtC,OAAO;AAAA,MACN,IAAM,EAAA,aAAA;AAAA,MACN,UAAY,EAAA,eAAA;AAAA,MACZ,MAAQ,EAAA,KAAA;AAAA,MACR,UAAY,EAAA,IAAA;AAAA,KACb,CAAA;AAAA,IACA,CAAC,eAAe,CAAA;AAAA,GACjB,CAAA;AAEA,EAAA,MAAM,gBAAgB,cAAe,CAAA;AAAA,IACpC,IAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAU,CAAK,CAAA,KAAA;AACd,MAAA,QAAA,IAAY,SAAS,CAAC,CAAA,CAAA;AAAA,KACvB;AAAA,IACA,OAAO,CAAK,CAAA,KAAA;AACX,MAAgB,eAAA,CAAA,CAAC,CAAK,IAAA,EAAE,CAAC,CAAA,CAAA;AAAA,KAC1B;AAAA,GACA,CAAA,CAAA;AAED,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAO,GAAG,IAAA;AAAA,IAAM,IAAI,EAAA,IAAA;AAAA,GAAA,kBACnB,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAA,IAAM,GAAK,EAAA,aAAA;AAAA,GAAe,mBAC1B,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,IAAK,EAAA,UAAA;AAAA,IAAW,KAAA;AAAA,IAAc,IAAK,EAAA,OAAA;AAAA,GAAQ,CAClD,CAAA,CAAA;AAEF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxEditCell.js","sources":["../../../../src/inputs/TableInput/CheckboxEditCell.tsx"],"sourcesContent":["import debug from 'debug';\nimport {useState} from 'react';\nimport {Checkbox, type CheckboxProps} from 'semantic-ui-react';\nimport type {TableCellProps} from './TableInput';\nimport type {AddRowOnTabIf} from './addRowOnTab';\nimport {addRowOnTab} from './addRowOnTab';\n\nconst d = debug('thx.controls.inputs.TableInput.CheckboxEditCell');\n\ninterface CheckboxEditCellOptions<D extends Record<string, unknown>> {\n\t/** Override SemanticUI Input props */\n\tinputProps?: CheckboxProps;\n\t/** If function is present, and returns true, will add a new row if tab is pressed on the last row */\n\taddRowOnTabIf?: AddRowOnTabIf<D, boolean>;\n}\n\nexport function CheckboxEditCell<D extends Record<string, unknown>>(options?: CheckboxEditCellOptions<D>) {\n\tconst {inputProps, addRowOnTabIf} = options || {};\n\n\treturn function CheckboxEditCellFn(props: TableCellProps<D, boolean>) {\n\t\tconst {\n\t\t\tvalue: initialValue,\n\t\t\trow: {index},\n\t\t\tcolumn: {id},\n\t\t\tupdateData,\n\t\t} = props;\n\n\t\tconst [value, setValue] = useState(initialValue);\n\n\t\treturn (\n\t\t\t<Checkbox\n\t\t\t\t{...inputProps}\n\t\t\t\tchecked={value}\n\t\t\t\tonChange={(ev, v) => {\n\t\t\t\t\tsetValue(v.checked || false);\n\t\t\t\t}}\n\t\t\t\tonBlur={() => {\n\t\t\t\t\tupdateData(index, id, value);\n\t\t\t\t}}\n\t\t\t\tonKeyDown={(event: KeyboardEvent) => addRowOnTab(event, value, props, addRowOnTabIf)}\n\t\t\t/>\n\t\t);\n\t};\n}\n"],"names":[],"mappings":";;;;;AAOU,MAAM,iDAAiD,EAAA;AAS1D,
|
|
1
|
+
{"version":3,"file":"CheckboxEditCell.js","sources":["../../../../src/inputs/TableInput/CheckboxEditCell.tsx"],"sourcesContent":["import debug from 'debug';\nimport {useState} from 'react';\nimport {Checkbox, type CheckboxProps} from 'semantic-ui-react';\nimport type {TableCellProps} from './TableInput';\nimport type {AddRowOnTabIf} from './addRowOnTab';\nimport {addRowOnTab} from './addRowOnTab';\n\nconst d = debug('thx.controls.inputs.TableInput.CheckboxEditCell');\n\ninterface CheckboxEditCellOptions<D extends Record<string, unknown>> {\n\t/** Override SemanticUI Input props */\n\tinputProps?: CheckboxProps;\n\t/** If function is present, and returns true, will add a new row if tab is pressed on the last row */\n\taddRowOnTabIf?: AddRowOnTabIf<D, boolean>;\n}\n\nexport function CheckboxEditCell<D extends Record<string, unknown>>(options?: CheckboxEditCellOptions<D>) {\n\tconst {inputProps, addRowOnTabIf} = options || {};\n\n\treturn function CheckboxEditCellFn(props: TableCellProps<D, boolean>) {\n\t\tconst {\n\t\t\tvalue: initialValue,\n\t\t\trow: {index},\n\t\t\tcolumn: {id},\n\t\t\tupdateData,\n\t\t} = props;\n\n\t\tconst [value, setValue] = useState(initialValue);\n\n\t\treturn (\n\t\t\t<Checkbox\n\t\t\t\t{...inputProps}\n\t\t\t\tchecked={value}\n\t\t\t\tonChange={(ev, v) => {\n\t\t\t\t\tsetValue(v.checked || false);\n\t\t\t\t}}\n\t\t\t\tonBlur={() => {\n\t\t\t\t\tupdateData(index, id, value);\n\t\t\t\t}}\n\t\t\t\tonKeyDown={(event: KeyboardEvent) => addRowOnTab(event, value, props, addRowOnTabIf)}\n\t\t\t/>\n\t\t);\n\t};\n}\n"],"names":[],"mappings":";;;;;AAOU,MAAM,iDAAiD,EAAA;AAS1D,SAAS,iBAAoD,OAAsC,EAAA;AACzG,EAAA,MAAM,EAAC,UAAA,EAAY,aAAa,EAAA,GAAI,WAAW,EAAC,CAAA;AAEhD,EAAO,OAAA,SAAS,mBAAmB,KAAmC,EAAA;AACrE,IAAM,MAAA;AAAA,MACL,KAAO,EAAA,YAAA;AAAA,MACP,GAAA,EAAK,EAAC,KAAK,EAAA;AAAA,MACX,MAAA,EAAQ,EAAC,EAAE,EAAA;AAAA,MACX,UAAA;AAAA,KACG,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,YAAY,CAAA,CAAA;AAE/C,IAAA,uBACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,MACC,GAAG,UAAA;AAAA,MACJ,OAAS,EAAA,KAAA;AAAA,MACT,QAAA,EAAU,CAAC,EAAA,EAAI,CAAM,KAAA;AACpB,QAAS,QAAA,CAAA,CAAA,CAAE,WAAW,KAAK,CAAA,CAAA;AAAA,OAC5B;AAAA,MACA,QAAQ,MAAM;AACb,QAAW,UAAA,CAAA,KAAA,EAAO,IAAI,KAAK,CAAA,CAAA;AAAA,OAC5B;AAAA,MACA,WAAW,CAAC,KAAA,KAAyB,YAAY,KAAO,EAAA,KAAA,EAAO,OAAO,aAAa,CAAA;AAAA,KACpF,CAAA,CAAA;AAAA,GAEF,CAAA;AACD;;;;"}
|