@aloudata/aloudata-design 3.0.0-beta.9 → 3.0.1
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/AProgress/index.d.ts +1 -1
- package/dist/AProgress/index.js +19 -5
- package/dist/AProgress/index.js.map +1 -1
- package/dist/Alert/index.d.ts +1 -1
- package/dist/Alert/index.js +22 -8
- package/dist/Alert/index.js.map +1 -1
- package/dist/Avatar/component/Avatar/index.d.ts +1 -1
- package/dist/Avatar/component/Avatar/index.js +4 -4
- package/dist/Avatar/component/Avatar/index.js.map +1 -1
- package/dist/Avatar/component/Avatar/type.d.ts +1 -1
- package/dist/Avatar/component/Avatar/type.js +6 -1
- package/dist/Avatar/component/Avatar/type.js.map +1 -1
- package/dist/Avatar/index.js +67 -8
- package/dist/Avatar/index.js.map +1 -1
- package/dist/Badge/index.d.ts +1 -0
- package/dist/Badge/index.js +32 -9
- package/dist/Badge/index.js.map +1 -1
- package/dist/Breadcrumb/index.js +21 -12
- package/dist/Breadcrumb/index.js.map +1 -1
- package/dist/Button/index.d.ts +2 -0
- package/dist/Button/index.js +39 -32
- package/dist/Button/index.js.map +1 -1
- package/dist/Card/index.js +5 -5
- package/dist/Card/index.js.map +1 -1
- package/dist/Checkbox/index.js +5 -12
- package/dist/Checkbox/index.js.map +1 -1
- package/dist/Checkbox/type.d.ts +3 -1
- package/dist/Collapse/index.js +40 -24
- package/dist/Collapse/index.js.map +1 -1
- package/dist/DataPreviewTable/components/Body/Cell.js +5 -4
- package/dist/DataPreviewTable/components/Body/Cell.js.map +1 -1
- package/dist/DataPreviewTable/components/Body/Error.js +1 -1
- package/dist/DataPreviewTable/components/Body/Error.js.map +1 -1
- package/dist/DataPreviewTable/components/Body/index.js +2 -1
- package/dist/DataPreviewTable/components/Body/index.js.map +1 -1
- package/dist/DataPreviewTable/components/DragBar/index.js +1 -1
- package/dist/DataPreviewTable/components/DragBar/index.js.map +1 -1
- package/dist/DataPreviewTable/components/Header/index.js +14 -12
- package/dist/DataPreviewTable/components/Header/index.js.map +1 -1
- package/dist/DataPreviewTable/index.js +5 -6
- package/dist/DataPreviewTable/index.js.map +1 -1
- package/dist/DatePicker/index.d.ts +4 -0
- package/dist/DatePicker/index.js +8 -6
- package/dist/DatePicker/index.js.map +1 -1
- package/dist/Drawer/index.d.ts +1 -0
- package/dist/Drawer/index.js +102 -47
- package/dist/Drawer/index.js.map +1 -1
- package/dist/Dropdown/index.d.ts +5 -0
- package/dist/Dropdown/index.js +155 -34
- package/dist/Dropdown/index.js.map +1 -1
- package/dist/Form/index.d.ts +45 -5
- package/dist/Form/index.js +59 -34
- package/dist/Form/index.js.map +1 -1
- package/dist/HighlightText/index.js +1 -1
- package/dist/HighlightText/index.js.map +1 -1
- package/dist/Input/components/Input/index.d.ts +5 -2
- package/dist/Input/components/Input/index.js +18 -6
- package/dist/Input/components/Input/index.js.map +1 -1
- package/dist/InputNumber/index.js +1 -0
- package/dist/InputNumber/index.js.map +1 -1
- package/dist/InputNumber/type.d.ts +2 -2
- package/dist/InputSearch/index.d.ts +3 -0
- package/dist/InputSearch/index.js +3 -2
- package/dist/InputSearch/index.js.map +1 -1
- package/dist/Layout/index.js +1 -1
- package/dist/Layout/index.js.map +1 -1
- package/dist/LogicTree/DisplayLogicTree.d.ts +1 -1
- package/dist/LogicTree/DisplayLogicTree.js.map +1 -1
- package/dist/LogicTree/components/DisplayLogicItem/index.d.ts +1 -1
- package/dist/LogicTree/components/DisplayLogicItem/index.js +1 -1
- package/dist/LogicTree/components/DisplayLogicItem/index.js.map +1 -1
- package/dist/LogicTree/components/LogicItem/index.js +2 -3
- package/dist/LogicTree/components/LogicItem/index.js.map +1 -1
- package/dist/LogicTree/index.d.ts +1 -1
- package/dist/LogicTree/index.js +26 -10
- package/dist/LogicTree/index.js.map +1 -1
- package/dist/MemberPicker/components/NickLabel.js +1 -1
- package/dist/MemberPicker/components/NickLabel.js.map +1 -1
- package/dist/MemberPicker/components/Panel.js +13 -14
- package/dist/MemberPicker/components/Panel.js.map +1 -1
- package/dist/MemberPicker/index.js +10 -5
- package/dist/MemberPicker/index.js.map +1 -1
- package/dist/Menu/index.d.ts +4 -0
- package/dist/Menu/index.js +35 -13
- package/dist/Menu/index.js.map +1 -1
- package/dist/Modal/index.d.ts +5 -2
- package/dist/Modal/index.js +119 -66
- package/dist/Modal/index.js.map +1 -1
- package/dist/Popconfirm/index.js +6 -1
- package/dist/Popconfirm/index.js.map +1 -1
- package/dist/Popover/index.js +5 -3
- package/dist/Popover/index.js.map +1 -1
- package/dist/Progress/index.d.ts +0 -3
- package/dist/Progress/index.js +0 -3
- package/dist/Progress/index.js.map +1 -1
- package/dist/Radio/components/Radio/index.js +14 -25
- package/dist/Radio/components/Radio/index.js.map +1 -1
- package/dist/RenameInput/index.js +0 -1
- package/dist/RenameInput/index.js.map +1 -1
- package/dist/Select/BaseSelect.js +12 -7
- package/dist/Select/BaseSelect.js.map +1 -1
- package/dist/Select/Selector/MultipleSelector.js +10 -6
- package/dist/Select/Selector/MultipleSelector.js.map +1 -1
- package/dist/Select/Selector/index.d.ts +2 -0
- package/dist/Select/Selector/index.js +1 -1
- package/dist/Select/Selector/index.js.map +1 -1
- package/dist/Select/components/Suffix.js +1 -1
- package/dist/Select/components/Suffix.js.map +1 -1
- package/dist/Select/interface.d.ts +4 -0
- package/dist/Select/utils/getWidthStyle.js.map +1 -1
- package/dist/Steps/index.js +6 -6
- package/dist/Steps/index.js.map +1 -1
- package/dist/Switch/index.js +21 -7
- package/dist/Switch/index.js.map +1 -1
- package/dist/Table/components/Footer/index.js +1 -1
- package/dist/Table/components/Footer/index.js.map +1 -1
- package/dist/Table/hooks/useRowDnd.js +2 -8
- package/dist/Table/hooks/useRowDnd.js.map +1 -1
- package/dist/Table/hooks/useRowSelection.d.ts +1 -1
- package/dist/Table/hooks/useRowSelection.js +7 -9
- package/dist/Table/hooks/useRowSelection.js.map +1 -1
- package/dist/Table/index.js +1 -1
- package/dist/Table/index.js.map +1 -1
- package/dist/Tabs/index.js +37 -30
- package/dist/Tabs/index.js.map +1 -1
- package/dist/Tooltip/index.js +5 -3
- package/dist/Tooltip/index.js.map +1 -1
- package/dist/Tour/index.js +48 -38
- package/dist/Tour/index.js.map +1 -1
- package/dist/Tree/DirectoryTree.d.ts +2 -2
- package/dist/Tree/DirectoryTree.js.map +1 -1
- package/dist/Tree/Tree.d.ts +13 -2
- package/dist/Tree/Tree2.js +86 -8
- package/dist/Tree/Tree2.js.map +1 -1
- package/dist/Tree/utils/composeAllowDrop.d.ts +14 -0
- package/dist/Tree/utils/composeAllowDrop.js +20 -0
- package/dist/Tree/utils/composeAllowDrop.js.map +1 -0
- package/dist/Upload/index.d.ts +15 -2
- package/dist/Upload/index.js +4 -2
- package/dist/Upload/index.js.map +1 -1
- package/dist/_utils/floatingLayer.d.ts +15 -0
- package/dist/_utils/floatingLayer.js +30 -0
- package/dist/_utils/floatingLayer.js.map +1 -0
- package/dist/_utils/storybookArgTypes.d.ts +11 -0
- package/dist/_utils/storybookArgTypes.js +2 -0
- package/dist/aloudata-design.css +1 -1
- package/dist/index.d.ts +15 -6
- package/dist/index.js +8 -3
- package/dist/theme/createTheme.d.ts +2 -0
- package/dist/theme/createTheme.js +46 -0
- package/dist/theme/createTheme.js.map +1 -0
- package/dist/theme/defaultTheme.d.ts +2 -0
- package/dist/theme/defaultTheme.js +19 -0
- package/dist/theme/defaultTheme.js.map +1 -0
- package/dist/theme/index.d.ts +5 -0
- package/dist/theme/index.js +4 -0
- package/dist/theme/initAldTheme.d.ts +2 -0
- package/dist/theme/initAldTheme.js +26 -0
- package/dist/theme/initAldTheme.js.map +1 -0
- package/dist/theme/themeToCssVars.d.ts +2 -0
- package/dist/theme/themeToCssVars.js +144 -0
- package/dist/theme/themeToCssVars.js.map +1 -0
- package/dist/theme/tokenMap.d.ts +5 -0
- package/dist/theme/tokenMap.js +12 -0
- package/dist/theme/tokenMap.js.map +1 -0
- package/dist/theme/types.d.ts +20 -0
- package/dist/theme/types.js +2 -0
- package/dist/theme.d.ts +2 -0
- package/package.json +9 -4
- package/dist/_utils/SimpleOverflow.d.ts +0 -14
- package/dist/_utils/SimpleOverflow.js +0 -61
- package/dist/_utils/SimpleOverflow.js.map +0 -1
|
@@ -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';\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\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 style,\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 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 = customStatus || contextStatus || undefined;\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 onToggleOpen = React.useCallback(\n (newOpen?: boolean) => {\n const nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;\n if (!nextOpen) {\n setShowResponsiveSelectedSection(false);\n setFocus(false);\n }\n if (mergedOpen !== nextOpen && !disabled) {\n setInnerOpen(nextOpen);\n onOpenChange?.(nextOpen);\n }\n },\n [mergedOpen, disabled, setInnerOpen, onOpenChange],\n );\n const [showResponsiveSelectedSection, setShowResponsiveSelectedSection] =\n useState(false);\n\n // ============================ Selector ============================\n const onSelectorRemove = (val: DisplayValueType) => {\n const newValues = displayValues.filter((i) => i !== val);\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 [`${mergedStatus}`]: !!mergedStatus,\n 'multiple-responsive': isResponsiveMode,\n 'multiple-default': isMultipleMode && !isResponsiveMode,\n }),\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 (displayMenu && !isMultipleMode) {\n console.log('menu onClick', info);\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 return (\n <div\n className={mergedClassName}\n style={{\n ...widthStyle,\n ...style,\n }}\n ref={selectRef}\n id={id}\n onClick={onSelectClick}\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={popupMatchSelectWidth}\n overlayClassName={popupClassName}\n // @ts-ignore\n dropdownRender={dropdownRender}\n overlayStyle={overlayStyle || dropdownStyle}\n placement={placement}\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 <div className={setClassNames('trigger')}>\n {prefix && <div className={setClassNames('prefix')}>{prefix}</div>}\n {_.isEmpty(displayValues) && (\n <div className={setClassNames('placeholder')}>{placeholder}</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 ></Selector>\n )}\n </div>\n </SelectTrigger>\n <Suffix\n showArrow={showArrow}\n allowClear={allowClear}\n disabled={disabled}\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';\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\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 ...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 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 = customStatus || contextStatus || undefined;\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 onToggleOpen = React.useCallback(\n (newOpen?: boolean) => {\n const nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;\n if (!nextOpen) {\n setShowResponsiveSelectedSection(false);\n setFocus(false);\n }\n if (mergedOpen !== nextOpen && !disabled) {\n setInnerOpen(nextOpen);\n onOpenChange?.(nextOpen);\n }\n },\n [mergedOpen, disabled, setInnerOpen, onOpenChange],\n );\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((i) => i !== val);\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 [`${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 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 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 >\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={popupMatchSelectWidth}\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 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,12 +1,12 @@
|
|
|
1
1
|
import { cn } from "../../lib/utils.js";
|
|
2
2
|
import Tag from "../../Tag/index.js";
|
|
3
3
|
import ScrollArea_default from "../../ScrollArea/index.js";
|
|
4
|
-
import SimpleOverflow from "../../_utils/SimpleOverflow.js";
|
|
5
4
|
import MultipleResponsiveSelectedSection from "./MultipleResponsiveSelectedSection.js";
|
|
6
5
|
import { isMultiple, isResponsive, isShowSelectedSection } from "../BaseSelect.js";
|
|
7
|
-
import { useMemo, useState } from "react";
|
|
6
|
+
import { useEffect, useMemo, useState } from "react";
|
|
8
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
8
|
import _ from "lodash";
|
|
9
|
+
import Overflow from "rc-overflow";
|
|
10
10
|
//#region src/Select/Selector/MultipleSelector.tsx
|
|
11
11
|
var overflowPrefixCls = "beta-ald-select-selector-overflow";
|
|
12
12
|
var tagHeight = 20;
|
|
@@ -16,14 +16,18 @@ var onPreventMouseDown = (event) => {
|
|
|
16
16
|
event.stopPropagation();
|
|
17
17
|
};
|
|
18
18
|
function itemKey(value) {
|
|
19
|
-
return
|
|
19
|
+
return (value.key ?? value.value) || "";
|
|
20
20
|
}
|
|
21
21
|
function MultipleSelector(props) {
|
|
22
|
-
const { displayValues, tagRender, onRemove, onToggleOpen, mode, disabled, maxTagPlaceholder, showResponsiveSelectedSection, dropdownRef, suffixIcon } = props;
|
|
22
|
+
const { displayValues, tagRender, onRemove, onToggleOpen, mode, disabled, maxTagPlaceholder, showResponsiveSelectedSection, dropdownRef, suffixIcon, onOverflowCollapsedChange } = props;
|
|
23
23
|
const innerMaxTagPlaceholder = (omittedValues) => {
|
|
24
24
|
return `+ ${omittedValues.length === displayValues.length ? omittedValues.length - 1 : omittedValues.length}`;
|
|
25
25
|
};
|
|
26
26
|
const [showItemIndex, setShowItemIndex] = useState(0);
|
|
27
|
+
const isCollapsed = showItemIndex === -1 && displayValues.length > 0;
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
onOverflowCollapsedChange?.(isCollapsed);
|
|
30
|
+
}, [isCollapsed, onOverflowCollapsedChange]);
|
|
27
31
|
const customizeRenderSelector = (value, content, itemDisabled, closable, onClose, isPreview, uniqueKey) => {
|
|
28
32
|
const onMouseDown = (e) => {
|
|
29
33
|
onPreventMouseDown(e);
|
|
@@ -91,10 +95,10 @@ function MultipleSelector(props) {
|
|
|
91
95
|
className: "beta-ald-select-selector-overflow-item-first",
|
|
92
96
|
children: renderItem(displayValues[0], 0)
|
|
93
97
|
}),
|
|
94
|
-
/* @__PURE__ */ jsx(
|
|
98
|
+
/* @__PURE__ */ jsx(Overflow, {
|
|
95
99
|
prefixCls: overflowPrefixCls,
|
|
96
100
|
data: displayValues,
|
|
97
|
-
renderItem,
|
|
101
|
+
renderItem: (item, info) => renderItem(item, info?.index),
|
|
98
102
|
className: cn({ "beta-ald-select-selector-overflow-hidden": showItemIndex === -1 && displayValues.length === 1 }),
|
|
99
103
|
renderRest,
|
|
100
104
|
suffix: null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultipleSelector.js","names":[],"sources":["../../../src/Select/Selector/MultipleSelector.tsx"],"sourcesContent":["import React, { RefObject, useMemo, useState } from 'react';\nimport { SelectorProps } from './index';\nimport Tag from '../../Tag';\nimport { DisplayValueType, RawValueType } from '../interface';\nimport {\n CustomTagProps,\n isMultiple,\n isResponsive,\n isShowSelectedSection,\n} from '../BaseSelect';\nimport ScrollArea from '../../ScrollArea';\nimport { cn } from '../../lib/utils';\nimport _ from 'lodash';\nimport Overflow from '../../_utils/SimpleOverflow';\nimport MultipleResponsiveSelectedSection from './MultipleResponsiveSelectedSection';\nimport { RefTriggerProps } from '../SelectTrigger';\nconst overflowPrefixCls = 'beta-ald-select-selector-overflow';\nconst tagHeight = 20;\nconst gap = 4;\ninterface MultipleSelectorProps extends SelectorProps {\n // Event\n onRemove: (value: DisplayValueType) => void;\n onToggleOpen: (open?: boolean) => void;\n tagRender?: (props: CustomTagProps, isPreview?: boolean) => React.ReactNode;\n maxTagPlaceholder?:\n | React.ReactNode\n | ((omittedValues: DisplayValueType[]) => React.ReactNode);\n dropdownRef: RefObject<RefTriggerProps>;\n}\nconst onPreventMouseDown = (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n};\n\nfunction itemKey(value: DisplayValueType): string {\n return String((value.key ?? value.value) || '');\n}\n\nexport default function MultipleSelector(props: MultipleSelectorProps) {\n const {\n displayValues,\n tagRender,\n onRemove,\n onToggleOpen,\n mode,\n disabled,\n maxTagPlaceholder,\n showResponsiveSelectedSection,\n dropdownRef,\n suffixIcon,\n } = props;\n const innerMaxTagPlaceholder = (omittedValues: DisplayValueType[]) => {\n return `+ ${\n omittedValues.length === displayValues.length\n ? omittedValues.length - 1\n : omittedValues.length\n }`;\n };\n const [showItemIndex, setShowItemIndex] = useState(0);\n const customizeRenderSelector = (\n value: RawValueType | undefined,\n content: React.ReactNode,\n itemDisabled: boolean,\n closable?: boolean,\n onClose?: (event?: React.MouseEvent) => void,\n isPreview?: boolean,\n uniqueKey?: React.Key,\n ) => {\n const onMouseDown = (e: React.MouseEvent) => {\n onPreventMouseDown(e);\n };\n\n return (\n <span\n className=\"beta-ald-select-custom-tag-render-wrapper\"\n onMouseDown={onMouseDown}\n key={uniqueKey ?? value}\n >\n {tagRender?.(\n {\n label: content,\n value,\n disabled: itemDisabled,\n closable: isPreview ? false : closable ?? false,\n onClose: onClose ?? (() => {}),\n },\n isPreview,\n )}\n </span>\n );\n };\n const defaultRenderSelector = (\n item: DisplayValueType | undefined,\n content: React.ReactNode,\n itemDisabled: boolean,\n closable?: boolean,\n onClose?: React.MouseEventHandler,\n isPreview?: boolean,\n uniqueKey?: React.Key,\n ) => (\n <Tag\n disabled={itemDisabled}\n key={uniqueKey ?? item?.value}\n size=\"small\"\n closable={isPreview ? false : closable}\n onClose={(e) => {\n onPreventMouseDown(e);\n onClose?.(e);\n }}\n >\n {content}\n </Tag>\n );\n const isResponsiveMode = isResponsive(mode);\n const showSelectedSection = isShowSelectedSection(mode);\n const renderItem = (valueItem: DisplayValueType, index?: number) => {\n const { disabled: itemDisabled, label, value } = valueItem;\n const closable = !disabled && !itemDisabled;\n let isPreview = !showResponsiveSelectedSection;\n if (!isResponsiveMode) {\n isPreview = false;\n }\n if (!showSelectedSection) {\n isPreview = false;\n }\n if (disabled) {\n isPreview = true;\n }\n const displayLabel: React.ReactNode = label;\n\n const onClose = (event?: React.MouseEvent) => {\n if (event) {\n event.stopPropagation();\n }\n onRemove(valueItem);\n };\n if (_.isNil(value)) {\n return null;\n }\n\n // 生成唯一的 key,如果 value 可能重复,使用 value + index 组合\n const uniqueKey =\n valueItem.key ??\n (value !== undefined && value !== null\n ? `${value}-${index ?? ''}`\n : `item-${index ?? ''}`);\n\n return typeof tagRender === 'function'\n ? customizeRenderSelector(\n value,\n displayLabel,\n !!itemDisabled,\n closable,\n onClose,\n isPreview,\n uniqueKey,\n )\n : defaultRenderSelector(\n valueItem,\n displayLabel,\n !!itemDisabled,\n closable,\n onClose,\n isPreview,\n uniqueKey,\n );\n };\n\n const renderRest = (omittedValues: DisplayValueType[]) => {\n if (displayValues.length === 1) {\n return null;\n }\n\n const content =\n typeof maxTagPlaceholder === 'function'\n ? maxTagPlaceholder(\n omittedValues.length === displayValues.length\n ? omittedValues.slice(1, omittedValues.length)\n : omittedValues,\n )\n : innerMaxTagPlaceholder(\n omittedValues.length === displayValues.length\n ? omittedValues.slice(1, omittedValues.length)\n : omittedValues,\n );\n\n return typeof maxTagPlaceholder === 'function'\n ? content\n : defaultRenderSelector({ title: content }, content, false);\n };\n const onVisibleChange = (visibleCount: number) => {\n setShowItemIndex(visibleCount);\n };\n const maxHeight = useMemo(() => {\n if (isMultiple(mode)) {\n let maxRows: number | undefined;\n if (typeof mode === 'object') {\n maxRows = mode.maxRows;\n }\n if (!maxRows) {\n // 2.5行高+2行间距\n return 2.5 * tagHeight + 2 * gap;\n } else {\n // 总行高+总行间距\n return maxRows * tagHeight + (maxRows - 1) * gap;\n }\n }\n\n return undefined;\n }, [mode]);\n if (isResponsiveMode) {\n return (\n <div className=\"beta-ald-select-selector beta-ald-select-selector-multiple-responsive\">\n {showItemIndex === -1 && displayValues.length > 0 && (\n <div className=\"beta-ald-select-selector-overflow-item-first\">\n {renderItem(displayValues[0], 0)}\n </div>\n )}\n <Overflow\n prefixCls={overflowPrefixCls}\n data={displayValues}\n renderItem={renderItem}\n className={cn({\n 'beta-ald-select-selector-overflow-hidden':\n showItemIndex === -1 && displayValues.length === 1,\n })}\n renderRest={renderRest}\n suffix={null}\n itemKey={itemKey}\n maxCount=\"responsive\"\n onVisibleChange={onVisibleChange}\n />\n {showResponsiveSelectedSection && (\n <MultipleResponsiveSelectedSection\n displayValues={displayValues}\n renderItem={renderItem}\n maxHeight={maxHeight}\n suffixIcon={suffixIcon}\n onToggleOpen={onToggleOpen}\n dropdownRef={dropdownRef}\n />\n )}\n </div>\n );\n }\n\n return (\n <ScrollArea\n innerClassName=\"beta-ald-select-selector-multiple-default-inner\"\n className=\"beta-ald-select-selector beta-ald-select-selector-multiple-default\"\n innerStyle={{\n maxHeight: maxHeight,\n }}\n >\n <div className=\"beta-ald-select-selector-multiple-default-tags\">\n {displayValues.map((item, index) => renderItem(item, index))}\n </div>\n </ScrollArea>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MultipleSelector.js","names":[],"sources":["../../../src/Select/Selector/MultipleSelector.tsx"],"sourcesContent":["import React, { RefObject, useEffect, useMemo, useState } from 'react';\nimport { SelectorProps } from './index';\nimport Tag from '../../Tag';\nimport { DisplayValueType, RawValueType } from '../interface';\nimport {\n CustomTagProps,\n isMultiple,\n isResponsive,\n isShowSelectedSection,\n} from '../BaseSelect';\nimport ScrollArea from '../../ScrollArea';\nimport { cn } from '../../lib/utils';\nimport _ from 'lodash';\n// 与 v2 保持一致直接用 rc-overflow:自研 SimpleOverflow 的\"临时显示再测量\"\n// 会扰动布局并被 ResizeObserver 再次触发,挤压态下持续抖动;\n// rc-overflow 隐藏项保持渲染(绝对定位+透明)可随时测量,测量与渲染单向无环\nimport Overflow from 'rc-overflow';\nimport MultipleResponsiveSelectedSection from './MultipleResponsiveSelectedSection';\nimport { RefTriggerProps } from '../SelectTrigger';\nconst overflowPrefixCls = 'beta-ald-select-selector-overflow';\nconst tagHeight = 20;\nconst gap = 4;\ninterface MultipleSelectorProps extends SelectorProps {\n // Event\n onRemove: (value: DisplayValueType) => void;\n onToggleOpen: (open?: boolean) => void;\n tagRender?: (props: CustomTagProps, isPreview?: boolean) => React.ReactNode;\n maxTagPlaceholder?:\n | React.ReactNode\n | ((omittedValues: DisplayValueType[]) => React.ReactNode);\n dropdownRef: RefObject<RefTriggerProps>;\n}\nconst onPreventMouseDown = (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n};\n\nfunction itemKey(value: DisplayValueType): React.Key {\n return (value.key ?? value.value) || '';\n}\n\nexport default function MultipleSelector(props: MultipleSelectorProps) {\n const {\n displayValues,\n tagRender,\n onRemove,\n onToggleOpen,\n mode,\n disabled,\n maxTagPlaceholder,\n showResponsiveSelectedSection,\n dropdownRef,\n suffixIcon,\n onOverflowCollapsedChange,\n } = props;\n const innerMaxTagPlaceholder = (omittedValues: DisplayValueType[]) => {\n return `+ ${\n omittedValues.length === displayValues.length\n ? omittedValues.length - 1\n : omittedValues.length\n }`;\n };\n const [showItemIndex, setShowItemIndex] = useState(0);\n const isCollapsed = showItemIndex === -1 && displayValues.length > 0;\n useEffect(() => {\n onOverflowCollapsedChange?.(isCollapsed);\n }, [isCollapsed, onOverflowCollapsedChange]);\n const customizeRenderSelector = (\n value: RawValueType | undefined,\n content: React.ReactNode,\n itemDisabled: boolean,\n closable?: boolean,\n onClose?: (event?: React.MouseEvent) => void,\n isPreview?: boolean,\n uniqueKey?: React.Key,\n ) => {\n const onMouseDown = (e: React.MouseEvent) => {\n onPreventMouseDown(e);\n };\n\n return (\n <span\n className=\"beta-ald-select-custom-tag-render-wrapper\"\n onMouseDown={onMouseDown}\n key={uniqueKey ?? value}\n >\n {tagRender?.(\n {\n label: content,\n value,\n disabled: itemDisabled,\n closable: isPreview ? false : closable ?? false,\n onClose: onClose ?? (() => {}),\n },\n isPreview,\n )}\n </span>\n );\n };\n const defaultRenderSelector = (\n item: DisplayValueType | undefined,\n content: React.ReactNode,\n itemDisabled: boolean,\n closable?: boolean,\n onClose?: React.MouseEventHandler,\n isPreview?: boolean,\n uniqueKey?: React.Key,\n ) => (\n <Tag\n disabled={itemDisabled}\n key={uniqueKey ?? item?.value}\n size=\"small\"\n closable={isPreview ? false : closable}\n onClose={(e) => {\n onPreventMouseDown(e);\n onClose?.(e);\n }}\n >\n {content}\n </Tag>\n );\n const isResponsiveMode = isResponsive(mode);\n const showSelectedSection = isShowSelectedSection(mode);\n const renderItem = (valueItem: DisplayValueType, index?: number) => {\n const { disabled: itemDisabled, label, value } = valueItem;\n const closable = !disabled && !itemDisabled;\n let isPreview = !showResponsiveSelectedSection;\n if (!isResponsiveMode) {\n isPreview = false;\n }\n if (!showSelectedSection) {\n isPreview = false;\n }\n if (disabled) {\n isPreview = true;\n }\n const displayLabel: React.ReactNode = label;\n\n const onClose = (event?: React.MouseEvent) => {\n if (event) {\n event.stopPropagation();\n }\n onRemove(valueItem);\n };\n if (_.isNil(value)) {\n return null;\n }\n\n // 生成唯一的 key,如果 value 可能重复,使用 value + index 组合\n const uniqueKey =\n valueItem.key ??\n (value !== undefined && value !== null\n ? `${value}-${index ?? ''}`\n : `item-${index ?? ''}`);\n\n return typeof tagRender === 'function'\n ? customizeRenderSelector(\n value,\n displayLabel,\n !!itemDisabled,\n closable,\n onClose,\n isPreview,\n uniqueKey,\n )\n : defaultRenderSelector(\n valueItem,\n displayLabel,\n !!itemDisabled,\n closable,\n onClose,\n isPreview,\n uniqueKey,\n );\n };\n\n const renderRest = (omittedValues: DisplayValueType[]) => {\n if (displayValues.length === 1) {\n return null;\n }\n\n const content =\n typeof maxTagPlaceholder === 'function'\n ? maxTagPlaceholder(\n omittedValues.length === displayValues.length\n ? omittedValues.slice(1, omittedValues.length)\n : omittedValues,\n )\n : innerMaxTagPlaceholder(\n omittedValues.length === displayValues.length\n ? omittedValues.slice(1, omittedValues.length)\n : omittedValues,\n );\n\n return typeof maxTagPlaceholder === 'function'\n ? content\n : defaultRenderSelector({ title: content }, content, false);\n };\n const onVisibleChange = (visibleCount: number) => {\n setShowItemIndex(visibleCount);\n };\n const maxHeight = useMemo(() => {\n if (isMultiple(mode)) {\n let maxRows: number | undefined;\n if (typeof mode === 'object') {\n maxRows = mode.maxRows;\n }\n if (!maxRows) {\n // 2.5行高+2行间距\n return 2.5 * tagHeight + 2 * gap;\n } else {\n // 总行高+总行间距\n return maxRows * tagHeight + (maxRows - 1) * gap;\n }\n }\n\n return undefined;\n }, [mode]);\n if (isResponsiveMode) {\n return (\n <div className=\"beta-ald-select-selector beta-ald-select-selector-multiple-responsive\">\n {showItemIndex === -1 && displayValues.length > 0 && (\n <div className=\"beta-ald-select-selector-overflow-item-first\">\n {renderItem(displayValues[0], 0)}\n </div>\n )}\n <Overflow\n prefixCls={overflowPrefixCls}\n data={displayValues}\n // rc-overflow >=1.4 的 renderItem 第二参是 { index },适配回 index\n renderItem={(item, info) => renderItem(item, info?.index)}\n className={cn({\n 'beta-ald-select-selector-overflow-hidden':\n showItemIndex === -1 && displayValues.length === 1,\n })}\n renderRest={renderRest}\n suffix={null}\n itemKey={itemKey}\n maxCount=\"responsive\"\n onVisibleChange={onVisibleChange}\n />\n {showResponsiveSelectedSection && (\n <MultipleResponsiveSelectedSection\n displayValues={displayValues}\n renderItem={renderItem}\n maxHeight={maxHeight}\n suffixIcon={suffixIcon}\n onToggleOpen={onToggleOpen}\n dropdownRef={dropdownRef}\n />\n )}\n </div>\n );\n }\n\n return (\n <ScrollArea\n innerClassName=\"beta-ald-select-selector-multiple-default-inner\"\n className=\"beta-ald-select-selector beta-ald-select-selector-multiple-default\"\n innerStyle={{\n maxHeight: maxHeight,\n }}\n >\n <div className=\"beta-ald-select-selector-multiple-default-tags\">\n {displayValues.map((item, index) => renderItem(item, index))}\n </div>\n </ScrollArea>\n );\n}\n"],"mappings":"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"}
|
|
@@ -7,5 +7,7 @@ export interface SelectorProps extends ISelectProps {
|
|
|
7
7
|
onToggleOpen: (open?: boolean) => void;
|
|
8
8
|
showResponsiveSelectedSection: boolean;
|
|
9
9
|
dropdownRef: RefObject<RefTriggerProps>;
|
|
10
|
+
/** 多选 responsive 进入/退出 -1 收纳态(仅"首 tag + +N")时上抛 */
|
|
11
|
+
onOverflowCollapsedChange?: (collapsed: boolean) => void;
|
|
10
12
|
}
|
|
11
13
|
export default function Selector(props: SelectorProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -15,7 +15,7 @@ function Selector(props) {
|
|
|
15
15
|
showResponsiveSelectedSection
|
|
16
16
|
});
|
|
17
17
|
return /* @__PURE__ */ jsx("div", {
|
|
18
|
-
className: classNames("beta-ald-select-selector"),
|
|
18
|
+
className: classNames("beta-ald-select-selector") + " ant-select-selection-item",
|
|
19
19
|
children: displayValues.map((item, index) => /* @__PURE__ */ jsx("span", { children: item.label }, item.value ?? `item-${index}`))
|
|
20
20
|
});
|
|
21
21
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/Select/Selector/index.tsx"],"sourcesContent":["import prefixCls from '../../_utils/prefixCls';\nimport { DisplayValueType, ISelectProps, LabelInValueType } from '../interface';\nimport React, { RefObject } from 'react';\nimport MultipleSelector from './MultipleSelector';\nimport { isMultiple } from '../BaseSelect';\nimport { RefTriggerProps } from '../SelectTrigger';\nexport interface SelectorProps extends ISelectProps {\n displayValues: LabelInValueType[];\n onRemove: (value: DisplayValueType) => void;\n onToggleOpen: (open?: boolean) => void;\n showResponsiveSelectedSection: boolean;\n dropdownRef: RefObject<RefTriggerProps>;\n}\nexport default function Selector(props: SelectorProps) {\n const classNames = prefixCls('select-selector');\n const {\n mode,\n displayValues,\n onRemove,\n onToggleOpen,\n showResponsiveSelectedSection,\n dropdownRef,\n } = props;\n if (isMultiple(mode)) {\n return (\n <MultipleSelector\n {...props}\n onRemove={onRemove}\n dropdownRef={dropdownRef}\n onToggleOpen={onToggleOpen}\n showResponsiveSelectedSection={showResponsiveSelectedSection}\n />\n );\n }\n return (\n <div
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/Select/Selector/index.tsx"],"sourcesContent":["import prefixCls from '../../_utils/prefixCls';\nimport { DisplayValueType, ISelectProps, LabelInValueType } from '../interface';\nimport React, { RefObject } from 'react';\nimport MultipleSelector from './MultipleSelector';\nimport { isMultiple } from '../BaseSelect';\nimport { RefTriggerProps } from '../SelectTrigger';\nexport interface SelectorProps extends ISelectProps {\n displayValues: LabelInValueType[];\n onRemove: (value: DisplayValueType) => void;\n onToggleOpen: (open?: boolean) => void;\n showResponsiveSelectedSection: boolean;\n dropdownRef: RefObject<RefTriggerProps>;\n /** 多选 responsive 进入/退出 -1 收纳态(仅\"首 tag + +N\")时上抛 */\n onOverflowCollapsedChange?: (collapsed: boolean) => void;\n}\nexport default function Selector(props: SelectorProps) {\n const classNames = prefixCls('select-selector');\n const {\n mode,\n displayValues,\n onRemove,\n onToggleOpen,\n showResponsiveSelectedSection,\n dropdownRef,\n } = props;\n if (isMultiple(mode)) {\n return (\n <MultipleSelector\n {...props}\n onRemove={onRemove}\n dropdownRef={dropdownRef}\n onToggleOpen={onToggleOpen}\n showResponsiveSelectedSection={showResponsiveSelectedSection}\n />\n );\n }\n {\n /* antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器 */\n }\n return (\n <div\n className={\n classNames('beta-ald-select-selector') + ' ant-select-selection-item'\n }\n >\n {displayValues.map((item, index) => (\n <span key={item.value ?? `item-${index}`}>{item.label}</span>\n ))}\n </div>\n );\n}\n"],"mappings":";;;;;;AAeA,SAAwB,SAAS,OAAsB;CACrD,MAAM,aAAa,UAAU,kBAAkB;CAC/C,MAAM,EACJ,MACA,eACA,UACA,cACA,+BACA,gBACE;AACJ,KAAI,WAAW,KAAK,CAClB,QACE,oBAAC,kBAAD;EACE,GAAI;EACM;EACG;EACC;EACiB;EAC/B,CAAA;AAMN,QACE,oBAAC,OAAD;EACE,WACE,WAAW,2BAA2B,GAAG;YAG1C,cAAc,KAAK,MAAM,UACxB,oBAAC,QAAD,EAAA,UAA2C,KAAK,OAAa,EAAlD,KAAK,SAAS,QAAQ,QAA4B,CAC7D;EACE,CAAA"}
|
|
@@ -24,7 +24,7 @@ function Suffix({ showArrow, allowClear, isActive, isHover, icon, onClear, displ
|
|
|
24
24
|
size: 16
|
|
25
25
|
});
|
|
26
26
|
return /* @__PURE__ */ jsx("div", {
|
|
27
|
-
className: classNames("suffix", "arrow"),
|
|
27
|
+
className: classNames("suffix", "arrow") + " ant-select-arrow",
|
|
28
28
|
children: dropdownIcon
|
|
29
29
|
});
|
|
30
30
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Suffix.js","names":[],"sources":["../../../src/Select/components/Suffix.tsx"],"sourcesContent":["import React from 'react';\nimport prefixCls from '../../_utils/prefixCls';\nimport { ArrowDownRightFill, CloseCircleRightFill } from '../../Icon';\nimport { DisplayValueType } from '../interface';\n\nexport default function Suffix({\n showArrow,\n allowClear,\n isActive,\n isHover,\n icon,\n onClear,\n displayValues,\n disabled,\n}: {\n showArrow?: boolean;\n allowClear?: boolean;\n isActive?: boolean;\n isHover?: boolean;\n disabled?: boolean;\n icon: React.ReactNode;\n onClear?: () => void;\n displayValues: DisplayValueType[];\n}) {\n const classNames = prefixCls('select');\n\n if (\n (isActive || isHover) &&\n !disabled &&\n allowClear &&\n displayValues.length > 0\n ) {\n return (\n <div\n className={classNames('suffix', 'clear')}\n onClick={(event) => {\n event.stopPropagation();\n event.preventDefault();\n onClear?.();\n }}\n >\n <CloseCircleRightFill size={16} color=\"#6B7280\" />\n </div>\n );\n }\n if (showArrow) {\n const dropdownIcon = icon || (\n <ArrowDownRightFill color=\"#6B7280\" size={16} />\n );\n\n return <div className={classNames('suffix', 'arrow')}
|
|
1
|
+
{"version":3,"file":"Suffix.js","names":[],"sources":["../../../src/Select/components/Suffix.tsx"],"sourcesContent":["import React from 'react';\nimport prefixCls from '../../_utils/prefixCls';\nimport { ArrowDownRightFill, CloseCircleRightFill } from '../../Icon';\nimport { DisplayValueType } from '../interface';\n\nexport default function Suffix({\n showArrow,\n allowClear,\n isActive,\n isHover,\n icon,\n onClear,\n displayValues,\n disabled,\n}: {\n showArrow?: boolean;\n allowClear?: boolean;\n isActive?: boolean;\n isHover?: boolean;\n disabled?: boolean;\n icon: React.ReactNode;\n onClear?: () => void;\n displayValues: DisplayValueType[];\n}) {\n const classNames = prefixCls('select');\n\n if (\n (isActive || isHover) &&\n !disabled &&\n allowClear &&\n displayValues.length > 0\n ) {\n return (\n <div\n className={classNames('suffix', 'clear')}\n onClick={(event) => {\n event.stopPropagation();\n event.preventDefault();\n onClear?.();\n }}\n >\n <CloseCircleRightFill size={16} color=\"#6B7280\" />\n </div>\n );\n }\n if (showArrow) {\n const dropdownIcon = icon || (\n <ArrowDownRightFill color=\"#6B7280\" size={16} />\n );\n\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n return (\n <div className={classNames('suffix', 'arrow') + ' ant-select-arrow'}>\n {dropdownIcon}\n </div>\n );\n }\n\n return null;\n}\n"],"mappings":";;;;;;AAKA,SAAwB,OAAO,EAC7B,WACA,YACA,UACA,SACA,MACA,SACA,eACA,YAUC;CACD,MAAM,aAAa,UAAU,SAAS;AAEtC,MACG,YAAY,YACb,CAAC,YACD,cACA,cAAc,SAAS,EAEvB,QACE,oBAAC,OAAD;EACE,WAAW,WAAW,UAAU,QAAQ;EACxC,UAAU,UAAU;AAClB,SAAM,iBAAiB;AACvB,SAAM,gBAAgB;AACtB,cAAW;;YAGb,oBAAC,QAAD;GAAsB,MAAM;GAAI,OAAM;GAAY,CAAA;EAC9C,CAAA;AAGV,KAAI,WAAW;EACb,MAAM,eAAe,QACnB,oBAAC,MAAD;GAAoB,OAAM;GAAU,MAAM;GAAM,CAAA;AAIlD,SACE,oBAAC,OAAD;GAAK,WAAW,WAAW,UAAU,QAAQ,GAAG;aAC7C;GACG,CAAA;;AAIV,QAAO"}
|
|
@@ -21,6 +21,10 @@ export interface ISelectProps<ValueType = any, OptionType extends BaseOptionType
|
|
|
21
21
|
dropdownClassName?: string;
|
|
22
22
|
popupClassName?: string;
|
|
23
23
|
placement?: PlacementType;
|
|
24
|
+
/**
|
|
25
|
+
* 空间不足时自动计算下拉面板最大高度并启用内部滚动,继承自 Dropdown。
|
|
26
|
+
*/
|
|
27
|
+
allowOverlap?: boolean;
|
|
24
28
|
labelInValue?: boolean;
|
|
25
29
|
options?: OptionType[];
|
|
26
30
|
menu?: SelectMenuProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getWidthStyle.js","names":[],"sources":["../../../src/Select/utils/getWidthStyle.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nexport default function getWidthStyle(\n width?: number | 'auto' | 'fill',\n): CSSProperties {\n if (typeof width === 'number') {\n return { width: `${width}px` };\n }\n if (width === 'fill') {\n return { width: '100%' };\n }\n if (width === 'auto') {\n return { width: 'auto' };\n }\n return {};\n}\n"],"mappings":";AAEA,SAAwB,cACtB,OACe;AACf,KAAI,OAAO,UAAU,SACnB,QAAO,EAAE,OAAO,GAAG,MAAM,KAAK;AAEhC,KAAI,UAAU,OACZ,QAAO,EAAE,OAAO,QAAQ;AAE1B,KAAI,UAAU,
|
|
1
|
+
{"version":3,"file":"getWidthStyle.js","names":[],"sources":["../../../src/Select/utils/getWidthStyle.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nexport default function getWidthStyle(\n width?: number | 'auto' | 'fill',\n): CSSProperties {\n if (typeof width === 'number') {\n return { width: `${width}px` };\n }\n if (width === 'fill') {\n return { width: '100%' };\n }\n if (width === 'auto') {\n // 与 v2 一致:不锁 flexShrink。根节点必须保持可被父 flex 行压缩,\n // 多选超宽时 rc-overflow 才能量到受限容器宽并把放不下的 tag 收成 \"+N\"\n return { width: 'auto' };\n }\n return {};\n}\n"],"mappings":";AAEA,SAAwB,cACtB,OACe;AACf,KAAI,OAAO,UAAU,SACnB,QAAO,EAAE,OAAO,GAAG,MAAM,KAAK;AAEhC,KAAI,UAAU,OACZ,QAAO,EAAE,OAAO,QAAQ;AAE1B,KAAI,UAAU,OAGZ,QAAO,EAAE,OAAO,QAAQ;AAE1B,QAAO,EAAE"}
|
package/dist/Steps/index.js
CHANGED
|
@@ -40,12 +40,12 @@ function Steps({ className, current = 0, direction = "horizontal", status, items
|
|
|
40
40
|
})
|
|
41
41
|
]
|
|
42
42
|
}), /* @__PURE__ */ jsxs("div", {
|
|
43
|
-
className: "ald-steps-item-content tw-mt-2 tw-flex tw-flex-col tw-items-center",
|
|
43
|
+
className: "ald-steps-item-content ant-steps-item-content tw-mt-2 tw-flex tw-flex-col tw-items-center",
|
|
44
44
|
children: [/* @__PURE__ */ jsx("div", {
|
|
45
|
-
className: cn("ald-steps-item-title tw-text-sm tw-font-medium tw-leading-5", stepStatus === "finish" && "tw-text-[var(--alias-colors-text-subtlest)]", stepStatus === "process" && "tw-text-[var(--alias-colors-text-selected)]", stepStatus === "wait" && "tw-text-[var(--alias-colors-text-default)]", stepStatus === "error" && "tw-text-[var(--alias-colors-text-danger)]"),
|
|
45
|
+
className: cn("ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5", stepStatus === "finish" && "tw-text-[var(--alias-colors-text-subtlest)]", stepStatus === "process" && "tw-text-[var(--alias-colors-text-selected)]", stepStatus === "wait" && "tw-text-[var(--alias-colors-text-default)]", stepStatus === "error" && "tw-text-[var(--alias-colors-text-danger)]"),
|
|
46
46
|
children: item.title
|
|
47
47
|
}), item.description && /* @__PURE__ */ jsx("div", {
|
|
48
|
-
className: cn("ald-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(--alias-colors-text-subtlest)]" : "tw-text-[var(--alias-colors-text-subtle)]"),
|
|
48
|
+
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(--alias-colors-text-subtlest)]" : "tw-text-[var(--alias-colors-text-subtle)]"),
|
|
49
49
|
children: item.description
|
|
50
50
|
})]
|
|
51
51
|
})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
|
|
@@ -61,12 +61,12 @@ function Steps({ className, current = 0, direction = "horizontal", status, items
|
|
|
61
61
|
}
|
|
62
62
|
})]
|
|
63
63
|
}), /* @__PURE__ */ jsxs("div", {
|
|
64
|
-
className: "ald-steps-item-content",
|
|
64
|
+
className: "ald-steps-item-content ant-steps-item-content",
|
|
65
65
|
children: [/* @__PURE__ */ jsx("div", {
|
|
66
|
-
className: cn("ald-steps-item-title tw-text-sm tw-font-medium tw-leading-5", stepStatus === "finish" && "tw-text-[var(--alias-colors-text-subtlest)]", stepStatus === "process" && "tw-text-[var(--alias-colors-text-selected)]", stepStatus === "wait" && "tw-text-[var(--alias-colors-text-default)]", stepStatus === "error" && "tw-text-[var(--alias-colors-text-danger)]"),
|
|
66
|
+
className: cn("ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5", stepStatus === "finish" && "tw-text-[var(--alias-colors-text-subtlest)]", stepStatus === "process" && "tw-text-[var(--alias-colors-text-selected)]", stepStatus === "wait" && "tw-text-[var(--alias-colors-text-default)]", stepStatus === "error" && "tw-text-[var(--alias-colors-text-danger)]"),
|
|
67
67
|
children: item.title
|
|
68
68
|
}), item.description && /* @__PURE__ */ jsx("div", {
|
|
69
|
-
className: cn("ald-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]"),
|
|
69
|
+
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)]"),
|
|
70
70
|
children: item.description
|
|
71
71
|
})]
|
|
72
72
|
})] })
|
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 { ProcessIcon } from './components/ProcessIcon';\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 = 0,\n direction = 'horizontal',\n status,\n items,\n children,\n}: IStepsProps) {\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 status: child.props.status,\n icon: child.props.icon,\n }));\n\n return (\n <div\n className={cn(\n 'ald-steps tw-flex',\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 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 )}\n >\n {direction === 'horizontal' ? (\n <>\n <div className=\"tw-flex tw-w-full tw-items-center\">\n {index > 0 && (\n <div\n className={cn(\n 'tw-flex-1',\n index <= current\n ? 'tw-bg-[var(--alias-colors-border-selected)]'\n : 'tw-bg-[var(--alias-colors-border-default)]',\n )}\n style={{ height: 1.5 }}\n />\n )}\n <div className=\"ald-steps-item-icon tw-shrink-0\">\n {item.icon || <ProcessIcon type={stepStatus} />}\n </div>\n {!isLast && (\n <div\n className={cn(\n 'tw-flex-1',\n index < current\n ? 'tw-bg-[var(--alias-colors-border-selected)]'\n : 'tw-bg-[var(--alias-colors-border-default)]',\n )}\n style={{ height: 1.5 }}\n />\n )}\n </div>\n <div className=\"ald-steps-item-content tw-mt-2 tw-flex tw-flex-col tw-items-center\">\n <div\n className={cn(\n 'ald-steps-item-title tw-text-sm tw-font-medium tw-leading-5',\n stepStatus === 'finish' &&\n 'tw-text-[var(--alias-colors-text-subtlest)]',\n stepStatus === 'process' &&\n 'tw-text-[var(--alias-colors-text-selected)]',\n stepStatus === 'wait' &&\n 'tw-text-[var(--alias-colors-text-default)]',\n stepStatus === 'error' &&\n 'tw-text-[var(--alias-colors-text-danger)]',\n )}\n >\n {item.title}\n </div>\n {item.description && (\n <div\n className={cn(\n 'ald-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(--alias-colors-text-subtlest)]'\n : 'tw-text-[var(--alias-colors-text-subtle)]',\n )}\n >\n {item.description}\n </div>\n )}\n </div>\n </>\n ) : (\n <>\n <div className=\"tw-relative tw-flex tw-flex-col tw-items-center\">\n <div className=\"ald-steps-item-icon tw-shrink-0\">\n {item.icon || <ProcessIcon type={stepStatus} />}\n </div>\n {!isLast && (\n <div\n className={cn(\n 'tw-mt-1 tw-flex-1',\n index < current\n ? 'tw-bg-[var(--alias-colors-border-selected)]'\n : 'tw-bg-[var(--alias-colors-border-default)]',\n )}\n style={{ width: 1.5, minHeight: 24 }}\n />\n )}\n </div>\n <div className=\"ald-steps-item-content\">\n <div\n className={cn(\n 'ald-steps-item-title tw-text-sm tw-font-medium tw-leading-5',\n stepStatus === 'finish' &&\n 'tw-text-[var(--alias-colors-text-subtlest)]',\n stepStatus === 'process' &&\n 'tw-text-[var(--alias-colors-text-selected)]',\n stepStatus === 'wait' &&\n 'tw-text-[var(--alias-colors-text-default)]',\n stepStatus === 'error' &&\n 'tw-text-[var(--alias-colors-text-danger)]',\n )}\n >\n {item.title}\n </div>\n {item.description && (\n <div\n className={cn(\n 'ald-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 </>\n )}\n </div>\n );\n })}\n </div>\n );\n}\n\nSteps.Step = Step;\n\nexport default Steps;\n"],"mappings":";;;;;;AA2BA,SAAS,cACP,OACA,SACA,cACS;AACT,KAAI,QAAQ,QAAS,QAAO;AAC5B,KAAI,UAAU,QAAS,QAAO,gBAAgB;AAC9C,QAAO;;AAGT,SAAS,MAAM,EACb,WACA,UAAU,GACV,YAAY,cACZ,QACA,OACA,YACc;CAEd,MAAM,gBACJ,SACA,MAAM,SAAS,QAAQ,SAAS,CAC7B,OAAO,MAAM,eAAe,CAC5B,KAAK,WAAgB;EACpB,OAAO,MAAM,MAAM;EACnB,aAAa,MAAM,MAAM;EACzB,QAAQ,MAAM,MAAM;EACpB,MAAM,MAAM,MAAM;EACnB,EAAE;AAEP,QACE,oBAAC,OAAD;EACE,WAAW,GACT,qBACA,cAAc,aAAa,gBAAgB,8BAC3C,UACD;YAEA,cAAc,KAAK,MAAM,UAAU;GAClC,MAAM,aAAa,KAAK,UAAU,cAAc,OAAO,SAAS,OAAO;GACvE,MAAM,SAAS,UAAU,cAAc,SAAS;AAEhD,UACE,oBAAC,OAAD;IAEE,WAAW,GACT,0BACA,cAAc,eACV,yDACA,gCACJ,kBAAkB,aACnB;cAEA,cAAc,eACb,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf;MACG,QAAQ,KACP,oBAAC,OAAD;OACE,WAAW,GACT,aACA,SAAS,UACL,gDACA,6CACL;OACD,OAAO,EAAE,QAAQ,KAAK;OACtB,CAAA;MAEJ,oBAAC,OAAD;OAAK,WAAU;iBACZ,KAAK,QAAQ,oBAAC,aAAD,EAAa,MAAM,YAAc,CAAA;OAC3C,CAAA;MACL,CAAC,UACA,oBAAC,OAAD;OACE,WAAW,GACT,aACA,QAAQ,UACJ,gDACA,6CACL;OACD,OAAO,EAAE,QAAQ,KAAK;OACtB,CAAA;MAEA;
|
|
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 { ProcessIcon } from './components/ProcessIcon';\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 = 0,\n direction = 'horizontal',\n status,\n items,\n children,\n}: IStepsProps) {\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 status: child.props.status,\n icon: child.props.icon,\n }));\n\n return (\n <div\n className={cn(\n 'ald-steps tw-flex',\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 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 )}\n >\n {direction === 'horizontal' ? (\n <>\n <div className=\"tw-flex tw-w-full tw-items-center\">\n {index > 0 && (\n <div\n className={cn(\n 'tw-flex-1',\n index <= current\n ? 'tw-bg-[var(--alias-colors-border-selected)]'\n : 'tw-bg-[var(--alias-colors-border-default)]',\n )}\n style={{ height: 1.5 }}\n />\n )}\n <div className=\"ald-steps-item-icon tw-shrink-0\">\n {item.icon || <ProcessIcon type={stepStatus} />}\n </div>\n {!isLast && (\n <div\n className={cn(\n 'tw-flex-1',\n index < current\n ? 'tw-bg-[var(--alias-colors-border-selected)]'\n : 'tw-bg-[var(--alias-colors-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(--alias-colors-text-subtlest)]',\n stepStatus === 'process' &&\n 'tw-text-[var(--alias-colors-text-selected)]',\n stepStatus === 'wait' &&\n 'tw-text-[var(--alias-colors-text-default)]',\n stepStatus === 'error' &&\n 'tw-text-[var(--alias-colors-text-danger)]',\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(--alias-colors-text-subtlest)]'\n : 'tw-text-[var(--alias-colors-text-subtle)]',\n )}\n >\n {item.description}\n </div>\n )}\n </div>\n </>\n ) : (\n <>\n <div className=\"tw-relative tw-flex tw-flex-col tw-items-center\">\n <div className=\"ald-steps-item-icon tw-shrink-0\">\n {item.icon || <ProcessIcon type={stepStatus} />}\n </div>\n {!isLast && (\n <div\n className={cn(\n 'tw-mt-1 tw-flex-1',\n index < current\n ? 'tw-bg-[var(--alias-colors-border-selected)]'\n : 'tw-bg-[var(--alias-colors-border-default)]',\n )}\n style={{ width: 1.5, minHeight: 24 }}\n />\n )}\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(--alias-colors-text-subtlest)]',\n stepStatus === 'process' &&\n 'tw-text-[var(--alias-colors-text-selected)]',\n stepStatus === 'wait' &&\n 'tw-text-[var(--alias-colors-text-default)]',\n stepStatus === 'error' &&\n 'tw-text-[var(--alias-colors-text-danger)]',\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 </>\n )}\n </div>\n );\n })}\n </div>\n );\n}\n\nSteps.Step = Step;\n\nexport default Steps;\n"],"mappings":";;;;;;AA2BA,SAAS,cACP,OACA,SACA,cACS;AACT,KAAI,QAAQ,QAAS,QAAO;AAC5B,KAAI,UAAU,QAAS,QAAO,gBAAgB;AAC9C,QAAO;;AAGT,SAAS,MAAM,EACb,WACA,UAAU,GACV,YAAY,cACZ,QACA,OACA,YACc;CAEd,MAAM,gBACJ,SACA,MAAM,SAAS,QAAQ,SAAS,CAC7B,OAAO,MAAM,eAAe,CAC5B,KAAK,WAAgB;EACpB,OAAO,MAAM,MAAM;EACnB,aAAa,MAAM,MAAM;EACzB,QAAQ,MAAM,MAAM;EACpB,MAAM,MAAM,MAAM;EACnB,EAAE;AAEP,QACE,oBAAC,OAAD;EACE,WAAW,GACT,qBACA,cAAc,aAAa,gBAAgB,8BAC3C,UACD;YAEA,cAAc,KAAK,MAAM,UAAU;GAClC,MAAM,aAAa,KAAK,UAAU,cAAc,OAAO,SAAS,OAAO;GACvE,MAAM,SAAS,UAAU,cAAc,SAAS;AAEhD,UACE,oBAAC,OAAD;IAEE,WAAW,GACT,0BACA,cAAc,eACV,yDACA,gCACJ,kBAAkB,aACnB;cAEA,cAAc,eACb,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf;MACG,QAAQ,KACP,oBAAC,OAAD;OACE,WAAW,GACT,aACA,SAAS,UACL,gDACA,6CACL;OACD,OAAO,EAAE,QAAQ,KAAK;OACtB,CAAA;MAEJ,oBAAC,OAAD;OAAK,WAAU;iBACZ,KAAK,QAAQ,oBAAC,aAAD,EAAa,MAAM,YAAc,CAAA;OAC3C,CAAA;MACL,CAAC,UACA,oBAAC,OAAD;OACE,WAAW,GACT,aACA,QAAQ,UACJ,gDACA,6CACL;OACD,OAAO,EAAE,QAAQ,KAAK;OACtB,CAAA;MAEA;QAEN,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MACE,WAAW,GAET,oFACA,eAAe,YACb,+CACF,eAAe,aACb,+CACF,eAAe,UACb,8CACF,eAAe,WACb,4CACH;gBAEA,KAAK;MACF,CAAA,EACL,KAAK,eACJ,oBAAC,OAAD;MACE,WAAW,GAET,uHACA,eAAe,YAAY,eAAe,UACtC,gDACA,4CACL;gBAEA,KAAK;MACF,CAAA,CAEJ;OACL,EAAA,CAAA,GAEH,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAK,WAAU;gBACZ,KAAK,QAAQ,oBAAC,aAAD,EAAa,MAAM,YAAc,CAAA;MAC3C,CAAA,EACL,CAAC,UACA,oBAAC,OAAD;MACE,WAAW,GACT,qBACA,QAAQ,UACJ,gDACA,6CACL;MACD,OAAO;OAAE,OAAO;OAAK,WAAW;OAAI;MACpC,CAAA,CAEA;QAEN,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MACE,WAAW,GAET,oFACA,eAAe,YACb,+CACF,eAAe,aACb,+CACF,eAAe,UACb,8CACF,eAAe,WACb,4CACH;gBAEA,KAAK;MACF,CAAA,EACL,KAAK,eACJ,oBAAC,OAAD;MACE,WAAW,GAET,yJACD;gBAEA,KAAK;MACF,CAAA,CAEJ;OACL,EAAA,CAAA;IAED,EAxHC,MAwHD;IAER;EACE,CAAA;;AAIV,MAAM,OAAO"}
|
package/dist/Switch/index.js
CHANGED
|
@@ -4,6 +4,23 @@ import SizeContext from "../ConfigProvider/sizeContext.js";
|
|
|
4
4
|
import { useContext, useEffect, useState } from "react";
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
//#region src/Switch/index.tsx
|
|
7
|
+
var switchSizeConfig = {
|
|
8
|
+
large: {
|
|
9
|
+
trackW: 36,
|
|
10
|
+
trackH: 20,
|
|
11
|
+
thumbSize: 16
|
|
12
|
+
},
|
|
13
|
+
middle: {
|
|
14
|
+
trackW: 28,
|
|
15
|
+
trackH: 16,
|
|
16
|
+
thumbSize: 12
|
|
17
|
+
},
|
|
18
|
+
small: {
|
|
19
|
+
trackW: 22,
|
|
20
|
+
trackH: 12,
|
|
21
|
+
thumbSize: 8
|
|
22
|
+
}
|
|
23
|
+
};
|
|
7
24
|
var Switch = ({ className = "", disabled: customDisabled, loading = false, size: customSize, checked, defaultChecked, onChange, onClick, children }) => {
|
|
8
25
|
const contentSize = useContext(SizeContext);
|
|
9
26
|
const size = customSize || contentSize || "middle";
|
|
@@ -20,14 +37,11 @@ var Switch = ({ className = "", disabled: customDisabled, loading = false, size:
|
|
|
20
37
|
onChange?.(newChecked, e);
|
|
21
38
|
onClick?.(newChecked, e);
|
|
22
39
|
};
|
|
23
|
-
const
|
|
24
|
-
const trackW = isSmall ? 28 : 36;
|
|
25
|
-
const trackH = isSmall ? 16 : 20;
|
|
26
|
-
const thumbSize = isSmall ? 12 : 16;
|
|
40
|
+
const { trackW, trackH, thumbSize } = switchSizeConfig[size];
|
|
27
41
|
const thumbOffset = 2;
|
|
28
42
|
const thumbTranslate = trackW - thumbSize - thumbOffset * 2;
|
|
29
43
|
return /* @__PURE__ */ jsxs("span", {
|
|
30
|
-
className: cn(className, "ald-switch", `ald-switch-${size}`, {
|
|
44
|
+
className: cn(className, "ald-switch tw-inline-flex tw-items-center tw-gap-1.5 tw-text-[0]", `ald-switch-${size}`, currentDisabled && "tw-pointer-events-none tw-cursor-default", {
|
|
31
45
|
"ald-switch-disabled": currentDisabled,
|
|
32
46
|
"ald-switch-checked": userChecked
|
|
33
47
|
}),
|
|
@@ -36,7 +50,7 @@ var Switch = ({ className = "", disabled: customDisabled, loading = false, size:
|
|
|
36
50
|
role: "switch",
|
|
37
51
|
"aria-checked": !!userChecked,
|
|
38
52
|
disabled: currentDisabled,
|
|
39
|
-
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(--alias-colors-icon-brand)] hover:tw-bg-[var(--alias-colors-icon-selected)]" : "tw-bg-[var(--alias-colors-icon-subtler)] hover:tw-bg-[var(--alias-colors-icon-subtle)]", currentDisabled && "tw-cursor-not-allowed tw-
|
|
53
|
+
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(--alias-colors-icon-brand)] hover:tw-bg-[var(--alias-colors-icon-selected)]" : "tw-bg-[var(--alias-colors-icon-subtler)] hover:tw-bg-[var(--alias-colors-icon-subtle)]", currentDisabled && "tw-cursor-not-allowed tw-opacity-40"),
|
|
40
54
|
style: {
|
|
41
55
|
width: trackW,
|
|
42
56
|
height: trackH
|
|
@@ -52,7 +66,7 @@ var Switch = ({ className = "", disabled: customDisabled, loading = false, size:
|
|
|
52
66
|
}
|
|
53
67
|
})
|
|
54
68
|
}), children && /* @__PURE__ */ jsx("span", {
|
|
55
|
-
className: "ald-switch-text",
|
|
69
|
+
className: cn("ald-switch-text tw-inline-flex tw-items-center tw-align-middle tw-text-[var(--alias-colors-text-default)]", size === "large" && "tw-h-5 tw-text-base tw-leading-5", size === "middle" && "tw-h-4 tw-text-sm tw-leading-4", size === "small" && "tw-h-3 tw-text-xs tw-leading-3", currentDisabled && "tw-opacity-50"),
|
|
56
70
|
children
|
|
57
71
|
})]
|
|
58
72
|
});
|
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}\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}) => {\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
|
|
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}\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}) => {\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 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(--alias-colors-icon-brand)] hover:tw-bg-[var(--alias-colors-icon-selected)]'\n : 'tw-bg-[var(--alias-colors-icon-subtler)] hover:tw-bg-[var(--alias-colors-icon-subtle)]',\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-white 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(--alias-colors-text-default)]',\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":";;;;;;AAwBA,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,eACI;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,UAAU;GACV,WAAW,GACT,uJACA,cACI,2FACA,0FACJ,mBAAmB,sCACpB;GACD,OAAO;IAAE,OAAO;IAAQ,QAAQ;IAAQ;GACxC,SAAS;aAET,oBAAC,QAAD;IACE,WAAW,GACT,4FACD;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,6GACA,SAAS,WAAW,oCACpB,SAAS,YAAY,kCACrB,SAAS,WAAW,kCACpB,mBAAmB,gBACpB;GAEA;GACI,CAAA,CAEJ"}
|
|
@@ -13,7 +13,7 @@ function TableFooter(props) {
|
|
|
13
13
|
const btnItems = [{
|
|
14
14
|
key: "$UN_SELECT_ALL$",
|
|
15
15
|
label: t.Table.cancelSelect,
|
|
16
|
-
onClick: (
|
|
16
|
+
onClick: () => rowSelectionInfo.unSelectAll()
|
|
17
17
|
}, ...items];
|
|
18
18
|
const rowSelectionNode = isShowRowSelectionInFooter && /* @__PURE__ */ jsxs("div", {
|
|
19
19
|
className: prefixCls("footer-row-selection"),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Table/components/Footer/index.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport { Pagination } from '../../..';\nimport { IPaginationProps } from '../../../Pagination/types';\nimport TextLink from '../../../TextLink';\nimport { LocaleContext, getTranslator } from '../../../locale/default';\nimport { prefixCls } from '../../helper';\nimport { IRowSelectionInfo } from '../../hooks/useRowSelection';\nimport { ITableProps } from '../../types';\n\nexport default function TableFooter<TDataItem extends object>(\n props: IProps<TDataItem>,\n) {\n const { locale } = useContext(LocaleContext);\n const t = getTranslator(locale);\n\n const {\n pagination,\n scroll = {},\n scrollToFirstRow,\n isShowPagination,\n rowSelectionInfo,\n } = props;\n\n // 选择行\n const {\n getCheckboxAllNode,\n selectedRowKeys,\n selectedRowKeysInCurrPage,\n items,\n isShowRowSelectionInFooter,\n onChange: changeSelectedRowKeys,\n } = rowSelectionInfo;\n\n const btnItems = [\n {\n key: '$UN_SELECT_ALL$',\n label: t.Table.cancelSelect,\n onClick: (
|
|
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"}
|
|
@@ -100,15 +100,9 @@ function useRowDnd(props) {
|
|
|
100
100
|
const handleDragging = (dragIndex, hoverIndex) => {
|
|
101
101
|
setDraggingTempData((currentData) => {
|
|
102
102
|
const newData = [...currentData];
|
|
103
|
-
if (dragIndex < 0 || dragIndex >= newData.length)
|
|
104
|
-
console.warn(`Drag index ${dragIndex} out of bounds for data length ${newData.length}`);
|
|
105
|
-
return currentData;
|
|
106
|
-
}
|
|
103
|
+
if (dragIndex < 0 || dragIndex >= newData.length) return currentData;
|
|
107
104
|
const draggedRow = newData.splice(dragIndex, 1)[0];
|
|
108
|
-
if (draggedRow === void 0)
|
|
109
|
-
console.warn(`Dragged item at index ${dragIndex} was undefined during splice.`);
|
|
110
|
-
return currentData;
|
|
111
|
-
}
|
|
105
|
+
if (draggedRow === void 0) return currentData;
|
|
112
106
|
newData.splice(hoverIndex, 0, draggedRow);
|
|
113
107
|
return newData;
|
|
114
108
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRowDnd.js","names":[],"sources":["../../../src/Table/hooks/useRowDnd.tsx"],"sourcesContent":["import DragLightLineSvg from '../../Icon/components/DragLightLine';\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { useDrag, useDrop, DragSourceMonitor } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { getRowKey, hasFixedLeftColumn, prefixCls } from '../helper';\nimport { ITableColumn, ITableProps } from '../types';\nimport _ from 'lodash';\n\n// 定义拖拽项类型\nconst ROW_DND_TYPE = 'ALD_TABLE_ROW_DND_TYPE';\n\ninterface DragItem {\n index: number;\n id: string;\n}\n\n// 拖拽手柄组件\nconst DragHandle = ({\n index,\n id,\n onDragging,\n rowRef,\n onDragStart,\n onDragComplete,\n}: {\n index: number;\n id: string;\n onDragging: (dragIndex: number, hoverIndex: number) => void;\n rowRef?: React.RefObject<HTMLDivElement>;\n onDragStart: (id: string) => void;\n onDragComplete: () => void;\n}) => {\n const ref = useRef<HTMLDivElement>(null);\n\n // 使用 ref 来跟踪是否已经通知拖动开始\n const dragStartedRef = useRef(false);\n\n const [{ isDragging }, drag, preview] = useDrag({\n type: ROW_DND_TYPE,\n item: () => {\n // 只在拖拽真正开始且尚未通知时触发一次\n if (!dragStartedRef.current) {\n // 通知开始拖动,传递行的ID\n onDragStart(id);\n dragStartedRef.current = true;\n }\n\n return { index, id };\n },\n collect: (monitor: DragSourceMonitor) => ({\n isDragging: monitor.isDragging(),\n }),\n end: () => {\n // 拖拽结束时清除拖动状态和重置标志\n onDragComplete();\n dragStartedRef.current = false;\n },\n });\n\n const [, drop] = useDrop({\n accept: ROW_DND_TYPE,\n // @ts-ignore - react-dnd类型定义有时与实际用法不一致\n hover(item: DragItem, monitor) {\n // 如果有行引用并且行引用有值,使用行引用来判断位置\n const dropRef = rowRef?.current;\n\n if (!dropRef) {\n return;\n }\n\n const dragIndex = item.index;\n const hoverIndex = index;\n\n // 如果拖动的是自己,不做任何事\n if (dragIndex === hoverIndex) {\n return;\n }\n\n // 确定鼠标位置\n const hoverBoundingRect = dropRef.getBoundingClientRect();\n const hoverMiddleY =\n (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;\n const clientOffset = monitor.getClientOffset();\n\n if (!clientOffset) {\n return;\n }\n\n const hoverClientY = clientOffset.y - hoverBoundingRect.top;\n\n // 向下拖动,但鼠标还没过半\n if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {\n return;\n }\n\n // 向上拖动,但鼠标还没过半\n if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {\n return;\n }\n\n // 执行排序\n onDragging(dragIndex, hoverIndex);\n\n // 更新拖拽项的索引,react-dnd 官方示例推荐这样做以提高性能并避免奇怪行为\n item.index = hoverIndex;\n },\n });\n\n // 将 drag 连接到手柄 ref 上\n drag(ref);\n\n // 设置放置目标\n if (rowRef?.current) {\n drop(rowRef.current);\n }\n\n preview(getEmptyImage());\n\n return (\n <div\n ref={ref}\n className={prefixCls('row-dnd-item')}\n style={{ cursor: 'move', opacity: isDragging ? 0.5 : 1 }}\n >\n <DragLightLineSvg />\n </div>\n );\n};\n\nexport default function useRowDnd<TDataItem extends object>(\n props: ITableProps<TDataItem>,\n): IRowDndInfo<TDataItem> {\n const { columns, rowDnd, data, rowKey } = props;\n // 跟踪当前正在拖动的行的ID\n const [draggingRowId, setDraggingRowId] = useState<string | null>(null);\n\n // 为每一行创建一个 ref,使用 useMemo 缓存 Map 实例\n const rowRefs = useMemo(\n () => new Map<string, React.RefObject<HTMLDivElement>>(),\n [],\n );\n\n // 当拖拽过程中,临时存储数据\n const [draggingTempData, setDraggingTempData] = useState<TDataItem[]>([]);\n\n const tableData = useMemo(() => {\n // 拖拽过程中,使用临时数据,这样外部调用方可以不用关心拖拽过程中的数据变化\n if (draggingRowId) {\n return draggingTempData;\n }\n return data;\n }, [data, draggingRowId, draggingTempData]);\n\n // 获取行的 ref,用于设置拖拽预览\n const getRowRef = useCallback(\n (record: TDataItem) => {\n const key = getRowKey(record, rowKey);\n if (!rowRefs.has(key)) {\n rowRefs.set(\n key,\n React.createRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>,\n );\n }\n return rowRefs.get(key) as React.MutableRefObject<HTMLDivElement>;\n },\n [rowKey, rowRefs],\n );\n\n const defaultInfo = useMemo(() => {\n return {\n columns,\n getRowRef: () => undefined,\n draggingRowId: null,\n tableData: data,\n };\n }, [columns, data]);\n\n if (!rowDnd) {\n return defaultInfo;\n }\n if (props.expandable) {\n console.error('rowDnd and expandable mode cannot be used together');\n return defaultInfo;\n }\n if (!props.rowKey) {\n // 如果rowKey没有设置,则无法进行拖拽,因为必须知道每行的唯一标识\n console.error('rowKey is required in rowDnd mode');\n return defaultInfo;\n }\n const { fixed: rowDndFixed, onChange } = rowDnd;\n\n const fixed = rowDndFixed || hasFixedLeftColumn(columns);\n\n const handleDragging = (dragIndex: number, hoverIndex: number) => {\n // 使用函数式更新,确保基于最新的状态进行操作\n setDraggingTempData((currentData) => {\n const newData = [...currentData];\n\n // 确保 dragIndex 在有效范围内\n if (dragIndex < 0 || dragIndex >= newData.length) {\n console.warn(\n `Drag index ${dragIndex} out of bounds for data length ${newData.length}`,\n );\n return currentData; // 返回当前状态,不作修改\n }\n\n // 保存被拖拽的行\n const draggedRow = newData.splice(dragIndex, 1)[0];\n\n // 如果因为某些原因未能获取到拖拽的行(理论上不应发生)\n if (draggedRow === undefined) {\n console.warn(\n `Dragged item at index ${dragIndex} was undefined during splice.`,\n );\n return currentData; // 返回当前状态,不作修改\n }\n\n // 插入到新位置\n newData.splice(hoverIndex, 0, draggedRow);\n\n return newData;\n });\n };\n\n // 记录拖动开始\n const handleDragStart = (id: string) => {\n setDraggingRowId(id);\n setDraggingTempData(_.cloneDeep(data));\n };\n\n // 记录拖动结束\n const handleDragComplete = () => {\n // 必须在清空 draggingRowId 之前先找到 draggingRow\n // 因为 tableData 依赖 draggingRowId,清空后 tableData 会切换回原始 data\n const draggingRow = tableData.find(\n (item) => getRowKey(item, rowKey) === draggingRowId,\n );\n if (!draggingRow) {\n // 不应该出现这种情况\n console.error('draggingRow is not found');\n setDraggingRowId(null);\n return;\n }\n // 保存当前的 tableData,因为清空 draggingRowId 后 tableData 会变化\n const finalData = tableData;\n setDraggingRowId(null);\n setDraggingTempData([]);\n onChange(finalData, draggingRow);\n };\n\n const dndColumn: ITableColumn<TDataItem> = {\n dataIndex: '',\n title: '',\n width: 48,\n render: (text: unknown, record: TDataItem, rowIndex: number) => {\n const key = getRowKey(record, rowKey);\n const rowRef = getRowRef(record);\n return (\n <DragHandle\n index={rowIndex}\n id={key}\n onDragging={handleDragging}\n onDragStart={handleDragStart}\n onDragComplete={handleDragComplete}\n rowRef={rowRef}\n />\n );\n },\n fixed: fixed ? 'left' : undefined,\n };\n\n return {\n columns: [dndColumn, ...columns],\n getRowRef,\n draggingRowId,\n tableData,\n };\n}\n\ninterface IRowDndInfo<TDataItem extends object> {\n columns: ITableProps<TDataItem>['columns'];\n getRowRef: (\n record: TDataItem,\n rowIndex: number,\n ) => React.MutableRefObject<HTMLDivElement> | undefined;\n draggingRowId: string | null;\n tableData: TDataItem[];\n}\n"],"mappings":";;;;;;;;AASA,IAAM,eAAe;AAQrB,IAAM,cAAc,EAClB,OACA,IACA,YACA,QACA,aACA,qBAQI;CACJ,MAAM,MAAM,OAAuB,KAAK;CAGxC,MAAM,iBAAiB,OAAO,MAAM;CAEpC,MAAM,CAAC,EAAE,cAAc,MAAM,WAAW,QAAQ;EAC9C,MAAM;EACN,YAAY;AAEV,OAAI,CAAC,eAAe,SAAS;AAE3B,gBAAY,GAAG;AACf,mBAAe,UAAU;;AAG3B,UAAO;IAAE;IAAO;IAAI;;EAEtB,UAAU,aAAgC,EACxC,YAAY,QAAQ,YAAY,EACjC;EACD,WAAW;AAET,mBAAgB;AAChB,kBAAe,UAAU;;EAE5B,CAAC;CAEF,MAAM,GAAG,QAAQ,QAAQ;EACvB,QAAQ;EAER,MAAM,MAAgB,SAAS;GAE7B,MAAM,UAAU,QAAQ;AAExB,OAAI,CAAC,QACH;GAGF,MAAM,YAAY,KAAK;GACvB,MAAM,aAAa;AAGnB,OAAI,cAAc,WAChB;GAIF,MAAM,oBAAoB,QAAQ,uBAAuB;GACzD,MAAM,gBACH,kBAAkB,SAAS,kBAAkB,OAAO;GACvD,MAAM,eAAe,QAAQ,iBAAiB;AAE9C,OAAI,CAAC,aACH;GAGF,MAAM,eAAe,aAAa,IAAI,kBAAkB;AAGxD,OAAI,YAAY,cAAc,eAAe,aAC3C;AAIF,OAAI,YAAY,cAAc,eAAe,aAC3C;AAIF,cAAW,WAAW,WAAW;AAGjC,QAAK,QAAQ;;EAEhB,CAAC;AAGF,MAAK,IAAI;AAGT,KAAI,QAAQ,QACV,MAAK,OAAO,QAAQ;AAGtB,SAAQ,eAAe,CAAC;AAExB,QACE,oBAAC,OAAD;EACO;EACL,WAAW,UAAU,eAAe;EACpC,OAAO;GAAE,QAAQ;GAAQ,SAAS,aAAa,KAAM;GAAG;YAExD,oBAAC,MAAD,EAAoB,CAAA;EAChB,CAAA;;AAIV,SAAwB,UACtB,OACwB;CACxB,MAAM,EAAE,SAAS,QAAQ,MAAM,WAAW;CAE1C,MAAM,CAAC,eAAe,oBAAoB,SAAwB,KAAK;CAGvE,MAAM,UAAU,8BACR,IAAI,KAA8C,EACxD,EAAE,CACH;CAGD,MAAM,CAAC,kBAAkB,uBAAuB,SAAsB,EAAE,CAAC;CAEzE,MAAM,YAAY,cAAc;AAE9B,MAAI,cACF,QAAO;AAET,SAAO;IACN;EAAC;EAAM;EAAe;EAAiB,CAAC;CAG3C,MAAM,YAAY,aACf,WAAsB;EACrB,MAAM,MAAM,UAAU,QAAQ,OAAO;AACrC,MAAI,CAAC,QAAQ,IAAI,IAAI,CACnB,SAAQ,IACN,KACA,MAAM,WAA2B,CAClC;AAEH,SAAO,QAAQ,IAAI,IAAI;IAEzB,CAAC,QAAQ,QAAQ,CAClB;CAED,MAAM,cAAc,cAAc;AAChC,SAAO;GACL;GACA,iBAAiB;GACjB,eAAe;GACf,WAAW;GACZ;IACA,CAAC,SAAS,KAAK,CAAC;AAEnB,KAAI,CAAC,OACH,QAAO;AAET,KAAI,MAAM,YAAY;AACpB,UAAQ,MAAM,qDAAqD;AACnE,SAAO;;AAET,KAAI,CAAC,MAAM,QAAQ;AAEjB,UAAQ,MAAM,oCAAoC;AAClD,SAAO;;CAET,MAAM,EAAE,OAAO,aAAa,aAAa;CAEzC,MAAM,QAAQ,eAAe,mBAAmB,QAAQ;CAExD,MAAM,kBAAkB,WAAmB,eAAuB;AAEhE,uBAAqB,gBAAgB;GACnC,MAAM,UAAU,CAAC,GAAG,YAAY;AAGhC,OAAI,YAAY,KAAK,aAAa,QAAQ,QAAQ;AAChD,YAAQ,KACN,cAAc,UAAU,iCAAiC,QAAQ,SAClE;AACD,WAAO;;GAIT,MAAM,aAAa,QAAQ,OAAO,WAAW,EAAE,CAAC;AAGhD,OAAI,eAAe,QAAW;AAC5B,YAAQ,KACN,yBAAyB,UAAU,+BACpC;AACD,WAAO;;AAIT,WAAQ,OAAO,YAAY,GAAG,WAAW;AAEzC,UAAO;IACP;;CAIJ,MAAM,mBAAmB,OAAe;AACtC,mBAAiB,GAAG;AACpB,sBAAoB,EAAE,UAAU,KAAK,CAAC;;CAIxC,MAAM,2BAA2B;EAG/B,MAAM,cAAc,UAAU,MAC3B,SAAS,UAAU,MAAM,OAAO,KAAK,cACvC;AACD,MAAI,CAAC,aAAa;AAEhB,WAAQ,MAAM,2BAA2B;AACzC,oBAAiB,KAAK;AACtB;;EAGF,MAAM,YAAY;AAClB,mBAAiB,KAAK;AACtB,sBAAoB,EAAE,CAAC;AACvB,WAAS,WAAW,YAAY;;AAwBlC,QAAO;EACL,SAAS,CAtBgC;GACzC,WAAW;GACX,OAAO;GACP,OAAO;GACP,SAAS,MAAe,QAAmB,aAAqB;AAG9D,WACE,oBAAC,YAAD;KACE,OAAO;KACP,IALQ,UAAU,QAAQ,OAAO;KAMjC,YAAY;KACZ,aAAa;KACb,gBAAgB;KACR,QARG,UAAU,OAAO;KAS5B,CAAA;;GAGN,OAAO,QAAQ,SAAS;GACzB,EAGsB,GAAG,QAAQ;EAChC;EACA;EACA;EACD"}
|
|
1
|
+
{"version":3,"file":"useRowDnd.js","names":[],"sources":["../../../src/Table/hooks/useRowDnd.tsx"],"sourcesContent":["import DragLightLineSvg from '../../Icon/components/DragLightLine';\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { useDrag, useDrop, DragSourceMonitor } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { getRowKey, hasFixedLeftColumn, prefixCls } from '../helper';\nimport { ITableColumn, ITableProps } from '../types';\nimport _ from 'lodash';\n\n// 定义拖拽项类型\nconst ROW_DND_TYPE = 'ALD_TABLE_ROW_DND_TYPE';\n\ninterface DragItem {\n index: number;\n id: string;\n}\n\n// 拖拽手柄组件\nconst DragHandle = ({\n index,\n id,\n onDragging,\n rowRef,\n onDragStart,\n onDragComplete,\n}: {\n index: number;\n id: string;\n onDragging: (dragIndex: number, hoverIndex: number) => void;\n rowRef?: React.RefObject<HTMLDivElement>;\n onDragStart: (id: string) => void;\n onDragComplete: () => void;\n}) => {\n const ref = useRef<HTMLDivElement>(null);\n\n // 使用 ref 来跟踪是否已经通知拖动开始\n const dragStartedRef = useRef(false);\n\n const [{ isDragging }, drag, preview] = useDrag({\n type: ROW_DND_TYPE,\n item: () => {\n // 只在拖拽真正开始且尚未通知时触发一次\n if (!dragStartedRef.current) {\n // 通知开始拖动,传递行的ID\n onDragStart(id);\n dragStartedRef.current = true;\n }\n\n return { index, id };\n },\n collect: (monitor: DragSourceMonitor) => ({\n isDragging: monitor.isDragging(),\n }),\n end: () => {\n // 拖拽结束时清除拖动状态和重置标志\n onDragComplete();\n dragStartedRef.current = false;\n },\n });\n\n const [, drop] = useDrop({\n accept: ROW_DND_TYPE,\n // @ts-ignore - react-dnd类型定义有时与实际用法不一致\n hover(item: DragItem, monitor) {\n // 如果有行引用并且行引用有值,使用行引用来判断位置\n const dropRef = rowRef?.current;\n\n if (!dropRef) {\n return;\n }\n\n const dragIndex = item.index;\n const hoverIndex = index;\n\n // 如果拖动的是自己,不做任何事\n if (dragIndex === hoverIndex) {\n return;\n }\n\n // 确定鼠标位置\n const hoverBoundingRect = dropRef.getBoundingClientRect();\n const hoverMiddleY =\n (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;\n const clientOffset = monitor.getClientOffset();\n\n if (!clientOffset) {\n return;\n }\n\n const hoverClientY = clientOffset.y - hoverBoundingRect.top;\n\n // 向下拖动,但鼠标还没过半\n if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {\n return;\n }\n\n // 向上拖动,但鼠标还没过半\n if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {\n return;\n }\n\n // 执行排序\n onDragging(dragIndex, hoverIndex);\n\n // 更新拖拽项的索引,react-dnd 官方示例推荐这样做以提高性能并避免奇怪行为\n item.index = hoverIndex;\n },\n });\n\n // 将 drag 连接到手柄 ref 上\n drag(ref);\n\n // 设置放置目标\n if (rowRef?.current) {\n drop(rowRef.current);\n }\n\n preview(getEmptyImage());\n\n return (\n <div\n ref={ref}\n className={prefixCls('row-dnd-item')}\n style={{ cursor: 'move', opacity: isDragging ? 0.5 : 1 }}\n >\n <DragLightLineSvg />\n </div>\n );\n};\n\nexport default function useRowDnd<TDataItem extends object>(\n props: ITableProps<TDataItem>,\n): IRowDndInfo<TDataItem> {\n const { columns, rowDnd, data, rowKey } = props;\n // 跟踪当前正在拖动的行的ID\n const [draggingRowId, setDraggingRowId] = useState<string | null>(null);\n\n // 为每一行创建一个 ref,使用 useMemo 缓存 Map 实例\n const rowRefs = useMemo(\n () => new Map<string, React.RefObject<HTMLDivElement>>(),\n [],\n );\n\n // 当拖拽过程中,临时存储数据\n const [draggingTempData, setDraggingTempData] = useState<TDataItem[]>([]);\n\n const tableData = useMemo(() => {\n // 拖拽过程中,使用临时数据,这样外部调用方可以不用关心拖拽过程中的数据变化\n if (draggingRowId) {\n return draggingTempData;\n }\n return data;\n }, [data, draggingRowId, draggingTempData]);\n\n // 获取行的 ref,用于设置拖拽预览\n const getRowRef = useCallback(\n (record: TDataItem) => {\n const key = getRowKey(record, rowKey);\n if (!rowRefs.has(key)) {\n rowRefs.set(\n key,\n React.createRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>,\n );\n }\n return rowRefs.get(key) as React.MutableRefObject<HTMLDivElement>;\n },\n [rowKey, rowRefs],\n );\n\n const defaultInfo = useMemo(() => {\n return {\n columns,\n getRowRef: () => undefined,\n draggingRowId: null,\n tableData: data,\n };\n }, [columns, data]);\n\n if (!rowDnd) {\n return defaultInfo;\n }\n if (props.expandable) {\n console.error('rowDnd and expandable mode cannot be used together');\n return defaultInfo;\n }\n if (!props.rowKey) {\n // 如果rowKey没有设置,则无法进行拖拽,因为必须知道每行的唯一标识\n console.error('rowKey is required in rowDnd mode');\n return defaultInfo;\n }\n const { fixed: rowDndFixed, onChange } = rowDnd;\n\n const fixed = rowDndFixed || hasFixedLeftColumn(columns);\n\n const handleDragging = (dragIndex: number, hoverIndex: number) => {\n // 使用函数式更新,确保基于最新的状态进行操作\n setDraggingTempData((currentData) => {\n const newData = [...currentData];\n\n if (dragIndex < 0 || dragIndex >= newData.length) {\n return currentData;\n }\n\n const draggedRow = newData.splice(dragIndex, 1)[0];\n\n if (draggedRow === undefined) {\n return currentData;\n }\n\n // 插入到新位置\n newData.splice(hoverIndex, 0, draggedRow);\n\n return newData;\n });\n };\n\n // 记录拖动开始\n const handleDragStart = (id: string) => {\n setDraggingRowId(id);\n setDraggingTempData(_.cloneDeep(data));\n };\n\n // 记录拖动结束\n const handleDragComplete = () => {\n // 必须在清空 draggingRowId 之前先找到 draggingRow\n // 因为 tableData 依赖 draggingRowId,清空后 tableData 会切换回原始 data\n const draggingRow = tableData.find(\n (item) => getRowKey(item, rowKey) === draggingRowId,\n );\n if (!draggingRow) {\n // 不应该出现这种情况\n console.error('draggingRow is not found');\n setDraggingRowId(null);\n return;\n }\n // 保存当前的 tableData,因为清空 draggingRowId 后 tableData 会变化\n const finalData = tableData;\n setDraggingRowId(null);\n setDraggingTempData([]);\n onChange(finalData, draggingRow);\n };\n\n const dndColumn: ITableColumn<TDataItem> = {\n dataIndex: '',\n title: '',\n width: 48,\n render: (text: unknown, record: TDataItem, rowIndex: number) => {\n const key = getRowKey(record, rowKey);\n const rowRef = getRowRef(record);\n return (\n <DragHandle\n index={rowIndex}\n id={key}\n onDragging={handleDragging}\n onDragStart={handleDragStart}\n onDragComplete={handleDragComplete}\n rowRef={rowRef}\n />\n );\n },\n fixed: fixed ? 'left' : undefined,\n };\n\n return {\n columns: [dndColumn, ...columns],\n getRowRef,\n draggingRowId,\n tableData,\n };\n}\n\ninterface IRowDndInfo<TDataItem extends object> {\n columns: ITableProps<TDataItem>['columns'];\n getRowRef: (\n record: TDataItem,\n rowIndex: number,\n ) => React.MutableRefObject<HTMLDivElement> | undefined;\n draggingRowId: string | null;\n tableData: TDataItem[];\n}\n"],"mappings":"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"}
|
|
@@ -10,7 +10,7 @@ export interface IRowSelectionInfo<TDataItem extends object> {
|
|
|
10
10
|
getCheckboxAllNode: ((children?: React.ReactNode) => React.ReactNode) | null;
|
|
11
11
|
selectedRowKeys: string[];
|
|
12
12
|
selectedRowKeysInCurrPage: string[];
|
|
13
|
-
unSelectAll: (
|
|
13
|
+
unSelectAll: () => void;
|
|
14
14
|
isShowRowSelectionInFooter: boolean;
|
|
15
15
|
items: {
|
|
16
16
|
key: string;
|