react-better-html 1.1.32 → 1.1.34
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.
|
@@ -7,6 +7,7 @@ type FormProps = {
|
|
|
7
7
|
submitButtonText?: string;
|
|
8
8
|
submitButtonLoaderName?: LoaderName | AnyOtherString;
|
|
9
9
|
submitButtonId?: string;
|
|
10
|
+
submitButtonIsDisabled?: boolean;
|
|
10
11
|
/** @default "right" */
|
|
11
12
|
actionButtonsLocation?: "left" | "center" | "right";
|
|
12
13
|
gap?: React.CSSProperties["gap"];
|
|
@@ -16,6 +17,6 @@ type FormProps = {
|
|
|
16
17
|
onSubmit?: (value: React.FormEvent<HTMLFormElement>) => void;
|
|
17
18
|
children?: React.ReactNode;
|
|
18
19
|
} & ComponentMarginProps;
|
|
19
|
-
declare function Form({ form, submitButtonText, submitButtonLoaderName, submitButtonId, actionButtonsLocation, gap, isSubmitting, isDestructive, onClickCancel, onSubmit, children, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
declare function Form({ form, submitButtonText, submitButtonLoaderName, submitButtonId, submitButtonIsDisabled, actionButtonsLocation, gap, isSubmitting, isDestructive, onClickCancel, onSubmit, children, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
|
|
20
21
|
declare const _default: import("react").MemoExoticComponent<typeof Form>;
|
|
21
22
|
export default _default;
|
package/dist/components/Form.js
CHANGED
|
@@ -8,19 +8,20 @@ const react_1 = require("react");
|
|
|
8
8
|
const Div_1 = __importDefault(require("./Div"));
|
|
9
9
|
const Button_1 = __importDefault(require("./Button"));
|
|
10
10
|
const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
|
|
11
|
-
function Form({ form, submitButtonText, submitButtonLoaderName, submitButtonId, actionButtonsLocation = "right", gap, isSubmitting, isDestructive, onClickCancel, onSubmit, children, ...props }) {
|
|
11
|
+
function Form({ form, submitButtonText, submitButtonLoaderName, submitButtonId, submitButtonIsDisabled, actionButtonsLocation = "right", gap, isSubmitting, isDestructive, onClickCancel, onSubmit, children, ...props }) {
|
|
12
12
|
const theme = (0, BetterHtmlProvider_1.useTheme)();
|
|
13
|
-
const
|
|
13
|
+
const submitButtonIsDisabledInternal = (0, react_1.useMemo)(() => {
|
|
14
14
|
if (!form || !form.requiredFields)
|
|
15
15
|
return false;
|
|
16
16
|
return Object.entries(form.values).some(([key, value]) => form.requiredFields?.includes(key) &&
|
|
17
17
|
(value === undefined || value === null || value?.toString().trim() === ""));
|
|
18
18
|
}, [form]);
|
|
19
19
|
const SubmitButtonTag = isDestructive ? Button_1.default.destructive : Button_1.default;
|
|
20
|
+
const submitButtonIsDisabledFinal = submitButtonIsDisabled || submitButtonIsDisabledInternal;
|
|
20
21
|
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, submitButtonText && ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: actionButtonsLocation === "left"
|
|
21
22
|
? "flex-start"
|
|
22
23
|
: actionButtonsLocation === "center"
|
|
23
24
|
? "center"
|
|
24
|
-
: "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: submitButtonText, isLoading: isSubmitting, loaderName: submitButtonLoaderName, disabled:
|
|
25
|
+
: "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: submitButtonText, isLoading: isSubmitting, loaderName: submitButtonLoaderName, disabled: submitButtonIsDisabledFinal, id: submitButtonId, isSubmit: true })] }))] }) }));
|
|
25
26
|
}
|
|
26
27
|
exports.default = (0, react_1.memo)(Form);
|
|
@@ -11,6 +11,7 @@ const Text_1 = __importDefault(require("./Text"));
|
|
|
11
11
|
const Div_1 = __importDefault(require("./Div"));
|
|
12
12
|
const Icon_1 = __importDefault(require("./Icon"));
|
|
13
13
|
const Button_1 = __importDefault(require("./Button"));
|
|
14
|
+
const Label_1 = __importDefault(require("./Label"));
|
|
14
15
|
const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
|
|
15
16
|
const InputElement = styled_components_1.default.input.withConfig({
|
|
16
17
|
shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "normalStyle", "hoverStyle"].includes(prop),
|
|
@@ -114,7 +115,7 @@ const InputFieldComponent = (0, react_1.forwardRef)(function InputField({ label,
|
|
|
114
115
|
return;
|
|
115
116
|
onChangeValue?.(debouncedValue);
|
|
116
117
|
}, [withDebounce, onChangeValue, debouncedValue]);
|
|
117
|
-
return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [label && (
|
|
118
|
+
return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, required: required, isError: !!errorText }), (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, placeholder: placeholder ?? label, 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
119
|
});
|
|
119
120
|
InputFieldComponent.multiline = (0, react_1.forwardRef)(function Textarea({ label, errorText, infoText, onChange, onChangeValue, required, ...props }, ref) {
|
|
120
121
|
const theme = (0, BetterHtmlProvider_1.useTheme)();
|
|
@@ -126,7 +127,7 @@ InputFieldComponent.multiline = (0, react_1.forwardRef)(function Textarea({ labe
|
|
|
126
127
|
onChange?.(event);
|
|
127
128
|
onChangeValue?.(event.target.value);
|
|
128
129
|
}, [onChange, onChangeValue]);
|
|
129
|
-
return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { gap: theme.styles.gap / 2, children: [label && (
|
|
130
|
+
return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { gap: theme.styles.gap / 2, children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, required: required, isError: !!errorText }), (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
131
|
});
|
|
131
132
|
InputFieldComponent.email = (0, react_1.forwardRef)(function Email({ ...props }, ref) {
|
|
132
133
|
return ((0, jsx_runtime_1.jsx)(InputFieldComponent, { type: "email", placeholder: "your@email.here", autoComplete: "email", autoCorrect: "off", autoCapitalize: "off", ref: ref, ...props }));
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
type LabelProps = {
|
|
2
|
+
text?: string;
|
|
3
|
+
required?: boolean;
|
|
4
|
+
isError?: boolean;
|
|
5
|
+
};
|
|
6
|
+
declare function Label({ text, required, isError }: LabelProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare const _default: import("react").MemoExoticComponent<typeof Label>;
|
|
8
|
+
export default _default;
|
|
@@ -0,0 +1,14 @@
|
|
|
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 Text_1 = __importDefault(require("./Text"));
|
|
9
|
+
const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
|
|
10
|
+
function Label({ text, required, isError }) {
|
|
11
|
+
const theme = (0, BetterHtmlProvider_1.useTheme)();
|
|
12
|
+
return ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "label", height: 16, fontSize: 14, color: isError ? theme.colors.error : theme.colors.textSecondary, children: [text, required && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "span", fontSize: 16, color: theme.colors.error, children: [" ", "*"] }))] }));
|
|
13
|
+
}
|
|
14
|
+
exports.default = (0, react_1.memo)(Label);
|
package/dist/index.d.ts
CHANGED
|
@@ -12,6 +12,7 @@ import InputField from "./components/InputField";
|
|
|
12
12
|
import Dropdown, { type DropdownOption } from "./components/Dropdown";
|
|
13
13
|
import ToggleInput from "./components/ToggleInput";
|
|
14
14
|
import Form from "./components/Form";
|
|
15
|
+
import Label from "./components/Label";
|
|
15
16
|
import BetterHtmlProvider, { useBetterHtmlContext, useTheme, useLoader, useLoaderControls } from "./components/BetterHtmlProvider";
|
|
16
17
|
import { usePageResize, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery } from "./utils/hooks";
|
|
17
18
|
import { type OmitProps, type ExcludeOptions, type PickValue, type PartialRecord, type DeepPartialRecord, type PickAllRequired } from "./types/app";
|
|
@@ -23,4 +24,4 @@ import { type PluginName, type BetterHtmlPlugin } from "./types/plugin";
|
|
|
23
24
|
import { type Color, type ColorName, type ColorTheme, type Colors, type Styles, type Theme, type ThemeConfig } from "./types/theme";
|
|
24
25
|
import { isMobileDevice } from "./constants";
|
|
25
26
|
export * from "./plugins";
|
|
26
|
-
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, useUrlQuery, OmitProps, ExcludeOptions, PickValue, PartialRecord, DeepPartialRecord, PickAllRequired, AppConfig, BetterHtmlConfig, AssetName, AssetsConfig, IconName, IconsConfig, LoaderName, PluginName, BetterHtmlPlugin, LoaderConfig, Color, ColorName, ColorTheme, Colors, Styles, Theme, ThemeConfig, isMobileDevice, };
|
|
27
|
+
export { BetterHtmlProvider, Div, Text, Loader, Icon, Image, Button, Divider, Modal, ModalRef, PageHolder, Chip, InputField, Dropdown, DropdownOption, ToggleInput, Form, Label, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery, OmitProps, ExcludeOptions, PickValue, PartialRecord, DeepPartialRecord, PickAllRequired, AppConfig, BetterHtmlConfig, AssetName, AssetsConfig, IconName, IconsConfig, LoaderName, PluginName, BetterHtmlPlugin, LoaderConfig, Color, ColorName, ColorTheme, Colors, Styles, Theme, ThemeConfig, isMobileDevice, };
|
package/dist/index.js
CHANGED
|
@@ -39,7 +39,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
39
39
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
40
40
|
};
|
|
41
41
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
42
|
-
exports.isMobileDevice = exports.useUrlQuery = 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;
|
|
42
|
+
exports.isMobileDevice = exports.useUrlQuery = exports.useForm = exports.useDebounceState = exports.useBooleanState = exports.useMediaQuery = exports.usePageResize = exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = exports.Label = 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;
|
|
43
43
|
const Div_1 = __importDefault(require("./components/Div"));
|
|
44
44
|
exports.Div = Div_1.default;
|
|
45
45
|
const Text_1 = __importDefault(require("./components/Text"));
|
|
@@ -68,6 +68,8 @@ const ToggleInput_1 = __importDefault(require("./components/ToggleInput"));
|
|
|
68
68
|
exports.ToggleInput = ToggleInput_1.default;
|
|
69
69
|
const Form_1 = __importDefault(require("./components/Form"));
|
|
70
70
|
exports.Form = Form_1.default;
|
|
71
|
+
const Label_1 = __importDefault(require("./components/Label"));
|
|
72
|
+
exports.Label = Label_1.default;
|
|
71
73
|
const BetterHtmlProvider_1 = __importStar(require("./components/BetterHtmlProvider"));
|
|
72
74
|
exports.BetterHtmlProvider = BetterHtmlProvider_1.default;
|
|
73
75
|
Object.defineProperty(exports, "useBetterHtmlContext", { enumerable: true, get: function () { return BetterHtmlProvider_1.useBetterHtmlContext; } });
|