@uxf/form
Advanced tools
Comparing version 11.0.0-beta.21 to 11.0.0
@@ -35,5 +35,5 @@ "use strict"; | ||
}; | ||
return (react_1.default.createElement(avatar_file_input_1.AvatarFileInput, { accept: props.accept, className: props.className, form: props.form, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, id: id, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: field.ref, value: field.value, variant: props.variant })); | ||
return (react_1.default.createElement(avatar_file_input_1.AvatarFileInput, { accept: props.accept, "aria-describedby": props["aria-describedby"], className: props.className, customControls: props.customControls, form: props.form, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, icon: props.icon, id: id, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, maxFileSize: props.maxFileSize, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: field.ref, removeFileLabel: props.removeFileLabel, selectFileLabel: props.selectFileLabel, value: field.value, variant: props.variant })); | ||
} | ||
exports.AvatarFileInput = AvatarFileInput; | ||
AvatarFileInput.displayName = "UxfFormAvatarFileInput"; |
@@ -12,3 +12,3 @@ "use strict"; | ||
function CheckboxInput(props) { | ||
var _a, _b, _c; | ||
var _a, _b, _c, _d, _e; | ||
const formId = (0, form_id_context_1.useFormIdContext)(); | ||
@@ -36,5 +36,5 @@ const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formId}__${props.name}`; | ||
}; | ||
return (react_1.default.createElement(checkbox_input_1.CheckboxInput, { className: props.className, id: id, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, ref: field.ref, size: props.size, value: (_c = field.value) !== null && _c !== void 0 ? _c : (!props.nullable ? false : undefined) })); | ||
return (react_1.default.createElement(checkbox_input_1.CheckboxInput, { className: props.className, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, id: id, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, ref: field.ref, size: props.size, value: (_e = field.value) !== null && _e !== void 0 ? _e : (!props.nullable ? false : undefined) })); | ||
} | ||
exports.CheckboxInput = CheckboxInput; | ||
CheckboxInput.displayName = "UxfFormCheckboxInput"; |
@@ -17,4 +17,4 @@ "use strict"; | ||
const storyFormCheckboxes = (control) => (react_1.default.createElement("div", { className: "space-y-2" }, | ||
react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "CheckboxInput form", name: "checkbox1", control: control }), | ||
react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "CheckboxInput form required", name: "checkbox-required", control: control, isRequired: true }), | ||
react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "CheckboxInput form", name: "checkbox1", control: control, isRequired: true }), | ||
react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "CheckboxInput form required", name: "checkbox-required", control: control }), | ||
react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "CheckboxInput form disabled", name: "checkbox-disabled", control: control, isDisabled: true }), | ||
@@ -21,0 +21,0 @@ react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "CheckboxInput form readOnly", name: "checkbox-readonly", control: control, isReadOnly: true }), |
@@ -38,5 +38,6 @@ "use strict"; | ||
function DatePickerInput(props) { | ||
var _a, _b, _c, _d, _e, _f, _g; | ||
var _a, _b, _c, _d, _e, _f, _g, _h; | ||
const formId = (0, form_id_context_1.useFormIdContext)(); | ||
const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formId}__${props.name}`; | ||
const displayDateFormat = (_b = props.displayDateFormat) !== null && _b !== void 0 ? _b : date_picker_input_1.DISPLAY_DATE_FORMAT; | ||
const { field, fieldState } = (0, react_hook_form_1.useController)({ | ||
@@ -48,3 +49,3 @@ control: props.control, | ||
required: props.isRequired ? props.requiredMessage || "Toto pole je povinné" : undefined, | ||
...((_b = props.rules) !== null && _b !== void 0 ? _b : {}), | ||
...((_c = props.rules) !== null && _c !== void 0 ? _c : {}), | ||
validate: { | ||
@@ -56,3 +57,3 @@ validDate: (value) => { | ||
if (!(0, dayjs_1.default)(value, date_picker_input_1.OUTPUT_DATE_FORMAT, true).isValid()) { | ||
return `Datum musí být ve formátu ${date_picker_input_1.DISPLAY_DATE_FORMAT}.`; | ||
return `Datum musí být ve formátu ${displayDateFormat}.`; | ||
} | ||
@@ -65,11 +66,11 @@ }, | ||
if (props.minDate && (0, dayjs_1.default)(value, date_picker_input_1.OUTPUT_DATE_FORMAT, true).isBefore(props.minDate)) { | ||
return `Minimální datum, který je možné zadat, je: ${(0, dayjs_1.default)(props.minDate).format(date_picker_input_1.DISPLAY_DATE_FORMAT)}`; | ||
return `Minimální datum, který je možné zadat, je: ${(0, dayjs_1.default)(props.minDate).format(displayDateFormat)}`; | ||
} | ||
if (props.maxDate && (0, dayjs_1.default)(value, date_picker_input_1.OUTPUT_DATE_FORMAT, true).isAfter(props.maxDate)) { | ||
return `Maximální datum, který je možné zadat, je: ${(0, dayjs_1.default)(props.maxDate).format(date_picker_input_1.DISPLAY_DATE_FORMAT)}`; | ||
return `Maximální datum, který je možné zadat, je: ${(0, dayjs_1.default)(props.maxDate).format(displayDateFormat)}`; | ||
} | ||
}, | ||
...(typeof ((_c = props.rules) === null || _c === void 0 ? void 0 : _c.validate) === "function" | ||
...(typeof ((_d = props.rules) === null || _d === void 0 ? void 0 : _d.validate) === "function" | ||
? { custom: props.rules.validate } | ||
: (_e = (_d = props.rules) === null || _d === void 0 ? void 0 : _d.validate) !== null && _e !== void 0 ? _e : {}), | ||
: (_f = (_e = props.rules) === null || _e === void 0 ? void 0 : _e.validate) !== null && _f !== void 0 ? _f : {}), | ||
}, | ||
@@ -89,5 +90,5 @@ }, | ||
}; | ||
return (react_1.default.createElement(date_picker_input_1.DatePickerInput, { autoFocus: props.autoFocus, bottomContent: props.bottomContent, className: props.className, form: props.form, helperText: (_g = (_f = fieldState.error) === null || _f === void 0 ? void 0 : _f.message) !== null && _g !== void 0 ? _g : props.helperText, hiddenLabel: props.hiddenLabel, id: id, isClearable: props.isClearable, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, maxDate: props.maxDate, minDate: props.minDate, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, placeholder: props.placeholder, popoverPlacement: props.popoverPlacement, popoverStrategy: props.popoverStrategy, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, triggerElement: props.triggerElement, unavailableDates: props.unavailableDates, value: field.value, variant: props.variant })); | ||
return (react_1.default.createElement(date_picker_input_1.DatePickerInput, { allowedDateFormats: props.allowedDateFormats, autoFocus: props.autoFocus, bottomContent: props.bottomContent, className: props.className, datesConfig: props.datesConfig, displayDateFormat: props.displayDateFormat, form: props.form, helperText: (_h = (_g = fieldState.error) === null || _g === void 0 ? void 0 : _g.message) !== null && _h !== void 0 ? _h : props.helperText, hiddenLabel: props.hiddenLabel, id: id, isClearable: props.isClearable, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, maxDate: props.maxDate, minDate: props.minDate, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, placeholder: props.placeholder, popoverPlacement: props.popoverPlacement, popoverStrategy: props.popoverStrategy, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, triggerElement: props.triggerElement, unavailableDates: props.unavailableDates, value: field.value, variant: props.variant })); | ||
} | ||
exports.DatePickerInput = DatePickerInput; | ||
DatePickerInput.displayName = "UxfFormDatePickerInput"; |
@@ -21,2 +21,3 @@ "use strict"; | ||
react_1.default.createElement(date_picker_input_1.DatePickerInput, { control: control, isClearable: true, isRequired: true, minDate: "2023-06-10", maxDate: "2023-06-20", label: "Date picker with input validation", name: "withMinMaxValidation", placeholder: "" }), | ||
react_1.default.createElement(date_picker_input_1.DatePickerInput, { allowedDateFormats: ["MM/DD/YYYY", "M/D/YYYY"], control: control, displayDateFormat: "MM/DD/YYYY", id: "date-custom-format", isClearable: true, label: "Datum s vlastn\u00EDm form\u00E1tem (US)", name: "date" }), | ||
react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit"))); | ||
@@ -23,0 +24,0 @@ return (react_1.default.createElement(storybook_form_1.StorybookForm, { defaultValues: { |
@@ -101,5 +101,5 @@ "use strict"; | ||
: null; | ||
return (react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { autoFocus: props.autoFocus, className: props.className, form: props.form, helperText: (_f = (_e = fieldState.error) === null || _e === void 0 ? void 0 : _e.message) !== null && _f !== void 0 ? _f : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, isClearable: props.isClearable, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: field.name, numberOfMonths: props.numberOfMonths, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, placeholder: props.placeholder, popoverPlacement: props.popoverPlacement, popoverStrategy: props.popoverStrategy, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, triggerElement: props.triggerElement, unavailableDates: props.unavailableDates, value: value, variant: props.variant })); | ||
return (react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { autoFocus: props.autoFocus, className: props.className, datesConfig: props.datesConfig, form: props.form, helperText: (_f = (_e = fieldState.error) === null || _e === void 0 ? void 0 : _e.message) !== null && _f !== void 0 ? _f : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, isClearable: props.isClearable, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: field.name, numberOfMonths: props.numberOfMonths, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, placeholder: props.placeholder, popoverPlacement: props.popoverPlacement, popoverStrategy: props.popoverStrategy, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, triggerElement: props.triggerElement, unavailableDates: props.unavailableDates, value: value, variant: props.variant })); | ||
} | ||
exports.DateRangePickerInput = DateRangePickerInput; | ||
DateRangePickerInput.displayName = "UxfFormDateRangePickerInput"; |
@@ -55,5 +55,5 @@ "use strict"; | ||
}; | ||
return (react_1.default.createElement(dropzone_1.Dropzone, { helperText: ((_d = fieldState.error) === null || _d === void 0 ? void 0 : _d.message) || props.helperText, id: id, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isRequired: props.isRequired, label: props.label, maxFileSize: props.maxFileSize, maxFilesCount: props.maxFilesCount, minFileSize: props.minFileSize, noClick: props.noClick, noDrag: props.noDrag, onChange: onChange, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: field.ref, value: field.value, icon: props.icon })); | ||
return (react_1.default.createElement(dropzone_1.Dropzone, { className: props.className, helperText: ((_d = fieldState.error) === null || _d === void 0 ? void 0 : _d.message) || props.helperText, id: id, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isRequired: props.isRequired, label: props.label, maxFileSize: props.maxFileSize, maxFilesCount: props.maxFilesCount, minFileSize: props.minFileSize, noClick: props.noClick, noDrag: props.noDrag, onChange: onChange, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: field.ref, value: field.value, icon: props.icon })); | ||
} | ||
exports.DropzoneInput = DropzoneInput; | ||
DropzoneInput.displayName = "UxfFormDropzoneInput"; |
@@ -7,3 +7,3 @@ import { DropzoneListProps as UIDropzoneListProps } from "@uxf/ui/dropzone"; | ||
type OnChangeHandler = FormControlProps<DropzoneFile[] | undefined>["onChange"]; | ||
export interface DropzoneListProps<FormData extends FieldValues> extends Pick<UseControllerProps<FormData>, "control" | "name">, Pick<UIDropzoneListProps, "errorText" | "onAbortWarning" | "onRemoveWarning" | "renderItem"> { | ||
export interface DropzoneListProps<FormData extends FieldValues> extends Pick<UseControllerProps<FormData>, "control" | "name">, Pick<UIDropzoneListProps, "className" | "errorText" | "onAbortWarning" | "onRemoveWarning" | "renderItem"> { | ||
onChange?: OnChangeHandler; | ||
@@ -10,0 +10,0 @@ } |
@@ -20,5 +20,5 @@ "use strict"; | ||
}; | ||
return (react_1.default.createElement(dropzone_1.Dropzone.List, { errorText: props.errorText, onAbortWarning: props.onAbortWarning, onChange: onChange, onRemoveWarning: props.onRemoveWarning, renderItem: props.renderItem, value: field.value })); | ||
return (react_1.default.createElement(dropzone_1.Dropzone.List, { className: props.className, errorText: props.errorText, onAbortWarning: props.onAbortWarning, onChange: onChange, onRemoveWarning: props.onRemoveWarning, renderItem: props.renderItem, value: field.value })); | ||
} | ||
exports.DropzoneList = DropzoneList; | ||
DropzoneList.displayName = "UxfFormDropzoneList"; |
@@ -35,5 +35,5 @@ "use strict"; | ||
}; | ||
return (react_1.default.createElement(file_input_1.FileInput, { accept: props.accept, className: props.className, form: props.form, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, id: id, isClearable: props.isClearable, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, hiddenLabel: props.hiddenLabel, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, placeholder: props.placeholder, ref: field.ref, size: props.size, value: field.value, variant: props.variant, uploadButtonLabel: props.uploadButtonLabel })); | ||
return (react_1.default.createElement(file_input_1.FileInput, { accept: props.accept, className: props.className, form: props.form, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, id: id, isClearable: props.isClearable, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, hiddenLabel: props.hiddenLabel, name: field.name, maxFileSize: props.maxFileSize, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, placeholder: props.placeholder, ref: field.ref, size: props.size, value: field.value, variant: props.variant, uploadButtonLabel: props.uploadButtonLabel })); | ||
} | ||
exports.FileInput = FileInput; | ||
FileInput.displayName = "FileInput"; |
@@ -26,2 +26,3 @@ "use strict"; | ||
react_1.default.createElement(file_input_1.FileInput, { control: control, id: `required-${mode}`, isRequired: true, label: "Required file input", name: `required-${mode}`, onUploadFile: upload_file_mock_1.uploadFile }), | ||
react_1.default.createElement(file_input_1.FileInput, { control: control, label: "Custom button label", name: `default-${mode}`, onUploadFile: upload_file_mock_1.uploadFile, isClearable: true, placeholder: "Nahrajte soubor", uploadButtonLabel: "Nahrajte dokument" }), | ||
react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit"))); | ||
@@ -28,0 +29,0 @@ return (react_1.default.createElement(storybook_form_1.StorybookForm, { defaultValues: { "default-light": DUMMY_FILE } }, ({ control }) => (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" }, |
@@ -7,3 +7,3 @@ import { TextInputProps as UITextInputProps } from "@uxf/ui/text-input"; | ||
decimalPlaces?: number; | ||
onChange?: FormControlProps<number>["onChange"]; | ||
onChange?: FormControlProps<number | null>["onChange"]; | ||
requiredMessage?: string; | ||
@@ -10,0 +10,0 @@ }; |
@@ -63,8 +63,9 @@ "use strict"; | ||
const parsedValue = props.decimalPlaces ? parseFloat(value) : parseInt(value, 10); | ||
field.onChange(parsedValue); | ||
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, parsedValue, event); | ||
const returnValue = isNaN(parsedValue) ? null : parsedValue; | ||
field.onChange(returnValue); | ||
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, returnValue, event); | ||
}; | ||
return (react_1.default.createElement(text_input_1.TextInput, { autoComplete: props.autoComplete, autoFocus: props.autoFocus, className: props.className, enterKeyHint: props.enterKeyHint, form: props.form, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, id: id, inputMode: props.decimalPlaces ? "decimal" : "numeric", isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: onKeyDown, pattern: props.pattern, placeholder: props.placeholder, step: props.decimalPlaces ? Number(0).toFixed(props.decimalPlaces - 1) + "1" : props.step, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, type: "number", value: (_e = field.value) !== null && _e !== void 0 ? _e : "", variant: props.variant })); | ||
return (react_1.default.createElement(text_input_1.TextInput, { autoComplete: props.autoComplete, autoFocus: props.autoFocus, className: props.className, enterKeyHint: props.enterKeyHint, form: props.form, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, id: id, inputMode: props.decimalPlaces ? "decimal" : "numeric", isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, max: props.max, min: props.min, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: onKeyDown, pattern: props.pattern, placeholder: props.placeholder, step: props.decimalPlaces ? Number(0).toFixed(props.decimalPlaces - 1) + "1" : props.step, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, type: "number", value: (_e = field.value) !== null && _e !== void 0 ? _e : "", variant: props.variant })); | ||
} | ||
exports.NumberInput = NumberInput; | ||
NumberInput.displayName = "UxfFormNumberInput"; |
{ | ||
"name": "@uxf/form", | ||
"version": "11.0.0-beta.21", | ||
"version": "11.0.0", | ||
"description": "", | ||
@@ -15,3 +15,3 @@ "publishConfig": { | ||
"dependencies": { | ||
"@uxf/ui": "11.0.0-beta.21", | ||
"@uxf/ui": "11.0.0", | ||
"coordinate-parser": "1.0.7", | ||
@@ -18,0 +18,0 @@ "dayjs": "1.11.10", |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
163084
2910
1
+ Added@uxf/core@10.10.1(transitive)
+ Added@uxf/datepicker@11.0.0(transitive)
+ Added@uxf/styles@10.10.1(transitive)
+ Added@uxf/ui@11.0.0(transitive)
- Removed@uxf/core@10.0.0(transitive)
- Removed@uxf/datepicker@10.0.0(transitive)
- Removed@uxf/styles@10.0.0(transitive)
- Removed@uxf/ui@11.0.0-beta.21(transitive)
Updated@uxf/ui@11.0.0