@aloudata/aloudata-design 3.0.23 → 3.0.24
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/Button/index.js +2 -2
- package/dist/Button/index.js.map +1 -1
- package/dist/Checkbox/index.js +23 -13
- package/dist/Checkbox/index.js.map +1 -1
- package/dist/Drawer/index.d.ts +1 -1
- package/dist/Drawer/index.js +27 -12
- package/dist/Drawer/index.js.map +1 -1
- package/dist/Dropdown/index.js +6 -1
- package/dist/Dropdown/index.js.map +1 -1
- package/dist/Form/index.js +3 -3
- package/dist/Form/index.js.map +1 -1
- package/dist/Input/components/Input/index.js +4 -4
- package/dist/Input/components/Input/index.js.map +1 -1
- package/dist/InputNumber/index.js +1 -1
- package/dist/InputNumber/index.js.map +1 -1
- package/dist/Radio/components/Radio/index.js +2 -2
- package/dist/Radio/components/Radio/index.js.map +1 -1
- package/dist/Switch/index.js +1 -0
- package/dist/Switch/index.js.map +1 -1
- package/dist/Table/components/Cell.js +8 -3
- package/dist/Table/components/Cell.js.map +1 -1
- package/dist/Table/components/Footer/index.js +2 -1
- package/dist/Table/components/Footer/index.js.map +1 -1
- package/dist/Table/components/Header.js +1 -1
- package/dist/Table/components/Header.js.map +1 -1
- package/dist/Tabs/index.d.ts +1 -1
- package/dist/Tabs/index.js +85 -11
- package/dist/Tabs/index.js.map +1 -1
- package/dist/aloudata-design.css +1 -1
- package/package.json +1 -1
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/**\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\ntype ColConfig = {\n flex?: string | number;\n span?: number;\n offset?: number;\n style?: React.CSSProperties;\n [key: string]: any;\n};\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?(name: LooseNamePath, options?: ScrollIntoViewOptions): 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?: ColConfig;\n wrapperCol?: ColConfig;\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?: ColConfig;\n wrapperCol?: ColConfig;\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?: ColConfig): React.CSSProperties | undefined {\n if (!col) return undefined;\n const s: React.CSSProperties = { ...col.style };\n if (col.flex !== null && col.flex !== undefined) {\n s.flex = col.flex;\n }\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 layout !== 'inline' && 'tw-w-full',\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?: ColConfig;\n wrapperCol?: ColConfig;\n validateStatus?: ValidateStatus;\n colon?: boolean;\n formContext: {\n layout?: string;\n labelCol?: ColConfig;\n wrapperCol?: ColConfig;\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 const hasLabel = label !== null && label !== undefined && label !== '';\n\n const labelNode = hasLabel ? (\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-[var(--content-secondary)] tw-text-typography-label',\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-[var(--content-secondary)] tw-text-typography-caption\">\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 // tw-min-w-0 必须同时加:flex item 默认 min-width:auto = min-content,\n // 子元素 intrinsic min-content(如多选 Select 的 tag 集合)会反向把 control 撑超出父\n // form-item 分配的宽度,再让 rc-overflow 误判\"全部能塞下\"导致不折叠 +N。\n // 实测:指标定义\"更多筛选\"浮窗里 8 个特性 tag 横向溢出浮窗边界即此因\n // (release-2.3_test 复现);这里钳住 min-width 后 Overflow 测量恢复正确。\n layout === 'horizontal' && 'tw-min-w-0 tw-flex-1',\n )}\n style={useGridLayout ? colStyle(resolvedWrapperCol) : undefined}\n >\n <FormItemInputContext.Provider value={itemInputContextValue}>\n <div className=\"ald-form-item-control-input\">\n <div className=\"ald-form-item-control-input-content\">{children}</div>\n </div>\n </FormItemInputContext.Provider>\n {/* 始终渲染错误容器,避免 DOM 增删触发 Radix FocusScope MutationObserver 劫持焦点 */}\n <div\n className={cn(\n 'ald-form-item-explain ant-form-item-explain tw-transition-all tw-duration-200 tw-text-typography-caption',\n displayMessages.length > 0 && 'tw-mt-1',\n hasError && 'tw-text-[var(--content-negative-secondary)]',\n hasWarning && !hasError && 'tw-text-[var(--content-warning-primary)]',\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-[var(--content-secondary)] tw-text-typography-caption\">\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-[var(--content-negative-secondary)] tw-text-typography-caption\"\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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"}
|
|
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\ntype ColConfig = {\n flex?: string | number;\n span?: number;\n offset?: number;\n style?: React.CSSProperties;\n [key: string]: any;\n};\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?(name: LooseNamePath, options?: ScrollIntoViewOptions): 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?: ColConfig;\n wrapperCol?: ColConfig;\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?: ColConfig;\n wrapperCol?: ColConfig;\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?: ColConfig): React.CSSProperties | undefined {\n if (!col) return undefined;\n const s: React.CSSProperties = { ...col.style };\n if (col.flex !== null && col.flex !== undefined) {\n s.flex = col.flex;\n }\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 layout !== 'inline' && 'tw-w-full',\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?: ColConfig;\n wrapperCol?: ColConfig;\n validateStatus?: ValidateStatus;\n colon?: boolean;\n formContext: {\n layout?: string;\n labelCol?: ColConfig;\n wrapperCol?: ColConfig;\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 && !hidden) {\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 const hasLabel = label !== null && label !== undefined && label !== '';\n\n const labelNode = hasLabel ? (\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-[var(--content-secondary)] tw-text-typography-label',\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-[var(--content-secondary)] tw-text-typography-caption\">\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 // tw-min-w-0 必须同时加:flex item 默认 min-width:auto = min-content,\n // 子元素 intrinsic min-content(如多选 Select 的 tag 集合)会反向把 control 撑超出父\n // form-item 分配的宽度,再让 rc-overflow 误判\"全部能塞下\"导致不折叠 +N。\n // 实测:指标定义\"更多筛选\"浮窗里 8 个特性 tag 横向溢出浮窗边界即此因\n // (release-2.3_test 复现);这里钳住 min-width 后 Overflow 测量恢复正确。\n layout === 'horizontal' && 'tw-min-w-0 tw-flex-1',\n )}\n style={useGridLayout ? colStyle(resolvedWrapperCol) : undefined}\n >\n <FormItemInputContext.Provider value={itemInputContextValue}>\n <div className=\"ald-form-item-control-input\">\n <div className=\"ald-form-item-control-input-content\">{children}</div>\n </div>\n </FormItemInputContext.Provider>\n {/* 始终渲染错误容器,避免 DOM 增删触发 Radix FocusScope MutationObserver 劫持焦点 */}\n <div\n className={cn(\n 'ald-form-item-explain ant-form-item-explain tw-transition-all tw-duration-200 tw-text-typography-caption',\n displayMessages.length > 0 && 'tw-mt-1',\n hasError && 'tw-text-[var(--content-negative-secondary)]',\n hasWarning && !hasError && 'tw-text-[var(--content-warning-primary)]',\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-[var(--content-secondary)] tw-text-typography-caption\">\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 && !hidden) {\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 && !hidden) {\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-[var(--content-negative-secondary)] tw-text-typography-caption\"\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":";;;;;;;;;;AAoKA,SAAS,SAAS,KAAkD;AAClE,KAAI,CAAC,IAAK,QAAO;CACjB,MAAM,IAAyB,EAAE,GAAG,IAAI,OAAO;AAC/C,KAAI,IAAI,SAAS,QAAQ,IAAI,SAAS,OACpC,GAAE,OAAO,IAAI;AAEf,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,WAAW,YAAY,aACvB,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,WAAW,CAAC,OACd,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;CAG3D,MAAM,YAFW,UAAU,QAAQ,UAAU,UAAa,UAAU,KAGlE,oBAAC,OAAD;EACE,WAAW,GACT,2CAIA,WAAW,cAAc,oBACzB,WAAW,gBAAgB,sBAC5B;EACD,OAAO,gBAAgB,SAAS,iBAAiB,GAAG;YAEpD,qBAAC,SAAD;GACE,WAAW,GACT,+DACA,CAAC,aAAa,yBACf;aAJH;IAMG,gBACC,oBAAC,QAAD;KAAM,WAAU;eAAoD;KAE7D,CAAA;IAER;IACA,gBACC,oBAAC,QAAD;KAAM,WAAU;eAAwE;KAEjF,CAAA;IAER,aAAa,QAAQ,MAAM;IACtB;;EACJ,CAAA,GACJ;CAEJ,MAAM,cACJ,qBAAC,OAAD;EACE,WAAW,GACT,+CAMA,WAAW,gBAAgB,uBAC5B;EACD,OAAO,gBAAgB,SAAS,mBAAmB,GAAG;YAVxD;GAYE,oBAAC,qBAAqB,UAAtB;IAA+B,OAAO;cACpC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,OAAD;MAAK,WAAU;MAAuC;MAAe,CAAA;KACjE,CAAA;IACwB,CAAA;GAEhC,oBAAC,OAAD;IACE,WAAW,GACT,4GACA,gBAAgB,SAAS,KAAK,WAC9B,YAAY,+CACZ,cAAc,CAAC,YAAY,4CAC3B,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,WAAW,CAAC,OACd,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,WAAW,CAAC,QAAQ;AACtB,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"}
|
|
@@ -73,7 +73,7 @@ var Input = forwardRef((props, ref) => {
|
|
|
73
73
|
children: addonBefore
|
|
74
74
|
}),
|
|
75
75
|
prefix && /* @__PURE__ */ jsx("span", {
|
|
76
|
-
className: "ald-input-prefix ant-input-prefix tw-flex tw-items-center tw-pl-2 tw-text-[var(--content-secondary)]",
|
|
76
|
+
className: "ald-input-prefix ant-input-prefix tw-flex tw-shrink-0 tw-items-center tw-pl-2 tw-text-[var(--content-secondary)]",
|
|
77
77
|
children: prefix
|
|
78
78
|
}),
|
|
79
79
|
/* @__PURE__ */ jsx("input", {
|
|
@@ -107,7 +107,7 @@ var Input = forwardRef((props, ref) => {
|
|
|
107
107
|
...restInputProps
|
|
108
108
|
}),
|
|
109
109
|
showClearIcon && /* @__PURE__ */ jsx("span", {
|
|
110
|
-
className: "ald-input-clear ant-input-clear-icon tw-flex tw-cursor-pointer tw-items-center tw-pr-1",
|
|
110
|
+
className: "ald-input-clear ant-input-clear-icon tw-flex tw-shrink-0 tw-cursor-pointer tw-items-center tw-pr-1",
|
|
111
111
|
onClick: handleClear,
|
|
112
112
|
children: /* @__PURE__ */ jsx(Memo, {
|
|
113
113
|
size: 16,
|
|
@@ -115,11 +115,11 @@ var Input = forwardRef((props, ref) => {
|
|
|
115
115
|
})
|
|
116
116
|
}),
|
|
117
117
|
suffix && /* @__PURE__ */ jsx("span", {
|
|
118
|
-
className: "ald-input-suffix ant-input-suffix tw-flex tw-items-center tw-pr-2 tw-text-[var(--content-secondary)]",
|
|
118
|
+
className: "ald-input-suffix ant-input-suffix tw-flex tw-shrink-0 tw-items-center tw-pr-2 tw-text-[var(--content-secondary)]",
|
|
119
119
|
children: suffix
|
|
120
120
|
}),
|
|
121
121
|
countInfo && /* @__PURE__ */ jsx("span", {
|
|
122
|
-
className: "ald-input-count tw-pr-2 tw-text-[var(--content-tertiary)] tw-text-typography-caption",
|
|
122
|
+
className: "ald-input-count tw-shrink-0 tw-pr-2 tw-text-[var(--content-tertiary)] tw-text-typography-caption",
|
|
123
123
|
children: countInfo
|
|
124
124
|
}),
|
|
125
125
|
addonAfter && /* @__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 /** 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 extends Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n | 'size'\n | 'prefix'\n | 'value'\n | 'defaultValue'\n | 'onChange'\n | 'disabled'\n | 'type'\n | 'max'\n > {\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 /** 透传到内部 input 元素的 data-testid,用于自动化测试定位 */\n 'data-testid'?: string;\n /** 透传到内部 input 元素的 aria-label,用于可访问性与自动化测试定位 */\n 'aria-label'?: string;\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 minLength,\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 autoComplete = 'off',\n autoFocus,\n readOnly,\n width,\n style,\n 'data-testid': dataTestid,\n 'aria-label': ariaLabel,\n ...restInputProps\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 // 通过原生 input 事件统一触发 React onChange,确保事件契约完整且只回调一次。\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 };\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(--background-default)]',\n bordered &&\n 'tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]',\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(--border-brand-strong)]',\n !mergedDisabled &&\n !focused &&\n 'hover:tw-border-[var(--border-brand-strong)]',\n `ald-input-${getSizeType(size)}`,\n 'tw-text-typography-body-dense',\n size === 'small' && 'tw-h-7',\n size === 'large' && 'tw-h-9',\n (size === 'middle' || !size) && 'tw-h-8',\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(--background-neutral-on-subtle)] tw-text-[var(--content-secondary)]',\n compactClasses,\n className,\n )}\n style={{\n ...style,\n width,\n }}\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-[var(--action-ghost-normal)] 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 minLength={minLength}\n autoComplete={autoComplete}\n autoFocus={autoFocus}\n readOnly={readOnly}\n spellCheck={false}\n data-testid={dataTestid}\n aria-label={ariaLabel}\n {...restInputProps}\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(--content-secondary)\" />\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-[var(--content-tertiary)] tw-text-typography-caption\">\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 extends Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n | 'size'\n | 'prefix'\n | 'value'\n | 'defaultValue'\n | 'onChange'\n | 'disabled'\n | 'type'\n | 'max'\n > {\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 /** 透传到内部 input 元素的 data-testid,用于自动化测试定位 */\n 'data-testid'?: string;\n /** 透传到内部 input 元素的 aria-label,用于可访问性与自动化测试定位 */\n 'aria-label'?: string;\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 minLength,\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 autoComplete = 'off',\n autoFocus,\n readOnly,\n width,\n style,\n 'data-testid': dataTestid,\n 'aria-label': ariaLabel,\n ...restInputProps\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 // 通过原生 input 事件统一触发 React onChange,确保事件契约完整且只回调一次。\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 };\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(--background-default)]',\n bordered &&\n 'tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]',\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(--border-brand-strong)]',\n !mergedDisabled &&\n !focused &&\n 'hover:tw-border-[var(--border-brand-strong)]',\n `ald-input-${getSizeType(size)}`,\n // Typography Foundation: the wrapper owns the approved Body Dense\n // context for the editable value and placeholder. Count opts into its\n // approved Caption role below.\n 'tw-text-typography-body-dense',\n // Component Geometry: height belongs to the Input envelope, not to a\n // relationship-spacing Primitive.\n size === 'small' && 'tw-h-7',\n size === 'large' && 'tw-h-9',\n (size === 'middle' || !size) && 'tw-h-8',\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(--background-neutral-on-subtle)] tw-text-[var(--content-secondary)]',\n compactClasses,\n className,\n )}\n style={{\n ...style,\n width,\n }}\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-shrink-0 tw-items-center tw-pl-2 tw-text-[var(--content-secondary)]\">\n {prefix}\n </span>\n )}\n {/*\n * Value Affordance and Text Containment remain Constraint-owned and\n * Blocked. These shrink guards reserve local Geometry for affordances;\n * they do not define a spacing Primitive or Mapping.\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-[var(--action-ghost-normal)] 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 minLength={minLength}\n autoComplete={autoComplete}\n autoFocus={autoFocus}\n readOnly={readOnly}\n spellCheck={false}\n data-testid={dataTestid}\n aria-label={ariaLabel}\n {...restInputProps}\n />\n {showClearIcon && (\n <span\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n className=\"ald-input-clear ant-input-clear-icon tw-flex tw-shrink-0 tw-cursor-pointer tw-items-center tw-pr-1\"\n onClick={handleClear}\n >\n <CloseCircleFill size={16} color=\"var(--content-secondary)\" />\n </span>\n )}\n {/* antd 兼容:保留 ant-input-suffix class,消费方 CSS 可能依赖该选择器 */}\n {suffix && (\n <span className=\"ald-input-suffix ant-input-suffix tw-flex tw-shrink-0 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-shrink-0 tw-pr-2 tw-text-[var(--content-tertiary)] tw-text-typography-caption\">\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":";;;;;;;;AAyEA,SAAgB,YAAY,UAAwB;AAClD,KAAI;EAAC;EAAS;EAAU;EAAQ,CAAC,SAAS,YAAY,GAAG,CACvD,QAAO;AAET,QAAO;;AAGT,IAAM,QAAQ,YAAmC,OAAO,QAAQ;CAC9D,MAAM,EACJ,MAAM,YACN,WACA,WAAW,MACX,QACA,UACA,YACA,QACA,QACA,aACA,YACA,WACA,WACA,WACA,OAAO,iBACP,cACA,UACA,cACA,QACA,SACA,WACA,oBACA,kBACA,aACA,MACA,IACA,eAAe,OACf,WACA,UACA,OACA,OACA,eAAe,YACf,cAAc,WACd,GAAG,mBACD;CAEJ,MAAM,kBAAkB,WAAW,gBAAgB;CACnD,MAAM,iBAAiB,YAAY;CAEnC,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,EAAE,aAAa,0BACnB,sBAAsB,YAAY;CACpC,MAAM,OAAO,cAAc,eAAe,eAAe;CAEzD,MAAM,eAAe,WAAW;CAChC,MAAM,CAAC,YAAY,iBAAiB,SAAS,gBAAgB,GAAG;CAChE,MAAM,eAAe,eAAe,mBAAmB,KAAK;CAC5D,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,WAAW,OAAyB,KAAK;AAE/C,OAAM,oBAAoB,WAAW;EACnC,MAAM,KAAK,SAAS;AAEnB,KAAgB,QAAQ;AACzB,SAAO;GACP;CAEF,MAAM,gBAAgB,MAA2C;AAC/D,MAAI,CAAC,aAAc,eAAc,EAAE,OAAO,MAAM;AAChD,aAAW,EAAE;;CAGf,MAAM,oBAAoB;EAExB,MAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,MAAM,CAAC;AACzD,MAAI,SAAS,SAAS;AAKpB,IAJqB,OAAO,yBAC1B,iBAAiB,WACjB,QACD,EAAE,MACW,KAAK,SAAS,SAAS,GAAG;AACxC,YAAS,QAAQ,cAAc,YAAY;;AAE7C,MAAI,CAAC,aAAc,eAAc,GAAG;;CAGtC,MAAM,iBAAiB,MAA6C;AAClE,MAAI,EAAE,QAAQ,QAAS,gBAAe,EAAE;AACxC,cAAY,EAAE;;CAGhB,MAAM,gBAAgB,cAAc,gBAAgB,CAAC;CAErD,MAAM,YACJ,aAAa,OAAO,cAAc,WAC9B,UAAU,UAAU;EAClB,OAAO,aAAa;EACpB;EACD,CAAC,GACF,YACA,GAAG,aAAa,SAAS,YAAY,IAAI,cAAc,OACvD;CAGN,MAAM,iBAAiB,wBACnB,GACE,CAAC,sBAAsB,mCACrB,sBACF,CAAC,sBAAsB,kCACrB,sBACF,CAAC,sBAAsB,mCAAmC,YAC3D,GACD;AAEJ,QACE,qBAAC,QAAD;EACE,WAAW,GAET,gHACA,YACE,sFAIF,WACE,0EACF,CAAC,kBACC,CAAC,WACD,gDACF,aAAa,YAAY,KAAK,IAI9B,iCAGA,SAAS,WAAW,UACpB,SAAS,WAAW,WACnB,SAAS,YAAY,CAAC,SAAS,UAChC,WAAW,WACT,6DACF,WAAW,aACT,8DACF,kBACE,2HACF,gBACA,UACD;EACD,OAAO;GACL,GAAG;GACH;GACD;EACD,cAAc,MAAM;AAIlB,OAAI,EAAE,WAAW,SAAS,SACxB;QAAI,SAAS,kBAAkB,SAAS,QACtC,GAAE,gBAAgB;;;EAIxB,YAAY,MAAM;AAEhB,OAAI,EAAE,WAAW,SAAS,WAAW,SAAS,QAC5C,UAAS,QAAQ,OAAO;;YAlD9B;GAsDG,eACC,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA;GAGR,UACC,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA;GAOT,oBAAC,SAAD;IACE,KAAK;IACD;IACJ,MAAM,QAAQ;IACd,WAAU;IACV,OAAO;IACP,UAAU;IACV,SAAS,MAAM;AACb,gBAAW,MAAM;AACjB,cAAS,EAAE;;IAEb,UAAU,MAAM;AACd,gBAAW,KAAK;AAChB,eAAU,EAAE;;IAEd,WAAW;IACS;IACF;IAClB,UAAU;IACG;IACF;IACA;IACG;IACH;IACD;IACV,YAAY;IACZ,eAAa;IACb,cAAY;IACZ,GAAI;IACJ,CAAA;GACD,iBACC,oBAAC,QAAD;IAEE,WAAU;IACV,SAAS;cAET,oBAAC,MAAD;KAAiB,MAAM;KAAI,OAAM;KAA6B,CAAA;IACzD,CAAA;GAGR,UACC,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA;GAER,aACC,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA;GAER,cACC,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA;GAEJ;;EAET"}
|
|
@@ -95,7 +95,7 @@ function InputNumber(props) {
|
|
|
95
95
|
type: "text",
|
|
96
96
|
inputMode: "numeric",
|
|
97
97
|
size: 1,
|
|
98
|
-
className: cn("tw-min-w-0 tw-flex-1 tw-border-0 tw-bg-[var(--action-ghost-normal)] tw-px-[7px] tw-text-inherit tw-outline-none", mergedDisabled && "tw-cursor-not-allowed tw-text-[var(--content-secondary)]"),
|
|
98
|
+
className: cn("tw-min-w-0 tw-flex-1 tw-border-0 tw-bg-[var(--action-ghost-normal)] tw-px-[7px] tw-text-inherit tw-outline-none tw-text-typography-body-dense", mergedDisabled && "tw-cursor-not-allowed tw-text-[var(--content-secondary)]"),
|
|
99
99
|
value: displayValue,
|
|
100
100
|
onChange: handleChange,
|
|
101
101
|
onBlur: handleBlur,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/InputNumber/index.tsx"],"sourcesContent":["import React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { cn } from '../lib/utils';\nimport { IInputNumberProps } from './type';\n\nexport default function InputNumber(props: IInputNumberProps) {\n const {\n className,\n disabled: customDisabled,\n size: customSize,\n status,\n value: controlledValue,\n defaultValue,\n min = -Infinity,\n max = Infinity,\n step = 1,\n precision,\n onChange,\n onPressEnter,\n onBlur,\n onFocus,\n formatter,\n parser,\n prefix,\n addonBefore,\n addonAfter,\n placeholder,\n autoFocus,\n bordered = true,\n keyboard = true,\n readonly: readOnly,\n style,\n id,\n 'data-testid': dataTestId,\n 'aria-label': ariaLabel,\n } = props;\n\n const contentSize = useContext(SizeContext);\n const size = customSize || contentSize || 'middle';\n const disabled = useContext(DisabledContext);\n const mergedDisabled = customDisabled ?? disabled;\n\n const isControlled = 'value' in props;\n const [innerValue, setInnerValue] = useState<number | null | undefined>(\n defaultValue ?? null,\n );\n const currentValue = isControlled ? controlledValue : innerValue;\n\n const [inputStr, setInputStr] = useState(\n currentValue !== null && currentValue !== undefined\n ? String(currentValue)\n : '',\n );\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (currentValue !== null && currentValue !== undefined) {\n setInputStr(String(currentValue));\n } else {\n setInputStr('');\n }\n }, [currentValue]);\n\n const clamp = useCallback(\n (val: number) => {\n let v = Math.max(min, Math.min(max, val));\n if (precision !== undefined) {\n v = Number(v.toFixed(precision));\n }\n return v;\n },\n [min, max, precision],\n );\n\n const updateValue = useCallback(\n (newVal: number | null) => {\n const clamped = newVal !== null ? clamp(newVal) : null;\n if (!isControlled) setInnerValue(clamped);\n onChange?.(clamped);\n },\n [clamp, isControlled, onChange],\n );\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const raw = e.target.value;\n setInputStr(raw);\n if (raw === '') {\n // 清空立即同步到 value,对齐 antd 行为。\n // 否则消费方\"清空后直接点确定\"(未 blur 触发 handleBlur 的 null 兜底)拿到的\n // 仍是旧值,把已清空的筛选条件错误带进 query(被 release-2.3_test 周期实例\n // 更多浮窗实测复现)。\n updateValue(null);\n return;\n }\n if (raw === '-') return;\n const parsed = parser ? parser(raw) : Number(raw);\n if (!isNaN(parsed)) {\n updateValue(parsed);\n }\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n if (inputStr === '' || inputStr === '-') {\n updateValue(null);\n setInputStr('');\n } else {\n const parsed = parser ? parser(inputStr) : Number(inputStr);\n if (!isNaN(parsed)) {\n const clamped = clamp(parsed);\n updateValue(clamped);\n setInputStr(String(clamped));\n }\n }\n onBlur?.(e);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') {\n onPressEnter?.(e);\n }\n if (!keyboard) return;\n const numStep = typeof step === 'string' ? Number(step) : step;\n if (e.key === 'ArrowUp') {\n e.preventDefault();\n updateValue(clamp((currentValue ?? 0) + numStep));\n } else if (e.key === 'ArrowDown') {\n e.preventDefault();\n updateValue(clamp((currentValue ?? 0) - numStep));\n }\n };\n\n const displayValue = formatter\n ? formatter(currentValue ?? undefined, {\n userTyping: document.activeElement === inputRef.current,\n input: inputStr,\n })\n : inputStr;\n\n const hasAddon = addonBefore || addonAfter;\n\n const sizeClasses = cn(\n size === 'large' && 'ald-input-number-large tw-h-9 tw-text-base',\n size === 'small' && 'ald-input-number-small tw-h-7 tw-text-xs',\n size !== 'large' &&\n size !== 'small' &&\n 'ald-input-number-middle tw-h-8 tw-text-sm',\n );\n\n const radiusClasses = cn(\n size === 'large' && 'tw-rounded-[8px]',\n size === 'small' && 'tw-rounded-[4px]',\n size !== 'large' && size !== 'small' && 'tw-rounded-[6px]',\n );\n\n const inputBox = (\n <div\n data-testid={!hasAddon ? dataTestId : undefined}\n aria-label={!hasAddon ? ariaLabel : undefined}\n className={cn(\n // 默认宽度 90px 与 antd InputNumber 对齐:input 上 size={1} 会让 intrinsic\n // 宽度坍缩到 1 字符,若 wrapper 也不给宽度,整个组件在 flex / inline 上下\n // 文里就只剩 ~9px。消费方可通过 className(`w-[xxx]`)或 style 覆盖。\n 'ald-input-number tw-inline-flex tw-w-[90px] tw-min-w-0 tw-items-center tw-overflow-hidden',\n bordered &&\n 'tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]',\n mergedDisabled\n ? 'ald-input-number-disabled tw-cursor-not-allowed tw-bg-[var(--background-neutral-on-subtle)] tw-text-[var(--content-secondary)]'\n : 'tw-bg-[var(--background-default)] tw-text-[var(--content-primary)] hover:tw-border-[var(--border-brand-strong)]',\n !hasAddon && sizeClasses,\n hasAddon\n ? 'tw-h-auto tw-flex-1 tw-self-stretch tw-rounded-none'\n : radiusClasses,\n status === 'error' && 'tw-border-[var(--border-negative-strong)]',\n status === 'warning' && 'tw-border-[var(--border-warning-subtle)]',\n 'focus-within:tw-border-[var(--border-brand-strong)] focus-within:tw-outline focus-within:tw-outline-1 focus-within:tw-outline-[var(--border-brand-strong)]',\n !hasAddon && className,\n )}\n style={!hasAddon ? style : undefined}\n >\n {prefix && (\n <span className=\"tw-px-2 tw-text-[var(--content-secondary)]\">\n {prefix}\n </span>\n )}\n <input\n ref={inputRef}\n id={id}\n type=\"text\"\n inputMode=\"numeric\"\n // size=1 让 <input> 的 intrinsic 宽度坍缩到 1 个字符,\n // 在 flex 父容器中按 width / flex-1 受控,避免默认 size=20 把 inline-flex 外层撑出 ~150px 内容宽度。\n size={1}\n className={cn(\n 'tw-min-w-0 tw-flex-1 tw-border-0 tw-bg-[var(--action-ghost-normal)] tw-px-[7px] tw-text-inherit tw-outline-none',\n mergedDisabled &&\n 'tw-cursor-not-allowed tw-text-[var(--content-secondary)]',\n )}\n value={displayValue}\n onChange={handleChange}\n onBlur={handleBlur}\n onFocus={onFocus}\n onKeyDown={handleKeyDown}\n disabled={mergedDisabled}\n readOnly={readOnly}\n autoFocus={autoFocus}\n placeholder={placeholder}\n />\n </div>\n );\n\n if (!hasAddon) return inputBox;\n\n return (\n <div\n data-testid={dataTestId}\n aria-label={ariaLabel}\n className={cn(\n // 自然宽 = 内部 inputBox 默认 90px + addonBefore/After 内容宽。inline-flex\n // 让外层按内容宽呈现,不再 `tw-w-full` 强吞 flex 父级剩余空间——后者会把\n // 同 flex 行的 Slider 挤成 0 宽(看板\"图形宽度\"行只剩 thumb 圆点的根因)。\n // `tw-min-w-0` 让本身作为 flex item 时受消费方 `flex-basis` / `width`\n // 真正约束——默认 `min-width: auto = min-content` 会被内部 input(90px) +\n // addon 撑到 ~126px,覆盖消费方的 flex-basis。内部 inputBox 已 `tw-min-w-0\n // tw-overflow-hidden`,被约束后内容会按 input flex-1 收缩,不会溢出。\n // 消费方需要撑满显式加 `tw-w-full` className,需要更窄/更宽直接覆盖宽度。\n 'ald-input-number-group tw-inline-flex tw-min-w-0 tw-items-stretch',\n sizeClasses,\n radiusClasses,\n mergedDisabled && 'ald-input-number-disabled',\n className,\n )}\n style={style}\n >\n {addonBefore && (\n <span\n className={cn(\n 'ald-input-number-addon tw-flex tw-shrink-0 tw-items-center tw-border tw-border-r-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-neutral-subtle)] tw-px-3 tw-text-[var(--content-secondary)]',\n size === 'large' && 'tw-rounded-l-[8px]',\n size === 'small' && 'tw-rounded-l-[4px]',\n size !== 'large' && size !== 'small' && 'tw-rounded-l-[6px]',\n )}\n >\n {addonBefore}\n </span>\n )}\n {inputBox}\n {addonAfter && (\n <span\n className={cn(\n 'ald-input-number-addon tw-flex tw-shrink-0 tw-items-center tw-border tw-border-l-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-neutral-subtle)] tw-px-3 tw-text-[var(--content-secondary)]',\n size === 'large' && 'tw-rounded-r-[8px]',\n size === 'small' && 'tw-rounded-r-[4px]',\n size !== 'large' && size !== 'small' && 'tw-rounded-r-[6px]',\n )}\n >\n {addonAfter}\n </span>\n )}\n </div>\n );\n}\n\nexport type { IInputNumberProps };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/InputNumber/index.tsx"],"sourcesContent":["import React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { cn } from '../lib/utils';\nimport { IInputNumberProps } from './type';\n\nexport default function InputNumber(props: IInputNumberProps) {\n const {\n className,\n disabled: customDisabled,\n size: customSize,\n status,\n value: controlledValue,\n defaultValue,\n min = -Infinity,\n max = Infinity,\n step = 1,\n precision,\n onChange,\n onPressEnter,\n onBlur,\n onFocus,\n formatter,\n parser,\n prefix,\n addonBefore,\n addonAfter,\n placeholder,\n autoFocus,\n bordered = true,\n keyboard = true,\n readonly: readOnly,\n style,\n id,\n 'data-testid': dataTestId,\n 'aria-label': ariaLabel,\n } = props;\n\n const contentSize = useContext(SizeContext);\n const size = customSize || contentSize || 'middle';\n const disabled = useContext(DisabledContext);\n const mergedDisabled = customDisabled ?? disabled;\n\n const isControlled = 'value' in props;\n const [innerValue, setInnerValue] = useState<number | null | undefined>(\n defaultValue ?? null,\n );\n const currentValue = isControlled ? controlledValue : innerValue;\n\n const [inputStr, setInputStr] = useState(\n currentValue !== null && currentValue !== undefined\n ? String(currentValue)\n : '',\n );\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (currentValue !== null && currentValue !== undefined) {\n setInputStr(String(currentValue));\n } else {\n setInputStr('');\n }\n }, [currentValue]);\n\n const clamp = useCallback(\n (val: number) => {\n let v = Math.max(min, Math.min(max, val));\n if (precision !== undefined) {\n v = Number(v.toFixed(precision));\n }\n return v;\n },\n [min, max, precision],\n );\n\n const updateValue = useCallback(\n (newVal: number | null) => {\n const clamped = newVal !== null ? clamp(newVal) : null;\n if (!isControlled) setInnerValue(clamped);\n onChange?.(clamped);\n },\n [clamp, isControlled, onChange],\n );\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const raw = e.target.value;\n setInputStr(raw);\n if (raw === '') {\n // 清空立即同步到 value,对齐 antd 行为。\n // 否则消费方\"清空后直接点确定\"(未 blur 触发 handleBlur 的 null 兜底)拿到的\n // 仍是旧值,把已清空的筛选条件错误带进 query(被 release-2.3_test 周期实例\n // 更多浮窗实测复现)。\n updateValue(null);\n return;\n }\n if (raw === '-') return;\n const parsed = parser ? parser(raw) : Number(raw);\n if (!isNaN(parsed)) {\n updateValue(parsed);\n }\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n if (inputStr === '' || inputStr === '-') {\n updateValue(null);\n setInputStr('');\n } else {\n const parsed = parser ? parser(inputStr) : Number(inputStr);\n if (!isNaN(parsed)) {\n const clamped = clamp(parsed);\n updateValue(clamped);\n setInputStr(String(clamped));\n }\n }\n onBlur?.(e);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') {\n onPressEnter?.(e);\n }\n if (!keyboard) return;\n const numStep = typeof step === 'string' ? Number(step) : step;\n if (e.key === 'ArrowUp') {\n e.preventDefault();\n updateValue(clamp((currentValue ?? 0) + numStep));\n } else if (e.key === 'ArrowDown') {\n e.preventDefault();\n updateValue(clamp((currentValue ?? 0) - numStep));\n }\n };\n\n const displayValue = formatter\n ? formatter(currentValue ?? undefined, {\n userTyping: document.activeElement === inputRef.current,\n input: inputStr,\n })\n : inputStr;\n\n const hasAddon = addonBefore || addonAfter;\n\n const sizeClasses = cn(\n size === 'large' && 'ald-input-number-large tw-h-9 tw-text-base',\n size === 'small' && 'ald-input-number-small tw-h-7 tw-text-xs',\n size !== 'large' &&\n size !== 'small' &&\n 'ald-input-number-middle tw-h-8 tw-text-sm',\n );\n\n const radiusClasses = cn(\n size === 'large' && 'tw-rounded-[8px]',\n size === 'small' && 'tw-rounded-[4px]',\n size !== 'large' && size !== 'small' && 'tw-rounded-[6px]',\n );\n\n const inputBox = (\n <div\n data-testid={!hasAddon ? dataTestId : undefined}\n aria-label={!hasAddon ? ariaLabel : undefined}\n className={cn(\n // 默认宽度 90px 与 antd InputNumber 对齐:input 上 size={1} 会让 intrinsic\n // 宽度坍缩到 1 字符,若 wrapper 也不给宽度,整个组件在 flex / inline 上下\n // 文里就只剩 ~9px。消费方可通过 className(`w-[xxx]`)或 style 覆盖。\n 'ald-input-number tw-inline-flex tw-w-[90px] tw-min-w-0 tw-items-center tw-overflow-hidden',\n bordered &&\n 'tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]',\n mergedDisabled\n ? 'ald-input-number-disabled tw-cursor-not-allowed tw-bg-[var(--background-neutral-on-subtle)] tw-text-[var(--content-secondary)]'\n : 'tw-bg-[var(--background-default)] tw-text-[var(--content-primary)] hover:tw-border-[var(--border-brand-strong)]',\n !hasAddon && sizeClasses,\n hasAddon\n ? 'tw-h-auto tw-flex-1 tw-self-stretch tw-rounded-none'\n : radiusClasses,\n status === 'error' && 'tw-border-[var(--border-negative-strong)]',\n status === 'warning' && 'tw-border-[var(--border-warning-subtle)]',\n 'focus-within:tw-border-[var(--border-brand-strong)] focus-within:tw-outline focus-within:tw-outline-1 focus-within:tw-outline-[var(--border-brand-strong)]',\n !hasAddon && className,\n )}\n style={!hasAddon ? style : undefined}\n >\n {prefix && (\n <span className=\"tw-px-2 tw-text-[var(--content-secondary)]\">\n {prefix}\n </span>\n )}\n <input\n ref={inputRef}\n id={id}\n type=\"text\"\n inputMode=\"numeric\"\n // size=1 让 <input> 的 intrinsic 宽度坍缩到 1 个字符,\n // 在 flex 父容器中按 width / flex-1 受控,避免默认 size=20 把 inline-flex 外层撑出 ~150px 内容宽度。\n size={1}\n className={cn(\n // Typography Foundation: editable numeric content and its placeholder\n // consume the same approved Body Dense contract as Input. Prefix and\n // add-on surfaces remain outside this Typography ownership.\n 'tw-min-w-0 tw-flex-1 tw-border-0 tw-bg-[var(--action-ghost-normal)] tw-px-[7px] tw-text-inherit tw-outline-none tw-text-typography-body-dense',\n mergedDisabled &&\n 'tw-cursor-not-allowed tw-text-[var(--content-secondary)]',\n )}\n value={displayValue}\n onChange={handleChange}\n onBlur={handleBlur}\n onFocus={onFocus}\n onKeyDown={handleKeyDown}\n disabled={mergedDisabled}\n readOnly={readOnly}\n autoFocus={autoFocus}\n placeholder={placeholder}\n />\n </div>\n );\n\n if (!hasAddon) return inputBox;\n\n return (\n <div\n data-testid={dataTestId}\n aria-label={ariaLabel}\n className={cn(\n // 自然宽 = 内部 inputBox 默认 90px + addonBefore/After 内容宽。inline-flex\n // 让外层按内容宽呈现,不再 `tw-w-full` 强吞 flex 父级剩余空间——后者会把\n // 同 flex 行的 Slider 挤成 0 宽(看板\"图形宽度\"行只剩 thumb 圆点的根因)。\n // `tw-min-w-0` 让本身作为 flex item 时受消费方 `flex-basis` / `width`\n // 真正约束——默认 `min-width: auto = min-content` 会被内部 input(90px) +\n // addon 撑到 ~126px,覆盖消费方的 flex-basis。内部 inputBox 已 `tw-min-w-0\n // tw-overflow-hidden`,被约束后内容会按 input flex-1 收缩,不会溢出。\n // 消费方需要撑满显式加 `tw-w-full` className,需要更窄/更宽直接覆盖宽度。\n 'ald-input-number-group tw-inline-flex tw-min-w-0 tw-items-stretch',\n sizeClasses,\n radiusClasses,\n mergedDisabled && 'ald-input-number-disabled',\n className,\n )}\n style={style}\n >\n {addonBefore && (\n <span\n className={cn(\n 'ald-input-number-addon tw-flex tw-shrink-0 tw-items-center tw-border tw-border-r-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-neutral-subtle)] tw-px-3 tw-text-[var(--content-secondary)]',\n size === 'large' && 'tw-rounded-l-[8px]',\n size === 'small' && 'tw-rounded-l-[4px]',\n size !== 'large' && size !== 'small' && 'tw-rounded-l-[6px]',\n )}\n >\n {addonBefore}\n </span>\n )}\n {inputBox}\n {addonAfter && (\n <span\n className={cn(\n 'ald-input-number-addon tw-flex tw-shrink-0 tw-items-center tw-border tw-border-l-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-neutral-subtle)] tw-px-3 tw-text-[var(--content-secondary)]',\n size === 'large' && 'tw-rounded-r-[8px]',\n size === 'small' && 'tw-rounded-r-[4px]',\n size !== 'large' && size !== 'small' && 'tw-rounded-r-[6px]',\n )}\n >\n {addonAfter}\n </span>\n )}\n </div>\n );\n}\n\nexport type { IInputNumberProps };\n"],"mappings":"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"}
|
|
@@ -14,7 +14,7 @@ function Radio(props) {
|
|
|
14
14
|
const isControlled = "checked" in props;
|
|
15
15
|
const [innerChecked, setInnerChecked] = useState(props.defaultChecked ?? false);
|
|
16
16
|
if (inGroup) radioProps.disabled = groupContext.disabled || props.disabled;
|
|
17
|
-
const checked = inGroup ?
|
|
17
|
+
const checked = inGroup ? groupContext.value === props.value : !isControlled ? innerChecked : radioProps.checked;
|
|
18
18
|
const aldRadioClass = cn("ald-radio", {
|
|
19
19
|
"ald-radio-checked": checked,
|
|
20
20
|
"ald-radio-disabled": radioProps.disabled
|
|
@@ -68,7 +68,7 @@ function Radio(props) {
|
|
|
68
68
|
}
|
|
69
69
|
}), /* @__PURE__ */ jsx("span", { className: "ald-radio-inner" })]
|
|
70
70
|
}), props.children && /* @__PURE__ */ jsx("span", {
|
|
71
|
-
className: "ald-radio-desc",
|
|
71
|
+
className: "ald-radio-desc tw-text-typography-label",
|
|
72
72
|
children: props.children
|
|
73
73
|
})]
|
|
74
74
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Radio/components/Radio/index.tsx"],"sourcesContent":["import { cn } from '../../../lib/utils';\nimport _ from 'lodash';\nimport React, { useContext, useRef, useState } from 'react';\n\nimport { getUUID } from '../../../_utils/hooks/useId';\nimport { IRadioProps } from '../../interface/radio';\nimport { RadioGroupContext } from '../Group';\n\nexport default function Radio(props: IRadioProps) {\n const groupContext = useContext(RadioGroupContext);\n const labelRef = useRef<HTMLLabelElement>(null);\n const [id] = useState(() => getUUID().toString());\n\n const radioProps = { ...props };\n const inGroup = !_.isEmpty(groupContext);\n const isControlled = 'checked' in props;\n const [innerChecked, setInnerChecked] = useState(\n props.defaultChecked ?? false,\n );\n\n if (inGroup) {\n radioProps.disabled = groupContext.disabled || props.disabled;\n }\n\n // checked 直接从 groupContext 或 props 派生,不使用 useState + useEffect,\n // 避免双重渲染导致切换时视觉抖动。\n const checked = inGroup\n ?
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Radio/components/Radio/index.tsx"],"sourcesContent":["import { cn } from '../../../lib/utils';\nimport _ from 'lodash';\nimport React, { useContext, useRef, useState } from 'react';\n\nimport { getUUID } from '../../../_utils/hooks/useId';\nimport { IRadioProps } from '../../interface/radio';\nimport { RadioGroupContext } from '../Group';\n\nexport default function Radio(props: IRadioProps) {\n const groupContext = useContext(RadioGroupContext);\n const labelRef = useRef<HTMLLabelElement>(null);\n const [id] = useState(() => getUUID().toString());\n\n const radioProps = { ...props };\n const inGroup = !_.isEmpty(groupContext);\n const isControlled = 'checked' in props;\n const [innerChecked, setInnerChecked] = useState(\n props.defaultChecked ?? false,\n );\n\n if (inGroup) {\n radioProps.disabled = groupContext.disabled || props.disabled;\n }\n\n // checked 直接从 groupContext 或 props 派生,不使用 useState + useEffect,\n // 避免双重渲染导致切换时视觉抖动。\n const checked = inGroup\n ? groupContext.value === props.value\n : !isControlled\n ? innerChecked\n : radioProps.checked;\n\n // 设置input外层盒子的class\n const aldRadioClass = cn('ald-radio', {\n 'ald-radio-checked': checked,\n 'ald-radio-disabled': radioProps.disabled,\n });\n\n // 根据属性设置最外层的class\n const getWrapperClass = () => {\n let otherClass = '';\n if (groupContext.type === 'button') {\n if (groupContext.radioGroupStyle === 'filled') {\n otherClass = 'ald-radio-button-wrapper-filled';\n } else if (groupContext.radioGroupStyle === 'border') {\n otherClass = 'ald-radio-button-wrapper-border';\n } else if (groupContext.radioGroupStyle === 'filter') {\n otherClass = 'ald-radio-button-wrapper-filter';\n } else {\n otherClass = 'ald-radio-button-wrapper-border-primary';\n }\n } else if (groupContext.type === 'iconButton') {\n if (groupContext.radioGroupStyle === 'filled') {\n otherClass = 'ald-radio-icon-button-wrapper-filled';\n } else if (groupContext.radioGroupStyle === 'border') {\n otherClass = 'ald-radio-icon-button-wrapper-border';\n } else if (groupContext.radioGroupStyle === 'filter') {\n otherClass = 'ald-radio-icon-button-wrapper-filter';\n } else {\n otherClass = 'ald-radio-icon-button-wrapper-border-primary';\n }\n } else {\n // 当type未设置或者是radio时\n otherClass = 'ald-radio-wrapper';\n if (props.indeterminate) {\n otherClass = otherClass + ' ald-radio-wrapper-indeterminate';\n }\n }\n return cn('ald-radio-label', otherClass, props.className, {\n 'ald-radio-wrapper-checked': checked,\n 'ald-radio-wrapper-disabled': radioProps.disabled,\n });\n };\n\n // button / iconButton 模式下,radio 圆圈需要完全隐藏\n const isButtonMode =\n groupContext.type === 'button' || groupContext.type === 'iconButton';\n const radioHideStyle: React.CSSProperties | undefined = isButtonMode\n ? { width: 0, height: 0, overflow: 'hidden' }\n : undefined;\n\n return (\n <label className={getWrapperClass()} htmlFor={id} ref={labelRef}>\n <span className={aldRadioClass} style={radioHideStyle}>\n <input\n id={id}\n type=\"radio\"\n className=\"ald-radio-input\"\n // 同步派生的 checked 到原生 input,对齐 v2/antd 行为(仅有 class 不更新 input.checked)\n checked={!!checked}\n disabled={radioProps.disabled}\n value={props.value}\n onChange={(e) => {\n if (radioProps.disabled) return;\n if (!inGroup && !isControlled) {\n setInnerChecked(e.target.checked);\n }\n props.onChange?.(e);\n }}\n onClick={(e) => {\n props.onClick?.(e);\n\n if (inGroup && groupContext?.onChange) {\n // input事件的value会被toString,所以此处进行一个覆盖\n groupContext.onChange(props.value);\n }\n }}\n />\n <span className=\"ald-radio-inner\" />\n </span>\n {props.children && (\n <span className=\"ald-radio-desc tw-text-typography-label\">\n {props.children}\n </span>\n )}\n </label>\n );\n}\n"],"mappings":";;;;;;;AAQA,SAAwB,MAAM,OAAoB;CAChD,MAAM,eAAe,WAAW,kBAAkB;CAClD,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,CAAC,MAAM,eAAe,SAAS,CAAC,UAAU,CAAC;CAEjD,MAAM,aAAa,EAAE,GAAG,OAAO;CAC/B,MAAM,UAAU,CAAC,EAAE,QAAQ,aAAa;CACxC,MAAM,eAAe,aAAa;CAClC,MAAM,CAAC,cAAc,mBAAmB,SACtC,MAAM,kBAAkB,MACzB;AAED,KAAI,QACF,YAAW,WAAW,aAAa,YAAY,MAAM;CAKvD,MAAM,UAAU,UACZ,aAAa,UAAU,MAAM,QAC7B,CAAC,eACD,eACA,WAAW;CAGf,MAAM,gBAAgB,GAAG,aAAa;EACpC,qBAAqB;EACrB,sBAAsB,WAAW;EAClC,CAAC;CAGF,MAAM,wBAAwB;EAC5B,IAAI,aAAa;AACjB,MAAI,aAAa,SAAS,SACxB,KAAI,aAAa,oBAAoB,SACnC,cAAa;WACJ,aAAa,oBAAoB,SAC1C,cAAa;WACJ,aAAa,oBAAoB,SAC1C,cAAa;MAEb,cAAa;WAEN,aAAa,SAAS,aAC/B,KAAI,aAAa,oBAAoB,SACnC,cAAa;WACJ,aAAa,oBAAoB,SAC1C,cAAa;WACJ,aAAa,oBAAoB,SAC1C,cAAa;MAEb,cAAa;OAEV;AAEL,gBAAa;AACb,OAAI,MAAM,cACR,cAAa,aAAa;;AAG9B,SAAO,GAAG,mBAAmB,YAAY,MAAM,WAAW;GACxD,6BAA6B;GAC7B,8BAA8B,WAAW;GAC1C,CAAC;;CAMJ,MAAM,iBADJ,aAAa,SAAS,YAAY,aAAa,SAAS,eAEtD;EAAE,OAAO;EAAG,QAAQ;EAAG,UAAU;EAAU,GAC3C;AAEJ,QACE,qBAAC,SAAD;EAAO,WAAW,iBAAiB;EAAE,SAAS;EAAI,KAAK;YAAvD,CACE,qBAAC,QAAD;GAAM,WAAW;GAAe,OAAO;aAAvC,CACE,oBAAC,SAAD;IACM;IACJ,MAAK;IACL,WAAU;IAEV,SAAS,CAAC,CAAC;IACX,UAAU,WAAW;IACrB,OAAO,MAAM;IACb,WAAW,MAAM;AACf,SAAI,WAAW,SAAU;AACzB,SAAI,CAAC,WAAW,CAAC,aACf,iBAAgB,EAAE,OAAO,QAAQ;AAEnC,WAAM,WAAW,EAAE;;IAErB,UAAU,MAAM;AACd,WAAM,UAAU,EAAE;AAElB,SAAI,WAAW,cAAc,SAE3B,cAAa,SAAS,MAAM,MAAM;;IAGtC,CAAA,EACF,oBAAC,QAAD,EAAM,WAAU,mBAAoB,CAAA,CAC/B;MACN,MAAM,YACL,oBAAC,QAAD;GAAM,WAAU;aACb,MAAM;GACF,CAAA,CAEH"}
|
package/dist/Switch/index.js
CHANGED
|
@@ -49,6 +49,7 @@ var Switch = ({ className = "", disabled: customDisabled, loading = false, size:
|
|
|
49
49
|
type: "button",
|
|
50
50
|
role: "switch",
|
|
51
51
|
"aria-checked": !!userChecked,
|
|
52
|
+
"aria-busy": loading || void 0,
|
|
52
53
|
"data-testid": dataTestid,
|
|
53
54
|
"aria-label": ariaLabel,
|
|
54
55
|
disabled: currentDisabled,
|
package/dist/Switch/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/Switch/index.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState } from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { cn } from '../lib/utils';\n\nexport type SwitchChangeEventHandler = (\n checked: boolean,\n event: React.MouseEvent<HTMLButtonElement>,\n) => void;\nexport type SwitchClickEventHandler = SwitchChangeEventHandler;\nexport type SwitchSize = 'large' | 'middle' | 'small';\n\nexport interface ISwitchProps {\n className?: string;\n checked?: boolean;\n defaultChecked?: boolean;\n disabled?: boolean;\n loading?: boolean;\n size?: SwitchSize;\n onClick?: SwitchChangeEventHandler;\n onChange?: SwitchChangeEventHandler;\n children?: React.ReactNode;\n /** 透传到内部 switch 按钮元素的 data-testid,用于自动化测试定位 */\n 'data-testid'?: string;\n /** 透传到内部 switch 按钮元素的 aria-label,用于可访问性与自动化测试定位 */\n 'aria-label'?: string;\n}\n\nconst switchSizeConfig: Record<\n SwitchSize,\n {\n trackW: number;\n trackH: number;\n thumbSize: number;\n }\n> = {\n large: {\n trackW: 36,\n trackH: 20,\n thumbSize: 16,\n },\n middle: {\n trackW: 28,\n trackH: 16,\n thumbSize: 12,\n },\n small: {\n trackW: 22,\n trackH: 12,\n thumbSize: 8,\n },\n};\n\nconst Switch: React.FC<ISwitchProps> = ({\n className = '',\n disabled: customDisabled,\n loading = false,\n size: customSize,\n checked,\n defaultChecked,\n onChange,\n onClick,\n children,\n 'data-testid': dataTestid,\n 'aria-label': ariaLabel,\n}) => {\n const contentSize = useContext(SizeContext);\n const size = customSize || contentSize || 'middle';\n\n const [userChecked, setUserChecked] = useState(\n typeof checked === 'undefined' ? defaultChecked : checked,\n );\n\n const disabled = useContext(DisabledContext);\n const mergedDisabled = customDisabled ?? disabled;\n\n const currentDisabled = loading ? true : mergedDisabled;\n\n useEffect(() => {\n if (typeof checked === 'boolean') {\n setUserChecked(checked);\n }\n }, [checked]);\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (currentDisabled) return;\n const newChecked = !userChecked;\n if (checked === undefined) {\n setUserChecked(newChecked);\n }\n onChange?.(newChecked, e);\n onClick?.(newChecked, e);\n };\n\n const { trackW, trackH, thumbSize } = switchSizeConfig[size];\n const thumbOffset = 2;\n const thumbTranslate = trackW - thumbSize - thumbOffset * 2;\n\n return (\n <span\n className={cn(\n className,\n 'ald-switch tw-inline-flex tw-items-center tw-gap-1.5 tw-text-[0]',\n `ald-switch-${size}`,\n currentDisabled && 'tw-pointer-events-none tw-cursor-default',\n {\n 'ald-switch-disabled': currentDisabled,\n 'ald-switch-checked': userChecked,\n },\n )}\n >\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={!!userChecked}\n data-testid={dataTestid}\n aria-label={ariaLabel}\n disabled={currentDisabled}\n className={cn(\n 'ald-switch-btn tw-relative tw-inline-flex tw-cursor-pointer tw-items-center tw-rounded-full tw-border-0 tw-p-0 tw-transition-colors tw-duration-200',\n userChecked\n ? 'tw-bg-[var(--action-primary-normal)] hover:tw-bg-[var(--action-primary-hover)]'\n : 'tw-bg-[var(--action-neutral-subtle-normal)] hover:tw-bg-[var(--action-neutral-subtle-hover)]',\n currentDisabled && 'tw-cursor-not-allowed tw-opacity-40',\n )}\n style={{ width: trackW, height: trackH }}\n onClick={handleClick}\n >\n <span\n className={cn(\n 'tw-block tw-rounded-full tw-bg-[var(--background-default)] tw-shadow-sm tw-transition-transform tw-duration-200',\n )}\n style={{\n width: thumbSize,\n height: thumbSize,\n marginLeft: thumbOffset,\n transform: userChecked\n ? `translateX(${thumbTranslate}px)`\n : 'translateX(0)',\n }}\n />\n </button>\n {children && (\n <span\n className={cn(\n 'ald-switch-text tw-inline-flex tw-items-center tw-align-middle tw-text-[var(--content-primary)]',\n size === 'large' && 'tw-h-5 tw-text-base tw-leading-5',\n size === 'middle' && 'tw-h-4 tw-text-sm tw-leading-4',\n size === 'small' && 'tw-h-3 tw-text-xs tw-leading-3',\n currentDisabled && 'tw-opacity-50',\n )}\n >\n {children}\n </span>\n )}\n </span>\n );\n};\n\nexport default Switch;\n"],"mappings":";;;;;;AA4BA,IAAM,mBAOF;CACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACD,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACD,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACF;AAED,IAAM,UAAkC,EACtC,YAAY,IACZ,UAAU,gBACV,UAAU,OACV,MAAM,YACN,SACA,gBACA,UACA,SACA,UACA,eAAe,YACf,cAAc,gBACV;CACJ,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,OAAO,cAAc,eAAe;CAE1C,MAAM,CAAC,aAAa,kBAAkB,SACpC,OAAO,YAAY,cAAc,iBAAiB,QACnD;CAED,MAAM,WAAW,WAAW,gBAAgB;CAG5C,MAAM,kBAAkB,UAAU,OAFX,kBAAkB;AAIzC,iBAAgB;AACd,MAAI,OAAO,YAAY,UACrB,gBAAe,QAAQ;IAExB,CAAC,QAAQ,CAAC;CAEb,MAAM,eAAe,MAA2C;AAC9D,MAAI,gBAAiB;EACrB,MAAM,aAAa,CAAC;AACpB,MAAI,YAAY,OACd,gBAAe,WAAW;AAE5B,aAAW,YAAY,EAAE;AACzB,YAAU,YAAY,EAAE;;CAG1B,MAAM,EAAE,QAAQ,QAAQ,cAAc,iBAAiB;CACvD,MAAM,cAAc;CACpB,MAAM,iBAAiB,SAAS,YAAY,cAAc;AAE1D,QACE,qBAAC,QAAD;EACE,WAAW,GACT,WACA,oEACA,cAAc,QACd,mBAAmB,4CACnB;GACE,uBAAuB;GACvB,sBAAsB;GACvB,CACF;YAVH,CAYE,oBAAC,UAAD;GACE,MAAK;GACL,MAAK;GACL,gBAAc,CAAC,CAAC;GAChB,eAAa;GACb,cAAY;GACZ,UAAU;GACV,WAAW,GACT,uJACA,cACI,mFACA,gGACJ,mBAAmB,sCACpB;GACD,OAAO;IAAE,OAAO;IAAQ,QAAQ;IAAQ;GACxC,SAAS;aAET,oBAAC,QAAD;IACE,WAAW,GACT,kHACD;IACD,OAAO;KACL,OAAO;KACP,QAAQ;KACR,YAAY;KACZ,WAAW,cACP,cAAc,eAAe,OAC7B;KACL;IACD,CAAA;GACK,CAAA,EACR,YACC,oBAAC,QAAD;GACE,WAAW,GACT,mGACA,SAAS,WAAW,oCACpB,SAAS,YAAY,kCACrB,SAAS,WAAW,kCACpB,mBAAmB,gBACpB;GAEA;GACI,CAAA,CAEJ"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/Switch/index.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState } from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { cn } from '../lib/utils';\n\nexport type SwitchChangeEventHandler = (\n checked: boolean,\n event: React.MouseEvent<HTMLButtonElement>,\n) => void;\nexport type SwitchClickEventHandler = SwitchChangeEventHandler;\nexport type SwitchSize = 'large' | 'middle' | 'small';\n\nexport interface ISwitchProps {\n className?: string;\n checked?: boolean;\n defaultChecked?: boolean;\n disabled?: boolean;\n loading?: boolean;\n size?: SwitchSize;\n onClick?: SwitchChangeEventHandler;\n onChange?: SwitchChangeEventHandler;\n children?: React.ReactNode;\n /** 透传到内部 switch 按钮元素的 data-testid,用于自动化测试定位 */\n 'data-testid'?: string;\n /** 透传到内部 switch 按钮元素的 aria-label,用于可访问性与自动化测试定位 */\n 'aria-label'?: string;\n}\n\nconst switchSizeConfig: Record<\n SwitchSize,\n {\n trackW: number;\n trackH: number;\n thumbSize: number;\n }\n> = {\n large: {\n trackW: 36,\n trackH: 20,\n thumbSize: 16,\n },\n middle: {\n trackW: 28,\n trackH: 16,\n thumbSize: 12,\n },\n small: {\n trackW: 22,\n trackH: 12,\n thumbSize: 8,\n },\n};\n\nconst Switch: React.FC<ISwitchProps> = ({\n className = '',\n disabled: customDisabled,\n loading = false,\n size: customSize,\n checked,\n defaultChecked,\n onChange,\n onClick,\n children,\n 'data-testid': dataTestid,\n 'aria-label': ariaLabel,\n}) => {\n const contentSize = useContext(SizeContext);\n const size = customSize || contentSize || 'middle';\n\n const [userChecked, setUserChecked] = useState(\n typeof checked === 'undefined' ? defaultChecked : checked,\n );\n\n const disabled = useContext(DisabledContext);\n const mergedDisabled = customDisabled ?? disabled;\n\n const currentDisabled = loading ? true : mergedDisabled;\n\n useEffect(() => {\n if (typeof checked === 'boolean') {\n setUserChecked(checked);\n }\n }, [checked]);\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (currentDisabled) return;\n const newChecked = !userChecked;\n if (checked === undefined) {\n setUserChecked(newChecked);\n }\n onChange?.(newChecked, e);\n onClick?.(newChecked, e);\n };\n\n const { trackW, trackH, thumbSize } = switchSizeConfig[size];\n const thumbOffset = 2;\n const thumbTranslate = trackW - thumbSize - thumbOffset * 2;\n\n return (\n <span\n className={cn(\n className,\n 'ald-switch tw-inline-flex tw-items-center tw-gap-1.5 tw-text-[0]',\n `ald-switch-${size}`,\n currentDisabled && 'tw-pointer-events-none tw-cursor-default',\n {\n 'ald-switch-disabled': currentDisabled,\n 'ald-switch-checked': userChecked,\n },\n )}\n >\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={!!userChecked}\n aria-busy={loading || undefined}\n data-testid={dataTestid}\n aria-label={ariaLabel}\n disabled={currentDisabled}\n className={cn(\n 'ald-switch-btn tw-relative tw-inline-flex tw-cursor-pointer tw-items-center tw-rounded-full tw-border-0 tw-p-0 tw-transition-colors tw-duration-200',\n userChecked\n ? 'tw-bg-[var(--action-primary-normal)] hover:tw-bg-[var(--action-primary-hover)]'\n : 'tw-bg-[var(--action-neutral-subtle-normal)] hover:tw-bg-[var(--action-neutral-subtle-hover)]',\n currentDisabled && 'tw-cursor-not-allowed tw-opacity-40',\n )}\n style={{ width: trackW, height: trackH }}\n onClick={handleClick}\n >\n <span\n className={cn(\n 'tw-block tw-rounded-full tw-bg-[var(--background-default)] tw-shadow-sm tw-transition-transform tw-duration-200',\n )}\n style={{\n width: thumbSize,\n height: thumbSize,\n marginLeft: thumbOffset,\n transform: userChecked\n ? `translateX(${thumbTranslate}px)`\n : 'translateX(0)',\n }}\n />\n </button>\n {children && (\n <span\n className={cn(\n 'ald-switch-text tw-inline-flex tw-items-center tw-align-middle tw-text-[var(--content-primary)]',\n size === 'large' && 'tw-h-5 tw-text-base tw-leading-5',\n size === 'middle' && 'tw-h-4 tw-text-sm tw-leading-4',\n size === 'small' && 'tw-h-3 tw-text-xs tw-leading-3',\n currentDisabled && 'tw-opacity-50',\n )}\n >\n {children}\n </span>\n )}\n </span>\n );\n};\n\nexport default Switch;\n"],"mappings":";;;;;;AA4BA,IAAM,mBAOF;CACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACD,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACD,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACF;AAED,IAAM,UAAkC,EACtC,YAAY,IACZ,UAAU,gBACV,UAAU,OACV,MAAM,YACN,SACA,gBACA,UACA,SACA,UACA,eAAe,YACf,cAAc,gBACV;CACJ,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,OAAO,cAAc,eAAe;CAE1C,MAAM,CAAC,aAAa,kBAAkB,SACpC,OAAO,YAAY,cAAc,iBAAiB,QACnD;CAED,MAAM,WAAW,WAAW,gBAAgB;CAG5C,MAAM,kBAAkB,UAAU,OAFX,kBAAkB;AAIzC,iBAAgB;AACd,MAAI,OAAO,YAAY,UACrB,gBAAe,QAAQ;IAExB,CAAC,QAAQ,CAAC;CAEb,MAAM,eAAe,MAA2C;AAC9D,MAAI,gBAAiB;EACrB,MAAM,aAAa,CAAC;AACpB,MAAI,YAAY,OACd,gBAAe,WAAW;AAE5B,aAAW,YAAY,EAAE;AACzB,YAAU,YAAY,EAAE;;CAG1B,MAAM,EAAE,QAAQ,QAAQ,cAAc,iBAAiB;CACvD,MAAM,cAAc;CACpB,MAAM,iBAAiB,SAAS,YAAY,cAAc;AAE1D,QACE,qBAAC,QAAD;EACE,WAAW,GACT,WACA,oEACA,cAAc,QACd,mBAAmB,4CACnB;GACE,uBAAuB;GACvB,sBAAsB;GACvB,CACF;YAVH,CAYE,oBAAC,UAAD;GACE,MAAK;GACL,MAAK;GACL,gBAAc,CAAC,CAAC;GAChB,aAAW,WAAW;GACtB,eAAa;GACb,cAAY;GACZ,UAAU;GACV,WAAW,GACT,uJACA,cACI,mFACA,gGACJ,mBAAmB,sCACpB;GACD,OAAO;IAAE,OAAO;IAAQ,QAAQ;IAAQ;GACxC,SAAS;aAET,oBAAC,QAAD;IACE,WAAW,GACT,kHACD;IACD,OAAO;KACL,OAAO;KACP,QAAQ;KACR,YAAY;KACZ,WAAW,cACP,cAAc,eAAe,OAC7B;KACL;IACD,CAAA;GACK,CAAA,EACR,YACC,oBAAC,QAAD;GACE,WAAW,GACT,mGACA,SAAS,WAAW,oCACpB,SAAS,YAAY,kCACrB,SAAS,WAAW,kCACpB,mBAAmB,gBACpB;GAEA;GACI,CAAA,CAEJ"}
|
|
@@ -10,13 +10,18 @@ function Cell(props) {
|
|
|
10
10
|
const { render, dataIndex, align, ellipsis } = column.columnDef.meta;
|
|
11
11
|
const colValue = _.get(row.original, dataIndex || "");
|
|
12
12
|
const node = render ? render(colValue, row.original, row.index) : colValue;
|
|
13
|
+
const isDefaultTextValue = typeof render !== "function" && (typeof colValue === "string" || typeof colValue === "number");
|
|
14
|
+
const content = isDefaultTextValue ? /* @__PURE__ */ jsx("span", {
|
|
15
|
+
className: "tw-text-typography-body-dense",
|
|
16
|
+
children: node
|
|
17
|
+
}) : node;
|
|
13
18
|
return /* @__PURE__ */ jsx("div", {
|
|
14
|
-
className: cn(prefixCls("td-default"), prefixCls(`align-${align}`)),
|
|
19
|
+
className: cn(prefixCls("td-default"), prefixCls(`align-${align}`), { [prefixCls("td-legacy-content")]: !isDefaultTextValue }),
|
|
15
20
|
children: ellipsis ? /* @__PURE__ */ jsx("div", {
|
|
16
21
|
className: prefixCls("td-ellipsis-content"),
|
|
17
22
|
title: typeof node === "string" ? node : void 0,
|
|
18
|
-
children:
|
|
19
|
-
}) :
|
|
23
|
+
children: content
|
|
24
|
+
}) : content
|
|
20
25
|
});
|
|
21
26
|
}
|
|
22
27
|
function CellWithErrorBoundary(props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cell.js","names":[],"sources":["../../../src/Table/components/Cell.tsx"],"sourcesContent":["import { Column, Row } from '@tanstack/react-table';\nimport { cn } from '../../lib/utils';\nimport _ from 'lodash';\nimport React, { useCallback } from 'react';\nimport { prefixCls } from '../helper';\nimport { ITableColumn, ITableProps } from '../types';\nimport ErrorBoundary from './ErrorBoundary';\n\nfunction Cell<T>(props: IProps<T>) {\n const { column, row } = props;\n const meta = column.columnDef.meta as ITableColumn<unknown>;\n const { render, dataIndex, align, ellipsis } = meta;\n\n const colValue = _.get(row.original, dataIndex || '');\n const node = render ? render(colValue, row.original, row.index) : colValue;\n\n return (\n <div
|
|
1
|
+
{"version":3,"file":"Cell.js","names":[],"sources":["../../../src/Table/components/Cell.tsx"],"sourcesContent":["import { Column, Row } from '@tanstack/react-table';\nimport { cn } from '../../lib/utils';\nimport _ from 'lodash';\nimport React, { useCallback } from 'react';\nimport { prefixCls } from '../helper';\nimport { ITableColumn, ITableProps } from '../types';\nimport ErrorBoundary from './ErrorBoundary';\n\nfunction Cell<T>(props: IProps<T>) {\n const { column, row } = props;\n const meta = column.columnDef.meta as ITableColumn<unknown>;\n const { render, dataIndex, align, ellipsis } = meta;\n\n const colValue = _.get(row.original, dataIndex || '');\n const node = render ? render(colValue, row.original, row.index) : colValue;\n const isDefaultTextValue =\n typeof render !== 'function' &&\n (typeof colValue === 'string' || typeof colValue === 'number');\n const content = isDefaultTextValue ? (\n <span className=\"tw-text-typography-body-dense\">{node}</span>\n ) : (\n node\n );\n\n return (\n <div\n className={cn(prefixCls('td-default'), prefixCls(`align-${align}`), {\n [prefixCls('td-legacy-content')]: !isDefaultTextValue,\n })}\n >\n {ellipsis ? (\n <div\n className={prefixCls('td-ellipsis-content')}\n title={typeof node === 'string' ? node : undefined}\n >\n {content}\n </div>\n ) : (\n content\n )}\n </div>\n );\n}\n\nexport default function CellWithErrorBoundary<T>(props: IProps<T>) {\n const { column } = props;\n const meta = column.columnDef.meta as ITableColumn<unknown> & {\n onError: ITableProps<object>['onError'];\n };\n const { dataIndex, onError } = meta;\n const reportError = useCallback(\n (err: Error, stack: string) => {\n if (onError) {\n onError({\n error: err,\n stack,\n extra: {\n place: 'bodyCell',\n dataIndex,\n },\n });\n }\n },\n [onError, dataIndex],\n );\n\n return (\n <ErrorBoundary onError={reportError}>\n <Cell {...props} />\n </ErrorBoundary>\n );\n}\n\nexport interface IProps<T> {\n row: Row<T>;\n column: Column<T>;\n}\n"],"mappings":";;;;;;;AAQA,SAAS,KAAQ,OAAkB;CACjC,MAAM,EAAE,QAAQ,QAAQ;CAExB,MAAM,EAAE,QAAQ,WAAW,OAAO,aADrB,OAAO,UAAU;CAG9B,MAAM,WAAW,EAAE,IAAI,IAAI,UAAU,aAAa,GAAG;CACrD,MAAM,OAAO,SAAS,OAAO,UAAU,IAAI,UAAU,IAAI,MAAM,GAAG;CAClE,MAAM,qBACJ,OAAO,WAAW,eACjB,OAAO,aAAa,YAAY,OAAO,aAAa;CACvD,MAAM,UAAU,qBACd,oBAAC,QAAD;EAAM,WAAU;YAAiC;EAAY,CAAA,GAE7D;AAGF,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,UAAU,aAAa,EAAE,UAAU,SAAS,QAAQ,EAAE,GACjE,UAAU,oBAAoB,GAAG,CAAC,oBACpC,CAAC;YAED,WACC,oBAAC,OAAD;GACE,WAAW,UAAU,sBAAsB;GAC3C,OAAO,OAAO,SAAS,WAAW,OAAO;aAExC;GACG,CAAA,GAEN;EAEE,CAAA;;AAIV,SAAwB,sBAAyB,OAAkB;CACjE,MAAM,EAAE,WAAW;CAInB,MAAM,EAAE,WAAW,YAHN,OAAO,UAAU;AAoB9B,QACE,oBAAC,eAAD;EAAe,SAjBG,aACjB,KAAY,UAAkB;AAC7B,OAAI,QACF,SAAQ;IACN,OAAO;IACP;IACA,OAAO;KACL,OAAO;KACP;KACD;IACF,CAAC;KAGN,CAAC,SAAS,UAAU,CACrB;YAIG,oBAAC,MAAD,EAAM,GAAI,OAAS,CAAA;EACL,CAAA"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { cn } from "../../../lib/utils.js";
|
|
1
2
|
import { LocaleContext, getTranslator } from "../../../locale/default.js";
|
|
2
3
|
import TextLink from "../../../TextLink/index.js";
|
|
3
4
|
import Pagination from "../../../Pagination/index.js";
|
|
@@ -23,7 +24,7 @@ function TableFooter(props) {
|
|
|
23
24
|
children: getCheckboxAllNode?.(t.Table.selectAll)
|
|
24
25
|
}),
|
|
25
26
|
/* @__PURE__ */ jsxs("div", {
|
|
26
|
-
className: prefixCls("footer-row-selection-selected"),
|
|
27
|
+
className: cn(prefixCls("footer-row-selection-selected"), "tw-text-typography-body-dense"),
|
|
27
28
|
children: [
|
|
28
29
|
t.Table.selected,
|
|
29
30
|
/* @__PURE__ */ jsx(TextLink, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Table/components/Footer/index.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport { Pagination } from '../../..';\nimport { IPaginationProps } from '../../../Pagination/types';\nimport TextLink from '../../../TextLink';\nimport { LocaleContext, getTranslator } from '../../../locale/default';\nimport { prefixCls } from '../../helper';\nimport { IRowSelectionInfo } from '../../hooks/useRowSelection';\nimport { ITableProps } from '../../types';\n\nexport default function TableFooter<TDataItem extends object>(\n props: IProps<TDataItem>,\n) {\n const { locale } = useContext(LocaleContext);\n const t = getTranslator(locale);\n\n const {\n pagination,\n scroll = {},\n scrollToFirstRow,\n isShowPagination,\n rowSelectionInfo,\n } = props;\n\n // 选择行\n const {\n getCheckboxAllNode,\n selectedRowKeys,\n selectedRowKeysInCurrPage,\n items,\n isShowRowSelectionInFooter,\n onChange: changeSelectedRowKeys,\n } = rowSelectionInfo;\n\n const btnItems = [\n {\n key: '$UN_SELECT_ALL$',\n label: t.Table.cancelSelect,\n onClick: () => rowSelectionInfo.unSelectAll(),\n },\n ...items,\n ];\n\n const rowSelectionNode = isShowRowSelectionInFooter && (\n <div className={prefixCls('footer-row-selection')}>\n <div className={prefixCls('footer-row-selection-btn')}>\n {getCheckboxAllNode?.(t.Table.selectAll)}\n </div>\n <div
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Table/components/Footer/index.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport { Pagination } from '../../..';\nimport { IPaginationProps } from '../../../Pagination/types';\nimport TextLink from '../../../TextLink';\nimport { cn } from '../../../lib/utils';\nimport { LocaleContext, getTranslator } from '../../../locale/default';\nimport { prefixCls } from '../../helper';\nimport { IRowSelectionInfo } from '../../hooks/useRowSelection';\nimport { ITableProps } from '../../types';\n\nexport default function TableFooter<TDataItem extends object>(\n props: IProps<TDataItem>,\n) {\n const { locale } = useContext(LocaleContext);\n const t = getTranslator(locale);\n\n const {\n pagination,\n scroll = {},\n scrollToFirstRow,\n isShowPagination,\n rowSelectionInfo,\n } = props;\n\n // 选择行\n const {\n getCheckboxAllNode,\n selectedRowKeys,\n selectedRowKeysInCurrPage,\n items,\n isShowRowSelectionInFooter,\n onChange: changeSelectedRowKeys,\n } = rowSelectionInfo;\n\n const btnItems = [\n {\n key: '$UN_SELECT_ALL$',\n label: t.Table.cancelSelect,\n onClick: () => rowSelectionInfo.unSelectAll(),\n },\n ...items,\n ];\n\n const rowSelectionNode = isShowRowSelectionInFooter && (\n <div className={prefixCls('footer-row-selection')}>\n <div className={prefixCls('footer-row-selection-btn')}>\n {getCheckboxAllNode?.(t.Table.selectAll)}\n </div>\n <div\n className={cn(\n prefixCls('footer-row-selection-selected'),\n 'tw-text-typography-body-dense',\n )}\n >\n {t.Table.selected}\n <TextLink className={prefixCls('footer-row-selection-selected-num')}>\n {selectedRowKeys.length}\n </TextLink>\n {t.Table.item}\n </div>\n {btnItems.map((btnItem) => {\n return (\n <div\n key={btnItem.key}\n className={prefixCls('footer-row-selection-item')}\n onClick={(e) => {\n btnItem.onClick(e);\n }}\n >\n <TextLink>{btnItem.label}</TextLink>\n </div>\n );\n })}\n </div>\n );\n\n // 翻页器\n const onChangePage = useCallback(\n (page: number) => {\n const { onChange = () => {} } = pagination || {};\n const { scrollToFirstRowOnChange = true } = scroll;\n if (scrollToFirstRowOnChange) {\n scrollToFirstRow();\n }\n onChange(page);\n // 翻页后,清空已选行\n changeSelectedRowKeys([]);\n },\n [scrollToFirstRow, scroll, pagination, changeSelectedRowKeys],\n );\n\n const pager = isShowPagination && pagination && (\n <div className={prefixCls('pager')}>\n <Pagination hideOnSinglePage {...pagination} onChange={onChangePage} />\n </div>\n );\n\n const isShowRowSelection =\n rowSelectionInfo.isRowSelectionEnabled &&\n selectedRowKeysInCurrPage.length > 0;\n\n const isShowFooter = isShowPagination || isShowRowSelection;\n\n return isShowFooter ? (\n <div className={prefixCls('footer')}>\n {rowSelectionNode}\n {pager}\n </div>\n ) : null;\n}\n\ninterface IProps<TDataItem extends object> {\n isShowPagination: boolean;\n rowSelectionInfo: IRowSelectionInfo<TDataItem>;\n pagination?: IPaginationProps;\n scroll?: ITableProps<TDataItem>['scroll'];\n scrollToFirstRow: () => void;\n}\n"],"mappings":";;;;;;;;AAUA,SAAwB,YACtB,OACA;CACA,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,EACJ,YACA,SAAS,EAAE,EACX,kBACA,kBACA,qBACE;CAGJ,MAAM,EACJ,oBACA,iBACA,2BACA,OACA,4BACA,UAAU,0BACR;CAEJ,MAAM,WAAW,CACf;EACE,KAAK;EACL,OAAO,EAAE,MAAM;EACf,eAAe,iBAAiB,aAAa;EAC9C,EACD,GAAG,MACJ;CAED,MAAM,mBAAmB,8BACvB,qBAAC,OAAD;EAAK,WAAW,UAAU,uBAAuB;YAAjD;GACE,oBAAC,OAAD;IAAK,WAAW,UAAU,2BAA2B;cAClD,qBAAqB,EAAE,MAAM,UAAU;IACpC,CAAA;GACN,qBAAC,OAAD;IACE,WAAW,GACT,UAAU,gCAAgC,EAC1C,gCACD;cAJH;KAMG,EAAE,MAAM;KACT,oBAAC,UAAD;MAAU,WAAW,UAAU,oCAAoC;gBAChE,gBAAgB;MACR,CAAA;KACV,EAAE,MAAM;KACL;;GACL,SAAS,KAAK,YAAY;AACzB,WACE,oBAAC,OAAD;KAEE,WAAW,UAAU,4BAA4B;KACjD,UAAU,MAAM;AACd,cAAQ,QAAQ,EAAE;;eAGpB,oBAAC,UAAD,EAAA,UAAW,QAAQ,OAAiB,CAAA;KAChC,EAPC,QAAQ,IAOT;KAER;GACE;;CAIR,MAAM,eAAe,aAClB,SAAiB;EAChB,MAAM,EAAE,iBAAiB,OAAO,cAAc,EAAE;EAChD,MAAM,EAAE,2BAA2B,SAAS;AAC5C,MAAI,yBACF,mBAAkB;AAEpB,WAAS,KAAK;AAEd,wBAAsB,EAAE,CAAC;IAE3B;EAAC;EAAkB;EAAQ;EAAY;EAAsB,CAC9D;CAED,MAAM,QAAQ,oBAAoB,cAChC,oBAAC,OAAD;EAAK,WAAW,UAAU,QAAQ;YAChC,oBAAC,YAAD;GAAY,kBAAA;GAAiB,GAAI;GAAY,UAAU;GAAgB,CAAA;EACnE,CAAA;CAGR,MAAM,qBACJ,iBAAiB,yBACjB,0BAA0B,SAAS;AAIrC,QAFqB,oBAAoB,qBAGvC,qBAAC,OAAD;EAAK,WAAW,UAAU,SAAS;YAAnC,CACG,kBACA,MACG;MACJ"}
|
|
@@ -48,7 +48,7 @@ function Header(props) {
|
|
|
48
48
|
});
|
|
49
49
|
}
|
|
50
50
|
return typeof title === "string" ? /* @__PURE__ */ jsx("div", {
|
|
51
|
-
className: cn(prefixCls("th-default"), prefixCls(`align-${align}`), {
|
|
51
|
+
className: cn(prefixCls("th-default"), "tw-text-typography-label", prefixCls(`align-${align}`), {
|
|
52
52
|
[prefixCls("td-ellipsis-content")]: ellipsis,
|
|
53
53
|
[prefixCls("th-sortable")]: sortOrder !== void 0
|
|
54
54
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","names":[],"sources":["../../../src/Table/components/Header.tsx"],"sourcesContent":["import { Column } from '@tanstack/react-table';\nimport { cn } from '../../lib/utils';\nimport React, { MouseEventHandler, useCallback } from 'react';\nimport SortAscIcon from '../../Icon/components/SortAscendingOrderColor';\nimport SortIcon from '../../Icon/components/SortColor';\nimport SortDescIcon from '../../Icon/components/SortDescendingOrderColor';\nimport { prefixCls } from '../helper';\nimport { ITableColumn, ITableProps } from '../types';\n\nexport default function Header<T extends object>(props: IProps<T>) {\n const { column } = props;\n const { title, dataIndex, align, ellipsis, sortOrder, onSort } = column\n .columnDef.meta as ITableColumn & { onSort: ITableProps<T>['onSort'] };\n\n let sortIcon = <SortIcon size={20} color={'var(--action-neutral-normal)'} />;\n if (sortOrder === 'ascend') {\n sortIcon = <SortAscIcon size={20} color={'var(--action-primary-normal)'} />;\n } else if (sortOrder === 'descend') {\n sortIcon = (\n <SortDescIcon size={20} color={'var(--action-primary-normal)'} />\n );\n }\n\n const onClickTh = useCallback<MouseEventHandler>(\n (e) => {\n if (\n sortOrder === undefined ||\n !dataIndex ||\n typeof onSort !== 'function'\n ) {\n return;\n }\n e.stopPropagation();\n\n let newSortOrder: typeof sortOrder;\n if (sortOrder === 'ascend') {\n newSortOrder = 'descend';\n } else if (sortOrder === 'descend') {\n newSortOrder = null;\n } else {\n newSortOrder = 'ascend';\n }\n onSort(dataIndex, newSortOrder);\n },\n [dataIndex, onSort, sortOrder],\n );\n\n let content = title;\n if (typeof content === 'string') {\n if (sortOrder !== undefined) {\n content = (\n <span className={prefixCls('sort-th-inner')}>\n <span className={prefixCls('sort-title')}>{title}</span>\n <span className={prefixCls('sort-btn')}>{sortIcon}</span>\n </span>\n );\n }\n }\n\n return typeof title === 'string' ? (\n <div\n key={dataIndex}\n className={cn(prefixCls('th-default')
|
|
1
|
+
{"version":3,"file":"Header.js","names":[],"sources":["../../../src/Table/components/Header.tsx"],"sourcesContent":["import { Column } from '@tanstack/react-table';\nimport { cn } from '../../lib/utils';\nimport React, { MouseEventHandler, useCallback } from 'react';\nimport SortAscIcon from '../../Icon/components/SortAscendingOrderColor';\nimport SortIcon from '../../Icon/components/SortColor';\nimport SortDescIcon from '../../Icon/components/SortDescendingOrderColor';\nimport { prefixCls } from '../helper';\nimport { ITableColumn, ITableProps } from '../types';\n\nexport default function Header<T extends object>(props: IProps<T>) {\n const { column } = props;\n const { title, dataIndex, align, ellipsis, sortOrder, onSort } = column\n .columnDef.meta as ITableColumn & { onSort: ITableProps<T>['onSort'] };\n\n let sortIcon = <SortIcon size={20} color={'var(--action-neutral-normal)'} />;\n if (sortOrder === 'ascend') {\n sortIcon = <SortAscIcon size={20} color={'var(--action-primary-normal)'} />;\n } else if (sortOrder === 'descend') {\n sortIcon = (\n <SortDescIcon size={20} color={'var(--action-primary-normal)'} />\n );\n }\n\n const onClickTh = useCallback<MouseEventHandler>(\n (e) => {\n if (\n sortOrder === undefined ||\n !dataIndex ||\n typeof onSort !== 'function'\n ) {\n return;\n }\n e.stopPropagation();\n\n let newSortOrder: typeof sortOrder;\n if (sortOrder === 'ascend') {\n newSortOrder = 'descend';\n } else if (sortOrder === 'descend') {\n newSortOrder = null;\n } else {\n newSortOrder = 'ascend';\n }\n onSort(dataIndex, newSortOrder);\n },\n [dataIndex, onSort, sortOrder],\n );\n\n let content = title;\n if (typeof content === 'string') {\n if (sortOrder !== undefined) {\n content = (\n <span className={prefixCls('sort-th-inner')}>\n <span className={prefixCls('sort-title')}>{title}</span>\n <span className={prefixCls('sort-btn')}>{sortIcon}</span>\n </span>\n );\n }\n }\n\n return typeof title === 'string' ? (\n <div\n key={dataIndex}\n className={cn(\n prefixCls('th-default'),\n 'tw-text-typography-label',\n prefixCls(`align-${align}`),\n {\n [prefixCls('td-ellipsis-content')]: ellipsis,\n [prefixCls('th-sortable')]: sortOrder !== undefined,\n },\n )}\n onClick={onClickTh}\n >\n {content}\n </div>\n ) : (\n <>{title}</>\n );\n}\n\nexport interface IProps<T> {\n column: Column<T>;\n}\n"],"mappings":";;;;;;;;AASA,SAAwB,OAAyB,OAAkB;CACjE,MAAM,EAAE,WAAW;CACnB,MAAM,EAAE,OAAO,WAAW,OAAO,UAAU,WAAW,WAAW,OAC9D,UAAU;CAEb,IAAI,WAAW,oBAAC,QAAD;EAAU,MAAM;EAAI,OAAO;EAAkC,CAAA;AAC5E,KAAI,cAAc,SAChB,YAAW,oBAAC,MAAD;EAAa,MAAM;EAAI,OAAO;EAAkC,CAAA;UAClE,cAAc,UACvB,YACE,oBAAC,QAAD;EAAc,MAAM;EAAI,OAAO;EAAkC,CAAA;CAIrE,MAAM,YAAY,aACf,MAAM;AACL,MACE,cAAc,UACd,CAAC,aACD,OAAO,WAAW,WAElB;AAEF,IAAE,iBAAiB;EAEnB,IAAI;AACJ,MAAI,cAAc,SAChB,gBAAe;WACN,cAAc,UACvB,gBAAe;MAEf,gBAAe;AAEjB,SAAO,WAAW,aAAa;IAEjC;EAAC;EAAW;EAAQ;EAAU,CAC/B;CAED,IAAI,UAAU;AACd,KAAI,OAAO,YAAY,UACrB;MAAI,cAAc,OAChB,WACE,qBAAC,QAAD;GAAM,WAAW,UAAU,gBAAgB;aAA3C,CACE,oBAAC,QAAD;IAAM,WAAW,UAAU,aAAa;cAAG;IAAa,CAAA,EACxD,oBAAC,QAAD;IAAM,WAAW,UAAU,WAAW;cAAG;IAAgB,CAAA,CACpD;;;AAKb,QAAO,OAAO,UAAU,WACtB,oBAAC,OAAD;EAEE,WAAW,GACT,UAAU,aAAa,EACvB,4BACA,UAAU,SAAS,QAAQ,EAC3B;IACG,UAAU,sBAAsB,GAAG;IACnC,UAAU,cAAc,GAAG,cAAc;GAC3C,CACF;EACD,SAAS;YAER;EACG,EAbC,UAaD,GAEN,oBAAA,UAAA,EAAA,UAAG,OAAS,CAAA"}
|
package/dist/Tabs/index.d.ts
CHANGED
|
@@ -42,7 +42,7 @@ export interface ITabsProps {
|
|
|
42
42
|
moreIcon?: React.ReactNode;
|
|
43
43
|
/** 透传到 Tabs 根容器的 data-testid,用于自动化测试定位 */
|
|
44
44
|
'data-testid'?: string;
|
|
45
|
-
/** 透传到
|
|
45
|
+
/** 透传到 tablist 的 aria-label,用于可访问性与自动化测试定位 */
|
|
46
46
|
'aria-label'?: string;
|
|
47
47
|
}
|
|
48
48
|
declare function Tabs(props: ITabsProps): import("react/jsx-runtime").JSX.Element;
|