react-better-html 1.1.43 → 1.1.44

package/dist/components/ToggleInput.d.ts

@@ -8,7 +8,7 @@ type InternalToggleInputProps<Value> = {
     infoText?: string;
     value?: Value;
     onChange?: (checked: boolean, value?: Value) => void;
-} & OmitProps<React.ComponentProps<"input">, "style" | "value" | "ref" | "onChange" | "name"> & ComponentStyle & ComponentHoverStyle;
+} & OmitProps<React.ComponentProps<"input">, "style" | "value" | "ref" | "onChange"> & ComponentStyle & ComponentHoverStyle;
 export type ToggleInputProps<Value> = ComponentPropWithRef<ToggleInputRef, OmitProps<InternalToggleInputProps<Value>, "type">>;
 type ToggleInputComponentType = <Value>(props: ToggleInputProps<Value>) => React.ReactElement;
 declare const _default: {

package/dist/components/ToggleInput.js

@@ -11,13 +11,17 @@ const Text_1 = __importDefault(require("./Text"));
 const Div_1 = __importDefault(require("./Div"));
 const Icon_1 = __importDefault(require("./Icon"));
 const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+const Label_1 = __importDefault(require("./Label"));
+const componentSize = 26;
+const switchComponentBallGap = 3;
+const switchComponentMouseDownDifference = 4;
 const InputElement = styled_components_1.default.input.withConfig({
     shouldForwardProp: (prop) => !["theme", "normalStyle", "hoverStyle"].includes(prop),
 }) `
    position: relative;
    appearance: none;
-   width: 26px;
-   height: 26px;
+   width: ${componentSize}px;
+   height: ${componentSize}px;
    background-color: ${(props) => props.theme.colors.backgroundContent};
    border: 1px solid ${(props) => props.theme.colors.border};
    border-radius: ${(props) => props.theme.styles.borderRadius / 2}px;
@@ -46,13 +50,15 @@ const InputElement = styled_components_1.default.input.withConfig({
    }
 `;
 const SwitchElement = styled_components_1.default.div.withConfig({
-    shouldForwardProp: (prop) => !["theme", "checked", "disabled", "normalStyle", "hoverStyle"].includes(prop),
+    shouldForwardProp: (prop) => !["theme", "checked", "disabled", "isMouseDown", "normalStyle", "hoverStyle"].includes(prop),
 }) `
+   --width: ${(props) => componentSize * 2 - props.theme.styles.gap / 2}px;
+
    position: relative;
-   width: 36px;
-   height: 20px;
+   width: var(--width);
+   height: ${componentSize}px;
    background-color: ${(props) => (props.checked ? props.theme.colors.primary : props.theme.colors.border)};
-   border-radius: 10px;
+   border-radius: 999px;
    cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
    opacity: ${(props) => (props.disabled ? 0.5 : 1)};
    transition: ${(props) => props.theme.styles.transition};
@@ -60,14 +66,18 @@ const SwitchElement = styled_components_1.default.div.withConfig({
    &::before {
       content: "";
       position: absolute;
-      width: 16px;
-      height: 16px;
-      background-color: white;
-      border-radius: 50%;
-      top: 2px;
-      left: 2px;
+      width: ${(props) => componentSize - switchComponentBallGap * 2 + (props.isMouseDown ? switchComponentMouseDownDifference : 0)}px;
+      height: ${componentSize - switchComponentBallGap * 2}px;
+      background-color: ${(props) => props.theme.colors.base};
+      border-radius: 999px;
+      top: ${switchComponentBallGap}px;
+      left: ${switchComponentBallGap}px;
+      transform: translateX(
+         ${(props) => props.checked
+    ? `calc(var(--width) - ${componentSize + (props.isMouseDown ? switchComponentMouseDownDifference : 0)}px)`
+    : "0px"}
+      );
       transition: ${(props) => props.theme.styles.transition};
-      transform: translateX(${(props) => (props.checked ? "16px" : "0")});
    }
 
    ${(props) => props.normalStyle}
@@ -85,19 +95,19 @@ const ToggleInputComponent = (0, react_1.forwardRef)(function ToggleInput({ labe
     const restProps = (0, hooks_1.useComponentPropsWithoutStyle)(props);
     const [internalChecked, setInternalChecked] = (0, react_1.useState)(false);
     const onChangeElement = (0, react_1.useCallback)((event) => {
-        const newValue = event.target.checked;
+        const newIsChecked = event.target.checked;
         if (controlledChecked === undefined)
-            setInternalChecked(newValue);
-        onChange?.(newValue, value);
+            setInternalChecked(newIsChecked);
+        onChange?.(newIsChecked, value);
     }, [onChange, controlledChecked, value]);
     const checked = controlledChecked ?? internalChecked;
     const onClickText = (0, react_1.useCallback)(() => {
-        const newValue = !checked;
+        const newIsChecked = !checked;
         if (controlledChecked === undefined)
-            setInternalChecked(newValue);
-        onChange?.(newValue, value);
+            setInternalChecked(newIsChecked);
+        onChange?.(newIsChecked, value);
     }, [checked, controlledChecked, onChange, value]);
-    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.row, { alignItems: "center", gap: theme.styles.gap, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { position: "relative", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(InputElement, { theme: theme, type: props.type ?? "checkbox", checked: checked, onChange: onChangeElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps }), props.type === "checkbox" ? ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "check", position: "absolute", top: "50%", left: "50%", color: theme.colors.base, size: 14, transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`, opacity: checked ? 1 : 0, pointerEvents: "none", transition: theme.styles.transition })) : props.type === "radio" ? ((0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", width: 10, height: 10, top: "50%", left: "50%", backgroundColor: theme.colors.base, borderRadius: 999, transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`, opacity: checked ? 1 : 0, pointerEvents: "none" })) : undefined] }), text && ((0, jsx_runtime_1.jsx)(Text_1.default, { userSelect: "none", cursor: "pointer", onClick: onClickText, children: text }))] }), (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 }))] }));
+    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.row, { alignItems: "center", gap: theme.styles.gap, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { position: "relative", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(InputElement, { theme: theme, type: props.type ?? "checkbox", checked: checked, onChange: onChangeElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps }), props.type === "checkbox" ? ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "check", position: "absolute", top: "50%", left: "50%", color: theme.colors.base, size: 14, transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`, opacity: checked ? 1 : 0, pointerEvents: "none", transition: theme.styles.transition })) : props.type === "radio" ? ((0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", width: 10, height: 10, top: "50%", left: "50%", backgroundColor: theme.colors.base, borderRadius: 999, transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`, opacity: checked ? 1 : 0, pointerEvents: "none" })) : undefined] }), text && ((0, jsx_runtime_1.jsx)(Text_1.default, { userSelect: "none", cursor: "pointer", onClick: onClickText, children: text }))] }), (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 }))] }));
 });
 exports.default = {
     checkbox: (0, react_1.forwardRef)(function Checkbox(props, ref) {
@@ -106,7 +116,7 @@ exports.default = {
     radiobutton: (0, react_1.forwardRef)(function RadioButton(props, ref) {
         return (0, jsx_runtime_1.jsx)(ToggleInputComponent, { type: "radio", ref: ref, ...props });
     }),
-    switch: (0, react_1.forwardRef)(function Switch({ label, errorText, infoText, disabled, onChange, checked: controlledChecked, required, ...props }, ref) {
+    switch: (0, react_1.forwardRef)(function Switch({ label, errorText, infoText, disabled, value, onChange, checked: controlledChecked, required, ...props }, ref) {
         const theme = (0, BetterHtmlProvider_1.useTheme)();
         const styledComponentStyles = (0, hooks_1.useStyledComponentStyles)(props, theme, true);
         const styledComponentStylesWithExcluded = (0, hooks_1.useComponentPropsWithExcludedStyle)(props);
@@ -114,15 +124,16 @@ exports.default = {
         const ariaProps = (0, hooks_1.useComponentPropsWithPrefix)(props, "aria");
         const restProps = (0, hooks_1.useComponentPropsWithoutStyle)(props);
         const [internalChecked, setInternalChecked] = (0, hooks_1.useBooleanState)();
+        const [isMouseDown, setIsMouseDown] = (0, hooks_1.useBooleanState)();
         const checked = controlledChecked ?? internalChecked;
         const onClickElement = (0, react_1.useCallback)(() => {
             if (disabled)
                 return;
-            const newValue = !checked;
+            const newIsChecked = !checked;
             if (controlledChecked === undefined)
-                setInternalChecked.setState(newValue);
-            onChange?.(newValue);
-        }, [disabled, checked, onChange, controlledChecked]);
-        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.jsx)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, children: (0, jsx_runtime_1.jsx)(SwitchElement, { theme: theme, checked: checked, disabled: disabled ?? false, onClick: onClickElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps }) }), (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 }))] }));
+                setInternalChecked.setState(newIsChecked);
+            onChange?.(newIsChecked, value);
+        }, [disabled, checked, onChange, controlledChecked, value]);
+        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.jsx)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, onMouseDown: setIsMouseDown.setTrue, onMouseUp: setIsMouseDown.setFalse, onMouseOut: setIsMouseDown.setFalse, onTouchStart: setIsMouseDown.setTrue, onTouchEnd: setIsMouseDown.setFalse, onTouchCancel: setIsMouseDown.setFalse, children: (0, jsx_runtime_1.jsx)(SwitchElement, { theme: theme, checked: checked, disabled: disabled ?? false, isMouseDown: isMouseDown, onClick: onClickElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps }) }), (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 }))] }));
     }),
 };

