ant-float-label 1.0.7 → 1.1.0

package/README.md

@@ -15,6 +15,7 @@ import {
 	FloatTreeSelect,
 	FloatAutoComplete,
 	FloatTimePicker,
+	FloatPassword
 } from "ant-float-label";
 ```
 

package/dist/README.md

@@ -15,6 +15,7 @@ import {
 	FloatTreeSelect,
 	FloatAutoComplete,
 	FloatTimePicker,
+	FloatPassword
 } from "ant-float-label";
 ```
 

package/dist/component/FloatAutoComplete/index.d.ts

@@ -1,5 +1,6 @@
 import { AutoCompleteProps } from "antd";
 import "./index.css";
 export interface FloatAutoCompleteProps extends AutoCompleteProps {
+    required?: boolean;
 }
-export declare function FloatAutoComplete({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }: FloatAutoCompleteProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatAutoComplete({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, ...restProps }: FloatAutoCompleteProps): import("react/jsx-runtime").JSX.Element;

package/dist/component/FloatCascader/index.d.ts

@@ -1,3 +1,5 @@
 import { CascaderProps } from "antd";
-export type FloatCascadertProps = CascaderProps;
-export declare function FloatCascader({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }: FloatCascadertProps): import("react/jsx-runtime").JSX.Element;
+export type FloatCascadertProps = CascaderProps & {
+    required?: boolean;
+};
+export declare function FloatCascader({ placeholder, onFocus, onBlur, value, defaultValue, style, required, onChange, ...restProps }: FloatCascadertProps): import("react/jsx-runtime").JSX.Element;

package/dist/component/FloatDatePicker/index.d.ts

@@ -1,5 +1,6 @@
 import { DatePickerProps } from "antd";
 import "./index.css";
 export interface FloatDatePickerProps extends DatePickerProps {
+    required?: boolean;
 }
-export declare function FloatDatePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }: FloatDatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatDatePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, required, onChange, ...restProps }: FloatDatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/component/FloatFormItem/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { FormItemProps } from "antd";
+export interface FloatFormItemProps extends FormItemProps {
+    children?: JSX.Element;
+}
+export declare function FloatFormItem({ children, label, rules, required, ...restProps }: FloatFormItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/component/FloatInput/index.d.ts

@@ -1,4 +1,5 @@
 import { InputProps } from "antd";
 export interface FloatInputProps extends InputProps {
+    required?: boolean;
 }
-export declare function FloatInput({ placeholder, onFocus, onBlur, value, defaultValue, style, size, ...restProps }: FloatInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatInput({ placeholder, onFocus, onBlur, onChange, value, defaultValue, style, size, required, ...restProps }: FloatInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/component/FloatInputNumber/index.d.ts

@@ -1,5 +1,6 @@
 import { InputNumberProps } from "antd";
 import "./index.css";
 export interface FloatInputNumberProps extends InputNumberProps {
+    required?: boolean;
 }
-export declare function FloatInputNumber({ placeholder, onFocus, onBlur, value, defaultValue, style, size, ...restProps }: FloatInputNumberProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatInputNumber({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, ...restProps }: FloatInputNumberProps): import("react/jsx-runtime").JSX.Element;

package/dist/component/FloatPassword/index.d.ts

@@ -1,5 +1,6 @@
 import { PasswordProps } from "antd/es/input";
 import "./index.css";
 export interface FloatPasswordProps extends PasswordProps {
+    required?: boolean;
 }
-export declare function FloatPassword({ placeholder, onFocus, onBlur, value, defaultValue, style, size, ...restProps }: FloatPasswordProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatPassword({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, ...restProps }: FloatPasswordProps): import("react/jsx-runtime").JSX.Element;

package/dist/component/FloatRangePicker/index.d.ts

@@ -1,5 +1,6 @@
 import "./index.css";
 import { RangePickerProps } from "antd/es/date-picker";
 export interface FloatRangePickerProps extends RangePickerProps {
+    required?: boolean;
 }
-export declare function FloatRangePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }: FloatRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatRangePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, ...restProps }: FloatRangePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/component/FloatSelect/index.d.ts

@@ -1,5 +1,6 @@
 import { SelectProps } from "antd";
 import "./index.css";
 export interface FloatSelectProps extends SelectProps {
+    required?: boolean;
 }
-export declare function FloatSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, ...restProps }: FloatSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, required, ...restProps }: FloatSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/component/FloatTimePicker/index.d.ts

@@ -1,4 +1,5 @@
 import { TimePickerProps } from "antd";
 export interface FloatTimePickerProps extends TimePickerProps {
+    required?: boolean;
 }
-export declare function FloatTimePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, ...restProps }: FloatTimePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatTimePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, required, ...restProps }: FloatTimePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/component/FloatTreeSelect/index.d.ts

