ant-float-label 1.0.2 → 1.0.4

package/README.md

@@ -1,6 +1,21 @@
 # Antd 5 form style similar to MUI
 
-```
+```sh
 npm install ant-float-label
 ```
+
+```js
+import {
+	FloatDatePicker,
+	FloatInput,
+	FloatInputNumber,
+	FloatSelect,
+	FloatRangePicker,
+	FloatCascader,
+	FloatTreeSelect,
+	FloatAutoComplete,
+	FloatTimePicker,
+} from "ant-float-label";
+```
+
 ![Alt text](image.png)

package/dist/README.md

@@ -1,6 +1,21 @@
 # Antd 5 form style similar to MUI
 
-```
+```sh
 npm install ant-float-label
 ```
+
+```js
+import {
+	FloatDatePicker,
+	FloatInput,
+	FloatInputNumber,
+	FloatSelect,
+	FloatRangePicker,
+	FloatCascader,
+	FloatTreeSelect,
+	FloatAutoComplete,
+	FloatTimePicker,
+} from "ant-float-label";
+```
+
 ![Alt text](image.png)

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

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

package/dist/index.css

@@ -3,4 +3,5 @@
 .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;}
 .ant-float-label-form-picker {border:none!important;box-shadow:none!important;}
-.ant-float-label-form-select .ant-select-selector {border:none!important;box-shadow:none!important;}.ant-float-label-form-select{height:auto!important;}
+.ant-float-label-form-select .ant-select-selector {border:none!important;box-shadow:none!important;}.ant-float-label-form-select{height:auto!important;}
+.ant-float-label-form-input-password{position:static;}

package/dist/index.d.ts

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

package/dist/index.js

@@ -388,4 +388,34 @@ function FloatTreeSelect({ placeholder, onFocus, onBlur, value, defaultValue, st
             }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: handleChange, rootClassName: "ant-float-label-form-select" }) }));
 }
 
-export { FloatAutoComplete, FloatCascader, FloatDatePicker, FloatInput, FloatInputNumber, FloatRangePicker, FloatSelect, FloatTimePicker, FloatTreeSelect, FloattingLabelBox };
+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);
+        }
+        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, 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" }) }));
+}
+
+export { FloatAutoComplete, FloatCascader, FloatDatePicker, FloatInput, FloatInputNumber, FloatPassword, FloatRangePicker, FloatSelect, FloatTimePicker, FloatTreeSelect, FloattingLabelBox };

package/dist/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",

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "ant-float-label",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "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",

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;