@aloudata/aloudata-design 3.0.0-beta.2 → 3.0.0-beta.21
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/dist/AMenu.d.ts +2 -0
- package/dist/AProgress/index.d.ts +1 -1
- package/dist/AProgress/index.js +19 -5
- package/dist/AProgress/index.js.map +1 -1
- package/dist/AProgress.d.ts +2 -0
- package/dist/Alert/index.d.ts +1 -1
- package/dist/Alert/index.js +22 -8
- package/dist/Alert/index.js.map +1 -1
- package/dist/Alert.d.ts +2 -0
- package/dist/App.d.ts +2 -0
- package/dist/Avatar/component/Avatar/index.d.ts +1 -1
- package/dist/Avatar/component/Avatar/index.js +4 -4
- package/dist/Avatar/component/Avatar/index.js.map +1 -1
- package/dist/Avatar/component/Avatar/type.d.ts +1 -1
- package/dist/Avatar/component/Avatar/type.js +6 -1
- package/dist/Avatar/component/Avatar/type.js.map +1 -1
- package/dist/Avatar/component/Avatar.d.ts +2 -0
- package/dist/Avatar/index.js +67 -8
- package/dist/Avatar/index.js.map +1 -1
- package/dist/Avatar.d.ts +2 -0
- package/dist/Badge/index.d.ts +1 -0
- package/dist/Badge/index.js +32 -9
- package/dist/Badge/index.js.map +1 -1
- package/dist/Badge.d.ts +2 -0
- package/dist/Breadcrumb/index.js +21 -12
- package/dist/Breadcrumb/index.js.map +1 -1
- package/dist/Breadcrumb.d.ts +2 -0
- package/dist/Button/index.d.ts +4 -0
- package/dist/Button/index.js +39 -32
- package/dist/Button/index.js.map +1 -1
- package/dist/Button.d.ts +2 -0
- package/dist/Card/index.js +5 -5
- package/dist/Card/index.js.map +1 -1
- package/dist/Card.d.ts +2 -0
- package/dist/Carousel.d.ts +2 -0
- package/dist/Checkbox/component/CheckboxGroup.d.ts +2 -0
- package/dist/Checkbox/index.js +5 -12
- package/dist/Checkbox/index.js.map +1 -1
- package/dist/Checkbox/type.d.ts +4 -1
- package/dist/Checkbox.d.ts +2 -0
- package/dist/Col.d.ts +2 -0
- package/dist/Collapse/index.d.ts +2 -0
- package/dist/Collapse/index.js +40 -24
- package/dist/Collapse/index.js.map +1 -1
- package/dist/Collapse.d.ts +2 -0
- package/dist/ColorPicker/ComplexColorPicker.d.ts +2 -0
- package/dist/ColorPicker.d.ts +2 -0
- package/dist/ConfigProvider.d.ts +2 -0
- package/dist/DataPreviewTable/components/Body.d.ts +2 -0
- package/dist/DataPreviewTable/components/DragBar.d.ts +2 -0
- package/dist/DataPreviewTable/components/Header.d.ts +2 -0
- package/dist/DataPreviewTable/index.js +1 -1
- package/dist/DataPreviewTable/index.js.map +1 -1
- package/dist/DataPreviewTable.d.ts +2 -0
- package/dist/DatePicker/index.d.ts +38 -3
- package/dist/DatePicker/index.js +55 -9
- package/dist/DatePicker/index.js.map +1 -1
- package/dist/DatePicker.d.ts +2 -0
- package/dist/Divider.d.ts +2 -0
- package/dist/DoubleCircleIcon.d.ts +2 -0
- package/dist/Drawer/index.d.ts +2 -0
- package/dist/Drawer/index.js +102 -47
- package/dist/Drawer/index.js.map +1 -1
- package/dist/Drawer.d.ts +2 -0
- package/dist/Dropdown/index.d.ts +5 -0
- package/dist/Dropdown/index.js +155 -34
- package/dist/Dropdown/index.js.map +1 -1
- package/dist/Dropdown.d.ts +2 -0
- package/dist/Empty.d.ts +2 -0
- package/dist/Form/index.d.ts +54 -4
- package/dist/Form/index.js +61 -34
- package/dist/Form/index.js.map +1 -1
- package/dist/Form.d.ts +2 -0
- package/dist/HighlightText/index.js +1 -1
- package/dist/HighlightText/index.js.map +1 -1
- package/dist/HighlightText.d.ts +2 -0
- package/dist/Icon.d.ts +2 -0
- package/dist/IconButton.d.ts +2 -0
- package/dist/Input/components/Input/index.d.ts +8 -2
- package/dist/Input/components/Input/index.js +18 -6
- package/dist/Input/components/Input/index.js.map +1 -1
- package/dist/Input/components/Input.d.ts +2 -0
- package/dist/Input/components/Password.d.ts +2 -0
- package/dist/Input/components/TextArea/index.d.ts +4 -0
- package/dist/Input/components/TextArea/index.js.map +1 -1
- package/dist/Input/components/TextArea.d.ts +2 -0
- package/dist/Input.d.ts +2 -0
- package/dist/InputNumber/type.d.ts +3 -2
- package/dist/InputNumber.d.ts +2 -0
- package/dist/InputSearch/index.js +0 -1
- package/dist/InputSearch/index.js.map +1 -1
- package/dist/InputSearch.d.ts +2 -0
- package/dist/Layout/index.js +1 -1
- package/dist/Layout/index.js.map +1 -1
- package/dist/Layout.d.ts +2 -0
- package/dist/List.d.ts +2 -0
- package/dist/LogicTree/DisplayLogicTree.d.ts +1 -1
- package/dist/LogicTree/DisplayLogicTree.js.map +1 -1
- package/dist/LogicTree/components/DisplayLogicItem/index.d.ts +1 -1
- package/dist/LogicTree/components/DisplayLogicItem/index.js +1 -1
- package/dist/LogicTree/components/DisplayLogicItem/index.js.map +1 -1
- package/dist/LogicTree/components/DisplayLogicItem.d.ts +2 -0
- package/dist/LogicTree/components/LogicItem/index.js +2 -3
- package/dist/LogicTree/components/LogicItem/index.js.map +1 -1
- package/dist/LogicTree/components/LogicItem.d.ts +2 -0
- package/dist/LogicTree/index.d.ts +1 -1
- package/dist/LogicTree/index.js +26 -10
- package/dist/LogicTree/index.js.map +1 -1
- package/dist/LogicTree.d.ts +2 -0
- package/dist/MemberPicker/components/NickLabel.js +1 -1
- package/dist/MemberPicker/components/NickLabel.js.map +1 -1
- package/dist/MemberPicker/components/Panel.js +13 -14
- package/dist/MemberPicker/components/Panel.js.map +1 -1
- package/dist/MemberPicker/index.js +10 -5
- package/dist/MemberPicker/index.js.map +1 -1
- package/dist/MemberPicker/utils.d.ts +2 -0
- package/dist/MemberPicker.d.ts +2 -0
- package/dist/Menu/index.d.ts +4 -0
- package/dist/Menu/index.js +35 -13
- package/dist/Menu/index.js.map +1 -1
- package/dist/Menu.d.ts +2 -0
- package/dist/Modal/index.d.ts +6 -2
- package/dist/Modal/index.js +119 -66
- package/dist/Modal/index.js.map +1 -1
- package/dist/Modal.d.ts +2 -0
- package/dist/OverflowCount.d.ts +2 -0
- package/dist/Pagination.d.ts +2 -0
- package/dist/Popconfirm/index.js +6 -1
- package/dist/Popconfirm/index.js.map +1 -1
- package/dist/Popconfirm.d.ts +2 -0
- package/dist/Popover/index.d.ts +1 -0
- package/dist/Popover/index.js +5 -3
- package/dist/Popover/index.js.map +1 -1
- package/dist/Popover.d.ts +2 -0
- package/dist/Progress/index.d.ts +0 -3
- package/dist/Progress/index.js +0 -3
- package/dist/Progress/index.js.map +1 -1
- package/dist/Progress.d.ts +2 -0
- package/dist/Radio/components/Group.d.ts +2 -0
- package/dist/Radio/components/Radio/index.js +14 -25
- package/dist/Radio/components/Radio/index.js.map +1 -1
- package/dist/Radio/components/Radio.d.ts +2 -0
- package/dist/Radio.d.ts +2 -0
- package/dist/RenameInput/index.js +0 -1
- package/dist/RenameInput/index.js.map +1 -1
- package/dist/RenameInput.d.ts +2 -0
- package/dist/Result.d.ts +2 -0
- package/dist/Row.d.ts +2 -0
- package/dist/ScrollArea.d.ts +2 -0
- package/dist/Select/BaseSelect.js +12 -7
- package/dist/Select/BaseSelect.js.map +1 -1
- package/dist/Select/Selector/MultipleSelector.js +10 -6
- package/dist/Select/Selector/MultipleSelector.js.map +1 -1
- package/dist/Select/Selector/index.d.ts +2 -0
- package/dist/Select/Selector/index.js +1 -1
- package/dist/Select/Selector/index.js.map +1 -1
- package/dist/Select/Selector.d.ts +2 -0
- package/dist/Select/components/Suffix.js +1 -1
- package/dist/Select/components/Suffix.js.map +1 -1
- package/dist/Select/interface.d.ts +4 -0
- package/dist/Select/utils/getWidthStyle.js.map +1 -1
- package/dist/Select.d.ts +2 -0
- package/dist/Skeleton.d.ts +2 -0
- package/dist/Slider.d.ts +2 -0
- package/dist/Space.d.ts +2 -0
- package/dist/Spin/CustomIcon.d.ts +2 -0
- package/dist/Spin.d.ts +2 -0
- package/dist/StatusLight.d.ts +2 -0
- package/dist/Steps/components/CustomDot.d.ts +2 -0
- package/dist/Steps/components/ProcessIcon.d.ts +2 -0
- package/dist/Steps/components/Step.d.ts +2 -0
- package/dist/Steps/index.js +6 -6
- package/dist/Steps/index.js.map +1 -1
- package/dist/Steps.d.ts +2 -0
- package/dist/Switch/index.js +21 -7
- package/dist/Switch/index.js.map +1 -1
- package/dist/Switch/test.d.ts +2 -0
- package/dist/Switch.d.ts +2 -0
- package/dist/Table/components/Footer/index.js +1 -1
- package/dist/Table/components/Footer/index.js.map +1 -1
- package/dist/Table/components/Footer.d.ts +2 -0
- package/dist/Table/hooks/useRowDnd.js +2 -8
- package/dist/Table/hooks/useRowDnd.js.map +1 -1
- package/dist/Table/hooks/useRowSelection.d.ts +1 -1
- package/dist/Table/hooks/useRowSelection.js +7 -9
- package/dist/Table/hooks/useRowSelection.js.map +1 -1
- package/dist/Table/index.js +1 -1
- package/dist/Table/index.js.map +1 -1
- package/dist/Table.d.ts +2 -0
- package/dist/Tabs/index.d.ts +1 -0
- package/dist/Tabs/index.js +37 -30
- package/dist/Tabs/index.js.map +1 -1
- package/dist/Tabs.d.ts +2 -0
- package/dist/Tag.d.ts +2 -0
- package/dist/TextLink.d.ts +2 -0
- package/dist/Tooltip/index.d.ts +7 -1
- package/dist/Tooltip/index.js +5 -3
- package/dist/Tooltip/index.js.map +1 -1
- package/dist/Tooltip.d.ts +2 -0
- package/dist/Tour/index.js +48 -38
- package/dist/Tour/index.js.map +1 -1
- package/dist/Tour.d.ts +2 -0
- package/dist/Tree/DirectoryTree.d.ts +2 -2
- package/dist/Tree/DirectoryTree.js.map +1 -1
- package/dist/Tree/Tree.d.ts +2 -2
- package/dist/Tree/Tree2.js +2 -2
- package/dist/Tree/Tree2.js.map +1 -1
- package/dist/Tree/index.d.ts +5 -2
- package/dist/Tree/index.js.map +1 -1
- package/dist/Tree.d.ts +2 -0
- package/dist/Typography.d.ts +2 -0
- package/dist/Upload/index.d.ts +15 -2
- package/dist/Upload/index.js +4 -2
- package/dist/Upload/index.js.map +1 -1
- package/dist/Upload.d.ts +2 -0
- package/dist/User.d.ts +2 -0
- package/dist/Watermark.d.ts +2 -0
- package/dist/_utils/floatingLayer.d.ts +15 -0
- package/dist/_utils/floatingLayer.js +30 -0
- package/dist/_utils/floatingLayer.js.map +1 -0
- package/dist/_utils/storybookArgTypes.d.ts +11 -0
- package/dist/_utils/storybookArgTypes.js +2 -0
- package/dist/aloudata-design.css +1 -1
- package/dist/index.d.ts +15 -6
- package/dist/index.js +8 -3
- package/dist/message.d.ts +2 -0
- package/dist/notification.d.ts +2 -0
- package/dist/theme/createTheme.d.ts +2 -0
- package/dist/theme/createTheme.js +46 -0
- package/dist/theme/createTheme.js.map +1 -0
- package/dist/theme/defaultTheme.d.ts +2 -0
- package/dist/theme/defaultTheme.js +19 -0
- package/dist/theme/defaultTheme.js.map +1 -0
- package/dist/theme/index.d.ts +5 -0
- package/dist/theme/index.js +4 -0
- package/dist/theme/initAldTheme.d.ts +2 -0
- package/dist/theme/initAldTheme.js +26 -0
- package/dist/theme/initAldTheme.js.map +1 -0
- package/dist/theme/themeToCssVars.d.ts +2 -0
- package/dist/theme/themeToCssVars.js +144 -0
- package/dist/theme/themeToCssVars.js.map +1 -0
- package/dist/theme/tokenMap.d.ts +5 -0
- package/dist/theme/tokenMap.js +12 -0
- package/dist/theme/tokenMap.js.map +1 -0
- package/dist/theme/types.d.ts +20 -0
- package/dist/theme/types.js +2 -0
- package/dist/theme.d.ts +2 -0
- package/package.json +10 -4
- package/dist/_utils/SimpleOverflow.d.ts +0 -14
- package/dist/_utils/SimpleOverflow.js +0 -61
- package/dist/_utils/SimpleOverflow.js.map +0 -1
package/dist/Form/index.d.ts
CHANGED
|
@@ -1,8 +1,42 @@
|
|
|
1
|
-
import { FormInstance as RcFormInstance, FormProvider, List,
|
|
2
|
-
import { Rule, RuleObject, RuleRender, NamePath } from 'rc-field-form/es/interface';
|
|
1
|
+
import { FormInstance as RcFormInstance, FormProvider, List, FormProps as RcFormProps } from 'rc-field-form';
|
|
2
|
+
import { Rule, RuleObject, RuleRender, Meta, NamePath } from 'rc-field-form/es/interface';
|
|
3
3
|
import { default as React } from 'react';
|
|
4
4
|
import { ValidateStatus } from './FormItemContext.js';
|
|
5
|
-
|
|
5
|
+
/**
|
|
6
|
+
* Loose NamePath: accepts string, number, or array of them.
|
|
7
|
+
* antd v4 uses loose paths; rc-field-form v2 uses strict DeepNamePath.
|
|
8
|
+
* We override to keep backward compatibility.
|
|
9
|
+
*/
|
|
10
|
+
type LooseNamePath = string | number | (string | number)[];
|
|
11
|
+
/**
|
|
12
|
+
* FormInstance — extends rc-field-form FormInstance with loose-typed overloads
|
|
13
|
+
* to maintain antd v4 backward compatibility. Uses intersection so that both
|
|
14
|
+
* strict DeepNamePath and loose LooseNamePath signatures are accepted.
|
|
15
|
+
*/
|
|
16
|
+
export type FormInstance<Values = any> = RcFormInstance<Values> & {
|
|
17
|
+
getFieldValue(name: LooseNamePath): any;
|
|
18
|
+
setFieldValue(name: LooseNamePath, value: any): void;
|
|
19
|
+
setFieldsValue(values: Record<string, any>): void;
|
|
20
|
+
getFieldsValue(): Values;
|
|
21
|
+
getFieldsValue(nameList: LooseNamePath[] | true, filterFunc?: (meta: Meta) => boolean): any;
|
|
22
|
+
getFieldError(name: LooseNamePath): string[];
|
|
23
|
+
getFieldsError(nameList?: LooseNamePath[]): {
|
|
24
|
+
name: (string | number)[];
|
|
25
|
+
errors: string[];
|
|
26
|
+
}[];
|
|
27
|
+
getFieldWarning(name: LooseNamePath): string[];
|
|
28
|
+
isFieldTouched(name: LooseNamePath): boolean;
|
|
29
|
+
isFieldsTouched(nameList?: LooseNamePath[], allFieldsTouched?: boolean): boolean;
|
|
30
|
+
isFieldValidating(name: LooseNamePath): boolean;
|
|
31
|
+
isFieldsValidating(nameList?: LooseNamePath[]): boolean;
|
|
32
|
+
setFields(fields: FieldData[]): void;
|
|
33
|
+
resetFields(fields?: LooseNamePath[]): void;
|
|
34
|
+
validateFields(nameList?: LooseNamePath[]): Promise<Values>;
|
|
35
|
+
/** Scroll to field position (antd-compatible extension) */
|
|
36
|
+
scrollToField?(name: LooseNamePath, options?: {
|
|
37
|
+
behavior?: 'smooth' | 'auto';
|
|
38
|
+
}): void;
|
|
39
|
+
};
|
|
6
40
|
export interface FormProps<Values = any> extends Omit<RcFormProps, 'form'> {
|
|
7
41
|
form?: FormInstance<Values>;
|
|
8
42
|
layout?: 'horizontal' | 'vertical' | 'inline';
|
|
@@ -49,15 +83,29 @@ export interface FormItemProps {
|
|
|
49
83
|
labelCol?: {
|
|
50
84
|
span?: number;
|
|
51
85
|
offset?: number;
|
|
86
|
+
[key: string]: any;
|
|
52
87
|
};
|
|
53
88
|
wrapperCol?: {
|
|
54
89
|
span?: number;
|
|
55
90
|
offset?: number;
|
|
91
|
+
[key: string]: any;
|
|
56
92
|
};
|
|
57
93
|
validateStatus?: ValidateStatus;
|
|
58
94
|
colon?: boolean;
|
|
59
95
|
trigger?: string;
|
|
96
|
+
normalize?: (value: any, prevValue: any, allValues: any) => any;
|
|
97
|
+
getValueProps?: (value: any) => Record<string, any>;
|
|
60
98
|
}
|
|
99
|
+
/** antd v4 compat: FormLabelAlign */
|
|
100
|
+
export type FormLabelAlign = 'left' | 'right';
|
|
101
|
+
/** antd v4 compat: FieldData */
|
|
102
|
+
export type FieldData = {
|
|
103
|
+
name: NamePath;
|
|
104
|
+
value?: any;
|
|
105
|
+
touched?: boolean;
|
|
106
|
+
validating?: boolean;
|
|
107
|
+
errors?: string[];
|
|
108
|
+
};
|
|
61
109
|
export interface ErrorListProps {
|
|
62
110
|
errors?: React.ReactNode[];
|
|
63
111
|
help?: React.ReactNode;
|
|
@@ -89,6 +137,7 @@ declare const AldForm: <Values = any>(props: FormProps<Values> & {
|
|
|
89
137
|
}) => React.ReactElement;
|
|
90
138
|
interface IFormItemProps extends FormItemProps {
|
|
91
139
|
labelWidth?: number;
|
|
140
|
+
labelAlign?: 'left' | 'right';
|
|
92
141
|
}
|
|
93
142
|
declare const AldFormItem: {
|
|
94
143
|
(props: IFormItemProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -105,7 +154,8 @@ type InternalFormType = typeof AldForm;
|
|
|
105
154
|
type CompoundedComponent = InternalFormType & {
|
|
106
155
|
useForm: <T = any>(...args: any[]) => [FormInstance<T>];
|
|
107
156
|
useFormInstance: typeof useFormInstance;
|
|
108
|
-
useWatch
|
|
157
|
+
/** Loose-typed useWatch for antd v4 compat */
|
|
158
|
+
useWatch: <T = any>(name: LooseNamePath, form?: FormInstance) => T;
|
|
109
159
|
Item: typeof AldFormItem;
|
|
110
160
|
List: typeof List;
|
|
111
161
|
ErrorList: typeof ErrorListComponent;
|
package/dist/Form/index.js
CHANGED
|
@@ -18,27 +18,42 @@ function colStyle(col) {
|
|
|
18
18
|
if (col.offset !== null && col.offset !== void 0 && col.offset > 0) s.marginLeft = `${col.offset / 24 * 100}%`;
|
|
19
19
|
return s;
|
|
20
20
|
}
|
|
21
|
+
function mergeControlProps(childProps, control) {
|
|
22
|
+
const mergedControl = { ...control };
|
|
23
|
+
Object.keys(control).forEach((key) => {
|
|
24
|
+
const controlHandler = control[key];
|
|
25
|
+
const childHandler = childProps[key];
|
|
26
|
+
if (typeof controlHandler === "function" && typeof childHandler === "function") mergedControl[key] = (...args) => {
|
|
27
|
+
controlHandler(...args);
|
|
28
|
+
childHandler(...args);
|
|
29
|
+
};
|
|
30
|
+
});
|
|
31
|
+
return mergedControl;
|
|
32
|
+
}
|
|
21
33
|
var AldForm = forwardRef((props, ref) => {
|
|
22
34
|
const contextSize = useContext(SizeContext);
|
|
23
|
-
const { children, size = contextSize, labelWidth, style = {}, className, layout = "horizontal", disabled, labelCol, wrapperCol, colon, requiredMark, ...restProps } = props;
|
|
24
|
-
const customStyle =
|
|
35
|
+
const { children, size = contextSize, labelWidth, style = {}, className, layout = "horizontal", disabled, labelCol, wrapperCol, colon = false, requiredMark, labelAlign, ...restProps } = props;
|
|
36
|
+
const customStyle = {
|
|
25
37
|
...style,
|
|
26
|
-
"--label-width": `${labelWidth}px`
|
|
27
|
-
|
|
38
|
+
...labelWidth ? { "--label-width": `${labelWidth}px` } : {},
|
|
39
|
+
...labelAlign ? { "--label-align": labelAlign } : {}
|
|
40
|
+
};
|
|
28
41
|
const formContextValue = useMemo(() => ({
|
|
29
42
|
layout,
|
|
30
43
|
labelCol,
|
|
31
44
|
wrapperCol,
|
|
32
45
|
colon,
|
|
33
46
|
requiredMark,
|
|
34
|
-
labelWidth
|
|
47
|
+
labelWidth,
|
|
48
|
+
labelAlign
|
|
35
49
|
}), [
|
|
36
50
|
layout,
|
|
37
51
|
labelCol,
|
|
38
52
|
wrapperCol,
|
|
39
53
|
colon,
|
|
40
54
|
requiredMark,
|
|
41
|
-
labelWidth
|
|
55
|
+
labelWidth,
|
|
56
|
+
labelAlign
|
|
42
57
|
]);
|
|
43
58
|
return /* @__PURE__ */ jsx(FormContext.Provider, {
|
|
44
59
|
value: formContextValue,
|
|
@@ -48,7 +63,7 @@ var AldForm = forwardRef((props, ref) => {
|
|
|
48
63
|
size,
|
|
49
64
|
children: /* @__PURE__ */ jsx(RcForm, {
|
|
50
65
|
style: customStyle,
|
|
51
|
-
className: cn("ald-form", `ald-form-${layout}`, className),
|
|
66
|
+
className: cn("ald-form ant-form", `ald-form-${layout}`, `ant-form-${layout}`, className),
|
|
52
67
|
...restProps,
|
|
53
68
|
ref,
|
|
54
69
|
children
|
|
@@ -78,7 +93,7 @@ function statusClassName(status) {
|
|
|
78
93
|
}
|
|
79
94
|
}
|
|
80
95
|
/** Render the inner label + control layout, receiving meta from Field */
|
|
81
|
-
function FormItemLayout({ label, children, meta, help, extra, required, hidden, className, customStyle, noStyle, labelCol: itemLabelCol, wrapperCol: itemWrapperCol, validateStatus: manualStatus, colon: itemColon, formContext }) {
|
|
96
|
+
function FormItemLayout({ label, children, meta, help, extra, required, rules, hidden, className, customStyle, noStyle, labelCol: itemLabelCol, wrapperCol: itemWrapperCol, validateStatus: manualStatus, colon: itemColon, formContext }) {
|
|
82
97
|
const status = deriveStatus(meta, manualStatus);
|
|
83
98
|
const errors = useMemo(() => meta?.errors ?? [], [meta?.errors]);
|
|
84
99
|
const warnings = useMemo(() => meta?.warnings ?? [], [meta?.warnings]);
|
|
@@ -94,7 +109,8 @@ function FormItemLayout({ label, children, meta, help, extra, required, hidden,
|
|
|
94
109
|
]);
|
|
95
110
|
if (noStyle) return /* @__PURE__ */ jsx(Fragment, { children });
|
|
96
111
|
const { requiredMark } = formContext;
|
|
97
|
-
const
|
|
112
|
+
const rulesRequired = rules && rules.some((r) => typeof r === "object" && r && r.required);
|
|
113
|
+
const isRequired = required || rulesRequired || meta && meta.required;
|
|
98
114
|
const showRequired = requiredMark !== false && isRequired;
|
|
99
115
|
const showOptional = requiredMark === "optional" && !isRequired;
|
|
100
116
|
const resolvedLabelCol = itemLabelCol ?? formContext.labelCol;
|
|
@@ -105,24 +121,27 @@ function FormItemLayout({ label, children, meta, help, extra, required, hidden,
|
|
|
105
121
|
const displayMessages = help !== null && help !== void 0 ? [help] : errors;
|
|
106
122
|
const hasError = status === "error" || errors.length > 0 && help === null;
|
|
107
123
|
const hasWarning = status === "warning" || warnings.length > 0 && help === null;
|
|
108
|
-
const labelNode = label !== null && label !== void 0 ? /* @__PURE__ */
|
|
109
|
-
className: cn("ald-form-item-label
|
|
110
|
-
style:
|
|
111
|
-
children:
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
124
|
+
const labelNode = label !== null && label !== void 0 ? /* @__PURE__ */ jsx("div", {
|
|
125
|
+
className: cn("ald-form-item-label ant-form-item-label", layout === "vertical" && "tw-mb-1 tw-block", layout === "horizontal" && "tw-mr-3 tw-shrink-0"),
|
|
126
|
+
style: useGridLayout ? colStyle(resolvedLabelCol) : void 0,
|
|
127
|
+
children: /* @__PURE__ */ jsxs("label", {
|
|
128
|
+
className: cn("tw-text-sm tw-font-medium tw-text-[var(--alias-colors-text-subtle,var(--content-secondary))]", !showColon && "ant-form-item-no-colon"),
|
|
129
|
+
children: [
|
|
130
|
+
showRequired && /* @__PURE__ */ jsx("span", {
|
|
131
|
+
className: "tw-mr-1 tw-text-[var(--content-negative-primary)]",
|
|
132
|
+
children: "*"
|
|
133
|
+
}),
|
|
134
|
+
label,
|
|
135
|
+
showOptional && /* @__PURE__ */ jsx("span", {
|
|
136
|
+
className: "tw-ml-1 tw-text-xs tw-font-normal tw-text-[var(--content-secondary)]",
|
|
137
|
+
children: "(optional)"
|
|
138
|
+
}),
|
|
139
|
+
showColon && label ? ":" : null
|
|
140
|
+
]
|
|
141
|
+
})
|
|
123
142
|
}) : null;
|
|
124
143
|
const controlNode = /* @__PURE__ */ jsxs("div", {
|
|
125
|
-
className: cn("ald-form-item-control", layout === "horizontal" && "tw-flex-1"),
|
|
144
|
+
className: cn("ald-form-item-control ant-form-item-control", layout === "horizontal" && "tw-flex-1"),
|
|
126
145
|
style: useGridLayout ? colStyle(resolvedWrapperCol) : void 0,
|
|
127
146
|
children: [
|
|
128
147
|
/* @__PURE__ */ jsx(FormItemInputContext.Provider, {
|
|
@@ -132,8 +151,9 @@ function FormItemLayout({ label, children, meta, help, extra, required, hidden,
|
|
|
132
151
|
children
|
|
133
152
|
})
|
|
134
153
|
}),
|
|
135
|
-
|
|
136
|
-
className: cn("ald-form-item-explain
|
|
154
|
+
/* @__PURE__ */ jsx("div", {
|
|
155
|
+
className: cn("ald-form-item-explain ant-form-item-explain tw-text-xs tw-transition-all tw-duration-200", displayMessages.length > 0 && "tw-mt-1", hasError && "tw-text-[var(--content-negative-secondary)]", hasWarning && !hasError && "tw-text-[color:var(--content-warning-primary,#faad14)]", !hasError && !hasWarning && help !== null && help !== void 0 && "tw-text-[var(--content-secondary)]"),
|
|
156
|
+
style: displayMessages.length === 0 ? { display: "none" } : void 0,
|
|
137
157
|
children: displayMessages.map((msg, i) => /* @__PURE__ */ jsx("div", { children: msg }, i))
|
|
138
158
|
}),
|
|
139
159
|
extra && /* @__PURE__ */ jsx("div", {
|
|
@@ -143,23 +163,25 @@ function FormItemLayout({ label, children, meta, help, extra, required, hidden,
|
|
|
143
163
|
]
|
|
144
164
|
});
|
|
145
165
|
return /* @__PURE__ */ jsxs("div", {
|
|
146
|
-
className: cn("ald-form-item tw-mb-6", hidden && "tw-hidden", showRequired && "ald-form-item-required", statusClassName(status), layout === "horizontal" && "tw-flex tw-flex-row tw-items-start", layout === "inline" && "tw-mr-4 tw-inline-flex tw-flex-row tw-items-start", className),
|
|
166
|
+
className: cn("ald-form-item ant-form-item ant-row tw-mb-6", hidden && "tw-hidden", showRequired && "ald-form-item-required", statusClassName(status), layout === "horizontal" && "tw-flex tw-flex-row tw-items-start", layout === "inline" && "tw-mr-4 tw-inline-flex tw-flex-row tw-items-start", className),
|
|
147
167
|
style: customStyle,
|
|
148
168
|
children: [labelNode, controlNode]
|
|
149
169
|
});
|
|
150
170
|
}
|
|
151
171
|
var AldFormItem = function(props) {
|
|
152
|
-
const { labelWidth, style = {}, label, name, rules, children, className, required, hidden, initialValue, dependencies, shouldUpdate, help, extra, validateTrigger, valuePropName, getValueFromEvent, noStyle, labelCol, wrapperCol, validateStatus, colon } = props;
|
|
172
|
+
const { labelWidth, style = {}, label, name, rules, children, className, required, hidden, initialValue, dependencies, shouldUpdate, help, extra, validateTrigger, valuePropName, getValueFromEvent, normalize, getValueProps, noStyle, labelCol, wrapperCol, validateStatus, colon, trigger } = props;
|
|
153
173
|
const formContext = useContext(FormContext);
|
|
154
|
-
const customStyle =
|
|
174
|
+
const customStyle = {
|
|
155
175
|
...style,
|
|
156
|
-
"--label-width": `${labelWidth}px`
|
|
157
|
-
|
|
176
|
+
...labelWidth ? { "--label-width": `${labelWidth}px` } : {},
|
|
177
|
+
...props.labelAlign ? { "--label-align": props.labelAlign } : {}
|
|
178
|
+
};
|
|
158
179
|
if (!(name !== null && name !== void 0 || shouldUpdate !== null && shouldUpdate !== void 0 || dependencies !== null && dependencies !== void 0)) return /* @__PURE__ */ jsx(FormItemLayout, {
|
|
159
180
|
label,
|
|
160
181
|
help,
|
|
161
182
|
extra,
|
|
162
183
|
required,
|
|
184
|
+
rules,
|
|
163
185
|
hidden,
|
|
164
186
|
className,
|
|
165
187
|
customStyle,
|
|
@@ -178,8 +200,11 @@ var AldFormItem = function(props) {
|
|
|
178
200
|
dependencies,
|
|
179
201
|
shouldUpdate,
|
|
180
202
|
validateTrigger,
|
|
203
|
+
trigger,
|
|
181
204
|
valuePropName,
|
|
182
205
|
getValueFromEvent,
|
|
206
|
+
normalize,
|
|
207
|
+
getValueProps,
|
|
183
208
|
children: (control, meta, form) => {
|
|
184
209
|
if (typeof children === "function") {
|
|
185
210
|
const childContent = children(form);
|
|
@@ -190,6 +215,7 @@ var AldFormItem = function(props) {
|
|
|
190
215
|
help,
|
|
191
216
|
extra,
|
|
192
217
|
required,
|
|
218
|
+
rules,
|
|
193
219
|
hidden,
|
|
194
220
|
className,
|
|
195
221
|
customStyle,
|
|
@@ -203,17 +229,18 @@ var AldFormItem = function(props) {
|
|
|
203
229
|
});
|
|
204
230
|
}
|
|
205
231
|
if (noStyle) {
|
|
206
|
-
if (React.isValidElement(children)) return React.cloneElement(children, control);
|
|
232
|
+
if (React.isValidElement(children)) return React.cloneElement(children, mergeControlProps(children.props, control));
|
|
207
233
|
return children;
|
|
208
234
|
}
|
|
209
235
|
let childNode = children;
|
|
210
|
-
if (React.isValidElement(children)) childNode = React.cloneElement(children, control);
|
|
236
|
+
if (React.isValidElement(children)) childNode = React.cloneElement(children, mergeControlProps(children.props, control));
|
|
211
237
|
return /* @__PURE__ */ jsx(FormItemLayout, {
|
|
212
238
|
label,
|
|
213
239
|
meta,
|
|
214
240
|
help,
|
|
215
241
|
extra,
|
|
216
242
|
required,
|
|
243
|
+
rules,
|
|
217
244
|
hidden,
|
|
218
245
|
className,
|
|
219
246
|
customStyle,
|
package/dist/Form/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/Form/index.tsx"],"sourcesContent":["import RcForm, {\n Field,\n FormInstance as RcFormInstance,\n FormProvider,\n List,\n useForm as rcUseForm,\n useWatch,\n} from 'rc-field-form';\nimport type { FormProps as RcFormProps } from 'rc-field-form';\nimport FieldContext from 'rc-field-form/es/FieldContext';\nimport type { Rule, RuleObject, RuleRender } from 'rc-field-form/es/interface';\nimport type { Meta, NamePath } from 'rc-field-form/es/interface';\nimport React, { forwardRef, useContext, useMemo } from 'react';\nimport SizeContext, {\n SizeContextProvider,\n} from '../ConfigProvider/sizeContext';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport { cn } from '../lib/utils';\nimport {\n FormContext,\n FormItemInputContext,\n type ValidateStatus,\n} from './FormItemContext';\n\n// FormInstance type compatible with antd\nexport type FormInstance<Values = any> = RcFormInstance<Values>;\n\n// FormProps compatible with antd\nexport interface FormProps<Values = any> extends Omit<RcFormProps, 'form'> {\n form?: FormInstance<Values>;\n layout?: 'horizontal' | 'vertical' | 'inline';\n size?: 'small' | 'middle' | 'large';\n colon?: boolean;\n disabled?: boolean;\n labelCol?: { span?: number; offset?: number };\n wrapperCol?: { span?: number; offset?: number };\n className?: string;\n style?: React.CSSProperties;\n requiredMark?: boolean | 'optional';\n labelWidth?: number;\n labelAlign?: 'left' | 'right';\n}\n\n// FormItemProps\nexport interface FormItemProps {\n name?: NamePath;\n label?: React.ReactNode;\n rules?: Rule[];\n children?: React.ReactNode | ((form: RcFormInstance) => React.ReactNode);\n className?: string;\n style?: React.CSSProperties;\n required?: boolean;\n hidden?: boolean;\n initialValue?: any;\n dependencies?: NamePath[];\n shouldUpdate?: boolean | ((prevValues: any, curValues: any) => boolean);\n help?: React.ReactNode;\n extra?: React.ReactNode;\n validateTrigger?: string | string[];\n valuePropName?: string;\n getValueFromEvent?: (...args: any[]) => any;\n noStyle?: boolean;\n labelWidth?: number;\n tooltip?:\n | React.ReactNode\n | { title?: React.ReactNode; icon?: React.ReactNode };\n labelCol?: { span?: number; offset?: number };\n wrapperCol?: { span?: number; offset?: number };\n validateStatus?: ValidateStatus;\n colon?: boolean;\n trigger?: string;\n}\n\nexport interface ErrorListProps {\n errors?: React.ReactNode[];\n help?: React.ReactNode;\n className?: string;\n}\n\nexport type FormListFieldData = {\n name: number;\n key: number;\n isListField: boolean;\n};\n\nexport type FormListOperation = {\n add: (defaultValue?: any, insertIndex?: number) => void;\n remove: (index: number | number[]) => void;\n move: (from: number, to: number) => void;\n};\n\nexport type FormListProps = {\n name: NamePath;\n rules?: Rule[];\n children: (\n fields: FormListFieldData[],\n operation: FormListOperation,\n meta: { errors: React.ReactNode[] },\n ) => React.ReactNode;\n initialValue?: any[];\n};\n\n// ============== Helpers ==============\n\n/** Convert a 24-column span/offset to Tailwind-compatible inline styles */\nfunction colStyle(col?: {\n span?: number;\n offset?: number;\n}): React.CSSProperties | undefined {\n if (!col) return undefined;\n const s: React.CSSProperties = {};\n if (col.span !== null && col.span !== undefined) {\n // 24-column grid: width = span / 24 * 100%\n s.width = `${(col.span / 24) * 100}%`;\n s.flex = `0 0 ${(col.span / 24) * 100}%`;\n }\n if (col.offset !== null && col.offset !== undefined && col.offset > 0) {\n s.marginLeft = `${(col.offset / 24) * 100}%`;\n }\n return s;\n}\n\n// ============== Form ==============\n\nconst AldForm = forwardRef((props: any, ref: any) => {\n const contextSize = useContext(SizeContext);\n const {\n children,\n size = contextSize,\n labelWidth,\n style = {},\n className,\n layout = 'horizontal',\n disabled,\n labelCol,\n wrapperCol,\n colon,\n requiredMark,\n ...restProps\n } = props;\n const customStyle = labelWidth\n ? { ...style, '--label-width': `${labelWidth}px` }\n : style;\n\n const formContextValue = useMemo(\n () => ({ layout, labelCol, wrapperCol, colon, requiredMark, labelWidth }),\n [layout, labelCol, wrapperCol, colon, requiredMark, labelWidth],\n );\n\n return (\n <FormContext.Provider value={formContextValue}>\n <DisabledContext.Provider value={disabled}>\n <SizeContextProvider size={size}>\n <RcForm\n style={customStyle}\n className={cn('ald-form', `ald-form-${layout}`, className)}\n {...restProps}\n ref={ref}\n >\n {children}\n </RcForm>\n </SizeContextProvider>\n </DisabledContext.Provider>\n </FormContext.Provider>\n );\n}) as <Values = any>(\n props: React.PropsWithChildren<FormProps<Values>> & {\n ref?: React.Ref<FormInstance<Values>>;\n labelWidth?: number;\n },\n) => React.ReactElement;\n\n// ============== Form.Item ==============\n\ninterface IFormItemProps extends FormItemProps {\n labelWidth?: number;\n}\n\n/** Derive status from meta or manual validateStatus */\nfunction deriveStatus(\n meta?: Meta,\n validateStatus?: ValidateStatus,\n): ValidateStatus {\n if (validateStatus) return validateStatus;\n if (!meta) return '';\n if (meta.validating) return 'validating';\n if (meta.errors && meta.errors.length > 0) return 'error';\n if (meta.warnings && meta.warnings.length > 0) return 'warning';\n if (meta.touched) return 'success';\n return '';\n}\n\n/** Status-based border class for the control wrapper */\nfunction statusClassName(status: ValidateStatus): string {\n switch (status) {\n case 'error':\n return 'ald-form-item-has-error';\n case 'warning':\n return 'ald-form-item-has-warning';\n case 'success':\n return 'ald-form-item-has-success';\n case 'validating':\n return 'ald-form-item-is-validating';\n default:\n return '';\n }\n}\n\n/** Render the inner label + control layout, receiving meta from Field */\nfunction FormItemLayout({\n label,\n children,\n meta,\n help,\n extra,\n required,\n hidden,\n className,\n customStyle,\n noStyle,\n labelCol: itemLabelCol,\n wrapperCol: itemWrapperCol,\n validateStatus: manualStatus,\n colon: itemColon,\n formContext,\n}: {\n label?: React.ReactNode;\n children: React.ReactNode;\n meta?: Meta;\n help?: React.ReactNode;\n extra?: React.ReactNode;\n required?: boolean;\n hidden?: boolean;\n className?: string;\n customStyle?: React.CSSProperties;\n noStyle?: boolean;\n labelCol?: { span?: number; offset?: number };\n wrapperCol?: { span?: number; offset?: number };\n validateStatus?: ValidateStatus;\n colon?: boolean;\n formContext: {\n layout?: string;\n labelCol?: { span?: number; offset?: number };\n wrapperCol?: { span?: number; offset?: number };\n colon?: boolean;\n requiredMark?: boolean | 'optional';\n labelWidth?: number;\n };\n}) {\n const status = deriveStatus(meta, manualStatus);\n const errors = useMemo(() => meta?.errors ?? [], [meta?.errors]);\n const warnings = useMemo(() => meta?.warnings ?? [], [meta?.warnings]);\n\n // Provide status context to child controls\n const itemInputContextValue = useMemo(\n () => ({\n status,\n isFormItemInput: true,\n errors,\n warnings,\n }),\n [status, errors, warnings],\n );\n\n if (noStyle) {\n return <>{children}</>;\n }\n\n // Determine if we should show required mark\n const { requiredMark } = formContext;\n const isRequired = required || (meta && (meta as any).required);\n const showRequired = requiredMark !== false && isRequired;\n const showOptional = requiredMark === 'optional' && !isRequired;\n\n // Resolve cols: item-level overrides form-level\n const resolvedLabelCol = itemLabelCol ?? formContext.labelCol;\n const resolvedWrapperCol = itemWrapperCol ?? formContext.wrapperCol;\n const layout = formContext.layout || 'horizontal';\n const showColon =\n (itemColon ?? formContext.colon) !== false && layout === 'horizontal';\n\n // Decide whether to use grid-style layout\n const useGridLayout =\n layout === 'horizontal' && (resolvedLabelCol || resolvedWrapperCol);\n\n // Determine display errors: if help is provided, show help instead of validation errors\n const displayMessages = help !== null && help !== undefined ? [help] : errors;\n const hasError = status === 'error' || (errors.length > 0 && help === null);\n const hasWarning =\n status === 'warning' || (warnings.length > 0 && help === null);\n\n const labelNode =\n label !== null && label !== undefined ? (\n <label\n className={cn(\n 'ald-form-item-label tw-text-sm tw-font-medium tw-text-[var(--content-primary)]',\n layout === 'vertical' && 'tw-mb-1 tw-block',\n layout === 'horizontal' && !useGridLayout && 'tw-mr-3 tw-shrink-0',\n layout === 'horizontal' && formContext.labelWidth && 'tw-shrink-0',\n )}\n style={\n !useGridLayout && layout === 'horizontal' && formContext.labelWidth\n ? { width: `var(--label-width, ${formContext.labelWidth}px)` }\n : useGridLayout\n ? colStyle(resolvedLabelCol)\n : undefined\n }\n >\n {showRequired && (\n <span className=\"tw-mr-1 tw-text-[var(--content-negative-primary)]\">\n *\n </span>\n )}\n {label}\n {showOptional && (\n <span className=\"tw-ml-1 tw-text-xs tw-font-normal tw-text-[var(--content-secondary)]\">\n (optional)\n </span>\n )}\n {showColon && label ? ':' : null}\n </label>\n ) : null;\n\n const controlNode = (\n <div\n className={cn(\n 'ald-form-item-control',\n layout === 'horizontal' && 'tw-flex-1',\n )}\n style={useGridLayout ? colStyle(resolvedWrapperCol) : undefined}\n >\n <FormItemInputContext.Provider value={itemInputContextValue}>\n <div className=\"ald-form-item-control-input\">{children}</div>\n </FormItemInputContext.Provider>\n {displayMessages.length > 0 && (\n <div\n className={cn(\n 'ald-form-item-explain tw-mt-1 tw-text-xs tw-transition-all tw-duration-200',\n hasError && 'tw-text-[var(--content-negative-secondary)]',\n hasWarning &&\n !hasError &&\n 'tw-text-[color:var(--content-warning-primary,#faad14)]',\n !hasError &&\n !hasWarning &&\n help !== null &&\n help !== undefined &&\n 'tw-text-[var(--content-secondary)]',\n )}\n >\n {displayMessages.map((msg, i) => (\n <div key={i}>{msg}</div>\n ))}\n </div>\n )}\n {extra && (\n <div className=\"ald-form-item-extra tw-mt-1 tw-text-xs tw-text-[var(--content-secondary)]\">\n {extra}\n </div>\n )}\n </div>\n );\n\n return (\n <div\n className={cn(\n 'ald-form-item tw-mb-6',\n hidden && 'tw-hidden',\n showRequired && 'ald-form-item-required',\n statusClassName(status),\n layout === 'horizontal' && 'tw-flex tw-flex-row tw-items-start',\n layout === 'inline' &&\n 'tw-mr-4 tw-inline-flex tw-flex-row tw-items-start',\n className,\n )}\n style={customStyle as React.CSSProperties}\n >\n {labelNode}\n {controlNode}\n </div>\n );\n}\n\nconst AldFormItem = function (props: IFormItemProps) {\n const {\n labelWidth,\n style = {},\n label,\n name,\n rules,\n children,\n className,\n required,\n hidden,\n initialValue,\n dependencies,\n shouldUpdate,\n help,\n extra,\n validateTrigger,\n valuePropName,\n getValueFromEvent,\n noStyle,\n labelCol,\n wrapperCol,\n validateStatus,\n colon,\n } = props;\n\n const formContext = useContext(FormContext);\n\n const customStyle = labelWidth\n ? { ...style, '--label-width': `${labelWidth}px` }\n : style;\n\n // If no name is provided (e.g. a submit button wrapper), we don't need Field\n // Also when shouldUpdate or dependencies are used without name, Field is still needed for re-render\n const needField =\n (name !== null && name !== undefined) ||\n (shouldUpdate !== null && shouldUpdate !== undefined) ||\n (dependencies !== null && dependencies !== undefined);\n\n if (!needField) {\n return (\n <FormItemLayout\n label={label}\n help={help}\n extra={extra}\n required={required}\n hidden={hidden}\n className={className}\n customStyle={customStyle as React.CSSProperties}\n noStyle={noStyle}\n labelCol={labelCol}\n wrapperCol={wrapperCol}\n validateStatus={validateStatus}\n colon={colon}\n formContext={formContext}\n >\n {children as React.ReactNode}\n </FormItemLayout>\n );\n }\n\n return (\n <Field\n name={name}\n rules={rules}\n initialValue={initialValue}\n dependencies={dependencies}\n shouldUpdate={shouldUpdate}\n validateTrigger={validateTrigger}\n valuePropName={valuePropName}\n getValueFromEvent={getValueFromEvent}\n >\n {(control, meta, form) => {\n // If children is a render function (shouldUpdate / dependencies pattern),\n // call it with the form instance and wrap in layout\n if (typeof children === 'function') {\n const childContent = (\n children as (form: RcFormInstance) => React.ReactNode\n )(form);\n if (noStyle) {\n return childContent;\n }\n return (\n <FormItemLayout\n label={label}\n meta={meta}\n help={help}\n extra={extra}\n required={required}\n hidden={hidden}\n className={className}\n customStyle={customStyle as React.CSSProperties}\n noStyle={noStyle}\n labelCol={labelCol}\n wrapperCol={wrapperCol}\n validateStatus={validateStatus}\n colon={colon}\n formContext={formContext}\n >\n {childContent}\n </FormItemLayout>\n );\n }\n\n // For noStyle, just clone with control props\n if (noStyle) {\n if (React.isValidElement(children)) {\n return React.cloneElement(\n children as React.ReactElement<any>,\n control,\n );\n }\n return children;\n }\n\n // Clone control props onto the single child element\n let childNode: React.ReactNode = children;\n if (React.isValidElement(children)) {\n childNode = React.cloneElement(\n children as React.ReactElement<any>,\n control,\n );\n }\n\n return (\n <FormItemLayout\n label={label}\n meta={meta}\n help={help}\n extra={extra}\n required={required}\n hidden={hidden}\n className={className}\n customStyle={customStyle as React.CSSProperties}\n labelCol={labelCol}\n wrapperCol={wrapperCol}\n validateStatus={validateStatus}\n colon={colon}\n formContext={formContext}\n >\n {childNode}\n </FormItemLayout>\n );\n }}\n </Field>\n );\n};\n\nfunction useFormItemStatus() {\n const ctx = useContext(FormItemInputContext);\n return {\n status: ctx.status,\n errors: ctx.errors ?? [],\n warnings: ctx.warnings ?? [],\n };\n}\n\nAldFormItem.useStatus = useFormItemStatus;\n\n// ============== ErrorList ==============\n\nfunction ErrorListComponent(props: ErrorListProps) {\n const { errors, className } = props;\n if (!errors || errors.length === 0) return null;\n return (\n <div className={cn('ald-form-error-list', className)}>\n {errors.map((err, i) => (\n <div\n key={i}\n className=\"tw-text-xs tw-text-[var(--content-negative-secondary)]\"\n >\n {err}\n </div>\n ))}\n </div>\n );\n}\n\n// ============== useFormInstance ==============\n\nfunction useFormInstance<T = any>(): FormInstance<T> {\n const form = useContext(FieldContext);\n return form as unknown as FormInstance<T>;\n}\n\n// ============== Compound component ==============\n\ntype InternalFormType = typeof AldForm;\ntype CompoundedComponent = InternalFormType & {\n useForm: <T = any>(...args: any[]) => [FormInstance<T>];\n useFormInstance: typeof useFormInstance;\n useWatch: typeof useWatch;\n Item: typeof AldFormItem;\n List: typeof List;\n ErrorList: typeof ErrorListComponent;\n Provider: typeof FormProvider;\n create: () => void;\n};\n\nconst Form = AldForm as CompoundedComponent;\n\nForm.Item = AldFormItem;\nForm.List = List;\nForm.ErrorList = ErrorListComponent;\nForm.useForm = rcUseForm;\nForm.useFormInstance = useFormInstance;\nForm.useWatch = useWatch;\nForm.Provider = FormProvider;\nForm.create = () => {\n console.warn('Form.create is deprecated. Please use Form.useForm() instead.');\n};\n\nexport type { Rule, RuleObject, RuleRender };\nexport default Form;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/Form/index.tsx"],"sourcesContent":["import RcForm, {\n Field,\n FormInstance as RcFormInstance,\n FormProvider,\n List,\n useForm as rcUseForm,\n useWatch,\n} from 'rc-field-form';\nimport type { FormProps as RcFormProps } from 'rc-field-form';\nimport FieldContext from 'rc-field-form/es/FieldContext';\nimport type { Rule, RuleObject, RuleRender } from 'rc-field-form/es/interface';\nimport type { Meta, NamePath } from 'rc-field-form/es/interface';\nimport React, { forwardRef, useContext, useMemo } from 'react';\nimport SizeContext, {\n SizeContextProvider,\n} from '../ConfigProvider/sizeContext';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport { cn } from '../lib/utils';\nimport {\n FormContext,\n FormItemInputContext,\n type ValidateStatus,\n} from './FormItemContext';\n\n/**\n * Loose NamePath: accepts string, number, or array of them.\n * antd v4 uses loose paths; rc-field-form v2 uses strict DeepNamePath.\n * We override to keep backward compatibility.\n */\ntype LooseNamePath = string | number | (string | number)[];\n\n/**\n * FormInstance — extends rc-field-form FormInstance with loose-typed overloads\n * to maintain antd v4 backward compatibility. Uses intersection so that both\n * strict DeepNamePath and loose LooseNamePath signatures are accepted.\n */\nexport type FormInstance<Values = any> = RcFormInstance<Values> & {\n getFieldValue(name: LooseNamePath): any;\n setFieldValue(name: LooseNamePath, value: any): void;\n setFieldsValue(values: Record<string, any>): void;\n getFieldsValue(): Values;\n getFieldsValue(\n nameList: LooseNamePath[] | true,\n filterFunc?: (meta: Meta) => boolean,\n ): any;\n getFieldError(name: LooseNamePath): string[];\n getFieldsError(\n nameList?: LooseNamePath[],\n ): { name: (string | number)[]; errors: string[] }[];\n getFieldWarning(name: LooseNamePath): string[];\n isFieldTouched(name: LooseNamePath): boolean;\n isFieldsTouched(\n nameList?: LooseNamePath[],\n allFieldsTouched?: boolean,\n ): boolean;\n isFieldValidating(name: LooseNamePath): boolean;\n isFieldsValidating(nameList?: LooseNamePath[]): boolean;\n setFields(fields: FieldData[]): void;\n resetFields(fields?: LooseNamePath[]): void;\n validateFields(nameList?: LooseNamePath[]): Promise<Values>;\n /** Scroll to field position (antd-compatible extension) */\n scrollToField?(\n name: LooseNamePath,\n options?: { behavior?: 'smooth' | 'auto' },\n ): void;\n};\n\n// FormProps compatible with antd\nexport interface FormProps<Values = any> extends Omit<RcFormProps, 'form'> {\n form?: FormInstance<Values>;\n layout?: 'horizontal' | 'vertical' | 'inline';\n size?: 'small' | 'middle' | 'large';\n colon?: boolean;\n disabled?: boolean;\n labelCol?: { span?: number; offset?: number };\n wrapperCol?: { span?: number; offset?: number };\n className?: string;\n style?: React.CSSProperties;\n requiredMark?: boolean | 'optional';\n labelWidth?: number;\n labelAlign?: 'left' | 'right';\n}\n\n// FormItemProps\nexport interface FormItemProps {\n name?: NamePath;\n label?: React.ReactNode;\n rules?: Rule[];\n children?: React.ReactNode | ((form: RcFormInstance) => React.ReactNode);\n className?: string;\n style?: React.CSSProperties;\n required?: boolean;\n hidden?: boolean;\n initialValue?: any;\n dependencies?: NamePath[];\n shouldUpdate?: boolean | ((prevValues: any, curValues: any) => boolean);\n help?: React.ReactNode;\n extra?: React.ReactNode;\n validateTrigger?: string | string[];\n valuePropName?: string;\n getValueFromEvent?: (...args: any[]) => any;\n noStyle?: boolean;\n labelWidth?: number;\n tooltip?:\n | React.ReactNode\n | { title?: React.ReactNode; icon?: React.ReactNode };\n labelCol?: { span?: number; offset?: number; [key: string]: any };\n wrapperCol?: { span?: number; offset?: number; [key: string]: any };\n validateStatus?: ValidateStatus;\n colon?: boolean;\n trigger?: string;\n normalize?: (value: any, prevValue: any, allValues: any) => any;\n getValueProps?: (value: any) => Record<string, any>;\n}\n\n/** antd v4 compat: FormLabelAlign */\nexport type FormLabelAlign = 'left' | 'right';\n\n/** antd v4 compat: FieldData */\nexport type FieldData = {\n name: NamePath;\n value?: any;\n touched?: boolean;\n validating?: boolean;\n errors?: string[];\n};\n\nexport interface ErrorListProps {\n errors?: React.ReactNode[];\n help?: React.ReactNode;\n className?: string;\n}\n\nexport type FormListFieldData = {\n name: number;\n key: number;\n isListField: boolean;\n};\n\nexport type FormListOperation = {\n add: (defaultValue?: any, insertIndex?: number) => void;\n remove: (index: number | number[]) => void;\n move: (from: number, to: number) => void;\n};\n\nexport type FormListProps = {\n name: NamePath;\n rules?: Rule[];\n children: (\n fields: FormListFieldData[],\n operation: FormListOperation,\n meta: { errors: React.ReactNode[] },\n ) => React.ReactNode;\n initialValue?: any[];\n};\n\n// ============== Helpers ==============\n\n/** Convert a 24-column span/offset to Tailwind-compatible inline styles */\nfunction colStyle(col?: {\n span?: number;\n offset?: number;\n}): React.CSSProperties | undefined {\n if (!col) return undefined;\n const s: React.CSSProperties = {};\n if (col.span !== null && col.span !== undefined) {\n // 24-column grid: width = span / 24 * 100%\n s.width = `${(col.span / 24) * 100}%`;\n s.flex = `0 0 ${(col.span / 24) * 100}%`;\n }\n if (col.offset !== null && col.offset !== undefined && col.offset > 0) {\n s.marginLeft = `${(col.offset / 24) * 100}%`;\n }\n return s;\n}\n\nfunction mergeControlProps(\n childProps: Record<string, any>,\n control: Record<string, any>,\n) {\n const mergedControl = { ...control };\n\n Object.keys(control).forEach((key) => {\n const controlHandler = control[key];\n const childHandler = childProps[key];\n\n if (\n typeof controlHandler === 'function' &&\n typeof childHandler === 'function'\n ) {\n mergedControl[key] = (...args: any[]) => {\n controlHandler(...args);\n childHandler(...args);\n };\n }\n });\n\n return mergedControl;\n}\n\n// ============== Form ==============\n\nconst AldForm = forwardRef((props: any, ref: any) => {\n const contextSize = useContext(SizeContext);\n const {\n children,\n size = contextSize,\n labelWidth,\n style = {},\n className,\n layout = 'horizontal',\n disabled,\n labelCol,\n wrapperCol,\n colon = false,\n requiredMark,\n labelAlign,\n ...restProps\n } = props;\n const customStyle = {\n ...style,\n ...(labelWidth ? { '--label-width': `${labelWidth}px` } : {}),\n ...(labelAlign ? { '--label-align': labelAlign } : {}),\n };\n\n const formContextValue = useMemo(\n () => ({\n layout,\n labelCol,\n wrapperCol,\n colon,\n requiredMark,\n labelWidth,\n labelAlign,\n }),\n [layout, labelCol, wrapperCol, colon, requiredMark, labelWidth, labelAlign],\n );\n\n return (\n <FormContext.Provider value={formContextValue}>\n <DisabledContext.Provider value={disabled}>\n <SizeContextProvider size={size}>\n <RcForm\n style={customStyle}\n className={cn(\n 'ald-form ant-form',\n `ald-form-${layout}`,\n `ant-form-${layout}`,\n className,\n )}\n {...restProps}\n ref={ref}\n >\n {children}\n </RcForm>\n </SizeContextProvider>\n </DisabledContext.Provider>\n </FormContext.Provider>\n );\n}) as <Values = any>(\n props: React.PropsWithChildren<FormProps<Values>> & {\n ref?: React.Ref<FormInstance<Values>>;\n labelWidth?: number;\n },\n) => React.ReactElement;\n\n// ============== Form.Item ==============\n\ninterface IFormItemProps extends FormItemProps {\n labelWidth?: number;\n labelAlign?: 'left' | 'right';\n}\n\n/** Derive status from meta or manual validateStatus */\nfunction deriveStatus(\n meta?: Meta,\n validateStatus?: ValidateStatus,\n): ValidateStatus {\n if (validateStatus) return validateStatus;\n if (!meta) return '';\n if (meta.validating) return 'validating';\n if (meta.errors && meta.errors.length > 0) return 'error';\n if (meta.warnings && meta.warnings.length > 0) return 'warning';\n if (meta.touched) return 'success';\n return '';\n}\n\n/** Status-based border class for the control wrapper */\nfunction statusClassName(status: ValidateStatus): string {\n switch (status) {\n case 'error':\n return 'ald-form-item-has-error';\n case 'warning':\n return 'ald-form-item-has-warning';\n case 'success':\n return 'ald-form-item-has-success';\n case 'validating':\n return 'ald-form-item-is-validating';\n default:\n return '';\n }\n}\n\n/** Render the inner label + control layout, receiving meta from Field */\nfunction FormItemLayout({\n label,\n children,\n meta,\n help,\n extra,\n required,\n rules,\n hidden,\n className,\n customStyle,\n noStyle,\n labelCol: itemLabelCol,\n wrapperCol: itemWrapperCol,\n validateStatus: manualStatus,\n colon: itemColon,\n formContext,\n}: {\n label?: React.ReactNode;\n children: React.ReactNode;\n meta?: Meta;\n help?: React.ReactNode;\n extra?: React.ReactNode;\n required?: boolean;\n rules?: Rule[];\n hidden?: boolean;\n className?: string;\n customStyle?: React.CSSProperties;\n noStyle?: boolean;\n labelCol?: { span?: number; offset?: number };\n wrapperCol?: { span?: number; offset?: number };\n validateStatus?: ValidateStatus;\n colon?: boolean;\n formContext: {\n layout?: string;\n labelCol?: { span?: number; offset?: number };\n wrapperCol?: { span?: number; offset?: number };\n colon?: boolean;\n requiredMark?: boolean | 'optional';\n labelWidth?: number;\n };\n}) {\n const status = deriveStatus(meta, manualStatus);\n const errors = useMemo(() => meta?.errors ?? [], [meta?.errors]);\n const warnings = useMemo(() => meta?.warnings ?? [], [meta?.warnings]);\n\n // Provide status context to child controls\n const itemInputContextValue = useMemo(\n () => ({\n status,\n isFormItemInput: true,\n errors,\n warnings,\n }),\n [status, errors, warnings],\n );\n\n if (noStyle) {\n return <>{children}</>;\n }\n\n // Determine if we should show required mark\n const { requiredMark } = formContext;\n const rulesRequired =\n rules && rules.some((r: any) => typeof r === 'object' && r && r.required);\n const isRequired =\n required || rulesRequired || (meta && (meta as any).required);\n const showRequired = requiredMark !== false && isRequired;\n const showOptional = requiredMark === 'optional' && !isRequired;\n\n // Resolve cols: item-level overrides form-level\n const resolvedLabelCol = itemLabelCol ?? formContext.labelCol;\n const resolvedWrapperCol = itemWrapperCol ?? formContext.wrapperCol;\n const layout = formContext.layout || 'horizontal';\n const showColon =\n (itemColon ?? formContext.colon) !== false && layout === 'horizontal';\n\n // Decide whether to use grid-style layout\n const useGridLayout =\n layout === 'horizontal' && (resolvedLabelCol || resolvedWrapperCol);\n\n // Determine display errors: if help is provided, show help instead of validation errors\n const displayMessages = help !== null && help !== undefined ? [help] : errors;\n const hasError = status === 'error' || (errors.length > 0 && help === null);\n const hasWarning =\n status === 'warning' || (warnings.length > 0 && help === null);\n\n const labelNode =\n label !== null && label !== undefined ? (\n <div\n className={cn(\n 'ald-form-item-label ant-form-item-label',\n // tw-block 不能省:label 容器同时挂了 ant-form-item-label 兼容 class,\n // 消费方残留的 antd 样式会把它设为 inline-block,导致 vertical 布局下\n // label 缩成内容宽而非整行铺在控件上方\n layout === 'vertical' && 'tw-mb-1 tw-block',\n layout === 'horizontal' && 'tw-mr-3 tw-shrink-0',\n )}\n style={useGridLayout ? colStyle(resolvedLabelCol) : undefined}\n >\n <label\n className={cn(\n 'tw-text-sm tw-font-medium tw-text-[var(--alias-colors-text-subtle,var(--content-secondary))]',\n !showColon && 'ant-form-item-no-colon',\n )}\n >\n {showRequired && (\n <span className=\"tw-mr-1 tw-text-[var(--content-negative-primary)]\">\n *\n </span>\n )}\n {label}\n {showOptional && (\n <span className=\"tw-ml-1 tw-text-xs tw-font-normal tw-text-[var(--content-secondary)]\">\n (optional)\n </span>\n )}\n {showColon && label ? ':' : null}\n </label>\n </div>\n ) : null;\n\n const controlNode = (\n <div\n className={cn(\n 'ald-form-item-control ant-form-item-control',\n layout === 'horizontal' && 'tw-flex-1',\n )}\n style={useGridLayout ? colStyle(resolvedWrapperCol) : undefined}\n >\n <FormItemInputContext.Provider value={itemInputContextValue}>\n <div className=\"ald-form-item-control-input\">{children}</div>\n </FormItemInputContext.Provider>\n {/* 始终渲染错误容器,避免 DOM 增删触发 Radix FocusScope MutationObserver 劫持焦点 */}\n <div\n className={cn(\n 'ald-form-item-explain ant-form-item-explain tw-text-xs tw-transition-all tw-duration-200',\n displayMessages.length > 0 && 'tw-mt-1',\n hasError && 'tw-text-[var(--content-negative-secondary)]',\n hasWarning &&\n !hasError &&\n 'tw-text-[color:var(--content-warning-primary,#faad14)]',\n !hasError &&\n !hasWarning &&\n help !== null &&\n help !== undefined &&\n 'tw-text-[var(--content-secondary)]',\n )}\n style={displayMessages.length === 0 ? { display: 'none' } : undefined}\n >\n {displayMessages.map((msg, i) => (\n <div key={i}>{msg}</div>\n ))}\n </div>\n {extra && (\n <div className=\"ald-form-item-extra tw-mt-1 tw-text-xs tw-text-[var(--content-secondary)]\">\n {extra}\n </div>\n )}\n </div>\n );\n\n return (\n <div\n className={cn(\n 'ald-form-item ant-form-item ant-row tw-mb-6',\n hidden && 'tw-hidden',\n showRequired && 'ald-form-item-required',\n statusClassName(status),\n layout === 'horizontal' && 'tw-flex tw-flex-row tw-items-start',\n layout === 'inline' &&\n 'tw-mr-4 tw-inline-flex tw-flex-row tw-items-start',\n className,\n )}\n style={customStyle as React.CSSProperties}\n >\n {labelNode}\n {controlNode}\n </div>\n );\n}\n\nconst AldFormItem = function (props: IFormItemProps) {\n const {\n labelWidth,\n style = {},\n label,\n name,\n rules,\n children,\n className,\n required,\n hidden,\n initialValue,\n dependencies,\n shouldUpdate,\n help,\n extra,\n validateTrigger,\n valuePropName,\n getValueFromEvent,\n normalize,\n getValueProps,\n noStyle,\n labelCol,\n wrapperCol,\n validateStatus,\n colon,\n trigger,\n } = props;\n\n const formContext = useContext(FormContext);\n\n const customStyle = {\n ...style,\n ...(labelWidth ? { '--label-width': `${labelWidth}px` } : {}),\n ...(props.labelAlign ? { '--label-align': props.labelAlign } : {}),\n };\n\n // If no name is provided (e.g. a submit button wrapper), we don't need Field\n // Also when shouldUpdate or dependencies are used without name, Field is still needed for re-render\n const needField =\n (name !== null && name !== undefined) ||\n (shouldUpdate !== null && shouldUpdate !== undefined) ||\n (dependencies !== null && dependencies !== undefined);\n\n if (!needField) {\n return (\n <FormItemLayout\n label={label}\n help={help}\n extra={extra}\n required={required}\n rules={rules}\n hidden={hidden}\n className={className}\n customStyle={customStyle as React.CSSProperties}\n noStyle={noStyle}\n labelCol={labelCol}\n wrapperCol={wrapperCol}\n validateStatus={validateStatus}\n colon={colon}\n formContext={formContext}\n >\n {children as React.ReactNode}\n </FormItemLayout>\n );\n }\n\n return (\n <Field\n name={name}\n rules={rules}\n initialValue={initialValue}\n dependencies={dependencies}\n shouldUpdate={shouldUpdate}\n validateTrigger={validateTrigger}\n trigger={trigger}\n valuePropName={valuePropName}\n getValueFromEvent={getValueFromEvent}\n normalize={normalize}\n getValueProps={getValueProps}\n >\n {(control, meta, form) => {\n // If children is a render function (shouldUpdate / dependencies pattern),\n // call it with the form instance and wrap in layout\n if (typeof children === 'function') {\n const childContent = (\n children as (form: RcFormInstance) => React.ReactNode\n )(form);\n if (noStyle) {\n return childContent;\n }\n return (\n <FormItemLayout\n label={label}\n meta={meta}\n help={help}\n extra={extra}\n required={required}\n rules={rules}\n hidden={hidden}\n className={className}\n customStyle={customStyle as React.CSSProperties}\n noStyle={noStyle}\n labelCol={labelCol}\n wrapperCol={wrapperCol}\n validateStatus={validateStatus}\n colon={colon}\n formContext={formContext}\n >\n {childContent}\n </FormItemLayout>\n );\n }\n\n // For noStyle, just clone with control props\n if (noStyle) {\n if (React.isValidElement(children)) {\n return React.cloneElement(\n children as React.ReactElement<any>,\n mergeControlProps(\n (children as React.ReactElement<any>).props,\n control,\n ),\n );\n }\n return children;\n }\n\n // Clone control props onto the single child element\n let childNode: React.ReactNode = children;\n if (React.isValidElement(children)) {\n childNode = React.cloneElement(\n children as React.ReactElement<any>,\n mergeControlProps(\n (children as React.ReactElement<any>).props,\n control,\n ),\n );\n }\n\n return (\n <FormItemLayout\n label={label}\n meta={meta}\n help={help}\n extra={extra}\n required={required}\n rules={rules}\n hidden={hidden}\n className={className}\n customStyle={customStyle as React.CSSProperties}\n labelCol={labelCol}\n wrapperCol={wrapperCol}\n validateStatus={validateStatus}\n colon={colon}\n formContext={formContext}\n >\n {childNode}\n </FormItemLayout>\n );\n }}\n </Field>\n );\n};\n\nfunction useFormItemStatus() {\n const ctx = useContext(FormItemInputContext);\n return {\n status: ctx.status,\n errors: ctx.errors ?? [],\n warnings: ctx.warnings ?? [],\n };\n}\n\nAldFormItem.useStatus = useFormItemStatus;\n\n// ============== ErrorList ==============\n\nfunction ErrorListComponent(props: ErrorListProps) {\n const { errors, className } = props;\n if (!errors || errors.length === 0) return null;\n return (\n <div className={cn('ald-form-error-list', className)}>\n {errors.map((err, i) => (\n <div\n key={i}\n className=\"tw-text-xs tw-text-[var(--content-negative-secondary)]\"\n >\n {err}\n </div>\n ))}\n </div>\n );\n}\n\n// ============== useFormInstance ==============\n\nfunction useFormInstance<T = any>(): FormInstance<T> {\n const form = useContext(FieldContext);\n return form as unknown as FormInstance<T>;\n}\n\n// ============== Compound component ==============\n\ntype InternalFormType = typeof AldForm;\ntype CompoundedComponent = InternalFormType & {\n useForm: <T = any>(...args: any[]) => [FormInstance<T>];\n useFormInstance: typeof useFormInstance;\n /** Loose-typed useWatch for antd v4 compat */\n useWatch: <T = any>(name: LooseNamePath, form?: FormInstance) => T;\n Item: typeof AldFormItem;\n List: typeof List;\n ErrorList: typeof ErrorListComponent;\n Provider: typeof FormProvider;\n create: () => void;\n};\n\nconst Form = AldForm as CompoundedComponent;\n\nForm.Item = AldFormItem;\nForm.List = List;\nForm.ErrorList = ErrorListComponent;\nForm.useForm = rcUseForm as CompoundedComponent['useForm'];\nForm.useFormInstance = useFormInstance;\nForm.useWatch = useWatch;\nForm.Provider = FormProvider;\nForm.create = () => {\n console.warn('Form.create is deprecated. Please use Form.useForm() instead.');\n};\n\nexport type { Rule, RuleObject, RuleRender };\nexport default Form;\n"],"mappings":";;;;;;;;;;AA+JA,SAAS,SAAS,KAGkB;AAClC,KAAI,CAAC,IAAK,QAAO;CACjB,MAAM,IAAyB,EAAE;AACjC,KAAI,IAAI,SAAS,QAAQ,IAAI,SAAS,QAAW;AAE/C,IAAE,QAAQ,GAAI,IAAI,OAAO,KAAM,IAAI;AACnC,IAAE,OAAO,OAAQ,IAAI,OAAO,KAAM,IAAI;;AAExC,KAAI,IAAI,WAAW,QAAQ,IAAI,WAAW,UAAa,IAAI,SAAS,EAClE,GAAE,aAAa,GAAI,IAAI,SAAS,KAAM,IAAI;AAE5C,QAAO;;AAGT,SAAS,kBACP,YACA,SACA;CACA,MAAM,gBAAgB,EAAE,GAAG,SAAS;AAEpC,QAAO,KAAK,QAAQ,CAAC,SAAS,QAAQ;EACpC,MAAM,iBAAiB,QAAQ;EAC/B,MAAM,eAAe,WAAW;AAEhC,MACE,OAAO,mBAAmB,cAC1B,OAAO,iBAAiB,WAExB,eAAc,QAAQ,GAAG,SAAgB;AACvC,kBAAe,GAAG,KAAK;AACvB,gBAAa,GAAG,KAAK;;GAGzB;AAEF,QAAO;;AAKT,IAAM,UAAU,YAAY,OAAY,QAAa;CACnD,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,EACJ,UACA,OAAO,aACP,YACA,QAAQ,EAAE,EACV,WACA,SAAS,cACT,UACA,UACA,YACA,QAAQ,OACR,cACA,YACA,GAAG,cACD;CACJ,MAAM,cAAc;EAClB,GAAG;EACH,GAAI,aAAa,EAAE,iBAAiB,GAAG,WAAW,KAAK,GAAG,EAAE;EAC5D,GAAI,aAAa,EAAE,iBAAiB,YAAY,GAAG,EAAE;EACtD;CAED,MAAM,mBAAmB,eAChB;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EAAC;EAAQ;EAAU;EAAY;EAAO;EAAc;EAAY;EAAW,CAC5E;AAED,QACE,oBAAC,YAAY,UAAb;EAAsB,OAAO;YAC3B,oBAAC,gBAAgB,UAAjB;GAA0B,OAAO;aAC/B,oBAAC,qBAAD;IAA2B;cACzB,oBAAC,QAAD;KACE,OAAO;KACP,WAAW,GACT,qBACA,YAAY,UACZ,YAAY,UACZ,UACD;KACD,GAAI;KACC;KAEJ;KACM,CAAA;IACW,CAAA;GACG,CAAA;EACN,CAAA;EAEzB;;AAeF,SAAS,aACP,MACA,gBACgB;AAChB,KAAI,eAAgB,QAAO;AAC3B,KAAI,CAAC,KAAM,QAAO;AAClB,KAAI,KAAK,WAAY,QAAO;AAC5B,KAAI,KAAK,UAAU,KAAK,OAAO,SAAS,EAAG,QAAO;AAClD,KAAI,KAAK,YAAY,KAAK,SAAS,SAAS,EAAG,QAAO;AACtD,KAAI,KAAK,QAAS,QAAO;AACzB,QAAO;;;AAIT,SAAS,gBAAgB,QAAgC;AACvD,SAAQ,QAAR;EACE,KAAK,QACH,QAAO;EACT,KAAK,UACH,QAAO;EACT,KAAK,UACH,QAAO;EACT,KAAK,aACH,QAAO;EACT,QACE,QAAO;;;;AAKb,SAAS,eAAe,EACtB,OACA,UACA,MACA,MACA,OACA,UACA,OACA,QACA,WACA,aACA,SACA,UAAU,cACV,YAAY,gBACZ,gBAAgB,cAChB,OAAO,WACP,eAyBC;CACD,MAAM,SAAS,aAAa,MAAM,aAAa;CAC/C,MAAM,SAAS,cAAc,MAAM,UAAU,EAAE,EAAE,CAAC,MAAM,OAAO,CAAC;CAChE,MAAM,WAAW,cAAc,MAAM,YAAY,EAAE,EAAE,CAAC,MAAM,SAAS,CAAC;CAGtE,MAAM,wBAAwB,eACrB;EACL;EACA,iBAAiB;EACjB;EACA;EACD,GACD;EAAC;EAAQ;EAAQ;EAAS,CAC3B;AAED,KAAI,QACF,QAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;CAIxB,MAAM,EAAE,iBAAiB;CACzB,MAAM,gBACJ,SAAS,MAAM,MAAM,MAAW,OAAO,MAAM,YAAY,KAAK,EAAE,SAAS;CAC3E,MAAM,aACJ,YAAY,iBAAkB,QAAS,KAAa;CACtD,MAAM,eAAe,iBAAiB,SAAS;CAC/C,MAAM,eAAe,iBAAiB,cAAc,CAAC;CAGrD,MAAM,mBAAmB,gBAAgB,YAAY;CACrD,MAAM,qBAAqB,kBAAkB,YAAY;CACzD,MAAM,SAAS,YAAY,UAAU;CACrC,MAAM,aACH,aAAa,YAAY,WAAW,SAAS,WAAW;CAG3D,MAAM,gBACJ,WAAW,iBAAiB,oBAAoB;CAGlD,MAAM,kBAAkB,SAAS,QAAQ,SAAS,SAAY,CAAC,KAAK,GAAG;CACvE,MAAM,WAAW,WAAW,WAAY,OAAO,SAAS,KAAK,SAAS;CACtE,MAAM,aACJ,WAAW,aAAc,SAAS,SAAS,KAAK,SAAS;CAE3D,MAAM,YACJ,UAAU,QAAQ,UAAU,SAC1B,oBAAC,OAAD;EACE,WAAW,GACT,2CAIA,WAAW,cAAc,oBACzB,WAAW,gBAAgB,sBAC5B;EACD,OAAO,gBAAgB,SAAS,iBAAiB,GAAG;YAEpD,qBAAC,SAAD;GACE,WAAW,GACT,gGACA,CAAC,aAAa,yBACf;aAJH;IAMG,gBACC,oBAAC,QAAD;KAAM,WAAU;eAAoD;KAE7D,CAAA;IAER;IACA,gBACC,oBAAC,QAAD;KAAM,WAAU;eAAuE;KAEhF,CAAA;IAER,aAAa,QAAQ,MAAM;IACtB;;EACJ,CAAA,GACJ;CAEN,MAAM,cACJ,qBAAC,OAAD;EACE,WAAW,GACT,+CACA,WAAW,gBAAgB,YAC5B;EACD,OAAO,gBAAgB,SAAS,mBAAmB,GAAG;YALxD;GAOE,oBAAC,qBAAqB,UAAtB;IAA+B,OAAO;cACpC,oBAAC,OAAD;KAAK,WAAU;KAA+B;KAAe,CAAA;IAC/B,CAAA;GAEhC,oBAAC,OAAD;IACE,WAAW,GACT,4FACA,gBAAgB,SAAS,KAAK,WAC9B,YAAY,+CACZ,cACE,CAAC,YACD,0DACF,CAAC,YACC,CAAC,cACD,SAAS,QACT,SAAS,UACT,qCACH;IACD,OAAO,gBAAgB,WAAW,IAAI,EAAE,SAAS,QAAQ,GAAG;cAE3D,gBAAgB,KAAK,KAAK,MACzB,oBAAC,OAAD,EAAA,UAAc,KAAU,EAAd,EAAc,CACxB;IACE,CAAA;GACL,SACC,oBAAC,OAAD;IAAK,WAAU;cACZ;IACG,CAAA;GAEJ;;AAGR,QACE,qBAAC,OAAD;EACE,WAAW,GACT,+CACA,UAAU,aACV,gBAAgB,0BAChB,gBAAgB,OAAO,EACvB,WAAW,gBAAgB,sCAC3B,WAAW,YACT,qDACF,UACD;EACD,OAAO;YAXT,CAaG,WACA,YACG;;;AAIV,IAAM,cAAc,SAAU,OAAuB;CACnD,MAAM,EACJ,YACA,QAAQ,EAAE,EACV,OACA,MACA,OACA,UACA,WACA,UACA,QACA,cACA,cACA,cACA,MACA,OACA,iBACA,eACA,mBACA,WACA,eACA,SACA,UACA,YACA,gBACA,OACA,YACE;CAEJ,MAAM,cAAc,WAAW,YAAY;CAE3C,MAAM,cAAc;EAClB,GAAG;EACH,GAAI,aAAa,EAAE,iBAAiB,GAAG,WAAW,KAAK,GAAG,EAAE;EAC5D,GAAI,MAAM,aAAa,EAAE,iBAAiB,MAAM,YAAY,GAAG,EAAE;EAClE;AASD,KAAI,EAJD,SAAS,QAAQ,SAAS,UAC1B,iBAAiB,QAAQ,iBAAiB,UAC1C,iBAAiB,QAAQ,iBAAiB,QAG3C,QACE,oBAAC,gBAAD;EACS;EACD;EACC;EACG;EACH;EACC;EACG;EACE;EACJ;EACC;EACE;EACI;EACT;EACM;EAEZ;EACc,CAAA;AAIrB,QACE,oBAAC,OAAD;EACQ;EACC;EACO;EACA;EACA;EACG;EACR;EACM;EACI;EACR;EACI;aAEb,SAAS,MAAM,SAAS;AAGxB,OAAI,OAAO,aAAa,YAAY;IAClC,MAAM,eACJ,SACA,KAAK;AACP,QAAI,QACF,QAAO;AAET,WACE,oBAAC,gBAAD;KACS;KACD;KACA;KACC;KACG;KACH;KACC;KACG;KACE;KACJ;KACC;KACE;KACI;KACT;KACM;eAEZ;KACc,CAAA;;AAKrB,OAAI,SAAS;AACX,QAAI,MAAM,eAAe,SAAS,CAChC,QAAO,MAAM,aACX,UACA,kBACG,SAAqC,OACtC,QACD,CACF;AAEH,WAAO;;GAIT,IAAI,YAA6B;AACjC,OAAI,MAAM,eAAe,SAAS,CAChC,aAAY,MAAM,aAChB,UACA,kBACG,SAAqC,OACtC,QACD,CACF;AAGH,UACE,oBAAC,gBAAD;IACS;IACD;IACA;IACC;IACG;IACH;IACC;IACG;IACE;IACH;IACE;IACI;IACT;IACM;cAEZ;IACc,CAAA;;EAGf,CAAA;;AAIZ,SAAS,oBAAoB;CAC3B,MAAM,MAAM,WAAW,qBAAqB;AAC5C,QAAO;EACL,QAAQ,IAAI;EACZ,QAAQ,IAAI,UAAU,EAAE;EACxB,UAAU,IAAI,YAAY,EAAE;EAC7B;;AAGH,YAAY,YAAY;AAIxB,SAAS,mBAAmB,OAAuB;CACjD,MAAM,EAAE,QAAQ,cAAc;AAC9B,KAAI,CAAC,UAAU,OAAO,WAAW,EAAG,QAAO;AAC3C,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,uBAAuB,UAAU;YACjD,OAAO,KAAK,KAAK,MAChB,oBAAC,OAAD;GAEE,WAAU;aAET;GACG,EAJC,EAID,CACN;EACE,CAAA;;AAMV,SAAS,kBAA4C;AAEnD,QADa,WAAW,aAAa;;AAmBvC,IAAM,OAAO;AAEb,KAAK,OAAO;AACZ,KAAK,OAAO;AACZ,KAAK,YAAY;AACjB,KAAK,UAAU;AACf,KAAK,kBAAkB;AACvB,KAAK,WAAW;AAChB,KAAK,WAAW;AAChB,KAAK,eAAe;AAClB,SAAQ,KAAK,gEAAgE"}
|
package/dist/Form.d.ts
ADDED
|
@@ -16,7 +16,7 @@ function HighlightText(props) {
|
|
|
16
16
|
return /* @__PURE__ */ jsx("span", {
|
|
17
17
|
className,
|
|
18
18
|
title: children,
|
|
19
|
-
children: text.split(regex).map((part, index) =>
|
|
19
|
+
children: text.split(regex).map((part, index) => index % 2 === 1 ? /* @__PURE__ */ jsx("span", {
|
|
20
20
|
className: cn("ald-highlight-text tw-text-[var(--content-negative-secondary)]", highlightClassName),
|
|
21
21
|
children: part
|
|
22
22
|
}, index) : part)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/HighlightText/index.tsx"],"sourcesContent":["import _ from 'lodash';\nimport React from 'react';\nimport { cn } from '../lib/utils';\n\n/**\n * 高亮关键词\n */\nexport default function HighlightText(props: IProps) {\n const { className, children, keyword, highlightClassName } = props;\n const trimKeyword = _.trim(keyword);\n if (typeof children !== 'string' || trimKeyword === '') {\n return <>{children}</>;\n }\n const text = children;\n const escapedKeyword = trimKeyword.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n const regex = new RegExp(`(${escapedKeyword})`, 'gi');\n const parts = text.split(regex);\n\n return (\n <span className={className} title={children}>\n {parts.map((part, index) =>\n
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/HighlightText/index.tsx"],"sourcesContent":["import _ from 'lodash';\nimport React from 'react';\nimport { cn } from '../lib/utils';\n\n/**\n * 高亮关键词\n */\nexport default function HighlightText(props: IProps) {\n const { className, children, keyword, highlightClassName } = props;\n const trimKeyword = _.trim(keyword);\n if (typeof children !== 'string' || trimKeyword === '') {\n return <>{children}</>;\n }\n const text = children;\n const escapedKeyword = trimKeyword.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n const regex = new RegExp(`(${escapedKeyword})`, 'gi');\n const parts = text.split(regex);\n\n return (\n <span className={className} title={children}>\n {parts.map((part, index) =>\n index % 2 === 1 ? (\n <span\n key={index}\n className={cn(\n 'ald-highlight-text tw-text-[var(--content-negative-secondary)]',\n highlightClassName,\n )}\n >\n {part}\n </span>\n ) : (\n part\n ),\n )}\n </span>\n );\n}\n\ninterface IProps {\n keyword: string;\n highlightClassName?: string;\n children: React.ReactNode;\n className?: string;\n}\n"],"mappings":";;;;;;;;AAOA,SAAwB,cAAc,OAAe;CACnD,MAAM,EAAE,WAAW,UAAU,SAAS,uBAAuB;CAC7D,MAAM,cAAc,EAAE,KAAK,QAAQ;AACnC,KAAI,OAAO,aAAa,YAAY,gBAAgB,GAClD,QAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;CAExB,MAAM,OAAO;CACb,MAAM,iBAAiB,YAAY,QAAQ,uBAAuB,OAAO;CACzE,MAAM,QAAQ,IAAI,OAAO,IAAI,eAAe,IAAI,KAAK;AAGrD,QACE,oBAAC,QAAD;EAAiB;EAAW,OAAO;YAHvB,KAAK,MAAM,MAAM,CAIpB,KAAK,MAAM,UAChB,QAAQ,MAAM,IACZ,oBAAC,QAAD;GAEE,WAAW,GACT,kEACA,mBACD;aAEA;GACI,EAPA,MAOA,GAEP,KAEH;EACI,CAAA"}
|
package/dist/Icon.d.ts
ADDED
|
@@ -7,7 +7,10 @@ interface IShowCountProps {
|
|
|
7
7
|
}) => string;
|
|
8
8
|
}
|
|
9
9
|
export type TSize = SizeType;
|
|
10
|
-
export type InputRef = HTMLInputElement
|
|
10
|
+
export type InputRef = HTMLInputElement & {
|
|
11
|
+
/** antd v4 compat — points to the underlying <input> element */
|
|
12
|
+
input?: HTMLInputElement | null;
|
|
13
|
+
};
|
|
11
14
|
type ChangeEventHandler = (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
12
15
|
export interface IInputProps {
|
|
13
16
|
addonAfter?: ReactNode;
|
|
@@ -20,6 +23,8 @@ export interface IInputProps {
|
|
|
20
23
|
disabled?: boolean;
|
|
21
24
|
showCount?: boolean | IShowCountProps;
|
|
22
25
|
maxLength?: number;
|
|
26
|
+
minLength?: number;
|
|
27
|
+
max?: number;
|
|
23
28
|
value?: string;
|
|
24
29
|
defaultValue?: string;
|
|
25
30
|
onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
|
|
@@ -33,6 +38,7 @@ export interface IInputProps {
|
|
|
33
38
|
autoComplete?: string;
|
|
34
39
|
autoFocus?: boolean;
|
|
35
40
|
readOnly?: boolean;
|
|
41
|
+
width?: number | string;
|
|
36
42
|
onBlur?: React.FocusEventHandler<HTMLInputElement>;
|
|
37
43
|
onFocus?: React.FocusEventHandler<HTMLInputElement>;
|
|
38
44
|
onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
|
|
@@ -40,5 +46,5 @@ export interface IInputProps {
|
|
|
40
46
|
onCompositionEnd?: React.CompositionEventHandler<HTMLInputElement>;
|
|
41
47
|
}
|
|
42
48
|
export declare function getSizeType(sizeType: TSize): TSize;
|
|
43
|
-
declare const Input: React.ForwardRefExoticComponent<IInputProps & React.RefAttributes<
|
|
49
|
+
declare const Input: React.ForwardRefExoticComponent<IInputProps & React.RefAttributes<InputRef>>;
|
|
44
50
|
export default Input;
|
|
@@ -26,7 +26,11 @@ var Input = forwardRef((props, ref) => {
|
|
|
26
26
|
const currentValue = isControlled ? controlledValue ?? "" : innerValue;
|
|
27
27
|
const [focused, setFocused] = useState(false);
|
|
28
28
|
const inputRef = useRef(null);
|
|
29
|
-
React.useImperativeHandle(ref, () =>
|
|
29
|
+
React.useImperativeHandle(ref, () => {
|
|
30
|
+
const el = inputRef.current;
|
|
31
|
+
el.input = el;
|
|
32
|
+
return el;
|
|
33
|
+
});
|
|
30
34
|
const handleChange = (e) => {
|
|
31
35
|
if (!isControlled) setInnerValue(e.target.value);
|
|
32
36
|
onChange?.(e);
|
|
@@ -51,22 +55,30 @@ var Input = forwardRef((props, ref) => {
|
|
|
51
55
|
}) : showCount ? `${currentValue.length}${maxLength ? `/${maxLength}` : ""}` : null;
|
|
52
56
|
const compactClasses = compactItemClassnames ? cn(!compactItemClassnames["ald-input-compact-first-item"] && "!tw-rounded-l-none", !compactItemClassnames["ald-input-compact-last-item"] && "!tw-rounded-r-none", !compactItemClassnames["ald-input-compact-first-item"] && "-tw-ml-px") : void 0;
|
|
53
57
|
return /* @__PURE__ */ jsxs("span", {
|
|
54
|
-
className: cn("ald-input tw-inline-flex tw-w-full tw-items-center tw-bg-[var(--interaction-background-form-field)]", bordered && "tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--interaction-border-neutral-normal)]", focused && "
|
|
58
|
+
className: cn("ald-input ant-input-affix-wrapper tw-inline-flex tw-w-full tw-items-center tw-bg-[var(--interaction-background-form-field)]", bordered && "tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--interaction-border-neutral-normal)]", focused && "ant-input-affix-wrapper-focused tw-border-[var(--interaction-focus-default)]", !mergedDisabled && !focused && "hover:tw-border-[var(--interaction-border-hover)]", `ald-input-${getSizeType(size)}`, size === "small" && "tw-h-7 tw-text-xs", size === "large" && "tw-h-9 tw-text-sm", (size === "middle" || !size) && "tw-h-8 tw-text-sm", status === "error" && `ald-input-error tw-border-[var(--border-negative-strong)]`, status === "warning" && `ald-input-warning tw-border-[var(--border-warning-subtle)]`, mergedDisabled && "ald-input-disabled tw-cursor-not-allowed tw-bg-[var(--global-cool-gray-alpha-50)] tw-text-[var(--content-secondary)]", compactClasses, className),
|
|
55
59
|
style,
|
|
60
|
+
onMouseDown: (e) => {
|
|
61
|
+
if (e.target !== inputRef.current) {
|
|
62
|
+
if (document.activeElement === inputRef.current) e.preventDefault();
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
onMouseUp: (e) => {
|
|
66
|
+
if (e.target !== inputRef.current && inputRef.current) inputRef.current.focus();
|
|
67
|
+
},
|
|
56
68
|
children: [
|
|
57
69
|
addonBefore && /* @__PURE__ */ jsx("span", {
|
|
58
70
|
className: "ald-input-addon tw-flex tw-shrink-0 tw-items-center tw-self-stretch tw-border-r tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-neutral-subtle)] tw-px-3 tw-text-[var(--content-secondary)]",
|
|
59
71
|
children: addonBefore
|
|
60
72
|
}),
|
|
61
73
|
prefix && /* @__PURE__ */ jsx("span", {
|
|
62
|
-
className: "ald-input-prefix tw-flex tw-items-center tw-pl-2 tw-text-[var(--content-secondary)]",
|
|
74
|
+
className: "ald-input-prefix ant-input-prefix tw-flex tw-items-center tw-pl-2 tw-text-[var(--content-secondary)]",
|
|
63
75
|
children: prefix
|
|
64
76
|
}),
|
|
65
77
|
/* @__PURE__ */ jsx("input", {
|
|
66
78
|
ref: inputRef,
|
|
67
79
|
id,
|
|
68
80
|
type: type || "text",
|
|
69
|
-
className: "tw-min-w-0 tw-flex-1 tw-border-0 tw-bg-transparent tw-px-2 tw-text-[var(--content-primary)] tw-text-inherit tw-outline-none",
|
|
81
|
+
className: "tw-min-w-0 tw-flex-1 tw-self-stretch tw-border-0 tw-bg-transparent tw-px-2 tw-text-[var(--content-primary)] tw-text-inherit tw-outline-none",
|
|
70
82
|
value: currentValue,
|
|
71
83
|
onChange: handleChange,
|
|
72
84
|
onBlur: (e) => {
|
|
@@ -89,7 +101,7 @@ var Input = forwardRef((props, ref) => {
|
|
|
89
101
|
spellCheck: false
|
|
90
102
|
}),
|
|
91
103
|
showClearIcon && /* @__PURE__ */ jsx("span", {
|
|
92
|
-
className: "ald-input-clear tw-flex tw-cursor-pointer tw-items-center tw-pr-1",
|
|
104
|
+
className: "ald-input-clear ant-input-clear-icon tw-flex tw-cursor-pointer tw-items-center tw-pr-1",
|
|
93
105
|
onClick: handleClear,
|
|
94
106
|
children: /* @__PURE__ */ jsx(Memo, {
|
|
95
107
|
size: 16,
|
|
@@ -97,7 +109,7 @@ var Input = forwardRef((props, ref) => {
|
|
|
97
109
|
})
|
|
98
110
|
}),
|
|
99
111
|
suffix && /* @__PURE__ */ jsx("span", {
|
|
100
|
-
className: "ald-input-suffix tw-flex tw-items-center tw-pr-2 tw-text-[var(--content-secondary)]",
|
|
112
|
+
className: "ald-input-suffix ant-input-suffix tw-flex tw-items-center tw-pr-2 tw-text-[var(--content-secondary)]",
|
|
101
113
|
children: suffix
|
|
102
114
|
}),
|
|
103
115
|
countInfo && /* @__PURE__ */ jsx("span", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Input/components/Input/index.tsx"],"sourcesContent":["import React, {\n ReactNode,\n forwardRef,\n useContext,\n useRef,\n useState,\n} from 'react';\nimport DisabledContext from '../../../ConfigProvider/DisabledContext';\nimport SizeContext, { SizeType } from '../../../ConfigProvider/sizeContext';\nimport { CloseCircleFill } from '../../../Icon';\nimport { cn } from '../../../lib/utils';\nimport { useCompactItemContext } from '../../../Space/CompactContext';\n\ninterface IShowCountProps {\n formatter: (args: { count: number; maxLength?: number }) => string;\n}\nexport type TSize = SizeType;\nexport type InputRef = HTMLInputElement;\n\ntype ChangeEventHandler = (e: React.ChangeEvent<HTMLInputElement>) => void;\n\nexport interface IInputProps {\n addonAfter?: ReactNode;\n addonBefore?: ReactNode;\n size?: TSize;\n id?: string;\n prefix?: ReactNode;\n suffix?: ReactNode;\n allowClear?: boolean;\n disabled?: boolean;\n showCount?: boolean | IShowCountProps;\n maxLength?: number;\n value?: string;\n defaultValue?: string;\n onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;\n onChange?: ChangeEventHandler;\n className?: string;\n style?: React.CSSProperties;\n placeholder?: string;\n type?: string;\n bordered?: boolean;\n status?: 'error' | 'warning' | '';\n autoComplete?: string;\n autoFocus?: boolean;\n readOnly?: boolean;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n onCompositionStart?: React.CompositionEventHandler<HTMLInputElement>;\n onCompositionEnd?: React.CompositionEventHandler<HTMLInputElement>;\n}\n\nexport function getSizeType(sizeType: TSize): TSize {\n if (['small', 'middle', 'large'].includes(sizeType || '')) {\n return sizeType;\n }\n return 'middle';\n}\n\nconst Input = forwardRef<InputRef, IInputProps>((props, ref) => {\n const {\n size: customSize,\n className,\n bordered = true,\n status,\n disabled,\n allowClear,\n prefix,\n suffix,\n addonBefore,\n addonAfter,\n showCount,\n maxLength,\n value: controlledValue,\n defaultValue,\n onChange,\n onPressEnter,\n onBlur,\n onFocus,\n onKeyDown,\n onCompositionStart,\n onCompositionEnd,\n placeholder,\n type,\n id,\n autoFocus,\n readOnly,\n style,\n } = props;\n\n const contextDisabled = useContext(DisabledContext);\n const mergedDisabled = disabled ?? contextDisabled;\n\n const contentSize = useContext(SizeContext);\n const { compactSize, compactItemClassnames } =\n useCompactItemContext('ald-input');\n const size = customSize || compactSize || contentSize || 'middle';\n\n const isControlled = 'value' in props;\n const [innerValue, setInnerValue] = useState(defaultValue ?? '');\n const currentValue = isControlled ? controlledValue ?? '' : innerValue;\n const [focused, setFocused] = useState(false);\n const inputRef = useRef<HTMLInputElement>(null);\n\n React.useImperativeHandle(ref, () => inputRef.current!);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (!isControlled) setInnerValue(e.target.value);\n onChange?.(e);\n };\n\n const handleClear = () => {\n const nativeEvent = new Event('input', { bubbles: true });\n if (inputRef.current) {\n const nativeSetter = Object.getOwnPropertyDescriptor(\n HTMLInputElement.prototype,\n 'value',\n )?.set;\n nativeSetter?.call(inputRef.current, '');\n inputRef.current.dispatchEvent(nativeEvent);\n }\n if (!isControlled) setInnerValue('');\n onChange?.({\n target: { value: '' },\n } as React.ChangeEvent<HTMLInputElement>);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') onPressEnter?.(e);\n onKeyDown?.(e);\n };\n\n const showClearIcon = allowClear && currentValue && !mergedDisabled;\n\n const countInfo =\n showCount && typeof showCount === 'object'\n ? showCount.formatter({\n count: currentValue.length,\n maxLength,\n })\n : showCount\n ? `${currentValue.length}${maxLength ? `/${maxLength}` : ''}`\n : null;\n\n // Build compact-mode border-radius and margin overrides\n const compactClasses = compactItemClassnames\n ? cn(\n !compactItemClassnames['ald-input-compact-first-item'] &&\n '!tw-rounded-l-none',\n !compactItemClassnames['ald-input-compact-last-item'] &&\n '!tw-rounded-r-none',\n !compactItemClassnames['ald-input-compact-first-item'] && '-tw-ml-px',\n )\n : undefined;\n\n return (\n <span\n className={cn(\n 'ald-input tw-inline-flex tw-w-full tw-items-center tw-bg-[var(--interaction-background-form-field)]',\n bordered &&\n 'tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--interaction-border-neutral-normal)]',\n focused &&\n 'tw-border-[var(--interaction-focus-default)] tw-outline tw-outline-1 tw-outline-[var(--interaction-focus-default)]',\n !mergedDisabled &&\n !focused &&\n 'hover:tw-border-[var(--interaction-border-hover)]',\n `ald-input-${getSizeType(size)}`,\n size === 'small' && 'tw-h-7 tw-text-xs',\n size === 'large' && 'tw-h-9 tw-text-sm',\n (size === 'middle' || !size) && 'tw-h-8 tw-text-sm',\n status === 'error' &&\n `ald-input-error tw-border-[var(--border-negative-strong)]`,\n status === 'warning' &&\n `ald-input-warning tw-border-[var(--border-warning-subtle)]`,\n mergedDisabled &&\n 'ald-input-disabled tw-cursor-not-allowed tw-bg-[var(--global-cool-gray-alpha-50)] tw-text-[var(--content-secondary)]',\n compactClasses,\n className,\n )}\n style={style}\n >\n {addonBefore && (\n <span className=\"ald-input-addon tw-flex tw-shrink-0 tw-items-center tw-self-stretch tw-border-r tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-neutral-subtle)] tw-px-3 tw-text-[var(--content-secondary)]\">\n {addonBefore}\n </span>\n )}\n {prefix && (\n <span className=\"ald-input-prefix tw-flex tw-items-center tw-pl-2 tw-text-[var(--content-secondary)]\">\n {prefix}\n </span>\n )}\n <input\n ref={inputRef}\n id={id}\n type={type || 'text'}\n className=\"tw-min-w-0 tw-flex-1 tw-border-0 tw-bg-transparent tw-px-2 tw-text-[var(--content-primary)] tw-text-inherit tw-outline-none\"\n value={currentValue}\n onChange={handleChange}\n onBlur={(e) => {\n setFocused(false);\n onBlur?.(e);\n }}\n onFocus={(e) => {\n setFocused(true);\n onFocus?.(e);\n }}\n onKeyDown={handleKeyDown}\n onCompositionStart={onCompositionStart}\n onCompositionEnd={onCompositionEnd}\n disabled={mergedDisabled}\n placeholder={placeholder}\n maxLength={maxLength}\n autoComplete=\"off\"\n autoFocus={autoFocus}\n readOnly={readOnly}\n spellCheck={false}\n />\n {showClearIcon && (\n <span\n className=\"ald-input-clear tw-flex tw-cursor-pointer tw-items-center tw-pr-1\"\n onClick={handleClear}\n >\n <CloseCircleFill size={16} color=\"var(--alias-colors-icon-subtle)\" />\n </span>\n )}\n {suffix && (\n <span className=\"ald-input-suffix tw-flex tw-items-center tw-pr-2 tw-text-[var(--content-secondary)]\">\n {suffix}\n </span>\n )}\n {countInfo && (\n <span className=\"ald-input-count tw-pr-2 tw-text-xs tw-text-[var(--content-tertiary)]\">\n {countInfo}\n </span>\n )}\n {addonAfter && (\n <span className=\"ald-input-addon tw-border-l tw-border-solid tw-border-[var(--border-default)] tw-px-2 tw-text-[var(--content-secondary)]\">\n {addonAfter}\n </span>\n )}\n </span>\n );\n});\n\nexport default Input;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Input/components/Input/index.tsx"],"sourcesContent":["import React, {\n ReactNode,\n forwardRef,\n useContext,\n useRef,\n useState,\n} from 'react';\nimport DisabledContext from '../../../ConfigProvider/DisabledContext';\nimport SizeContext, { SizeType } from '../../../ConfigProvider/sizeContext';\nimport { CloseCircleFill } from '../../../Icon';\nimport { cn } from '../../../lib/utils';\nimport { useCompactItemContext } from '../../../Space/CompactContext';\n\ninterface IShowCountProps {\n formatter: (args: { count: number; maxLength?: number }) => string;\n}\nexport type TSize = SizeType;\nexport type InputRef = HTMLInputElement & {\n /** antd v4 compat — points to the underlying <input> element */\n input?: HTMLInputElement | null;\n};\n\ntype ChangeEventHandler = (e: React.ChangeEvent<HTMLInputElement>) => void;\n\nexport interface IInputProps {\n addonAfter?: ReactNode;\n addonBefore?: ReactNode;\n size?: TSize;\n id?: string;\n prefix?: ReactNode;\n suffix?: ReactNode;\n allowClear?: boolean;\n disabled?: boolean;\n showCount?: boolean | IShowCountProps;\n maxLength?: number;\n minLength?: number;\n max?: number;\n value?: string;\n defaultValue?: string;\n onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;\n onChange?: ChangeEventHandler;\n className?: string;\n style?: React.CSSProperties;\n placeholder?: string;\n type?: string;\n bordered?: boolean;\n status?: 'error' | 'warning' | '';\n autoComplete?: string;\n autoFocus?: boolean;\n readOnly?: boolean;\n width?: number | string;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n onCompositionStart?: React.CompositionEventHandler<HTMLInputElement>;\n onCompositionEnd?: React.CompositionEventHandler<HTMLInputElement>;\n}\n\nexport function getSizeType(sizeType: TSize): TSize {\n if (['small', 'middle', 'large'].includes(sizeType || '')) {\n return sizeType;\n }\n return 'middle';\n}\n\nconst Input = forwardRef<InputRef, IInputProps>((props, ref) => {\n const {\n size: customSize,\n className,\n bordered = true,\n status,\n disabled,\n allowClear,\n prefix,\n suffix,\n addonBefore,\n addonAfter,\n showCount,\n maxLength,\n value: controlledValue,\n defaultValue,\n onChange,\n onPressEnter,\n onBlur,\n onFocus,\n onKeyDown,\n onCompositionStart,\n onCompositionEnd,\n placeholder,\n type,\n id,\n autoFocus,\n readOnly,\n style,\n } = props;\n\n const contextDisabled = useContext(DisabledContext);\n const mergedDisabled = disabled ?? contextDisabled;\n\n const contentSize = useContext(SizeContext);\n const { compactSize, compactItemClassnames } =\n useCompactItemContext('ald-input');\n const size = customSize || compactSize || contentSize || 'middle';\n\n const isControlled = 'value' in props;\n const [innerValue, setInnerValue] = useState(defaultValue ?? '');\n const currentValue = isControlled ? controlledValue ?? '' : innerValue;\n const [focused, setFocused] = useState(false);\n const inputRef = useRef<HTMLInputElement>(null);\n\n React.useImperativeHandle(ref, () => {\n const el = inputRef.current!;\n // Expose .input for antd v4 compat (ref.current.input.focus())\n (el as InputRef).input = el;\n return el as InputRef;\n });\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (!isControlled) setInnerValue(e.target.value);\n onChange?.(e);\n };\n\n const handleClear = () => {\n const nativeEvent = new Event('input', { bubbles: true });\n if (inputRef.current) {\n const nativeSetter = Object.getOwnPropertyDescriptor(\n HTMLInputElement.prototype,\n 'value',\n )?.set;\n nativeSetter?.call(inputRef.current, '');\n inputRef.current.dispatchEvent(nativeEvent);\n }\n if (!isControlled) setInnerValue('');\n onChange?.({\n target: { value: '' },\n } as React.ChangeEvent<HTMLInputElement>);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') onPressEnter?.(e);\n onKeyDown?.(e);\n };\n\n const showClearIcon = allowClear && currentValue && !mergedDisabled;\n\n const countInfo =\n showCount && typeof showCount === 'object'\n ? showCount.formatter({\n count: currentValue.length,\n maxLength,\n })\n : showCount\n ? `${currentValue.length}${maxLength ? `/${maxLength}` : ''}`\n : null;\n\n // Build compact-mode border-radius and margin overrides\n const compactClasses = compactItemClassnames\n ? cn(\n !compactItemClassnames['ald-input-compact-first-item'] &&\n '!tw-rounded-l-none',\n !compactItemClassnames['ald-input-compact-last-item'] &&\n '!tw-rounded-r-none',\n !compactItemClassnames['ald-input-compact-first-item'] && '-tw-ml-px',\n )\n : undefined;\n\n return (\n <span\n className={cn(\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ald-input ant-input-affix-wrapper tw-inline-flex tw-w-full tw-items-center tw-bg-[var(--interaction-background-form-field)]',\n bordered &&\n 'tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--interaction-border-neutral-normal)]',\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n // focus 仅变 border-color,不加额外 box-shadow/outline。\n // 消费方通过 CSS 将 border 设为 0 后 focus 高亮自然消失,和 antd 行为一致。\n focused &&\n 'ant-input-affix-wrapper-focused tw-border-[var(--interaction-focus-default)]',\n !mergedDisabled &&\n !focused &&\n 'hover:tw-border-[var(--interaction-border-hover)]',\n `ald-input-${getSizeType(size)}`,\n size === 'small' && 'tw-h-7 tw-text-xs',\n size === 'large' && 'tw-h-9 tw-text-sm',\n (size === 'middle' || !size) && 'tw-h-8 tw-text-sm',\n status === 'error' &&\n `ald-input-error tw-border-[var(--border-negative-strong)]`,\n status === 'warning' &&\n `ald-input-warning tw-border-[var(--border-warning-subtle)]`,\n mergedDisabled &&\n 'ald-input-disabled tw-cursor-not-allowed tw-bg-[var(--global-cool-gray-alpha-50)] tw-text-[var(--content-secondary)]',\n compactClasses,\n className,\n )}\n style={style}\n onMouseDown={(e) => {\n // 点击 wrapper 非 input 区域时:\n // 如果 input 已聚焦 → preventDefault 防止点击 wrapper 导致丢焦\n // 如果 input 未聚焦 → 不阻止默认行为,让浏览器正常处理 blur 上一个元素\n if (e.target !== inputRef.current) {\n if (document.activeElement === inputRef.current) {\n e.preventDefault();\n }\n }\n }}\n onMouseUp={(e) => {\n // 在 mouseUp 时将焦点转发给内部 input(兼容 prefix/suffix/padding 区域的点击)\n if (e.target !== inputRef.current && inputRef.current) {\n inputRef.current.focus();\n }\n }}\n >\n {addonBefore && (\n <span className=\"ald-input-addon tw-flex tw-shrink-0 tw-items-center tw-self-stretch tw-border-r tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-neutral-subtle)] tw-px-3 tw-text-[var(--content-secondary)]\">\n {addonBefore}\n </span>\n )}\n {/* antd 兼容:保留 ant-input-prefix class,消费方 CSS 可能依赖该选择器 */}\n {prefix && (\n <span className=\"ald-input-prefix ant-input-prefix tw-flex tw-items-center tw-pl-2 tw-text-[var(--content-secondary)]\">\n {prefix}\n </span>\n )}\n <input\n ref={inputRef}\n id={id}\n type={type || 'text'}\n className=\"tw-min-w-0 tw-flex-1 tw-self-stretch tw-border-0 tw-bg-transparent tw-px-2 tw-text-[var(--content-primary)] tw-text-inherit tw-outline-none\"\n value={currentValue}\n onChange={handleChange}\n onBlur={(e) => {\n setFocused(false);\n onBlur?.(e);\n }}\n onFocus={(e) => {\n setFocused(true);\n onFocus?.(e);\n }}\n onKeyDown={handleKeyDown}\n onCompositionStart={onCompositionStart}\n onCompositionEnd={onCompositionEnd}\n disabled={mergedDisabled}\n placeholder={placeholder}\n maxLength={maxLength}\n autoComplete=\"off\"\n autoFocus={autoFocus}\n readOnly={readOnly}\n spellCheck={false}\n />\n {showClearIcon && (\n <span\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n className=\"ald-input-clear ant-input-clear-icon tw-flex tw-cursor-pointer tw-items-center tw-pr-1\"\n onClick={handleClear}\n >\n <CloseCircleFill size={16} color=\"var(--alias-colors-icon-subtle)\" />\n </span>\n )}\n {/* antd 兼容:保留 ant-input-suffix class,消费方 CSS 可能依赖该选择器 */}\n {suffix && (\n <span className=\"ald-input-suffix ant-input-suffix tw-flex tw-items-center tw-pr-2 tw-text-[var(--content-secondary)]\">\n {suffix}\n </span>\n )}\n {countInfo && (\n <span className=\"ald-input-count tw-pr-2 tw-text-xs tw-text-[var(--content-tertiary)]\">\n {countInfo}\n </span>\n )}\n {addonAfter && (\n <span className=\"ald-input-addon tw-border-l tw-border-solid tw-border-[var(--border-default)] tw-px-2 tw-text-[var(--content-secondary)]\">\n {addonAfter}\n </span>\n )}\n </span>\n );\n});\n\nexport default Input;\n"],"mappings":"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"}
|