@@ -1,4 +1,5 @@
 import { TreeSelectProps } from "antd";
 export interface FloatTreeSelectProps extends TreeSelectProps {
+    required?: boolean;
 }
-export declare function FloatTreeSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }: FloatTreeSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatTreeSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, required, ...restProps }: FloatTreeSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/component/FloattingLabelBox/index.d.ts

@@ -9,5 +9,6 @@ export interface FloattingLabelBoxProps {
     width?: string | number;
     height?: string | number;
     status?: InputStatus;
+    required?: boolean;
 }
-export declare function FloattingLabelBox({ focused, haveValue, label, children, width, height, status, }: FloattingLabelBoxProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloattingLabelBox({ focused, haveValue, label, children, width, height, status, required, }: FloattingLabelBoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/hook/useValueHandle.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare function useValueHandle({ defaultValue, value, id, onFocus, onBlur }: {
+    defaultValue?: any;
+    value?: any;
+    id?: string;
+    onFocus?: (...args: any) => void;
+    onBlur?: (...args: any) => void;
+}): {
+    hasValue: boolean;
+    handleChange: import("react").Dispatch<any>;
+    handleFocus: (...args: any) => void;
+    handleBlur: (...args: any) => void;
+    isFocus: boolean;
+};

package/dist/index.css

@@ -1,4 +1,4 @@
-.ant-float-label-box{position:relative;line-height:normal;}.ant-float-label-box-label{position:absolute;max-width:99%;overflow:hidden;text-overflow:ellipsis;left:0;top:0;font-size:0.85rem;white-space:nowrap;font-weight:400;transform-origin:top left;pointer-events:none;height:100%;display:flex;align-items:center;transition:color 200ms cubic-bezier(0,0,0.2,1) 0ms,transform 200ms cubic-bezier(0,0,0.2,1) 0ms,max-width 200ms cubic-bezier(0,0,0.2,1) 0ms;}.ant-float-label-box-fieldset{padding:0 8px;position:absolute;top:-5px;left:0;right:0;bottom:0;margin:0;pointer-events:none;text-align:left;box-sizing:border-box;min-width:0%;}.ant-float-label-box-legend{width:auto!important;overflow:hidden;display:block;padding:0!important;height:11px!important;font-size:0.85rem!important;visibility:hidden;transition:max-width 100ms cubic-bezier(0.0,0,0.2,1) 50ms;white-space:nowrap;padding-inline:0!important;}
+.ant-float-label-box{position:relative;line-height:normal;}.ant-float-label-box-label{position:absolute;max-width:99%;overflow:hidden;text-overflow:ellipsis;left:0;top:0;font-size:0.85rem;white-space:nowrap;font-weight:400;transform-origin:top left;pointer-events:none;height:100%;display:flex;align-items:center;transition:color 200ms cubic-bezier(0,0,0.2,1) 0ms,transform 200ms cubic-bezier(0,0,0.2,1) 0ms,max-width 200ms cubic-bezier(0,0,0.2,1) 0ms;}.ant-float-label-box-fieldset{padding:0 8px;position:absolute;top:-5px;left:0;right:0;bottom:0;margin:0;pointer-events:none;text-align:left;box-sizing:border-box;min-width:0%;}.ant-float-label-box-legend{width:auto!important;overflow:hidden;display:block;padding:0!important;height:11px!important;font-size:0.85rem!important;visibility:hidden;transition:max-width 100ms cubic-bezier(0,0,0.2,1) 50ms;white-space:nowrap;padding-inline:0!important;}
 .ant-float-label-form-auto-complete .ant-select-selector {border:none!important;box-shadow:none!important;}
 .ant-float-label-form-picker {border:none!important;box-shadow:none!important;}
 .ant-float-label-form-input-number {border:none!important;box-shadow:none!important;}

package/dist/index.d.ts

@@ -9,3 +9,4 @@ export * from "./component/FloatTimePicker";
 export * from "./component/FloattingLabelBox";
 export * from "./component/FloatTreeSelect";
 export * from "./component/FloatPassword";
+export * from "./component/FloatFormItem";

package/dist/index.js

@@ -1,10 +1,11 @@
 import "./index.css"
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { theme, AutoComplete, Cascader, DatePicker, Input, InputNumber, Select, TimePicker, TreeSelect } from 'antd';
-import { useMemo, useRef, useState, useCallback, useEffect } from 'react';
+import { theme, Form, AutoComplete, Cascader, DatePicker, Input, InputNumber, Select, TimePicker, TreeSelect } from 'antd';
+import React, { useMemo, useRef, useState, useContext, useCallback, useEffect } from 'react';
+import { FormContext } from 'antd/es/form/context';
 
 const { useToken } = theme;
-function FloattingLabelBox({ focused, haveValue, label, children, width, height, status, }) {
+function FloattingLabelBox({ focused, haveValue, label, children, width, height, status, required, }) {
     const { token } = useToken();
     const statusColor = useMemo(() => {
         const colors = {
@@ -41,7 +42,7 @@ function FloattingLabelBox({ focused, haveValue, label, children, width, height,
                     transform: focused || haveValue
                         ? "translate(14px, -9px) scale(0.75)"
                         : `translate(1em, 0px) scale(1)`,
-                }, children: label }), jsx("fieldset", { style: {
+                }, children: required ? (jsxs("div", { style: { display: "flex", gap: "0.3em", alignItems: "center" }, children: [jsx("span", { children: label }), jsx("span", { style: { marginTop: "3px" }, children: "*" })] })) : (label) }), jsx("fieldset", { style: {
                     border: focused
                         ? `2px solid ${statusColor.borderColorActive}`
                         : `1px solid ${statusColor.borderColor}`,
@@ -51,29 +52,24 @@ function FloattingLabelBox({ focused, haveValue, label, children, width, height,
                     }, children: label }) })] }));
 }
 
-function FloatAutoComplete({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }) {
+function useValueHandle({ defaultValue, value, id, onFocus, onBlur }) {
     const initFlag = useRef(false);
     const [isFocus, setIsFocus] = useState(false);
+    const { form, name: formName } = useContext(FormContext);
     const [inputValue, setInputValue] = useState(defaultValue ?? value);
-    const handleFocus = useCallback((e) => {
+    const changeValue = Form.useWatch(formName ? id?.replace(formName + "_", "") : id, form);
+    const handleFocus = useCallback((...args) => {
         setIsFocus(true);
-        if (onFocus) {
-            onFocus(e);
+        if (typeof onFocus === "function") {
+            onFocus(...args);
         }
     }, [onFocus]);
-    const handleBlur = useCallback((e) => {
+    const handleBlur = useCallback((...args) => {
         setIsFocus(false);
-        setInputValue(e.target.value);
-        if (onBlur) {
-            onBlur(e);
+        if (typeof onBlur === "function") {
+            onBlur(args);
         }
     }, [onBlur]);
-    const handleChange = useCallback((value, option) => {
-        setInputValue(value);
-        if (onChange) {
-            onChange(value, option);
-        }
-    }, [onChange]);
     useEffect(() => {
         if (initFlag.current) {
             setInputValue(value);
@@ -83,339 +79,219 @@ function FloatAutoComplete({ placeholder, onFocus, onBlur, value, defaultValue,
             initFlag.current = false;
         };
     }, [value]);
-    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: !!inputValue, width: style?.width, height: style?.height, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), children: jsx(AutoComplete, { style: {
+    useEffect(() => {
+        if (form && id) {
+            setInputValue(changeValue);
+        }
+    }, [changeValue, form]);
+    return {
+        hasValue: Array.isArray(inputValue) ? inputValue.length > 0 : typeof value === "number" ? true : !!inputValue,
+        handleChange: setInputValue,
+        handleFocus,
+        handleBlur,
+        isFocus
+    };
+}
+
+function FloatAutoComplete({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, ...restProps }) {
+    const { hasValue, handleChange, handleBlur, handleFocus, isFocus } = useValueHandle({
+        id: restProps.id,
+        defaultValue,
+        value,
+        onFocus,
+        onBlur,
+    });
+    const changeHandler = useCallback((value, option) => {
+        handleChange(value);
+        if (onChange) {
+            onChange(value, option);
+        }
+    }, [onChange]);
+    return (jsx(FloattingLabelBox, { label: placeholder, required: required, focused: isFocus, haveValue: hasValue, width: style?.width, height: style?.height, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), children: jsx(AutoComplete, { style: {
                 width: "100%",
                 ...style,
                 border: "none",
-            }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: handleChange, rootClassName: "ant-float-label-form-auto-complete" }) }));
+            }, variant: "borderless", ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, onChange: changeHandler, rootClassName: "ant-float-label-form-auto-complete" }) }));
 }
 
-function FloatCascader({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }) {
-    const initFlag = useRef(false);
-    const [isFocus, setIsFocus] = useState(false);
-    const [inputValue, setInputValue] = useState(defaultValue ?? value);
-    const handleFocus = useCallback((e) => {
-        setIsFocus(true);
-        if (onFocus) {
-            onFocus(e);
-        }
-    }, [onFocus]);
-    const handleBlur = useCallback((e) => {
-        setIsFocus(false);
-        if (onBlur) {
-            onBlur(e);
-        }
-    }, [onBlur]);
-    const handleChange = useCallback((value, selectedOptions) => {
-        setInputValue(value);
+function FloatCascader({ placeholder, onFocus, onBlur, value, defaultValue, style, required, onChange, ...restProps }) {
+    const { hasValue, handleChange, handleBlur, handleFocus, isFocus } = useValueHandle({
+        id: restProps.id,
+        defaultValue,
+        value,
+        onFocus,
+        onBlur,
+    });
+    const changehandler = useCallback((value, selectedOptions) => {
+        handleChange(value);
         if (onChange) {
             onChange(value, selectedOptions);
         }
     }, [onChange]);
-    useEffect(() => {
-        if (initFlag.current) {
-            setInputValue(value);
-        }
-        initFlag.current = true;
-        return () => {
-            initFlag.current = false;
-        };
-    }, [value]);
-    const haveValue = useMemo(() => {
-        const currValue = Array.isArray(inputValue) && inputValue.length === 0
-            ? undefined
-            : inputValue;
-        return !!currValue;
-    }, [inputValue]);
-    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: haveValue, width: style?.width, height: style?.height, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), children: jsx(Cascader, { style: { ...style, width: "100%", border: "none" }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: handleChange, rootClassName: "ant-float-label-form-select" }) }));
+    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: hasValue, width: style?.width, height: style?.height, required: required, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), children: jsx(Cascader, { style: { ...style, width: "100%", border: "none" }, variant: "borderless", ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, onChange: changehandler, rootClassName: "ant-float-label-form-select" }) }));
 }
 
