react-better-html 1.1.18 → 1.1.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Dropdown.d.ts +1 -1
- package/dist/components/Dropdown.js +2 -3
- package/dist/components/Form.d.ts +18 -0
- package/dist/components/Form.js +29 -0
- package/dist/components/InputField.d.ts +2 -2
- package/dist/components/InputField.js +2 -2
- package/dist/index.d.ts +3 -2
- package/dist/index.js +4 -1
- package/dist/utils/hooks.d.ts +19 -1
- package/dist/utils/hooks.js +83 -0
- package/package.json +1 -1
|
@@ -88,14 +88,13 @@ const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, err
|
|
|
88
88
|
}, [onChange, controlledValue]);
|
|
89
89
|
const onClickClearButton = (0, react_1.useCallback)((event) => {
|
|
90
90
|
event.stopPropagation();
|
|
91
|
-
|
|
92
|
-
setInternalValue(undefined);
|
|
91
|
+
setInternalValue(undefined);
|
|
93
92
|
onChange?.(undefined);
|
|
94
93
|
setIsOpen.setFalse();
|
|
95
94
|
inputRef.current?.blur();
|
|
96
95
|
setSearchQuery("");
|
|
97
96
|
setFocusedOptionIndex(undefined);
|
|
98
|
-
}, [
|
|
97
|
+
}, [onChange]);
|
|
99
98
|
const onChangeValue = (0, react_1.useCallback)((newValue) => {
|
|
100
99
|
setSearchQuery(newValue);
|
|
101
100
|
if (withDebounce)
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ComponentMarginProps } from "../types/components";
|
|
2
|
+
import { LoaderName } from "../types/loader";
|
|
3
|
+
import { AnyOtherString } from "../types/app";
|
|
4
|
+
type FormType = "default" | "submit" | "save" | "create" | "delete" | "update" | "edit";
|
|
5
|
+
type FormProps = {
|
|
6
|
+
/** @default "default" */
|
|
7
|
+
type?: FormType;
|
|
8
|
+
/** @default "right" */
|
|
9
|
+
actionButtonsLocation?: "left" | "center" | "right";
|
|
10
|
+
actionButtonLoaderName?: LoaderName | AnyOtherString;
|
|
11
|
+
gap?: React.CSSProperties["gap"];
|
|
12
|
+
onClickCancel?: () => void;
|
|
13
|
+
onSubmit?: (value: React.FormEvent<HTMLFormElement>) => void;
|
|
14
|
+
children?: React.ReactNode;
|
|
15
|
+
} & ComponentMarginProps;
|
|
16
|
+
declare function Form({ type, actionButtonsLocation, actionButtonLoaderName, gap, onClickCancel, onSubmit, children, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
declare const _default: import("react").MemoExoticComponent<typeof Form>;
|
|
18
|
+
export default _default;
|
|
@@ -0,0 +1,29 @@
|
|
|
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
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
|
+
const react_1 = require("react");
|
|
8
|
+
const Div_1 = __importDefault(require("./Div"));
|
|
9
|
+
const Button_1 = __importDefault(require("./Button"));
|
|
10
|
+
const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
|
|
11
|
+
const formTypesText = {
|
|
12
|
+
default: "Default",
|
|
13
|
+
submit: "Submit",
|
|
14
|
+
save: "Save",
|
|
15
|
+
create: "Create",
|
|
16
|
+
delete: "Delete",
|
|
17
|
+
update: "Update",
|
|
18
|
+
edit: "Edit",
|
|
19
|
+
};
|
|
20
|
+
function Form({ type = "default", actionButtonsLocation = "right", actionButtonLoaderName, gap, onClickCancel, onSubmit, children, ...props }) {
|
|
21
|
+
const theme = (0, BetterHtmlProvider_1.useTheme)();
|
|
22
|
+
const SubmitButtonTag = type === "delete" ? Button_1.default.destructive : Button_1.default;
|
|
23
|
+
return ((0, jsx_runtime_1.jsx)(Div_1.default, { ...props, children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, children: [gap !== undefined ? (0, jsx_runtime_1.jsx)(Div_1.default.column, { gap: gap, children: children }) : children, type !== "default" && ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: actionButtonsLocation === "left"
|
|
24
|
+
? "flex-start"
|
|
25
|
+
: actionButtonsLocation === "center"
|
|
26
|
+
? "center"
|
|
27
|
+
: "flex-end", gap: theme.styles.gap, marginTop: theme.styles.space, children: [onClickCancel && (0, jsx_runtime_1.jsx)(Button_1.default.secondary, { text: "Cancel", onClick: onClickCancel }), (0, jsx_runtime_1.jsx)(SubmitButtonTag, { text: formTypesText[type], loaderName: actionButtonLoaderName, isSubmit: true })] }))] }) }));
|
|
28
|
+
}
|
|
29
|
+
exports.default = (0, react_1.memo)(Form);
|
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
|
2
2
|
import { ComponentHoverStyle, ComponentPropWithRef, ComponentStyle } from "../types/components";
|
|
3
3
|
import { AnyOtherString, OmitProps } from "../types/app";
|
|
4
4
|
import { IconName } from "../types/icon";
|
|
5
|
-
type InputFieldProps = {
|
|
5
|
+
export type InputFieldProps = {
|
|
6
6
|
label?: string;
|
|
7
7
|
errorText?: string;
|
|
8
8
|
infoText?: string;
|
|
@@ -14,7 +14,7 @@ type InputFieldProps = {
|
|
|
14
14
|
debounceDelay?: number;
|
|
15
15
|
onChangeValue?: (value: string) => void;
|
|
16
16
|
onClickRightIcon?: () => void;
|
|
17
|
-
} & OmitProps<React.ComponentProps<"input">, "style"> & ComponentStyle & ComponentHoverStyle;
|
|
17
|
+
} & OmitProps<React.ComponentProps<"input">, "style" | "ref"> & ComponentStyle & ComponentHoverStyle;
|
|
18
18
|
type InputFieldComponentType = {
|
|
19
19
|
(props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>): React.ReactElement;
|
|
20
20
|
multiline: (props: ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>) => React.ReactElement;
|
|
@@ -114,7 +114,7 @@ const InputFieldComponent = (0, react_1.forwardRef)(function InputField({ label,
|
|
|
114
114
|
return;
|
|
115
115
|
onChangeValue?.(debouncedValue);
|
|
116
116
|
}, [withDebounce, onChangeValue, debouncedValue]);
|
|
117
|
-
return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [label && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "label", height: 16, fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: [label, required && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "span", fontSize: 16, color: theme.colors.error, children: [" ", "*"] }))] })), (0, jsx_runtime_1.jsxs)(Div_1.default, { position: "relative", width: "100%", children: [leftIcon && ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: leftIcon, position: "absolute", top: 46 / 2, left: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none", zIndex: 1002 })), (0, jsx_runtime_1.jsx)(InputElement, { theme: theme, withLeftIcon: leftIcon !== undefined, withRightIcon: rightIcon !== undefined, onChange: onChangeElement, ...styledComponentStylesWithoutExcluded, ...dataProps, ...ariaProps, ...restProps, ref: ref }), rightIcon ? (onClickRightIcon ? ((0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1 - theme.styles.space / 2, transform: "translateY(-50%)", onClick: onClickRightIcon })) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none" }))) : undefined, insideInputFieldComponent] }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: errorText || infoText }))] }));
|
|
117
|
+
return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [label && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "label", height: 16, fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: [label, required && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "span", fontSize: 16, color: theme.colors.error, children: [" ", "*"] }))] })), (0, jsx_runtime_1.jsxs)(Div_1.default, { position: "relative", width: "100%", children: [leftIcon && ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: leftIcon, position: "absolute", top: 46 / 2, left: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none", zIndex: 1002 })), (0, jsx_runtime_1.jsx)(InputElement, { theme: theme, withLeftIcon: leftIcon !== undefined, withRightIcon: rightIcon !== undefined, required: required, onChange: onChangeElement, ...styledComponentStylesWithoutExcluded, ...dataProps, ...ariaProps, ...restProps, ref: ref }), rightIcon ? (onClickRightIcon ? ((0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1 - theme.styles.space / 2, transform: "translateY(-50%)", onClick: onClickRightIcon })) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none" }))) : undefined, insideInputFieldComponent] }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: errorText || infoText }))] }));
|
|
118
118
|
});
|
|
119
119
|
InputFieldComponent.multiline = (0, react_1.forwardRef)(function Textarea({ label, errorText, infoText, onChange, onChangeValue, required, ...props }, ref) {
|
|
120
120
|
const theme = (0, BetterHtmlProvider_1.useTheme)();
|
|
@@ -126,7 +126,7 @@ InputFieldComponent.multiline = (0, react_1.forwardRef)(function Textarea({ labe
|
|
|
126
126
|
onChange?.(event);
|
|
127
127
|
onChangeValue?.(event.target.value);
|
|
128
128
|
}, [onChange, onChangeValue]);
|
|
129
|
-
return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { gap: theme.styles.gap / 2, children: [label && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "label", fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: [label, required && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "span", fontSize: 16, color: theme.colors.error, children: [" ", "*"] }))] })), (0, jsx_runtime_1.jsx)(TextareaElement, { theme: theme, onChange: onChangeElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", marginTop: theme.styles.gap / 2, color: errorText ? theme.colors.error : theme.colors.textSecondary, fontSize: 14, children: errorText || infoText }))] }));
|
|
129
|
+
return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { gap: theme.styles.gap / 2, children: [label && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "label", fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: [label, required && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "span", fontSize: 16, color: theme.colors.error, children: [" ", "*"] }))] })), (0, jsx_runtime_1.jsx)(TextareaElement, { theme: theme, required: required, onChange: onChangeElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", marginTop: theme.styles.gap / 2, color: errorText ? theme.colors.error : theme.colors.textSecondary, fontSize: 14, children: errorText || infoText }))] }));
|
|
130
130
|
});
|
|
131
131
|
InputFieldComponent.email = (0, react_1.forwardRef)(function Email({ ...props }, ref) {
|
|
132
132
|
return ((0, jsx_runtime_1.jsx)(InputFieldComponent, { type: "email", placeholder: "your@email.here", autoComplete: "email", autoCorrect: "off", autoCapitalize: "off", ref: ref, ...props }));
|
package/dist/index.d.ts
CHANGED
|
@@ -11,8 +11,9 @@ import Chip from "./components/Chip";
|
|
|
11
11
|
import InputField from "./components/InputField";
|
|
12
12
|
import Dropdown, { type DropdownOption } from "./components/Dropdown";
|
|
13
13
|
import ToggleInput from "./components/ToggleInput";
|
|
14
|
+
import Form from "./components/Form";
|
|
14
15
|
import BetterHtmlProvider, { useBetterHtmlContext, useTheme, useLoader, useLoaderControls } from "./components/BetterHtmlProvider";
|
|
15
|
-
import { usePageResize, useMediaQuery, useBooleanState, useDebounceState } from "./utils/hooks";
|
|
16
|
+
import { usePageResize, useMediaQuery, useBooleanState, useDebounceState, useForm } from "./utils/hooks";
|
|
16
17
|
import { type OmitProps, type ExcludeOptions, type PickValue, type PartialRecord, type DeepPartialRecord, type PickAllRequired } from "./types/app";
|
|
17
18
|
import { type AppConfig, type BetterHtmlConfig } from "./types/config";
|
|
18
19
|
import { type AssetName, type AssetsConfig } from "./types/asset";
|
|
@@ -20,4 +21,4 @@ import { type IconName, type IconsConfig } from "./types/icon";
|
|
|
20
21
|
import { type LoaderName, type LoaderConfig } from "./types/loader";
|
|
21
22
|
import { type Color, type ColorName, type ColorTheme, type Colors, type Styles, type Theme, type ThemeConfig } from "./types/theme";
|
|
22
23
|
import { isMobileDevice } from "./constants";
|
|
23
|
-
export { BetterHtmlProvider, Div, Text, Loader, Icon, Image, Button, Divider, Modal, ModalRef, PageHolder, Chip, InputField, Dropdown, DropdownOption, ToggleInput, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, useMediaQuery, useBooleanState, useDebounceState, OmitProps, ExcludeOptions, PickValue, PartialRecord, DeepPartialRecord, PickAllRequired, AppConfig, BetterHtmlConfig, AssetName, AssetsConfig, IconName, IconsConfig, LoaderName, LoaderConfig, Color, ColorName, ColorTheme, Colors, Styles, Theme, ThemeConfig, isMobileDevice, };
|
|
24
|
+
export { BetterHtmlProvider, Div, Text, Loader, Icon, Image, Button, Divider, Modal, ModalRef, PageHolder, Chip, InputField, Dropdown, DropdownOption, ToggleInput, Form, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, useMediaQuery, useBooleanState, useDebounceState, useForm, OmitProps, ExcludeOptions, PickValue, PartialRecord, DeepPartialRecord, PickAllRequired, AppConfig, BetterHtmlConfig, AssetName, AssetsConfig, IconName, IconsConfig, LoaderName, LoaderConfig, Color, ColorName, ColorTheme, Colors, Styles, Theme, ThemeConfig, isMobileDevice, };
|
package/dist/index.js
CHANGED
|
@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
36
36
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
37
|
};
|
|
38
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
-
exports.isMobileDevice = exports.useDebounceState = exports.useBooleanState = exports.useMediaQuery = exports.usePageResize = exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = exports.ToggleInput = exports.Dropdown = exports.InputField = exports.Chip = exports.PageHolder = exports.Modal = exports.Divider = exports.Button = exports.Image = exports.Icon = exports.Loader = exports.Text = exports.Div = exports.BetterHtmlProvider = void 0;
|
|
39
|
+
exports.isMobileDevice = exports.useForm = exports.useDebounceState = exports.useBooleanState = exports.useMediaQuery = exports.usePageResize = exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = exports.Form = exports.ToggleInput = exports.Dropdown = exports.InputField = exports.Chip = exports.PageHolder = exports.Modal = exports.Divider = exports.Button = exports.Image = exports.Icon = exports.Loader = exports.Text = exports.Div = exports.BetterHtmlProvider = void 0;
|
|
40
40
|
const Div_1 = __importDefault(require("./components/Div"));
|
|
41
41
|
exports.Div = Div_1.default;
|
|
42
42
|
const Text_1 = __importDefault(require("./components/Text"));
|
|
@@ -63,6 +63,8 @@ const Dropdown_1 = __importDefault(require("./components/Dropdown"));
|
|
|
63
63
|
exports.Dropdown = Dropdown_1.default;
|
|
64
64
|
const ToggleInput_1 = __importDefault(require("./components/ToggleInput"));
|
|
65
65
|
exports.ToggleInput = ToggleInput_1.default;
|
|
66
|
+
const Form_1 = __importDefault(require("./components/Form"));
|
|
67
|
+
exports.Form = Form_1.default;
|
|
66
68
|
const BetterHtmlProvider_1 = __importStar(require("./components/BetterHtmlProvider"));
|
|
67
69
|
exports.BetterHtmlProvider = BetterHtmlProvider_1.default;
|
|
68
70
|
Object.defineProperty(exports, "useBetterHtmlContext", { enumerable: true, get: function () { return BetterHtmlProvider_1.useBetterHtmlContext; } });
|
|
@@ -74,5 +76,6 @@ Object.defineProperty(exports, "usePageResize", { enumerable: true, get: functio
|
|
|
74
76
|
Object.defineProperty(exports, "useMediaQuery", { enumerable: true, get: function () { return hooks_1.useMediaQuery; } });
|
|
75
77
|
Object.defineProperty(exports, "useBooleanState", { enumerable: true, get: function () { return hooks_1.useBooleanState; } });
|
|
76
78
|
Object.defineProperty(exports, "useDebounceState", { enumerable: true, get: function () { return hooks_1.useDebounceState; } });
|
|
79
|
+
Object.defineProperty(exports, "useForm", { enumerable: true, get: function () { return hooks_1.useForm; } });
|
|
77
80
|
const constants_1 = require("./constants");
|
|
78
81
|
Object.defineProperty(exports, "isMobileDevice", { enumerable: true, get: function () { return constants_1.isMobileDevice; } });
|
package/dist/utils/hooks.d.ts
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
import { ComponentHoverStyle, ComponentStyle } from "../types/components";
|
|
1
|
+
import { ComponentHoverStyle, ComponentPropWithRef, ComponentStyle } from "../types/components";
|
|
2
2
|
import { Theme } from "../types/theme";
|
|
3
|
+
import { OmitProps, PartialRecord } from "../types/app";
|
|
4
|
+
import { InputFieldProps } from "../components/InputField";
|
|
5
|
+
import { DropdownProps } from "../components/Dropdown";
|
|
3
6
|
export declare function useStyledComponentStyles(props: ComponentStyle & ComponentHoverStyle, theme?: Theme,
|
|
4
7
|
/** @default false */
|
|
5
8
|
excludeProps?: boolean): {
|
|
@@ -39,3 +42,18 @@ export declare function useBooleanState(initialValue?: boolean): [
|
|
|
39
42
|
}
|
|
40
43
|
];
|
|
41
44
|
export declare function useDebounceState<Value>(initialValue: Value, delay?: number): [value: Value, debouncedValue: Value, setValue: React.Dispatch<React.SetStateAction<Value>>, isLoading: boolean];
|
|
45
|
+
export declare function useForm<FormFields extends Record<string, string | number | boolean | undefined>>({ defaultValues, onSubmit, validate, }: {
|
|
46
|
+
defaultValues: FormFields;
|
|
47
|
+
onSubmit?: (values: FormFields) => void | Promise<void>;
|
|
48
|
+
validate?: (values: FormFields) => PartialRecord<keyof FormFields, string>;
|
|
49
|
+
}): {
|
|
50
|
+
values: FormFields;
|
|
51
|
+
errors: Partial<Record<keyof FormFields, string>>;
|
|
52
|
+
isSubmitting: boolean;
|
|
53
|
+
setFieldValue: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName] | undefined) => void;
|
|
54
|
+
getInputFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLInputElement, InputFieldProps>;
|
|
55
|
+
getDropdownFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => OmitProps<ComponentPropWithRef<HTMLDivElement, DropdownProps<FormFields[FieldName], unknown>>, "options">;
|
|
56
|
+
focusField: (field: keyof FormFields) => void;
|
|
57
|
+
onSubmit: (event: React.FormEvent<HTMLFormElement>) => Promise<void>;
|
|
58
|
+
reset: () => void;
|
|
59
|
+
};
|
package/dist/utils/hooks.js
CHANGED
|
@@ -8,6 +8,7 @@ exports.usePageResize = usePageResize;
|
|
|
8
8
|
exports.useMediaQuery = useMediaQuery;
|
|
9
9
|
exports.useBooleanState = useBooleanState;
|
|
10
10
|
exports.useDebounceState = useDebounceState;
|
|
11
|
+
exports.useForm = useForm;
|
|
11
12
|
const react_1 = require("react");
|
|
12
13
|
const css_1 = require("../constants/css");
|
|
13
14
|
const cssPropsToExclude = [
|
|
@@ -152,3 +153,85 @@ function useDebounceState(initialValue, delay = 0.5) {
|
|
|
152
153
|
}, [value, delay]);
|
|
153
154
|
return [value, debouncedValue, setValue, isLoading];
|
|
154
155
|
}
|
|
156
|
+
function useForm({ defaultValues, onSubmit, validate, }) {
|
|
157
|
+
const inputFieldRefs = (0, react_1.useRef)({});
|
|
158
|
+
const [inputTypes, setInputTypes] = (0, react_1.useState)({});
|
|
159
|
+
const [values, setValues] = (0, react_1.useState)(defaultValues);
|
|
160
|
+
const [errors, setErrors] = (0, react_1.useState)({});
|
|
161
|
+
const [isSubmitting, setIsSubmitting] = useBooleanState();
|
|
162
|
+
const setFieldValue = (0, react_1.useCallback)((field, value) => {
|
|
163
|
+
setValues((oldValue) => ({
|
|
164
|
+
...oldValue,
|
|
165
|
+
[field]: value,
|
|
166
|
+
}));
|
|
167
|
+
setErrors((oldValue) => ({
|
|
168
|
+
...oldValue,
|
|
169
|
+
[field]: undefined,
|
|
170
|
+
}));
|
|
171
|
+
}, []);
|
|
172
|
+
const getInputFieldProps = (0, react_1.useCallback)((field) => {
|
|
173
|
+
const type = inputTypes[field] ?? "text";
|
|
174
|
+
return {
|
|
175
|
+
value: values[field]?.toString() ?? "",
|
|
176
|
+
onChangeValue: (newValue) => {
|
|
177
|
+
const readyValue = type === "number" ? (newValue ? Number(newValue) : undefined) : newValue;
|
|
178
|
+
setFieldValue(field, readyValue);
|
|
179
|
+
},
|
|
180
|
+
ref: (element) => {
|
|
181
|
+
if (!element)
|
|
182
|
+
return;
|
|
183
|
+
inputFieldRefs.current[field] = element;
|
|
184
|
+
if (inputTypes[field] === undefined)
|
|
185
|
+
setInputTypes((oldValue) => ({
|
|
186
|
+
...oldValue,
|
|
187
|
+
[field]: element.getAttribute("type"),
|
|
188
|
+
}));
|
|
189
|
+
},
|
|
190
|
+
};
|
|
191
|
+
}, [values, setFieldValue, inputTypes]);
|
|
192
|
+
const getDropdownFieldProps = (0, react_1.useCallback)((field) => {
|
|
193
|
+
return {
|
|
194
|
+
value: values[field],
|
|
195
|
+
onChange: (value) => {
|
|
196
|
+
setFieldValue(field, value);
|
|
197
|
+
},
|
|
198
|
+
errorText: errors[field],
|
|
199
|
+
};
|
|
200
|
+
}, [values, errors, setFieldValue]);
|
|
201
|
+
const focusField = (0, react_1.useCallback)((field) => {
|
|
202
|
+
inputFieldRefs.current[field]?.focus();
|
|
203
|
+
}, []);
|
|
204
|
+
const onSubmitFunction = (0, react_1.useCallback)(async (event) => {
|
|
205
|
+
event.preventDefault();
|
|
206
|
+
setIsSubmitting.setTrue();
|
|
207
|
+
try {
|
|
208
|
+
const validationErrors = validate?.(values) || {};
|
|
209
|
+
setErrors(validationErrors);
|
|
210
|
+
if (Object.keys(validationErrors).length === 0) {
|
|
211
|
+
await onSubmit?.(values);
|
|
212
|
+
}
|
|
213
|
+
else {
|
|
214
|
+
const firstErrorField = Object.keys(validationErrors)[0];
|
|
215
|
+
focusField(firstErrorField);
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
finally {
|
|
219
|
+
setIsSubmitting.setFalse();
|
|
220
|
+
}
|
|
221
|
+
}, [values, validate, onSubmit, focusField]);
|
|
222
|
+
const reset = (0, react_1.useCallback)(() => {
|
|
223
|
+
setValues(defaultValues);
|
|
224
|
+
setErrors({});
|
|
225
|
+
}, [defaultValues]);
|
|
226
|
+
return {
|
|
227
|
+
values,
|
|
228
|
+
errors,
|
|
229
|
+
isSubmitting,
|
|
230
|
+
setFieldValue,
|
|
231
|
+
getInputFieldProps,
|
|
232
|
+
getDropdownFieldProps,
|
|
233
|
+
focusField,
|
|
234
|
+
onSubmit: onSubmitFunction,
|
|
235
|
+
reset,
|
|
236
|
+
};
|
|
237
|
+
}
|