ant-float-label 1.0.1 → 1.0.3

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

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

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

@@ -0,0 +1,3 @@
+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;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import "./index.css";
+import { InputStatus } from "antd/es/_util/statusUtils";
+export interface FloattingLabelBoxProps {
+    focused?: boolean;
+    haveValue?: boolean;
+    label?: React.ReactNode;
+    children?: React.ReactNode;
+    width?: string | number;
+    height?: string | number;
+    status?: InputStatus;
+}
+export declare function FloattingLabelBox({ focused, haveValue, label, children, width, height, status, }: FloattingLabelBoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./component/FloatAutoComplete";
+export * from "./component/FloatCascader";
+export * from "./component/FloatDatePicker";
+export * from "./component/FloatInput";
+export * from "./component/FloatInputNumber";
+export * from "./component/FloatRangePicker";
+export * from "./component/FloatSelect";
+export * from "./component/FloatTimePicker";
+export * from "./component/FloattingLabelBox";
+export * from "./component/FloatTreeSelect";

package/dist/package.json

@@ -1,8 +1,8 @@
 {
   "name": "ant-float-label",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Antd 5 form style similar to MUI",
-  "main": "dist/index.cjs.js",
+  "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "MIT",
   "type": "module",
@@ -20,6 +20,7 @@
     "rollup": "^4.13.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-import-css": "^3.5.0",
     "tslib": "^2.6.2",
     "typescript": "^5.4.3"

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "ant-float-label",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Antd 5 form style similar to MUI",
-  "main": "dist/index.cjs.js",
+  "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "MIT",
   "type": "module",
@@ -20,6 +20,7 @@
     "rollup": "^4.13.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-import-css": "^3.5.0",
     "tslib": "^2.6.2",
     "typescript": "^5.4.3"

package/dist/index.cjs.js

@@ -1,402 +0,0 @@
-import "./index.css"
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var antd = require('antd');
-var react = require('react');
-
-const { useToken } = antd.theme;
-function FloattingLabelBox({ focused, haveValue, label, children, width, height, status, }) {
-    const { token } = useToken();
-    const statusColor = react.useMemo(() => {
-        const colors = {
-            borderColorActive: token.colorPrimaryActive,
-            textColorActive: token.colorPrimary,
-            textColor: token.colorTextTertiary,
-            borderColor: token.colorBorder,
-        };
-        if (status === "warning") {
-            colors.borderColorActive = token.colorWarningActive;
-            colors.textColorActive = token.colorWarningTextActive;
-            colors.textColor = token.colorWarningText;
-            colors.borderColor = token.colorWarningBorder;
-        }
-        else if (status === "error") {
-            colors.borderColorActive = token.colorErrorActive;
-            colors.textColorActive = token.colorErrorTextActive;
-            colors.textColor = token.colorErrorText;
-            colors.borderColor = token.colorErrorBorder;
-        }
-        return colors;
-    }, [status, token]);
-    return (jsxRuntime.jsxs("div", { className: "ant-float-label-box", style: {
-            width: width ?? "100%",
-            height,
-        }, children: [jsxRuntime.jsx("div", { style: {
-                    width: "100%",
-                    height: "100%",
-                    overflow: "hidden",
-                    borderRadius: token.borderRadius,
-                }, children: children }), jsxRuntime.jsx("label", { className: "ant-float-label-box-label", style: {
-                    color: focused ? statusColor.textColorActive : statusColor.textColor,
-                    height: focused || haveValue ? "auto" : "100%",
-                    transform: focused || haveValue
-                        ? "translate(14px, -9px) scale(0.75)"
-                        : `translate(1em, 0px) scale(1)`,
-                }, children: label }), jsxRuntime.jsx("fieldset", { style: {
-                    border: focused
-                        ? `2px solid ${statusColor.borderColorActive}`
-                        : `1px solid ${statusColor.borderColor}`,
-                    borderRadius: token.borderRadius,
-                }, className: "ant-float-label-box-fieldset", children: jsxRuntime.jsx("legend", { className: "ant-float-label-box-legend", style: {
-                        maxWidth: focused || haveValue ? "100%" : "0.01px",
-                    }, children: label }) })] }));
-}
-
-function FloatAutoComplete({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }) {
-    const initFlag = react.useRef(false);
-    const [isFocus, setIsFocus] = react.useState(false);
-    const [inputValue, setInputValue] = react.useState(defaultValue ?? value);
-    const handleFocus = react.useCallback((e) => {
-        setIsFocus(true);
-        if (onFocus) {
-            onFocus(e);
-        }
-    }, [onFocus]);
-    const handleBlur = react.useCallback((e) => {
-        setIsFocus(false);
-        setInputValue(e.target.value);
-        if (onBlur) {
-            onBlur(e);
-        }
-    }, [onBlur]);
-    const handleChange = react.useCallback((value, option) => {
-        setInputValue(value);
-        if (onChange) {
-            onChange(value, option);
-        }
-    }, [onChange]);
-    react.useEffect(() => {
-        if (initFlag.current) {
-            setInputValue(value);
-        }
-        initFlag.current = true;
-        return () => {
-            initFlag.current = false;
-        };
-    }, [value]);
-    return (jsxRuntime.jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: !!inputValue, width: style?.width, height: style?.height, status: restProps.status, children: jsxRuntime.jsx(antd.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" }) }));
-}
-
-function FloatCascader({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }) {
-    const initFlag = react.useRef(false);
-    const [isFocus, setIsFocus] = react.useState(false);
-    const [inputValue, setInputValue] = react.useState(defaultValue ?? value);
-    const handleFocus = react.useCallback((e) => {
-        setIsFocus(true);
-        if (onFocus) {
-            onFocus(e);
-        }
-    }, [onFocus]);
-    const handleBlur = react.useCallback((e) => {
-        setIsFocus(false);
-        if (onBlur) {
-            onBlur(e);
-        }
-    }, [onBlur]);
-    const handleChange = react.useCallback((value, selectedOptions) => {
-        setInputValue(value);
-        if (onChange) {
-            onChange(value, selectedOptions);
-        }
-    }, [onChange]);
-    react.useEffect(() => {
-        if (initFlag.current) {
-            setInputValue(value);
-        }
-        initFlag.current = true;
-        return () => {
-            initFlag.current = false;
-        };
-    }, [value]);
-    const haveValue = react.useMemo(() => {
-        const currValue = Array.isArray(inputValue) && inputValue.length === 0
-            ? undefined
-            : inputValue;
-        return !!currValue;
-    }, [inputValue]);
-    return (jsxRuntime.jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: haveValue, width: style?.width, height: style?.height, status: restProps.status, children: jsxRuntime.jsx(antd.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" }) }));
-}
-
-function FloatDatePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }) {
-    const initFlag = react.useRef(false);
-    const [isFocus, setIsFocus] = react.useState(false);
-    const [inputValue, setInputValue] = react.useState(defaultValue ?? value);
-    const handleFocus = react.useCallback((event, info) => {
-        setIsFocus(true);
-        if (onFocus) {
-            onFocus(event, info);
-        }
-    }, [onFocus]);
-    const handleBlur = react.useCallback((event, info) => {
-        setIsFocus(false);
-        if (onBlur) {
-            onBlur(event, info);
-        }
-    }, [onBlur]);
-    const handleChange = react.useCallback((value, dateString) => {
-        setInputValue(value);
-        if (onChange) {
-            onChange(value, dateString);
-        }
-    }, [onChange]);
-    react.useEffect(() => {
-        if (initFlag.current) {
-            setInputValue(value);
-        }
-        initFlag.current = true;
-        return () => {
-            initFlag.current = false;
-        };
-    }, [value]);
-    return (jsxRuntime.jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: !!inputValue, width: style?.width, height: style?.height, status: restProps.status, children: jsxRuntime.jsx(antd.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: "" }) }));
-}
-
-function FloatInput({ placeholder, onFocus, onBlur, value, defaultValue, style, size, ...restProps }) {
-    const initFlag = react.useRef(false);
-    const [isFocus, setIsFocus] = react.useState(false);
-    const [inputValue, setInputValue] = react.useState(defaultValue ?? value);
-    const handleFocus = react.useCallback((e) => {
-        setIsFocus(true);
-        if (onFocus) {
-            onFocus(e);
-        }
-    }, [onFocus]);
-    const handleBlur = react.useCallback((e) => {
-        setIsFocus(false);
-        setInputValue(e.target.value);
-        if (onBlur) {
-            onBlur(e);
-        }
-    }, [onBlur]);
-    react.useEffect(() => {
-        if (initFlag.current) {
-            setInputValue(value);
-        }
-        initFlag.current = true;
-        return () => {
-            initFlag.current = false;
-        };
-    }, [value]);
-    return (jsxRuntime.jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: !!inputValue, width: style?.width, height: style?.height, status: restProps.status, children: jsxRuntime.jsx(antd.Input, { style: { ...style, width: "100%", border: "none" }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size }) }));
-}
-
-function FloatInputNumber({ placeholder, onFocus, onBlur, value, defaultValue, style, size, ...restProps }) {
-    const initFlag = react.useRef(false);
-    const [isFocus, setIsFocus] = react.useState(false);
-    const [inputValue, setInputValue] = react.useState(defaultValue ?? value);
-    const handleFocus = react.useCallback((e) => {
-        setIsFocus(true);
-        if (onFocus) {
-            onFocus(e);
-        }
-    }, [onFocus]);
-    const handleBlur = react.useCallback((e) => {
-        setIsFocus(false);
-        setInputValue(e.target.value);
-        if (onBlur) {
-            onBlur(e);
-        }
-    }, [onBlur]);
-    react.useEffect(() => {
-        if (initFlag.current) {
-            setInputValue(value);
-        }
-        initFlag.current = true;
-        return () => {
-            initFlag.current = false;
-        };
-    }, [value]);
-    return (jsxRuntime.jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: !!inputValue, width: style?.width, height: style?.height, status: restProps.status, children: jsxRuntime.jsx(antd.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" }) }));
-}
-
-const { RangePicker } = antd.DatePicker;
-function FloatRangePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }) {
-    const initFlag = react.useRef(false);
-    const [isFocus, setIsFocus] = react.useState(false);
-    const [inputValue, setInputValue] = react.useState(defaultValue ?? value);
-    const handleFocus = react.useCallback((event, info) => {
-        setIsFocus(true);
-        if (onFocus) {
-            onFocus(event, info);
-        }
-    }, [onFocus]);
-    const handleBlur = react.useCallback((event, info) => {
-        setIsFocus(false);
-        if (onBlur) {
-            onBlur(event, info);
-        }
-    }, [onBlur]);
-    const handleChange = react.useCallback((value, dateString) => {
-        setInputValue(value);
-        if (onChange) {
-            onChange(value, dateString);
-        }
-    }, [onChange]);
-    react.useEffect(() => {
-        if (initFlag.current) {
-            setInputValue(value);
-        }
-        initFlag.current = true;
-        return () => {
-            initFlag.current = false;
-        };
-    }, [value]);
-    const haveValue = react.useMemo(() => {
-        return !!(isFocus || inputValue);
-    }, [inputValue, isFocus]);
-    return (jsxRuntime.jsx(FloattingLabelBox, { label: haveValue && placeholder ? placeholder.join(" - ") : "", focused: isFocus, haveValue: haveValue, width: style?.width, height: style?.height, status: restProps.status, children: jsxRuntime.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 }) }));
-}
-
-function FloatSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, ...restProps }) {
-    const initFlag = react.useRef(false);
-    const [isFocus, setIsFocus] = react.useState(false);
-    const [inputValue, setInputValue] = react.useState(defaultValue ?? value);
-    const handleFocus = react.useCallback((e) => {
-        setIsFocus(true);
-        if (onFocus) {
-            onFocus(e);
-        }
-    }, [onFocus]);
-    const handleBlur = react.useCallback((e) => {
-        setIsFocus(false);
-        if (onBlur) {
-            onBlur(e);
-        }
-    }, [onBlur]);
-    const handleChange = react.useCallback((value, option) => {
-        setInputValue(value);
-        if (onChange) {
-            onChange(value, option);
-        }
-    }, [onChange]);
-    react.useEffect(() => {
-        if (initFlag.current) {
-            setInputValue(value);
-        }
-        initFlag.current = true;
-        return () => {
-            initFlag.current = false;
-        };
-    }, [value]);
-    const haveValue = react.useMemo(() => {
-        const currValue = Array.isArray(inputValue) && inputValue.length === 0
-            ? undefined
-            : inputValue;
-        return !!currValue;
-    }, [inputValue]);
-    return (jsxRuntime.jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: haveValue, width: style?.width, height: style?.height, status: restProps.status, children: jsxRuntime.jsx(antd.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" }) }));
-}
-
-function FloatTimePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, ...restProps }) {
-    const initFlag = react.useRef(false);
-    const [isFocus, setIsFocus] = react.useState(false);
-    const [inputValue, setInputValue] = react.useState(defaultValue ?? value);
-    const handleFocus = react.useCallback((e, info) => {
-        setIsFocus(true);
-        if (onFocus) {
-            onFocus(e, info);
-        }
-    }, [onFocus]);
-    const handleBlur = react.useCallback((e, info) => {
-        setIsFocus(false);
-        if (onBlur) {
-            onBlur(e, info);
-        }
-    }, [onBlur]);
-    const handleChange = react.useCallback((value, option) => {
-        setInputValue(value);
-        if (onChange) {
-            onChange(value, option);
-        }
-    }, [onChange]);
-    react.useEffect(() => {
-        if (initFlag.current) {
-            setInputValue(value);
-        }
-        initFlag.current = true;
-        return () => {
-            initFlag.current = false;
-        };
-    }, [value]);
-    const haveValue = react.useMemo(() => {
-        const currValue = Array.isArray(inputValue) && inputValue.length === 0
-            ? undefined
-            : inputValue;
-        return !!currValue;
-    }, [inputValue]);
-    return (jsxRuntime.jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: haveValue, width: style?.width, height: style?.height, status: restProps.status, children: jsxRuntime.jsx(antd.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: "" }) }));
-}
-
-function FloatTreeSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }) {
-    const initFlag = react.useRef(false);
-    const [isFocus, setIsFocus] = react.useState(false);
-    const [inputValue, setInputValue] = react.useState(defaultValue ?? value);
-    const handleFocus = react.useCallback((e) => {
-        setIsFocus(true);
-        if (onFocus) {
-            onFocus(e);
-        }
-    }, [onFocus]);
-    const handleBlur = react.useCallback((e) => {
-        setIsFocus(false);
-        if (onBlur) {
-            onBlur(e);
-        }
-    }, [onBlur]);
-    const handleChange = react.useCallback((value, labelList, extra) => {
-        setInputValue(value);
-        if (onChange) {
-            onChange(value, labelList, extra);
-        }
-    }, [onChange]);
-    react.useEffect(() => {
-        if (initFlag.current) {
-            setInputValue(value);
-        }
-        initFlag.current = true;
-        return () => {
-            initFlag.current = false;
-        };
-    }, [value]);
-    const haveValue = react.useMemo(() => {
-        const currValue = Array.isArray(inputValue) && inputValue.length === 0
-            ? undefined
-            : inputValue;
-        return !!currValue;
-    }, [inputValue]);
-    return (jsxRuntime.jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: haveValue, width: style?.width, height: style?.height, status: restProps.status, children: jsxRuntime.jsx(antd.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" }) }));
-}
-
-exports.FloatAutoComplete = FloatAutoComplete;
-exports.FloatCascader = FloatCascader;
-exports.FloatDatePicker = FloatDatePicker;
-exports.FloatInput = FloatInput;
-exports.FloatInputNumber = FloatInputNumber;
-exports.FloatRangePicker = FloatRangePicker;
-exports.FloatSelect = FloatSelect;
-exports.FloatTimePicker = FloatTimePicker;
-exports.FloatTreeSelect = FloatTreeSelect;
-exports.FloattingLabelBox = FloattingLabelBox;