-function FloatDatePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }) {
-    const initFlag = useRef(false);
-    const [isFocus, setIsFocus] = useState(false);
-    const [inputValue, setInputValue] = useState(defaultValue ?? value);
-    const handleFocus = useCallback((event, info) => {
-        setIsFocus(true);
-        if (onFocus) {
-            onFocus(event, info);
-        }
-    }, [onFocus]);
-    const handleBlur = useCallback((event, info) => {
-        setIsFocus(false);
-        if (onBlur) {
-            onBlur(event, info);
-        }
-    }, [onBlur]);
-    const handleChange = useCallback((value, dateString) => {
-        setInputValue(value);
+function FloatDatePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, required, onChange, ...restProps }) {
+    const { hasValue, handleChange, handleBlur, handleFocus, isFocus } = useValueHandle({
+        id: restProps.id,
+        defaultValue,
+        value,
+        onFocus,
+        onBlur,
+    });
+    const changeHandler = useCallback((value, dateString) => {
+        handleChange(value);
         if (onChange) {
             onChange(value, dateString);
         }
     }, [onChange]);
-    useEffect(() => {
-        if (initFlag.current) {
-            setInputValue(value);
-        }
-        initFlag.current = true;
-        return () => {
-            initFlag.current = false;
-        };
-    }, [value]);
-    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: !!inputValue, width: style?.width, height: style?.height, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), children: jsx(DatePicker, { style: { ...style, width: "100%", border: "none" }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: handleChange, rootClassName: "ant-float-label-form-picker", placeholder: "" }) }));
+    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: hasValue, width: style?.width, height: style?.height, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), required: required, children: jsx(DatePicker, { style: { ...style, width: "100%", border: "none" }, variant: "borderless", ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, onChange: changeHandler, rootClassName: "ant-float-label-form-picker", placeholder: "" }) }));
 }
 
