@aloudata/aloudata-design 3.0.0-beta.1 → 3.0.0-beta.10
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.d.ts +2 -0
- package/dist/Alert.d.ts +2 -0
- package/dist/App.d.ts +2 -0
- package/dist/Avatar/component/Avatar.d.ts +2 -0
- package/dist/Avatar.d.ts +2 -0
- package/dist/Badge.d.ts +2 -0
- package/dist/Breadcrumb.d.ts +2 -0
- package/dist/Button/index.d.ts +2 -0
- package/dist/Button/index.js.map +1 -1
- package/dist/Button.d.ts +2 -0
- 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/type.d.ts +2 -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.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.d.ts +2 -0
- package/dist/DatePicker/index.d.ts +38 -3
- package/dist/DatePicker/index.js +56 -10
- 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 +1 -0
- package/dist/Drawer/index.js.map +1 -1
- package/dist/Drawer.d.ts +2 -0
- 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 +3 -1
- package/dist/Form/index.js.map +1 -1
- package/dist/Form.d.ts +2 -0
- 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 +5 -1
- 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.d.ts +2 -0
- package/dist/Layout.d.ts +2 -0
- package/dist/List.d.ts +2 -0
- package/dist/LogicTree/components/DisplayLogicItem.d.ts +2 -0
- package/dist/LogicTree/components/LogicItem.d.ts +2 -0
- package/dist/LogicTree.d.ts +2 -0
- package/dist/MemberPicker/utils.d.ts +2 -0
- package/dist/MemberPicker.d.ts +2 -0
- package/dist/Menu.d.ts +2 -0
- package/dist/Modal/index.d.ts +5 -2
- 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.d.ts +2 -0
- package/dist/Popover/index.d.ts +1 -0
- package/dist/Popover/index.js.map +1 -1
- package/dist/Popover.d.ts +2 -0
- package/dist/Progress.d.ts +2 -0
- package/dist/Radio/components/Group.d.ts +2 -0
- package/dist/Radio/components/Radio.d.ts +2 -0
- package/dist/Radio.d.ts +2 -0
- 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/Selector.d.ts +2 -0
- 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.d.ts +2 -0
- package/dist/Switch/test.d.ts +2 -0
- package/dist/Switch.d.ts +2 -0
- package/dist/Table/components/Footer.d.ts +2 -0
- package/dist/Table.d.ts +2 -0
- package/dist/Tabs/index.d.ts +1 -0
- 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.map +1 -1
- package/dist/Tooltip.d.ts +2 -0
- 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.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.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/index.d.ts +11 -3
- package/dist/index.js +4 -1
- package/dist/locale/default.d.ts +2 -1
- package/dist/locale/default.js +4 -4
- package/dist/locale/en_US.d.ts +1 -0
- package/dist/locale/en_US.js +2 -0
- package/dist/locale/en_US.js.map +1 -1
- package/dist/locale/zh_CN.d.ts +1 -0
- package/dist/locale/zh_CN.js +2 -0
- package/dist/locale/zh_CN.js.map +1 -1
- package/dist/message.d.ts +2 -0
- package/dist/notification.d.ts +2 -0
- package/package.json +3 -2
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
|
@@ -149,7 +149,7 @@ function FormItemLayout({ label, children, meta, help, extra, required, hidden,
|
|
|
149
149
|
});
|
|
150
150
|
}
|
|
151
151
|
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;
|
|
152
|
+
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 } = props;
|
|
153
153
|
const formContext = useContext(FormContext);
|
|
154
154
|
const customStyle = labelWidth ? {
|
|
155
155
|
...style,
|
|
@@ -180,6 +180,8 @@ var AldFormItem = function(props) {
|
|
|
180
180
|
validateTrigger,
|
|
181
181
|
valuePropName,
|
|
182
182
|
getValueFromEvent,
|
|
183
|
+
normalize,
|
|
184
|
+
getValueProps,
|
|
183
185
|
children: (control, meta, form) => {
|
|
184
186
|
if (typeof children === "function") {
|
|
185
187
|
const childContent = children(form);
|
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\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 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 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 normalize,\n getValueProps,\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 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 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 /** 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":"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"}
|
package/dist/Form.d.ts
ADDED
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);
|
|
@@ -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 '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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"}
|
|
@@ -2,6 +2,7 @@ import { default as React } from 'react';
|
|
|
2
2
|
import { TSize } from '../Input';
|
|
3
3
|
export type TextAreaRef = HTMLTextAreaElement;
|
|
4
4
|
export interface ITextAreaProps {
|
|
5
|
+
autoFocus?: boolean;
|
|
5
6
|
allowClear?: boolean;
|
|
6
7
|
autoSize?: boolean | {
|
|
7
8
|
minRows?: number;
|
|
@@ -31,6 +32,9 @@ export interface ITextAreaProps {
|
|
|
31
32
|
onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
|
32
33
|
onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
|
|
33
34
|
onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
|
|
35
|
+
onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
|
|
36
|
+
onCompositionStart?: React.CompositionEventHandler<HTMLTextAreaElement>;
|
|
37
|
+
onCompositionEnd?: React.CompositionEventHandler<HTMLTextAreaElement>;
|
|
34
38
|
style?: React.CSSProperties;
|
|
35
39
|
}
|
|
36
40
|
declare const _default: React.ForwardRefExoticComponent<ITextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Input/components/TextArea/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useRef, useState } from 'react';\nimport DisabledContext from '../../../ConfigProvider/DisabledContext';\nimport SizeContext from '../../../ConfigProvider/sizeContext';\nimport { CloseCircleFill } from '../../../Icon';\nimport { cn } from '../../../lib/utils';\nimport { TSize, getSizeType } from '../Input';\n\nexport type TextAreaRef = HTMLTextAreaElement;\n\nexport interface ITextAreaProps {\n allowClear?: boolean;\n autoSize?: boolean | { minRows?: number; maxRows?: number };\n defaultValue?: string;\n maxLength?: number;\n showCount?:\n | boolean\n | { formatter: (args: { count: number; maxLength?: number }) => string };\n value?: string;\n onPressEnter?: React.KeyboardEventHandler<HTMLTextAreaElement>;\n onResize?: (size: { width: number; height: number }) => void;\n border?: boolean;\n bordered?: boolean;\n className?: string;\n size?: TSize;\n disabled?: boolean;\n placeholder?: string;\n rows?: number;\n onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;\n onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;\n onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;\n style?: React.CSSProperties;\n}\n\nexport default forwardRef<TextAreaRef, ITextAreaProps>((props, ref) => {\n const {\n bordered,\n border,\n size: customSize,\n disabled,\n className = '',\n allowClear = false,\n value: controlledValue,\n defaultValue,\n onChange,\n onPressEnter,\n maxLength,\n showCount,\n autoSize,\n placeholder,\n rows,\n onBlur,\n onFocus,\n style,\n } = props;\n\n const isBordered = bordered ?? border ?? true;\n\n const contextDisabled = useContext(DisabledContext);\n const mergedDisabled = disabled ?? contextDisabled;\n\n const contentSize = useContext(SizeContext);\n const size = customSize || contentSize || 'middle';\n const isControlled = 'value' in props;\n const [innerValue, setInnerValue] = useState(defaultValue ?? '');\n const currentValue = isControlled ? controlledValue ?? '' : innerValue;\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n React.useImperativeHandle(ref, () => textareaRef.current!);\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n if (!isControlled) setInnerValue(e.target.value);\n onChange?.(e);\n };\n\n const handleClear = () => {\n if (!isControlled) setInnerValue('');\n onChange?.({\n target: { value: '' },\n } as React.ChangeEvent<HTMLTextAreaElement>);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (e.key === 'Enter') onPressEnter?.(e);\n };\n\n const minRows = typeof autoSize === 'object' ? autoSize.minRows : undefined;\n const maxRows = typeof autoSize === 'object' ? autoSize.maxRows : undefined;\n\n return (\n <div\n className={cn(\n 'ald-input ald-input-textarea tw-relative',\n `ald-input-textarea-${getSizeType(size)}`,\n isBordered &&\n 'tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-default)]',\n mergedDisabled && 'ald-input-disabled tw-opacity-50',\n className,\n )}\n style={style}\n >\n <textarea\n ref={textareaRef}\n className=\"tw-w-full tw-resize-y tw-border-0 tw-bg-transparent tw-px-3 tw-py-2 tw-text-sm tw-text-[var(--content-primary)] tw-outline-none\"\n value={currentValue}\n onChange={handleChange}\n onBlur={onBlur}\n onFocus={onFocus}\n onKeyDown={handleKeyDown}\n disabled={mergedDisabled}\n placeholder={placeholder}\n maxLength={maxLength}\n rows={rows || (minRows ?? 3)}\n spellCheck={false}\n autoComplete=\"off\"\n style={{\n minHeight: minRows ? `${minRows * 22}px` : undefined,\n maxHeight: maxRows ? `${maxRows * 22}px` : undefined,\n }}\n />\n {allowClear && currentValue && !mergedDisabled && (\n <span\n className=\"tw-absolute tw-right-2 tw-top-2 tw-cursor-pointer\"\n onClick={handleClear}\n >\n <CloseCircleFill size={16} color=\"var(--alias-colors-icon-subtle)\" />\n </span>\n )}\n {showCount && (\n <div className=\"tw-px-2 tw-pb-1 tw-text-right tw-text-xs tw-text-[var(--content-tertiary)]\">\n {typeof showCount === 'object'\n ? showCount.formatter({ count: currentValue.length, maxLength })\n : `${currentValue.length}${maxLength ? `/${maxLength}` : ''}`}\n </div>\n )}\n </div>\n );\n});\n"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Input/components/TextArea/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useRef, useState } from 'react';\nimport DisabledContext from '../../../ConfigProvider/DisabledContext';\nimport SizeContext from '../../../ConfigProvider/sizeContext';\nimport { CloseCircleFill } from '../../../Icon';\nimport { cn } from '../../../lib/utils';\nimport { TSize, getSizeType } from '../Input';\n\nexport type TextAreaRef = HTMLTextAreaElement;\n\nexport interface ITextAreaProps {\n autoFocus?: boolean;\n allowClear?: boolean;\n autoSize?: boolean | { minRows?: number; maxRows?: number };\n defaultValue?: string;\n maxLength?: number;\n showCount?:\n | boolean\n | { formatter: (args: { count: number; maxLength?: number }) => string };\n value?: string;\n onPressEnter?: React.KeyboardEventHandler<HTMLTextAreaElement>;\n onResize?: (size: { width: number; height: number }) => void;\n border?: boolean;\n bordered?: boolean;\n className?: string;\n size?: TSize;\n disabled?: boolean;\n placeholder?: string;\n rows?: number;\n onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;\n onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;\n onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;\n onCompositionStart?: React.CompositionEventHandler<HTMLTextAreaElement>;\n onCompositionEnd?: React.CompositionEventHandler<HTMLTextAreaElement>;\n style?: React.CSSProperties;\n}\n\nexport default forwardRef<TextAreaRef, ITextAreaProps>((props, ref) => {\n const {\n bordered,\n border,\n size: customSize,\n disabled,\n className = '',\n allowClear = false,\n value: controlledValue,\n defaultValue,\n onChange,\n onPressEnter,\n maxLength,\n showCount,\n autoSize,\n placeholder,\n rows,\n onBlur,\n onFocus,\n style,\n } = props;\n\n const isBordered = bordered ?? border ?? true;\n\n const contextDisabled = useContext(DisabledContext);\n const mergedDisabled = disabled ?? contextDisabled;\n\n const contentSize = useContext(SizeContext);\n const size = customSize || contentSize || 'middle';\n const isControlled = 'value' in props;\n const [innerValue, setInnerValue] = useState(defaultValue ?? '');\n const currentValue = isControlled ? controlledValue ?? '' : innerValue;\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n React.useImperativeHandle(ref, () => textareaRef.current!);\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n if (!isControlled) setInnerValue(e.target.value);\n onChange?.(e);\n };\n\n const handleClear = () => {\n if (!isControlled) setInnerValue('');\n onChange?.({\n target: { value: '' },\n } as React.ChangeEvent<HTMLTextAreaElement>);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (e.key === 'Enter') onPressEnter?.(e);\n };\n\n const minRows = typeof autoSize === 'object' ? autoSize.minRows : undefined;\n const maxRows = typeof autoSize === 'object' ? autoSize.maxRows : undefined;\n\n return (\n <div\n className={cn(\n 'ald-input ald-input-textarea tw-relative',\n `ald-input-textarea-${getSizeType(size)}`,\n isBordered &&\n 'tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-default)]',\n mergedDisabled && 'ald-input-disabled tw-opacity-50',\n className,\n )}\n style={style}\n >\n <textarea\n ref={textareaRef}\n className=\"tw-w-full tw-resize-y tw-border-0 tw-bg-transparent tw-px-3 tw-py-2 tw-text-sm tw-text-[var(--content-primary)] tw-outline-none\"\n value={currentValue}\n onChange={handleChange}\n onBlur={onBlur}\n onFocus={onFocus}\n onKeyDown={handleKeyDown}\n disabled={mergedDisabled}\n placeholder={placeholder}\n maxLength={maxLength}\n rows={rows || (minRows ?? 3)}\n spellCheck={false}\n autoComplete=\"off\"\n style={{\n minHeight: minRows ? `${minRows * 22}px` : undefined,\n maxHeight: maxRows ? `${maxRows * 22}px` : undefined,\n }}\n />\n {allowClear && currentValue && !mergedDisabled && (\n <span\n className=\"tw-absolute tw-right-2 tw-top-2 tw-cursor-pointer\"\n onClick={handleClear}\n >\n <CloseCircleFill size={16} color=\"var(--alias-colors-icon-subtle)\" />\n </span>\n )}\n {showCount && (\n <div className=\"tw-px-2 tw-pb-1 tw-text-right tw-text-xs tw-text-[var(--content-tertiary)]\">\n {typeof showCount === 'object'\n ? showCount.formatter({ count: currentValue.length, maxLength })\n : `${currentValue.length}${maxLength ? `/${maxLength}` : ''}`}\n </div>\n )}\n </div>\n );\n});\n"],"mappings":";;;;;;;;AAqCA,IAAA,mBAAe,YAAyC,OAAO,QAAQ;CACrE,MAAM,EACJ,UACA,QACA,MAAM,YACN,UACA,YAAY,IACZ,aAAa,OACb,OAAO,iBACP,cACA,UACA,cACA,WACA,WACA,UACA,aACA,MACA,QACA,SACA,UACE;CAEJ,MAAM,aAAa,YAAY,UAAU;CAEzC,MAAM,kBAAkB,WAAW,gBAAgB;CACnD,MAAM,iBAAiB,YAAY;CAEnC,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,OAAO,cAAc,eAAe;CAC1C,MAAM,eAAe,WAAW;CAChC,MAAM,CAAC,YAAY,iBAAiB,SAAS,gBAAgB,GAAG;CAChE,MAAM,eAAe,eAAe,mBAAmB,KAAK;CAC5D,MAAM,cAAc,OAA4B,KAAK;AAErD,OAAM,oBAAoB,WAAW,YAAY,QAAS;CAE1D,MAAM,gBAAgB,MAA8C;AAClE,MAAI,CAAC,aAAc,eAAc,EAAE,OAAO,MAAM;AAChD,aAAW,EAAE;;CAGf,MAAM,oBAAoB;AACxB,MAAI,CAAC,aAAc,eAAc,GAAG;AACpC,aAAW,EACT,QAAQ,EAAE,OAAO,IAAI,EACtB,CAA2C;;CAG9C,MAAM,iBAAiB,MAAgD;AACrE,MAAI,EAAE,QAAQ,QAAS,gBAAe,EAAE;;CAG1C,MAAM,UAAU,OAAO,aAAa,WAAW,SAAS,UAAU;CAClE,MAAM,UAAU,OAAO,aAAa,WAAW,SAAS,UAAU;AAElE,QACE,qBAAC,OAAD;EACE,WAAW,GACT,4CACA,sBAAsB,YAAY,KAAK,IACvC,cACE,+EACF,kBAAkB,oCAClB,UACD;EACM;YATT;GAWE,oBAAC,YAAD;IACE,KAAK;IACL,WAAU;IACV,OAAO;IACP,UAAU;IACF;IACC;IACT,WAAW;IACX,UAAU;IACG;IACF;IACX,MAAM,SAAS,WAAW;IAC1B,YAAY;IACZ,cAAa;IACb,OAAO;KACL,WAAW,UAAU,GAAG,UAAU,GAAG,MAAM;KAC3C,WAAW,UAAU,GAAG,UAAU,GAAG,MAAM;KAC5C;IACD,CAAA;GACD,cAAc,gBAAgB,CAAC,kBAC9B,oBAAC,QAAD;IACE,WAAU;IACV,SAAS;cAET,oBAAC,MAAD;KAAiB,MAAM;KAAI,OAAM;KAAoC,CAAA;IAChE,CAAA;GAER,aACC,oBAAC,OAAD;IAAK,WAAU;cACZ,OAAO,cAAc,WAClB,UAAU,UAAU;KAAE,OAAO,aAAa;KAAQ;KAAW,CAAC,GAC9D,GAAG,aAAa,SAAS,YAAY,IAAI,cAAc;IACvD,CAAA;GAEJ;;EAER"}
|
package/dist/Input.d.ts
ADDED
|
@@ -37,6 +37,7 @@ export interface IInputNumberProps {
|
|
|
37
37
|
style?: React.CSSProperties;
|
|
38
38
|
placeholder?: string;
|
|
39
39
|
id?: string;
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
width?: number | string;
|
|
41
|
+
onBlur?: React.FocusEventHandler<HTMLInputElement>;
|
|
42
|
+
onFocus?: React.FocusEventHandler<HTMLInputElement>;
|
|
42
43
|
}
|
package/dist/Layout.d.ts
ADDED
package/dist/List.d.ts
ADDED
package/dist/Menu.d.ts
ADDED
package/dist/Modal/index.d.ts
CHANGED
|
@@ -3,8 +3,8 @@ import { ButtonType, IButtonProps } from '../Button';
|
|
|
3
3
|
export declare const destroyFns: Array<() => void>;
|
|
4
4
|
export interface ModalProps {
|
|
5
5
|
open?: boolean;
|
|
6
|
-
onOk?: (e: React.MouseEvent) => void;
|
|
7
|
-
onCancel?: (e: React.MouseEvent) => void;
|
|
6
|
+
onOk?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
7
|
+
onCancel?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
8
8
|
afterClose?: () => void;
|
|
9
9
|
title?: React.ReactNode;
|
|
10
10
|
subTitle?: React.ReactNode;
|
|
@@ -35,6 +35,7 @@ export interface ModalProps {
|
|
|
35
35
|
fullscreen?: boolean;
|
|
36
36
|
keyboard?: boolean;
|
|
37
37
|
afterOpenChange?: (open: boolean) => void;
|
|
38
|
+
getContainer?: (() => HTMLElement) | false;
|
|
38
39
|
/** @internal used by static methods to pass modal type for icon styling */
|
|
39
40
|
_modalType?: string;
|
|
40
41
|
}
|
|
@@ -52,6 +53,8 @@ export interface ModalFuncProps {
|
|
|
52
53
|
onCancel?: (...args: any[]) => any;
|
|
53
54
|
width?: number | string;
|
|
54
55
|
className?: string;
|
|
56
|
+
/** @deprecated Use `className` instead. Preserved for antd v4 compat. */
|
|
57
|
+
wrapClassName?: string;
|
|
55
58
|
closable?: boolean;
|
|
56
59
|
type?: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm';
|
|
57
60
|
centered?: boolean;
|