@uxf/form 11.31.2 → 11.33.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/avatar-file-input/avatar-file-input.js +5 -5
- package/avatar-file-input/avatar-file-input.stories.js +1 -2
- package/checkbox-button/checkbox-button.js +5 -5
- package/checkbox-button/checkbox-button.stories.js +5 -6
- package/checkbox-input/checkbox-input.js +5 -5
- package/checkbox-input/checkbox-input.stories.js +5 -6
- package/color-radio-group/color-radio-group.js +5 -5
- package/color-radio-group/color-radio-group.stories.js +1 -2
- package/combobox/combobox.js +7 -5
- package/combobox/combobox.stories.js +6 -7
- package/date-picker-input/date-picker-input.js +7 -7
- package/date-picker-input/date-picker-input.stories.js +2 -3
- package/date-range-picker-input/date-range-picker-input.js +7 -7
- package/date-range-picker-input/date-range-picker-input.stories.js +4 -5
- package/datetime-picker-input/datetime-picker-input.js +7 -7
- package/datetime-picker-input/datetime-picker-input.stories.js +5 -6
- package/dropzone/dropzone-input.js +6 -6
- package/dropzone/dropzone-list.js +2 -3
- package/dropzone/dropzone.stories.js +9 -11
- package/file-input/file-input.js +5 -5
- package/file-input/file-input.stories.js +3 -4
- package/form/form.js +1 -2
- package/form/form.stories.js +4 -6
- package/form-id-context/form-id-context.d.ts +0 -1
- package/gps-input/gps-input.js +8 -7
- package/gps-input/gps-input.stories.js +3 -4
- package/multi-combobox/multi-combobox.js +7 -5
- package/multi-combobox/multi-combobox.stories.js +3 -4
- package/multi-select/multi-select.js +5 -5
- package/multi-select/multi-select.stories.js +2 -3
- package/number-input/number-input.js +5 -5
- package/number-input/number-input.stories.js +5 -6
- package/package.json +8 -8
- package/password-input/password-input.js +6 -6
- package/password-input/password-input.stories.js +3 -4
- package/radio-group/radio-group.js +5 -5
- package/radio-group/radio-group.stories.js +1 -2
- package/readmes.d.ts +0 -1
- package/select/select.js +5 -5
- package/select/select.stories.js +4 -5
- package/storybook/form-data-printer.js +1 -2
- package/storybook/storybook-form.js +2 -3
- package/text-input/text-input.js +5 -5
- package/text-input/text-input.stories.js +6 -7
- package/textarea/textarea.js +5 -5
- package/textarea/textarea.stories.js +3 -4
- package/time-picker-input/time-picker-input.js +7 -7
- package/time-picker-input/time-picker-input.stories.js +1 -2
- package/toggle/toggle.js +5 -5
- package/toggle/toggle.stories.js +4 -5
|
@@ -3,13 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.AvatarFileInput =
|
|
6
|
+
exports.AvatarFileInput = AvatarFileInput;
|
|
7
|
+
const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
|
|
7
8
|
const avatar_file_input_1 = require("@uxf/ui/avatar-file-input");
|
|
8
9
|
const react_1 = __importDefault(require("react"));
|
|
9
10
|
const react_hook_form_1 = require("react-hook-form");
|
|
10
11
|
const form_id_context_1 = require("../form-id-context");
|
|
11
12
|
function AvatarFileInput(props) {
|
|
12
|
-
var _a, _b, _c
|
|
13
|
+
var _a, _b, _c;
|
|
13
14
|
const formId = (0, form_id_context_1.useFormIdContext)();
|
|
14
15
|
const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formId}__${props.name}`;
|
|
15
16
|
const { field, fieldState } = (0, react_hook_form_1.useController)({
|
|
@@ -17,7 +18,7 @@ function AvatarFileInput(props) {
|
|
|
17
18
|
name: props.name,
|
|
18
19
|
rules: {
|
|
19
20
|
required: props.isRequired ? props.requiredMessage || "Toto pole je povinné" : undefined,
|
|
20
|
-
...
|
|
21
|
+
...props.rules,
|
|
21
22
|
},
|
|
22
23
|
shouldUnregister: props.shouldUnregister,
|
|
23
24
|
});
|
|
@@ -31,7 +32,6 @@ function AvatarFileInput(props) {
|
|
|
31
32
|
field.onChange(value);
|
|
32
33
|
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
|
|
33
34
|
};
|
|
34
|
-
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: (
|
|
35
|
+
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: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, icon: props.icon, id: id, isDisabled: props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(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 }));
|
|
35
36
|
}
|
|
36
|
-
exports.AvatarFileInput = AvatarFileInput;
|
|
37
37
|
AvatarFileInput.displayName = "UxfFormAvatarFileInput";
|
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Default =
|
|
6
|
+
exports.Default = Default;
|
|
7
7
|
const button_1 = require("@uxf/ui/button");
|
|
8
8
|
const upload_file_mock_1 = require("@uxf/ui/utils/mocks/upload-file.mock");
|
|
9
9
|
const react_1 = __importDefault(require("react"));
|
|
@@ -21,4 +21,3 @@ function Default() {
|
|
|
21
21
|
return (react_1.default.createElement(storybook_form_1.StorybookForm, null, ({ control }) => (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
|
|
22
22
|
react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormAvatarFileInputs(control, "light"))))));
|
|
23
23
|
}
|
|
24
|
-
exports.Default = Default;
|
|
@@ -3,13 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.CheckboxButton =
|
|
6
|
+
exports.CheckboxButton = CheckboxButton;
|
|
7
|
+
const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
|
|
7
8
|
const checkbox_button_1 = require("@uxf/ui/checkbox-button");
|
|
8
9
|
const react_1 = __importDefault(require("react"));
|
|
9
10
|
const react_hook_form_1 = require("react-hook-form");
|
|
10
11
|
const form_id_context_1 = require("../form-id-context");
|
|
11
12
|
function CheckboxButton(props) {
|
|
12
|
-
var _a, _b
|
|
13
|
+
var _a, _b;
|
|
13
14
|
const formId = (0, form_id_context_1.useFormIdContext)();
|
|
14
15
|
const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formId}__${props.name}`;
|
|
15
16
|
const { field, fieldState } = (0, react_hook_form_1.useController)({
|
|
@@ -17,7 +18,7 @@ function CheckboxButton(props) {
|
|
|
17
18
|
name: props.name,
|
|
18
19
|
rules: {
|
|
19
20
|
required: props.isRequired ? props.requiredMessage || "Toto pole je povinné" : undefined,
|
|
20
|
-
...
|
|
21
|
+
...props.rules,
|
|
21
22
|
},
|
|
22
23
|
shouldUnregister: props.shouldUnregister,
|
|
23
24
|
});
|
|
@@ -31,7 +32,6 @@ function CheckboxButton(props) {
|
|
|
31
32
|
field.onChange(value);
|
|
32
33
|
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
|
|
33
34
|
};
|
|
34
|
-
return (react_1.default.createElement(checkbox_button_1.CheckboxButton, { className: props.className, id: id, isDisabled: props.isDisabled, isInvalid:
|
|
35
|
+
return (react_1.default.createElement(checkbox_button_1.CheckboxButton, { className: props.className, id: id, isDisabled: props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, ref: field.ref, style: props.style, value: (_b = field.value) !== null && _b !== void 0 ? _b : (!props.nullable ? false : undefined) }));
|
|
35
36
|
}
|
|
36
|
-
exports.CheckboxButton = CheckboxButton;
|
|
37
37
|
CheckboxButton.displayName = "UxfFormCheckboxButton";
|
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Default =
|
|
6
|
+
exports.Default = Default;
|
|
7
7
|
const button_1 = require("@uxf/ui/button");
|
|
8
8
|
const react_1 = __importDefault(require("react"));
|
|
9
9
|
const storybook_form_1 = require("../storybook/storybook-form");
|
|
@@ -14,12 +14,11 @@ exports.default = {
|
|
|
14
14
|
};
|
|
15
15
|
function Default() {
|
|
16
16
|
const storyFormCheckboxes = (control) => (react_1.default.createElement("div", { className: "flex flex-col space-y-2" },
|
|
17
|
-
react_1.default.createElement(checkbox_button_1.CheckboxButton, { label: "CheckboxButton form", name: "checkbox-button1"
|
|
18
|
-
react_1.default.createElement(checkbox_button_1.CheckboxButton, { label: "CheckboxButton form required", name: "checkbox-button-required"
|
|
19
|
-
react_1.default.createElement(checkbox_button_1.CheckboxButton, { label: "CheckboxButton form disabled", name: "checkbox-button-disabled"
|
|
20
|
-
react_1.default.createElement(checkbox_button_1.CheckboxButton, { label: "CheckboxButton form readOnly", name: "checkbox-button-read-only"
|
|
17
|
+
react_1.default.createElement(checkbox_button_1.CheckboxButton, { control: control, label: "CheckboxButton form", name: "checkbox-button1" }),
|
|
18
|
+
react_1.default.createElement(checkbox_button_1.CheckboxButton, { control: control, isRequired: true, label: "CheckboxButton form required", name: "checkbox-button-required" }),
|
|
19
|
+
react_1.default.createElement(checkbox_button_1.CheckboxButton, { control: control, isDisabled: true, label: "CheckboxButton form disabled", name: "checkbox-button-disabled" }),
|
|
20
|
+
react_1.default.createElement(checkbox_button_1.CheckboxButton, { control: control, isReadOnly: true, label: "CheckboxButton form readOnly", name: "checkbox-button-read-only" }),
|
|
21
21
|
react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));
|
|
22
22
|
return (react_1.default.createElement(storybook_form_1.StorybookForm, null, ({ control }) => (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
|
|
23
23
|
react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormCheckboxes(control))))));
|
|
24
24
|
}
|
|
25
|
-
exports.Default = Default;
|
|
@@ -3,13 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.CheckboxInput =
|
|
6
|
+
exports.CheckboxInput = CheckboxInput;
|
|
7
|
+
const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
|
|
7
8
|
const checkbox_input_1 = require("@uxf/ui/checkbox-input");
|
|
8
9
|
const react_1 = __importDefault(require("react"));
|
|
9
10
|
const react_hook_form_1 = require("react-hook-form");
|
|
10
11
|
const form_id_context_1 = require("../form-id-context");
|
|
11
12
|
function CheckboxInput(props) {
|
|
12
|
-
var _a, _b, _c, _d
|
|
13
|
+
var _a, _b, _c, _d;
|
|
13
14
|
const formId = (0, form_id_context_1.useFormIdContext)();
|
|
14
15
|
const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formId}__${props.name}`;
|
|
15
16
|
const { field, fieldState } = (0, react_hook_form_1.useController)({
|
|
@@ -17,7 +18,7 @@ function CheckboxInput(props) {
|
|
|
17
18
|
name: props.name,
|
|
18
19
|
rules: {
|
|
19
20
|
required: props.isRequired ? props.requiredMessage || "Toto pole je povinné" : undefined,
|
|
20
|
-
...
|
|
21
|
+
...props.rules,
|
|
21
22
|
},
|
|
22
23
|
shouldUnregister: props.shouldUnregister,
|
|
23
24
|
});
|
|
@@ -31,7 +32,6 @@ function CheckboxInput(props) {
|
|
|
31
32
|
field.onChange(value);
|
|
32
33
|
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
|
|
33
34
|
};
|
|
34
|
-
return (react_1.default.createElement(checkbox_input_1.CheckboxInput, { className: props.className, helperText: (
|
|
35
|
+
return (react_1.default.createElement(checkbox_input_1.CheckboxInput, { className: props.className, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: id, isDisabled: props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(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, style: props.style, value: (_d = field.value) !== null && _d !== void 0 ? _d : (!props.nullable ? false : undefined) }));
|
|
35
36
|
}
|
|
36
|
-
exports.CheckboxInput = CheckboxInput;
|
|
37
37
|
CheckboxInput.displayName = "UxfFormCheckboxInput";
|
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Default =
|
|
6
|
+
exports.Default = Default;
|
|
7
7
|
const button_1 = require("@uxf/ui/button");
|
|
8
8
|
const react_1 = __importDefault(require("react"));
|
|
9
9
|
const storybook_form_1 = require("../storybook/storybook-form");
|
|
@@ -14,12 +14,11 @@ exports.default = {
|
|
|
14
14
|
};
|
|
15
15
|
function Default() {
|
|
16
16
|
const storyFormCheckboxes = (control) => (react_1.default.createElement("div", { className: "space-y-2" },
|
|
17
|
-
react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "CheckboxInput form", name: "checkbox1"
|
|
18
|
-
react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "CheckboxInput form required", name: "checkbox-required"
|
|
19
|
-
react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "CheckboxInput form disabled", name: "checkbox-disabled"
|
|
20
|
-
react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "CheckboxInput form readOnly", name: "checkbox-readonly"
|
|
17
|
+
react_1.default.createElement(checkbox_input_1.CheckboxInput, { control: control, label: "CheckboxInput form", name: "checkbox1" }),
|
|
18
|
+
react_1.default.createElement(checkbox_input_1.CheckboxInput, { control: control, isRequired: true, label: "CheckboxInput form required", name: "checkbox-required" }),
|
|
19
|
+
react_1.default.createElement(checkbox_input_1.CheckboxInput, { control: control, isDisabled: true, label: "CheckboxInput form disabled", name: "checkbox-disabled" }),
|
|
20
|
+
react_1.default.createElement(checkbox_input_1.CheckboxInput, { control: control, isReadOnly: true, label: "CheckboxInput form readOnly", name: "checkbox-readonly" }),
|
|
21
21
|
react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));
|
|
22
22
|
return (react_1.default.createElement(storybook_form_1.StorybookForm, null, ({ control }) => (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
|
|
23
23
|
react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormCheckboxes(control))))));
|
|
24
24
|
}
|
|
25
|
-
exports.Default = Default;
|
|
@@ -3,13 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.ColorRadioGroup =
|
|
6
|
+
exports.ColorRadioGroup = ColorRadioGroup;
|
|
7
|
+
const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
|
|
7
8
|
const color_radio_group_1 = require("@uxf/ui/color-radio-group");
|
|
8
9
|
const react_1 = __importDefault(require("react"));
|
|
9
10
|
const react_hook_form_1 = require("react-hook-form");
|
|
10
11
|
const form_id_context_1 = require("../form-id-context");
|
|
11
12
|
function ColorRadioGroup(props) {
|
|
12
|
-
var _a, _b, _c, _d
|
|
13
|
+
var _a, _b, _c, _d;
|
|
13
14
|
const formId = (0, form_id_context_1.useFormIdContext)();
|
|
14
15
|
const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formId}__${props.name}`;
|
|
15
16
|
const { field, fieldState } = (0, react_hook_form_1.useController)({
|
|
@@ -17,7 +18,7 @@ function ColorRadioGroup(props) {
|
|
|
17
18
|
name: props.name,
|
|
18
19
|
rules: {
|
|
19
20
|
required: props.isRequired ? props.requiredMessage || "Toto pole je povinné" : undefined,
|
|
20
|
-
...
|
|
21
|
+
...props.rules,
|
|
21
22
|
},
|
|
22
23
|
shouldUnregister: props.shouldUnregister,
|
|
23
24
|
});
|
|
@@ -31,7 +32,6 @@ function ColorRadioGroup(props) {
|
|
|
31
32
|
field.onChange(value);
|
|
32
33
|
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
|
|
33
34
|
};
|
|
34
|
-
return (react_1.default.createElement(color_radio_group_1.ColorRadioGroup, { className: props.className, helperText: (
|
|
35
|
+
return (react_1.default.createElement(color_radio_group_1.ColorRadioGroup, { className: props.className, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: id, isDisabled: props.options.length === 0 || props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, ref: field.ref, style: props.style, value: (_d = field.value) !== null && _d !== void 0 ? _d : null }));
|
|
35
36
|
}
|
|
36
|
-
exports.ColorRadioGroup = ColorRadioGroup;
|
|
37
37
|
ColorRadioGroup.displayName = "UxfFormColorRadioGroup";
|
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Default =
|
|
6
|
+
exports.Default = Default;
|
|
7
7
|
const button_1 = require("@uxf/ui/button");
|
|
8
8
|
const react_1 = __importDefault(require("react"));
|
|
9
9
|
const storybook_form_1 = require("../storybook/storybook-form");
|
|
@@ -60,4 +60,3 @@ function Default() {
|
|
|
60
60
|
return (react_1.default.createElement(storybook_form_1.StorybookForm, null, ({ control }) => (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
|
|
61
61
|
react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormColorRadioGroup(control))))));
|
|
62
62
|
}
|
|
63
|
-
exports.Default = Default;
|
package/combobox/combobox.js
CHANGED
|
@@ -3,15 +3,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Combobox =
|
|
6
|
+
exports.Combobox = Combobox;
|
|
7
|
+
const empty_array_1 = require("@uxf/core/constants/empty-array");
|
|
7
8
|
const is_empty_1 = require("@uxf/core/utils/is-empty");
|
|
8
9
|
const is_nil_1 = require("@uxf/core/utils/is-nil");
|
|
10
|
+
const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
|
|
9
11
|
const combobox_1 = require("@uxf/ui/combobox");
|
|
10
12
|
const react_1 = __importDefault(require("react"));
|
|
11
13
|
const react_hook_form_1 = require("react-hook-form");
|
|
12
14
|
const form_id_context_1 = require("../form-id-context");
|
|
13
15
|
function Combobox(props) {
|
|
14
|
-
var _a, _b, _c, _d, _e
|
|
16
|
+
var _a, _b, _c, _d, _e;
|
|
15
17
|
const formId = (0, form_id_context_1.useFormIdContext)();
|
|
16
18
|
const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formId}__${props.name}`;
|
|
17
19
|
const { field, fieldState } = (0, react_hook_form_1.useController)({
|
|
@@ -19,7 +21,7 @@ function Combobox(props) {
|
|
|
19
21
|
name: props.name,
|
|
20
22
|
rules: {
|
|
21
23
|
required: props.isRequired ? props.requiredMessage || "Toto pole je povinné" : undefined,
|
|
22
|
-
...
|
|
24
|
+
...props.rules,
|
|
23
25
|
},
|
|
24
26
|
shouldUnregister: props.shouldUnregister,
|
|
25
27
|
});
|
|
@@ -33,7 +35,7 @@ function Combobox(props) {
|
|
|
33
35
|
field.onChange(value);
|
|
34
36
|
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
|
|
35
37
|
};
|
|
36
|
-
|
|
38
|
+
const isDisabled = ((0, is_nil_1.isNil)(props.loadOptions) && (0, is_empty_1.isEmpty)((_b = props.options) !== null && _b !== void 0 ? _b : empty_array_1.EMPTY_ARRAY)) || props.isDisabled;
|
|
39
|
+
return (react_1.default.createElement(combobox_1.Combobox, { className: props.className, dropdownClassName: props.dropdownClassName, dropdownMatchesInputWidth: props.dropdownMatchesInputWidth, dropdownMaxHeight: props.dropdownMaxHeight, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, 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, iconName: props.iconName, id: id, inputArrow: props.inputArrow, inputRef: field.ref, isClearable: props.isClearable, isDisabled: isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: props.isReadOnly, isRequired: props.isRequired, keyExtractor: props.keyExtractor, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, loadOptions: props.loadOptions, name: field.name, noOptionsMessage: props.noOptionsMessage, noQueryMessage: props.noQueryMessage, notFoundMessage: props.notFoundMessage, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, renderOption: props.renderOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, style: props.style, value: (_e = field.value) !== null && _e !== void 0 ? _e : null, variant: props.variant }));
|
|
37
40
|
}
|
|
38
|
-
exports.Combobox = Combobox;
|
|
39
41
|
Combobox.displayName = "UxfFormCombobox";
|
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Default =
|
|
6
|
+
exports.Default = Default;
|
|
7
7
|
const button_1 = require("@uxf/ui/button");
|
|
8
8
|
const react_1 = __importDefault(require("react"));
|
|
9
9
|
const storybook_form_1 = require("../storybook/storybook-form");
|
|
@@ -19,13 +19,12 @@ const options = [
|
|
|
19
19
|
];
|
|
20
20
|
function Default() {
|
|
21
21
|
const storyFormComboboxes = (control) => (react_1.default.createElement("div", { className: "space-y-8" },
|
|
22
|
-
react_1.default.createElement(combobox_1.Combobox, {
|
|
23
|
-
react_1.default.createElement(combobox_1.Combobox, {
|
|
24
|
-
react_1.default.createElement(combobox_1.Combobox, { label: "Combobox form disabled", name: "combobox-disabled",
|
|
25
|
-
react_1.default.createElement(combobox_1.Combobox, {
|
|
26
|
-
react_1.default.createElement(combobox_1.Combobox, {
|
|
22
|
+
react_1.default.createElement(combobox_1.Combobox, { control: control, helperText: "Za\u010Dn\u011Bte ps\u00E1t pro vyhled\u00E1v\u00E1n\u00ED...", id: "form-combobox", label: "Combobox form", name: "firstname", options: options, placeholder: "Placeholder" }),
|
|
23
|
+
react_1.default.createElement(combobox_1.Combobox, { control: control, helperText: "Za\u010Dn\u011Bte ps\u00E1t pro vyhled\u00E1v\u00E1n\u00ED...", id: "form-combobox", isRequired: true, label: "Combobox form required", name: "combobox-required", options: options, placeholder: "Placeholder" }),
|
|
24
|
+
react_1.default.createElement(combobox_1.Combobox, { control: control, id: "form-combobox", isDisabled: true, label: "Combobox form disabled", name: "combobox-disabled", options: options, placeholder: "Placeholder" }),
|
|
25
|
+
react_1.default.createElement(combobox_1.Combobox, { control: control, dropdownPlacement: "top", id: "form-combobox", label: "Combobox form with dropdown top", name: "select-dropdown-top", options: options, placeholder: "Placeholder" }),
|
|
26
|
+
react_1.default.createElement(combobox_1.Combobox, { control: control, dropdownPlacement: "top", id: "form-combobox", isClearable: true, label: "Combobox async", loadOptions: (query) => Promise.resolve(options.filter((option) => !query || option.label.toLowerCase().includes(query.toLowerCase()))), name: "select-dropdown-async", placeholder: "Placeholder" }),
|
|
27
27
|
react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));
|
|
28
28
|
return (react_1.default.createElement(storybook_form_1.StorybookForm, { defaultValues: { "select-dropdown-async": { id: "one", label: "Option one" } } }, ({ control }) => (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
|
|
29
29
|
react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormComboboxes(control))))));
|
|
30
30
|
}
|
|
31
|
-
exports.Default = Default;
|
|
@@ -26,7 +26,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
26
26
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
27
|
};
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
-
exports.DatePickerInput =
|
|
29
|
+
exports.DatePickerInput = DatePickerInput;
|
|
30
|
+
const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
|
|
30
31
|
const date_picker_input_1 = require("@uxf/ui/date-picker-input");
|
|
31
32
|
const dayjs_1 = __importStar(require("dayjs"));
|
|
32
33
|
const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
|
|
@@ -35,7 +36,7 @@ const react_hook_form_1 = require("react-hook-form");
|
|
|
35
36
|
const form_id_context_1 = require("../form-id-context");
|
|
36
37
|
(0, dayjs_1.extend)(customParseFormat_1.default);
|
|
37
38
|
function DatePickerInput(props) {
|
|
38
|
-
var _a, _b, _c, _d, _e, _f
|
|
39
|
+
var _a, _b, _c, _d, _e, _f;
|
|
39
40
|
const formId = (0, form_id_context_1.useFormIdContext)();
|
|
40
41
|
const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formId}__${props.name}`;
|
|
41
42
|
const displayDateFormat = (_b = props.displayDateFormat) !== null && _b !== void 0 ? _b : date_picker_input_1.DISPLAY_DATE_FORMAT;
|
|
@@ -44,7 +45,7 @@ function DatePickerInput(props) {
|
|
|
44
45
|
name: props.name,
|
|
45
46
|
rules: {
|
|
46
47
|
required: props.isRequired ? props.requiredMessage || "Toto pole je povinné" : undefined,
|
|
47
|
-
...
|
|
48
|
+
...props.rules,
|
|
48
49
|
validate: {
|
|
49
50
|
validDate: (value) => {
|
|
50
51
|
if (!value) {
|
|
@@ -65,9 +66,9 @@ function DatePickerInput(props) {
|
|
|
65
66
|
return `Maximální datum, který je možné zadat, je: ${(0, dayjs_1.default)(props.maxDate).format(displayDateFormat)}`;
|
|
66
67
|
}
|
|
67
68
|
},
|
|
68
|
-
...(typeof ((
|
|
69
|
+
...(typeof ((_c = props.rules) === null || _c === void 0 ? void 0 : _c.validate) === "function"
|
|
69
70
|
? { custom: props.rules.validate }
|
|
70
|
-
: (
|
|
71
|
+
: (_d = props.rules) === null || _d === void 0 ? void 0 : _d.validate),
|
|
71
72
|
},
|
|
72
73
|
},
|
|
73
74
|
shouldUnregister: props.shouldUnregister,
|
|
@@ -82,7 +83,6 @@ function DatePickerInput(props) {
|
|
|
82
83
|
field.onChange(value);
|
|
83
84
|
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
|
|
84
85
|
};
|
|
85
|
-
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: (
|
|
86
|
+
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: (_f = (_e = fieldState.error) === null || _e === void 0 ? void 0 : _e.message) !== null && _f !== void 0 ? _f : props.helperText, hiddenLabel: props.hiddenLabel, id: id, isClearable: props.isClearable, isDisabled: props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(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, style: props.style, triggerElement: props.triggerElement, unavailableDates: props.unavailableDates, value: field.value, variant: props.variant }));
|
|
86
87
|
}
|
|
87
|
-
exports.DatePickerInput = DatePickerInput;
|
|
88
88
|
DatePickerInput.displayName = "UxfFormDatePickerInput";
|
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Default =
|
|
6
|
+
exports.Default = Default;
|
|
7
7
|
const button_1 = require("@uxf/ui/button");
|
|
8
8
|
const date_picker_input_1 = require("@uxf/ui/date-picker-input");
|
|
9
9
|
const dayjs_1 = __importDefault(require("dayjs"));
|
|
@@ -18,7 +18,7 @@ function Default() {
|
|
|
18
18
|
const storyFormDatePickers = (control) => (react_1.default.createElement("div", { className: "space-y-4" },
|
|
19
19
|
react_1.default.createElement(date_picker_input_2.DatePickerInput, { control: control, isClearable: true, isRequired: true, label: "Default date picker", name: "default" }),
|
|
20
20
|
react_1.default.createElement(date_picker_input_2.DatePickerInput, { control: control, isClearable: true, isRequired: true, label: "Default date picker with default value", name: "withDefaultValue" }),
|
|
21
|
-
react_1.default.createElement(date_picker_input_2.DatePickerInput, { control: control, isClearable: true, isRequired: true,
|
|
21
|
+
react_1.default.createElement(date_picker_input_2.DatePickerInput, { control: control, isClearable: true, isRequired: true, label: "Date picker with input min/max validation - only next 7 days", maxDate: (0, dayjs_1.default)().add(6, "days").format(date_picker_input_1.OUTPUT_DATE_FORMAT), minDate: (0, dayjs_1.default)().format(date_picker_input_1.OUTPUT_DATE_FORMAT), name: "withMinMaxValidation" }),
|
|
22
22
|
react_1.default.createElement(date_picker_input_2.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" }),
|
|
23
23
|
react_1.default.createElement(date_picker_input_2.DatePickerInput, { bottomContent: react_1.default.createElement("div", null,
|
|
24
24
|
"Bottom content",
|
|
@@ -29,4 +29,3 @@ function Default() {
|
|
|
29
29
|
} }, ({ control }) => (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
|
|
30
30
|
react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyFormDatePickers(control))))));
|
|
31
31
|
}
|
|
32
|
-
exports.Default = Default;
|
|
@@ -26,7 +26,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
26
26
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
27
|
};
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
-
exports.DateRangePickerInput =
|
|
29
|
+
exports.DateRangePickerInput = DateRangePickerInput;
|
|
30
|
+
const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
|
|
30
31
|
const date_range_picker_input_1 = require("@uxf/ui/date-range-picker-input");
|
|
31
32
|
const date_range_picker_input_2 = require("@uxf/ui/date-range-picker-input/date-range-picker-input");
|
|
32
33
|
const dayjs_1 = __importStar(require("dayjs"));
|
|
@@ -36,13 +37,13 @@ const react_hook_form_1 = require("react-hook-form");
|
|
|
36
37
|
(0, dayjs_1.extend)(customParseFormat_1.default);
|
|
37
38
|
const OUTPUT_DATE_FORMAT = "YYYY-MM-DD";
|
|
38
39
|
function DateRangePickerInput(props) {
|
|
39
|
-
var _a, _b, _c, _d
|
|
40
|
+
var _a, _b, _c, _d;
|
|
40
41
|
const { field, fieldState } = (0, react_hook_form_1.useController)({
|
|
41
42
|
control: props.control,
|
|
42
43
|
name: props.name,
|
|
43
44
|
rules: {
|
|
44
45
|
required: props.isRequired ? props.requiredMessage || "Toto pole je povinné" : undefined,
|
|
45
|
-
...
|
|
46
|
+
...props.rules,
|
|
46
47
|
validate: {
|
|
47
48
|
validDate: (value) => {
|
|
48
49
|
if (!value) {
|
|
@@ -58,9 +59,9 @@ function DateRangePickerInput(props) {
|
|
|
58
59
|
return "Koncové datum nemůže předcházet počátečnímu datu.";
|
|
59
60
|
}
|
|
60
61
|
},
|
|
61
|
-
...(typeof ((
|
|
62
|
+
...(typeof ((_a = props.rules) === null || _a === void 0 ? void 0 : _a.validate) === "function"
|
|
62
63
|
? { custom: props.rules.validate }
|
|
63
|
-
: (
|
|
64
|
+
: (_b = props.rules) === null || _b === void 0 ? void 0 : _b.validate),
|
|
64
65
|
},
|
|
65
66
|
},
|
|
66
67
|
shouldUnregister: props.shouldUnregister,
|
|
@@ -97,7 +98,6 @@ function DateRangePickerInput(props) {
|
|
|
97
98
|
(parsedTo.isValid() ? parsedTo.format(date_range_picker_input_2.DISPLAY_DATE_FORMAT) : fieldTo)
|
|
98
99
|
: field.value
|
|
99
100
|
: null;
|
|
100
|
-
return (react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { autoFocus: props.autoFocus, bottomContent: props.bottomContent, className: props.className, datesConfig: props.datesConfig, form: props.form, helperText: (
|
|
101
|
+
return (react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { autoFocus: props.autoFocus, bottomContent: props.bottomContent, className: props.className, datesConfig: props.datesConfig, 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: props.id, isClearable: props.isClearable, isDisabled: props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(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, style: props.style, triggerElement: props.triggerElement, unavailableDates: props.unavailableDates, value: value, variant: props.variant }));
|
|
101
102
|
}
|
|
102
|
-
exports.DateRangePickerInput = DateRangePickerInput;
|
|
103
103
|
DateRangePickerInput.displayName = "UxfFormDateRangePickerInput";
|
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Default =
|
|
6
|
+
exports.Default = Default;
|
|
7
7
|
const button_1 = require("@uxf/ui/button");
|
|
8
8
|
const react_1 = __importDefault(require("react"));
|
|
9
9
|
const storybook_form_1 = require("../storybook/storybook-form");
|
|
@@ -14,13 +14,12 @@ exports.default = {
|
|
|
14
14
|
};
|
|
15
15
|
function Default() {
|
|
16
16
|
const storyFormDatePickers = (control) => (react_1.default.createElement("div", { className: "space-y-4" },
|
|
17
|
-
react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { label: "Default date range picker", name: "default"
|
|
18
|
-
react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { label: "Date range picker with two months", name: "twomonths", numberOfMonths: 2
|
|
17
|
+
react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { control: control, isClearable: true, isRequired: true, label: "Default date range picker", name: "default" }),
|
|
18
|
+
react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { control: control, isClearable: true, isRequired: true, label: "Date range picker with two months", name: "twomonths", numberOfMonths: 2 }),
|
|
19
19
|
react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { bottomContent: react_1.default.createElement("div", null,
|
|
20
20
|
"Bottom content",
|
|
21
|
-
react_1.default.createElement("p", null, "Here can goes anything")), label: "With bottom content", name: "default"
|
|
21
|
+
react_1.default.createElement("p", null, "Here can goes anything")), control: control, isClearable: true, isRequired: true, label: "With bottom content", name: "default" }),
|
|
22
22
|
react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));
|
|
23
23
|
return (react_1.default.createElement(storybook_form_1.StorybookForm, null, ({ control }) => (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
|
|
24
24
|
react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormDatePickers(control))))));
|
|
25
25
|
}
|
|
26
|
-
exports.Default = Default;
|
|
@@ -26,7 +26,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
26
26
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
27
|
};
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
-
exports.DatetimePickerInput =
|
|
29
|
+
exports.DatetimePickerInput = DatetimePickerInput;
|
|
30
|
+
const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
|
|
30
31
|
const date_picker_input_1 = require("@uxf/ui/date-picker-input");
|
|
31
32
|
const datetime_picker_1 = require("@uxf/ui/datetime-picker");
|
|
32
33
|
const datetime_picker_input_1 = require("@uxf/ui/datetime-picker-input");
|
|
@@ -37,7 +38,7 @@ const react_hook_form_1 = require("react-hook-form");
|
|
|
37
38
|
const form_id_context_1 = require("../form-id-context");
|
|
38
39
|
(0, dayjs_1.extend)(customParseFormat_1.default);
|
|
39
40
|
function DatetimePickerInput(props) {
|
|
40
|
-
var _a, _b, _c, _d, _e
|
|
41
|
+
var _a, _b, _c, _d, _e;
|
|
41
42
|
const formId = (0, form_id_context_1.useFormIdContext)();
|
|
42
43
|
const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formId}__${props.name}`;
|
|
43
44
|
const { field, fieldState } = (0, react_hook_form_1.useController)({
|
|
@@ -45,7 +46,7 @@ function DatetimePickerInput(props) {
|
|
|
45
46
|
name: props.name,
|
|
46
47
|
rules: {
|
|
47
48
|
required: props.isRequired ? props.requiredMessage || "Toto pole je povinné" : undefined,
|
|
48
|
-
...
|
|
49
|
+
...props.rules,
|
|
49
50
|
validate: {
|
|
50
51
|
validDate: (value) => {
|
|
51
52
|
if (!value) {
|
|
@@ -66,9 +67,9 @@ function DatetimePickerInput(props) {
|
|
|
66
67
|
return `Maximální datum, který je možné zadat, je: ${(0, dayjs_1.default)(props.maxDate).format(date_picker_input_1.DISPLAY_DATE_FORMAT)}`;
|
|
67
68
|
}
|
|
68
69
|
},
|
|
69
|
-
...(typeof ((
|
|
70
|
+
...(typeof ((_b = props.rules) === null || _b === void 0 ? void 0 : _b.validate) === "function"
|
|
70
71
|
? { custom: props.rules.validate }
|
|
71
|
-
: (
|
|
72
|
+
: (_c = props.rules) === null || _c === void 0 ? void 0 : _c.validate),
|
|
72
73
|
},
|
|
73
74
|
},
|
|
74
75
|
shouldUnregister: props.shouldUnregister,
|
|
@@ -83,7 +84,6 @@ function DatetimePickerInput(props) {
|
|
|
83
84
|
field.onChange(value);
|
|
84
85
|
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
|
|
85
86
|
};
|
|
86
|
-
return (react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { autoFocus: props.autoFocus, bottomContent: props.bottomContent, className: props.className, form: props.form, helperText: (
|
|
87
|
+
return (react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { CustomDatetimePicker: props.CustomDatetimePicker, autoFocus: props.autoFocus, bottomContent: props.bottomContent, className: props.className, form: props.form, helperText: (_e = (_d = fieldState.error) === null || _d === void 0 ? void 0 : _d.message) !== null && _e !== void 0 ? _e : props.helperText, hiddenLabel: props.hiddenLabel, id: id, isClearable: props.isClearable, isDisabled: props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(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 }));
|
|
87
88
|
}
|
|
88
|
-
exports.DatetimePickerInput = DatetimePickerInput;
|
|
89
89
|
DatetimePickerInput.displayName = "UxfFormDatePickerInput";
|
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Default =
|
|
6
|
+
exports.Default = Default;
|
|
7
7
|
const button_1 = require("@uxf/ui/button");
|
|
8
8
|
const date_picker_input_1 = require("@uxf/ui/date-picker-input");
|
|
9
9
|
const dayjs_1 = __importDefault(require("dayjs"));
|
|
@@ -11,19 +11,18 @@ const react_1 = __importDefault(require("react"));
|
|
|
11
11
|
const storybook_form_1 = require("../storybook/storybook-form");
|
|
12
12
|
const datetime_picker_input_1 = require("./datetime-picker-input");
|
|
13
13
|
function Default() {
|
|
14
|
-
return (react_1.default.createElement(storybook_form_1.StorybookForm, { defaultValues: { withDefaultValue: (0, dayjs_1.default)("2023-10-20T14:32:10.511").toISOString() }
|
|
14
|
+
return (react_1.default.createElement(storybook_form_1.StorybookForm, { className: "space-y-4 p-4", defaultValues: { withDefaultValue: (0, dayjs_1.default)("2023-10-20T14:32:10.511").toISOString() } }, ({ control }) => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
15
15
|
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { control: control, isClearable: true, isRequired: true, label: "Default datetime picker", name: "default" }),
|
|
16
16
|
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { control: control, isClearable: true, isRequired: true, label: "Default datetime picker with default value", name: "withDefaultValue" }),
|
|
17
|
-
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { control: control, isClearable: true, isRequired: true,
|
|
17
|
+
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { control: control, isClearable: true, isRequired: true, label: "Date time picker with input min/max validation - only next 7 days", maxDate: (0, dayjs_1.default)().add(6, "days").format(date_picker_input_1.OUTPUT_DATE_FORMAT), minDate: (0, dayjs_1.default)().format(date_picker_input_1.OUTPUT_DATE_FORMAT), name: "withMinMaxValidation" }),
|
|
18
18
|
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { bottomContent: react_1.default.createElement("div", null,
|
|
19
19
|
"Bottom content",
|
|
20
20
|
react_1.default.createElement("p", null, "Here can goes anything")), control: control, isClearable: true, isRequired: true, label: "With bottom content", name: "default" }),
|
|
21
|
-
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, {
|
|
21
|
+
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { CustomDatetimePicker: (props) => (react_1.default.createElement(button_1.Button, { onClick: () => {
|
|
22
22
|
props.onChange((0, dayjs_1.default)()
|
|
23
23
|
.add(1, "day")
|
|
24
24
|
.startOf("day")
|
|
25
25
|
.format("YYYY-MM-DD[T]HH:mm:ssZ"));
|
|
26
26
|
props.onClose();
|
|
27
|
-
} }, "Z\u00EDtra")), isClearable: true })))));
|
|
27
|
+
} }, "Z\u00EDtra")), control: control, isClearable: true, label: "With custom datetime picker", name: "withCustomDatetimePicker" })))));
|
|
28
28
|
}
|
|
29
|
-
exports.Default = Default;
|
|
@@ -3,13 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.DropzoneInput =
|
|
6
|
+
exports.DropzoneInput = DropzoneInput;
|
|
7
|
+
const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
|
|
7
8
|
const dropzone_1 = require("@uxf/ui/dropzone");
|
|
8
9
|
const react_1 = __importDefault(require("react"));
|
|
9
10
|
const react_hook_form_1 = require("react-hook-form");
|
|
10
11
|
const form_id_context_1 = require("../form-id-context");
|
|
11
12
|
function DropzoneInput(props) {
|
|
12
|
-
var _a, _b, _c
|
|
13
|
+
var _a, _b, _c;
|
|
13
14
|
const formId = (0, form_id_context_1.useFormIdContext)();
|
|
14
15
|
const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formId}__${props.name}`;
|
|
15
16
|
const { field, fieldState } = (0, react_hook_form_1.useController)({
|
|
@@ -17,7 +18,7 @@ function DropzoneInput(props) {
|
|
|
17
18
|
disabled: props.isDisabled,
|
|
18
19
|
name: props.name,
|
|
19
20
|
rules: {
|
|
20
|
-
...
|
|
21
|
+
...props.rules,
|
|
21
22
|
validate: {
|
|
22
23
|
default: (value) => {
|
|
23
24
|
var _a;
|
|
@@ -38,7 +39,7 @@ function DropzoneInput(props) {
|
|
|
38
39
|
// }
|
|
39
40
|
return true;
|
|
40
41
|
},
|
|
41
|
-
...(((
|
|
42
|
+
...(((_b = props.rules) === null || _b === void 0 ? void 0 : _b.validate)
|
|
42
43
|
? typeof props.rules.validate === "function"
|
|
43
44
|
? { custom: props.rules.validate }
|
|
44
45
|
: props.rules.validate
|
|
@@ -52,7 +53,6 @@ function DropzoneInput(props) {
|
|
|
52
53
|
field.onChange(value);
|
|
53
54
|
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
|
|
54
55
|
};
|
|
55
|
-
return (react_1.default.createElement(dropzone_1.Dropzone, { accept: props.accept, className: props.className, helperText: ((
|
|
56
|
+
return (react_1.default.createElement(dropzone_1.Dropzone, { accept: props.accept, className: props.className, helperText: ((_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) || props.helperText, icon: props.icon, id: id, isDisabled: props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, maxFileSize: props.maxFileSize, maxFilesCount: props.maxFilesCount, minFileSize: props.minFileSize, name: props.name, noClick: props.noClick, noDrag: props.noDrag, onChange: onChange, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: field.ref, style: props.style, value: field.value }));
|
|
56
57
|
}
|
|
57
|
-
exports.DropzoneInput = DropzoneInput;
|
|
58
58
|
DropzoneInput.displayName = "UxfFormDropzoneInput";
|