-function FloatInput({ placeholder, onFocus, onBlur, value, defaultValue, style, size, ...restProps }) {
-    const initFlag = useRef(false);
-    const [isFocus, setIsFocus] = useState(false);
-    const [inputValue, setInputValue] = useState(defaultValue ?? value);
-    const handleFocus = useCallback((e) => {
-        setIsFocus(true);
-        if (onFocus) {
-            onFocus(e);
-        }
-    }, [onFocus]);
-    const handleBlur = useCallback((e) => {
-        setIsFocus(false);
-        setInputValue(e.target.value);
-        if (onBlur) {
-            onBlur(e);
-        }
-    }, [onBlur]);
-    useEffect(() => {
-        if (initFlag.current) {
-            setInputValue(value);
+function FloatInput({ placeholder, onFocus, onBlur, onChange, value, defaultValue, style, size, required, ...restProps }) {
+    const { hasValue, handleChange, handleBlur, handleFocus, isFocus } = useValueHandle({
+        id: restProps.id,
+        defaultValue,
+        value,
+        onFocus,
+        onBlur,
+    });
+    const changeHandler = useCallback((e) => {
+        handleChange(e.target.value);
+        if (onChange) {
+            onChange(e);
         }
-        initFlag.current = true;
-        return () => {
-            initFlag.current = false;
-        };
-    }, [value]);
-    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: !!inputValue, width: style?.width, height: style?.height, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), children: jsx(Input, { style: { ...style, width: "100%", border: "none" }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size }) }));
+    }, [onChange]);
+    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: hasValue, width: style?.width, height: style?.height, required: required, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), children: jsx(Input, { style: { ...style, width: "100%", border: "none" }, variant: "borderless", ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, onChange: changeHandler, size: size }) }));
 }
 
