@uxf/form 11.72.3 → 11.74.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/README.md +3 -1
- package/package.json +4 -2
- package/translations/translations.d.ts +389 -0
- package/translations/translations.js +55 -0
- package/_code-generator/form-code-generator.d.ts +0 -16
- package/_code-generator/form-code-generator.js +0 -69
- package/avatar-file-input/avatar-file-input.d.ts +0 -14
- package/avatar-file-input/avatar-file-input.js +0 -38
- package/avatar-file-input/avatar-file-input.stories.d.ts +0 -8
- package/avatar-file-input/avatar-file-input.stories.js +0 -23
- package/avatar-file-input/index.d.ts +0 -1
- package/avatar-file-input/index.js +0 -17
- package/bin/form-code-generator.d.ts +0 -2
- package/bin/form-code-generator.js +0 -55
- package/checkbox-button/checkbox-button.d.ts +0 -14
- package/checkbox-button/checkbox-button.js +0 -38
- package/checkbox-button/checkbox-button.stories.d.ts +0 -8
- package/checkbox-button/checkbox-button.stories.js +0 -24
- package/checkbox-button/index.d.ts +0 -1
- package/checkbox-button/index.js +0 -17
- package/checkbox-input/checkbox-input.d.ts +0 -14
- package/checkbox-input/checkbox-input.js +0 -38
- package/checkbox-input/checkbox-input.stories.d.ts +0 -8
- package/checkbox-input/checkbox-input.stories.js +0 -24
- package/checkbox-input/index.d.ts +0 -1
- package/checkbox-input/index.js +0 -17
- package/checkbox-list/checkbox-list.d.ts +0 -19
- package/checkbox-list/checkbox-list.js +0 -36
- package/checkbox-list/checkbox-list.stories.d.ts +0 -2
- package/checkbox-list/checkbox-list.stories.js +0 -22
- package/checkbox-list/index.d.ts +0 -1
- package/checkbox-list/index.js +0 -17
- package/color-radio-group/color-radio-group.d.ts +0 -13
- package/color-radio-group/color-radio-group.js +0 -38
- package/color-radio-group/color-radio-group.stories.d.ts +0 -8
- package/color-radio-group/color-radio-group.stories.js +0 -62
- package/color-radio-group/index.d.ts +0 -1
- package/color-radio-group/index.js +0 -17
- package/combobox/combobox.d.ts +0 -13
- package/combobox/combobox.js +0 -44
- package/combobox/combobox.stories.d.ts +0 -8
- package/combobox/combobox.stories.js +0 -30
- package/combobox/index.d.ts +0 -1
- package/combobox/index.js +0 -17
- package/components.d.ts +0 -127
- package/components.js +0 -154
- package/date-picker-input/date-picker-input.d.ts +0 -15
- package/date-picker-input/date-picker-input.js +0 -89
- package/date-picker-input/date-picker-input.stories.d.ts +0 -8
- package/date-picker-input/date-picker-input.stories.js +0 -31
- package/date-picker-input/index.d.ts +0 -1
- package/date-picker-input/index.js +0 -17
- package/date-range-picker-input/date-range-picker-input.d.ts +0 -12
- package/date-range-picker-input/date-range-picker-input.js +0 -106
- package/date-range-picker-input/date-range-picker-input.stories.d.ts +0 -8
- package/date-range-picker-input/date-range-picker-input.stories.js +0 -25
- package/date-range-picker-input/index.d.ts +0 -1
- package/date-range-picker-input/index.js +0 -17
- package/datetime-picker-input/datetime-picker-input.d.ts +0 -15
- package/datetime-picker-input/datetime-picker-input.js +0 -90
- package/datetime-picker-input/datetime-picker-input.stories.d.ts +0 -2
- package/datetime-picker-input/datetime-picker-input.stories.js +0 -28
- package/datetime-picker-input/index.d.ts +0 -1
- package/datetime-picker-input/index.js +0 -17
- package/dropzone/dropzone-input.d.ts +0 -13
- package/dropzone/dropzone-input.js +0 -59
- package/dropzone/dropzone-list.d.ts +0 -11
- package/dropzone/dropzone-list.js +0 -23
- package/dropzone/dropzone.stories.d.ts +0 -2
- package/dropzone/dropzone.stories.js +0 -50
- package/dropzone/index.d.ts +0 -9
- package/dropzone/index.js +0 -6
- package/file-input/file-input.d.ts +0 -14
- package/file-input/file-input.js +0 -38
- package/file-input/file-input.stories.d.ts +0 -8
- package/file-input/file-input.stories.js +0 -31
- package/file-input/index.d.ts +0 -1
- package/file-input/index.js +0 -17
- package/form/form.d.ts +0 -19
- package/form/form.js +0 -25
- package/form/form.stories.d.ts +0 -8
- package/form/form.stories.js +0 -24
- package/form/index.d.ts +0 -1
- package/form/index.js +0 -17
- package/form-id-context/form-context.d.ts +0 -7
- package/form-id-context/form-context.js +0 -12
- package/form-id-context/form-id-context.d.ts +0 -2
- package/form-id-context/form-id-context.js +0 -7
- package/form-id-context/index.d.ts +0 -1
- package/form-id-context/index.js +0 -17
- package/form-renderer/big-test-schema.d.ts +0 -33
- package/form-renderer/big-test-schema.js +0 -295
- package/form-renderer/field/base-field.d.ts +0 -4
- package/form-renderer/field/base-field.js +0 -70
- package/form-renderer/field/embedded.d.ts +0 -4
- package/form-renderer/field/embedded.js +0 -19
- package/form-renderer/field/one-to-many.d.ts +0 -4
- package/form-renderer/field/one-to-many.js +0 -50
- package/form-renderer/form-renderer.d.ts +0 -16
- package/form-renderer/form-renderer.js +0 -26
- package/form-renderer/form-renderer.stories.d.ts +0 -2
- package/form-renderer/form-renderer.stories.js +0 -23
- package/form-renderer/index.d.ts +0 -2
- package/form-renderer/index.js +0 -18
- package/form-renderer/mapper.d.ts +0 -2
- package/form-renderer/mapper.js +0 -30
- package/form-renderer/types.d.ts +0 -39
- package/form-renderer/types.js +0 -2
- package/gps-input/gps-input.d.ts +0 -20
- package/gps-input/gps-input.js +0 -154
- package/gps-input/gps-input.stories.d.ts +0 -8
- package/gps-input/gps-input.stories.js +0 -22
- package/gps-input/index.d.ts +0 -1
- package/gps-input/index.js +0 -17
- package/money-input/index.d.ts +0 -1
- package/money-input/index.js +0 -17
- package/money-input/money-input.d.ts +0 -24
- package/money-input/money-input.js +0 -108
- package/money-input/money-input.stories.d.ts +0 -2
- package/money-input/money-input.stories.js +0 -15
- package/multi-combobox/index.d.ts +0 -1
- package/multi-combobox/index.js +0 -17
- package/multi-combobox/multi-combobox.d.ts +0 -13
- package/multi-combobox/multi-combobox.js +0 -44
- package/multi-combobox/multi-combobox.stories.d.ts +0 -8
- package/multi-combobox/multi-combobox.stories.js +0 -54
- package/multi-select/index.d.ts +0 -1
- package/multi-select/index.js +0 -17
- package/multi-select/multi-select.d.ts +0 -13
- package/multi-select/multi-select.js +0 -39
- package/multi-select/multi-select.stories.d.ts +0 -8
- package/multi-select/multi-select.stories.js +0 -47
- package/number-input/index.d.ts +0 -1
- package/number-input/index.js +0 -17
- package/number-input/number-input.d.ts +0 -17
- package/number-input/number-input.js +0 -72
- package/number-input/number-input.stories.d.ts +0 -8
- package/number-input/number-input.stories.js +0 -24
- package/password-input/index.d.ts +0 -1
- package/password-input/index.js +0 -17
- package/password-input/password-input.d.ts +0 -15
- package/password-input/password-input.js +0 -93
- package/password-input/password-input.stories.d.ts +0 -8
- package/password-input/password-input.stories.js +0 -23
- package/radio-group/index.d.ts +0 -1
- package/radio-group/index.js +0 -17
- package/radio-group/radio-group.d.ts +0 -13
- package/radio-group/radio-group.js +0 -38
- package/radio-group/radio-group.stories.d.ts +0 -8
- package/radio-group/radio-group.stories.js +0 -38
- package/readmes.d.ts +0 -28
- package/readmes.js +0 -59
- package/select/index.d.ts +0 -1
- package/select/index.js +0 -17
- package/select/select.d.ts +0 -13
- package/select/select.js +0 -39
- package/select/select.stories.d.ts +0 -8
- package/select/select.stories.js +0 -44
- package/storybook/form-data-printer.d.ts +0 -6
- package/storybook/form-data-printer.js +0 -12
- package/storybook/storybook-form.d.ts +0 -8
- package/storybook/storybook-form.js +0 -42
- package/text-input/index.d.ts +0 -1
- package/text-input/index.js +0 -17
- package/text-input/text-input.d.ts +0 -33
- package/text-input/text-input.js +0 -57
- package/text-input/text-input.stories.d.ts +0 -8
- package/text-input/text-input.stories.js +0 -26
- package/textarea/index.d.ts +0 -1
- package/textarea/index.js +0 -17
- package/textarea/textarea.d.ts +0 -13
- package/textarea/textarea.js +0 -58
- package/textarea/textarea.stories.d.ts +0 -8
- package/textarea/textarea.stories.js +0 -22
- package/time-picker-input/index.d.ts +0 -1
- package/time-picker-input/index.js +0 -17
- package/time-picker-input/time-picker-input.d.ts +0 -14
- package/time-picker-input/time-picker-input.js +0 -77
- package/time-picker-input/time-picker-input.stories.d.ts +0 -8
- package/time-picker-input/time-picker-input.stories.js +0 -25
- package/toggle/index.d.ts +0 -1
- package/toggle/index.js +0 -17
- package/toggle/toggle.d.ts +0 -14
- package/toggle/toggle.js +0 -38
- package/toggle/toggle.stories.d.ts +0 -8
- package/toggle/toggle.stories.js +0 -23
- package/types.d.ts +0 -4
- package/types.js +0 -2
package/form-renderer/types.d.ts
DELETED
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { Autocomplete } from "@uxf/core/api/autocomplete";
|
|
2
|
-
import { OnUploadFileHandler } from "@uxf/core/types";
|
|
3
|
-
import { DropzoneFile } from "@uxf/ui/dropzone/types";
|
|
4
|
-
import { FunctionComponent } from "react";
|
|
5
|
-
import { Control } from "react-hook-form";
|
|
6
|
-
export interface FieldSchema {
|
|
7
|
-
autocomplete: string | null;
|
|
8
|
-
name: string;
|
|
9
|
-
type: string;
|
|
10
|
-
label: string;
|
|
11
|
-
required: boolean;
|
|
12
|
-
readOnly: boolean;
|
|
13
|
-
editable: boolean;
|
|
14
|
-
fields: FieldSchema[];
|
|
15
|
-
options: Array<{
|
|
16
|
-
id: string | number;
|
|
17
|
-
label: string;
|
|
18
|
-
}> | null;
|
|
19
|
-
}
|
|
20
|
-
export interface FormSchema {
|
|
21
|
-
fields: FieldSchema[];
|
|
22
|
-
}
|
|
23
|
-
export interface FieldProps {
|
|
24
|
-
fieldSchema: FieldSchema;
|
|
25
|
-
fields: FormRendererFields;
|
|
26
|
-
isEditing?: boolean;
|
|
27
|
-
prefix?: string;
|
|
28
|
-
control: Control<any>;
|
|
29
|
-
overrides?: {
|
|
30
|
-
autocomplete?: Autocomplete;
|
|
31
|
-
upload?: OnUploadFileHandler;
|
|
32
|
-
onRemoveConfirm?: (file: DropzoneFile) => Promise<boolean>;
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
export type FieldComponent = FunctionComponent<FieldProps>;
|
|
36
|
-
export type FormRendererFields = {
|
|
37
|
-
[type: string]: FieldComponent;
|
|
38
|
-
default: FieldComponent;
|
|
39
|
-
};
|
package/form-renderer/types.js
DELETED
package/gps-input/gps-input.d.ts
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { TextInputProps as UITextInputProps } from "@uxf/ui/text-input";
|
|
2
|
-
import { FormControlProps } from "@uxf/ui/types";
|
|
3
|
-
import React from "react";
|
|
4
|
-
import { FieldValues } from "react-hook-form";
|
|
5
|
-
import { ControlProps } from "../types";
|
|
6
|
-
export type Gps = {
|
|
7
|
-
lat: number;
|
|
8
|
-
lng: number;
|
|
9
|
-
};
|
|
10
|
-
type OnChangeHandler = FormControlProps<string>["onChange"];
|
|
11
|
-
export type GpsInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UITextInputProps, "isFocused" | "isInvalid" | "max" | "min" | "name" | "onChange" | "pattern" | "step" | "value" | "type"> & {
|
|
12
|
-
onChange?: OnChangeHandler;
|
|
13
|
-
requiredMessage?: string;
|
|
14
|
-
};
|
|
15
|
-
export type GpsInputValue = Gps;
|
|
16
|
-
export declare function GpsInput<FormData extends Record<string, Gps | null | undefined>>(props: GpsInputProps<FormData>): React.JSX.Element;
|
|
17
|
-
export declare namespace GpsInput {
|
|
18
|
-
var displayName: string;
|
|
19
|
-
}
|
|
20
|
-
export {};
|
package/gps-input/gps-input.js
DELETED
|
@@ -1,154 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
"use client";
|
|
3
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
4
|
-
if (k2 === undefined) k2 = k;
|
|
5
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
8
|
-
}
|
|
9
|
-
Object.defineProperty(o, k2, desc);
|
|
10
|
-
}) : (function(o, m, k, k2) {
|
|
11
|
-
if (k2 === undefined) k2 = k;
|
|
12
|
-
o[k2] = m[k];
|
|
13
|
-
}));
|
|
14
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
15
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
16
|
-
}) : function(o, v) {
|
|
17
|
-
o["default"] = v;
|
|
18
|
-
});
|
|
19
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
20
|
-
if (mod && mod.__esModule) return mod;
|
|
21
|
-
var result = {};
|
|
22
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
23
|
-
__setModuleDefault(result, mod);
|
|
24
|
-
return result;
|
|
25
|
-
};
|
|
26
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
27
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
28
|
-
};
|
|
29
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
|
-
exports.GpsInput = GpsInput;
|
|
31
|
-
const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
|
|
32
|
-
const text_input_1 = require("@uxf/ui/text-input");
|
|
33
|
-
const tooltip_1 = require("@uxf/ui/tooltip");
|
|
34
|
-
const coordinate_parser_1 = __importDefault(require("coordinate-parser"));
|
|
35
|
-
const react_1 = __importStar(require("react"));
|
|
36
|
-
const react_hook_form_1 = require("react-hook-form");
|
|
37
|
-
const form_context_1 = require("../form-id-context/form-context");
|
|
38
|
-
const SUPPORTED_FORMATS = (react_1.default.createElement("div", null,
|
|
39
|
-
"40.123, -74.123",
|
|
40
|
-
react_1.default.createElement("br", null),
|
|
41
|
-
"40.123\u00B0 N 74.123\u00B0 W",
|
|
42
|
-
react_1.default.createElement("br", null),
|
|
43
|
-
"40\u00B0 7\u00B4 22.8\" N 74\u00B0 7\u00B4 22.8\" W",
|
|
44
|
-
react_1.default.createElement("br", null),
|
|
45
|
-
"40\u00B0 7.38\u2019 , -74\u00B0 7.38\u2019",
|
|
46
|
-
react_1.default.createElement("br", null),
|
|
47
|
-
"N40\u00B07\u201922.8, W74\u00B07\u201922.8\"",
|
|
48
|
-
react_1.default.createElement("br", null),
|
|
49
|
-
"40\u00B07\u201922.8\"N, 74\u00B07\u201922.8\"W",
|
|
50
|
-
react_1.default.createElement("br", null),
|
|
51
|
-
"40 7 22.8, -74 7 22.8",
|
|
52
|
-
react_1.default.createElement("br", null),
|
|
53
|
-
"40.123 -74.123",
|
|
54
|
-
react_1.default.createElement("br", null),
|
|
55
|
-
"40.123\u00B0,-74.123\u00B0",
|
|
56
|
-
react_1.default.createElement("br", null),
|
|
57
|
-
"144442800, -266842800",
|
|
58
|
-
react_1.default.createElement("br", null),
|
|
59
|
-
"40.123N74.123W",
|
|
60
|
-
react_1.default.createElement("br", null),
|
|
61
|
-
"4007.38N7407.38W",
|
|
62
|
-
react_1.default.createElement("br", null),
|
|
63
|
-
"40\u00B07\u201922.8\"N, 74\u00B07\u201922.8\"W",
|
|
64
|
-
react_1.default.createElement("br", null),
|
|
65
|
-
"400722.8N740722.8W",
|
|
66
|
-
react_1.default.createElement("br", null),
|
|
67
|
-
"N 40 7.38 W 74 7.38",
|
|
68
|
-
react_1.default.createElement("br", null),
|
|
69
|
-
"40:7:23N,74:7:23W",
|
|
70
|
-
react_1.default.createElement("br", null),
|
|
71
|
-
"40:7:22.8N 74:7:22.8W",
|
|
72
|
-
react_1.default.createElement("br", null),
|
|
73
|
-
"40\u00B07\u201923\"N 74\u00B07\u201923\"W",
|
|
74
|
-
react_1.default.createElement("br", null),
|
|
75
|
-
"40\u00B07\u201923\" -74\u00B07\u201923\"",
|
|
76
|
-
react_1.default.createElement("br", null),
|
|
77
|
-
"40d 7\u2019 23\" N 74d 7\u2019 23\" W",
|
|
78
|
-
react_1.default.createElement("br", null),
|
|
79
|
-
"40.123N 74.123W",
|
|
80
|
-
react_1.default.createElement("br", null),
|
|
81
|
-
"40\u00B0 7.38, -74\u00B0 7.38",
|
|
82
|
-
react_1.default.createElement("br", null)));
|
|
83
|
-
const SUPPORTED_FORMATS_TOOLTIP = (react_1.default.createElement("span", { className: "text-lightMedium" },
|
|
84
|
-
"(",
|
|
85
|
-
react_1.default.createElement(tooltip_1.Tooltip, { content: SUPPORTED_FORMATS },
|
|
86
|
-
react_1.default.createElement("span", { className: "underline" }, "podporovan\u00E9 form\u00E1ty")),
|
|
87
|
-
")"));
|
|
88
|
-
const EMPTY_HELPER_TEXT = "Zadejte souřadnice.";
|
|
89
|
-
const NOT_VALID_HELPER_TEXT = "Souřadnice nejsou validní";
|
|
90
|
-
function GpsInput(props) {
|
|
91
|
-
var _a, _b;
|
|
92
|
-
const formContext = (0, form_context_1.useFormContext)();
|
|
93
|
-
const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formContext.formId}__${props.name}`;
|
|
94
|
-
const [visualValue, setVisualValue] = (0, react_1.useState)("");
|
|
95
|
-
const [coordsFormatError, setCoordsFormatError] = (0, react_1.useState)(false);
|
|
96
|
-
const { field, fieldState } = (0, react_hook_form_1.useController)({
|
|
97
|
-
control: props.control,
|
|
98
|
-
name: props.name,
|
|
99
|
-
rules: {
|
|
100
|
-
...props.rules,
|
|
101
|
-
validate: {
|
|
102
|
-
...(_b = props.rules) === null || _b === void 0 ? void 0 : _b.validate,
|
|
103
|
-
req: (value) => {
|
|
104
|
-
var _a;
|
|
105
|
-
return props.isRequired && value === undefined
|
|
106
|
-
? ((_a = props.requiredMessage) !== null && _a !== void 0 ? _a : "Toto pole je povinné")
|
|
107
|
-
: undefined;
|
|
108
|
-
},
|
|
109
|
-
format: (value) => {
|
|
110
|
-
return value === null ? NOT_VALID_HELPER_TEXT : undefined;
|
|
111
|
-
},
|
|
112
|
-
},
|
|
113
|
-
},
|
|
114
|
-
shouldUnregister: props.shouldUnregister,
|
|
115
|
-
});
|
|
116
|
-
(0, react_1.useEffect)(() => {
|
|
117
|
-
if (field.value && visualValue === "") {
|
|
118
|
-
setVisualValue(`${field.value.lat}N, ${field.value.lng}E`);
|
|
119
|
-
}
|
|
120
|
-
}, [field.value, visualValue]);
|
|
121
|
-
const onBlur = (event) => {
|
|
122
|
-
var _a;
|
|
123
|
-
field.onBlur();
|
|
124
|
-
(_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
|
|
125
|
-
};
|
|
126
|
-
const onChange = (value, event) => {
|
|
127
|
-
var _a, _b;
|
|
128
|
-
setVisualValue(value);
|
|
129
|
-
try {
|
|
130
|
-
const coords = new coordinate_parser_1.default(value);
|
|
131
|
-
setCoordsFormatError(false);
|
|
132
|
-
field.onChange({ lat: coords.getLatitude(), lng: coords.getLongitude() });
|
|
133
|
-
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
|
|
134
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
135
|
-
}
|
|
136
|
-
catch (e) {
|
|
137
|
-
setCoordsFormatError(true);
|
|
138
|
-
field.onChange(null);
|
|
139
|
-
(_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, value, event);
|
|
140
|
-
}
|
|
141
|
-
};
|
|
142
|
-
const composedHelperText = (react_1.default.createElement(react_1.default.Fragment, null,
|
|
143
|
-
fieldState.error && !coordsFormatError && !field.value
|
|
144
|
-
? `${fieldState.error.message}`
|
|
145
|
-
: field.value
|
|
146
|
-
? `${field.value.lat}N, ${field.value.lng}E`
|
|
147
|
-
: visualValue
|
|
148
|
-
? NOT_VALID_HELPER_TEXT
|
|
149
|
-
: EMPTY_HELPER_TEXT,
|
|
150
|
-
" ",
|
|
151
|
-
SUPPORTED_FORMATS_TOOLTIP));
|
|
152
|
-
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: composedHelperText, hiddenLabel: props.hiddenLabel, id: id, inputMode: props.inputMode, isDisabled: formContext.isFormDisabled || props.isDisabled, isInvalid: ((0, is_not_nil_1.isNotNil)(fieldState.error) && !field.value) || coordsFormatError, isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, maxLength: props.maxLength, minLength: props.minLength, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: props.onKeyDown, placeholder: props.placeholder, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, style: props.style, type: "text", value: visualValue, variant: props.variant }));
|
|
153
|
-
}
|
|
154
|
-
GpsInput.displayName = "UxfFormGpsInput";
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Default = Default;
|
|
7
|
-
const button_1 = require("@uxf/ui/button");
|
|
8
|
-
const react_1 = __importDefault(require("react"));
|
|
9
|
-
const storybook_form_1 = require("../storybook/storybook-form");
|
|
10
|
-
const gps_input_1 = require("./gps-input");
|
|
11
|
-
exports.default = {
|
|
12
|
-
title: "Form/GpsInput",
|
|
13
|
-
component: gps_input_1.GpsInput,
|
|
14
|
-
};
|
|
15
|
-
function Default() {
|
|
16
|
-
const storyFormGpsInputs = (control) => (react_1.default.createElement("div", { className: "space-y-4" },
|
|
17
|
-
react_1.default.createElement(gps_input_1.GpsInput, { control: control, label: "GPS", name: "gps", placeholder: "Zadejte sou\u0159adnice..." }),
|
|
18
|
-
react_1.default.createElement(gps_input_1.GpsInput, { control: control, isRequired: true, label: "GPS", name: "gps-required", placeholder: "Zadejte sou\u0159adnice..." }),
|
|
19
|
-
react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));
|
|
20
|
-
return (react_1.default.createElement(storybook_form_1.StorybookForm, null, ({ control }) => (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
|
|
21
|
-
react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormGpsInputs(control))))));
|
|
22
|
-
}
|
package/gps-input/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./gps-input";
|
package/gps-input/index.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("./gps-input"), exports);
|
package/money-input/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./money-input";
|
package/money-input/index.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("./money-input"), exports);
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { Currency, Money } from "@uxf/core/money";
|
|
2
|
-
import { FormControlProps } from "@uxf/ui/types";
|
|
3
|
-
import React, { ReactNode } from "react";
|
|
4
|
-
import { FieldValues } from "react-hook-form";
|
|
5
|
-
import { ControlProps } from "../types";
|
|
6
|
-
export type MoneyInputValue = Money | null;
|
|
7
|
-
export type MoneyInputProps<FormData extends FieldValues> = Omit<ControlProps<FormData>, "defaultValue"> & Omit<FormControlProps<MoneyInputValue>, "value" | "onChange"> & {
|
|
8
|
-
defaultCurrency?: Currency;
|
|
9
|
-
id?: string;
|
|
10
|
-
label?: string;
|
|
11
|
-
leftAddon?: ReactNode;
|
|
12
|
-
leftElement?: ReactNode;
|
|
13
|
-
max?: number;
|
|
14
|
-
maxMessage?: (value: MoneyInputValue) => string;
|
|
15
|
-
min?: number;
|
|
16
|
-
minMessage?: (value: MoneyInputValue) => string;
|
|
17
|
-
onChange?: FormControlProps<MoneyInputValue>["onChange"];
|
|
18
|
-
requiredMessage?: string;
|
|
19
|
-
rightAddon?: ReactNode;
|
|
20
|
-
};
|
|
21
|
-
export declare function MoneyInput<FormData extends FieldValues>(props: MoneyInputProps<FormData>): React.JSX.Element;
|
|
22
|
-
export declare namespace MoneyInput {
|
|
23
|
-
var displayName: string;
|
|
24
|
-
}
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.MoneyInput = MoneyInput;
|
|
27
|
-
const currencies_1 = require("@uxf/core/money/currencies");
|
|
28
|
-
const is_empty_1 = require("@uxf/core/utils/is-empty");
|
|
29
|
-
const is_nil_1 = require("@uxf/core/utils/is-nil");
|
|
30
|
-
const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
|
|
31
|
-
const form_context_1 = require("@uxf/form/form-id-context/form-context");
|
|
32
|
-
const text_input_1 = require("@uxf/ui/text-input");
|
|
33
|
-
const react_1 = __importStar(require("react"));
|
|
34
|
-
const react_hook_form_1 = require("react-hook-form");
|
|
35
|
-
const SPECIAL_KEYS = ["Backspace", "Delete", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Tab"];
|
|
36
|
-
// Allow keys for copy/paste/select/cut
|
|
37
|
-
const CONTROL_KEYS = ["v", "V", "c", "C", "x", "X", "a", "A"];
|
|
38
|
-
// Allow digits and decimal point (.,)
|
|
39
|
-
const ALLOWED_KEYS = /[0-9+\-.,]/;
|
|
40
|
-
function MoneyInput(props) {
|
|
41
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
42
|
-
const formContext = (0, form_context_1.useFormContext)();
|
|
43
|
-
const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formContext.formId}__${props.name}`;
|
|
44
|
-
const { field, fieldState } = (0, react_hook_form_1.useController)({
|
|
45
|
-
control: props.control,
|
|
46
|
-
name: props.name,
|
|
47
|
-
rules: {
|
|
48
|
-
required: props.isRequired ? props.requiredMessage || "Toto pole je povinné" : undefined,
|
|
49
|
-
validate: {
|
|
50
|
-
validMinNumber: (value) => {
|
|
51
|
-
if (!value) {
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
if (typeof props.min === "number" && !isNaN(props.min) && value.amount < props.min) {
|
|
55
|
-
return props.minMessage
|
|
56
|
-
? props.minMessage(value)
|
|
57
|
-
: `Hodnota musí být větší nebo rovna ${props.min}.`;
|
|
58
|
-
}
|
|
59
|
-
},
|
|
60
|
-
validMaxNumber: (value) => {
|
|
61
|
-
if (!value) {
|
|
62
|
-
return;
|
|
63
|
-
}
|
|
64
|
-
if (typeof props.max === "number" && !isNaN(props.max) && value.amount > props.max) {
|
|
65
|
-
return props.maxMessage
|
|
66
|
-
? props.maxMessage(value)
|
|
67
|
-
: `Hodnota musí být menší nebo rovna ${props.max}.`;
|
|
68
|
-
}
|
|
69
|
-
},
|
|
70
|
-
...(typeof ((_b = props.rules) === null || _b === void 0 ? void 0 : _b.validate) === "function"
|
|
71
|
-
? { custom: props.rules.validate }
|
|
72
|
-
: (_c = props.rules) === null || _c === void 0 ? void 0 : _c.validate),
|
|
73
|
-
},
|
|
74
|
-
...props.rules,
|
|
75
|
-
},
|
|
76
|
-
shouldUnregister: props.shouldUnregister,
|
|
77
|
-
});
|
|
78
|
-
const [lastCurrency, setLastCurrency] = (0, react_1.useState)((_f = (_e = (_d = field.value) === null || _d === void 0 ? void 0 : _d.currency) !== null && _e !== void 0 ? _e : props.defaultCurrency) !== null && _f !== void 0 ? _f : "CZK");
|
|
79
|
-
(0, react_1.useEffect)(() => {
|
|
80
|
-
var _a;
|
|
81
|
-
if ((0, is_not_nil_1.isNotNil)(field.value) && ((_a = field.value) === null || _a === void 0 ? void 0 : _a.currency) !== lastCurrency) {
|
|
82
|
-
setLastCurrency(field.value.currency);
|
|
83
|
-
}
|
|
84
|
-
}, [field.value, lastCurrency]);
|
|
85
|
-
const keyDownHandler = (event) => {
|
|
86
|
-
const key = event.key;
|
|
87
|
-
// Check if the key is allowed
|
|
88
|
-
if (!SPECIAL_KEYS.includes(key) && !ALLOWED_KEYS.test(key)) {
|
|
89
|
-
// Check if Ctrl or Command key is pressed along with control key
|
|
90
|
-
if (!(event.ctrlKey || event.metaKey) || !CONTROL_KEYS.includes(key)) {
|
|
91
|
-
event.preventDefault();
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
};
|
|
95
|
-
const changeHandler = (value, event) => {
|
|
96
|
-
var _a, _b, _c;
|
|
97
|
-
const newValue = (0, is_nil_1.isNil)(value) || (0, is_empty_1.isEmpty)(value)
|
|
98
|
-
? null
|
|
99
|
-
: {
|
|
100
|
-
amount: value,
|
|
101
|
-
currency: (_b = (_a = field.value) === null || _a === void 0 ? void 0 : _a.currency) !== null && _b !== void 0 ? _b : lastCurrency,
|
|
102
|
-
};
|
|
103
|
-
field.onChange(newValue);
|
|
104
|
-
(_c = props.onChange) === null || _c === void 0 ? void 0 : _c.call(props, newValue, event);
|
|
105
|
-
};
|
|
106
|
-
return (react_1.default.createElement(text_input_1.TextInput, { className: "uxf-money-input uxf-input--no-spin-buttons", helperText: (_g = fieldState.error) === null || _g === void 0 ? void 0 : _g.message, id: id, inputMode: "decimal", isDisabled: formContext.isFormDisabled || props.isDisabled, isInvalid: Boolean(fieldState.error), isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: field.name, onChange: changeHandler, onKeyDown: keyDownHandler, ref: field.ref, rightAddon: props.rightAddon, rightElement: currencies_1.currencies[(_j = (_h = field.value) === null || _h === void 0 ? void 0 : _h.currency) !== null && _j !== void 0 ? _j : lastCurrency].symbol, step: 2, type: "number", value: (_l = (_k = field.value) === null || _k === void 0 ? void 0 : _k.amount) !== null && _l !== void 0 ? _l : "" }));
|
|
107
|
-
}
|
|
108
|
-
MoneyInput.displayName = "UxfFormMoneyInput";
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Default = Default;
|
|
7
|
-
const react_1 = __importDefault(require("react"));
|
|
8
|
-
const storybook_form_1 = require("../storybook/storybook-form");
|
|
9
|
-
const money_input_1 = require("./money-input");
|
|
10
|
-
function Default() {
|
|
11
|
-
return (react_1.default.createElement(storybook_form_1.StorybookForm, { className: "space-y-4 p-4", defaultValues: { "default-value": { amount: "100", currency: "USD" } } }, ({ control }) => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
12
|
-
react_1.default.createElement(money_input_1.MoneyInput, { control: control, label: "Default money input min100 max200", max: 200, min: 100, name: "default" }),
|
|
13
|
-
react_1.default.createElement(money_input_1.MoneyInput, { control: control, defaultCurrency: "EUR", label: "Money input with default currency", name: "default-currency" }),
|
|
14
|
-
react_1.default.createElement(money_input_1.MoneyInput, { control: control, label: "Money input with default value", name: "default-value" })))));
|
|
15
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./multi-combobox";
|
package/multi-combobox/index.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("./multi-combobox"), exports);
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { MultiComboboxOption, MultiComboboxProps as UIMultiComboboxProps } from "@uxf/ui/multi-combobox";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import { FieldValues } from "react-hook-form";
|
|
4
|
-
import { ControlProps } from "../types";
|
|
5
|
-
export type ComboProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIMultiComboboxProps, "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & {
|
|
6
|
-
onChange?: UIMultiComboboxProps["onChange"];
|
|
7
|
-
requiredMessage?: string;
|
|
8
|
-
};
|
|
9
|
-
export type MultiComboboxValue<Id> = MultiComboboxOption<Id>[] | null;
|
|
10
|
-
export declare function MultiCombobox<FormData extends Record<string, any>>(props: ComboProps<FormData>): React.JSX.Element;
|
|
11
|
-
export declare namespace MultiCombobox {
|
|
12
|
-
var displayName: string;
|
|
13
|
-
}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
"use client";
|
|
3
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
5
|
-
};
|
|
6
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
-
exports.MultiCombobox = MultiCombobox;
|
|
8
|
-
const empty_array_1 = require("@uxf/core/constants/empty-array");
|
|
9
|
-
const is_empty_1 = require("@uxf/core/utils/is-empty");
|
|
10
|
-
const is_nil_1 = require("@uxf/core/utils/is-nil");
|
|
11
|
-
const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
|
|
12
|
-
const multi_combobox_1 = require("@uxf/ui/multi-combobox");
|
|
13
|
-
const react_1 = __importDefault(require("react"));
|
|
14
|
-
const react_hook_form_1 = require("react-hook-form");
|
|
15
|
-
const form_context_1 = require("../form-id-context/form-context");
|
|
16
|
-
function MultiCombobox(props) {
|
|
17
|
-
var _a, _b, _c, _d;
|
|
18
|
-
const formContext = (0, form_context_1.useFormContext)();
|
|
19
|
-
const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formContext.formId}__${props.name}`;
|
|
20
|
-
const { field, fieldState } = (0, react_hook_form_1.useController)({
|
|
21
|
-
control: props.control,
|
|
22
|
-
name: props.name,
|
|
23
|
-
rules: {
|
|
24
|
-
required: props.isRequired ? props.requiredMessage || "Toto pole je povinné" : undefined,
|
|
25
|
-
...props.rules,
|
|
26
|
-
},
|
|
27
|
-
shouldUnregister: props.shouldUnregister,
|
|
28
|
-
});
|
|
29
|
-
const onBlur = (event) => {
|
|
30
|
-
var _a;
|
|
31
|
-
field.onBlur();
|
|
32
|
-
(_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
|
|
33
|
-
};
|
|
34
|
-
const onChange = (value, event) => {
|
|
35
|
-
var _a;
|
|
36
|
-
field.onChange(value);
|
|
37
|
-
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
|
|
38
|
-
};
|
|
39
|
-
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)) ||
|
|
40
|
-
formContext.isFormDisabled ||
|
|
41
|
-
props.isDisabled;
|
|
42
|
-
return (react_1.default.createElement(multi_combobox_1.MultiCombobox, { allOptionsSelectedMessage: props.allOptionsSelectedMessage, 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, isDisabled: isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, 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, ref: field.ref, renderOption: props.renderOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, style: props.style, value: field.value, variant: props.variant, withCheckboxes: props.withCheckboxes }));
|
|
43
|
-
}
|
|
44
|
-
MultiCombobox.displayName = "UxfFormMultiCombobox";
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Default = Default;
|
|
7
|
-
const button_1 = require("@uxf/ui/button");
|
|
8
|
-
const react_1 = __importDefault(require("react"));
|
|
9
|
-
const storybook_form_1 = require("../storybook/storybook-form");
|
|
10
|
-
const multi_combobox_1 = require("./multi-combobox");
|
|
11
|
-
exports.default = {
|
|
12
|
-
title: "Form/MultiCombobox",
|
|
13
|
-
component: multi_combobox_1.MultiCombobox,
|
|
14
|
-
};
|
|
15
|
-
const options = [
|
|
16
|
-
{ id: "one", label: "Option one", color: "red" },
|
|
17
|
-
{ id: "two", label: "Option two disabled", color: "blue", disabled: true },
|
|
18
|
-
{ id: "three", label: "Option three", color: "green" },
|
|
19
|
-
{ id: "four", label: "Option four disabled", disabled: true },
|
|
20
|
-
{ id: "five", label: "Option five" },
|
|
21
|
-
{ id: "six", label: "Option six" },
|
|
22
|
-
{ id: "seven", label: "Option seven" },
|
|
23
|
-
{ id: "eight", label: "Option eight" },
|
|
24
|
-
{ id: "nine", label: "Option nine" },
|
|
25
|
-
{ id: "ten", label: "Option ten" },
|
|
26
|
-
{ id: "twelve", label: "Option twelve" },
|
|
27
|
-
{ id: "thirteen", label: "Option thirteen" },
|
|
28
|
-
];
|
|
29
|
-
function Default() {
|
|
30
|
-
const storyFormComboboxes = (control) => (react_1.default.createElement("div", { className: "space-y-8" },
|
|
31
|
-
react_1.default.createElement(multi_combobox_1.MultiCombobox, { control: control, dropdownMaxHeight: 350, helperText: "Za\u010Dn\u011Bte ps\u00E1t pro vyhled\u00E1v\u00E1n\u00ED...", id: "form-combobox", label: "Combobox form", name: "combobox1", options: options, placeholder: "Vyberte..." }),
|
|
32
|
-
react_1.default.createElement(multi_combobox_1.MultiCombobox, { control: control, helperText: "Za\u010Dn\u011Bte ps\u00E1t pro vyhled\u00E1v\u00E1n\u00ED...", id: "form-combobox", label: "Combobox with checkboxes", name: "combobox-with-checkboxes", options: options, placeholder: "Vyberte...", withCheckboxes: true }),
|
|
33
|
-
react_1.default.createElement(multi_combobox_1.MultiCombobox, { 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: "Vyberte..." }),
|
|
34
|
-
react_1.default.createElement(multi_combobox_1.MultiCombobox, { control: control, id: "form-combobox", isDisabled: true, label: "Combobox form disabled", name: "combobox-disabled", options: options, placeholder: "Vyberte..." }),
|
|
35
|
-
react_1.default.createElement(multi_combobox_1.MultiCombobox, { control: control, dropdownPlacement: "top", id: "form-combobox", label: "Combobox form with dropdown top", name: "select-dropdown-top", options: options, placeholder: "Vyberte..." }),
|
|
36
|
-
react_1.default.createElement(multi_combobox_1.MultiCombobox, { control: control, dropdownPlacement: "top", id: "form-combobox", label: "Combobox async", loadOptions: (query) => Promise.resolve(options.filter((option) => !query || option.label.toLowerCase().includes(query.toLowerCase()))), name: "select-dropdown-async", placeholder: "Vyberte..." }),
|
|
37
|
-
react_1.default.createElement(multi_combobox_1.MultiCombobox, { control: control, dropdownPlacement: "top", id: "form-combobox", label: "Combobox async with default values", loadOptions: (query) => Promise.resolve(options.filter((option) => !query || option.label.toLowerCase().includes(query.toLowerCase()))), name: "select-dropdown-async-default", placeholder: "Vyberte..." }),
|
|
38
|
-
react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));
|
|
39
|
-
return (react_1.default.createElement(storybook_form_1.StorybookForm, { defaultValues: {
|
|
40
|
-
combobox1: [
|
|
41
|
-
{ id: "one", label: "Option one" },
|
|
42
|
-
{ id: "two", label: "Option two" },
|
|
43
|
-
],
|
|
44
|
-
"combobox-with-checkboxes": [
|
|
45
|
-
{ id: "one", label: "Option one" },
|
|
46
|
-
{ id: "two", label: "Option two disabled", disabled: true },
|
|
47
|
-
],
|
|
48
|
-
"select-dropdown-async-default": [
|
|
49
|
-
{ id: "one", label: "Option one" },
|
|
50
|
-
{ id: "two", label: "Option two" },
|
|
51
|
-
],
|
|
52
|
-
} }, ({ control }) => (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
|
|
53
|
-
react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormComboboxes(control))))));
|
|
54
|
-
}
|
package/multi-select/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./multi-select";
|
package/multi-select/index.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("./multi-select"), exports);
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { MultiSelectOption, MultiSelectProps as UIMultiSelectProps } from "@uxf/ui/multi-select";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import { FieldValues } from "react-hook-form";
|
|
4
|
-
import { ControlProps } from "../types";
|
|
5
|
-
export type ComboProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIMultiSelectProps, "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & {
|
|
6
|
-
onChange?: UIMultiSelectProps["onChange"];
|
|
7
|
-
requiredMessage?: string;
|
|
8
|
-
};
|
|
9
|
-
export type MultiSelectValue<Id> = MultiSelectOption<Id>[] | null;
|
|
10
|
-
export declare function MultiSelect<FormData extends Record<string, any>>(props: ComboProps<FormData>): React.JSX.Element;
|
|
11
|
-
export declare namespace MultiSelect {
|
|
12
|
-
var displayName: string;
|
|
13
|
-
}
|