ant-float-label 2.0.0 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/README.md +162 -162
- package/dist/LICENSE +21 -21
- package/dist/README.md +162 -162
- package/dist/component/FloatAutoComplete/FloatAutoComplete.stories.d.ts +11 -0
- package/dist/component/FloatAutoComplete/index.d.ts +2 -6
- package/dist/component/FloatCascader/FloatCascader.stories.d.ts +10 -0
- package/dist/component/FloatCascader/index.d.ts +3 -6
- package/dist/component/FloatDatePicker/FloatDatePicker.stories.d.ts +13 -0
- package/dist/component/FloatDatePicker/index.d.ts +2 -6
- package/dist/component/FloatFormItem/FloatFormItem.stories.d.ts +9 -0
- package/dist/component/FloatInput/FloatInput.stories.d.ts +15 -0
- package/dist/component/FloatInput/index.d.ts +2 -6
- package/dist/component/FloatInputNumber/FloatInputNumber.stories.d.ts +13 -0
- package/dist/component/FloatInputNumber/index.d.ts +2 -6
- package/dist/component/FloatItemList/FloatItemList.stories.d.ts +6 -0
- package/dist/component/FloatPassword/FloatPassword.stories.d.ts +11 -0
- package/dist/component/FloatPassword/index.d.ts +2 -6
- package/dist/component/FloatRangePicker/FloatRangePicker.stories.d.ts +10 -0
- package/dist/component/FloatRangePicker/index.d.ts +4 -6
- package/dist/component/FloatSelect/FloatSelect.stories.d.ts +13 -0
- package/dist/component/FloatSelect/index.d.ts +2 -6
- package/dist/component/FloatTimePicker/FloatTimePicker.stories.d.ts +11 -0
- package/dist/component/FloatTimePicker/index.d.ts +2 -6
- package/dist/component/FloatTreeSelect/FloatTreeSelect.stories.d.ts +12 -0
- package/dist/component/FloatTreeSelect/index.d.ts +2 -6
- package/dist/component/FloatingLabelBox/index.d.ts +2 -2
- package/dist/hook/useValueHandle.d.ts +3 -1
- package/dist/index.css +7 -7
- package/dist/index.js +76 -52
- package/dist/index.js.map +1 -1
- package/dist/package.json +57 -46
- package/dist/types/index.d.ts +6 -0
- package/package.json +57 -46
package/dist/README.md
CHANGED
|
@@ -1,162 +1,162 @@
|
|
|
1
|
-
# Ant Float Label
|
|
2
|
-
|
|
3
|
-
A comprehensive wrapper library for Ant Design components that implements the elegant "Floating Label" pattern (similar to Material UI). This library provides a seamless way to modernize your forms while maintaining the full power and theming capabilities of Ant Design.
|
|
4
|
-
|
|
5
|
-
[](https://www.npmjs.com/package/ant-float-label)
|
|
6
|
-
[](https://github.com/razr001/ant-float-label/blob/master/LICENSE)
|
|
7
|
-
|
|
8
|
-
## Features
|
|
9
|
-
|
|
10
|
-
- **✨ Modern Aesthetics**: Brings the popular floating label design pattern to Ant Design.
|
|
11
|
-
- **🎨 Theme Compatible**: Fully integrates with Ant Design 5+ Token System (Design Tokens), supporting light and dark modes automatically.
|
|
12
|
-
- **🛠 TypeScript Ready**: Written in TypeScript with full type definitions.
|
|
13
|
-
- **🧩 Complete Suite**: Supports a wide range of input components including Input, Select, DatePicker, Cascader, TreeSelect, and more.
|
|
14
|
-
- **🚀 Easy Integration**: Works as a drop-in replacement for standard Ant Design components.
|
|
15
|
-
- **📱 Responsive**: Adapts perfectly to different screen sizes and form layouts.
|
|
16
|
-
|
|
17
|
-
## Installation
|
|
18
|
-
|
|
19
|
-
Install via npm, yarn, or pnpm:
|
|
20
|
-
|
|
21
|
-
```bash
|
|
22
|
-
npm install ant-float-label
|
|
23
|
-
# or
|
|
24
|
-
yarn add ant-float-label
|
|
25
|
-
# or
|
|
26
|
-
pnpm add ant-float-label
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
Ensure you have the peer dependencies installed:
|
|
30
|
-
|
|
31
|
-
```bash
|
|
32
|
-
npm install antd react react-dom
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
## Usage
|
|
36
|
-
|
|
37
|
-
### Basic Usage
|
|
38
|
-
|
|
39
|
-
You can use the components directly. Passing the `placeholder` prop will automatically act as the floating label content.
|
|
40
|
-
|
|
41
|
-
```tsx
|
|
42
|
-
import React, { useState } from 'react';
|
|
43
|
-
import { FloatInput, FloatSelect } from 'ant-float-label';
|
|
44
|
-
|
|
45
|
-
const App = () => {
|
|
46
|
-
const [value, setValue] = useState('');
|
|
47
|
-
|
|
48
|
-
return (
|
|
49
|
-
<div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
|
|
50
|
-
{/* The placeholder acts as the floating label */}
|
|
51
|
-
<FloatInput
|
|
52
|
-
placeholder="Username"
|
|
53
|
-
value={value}
|
|
54
|
-
onChange={(e) => setValue(e.target.value)}
|
|
55
|
-
/>
|
|
56
|
-
|
|
57
|
-
<FloatSelect
|
|
58
|
-
placeholder="Gender"
|
|
59
|
-
options={[
|
|
60
|
-
{ label: 'Male', value: 'male' },
|
|
61
|
-
{ label: 'Female', value: 'female' },
|
|
62
|
-
]}
|
|
63
|
-
/>
|
|
64
|
-
</div>
|
|
65
|
-
);
|
|
66
|
-
};
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
### Using with Ant Design Form
|
|
70
|
-
|
|
71
|
-
The recommended way to use this library in forms is with `FloatFormItem`. It automatically handles the label state and passes it to the underlying component.
|
|
72
|
-
|
|
73
|
-
```tsx
|
|
74
|
-
import React from 'react';
|
|
75
|
-
import { Form, Button } from 'antd';
|
|
76
|
-
import { FloatFormItem, FloatInput, FloatPassword } from 'ant-float-label';
|
|
77
|
-
|
|
78
|
-
const LoginForm = () => {
|
|
79
|
-
const [form] = Form.useForm();
|
|
80
|
-
|
|
81
|
-
const onFinish = (values) => {
|
|
82
|
-
console.log('Success:', values);
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
return (
|
|
86
|
-
<Form
|
|
87
|
-
form={form}
|
|
88
|
-
name="login"
|
|
89
|
-
onFinish={onFinish}
|
|
90
|
-
style={{ maxWidth: 400 }}
|
|
91
|
-
>
|
|
92
|
-
<FloatFormItem
|
|
93
|
-
name="username"
|
|
94
|
-
label="Username"
|
|
95
|
-
rules={[{ required: true, message: 'Please input your username!' }]}
|
|
96
|
-
>
|
|
97
|
-
<FloatInput />
|
|
98
|
-
</FloatFormItem>
|
|
99
|
-
|
|
100
|
-
<FloatFormItem
|
|
101
|
-
name="password"
|
|
102
|
-
label="Password"
|
|
103
|
-
rules={[{ required: true, message: 'Please input your password!' }]}
|
|
104
|
-
>
|
|
105
|
-
<FloatPassword />
|
|
106
|
-
</FloatFormItem>
|
|
107
|
-
|
|
108
|
-
<Form.Item>
|
|
109
|
-
<Button type="primary" htmlType="submit" block>
|
|
110
|
-
Log in
|
|
111
|
-
</Button>
|
|
112
|
-
</Form.Item>
|
|
113
|
-
</Form>
|
|
114
|
-
);
|
|
115
|
-
};
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
## Available Components
|
|
119
|
-
|
|
120
|
-
All components inherit props from their Ant Design counterparts.
|
|
121
|
-
|
|
122
|
-
| Component | Description |
|
|
123
|
-
|-----------|-------------|
|
|
124
|
-
| `FloatInput` | Wraps `Input` |
|
|
125
|
-
| `FloatPassword` | Wraps `Input.Password` |
|
|
126
|
-
| `FloatInputNumber` | Wraps `InputNumber` |
|
|
127
|
-
| `FloatSelect` | Wraps `Select` |
|
|
128
|
-
| `FloatDatePicker` | Wraps `DatePicker` |
|
|
129
|
-
| `FloatRangePicker` | Wraps `DatePicker.RangePicker` |
|
|
130
|
-
| `FloatTimePicker` | Wraps `TimePicker` |
|
|
131
|
-
| `FloatCascader` | Wraps `Cascader` |
|
|
132
|
-
| `FloatTreeSelect` | Wraps `TreeSelect` |
|
|
133
|
-
| `FloatAutoComplete` | Wraps `AutoComplete` |
|
|
134
|
-
| `FloatFormItem` | Specialized `Form.Item` for automatic label handling |
|
|
135
|
-
|
|
136
|
-
## Props
|
|
137
|
-
|
|
138
|
-
### Common Props
|
|
139
|
-
Most components accept all standard Ant Design props for their respective base component (e.g., `FloatInput` accepts all `InputProps`).
|
|
140
|
-
|
|
141
|
-
### Specific Props
|
|
142
|
-
|
|
143
|
-
- **label** (string | ReactNode): When used with `FloatFormItem`, the `label` prop of the FormItem is automatically used as the floating label.
|
|
144
|
-
- **placeholder** (string): When used standalone, the `placeholder` acts as the floating label text.
|
|
145
|
-
- **labelBoxProps** (object): Props passed to the internal wrapper for advanced styling (e.g. `style`, `className` for the box container).
|
|
146
|
-
|
|
147
|
-
## Customization
|
|
148
|
-
|
|
149
|
-
You can customize the appearance by overriding CSS variables or providing `labelBoxProps`. The library follows Ant Design's design token system, so changing your global theme config will automatically update these components.
|
|
150
|
-
|
|
151
|
-
```tsx
|
|
152
|
-
<FloatInput
|
|
153
|
-
placeholder="Custom Style"
|
|
154
|
-
labelBoxProps={{
|
|
155
|
-
style: { borderColor: 'red' }
|
|
156
|
-
}}
|
|
157
|
-
/>
|
|
158
|
-
```
|
|
159
|
-
|
|
160
|
-
## License
|
|
161
|
-
|
|
162
|
-
MIT © [razr001](https://github.com/razr001)
|
|
1
|
+
# Ant Float Label
|
|
2
|
+
|
|
3
|
+
A comprehensive wrapper library for Ant Design components that implements the elegant "Floating Label" pattern (similar to Material UI). This library provides a seamless way to modernize your forms while maintaining the full power and theming capabilities of Ant Design.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/ant-float-label)
|
|
6
|
+
[](https://github.com/razr001/ant-float-label/blob/master/LICENSE)
|
|
7
|
+
|
|
8
|
+
## Features
|
|
9
|
+
|
|
10
|
+
- **✨ Modern Aesthetics**: Brings the popular floating label design pattern to Ant Design.
|
|
11
|
+
- **🎨 Theme Compatible**: Fully integrates with Ant Design 5+ Token System (Design Tokens), supporting light and dark modes automatically.
|
|
12
|
+
- **🛠 TypeScript Ready**: Written in TypeScript with full type definitions.
|
|
13
|
+
- **🧩 Complete Suite**: Supports a wide range of input components including Input, Select, DatePicker, Cascader, TreeSelect, and more.
|
|
14
|
+
- **🚀 Easy Integration**: Works as a drop-in replacement for standard Ant Design components.
|
|
15
|
+
- **📱 Responsive**: Adapts perfectly to different screen sizes and form layouts.
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
Install via npm, yarn, or pnpm:
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm install ant-float-label
|
|
23
|
+
# or
|
|
24
|
+
yarn add ant-float-label
|
|
25
|
+
# or
|
|
26
|
+
pnpm add ant-float-label
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Ensure you have the peer dependencies installed:
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
npm install antd react react-dom
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Usage
|
|
36
|
+
|
|
37
|
+
### Basic Usage
|
|
38
|
+
|
|
39
|
+
You can use the components directly. Passing the `placeholder` prop will automatically act as the floating label content.
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import React, { useState } from 'react';
|
|
43
|
+
import { FloatInput, FloatSelect } from 'ant-float-label';
|
|
44
|
+
|
|
45
|
+
const App = () => {
|
|
46
|
+
const [value, setValue] = useState('');
|
|
47
|
+
|
|
48
|
+
return (
|
|
49
|
+
<div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
|
|
50
|
+
{/* The placeholder acts as the floating label */}
|
|
51
|
+
<FloatInput
|
|
52
|
+
placeholder="Username"
|
|
53
|
+
value={value}
|
|
54
|
+
onChange={(e) => setValue(e.target.value)}
|
|
55
|
+
/>
|
|
56
|
+
|
|
57
|
+
<FloatSelect
|
|
58
|
+
placeholder="Gender"
|
|
59
|
+
options={[
|
|
60
|
+
{ label: 'Male', value: 'male' },
|
|
61
|
+
{ label: 'Female', value: 'female' },
|
|
62
|
+
]}
|
|
63
|
+
/>
|
|
64
|
+
</div>
|
|
65
|
+
);
|
|
66
|
+
};
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### Using with Ant Design Form
|
|
70
|
+
|
|
71
|
+
The recommended way to use this library in forms is with `FloatFormItem`. It automatically handles the label state and passes it to the underlying component.
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
import React from 'react';
|
|
75
|
+
import { Form, Button } from 'antd';
|
|
76
|
+
import { FloatFormItem, FloatInput, FloatPassword } from 'ant-float-label';
|
|
77
|
+
|
|
78
|
+
const LoginForm = () => {
|
|
79
|
+
const [form] = Form.useForm();
|
|
80
|
+
|
|
81
|
+
const onFinish = (values) => {
|
|
82
|
+
console.log('Success:', values);
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
return (
|
|
86
|
+
<Form
|
|
87
|
+
form={form}
|
|
88
|
+
name="login"
|
|
89
|
+
onFinish={onFinish}
|
|
90
|
+
style={{ maxWidth: 400 }}
|
|
91
|
+
>
|
|
92
|
+
<FloatFormItem
|
|
93
|
+
name="username"
|
|
94
|
+
label="Username"
|
|
95
|
+
rules={[{ required: true, message: 'Please input your username!' }]}
|
|
96
|
+
>
|
|
97
|
+
<FloatInput />
|
|
98
|
+
</FloatFormItem>
|
|
99
|
+
|
|
100
|
+
<FloatFormItem
|
|
101
|
+
name="password"
|
|
102
|
+
label="Password"
|
|
103
|
+
rules={[{ required: true, message: 'Please input your password!' }]}
|
|
104
|
+
>
|
|
105
|
+
<FloatPassword />
|
|
106
|
+
</FloatFormItem>
|
|
107
|
+
|
|
108
|
+
<Form.Item>
|
|
109
|
+
<Button type="primary" htmlType="submit" block>
|
|
110
|
+
Log in
|
|
111
|
+
</Button>
|
|
112
|
+
</Form.Item>
|
|
113
|
+
</Form>
|
|
114
|
+
);
|
|
115
|
+
};
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
## Available Components
|
|
119
|
+
|
|
120
|
+
All components inherit props from their Ant Design counterparts.
|
|
121
|
+
|
|
122
|
+
| Component | Description |
|
|
123
|
+
|-----------|-------------|
|
|
124
|
+
| `FloatInput` | Wraps `Input` |
|
|
125
|
+
| `FloatPassword` | Wraps `Input.Password` |
|
|
126
|
+
| `FloatInputNumber` | Wraps `InputNumber` |
|
|
127
|
+
| `FloatSelect` | Wraps `Select` |
|
|
128
|
+
| `FloatDatePicker` | Wraps `DatePicker` |
|
|
129
|
+
| `FloatRangePicker` | Wraps `DatePicker.RangePicker` |
|
|
130
|
+
| `FloatTimePicker` | Wraps `TimePicker` |
|
|
131
|
+
| `FloatCascader` | Wraps `Cascader` |
|
|
132
|
+
| `FloatTreeSelect` | Wraps `TreeSelect` |
|
|
133
|
+
| `FloatAutoComplete` | Wraps `AutoComplete` |
|
|
134
|
+
| `FloatFormItem` | Specialized `Form.Item` for automatic label handling |
|
|
135
|
+
|
|
136
|
+
## Props
|
|
137
|
+
|
|
138
|
+
### Common Props
|
|
139
|
+
Most components accept all standard Ant Design props for their respective base component (e.g., `FloatInput` accepts all `InputProps`).
|
|
140
|
+
|
|
141
|
+
### Specific Props
|
|
142
|
+
|
|
143
|
+
- **label** (string | ReactNode): When used with `FloatFormItem`, the `label` prop of the FormItem is automatically used as the floating label.
|
|
144
|
+
- **placeholder** (string): When used standalone, the `placeholder` acts as the floating label text.
|
|
145
|
+
- **labelBoxProps** (object): Props passed to the internal wrapper for advanced styling (e.g. `style`, `className` for the box container).
|
|
146
|
+
|
|
147
|
+
## Customization
|
|
148
|
+
|
|
149
|
+
You can customize the appearance by overriding CSS variables or providing `labelBoxProps`. The library follows Ant Design's design token system, so changing your global theme config will automatically update these components.
|
|
150
|
+
|
|
151
|
+
```tsx
|
|
152
|
+
<FloatInput
|
|
153
|
+
placeholder="Custom Style"
|
|
154
|
+
labelBoxProps={{
|
|
155
|
+
style: { borderColor: 'red' }
|
|
156
|
+
}}
|
|
157
|
+
/>
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
## License
|
|
161
|
+
|
|
162
|
+
MIT © [razr001](https://github.com/razr001)
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { FloatAutoComplete } from "./index";
|
|
3
|
+
declare const meta: Meta<typeof FloatAutoComplete>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof FloatAutoComplete>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Required: Story;
|
|
8
|
+
export declare const WithDefaultValue: Story;
|
|
9
|
+
export declare const Disabled: Story;
|
|
10
|
+
export declare const ErrorStatus: Story;
|
|
11
|
+
export declare const Underlined: Story;
|
|
@@ -1,8 +1,4 @@
|
|
|
1
1
|
import { AutoCompleteProps } from "antd";
|
|
2
|
-
import { FloatingLabelBoxProps } from "../FloatingLabelBox";
|
|
3
2
|
import "./index.css";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
labelBoxProps?: FloatingLabelBoxProps;
|
|
7
|
-
}
|
|
8
|
-
export declare function FloatAutoComplete({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, ...restProps }: FloatAutoCompleteProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
import { FloatComponentProps } from "../../types";
|
|
4
|
+
export declare function FloatAutoComplete({ placeholder, label, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, status, ...restProps }: FloatComponentProps<AutoCompleteProps>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { FloatCascader } from "./index";
|
|
3
|
+
declare const meta: Meta<typeof FloatCascader>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof FloatCascader>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Required: Story;
|
|
8
|
+
export declare const Disabled: Story;
|
|
9
|
+
export declare const ErrorStatus: Story;
|
|
10
|
+
export declare const Underlined: Story;
|
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
import { CascaderProps } from "antd";
|
|
2
|
-
import {
|
|
3
|
-
export
|
|
2
|
+
import { FloatComponentProps } from "../../types";
|
|
3
|
+
export declare function FloatCascader({ placeholder, label, onFocus, onBlur, value, defaultValue, style, required, onChange, labelBoxProps, variant, status, ...restProps }: FloatComponentProps<CascaderProps> & {
|
|
4
4
|
multiple?: true;
|
|
5
|
-
required?: boolean;
|
|
6
5
|
value?: any;
|
|
7
6
|
defaultValue?: any;
|
|
8
|
-
|
|
9
|
-
}
|
|
10
|
-
export declare function FloatCascader({ placeholder, onFocus, onBlur, value, defaultValue, style, required, onChange, labelBoxProps, variant, ...restProps }: FloatCascadertProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { FloatDatePicker } from "./index";
|
|
3
|
+
declare const meta: Meta<typeof FloatDatePicker>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof FloatDatePicker>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Required: Story;
|
|
8
|
+
export declare const Disabled: Story;
|
|
9
|
+
export declare const ErrorStatus: Story;
|
|
10
|
+
export declare const WarningStatus: Story;
|
|
11
|
+
export declare const MonthPicker: Story;
|
|
12
|
+
export declare const YearPicker: Story;
|
|
13
|
+
export declare const Underlined: Story;
|
|
@@ -1,8 +1,4 @@
|
|
|
1
1
|
import { DatePickerProps } from "antd";
|
|
2
2
|
import "./index.css";
|
|
3
|
-
import {
|
|
4
|
-
export
|
|
5
|
-
required?: boolean;
|
|
6
|
-
labelBoxProps?: FloatingLabelBoxProps;
|
|
7
|
-
}
|
|
8
|
-
export declare function FloatDatePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, required, onChange, labelBoxProps, variant, ...restProps }: FloatDatePickerProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
import { FloatComponentProps } from "../../types";
|
|
4
|
+
export declare function FloatDatePicker({ placeholder, label, onFocus, onBlur, value, defaultValue, style, required, onChange, labelBoxProps, variant, status, ...restProps }: FloatComponentProps<DatePickerProps>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { FloatFormItem } from "./index";
|
|
3
|
+
declare const meta: Meta<typeof FloatFormItem>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof FloatFormItem>;
|
|
6
|
+
export declare const WithInput: Story;
|
|
7
|
+
export declare const WithValidation: Story;
|
|
8
|
+
export declare const WithSelect: Story;
|
|
9
|
+
export declare const ComplexForm: Story;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { FloatInput } from "./index";
|
|
3
|
+
declare const meta: Meta<typeof FloatInput>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof FloatInput>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Required: Story;
|
|
8
|
+
export declare const WithDefaultValue: Story;
|
|
9
|
+
export declare const Disabled: Story;
|
|
10
|
+
export declare const ErrorStatus: Story;
|
|
11
|
+
export declare const WarningStatus: Story;
|
|
12
|
+
export declare const Underlined: Story;
|
|
13
|
+
export declare const Filled: Story;
|
|
14
|
+
export declare const SmallSize: Story;
|
|
15
|
+
export declare const LargeSize: Story;
|
|
@@ -1,7 +1,3 @@
|
|
|
1
1
|
import { InputProps } from "antd";
|
|
2
|
-
import {
|
|
3
|
-
export
|
|
4
|
-
required?: boolean;
|
|
5
|
-
labelBoxProps?: FloatingLabelBoxProps;
|
|
6
|
-
}
|
|
7
|
-
export declare function FloatInput({ placeholder, onFocus, onBlur, onChange, value, defaultValue, style, size, required, labelBoxProps, variant, ...restProps }: FloatInputProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
import { FloatComponentProps } from "../../types";
|
|
3
|
+
export declare function FloatInput({ placeholder, label, onFocus, onBlur, onChange, value, defaultValue, style, size, required, labelBoxProps, variant, status, ...restProps }: FloatComponentProps<InputProps>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { FloatInputNumber } from "./index";
|
|
3
|
+
declare const meta: Meta<typeof FloatInputNumber>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof FloatInputNumber>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Required: Story;
|
|
8
|
+
export declare const WithDefaultValue: Story;
|
|
9
|
+
export declare const WithMinMax: Story;
|
|
10
|
+
export declare const WithStep: Story;
|
|
11
|
+
export declare const Disabled: Story;
|
|
12
|
+
export declare const ErrorStatus: Story;
|
|
13
|
+
export declare const Underlined: Story;
|
|
@@ -1,8 +1,4 @@
|
|
|
1
1
|
import { InputNumberProps } from "antd";
|
|
2
2
|
import "./index.css";
|
|
3
|
-
import {
|
|
4
|
-
export
|
|
5
|
-
required?: boolean;
|
|
6
|
-
labelBoxProps?: FloatingLabelBoxProps;
|
|
7
|
-
}
|
|
8
|
-
export declare function FloatInputNumber({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, ...restProps }: FloatInputNumberProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
import { FloatComponentProps } from "../../types";
|
|
4
|
+
export declare function FloatInputNumber({ placeholder, label, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, status, ...restProps }: FloatComponentProps<InputNumberProps>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { FloatPassword } from "./index";
|
|
3
|
+
declare const meta: Meta<typeof FloatPassword>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof FloatPassword>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Required: Story;
|
|
8
|
+
export declare const WithDefaultValue: Story;
|
|
9
|
+
export declare const Disabled: Story;
|
|
10
|
+
export declare const ErrorStatus: Story;
|
|
11
|
+
export declare const Underlined: Story;
|
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
import { FloatingLabelBoxProps } from "../FloatingLabelBox";
|
|
2
1
|
import { PasswordProps } from "antd/es/input";
|
|
3
2
|
import "./index.css";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
labelBoxProps?: FloatingLabelBoxProps;
|
|
7
|
-
}
|
|
8
|
-
export declare function FloatPassword({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, ...restProps }: FloatPasswordProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
import { FloatComponentProps } from "../../types";
|
|
4
|
+
export declare function FloatPassword({ placeholder, label, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, status, ...restProps }: FloatComponentProps<PasswordProps>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { FloatRangePicker } from "./index";
|
|
3
|
+
declare const meta: Meta<typeof FloatRangePicker>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof FloatRangePicker>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Required: Story;
|
|
8
|
+
export declare const Disabled: Story;
|
|
9
|
+
export declare const ErrorStatus: Story;
|
|
10
|
+
export declare const Underlined: Story;
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import "./index.css";
|
|
2
2
|
import { RangePickerProps } from "antd/es/date-picker";
|
|
3
|
-
import {
|
|
4
|
-
export
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
export declare function FloatRangePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, ...restProps }: FloatRangePickerProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
import { FloatComponentProps } from "../../types";
|
|
4
|
+
export declare function FloatRangePicker({ placeholder, label, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, status, ...restProps }: Omit<FloatComponentProps<RangePickerProps>, "label"> & {
|
|
5
|
+
label?: [string, string];
|
|
6
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { FloatSelect } from "./index";
|
|
3
|
+
declare const meta: Meta<typeof FloatSelect>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof FloatSelect>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Required: Story;
|
|
8
|
+
export declare const WithDefaultValue: Story;
|
|
9
|
+
export declare const Multiple: Story;
|
|
10
|
+
export declare const Tags: Story;
|
|
11
|
+
export declare const Disabled: Story;
|
|
12
|
+
export declare const ErrorStatus: Story;
|
|
13
|
+
export declare const Underlined: Story;
|
|
@@ -1,8 +1,4 @@
|
|
|
1
1
|
import { SelectProps } from "antd";
|
|
2
2
|
import "./index.css";
|
|
3
|
-
import {
|
|
4
|
-
export
|
|
5
|
-
required?: boolean;
|
|
6
|
-
labelBoxProps?: FloatingLabelBoxProps;
|
|
7
|
-
}
|
|
8
|
-
export declare function FloatSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, required, labelBoxProps, variant, ...restProps }: FloatSelectProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
import { FloatComponentProps } from "../../types";
|
|
4
|
+
export declare function FloatSelect({ placeholder, label, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, required, labelBoxProps, variant, status, ...restProps }: FloatComponentProps<SelectProps>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { FloatTimePicker } from "./index";
|
|
3
|
+
declare const meta: Meta<typeof FloatTimePicker>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof FloatTimePicker>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Required: Story;
|
|
8
|
+
export declare const Disabled: Story;
|
|
9
|
+
export declare const ErrorStatus: Story;
|
|
10
|
+
export declare const CustomFormat: Story;
|
|
11
|
+
export declare const Underlined: Story;
|
|
@@ -1,7 +1,3 @@
|
|
|
1
1
|
import { TimePickerProps } from "antd";
|
|
2
|
-
import {
|
|
3
|
-
export
|
|
4
|
-
required?: boolean;
|
|
5
|
-
labelBoxProps?: FloatingLabelBoxProps;
|
|
6
|
-
}
|
|
7
|
-
export declare function FloatTimePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, required, labelBoxProps, variant, ...restProps }: FloatTimePickerProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
import { FloatComponentProps } from "../../types";
|
|
3
|
+
export declare function FloatTimePicker({ placeholder, label, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, required, labelBoxProps, variant, status, ...restProps }: FloatComponentProps<TimePickerProps>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { FloatTreeSelect } from "./index";
|
|
3
|
+
declare const meta: Meta<typeof FloatTreeSelect>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof FloatTreeSelect>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Required: Story;
|
|
8
|
+
export declare const Multiple: Story;
|
|
9
|
+
export declare const Checkable: Story;
|
|
10
|
+
export declare const Disabled: Story;
|
|
11
|
+
export declare const ErrorStatus: Story;
|
|
12
|
+
export declare const Underlined: Story;
|
|
@@ -1,7 +1,3 @@
|
|
|
1
1
|
import { TreeSelectProps } from "antd";
|
|
2
|
-
import {
|
|
3
|
-
export
|
|
4
|
-
required?: boolean;
|
|
5
|
-
labelBoxProps?: FloatingLabelBoxProps;
|
|
6
|
-
}
|
|
7
|
-
export declare function FloatTreeSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, required, variant, labelBoxProps, ...restProps }: FloatTreeSelectProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
import { FloatComponentProps } from "../../types";
|
|
3
|
+
export declare function FloatTreeSelect({ placeholder, label, onFocus, onBlur, value, defaultValue, style, size, onChange, required, variant, labelBoxProps, status, ...restProps }: FloatComponentProps<TreeSelectProps>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -8,10 +8,10 @@ export interface FloatingLabelBoxProps {
|
|
|
8
8
|
children?: React.ReactNode;
|
|
9
9
|
width?: string | number;
|
|
10
10
|
height?: string | number;
|
|
11
|
-
status?: InputProps[
|
|
11
|
+
status?: InputProps["status"];
|
|
12
12
|
required?: boolean;
|
|
13
13
|
fieldsetStyle?: React.CSSProperties;
|
|
14
14
|
labelStyle?: React.CSSProperties;
|
|
15
|
-
variant?: InputProps[
|
|
15
|
+
variant?: InputProps["variant"];
|
|
16
16
|
}
|
|
17
17
|
export declare function FloatingLabelBox({ focused, hasValue, label, children, width, height, status, required, fieldsetStyle, labelStyle, variant, }: FloatingLabelBoxProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare function useValueHandle({ defaultValue, value, onFocus, onBlur }: {
|
|
2
|
+
export declare function useValueHandle({ defaultValue, value, onFocus, onBlur, status: statusProp, }: {
|
|
3
3
|
defaultValue?: any;
|
|
4
4
|
value?: any;
|
|
5
5
|
id?: string;
|
|
6
6
|
onFocus?: (...args: any) => void;
|
|
7
7
|
onBlur?: (...args: any) => void;
|
|
8
|
+
status?: string;
|
|
8
9
|
}): {
|
|
9
10
|
hasValue: boolean;
|
|
10
11
|
handleChange: import("react").Dispatch<any>;
|
|
11
12
|
handleFocus: (...args: any) => void;
|
|
12
13
|
handleBlur: (...args: any) => void;
|
|
13
14
|
isFocus: boolean;
|
|
15
|
+
formItemStatus: string | undefined;
|
|
14
16
|
};
|