@aloudata/aloudata-design 3.0.0-beta.9 → 3.0.0
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/type.d.ts +2 -2
- package/dist/InputSearch/index.js +0 -1
- 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 +2 -2
- package/dist/Tree/Tree2.js +2 -2
- package/dist/Tree/Tree2.js.map +1 -1
- 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 +8 -3
- package/dist/_utils/SimpleOverflow.d.ts +0 -14
- package/dist/_utils/SimpleOverflow.js +0 -61
- package/dist/_utils/SimpleOverflow.js.map +0 -1
package/dist/Modal/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/Modal/index.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport React, {\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { createRoot } from 'react-dom/client';\nimport Button, { ButtonType, IButtonProps } from '../Button';\nimport {\n AttentionTriangleLightLine,\n CheckCircleLightLine,\n CloseLLine,\n InformationCircleLightLine,\n} from '../Icon';\nimport IconButton from '../IconButton';\nimport ScrollArea from '../ScrollArea';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport { cn } from '../lib/utils';\n\nexport const destroyFns: Array<() => void> = [];\n\nexport interface ModalProps {\n open?: boolean;\n onOk?: (e: React.MouseEvent) => void;\n onCancel?: (e: React.MouseEvent) => void;\n afterClose?: () => void;\n title?: React.ReactNode;\n subTitle?: React.ReactNode;\n icon?: React.ReactElement;\n width?: number | string;\n footer?: React.ReactNode | null;\n okText?: React.ReactNode;\n cancelText?: React.ReactNode;\n okButtonProps?: IButtonProps;\n cancelButtonProps?: IButtonProps;\n okType?: ButtonType;\n confirmLoading?: boolean;\n maskClosable?: boolean;\n closable?: boolean;\n closeIcon?: React.ReactNode;\n centered?: boolean;\n destroyOnClose?: boolean;\n className?: string;\n wrapClassName?: string;\n style?: React.CSSProperties;\n bodyStyle?: React.CSSProperties;\n zIndex?: number;\n children?: React.ReactNode;\n paddingLess?: boolean;\n virtualScrollBar?: boolean;\n hideHeaderBottomBorder?: boolean;\n responsiveBounds?: boolean;\n fullscreen?: boolean;\n keyboard?: boolean;\n afterOpenChange?: (open: boolean) => void;\n getContainer?: (() => HTMLElement) | false;\n /** @internal used by static methods to pass modal type for icon styling */\n _modalType?: string;\n}\n\nexport interface ModalFuncProps {\n title?: React.ReactNode;\n subTitle?: React.ReactNode;\n content?: React.ReactNode;\n icon?: React.ReactElement;\n okText?: React.ReactNode;\n cancelText?: React.ReactNode;\n okButtonProps?: IButtonProps;\n cancelButtonProps?: IButtonProps;\n okType?: ButtonType;\n onOk?: (...args: any[]) => any;\n onCancel?: (...args: any[]) => any;\n width?: number | string;\n className?: string;\n closable?: boolean;\n type?: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm';\n centered?: boolean;\n maskClosable?: boolean;\n}\n\nconst DEFAULT_WIDTH = 552;\n\nconst ModalTitle = (\n { icon, title, subTitle }: Pick<ModalProps, 'icon' | 'title' | 'subTitle'>,\n type?: string,\n) => (\n <div className=\"ald-modal-title-container tw-flex tw-items-center tw-gap-4\">\n {icon && (\n <div\n className={cn(\n 'ald-modal-icon-container tw-grid tw-size-10 tw-shrink-0 tw-place-items-center tw-rounded-[var(--global-grid-250)]',\n type === 'info' &&\n 'ald-modal-cion-info-container tw-bg-[var(--action-primary-subtle-hover)]',\n type === 'success' &&\n 'ald-modal-cion-success-container tw-bg-[var(--background-positive-muted)]',\n type === 'warning' &&\n 'ald-modal-cion-warning-container tw-bg-[var(--background-warning-muted)]',\n type === 'warn' &&\n 'ald-modal-cion-warning-container tw-bg-[var(--background-warning-muted)]',\n type === 'error' &&\n 'ald-modal-cion-error-container tw-bg-[var(--background-negative-muted)]',\n type === 'confirm' &&\n 'ald-modal-cion-confirm-container tw-bg-[var(--action-primary-subtle-hover)]',\n )}\n >\n {icon}\n </div>\n )}\n <div className=\"ald-modal-text-container\">\n {title && (\n <div\n className={cn(\n 'ald-modal-text-title tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--alias-colors-text-strong)]',\n !subTitle && 'ald-modal-text-title-only tw-text-xl',\n )}\n >\n {title}\n </div>\n )}\n {subTitle && (\n <div className=\"ald-modal-text-sub-title tw-mt-1 tw-text-xs tw-leading-4 tw-text-[var(--alias-colors-text-subtle)]\">\n {subTitle}\n </div>\n )}\n </div>\n </div>\n);\n\nfunction getIcon(\n type: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm',\n) {\n if (type === 'success')\n return (\n <CheckCircleLightLine\n fill=\"var(--content-inverted-primary)\"\n color=\"var(--background-positive-strong)\"\n size={24}\n />\n );\n if (type === 'error')\n return (\n <AttentionTriangleLightLine\n color=\"var(--background-negative-strong)\"\n fill=\"var(--content-inverted-primary)\"\n size={24}\n />\n );\n if (type === 'warning' || type === 'warn')\n return (\n <AttentionTriangleLightLine\n color=\"var(--background-warning-strong)\"\n size={24}\n />\n );\n return (\n <InformationCircleLightLine\n size={24}\n color=\"var(--interaction-default-normal)\"\n />\n );\n}\n\nfunction OriginModal(props: ModalProps) {\n const { locale } = useContext(LocaleContext);\n const t = getTranslator(locale);\n const {\n className,\n children,\n okType = 'primary',\n width,\n closeIcon,\n subTitle,\n okButtonProps = {},\n cancelButtonProps = {},\n okText = t.Modal.sure,\n cancelText = t.Modal.cancel,\n icon,\n title,\n paddingLess,\n responsiveBounds,\n hideHeaderBottomBorder,\n virtualScrollBar,\n style,\n maskClosable = false,\n fullscreen,\n open = false,\n onOk,\n onCancel,\n footer,\n confirmLoading,\n closable = true,\n zIndex = 1000,\n bodyStyle,\n keyboard = true,\n afterOpenChange,\n _modalType,\n } = props;\n\n const prevOpenRef = useRef(open);\n React.useEffect(() => {\n if (prevOpenRef.current !== open) {\n prevOpenRef.current = open;\n afterOpenChange?.(open);\n }\n }, [open, afterOpenChange]);\n\n const responsiveBoundsStyle = useMemo(() => {\n if (!responsiveBounds) return {};\n return {\n width: 'calc(100% - 160px)',\n maxWidth: '1680px',\n minWidth: '1280px',\n height: 'calc(100% - 48px)',\n maxHeight: '900px',\n minHeight: '640px',\n };\n }, [responsiveBounds]);\n\n const mergedOkProps = { loading: confirmLoading, ...okButtonProps };\n\n const renderFooter = () => {\n if (footer === null) return null;\n if (footer)\n return (\n <div className=\"ald-modal-footer tw-flex tw-items-center tw-justify-end tw-gap-2 tw-border-t tw-border-solid tw-border-[var(--global-cool-grey-100)] tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-px-6 tw-py-3\">\n {footer}\n </div>\n );\n return (\n <div className=\"ald-modal-footer tw-flex tw-justify-end tw-gap-2 tw-border-t tw-border-solid tw-border-[var(--border-default)] tw-px-6 tw-py-4\">\n <Button\n type=\"secondary\"\n size=\"middle\"\n {...cancelButtonProps}\n onClick={onCancel}\n >\n {cancelText}\n </Button>\n <Button type={okType} size=\"middle\" {...mergedOkProps} onClick={onOk}>\n {okText}\n </Button>\n </div>\n );\n };\n\n return (\n <DialogPrimitive.Root open={open}>\n <DialogPrimitive.Portal>\n <DialogPrimitive.Overlay\n className=\"ald-modal-mask tw-animate-in tw-fade-in-0 tw-fixed tw-inset-0 tw-bg-black/45\"\n style={{ zIndex }}\n />\n <DialogPrimitive.Content\n className={cn(\n 'ald-modal tw-fixed tw-flex tw-flex-col tw-overflow-hidden tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-shadow-[var(--elevation-bottom-bottom-lg)]',\n fullscreen\n ? 'ald-modal-fullscreen tw-inset-0 tw-size-full tw-rounded-none'\n : 'tw-left-1/2 tw-top-1/2 tw--translate-x-1/2 tw--translate-y-1/2 tw-rounded-r-75',\n paddingLess && 'ald-modal-padding-less',\n virtualScrollBar && 'ald-modal-virtual-scroll-bar',\n hideHeaderBottomBorder && 'ald-modal-hide-header-bottom-border',\n responsiveBounds && 'ald-modal-responsive-bounds',\n className,\n )}\n style={{\n ...(fullscreen\n ? {}\n : {\n width: responsiveBounds\n ? responsiveBoundsStyle.width\n : width || DEFAULT_WIDTH,\n ...responsiveBoundsStyle,\n }),\n zIndex: zIndex + 1,\n ...style,\n }}\n onEscapeKeyDown={(e) => {\n if (keyboard) {\n onCancel?.({} as React.MouseEvent);\n } else {\n e.preventDefault();\n }\n }}\n onPointerDownOutside={(e) => {\n if (maskClosable) {\n onCancel?.({} as React.MouseEvent);\n } else {\n e.preventDefault();\n }\n }}\n onInteractOutside={(e) => {\n if (!maskClosable) {\n e.preventDefault();\n }\n }}\n >\n {!fullscreen && (\n <div\n className={cn(\n 'ald-modal-header tw-flex tw-items-start tw-justify-between tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-px-6 tw-py-4',\n !hideHeaderBottomBorder &&\n 'tw-border-b tw-border-solid tw-border-[var(--global-cool-grey-100)]',\n )}\n >\n <DialogPrimitive.Title asChild>\n <div className=\"tw-flex-1\">\n {ModalTitle({ icon, title, subTitle }, _modalType)}\n </div>\n </DialogPrimitive.Title>\n {closable && (\n <DialogPrimitive.Close asChild>\n <span onClick={onCancel}>\n {closeIcon || (\n <IconButton\n icon={<CloseLLine size={20} />}\n size=\"middle\"\n />\n )}\n </span>\n </DialogPrimitive.Close>\n )}\n </div>\n )}\n {/* Hidden title for accessibility when fullscreen hides the header */}\n {fullscreen && (\n <DialogPrimitive.Title className=\"tw-sr-only\">\n {title}\n </DialogPrimitive.Title>\n )}\n <div\n className={cn(\n 'ald-modal-body tw-flex-1 tw-text-sm tw-leading-5',\n fullscreen\n ? 'tw-h-full tw-overflow-hidden tw-p-0'\n : 'tw-min-h-[130px] tw-overflow-auto',\n !fullscreen && !responsiveBounds && 'tw-max-h-[68vh]',\n !fullscreen && !paddingLess && 'tw-p-6',\n )}\n style={bodyStyle}\n >\n {virtualScrollBar ? (\n <ScrollArea\n className=\"ald-modal-body-wrap\"\n innerClassName=\"ald-modal-body-wrap-inner\"\n >\n {children}\n </ScrollArea>\n ) : (\n children\n )}\n </div>\n {!fullscreen && renderFooter()}\n </DialogPrimitive.Content>\n </DialogPrimitive.Portal>\n </DialogPrimitive.Root>\n );\n}\n\n// Static method helper\nfunction createStaticModal(\n type: ModalFuncProps['type'],\n props: ModalFuncProps,\n) {\n const container = document.createElement('div');\n document.body.appendChild(container);\n const root = createRoot(container);\n\n let currentProps = { ...props };\n\n const destroy = () => {\n root.unmount();\n container.remove();\n const idx = destroyFns.indexOf(destroy);\n if (idx >= 0) destroyFns.splice(idx, 1);\n };\n\n const update = (newProps: Partial<ModalFuncProps>) => {\n currentProps = { ...currentProps, ...newProps };\n render(currentProps);\n };\n\n const isConfirm = type === 'confirm';\n\n const render = (p: ModalFuncProps) => {\n const handleOk = () => {\n p.onOk?.();\n destroy();\n };\n const handleCancel = () => {\n p.onCancel?.();\n destroy();\n };\n\n root.render(\n <OriginModal\n open={true}\n title={p.title}\n subTitle={p.subTitle}\n icon={p.icon || getIcon(type || 'info')}\n onOk={handleOk}\n onCancel={handleCancel}\n okText={p.okText}\n cancelText={p.cancelText}\n okButtonProps={p.okButtonProps}\n cancelButtonProps={p.cancelButtonProps}\n okType={p.okType || (isConfirm ? 'dangerous' : 'primary')}\n width={p.width || DEFAULT_WIDTH}\n className={cn('ald-modal', p.className)}\n closable={p.closable}\n maskClosable={p.maskClosable}\n _modalType={type}\n footer={\n isConfirm ? undefined : (\n <Button\n type=\"primary\"\n size=\"middle\"\n {...(p.okButtonProps || {})}\n onClick={handleOk}\n >\n {p.okText || 'OK'}\n </Button>\n )\n }\n >\n {p.content}\n </OriginModal>,\n );\n };\n\n destroyFns.push(destroy);\n render(currentProps);\n\n return { destroy, update };\n}\n\n// Attach static methods\ntype ModalFunc = (props: ModalFuncProps) => {\n destroy: () => void;\n update: (props: Partial<ModalFuncProps>) => void;\n};\n\n// ---------- useModal hook ----------\n\ninterface ModalInstance {\n id: number;\n type: ModalFuncProps['type'];\n props: ModalFuncProps;\n open: boolean;\n}\n\nexport interface ModalApiInstance {\n destroy: () => void;\n update: (newProps: Partial<ModalFuncProps>) => void;\n}\n\nexport interface ModalStaticFunctions {\n info: (props: ModalFuncProps) => ModalApiInstance;\n success: (props: ModalFuncProps) => ModalApiInstance;\n error: (props: ModalFuncProps) => ModalApiInstance;\n warning: (props: ModalFuncProps) => ModalApiInstance;\n confirm: (props: ModalFuncProps) => ModalApiInstance;\n}\n\nfunction useModal(): [ModalStaticFunctions, React.ReactElement] {\n const [modals, setModals] = useState<ModalInstance[]>([]);\n const idCounter = useRef(0);\n\n const removeModal = useCallback((id: number) => {\n setModals((prev) =>\n prev.map((m) => (m.id === id ? { ...m, open: false } : m)),\n );\n // Remove from DOM after animation\n setTimeout(() => {\n setModals((prev) => prev.filter((m) => m.id !== id));\n }, 300);\n }, []);\n\n const updateModal = useCallback(\n (id: number, newProps: Partial<ModalFuncProps>) => {\n setModals((prev) =>\n prev.map((m) =>\n m.id === id ? { ...m, props: { ...m.props, ...newProps } } : m,\n ),\n );\n },\n [],\n );\n\n const openModal = useCallback(\n (type: ModalFuncProps['type'], props: ModalFuncProps): ModalApiInstance => {\n const id = ++idCounter.current;\n const instance: ModalInstance = { id, type, props, open: true };\n setModals((prev) => [...prev, instance]);\n\n return {\n destroy: () => removeModal(id),\n update: (newProps: Partial<ModalFuncProps>) =>\n updateModal(id, newProps),\n };\n },\n [removeModal, updateModal],\n );\n\n const api = useMemo<ModalStaticFunctions>(\n () => ({\n info: (props) => openModal('info', props),\n success: (props) => openModal('success', props),\n error: (props) => openModal('error', props),\n warning: (props) => openModal('warning', props),\n confirm: (props) =>\n openModal('confirm', { ...props, type: props.type || 'confirm' }),\n }),\n [openModal],\n );\n\n const contextHolder = (\n <>\n {modals.map((m) => {\n const isConfirmType = m.type === 'confirm';\n const handleOk = () => {\n m.props.onOk?.();\n removeModal(m.id);\n };\n const handleCancel = () => {\n m.props.onCancel?.();\n removeModal(m.id);\n };\n return (\n <OriginModal\n key={m.id}\n open={m.open}\n title={m.props.title}\n subTitle={m.props.subTitle}\n icon={m.props.icon || getIcon(m.type || 'info')}\n onOk={handleOk}\n onCancel={handleCancel}\n okText={m.props.okText}\n cancelText={m.props.cancelText}\n okButtonProps={m.props.okButtonProps}\n cancelButtonProps={m.props.cancelButtonProps}\n okType={m.props.okType || (isConfirmType ? 'dangerous' : 'primary')}\n width={m.props.width || DEFAULT_WIDTH}\n className={cn('ald-modal', m.props.className)}\n closable={m.props.closable}\n maskClosable={m.props.maskClosable}\n _modalType={m.type}\n footer={\n isConfirmType ? undefined : (\n <Button\n type=\"primary\"\n size=\"middle\"\n {...(m.props.okButtonProps || {})}\n onClick={handleOk}\n >\n {m.props.okText || 'OK'}\n </Button>\n )\n }\n >\n {m.props.content}\n </OriginModal>\n );\n })}\n </>\n );\n\n return [api, contextHolder];\n}\n\n// ---------- end useModal ----------\n\nconst Modal = OriginModal as typeof OriginModal & {\n info: ModalFunc;\n success: ModalFunc;\n error: ModalFunc;\n warning: ModalFunc;\n confirm: ModalFunc;\n destroyAll: () => void;\n useModal: typeof useModal;\n config: (config: any) => void;\n};\n\nModal.info = (props) => createStaticModal('info', props);\nModal.success = (props) => createStaticModal('success', props);\nModal.error = (props) => createStaticModal('error', props);\nModal.warning = (props) => createStaticModal('warning', props);\nModal.confirm = (props) =>\n createStaticModal('confirm', { ...props, type: props.type || 'confirm' });\n\nModal.destroyAll = () => {\n while (destroyFns.length) {\n const close = destroyFns.pop();\n if (close) close();\n }\n};\n\nModal.useModal = useModal;\nModal.config = () => {};\n\nexport default Modal;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/Modal/index.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { hideOthers } from 'aria-hidden';\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { createRoot } from 'react-dom/client';\nimport Button, { ButtonType, IButtonProps } from '../Button';\nimport {\n AttentionTriangleLightLine,\n CheckCircleLightLine,\n CloseLLine,\n InformationCircleLightLine,\n} from '../Icon';\nimport IconButton from '../IconButton';\nimport ScrollArea from '../ScrollArea';\nimport {\n FloatingLayerProvider,\n useFloatingLayer,\n} from '../_utils/floatingLayer';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport { cn } from '../lib/utils';\n\nexport const destroyFns: Array<() => void> = [];\n\nexport interface ModalProps {\n open?: boolean;\n onOk?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n onCancel?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n afterClose?: () => void;\n title?: React.ReactNode;\n subTitle?: React.ReactNode;\n icon?: React.ReactElement;\n width?: number | string;\n footer?: React.ReactNode | null;\n okText?: React.ReactNode;\n cancelText?: React.ReactNode;\n okButtonProps?: IButtonProps;\n cancelButtonProps?: IButtonProps;\n okType?: ButtonType;\n confirmLoading?: boolean;\n maskClosable?: boolean;\n closable?: boolean;\n closeIcon?: React.ReactNode;\n centered?: boolean;\n destroyOnClose?: boolean;\n className?: string;\n /** Applied to the outer wrap layer (matches antd wrapClassName behavior) */\n wrapClassName?: string;\n style?: React.CSSProperties;\n bodyStyle?: React.CSSProperties;\n zIndex?: number;\n children?: React.ReactNode;\n paddingLess?: boolean;\n virtualScrollBar?: boolean;\n hideHeaderBottomBorder?: boolean;\n responsiveBounds?: boolean;\n fullscreen?: boolean;\n keyboard?: boolean;\n afterOpenChange?: (open: boolean) => void;\n getContainer?: (() => HTMLElement) | false;\n /** @internal used by static methods to pass modal type for icon styling */\n _modalType?: string;\n}\n\nexport interface ModalFuncProps {\n title?: React.ReactNode;\n subTitle?: React.ReactNode;\n content?: React.ReactNode;\n icon?: React.ReactElement;\n okText?: React.ReactNode;\n cancelText?: React.ReactNode;\n okButtonProps?: IButtonProps;\n cancelButtonProps?: IButtonProps;\n okType?: ButtonType;\n onOk?: (...args: any[]) => any;\n onCancel?: (...args: any[]) => any;\n width?: number | string;\n className?: string;\n /** @deprecated Use `className` instead. Preserved for antd v4 compat. */\n wrapClassName?: string;\n closable?: boolean;\n type?: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm';\n centered?: boolean;\n maskClosable?: boolean;\n}\n\nconst DEFAULT_WIDTH = 552;\n\nconst ModalTitle = (\n { icon, title, subTitle }: Pick<ModalProps, 'icon' | 'title' | 'subTitle'>,\n type?: string,\n) => (\n <div className=\"ald-modal-title-container tw-flex tw-items-center tw-gap-4\">\n {icon && (\n <div\n className={cn(\n 'ald-modal-icon-container tw-grid tw-size-10 tw-shrink-0 tw-place-items-center tw-rounded-[var(--global-grid-250)]',\n type === 'info' &&\n 'ald-modal-cion-info-container tw-bg-[var(--action-primary-subtle-hover)]',\n type === 'success' &&\n 'ald-modal-cion-success-container tw-bg-[var(--background-positive-muted)]',\n type === 'warning' &&\n 'ald-modal-cion-warning-container tw-bg-[var(--background-warning-muted)]',\n type === 'warn' &&\n 'ald-modal-cion-warning-container tw-bg-[var(--background-warning-muted)]',\n type === 'error' &&\n 'ald-modal-cion-error-container tw-bg-[var(--background-negative-muted)]',\n type === 'confirm' &&\n 'ald-modal-cion-confirm-container tw-bg-[var(--action-primary-subtle-hover)]',\n )}\n >\n {icon}\n </div>\n )}\n <div className=\"ald-modal-text-container\">\n {title && (\n <div\n className={cn(\n 'ald-modal-text-title tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--alias-colors-text-strong)]',\n !subTitle && 'ald-modal-text-title-only tw-text-xl',\n )}\n >\n {title}\n </div>\n )}\n {subTitle && (\n <div className=\"ald-modal-text-sub-title tw-mt-1 tw-text-xs tw-leading-4 tw-text-[var(--alias-colors-text-subtle)]\">\n {subTitle}\n </div>\n )}\n </div>\n </div>\n);\n\nfunction getIcon(\n type: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm',\n) {\n if (type === 'success')\n return (\n <CheckCircleLightLine\n fill=\"var(--content-inverted-primary)\"\n color=\"var(--background-positive-strong)\"\n size={24}\n />\n );\n if (type === 'error')\n return (\n <AttentionTriangleLightLine\n color=\"var(--background-negative-strong)\"\n fill=\"var(--content-inverted-primary)\"\n size={24}\n />\n );\n if (type === 'warning' || type === 'warn')\n return (\n <AttentionTriangleLightLine\n color=\"var(--background-warning-strong)\"\n size={24}\n />\n );\n return (\n <InformationCircleLightLine\n size={24}\n color=\"var(--interaction-default-normal)\"\n />\n );\n}\n\nfunction OriginModal(props: ModalProps) {\n const { locale } = useContext(LocaleContext);\n const t = getTranslator(locale);\n const {\n className,\n children,\n okType = 'primary',\n width,\n closeIcon,\n subTitle,\n okButtonProps = {},\n cancelButtonProps = {},\n okText = t.Modal.sure,\n cancelText = t.Modal.cancel,\n icon,\n title,\n paddingLess,\n responsiveBounds,\n hideHeaderBottomBorder,\n virtualScrollBar,\n style,\n maskClosable = false,\n fullscreen,\n open = false,\n onOk,\n onCancel,\n footer,\n confirmLoading,\n closable = true,\n zIndex = 1000,\n bodyStyle,\n keyboard = true,\n afterOpenChange,\n wrapClassName,\n _modalType,\n } = props;\n\n const prevOpenRef = useRef(open);\n const contentRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (prevOpenRef.current !== open) {\n prevOpenRef.current = open;\n afterOpenChange?.(open);\n }\n }, [open, afterOpenChange]);\n\n // ---- modal={false} 补偿:锁定背景滚动 ----\n useEffect(() => {\n if (!open) return;\n const prev = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n return () => {\n document.body.style.overflow = prev;\n };\n }, [open]);\n\n // ---- modal={false} 补偿:aria-hidden(屏幕阅读器只感知弹窗) ----\n useEffect(() => {\n if (!open || !contentRef.current) return;\n return hideOthers(contentRef.current);\n }, [open]);\n\n // ---- modal={false} 补偿:Tab 焦点循环 ----\n useEffect(() => {\n if (!open || !contentRef.current) return;\n const container = contentRef.current;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key !== 'Tab') return;\n const focusable = container.querySelectorAll<HTMLElement>(\n 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n );\n if (focusable.length === 0) return;\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n\n if (e.shiftKey) {\n if (\n document.activeElement === first ||\n !container.contains(document.activeElement)\n ) {\n e.preventDefault();\n last.focus();\n }\n } else {\n if (\n document.activeElement === last ||\n !container.contains(document.activeElement)\n ) {\n e.preventDefault();\n first.focus();\n }\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [open]);\n\n const responsiveBoundsStyle = useMemo(() => {\n if (!responsiveBounds) return {};\n return {\n width: 'calc(100% - 160px)',\n maxWidth: '1680px',\n minWidth: '1280px',\n height: 'calc(100% - 48px)',\n maxHeight: '900px',\n minHeight: '640px',\n };\n }, [responsiveBounds]);\n\n const mergedOkProps = { loading: confirmLoading, ...okButtonProps };\n const { maskZIndex, contentZIndex, nextLevel } = useFloatingLayer(zIndex);\n\n const renderFooter = () => {\n if (footer === null) return null;\n if (footer)\n return (\n // antd 兼容:antd .ant-modal-footer 使用 text-align:right 让 inline 按钮右对齐,\n // 即使消费方传入 width:100% 的子容器,内部 inline 元素仍能右对齐。\n // 此处同时使用 tw-flex tw-justify-end(flexbox 对齐)和 tw-text-right(继承式对齐)保持兼容。\n <div className=\"ald-modal-footer ant-modal-footer tw-flex tw-items-center tw-justify-end tw-gap-2 tw-border-t tw-border-solid tw-border-[var(--global-cool-grey-100)] tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-px-6 tw-py-3 tw-text-right\">\n {footer}\n </div>\n );\n return (\n <div className=\"ald-modal-footer ant-modal-footer tw-flex tw-justify-end tw-gap-2 tw-border-t tw-border-solid tw-border-[var(--border-default)] tw-px-6 tw-py-4\">\n <Button\n type=\"secondary\"\n size=\"middle\"\n {...cancelButtonProps}\n onClick={onCancel}\n >\n {cancelText}\n </Button>\n <Button type={okType} size=\"middle\" {...mergedOkProps} onClick={onOk}>\n {okText}\n </Button>\n </div>\n );\n };\n\n return (\n <DialogPrimitive.Root open={open} modal={false}>\n <DialogPrimitive.Portal>\n {/* modal={false} 时 DialogPrimitive.Overlay 不渲染,用普通 div 替代 */}\n <div\n className=\"ald-modal-mask tw-animate-in tw-fade-in-0 tw-fixed tw-inset-0 tw-bg-black/45\"\n style={{ zIndex: maskZIndex }}\n onPointerDown={() => {\n if (maskClosable) {\n onCancel?.({} as React.MouseEvent<HTMLButtonElement>);\n }\n }}\n />\n {/* Centering wrapper — replaces transform centering so consumer CSS (top/left overrides) works */}\n <div\n ref={contentRef}\n className={cn(\n // antd 兼容:保留 ant-modal-wrap class,消费方 CSS 通过 wrapClassName + :global(.ant-modal) 控制弹窗宽高\n 'ald-modal-wrap ant-modal-wrap tw-pointer-events-none tw-fixed tw-inset-0 tw-flex tw-items-center tw-justify-center',\n wrapClassName,\n )}\n style={{ zIndex: contentZIndex }}\n >\n <DialogPrimitive.Content\n className={cn(\n // antd 兼容:保留 ant-modal class,消费方 CSS 通过 .ant-modal 选择器控制弹窗宽高等样式\n // tw-outline-none:Radix 打开时会聚焦 Content,不抑制 outline 会渲染出蓝色焦点框\n 'ald-modal ant-modal tw-pointer-events-auto tw-box-border tw-flex tw-flex-col tw-overflow-hidden tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-shadow-[var(--elevation-bottom-bottom-lg)] tw-outline-none',\n fullscreen\n ? 'ald-modal-fullscreen tw-fixed tw-inset-0 tw-size-full tw-rounded-none'\n : 'tw-rounded-r-75',\n !fullscreen &&\n 'tw-border tw-border-solid tw-border-[var(--border-default)]',\n paddingLess && 'ald-modal-padding-less',\n virtualScrollBar && 'ald-modal-virtual-scroll-bar',\n hideHeaderBottomBorder && 'ald-modal-hide-header-bottom-border',\n responsiveBounds && 'ald-modal-responsive-bounds',\n className,\n )}\n style={{\n ...(fullscreen\n ? {}\n : {\n width: responsiveBounds\n ? responsiveBoundsStyle.width\n : width || DEFAULT_WIDTH,\n ...responsiveBoundsStyle,\n }),\n ...style,\n }}\n onEscapeKeyDown={(e) => {\n if (keyboard) {\n onCancel?.({} as React.MouseEvent<HTMLButtonElement>);\n } else {\n e.preventDefault();\n }\n }}\n onPointerDownOutside={(e) => {\n if (maskClosable) {\n onCancel?.({} as React.MouseEvent<HTMLButtonElement>);\n } else {\n e.preventDefault();\n }\n }}\n onInteractOutside={(e) => {\n if (!maskClosable) {\n e.preventDefault();\n }\n }}\n >\n {/* ant-modal-content compat wrapper — matches antd DOM nesting for consumer CSS */}\n <div className=\"ant-modal-content tw-flex tw-h-full tw-flex-col\">\n <FloatingLayerProvider value={nextLevel}>\n {!fullscreen && (\n <div\n className={cn(\n 'ald-modal-header ant-modal-header tw-flex tw-items-start tw-justify-between tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-px-6 tw-py-4',\n !hideHeaderBottomBorder &&\n 'tw-border-b tw-border-solid tw-border-[var(--global-cool-grey-100)]',\n )}\n >\n <DialogPrimitive.Title asChild>\n <div className=\"tw-flex-1\">\n {ModalTitle({ icon, title, subTitle }, _modalType)}\n </div>\n </DialogPrimitive.Title>\n {closable && (\n <DialogPrimitive.Close asChild>\n <span className=\"ant-modal-close\" onClick={onCancel}>\n {closeIcon || (\n <IconButton\n icon={<CloseLLine size={20} />}\n size=\"middle\"\n />\n )}\n </span>\n </DialogPrimitive.Close>\n )}\n </div>\n )}\n {/* Hidden title for accessibility when fullscreen hides the header */}\n {fullscreen && (\n <DialogPrimitive.Title className=\"tw-sr-only\">\n {title}\n </DialogPrimitive.Title>\n )}\n <div\n className={cn(\n 'ald-modal-body ant-modal-body tw-flex-1 tw-text-sm tw-leading-5',\n fullscreen\n ? 'tw-h-full tw-overflow-hidden tw-p-0'\n : 'tw-min-h-[130px]',\n !fullscreen &&\n (virtualScrollBar\n ? 'tw-overflow-hidden tw-p-0'\n : 'tw-overflow-auto'),\n !fullscreen &&\n !responsiveBounds &&\n !virtualScrollBar &&\n 'tw-max-h-[68vh]',\n !fullscreen &&\n !paddingLess &&\n !virtualScrollBar &&\n 'tw-p-6',\n )}\n style={bodyStyle}\n >\n {virtualScrollBar ? (\n <ScrollArea\n className=\"ald-modal-body-wrap !tw-h-auto\"\n innerClassName={cn(\n 'ald-modal-body-wrap-inner tw-max-h-[68vh]',\n paddingLess ? 'tw-p-0' : 'tw-px-[23px] tw-py-0',\n )}\n >\n {children}\n </ScrollArea>\n ) : (\n children\n )}\n </div>\n {!fullscreen && renderFooter()}\n </FloatingLayerProvider>\n </div>\n </DialogPrimitive.Content>\n </div>\n </DialogPrimitive.Portal>\n </DialogPrimitive.Root>\n );\n}\n\n// Static method helper\nfunction createStaticModal(\n type: ModalFuncProps['type'],\n props: ModalFuncProps,\n) {\n const container = document.createElement('div');\n document.body.appendChild(container);\n const root = createRoot(container);\n\n let currentProps = { ...props };\n\n const destroy = () => {\n root.unmount();\n container.remove();\n const idx = destroyFns.indexOf(destroy);\n if (idx >= 0) destroyFns.splice(idx, 1);\n };\n\n const update = (newProps: Partial<ModalFuncProps>) => {\n currentProps = { ...currentProps, ...newProps };\n render(currentProps);\n };\n\n const isConfirm = type === 'confirm';\n\n const render = (p: ModalFuncProps) => {\n const handleOk = () => {\n p.onOk?.();\n destroy();\n };\n const handleCancel = () => {\n p.onCancel?.();\n destroy();\n };\n\n root.render(\n <OriginModal\n open={true}\n title={p.title}\n subTitle={p.subTitle}\n icon={p.icon || getIcon(type || 'info')}\n onOk={handleOk}\n onCancel={handleCancel}\n okText={p.okText}\n cancelText={p.cancelText}\n okButtonProps={p.okButtonProps}\n cancelButtonProps={p.cancelButtonProps}\n okType={p.okType || (isConfirm ? 'dangerous' : 'primary')}\n width={p.width || DEFAULT_WIDTH}\n className={cn('ald-modal', p.className)}\n closable={p.closable}\n maskClosable={p.maskClosable}\n _modalType={type}\n footer={\n isConfirm ? undefined : (\n <Button\n type=\"primary\"\n size=\"middle\"\n {...(p.okButtonProps || {})}\n onClick={handleOk}\n >\n {p.okText || 'OK'}\n </Button>\n )\n }\n >\n {p.content}\n </OriginModal>,\n );\n };\n\n destroyFns.push(destroy);\n render(currentProps);\n\n return { destroy, update };\n}\n\n// Attach static methods\ntype ModalFunc = (props: ModalFuncProps) => {\n destroy: () => void;\n update: (props: Partial<ModalFuncProps>) => void;\n};\n\n// ---------- useModal hook ----------\n\ninterface ModalInstance {\n id: number;\n type: ModalFuncProps['type'];\n props: ModalFuncProps;\n open: boolean;\n}\n\nexport interface ModalApiInstance {\n destroy: () => void;\n update: (newProps: Partial<ModalFuncProps>) => void;\n}\n\nexport interface ModalStaticFunctions {\n info: (props: ModalFuncProps) => ModalApiInstance;\n success: (props: ModalFuncProps) => ModalApiInstance;\n error: (props: ModalFuncProps) => ModalApiInstance;\n warning: (props: ModalFuncProps) => ModalApiInstance;\n confirm: (props: ModalFuncProps) => ModalApiInstance;\n}\n\nfunction useModal(): [ModalStaticFunctions, React.ReactElement] {\n const [modals, setModals] = useState<ModalInstance[]>([]);\n const idCounter = useRef(0);\n\n const removeModal = useCallback((id: number) => {\n setModals((prev) =>\n prev.map((m) => (m.id === id ? { ...m, open: false } : m)),\n );\n // Remove from DOM after animation\n setTimeout(() => {\n setModals((prev) => prev.filter((m) => m.id !== id));\n }, 300);\n }, []);\n\n const updateModal = useCallback(\n (id: number, newProps: Partial<ModalFuncProps>) => {\n setModals((prev) =>\n prev.map((m) =>\n m.id === id ? { ...m, props: { ...m.props, ...newProps } } : m,\n ),\n );\n },\n [],\n );\n\n const openModal = useCallback(\n (type: ModalFuncProps['type'], props: ModalFuncProps): ModalApiInstance => {\n const id = ++idCounter.current;\n const instance: ModalInstance = { id, type, props, open: true };\n setModals((prev) => [...prev, instance]);\n\n return {\n destroy: () => removeModal(id),\n update: (newProps: Partial<ModalFuncProps>) =>\n updateModal(id, newProps),\n };\n },\n [removeModal, updateModal],\n );\n\n const api = useMemo<ModalStaticFunctions>(\n () => ({\n info: (props) => openModal('info', props),\n success: (props) => openModal('success', props),\n error: (props) => openModal('error', props),\n warning: (props) => openModal('warning', props),\n confirm: (props) =>\n openModal('confirm', { ...props, type: props.type || 'confirm' }),\n }),\n [openModal],\n );\n\n const contextHolder = (\n <>\n {modals.map((m) => {\n const isConfirmType = m.type === 'confirm';\n const handleOk = () => {\n m.props.onOk?.();\n removeModal(m.id);\n };\n const handleCancel = () => {\n m.props.onCancel?.();\n removeModal(m.id);\n };\n return (\n <OriginModal\n key={m.id}\n open={m.open}\n title={m.props.title}\n subTitle={m.props.subTitle}\n icon={m.props.icon || getIcon(m.type || 'info')}\n onOk={handleOk}\n onCancel={handleCancel}\n okText={m.props.okText}\n cancelText={m.props.cancelText}\n okButtonProps={m.props.okButtonProps}\n cancelButtonProps={m.props.cancelButtonProps}\n okType={m.props.okType || (isConfirmType ? 'dangerous' : 'primary')}\n width={m.props.width || DEFAULT_WIDTH}\n className={cn('ald-modal', m.props.className)}\n closable={m.props.closable}\n maskClosable={m.props.maskClosable}\n _modalType={m.type}\n footer={\n isConfirmType ? undefined : (\n <Button\n type=\"primary\"\n size=\"middle\"\n {...(m.props.okButtonProps || {})}\n onClick={handleOk}\n >\n {m.props.okText || 'OK'}\n </Button>\n )\n }\n >\n {m.props.content}\n </OriginModal>\n );\n })}\n </>\n );\n\n return [api, contextHolder];\n}\n\n// ---------- end useModal ----------\n\nconst Modal = OriginModal as typeof OriginModal & {\n info: ModalFunc;\n success: ModalFunc;\n error: ModalFunc;\n warning: ModalFunc;\n confirm: ModalFunc;\n destroyAll: () => void;\n useModal: typeof useModal;\n config: (config: any) => void;\n};\n\nModal.info = (props) => createStaticModal('info', props);\nModal.success = (props) => createStaticModal('success', props);\nModal.error = (props) => createStaticModal('error', props);\nModal.warning = (props) => createStaticModal('warning', props);\nModal.confirm = (props) =>\n createStaticModal('confirm', { ...props, type: props.type || 'confirm' });\n\nModal.destroyAll = () => {\n while (destroyFns.length) {\n const close = destroyFns.pop();\n if (close) close();\n }\n};\n\nModal.useModal = useModal;\nModal.config = () => {};\n\nexport default Modal;\n"],"mappings":"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"}
|
package/dist/Popconfirm/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { cn } from "../lib/utils.js";
|
|
2
2
|
import Memo from "../Icon/components/AttentionTriangleFill.js";
|
|
3
3
|
import Button_default from "../Button/index.js";
|
|
4
|
+
import { useFloatingPopupZIndex } from "../_utils/floatingLayer.js";
|
|
4
5
|
import React, { useState } from "react";
|
|
5
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
7
|
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
@@ -52,6 +53,7 @@ function Popconfirm(props) {
|
|
|
52
53
|
};
|
|
53
54
|
const side = sideMap[placement] || "top";
|
|
54
55
|
const align = alignMap[placement] || "center";
|
|
56
|
+
const popupZIndex = useFloatingPopupZIndex();
|
|
55
57
|
return /* @__PURE__ */ jsxs(PopoverPrimitive.Root, {
|
|
56
58
|
open: isOpen,
|
|
57
59
|
onOpenChange: handleOpenChange,
|
|
@@ -63,7 +65,10 @@ function Popconfirm(props) {
|
|
|
63
65
|
align,
|
|
64
66
|
sideOffset: 4,
|
|
65
67
|
className: cn("ald-pop-confirm tw-z-50 tw-w-[240px] tw-rounded-[6px] tw-border tw-border-solid tw-border-[var(--border-default-alpha)] tw-bg-[var(--background-default)] tw-p-3 tw-outline-none", rootClassName),
|
|
66
|
-
style: {
|
|
68
|
+
style: {
|
|
69
|
+
zIndex: popupZIndex,
|
|
70
|
+
boxShadow: "var(--elevation-bottom-bottom-md)"
|
|
71
|
+
},
|
|
67
72
|
children: /* @__PURE__ */ jsxs("div", {
|
|
68
73
|
className: "tw-flex tw-gap-2",
|
|
69
74
|
children: [icon && /* @__PURE__ */ jsx("span", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/Popconfirm/index.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover';\nimport React, { useState } from 'react';\nimport Button, { ButtonType, IButtonProps } from '../Button';\nimport { AttentionTriangleFill } from '../Icon';\nimport { cn } from '../lib/utils';\n\nexport interface PopconfirmProps {\n title?: React.ReactNode;\n onConfirm?: (e?: React.MouseEvent) => void;\n onCancel?: (e?: React.MouseEvent) => void;\n okText?: React.ReactNode;\n cancelText?: React.ReactNode;\n okButtonProps?: IButtonProps;\n cancelButtonProps?: IButtonProps;\n okType?: ButtonType;\n icon?: React.ReactNode;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n placement?:\n | 'top'\n | 'bottom'\n | 'left'\n | 'right'\n | 'topLeft'\n | 'topRight'\n | 'bottomLeft'\n | 'bottomRight'\n | 'leftTop'\n | 'leftBottom'\n | 'rightTop'\n | 'rightBottom';\n rootClassName?: string;\n className?: string;\n children?: React.ReactNode;\n disabled?: boolean;\n}\n\nconst sideMap: Record<string, PopoverPrimitive.PopoverContentProps['side']> = {\n top: 'top',\n bottom: 'bottom',\n left: 'left',\n right: 'right',\n topLeft: 'top',\n topRight: 'top',\n bottomLeft: 'bottom',\n bottomRight: 'bottom',\n leftTop: 'left',\n leftBottom: 'left',\n rightTop: 'right',\n rightBottom: 'right',\n};\n\nconst alignMap: Record<string, PopoverPrimitive.PopoverContentProps['align']> =\n {\n topLeft: 'start',\n topRight: 'end',\n bottomLeft: 'start',\n bottomRight: 'end',\n leftTop: 'start',\n leftBottom: 'end',\n rightTop: 'start',\n rightBottom: 'end',\n };\n\nfunction Popconfirm(props: PopconfirmProps) {\n const {\n title,\n onConfirm,\n onCancel,\n okText = 'OK',\n cancelText = 'Cancel',\n okButtonProps = {},\n cancelButtonProps = {},\n okType = 'dangerous',\n icon = (\n <AttentionTriangleFill\n size={16}\n color=\"var(--action-destructive-normal)\"\n fill=\"var(--action-inverted-normal)\"\n />\n ),\n open: controlledOpen,\n onOpenChange,\n placement = 'top',\n rootClassName,\n children,\n disabled,\n } = props;\n\n const [innerOpen, setInnerOpen] = useState(false);\n const isControlled = controlledOpen !== undefined;\n const isOpen = isControlled ? controlledOpen : innerOpen;\n\n const handleOpenChange = (val: boolean) => {\n if (!isControlled) setInnerOpen(val);\n onOpenChange?.(val);\n };\n\n const handleConfirm = (e?: React.MouseEvent) => {\n onConfirm?.(e);\n handleOpenChange(false);\n };\n\n const handleCancel = (e?: React.MouseEvent) => {\n onCancel?.(e);\n handleOpenChange(false);\n };\n\n const side = sideMap[placement] || 'top';\n const align = alignMap[placement] || 'center';\n\n return (\n <PopoverPrimitive.Root open={isOpen} onOpenChange={handleOpenChange}>\n <PopoverPrimitive.Trigger asChild>\n {disabled ? (\n <span>{children}</span>\n ) : React.isValidElement(children) ? (\n children\n ) : (\n <span>{children}</span>\n )}\n </PopoverPrimitive.Trigger>\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n side={side}\n align={align}\n sideOffset={4}\n className={cn(\n 'ald-pop-confirm tw-z-50 tw-w-[240px] tw-rounded-[6px] tw-border tw-border-solid tw-border-[var(--border-default-alpha)] tw-bg-[var(--background-default)] tw-p-3 tw-outline-none',\n rootClassName,\n )}\n style={{ boxShadow: 'var(--elevation-bottom-bottom-md)'
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/Popconfirm/index.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover';\nimport React, { useState } from 'react';\nimport Button, { ButtonType, IButtonProps } from '../Button';\nimport { AttentionTriangleFill } from '../Icon';\nimport { useFloatingPopupZIndex } from '../_utils/floatingLayer';\nimport { cn } from '../lib/utils';\n\nexport interface PopconfirmProps {\n title?: React.ReactNode;\n onConfirm?: (e?: React.MouseEvent) => void;\n onCancel?: (e?: React.MouseEvent) => void;\n okText?: React.ReactNode;\n cancelText?: React.ReactNode;\n okButtonProps?: IButtonProps;\n cancelButtonProps?: IButtonProps;\n okType?: ButtonType;\n icon?: React.ReactNode;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n placement?:\n | 'top'\n | 'bottom'\n | 'left'\n | 'right'\n | 'topLeft'\n | 'topRight'\n | 'bottomLeft'\n | 'bottomRight'\n | 'leftTop'\n | 'leftBottom'\n | 'rightTop'\n | 'rightBottom';\n rootClassName?: string;\n className?: string;\n children?: React.ReactNode;\n disabled?: boolean;\n}\n\nconst sideMap: Record<string, PopoverPrimitive.PopoverContentProps['side']> = {\n top: 'top',\n bottom: 'bottom',\n left: 'left',\n right: 'right',\n topLeft: 'top',\n topRight: 'top',\n bottomLeft: 'bottom',\n bottomRight: 'bottom',\n leftTop: 'left',\n leftBottom: 'left',\n rightTop: 'right',\n rightBottom: 'right',\n};\n\nconst alignMap: Record<string, PopoverPrimitive.PopoverContentProps['align']> =\n {\n topLeft: 'start',\n topRight: 'end',\n bottomLeft: 'start',\n bottomRight: 'end',\n leftTop: 'start',\n leftBottom: 'end',\n rightTop: 'start',\n rightBottom: 'end',\n };\n\nfunction Popconfirm(props: PopconfirmProps) {\n const {\n title,\n onConfirm,\n onCancel,\n okText = 'OK',\n cancelText = 'Cancel',\n okButtonProps = {},\n cancelButtonProps = {},\n okType = 'dangerous',\n icon = (\n <AttentionTriangleFill\n size={16}\n color=\"var(--action-destructive-normal)\"\n fill=\"var(--action-inverted-normal)\"\n />\n ),\n open: controlledOpen,\n onOpenChange,\n placement = 'top',\n rootClassName,\n children,\n disabled,\n } = props;\n\n const [innerOpen, setInnerOpen] = useState(false);\n const isControlled = controlledOpen !== undefined;\n const isOpen = isControlled ? controlledOpen : innerOpen;\n\n const handleOpenChange = (val: boolean) => {\n if (!isControlled) setInnerOpen(val);\n onOpenChange?.(val);\n };\n\n const handleConfirm = (e?: React.MouseEvent) => {\n onConfirm?.(e);\n handleOpenChange(false);\n };\n\n const handleCancel = (e?: React.MouseEvent) => {\n onCancel?.(e);\n handleOpenChange(false);\n };\n\n const side = sideMap[placement] || 'top';\n const align = alignMap[placement] || 'center';\n const popupZIndex = useFloatingPopupZIndex();\n\n return (\n <PopoverPrimitive.Root open={isOpen} onOpenChange={handleOpenChange}>\n <PopoverPrimitive.Trigger asChild>\n {disabled ? (\n <span>{children}</span>\n ) : React.isValidElement(children) ? (\n children\n ) : (\n <span>{children}</span>\n )}\n </PopoverPrimitive.Trigger>\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n side={side}\n align={align}\n sideOffset={4}\n className={cn(\n 'ald-pop-confirm tw-z-50 tw-w-[240px] tw-rounded-[6px] tw-border tw-border-solid tw-border-[var(--border-default-alpha)] tw-bg-[var(--background-default)] tw-p-3 tw-outline-none',\n rootClassName,\n )}\n style={{\n zIndex: popupZIndex,\n boxShadow: 'var(--elevation-bottom-bottom-md)',\n }}\n >\n <div className=\"tw-flex tw-gap-2\">\n {icon && <span className=\"tw-mt-0.5 tw-shrink-0\">{icon}</span>}\n <div className=\"tw-flex-1\">\n <div className=\"tw-mb-2 tw-break-all tw-text-xs tw-leading-4 tw-text-[var(--alias-colors-text-default)]\">\n {title}\n </div>\n <div className=\"tw-flex tw-justify-end tw-gap-2\">\n <Button\n type=\"secondary\"\n size=\"small\"\n {...cancelButtonProps}\n onClick={handleCancel}\n >\n {cancelText}\n </Button>\n <Button\n type={okType}\n size=\"small\"\n {...okButtonProps}\n onClick={handleConfirm}\n >\n {okText}\n </Button>\n </div>\n </div>\n </div>\n </PopoverPrimitive.Content>\n </PopoverPrimitive.Portal>\n </PopoverPrimitive.Root>\n );\n}\n\nexport default Popconfirm;\n"],"mappings":";;;;;;;;AAsCA,IAAM,UAAwE;CAC5E,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACP,SAAS;CACT,UAAU;CACV,YAAY;CACZ,aAAa;CACb,SAAS;CACT,YAAY;CACZ,UAAU;CACV,aAAa;CACd;AAED,IAAM,WACJ;CACE,SAAS;CACT,UAAU;CACV,YAAY;CACZ,aAAa;CACb,SAAS;CACT,YAAY;CACZ,UAAU;CACV,aAAa;CACd;AAEH,SAAS,WAAW,OAAwB;CAC1C,MAAM,EACJ,OACA,WACA,UACA,SAAS,MACT,aAAa,UACb,gBAAgB,EAAE,EAClB,oBAAoB,EAAE,EACtB,SAAS,aACT,OACE,oBAAC,MAAD;EACE,MAAM;EACN,OAAM;EACN,MAAK;EACL,CAAA,EAEJ,MAAM,gBACN,cACA,YAAY,OACZ,eACA,UACA,aACE;CAEJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,eAAe,mBAAmB;CACxC,MAAM,SAAS,eAAe,iBAAiB;CAE/C,MAAM,oBAAoB,QAAiB;AACzC,MAAI,CAAC,aAAc,cAAa,IAAI;AACpC,iBAAe,IAAI;;CAGrB,MAAM,iBAAiB,MAAyB;AAC9C,cAAY,EAAE;AACd,mBAAiB,MAAM;;CAGzB,MAAM,gBAAgB,MAAyB;AAC7C,aAAW,EAAE;AACb,mBAAiB,MAAM;;CAGzB,MAAM,OAAO,QAAQ,cAAc;CACnC,MAAM,QAAQ,SAAS,cAAc;CACrC,MAAM,cAAc,wBAAwB;AAE5C,QACE,qBAAC,iBAAiB,MAAlB;EAAuB,MAAM;EAAQ,cAAc;YAAnD,CACE,oBAAC,iBAAiB,SAAlB;GAA0B,SAAA;aACvB,WACC,oBAAC,QAAD,EAAO,UAAgB,CAAA,GACrB,MAAM,eAAe,SAAS,GAChC,WAEA,oBAAC,QAAD,EAAO,UAAgB,CAAA;GAEA,CAAA,EAC3B,oBAAC,iBAAiB,QAAlB,EAAA,UACE,oBAAC,iBAAiB,SAAlB;GACQ;GACC;GACP,YAAY;GACZ,WAAW,GACT,oLACA,cACD;GACD,OAAO;IACL,QAAQ;IACR,WAAW;IACZ;aAED,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,QAAQ,oBAAC,QAAD;KAAM,WAAU;eAAyB;KAAY,CAAA,EAC9D,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAK,WAAU;gBACZ;MACG,CAAA,EACN,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,gBAAD;OACE,MAAK;OACL,MAAK;OACL,GAAI;OACJ,SAAS;iBAER;OACM,CAAA,EACT,oBAAC,gBAAD;OACE,MAAM;OACN,MAAK;OACL,GAAI;OACJ,SAAS;iBAER;OACM,CAAA,CACL;QACF;OACF;;GACmB,CAAA,EACH,CAAA,CACJ"}
|
package/dist/Popover/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { cn } from "../lib/utils.js";
|
|
2
|
+
import { useFloatingPopupZIndex } from "../_utils/floatingLayer.js";
|
|
2
3
|
import React from "react";
|
|
3
4
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
5
|
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
@@ -46,6 +47,7 @@ function Popover(props) {
|
|
|
46
47
|
};
|
|
47
48
|
const side = placementMap[placement] || "top";
|
|
48
49
|
const align = alignMap[placement] || "center";
|
|
50
|
+
const popupZIndex = useFloatingPopupZIndex(zIndex);
|
|
49
51
|
const triggerChild = React.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
|
|
50
52
|
if (triggers.size === 0 && !isControlled) return /* @__PURE__ */ jsx(Fragment, { children });
|
|
51
53
|
return /* @__PURE__ */ jsxs(PopoverPrimitive.Root, {
|
|
@@ -65,10 +67,10 @@ function Popover(props) {
|
|
|
65
67
|
side,
|
|
66
68
|
align,
|
|
67
69
|
sideOffset: 4,
|
|
68
|
-
className: cn("ald-popover
|
|
70
|
+
className: cn("ald-popover ant-popover-inner tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-default-alpha)] tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-p-3 tw-outline-none", "tw-animate-in tw-fade-in-0 tw-zoom-in-95", overlayClassName),
|
|
69
71
|
style: {
|
|
70
72
|
boxShadow: "var(--elevation-bottom-bottom-sm)",
|
|
71
|
-
zIndex,
|
|
73
|
+
zIndex: popupZIndex,
|
|
72
74
|
...overlayStyle
|
|
73
75
|
},
|
|
74
76
|
onMouseEnter: isHoverTrigger ? () => handleOpenChange(true) : void 0,
|
|
@@ -79,7 +81,7 @@ function Popover(props) {
|
|
|
79
81
|
children: title
|
|
80
82
|
}),
|
|
81
83
|
content && /* @__PURE__ */ jsx("div", {
|
|
82
|
-
className: "ald-popover-inner-content",
|
|
84
|
+
className: "ald-popover-inner-content ant-popover-inner-content",
|
|
83
85
|
children: content
|
|
84
86
|
}),
|
|
85
87
|
arrow && /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, { style: { fill: "var(--alias-colors-bg-skeleton-subtler, #fff)" } })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/Popover/index.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover';\nimport React from 'react';\nimport { cn } from '../lib/utils';\n\ntype TriggerType = 'hover' | 'click' | 'focus';\n\nexport interface PopoverProps {\n content?: React.ReactNode;\n title?: React.ReactNode;\n children?: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n trigger?: TriggerType | TriggerType[];\n rootClassName?: string;\n placement?:\n | 'top'\n | 'bottom'\n | 'left'\n | 'right'\n | 'topLeft'\n | 'topRight'\n | 'bottomLeft'\n | 'bottomRight'\n | 'leftTop'\n | 'leftBottom'\n | 'rightTop'\n | 'rightBottom';\n overlayClassName?: string;\n overlayStyle?: React.CSSProperties;\n arrow?: boolean;\n mouseEnterDelay?: number;\n mouseLeaveDelay?: number;\n className?: string;\n style?: React.CSSProperties;\n getPopupContainer?: () => HTMLElement;\n zIndex?: number;\n}\n\nconst placementMap: Record<\n string,\n PopoverPrimitive.PopoverContentProps['side']\n> = {\n top: 'top',\n bottom: 'bottom',\n left: 'left',\n right: 'right',\n topLeft: 'top',\n topRight: 'top',\n bottomLeft: 'bottom',\n bottomRight: 'bottom',\n leftTop: 'left',\n leftBottom: 'left',\n rightTop: 'right',\n rightBottom: 'right',\n};\n\nconst alignMap: Record<string, PopoverPrimitive.PopoverContentProps['align']> =\n {\n topLeft: 'start',\n topRight: 'end',\n bottomLeft: 'start',\n bottomRight: 'end',\n leftTop: 'start',\n leftBottom: 'end',\n rightTop: 'start',\n rightBottom: 'end',\n };\n\nfunction normalizeTrigger(trigger: PopoverProps['trigger']): Set<TriggerType> {\n if (Array.isArray(trigger)) return new Set(trigger);\n if (trigger) return new Set([trigger]);\n return new Set<TriggerType>(['hover']);\n}\n\nfunction Popover(props: PopoverProps) {\n const {\n content,\n title,\n children,\n open,\n defaultOpen,\n onOpenChange,\n trigger = 'hover',\n placement = 'top',\n overlayClassName,\n overlayStyle,\n arrow = false,\n getPopupContainer,\n zIndex,\n } = props;\n\n const containerRef = React.useRef<HTMLElement | undefined>(\n getPopupContainer?.(),\n );\n\n const [hoverOpen, setHoverOpen] = React.useState(false);\n const triggers = normalizeTrigger(trigger);\n\n const isControlled = open !== undefined;\n const isHoverTrigger = triggers.has('hover');\n const isOpen = isControlled\n ? open\n : isHoverTrigger\n ? hoverOpen\n : triggers.size === 0\n ? false\n : undefined;\n\n const handleOpenChange = (val: boolean) => {\n if (!isControlled && isHoverTrigger) {\n setHoverOpen(val);\n }\n onOpenChange?.(val);\n };\n\n const side = placementMap[placement] || 'top';\n const align = alignMap[placement] || 'center';\n\n const triggerChild = React.isValidElement(children) ? (\n children\n ) : (\n <span>{children}</span>\n );\n\n if (triggers.size === 0 && !isControlled) {\n return <>{children}</>;\n }\n\n return (\n <PopoverPrimitive.Root\n open={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={handleOpenChange}\n >\n <PopoverPrimitive.Trigger asChild>\n {isHoverTrigger ? (\n <span\n onMouseEnter={() => handleOpenChange(true)}\n onMouseLeave={() => handleOpenChange(false)}\n >\n {triggerChild}\n </span>\n ) : (\n triggerChild\n )}\n </PopoverPrimitive.Trigger>\n <PopoverPrimitive.Portal container={containerRef.current}>\n <PopoverPrimitive.Content\n side={side}\n align={align}\n sideOffset={4}\n className={cn(\n 'ald-popover
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/Popover/index.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover';\nimport React from 'react';\nimport { useFloatingPopupZIndex } from '../_utils/floatingLayer';\nimport { cn } from '../lib/utils';\n\ntype TriggerType = 'hover' | 'click' | 'focus';\n\nexport interface PopoverProps {\n content?: React.ReactNode;\n title?: React.ReactNode;\n children?: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n trigger?: TriggerType | TriggerType[];\n rootClassName?: string;\n placement?:\n | 'top'\n | 'bottom'\n | 'left'\n | 'right'\n | 'topLeft'\n | 'topRight'\n | 'bottomLeft'\n | 'bottomRight'\n | 'leftTop'\n | 'leftBottom'\n | 'rightTop'\n | 'rightBottom';\n overlayClassName?: string;\n overlayStyle?: React.CSSProperties;\n arrow?: boolean;\n mouseEnterDelay?: number;\n mouseLeaveDelay?: number;\n className?: string;\n style?: React.CSSProperties;\n getPopupContainer?: () => HTMLElement;\n zIndex?: number;\n}\n\nconst placementMap: Record<\n string,\n PopoverPrimitive.PopoverContentProps['side']\n> = {\n top: 'top',\n bottom: 'bottom',\n left: 'left',\n right: 'right',\n topLeft: 'top',\n topRight: 'top',\n bottomLeft: 'bottom',\n bottomRight: 'bottom',\n leftTop: 'left',\n leftBottom: 'left',\n rightTop: 'right',\n rightBottom: 'right',\n};\n\nconst alignMap: Record<string, PopoverPrimitive.PopoverContentProps['align']> =\n {\n topLeft: 'start',\n topRight: 'end',\n bottomLeft: 'start',\n bottomRight: 'end',\n leftTop: 'start',\n leftBottom: 'end',\n rightTop: 'start',\n rightBottom: 'end',\n };\n\nfunction normalizeTrigger(trigger: PopoverProps['trigger']): Set<TriggerType> {\n if (Array.isArray(trigger)) return new Set(trigger);\n if (trigger) return new Set([trigger]);\n return new Set<TriggerType>(['hover']);\n}\n\nfunction Popover(props: PopoverProps) {\n const {\n content,\n title,\n children,\n open,\n defaultOpen,\n onOpenChange,\n trigger = 'hover',\n placement = 'top',\n overlayClassName,\n overlayStyle,\n arrow = false,\n getPopupContainer,\n zIndex,\n } = props;\n\n const containerRef = React.useRef<HTMLElement | undefined>(\n getPopupContainer?.(),\n );\n\n const [hoverOpen, setHoverOpen] = React.useState(false);\n const triggers = normalizeTrigger(trigger);\n\n const isControlled = open !== undefined;\n const isHoverTrigger = triggers.has('hover');\n const isOpen = isControlled\n ? open\n : isHoverTrigger\n ? hoverOpen\n : triggers.size === 0\n ? false\n : undefined;\n\n const handleOpenChange = (val: boolean) => {\n if (!isControlled && isHoverTrigger) {\n setHoverOpen(val);\n }\n onOpenChange?.(val);\n };\n\n const side = placementMap[placement] || 'top';\n const align = alignMap[placement] || 'center';\n const popupZIndex = useFloatingPopupZIndex(zIndex);\n\n const triggerChild = React.isValidElement(children) ? (\n children\n ) : (\n <span>{children}</span>\n );\n\n if (triggers.size === 0 && !isControlled) {\n return <>{children}</>;\n }\n\n return (\n <PopoverPrimitive.Root\n open={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={handleOpenChange}\n >\n <PopoverPrimitive.Trigger asChild>\n {isHoverTrigger ? (\n <span\n onMouseEnter={() => handleOpenChange(true)}\n onMouseLeave={() => handleOpenChange(false)}\n >\n {triggerChild}\n </span>\n ) : (\n triggerChild\n )}\n </PopoverPrimitive.Trigger>\n <PopoverPrimitive.Portal container={containerRef.current}>\n <PopoverPrimitive.Content\n side={side}\n align={align}\n sideOffset={4}\n // antd 兼容:保留 ant-popover-inner class,消费方 CSS 可能通过该选择器自定义内边距、背景等样式\n className={cn(\n 'ald-popover ant-popover-inner tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-default-alpha)] tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-p-3 tw-outline-none',\n 'tw-animate-in tw-fade-in-0 tw-zoom-in-95',\n overlayClassName,\n )}\n style={{\n boxShadow: 'var(--elevation-bottom-bottom-sm)',\n zIndex: popupZIndex,\n ...overlayStyle,\n }}\n onMouseEnter={\n isHoverTrigger ? () => handleOpenChange(true) : undefined\n }\n onMouseLeave={\n isHoverTrigger ? () => handleOpenChange(false) : undefined\n }\n >\n {title && (\n <div className=\"ald-popover-title tw-mb-2 tw-text-sm tw-font-medium tw-text-[var(--content-primary)]\">\n {title}\n </div>\n )}\n {content && (\n // antd 兼容:保留 ant-popover-inner-content class,消费方 CSS 可能通过该选择器自定义样式\n <div className=\"ald-popover-inner-content ant-popover-inner-content\">\n {content}\n </div>\n )}\n {arrow && (\n <PopoverPrimitive.Arrow\n style={{ fill: 'var(--alias-colors-bg-skeleton-subtler, #fff)' }}\n />\n )}\n </PopoverPrimitive.Content>\n </PopoverPrimitive.Portal>\n </PopoverPrimitive.Root>\n );\n}\n\nexport default Popover;\n"],"mappings":";;;;;;AAwCA,IAAM,eAGF;CACF,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACP,SAAS;CACT,UAAU;CACV,YAAY;CACZ,aAAa;CACb,SAAS;CACT,YAAY;CACZ,UAAU;CACV,aAAa;CACd;AAED,IAAM,WACJ;CACE,SAAS;CACT,UAAU;CACV,YAAY;CACZ,aAAa;CACb,SAAS;CACT,YAAY;CACZ,UAAU;CACV,aAAa;CACd;AAEH,SAAS,iBAAiB,SAAoD;AAC5E,KAAI,MAAM,QAAQ,QAAQ,CAAE,QAAO,IAAI,IAAI,QAAQ;AACnD,KAAI,QAAS,QAAO,IAAI,IAAI,CAAC,QAAQ,CAAC;AACtC,QAAO,IAAI,IAAiB,CAAC,QAAQ,CAAC;;AAGxC,SAAS,QAAQ,OAAqB;CACpC,MAAM,EACJ,SACA,OACA,UACA,MACA,aACA,cACA,UAAU,SACV,YAAY,OACZ,kBACA,cACA,QAAQ,OACR,mBACA,WACE;CAEJ,MAAM,eAAe,MAAM,OACzB,qBAAqB,CACtB;CAED,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,MAAM;CACvD,MAAM,WAAW,iBAAiB,QAAQ;CAE1C,MAAM,eAAe,SAAS;CAC9B,MAAM,iBAAiB,SAAS,IAAI,QAAQ;CAC5C,MAAM,SAAS,eACX,OACA,iBACA,YACA,SAAS,SAAS,IAClB,QACA;CAEJ,MAAM,oBAAoB,QAAiB;AACzC,MAAI,CAAC,gBAAgB,eACnB,cAAa,IAAI;AAEnB,iBAAe,IAAI;;CAGrB,MAAM,OAAO,aAAa,cAAc;CACxC,MAAM,QAAQ,SAAS,cAAc;CACrC,MAAM,cAAc,uBAAuB,OAAO;CAElD,MAAM,eAAe,MAAM,eAAe,SAAS,GACjD,WAEA,oBAAC,QAAD,EAAO,UAAgB,CAAA;AAGzB,KAAI,SAAS,SAAS,KAAK,CAAC,aAC1B,QAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;AAGxB,QACE,qBAAC,iBAAiB,MAAlB;EACE,MAAM;EACO;EACb,cAAc;YAHhB,CAKE,oBAAC,iBAAiB,SAAlB;GAA0B,SAAA;aACvB,iBACC,oBAAC,QAAD;IACE,oBAAoB,iBAAiB,KAAK;IAC1C,oBAAoB,iBAAiB,MAAM;cAE1C;IACI,CAAA,GAEP;GAEuB,CAAA,EAC3B,oBAAC,iBAAiB,QAAlB;GAAyB,WAAW,aAAa;aAC/C,qBAAC,iBAAiB,SAAlB;IACQ;IACC;IACP,YAAY;IAEZ,WAAW,GACT,0LACA,4CACA,iBACD;IACD,OAAO;KACL,WAAW;KACX,QAAQ;KACR,GAAG;KACJ;IACD,cACE,uBAAuB,iBAAiB,KAAK,GAAG;IAElD,cACE,uBAAuB,iBAAiB,MAAM,GAAG;cAnBrD;KAsBG,SACC,oBAAC,OAAD;MAAK,WAAU;gBACZ;MACG,CAAA;KAEP,WAEC,oBAAC,OAAD;MAAK,WAAU;gBACZ;MACG,CAAA;KAEP,SACC,oBAAC,iBAAiB,OAAlB,EACE,OAAO,EAAE,MAAM,iDAAiD,EAChE,CAAA;KAEqB;;GACH,CAAA,CACJ"}
|
package/dist/Progress/index.d.ts
CHANGED
package/dist/Progress/index.js
CHANGED
|
@@ -9,9 +9,6 @@ var ELoadingState = /* @__PURE__ */ function(ELoadingState) {
|
|
|
9
9
|
ELoadingState["LOADED"] = "LOADED";
|
|
10
10
|
return ELoadingState;
|
|
11
11
|
}(ELoadingState || {});
|
|
12
|
-
/**
|
|
13
|
-
* 条状进度条组件
|
|
14
|
-
*/
|
|
15
12
|
var Progress_default = forwardRef(function Progress(props, ref) {
|
|
16
13
|
const { loading, className } = props;
|
|
17
14
|
const [loadingState, setLoadingState] = useState(ELoadingState.IDLE);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/Progress/index.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useState,\n} from 'react';\nimport { cn } from '../lib/utils';\nimport './progress.css';\n\nenum ELoadingState {\n IDLE = 'IDLE',\n LOADING = 'LOADING',\n LOADED = 'LOADED',\n}\n\
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/Progress/index.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useState,\n} from 'react';\nimport { cn } from '../lib/utils';\nimport './progress.css';\n\nenum ELoadingState {\n IDLE = 'IDLE',\n LOADING = 'LOADING',\n LOADED = 'LOADED',\n}\n\nexport default forwardRef(function Progress(props: IProps, ref) {\n const { loading, className } = props;\n const [loadingState, setLoadingState] = useState(ELoadingState.IDLE);\n const [key, setKey] = useState(0);\n\n useImperativeHandle(ref, () => ({\n restart() {\n setKey((prev) => prev + 1);\n },\n }));\n\n useEffect(() => {\n if (loadingState !== ELoadingState.IDLE) {\n if (loadingState === ELoadingState.LOADING && !loading) {\n setLoadingState(ELoadingState.LOADED);\n }\n return;\n }\n const DELAY_TIME = 200;\n const timer = setTimeout(() => {\n if (loading) {\n setLoadingState(ELoadingState.LOADING);\n }\n }, DELAY_TIME);\n\n return () => {\n if (timer) {\n clearTimeout(timer);\n }\n };\n }, [loading, loadingState]);\n\n const onAnimationEnd = useCallback(() => {\n if (loadingState === ELoadingState.LOADED) {\n setLoadingState(ELoadingState.IDLE);\n }\n }, [loadingState]);\n\n return (\n <div\n key={key}\n className={cn(\n 'ald-progress-bar tw-relative tw-h-[2px] tw-w-full tw-overflow-hidden',\n loadingState !== ELoadingState.IDLE &&\n 'ald-progress-bar-show-bg tw-bg-[var(--background-informative-subtle)]',\n className,\n )}\n >\n <div\n className={cn(\n 'ald-progress-bar-inner tw-absolute tw-left-0 tw-top-0 tw-h-full tw-w-0 tw-bg-[var(--action-primary-normal)]',\n loadingState === ELoadingState.LOADING &&\n 'ald-progress-bar-show-loading tw-animate-[progress-loading_2s_ease-in-out_forwards]',\n loadingState === ELoadingState.LOADED &&\n 'ald-progress-bar-hide-loading tw-animate-[progress-loaded_0.5s_ease-out_forwards]',\n )}\n onAnimationEnd={onAnimationEnd}\n />\n </div>\n );\n});\n\nexport interface IProps {\n loading: boolean;\n className?: string;\n}\n\nexport interface IProgressRef {\n restart: () => void;\n}\n"],"mappings":";;;;;AAUA,IAAK,gBAAL,yBAAA,eAAA;AACE,eAAA,UAAA;AACA,eAAA,aAAA;AACA,eAAA,YAAA;;EAHG,iBAAA,EAAA,CAIJ;AAED,IAAA,mBAAe,WAAW,SAAS,SAAS,OAAe,KAAK;CAC9D,MAAM,EAAE,SAAS,cAAc;CAC/B,MAAM,CAAC,cAAc,mBAAmB,SAAS,cAAc,KAAK;CACpE,MAAM,CAAC,KAAK,UAAU,SAAS,EAAE;AAEjC,qBAAoB,YAAY,EAC9B,UAAU;AACR,UAAQ,SAAS,OAAO,EAAE;IAE7B,EAAE;AAEH,iBAAgB;AACd,MAAI,iBAAiB,cAAc,MAAM;AACvC,OAAI,iBAAiB,cAAc,WAAW,CAAC,QAC7C,iBAAgB,cAAc,OAAO;AAEvC;;EAGF,MAAM,QAAQ,iBAAiB;AAC7B,OAAI,QACF,iBAAgB,cAAc,QAAQ;KAHvB,IAKL;AAEd,eAAa;AACX,OAAI,MACF,cAAa,MAAM;;IAGtB,CAAC,SAAS,aAAa,CAAC;CAE3B,MAAM,iBAAiB,kBAAkB;AACvC,MAAI,iBAAiB,cAAc,OACjC,iBAAgB,cAAc,KAAK;IAEpC,CAAC,aAAa,CAAC;AAElB,QACE,oBAAC,OAAD;EAEE,WAAW,GACT,wEACA,iBAAiB,cAAc,QAC7B,yEACF,UACD;YAED,oBAAC,OAAD;GACE,WAAW,GACT,+GACA,iBAAiB,cAAc,WAC7B,uFACF,iBAAiB,cAAc,UAC7B,oFACH;GACe;GAChB,CAAA;EACE,EAlBC,IAkBD;EAER"}
|
|
@@ -1,33 +1,18 @@
|
|
|
1
1
|
import { cn } from "../../../lib/utils.js";
|
|
2
2
|
import { getUUID } from "../../../_utils/hooks/useId.js";
|
|
3
3
|
import { RadioGroupContext } from "../Group/index.js";
|
|
4
|
-
import {
|
|
4
|
+
import { useContext, useRef, useState } from "react";
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
import _ from "lodash";
|
|
7
7
|
//#region src/Radio/components/Radio/index.tsx
|
|
8
8
|
function Radio(props) {
|
|
9
9
|
const groupContext = useContext(RadioGroupContext);
|
|
10
10
|
const labelRef = useRef(null);
|
|
11
|
-
const id = getUUID().toString();
|
|
11
|
+
const [id] = useState(() => getUUID().toString());
|
|
12
12
|
const radioProps = { ...props };
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}, [
|
|
17
|
-
groupContext,
|
|
18
|
-
props,
|
|
19
|
-
radioProps.checked
|
|
20
|
-
]);
|
|
21
|
-
const [checked, setChecked] = useState(initChecked);
|
|
22
|
-
useEffect(() => {
|
|
23
|
-
setChecked(initChecked);
|
|
24
|
-
}, [
|
|
25
|
-
initChecked,
|
|
26
|
-
groupContext.value,
|
|
27
|
-
props.value,
|
|
28
|
-
props.disabled
|
|
29
|
-
]);
|
|
30
|
-
if (!_.isEmpty(groupContext)) radioProps.disabled = groupContext.disabled || props.disabled;
|
|
13
|
+
const inGroup = !_.isEmpty(groupContext);
|
|
14
|
+
if (inGroup) radioProps.disabled = groupContext.disabled || props.disabled;
|
|
15
|
+
const checked = inGroup ? !radioProps.disabled && groupContext.value === props.value : !("checked" in props) ? props.defaultChecked : radioProps.checked;
|
|
31
16
|
const aldRadioClass = cn("ald-radio", {
|
|
32
17
|
"ald-radio-checked": checked,
|
|
33
18
|
"ald-radio-disabled": radioProps.disabled
|
|
@@ -51,25 +36,29 @@ function Radio(props) {
|
|
|
51
36
|
"ald-radio-wrapper-disabled": radioProps.disabled
|
|
52
37
|
});
|
|
53
38
|
};
|
|
39
|
+
const radioHideStyle = groupContext.type === "button" || groupContext.type === "iconButton" ? {
|
|
40
|
+
width: 0,
|
|
41
|
+
height: 0,
|
|
42
|
+
overflow: "hidden"
|
|
43
|
+
} : void 0;
|
|
54
44
|
return /* @__PURE__ */ jsxs("label", {
|
|
55
45
|
className: getWrapperClass(),
|
|
56
46
|
htmlFor: id,
|
|
57
47
|
ref: labelRef,
|
|
58
48
|
children: [/* @__PURE__ */ jsxs("span", {
|
|
59
49
|
className: aldRadioClass,
|
|
50
|
+
style: radioHideStyle,
|
|
60
51
|
children: [/* @__PURE__ */ jsx("input", {
|
|
61
52
|
id,
|
|
62
53
|
type: "radio",
|
|
63
54
|
className: "ald-radio-input",
|
|
64
|
-
|
|
55
|
+
checked: !!checked,
|
|
65
56
|
disabled: radioProps.disabled,
|
|
66
57
|
value: props.value,
|
|
58
|
+
onChange: (e) => props.onChange?.(e),
|
|
67
59
|
onClick: (e) => {
|
|
68
60
|
props.onClick?.(e);
|
|
69
|
-
if (
|
|
70
|
-
if (groupContext?.onChange) groupContext.onChange(props.value);
|
|
71
|
-
setChecked(!checked);
|
|
72
|
-
}
|
|
61
|
+
if (inGroup && groupContext?.onChange) groupContext.onChange(props.value);
|
|
73
62
|
}
|
|
74
63
|
}), /* @__PURE__ */ jsx("span", { className: "ald-radio-inner" })]
|
|
75
64
|
}), props.children && /* @__PURE__ */ jsx("span", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Radio/components/Radio/index.tsx"],"sourcesContent":["import { cn } from '../../../lib/utils';\nimport _ from 'lodash';\nimport React, {
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Radio/components/Radio/index.tsx"],"sourcesContent":["import { cn } from '../../../lib/utils';\nimport _ from 'lodash';\nimport React, { useContext, useRef, useState } from 'react';\n\nimport { getUUID } from '../../../_utils/hooks/useId';\nimport { IRadioProps } from '../../interface/radio';\nimport { RadioGroupContext } from '../Group';\n\nexport default function Radio(props: IRadioProps) {\n const groupContext = useContext(RadioGroupContext);\n const labelRef = useRef<HTMLLabelElement>(null);\n const [id] = useState(() => getUUID().toString());\n\n const radioProps = { ...props };\n const inGroup = !_.isEmpty(groupContext);\n\n if (inGroup) {\n radioProps.disabled = groupContext.disabled || props.disabled;\n }\n\n // checked 直接从 groupContext 或 props 派生,不使用 useState + useEffect,\n // 避免双重渲染导致切换时视觉抖动。\n const checked = inGroup\n ? !radioProps.disabled && groupContext.value === props.value\n : !('checked' in props)\n ? props.defaultChecked\n : radioProps.checked;\n\n // 设置input外层盒子的class\n const aldRadioClass = cn('ald-radio', {\n 'ald-radio-checked': checked,\n 'ald-radio-disabled': radioProps.disabled,\n });\n\n // 根据属性设置最外层的class\n const getWrapperClass = () => {\n let otherClass = '';\n if (groupContext.type === 'button') {\n if (groupContext.radioGroupStyle === 'filled') {\n otherClass = 'ald-radio-button-wrapper-filled';\n } else if (groupContext.radioGroupStyle === 'border') {\n otherClass = 'ald-radio-button-wrapper-border';\n } else if (groupContext.radioGroupStyle === 'filter') {\n otherClass = 'ald-radio-button-wrapper-filter';\n } else {\n otherClass = 'ald-radio-button-wrapper-border-primary';\n }\n } else if (groupContext.type === 'iconButton') {\n if (groupContext.radioGroupStyle === 'filled') {\n otherClass = 'ald-radio-icon-button-wrapper-filled';\n } else if (groupContext.radioGroupStyle === 'border') {\n otherClass = 'ald-radio-icon-button-wrapper-border';\n } else if (groupContext.radioGroupStyle === 'filter') {\n otherClass = 'ald-radio-icon-button-wrapper-filter';\n } else {\n otherClass = 'ald-radio-icon-button-wrapper-border-primary';\n }\n } else {\n // 当type未设置或者是radio时\n otherClass = 'ald-radio-wrapper';\n if (props.indeterminate) {\n otherClass = otherClass + ' ald-radio-wrapper-indeterminate';\n }\n }\n return cn('ald-radio-label', otherClass, props.className, {\n 'ald-radio-wrapper-checked': checked,\n 'ald-radio-wrapper-disabled': radioProps.disabled,\n });\n };\n\n // button / iconButton 模式下,radio 圆圈需要完全隐藏\n const isButtonMode =\n groupContext.type === 'button' || groupContext.type === 'iconButton';\n const radioHideStyle: React.CSSProperties | undefined = isButtonMode\n ? { width: 0, height: 0, overflow: 'hidden' }\n : undefined;\n\n return (\n <label className={getWrapperClass()} htmlFor={id} ref={labelRef}>\n <span className={aldRadioClass} style={radioHideStyle}>\n <input\n id={id}\n type=\"radio\"\n className=\"ald-radio-input\"\n // 同步派生的 checked 到原生 input,对齐 v2/antd 行为(仅有 class 不更新 input.checked)\n checked={!!checked}\n disabled={radioProps.disabled}\n value={props.value}\n onChange={(e) => props.onChange?.(e)}\n onClick={(e) => {\n props.onClick?.(e);\n\n if (inGroup && groupContext?.onChange) {\n // input事件的value会被toString,所以此处进行一个覆盖\n groupContext.onChange(props.value);\n }\n }}\n />\n <span className=\"ald-radio-inner\" />\n </span>\n {props.children && (\n <span className=\"ald-radio-desc\">{props.children}</span>\n )}\n </label>\n );\n}\n"],"mappings":";;;;;;;AAQA,SAAwB,MAAM,OAAoB;CAChD,MAAM,eAAe,WAAW,kBAAkB;CAClD,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,CAAC,MAAM,eAAe,SAAS,CAAC,UAAU,CAAC;CAEjD,MAAM,aAAa,EAAE,GAAG,OAAO;CAC/B,MAAM,UAAU,CAAC,EAAE,QAAQ,aAAa;AAExC,KAAI,QACF,YAAW,WAAW,aAAa,YAAY,MAAM;CAKvD,MAAM,UAAU,UACZ,CAAC,WAAW,YAAY,aAAa,UAAU,MAAM,QACrD,EAAE,aAAa,SACf,MAAM,iBACN,WAAW;CAGf,MAAM,gBAAgB,GAAG,aAAa;EACpC,qBAAqB;EACrB,sBAAsB,WAAW;EAClC,CAAC;CAGF,MAAM,wBAAwB;EAC5B,IAAI,aAAa;AACjB,MAAI,aAAa,SAAS,SACxB,KAAI,aAAa,oBAAoB,SACnC,cAAa;WACJ,aAAa,oBAAoB,SAC1C,cAAa;WACJ,aAAa,oBAAoB,SAC1C,cAAa;MAEb,cAAa;WAEN,aAAa,SAAS,aAC/B,KAAI,aAAa,oBAAoB,SACnC,cAAa;WACJ,aAAa,oBAAoB,SAC1C,cAAa;WACJ,aAAa,oBAAoB,SAC1C,cAAa;MAEb,cAAa;OAEV;AAEL,gBAAa;AACb,OAAI,MAAM,cACR,cAAa,aAAa;;AAG9B,SAAO,GAAG,mBAAmB,YAAY,MAAM,WAAW;GACxD,6BAA6B;GAC7B,8BAA8B,WAAW;GAC1C,CAAC;;CAMJ,MAAM,iBADJ,aAAa,SAAS,YAAY,aAAa,SAAS,eAEtD;EAAE,OAAO;EAAG,QAAQ;EAAG,UAAU;EAAU,GAC3C;AAEJ,QACE,qBAAC,SAAD;EAAO,WAAW,iBAAiB;EAAE,SAAS;EAAI,KAAK;YAAvD,CACE,qBAAC,QAAD;GAAM,WAAW;GAAe,OAAO;aAAvC,CACE,oBAAC,SAAD;IACM;IACJ,MAAK;IACL,WAAU;IAEV,SAAS,CAAC,CAAC;IACX,UAAU,WAAW;IACrB,OAAO,MAAM;IACb,WAAW,MAAM,MAAM,WAAW,EAAE;IACpC,UAAU,MAAM;AACd,WAAM,UAAU,EAAE;AAElB,SAAI,WAAW,cAAc,SAE3B,cAAa,SAAS,MAAM,MAAM;;IAGtC,CAAA,EACF,oBAAC,QAAD,EAAM,WAAU,mBAAoB,CAAA,CAC/B;MACN,MAAM,YACL,oBAAC,QAAD;GAAM,WAAU;aAAkB,MAAM;GAAgB,CAAA,CAEpD"}
|
|
@@ -6,7 +6,6 @@ var defaultWidth = 20;
|
|
|
6
6
|
var PADDING_WIDTH = 4;
|
|
7
7
|
var RenameInput = ({ value: propsValue, onConfirm, className, width, fontStyle, maxLength, validateValue, onError, readonly = false, isEdit: propsIsEdit = false }) => {
|
|
8
8
|
const [isEdit, setIsEdit] = useState(propsIsEdit);
|
|
9
|
-
console.log("%c [ isEdit ]-46", "font-size:13px; background:#134c7e; color:#5790c2;", 1433223, isEdit);
|
|
10
9
|
const [value, setValue] = useState(propsValue);
|
|
11
10
|
useEffect(() => {
|
|
12
11
|
setValue(propsValue);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/RenameInput/index.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { cn } from '../lib/utils';\n\ninterface IProps {\n value: string;\n onConfirm?: (value: string) => void;\n onError?: (value: string) => void;\n className?: string;\n width?: number;\n fontStyle?: CSSProperties;\n /**\n * @deprecated 如果要控制编辑态请使用 isEdit\n */\n focus?: boolean;\n isEdit?: boolean;\n maxLength?: number;\n distance?: [left: number, right: number];\n validateValue?: (value: string) => boolean;\n readonly?: boolean;\n}\n\nconst defaultWidth = 20;\n\nconst PADDING_WIDTH = 4;\n\nconst RenameInput = ({\n value: propsValue,\n onConfirm,\n className,\n width,\n fontStyle,\n maxLength,\n validateValue,\n onError,\n readonly = false,\n isEdit: propsIsEdit = false,\n}: IProps) => {\n const [isEdit, setIsEdit] = useState<boolean>(propsIsEdit);\n
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/RenameInput/index.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { cn } from '../lib/utils';\n\ninterface IProps {\n value: string;\n onConfirm?: (value: string) => void;\n onError?: (value: string) => void;\n className?: string;\n width?: number;\n fontStyle?: CSSProperties;\n /**\n * @deprecated 如果要控制编辑态请使用 isEdit\n */\n focus?: boolean;\n isEdit?: boolean;\n maxLength?: number;\n distance?: [left: number, right: number];\n validateValue?: (value: string) => boolean;\n readonly?: boolean;\n}\n\nconst defaultWidth = 20;\n\nconst PADDING_WIDTH = 4;\n\nconst RenameInput = ({\n value: propsValue,\n onConfirm,\n className,\n width,\n fontStyle,\n maxLength,\n validateValue,\n onError,\n readonly = false,\n isEdit: propsIsEdit = false,\n}: IProps) => {\n const [isEdit, setIsEdit] = useState<boolean>(propsIsEdit);\n const [value, setValue] = useState(propsValue);\n\n useEffect(() => {\n setValue(propsValue);\n }, [propsValue]);\n\n const divRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleBlur = useCallback(() => {\n onConfirm?.(value);\n inputRef.current?.blur();\n }, [onConfirm, value]);\n\n useEffect(() => {\n if (!width && divRef.current && inputRef.current) {\n const tempWidth = divRef.current?.offsetWidth || defaultWidth;\n inputRef.current.style.width = tempWidth + PADDING_WIDTH + 'px';\n }\n }, [width, value, isEdit]);\n\n useEffect(() => {\n if (isEdit) {\n setValue(propsValue);\n }\n }, [isEdit, propsValue]);\n\n useEffect(() => {\n if (propsIsEdit) {\n setIsEdit(true);\n setTimeout(() => {\n if (inputRef.current) {\n inputRef.current.focus();\n inputRef.current.select();\n }\n }, 100);\n } else {\n setIsEdit(false);\n }\n }, [propsIsEdit]);\n\n if (isEdit && !readonly) {\n return (\n <div className=\"ald-rename-input tw-flex tw-h-[22px] tw-min-w-[10px] tw-max-w-full tw-items-center tw-border tw-border-transparent\">\n <input\n className={cn(\n className,\n 'ald-rename-input-wrapper tw-box-border tw-h-[22px] tw-max-w-full tw-border-0 tw-p-[2px] tw-text-[13px]',\n 'hover:tw-border hover:tw-border-solid hover:tw-border-[var(--border-neutral-strong)]',\n 'focus:tw-border focus:tw-border-solid focus:tw-border-[var(--interaction-border-selected)] focus:tw-shadow-[0_0_0_1px_var(--interaction-focus-default)]',\n )}\n style={{\n ...fontStyle,\n width,\n }}\n value={value}\n ref={inputRef}\n onChange={(e) => setValue(e.target.value)}\n onBlur={(e) => {\n if (!validateValue || validateValue(e.target.value.trim())) {\n handleBlur();\n } else {\n onError?.(value);\n setValue(propsValue);\n }\n setIsEdit(false);\n }}\n onFocus={() => {\n inputRef.current?.select();\n }}\n maxLength={maxLength}\n onKeyUp={(e) => {\n if (e.key === 'Enter') {\n if (\n !validateValue ||\n validateValue(inputRef.current?.value.trim() || '')\n ) {\n inputRef.current?.blur();\n } else {\n onError?.(inputRef.current?.value.trim() || '');\n setValue(propsValue);\n }\n }\n }}\n />\n <div\n ref={divRef}\n className=\"ald-rename-input-div tw-pointer-events-none tw-invisible tw-fixed tw-bottom-0 tw--ml-px tw-min-w-px tw-max-w-full tw-overflow-hidden tw-whitespace-pre tw-border tw-border-transparent tw-p-0 tw-text-[13px] tw-font-normal\"\n style={fontStyle}\n >\n {value}\n </div>\n </div>\n );\n }\n\n return (\n <div\n className={cn(\n className,\n 'ald-rename-input-text tw-flex tw-h-[22px] tw-items-center tw-border tw-border-transparent tw-p-[2px] tw-text-[13px]',\n )}\n style={fontStyle}\n onMouseMove={() => {\n setIsEdit(true);\n setValue(propsValue);\n }}\n onClick={() => {\n inputRef.current?.select();\n }}\n >\n {propsValue}\n </div>\n );\n};\n\nexport default RenameInput;\n"],"mappings":";;;;AA2BA,IAAM,eAAe;AAErB,IAAM,gBAAgB;AAEtB,IAAM,eAAe,EACnB,OAAO,YACP,WACA,WACA,OACA,WACA,WACA,eACA,SACA,WAAW,OACX,QAAQ,cAAc,YACV;CACZ,MAAM,CAAC,QAAQ,aAAa,SAAkB,YAAY;CAC1D,MAAM,CAAC,OAAO,YAAY,SAAS,WAAW;AAE9C,iBAAgB;AACd,WAAS,WAAW;IACnB,CAAC,WAAW,CAAC;CAEhB,MAAM,SAAS,OAAuB,KAAK;CAC3C,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAM,aAAa,kBAAkB;AACnC,cAAY,MAAM;AAClB,WAAS,SAAS,MAAM;IACvB,CAAC,WAAW,MAAM,CAAC;AAEtB,iBAAgB;AACd,MAAI,CAAC,SAAS,OAAO,WAAW,SAAS,SAAS;GAChD,MAAM,YAAY,OAAO,SAAS,eAAe;AACjD,YAAS,QAAQ,MAAM,QAAQ,YAAY,gBAAgB;;IAE5D;EAAC;EAAO;EAAO;EAAO,CAAC;AAE1B,iBAAgB;AACd,MAAI,OACF,UAAS,WAAW;IAErB,CAAC,QAAQ,WAAW,CAAC;AAExB,iBAAgB;AACd,MAAI,aAAa;AACf,aAAU,KAAK;AACf,oBAAiB;AACf,QAAI,SAAS,SAAS;AACpB,cAAS,QAAQ,OAAO;AACxB,cAAS,QAAQ,QAAQ;;MAE1B,IAAI;QAEP,WAAU,MAAM;IAEjB,CAAC,YAAY,CAAC;AAEjB,KAAI,UAAU,CAAC,SACb,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,SAAD;GACE,WAAW,GACT,WACA,0GACA,wFACA,0JACD;GACD,OAAO;IACL,GAAG;IACH;IACD;GACM;GACP,KAAK;GACL,WAAW,MAAM,SAAS,EAAE,OAAO,MAAM;GACzC,SAAS,MAAM;AACb,QAAI,CAAC,iBAAiB,cAAc,EAAE,OAAO,MAAM,MAAM,CAAC,CACxD,aAAY;SACP;AACL,eAAU,MAAM;AAChB,cAAS,WAAW;;AAEtB,cAAU,MAAM;;GAElB,eAAe;AACb,aAAS,SAAS,QAAQ;;GAEjB;GACX,UAAU,MAAM;AACd,QAAI,EAAE,QAAQ,QACZ,KACE,CAAC,iBACD,cAAc,SAAS,SAAS,MAAM,MAAM,IAAI,GAAG,CAEnD,UAAS,SAAS,MAAM;SACnB;AACL,eAAU,SAAS,SAAS,MAAM,MAAM,IAAI,GAAG;AAC/C,cAAS,WAAW;;;GAI1B,CAAA,EACF,oBAAC,OAAD;GACE,KAAK;GACL,WAAU;GACV,OAAO;aAEN;GACG,CAAA,CACF;;AAIV,QACE,oBAAC,OAAD;EACE,WAAW,GACT,WACA,sHACD;EACD,OAAO;EACP,mBAAmB;AACjB,aAAU,KAAK;AACf,YAAS,WAAW;;EAEtB,eAAe;AACb,YAAS,SAAS,QAAQ;;YAG3B;EACG,CAAA"}
|
|
@@ -26,7 +26,7 @@ function isShowSelectedSection(mode) {
|
|
|
26
26
|
return typeof mode === "object" && mode.showSelectedSection && mode.responsive;
|
|
27
27
|
}
|
|
28
28
|
var BaseSelect = React$1.forwardRef((props, ref) => {
|
|
29
|
-
const { id, className, displayValues, onDisplayValuesChange, displayMenu, notFoundContent, onClear, width, mode, status: customStatus, onOptionSelect, onClick, size: customSize, borderLess = false, disabled, placeholder, open, defaultOpen, onOpenChange, showSearch, innerSearchValue, setInnerSearchValue, allowClear, showArrow = true, prefix, suffixIcon, dropdownRender, overlayStyle, dropdownStyle, popupMatchSelectWidth = true, placement, popupClassName, style, ...restProps } = props;
|
|
29
|
+
const { id, className, displayValues, onDisplayValuesChange, displayMenu, notFoundContent, onClear, width, mode, status: customStatus, onOptionSelect, onClick, size: customSize, borderLess = false, disabled, placeholder, open, defaultOpen, onOpenChange, showSearch, innerSearchValue, setInnerSearchValue, allowClear, showArrow = true, prefix, suffixIcon, dropdownRender, overlayStyle, dropdownStyle, popupMatchSelectWidth = true, placement, popupClassName, allowOverlap, style, ...restProps } = props;
|
|
30
30
|
const setClassNames = prefixCls("select");
|
|
31
31
|
const selectRef = useRef(null);
|
|
32
32
|
const widthStyle = getWidthStyle(width);
|
|
@@ -73,6 +73,7 @@ var BaseSelect = React$1.forwardRef((props, ref) => {
|
|
|
73
73
|
onOpenChange
|
|
74
74
|
]);
|
|
75
75
|
const [showResponsiveSelectedSection, setShowResponsiveSelectedSection] = useState(false);
|
|
76
|
+
const [overflowCollapsed, setOverflowCollapsed] = useState(false);
|
|
76
77
|
const onSelectorRemove = (val) => {
|
|
77
78
|
onDisplayValuesChange(displayValues.filter((i) => i !== val), {
|
|
78
79
|
type: "remove",
|
|
@@ -88,7 +89,8 @@ var BaseSelect = React$1.forwardRef((props, ref) => {
|
|
|
88
89
|
disabled,
|
|
89
90
|
[`${mergedStatus}`]: !!mergedStatus,
|
|
90
91
|
"multiple-responsive": isResponsiveMode,
|
|
91
|
-
"multiple-default": isMultipleMode && !isResponsiveMode
|
|
92
|
+
"multiple-default": isMultipleMode && !isResponsiveMode,
|
|
93
|
+
"overflow-collapsed": overflowCollapsed && width === "auto" && !_.isEmpty(displayValues)
|
|
92
94
|
}), className, compactItemClassnames);
|
|
93
95
|
const showMenu = React$1.useMemo(() => {
|
|
94
96
|
if (!displayMenu) return;
|
|
@@ -96,8 +98,8 @@ var BaseSelect = React$1.forwardRef((props, ref) => {
|
|
|
96
98
|
...displayMenu,
|
|
97
99
|
onClick: (info) => {
|
|
98
100
|
displayMenu?.onClick?.(info);
|
|
99
|
-
if (
|
|
100
|
-
|
|
101
|
+
if (isMultipleMode) info.keepOpen = info.keepOpen ?? true;
|
|
102
|
+
else if (displayMenu) {
|
|
101
103
|
onToggleOpen(false);
|
|
102
104
|
setFocus(false);
|
|
103
105
|
}
|
|
@@ -132,6 +134,7 @@ var BaseSelect = React$1.forwardRef((props, ref) => {
|
|
|
132
134
|
className: mergedClassName,
|
|
133
135
|
style: {
|
|
134
136
|
...widthStyle,
|
|
137
|
+
...width === "auto" && _.isEmpty(displayValues) ? { flexShrink: 0 } : {},
|
|
135
138
|
...style
|
|
136
139
|
},
|
|
137
140
|
ref: selectRef,
|
|
@@ -151,20 +154,21 @@ var BaseSelect = React$1.forwardRef((props, ref) => {
|
|
|
151
154
|
dropdownRender,
|
|
152
155
|
overlayStyle: overlayStyle || dropdownStyle,
|
|
153
156
|
placement,
|
|
157
|
+
allowOverlap,
|
|
154
158
|
onOpenChange: (open) => {
|
|
155
159
|
if (isResponsiveMode) if (!mergedOpen && !showResponsiveSelectedSection && displayValues.length > 0 && isShowSelectedSection(mode)) setShowResponsiveSelectedSection(true);
|
|
156
160
|
else onToggleOpen(open);
|
|
157
161
|
else onToggleOpen(open);
|
|
158
162
|
},
|
|
159
163
|
children: /* @__PURE__ */ jsxs("div", {
|
|
160
|
-
className: setClassNames("trigger"),
|
|
164
|
+
className: cn(setClassNames("trigger"), "ant-select-selector"),
|
|
161
165
|
children: [
|
|
162
166
|
prefix && /* @__PURE__ */ jsx("div", {
|
|
163
167
|
className: setClassNames("prefix"),
|
|
164
168
|
children: prefix
|
|
165
169
|
}),
|
|
166
170
|
_.isEmpty(displayValues) && /* @__PURE__ */ jsx("div", {
|
|
167
|
-
className: setClassNames("placeholder"),
|
|
171
|
+
className: cn(setClassNames("placeholder"), "ant-select-selection-placeholder"),
|
|
168
172
|
children: placeholder
|
|
169
173
|
}),
|
|
170
174
|
!_.isEmpty(displayValues) && /* @__PURE__ */ jsx(Selector, {
|
|
@@ -177,7 +181,8 @@ var BaseSelect = React$1.forwardRef((props, ref) => {
|
|
|
177
181
|
displayValues,
|
|
178
182
|
onToggleOpen,
|
|
179
183
|
onRemove: onSelectorRemove,
|
|
180
|
-
showResponsiveSelectedSection
|
|
184
|
+
showResponsiveSelectedSection,
|
|
185
|
+
onOverflowCollapsedChange: setOverflowCollapsed
|
|
181
186
|
})
|
|
182
187
|
]
|
|
183
188
|
})
|