-function FloatInputNumber({ placeholder, onFocus, onBlur, value, defaultValue, style, size, ...restProps }) {
-    const initFlag = useRef(false);
-    const [isFocus, setIsFocus] = useState(false);
-    const [inputValue, setInputValue] = useState(defaultValue ?? value);
-    const handleFocus = useCallback((e) => {
-        setIsFocus(true);
-        if (onFocus) {
-            onFocus(e);
-        }
-    }, [onFocus]);
-    const handleBlur = useCallback((e) => {
-        setIsFocus(false);
-        setInputValue(e.target.value);
-        if (onBlur) {
-            onBlur(e);
-        }
-    }, [onBlur]);
-    useEffect(() => {
-        if (initFlag.current) {
-            setInputValue(value);
+function FloatInputNumber({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, ...restProps }) {
+    const { hasValue, handleChange, handleBlur, handleFocus, isFocus } = useValueHandle({
+        id: restProps.id,
+        defaultValue,
+        value,
+        onFocus,
+        onBlur,
+    });
+    const changeHanlder = useCallback((value) => {
+        handleChange(value);
+        if (onChange) {
+            onChange(value);
         }
-        initFlag.current = true;
-        return () => {
-            initFlag.current = false;
-        };
-    }, [value]);
-    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: !!inputValue, width: style?.width, height: style?.height, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), children: jsx(InputNumber, { style: { ...style, width: "100%", border: "none" }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, rootClassName: "ant-float-label-form-input-number" }) }));
+    }, [onChange]);
+    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: hasValue, width: style?.width, height: style?.height, required: required, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), children: jsx(InputNumber, { style: { ...style, width: "100%", border: "none" }, variant: "borderless", ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, onChange: changeHanlder, rootClassName: "ant-float-label-form-input-number" }) }));
 }
 
 const { RangePicker } = DatePicker;
