@aloudata/aloudata-design 3.0.7 → 3.0.9
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/Alert/index.js +2 -2
- package/dist/Alert/index.js.map +1 -1
- package/dist/Avatar/component/Avatar/index.js +7 -1
- package/dist/Avatar/component/Avatar/index.js.map +1 -1
- package/dist/Button/index.d.ts +2 -0
- package/dist/Button/index.js +2 -1
- package/dist/Button/index.js.map +1 -1
- package/dist/Card/index.js +2 -2
- package/dist/Card/index.js.map +1 -1
- package/dist/Checkbox/index.js +3 -1
- package/dist/Checkbox/index.js.map +1 -1
- package/dist/Checkbox/type.d.ts +4 -0
- package/dist/Collapse/index.js +18 -8
- package/dist/Collapse/index.js.map +1 -1
- package/dist/ConfigProvider/index.d.ts +5 -2
- package/dist/ConfigProvider/index.js +25 -3
- package/dist/ConfigProvider/index.js.map +1 -1
- package/dist/DataPreviewTable/components/Body/Error.d.ts +2 -0
- package/dist/DataPreviewTable/components/Body/Error.js +7 -3
- package/dist/DataPreviewTable/components/Body/Error.js.map +1 -1
- package/dist/DataPreviewTable/index.js +3 -1
- package/dist/DataPreviewTable/index.js.map +1 -1
- package/dist/DatePicker/index.js +12 -1
- package/dist/DatePicker/index.js.map +1 -1
- package/dist/Dropdown/index.js +7 -9
- package/dist/Dropdown/index.js.map +1 -1
- package/dist/Empty/index.js +1 -2
- package/dist/Empty/index.js.map +1 -1
- package/dist/IconButton/index.d.ts +4 -0
- package/dist/IconButton/index.js +8 -2
- package/dist/IconButton/index.js.map +1 -1
- package/dist/Input/components/Input/index.d.ts +4 -0
- package/dist/Input/components/Input/index.js +10 -4
- package/dist/Input/components/Input/index.js.map +1 -1
- package/dist/InputNumber/index.js +5 -1
- package/dist/InputNumber/index.js.map +1 -1
- package/dist/InputNumber/type.d.ts +4 -0
- package/dist/InputSearch/index.d.ts +4 -0
- package/dist/InputSearch/index.js +3 -1
- package/dist/InputSearch/index.js.map +1 -1
- package/dist/MemberPicker/index.js +3 -1
- package/dist/MemberPicker/index.js.map +1 -1
- package/dist/Modal/index.d.ts +4 -0
- package/dist/Modal/index.js +3 -1
- package/dist/Modal/index.js.map +1 -1
- package/dist/Popconfirm/index.js +3 -2
- package/dist/Popconfirm/index.js.map +1 -1
- package/dist/Radio/components/Group/index.js +3 -1
- package/dist/Radio/components/Group/index.js.map +1 -1
- package/dist/Radio/components/Radio/index.js +8 -2
- package/dist/Radio/components/Radio/index.js.map +1 -1
- package/dist/Radio/interface/radioGroup.d.ts +4 -0
- package/dist/Select/BaseSelect.js +5 -1
- package/dist/Select/BaseSelect.js.map +1 -1
- package/dist/Select/components/Suffix.d.ts +2 -1
- package/dist/Select/components/Suffix.js +14 -5
- package/dist/Select/components/Suffix.js.map +1 -1
- package/dist/Select/interface.d.ts +4 -0
- package/dist/Slider/index.js +2 -2
- package/dist/Slider/index.js.map +1 -1
- package/dist/Steps/components/Step/index.d.ts +1 -0
- package/dist/Steps/components/Step/index.js.map +1 -1
- package/dist/Steps/index.d.ts +1 -1
- package/dist/Steps/index.js +4 -2
- package/dist/Steps/index.js.map +1 -1
- package/dist/Switch/index.d.ts +4 -0
- package/dist/Switch/index.js +3 -1
- package/dist/Switch/index.js.map +1 -1
- package/dist/Tabs/index.d.ts +4 -0
- package/dist/Tabs/index.js +3 -1
- package/dist/Tabs/index.js.map +1 -1
- package/dist/Tooltip/index.js +5 -4
- package/dist/Tooltip/index.js.map +1 -1
- package/dist/aloudata-design.css +1 -1
- package/package.json +1 -1
|
@@ -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 addonAfter?: ReactNode;\n addonBefore?: ReactNode;\n size?: TSize;\n id?: string;\n prefix?: ReactNode;\n suffix?: ReactNode;\n allowClear?: boolean;\n disabled?: boolean;\n showCount?: boolean | IShowCountProps;\n maxLength?: number;\n minLength?: number;\n max?: number;\n value?: string;\n defaultValue?: string;\n onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;\n onChange?: ChangeEventHandler;\n className?: string;\n style?: React.CSSProperties;\n placeholder?: string;\n type?: string;\n bordered?: boolean;\n status?: 'error' | 'warning' | '';\n autoComplete?: string;\n autoFocus?: boolean;\n readOnly?: boolean;\n width?: number | string;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n onCompositionStart?: React.CompositionEventHandler<HTMLInputElement>;\n onCompositionEnd?: React.CompositionEventHandler<HTMLInputElement>;\n}\n\nexport function getSizeType(sizeType: TSize): TSize {\n if (['small', 'middle', 'large'].includes(sizeType || '')) {\n return sizeType;\n }\n return 'middle';\n}\n\nconst Input = forwardRef<InputRef, IInputProps>((props, ref) => {\n const {\n size: customSize,\n className,\n bordered = true,\n status,\n disabled,\n allowClear,\n prefix,\n suffix,\n addonBefore,\n addonAfter,\n showCount,\n maxLength,\n value: controlledValue,\n defaultValue,\n onChange,\n onPressEnter,\n onBlur,\n onFocus,\n onKeyDown,\n onCompositionStart,\n onCompositionEnd,\n placeholder,\n type,\n id,\n autoFocus,\n readOnly,\n style,\n } = props;\n\n const contextDisabled = useContext(DisabledContext);\n const mergedDisabled = disabled ?? contextDisabled;\n\n const contentSize = useContext(SizeContext);\n const { compactSize, compactItemClassnames } =\n useCompactItemContext('ald-input');\n const size = customSize || compactSize || contentSize || 'middle';\n\n const isControlled = 'value' in props;\n const [innerValue, setInnerValue] = useState(defaultValue ?? '');\n const currentValue = isControlled ? controlledValue ?? '' : innerValue;\n const [focused, setFocused] = useState(false);\n const inputRef = useRef<HTMLInputElement>(null);\n\n React.useImperativeHandle(ref, () => {\n const el = inputRef.current!;\n // Expose .input for antd v4 compat (ref.current.input.focus())\n (el as InputRef).input = el;\n return el as InputRef;\n });\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (!isControlled) setInnerValue(e.target.value);\n onChange?.(e);\n };\n\n const handleClear = () => {\n const nativeEvent = new Event('input', { bubbles: true });\n if (inputRef.current) {\n const nativeSetter = Object.getOwnPropertyDescriptor(\n HTMLInputElement.prototype,\n 'value',\n )?.set;\n nativeSetter?.call(inputRef.current, '');\n inputRef.current.dispatchEvent(nativeEvent);\n }\n if (!isControlled) setInnerValue('');\n onChange?.({\n target: { value: '' },\n } as React.ChangeEvent<HTMLInputElement>);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') onPressEnter?.(e);\n onKeyDown?.(e);\n };\n\n const showClearIcon = allowClear && currentValue && !mergedDisabled;\n\n const countInfo =\n showCount && typeof showCount === 'object'\n ? showCount.formatter({\n count: currentValue.length,\n maxLength,\n })\n : showCount\n ? `${currentValue.length}${maxLength ? `/${maxLength}` : ''}`\n : null;\n\n // Build compact-mode border-radius and margin overrides\n const compactClasses = compactItemClassnames\n ? cn(\n !compactItemClassnames['ald-input-compact-first-item'] &&\n '!tw-rounded-l-none',\n !compactItemClassnames['ald-input-compact-last-item'] &&\n '!tw-rounded-r-none',\n !compactItemClassnames['ald-input-compact-first-item'] && '-tw-ml-px',\n )\n : undefined;\n\n return (\n <span\n className={cn(\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ald-input ant-input-affix-wrapper tw-inline-flex tw-w-full tw-items-center tw-bg-[var(--interaction-background-form-field)]',\n bordered &&\n 'tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--interaction-border-neutral-normal)]',\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n // focus 仅变 border-color,不加额外 box-shadow/outline。\n // 消费方通过 CSS 将 border 设为 0 后 focus 高亮自然消失,和 antd 行为一致。\n focused &&\n 'ant-input-affix-wrapper-focused tw-border-[var(--interaction-focus-default)]',\n !mergedDisabled &&\n !focused &&\n 'hover:tw-border-[var(--interaction-border-hover)]',\n `ald-input-${getSizeType(size)}`,\n size === 'small' && 'tw-h-7 tw-text-xs',\n size === 'large' && 'tw-h-9 tw-text-sm',\n (size === 'middle' || !size) && 'tw-h-8 tw-text-sm',\n status === 'error' &&\n `ald-input-error tw-border-[var(--border-negative-strong)]`,\n status === 'warning' &&\n `ald-input-warning tw-border-[var(--border-warning-subtle)]`,\n mergedDisabled &&\n 'ald-input-disabled tw-cursor-not-allowed tw-bg-[var(--global-cool-gray-alpha-50)] tw-text-[var(--content-secondary)]',\n compactClasses,\n className,\n )}\n style={style}\n onMouseDown={(e) => {\n // 点击 wrapper 非 input 区域时:\n // 如果 input 已聚焦 → preventDefault 防止点击 wrapper 导致丢焦\n // 如果 input 未聚焦 → 不阻止默认行为,让浏览器正常处理 blur 上一个元素\n if (e.target !== inputRef.current) {\n if (document.activeElement === inputRef.current) {\n e.preventDefault();\n }\n }\n }}\n onMouseUp={(e) => {\n // 在 mouseUp 时将焦点转发给内部 input(兼容 prefix/suffix/padding 区域的点击)\n if (e.target !== inputRef.current && inputRef.current) {\n inputRef.current.focus();\n }\n }}\n >\n {addonBefore && (\n <span className=\"ald-input-addon tw-flex tw-shrink-0 tw-items-center tw-self-stretch tw-border-r tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-neutral-subtle)] tw-px-3 tw-text-[var(--content-secondary)]\">\n {addonBefore}\n </span>\n )}\n {/* antd 兼容:保留 ant-input-prefix class,消费方 CSS 可能依赖该选择器 */}\n {prefix && (\n <span className=\"ald-input-prefix ant-input-prefix tw-flex tw-items-center tw-pl-2 tw-text-[var(--content-secondary)]\">\n {prefix}\n </span>\n )}\n <input\n ref={inputRef}\n id={id}\n type={type || 'text'}\n className=\"tw-min-w-0 tw-flex-1 tw-self-stretch tw-border-0 tw-bg-transparent tw-px-2 tw-text-[var(--content-primary)] tw-text-inherit tw-outline-none\"\n value={currentValue}\n onChange={handleChange}\n onBlur={(e) => {\n setFocused(false);\n onBlur?.(e);\n }}\n onFocus={(e) => {\n setFocused(true);\n onFocus?.(e);\n }}\n onKeyDown={handleKeyDown}\n onCompositionStart={onCompositionStart}\n onCompositionEnd={onCompositionEnd}\n disabled={mergedDisabled}\n placeholder={placeholder}\n maxLength={maxLength}\n autoComplete=\"off\"\n autoFocus={autoFocus}\n readOnly={readOnly}\n spellCheck={false}\n />\n {showClearIcon && (\n <span\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n className=\"ald-input-clear ant-input-clear-icon tw-flex tw-cursor-pointer tw-items-center tw-pr-1\"\n onClick={handleClear}\n >\n <CloseCircleFill size={16} color=\"var(--alias-colors-icon-subtle)\" />\n </span>\n )}\n {/* antd 兼容:保留 ant-input-suffix class,消费方 CSS 可能依赖该选择器 */}\n {suffix && (\n <span className=\"ald-input-suffix ant-input-suffix tw-flex tw-items-center tw-pr-2 tw-text-[var(--content-secondary)]\">\n {suffix}\n </span>\n )}\n {countInfo && (\n <span className=\"ald-input-count tw-pr-2 tw-text-xs tw-text-[var(--content-tertiary)]\">\n {countInfo}\n </span>\n )}\n {addonAfter && (\n <span className=\"ald-input-addon tw-border-l tw-border-solid tw-border-[var(--border-default)] tw-px-2 tw-text-[var(--content-secondary)]\">\n {addonAfter}\n </span>\n )}\n </span>\n );\n});\n\nexport default Input;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Input/components/Input/index.tsx"],"sourcesContent":["import React, {\n ReactNode,\n forwardRef,\n useContext,\n useRef,\n useState,\n} from 'react';\nimport DisabledContext from '../../../ConfigProvider/DisabledContext';\nimport SizeContext, { SizeType } from '../../../ConfigProvider/sizeContext';\nimport { CloseCircleFill } from '../../../Icon';\nimport { cn } from '../../../lib/utils';\nimport { useCompactItemContext } from '../../../Space/CompactContext';\n\ninterface IShowCountProps {\n formatter: (args: { count: number; maxLength?: number }) => string;\n}\nexport type TSize = SizeType;\nexport type InputRef = HTMLInputElement & {\n /** antd v4 compat — points to the underlying <input> element */\n input?: HTMLInputElement | null;\n};\n\ntype ChangeEventHandler = (e: React.ChangeEvent<HTMLInputElement>) => void;\n\nexport interface IInputProps {\n addonAfter?: ReactNode;\n addonBefore?: ReactNode;\n size?: TSize;\n id?: string;\n prefix?: ReactNode;\n suffix?: ReactNode;\n allowClear?: boolean;\n disabled?: boolean;\n showCount?: boolean | IShowCountProps;\n maxLength?: number;\n minLength?: number;\n max?: number;\n value?: string;\n defaultValue?: string;\n onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;\n onChange?: ChangeEventHandler;\n className?: string;\n style?: React.CSSProperties;\n placeholder?: string;\n type?: string;\n bordered?: boolean;\n status?: 'error' | 'warning' | '';\n autoComplete?: string;\n autoFocus?: boolean;\n readOnly?: boolean;\n width?: number | string;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n onCompositionStart?: React.CompositionEventHandler<HTMLInputElement>;\n onCompositionEnd?: React.CompositionEventHandler<HTMLInputElement>;\n /** 透传到内部 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 } = props;\n\n const contextDisabled = useContext(DisabledContext);\n const mergedDisabled = disabled ?? contextDisabled;\n\n const contentSize = useContext(SizeContext);\n const { compactSize, compactItemClassnames } =\n useCompactItemContext('ald-input');\n const size = customSize || compactSize || contentSize || 'middle';\n\n const isControlled = 'value' in props;\n const [innerValue, setInnerValue] = useState(defaultValue ?? '');\n const currentValue = isControlled ? controlledValue ?? '' : innerValue;\n const [focused, setFocused] = useState(false);\n const inputRef = useRef<HTMLInputElement>(null);\n\n React.useImperativeHandle(ref, () => {\n const el = inputRef.current!;\n // Expose .input for antd v4 compat (ref.current.input.focus())\n (el as InputRef).input = el;\n return el as InputRef;\n });\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (!isControlled) setInnerValue(e.target.value);\n onChange?.(e);\n };\n\n const handleClear = () => {\n const nativeEvent = new Event('input', { bubbles: true });\n if (inputRef.current) {\n const nativeSetter = Object.getOwnPropertyDescriptor(\n HTMLInputElement.prototype,\n 'value',\n )?.set;\n nativeSetter?.call(inputRef.current, '');\n inputRef.current.dispatchEvent(nativeEvent);\n }\n if (!isControlled) setInnerValue('');\n onChange?.({\n target: { value: '' },\n } as React.ChangeEvent<HTMLInputElement>);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') onPressEnter?.(e);\n onKeyDown?.(e);\n };\n\n const showClearIcon = allowClear && currentValue && !mergedDisabled;\n\n const countInfo =\n showCount && typeof showCount === 'object'\n ? showCount.formatter({\n count: currentValue.length,\n maxLength,\n })\n : showCount\n ? `${currentValue.length}${maxLength ? `/${maxLength}` : ''}`\n : null;\n\n // Build compact-mode border-radius and margin overrides\n const compactClasses = compactItemClassnames\n ? cn(\n !compactItemClassnames['ald-input-compact-first-item'] &&\n '!tw-rounded-l-none',\n !compactItemClassnames['ald-input-compact-last-item'] &&\n '!tw-rounded-r-none',\n !compactItemClassnames['ald-input-compact-first-item'] && '-tw-ml-px',\n )\n : undefined;\n\n return (\n <span\n className={cn(\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ald-input ant-input-affix-wrapper tw-inline-flex tw-w-full tw-items-center tw-bg-[var(--interaction-background-form-field)]',\n bordered &&\n 'tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--interaction-border-neutral-normal)]',\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n // focus 仅变 border-color,不加额外 box-shadow/outline。\n // 消费方通过 CSS 将 border 设为 0 后 focus 高亮自然消失,和 antd 行为一致。\n focused &&\n 'ant-input-affix-wrapper-focused tw-border-[var(--interaction-focus-default)]',\n !mergedDisabled &&\n !focused &&\n 'hover:tw-border-[var(--interaction-border-hover)]',\n `ald-input-${getSizeType(size)}`,\n size === 'small' && 'tw-h-7 tw-text-xs',\n size === 'large' && 'tw-h-9 tw-text-sm',\n (size === 'middle' || !size) && 'tw-h-8 tw-text-sm',\n status === 'error' &&\n `ald-input-error tw-border-[var(--border-negative-strong)]`,\n status === 'warning' &&\n `ald-input-warning tw-border-[var(--border-warning-subtle)]`,\n mergedDisabled &&\n 'ald-input-disabled tw-cursor-not-allowed tw-bg-[var(--global-cool-gray-alpha-50)] tw-text-[var(--content-secondary)]',\n compactClasses,\n className,\n )}\n style={{\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-transparent tw-px-2 tw-text-[var(--content-primary)] tw-text-inherit tw-outline-none\"\n value={currentValue}\n onChange={handleChange}\n onBlur={(e) => {\n setFocused(false);\n onBlur?.(e);\n }}\n onFocus={(e) => {\n setFocused(true);\n onFocus?.(e);\n }}\n onKeyDown={handleKeyDown}\n onCompositionStart={onCompositionStart}\n onCompositionEnd={onCompositionEnd}\n disabled={mergedDisabled}\n placeholder={placeholder}\n maxLength={maxLength}\n minLength={minLength}\n autoComplete={autoComplete}\n autoFocus={autoFocus}\n readOnly={readOnly}\n spellCheck={false}\n data-testid={dataTestid}\n aria-label={ariaLabel}\n />\n {showClearIcon && (\n <span\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n className=\"ald-input-clear ant-input-clear-icon tw-flex tw-cursor-pointer tw-items-center tw-pr-1\"\n onClick={handleClear}\n >\n <CloseCircleFill size={16} color=\"var(--alias-colors-icon-subtle)\" />\n </span>\n )}\n {/* antd 兼容:保留 ant-input-suffix class,消费方 CSS 可能依赖该选择器 */}\n {suffix && (\n <span className=\"ald-input-suffix ant-input-suffix tw-flex tw-items-center tw-pr-2 tw-text-[var(--content-secondary)]\">\n {suffix}\n </span>\n )}\n {countInfo && (\n <span className=\"ald-input-count tw-pr-2 tw-text-xs tw-text-[var(--content-tertiary)]\">\n {countInfo}\n </span>\n )}\n {addonAfter && (\n <span className=\"ald-input-addon tw-border-l tw-border-solid tw-border-[var(--border-default)] tw-px-2 tw-text-[var(--content-secondary)]\">\n {addonAfter}\n </span>\n )}\n </span>\n );\n});\n\nexport default Input;\n"],"mappings":"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"}
|
|
@@ -5,7 +5,7 @@ import { useCallback, useContext, useEffect, useRef, useState } from "react";
|
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
//#region src/InputNumber/index.tsx
|
|
7
7
|
function InputNumber(props) {
|
|
8
|
-
const { className, disabled: customDisabled, size: customSize, status, value: controlledValue, defaultValue, min = -Infinity, max = Infinity, step = 1, precision, onChange, onPressEnter, onBlur, onFocus, formatter, parser, prefix, addonBefore, addonAfter, placeholder, autoFocus, bordered = true, keyboard = true, readonly: readOnly, style, id } = props;
|
|
8
|
+
const { className, disabled: customDisabled, size: customSize, status, value: controlledValue, defaultValue, min = -Infinity, max = Infinity, step = 1, precision, onChange, onPressEnter, onBlur, onFocus, formatter, parser, prefix, addonBefore, addonAfter, placeholder, autoFocus, bordered = true, keyboard = true, readonly: readOnly, style, id, "data-testid": dataTestId, "aria-label": ariaLabel } = props;
|
|
9
9
|
const contentSize = useContext(SizeContext);
|
|
10
10
|
const size = customSize || contentSize || "middle";
|
|
11
11
|
const disabled = useContext(DisabledContext);
|
|
@@ -82,6 +82,8 @@ function InputNumber(props) {
|
|
|
82
82
|
const sizeClasses = cn(size === "large" && "ald-input-number-large tw-h-9 tw-text-base", size === "small" && "ald-input-number-small tw-h-7 tw-text-xs", size !== "large" && size !== "small" && "ald-input-number-middle tw-h-8 tw-text-sm");
|
|
83
83
|
const radiusClasses = cn(size === "large" && "tw-rounded-[8px]", size === "small" && "tw-rounded-[4px]", size !== "large" && size !== "small" && "tw-rounded-[6px]");
|
|
84
84
|
const inputBox = /* @__PURE__ */ jsxs("div", {
|
|
85
|
+
"data-testid": !hasAddon ? dataTestId : void 0,
|
|
86
|
+
"aria-label": !hasAddon ? ariaLabel : void 0,
|
|
85
87
|
className: cn("ald-input-number tw-inline-flex tw-w-[90px] tw-min-w-0 tw-items-center tw-overflow-hidden", bordered && "tw-border tw-border-solid tw-border-[var(--interaction-border-neutral-normal)]", mergedDisabled ? "ald-input-number-disabled tw-cursor-not-allowed tw-bg-[var(--global-cool-gray-alpha-50)] tw-text-[var(--content-secondary)]" : "tw-bg-[var(--interaction-background-form-field)] tw-text-[var(--content-primary)] hover:tw-border-[var(--interaction-border-hover)]", !hasAddon && sizeClasses, hasAddon ? "tw-h-auto tw-flex-1 tw-self-stretch tw-rounded-none" : radiusClasses, status === "error" && "tw-border-[var(--border-negative-strong)]", status === "warning" && "tw-border-[var(--border-warning-subtle)]", "focus-within:tw-border-[var(--interaction-border-hover)] focus-within:tw-outline focus-within:tw-outline-1 focus-within:tw-outline-[var(--global-blue-500)]", !hasAddon && className),
|
|
86
88
|
style: !hasAddon ? style : void 0,
|
|
87
89
|
children: [prefix && /* @__PURE__ */ jsx("span", {
|
|
@@ -107,6 +109,8 @@ function InputNumber(props) {
|
|
|
107
109
|
});
|
|
108
110
|
if (!hasAddon) return inputBox;
|
|
109
111
|
return /* @__PURE__ */ jsxs("div", {
|
|
112
|
+
"data-testid": dataTestId,
|
|
113
|
+
"aria-label": ariaLabel,
|
|
110
114
|
className: cn("ald-input-number-group tw-inline-flex tw-min-w-0 tw-items-stretch", sizeClasses, radiusClasses, mergedDisabled && "ald-input-number-disabled", className),
|
|
111
115
|
style,
|
|
112
116
|
children: [
|
|
@@ -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 } = 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 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(--interaction-border-neutral-normal)]',\n mergedDisabled\n ? 'ald-input-number-disabled tw-cursor-not-allowed tw-bg-[var(--global-cool-gray-alpha-50)] tw-text-[var(--content-secondary)]'\n : 'tw-bg-[var(--interaction-background-form-field)] tw-text-[var(--content-primary)] hover:tw-border-[var(--interaction-border-hover)]',\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(--interaction-border-hover)] focus-within:tw-outline focus-within:tw-outline-1 focus-within:tw-outline-[var(--global-blue-500)]',\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-transparent 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 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(--interaction-border-neutral-normal)] 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(--interaction-border-neutral-normal)] 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(--interaction-border-neutral-normal)]',\n mergedDisabled\n ? 'ald-input-number-disabled tw-cursor-not-allowed tw-bg-[var(--global-cool-gray-alpha-50)] tw-text-[var(--content-secondary)]'\n : 'tw-bg-[var(--interaction-background-form-field)] tw-text-[var(--content-primary)] hover:tw-border-[var(--interaction-border-hover)]',\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(--interaction-border-hover)] focus-within:tw-outline focus-within:tw-outline-1 focus-within:tw-outline-[var(--global-blue-500)]',\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-transparent 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(--interaction-border-neutral-normal)] 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(--interaction-border-neutral-normal)] 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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"}
|
|
@@ -40,4 +40,8 @@ export interface IInputNumberProps {
|
|
|
40
40
|
width?: number | string;
|
|
41
41
|
onBlur?: React.FocusEventHandler<HTMLInputElement>;
|
|
42
42
|
onFocus?: React.FocusEventHandler<HTMLInputElement>;
|
|
43
|
+
/** 透传到 InputNumber 根容器的 data-testid,用于自动化测试定位 */
|
|
44
|
+
'data-testid'?: string;
|
|
45
|
+
/** 透传到 InputNumber 根容器的 aria-label,用于可访问性与自动化测试定位 */
|
|
46
|
+
'aria-label'?: string;
|
|
43
47
|
}
|
|
@@ -19,5 +19,9 @@ interface IProps {
|
|
|
19
19
|
inputMode?: boolean;
|
|
20
20
|
style?: React.CSSProperties;
|
|
21
21
|
disabled?: boolean;
|
|
22
|
+
/** 透传到内部 input 元素的 data-testid,用于自动化测试定位 */
|
|
23
|
+
'data-testid'?: string;
|
|
24
|
+
/** 透传到内部 input 元素的 aria-label,用于可访问性与自动化测试定位 */
|
|
25
|
+
'aria-label'?: string;
|
|
22
26
|
}
|
|
23
27
|
export {};
|
|
@@ -18,7 +18,7 @@ var DEFAULT_EN_LARGE_WIDTH = 108;
|
|
|
18
18
|
function InputSearch(props) {
|
|
19
19
|
const { locale } = useContext(LocaleContext);
|
|
20
20
|
const t = getTranslator(locale);
|
|
21
|
-
const { onSearch, onChange, className, debounce = true, placeholder, size = "small", defaultValue, value, inputMode = false, style, onBlur, disabled } = props;
|
|
21
|
+
const { onSearch, onChange, className, debounce = true, placeholder, size = "small", defaultValue, value, inputMode = false, style, onBlur, disabled, "data-testid": dataTestid, "aria-label": ariaLabel } = props;
|
|
22
22
|
const defaultWidth = useMemo(() => {
|
|
23
23
|
if (size === "small") {
|
|
24
24
|
if (locale === ELangType.EN) return DEFAULT_EN_SMALL_WIDTH;
|
|
@@ -102,6 +102,8 @@ function InputSearch(props) {
|
|
|
102
102
|
placeholder: placeholder || t.InputSearch.search,
|
|
103
103
|
allowClear: true,
|
|
104
104
|
disabled,
|
|
105
|
+
"data-testid": dataTestid,
|
|
106
|
+
"aria-label": ariaLabel,
|
|
105
107
|
...isControlled ? { value: currentValue } : { defaultValue },
|
|
106
108
|
onBlur: (e) => {
|
|
107
109
|
if (onBlur) onBlur(currentValue, e);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/InputSearch/index.tsx"],"sourcesContent":["import { useDebounceFn } from 'ahooks';\nimport { cn } from '../lib/utils';\nimport _ from 'lodash';\nimport React, {\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { SearchLine } from '../Icon';\nimport Input from '../Input';\nimport { ELangType, LocaleContext, getTranslator } from '../locale/default';\nimport './input-search.css';\n\ninterface ICustomCSSProperties extends React.CSSProperties {\n '--init-width'?: string;\n '--expanded-width'?: string;\n}\n\nconst DEFAULT_EXPANDED_WIDTH = 200;\n\nconst DEFAULT_SMALL_WIDTH = 68;\nconst DEFAULT_WIDTH = 78;\nconst DEFAULT_EN_SMALL_WIDTH = 88;\nconst DEFAULT_EN_WIDTH = 98;\nconst DEFAULT_LARGE_WIDTH = 88;\nconst DEFAULT_EN_LARGE_WIDTH = 108;\n\nexport default function InputSearch(props: IProps) {\n const { locale } = useContext(LocaleContext);\n const t = getTranslator(locale);\n\n const {\n onSearch,\n onChange,\n className,\n debounce = true,\n placeholder,\n size = 'small',\n defaultValue,\n value,\n inputMode = false,\n style,\n onBlur,\n disabled,\n } = props;\n\n const defaultWidth = useMemo(() => {\n if (size === 'small') {\n if (locale === ELangType.EN) {\n return DEFAULT_EN_SMALL_WIDTH;\n }\n return DEFAULT_SMALL_WIDTH;\n } else if (size === 'middle') {\n if (locale === ELangType.EN) {\n return DEFAULT_EN_WIDTH;\n }\n return DEFAULT_WIDTH;\n } else {\n if (locale === ELangType.EN) {\n return DEFAULT_EN_LARGE_WIDTH;\n }\n return DEFAULT_LARGE_WIDTH;\n }\n }, [locale, size]);\n\n // 判断是否为受控模式\n const isControlled = 'value' in props;\n const [searchValue, setSearchValue] = useState(defaultValue || '');\n\n // 获取当前值:受控模式使用 value,非受控模式使用内部状态\n const currentValue = isControlled ? value ?? '' : searchValue;\n\n const isComposing = useRef(false);\n\n const onPressEnter = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (!isComposing.current) {\n onSearch(_.trim((e.target as HTMLInputElement).value));\n }\n },\n [onSearch],\n );\n\n const DEFAULT_DEBOUNCE_TIME = 500;\n const { run: debounceSearch } = useDebounceFn<(val: string) => void>(\n (val) => {\n if (!isComposing.current) {\n onSearch(val);\n }\n },\n {\n wait: DEFAULT_DEBOUNCE_TIME,\n },\n );\n\n const onChangeValue = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n\n // 非受控模式才更新内部状态\n if (!isControlled) {\n setSearchValue(newValue);\n } else {\n onChange?.(newValue);\n return;\n }\n\n if (!isComposing.current) {\n // 受控的时候debounce不生效\n if (debounce && !isControlled) {\n debounceSearch(newValue);\n } else {\n onSearch(newValue);\n }\n }\n },\n [debounce, debounceSearch, onSearch, isControlled, onChange],\n );\n\n const handleCompositionStart = useCallback(() => {\n isComposing.current = true;\n }, []);\n\n const handleCompositionEnd = useCallback(\n (e: React.CompositionEvent<HTMLInputElement>) => {\n if (isControlled) {\n return;\n }\n isComposing.current = false;\n // 在输入法结束后触发一次搜索\n const value = (e.target as HTMLInputElement).value;\n if (debounce) {\n debounceSearch(value);\n } else {\n onSearch(value);\n }\n },\n [debounce, debounceSearch, isControlled, onSearch],\n );\n\n const iconSize = useMemo(() => {\n if (size === 'middle' || size === 'large') {\n return 20;\n }\n return 16;\n }, [size]);\n\n return (\n <div\n className={cn('ald-input-search', className, {\n ['input-search-size-small']: size === 'small',\n ['input-search-size-middle']: size === 'middle',\n ['input-search-size-large']: size === 'large',\n })}\n style={\n {\n ...style,\n '--init-width': (props.initWidth || defaultWidth) + 'px',\n '--expanded-width':\n (props.expandedWidth || DEFAULT_EXPANDED_WIDTH) + 'px',\n } as ICustomCSSProperties\n }\n >\n <Input\n className={cn({\n ['input-search-has-value']: currentValue.length !== 0 || inputMode,\n ['input-search-has-content']: currentValue.length !== 0,\n ['inputMode']: inputMode,\n })}\n size={size}\n onChange={onChangeValue}\n onPressEnter={onPressEnter}\n onCompositionStart={handleCompositionStart}\n onCompositionEnd={handleCompositionEnd}\n prefix={<SearchLine size={iconSize} />}\n placeholder={placeholder || t.InputSearch.search}\n allowClear\n disabled={disabled}\n {...(isControlled\n ? { value: currentValue }\n : { defaultValue: defaultValue })}\n onBlur={(e) => {\n if (onBlur) {\n onBlur(currentValue, e);\n }\n }}\n />\n </div>\n );\n}\n\ninterface IProps {\n /** 搜索回调,在输入完成时触发(回车、输入法结束、非输入法输入时) */\n onSearch: (value: string) => void;\n /** 值变化回调(受控模式时推荐使用,每次输入都触发,包括输入法期间) */\n onChange?: (value: string) => void;\n onBlur?: (value: string, e: React.FocusEvent<HTMLInputElement>) => void;\n className?: string;\n // 是否开启防抖\n debounce?: boolean;\n placeholder?: string;\n size?: 'small' | 'middle' | 'large';\n initWidth?: number;\n /** 展开态(hover / focus / 有值)宽度,默认 200px。\n * 收起态宽度仍由 initWidth 控制;inputMode 始终 100%,不受本参数影响。 */\n expandedWidth?: number;\n defaultValue?: string;\n // 受控模式的值\n value?: string;\n inputMode?: boolean;\n style?: React.CSSProperties;\n disabled?: boolean;\n}\n"],"mappings":";;;;;;;;;;AAoBA,IAAM,yBAAyB;AAE/B,IAAM,sBAAsB;AAC5B,IAAM,gBAAgB;AACtB,IAAM,yBAAyB;AAC/B,IAAM,mBAAmB;AACzB,IAAM,sBAAsB;AAC5B,IAAM,yBAAyB;AAE/B,SAAwB,YAAY,OAAe;CACjD,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,EACJ,UACA,UACA,WACA,WAAW,MACX,aACA,OAAO,SACP,cACA,OACA,YAAY,OACZ,OACA,QACA,
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/InputSearch/index.tsx"],"sourcesContent":["import { useDebounceFn } from 'ahooks';\nimport { cn } from '../lib/utils';\nimport _ from 'lodash';\nimport React, {\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { SearchLine } from '../Icon';\nimport Input from '../Input';\nimport { ELangType, LocaleContext, getTranslator } from '../locale/default';\nimport './input-search.css';\n\ninterface ICustomCSSProperties extends React.CSSProperties {\n '--init-width'?: string;\n '--expanded-width'?: string;\n}\n\nconst DEFAULT_EXPANDED_WIDTH = 200;\n\nconst DEFAULT_SMALL_WIDTH = 68;\nconst DEFAULT_WIDTH = 78;\nconst DEFAULT_EN_SMALL_WIDTH = 88;\nconst DEFAULT_EN_WIDTH = 98;\nconst DEFAULT_LARGE_WIDTH = 88;\nconst DEFAULT_EN_LARGE_WIDTH = 108;\n\nexport default function InputSearch(props: IProps) {\n const { locale } = useContext(LocaleContext);\n const t = getTranslator(locale);\n\n const {\n onSearch,\n onChange,\n className,\n debounce = true,\n placeholder,\n size = 'small',\n defaultValue,\n value,\n inputMode = false,\n style,\n onBlur,\n disabled,\n 'data-testid': dataTestid,\n 'aria-label': ariaLabel,\n } = props;\n\n const defaultWidth = useMemo(() => {\n if (size === 'small') {\n if (locale === ELangType.EN) {\n return DEFAULT_EN_SMALL_WIDTH;\n }\n return DEFAULT_SMALL_WIDTH;\n } else if (size === 'middle') {\n if (locale === ELangType.EN) {\n return DEFAULT_EN_WIDTH;\n }\n return DEFAULT_WIDTH;\n } else {\n if (locale === ELangType.EN) {\n return DEFAULT_EN_LARGE_WIDTH;\n }\n return DEFAULT_LARGE_WIDTH;\n }\n }, [locale, size]);\n\n // 判断是否为受控模式\n const isControlled = 'value' in props;\n const [searchValue, setSearchValue] = useState(defaultValue || '');\n\n // 获取当前值:受控模式使用 value,非受控模式使用内部状态\n const currentValue = isControlled ? value ?? '' : searchValue;\n\n const isComposing = useRef(false);\n\n const onPressEnter = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (!isComposing.current) {\n onSearch(_.trim((e.target as HTMLInputElement).value));\n }\n },\n [onSearch],\n );\n\n const DEFAULT_DEBOUNCE_TIME = 500;\n const { run: debounceSearch } = useDebounceFn<(val: string) => void>(\n (val) => {\n if (!isComposing.current) {\n onSearch(val);\n }\n },\n {\n wait: DEFAULT_DEBOUNCE_TIME,\n },\n );\n\n const onChangeValue = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n\n // 非受控模式才更新内部状态\n if (!isControlled) {\n setSearchValue(newValue);\n } else {\n onChange?.(newValue);\n return;\n }\n\n if (!isComposing.current) {\n // 受控的时候debounce不生效\n if (debounce && !isControlled) {\n debounceSearch(newValue);\n } else {\n onSearch(newValue);\n }\n }\n },\n [debounce, debounceSearch, onSearch, isControlled, onChange],\n );\n\n const handleCompositionStart = useCallback(() => {\n isComposing.current = true;\n }, []);\n\n const handleCompositionEnd = useCallback(\n (e: React.CompositionEvent<HTMLInputElement>) => {\n if (isControlled) {\n return;\n }\n isComposing.current = false;\n // 在输入法结束后触发一次搜索\n const value = (e.target as HTMLInputElement).value;\n if (debounce) {\n debounceSearch(value);\n } else {\n onSearch(value);\n }\n },\n [debounce, debounceSearch, isControlled, onSearch],\n );\n\n const iconSize = useMemo(() => {\n if (size === 'middle' || size === 'large') {\n return 20;\n }\n return 16;\n }, [size]);\n\n return (\n <div\n className={cn('ald-input-search', className, {\n ['input-search-size-small']: size === 'small',\n ['input-search-size-middle']: size === 'middle',\n ['input-search-size-large']: size === 'large',\n })}\n style={\n {\n ...style,\n '--init-width': (props.initWidth || defaultWidth) + 'px',\n '--expanded-width':\n (props.expandedWidth || DEFAULT_EXPANDED_WIDTH) + 'px',\n } as ICustomCSSProperties\n }\n >\n <Input\n className={cn({\n ['input-search-has-value']: currentValue.length !== 0 || inputMode,\n ['input-search-has-content']: currentValue.length !== 0,\n ['inputMode']: inputMode,\n })}\n size={size}\n onChange={onChangeValue}\n onPressEnter={onPressEnter}\n onCompositionStart={handleCompositionStart}\n onCompositionEnd={handleCompositionEnd}\n prefix={<SearchLine size={iconSize} />}\n placeholder={placeholder || t.InputSearch.search}\n allowClear\n disabled={disabled}\n data-testid={dataTestid}\n aria-label={ariaLabel}\n {...(isControlled\n ? { value: currentValue }\n : { defaultValue: defaultValue })}\n onBlur={(e) => {\n if (onBlur) {\n onBlur(currentValue, e);\n }\n }}\n />\n </div>\n );\n}\n\ninterface IProps {\n /** 搜索回调,在输入完成时触发(回车、输入法结束、非输入法输入时) */\n onSearch: (value: string) => void;\n /** 值变化回调(受控模式时推荐使用,每次输入都触发,包括输入法期间) */\n onChange?: (value: string) => void;\n onBlur?: (value: string, e: React.FocusEvent<HTMLInputElement>) => void;\n className?: string;\n // 是否开启防抖\n debounce?: boolean;\n placeholder?: string;\n size?: 'small' | 'middle' | 'large';\n initWidth?: number;\n /** 展开态(hover / focus / 有值)宽度,默认 200px。\n * 收起态宽度仍由 initWidth 控制;inputMode 始终 100%,不受本参数影响。 */\n expandedWidth?: number;\n defaultValue?: string;\n // 受控模式的值\n value?: string;\n inputMode?: boolean;\n style?: React.CSSProperties;\n disabled?: boolean;\n /** 透传到内部 input 元素的 data-testid,用于自动化测试定位 */\n 'data-testid'?: string;\n /** 透传到内部 input 元素的 aria-label,用于可访问性与自动化测试定位 */\n 'aria-label'?: string;\n}\n"],"mappings":";;;;;;;;;;AAoBA,IAAM,yBAAyB;AAE/B,IAAM,sBAAsB;AAC5B,IAAM,gBAAgB;AACtB,IAAM,yBAAyB;AAC/B,IAAM,mBAAmB;AACzB,IAAM,sBAAsB;AAC5B,IAAM,yBAAyB;AAE/B,SAAwB,YAAY,OAAe;CACjD,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,EACJ,UACA,UACA,WACA,WAAW,MACX,aACA,OAAO,SACP,cACA,OACA,YAAY,OACZ,OACA,QACA,UACA,eAAe,YACf,cAAc,cACZ;CAEJ,MAAM,eAAe,cAAc;AACjC,MAAI,SAAS,SAAS;AACpB,OAAI,WAAW,UAAU,GACvB,QAAO;AAET,UAAO;aACE,SAAS,UAAU;AAC5B,OAAI,WAAW,UAAU,GACvB,QAAO;AAET,UAAO;SACF;AACL,OAAI,WAAW,UAAU,GACvB,QAAO;AAET,UAAO;;IAER,CAAC,QAAQ,KAAK,CAAC;CAGlB,MAAM,eAAe,WAAW;CAChC,MAAM,CAAC,aAAa,kBAAkB,SAAS,gBAAgB,GAAG;CAGlE,MAAM,eAAe,eAAe,SAAS,KAAK;CAElD,MAAM,cAAc,OAAO,MAAM;CAEjC,MAAM,eAAe,aAClB,MAA6C;AAC5C,MAAI,CAAC,YAAY,QACf,UAAS,EAAE,KAAM,EAAE,OAA4B,MAAM,CAAC;IAG1D,CAAC,SAAS,CACX;CAGD,MAAM,EAAE,KAAK,mBAAmB,eAC7B,QAAQ;AACP,MAAI,CAAC,YAAY,QACf,UAAS,IAAI;IAGjB,EACE,MAR0B,KAS3B,CACF;CAED,MAAM,gBAAgB,aACnB,MAA2C;EAC1C,MAAM,WAAW,EAAE,OAAO;AAG1B,MAAI,CAAC,aACH,gBAAe,SAAS;OACnB;AACL,cAAW,SAAS;AACpB;;AAGF,MAAI,CAAC,YAAY,QAEf,KAAI,YAAY,CAAC,aACf,gBAAe,SAAS;MAExB,UAAS,SAAS;IAIxB;EAAC;EAAU;EAAgB;EAAU;EAAc;EAAS,CAC7D;CAED,MAAM,yBAAyB,kBAAkB;AAC/C,cAAY,UAAU;IACrB,EAAE,CAAC;CAEN,MAAM,uBAAuB,aAC1B,MAAgD;AAC/C,MAAI,aACF;AAEF,cAAY,UAAU;EAEtB,MAAM,QAAS,EAAE,OAA4B;AAC7C,MAAI,SACF,gBAAe,MAAM;MAErB,UAAS,MAAM;IAGnB;EAAC;EAAU;EAAgB;EAAc;EAAS,CACnD;CAED,MAAM,WAAW,cAAc;AAC7B,MAAI,SAAS,YAAY,SAAS,QAChC,QAAO;AAET,SAAO;IACN,CAAC,KAAK,CAAC;AAEV,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,oBAAoB,WAAW;IAC1C,4BAA4B,SAAS;IACrC,6BAA6B,SAAS;IACtC,4BAA4B,SAAS;GACvC,CAAC;EACF,OACE;GACE,GAAG;GACH,iBAAiB,MAAM,aAAa,gBAAgB;GACpD,qBACG,MAAM,iBAAiB,0BAA0B;GACrD;YAGH,oBAAC,OAAD;GACE,WAAW,GAAG;KACX,2BAA2B,aAAa,WAAW,KAAK;KACxD,6BAA6B,aAAa,WAAW;KACrD,cAAc;IAChB,CAAC;GACI;GACN,UAAU;GACI;GACd,oBAAoB;GACpB,kBAAkB;GAClB,QAAQ,oBAAC,MAAD,EAAY,MAAM,UAAY,CAAA;GACtC,aAAa,eAAe,EAAE,YAAY;GAC1C,YAAA;GACU;GACV,eAAa;GACb,cAAY;GACZ,GAAK,eACD,EAAE,OAAO,cAAc,GACvB,EAAgB,cAAc;GAClC,SAAS,MAAM;AACb,QAAI,OACF,QAAO,cAAc,EAAE;;GAG3B,CAAA;EACE,CAAA"}
|
|
@@ -19,7 +19,7 @@ var DEFAULT_MULTIPLE_DROPDOWN_WIDTH = 480;
|
|
|
19
19
|
var Component = (props) => {
|
|
20
20
|
const { locale } = useContext(LocaleContext);
|
|
21
21
|
const t = getTranslator(locale);
|
|
22
|
-
const { value, type = EMemberPicker.USER, onChange, multiple, dropdownWidth, open, onOpenChange, placeholder = t.MemberPicker.select, className, allowClear, disabled, onClear, size, prefix: propPrefix, lockedIds = [], footer, onCancel, filterItem, mode: propsMode, renderItem, renderSelectedTag, ...restProps } = props;
|
|
22
|
+
const { value, type = EMemberPicker.USER, onChange, multiple, dropdownWidth, open, onOpenChange, placeholder = t.MemberPicker.select, className, allowClear, disabled, onClear, size, prefix: propPrefix, lockedIds = [], footer, onCancel, filterItem, mode: propsMode, renderItem, renderSelectedTag, "data-testid": dataTestId, "aria-label": ariaLabel, ...restProps } = props;
|
|
23
23
|
const allowOverlap = props.allowOverlap ?? false;
|
|
24
24
|
const { getUsersByIds, getUsersByKeywords } = AldCustomConfigProvider.useGetUserList();
|
|
25
25
|
const [selectedUserList, setSelectedUserList] = useState([]);
|
|
@@ -171,6 +171,8 @@ var Component = (props) => {
|
|
|
171
171
|
return /* @__PURE__ */ jsx(Select_default, {
|
|
172
172
|
prefix: propPrefix,
|
|
173
173
|
...restProps,
|
|
174
|
+
"data-testid": dataTestId,
|
|
175
|
+
"aria-label": ariaLabel,
|
|
174
176
|
size,
|
|
175
177
|
className: cn("ald-member-picker-select", className),
|
|
176
178
|
value: selectedUserList.map((item) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/MemberPicker/index.tsx"],"sourcesContent":["import { usePrevious, useRequest } from 'ahooks';\nimport { cn } from '../lib/utils';\nimport _ from 'lodash';\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Avatar from '../Avatar';\nimport ConfigProvider from '../ConfigProvider';\nimport './member-picker.css';\nimport {\n EUserType,\n IUser,\n IUserGroup,\n TUser,\n} from '../ConfigProvider/getUserList';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport message from '../message';\nimport Panel from './components/Panel';\nimport MemberPanel from './components/PanelWrapper';\nimport {\n EMemberPicker,\n IMemberPickerProps,\n TUserGroupValue,\n TUserValue,\n} from './interface';\nimport { isUser, isUserGroup } from './utils/getUsersWithUserId';\nimport Select from '../Select';\nimport { Mode } from '../Select/BaseSelect';\n\nconst DEFAULT_MULTIPLE_DROPDOWN_WIDTH = 480;\n\nconst Component: React.FC<IMemberPickerProps> = (props) => {\n const { locale } = useContext(LocaleContext);\n const t = getTranslator(locale);\n\n const {\n value,\n type = EMemberPicker.USER,\n onChange,\n multiple,\n dropdownWidth,\n open,\n onOpenChange,\n placeholder = t.MemberPicker.select,\n className,\n allowClear,\n disabled,\n onClear,\n size,\n prefix: propPrefix,\n lockedIds = [],\n footer,\n onCancel,\n filterItem,\n mode: propsMode,\n renderItem,\n renderSelectedTag,\n ...restProps\n } = props;\n const allowOverlap = props.allowOverlap ?? false;\n const { getUsersByIds, getUsersByKeywords } = ConfigProvider.useGetUserList();\n const [selectedUserList, setSelectedUserList] = useState<TUser>([]);\n const prevValue = usePrevious(value);\n const [searchUserList, setSearchUserList] = useState<TUser>([]);\n const [searchString, setSearchString] = useState<string>('');\n const [dropdownContentWidth, setDropdownContentWidth] =\n useState(dropdownWidth);\n // 单选默认浮窗跟触发器等宽(true),调用方传 dropdownWidth 时用具体数字;\n // 多选默认 480,单条记录只有 头像+nickname 时触发器太窄装不下选中标签,故固定值。\n const panelWidth: number | boolean =\n dropdownWidth ?? (multiple ? DEFAULT_MULTIPLE_DROPDOWN_WIDTH : true);\n\n const triggerRef = useRef<HTMLDivElement>(null);\n const onSearchValueChange = useCallback((v: string) => {\n setSearchString(v);\n }, []);\n const [dropdownOpen, setDropdownOpen] = useState<boolean>(!!open);\n const queryByKeywords = useMemo(() => {\n if (getUsersByKeywords) {\n return getUsersByKeywords;\n }\n\n return (_params = {}) =>\n Promise.reject({\n message: t.MemberPicker.pleaseConfigGetUserByKeywordsMethod,\n });\n }, [getUsersByKeywords, t.MemberPicker.pleaseConfigGetUserByKeywordsMethod]);\n const queryByIds = useMemo(() => {\n if (getUsersByIds) {\n return getUsersByIds;\n }\n\n return (_params = {}) =>\n Promise.reject({\n message: t.MemberPicker.pleaseConfigGetUserByIdsMethod,\n });\n }, [getUsersByIds, t.MemberPicker.pleaseConfigGetUserByIdsMethod]);\n const { loading, run } = useRequest(() => queryByKeywords(searchString), {\n refreshDeps: [searchString],\n manual: true,\n cacheKey: 'member-selector',\n cacheTime: 1000 * 60 * 2, // 2分钟内不重复请求\n onSuccess: (result) => {\n setSearchUserList(result);\n },\n onError: (error) => {\n message.error(error.message);\n },\n });\n\n const totalUserList: TUser = useMemo(() => {\n const totalUsers = searchUserList.concat(\n selectedUserList.filter((item) => {\n const name =\n (item.type === EUserType.USER ? item.nickname : item.name) || '';\n\n return name.toUpperCase().includes(searchString.trim().toUpperCase());\n }),\n );\n\n return _.uniqBy(totalUsers, (data: IUser | IUserGroup) => {\n if (data.type === EUserType.USER) return data.userId;\n\n return data.groupId;\n }).filter((item) => {\n if (filterItem) {\n return filterItem(item);\n }\n\n return true;\n });\n }, [filterItem, searchString, searchUserList, selectedUserList]);\n\n useEffect(() => {\n if (!dropdownOpen) return;\n run();\n }, [dropdownOpen, run, searchString]);\n\n useEffect(() => {\n if (_.isEqual(value, prevValue)) {\n return;\n }\n if (Array.isArray(value) && (isUser(value[0]) || isUserGroup(value[0]))) {\n setSelectedUserList(value as TUser);\n } else if (isUser(value) || isUserGroup(value)) {\n setSelectedUserList([value]);\n } else {\n let param: Array<TUserValue | TUserGroupValue> = [];\n if (!value) return;\n if (Array.isArray(value) && value.length === 0) {\n setSelectedUserList([]);\n\n return;\n }\n if (!Array.isArray(value)) {\n param = [value];\n } else {\n param = value;\n }\n queryByIds(param).then((result) => {\n // 如果用户已被删除,则需要展示出id\n const valueNotInResult: TUser = param\n .filter((item) => {\n if (item.type === EUserType.USER) {\n return result\n .filter(isUser)\n .every((user) => user.userId !== item.userId);\n }\n\n return result\n .filter(isUserGroup)\n .every((user) => user.groupId !== item.groupId);\n })\n .map((item) => {\n if (item.type === EUserType.USER) {\n return {\n type: EUserType.USER,\n userId: item.userId,\n } as IUser;\n }\n\n return {\n type: EUserType.USER_GROUP,\n groupId: item.groupId,\n } as IUserGroup;\n });\n\n setSelectedUserList([...result, ...valueNotInResult]);\n });\n }\n }, [value, queryByIds, prevValue]);\n\n const onSelectedChange = useCallback(\n (users: TUser) => {\n if (multiple) {\n setSelectedUserList(users);\n onChange?.(users);\n } else {\n setSelectedUserList(users);\n onChange?.(users[0]);\n }\n setDropdownOpen(false);\n },\n [multiple, onChange, setDropdownOpen],\n );\n\n useEffect(() => {\n if (typeof open === 'boolean') {\n setDropdownOpen(open);\n }\n }, [open]);\n\n useEffect(() => {\n if (!dropdownContentWidth) {\n const resizeEle = triggerRef.current;\n if (!resizeEle) return;\n const resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n const { width } = entry.contentRect;\n setDropdownContentWidth(width);\n }\n });\n resizeObserver.observe(resizeEle);\n\n return () => {\n resizeObserver.unobserve(resizeEle);\n };\n }\n }, [triggerRef, dropdownContentWidth]);\n const onDropdownOpenChange = useCallback(\n (open: boolean) => {\n setDropdownOpen(open);\n onOpenChange?.(open);\n },\n [onOpenChange],\n );\n const panelKey = useMemo(() => {\n if (dropdownOpen) {\n return _.sampleSize('abcdefghijklmnopqrstuvwxyz0123456789', 8).join('');\n }\n }, [dropdownOpen]);\n const mode = useMemo(() => {\n if (multiple === true) {\n if (typeof propsMode === 'object')\n return {\n ...(propsMode || {}),\n type: 'multiple',\n responsive: _.isNil(propsMode.responsive)\n ? true\n : propsMode.responsive,\n } as Mode;\n return {\n type: 'multiple',\n responsive: true,\n } as Mode;\n }\n\n return multiple ? (multiple as Mode) : propsMode;\n }, [multiple, propsMode]);\n\n const selectOpen = typeof open === 'boolean' ? open : dropdownOpen;\n\n return (\n <Select\n prefix={propPrefix}\n {...restProps}\n size={size}\n className={cn('ald-member-picker-select', className)}\n value={selectedUserList.map((item) => {\n if (item.type === EUserType.USER_GROUP) {\n return item.groupId;\n } else {\n return item.userId;\n }\n })}\n onChange={(value) => {\n if (_.isEmpty(value)) {\n setSelectedUserList([]);\n if (multiple) {\n onChange?.([]);\n } else {\n onChange?.();\n }\n } else {\n const valueList = Array.isArray(value) ? value : [value];\n if (multiple) {\n const users = valueList\n .map((item) => {\n const user = totalUserList.find((user) => {\n if (user.type === EUserType.USER) {\n return user.userId === item;\n }\n\n return user.groupId === item;\n });\n\n return user;\n })\n .filter(Boolean) as TUser;\n setSelectedUserList(users);\n onChange?.(users);\n } else {\n const user = totalUserList.find((user) => {\n if (user.type === EUserType.USER) {\n return user.userId === value;\n }\n\n return user.groupId === value;\n });\n if (user) {\n setSelectedUserList([user]);\n onChange?.(user);\n } else {\n setSelectedUserList([]);\n onChange?.();\n }\n }\n }\n }}\n disabled={disabled}\n allowClear={allowClear}\n onClear={() => {\n setSelectedUserList([]);\n if (multiple) {\n onChange?.([]);\n } else {\n onChange?.();\n }\n onClear?.();\n }}\n popupClassName={cn(\n 'ald-member-picker-popup',\n allowOverlap && 'ald-member-picker-popup-adaptive',\n props.popupClassName,\n )}\n mode={mode}\n options={selectedUserList.map((item) => {\n if (item.type === EUserType.USER_GROUP)\n return {\n label: item.name || item.groupId,\n value: item.groupId,\n tag: (\n <div className={'ald-member-picker-tag'}>\n <Avatar type=\"team\" size={20}>\n {item.name || item.groupId}\n </Avatar>\n {item.name || item.groupId}\n </div>\n ),\n };\n\n return {\n label: item.nickname || item.name || item.userId,\n value: item.userId,\n tag: (\n <div className={'ald-member-picker-tag'}>\n <Avatar\n size={20}\n src={item.photo}\n type={item.type === EUserType.USER ? 'user' : 'team'}\n >\n {item.nickname || item.name || item.userId}\n </Avatar>\n {item.nickname || item.name || item.userId}\n </div>\n ),\n };\n })}\n optionLabelProp={multiple ? 'label' : 'tag'}\n open={selectOpen}\n onOpenChange={onDropdownOpenChange}\n popupMatchSelectWidth={panelWidth}\n allowOverlap={allowOverlap}\n placeholder={placeholder}\n dropdownRender={() => {\n return (\n <div\n ref={triggerRef}\n className={cn({\n 'ald-member-picker-popup-body': allowOverlap,\n })}\n >\n <Panel\n type={type}\n footer={footer}\n value={selectedUserList}\n dataList={totalUserList}\n lockedIds={lockedIds}\n multiple={!!multiple}\n key={panelKey}\n loading={loading}\n dropdownWidth={dropdownContentWidth}\n onSearchValueChange={onSearchValueChange}\n onChange={onSelectedChange}\n onCancel={() => {\n onCancel?.();\n setDropdownOpen(false);\n }}\n renderItem={renderItem}\n renderSelectedTag={renderSelectedTag}\n ></Panel>\n </div>\n );\n }}\n ></Select>\n );\n};\n\nconst MemberSelector = Component as React.FC<IMemberPickerProps> & {\n MemberPanel: typeof MemberPanel;\n};\n\nMemberSelector.MemberPanel = MemberPanel;\nexport default MemberSelector;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/MemberPicker/index.tsx"],"sourcesContent":["import { usePrevious, useRequest } from 'ahooks';\nimport { cn } from '../lib/utils';\nimport _ from 'lodash';\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Avatar from '../Avatar';\nimport ConfigProvider from '../ConfigProvider';\nimport './member-picker.css';\nimport {\n EUserType,\n IUser,\n IUserGroup,\n TUser,\n} from '../ConfigProvider/getUserList';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport message from '../message';\nimport Panel from './components/Panel';\nimport MemberPanel from './components/PanelWrapper';\nimport {\n EMemberPicker,\n IMemberPickerProps,\n TUserGroupValue,\n TUserValue,\n} from './interface';\nimport { isUser, isUserGroup } from './utils/getUsersWithUserId';\nimport Select from '../Select';\nimport { Mode } from '../Select/BaseSelect';\n\nconst DEFAULT_MULTIPLE_DROPDOWN_WIDTH = 480;\n\nconst Component: React.FC<IMemberPickerProps> = (props) => {\n const { locale } = useContext(LocaleContext);\n const t = getTranslator(locale);\n\n const {\n value,\n type = EMemberPicker.USER,\n onChange,\n multiple,\n dropdownWidth,\n open,\n onOpenChange,\n placeholder = t.MemberPicker.select,\n className,\n allowClear,\n disabled,\n onClear,\n size,\n prefix: propPrefix,\n lockedIds = [],\n footer,\n onCancel,\n filterItem,\n mode: propsMode,\n renderItem,\n renderSelectedTag,\n 'data-testid': dataTestId,\n 'aria-label': ariaLabel,\n ...restProps\n } = props;\n const allowOverlap = props.allowOverlap ?? false;\n const { getUsersByIds, getUsersByKeywords } = ConfigProvider.useGetUserList();\n const [selectedUserList, setSelectedUserList] = useState<TUser>([]);\n const prevValue = usePrevious(value);\n const [searchUserList, setSearchUserList] = useState<TUser>([]);\n const [searchString, setSearchString] = useState<string>('');\n const [dropdownContentWidth, setDropdownContentWidth] =\n useState(dropdownWidth);\n // 单选默认浮窗跟触发器等宽(true),调用方传 dropdownWidth 时用具体数字;\n // 多选默认 480,单条记录只有 头像+nickname 时触发器太窄装不下选中标签,故固定值。\n const panelWidth: number | boolean =\n dropdownWidth ?? (multiple ? DEFAULT_MULTIPLE_DROPDOWN_WIDTH : true);\n\n const triggerRef = useRef<HTMLDivElement>(null);\n const onSearchValueChange = useCallback((v: string) => {\n setSearchString(v);\n }, []);\n const [dropdownOpen, setDropdownOpen] = useState<boolean>(!!open);\n const queryByKeywords = useMemo(() => {\n if (getUsersByKeywords) {\n return getUsersByKeywords;\n }\n\n return (_params = {}) =>\n Promise.reject({\n message: t.MemberPicker.pleaseConfigGetUserByKeywordsMethod,\n });\n }, [getUsersByKeywords, t.MemberPicker.pleaseConfigGetUserByKeywordsMethod]);\n const queryByIds = useMemo(() => {\n if (getUsersByIds) {\n return getUsersByIds;\n }\n\n return (_params = {}) =>\n Promise.reject({\n message: t.MemberPicker.pleaseConfigGetUserByIdsMethod,\n });\n }, [getUsersByIds, t.MemberPicker.pleaseConfigGetUserByIdsMethod]);\n const { loading, run } = useRequest(() => queryByKeywords(searchString), {\n refreshDeps: [searchString],\n manual: true,\n cacheKey: 'member-selector',\n cacheTime: 1000 * 60 * 2, // 2分钟内不重复请求\n onSuccess: (result) => {\n setSearchUserList(result);\n },\n onError: (error) => {\n message.error(error.message);\n },\n });\n\n const totalUserList: TUser = useMemo(() => {\n const totalUsers = searchUserList.concat(\n selectedUserList.filter((item) => {\n const name =\n (item.type === EUserType.USER ? item.nickname : item.name) || '';\n\n return name.toUpperCase().includes(searchString.trim().toUpperCase());\n }),\n );\n\n return _.uniqBy(totalUsers, (data: IUser | IUserGroup) => {\n if (data.type === EUserType.USER) return data.userId;\n\n return data.groupId;\n }).filter((item) => {\n if (filterItem) {\n return filterItem(item);\n }\n\n return true;\n });\n }, [filterItem, searchString, searchUserList, selectedUserList]);\n\n useEffect(() => {\n if (!dropdownOpen) return;\n run();\n }, [dropdownOpen, run, searchString]);\n\n useEffect(() => {\n if (_.isEqual(value, prevValue)) {\n return;\n }\n if (Array.isArray(value) && (isUser(value[0]) || isUserGroup(value[0]))) {\n setSelectedUserList(value as TUser);\n } else if (isUser(value) || isUserGroup(value)) {\n setSelectedUserList([value]);\n } else {\n let param: Array<TUserValue | TUserGroupValue> = [];\n if (!value) return;\n if (Array.isArray(value) && value.length === 0) {\n setSelectedUserList([]);\n\n return;\n }\n if (!Array.isArray(value)) {\n param = [value];\n } else {\n param = value;\n }\n queryByIds(param).then((result) => {\n // 如果用户已被删除,则需要展示出id\n const valueNotInResult: TUser = param\n .filter((item) => {\n if (item.type === EUserType.USER) {\n return result\n .filter(isUser)\n .every((user) => user.userId !== item.userId);\n }\n\n return result\n .filter(isUserGroup)\n .every((user) => user.groupId !== item.groupId);\n })\n .map((item) => {\n if (item.type === EUserType.USER) {\n return {\n type: EUserType.USER,\n userId: item.userId,\n } as IUser;\n }\n\n return {\n type: EUserType.USER_GROUP,\n groupId: item.groupId,\n } as IUserGroup;\n });\n\n setSelectedUserList([...result, ...valueNotInResult]);\n });\n }\n }, [value, queryByIds, prevValue]);\n\n const onSelectedChange = useCallback(\n (users: TUser) => {\n if (multiple) {\n setSelectedUserList(users);\n onChange?.(users);\n } else {\n setSelectedUserList(users);\n onChange?.(users[0]);\n }\n setDropdownOpen(false);\n },\n [multiple, onChange, setDropdownOpen],\n );\n\n useEffect(() => {\n if (typeof open === 'boolean') {\n setDropdownOpen(open);\n }\n }, [open]);\n\n useEffect(() => {\n if (!dropdownContentWidth) {\n const resizeEle = triggerRef.current;\n if (!resizeEle) return;\n const resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n const { width } = entry.contentRect;\n setDropdownContentWidth(width);\n }\n });\n resizeObserver.observe(resizeEle);\n\n return () => {\n resizeObserver.unobserve(resizeEle);\n };\n }\n }, [triggerRef, dropdownContentWidth]);\n const onDropdownOpenChange = useCallback(\n (open: boolean) => {\n setDropdownOpen(open);\n onOpenChange?.(open);\n },\n [onOpenChange],\n );\n const panelKey = useMemo(() => {\n if (dropdownOpen) {\n return _.sampleSize('abcdefghijklmnopqrstuvwxyz0123456789', 8).join('');\n }\n }, [dropdownOpen]);\n const mode = useMemo(() => {\n if (multiple === true) {\n if (typeof propsMode === 'object')\n return {\n ...(propsMode || {}),\n type: 'multiple',\n responsive: _.isNil(propsMode.responsive)\n ? true\n : propsMode.responsive,\n } as Mode;\n return {\n type: 'multiple',\n responsive: true,\n } as Mode;\n }\n\n return multiple ? (multiple as Mode) : propsMode;\n }, [multiple, propsMode]);\n\n const selectOpen = typeof open === 'boolean' ? open : dropdownOpen;\n\n return (\n <Select\n prefix={propPrefix}\n {...restProps}\n data-testid={dataTestId}\n aria-label={ariaLabel}\n size={size}\n className={cn('ald-member-picker-select', className)}\n value={selectedUserList.map((item) => {\n if (item.type === EUserType.USER_GROUP) {\n return item.groupId;\n } else {\n return item.userId;\n }\n })}\n onChange={(value) => {\n if (_.isEmpty(value)) {\n setSelectedUserList([]);\n if (multiple) {\n onChange?.([]);\n } else {\n onChange?.();\n }\n } else {\n const valueList = Array.isArray(value) ? value : [value];\n if (multiple) {\n const users = valueList\n .map((item) => {\n const user = totalUserList.find((user) => {\n if (user.type === EUserType.USER) {\n return user.userId === item;\n }\n\n return user.groupId === item;\n });\n\n return user;\n })\n .filter(Boolean) as TUser;\n setSelectedUserList(users);\n onChange?.(users);\n } else {\n const user = totalUserList.find((user) => {\n if (user.type === EUserType.USER) {\n return user.userId === value;\n }\n\n return user.groupId === value;\n });\n if (user) {\n setSelectedUserList([user]);\n onChange?.(user);\n } else {\n setSelectedUserList([]);\n onChange?.();\n }\n }\n }\n }}\n disabled={disabled}\n allowClear={allowClear}\n onClear={() => {\n setSelectedUserList([]);\n if (multiple) {\n onChange?.([]);\n } else {\n onChange?.();\n }\n onClear?.();\n }}\n popupClassName={cn(\n 'ald-member-picker-popup',\n allowOverlap && 'ald-member-picker-popup-adaptive',\n props.popupClassName,\n )}\n mode={mode}\n options={selectedUserList.map((item) => {\n if (item.type === EUserType.USER_GROUP)\n return {\n label: item.name || item.groupId,\n value: item.groupId,\n tag: (\n <div className={'ald-member-picker-tag'}>\n <Avatar type=\"team\" size={20}>\n {item.name || item.groupId}\n </Avatar>\n {item.name || item.groupId}\n </div>\n ),\n };\n\n return {\n label: item.nickname || item.name || item.userId,\n value: item.userId,\n tag: (\n <div className={'ald-member-picker-tag'}>\n <Avatar\n size={20}\n src={item.photo}\n type={item.type === EUserType.USER ? 'user' : 'team'}\n >\n {item.nickname || item.name || item.userId}\n </Avatar>\n {item.nickname || item.name || item.userId}\n </div>\n ),\n };\n })}\n optionLabelProp={multiple ? 'label' : 'tag'}\n open={selectOpen}\n onOpenChange={onDropdownOpenChange}\n popupMatchSelectWidth={panelWidth}\n allowOverlap={allowOverlap}\n placeholder={placeholder}\n dropdownRender={() => {\n return (\n <div\n ref={triggerRef}\n className={cn({\n 'ald-member-picker-popup-body': allowOverlap,\n })}\n >\n <Panel\n type={type}\n footer={footer}\n value={selectedUserList}\n dataList={totalUserList}\n lockedIds={lockedIds}\n multiple={!!multiple}\n key={panelKey}\n loading={loading}\n dropdownWidth={dropdownContentWidth}\n onSearchValueChange={onSearchValueChange}\n onChange={onSelectedChange}\n onCancel={() => {\n onCancel?.();\n setDropdownOpen(false);\n }}\n renderItem={renderItem}\n renderSelectedTag={renderSelectedTag}\n ></Panel>\n </div>\n );\n }}\n ></Select>\n );\n};\n\nconst MemberSelector = Component as React.FC<IMemberPickerProps> & {\n MemberPanel: typeof MemberPanel;\n};\n\nMemberSelector.MemberPanel = MemberPanel;\nexport default MemberSelector;\n"],"mappings":"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"}
|
package/dist/Modal/index.d.ts
CHANGED
|
@@ -23,6 +23,10 @@ export interface ModalProps {
|
|
|
23
23
|
centered?: boolean;
|
|
24
24
|
destroyOnClose?: boolean;
|
|
25
25
|
className?: string;
|
|
26
|
+
/** Pass through to the modal content root for automated testing. */
|
|
27
|
+
'data-testid'?: string;
|
|
28
|
+
/** Pass through to the modal content root for accessibility and automated testing. */
|
|
29
|
+
'aria-label'?: string;
|
|
26
30
|
/** Applied to the outer wrap layer (matches antd wrapClassName behavior) */
|
|
27
31
|
wrapClassName?: string;
|
|
28
32
|
style?: React.CSSProperties;
|
package/dist/Modal/index.js
CHANGED
|
@@ -55,7 +55,7 @@ function getIcon(type) {
|
|
|
55
55
|
function OriginModal(props) {
|
|
56
56
|
const { locale } = useContext(LocaleContext);
|
|
57
57
|
const t = getTranslator(locale);
|
|
58
|
-
const { className, children, okType = "primary", width, closeIcon, subTitle, okButtonProps = {}, cancelButtonProps = {}, okText = t.Modal.sure, cancelText = t.Modal.cancel, icon, title, paddingLess, responsiveBounds, hideHeaderBottomBorder, virtualScrollBar, style, maskClosable = false, fullscreen, open = false, onOk, onCancel, footer, confirmLoading, closable = true, zIndex = 1e3, bodyStyle, keyboard = true, afterOpenChange, wrapClassName, _modalType } = props;
|
|
58
|
+
const { className, "data-testid": dataTestId, "aria-label": ariaLabel, children, okType = "primary", width, closeIcon, subTitle, okButtonProps = {}, cancelButtonProps = {}, okText = t.Modal.sure, cancelText = t.Modal.cancel, icon, title, paddingLess, responsiveBounds, hideHeaderBottomBorder, virtualScrollBar, style, maskClosable = false, fullscreen, open = false, onOk, onCancel, footer, confirmLoading, closable = true, zIndex = 1e3, bodyStyle, keyboard = true, afterOpenChange, wrapClassName, _modalType } = props;
|
|
59
59
|
const prevOpenRef = useRef(open);
|
|
60
60
|
const contentRef = useRef(null);
|
|
61
61
|
useEffect(() => {
|
|
@@ -151,6 +151,8 @@ function OriginModal(props) {
|
|
|
151
151
|
className: cn("ald-modal-wrap ant-modal-wrap tw-pointer-events-none tw-fixed tw-inset-0 tw-flex tw-items-center tw-justify-center", wrapClassName),
|
|
152
152
|
style: { zIndex: contentZIndex },
|
|
153
153
|
children: /* @__PURE__ */ jsx(DialogPrimitive.Content, {
|
|
154
|
+
"data-testid": dataTestId,
|
|
155
|
+
"aria-label": ariaLabel,
|
|
154
156
|
className: cn("ald-modal ant-modal tw-pointer-events-auto tw-box-border tw-flex tw-flex-col tw-overflow-hidden tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-shadow-[var(--elevation-bottom-bottom-lg)] tw-outline-none", fullscreen ? "ald-modal-fullscreen tw-fixed tw-inset-0 tw-size-full tw-rounded-none" : "tw-rounded-r-75", !fullscreen && "tw-border tw-border-solid tw-border-[var(--border-default)]", paddingLess && "ald-modal-padding-less", virtualScrollBar && "ald-modal-virtual-scroll-bar", hideHeaderBottomBorder && "ald-modal-hide-header-bottom-border", responsiveBounds && "ald-modal-responsive-bounds", className),
|
|
155
157
|
style: {
|
|
156
158
|
...fullscreen ? {} : {
|
package/dist/Modal/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/Modal/index.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { hideOthers } from 'aria-hidden';\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { createRoot } from 'react-dom/client';\nimport Button, { ButtonType, IButtonProps } from '../Button';\nimport {\n AttentionTriangleLightLine,\n CheckCircleLightLine,\n CloseLLine,\n InformationCircleLightLine,\n} from '../Icon';\nimport IconButton from '../IconButton';\nimport ScrollArea from '../ScrollArea';\nimport {\n FloatingLayerProvider,\n useFloatingLayer,\n} from '../_utils/floatingLayer';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport { cn } from '../lib/utils';\n\nexport const destroyFns: Array<() => void> = [];\n\nexport interface ModalProps {\n open?: boolean;\n onOk?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n onCancel?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n afterClose?: () => void;\n title?: React.ReactNode;\n subTitle?: React.ReactNode;\n icon?: React.ReactElement;\n width?: number | string;\n footer?: React.ReactNode | null;\n okText?: React.ReactNode;\n cancelText?: React.ReactNode;\n okButtonProps?: IButtonProps;\n cancelButtonProps?: IButtonProps;\n okType?: ButtonType;\n confirmLoading?: boolean;\n maskClosable?: boolean;\n closable?: boolean;\n closeIcon?: React.ReactNode;\n centered?: boolean;\n destroyOnClose?: boolean;\n className?: string;\n /** Applied to the outer wrap layer (matches antd wrapClassName behavior) */\n wrapClassName?: string;\n style?: React.CSSProperties;\n bodyStyle?: React.CSSProperties;\n zIndex?: number;\n children?: React.ReactNode;\n paddingLess?: boolean;\n virtualScrollBar?: boolean;\n hideHeaderBottomBorder?: boolean;\n responsiveBounds?: boolean;\n fullscreen?: boolean;\n keyboard?: boolean;\n afterOpenChange?: (open: boolean) => void;\n getContainer?: (() => HTMLElement) | false;\n /** @internal used by static methods to pass modal type for icon styling */\n _modalType?: string;\n}\n\nexport interface ModalFuncProps {\n title?: React.ReactNode;\n subTitle?: React.ReactNode;\n content?: React.ReactNode;\n icon?: React.ReactElement;\n okText?: React.ReactNode;\n cancelText?: React.ReactNode;\n okButtonProps?: IButtonProps;\n cancelButtonProps?: IButtonProps;\n okType?: ButtonType;\n onOk?: (...args: any[]) => any;\n onCancel?: (...args: any[]) => any;\n width?: number | string;\n className?: string;\n /** @deprecated Use `className` instead. Preserved for antd v4 compat. */\n wrapClassName?: string;\n closable?: boolean;\n type?: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm';\n centered?: boolean;\n maskClosable?: boolean;\n}\n\nconst DEFAULT_WIDTH = 552;\n\nconst ModalTitle = (\n { icon, title, subTitle }: Pick<ModalProps, 'icon' | 'title' | 'subTitle'>,\n type?: string,\n) => (\n <div className=\"ald-modal-title-container tw-flex tw-items-center tw-gap-4\">\n {icon && (\n <div\n className={cn(\n 'ald-modal-icon-container tw-grid tw-size-10 tw-shrink-0 tw-place-items-center tw-rounded-[var(--global-grid-250)]',\n type === 'info' &&\n 'ald-modal-cion-info-container tw-bg-[var(--action-primary-subtle-hover)]',\n type === 'success' &&\n 'ald-modal-cion-success-container tw-bg-[var(--background-positive-muted)]',\n type === 'warning' &&\n 'ald-modal-cion-warning-container tw-bg-[var(--background-warning-muted)]',\n type === 'warn' &&\n 'ald-modal-cion-warning-container tw-bg-[var(--background-warning-muted)]',\n type === 'error' &&\n 'ald-modal-cion-error-container tw-bg-[var(--background-negative-muted)]',\n type === 'confirm' &&\n 'ald-modal-cion-confirm-container tw-bg-[var(--action-primary-subtle-hover)]',\n )}\n >\n {icon}\n </div>\n )}\n <div className=\"ald-modal-text-container\">\n {title && (\n <div\n className={cn(\n 'ald-modal-text-title tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--alias-colors-text-strong)]',\n !subTitle && 'ald-modal-text-title-only tw-text-xl',\n )}\n >\n {title}\n </div>\n )}\n {subTitle && (\n <div className=\"ald-modal-text-sub-title tw-mt-1 tw-text-xs tw-leading-4 tw-text-[var(--alias-colors-text-subtle)]\">\n {subTitle}\n </div>\n )}\n </div>\n </div>\n);\n\nfunction getIcon(\n type: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm',\n) {\n if (type === 'success')\n return (\n <CheckCircleLightLine\n fill=\"var(--content-inverted-primary)\"\n color=\"var(--background-positive-strong)\"\n size={24}\n />\n );\n if (type === 'error')\n return (\n <AttentionTriangleLightLine\n color=\"var(--background-negative-strong)\"\n fill=\"var(--content-inverted-primary)\"\n size={24}\n />\n );\n if (type === 'warning' || type === 'warn')\n return (\n <AttentionTriangleLightLine\n color=\"var(--background-warning-strong)\"\n size={24}\n />\n );\n return (\n <InformationCircleLightLine\n size={24}\n color=\"var(--interaction-default-normal)\"\n />\n );\n}\n\nfunction OriginModal(props: ModalProps) {\n const { locale } = useContext(LocaleContext);\n const t = getTranslator(locale);\n const {\n className,\n children,\n okType = 'primary',\n width,\n closeIcon,\n subTitle,\n okButtonProps = {},\n cancelButtonProps = {},\n okText = t.Modal.sure,\n cancelText = t.Modal.cancel,\n icon,\n title,\n paddingLess,\n responsiveBounds,\n hideHeaderBottomBorder,\n virtualScrollBar,\n style,\n maskClosable = false,\n fullscreen,\n open = false,\n onOk,\n onCancel,\n footer,\n confirmLoading,\n closable = true,\n zIndex = 1000,\n bodyStyle,\n keyboard = true,\n afterOpenChange,\n wrapClassName,\n _modalType,\n } = props;\n\n const prevOpenRef = useRef(open);\n const contentRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (prevOpenRef.current !== open) {\n prevOpenRef.current = open;\n afterOpenChange?.(open);\n }\n }, [open, afterOpenChange]);\n\n // ---- modal={false} 补偿:锁定背景滚动 ----\n useEffect(() => {\n if (!open) return;\n const prev = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n return () => {\n document.body.style.overflow = prev;\n };\n }, [open]);\n\n // ---- modal={false} 补偿:aria-hidden(屏幕阅读器只感知弹窗) ----\n useEffect(() => {\n if (!open || !contentRef.current) return;\n return hideOthers(contentRef.current);\n }, [open]);\n\n // ---- modal={false} 补偿:Tab 焦点循环 ----\n useEffect(() => {\n if (!open || !contentRef.current) return;\n const container = contentRef.current;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key !== 'Tab') return;\n const focusable = container.querySelectorAll<HTMLElement>(\n 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n );\n if (focusable.length === 0) return;\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n\n if (e.shiftKey) {\n if (\n document.activeElement === first ||\n !container.contains(document.activeElement)\n ) {\n e.preventDefault();\n last.focus();\n }\n } else {\n if (\n document.activeElement === last ||\n !container.contains(document.activeElement)\n ) {\n e.preventDefault();\n first.focus();\n }\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [open]);\n\n const responsiveBoundsStyle = useMemo(() => {\n if (!responsiveBounds) return {};\n return {\n width: 'calc(100% - 160px)',\n maxWidth: '1680px',\n minWidth: '1280px',\n height: 'calc(100% - 48px)',\n maxHeight: '900px',\n minHeight: '640px',\n };\n }, [responsiveBounds]);\n\n const mergedOkProps = { loading: confirmLoading, ...okButtonProps };\n const { maskZIndex, contentZIndex, nextLevel } = useFloatingLayer(zIndex);\n\n const renderFooter = () => {\n if (footer === null) return null;\n if (footer)\n return (\n // antd 兼容:antd .ant-modal-footer 使用 text-align:right 让 inline 按钮右对齐,\n // 即使消费方传入 width:100% 的子容器,内部 inline 元素仍能右对齐。\n // 此处同时使用 tw-flex tw-justify-end(flexbox 对齐)和 tw-text-right(继承式对齐)保持兼容。\n <div className=\"ald-modal-footer ant-modal-footer tw-flex tw-items-center tw-justify-end tw-gap-2 tw-border-t tw-border-solid tw-border-[var(--global-cool-grey-100)] tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-px-6 tw-py-3 tw-text-right\">\n {footer}\n </div>\n );\n return (\n <div className=\"ald-modal-footer ant-modal-footer tw-flex tw-justify-end tw-gap-2 tw-border-t tw-border-solid tw-border-[var(--border-default)] tw-px-6 tw-py-4\">\n <Button\n type=\"secondary\"\n size=\"middle\"\n {...cancelButtonProps}\n onClick={onCancel}\n >\n {cancelText}\n </Button>\n <Button type={okType} size=\"middle\" {...mergedOkProps} onClick={onOk}>\n {okText}\n </Button>\n </div>\n );\n };\n\n return (\n <DialogPrimitive.Root open={open} modal={false}>\n <DialogPrimitive.Portal>\n {/* modal={false} 时 DialogPrimitive.Overlay 不渲染,用普通 div 替代 */}\n <div\n className=\"ald-modal-mask tw-animate-in tw-fade-in-0 tw-fixed tw-inset-0 tw-bg-black/45\"\n style={{ zIndex: maskZIndex }}\n onPointerDown={() => {\n if (maskClosable) {\n onCancel?.({} as React.MouseEvent<HTMLButtonElement>);\n }\n }}\n />\n {/* Centering wrapper — replaces transform centering so consumer CSS (top/left overrides) works */}\n <div\n ref={contentRef}\n className={cn(\n // antd 兼容:保留 ant-modal-wrap class,消费方 CSS 通过 wrapClassName + :global(.ant-modal) 控制弹窗宽高\n 'ald-modal-wrap ant-modal-wrap tw-pointer-events-none tw-fixed tw-inset-0 tw-flex tw-items-center tw-justify-center',\n wrapClassName,\n )}\n style={{ zIndex: contentZIndex }}\n >\n <DialogPrimitive.Content\n className={cn(\n // antd 兼容:保留 ant-modal class,消费方 CSS 通过 .ant-modal 选择器控制弹窗宽高等样式\n // tw-outline-none:Radix 打开时会聚焦 Content,不抑制 outline 会渲染出蓝色焦点框\n 'ald-modal ant-modal tw-pointer-events-auto tw-box-border tw-flex tw-flex-col tw-overflow-hidden tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-shadow-[var(--elevation-bottom-bottom-lg)] tw-outline-none',\n fullscreen\n ? 'ald-modal-fullscreen tw-fixed tw-inset-0 tw-size-full tw-rounded-none'\n : 'tw-rounded-r-75',\n !fullscreen &&\n 'tw-border tw-border-solid tw-border-[var(--border-default)]',\n paddingLess && 'ald-modal-padding-less',\n virtualScrollBar && 'ald-modal-virtual-scroll-bar',\n hideHeaderBottomBorder && 'ald-modal-hide-header-bottom-border',\n responsiveBounds && 'ald-modal-responsive-bounds',\n className,\n )}\n style={{\n ...(fullscreen\n ? {}\n : {\n width: responsiveBounds\n ? responsiveBoundsStyle.width\n : width || DEFAULT_WIDTH,\n ...responsiveBoundsStyle,\n }),\n ...style,\n }}\n onEscapeKeyDown={(e) => {\n if (keyboard) {\n onCancel?.({} as React.MouseEvent<HTMLButtonElement>);\n } else {\n e.preventDefault();\n }\n }}\n onPointerDownOutside={(e) => {\n if (maskClosable) {\n onCancel?.({} as React.MouseEvent<HTMLButtonElement>);\n } else {\n e.preventDefault();\n }\n }}\n onInteractOutside={(e) => {\n if (!maskClosable) {\n e.preventDefault();\n }\n }}\n >\n {/* ant-modal-content compat wrapper — matches antd DOM nesting for consumer CSS */}\n <div className=\"ant-modal-content tw-flex tw-h-full tw-flex-col\">\n <FloatingLayerProvider value={nextLevel}>\n {!fullscreen && (\n <div\n className={cn(\n 'ald-modal-header ant-modal-header tw-flex tw-items-start tw-justify-between tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-px-6 tw-py-4',\n !hideHeaderBottomBorder &&\n 'tw-border-b tw-border-solid tw-border-[var(--global-cool-grey-100)]',\n )}\n >\n <DialogPrimitive.Title asChild>\n <div className=\"tw-flex-1\">\n {ModalTitle({ icon, title, subTitle }, _modalType)}\n </div>\n </DialogPrimitive.Title>\n {closable && (\n <DialogPrimitive.Close asChild>\n <span className=\"ant-modal-close\" onClick={onCancel}>\n {closeIcon || (\n <IconButton\n icon={<CloseLLine size={20} />}\n size=\"middle\"\n />\n )}\n </span>\n </DialogPrimitive.Close>\n )}\n </div>\n )}\n {/* Hidden title for accessibility when fullscreen hides the header */}\n {fullscreen && (\n <DialogPrimitive.Title className=\"tw-sr-only\">\n {title}\n </DialogPrimitive.Title>\n )}\n <div\n className={cn(\n 'ald-modal-body ant-modal-body tw-flex-1 tw-text-sm tw-leading-5',\n fullscreen\n ? 'tw-h-full tw-overflow-hidden tw-p-0'\n : 'tw-min-h-[130px]',\n !fullscreen &&\n (virtualScrollBar\n ? 'tw-overflow-hidden tw-p-0'\n : 'tw-overflow-auto'),\n !fullscreen &&\n !responsiveBounds &&\n !virtualScrollBar &&\n 'tw-max-h-[68vh]',\n !fullscreen &&\n !paddingLess &&\n !virtualScrollBar &&\n 'tw-p-6',\n )}\n style={bodyStyle}\n >\n {virtualScrollBar ? (\n <ScrollArea\n className=\"ald-modal-body-wrap !tw-h-auto\"\n innerClassName={cn(\n 'ald-modal-body-wrap-inner tw-max-h-[68vh]',\n paddingLess ? 'tw-p-0' : 'tw-px-[23px] tw-py-0',\n )}\n >\n {children}\n </ScrollArea>\n ) : (\n children\n )}\n </div>\n {!fullscreen && renderFooter()}\n </FloatingLayerProvider>\n </div>\n </DialogPrimitive.Content>\n </div>\n </DialogPrimitive.Portal>\n </DialogPrimitive.Root>\n );\n}\n\n// Static method helper\nfunction createStaticModal(\n type: ModalFuncProps['type'],\n props: ModalFuncProps,\n) {\n const container = document.createElement('div');\n document.body.appendChild(container);\n const root = createRoot(container);\n\n let currentProps = { ...props };\n\n const destroy = () => {\n root.unmount();\n container.remove();\n const idx = destroyFns.indexOf(destroy);\n if (idx >= 0) destroyFns.splice(idx, 1);\n };\n\n const update = (newProps: Partial<ModalFuncProps>) => {\n currentProps = { ...currentProps, ...newProps };\n render(currentProps);\n };\n\n const isConfirm = type === 'confirm';\n\n const render = (p: ModalFuncProps) => {\n const handleOk = () => {\n p.onOk?.();\n destroy();\n };\n const handleCancel = () => {\n p.onCancel?.();\n destroy();\n };\n\n root.render(\n <OriginModal\n open={true}\n title={p.title}\n subTitle={p.subTitle}\n icon={p.icon || getIcon(type || 'info')}\n onOk={handleOk}\n onCancel={handleCancel}\n okText={p.okText}\n cancelText={p.cancelText}\n okButtonProps={p.okButtonProps}\n cancelButtonProps={p.cancelButtonProps}\n okType={p.okType || (isConfirm ? 'dangerous' : 'primary')}\n width={p.width || DEFAULT_WIDTH}\n className={cn('ald-modal', p.className)}\n closable={p.closable}\n maskClosable={p.maskClosable}\n _modalType={type}\n footer={\n isConfirm ? undefined : (\n <Button\n type=\"primary\"\n size=\"middle\"\n {...(p.okButtonProps || {})}\n onClick={handleOk}\n >\n {p.okText || 'OK'}\n </Button>\n )\n }\n >\n {p.content}\n </OriginModal>,\n );\n };\n\n destroyFns.push(destroy);\n render(currentProps);\n\n return { destroy, update };\n}\n\n// Attach static methods\ntype ModalFunc = (props: ModalFuncProps) => {\n destroy: () => void;\n update: (props: Partial<ModalFuncProps>) => void;\n};\n\n// ---------- useModal hook ----------\n\ninterface ModalInstance {\n id: number;\n type: ModalFuncProps['type'];\n props: ModalFuncProps;\n open: boolean;\n}\n\nexport interface ModalApiInstance {\n destroy: () => void;\n update: (newProps: Partial<ModalFuncProps>) => void;\n}\n\nexport interface ModalStaticFunctions {\n info: (props: ModalFuncProps) => ModalApiInstance;\n success: (props: ModalFuncProps) => ModalApiInstance;\n error: (props: ModalFuncProps) => ModalApiInstance;\n warning: (props: ModalFuncProps) => ModalApiInstance;\n confirm: (props: ModalFuncProps) => ModalApiInstance;\n}\n\nfunction useModal(): [ModalStaticFunctions, React.ReactElement] {\n const [modals, setModals] = useState<ModalInstance[]>([]);\n const idCounter = useRef(0);\n\n const removeModal = useCallback((id: number) => {\n setModals((prev) =>\n prev.map((m) => (m.id === id ? { ...m, open: false } : m)),\n );\n // Remove from DOM after animation\n setTimeout(() => {\n setModals((prev) => prev.filter((m) => m.id !== id));\n }, 300);\n }, []);\n\n const updateModal = useCallback(\n (id: number, newProps: Partial<ModalFuncProps>) => {\n setModals((prev) =>\n prev.map((m) =>\n m.id === id ? { ...m, props: { ...m.props, ...newProps } } : m,\n ),\n );\n },\n [],\n );\n\n const openModal = useCallback(\n (type: ModalFuncProps['type'], props: ModalFuncProps): ModalApiInstance => {\n const id = ++idCounter.current;\n const instance: ModalInstance = { id, type, props, open: true };\n setModals((prev) => [...prev, instance]);\n\n return {\n destroy: () => removeModal(id),\n update: (newProps: Partial<ModalFuncProps>) =>\n updateModal(id, newProps),\n };\n },\n [removeModal, updateModal],\n );\n\n const api = useMemo<ModalStaticFunctions>(\n () => ({\n info: (props) => openModal('info', props),\n success: (props) => openModal('success', props),\n error: (props) => openModal('error', props),\n warning: (props) => openModal('warning', props),\n confirm: (props) =>\n openModal('confirm', { ...props, type: props.type || 'confirm' }),\n }),\n [openModal],\n );\n\n const contextHolder = (\n <>\n {modals.map((m) => {\n const isConfirmType = m.type === 'confirm';\n const handleOk = () => {\n m.props.onOk?.();\n removeModal(m.id);\n };\n const handleCancel = () => {\n m.props.onCancel?.();\n removeModal(m.id);\n };\n return (\n <OriginModal\n key={m.id}\n open={m.open}\n title={m.props.title}\n subTitle={m.props.subTitle}\n icon={m.props.icon || getIcon(m.type || 'info')}\n onOk={handleOk}\n onCancel={handleCancel}\n okText={m.props.okText}\n cancelText={m.props.cancelText}\n okButtonProps={m.props.okButtonProps}\n cancelButtonProps={m.props.cancelButtonProps}\n okType={m.props.okType || (isConfirmType ? 'dangerous' : 'primary')}\n width={m.props.width || DEFAULT_WIDTH}\n className={cn('ald-modal', m.props.className)}\n closable={m.props.closable}\n maskClosable={m.props.maskClosable}\n _modalType={m.type}\n footer={\n isConfirmType ? undefined : (\n <Button\n type=\"primary\"\n size=\"middle\"\n {...(m.props.okButtonProps || {})}\n onClick={handleOk}\n >\n {m.props.okText || 'OK'}\n </Button>\n )\n }\n >\n {m.props.content}\n </OriginModal>\n );\n })}\n </>\n );\n\n return [api, contextHolder];\n}\n\n// ---------- end useModal ----------\n\nconst Modal = OriginModal as typeof OriginModal & {\n info: ModalFunc;\n success: ModalFunc;\n error: ModalFunc;\n warning: ModalFunc;\n confirm: ModalFunc;\n destroyAll: () => void;\n useModal: typeof useModal;\n config: (config: any) => void;\n};\n\nModal.info = (props) => createStaticModal('info', props);\nModal.success = (props) => createStaticModal('success', props);\nModal.error = (props) => createStaticModal('error', props);\nModal.warning = (props) => createStaticModal('warning', props);\nModal.confirm = (props) =>\n createStaticModal('confirm', { ...props, type: props.type || 'confirm' });\n\nModal.destroyAll = () => {\n while (destroyFns.length) {\n const close = destroyFns.pop();\n if (close) close();\n }\n};\n\nModal.useModal = useModal;\nModal.config = () => {};\n\nexport default Modal;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/Modal/index.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { hideOthers } from 'aria-hidden';\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { createRoot } from 'react-dom/client';\nimport Button, { ButtonType, IButtonProps } from '../Button';\nimport {\n AttentionTriangleLightLine,\n CheckCircleLightLine,\n CloseLLine,\n InformationCircleLightLine,\n} from '../Icon';\nimport IconButton from '../IconButton';\nimport ScrollArea from '../ScrollArea';\nimport {\n FloatingLayerProvider,\n useFloatingLayer,\n} from '../_utils/floatingLayer';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport { cn } from '../lib/utils';\n\nexport const destroyFns: Array<() => void> = [];\n\nexport interface ModalProps {\n open?: boolean;\n onOk?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n onCancel?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n afterClose?: () => void;\n title?: React.ReactNode;\n subTitle?: React.ReactNode;\n icon?: React.ReactElement;\n width?: number | string;\n footer?: React.ReactNode | null;\n okText?: React.ReactNode;\n cancelText?: React.ReactNode;\n okButtonProps?: IButtonProps;\n cancelButtonProps?: IButtonProps;\n okType?: ButtonType;\n confirmLoading?: boolean;\n maskClosable?: boolean;\n closable?: boolean;\n closeIcon?: React.ReactNode;\n centered?: boolean;\n destroyOnClose?: boolean;\n className?: string;\n /** Pass through to the modal content root for automated testing. */\n 'data-testid'?: string;\n /** Pass through to the modal content root for accessibility and automated testing. */\n 'aria-label'?: string;\n /** Applied to the outer wrap layer (matches antd wrapClassName behavior) */\n wrapClassName?: string;\n style?: React.CSSProperties;\n bodyStyle?: React.CSSProperties;\n zIndex?: number;\n children?: React.ReactNode;\n paddingLess?: boolean;\n virtualScrollBar?: boolean;\n hideHeaderBottomBorder?: boolean;\n responsiveBounds?: boolean;\n fullscreen?: boolean;\n keyboard?: boolean;\n afterOpenChange?: (open: boolean) => void;\n getContainer?: (() => HTMLElement) | false;\n /** @internal used by static methods to pass modal type for icon styling */\n _modalType?: string;\n}\n\nexport interface ModalFuncProps {\n title?: React.ReactNode;\n subTitle?: React.ReactNode;\n content?: React.ReactNode;\n icon?: React.ReactElement;\n okText?: React.ReactNode;\n cancelText?: React.ReactNode;\n okButtonProps?: IButtonProps;\n cancelButtonProps?: IButtonProps;\n okType?: ButtonType;\n onOk?: (...args: any[]) => any;\n onCancel?: (...args: any[]) => any;\n width?: number | string;\n className?: string;\n /** @deprecated Use `className` instead. Preserved for antd v4 compat. */\n wrapClassName?: string;\n closable?: boolean;\n type?: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm';\n centered?: boolean;\n maskClosable?: boolean;\n}\n\nconst DEFAULT_WIDTH = 552;\n\nconst ModalTitle = (\n { icon, title, subTitle }: Pick<ModalProps, 'icon' | 'title' | 'subTitle'>,\n type?: string,\n) => (\n <div className=\"ald-modal-title-container tw-flex tw-items-center tw-gap-4\">\n {icon && (\n <div\n className={cn(\n 'ald-modal-icon-container tw-grid tw-size-10 tw-shrink-0 tw-place-items-center tw-rounded-[var(--global-grid-250)]',\n type === 'info' &&\n 'ald-modal-cion-info-container tw-bg-[var(--action-primary-subtle-hover)]',\n type === 'success' &&\n 'ald-modal-cion-success-container tw-bg-[var(--background-positive-muted)]',\n type === 'warning' &&\n 'ald-modal-cion-warning-container tw-bg-[var(--background-warning-muted)]',\n type === 'warn' &&\n 'ald-modal-cion-warning-container tw-bg-[var(--background-warning-muted)]',\n type === 'error' &&\n 'ald-modal-cion-error-container tw-bg-[var(--background-negative-muted)]',\n type === 'confirm' &&\n 'ald-modal-cion-confirm-container tw-bg-[var(--action-primary-subtle-hover)]',\n )}\n >\n {icon}\n </div>\n )}\n <div className=\"ald-modal-text-container\">\n {title && (\n <div\n className={cn(\n 'ald-modal-text-title tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--alias-colors-text-strong)]',\n !subTitle && 'ald-modal-text-title-only tw-text-xl',\n )}\n >\n {title}\n </div>\n )}\n {subTitle && (\n <div className=\"ald-modal-text-sub-title tw-mt-1 tw-text-xs tw-leading-4 tw-text-[var(--alias-colors-text-subtle)]\">\n {subTitle}\n </div>\n )}\n </div>\n </div>\n);\n\nfunction getIcon(\n type: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm',\n) {\n if (type === 'success')\n return (\n <CheckCircleLightLine\n fill=\"var(--content-inverted-primary)\"\n color=\"var(--background-positive-strong)\"\n size={24}\n />\n );\n if (type === 'error')\n return (\n <AttentionTriangleLightLine\n color=\"var(--background-negative-strong)\"\n fill=\"var(--content-inverted-primary)\"\n size={24}\n />\n );\n if (type === 'warning' || type === 'warn')\n return (\n <AttentionTriangleLightLine\n color=\"var(--background-warning-strong)\"\n size={24}\n />\n );\n return (\n <InformationCircleLightLine\n size={24}\n color=\"var(--interaction-default-normal)\"\n />\n );\n}\n\nfunction OriginModal(props: ModalProps) {\n const { locale } = useContext(LocaleContext);\n const t = getTranslator(locale);\n const {\n className,\n 'data-testid': dataTestId,\n 'aria-label': ariaLabel,\n children,\n okType = 'primary',\n width,\n closeIcon,\n subTitle,\n okButtonProps = {},\n cancelButtonProps = {},\n okText = t.Modal.sure,\n cancelText = t.Modal.cancel,\n icon,\n title,\n paddingLess,\n responsiveBounds,\n hideHeaderBottomBorder,\n virtualScrollBar,\n style,\n maskClosable = false,\n fullscreen,\n open = false,\n onOk,\n onCancel,\n footer,\n confirmLoading,\n closable = true,\n zIndex = 1000,\n bodyStyle,\n keyboard = true,\n afterOpenChange,\n wrapClassName,\n _modalType,\n } = props;\n\n const prevOpenRef = useRef(open);\n const contentRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (prevOpenRef.current !== open) {\n prevOpenRef.current = open;\n afterOpenChange?.(open);\n }\n }, [open, afterOpenChange]);\n\n // ---- modal={false} 补偿:锁定背景滚动 ----\n useEffect(() => {\n if (!open) return;\n const prev = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n return () => {\n document.body.style.overflow = prev;\n };\n }, [open]);\n\n // ---- modal={false} 补偿:aria-hidden(屏幕阅读器只感知弹窗) ----\n useEffect(() => {\n if (!open || !contentRef.current) return;\n return hideOthers(contentRef.current);\n }, [open]);\n\n // ---- modal={false} 补偿:Tab 焦点循环 ----\n useEffect(() => {\n if (!open || !contentRef.current) return;\n const container = contentRef.current;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key !== 'Tab') return;\n const focusable = container.querySelectorAll<HTMLElement>(\n 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n );\n if (focusable.length === 0) return;\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n\n if (e.shiftKey) {\n if (\n document.activeElement === first ||\n !container.contains(document.activeElement)\n ) {\n e.preventDefault();\n last.focus();\n }\n } else {\n if (\n document.activeElement === last ||\n !container.contains(document.activeElement)\n ) {\n e.preventDefault();\n first.focus();\n }\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [open]);\n\n const responsiveBoundsStyle = useMemo(() => {\n if (!responsiveBounds) return {};\n return {\n width: 'calc(100% - 160px)',\n maxWidth: '1680px',\n minWidth: '1280px',\n height: 'calc(100% - 48px)',\n maxHeight: '900px',\n minHeight: '640px',\n };\n }, [responsiveBounds]);\n\n const mergedOkProps = { loading: confirmLoading, ...okButtonProps };\n const { maskZIndex, contentZIndex, nextLevel } = useFloatingLayer(zIndex);\n\n const renderFooter = () => {\n if (footer === null) return null;\n if (footer)\n return (\n // antd 兼容:antd .ant-modal-footer 使用 text-align:right 让 inline 按钮右对齐,\n // 即使消费方传入 width:100% 的子容器,内部 inline 元素仍能右对齐。\n // 此处同时使用 tw-flex tw-justify-end(flexbox 对齐)和 tw-text-right(继承式对齐)保持兼容。\n <div className=\"ald-modal-footer ant-modal-footer tw-flex tw-items-center tw-justify-end tw-gap-2 tw-border-t tw-border-solid tw-border-[var(--global-cool-grey-100)] tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-px-6 tw-py-3 tw-text-right\">\n {footer}\n </div>\n );\n return (\n <div className=\"ald-modal-footer ant-modal-footer tw-flex tw-justify-end tw-gap-2 tw-border-t tw-border-solid tw-border-[var(--border-default)] tw-px-6 tw-py-4\">\n <Button\n type=\"secondary\"\n size=\"middle\"\n {...cancelButtonProps}\n onClick={onCancel}\n >\n {cancelText}\n </Button>\n <Button type={okType} size=\"middle\" {...mergedOkProps} onClick={onOk}>\n {okText}\n </Button>\n </div>\n );\n };\n\n return (\n <DialogPrimitive.Root open={open} modal={false}>\n <DialogPrimitive.Portal>\n {/* modal={false} 时 DialogPrimitive.Overlay 不渲染,用普通 div 替代 */}\n <div\n className=\"ald-modal-mask tw-animate-in tw-fade-in-0 tw-fixed tw-inset-0 tw-bg-black/45\"\n style={{ zIndex: maskZIndex }}\n onPointerDown={() => {\n if (maskClosable) {\n onCancel?.({} as React.MouseEvent<HTMLButtonElement>);\n }\n }}\n />\n {/* Centering wrapper — replaces transform centering so consumer CSS (top/left overrides) works */}\n <div\n ref={contentRef}\n className={cn(\n // antd 兼容:保留 ant-modal-wrap class,消费方 CSS 通过 wrapClassName + :global(.ant-modal) 控制弹窗宽高\n 'ald-modal-wrap ant-modal-wrap tw-pointer-events-none tw-fixed tw-inset-0 tw-flex tw-items-center tw-justify-center',\n wrapClassName,\n )}\n style={{ zIndex: contentZIndex }}\n >\n <DialogPrimitive.Content\n data-testid={dataTestId}\n aria-label={ariaLabel}\n className={cn(\n // antd 兼容:保留 ant-modal class,消费方 CSS 通过 .ant-modal 选择器控制弹窗宽高等样式\n // tw-outline-none:Radix 打开时会聚焦 Content,不抑制 outline 会渲染出蓝色焦点框\n 'ald-modal ant-modal tw-pointer-events-auto tw-box-border tw-flex tw-flex-col tw-overflow-hidden tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-shadow-[var(--elevation-bottom-bottom-lg)] tw-outline-none',\n fullscreen\n ? 'ald-modal-fullscreen tw-fixed tw-inset-0 tw-size-full tw-rounded-none'\n : 'tw-rounded-r-75',\n !fullscreen &&\n 'tw-border tw-border-solid tw-border-[var(--border-default)]',\n paddingLess && 'ald-modal-padding-less',\n virtualScrollBar && 'ald-modal-virtual-scroll-bar',\n hideHeaderBottomBorder && 'ald-modal-hide-header-bottom-border',\n responsiveBounds && 'ald-modal-responsive-bounds',\n className,\n )}\n style={{\n ...(fullscreen\n ? {}\n : {\n width: responsiveBounds\n ? responsiveBoundsStyle.width\n : width || DEFAULT_WIDTH,\n ...responsiveBoundsStyle,\n }),\n ...style,\n }}\n onEscapeKeyDown={(e) => {\n if (keyboard) {\n onCancel?.({} as React.MouseEvent<HTMLButtonElement>);\n } else {\n e.preventDefault();\n }\n }}\n onPointerDownOutside={(e) => {\n if (maskClosable) {\n onCancel?.({} as React.MouseEvent<HTMLButtonElement>);\n } else {\n e.preventDefault();\n }\n }}\n onInteractOutside={(e) => {\n if (!maskClosable) {\n e.preventDefault();\n }\n }}\n >\n {/* ant-modal-content compat wrapper — matches antd DOM nesting for consumer CSS */}\n <div className=\"ant-modal-content tw-flex tw-h-full tw-flex-col\">\n <FloatingLayerProvider value={nextLevel}>\n {!fullscreen && (\n <div\n className={cn(\n 'ald-modal-header ant-modal-header tw-flex tw-items-start tw-justify-between tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-px-6 tw-py-4',\n !hideHeaderBottomBorder &&\n 'tw-border-b tw-border-solid tw-border-[var(--global-cool-grey-100)]',\n )}\n >\n <DialogPrimitive.Title asChild>\n <div className=\"tw-flex-1\">\n {ModalTitle({ icon, title, subTitle }, _modalType)}\n </div>\n </DialogPrimitive.Title>\n {closable && (\n <DialogPrimitive.Close asChild>\n <span className=\"ant-modal-close\" onClick={onCancel}>\n {closeIcon || (\n <IconButton\n icon={<CloseLLine size={20} />}\n size=\"middle\"\n />\n )}\n </span>\n </DialogPrimitive.Close>\n )}\n </div>\n )}\n {/* Hidden title for accessibility when fullscreen hides the header */}\n {fullscreen && (\n <DialogPrimitive.Title className=\"tw-sr-only\">\n {title}\n </DialogPrimitive.Title>\n )}\n <div\n className={cn(\n 'ald-modal-body ant-modal-body tw-flex-1 tw-text-sm tw-leading-5',\n fullscreen\n ? 'tw-h-full tw-overflow-hidden tw-p-0'\n : 'tw-min-h-[130px]',\n !fullscreen &&\n (virtualScrollBar\n ? 'tw-overflow-hidden tw-p-0'\n : 'tw-overflow-auto'),\n !fullscreen &&\n !responsiveBounds &&\n !virtualScrollBar &&\n 'tw-max-h-[68vh]',\n !fullscreen &&\n !paddingLess &&\n !virtualScrollBar &&\n 'tw-p-6',\n )}\n style={bodyStyle}\n >\n {virtualScrollBar ? (\n <ScrollArea\n className=\"ald-modal-body-wrap !tw-h-auto\"\n innerClassName={cn(\n 'ald-modal-body-wrap-inner tw-max-h-[68vh]',\n paddingLess ? 'tw-p-0' : 'tw-px-[23px] tw-py-0',\n )}\n >\n {children}\n </ScrollArea>\n ) : (\n children\n )}\n </div>\n {!fullscreen && renderFooter()}\n </FloatingLayerProvider>\n </div>\n </DialogPrimitive.Content>\n </div>\n </DialogPrimitive.Portal>\n </DialogPrimitive.Root>\n );\n}\n\n// Static method helper\nfunction createStaticModal(\n type: ModalFuncProps['type'],\n props: ModalFuncProps,\n) {\n const container = document.createElement('div');\n document.body.appendChild(container);\n const root = createRoot(container);\n\n let currentProps = { ...props };\n\n const destroy = () => {\n root.unmount();\n container.remove();\n const idx = destroyFns.indexOf(destroy);\n if (idx >= 0) destroyFns.splice(idx, 1);\n };\n\n const update = (newProps: Partial<ModalFuncProps>) => {\n currentProps = { ...currentProps, ...newProps };\n render(currentProps);\n };\n\n const isConfirm = type === 'confirm';\n\n const render = (p: ModalFuncProps) => {\n const handleOk = () => {\n p.onOk?.();\n destroy();\n };\n const handleCancel = () => {\n p.onCancel?.();\n destroy();\n };\n\n root.render(\n <OriginModal\n open={true}\n title={p.title}\n subTitle={p.subTitle}\n icon={p.icon || getIcon(type || 'info')}\n onOk={handleOk}\n onCancel={handleCancel}\n okText={p.okText}\n cancelText={p.cancelText}\n okButtonProps={p.okButtonProps}\n cancelButtonProps={p.cancelButtonProps}\n okType={p.okType || (isConfirm ? 'dangerous' : 'primary')}\n width={p.width || DEFAULT_WIDTH}\n className={cn('ald-modal', p.className)}\n closable={p.closable}\n maskClosable={p.maskClosable}\n _modalType={type}\n footer={\n isConfirm ? undefined : (\n <Button\n type=\"primary\"\n size=\"middle\"\n {...(p.okButtonProps || {})}\n onClick={handleOk}\n >\n {p.okText || 'OK'}\n </Button>\n )\n }\n >\n {p.content}\n </OriginModal>,\n );\n };\n\n destroyFns.push(destroy);\n render(currentProps);\n\n return { destroy, update };\n}\n\n// Attach static methods\ntype ModalFunc = (props: ModalFuncProps) => {\n destroy: () => void;\n update: (props: Partial<ModalFuncProps>) => void;\n};\n\n// ---------- useModal hook ----------\n\ninterface ModalInstance {\n id: number;\n type: ModalFuncProps['type'];\n props: ModalFuncProps;\n open: boolean;\n}\n\nexport interface ModalApiInstance {\n destroy: () => void;\n update: (newProps: Partial<ModalFuncProps>) => void;\n}\n\nexport interface ModalStaticFunctions {\n info: (props: ModalFuncProps) => ModalApiInstance;\n success: (props: ModalFuncProps) => ModalApiInstance;\n error: (props: ModalFuncProps) => ModalApiInstance;\n warning: (props: ModalFuncProps) => ModalApiInstance;\n confirm: (props: ModalFuncProps) => ModalApiInstance;\n}\n\nfunction useModal(): [ModalStaticFunctions, React.ReactElement] {\n const [modals, setModals] = useState<ModalInstance[]>([]);\n const idCounter = useRef(0);\n\n const removeModal = useCallback((id: number) => {\n setModals((prev) =>\n prev.map((m) => (m.id === id ? { ...m, open: false } : m)),\n );\n // Remove from DOM after animation\n setTimeout(() => {\n setModals((prev) => prev.filter((m) => m.id !== id));\n }, 300);\n }, []);\n\n const updateModal = useCallback(\n (id: number, newProps: Partial<ModalFuncProps>) => {\n setModals((prev) =>\n prev.map((m) =>\n m.id === id ? { ...m, props: { ...m.props, ...newProps } } : m,\n ),\n );\n },\n [],\n );\n\n const openModal = useCallback(\n (type: ModalFuncProps['type'], props: ModalFuncProps): ModalApiInstance => {\n const id = ++idCounter.current;\n const instance: ModalInstance = { id, type, props, open: true };\n setModals((prev) => [...prev, instance]);\n\n return {\n destroy: () => removeModal(id),\n update: (newProps: Partial<ModalFuncProps>) =>\n updateModal(id, newProps),\n };\n },\n [removeModal, updateModal],\n );\n\n const api = useMemo<ModalStaticFunctions>(\n () => ({\n info: (props) => openModal('info', props),\n success: (props) => openModal('success', props),\n error: (props) => openModal('error', props),\n warning: (props) => openModal('warning', props),\n confirm: (props) =>\n openModal('confirm', { ...props, type: props.type || 'confirm' }),\n }),\n [openModal],\n );\n\n const contextHolder = (\n <>\n {modals.map((m) => {\n const isConfirmType = m.type === 'confirm';\n const handleOk = () => {\n m.props.onOk?.();\n removeModal(m.id);\n };\n const handleCancel = () => {\n m.props.onCancel?.();\n removeModal(m.id);\n };\n return (\n <OriginModal\n key={m.id}\n open={m.open}\n title={m.props.title}\n subTitle={m.props.subTitle}\n icon={m.props.icon || getIcon(m.type || 'info')}\n onOk={handleOk}\n onCancel={handleCancel}\n okText={m.props.okText}\n cancelText={m.props.cancelText}\n okButtonProps={m.props.okButtonProps}\n cancelButtonProps={m.props.cancelButtonProps}\n okType={m.props.okType || (isConfirmType ? 'dangerous' : 'primary')}\n width={m.props.width || DEFAULT_WIDTH}\n className={cn('ald-modal', m.props.className)}\n closable={m.props.closable}\n maskClosable={m.props.maskClosable}\n _modalType={m.type}\n footer={\n isConfirmType ? undefined : (\n <Button\n type=\"primary\"\n size=\"middle\"\n {...(m.props.okButtonProps || {})}\n onClick={handleOk}\n >\n {m.props.okText || 'OK'}\n </Button>\n )\n }\n >\n {m.props.content}\n </OriginModal>\n );\n })}\n </>\n );\n\n return [api, contextHolder];\n}\n\n// ---------- end useModal ----------\n\nconst Modal = OriginModal as typeof OriginModal & {\n info: ModalFunc;\n success: ModalFunc;\n error: ModalFunc;\n warning: ModalFunc;\n confirm: ModalFunc;\n destroyAll: () => void;\n useModal: typeof useModal;\n config: (config: any) => void;\n};\n\nModal.info = (props) => createStaticModal('info', props);\nModal.success = (props) => createStaticModal('success', props);\nModal.error = (props) => createStaticModal('error', props);\nModal.warning = (props) => createStaticModal('warning', props);\nModal.confirm = (props) =>\n createStaticModal('confirm', { ...props, type: props.type || 'confirm' });\n\nModal.destroyAll = () => {\n while (destroyFns.length) {\n const close = destroyFns.pop();\n if (close) close();\n }\n};\n\nModal.useModal = useModal;\nModal.config = () => {};\n\nexport default Modal;\n"],"mappings":"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"}
|
package/dist/Popconfirm/index.js
CHANGED
|
@@ -38,8 +38,9 @@ function Popconfirm(props) {
|
|
|
38
38
|
}), open: controlledOpen, onOpenChange, placement = "top", rootClassName, children, disabled } = props;
|
|
39
39
|
const [innerOpen, setInnerOpen] = useState(false);
|
|
40
40
|
const isControlled = controlledOpen !== void 0;
|
|
41
|
-
const
|
|
41
|
+
const mergedOpen = disabled ? false : isControlled ? controlledOpen : innerOpen;
|
|
42
42
|
const handleOpenChange = (val) => {
|
|
43
|
+
if (disabled) return;
|
|
43
44
|
if (!isControlled) setInnerOpen(val);
|
|
44
45
|
onOpenChange?.(val);
|
|
45
46
|
};
|
|
@@ -55,7 +56,7 @@ function Popconfirm(props) {
|
|
|
55
56
|
const align = alignMap[placement] || "center";
|
|
56
57
|
const popupZIndex = useFloatingPopupZIndex();
|
|
57
58
|
return /* @__PURE__ */ jsxs(PopoverPrimitive.Root, {
|
|
58
|
-
open:
|
|
59
|
+
open: mergedOpen,
|
|
59
60
|
onOpenChange: handleOpenChange,
|
|
60
61
|
children: [/* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
|
|
61
62
|
asChild: true,
|