package/dist/utils/hooks.d.ts

@@ -62,6 +62,8 @@ export declare function useForm<FormFields extends Record<string, string | numbe
     getTextAreaProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>;
     getDropdownFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => OmitProps<ComponentPropWithRef<HTMLDivElement, DropdownProps<FormFields[FieldName], unknown>>, "options">;
     getCheckboxProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
+    getRadioButtonProps: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName]) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
+    getSwitchProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
     focusField: (field: keyof FormFields) => void;
     onSubmit: (event: React.FormEvent<HTMLFormElement>) => Promise<void>;
     reset: () => void;

package/dist/utils/hooks.js

@@ -255,6 +255,28 @@ function useForm({ defaultValues, requiredFields, onSubmit, validate, }) {
             errorText: errors[field],
         };
     }, [values, errors, setFieldValue]);
+    const getRadioButtonProps = (0, react_1.useCallback)((field, value) => {
+        return {
+            required: requiredFields?.includes(field),
+            checked: values[field] === value,
+            name: field.toString(),
+            value,
+            onChange: (checked, newValue) => {
+                setFieldValue(field, checked ? newValue : undefined);
+            },
+            errorText: errors[field],
+        };
+    }, [values, errors, setFieldValue]);
+    const getSwitchProps = (0, react_1.useCallback)((field) => {
+        return {
+            required: requiredFields?.includes(field),
+            checked: values[field],
+            onChange: (checked) => {
+                setFieldValue(field, checked);
+            },
+            errorText: errors[field],
+        };
+    }, [values, errors, setFieldValue]);
     const focusField = (0, react_1.useCallback)((field) => {
         inputFieldRefs.current[field]?.focus();
     }, []);
@@ -290,6 +312,8 @@ function useForm({ defaultValues, requiredFields, onSubmit, validate, }) {
         getTextAreaProps,
         getDropdownFieldProps,
         getCheckboxProps,
+        getRadioButtonProps,
+        getSwitchProps,
         focusField,
         onSubmit: onSubmitFunction,
         reset,

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "react-better-html",
-   "version": "1.1.43",
+   "version": "1.1.44",
    "description": "A component library for react that is as close to plane html as possible",
    "main": "dist/index.js",
    "files": [