-function FloatRangePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }) {
-    const initFlag = useRef(false);
-    const [isFocus, setIsFocus] = useState(false);
-    const [inputValue, setInputValue] = useState(defaultValue ?? value);
-    const handleFocus = useCallback((event, info) => {
-        setIsFocus(true);
-        if (onFocus) {
-            onFocus(event, info);
-        }
-    }, [onFocus]);
-    const handleBlur = useCallback((event, info) => {
-        setIsFocus(false);
-        if (onBlur) {
-            onBlur(event, info);
-        }
-    }, [onBlur]);
-    const handleChange = useCallback((value, dateString) => {
-        setInputValue(value);
+function FloatRangePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, ...restProps }) {
+    const { hasValue, handleChange, handleBlur, handleFocus, isFocus } = useValueHandle({
+        id: restProps.id?.toString(),
+        defaultValue,
+        value,
+        onFocus,
+        onBlur,
+    });
+    const changeHandler = useCallback((value, dateString) => {
+        handleChange(value);
         if (onChange) {
             onChange(value, dateString);
         }
     }, [onChange]);
-    useEffect(() => {
-        if (initFlag.current) {
-            setInputValue(value);
-        }
-        initFlag.current = true;
-        return () => {
-            initFlag.current = false;
-        };
-    }, [value]);
     const haveValue = useMemo(() => {
-        return !!(isFocus || inputValue);
-    }, [inputValue, isFocus]);
-    return (jsx(FloattingLabelBox, { label: haveValue && placeholder ? placeholder.join(" - ") : "", focused: isFocus, haveValue: haveValue, width: style?.width, height: style?.height, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), children: jsx(RangePicker, { style: { ...style, width: "100%", border: "none" }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: handleChange, rootClassName: "ant-float-label-form-picker", placeholder: haveValue ? ["", ""] : placeholder }) }));
+        return isFocus || hasValue;
+    }, [hasValue, isFocus]);
+    return (jsx(FloattingLabelBox, { label: haveValue && placeholder ? placeholder.join(" - ") : "", focused: isFocus, haveValue: haveValue, width: style?.width, height: style?.height, required: required, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), children: jsx(RangePicker, { style: { ...style, width: "100%", border: "none" }, variant: "borderless", ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, onChange: changeHandler, rootClassName: "ant-float-label-form-picker", placeholder: hasValue ? ["", ""] : placeholder }) }));
 }
 
