@aloudata/aloudata-design 3.0.25 → 3.0.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Button/index.js +4 -10
- package/dist/Button/index.js.map +1 -1
- package/dist/Checkbox/index.js +2 -8
- package/dist/Checkbox/index.js.map +1 -1
- package/dist/Collapse/index.js +22 -68
- package/dist/Collapse/index.js.map +1 -1
- package/dist/Dropdown/index.js +12 -2
- package/dist/Dropdown/index.js.map +1 -1
- package/dist/Input/components/Input/index.js +5 -11
- package/dist/Input/components/Input/index.js.map +1 -1
- package/dist/Input/components/TextArea/index.js +1 -7
- package/dist/Input/components/TextArea/index.js.map +1 -1
- package/dist/InputNumber/index.js +2 -8
- package/dist/InputNumber/index.js.map +1 -1
- package/dist/Modal/index.js +13 -0
- package/dist/Modal/index.js.map +1 -1
- package/dist/Pagination/PageSizeChanger.d.ts +0 -1
- package/dist/Pagination/PageSizeChanger.js +2 -3
- package/dist/Pagination/PageSizeChanger.js.map +1 -1
- package/dist/Pagination/index.js +19 -33
- package/dist/Pagination/index.js.map +1 -1
- package/dist/Pagination/types.d.ts +0 -3
- package/dist/Radio/components/Radio/index.js +1 -1
- package/dist/Radio/components/Radio/index.js.map +1 -1
- package/dist/Select/BaseSelect.js +12 -12
- package/dist/Select/BaseSelect.js.map +1 -1
- package/dist/Steps/index.js +14 -66
- package/dist/Steps/index.js.map +1 -1
- package/dist/Switch/index.js +1 -8
- package/dist/Switch/index.js.map +1 -1
- package/dist/Table/components/Cell.js +3 -8
- package/dist/Table/components/Cell.js.map +1 -1
- package/dist/Table/components/ExpandCell.js +2 -6
- package/dist/Table/components/ExpandCell.js.map +1 -1
- package/dist/Table/components/Footer/index.js +1 -2
- package/dist/Table/components/Footer/index.js.map +1 -1
- package/dist/Table/components/Header.js +18 -26
- package/dist/Table/components/Header.js.map +1 -1
- package/dist/Table/hooks/useFixed.js +5 -1
- package/dist/Table/hooks/useFixed.js.map +1 -1
- package/dist/Table/hooks/useRowSelection.js +7 -14
- package/dist/Table/hooks/useRowSelection.js.map +1 -1
- package/dist/Table/index.js +2 -8
- package/dist/Table/index.js.map +1 -1
- package/dist/Tabs/index.d.ts +1 -1
- package/dist/Tabs/index.js +11 -91
- package/dist/Tabs/index.js.map +1 -1
- package/dist/aloudata-design.css +1 -1
- package/dist/locale/default.d.ts +0 -6
- package/dist/locale/en_US.d.ts +0 -6
- package/dist/locale/en_US.js +0 -6
- package/dist/locale/en_US.js.map +1 -1
- package/dist/locale/zh_CN.d.ts +0 -6
- package/dist/locale/zh_CN.js +0 -6
- package/dist/locale/zh_CN.js.map +1 -1
- package/dist/theme/contract/tokenOutputContract.d.ts +1 -1
- package/dist/theme/contract/tokenOutputContract.js +0 -4
- package/dist/theme/contract/tokenOutputContract.js.map +1 -1
- package/dist/theme/runtime/colorValueMode/generated/darkBaselineDeclarations.d.ts +1 -1
- package/dist/theme/runtime/colorValueMode/generated/darkBaselineDeclarations.js +0 -3
- package/dist/theme/runtime/colorValueMode/generated/darkBaselineDeclarations.js.map +1 -1
- package/dist/theme/runtime/colorValueMode/generated/v3BaselineDeclarations.d.ts +1 -1
- package/dist/theme/runtime/colorValueMode/generated/v3BaselineDeclarations.js +0 -3
- package/dist/theme/runtime/colorValueMode/generated/v3BaselineDeclarations.js.map +1 -1
- package/dist/theme/runtime/themeToCssVars.js +0 -3
- package/dist/theme/runtime/themeToCssVars.js.map +1 -1
- package/package.json +1 -1
- package/dist/theme/contract/controlStateColorArtifact.d.ts +0 -73
- package/dist/theme/contract/controlStateColorArtifact.js +0 -2
- package/dist/theme/contract/focusRingArtifact.d.ts +0 -51
- package/dist/theme/contract/focusRingArtifact.js +0 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseSelect.js","names":[],"sources":["../../src/Select/BaseSelect.tsx"],"sourcesContent":["import './ald-select.css';\nimport * as React from 'react';\nimport useMergedState from 'rc-util/es/hooks/useMergedState';\nimport { cn } from '../lib/utils';\nimport prefixCls from '../_utils/prefixCls';\n\n/** Align config type (locally defined to avoid rc-trigger dependency) */\nexport interface AlignType {\n points?: string[];\n offset?: (number | string)[];\n targetOffset?: (number | string)[];\n overflow?: { adjustX?: boolean; adjustY?: boolean };\n _experimental?: Record<string, any>;\n}\nimport SelectTrigger, { RefTriggerProps } from './SelectTrigger';\nimport Selector from './Selector';\nimport _ from 'lodash';\nimport { useContext, useRef, useState } from 'react';\nimport { FormItemInputContext } from '../Form/FormItemContext';\nimport getWidthStyle from './utils/getWidthStyle';\nimport Suffix from './components/Suffix';\nimport { PlacementType } from '../Dropdown';\nimport {\n BaseSelectRef,\n DisplayValueType,\n ISelectProps,\n LabelInValueType,\n SelectMenuProps,\n} from './interface';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { ConfigContext } from '../ConfigProvider';\nimport { useCompactItemContext } from '../Space/CompactContext';\nimport { MenuInfo } from '../Menu';\nimport { toString } from './utils/commonUtil';\n\nexport type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);\n\nexport type RenderDOMFunc = (props: any) => HTMLElement;\n\nexport type Mode =\n | 'multiple'\n | {\n type: 'multiple';\n responsive?: boolean;\n maxRows?: number;\n showSelectedSection?: boolean;\n };\n\nexport type RawValueType = string | number;\n\nexport type CustomTagProps = {\n label: React.ReactNode;\n value: any;\n disabled: boolean;\n onClose: (event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n closable: boolean;\n};\nexport interface BaseSelectPrivateProps {\n // >>> MISC\n omitDomProps?: string[];\n\n // >>> Value\n displayValues: LabelInValueType[];\n onDisplayValuesChange: (\n values: LabelInValueType[],\n info: {\n type: 'add' | 'remove' | 'clear';\n values: LabelInValueType[];\n },\n ) => void;\n\n // >>> Active\n /** Current dropdown list active item string value */\n activeValue?: string;\n /** Link search input with target element */\n activeDescendantId?: string;\n onActiveValueChange?: (value: string | null) => void;\n}\n\nexport type BaseSelectPropsWithoutPrivate = Omit<\n BaseSelectProps,\n keyof BaseSelectPrivateProps\n>;\n\nexport interface BaseSelectProps\n extends BaseSelectPrivateProps,\n ISelectProps,\n React.AriaAttributes {\n className?: string;\n style?: React.CSSProperties;\n notFoundContent?: React.ReactNode;\n onClear?: () => void;\n innerSearchValue?: string;\n setInnerSearchValue?: (value: string) => void;\n displayMenu?: SelectMenuProps;\n // >>> Open\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n onOptionSelect?: (val: RawValueType) => void;\n\n // >>> Icons\n allowClear?: boolean;\n showArrow?: boolean;\n suffixIcon?: React.ReactNode;\n\n // >>> Dropdown\n dropdownAlign?: AlignType;\n placement?: PlacementType;\n getPopupContainer?: () => HTMLElement;\n\n // >>> Focus\n onBlur?: React.FocusEventHandler<HTMLElement>;\n onFocus?: React.FocusEventHandler<HTMLElement>;\n\n // >>> Rest Events\n onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n onMouseDown?: React.MouseEventHandler<HTMLDivElement>;\n onPopupScroll?: React.UIEventHandler<HTMLDivElement>;\n onInputKeyDown?: React.KeyboardEventHandler<\n HTMLInputElement | HTMLTextAreaElement\n >;\n onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n onClick?: React.MouseEventHandler<HTMLDivElement>;\n}\n\nexport function isMultiple(mode?: Mode) {\n return !!mode;\n}\nexport function isResponsive(mode?: Mode) {\n return mode === 'multiple' || (typeof mode === 'object' && mode?.responsive);\n}\nexport function isShowSelectedSection(mode?: Mode) {\n if (!mode || mode === 'multiple') {\n return false;\n }\n\n return (\n typeof mode === 'object' && mode.showSelectedSection && mode.responsive\n );\n}\nconst BaseSelect = React.forwardRef(\n (props: BaseSelectProps, ref: React.Ref<BaseSelectRef>) => {\n const {\n id,\n className,\n // Value\n displayValues,\n onDisplayValuesChange,\n displayMenu,\n notFoundContent,\n onClear,\n width,\n mode,\n status: customStatus,\n onOptionSelect,\n onClick,\n size: customSize,\n borderLess = false,\n // Status\n disabled,\n placeholder,\n loading = false,\n\n // Open\n open,\n defaultOpen,\n onOpenChange,\n showSearch,\n innerSearchValue,\n setInnerSearchValue,\n // Icons\n allowClear,\n showArrow = true,\n prefix,\n suffixIcon,\n dropdownRender,\n overlayStyle,\n dropdownStyle,\n popupMatchSelectWidth = true,\n placement,\n popupClassName,\n allowOverlap,\n style,\n 'data-testid': dataTestid,\n 'aria-label': ariaLabel,\n ...restProps\n // Rest Props\n } = props;\n const setClassNames = prefixCls('select');\n const selectRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLDivElement>(null);\n const widthStyle = getWidthStyle(width);\n const dropdownRef = useRef<RefTriggerProps>(null);\n const [matchedPopupWidth, setMatchedPopupWidth] = useState<\n number | undefined\n >();\n const isResponsiveMode = isResponsive(mode);\n const isMultipleMode = isMultiple(mode);\n /** Used for component focused management */\n const contentSize = useContext(SizeContext);\n const { direction } = React.useContext(ConfigContext);\n // ===================== Compact Item =====================\n const { compactSize, compactItemClassnames } = useCompactItemContext(\n 'ald-select',\n direction,\n );\n const size = compactSize || customSize || contentSize || 'middle';\n const {\n status: contextStatus,\n // hasFeedback,\n // isFormItemInput,\n // feedbackIcon,\n } = useContext(FormItemInputContext);\n\n const mergedStatus =\n customStatus === null ? undefined : customStatus || contextStatus;\n\n // =========================== Imperative ===========================\n React.useImperativeHandle(ref, () => ({\n // The trigger is the Select focus owner. Keeping this as a real DOM\n // focus target makes keyboard focus, the Focus State Layer, and the\n // public imperative API describe the same element.\n focus: () => triggerRef.current?.focus(),\n blur: () => triggerRef.current?.blur(),\n open: () => onToggleOpen(true),\n close: () => {\n console.log('ref close');\n onToggleOpen(false);\n },\n }));\n const [isHover, setIsHover] = useState(false);\n // ============================== Open ==============================\n const [innerOpen, setInnerOpen] = useMergedState<boolean>(false, {\n defaultValue: defaultOpen,\n value: open,\n });\n const mergedOpen = innerOpen;\n const shouldMatchPopupWidth =\n !!popupMatchSelectWidth && typeof popupMatchSelectWidth !== 'number';\n const updateMatchedPopupWidth = React.useCallback(() => {\n if (!shouldMatchPopupWidth) {\n return;\n }\n\n const nextWidth = selectRef.current?.getBoundingClientRect().width;\n if (nextWidth !== undefined) {\n setMatchedPopupWidth((currentWidth) =>\n currentWidth === nextWidth ? currentWidth : nextWidth,\n );\n }\n }, [shouldMatchPopupWidth]);\n const onToggleOpen = React.useCallback(\n (newOpen?: boolean) => {\n const nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;\n if (nextOpen) {\n updateMatchedPopupWidth();\n }\n if (!nextOpen) {\n setShowResponsiveSelectedSection(false);\n }\n if (mergedOpen !== nextOpen && !disabled) {\n setInnerOpen(nextOpen);\n onOpenChange?.(nextOpen);\n }\n },\n [\n mergedOpen,\n disabled,\n setInnerOpen,\n onOpenChange,\n updateMatchedPopupWidth,\n ],\n );\n React.useLayoutEffect(() => {\n if (!mergedOpen || !shouldMatchPopupWidth) {\n return;\n }\n\n const element = selectRef.current;\n if (!element) {\n return;\n }\n\n const updateMatchedWidth = () => {\n const nextWidth = element.getBoundingClientRect().width;\n setMatchedPopupWidth((currentWidth) =>\n currentWidth === nextWidth ? currentWidth : nextWidth,\n );\n };\n\n updateMatchedWidth();\n\n if (typeof ResizeObserver === 'undefined') {\n window.addEventListener('resize', updateMatchedWidth);\n return () => {\n window.removeEventListener('resize', updateMatchedWidth);\n };\n }\n\n let resizeAnimationFrame: number | undefined;\n const scheduleMatchedWidthUpdate = () => {\n if (resizeAnimationFrame !== undefined) {\n cancelAnimationFrame(resizeAnimationFrame);\n }\n resizeAnimationFrame = requestAnimationFrame(updateMatchedWidth);\n };\n\n const observer = new ResizeObserver(scheduleMatchedWidthUpdate);\n observer.observe(element);\n\n return () => {\n if (resizeAnimationFrame !== undefined) {\n cancelAnimationFrame(resizeAnimationFrame);\n }\n observer.disconnect();\n };\n }, [mergedOpen, shouldMatchPopupWidth]);\n const [showResponsiveSelectedSection, setShowResponsiveSelectedSection] =\n useState(false);\n // 多选 responsive 进入 -1 收纳态(仅\"首 tag + +N\")时为 true,\n // width:auto 下据此给根节点加 overflow-collapsed 钳住 min-width 链,\n // 抵抗父 flex 行因 intrinsic 低估造成的假压缩(详见 ald-select.css 对应段)\n const [overflowCollapsed, setOverflowCollapsed] = useState(false);\n\n // ============================ Selector ============================\n const onSelectorRemove = (val: DisplayValueType) => {\n const newValues = displayValues.filter(\n (item) => toString(item.value) !== toString(val.value),\n );\n\n onDisplayValuesChange(newValues, {\n type: 'remove',\n values: [\n {\n label: val.label,\n value: val.value as RawValueType,\n },\n ],\n });\n };\n\n const mergedClassName = cn(\n setClassNames('beta-ald-select', size, {\n // Popup visibility is not focus. The trigger's :focus-visible state\n // owns the Focus State Layer in ald-select.css.\n open: mergedOpen,\n // Retain the legacy hook for consumers that style the open state.\n // It no longer represents trigger focus.\n active: mergedOpen,\n borderless: borderLess,\n disabled: disabled,\n loading: loading,\n [`${mergedStatus}`]: !!mergedStatus,\n 'multiple-responsive': isResponsiveMode,\n 'multiple-default': isMultipleMode && !isResponsiveMode,\n // 仅 width:auto 生效:固定宽度下 -1 收纳态的收缩省略是预期行为,\n // 钳 min-width 反而会把固定宽撑破\n 'overflow-collapsed':\n overflowCollapsed && width === 'auto' && !_.isEmpty(displayValues),\n }),\n 'tw-text-typography-body-dense',\n className,\n compactItemClassnames,\n );\n const showMenu = React.useMemo(() => {\n if (!displayMenu) {\n return undefined;\n }\n\n return {\n ...displayMenu,\n onClick: (info: MenuInfo) => {\n displayMenu?.onClick?.(info);\n if (isMultipleMode) {\n // 多选默认选中后不收起下拉:Dropdown 在 menu.onClick 之后读\n // info.keepOpen 决定是否 onChangeOpen(false),不设则每次点击都被\n // 当成关闭信号。用 ?? 保留用户在自己的 onClick 里显式设 false 的能力\n info.keepOpen = info.keepOpen ?? true;\n } else if (displayMenu) {\n onToggleOpen(false);\n }\n setIsHover(false);\n onOptionSelect?.(info.key);\n },\n };\n }, [displayMenu, isMultipleMode, onToggleOpen, onOptionSelect]);\n const onSelectClick = React.useCallback(\n (e: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) {\n return;\n }\n onClick?.(e);\n },\n [disabled, onClick],\n );\n React.useEffect(() => {\n const element = selectRef.current;\n if (element) {\n const handleMouseOver = () => setIsHover(true);\n const handleMouseOut = () => setIsHover(false);\n\n element.addEventListener('mouseover', handleMouseOver);\n element.addEventListener('mouseout', handleMouseOut);\n\n return () => {\n element.removeEventListener('mouseover', handleMouseOver);\n element.removeEventListener('mouseout', handleMouseOut);\n };\n }\n }, []);\n const mergedPopupMatchSelectWidth =\n shouldMatchPopupWidth && matchedPopupWidth !== undefined\n ? matchedPopupWidth\n : popupMatchSelectWidth;\n return (\n <div\n className={mergedClassName}\n style={{\n ...widthStyle,\n // width:auto 且无选中值时锁 shrink:Chromium 对该子树给父 flex 行的\n // intrinsic 宽度贡献恒少约 14px,父行按低估值布局后回头压缩根节点,\n // placeholder 右侧会被裁;有选中值时必须保持可压缩,rc-overflow\n // 才能在父行变窄时把放不下的 tag 收纳成 \"+N\"\n ...(width === 'auto' && _.isEmpty(displayValues)\n ? { flexShrink: 0 }\n : {}),\n ...style,\n }}\n ref={selectRef}\n id={id}\n onClick={onSelectClick}\n data-testid={dataTestid}\n aria-label={ariaLabel}\n >\n <SelectTrigger\n {...restProps}\n open={!!mergedOpen}\n notFoundContent={notFoundContent}\n menu={showMenu}\n ref={dropdownRef}\n showSearch={showSearch}\n searchValue={innerSearchValue}\n setInnerSearchValue={setInnerSearchValue}\n popupMatchSelectWidth={mergedPopupMatchSelectWidth}\n overlayClassName={popupClassName}\n // @ts-ignore\n dropdownRender={dropdownRender}\n overlayStyle={overlayStyle || dropdownStyle}\n placement={placement}\n allowOverlap={allowOverlap}\n onOpenChange={(open) => {\n if (isResponsiveMode) {\n if (\n !mergedOpen &&\n !showResponsiveSelectedSection &&\n displayValues.length > 0 &&\n isShowSelectedSection(mode)\n ) {\n setShowResponsiveSelectedSection(true);\n } else {\n onToggleOpen(open);\n }\n } else {\n onToggleOpen(open);\n }\n }}\n >\n {/* antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器 */}\n <div\n ref={triggerRef}\n tabIndex={disabled ? undefined : 0}\n role=\"combobox\"\n aria-disabled={disabled || undefined}\n aria-expanded={mergedOpen}\n className={cn(setClassNames('trigger'), 'ant-select-selector')}\n >\n {prefix && <div className={setClassNames('prefix')}>{prefix}</div>}\n {_.isEmpty(displayValues) && (\n <div\n className={cn(\n setClassNames('placeholder'),\n 'ant-select-selection-placeholder',\n )}\n >\n {placeholder}\n </div>\n )}\n {!_.isEmpty(displayValues) && (\n <Selector\n {...restProps}\n suffixIcon={suffixIcon}\n size={size}\n disabled={disabled}\n mode={mode}\n dropdownRef={dropdownRef}\n displayValues={displayValues}\n onToggleOpen={onToggleOpen}\n onRemove={onSelectorRemove}\n showResponsiveSelectedSection={showResponsiveSelectedSection}\n onOverflowCollapsedChange={setOverflowCollapsed}\n ></Selector>\n )}\n </div>\n </SelectTrigger>\n <Suffix\n showArrow={showArrow}\n allowClear={allowClear}\n disabled={disabled}\n loading={loading}\n isHover={isHover}\n onClear={() => {\n onToggleOpen(false);\n\n onDisplayValuesChange([], {\n type: 'clear',\n values: displayValues,\n });\n onClear?.();\n }}\n isActive={innerOpen}\n icon={suffixIcon}\n displayValues={displayValues}\n ></Suffix>\n </div>\n );\n },\n);\n\nexport default BaseSelect;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BaseSelect.js","names":[],"sources":["../../src/Select/BaseSelect.tsx"],"sourcesContent":["import './ald-select.css';\nimport * as React from 'react';\nimport useMergedState from 'rc-util/es/hooks/useMergedState';\nimport { cn } from '../lib/utils';\nimport prefixCls from '../_utils/prefixCls';\n\n/** Align config type (locally defined to avoid rc-trigger dependency) */\nexport interface AlignType {\n points?: string[];\n offset?: (number | string)[];\n targetOffset?: (number | string)[];\n overflow?: { adjustX?: boolean; adjustY?: boolean };\n _experimental?: Record<string, any>;\n}\nimport SelectTrigger, { RefTriggerProps } from './SelectTrigger';\nimport Selector from './Selector';\nimport _ from 'lodash';\nimport { useContext, useRef, useState } from 'react';\nimport { FormItemInputContext } from '../Form/FormItemContext';\nimport getWidthStyle from './utils/getWidthStyle';\nimport Suffix from './components/Suffix';\nimport { PlacementType } from '../Dropdown';\nimport {\n BaseSelectRef,\n DisplayValueType,\n ISelectProps,\n LabelInValueType,\n SelectMenuProps,\n} from './interface';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { ConfigContext } from '../ConfigProvider';\nimport { useCompactItemContext } from '../Space/CompactContext';\nimport { MenuInfo } from '../Menu';\nimport { toString } from './utils/commonUtil';\n\nexport type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);\n\nexport type RenderDOMFunc = (props: any) => HTMLElement;\n\nexport type Mode =\n | 'multiple'\n | {\n type: 'multiple';\n responsive?: boolean;\n maxRows?: number;\n showSelectedSection?: boolean;\n };\n\nexport type RawValueType = string | number;\n\nexport type CustomTagProps = {\n label: React.ReactNode;\n value: any;\n disabled: boolean;\n onClose: (event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n closable: boolean;\n};\nexport interface BaseSelectPrivateProps {\n // >>> MISC\n omitDomProps?: string[];\n\n // >>> Value\n displayValues: LabelInValueType[];\n onDisplayValuesChange: (\n values: LabelInValueType[],\n info: {\n type: 'add' | 'remove' | 'clear';\n values: LabelInValueType[];\n },\n ) => void;\n\n // >>> Active\n /** Current dropdown list active item string value */\n activeValue?: string;\n /** Link search input with target element */\n activeDescendantId?: string;\n onActiveValueChange?: (value: string | null) => void;\n}\n\nexport type BaseSelectPropsWithoutPrivate = Omit<\n BaseSelectProps,\n keyof BaseSelectPrivateProps\n>;\n\nexport interface BaseSelectProps\n extends BaseSelectPrivateProps,\n ISelectProps,\n React.AriaAttributes {\n className?: string;\n style?: React.CSSProperties;\n notFoundContent?: React.ReactNode;\n onClear?: () => void;\n innerSearchValue?: string;\n setInnerSearchValue?: (value: string) => void;\n displayMenu?: SelectMenuProps;\n // >>> Open\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n onOptionSelect?: (val: RawValueType) => void;\n\n // >>> Icons\n allowClear?: boolean;\n showArrow?: boolean;\n suffixIcon?: React.ReactNode;\n\n // >>> Dropdown\n dropdownAlign?: AlignType;\n placement?: PlacementType;\n getPopupContainer?: () => HTMLElement;\n\n // >>> Focus\n onBlur?: React.FocusEventHandler<HTMLElement>;\n onFocus?: React.FocusEventHandler<HTMLElement>;\n\n // >>> Rest Events\n onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n onMouseDown?: React.MouseEventHandler<HTMLDivElement>;\n onPopupScroll?: React.UIEventHandler<HTMLDivElement>;\n onInputKeyDown?: React.KeyboardEventHandler<\n HTMLInputElement | HTMLTextAreaElement\n >;\n onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n onClick?: React.MouseEventHandler<HTMLDivElement>;\n}\n\nexport function isMultiple(mode?: Mode) {\n return !!mode;\n}\nexport function isResponsive(mode?: Mode) {\n return mode === 'multiple' || (typeof mode === 'object' && mode?.responsive);\n}\nexport function isShowSelectedSection(mode?: Mode) {\n if (!mode || mode === 'multiple') {\n return false;\n }\n\n return (\n typeof mode === 'object' && mode.showSelectedSection && mode.responsive\n );\n}\nconst BaseSelect = React.forwardRef(\n (props: BaseSelectProps, ref: React.Ref<BaseSelectRef>) => {\n const {\n id,\n className,\n // Value\n displayValues,\n onDisplayValuesChange,\n displayMenu,\n notFoundContent,\n onClear,\n width,\n mode,\n status: customStatus,\n onOptionSelect,\n onClick,\n size: customSize,\n borderLess = false,\n // Status\n disabled,\n placeholder,\n loading = false,\n\n // Open\n open,\n defaultOpen,\n onOpenChange,\n showSearch,\n innerSearchValue,\n setInnerSearchValue,\n // Icons\n allowClear,\n showArrow = true,\n prefix,\n suffixIcon,\n dropdownRender,\n overlayStyle,\n dropdownStyle,\n popupMatchSelectWidth = true,\n placement,\n popupClassName,\n allowOverlap,\n style,\n 'data-testid': dataTestid,\n 'aria-label': ariaLabel,\n ...restProps\n // Rest Props\n } = props;\n const setClassNames = prefixCls('select');\n const selectRef = useRef<HTMLDivElement>(null);\n const widthStyle = getWidthStyle(width);\n const dropdownRef = useRef<RefTriggerProps>(null);\n const [matchedPopupWidth, setMatchedPopupWidth] = useState<\n number | undefined\n >();\n const isResponsiveMode = isResponsive(mode);\n const isMultipleMode = isMultiple(mode);\n /** Used for component focused management */\n const contentSize = useContext(SizeContext);\n const { direction } = React.useContext(ConfigContext);\n // ===================== Compact Item =====================\n const { compactSize, compactItemClassnames } = useCompactItemContext(\n 'ald-select',\n direction,\n );\n const size = compactSize || customSize || contentSize || 'middle';\n const {\n status: contextStatus,\n // hasFeedback,\n // isFormItemInput,\n // feedbackIcon,\n } = useContext(FormItemInputContext);\n\n const mergedStatus =\n customStatus === null ? undefined : customStatus || contextStatus;\n\n // =========================== Imperative ===========================\n React.useImperativeHandle(ref, () => ({\n focus: () => setFocus(true),\n blur: () => setFocus(false),\n open: () => onToggleOpen(true),\n close: () => {\n console.log('ref close');\n onToggleOpen(false);\n },\n }));\n const [focus, setFocus] = useState(false);\n const [isHover, setIsHover] = useState(false);\n // ============================== Open ==============================\n const [innerOpen, setInnerOpen] = useMergedState<boolean>(false, {\n defaultValue: defaultOpen,\n value: open,\n });\n const mergedOpen = innerOpen;\n const shouldMatchPopupWidth =\n !!popupMatchSelectWidth && typeof popupMatchSelectWidth !== 'number';\n const updateMatchedPopupWidth = React.useCallback(() => {\n if (!shouldMatchPopupWidth) {\n return;\n }\n\n const nextWidth = selectRef.current?.getBoundingClientRect().width;\n if (nextWidth !== undefined) {\n setMatchedPopupWidth((currentWidth) =>\n currentWidth === nextWidth ? currentWidth : nextWidth,\n );\n }\n }, [shouldMatchPopupWidth]);\n const onToggleOpen = React.useCallback(\n (newOpen?: boolean) => {\n const nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;\n if (nextOpen) {\n updateMatchedPopupWidth();\n }\n if (!nextOpen) {\n setShowResponsiveSelectedSection(false);\n setFocus(false);\n }\n if (mergedOpen !== nextOpen && !disabled) {\n setInnerOpen(nextOpen);\n onOpenChange?.(nextOpen);\n }\n },\n [\n mergedOpen,\n disabled,\n setInnerOpen,\n onOpenChange,\n updateMatchedPopupWidth,\n ],\n );\n React.useLayoutEffect(() => {\n if (!mergedOpen || !shouldMatchPopupWidth) {\n return;\n }\n\n const element = selectRef.current;\n if (!element) {\n return;\n }\n\n const updateMatchedWidth = () => {\n const nextWidth = element.getBoundingClientRect().width;\n setMatchedPopupWidth((currentWidth) =>\n currentWidth === nextWidth ? currentWidth : nextWidth,\n );\n };\n\n updateMatchedWidth();\n\n if (typeof ResizeObserver === 'undefined') {\n window.addEventListener('resize', updateMatchedWidth);\n return () => {\n window.removeEventListener('resize', updateMatchedWidth);\n };\n }\n\n let resizeAnimationFrame: number | undefined;\n const scheduleMatchedWidthUpdate = () => {\n if (resizeAnimationFrame !== undefined) {\n cancelAnimationFrame(resizeAnimationFrame);\n }\n resizeAnimationFrame = requestAnimationFrame(updateMatchedWidth);\n };\n\n const observer = new ResizeObserver(scheduleMatchedWidthUpdate);\n observer.observe(element);\n\n return () => {\n if (resizeAnimationFrame !== undefined) {\n cancelAnimationFrame(resizeAnimationFrame);\n }\n observer.disconnect();\n };\n }, [mergedOpen, shouldMatchPopupWidth]);\n const [showResponsiveSelectedSection, setShowResponsiveSelectedSection] =\n useState(false);\n // 多选 responsive 进入 -1 收纳态(仅\"首 tag + +N\")时为 true,\n // width:auto 下据此给根节点加 overflow-collapsed 钳住 min-width 链,\n // 抵抗父 flex 行因 intrinsic 低估造成的假压缩(详见 ald-select.css 对应段)\n const [overflowCollapsed, setOverflowCollapsed] = useState(false);\n\n // ============================ Selector ============================\n const onSelectorRemove = (val: DisplayValueType) => {\n const newValues = displayValues.filter(\n (item) => toString(item.value) !== toString(val.value),\n );\n\n onDisplayValuesChange(newValues, {\n type: 'remove',\n values: [\n {\n label: val.label,\n value: val.value as RawValueType,\n },\n ],\n });\n };\n\n const mergedClassName = cn(\n setClassNames('beta-ald-select', size, {\n active: mergedOpen || focus,\n borderless: borderLess,\n disabled: disabled,\n loading: loading,\n [`${mergedStatus}`]: !!mergedStatus,\n 'multiple-responsive': isResponsiveMode,\n 'multiple-default': isMultipleMode && !isResponsiveMode,\n // 仅 width:auto 生效:固定宽度下 -1 收纳态的收缩省略是预期行为,\n // 钳 min-width 反而会把固定宽撑破\n 'overflow-collapsed':\n overflowCollapsed && width === 'auto' && !_.isEmpty(displayValues),\n }),\n 'tw-text-typography-body-dense',\n className,\n compactItemClassnames,\n );\n const showMenu = React.useMemo(() => {\n if (!displayMenu) {\n return undefined;\n }\n\n return {\n ...displayMenu,\n onClick: (info: MenuInfo) => {\n displayMenu?.onClick?.(info);\n if (isMultipleMode) {\n // 多选默认选中后不收起下拉:Dropdown 在 menu.onClick 之后读\n // info.keepOpen 决定是否 onChangeOpen(false),不设则每次点击都被\n // 当成关闭信号。用 ?? 保留用户在自己的 onClick 里显式设 false 的能力\n info.keepOpen = info.keepOpen ?? true;\n } else if (displayMenu) {\n onToggleOpen(false);\n setFocus(false);\n }\n setIsHover(false);\n onOptionSelect?.(info.key);\n },\n };\n }, [displayMenu, isMultipleMode, onToggleOpen, onOptionSelect]);\n const onSelectClick = React.useCallback(\n (e: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) {\n return;\n }\n onClick?.(e);\n },\n [disabled, onClick],\n );\n React.useEffect(() => {\n const element = selectRef.current;\n if (element) {\n const handleMouseOver = () => setIsHover(true);\n const handleMouseOut = () => setIsHover(false);\n\n element.addEventListener('mouseover', handleMouseOver);\n element.addEventListener('mouseout', handleMouseOut);\n\n return () => {\n element.removeEventListener('mouseover', handleMouseOver);\n element.removeEventListener('mouseout', handleMouseOut);\n };\n }\n }, []);\n const mergedPopupMatchSelectWidth =\n shouldMatchPopupWidth && matchedPopupWidth !== undefined\n ? matchedPopupWidth\n : popupMatchSelectWidth;\n return (\n <div\n className={mergedClassName}\n style={{\n ...widthStyle,\n // width:auto 且无选中值时锁 shrink:Chromium 对该子树给父 flex 行的\n // intrinsic 宽度贡献恒少约 14px,父行按低估值布局后回头压缩根节点,\n // placeholder 右侧会被裁;有选中值时必须保持可压缩,rc-overflow\n // 才能在父行变窄时把放不下的 tag 收纳成 \"+N\"\n ...(width === 'auto' && _.isEmpty(displayValues)\n ? { flexShrink: 0 }\n : {}),\n ...style,\n }}\n ref={selectRef}\n id={id}\n onClick={onSelectClick}\n data-testid={dataTestid}\n aria-label={ariaLabel}\n >\n <SelectTrigger\n {...restProps}\n open={!!mergedOpen}\n notFoundContent={notFoundContent}\n menu={showMenu}\n ref={dropdownRef}\n showSearch={showSearch}\n searchValue={innerSearchValue}\n setInnerSearchValue={setInnerSearchValue}\n popupMatchSelectWidth={mergedPopupMatchSelectWidth}\n overlayClassName={popupClassName}\n // @ts-ignore\n dropdownRender={dropdownRender}\n overlayStyle={overlayStyle || dropdownStyle}\n placement={placement}\n allowOverlap={allowOverlap}\n onOpenChange={(open) => {\n if (isResponsiveMode) {\n if (\n !mergedOpen &&\n !showResponsiveSelectedSection &&\n displayValues.length > 0 &&\n isShowSelectedSection(mode)\n ) {\n setShowResponsiveSelectedSection(true);\n } else {\n onToggleOpen(open);\n }\n } else {\n onToggleOpen(open);\n }\n }}\n >\n {/* antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器 */}\n <div className={cn(setClassNames('trigger'), 'ant-select-selector')}>\n {prefix && <div className={setClassNames('prefix')}>{prefix}</div>}\n {_.isEmpty(displayValues) && (\n <div\n className={cn(\n setClassNames('placeholder'),\n 'ant-select-selection-placeholder',\n )}\n >\n {placeholder}\n </div>\n )}\n {!_.isEmpty(displayValues) && (\n <Selector\n {...restProps}\n suffixIcon={suffixIcon}\n size={size}\n disabled={disabled}\n mode={mode}\n dropdownRef={dropdownRef}\n displayValues={displayValues}\n onToggleOpen={onToggleOpen}\n onRemove={onSelectorRemove}\n showResponsiveSelectedSection={showResponsiveSelectedSection}\n onOverflowCollapsedChange={setOverflowCollapsed}\n ></Selector>\n )}\n </div>\n </SelectTrigger>\n <Suffix\n showArrow={showArrow}\n allowClear={allowClear}\n disabled={disabled}\n loading={loading}\n isHover={isHover}\n onClear={() => {\n onToggleOpen(false);\n\n onDisplayValuesChange([], {\n type: 'clear',\n values: displayValues,\n });\n onClear?.();\n }}\n isActive={innerOpen}\n icon={suffixIcon}\n displayValues={displayValues}\n ></Suffix>\n </div>\n );\n },\n);\n\nexport default BaseSelect;\n"],"mappings":"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"}
|
package/dist/Steps/index.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { cn } from "../lib/utils.js";
|
|
2
|
-
import { ELangType, LocaleContext } from "../locale/default.js";
|
|
3
2
|
import { CustomDot } from "./components/CustomDot/index.js";
|
|
4
3
|
import { Step } from "./components/Step/index.js";
|
|
5
4
|
import React from "react";
|
|
@@ -10,31 +9,8 @@ function getStepStatus(index, current, globalStatus) {
|
|
|
10
9
|
if (index === current) return globalStatus || "process";
|
|
11
10
|
return "wait";
|
|
12
11
|
}
|
|
13
|
-
var stepsA11yText = {
|
|
14
|
-
[ELangType.ZH_CN]: {
|
|
15
|
-
workflowProgress: "工作流进度",
|
|
16
|
-
status: {
|
|
17
|
-
finish: "已完成",
|
|
18
|
-
process: "进行中",
|
|
19
|
-
wait: "未开始",
|
|
20
|
-
error: "错误"
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
|
-
[ELangType.EN]: {
|
|
24
|
-
workflowProgress: "Workflow progress",
|
|
25
|
-
status: {
|
|
26
|
-
finish: "Completed",
|
|
27
|
-
process: "In progress",
|
|
28
|
-
wait: "Not started",
|
|
29
|
-
error: "Error"
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
12
|
function Steps({ className, current: controlledCurrent, direction = "horizontal", defaultCurrent = 0, status, items, children }) {
|
|
34
13
|
const current = controlledCurrent ?? defaultCurrent;
|
|
35
|
-
const accessibleIdPrefix = React.useId();
|
|
36
|
-
const { locale } = React.useContext(LocaleContext);
|
|
37
|
-
const a11yText = locale === ELangType.EN ? stepsA11yText[ELangType.EN] : stepsA11yText[ELangType.ZH_CN];
|
|
38
14
|
const resolvedItems = items || React.Children.toArray(children).filter(React.isValidElement).map((child) => ({
|
|
39
15
|
title: child.props.title,
|
|
40
16
|
description: child.props.description,
|
|
@@ -44,21 +20,11 @@ function Steps({ className, current: controlledCurrent, direction = "horizontal"
|
|
|
44
20
|
}));
|
|
45
21
|
return /* @__PURE__ */ jsx("div", {
|
|
46
22
|
className: cn("ald-steps ant-steps ant-steps-dot ant-steps-label-vertical tw-flex", direction === "vertical" ? "ant-steps-vertical" : "ant-steps-horizontal", direction === "vertical" ? "tw-flex-col" : "tw-flex-row tw-items-start", className),
|
|
47
|
-
role: "list",
|
|
48
|
-
"aria-label": a11yText.workflowProgress,
|
|
49
23
|
children: resolvedItems.map((item, index) => {
|
|
50
24
|
const stepStatus = item.status || getStepStatus(index, current, status);
|
|
51
25
|
const isLast = index === resolvedItems.length - 1;
|
|
52
|
-
const titleId = `${accessibleIdPrefix}-step-${index}-title`;
|
|
53
|
-
const statusId = `${accessibleIdPrefix}-step-${index}-status`;
|
|
54
26
|
return /* @__PURE__ */ jsx("div", {
|
|
55
27
|
className: cn("ald-steps-item ant-steps-item tw-flex", direction === "horizontal" ? "tw-flex-1 tw-flex-col tw-items-center tw-text-center" : "tw-flex-row tw-gap-3 tw-py-2", `ald-steps-item-${stepStatus}`, `ant-steps-item-${stepStatus}`, item.disabled && "ald-steps-item-disabled tw-pointer-events-none tw-opacity-50", item.disabled && "ant-steps-item-disabled"),
|
|
56
|
-
role: "listitem",
|
|
57
|
-
"aria-current": index === current ? "step" : void 0,
|
|
58
|
-
"aria-labelledby": titleId,
|
|
59
|
-
"aria-describedby": statusId,
|
|
60
|
-
"aria-posinset": index + 1,
|
|
61
|
-
"aria-setsize": resolvedItems.length,
|
|
62
28
|
children: direction === "horizontal" ? /* @__PURE__ */ jsxs("div", {
|
|
63
29
|
className: "ant-steps-item-container tw-flex tw-w-full tw-flex-col tw-items-center",
|
|
64
30
|
children: [/* @__PURE__ */ jsxs("div", {
|
|
@@ -85,22 +51,13 @@ function Steps({ className, current: controlledCurrent, direction = "horizontal"
|
|
|
85
51
|
]
|
|
86
52
|
}), /* @__PURE__ */ jsxs("div", {
|
|
87
53
|
className: "ald-steps-item-content ant-steps-item-content tw-mt-2 tw-flex tw-flex-col tw-items-center",
|
|
88
|
-
children: [
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
id: statusId,
|
|
96
|
-
className: "tw-sr-only",
|
|
97
|
-
children: a11yText.status[stepStatus]
|
|
98
|
-
}),
|
|
99
|
-
item.description && /* @__PURE__ */ jsx("div", {
|
|
100
|
-
className: cn("ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4", stepStatus === "finish" || stepStatus === "error" ? "tw-text-[var(--content-tertiary)]" : "tw-text-[var(--content-secondary)]"),
|
|
101
|
-
children: item.description
|
|
102
|
-
})
|
|
103
|
-
]
|
|
54
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
55
|
+
className: cn("ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5", stepStatus === "finish" && "tw-text-[var(--content-tertiary)]", stepStatus === "process" && "tw-text-[var(--content-brand-primary)]", stepStatus === "wait" && "tw-text-[var(--content-primary)]", stepStatus === "error" && "tw-text-[var(--content-negative-secondary)]"),
|
|
56
|
+
children: item.title
|
|
57
|
+
}), item.description && /* @__PURE__ */ jsx("div", {
|
|
58
|
+
className: cn("ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4", stepStatus === "finish" || stepStatus === "error" ? "tw-text-[var(--content-tertiary)]" : "tw-text-[var(--content-secondary)]"),
|
|
59
|
+
children: item.description
|
|
60
|
+
})]
|
|
104
61
|
})]
|
|
105
62
|
}) : /* @__PURE__ */ jsxs("div", {
|
|
106
63
|
className: "ant-steps-item-container tw-flex tw-min-h-16 tw-flex-row tw-gap-3",
|
|
@@ -124,22 +81,13 @@ function Steps({ className, current: controlledCurrent, direction = "horizontal"
|
|
|
124
81
|
})]
|
|
125
82
|
}), /* @__PURE__ */ jsxs("div", {
|
|
126
83
|
className: "ald-steps-item-content ant-steps-item-content",
|
|
127
|
-
children: [
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
id: statusId,
|
|
135
|
-
className: "tw-sr-only",
|
|
136
|
-
children: a11yText.status[stepStatus]
|
|
137
|
-
}),
|
|
138
|
-
item.description && /* @__PURE__ */ jsx("div", {
|
|
139
|
-
className: cn("ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]"),
|
|
140
|
-
children: item.description
|
|
141
|
-
})
|
|
142
|
-
]
|
|
84
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
85
|
+
className: cn("ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5", stepStatus === "finish" && "tw-text-[var(--content-tertiary)]", stepStatus === "process" && "tw-text-[var(--content-brand-primary)]", stepStatus === "wait" && "tw-text-[var(--content-primary)]", stepStatus === "error" && "tw-text-[var(--content-negative-secondary)]"),
|
|
86
|
+
children: item.title
|
|
87
|
+
}), item.description && /* @__PURE__ */ jsx("div", {
|
|
88
|
+
className: cn("ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]"),
|
|
89
|
+
children: item.description
|
|
90
|
+
})]
|
|
143
91
|
})]
|
|
144
92
|
})
|
|
145
93
|
}, index);
|
package/dist/Steps/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/Steps/index.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from 'react';\nimport { cn } from '../lib/utils';\nimport { ELangType, LocaleContext } from '../locale/default';\nimport { CustomDot } from './components/CustomDot';\nimport { IStepProps, Step } from './components/Step';\n\nexport type { IStepProps };\nexport type TStatus = 'wait' | 'process' | 'finish' | 'error';\n\nexport interface IStepItem {\n description?: ReactNode;\n disabled?: boolean;\n icon?: ReactNode;\n status?: TStatus;\n subTitle?: ReactNode;\n title: ReactNode;\n}\n\nexport interface IStepsProps {\n className?: string;\n current?: number;\n direction?: 'horizontal' | 'vertical';\n defaultCurrent?: number;\n status?: TStatus;\n items?: IStepItem[];\n children?: ReactElement<IStepProps>[] | ReactElement<IStepProps>;\n}\n\nfunction getStepStatus(\n index: number,\n current: number,\n globalStatus?: TStatus,\n): TStatus {\n if (index < current) return 'finish';\n if (index === current) return globalStatus || 'process';\n return 'wait';\n}\n\n/* eslint-disable i18n/no-chinese-character -- Steps accessibility copy stays local to this bounded component migration. */\nconst stepsA11yText = {\n [ELangType.ZH_CN]: {\n workflowProgress: '工作流进度',\n status: {\n finish: '已完成',\n process: '进行中',\n wait: '未开始',\n error: '错误',\n },\n },\n [ELangType.EN]: {\n workflowProgress: 'Workflow progress',\n status: {\n finish: 'Completed',\n process: 'In progress',\n wait: 'Not started',\n error: 'Error',\n },\n },\n};\n/* eslint-enable i18n/no-chinese-character */\n\nfunction Steps({\n className,\n current: controlledCurrent,\n direction = 'horizontal',\n defaultCurrent = 0,\n status,\n items,\n children,\n}: IStepsProps) {\n const current = controlledCurrent ?? defaultCurrent;\n const accessibleIdPrefix = React.useId();\n const { locale } = React.useContext(LocaleContext);\n const a11yText =\n locale === ELangType.EN\n ? stepsA11yText[ELangType.EN]\n : stepsA11yText[ELangType.ZH_CN];\n // Support children-based API: convert children to items\n const resolvedItems: IStepItem[] =\n items ||\n React.Children.toArray(children)\n .filter(React.isValidElement)\n .map((child: any) => ({\n title: child.props.title,\n description: child.props.description,\n disabled: child.props.disabled,\n status: child.props.status,\n icon: child.props.icon,\n }));\n\n return (\n <div\n className={cn(\n 'ald-steps ant-steps ant-steps-dot ant-steps-label-vertical tw-flex',\n direction === 'vertical'\n ? 'ant-steps-vertical'\n : 'ant-steps-horizontal',\n direction === 'vertical' ? 'tw-flex-col' : 'tw-flex-row tw-items-start',\n className,\n )}\n role=\"list\"\n aria-label={a11yText.workflowProgress}\n >\n {resolvedItems.map((item, index) => {\n const stepStatus = item.status || getStepStatus(index, current, status);\n const isLast = index === resolvedItems.length - 1;\n const titleId = `${accessibleIdPrefix}-step-${index}-title`;\n const statusId = `${accessibleIdPrefix}-step-${index}-status`;\n\n return (\n <div\n key={index}\n className={cn(\n 'ald-steps-item ant-steps-item tw-flex',\n direction === 'horizontal'\n ? 'tw-flex-1 tw-flex-col tw-items-center tw-text-center'\n : 'tw-flex-row tw-gap-3 tw-py-2',\n `ald-steps-item-${stepStatus}`,\n `ant-steps-item-${stepStatus}`,\n item.disabled &&\n 'ald-steps-item-disabled tw-pointer-events-none tw-opacity-50',\n item.disabled && 'ant-steps-item-disabled',\n )}\n role=\"listitem\"\n aria-current={index === current ? 'step' : undefined}\n aria-labelledby={titleId}\n aria-describedby={statusId}\n aria-posinset={index + 1}\n aria-setsize={resolvedItems.length}\n >\n {direction === 'horizontal' ? (\n <div className=\"ant-steps-item-container tw-flex tw-w-full tw-flex-col tw-items-center\">\n <div className=\"tw-flex tw-w-full tw-items-center\">\n {index > 0 && (\n <div\n className={cn(\n 'ant-steps-item-tail tw-flex-1',\n index <= current\n ? 'tw-bg-[var(--border-brand-strong)]'\n : 'tw-bg-[var(--border-default)]',\n )}\n style={{ height: 1.5 }}\n />\n )}\n <div className=\"ald-steps-item-icon ant-steps-item-icon tw-shrink-0\">\n <span className=\"ant-steps-icon\">\n <span className=\"ant-steps-icon-dot\">\n {item.icon || CustomDot(null, { status: stepStatus })}\n </span>\n </span>\n </div>\n {!isLast && (\n <div\n className={cn(\n index === 0 && 'ant-steps-item-tail',\n 'tw-flex-1',\n index < current\n ? 'tw-bg-[var(--border-brand-strong)]'\n : 'tw-bg-[var(--border-default)]',\n )}\n style={{ height: 1.5 }}\n />\n )}\n </div>\n {/* antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器 */}\n <div className=\"ald-steps-item-content ant-steps-item-content tw-mt-2 tw-flex tw-flex-col tw-items-center\">\n <div\n id={titleId}\n className={cn(\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5',\n stepStatus === 'finish' &&\n 'tw-text-[var(--content-tertiary)]',\n stepStatus === 'process' &&\n 'tw-text-[var(--content-brand-primary)]',\n stepStatus === 'wait' &&\n 'tw-text-[var(--content-primary)]',\n stepStatus === 'error' &&\n 'tw-text-[var(--content-negative-secondary)]',\n )}\n >\n {item.title}\n </div>\n <span id={statusId} className=\"tw-sr-only\">\n {a11yText.status[stepStatus]}\n </span>\n {item.description && (\n <div\n className={cn(\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4',\n stepStatus === 'finish' || stepStatus === 'error'\n ? 'tw-text-[var(--content-tertiary)]'\n : 'tw-text-[var(--content-secondary)]',\n )}\n >\n {item.description}\n </div>\n )}\n </div>\n </div>\n ) : (\n <div className=\"ant-steps-item-container tw-flex tw-min-h-16 tw-flex-row tw-gap-3\">\n <div className=\"ald-steps-item-axis tw-relative tw-flex tw-w-4 tw-shrink-0 tw-justify-center\">\n {!isLast && (\n <div\n className={cn(\n 'ald-steps-item-tail ant-steps-item-tail',\n index < current\n ? 'ald-steps-item-tail-finish'\n : 'ald-steps-item-tail-wait',\n 'tw-absolute tw-left-1/2 tw-top-2 tw-z-0 tw--translate-x-1/2',\n index < current\n ? 'tw-bg-[var(--border-brand-strong)]'\n : 'tw-bg-[var(--border-default)]',\n )}\n style={{ width: 1.5, bottom: -24 }}\n />\n )}\n <div className=\"ald-steps-item-icon ant-steps-item-icon tw-relative tw-z-[1] tw-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-leading-none\">\n <span className=\"ant-steps-icon tw-flex tw-size-4 tw-items-center tw-justify-center tw-leading-none\">\n <span className=\"ant-steps-icon-dot tw-flex tw-size-4 tw-items-center tw-justify-center\">\n {item.icon || CustomDot(null, { status: stepStatus })}\n </span>\n </span>\n </div>\n </div>\n {/* antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器 */}\n <div className=\"ald-steps-item-content ant-steps-item-content\">\n <div\n id={titleId}\n className={cn(\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5',\n stepStatus === 'finish' &&\n 'tw-text-[var(--content-tertiary)]',\n stepStatus === 'process' &&\n 'tw-text-[var(--content-brand-primary)]',\n stepStatus === 'wait' &&\n 'tw-text-[var(--content-primary)]',\n stepStatus === 'error' &&\n 'tw-text-[var(--content-negative-secondary)]',\n )}\n >\n {item.title}\n </div>\n <span id={statusId} className=\"tw-sr-only\">\n {a11yText.status[stepStatus]}\n </span>\n {item.description && (\n <div\n className={cn(\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]',\n )}\n >\n {item.description}\n </div>\n )}\n </div>\n </div>\n )}\n </div>\n );\n })}\n </div>\n );\n}\n\nSteps.Step = Step;\n\nexport default Steps;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/Steps/index.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from 'react';\nimport { cn } from '../lib/utils';\nimport { CustomDot } from './components/CustomDot';\nimport { IStepProps, Step } from './components/Step';\n\nexport type { IStepProps };\nexport type TStatus = 'wait' | 'process' | 'finish' | 'error';\n\nexport interface IStepItem {\n description?: ReactNode;\n disabled?: boolean;\n icon?: ReactNode;\n status?: TStatus;\n subTitle?: ReactNode;\n title: ReactNode;\n}\n\nexport interface IStepsProps {\n className?: string;\n current?: number;\n direction?: 'horizontal' | 'vertical';\n defaultCurrent?: number;\n status?: TStatus;\n items?: IStepItem[];\n children?: ReactElement<IStepProps>[] | ReactElement<IStepProps>;\n}\n\nfunction getStepStatus(\n index: number,\n current: number,\n globalStatus?: TStatus,\n): TStatus {\n if (index < current) return 'finish';\n if (index === current) return globalStatus || 'process';\n return 'wait';\n}\n\nfunction Steps({\n className,\n current: controlledCurrent,\n direction = 'horizontal',\n defaultCurrent = 0,\n status,\n items,\n children,\n}: IStepsProps) {\n const current = controlledCurrent ?? defaultCurrent;\n // Support children-based API: convert children to items\n const resolvedItems: IStepItem[] =\n items ||\n React.Children.toArray(children)\n .filter(React.isValidElement)\n .map((child: any) => ({\n title: child.props.title,\n description: child.props.description,\n disabled: child.props.disabled,\n status: child.props.status,\n icon: child.props.icon,\n }));\n\n return (\n <div\n className={cn(\n 'ald-steps ant-steps ant-steps-dot ant-steps-label-vertical tw-flex',\n direction === 'vertical'\n ? 'ant-steps-vertical'\n : 'ant-steps-horizontal',\n direction === 'vertical' ? 'tw-flex-col' : 'tw-flex-row tw-items-start',\n className,\n )}\n >\n {resolvedItems.map((item, index) => {\n const stepStatus = item.status || getStepStatus(index, current, status);\n const isLast = index === resolvedItems.length - 1;\n\n return (\n <div\n key={index}\n className={cn(\n 'ald-steps-item ant-steps-item tw-flex',\n direction === 'horizontal'\n ? 'tw-flex-1 tw-flex-col tw-items-center tw-text-center'\n : 'tw-flex-row tw-gap-3 tw-py-2',\n `ald-steps-item-${stepStatus}`,\n `ant-steps-item-${stepStatus}`,\n item.disabled &&\n 'ald-steps-item-disabled tw-pointer-events-none tw-opacity-50',\n item.disabled && 'ant-steps-item-disabled',\n )}\n >\n {direction === 'horizontal' ? (\n <div className=\"ant-steps-item-container tw-flex tw-w-full tw-flex-col tw-items-center\">\n <div className=\"tw-flex tw-w-full tw-items-center\">\n {index > 0 && (\n <div\n className={cn(\n 'ant-steps-item-tail tw-flex-1',\n index <= current\n ? 'tw-bg-[var(--border-brand-strong)]'\n : 'tw-bg-[var(--border-default)]',\n )}\n style={{ height: 1.5 }}\n />\n )}\n <div className=\"ald-steps-item-icon ant-steps-item-icon tw-shrink-0\">\n <span className=\"ant-steps-icon\">\n <span className=\"ant-steps-icon-dot\">\n {item.icon || CustomDot(null, { status: stepStatus })}\n </span>\n </span>\n </div>\n {!isLast && (\n <div\n className={cn(\n index === 0 && 'ant-steps-item-tail',\n 'tw-flex-1',\n index < current\n ? 'tw-bg-[var(--border-brand-strong)]'\n : 'tw-bg-[var(--border-default)]',\n )}\n style={{ height: 1.5 }}\n />\n )}\n </div>\n {/* antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器 */}\n <div className=\"ald-steps-item-content ant-steps-item-content tw-mt-2 tw-flex tw-flex-col tw-items-center\">\n <div\n className={cn(\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5',\n stepStatus === 'finish' &&\n 'tw-text-[var(--content-tertiary)]',\n stepStatus === 'process' &&\n 'tw-text-[var(--content-brand-primary)]',\n stepStatus === 'wait' &&\n 'tw-text-[var(--content-primary)]',\n stepStatus === 'error' &&\n 'tw-text-[var(--content-negative-secondary)]',\n )}\n >\n {item.title}\n </div>\n {item.description && (\n <div\n className={cn(\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4',\n stepStatus === 'finish' || stepStatus === 'error'\n ? 'tw-text-[var(--content-tertiary)]'\n : 'tw-text-[var(--content-secondary)]',\n )}\n >\n {item.description}\n </div>\n )}\n </div>\n </div>\n ) : (\n <div className=\"ant-steps-item-container tw-flex tw-min-h-16 tw-flex-row tw-gap-3\">\n <div className=\"ald-steps-item-axis tw-relative tw-flex tw-w-4 tw-shrink-0 tw-justify-center\">\n {!isLast && (\n <div\n className={cn(\n 'ald-steps-item-tail ant-steps-item-tail',\n index < current\n ? 'ald-steps-item-tail-finish'\n : 'ald-steps-item-tail-wait',\n 'tw-absolute tw-left-1/2 tw-top-2 tw-z-0 tw--translate-x-1/2',\n index < current\n ? 'tw-bg-[var(--border-brand-strong)]'\n : 'tw-bg-[var(--border-default)]',\n )}\n style={{ width: 1.5, bottom: -24 }}\n />\n )}\n <div className=\"ald-steps-item-icon ant-steps-item-icon tw-relative tw-z-[1] tw-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-leading-none\">\n <span className=\"ant-steps-icon tw-flex tw-size-4 tw-items-center tw-justify-center tw-leading-none\">\n <span className=\"ant-steps-icon-dot tw-flex tw-size-4 tw-items-center tw-justify-center\">\n {item.icon || CustomDot(null, { status: stepStatus })}\n </span>\n </span>\n </div>\n </div>\n {/* antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器 */}\n <div className=\"ald-steps-item-content ant-steps-item-content\">\n <div\n className={cn(\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5',\n stepStatus === 'finish' &&\n 'tw-text-[var(--content-tertiary)]',\n stepStatus === 'process' &&\n 'tw-text-[var(--content-brand-primary)]',\n stepStatus === 'wait' &&\n 'tw-text-[var(--content-primary)]',\n stepStatus === 'error' &&\n 'tw-text-[var(--content-negative-secondary)]',\n )}\n >\n {item.title}\n </div>\n {item.description && (\n <div\n className={cn(\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]',\n )}\n >\n {item.description}\n </div>\n )}\n </div>\n </div>\n )}\n </div>\n );\n })}\n </div>\n );\n}\n\nSteps.Step = Step;\n\nexport default Steps;\n"],"mappings":"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"}
|
package/dist/Switch/index.js
CHANGED
|
@@ -49,17 +49,10 @@ var Switch = ({ className = "", disabled: customDisabled, loading = false, size:
|
|
|
49
49
|
type: "button",
|
|
50
50
|
role: "switch",
|
|
51
51
|
"aria-checked": !!userChecked,
|
|
52
|
-
"aria-busy": loading || void 0,
|
|
53
52
|
"data-testid": dataTestid,
|
|
54
53
|
"aria-label": ariaLabel,
|
|
55
54
|
disabled: currentDisabled,
|
|
56
|
-
className: cn("ald-switch-btn tw-relative tw-inline-flex tw-cursor-pointer tw-items-center tw-rounded-full tw-border-0 tw-p-0 tw-transition-colors tw-duration-200", userChecked ? "tw-bg-[var(--
|
|
57
|
-
"focus-visible:tw-shadow-[0_0_0_2px_var(--focus-ring)]",
|
|
58
|
-
"forced-colors:focus-visible:tw-outline",
|
|
59
|
-
"forced-colors:focus-visible:tw-outline-2",
|
|
60
|
-
"forced-colors:focus-visible:tw-outline-offset-2",
|
|
61
|
-
"forced-colors:focus-visible:tw-outline-[Highlight]"
|
|
62
|
-
], currentDisabled && "tw-cursor-not-allowed tw-opacity-40"),
|
|
55
|
+
className: cn("ald-switch-btn tw-relative tw-inline-flex tw-cursor-pointer tw-items-center tw-rounded-full tw-border-0 tw-p-0 tw-transition-colors tw-duration-200", userChecked ? "tw-bg-[var(--action-primary-normal)] hover:tw-bg-[var(--action-primary-hover)]" : "tw-bg-[var(--semantic-neutral-500)]", currentDisabled && "tw-cursor-not-allowed tw-opacity-40"),
|
|
63
56
|
style: {
|
|
64
57
|
width: trackW,
|
|
65
58
|
height: trackH
|
package/dist/Switch/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/Switch/index.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState } from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { cn } from '../lib/utils';\n\nexport type SwitchChangeEventHandler = (\n checked: boolean,\n event: React.MouseEvent<HTMLButtonElement>,\n) => void;\nexport type SwitchClickEventHandler = SwitchChangeEventHandler;\nexport type SwitchSize = 'large' | 'middle' | 'small';\n\nexport interface ISwitchProps {\n className?: string;\n checked?: boolean;\n defaultChecked?: boolean;\n disabled?: boolean;\n loading?: boolean;\n size?: SwitchSize;\n onClick?: SwitchChangeEventHandler;\n onChange?: SwitchChangeEventHandler;\n children?: React.ReactNode;\n /** 透传到内部 switch 按钮元素的 data-testid,用于自动化测试定位 */\n 'data-testid'?: string;\n /** 透传到内部 switch 按钮元素的 aria-label,用于可访问性与自动化测试定位 */\n 'aria-label'?: string;\n}\n\nconst switchSizeConfig: Record<\n SwitchSize,\n {\n trackW: number;\n trackH: number;\n thumbSize: number;\n }\n> = {\n large: {\n trackW: 36,\n trackH: 20,\n thumbSize: 16,\n },\n middle: {\n trackW: 28,\n trackH: 16,\n thumbSize: 12,\n },\n small: {\n trackW: 22,\n trackH: 12,\n thumbSize: 8,\n },\n};\n\nconst Switch: React.FC<ISwitchProps> = ({\n className = '',\n disabled: customDisabled,\n loading = false,\n size: customSize,\n checked,\n defaultChecked,\n onChange,\n onClick,\n children,\n 'data-testid': dataTestid,\n 'aria-label': ariaLabel,\n}) => {\n const contentSize = useContext(SizeContext);\n const size = customSize || contentSize || 'middle';\n\n const [userChecked, setUserChecked] = useState(\n typeof checked === 'undefined' ? defaultChecked : checked,\n );\n\n const disabled = useContext(DisabledContext);\n const mergedDisabled = customDisabled ?? disabled;\n\n const currentDisabled = loading ? true : mergedDisabled;\n\n useEffect(() => {\n if (typeof checked === 'boolean') {\n setUserChecked(checked);\n }\n }, [checked]);\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (currentDisabled) return;\n const newChecked = !userChecked;\n if (checked === undefined) {\n setUserChecked(newChecked);\n }\n onChange?.(newChecked, e);\n onClick?.(newChecked, e);\n };\n\n const { trackW, trackH, thumbSize } = switchSizeConfig[size];\n const thumbOffset = 2;\n const thumbTranslate = trackW - thumbSize - thumbOffset * 2;\n\n return (\n <span\n className={cn(\n className,\n 'ald-switch tw-inline-flex tw-items-center tw-gap-1.5 tw-text-[0]',\n `ald-switch-${size}`,\n currentDisabled && 'tw-pointer-events-none tw-cursor-default',\n {\n 'ald-switch-disabled': currentDisabled,\n 'ald-switch-checked': userChecked,\n },\n )}\n >\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={!!userChecked}\n
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/Switch/index.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState } from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { cn } from '../lib/utils';\n\nexport type SwitchChangeEventHandler = (\n checked: boolean,\n event: React.MouseEvent<HTMLButtonElement>,\n) => void;\nexport type SwitchClickEventHandler = SwitchChangeEventHandler;\nexport type SwitchSize = 'large' | 'middle' | 'small';\n\nexport interface ISwitchProps {\n className?: string;\n checked?: boolean;\n defaultChecked?: boolean;\n disabled?: boolean;\n loading?: boolean;\n size?: SwitchSize;\n onClick?: SwitchChangeEventHandler;\n onChange?: SwitchChangeEventHandler;\n children?: React.ReactNode;\n /** 透传到内部 switch 按钮元素的 data-testid,用于自动化测试定位 */\n 'data-testid'?: string;\n /** 透传到内部 switch 按钮元素的 aria-label,用于可访问性与自动化测试定位 */\n 'aria-label'?: string;\n}\n\nconst switchSizeConfig: Record<\n SwitchSize,\n {\n trackW: number;\n trackH: number;\n thumbSize: number;\n }\n> = {\n large: {\n trackW: 36,\n trackH: 20,\n thumbSize: 16,\n },\n middle: {\n trackW: 28,\n trackH: 16,\n thumbSize: 12,\n },\n small: {\n trackW: 22,\n trackH: 12,\n thumbSize: 8,\n },\n};\n\nconst Switch: React.FC<ISwitchProps> = ({\n className = '',\n disabled: customDisabled,\n loading = false,\n size: customSize,\n checked,\n defaultChecked,\n onChange,\n onClick,\n children,\n 'data-testid': dataTestid,\n 'aria-label': ariaLabel,\n}) => {\n const contentSize = useContext(SizeContext);\n const size = customSize || contentSize || 'middle';\n\n const [userChecked, setUserChecked] = useState(\n typeof checked === 'undefined' ? defaultChecked : checked,\n );\n\n const disabled = useContext(DisabledContext);\n const mergedDisabled = customDisabled ?? disabled;\n\n const currentDisabled = loading ? true : mergedDisabled;\n\n useEffect(() => {\n if (typeof checked === 'boolean') {\n setUserChecked(checked);\n }\n }, [checked]);\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (currentDisabled) return;\n const newChecked = !userChecked;\n if (checked === undefined) {\n setUserChecked(newChecked);\n }\n onChange?.(newChecked, e);\n onClick?.(newChecked, e);\n };\n\n const { trackW, trackH, thumbSize } = switchSizeConfig[size];\n const thumbOffset = 2;\n const thumbTranslate = trackW - thumbSize - thumbOffset * 2;\n\n return (\n <span\n className={cn(\n className,\n 'ald-switch tw-inline-flex tw-items-center tw-gap-1.5 tw-text-[0]',\n `ald-switch-${size}`,\n currentDisabled && 'tw-pointer-events-none tw-cursor-default',\n {\n 'ald-switch-disabled': currentDisabled,\n 'ald-switch-checked': userChecked,\n },\n )}\n >\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={!!userChecked}\n data-testid={dataTestid}\n aria-label={ariaLabel}\n disabled={currentDisabled}\n className={cn(\n 'ald-switch-btn tw-relative tw-inline-flex tw-cursor-pointer tw-items-center tw-rounded-full tw-border-0 tw-p-0 tw-transition-colors tw-duration-200',\n userChecked\n ? 'tw-bg-[var(--action-primary-normal)] hover:tw-bg-[var(--action-primary-hover)]'\n : 'tw-bg-[var(--semantic-neutral-500)]',\n currentDisabled && 'tw-cursor-not-allowed tw-opacity-40',\n )}\n style={{ width: trackW, height: trackH }}\n onClick={handleClick}\n >\n <span\n className={cn(\n 'tw-block tw-rounded-full tw-bg-[var(--background-default)] tw-shadow-sm tw-transition-transform tw-duration-200',\n )}\n style={{\n width: thumbSize,\n height: thumbSize,\n marginLeft: thumbOffset,\n transform: userChecked\n ? `translateX(${thumbTranslate}px)`\n : 'translateX(0)',\n }}\n />\n </button>\n {children && (\n <span\n className={cn(\n 'ald-switch-text tw-inline-flex tw-items-center tw-align-middle tw-text-[var(--content-primary)]',\n size === 'large' && 'tw-h-5 tw-text-base tw-leading-5',\n size === 'middle' && 'tw-h-4 tw-text-sm tw-leading-4',\n size === 'small' && 'tw-h-3 tw-text-xs tw-leading-3',\n currentDisabled && 'tw-opacity-50',\n )}\n >\n {children}\n </span>\n )}\n </span>\n );\n};\n\nexport default Switch;\n"],"mappings":";;;;;;AA4BA,IAAM,mBAOF;CACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACD,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACD,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACF;AAED,IAAM,UAAkC,EACtC,YAAY,IACZ,UAAU,gBACV,UAAU,OACV,MAAM,YACN,SACA,gBACA,UACA,SACA,UACA,eAAe,YACf,cAAc,gBACV;CACJ,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,OAAO,cAAc,eAAe;CAE1C,MAAM,CAAC,aAAa,kBAAkB,SACpC,OAAO,YAAY,cAAc,iBAAiB,QACnD;CAED,MAAM,WAAW,WAAW,gBAAgB;CAG5C,MAAM,kBAAkB,UAAU,OAFX,kBAAkB;AAIzC,iBAAgB;AACd,MAAI,OAAO,YAAY,UACrB,gBAAe,QAAQ;IAExB,CAAC,QAAQ,CAAC;CAEb,MAAM,eAAe,MAA2C;AAC9D,MAAI,gBAAiB;EACrB,MAAM,aAAa,CAAC;AACpB,MAAI,YAAY,OACd,gBAAe,WAAW;AAE5B,aAAW,YAAY,EAAE;AACzB,YAAU,YAAY,EAAE;;CAG1B,MAAM,EAAE,QAAQ,QAAQ,cAAc,iBAAiB;CACvD,MAAM,cAAc;CACpB,MAAM,iBAAiB,SAAS,YAAY,cAAc;AAE1D,QACE,qBAAC,QAAD;EACE,WAAW,GACT,WACA,oEACA,cAAc,QACd,mBAAmB,4CACnB;GACE,uBAAuB;GACvB,sBAAsB;GACvB,CACF;YAVH,CAYE,oBAAC,UAAD;GACE,MAAK;GACL,MAAK;GACL,gBAAc,CAAC,CAAC;GAChB,eAAa;GACb,cAAY;GACZ,UAAU;GACV,WAAW,GACT,uJACA,cACI,mFACA,uCACJ,mBAAmB,sCACpB;GACD,OAAO;IAAE,OAAO;IAAQ,QAAQ;IAAQ;GACxC,SAAS;aAET,oBAAC,QAAD;IACE,WAAW,GACT,kHACD;IACD,OAAO;KACL,OAAO;KACP,QAAQ;KACR,YAAY;KACZ,WAAW,cACP,cAAc,eAAe,OAC7B;KACL;IACD,CAAA;GACK,CAAA,EACR,YACC,oBAAC,QAAD;GACE,WAAW,GACT,mGACA,SAAS,WAAW,oCACpB,SAAS,YAAY,kCACrB,SAAS,WAAW,kCACpB,mBAAmB,gBACpB;GAEA;GACI,CAAA,CAEJ"}
|
|
@@ -10,18 +10,13 @@ function Cell(props) {
|
|
|
10
10
|
const { render, dataIndex, align, ellipsis } = column.columnDef.meta;
|
|
11
11
|
const colValue = _.get(row.original, dataIndex || "");
|
|
12
12
|
const node = render ? render(colValue, row.original, row.index) : colValue;
|
|
13
|
-
const isDefaultTextValue = typeof render !== "function" && (typeof colValue === "string" || typeof colValue === "number");
|
|
14
|
-
const content = isDefaultTextValue ? /* @__PURE__ */ jsx("span", {
|
|
15
|
-
className: "tw-text-typography-body-dense",
|
|
16
|
-
children: node
|
|
17
|
-
}) : node;
|
|
18
13
|
return /* @__PURE__ */ jsx("div", {
|
|
19
|
-
className: cn(prefixCls("td-default"), prefixCls(`align-${align}`)
|
|
14
|
+
className: cn(prefixCls("td-default"), prefixCls(`align-${align}`)),
|
|
20
15
|
children: ellipsis ? /* @__PURE__ */ jsx("div", {
|
|
21
16
|
className: prefixCls("td-ellipsis-content"),
|
|
22
17
|
title: typeof node === "string" ? node : void 0,
|
|
23
|
-
children:
|
|
24
|
-
}) :
|
|
18
|
+
children: node
|
|
19
|
+
}) : node
|
|
25
20
|
});
|
|
26
21
|
}
|
|
27
22
|
function CellWithErrorBoundary(props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cell.js","names":[],"sources":["../../../src/Table/components/Cell.tsx"],"sourcesContent":["import { Column, Row } from '@tanstack/react-table';\nimport { cn } from '../../lib/utils';\nimport _ from 'lodash';\nimport React, { useCallback } from 'react';\nimport { prefixCls } from '../helper';\nimport { ITableColumn, ITableProps } from '../types';\nimport ErrorBoundary from './ErrorBoundary';\n\nfunction Cell<T>(props: IProps<T>) {\n const { column, row } = props;\n const meta = column.columnDef.meta as ITableColumn<unknown>;\n const { render, dataIndex, align, ellipsis } = meta;\n\n const colValue = _.get(row.original, dataIndex || '');\n const node = render ? render(colValue, row.original, row.index) : colValue;\n
|
|
1
|
+
{"version":3,"file":"Cell.js","names":[],"sources":["../../../src/Table/components/Cell.tsx"],"sourcesContent":["import { Column, Row } from '@tanstack/react-table';\nimport { cn } from '../../lib/utils';\nimport _ from 'lodash';\nimport React, { useCallback } from 'react';\nimport { prefixCls } from '../helper';\nimport { ITableColumn, ITableProps } from '../types';\nimport ErrorBoundary from './ErrorBoundary';\n\nfunction Cell<T>(props: IProps<T>) {\n const { column, row } = props;\n const meta = column.columnDef.meta as ITableColumn<unknown>;\n const { render, dataIndex, align, ellipsis } = meta;\n\n const colValue = _.get(row.original, dataIndex || '');\n const node = render ? render(colValue, row.original, row.index) : colValue;\n\n return (\n <div className={cn(prefixCls('td-default'), prefixCls(`align-${align}`))}>\n {ellipsis ? (\n <div\n className={prefixCls('td-ellipsis-content')}\n title={typeof node === 'string' ? node : undefined}\n >\n {node}\n </div>\n ) : (\n node\n )}\n </div>\n );\n}\n\nexport default function CellWithErrorBoundary<T>(props: IProps<T>) {\n const { column } = props;\n const meta = column.columnDef.meta as ITableColumn<unknown> & {\n onError: ITableProps<object>['onError'];\n };\n const { dataIndex, onError } = meta;\n const reportError = useCallback(\n (err: Error, stack: string) => {\n if (onError) {\n onError({\n error: err,\n stack,\n extra: {\n place: 'bodyCell',\n dataIndex,\n },\n });\n }\n },\n [onError, dataIndex],\n );\n\n return (\n <ErrorBoundary onError={reportError}>\n <Cell {...props} />\n </ErrorBoundary>\n );\n}\n\nexport interface IProps<T> {\n row: Row<T>;\n column: Column<T>;\n}\n"],"mappings":";;;;;;;AAQA,SAAS,KAAQ,OAAkB;CACjC,MAAM,EAAE,QAAQ,QAAQ;CAExB,MAAM,EAAE,QAAQ,WAAW,OAAO,aADrB,OAAO,UAAU;CAG9B,MAAM,WAAW,EAAE,IAAI,IAAI,UAAU,aAAa,GAAG;CACrD,MAAM,OAAO,SAAS,OAAO,UAAU,IAAI,UAAU,IAAI,MAAM,GAAG;AAElE,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,UAAU,aAAa,EAAE,UAAU,SAAS,QAAQ,CAAC;YACrE,WACC,oBAAC,OAAD;GACE,WAAW,UAAU,sBAAsB;GAC3C,OAAO,OAAO,SAAS,WAAW,OAAO;aAExC;GACG,CAAA,GAEN;EAEE,CAAA;;AAIV,SAAwB,sBAAyB,OAAkB;CACjE,MAAM,EAAE,WAAW;CAInB,MAAM,EAAE,WAAW,YAHN,OAAO,UAAU;AAoB9B,QACE,oBAAC,eAAD;EAAe,SAjBG,aACjB,KAAY,UAAkB;AAC7B,OAAI,QACF,SAAQ;IACN,OAAO;IACP;IACA,OAAO;KACL,OAAO;KACP;KACD;IACF,CAAC;KAGN,CAAC,SAAS,UAAU,CACrB;YAIG,oBAAC,MAAD,EAAM,GAAI,OAAS,CAAA;EACL,CAAA"}
|
|
@@ -20,13 +20,9 @@ function ExpandCell(props) {
|
|
|
20
20
|
const expandable = getExpandableConfig(propsExpandable);
|
|
21
21
|
const defaultExpandIconRender = (params) => {
|
|
22
22
|
const { record, onExpand, isExpanded: isExpandedIcon } = params;
|
|
23
|
-
return /* @__PURE__ */ jsx("
|
|
24
|
-
type: "button",
|
|
23
|
+
return /* @__PURE__ */ jsx("span", {
|
|
25
24
|
className: prefixCls("expand-btn-inner"),
|
|
26
|
-
|
|
27
|
-
"aria-expanded": isExpandedIcon,
|
|
28
|
-
onClick: (event) => {
|
|
29
|
-
event.stopPropagation();
|
|
25
|
+
onClick: () => {
|
|
30
26
|
if (isLeaf) return;
|
|
31
27
|
onExpand(record, !isExpanded);
|
|
32
28
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandCell.js","names":[],"sources":["../../../src/Table/components/ExpandCell.tsx"],"sourcesContent":["import _ from 'lodash';\nimport React from 'react';\nimport { ArrowDownLightLine, ArrowRightLightLine } from '../../Icon';\nimport { getRowKey, prefixCls } from '../helper';\nimport { IExpandableInfo, getExpandableConfig } from '../hooks/useExpandable';\nimport { IExpandIconProps, ITableExpandable, TRowKey } from '../types';\n\nexport default function ExpandCell<TDataItem extends object>(\n props: IProps<TDataItem>,\n) {\n const {\n children,\n expandableInfo,\n data,\n rowKey,\n expandable: propsExpandable,\n } = props;\n if (!expandableInfo.isExpandable || !rowKey) {\n // 配置了折叠展开时,会在前面的流程中强制检查 rowKey 字段是否存在\n return <>{children}</>;\n }\n const { expandItemMap, onExpand } = expandableInfo;\n const key = getRowKey(data, rowKey);\n const expandItem = expandItemMap[key];\n\n if (!expandItem) {\n console.error('expandItem in not found', key, expandItemMap);\n return <>{children}</>;\n }\n const { level, isExpanded, isLeaf } = expandItem;\n\n const expandable = getExpandableConfig(propsExpandable);\n const defaultExpandIconRender = (params: IExpandIconProps<TDataItem>) => {\n const { record, onExpand, isExpanded: isExpandedIcon } = params;\n return (\n <
|
|
1
|
+
{"version":3,"file":"ExpandCell.js","names":[],"sources":["../../../src/Table/components/ExpandCell.tsx"],"sourcesContent":["import _ from 'lodash';\nimport React from 'react';\nimport { ArrowDownLightLine, ArrowRightLightLine } from '../../Icon';\nimport { getRowKey, prefixCls } from '../helper';\nimport { IExpandableInfo, getExpandableConfig } from '../hooks/useExpandable';\nimport { IExpandIconProps, ITableExpandable, TRowKey } from '../types';\n\nexport default function ExpandCell<TDataItem extends object>(\n props: IProps<TDataItem>,\n) {\n const {\n children,\n expandableInfo,\n data,\n rowKey,\n expandable: propsExpandable,\n } = props;\n if (!expandableInfo.isExpandable || !rowKey) {\n // 配置了折叠展开时,会在前面的流程中强制检查 rowKey 字段是否存在\n return <>{children}</>;\n }\n const { expandItemMap, onExpand } = expandableInfo;\n const key = getRowKey(data, rowKey);\n const expandItem = expandItemMap[key];\n\n if (!expandItem) {\n console.error('expandItem in not found', key, expandItemMap);\n return <>{children}</>;\n }\n const { level, isExpanded, isLeaf } = expandItem;\n\n const expandable = getExpandableConfig(propsExpandable);\n const defaultExpandIconRender = (params: IExpandIconProps<TDataItem>) => {\n const { record, onExpand, isExpanded: isExpandedIcon } = params;\n return (\n <span\n className={prefixCls('expand-btn-inner')}\n onClick={() => {\n if (isLeaf) {\n return;\n }\n onExpand(record, !isExpanded);\n }}\n >\n {isExpandedIcon ? <ArrowDownLightLine /> : <ArrowRightLightLine />}\n </span>\n );\n };\n const expandIcon = expandable.expandIcon || defaultExpandIconRender;\n\n const iconNode = isLeaf\n ? null\n : expandIcon({\n record: data,\n onExpand,\n isExpanded: !!isExpanded,\n });\n\n return (\n <div className={prefixCls('expandable-td')}>\n <div className={prefixCls('indent-list')}>\n {_.map(_.range(level), (i) => {\n return <div className={prefixCls('indent-item')} key={i} />;\n })}\n </div>\n <div className={prefixCls('expand-btn')}>{iconNode}</div>\n <div className={prefixCls('expand-content')}>{children}</div>\n </div>\n );\n}\n\ninterface IProps<TDataItem extends object> {\n expandableInfo: IExpandableInfo<TDataItem>;\n data: TDataItem;\n children: React.ReactNode;\n rowKey?: TRowKey<TDataItem>;\n expandable?: ITableExpandable<TDataItem> | boolean;\n}\n"],"mappings":";;;;;;;;AAOA,SAAwB,WACtB,OACA;CACA,MAAM,EACJ,UACA,gBACA,MACA,QACA,YAAY,oBACV;AACJ,KAAI,CAAC,eAAe,gBAAgB,CAAC,OAEnC,QAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;CAExB,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,MAAM,UAAU,MAAM,OAAO;CACnC,MAAM,aAAa,cAAc;AAEjC,KAAI,CAAC,YAAY;AACf,UAAQ,MAAM,2BAA2B,KAAK,cAAc;AAC5D,SAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;;CAExB,MAAM,EAAE,OAAO,YAAY,WAAW;CAEtC,MAAM,aAAa,oBAAoB,gBAAgB;CACvD,MAAM,2BAA2B,WAAwC;EACvE,MAAM,EAAE,QAAQ,UAAU,YAAY,mBAAmB;AACzD,SACE,oBAAC,QAAD;GACE,WAAW,UAAU,mBAAmB;GACxC,eAAe;AACb,QAAI,OACF;AAEF,aAAS,QAAQ,CAAC,WAAW;;aAG9B,iBAAiB,oBAAC,MAAD,EAAsB,CAAA,GAAG,oBAAC,QAAD,EAAuB,CAAA;GAC7D,CAAA;;CAGX,MAAM,aAAa,WAAW,cAAc;CAE5C,MAAM,WAAW,SACb,OACA,WAAW;EACT,QAAQ;EACR;EACA,YAAY,CAAC,CAAC;EACf,CAAC;AAEN,QACE,qBAAC,OAAD;EAAK,WAAW,UAAU,gBAAgB;YAA1C;GACE,oBAAC,OAAD;IAAK,WAAW,UAAU,cAAc;cACrC,EAAE,IAAI,EAAE,MAAM,MAAM,GAAG,MAAM;AAC5B,YAAO,oBAAC,OAAD,EAAK,WAAW,UAAU,cAAc,EAAY,EAAL,EAAK;MAC3D;IACE,CAAA;GACN,oBAAC,OAAD;IAAK,WAAW,UAAU,aAAa;cAAG;IAAe,CAAA;GACzD,oBAAC,OAAD;IAAK,WAAW,UAAU,iBAAiB;IAAG;IAAe,CAAA;GACzD"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { cn } from "../../../lib/utils.js";
|
|
2
1
|
import { LocaleContext, getTranslator } from "../../../locale/default.js";
|
|
3
2
|
import TextLink from "../../../TextLink/index.js";
|
|
4
3
|
import Pagination from "../../../Pagination/index.js";
|
|
@@ -24,7 +23,7 @@ function TableFooter(props) {
|
|
|
24
23
|
children: getCheckboxAllNode?.(t.Table.selectAll)
|
|
25
24
|
}),
|
|
26
25
|
/* @__PURE__ */ jsxs("div", {
|
|
27
|
-
className:
|
|
26
|
+
className: prefixCls("footer-row-selection-selected"),
|
|
28
27
|
children: [
|
|
29
28
|
t.Table.selected,
|
|
30
29
|
/* @__PURE__ */ jsx(TextLink, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Table/components/Footer/index.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport { Pagination } from '../../..';\nimport { IPaginationProps } from '../../../Pagination/types';\nimport TextLink from '../../../TextLink';\nimport {
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Table/components/Footer/index.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport { Pagination } from '../../..';\nimport { IPaginationProps } from '../../../Pagination/types';\nimport TextLink from '../../../TextLink';\nimport { LocaleContext, getTranslator } from '../../../locale/default';\nimport { prefixCls } from '../../helper';\nimport { IRowSelectionInfo } from '../../hooks/useRowSelection';\nimport { ITableProps } from '../../types';\n\nexport default function TableFooter<TDataItem extends object>(\n props: IProps<TDataItem>,\n) {\n const { locale } = useContext(LocaleContext);\n const t = getTranslator(locale);\n\n const {\n pagination,\n scroll = {},\n scrollToFirstRow,\n isShowPagination,\n rowSelectionInfo,\n } = props;\n\n // 选择行\n const {\n getCheckboxAllNode,\n selectedRowKeys,\n selectedRowKeysInCurrPage,\n items,\n isShowRowSelectionInFooter,\n onChange: changeSelectedRowKeys,\n } = rowSelectionInfo;\n\n const btnItems = [\n {\n key: '$UN_SELECT_ALL$',\n label: t.Table.cancelSelect,\n onClick: () => rowSelectionInfo.unSelectAll(),\n },\n ...items,\n ];\n\n const rowSelectionNode = isShowRowSelectionInFooter && (\n <div className={prefixCls('footer-row-selection')}>\n <div className={prefixCls('footer-row-selection-btn')}>\n {getCheckboxAllNode?.(t.Table.selectAll)}\n </div>\n <div className={prefixCls('footer-row-selection-selected')}>\n {t.Table.selected}\n <TextLink className={prefixCls('footer-row-selection-selected-num')}>\n {selectedRowKeys.length}\n </TextLink>\n {t.Table.item}\n </div>\n {btnItems.map((btnItem) => {\n return (\n <div\n key={btnItem.key}\n className={prefixCls('footer-row-selection-item')}\n onClick={(e) => {\n btnItem.onClick(e);\n }}\n >\n <TextLink>{btnItem.label}</TextLink>\n </div>\n );\n })}\n </div>\n );\n\n // 翻页器\n const onChangePage = useCallback(\n (page: number) => {\n const { onChange = () => {} } = pagination || {};\n const { scrollToFirstRowOnChange = true } = scroll;\n if (scrollToFirstRowOnChange) {\n scrollToFirstRow();\n }\n onChange(page);\n // 翻页后,清空已选行\n changeSelectedRowKeys([]);\n },\n [scrollToFirstRow, scroll, pagination, changeSelectedRowKeys],\n );\n\n const pager = isShowPagination && pagination && (\n <div className={prefixCls('pager')}>\n <Pagination hideOnSinglePage {...pagination} onChange={onChangePage} />\n </div>\n );\n\n const isShowRowSelection =\n rowSelectionInfo.isRowSelectionEnabled &&\n selectedRowKeysInCurrPage.length > 0;\n\n const isShowFooter = isShowPagination || isShowRowSelection;\n\n return isShowFooter ? (\n <div className={prefixCls('footer')}>\n {rowSelectionNode}\n {pager}\n </div>\n ) : null;\n}\n\ninterface IProps<TDataItem extends object> {\n isShowPagination: boolean;\n rowSelectionInfo: IRowSelectionInfo<TDataItem>;\n pagination?: IPaginationProps;\n scroll?: ITableProps<TDataItem>['scroll'];\n scrollToFirstRow: () => void;\n}\n"],"mappings":";;;;;;;AASA,SAAwB,YACtB,OACA;CACA,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,EACJ,YACA,SAAS,EAAE,EACX,kBACA,kBACA,qBACE;CAGJ,MAAM,EACJ,oBACA,iBACA,2BACA,OACA,4BACA,UAAU,0BACR;CAEJ,MAAM,WAAW,CACf;EACE,KAAK;EACL,OAAO,EAAE,MAAM;EACf,eAAe,iBAAiB,aAAa;EAC9C,EACD,GAAG,MACJ;CAED,MAAM,mBAAmB,8BACvB,qBAAC,OAAD;EAAK,WAAW,UAAU,uBAAuB;YAAjD;GACE,oBAAC,OAAD;IAAK,WAAW,UAAU,2BAA2B;cAClD,qBAAqB,EAAE,MAAM,UAAU;IACpC,CAAA;GACN,qBAAC,OAAD;IAAK,WAAW,UAAU,gCAAgC;cAA1D;KACG,EAAE,MAAM;KACT,oBAAC,UAAD;MAAU,WAAW,UAAU,oCAAoC;gBAChE,gBAAgB;MACR,CAAA;KACV,EAAE,MAAM;KACL;;GACL,SAAS,KAAK,YAAY;AACzB,WACE,oBAAC,OAAD;KAEE,WAAW,UAAU,4BAA4B;KACjD,UAAU,MAAM;AACd,cAAQ,QAAQ,EAAE;;eAGpB,oBAAC,UAAD,EAAA,UAAW,QAAQ,OAAiB,CAAA;KAChC,EAPC,QAAQ,IAOT;KAER;GACE;;CAIR,MAAM,eAAe,aAClB,SAAiB;EAChB,MAAM,EAAE,iBAAiB,OAAO,cAAc,EAAE;EAChD,MAAM,EAAE,2BAA2B,SAAS;AAC5C,MAAI,yBACF,mBAAkB;AAEpB,WAAS,KAAK;AAEd,wBAAsB,EAAE,CAAC;IAE3B;EAAC;EAAkB;EAAQ;EAAY;EAAsB,CAC9D;CAED,MAAM,QAAQ,oBAAoB,cAChC,oBAAC,OAAD;EAAK,WAAW,UAAU,QAAQ;YAChC,oBAAC,YAAD;GAAY,kBAAA;GAAiB,GAAI;GAAY,UAAU;GAAgB,CAAA;EACnE,CAAA;CAGR,MAAM,qBACJ,iBAAiB,yBACjB,0BAA0B,SAAS;AAIrC,QAFqB,oBAAoB,qBAGvC,qBAAC,OAAD;EAAK,WAAW,UAAU,SAAS;YAAnC,CACG,kBACA,MACG;MACJ"}
|
|
@@ -9,8 +9,6 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
9
9
|
function Header(props) {
|
|
10
10
|
const { column } = props;
|
|
11
11
|
const { title, dataIndex, align, ellipsis, sortOrder, onSort } = column.columnDef.meta;
|
|
12
|
-
const isSortable = sortOrder !== void 0 && !!dataIndex && typeof onSort === "function";
|
|
13
|
-
const ariaSort = sortOrder === "ascend" ? "ascending" : sortOrder === "descend" ? "descending" : "none";
|
|
14
12
|
let sortIcon = /* @__PURE__ */ jsx(Memo$1, {
|
|
15
13
|
size: 20,
|
|
16
14
|
color: "var(--action-neutral-normal)"
|
|
@@ -24,7 +22,7 @@ function Header(props) {
|
|
|
24
22
|
color: "var(--action-primary-normal)"
|
|
25
23
|
});
|
|
26
24
|
const onClickTh = useCallback((e) => {
|
|
27
|
-
if (
|
|
25
|
+
if (sortOrder === void 0 || !dataIndex || typeof onSort !== "function") return;
|
|
28
26
|
e.stopPropagation();
|
|
29
27
|
let newSortOrder;
|
|
30
28
|
if (sortOrder === "ascend") newSortOrder = "descend";
|
|
@@ -33,35 +31,29 @@ function Header(props) {
|
|
|
33
31
|
onSort(dataIndex, newSortOrder);
|
|
34
32
|
}, [
|
|
35
33
|
dataIndex,
|
|
36
|
-
isSortable,
|
|
37
34
|
onSort,
|
|
38
35
|
sortOrder
|
|
39
36
|
]);
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
className: prefixCls("sort-
|
|
44
|
-
children:
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
37
|
+
let content = title;
|
|
38
|
+
if (typeof content === "string") {
|
|
39
|
+
if (sortOrder !== void 0) content = /* @__PURE__ */ jsxs("span", {
|
|
40
|
+
className: prefixCls("sort-th-inner"),
|
|
41
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
42
|
+
className: prefixCls("sort-title"),
|
|
43
|
+
children: title
|
|
44
|
+
}), /* @__PURE__ */ jsx("span", {
|
|
45
|
+
className: prefixCls("sort-btn"),
|
|
46
|
+
children: sortIcon
|
|
47
|
+
})]
|
|
48
|
+
});
|
|
49
|
+
}
|
|
51
50
|
return typeof title === "string" ? /* @__PURE__ */ jsx("div", {
|
|
52
|
-
|
|
53
|
-
"aria-sort": isSortable ? ariaSort : void 0,
|
|
54
|
-
className: cn(prefixCls("th-default"), "tw-text-typography-label", prefixCls(`align-${align}`), {
|
|
51
|
+
className: cn(prefixCls("th-default"), prefixCls(`align-${align}`), {
|
|
55
52
|
[prefixCls("td-ellipsis-content")]: ellipsis,
|
|
56
|
-
[prefixCls("th-sortable")]:
|
|
53
|
+
[prefixCls("th-sortable")]: sortOrder !== void 0
|
|
57
54
|
}),
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
className: prefixCls("sort-trigger"),
|
|
61
|
-
"aria-label": `Sort by ${title}`,
|
|
62
|
-
onClick: onClickTh,
|
|
63
|
-
children: content
|
|
64
|
-
}) : content
|
|
55
|
+
onClick: onClickTh,
|
|
56
|
+
children: content
|
|
65
57
|
}, dataIndex) : /* @__PURE__ */ jsx(Fragment, { children: title });
|
|
66
58
|
}
|
|
67
59
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","names":[],"sources":["../../../src/Table/components/Header.tsx"],"sourcesContent":["import { Column } from '@tanstack/react-table';\nimport { cn } from '../../lib/utils';\nimport React, { MouseEventHandler, useCallback } from 'react';\nimport SortAscIcon from '../../Icon/components/SortAscendingOrderColor';\nimport SortIcon from '../../Icon/components/SortColor';\nimport SortDescIcon from '../../Icon/components/SortDescendingOrderColor';\nimport { prefixCls } from '../helper';\nimport { ITableColumn, ITableProps } from '../types';\n\nexport default function Header<T extends object>(props: IProps<T>) {\n const { column } = props;\n const { title, dataIndex, align, ellipsis, sortOrder, onSort } = column\n .columnDef.meta as ITableColumn & { onSort: ITableProps<T>['onSort'] };\n
|
|
1
|
+
{"version":3,"file":"Header.js","names":[],"sources":["../../../src/Table/components/Header.tsx"],"sourcesContent":["import { Column } from '@tanstack/react-table';\nimport { cn } from '../../lib/utils';\nimport React, { MouseEventHandler, useCallback } from 'react';\nimport SortAscIcon from '../../Icon/components/SortAscendingOrderColor';\nimport SortIcon from '../../Icon/components/SortColor';\nimport SortDescIcon from '../../Icon/components/SortDescendingOrderColor';\nimport { prefixCls } from '../helper';\nimport { ITableColumn, ITableProps } from '../types';\n\nexport default function Header<T extends object>(props: IProps<T>) {\n const { column } = props;\n const { title, dataIndex, align, ellipsis, sortOrder, onSort } = column\n .columnDef.meta as ITableColumn & { onSort: ITableProps<T>['onSort'] };\n\n let sortIcon = <SortIcon size={20} color={'var(--action-neutral-normal)'} />;\n if (sortOrder === 'ascend') {\n sortIcon = <SortAscIcon size={20} color={'var(--action-primary-normal)'} />;\n } else if (sortOrder === 'descend') {\n sortIcon = (\n <SortDescIcon size={20} color={'var(--action-primary-normal)'} />\n );\n }\n\n const onClickTh = useCallback<MouseEventHandler>(\n (e) => {\n if (\n sortOrder === undefined ||\n !dataIndex ||\n typeof onSort !== 'function'\n ) {\n return;\n }\n e.stopPropagation();\n\n let newSortOrder: typeof sortOrder;\n if (sortOrder === 'ascend') {\n newSortOrder = 'descend';\n } else if (sortOrder === 'descend') {\n newSortOrder = null;\n } else {\n newSortOrder = 'ascend';\n }\n onSort(dataIndex, newSortOrder);\n },\n [dataIndex, onSort, sortOrder],\n );\n\n let content = title;\n if (typeof content === 'string') {\n if (sortOrder !== undefined) {\n content = (\n <span className={prefixCls('sort-th-inner')}>\n <span className={prefixCls('sort-title')}>{title}</span>\n <span className={prefixCls('sort-btn')}>{sortIcon}</span>\n </span>\n );\n }\n }\n\n return typeof title === 'string' ? (\n <div\n key={dataIndex}\n className={cn(prefixCls('th-default'), prefixCls(`align-${align}`), {\n [prefixCls('td-ellipsis-content')]: ellipsis,\n [prefixCls('th-sortable')]: sortOrder !== undefined,\n })}\n onClick={onClickTh}\n >\n {content}\n </div>\n ) : (\n <>{title}</>\n );\n}\n\nexport interface IProps<T> {\n column: Column<T>;\n}\n"],"mappings":";;;;;;;;AASA,SAAwB,OAAyB,OAAkB;CACjE,MAAM,EAAE,WAAW;CACnB,MAAM,EAAE,OAAO,WAAW,OAAO,UAAU,WAAW,WAAW,OAC9D,UAAU;CAEb,IAAI,WAAW,oBAAC,QAAD;EAAU,MAAM;EAAI,OAAO;EAAkC,CAAA;AAC5E,KAAI,cAAc,SAChB,YAAW,oBAAC,MAAD;EAAa,MAAM;EAAI,OAAO;EAAkC,CAAA;UAClE,cAAc,UACvB,YACE,oBAAC,QAAD;EAAc,MAAM;EAAI,OAAO;EAAkC,CAAA;CAIrE,MAAM,YAAY,aACf,MAAM;AACL,MACE,cAAc,UACd,CAAC,aACD,OAAO,WAAW,WAElB;AAEF,IAAE,iBAAiB;EAEnB,IAAI;AACJ,MAAI,cAAc,SAChB,gBAAe;WACN,cAAc,UACvB,gBAAe;MAEf,gBAAe;AAEjB,SAAO,WAAW,aAAa;IAEjC;EAAC;EAAW;EAAQ;EAAU,CAC/B;CAED,IAAI,UAAU;AACd,KAAI,OAAO,YAAY,UACrB;MAAI,cAAc,OAChB,WACE,qBAAC,QAAD;GAAM,WAAW,UAAU,gBAAgB;aAA3C,CACE,oBAAC,QAAD;IAAM,WAAW,UAAU,aAAa;cAAG;IAAa,CAAA,EACxD,oBAAC,QAAD;IAAM,WAAW,UAAU,WAAW;cAAG;IAAgB,CAAA,CACpD;;;AAKb,QAAO,OAAO,UAAU,WACtB,oBAAC,OAAD;EAEE,WAAW,GAAG,UAAU,aAAa,EAAE,UAAU,SAAS,QAAQ,EAAE;IACjE,UAAU,sBAAsB,GAAG;IACnC,UAAU,cAAc,GAAG,cAAc;GAC3C,CAAC;EACF,SAAS;YAER;EACG,EARC,UAQD,GAEN,oBAAA,UAAA,EAAA,UAAG,OAAS,CAAA"}
|
|
@@ -5,13 +5,17 @@ import { useCallback } from "react";
|
|
|
5
5
|
function useFixed({ columnWidths, tableColumns, y, scrollbarWidth }) {
|
|
6
6
|
return useCallback((index, isHeader = false) => {
|
|
7
7
|
const { fixed } = tableColumns[index].meta;
|
|
8
|
+
const previousFixed = (tableColumns[index - 1]?.meta)?.fixed;
|
|
9
|
+
const nextFixed = (tableColumns[index + 1]?.meta)?.fixed;
|
|
8
10
|
const style = {};
|
|
9
11
|
if (fixed === "left") style.left = getFixedColumnOffset(columnWidths, index, true);
|
|
10
12
|
else if (fixed === "right") style.right = getFixedColumnOffset(columnWidths, index, false) + (isHeader && y !== void 0 ? scrollbarWidth : 0);
|
|
11
13
|
return {
|
|
12
14
|
className: cn({
|
|
13
15
|
[prefixCls("fixed-left")]: fixed === "left",
|
|
14
|
-
[prefixCls("fixed-
|
|
16
|
+
[prefixCls("fixed-left-last")]: fixed === "left" && nextFixed !== "left",
|
|
17
|
+
[prefixCls("fixed-right")]: fixed === "right",
|
|
18
|
+
[prefixCls("fixed-right-first")]: fixed === "right" && previousFixed !== "right"
|
|
15
19
|
}),
|
|
16
20
|
style,
|
|
17
21
|
fixed
|