-function FloatSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, ...restProps }) {
-    const initFlag = useRef(false);
-    const [isFocus, setIsFocus] = useState(false);
-    const [inputValue, setInputValue] = useState(defaultValue ?? value);
-    const handleFocus = useCallback((e) => {
-        setIsFocus(true);
-        if (onFocus) {
-            onFocus(e);
-        }
-    }, [onFocus]);
-    const handleBlur = useCallback((e) => {
-        setIsFocus(false);
-        if (onBlur) {
-            onBlur(e);
-        }
-    }, [onBlur]);
-    const handleChange = useCallback((value, option) => {
-        setInputValue(value);
+function FloatSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, required, ...restProps }) {
+    const { hasValue, handleChange, handleBlur, handleFocus, isFocus } = useValueHandle({
+        id: restProps.id?.toString(),
+        defaultValue,
+        value,
+        onFocus,
+        onBlur,
+    });
+    const changeHandler = useCallback((value, option) => {
+        handleChange(value);
         if (onChange) {
             onChange(value, option);
         }
     }, [onChange]);
-    useEffect(() => {
-        if (initFlag.current) {
-            setInputValue(value);
-        }
-        initFlag.current = true;
-        return () => {
-            initFlag.current = false;
-        };
-    }, [value]);
-    const haveValue = useMemo(() => {
-        const currValue = Array.isArray(inputValue) && inputValue.length === 0
-            ? undefined
-            : inputValue;
-        return !!currValue;
-    }, [inputValue]);
-    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: haveValue, width: style?.width, height: style?.height, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), children: jsx(Select, { style: { ...style, width: "100%", border: "none" }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: handleChange, mode: mode, rootClassName: "ant-float-label-form-select" }) }));
+    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: hasValue, width: style?.width, height: style?.height, required: required, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), children: jsx(Select, { style: { ...style, width: "100%", border: "none" }, variant: "borderless", ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: changeHandler, mode: mode, rootClassName: "ant-float-label-form-select" }) }));
 }
 
-function FloatTimePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, ...restProps }) {
-    const initFlag = useRef(false);
-    const [isFocus, setIsFocus] = useState(false);
-    const [inputValue, setInputValue] = useState(defaultValue ?? value);
-    const handleFocus = useCallback((e, info) => {
-        setIsFocus(true);
-        if (onFocus) {
-            onFocus(e, info);
-        }
-    }, [onFocus]);
-    const handleBlur = useCallback((e, info) => {
-        setIsFocus(false);
-        if (onBlur) {
-            onBlur(e, info);
-        }
-    }, [onBlur]);
-    const handleChange = useCallback((value, option) => {
-        setInputValue(value);
+function FloatTimePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, required, ...restProps }) {
+    const { hasValue, handleChange, handleBlur, handleFocus, isFocus } = useValueHandle({
+        id: restProps.id?.toString(),
+        defaultValue,
+        value,
+        onFocus,
+        onBlur,
+    });
+    const changeHandler = useCallback((value, option) => {
+        handleChange(value);
         if (onChange) {
             onChange(value, option);
         }
     }, [onChange]);
-    useEffect(() => {
-        if (initFlag.current) {
-            setInputValue(value);
-        }
-        initFlag.current = true;
-        return () => {
-            initFlag.current = false;
-        };
-    }, [value]);
-    const haveValue = useMemo(() => {
-        const currValue = Array.isArray(inputValue) && inputValue.length === 0
-            ? undefined
-            : inputValue;
-        return !!currValue;
-    }, [inputValue]);
-    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: haveValue, width: style?.width, height: style?.height, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), children: jsx(TimePicker, { style: {
+    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: hasValue, width: style?.width, height: style?.height, required: required, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), children: jsx(TimePicker, { style: {
                 ...style,
                 width: "100%",
                 border: "none",
-            }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: handleChange, mode: mode, rootClassName: "ant-float-label-form-select", placeholder: "" }) }));
+            }, variant: "borderless", ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: changeHandler, mode: mode, rootClassName: "ant-float-label-form-select", placeholder: "" }) }));
 }
 
-function FloatTreeSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }) {
-    const initFlag = useRef(false);
-    const [isFocus, setIsFocus] = useState(false);
-    const [inputValue, setInputValue] = useState(defaultValue ?? value);
-    const handleFocus = useCallback((e) => {
-        setIsFocus(true);
-        if (onFocus) {
-            onFocus(e);
-        }
-    }, [onFocus]);
-    const handleBlur = useCallback((e) => {
-        setIsFocus(false);
-        if (onBlur) {
-            onBlur(e);
-        }
-    }, [onBlur]);
-    const handleChange = useCallback((value, labelList, extra) => {
-        setInputValue(value);
+function FloatTreeSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, required, ...restProps }) {
+    const { hasValue, handleChange, handleBlur, handleFocus, isFocus } = useValueHandle({
+        id: restProps.id?.toString(),
+        defaultValue,
+        value,
+        onFocus,
+        onBlur,
+    });
+    const changeHandler = useCallback((value, labelList, extra) => {
+        handleChange(value);
         if (onChange) {
             onChange(value, labelList, extra);
         }
     }, [onChange]);
-    useEffect(() => {
-        if (initFlag.current) {
-            setInputValue(value);
-        }
-        initFlag.current = true;
-        return () => {
-            initFlag.current = false;
-        };
-    }, [value]);
-    const haveValue = useMemo(() => {
-        const currValue = Array.isArray(inputValue) && inputValue.length === 0
-            ? undefined
-            : inputValue;
-        return !!currValue;
-    }, [inputValue]);
-    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: haveValue, width: style?.width, height: style?.height, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), children: jsx(TreeSelect, { style: {
+    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: hasValue, width: style?.width, height: style?.height, required: required, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), children: jsx(TreeSelect, { style: {
                 ...style,
                 width: "100%",
                 border: "none",
-            }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: handleChange, rootClassName: "ant-float-label-form-select" }) }));
+            }, variant: "borderless", ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: changeHandler, rootClassName: "ant-float-label-form-select" }) }));
 }
 
 const { Password } = Input;
-function FloatPassword({ placeholder, onFocus, onBlur, value, defaultValue, style, size, ...restProps }) {
-    const initFlag = useRef(false);
-    const [isFocus, setIsFocus] = useState(false);
-    const [inputValue, setInputValue] = useState(defaultValue ?? value);
-    const handleFocus = useCallback((e) => {
-        setIsFocus(true);
-        if (onFocus) {
-            onFocus(e);
-        }
-    }, [onFocus]);
-    const handleBlur = useCallback((e) => {
-        setIsFocus(false);
-        setInputValue(e.target.value);
-        if (onBlur) {
-            onBlur(e);
-        }
-    }, [onBlur]);
-    useEffect(() => {
-        if (initFlag.current) {
-            setInputValue(value);
+function FloatPassword({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, ...restProps }) {
+    const { hasValue, handleChange, handleBlur, handleFocus, isFocus } = useValueHandle({
+        id: restProps.id,
+        defaultValue,
+        value,
+        onFocus,
+        onBlur,
+    });
+    const changeHanlder = useCallback((value) => {
+        handleChange(value);
+        if (onChange) {
+            onChange(value);
         }
-        initFlag.current = true;
-        return () => {
-            initFlag.current = false;
-        };
-    }, [value]);
-    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: !!inputValue, width: style?.width, height: style?.height, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), children: jsx(Password, { style: { ...style, width: "100%", border: "none" }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, rootClassName: "ant-float-label-form-input-password" }) }));
+    }, [onChange]);
+    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: hasValue, width: style?.width, height: style?.height, required: required, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), children: jsx(Password, { style: { ...style, width: "100%", border: "none" }, variant: "borderless", ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, onChange: changeHanlder, rootClassName: "ant-float-label-form-input-password" }) }));
+}
+
+function FloatFormItem({ children, label = "", rules, required, ...restProps }) {
+    const isRequired = useMemo(() => {
+        if (required)
+            return required;
+        return rules?.some((value) => value.required !== undefined && value.required !== false);
+    }, [required, rules]);
+    return (jsx(Form.Item, { required: required, rules: rules, ...restProps, children: children
+            ? React.cloneElement(children, {
+                placeholder: label,
+                required: isRequired,
+            })
+            : children }));
 }
 
-export { FloatAutoComplete, FloatCascader, FloatDatePicker, FloatInput, FloatInputNumber, FloatPassword, FloatRangePicker, FloatSelect, FloatTimePicker, FloatTreeSelect, FloattingLabelBox };
+export { FloatAutoComplete, FloatCascader, FloatDatePicker, FloatFormItem, FloatInput, FloatInputNumber, FloatPassword, FloatRangePicker, FloatSelect, FloatTimePicker, FloatTreeSelect, FloattingLabelBox };

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ant-float-label",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "Antd 5 form style similar to MUI",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ant-float-label",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "Antd 5 form style similar to MUI",
   "main": "dist/index.js",
   "module": "dist/index.js",