@aloudata/aloudata-design 3.0.7 → 3.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Alert/index.js +2 -2
- package/dist/Alert/index.js.map +1 -1
- package/dist/Avatar/component/Avatar/index.js +7 -1
- package/dist/Avatar/component/Avatar/index.js.map +1 -1
- package/dist/Button/index.d.ts +2 -0
- package/dist/Button/index.js +2 -1
- package/dist/Button/index.js.map +1 -1
- package/dist/Card/index.js +2 -2
- package/dist/Card/index.js.map +1 -1
- package/dist/Checkbox/index.js +3 -1
- package/dist/Checkbox/index.js.map +1 -1
- package/dist/Checkbox/type.d.ts +4 -0
- package/dist/Collapse/index.js +18 -8
- package/dist/Collapse/index.js.map +1 -1
- package/dist/ConfigProvider/index.d.ts +5 -2
- package/dist/ConfigProvider/index.js +25 -3
- package/dist/ConfigProvider/index.js.map +1 -1
- package/dist/DataPreviewTable/components/Body/Error.d.ts +2 -0
- package/dist/DataPreviewTable/components/Body/Error.js +7 -3
- package/dist/DataPreviewTable/components/Body/Error.js.map +1 -1
- package/dist/DataPreviewTable/index.js +3 -1
- package/dist/DataPreviewTable/index.js.map +1 -1
- package/dist/DatePicker/index.js +12 -1
- package/dist/DatePicker/index.js.map +1 -1
- package/dist/Dropdown/index.js +7 -9
- package/dist/Dropdown/index.js.map +1 -1
- package/dist/Empty/index.js +1 -2
- package/dist/Empty/index.js.map +1 -1
- package/dist/IconButton/index.d.ts +4 -0
- package/dist/IconButton/index.js +8 -2
- package/dist/IconButton/index.js.map +1 -1
- package/dist/Input/components/Input/index.d.ts +4 -0
- package/dist/Input/components/Input/index.js +10 -4
- package/dist/Input/components/Input/index.js.map +1 -1
- package/dist/InputNumber/index.js +5 -1
- package/dist/InputNumber/index.js.map +1 -1
- package/dist/InputNumber/type.d.ts +4 -0
- package/dist/InputSearch/index.d.ts +4 -0
- package/dist/InputSearch/index.js +3 -1
- package/dist/InputSearch/index.js.map +1 -1
- package/dist/MemberPicker/index.js +3 -1
- package/dist/MemberPicker/index.js.map +1 -1
- package/dist/Modal/index.d.ts +4 -0
- package/dist/Modal/index.js +3 -1
- package/dist/Modal/index.js.map +1 -1
- package/dist/Popconfirm/index.js +3 -2
- package/dist/Popconfirm/index.js.map +1 -1
- package/dist/Radio/components/Group/index.js +3 -1
- package/dist/Radio/components/Group/index.js.map +1 -1
- package/dist/Radio/components/Radio/index.js +8 -2
- package/dist/Radio/components/Radio/index.js.map +1 -1
- package/dist/Radio/interface/radioGroup.d.ts +4 -0
- package/dist/Select/BaseSelect.js +5 -1
- package/dist/Select/BaseSelect.js.map +1 -1
- package/dist/Select/components/Suffix.d.ts +2 -1
- package/dist/Select/components/Suffix.js +14 -5
- package/dist/Select/components/Suffix.js.map +1 -1
- package/dist/Select/interface.d.ts +4 -0
- package/dist/Slider/index.js +2 -2
- package/dist/Slider/index.js.map +1 -1
- package/dist/Steps/components/Step/index.d.ts +1 -0
- package/dist/Steps/components/Step/index.js.map +1 -1
- package/dist/Steps/index.d.ts +1 -1
- package/dist/Steps/index.js +4 -2
- package/dist/Steps/index.js.map +1 -1
- package/dist/Switch/index.d.ts +4 -0
- package/dist/Switch/index.js +3 -1
- package/dist/Switch/index.js.map +1 -1
- package/dist/Tabs/index.d.ts +4 -0
- package/dist/Tabs/index.js +3 -1
- package/dist/Tabs/index.js.map +1 -1
- package/dist/Tooltip/index.js +5 -4
- package/dist/Tooltip/index.js.map +1 -1
- package/dist/aloudata-design.css +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/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={
|
|
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 const mergedOpen = disabled ? false : isOpen;\n\n const handleOpenChange = (val: boolean) => {\n if (disabled) return;\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={mergedOpen} 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;CAExC,MAAM,aAAa,WAAW,QADf,eAAe,iBAAiB;CAG/C,MAAM,oBAAoB,QAAiB;AACzC,MAAI,SAAU;AACd,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;EAAY,cAAc;YAAvD,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"}
|
|
@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
5
5
|
//#region src/Radio/components/Group/index.tsx
|
|
6
6
|
var RadioGroupContext = createContext({});
|
|
7
7
|
function RadioGroup(props) {
|
|
8
|
-
const { children, radioGroupStyle = "filled", size = "middle", type = "radio", className, disabled: customDisabled } = props;
|
|
8
|
+
const { children, radioGroupStyle = "filled", size = "middle", type = "radio", className, disabled: customDisabled, "data-testid": dataTestId, "aria-label": ariaLabel } = props;
|
|
9
9
|
const isControlled = "value" in props && props.value !== void 0;
|
|
10
10
|
const [innerValue, setInnerValue] = useState(props.defaultValue);
|
|
11
11
|
useEffect(() => {
|
|
@@ -41,6 +41,8 @@ function RadioGroup(props) {
|
|
|
41
41
|
},
|
|
42
42
|
children: /* @__PURE__ */ jsx("div", {
|
|
43
43
|
className: getWrapperClass(),
|
|
44
|
+
"data-testid": dataTestId,
|
|
45
|
+
"aria-label": ariaLabel,
|
|
44
46
|
children
|
|
45
47
|
})
|
|
46
48
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Radio/components/Group/index.tsx"],"sourcesContent":["import { cn } from '../../../lib/utils';\nimport React, { createContext, useEffect, useState } from 'react';\nimport DisabledContext from '../../../ConfigProvider/DisabledContext';\nimport { IRadioGroupProps } from '../../interface/radioGroup';\n\nexport const RadioGroupContext = createContext<\n Omit<IRadioGroupProps, 'children' | 'className'>\n>({});\n\nexport default function RadioGroup(props: IRadioGroupProps) {\n const {\n children,\n radioGroupStyle = 'filled',\n size = 'middle',\n type = 'radio',\n className,\n disabled: customDisabled,\n } = props;\n const isControlled = 'value' in props && props.value !== undefined;\n const [innerValue, setInnerValue] = useState(props.defaultValue);\n\n useEffect(() => {\n if (isControlled) {\n setInnerValue(props.value);\n }\n }, [props.value, isControlled]);\n\n const value = isControlled ? props.value : innerValue;\n const setValue = (v: any) => {\n if (!isControlled) {\n setInnerValue(v);\n }\n };\n // ===================== Disabled =====================\n const disabled = React.useContext(DisabledContext);\n const mergedDisabled = customDisabled ?? disabled;\n const onRadioChange = (selectedValue: any) => {\n const lastValue = value;\n\n setValue(selectedValue);\n const { onChange } = props;\n if (onChange && selectedValue !== lastValue) {\n onChange(selectedValue);\n }\n };\n\n const getWrapperClass = () => {\n const isButton = ['button', 'iconButton'].includes(type);\n const tempType = type === 'iconButton' ? 'icon-button' : type;\n return cn('ald-radio-group', className, `ald-radio-group-${tempType}`, {\n // 约束只能在type为button和iconbutton的时候才可以设置样式和大小\n [`ald-radio-group-${radioGroupStyle}`]: isButton,\n [`ald-radio-group-${size}`]: isButton,\n });\n };\n\n return (\n <RadioGroupContext.Provider\n value={{\n onChange: onRadioChange,\n value,\n radioGroupStyle,\n size,\n type,\n disabled: mergedDisabled,\n }}\n >\n <div
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Radio/components/Group/index.tsx"],"sourcesContent":["import { cn } from '../../../lib/utils';\nimport React, { createContext, useEffect, useState } from 'react';\nimport DisabledContext from '../../../ConfigProvider/DisabledContext';\nimport { IRadioGroupProps } from '../../interface/radioGroup';\n\nexport const RadioGroupContext = createContext<\n Omit<IRadioGroupProps, 'children' | 'className'>\n>({});\n\nexport default function RadioGroup(props: IRadioGroupProps) {\n const {\n children,\n radioGroupStyle = 'filled',\n size = 'middle',\n type = 'radio',\n className,\n disabled: customDisabled,\n 'data-testid': dataTestId,\n 'aria-label': ariaLabel,\n } = props;\n const isControlled = 'value' in props && props.value !== undefined;\n const [innerValue, setInnerValue] = useState(props.defaultValue);\n\n useEffect(() => {\n if (isControlled) {\n setInnerValue(props.value);\n }\n }, [props.value, isControlled]);\n\n const value = isControlled ? props.value : innerValue;\n const setValue = (v: any) => {\n if (!isControlled) {\n setInnerValue(v);\n }\n };\n // ===================== Disabled =====================\n const disabled = React.useContext(DisabledContext);\n const mergedDisabled = customDisabled ?? disabled;\n const onRadioChange = (selectedValue: any) => {\n const lastValue = value;\n\n setValue(selectedValue);\n const { onChange } = props;\n if (onChange && selectedValue !== lastValue) {\n onChange(selectedValue);\n }\n };\n\n const getWrapperClass = () => {\n const isButton = ['button', 'iconButton'].includes(type);\n const tempType = type === 'iconButton' ? 'icon-button' : type;\n return cn('ald-radio-group', className, `ald-radio-group-${tempType}`, {\n // 约束只能在type为button和iconbutton的时候才可以设置样式和大小\n [`ald-radio-group-${radioGroupStyle}`]: isButton,\n [`ald-radio-group-${size}`]: isButton,\n });\n };\n\n return (\n <RadioGroupContext.Provider\n value={{\n onChange: onRadioChange,\n value,\n radioGroupStyle,\n size,\n type,\n disabled: mergedDisabled,\n }}\n >\n <div\n className={getWrapperClass()}\n data-testid={dataTestId}\n aria-label={ariaLabel}\n >\n {children}\n </div>\n </RadioGroupContext.Provider>\n );\n}\n"],"mappings":";;;;;AAKA,IAAa,oBAAoB,cAE/B,EAAE,CAAC;AAEL,SAAwB,WAAW,OAAyB;CAC1D,MAAM,EACJ,UACA,kBAAkB,UAClB,OAAO,UACP,OAAO,SACP,WACA,UAAU,gBACV,eAAe,YACf,cAAc,cACZ;CACJ,MAAM,eAAe,WAAW,SAAS,MAAM,UAAU;CACzD,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM,aAAa;AAEhE,iBAAgB;AACd,MAAI,aACF,eAAc,MAAM,MAAM;IAE3B,CAAC,MAAM,OAAO,aAAa,CAAC;CAE/B,MAAM,QAAQ,eAAe,MAAM,QAAQ;CAC3C,MAAM,YAAY,MAAW;AAC3B,MAAI,CAAC,aACH,eAAc,EAAE;;CAIpB,MAAM,WAAW,MAAM,WAAW,gBAAgB;CAClD,MAAM,iBAAiB,kBAAkB;CACzC,MAAM,iBAAiB,kBAAuB;EAC5C,MAAM,YAAY;AAElB,WAAS,cAAc;EACvB,MAAM,EAAE,aAAa;AACrB,MAAI,YAAY,kBAAkB,UAChC,UAAS,cAAc;;CAI3B,MAAM,wBAAwB;EAC5B,MAAM,WAAW,CAAC,UAAU,aAAa,CAAC,SAAS,KAAK;AAExD,SAAO,GAAG,mBAAmB,WAAW,mBADvB,SAAS,eAAe,gBAAgB,QACc;IAEpE,mBAAmB,oBAAoB;IACvC,mBAAmB,SAAS;GAC9B,CAAC;;AAGJ,QACE,oBAAC,kBAAkB,UAAnB;EACE,OAAO;GACL,UAAU;GACV;GACA;GACA;GACA;GACA,UAAU;GACX;YAED,oBAAC,OAAD;GACE,WAAW,iBAAiB;GAC5B,eAAa;GACb,cAAY;GAEX;GACG,CAAA;EACqB,CAAA"}
|
|
@@ -11,8 +11,10 @@ function Radio(props) {
|
|
|
11
11
|
const [id] = useState(() => getUUID().toString());
|
|
12
12
|
const radioProps = { ...props };
|
|
13
13
|
const inGroup = !_.isEmpty(groupContext);
|
|
14
|
+
const isControlled = "checked" in props;
|
|
15
|
+
const [innerChecked, setInnerChecked] = useState(props.defaultChecked ?? false);
|
|
14
16
|
if (inGroup) radioProps.disabled = groupContext.disabled || props.disabled;
|
|
15
|
-
const checked = inGroup ? !radioProps.disabled && groupContext.value === props.value : !
|
|
17
|
+
const checked = inGroup ? !radioProps.disabled && groupContext.value === props.value : !isControlled ? innerChecked : radioProps.checked;
|
|
16
18
|
const aldRadioClass = cn("ald-radio", {
|
|
17
19
|
"ald-radio-checked": checked,
|
|
18
20
|
"ald-radio-disabled": radioProps.disabled
|
|
@@ -55,7 +57,11 @@ function Radio(props) {
|
|
|
55
57
|
checked: !!checked,
|
|
56
58
|
disabled: radioProps.disabled,
|
|
57
59
|
value: props.value,
|
|
58
|
-
onChange: (e) =>
|
|
60
|
+
onChange: (e) => {
|
|
61
|
+
if (radioProps.disabled) return;
|
|
62
|
+
if (!inGroup && !isControlled) setInnerChecked(e.target.checked);
|
|
63
|
+
props.onChange?.(e);
|
|
64
|
+
},
|
|
59
65
|
onClick: (e) => {
|
|
60
66
|
props.onClick?.(e);
|
|
61
67
|
if (inGroup && groupContext?.onChange) groupContext.onChange(props.value);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Radio/components/Radio/index.tsx"],"sourcesContent":["import { cn } from '../../../lib/utils';\nimport _ from 'lodash';\nimport React, { useContext, useRef, useState } from 'react';\n\nimport { getUUID } from '../../../_utils/hooks/useId';\nimport { IRadioProps } from '../../interface/radio';\nimport { RadioGroupContext } from '../Group';\n\nexport default function Radio(props: IRadioProps) {\n const groupContext = useContext(RadioGroupContext);\n const labelRef = useRef<HTMLLabelElement>(null);\n const [id] = useState(() => getUUID().toString());\n\n const radioProps = { ...props };\n const inGroup = !_.isEmpty(groupContext);\n\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 : !
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Radio/components/Radio/index.tsx"],"sourcesContent":["import { cn } from '../../../lib/utils';\nimport _ from 'lodash';\nimport React, { useContext, useRef, useState } from 'react';\n\nimport { getUUID } from '../../../_utils/hooks/useId';\nimport { IRadioProps } from '../../interface/radio';\nimport { RadioGroupContext } from '../Group';\n\nexport default function Radio(props: IRadioProps) {\n const groupContext = useContext(RadioGroupContext);\n const labelRef = useRef<HTMLLabelElement>(null);\n const [id] = useState(() => getUUID().toString());\n\n const radioProps = { ...props };\n const inGroup = !_.isEmpty(groupContext);\n const isControlled = 'checked' in props;\n const [innerChecked, setInnerChecked] = useState(\n props.defaultChecked ?? false,\n );\n\n if (inGroup) {\n radioProps.disabled = groupContext.disabled || props.disabled;\n }\n\n // checked 直接从 groupContext 或 props 派生,不使用 useState + useEffect,\n // 避免双重渲染导致切换时视觉抖动。\n const checked = inGroup\n ? !radioProps.disabled && groupContext.value === props.value\n : !isControlled\n ? innerChecked\n : radioProps.checked;\n\n // 设置input外层盒子的class\n const aldRadioClass = cn('ald-radio', {\n 'ald-radio-checked': checked,\n 'ald-radio-disabled': radioProps.disabled,\n });\n\n // 根据属性设置最外层的class\n const getWrapperClass = () => {\n let otherClass = '';\n if (groupContext.type === 'button') {\n if (groupContext.radioGroupStyle === 'filled') {\n otherClass = 'ald-radio-button-wrapper-filled';\n } else if (groupContext.radioGroupStyle === 'border') {\n otherClass = 'ald-radio-button-wrapper-border';\n } else if (groupContext.radioGroupStyle === 'filter') {\n otherClass = 'ald-radio-button-wrapper-filter';\n } else {\n otherClass = 'ald-radio-button-wrapper-border-primary';\n }\n } else if (groupContext.type === 'iconButton') {\n if (groupContext.radioGroupStyle === 'filled') {\n otherClass = 'ald-radio-icon-button-wrapper-filled';\n } else if (groupContext.radioGroupStyle === 'border') {\n otherClass = 'ald-radio-icon-button-wrapper-border';\n } else if (groupContext.radioGroupStyle === 'filter') {\n otherClass = 'ald-radio-icon-button-wrapper-filter';\n } else {\n otherClass = 'ald-radio-icon-button-wrapper-border-primary';\n }\n } else {\n // 当type未设置或者是radio时\n otherClass = 'ald-radio-wrapper';\n if (props.indeterminate) {\n otherClass = otherClass + ' ald-radio-wrapper-indeterminate';\n }\n }\n return cn('ald-radio-label', otherClass, props.className, {\n 'ald-radio-wrapper-checked': checked,\n 'ald-radio-wrapper-disabled': radioProps.disabled,\n });\n };\n\n // button / iconButton 模式下,radio 圆圈需要完全隐藏\n const isButtonMode =\n groupContext.type === 'button' || groupContext.type === 'iconButton';\n const radioHideStyle: React.CSSProperties | undefined = isButtonMode\n ? { width: 0, height: 0, overflow: 'hidden' }\n : undefined;\n\n return (\n <label className={getWrapperClass()} htmlFor={id} ref={labelRef}>\n <span className={aldRadioClass} style={radioHideStyle}>\n <input\n id={id}\n type=\"radio\"\n className=\"ald-radio-input\"\n // 同步派生的 checked 到原生 input,对齐 v2/antd 行为(仅有 class 不更新 input.checked)\n checked={!!checked}\n disabled={radioProps.disabled}\n value={props.value}\n onChange={(e) => {\n if (radioProps.disabled) return;\n if (!inGroup && !isControlled) {\n setInnerChecked(e.target.checked);\n }\n props.onChange?.(e);\n }}\n onClick={(e) => {\n props.onClick?.(e);\n\n if (inGroup && groupContext?.onChange) {\n // input事件的value会被toString,所以此处进行一个覆盖\n groupContext.onChange(props.value);\n }\n }}\n />\n <span className=\"ald-radio-inner\" />\n </span>\n {props.children && (\n <span className=\"ald-radio-desc\">{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;CACxC,MAAM,eAAe,aAAa;CAClC,MAAM,CAAC,cAAc,mBAAmB,SACtC,MAAM,kBAAkB,MACzB;AAED,KAAI,QACF,YAAW,WAAW,aAAa,YAAY,MAAM;CAKvD,MAAM,UAAU,UACZ,CAAC,WAAW,YAAY,aAAa,UAAU,MAAM,QACrD,CAAC,eACD,eACA,WAAW;CAGf,MAAM,gBAAgB,GAAG,aAAa;EACpC,qBAAqB;EACrB,sBAAsB,WAAW;EAClC,CAAC;CAGF,MAAM,wBAAwB;EAC5B,IAAI,aAAa;AACjB,MAAI,aAAa,SAAS,SACxB,KAAI,aAAa,oBAAoB,SACnC,cAAa;WACJ,aAAa,oBAAoB,SAC1C,cAAa;WACJ,aAAa,oBAAoB,SAC1C,cAAa;MAEb,cAAa;WAEN,aAAa,SAAS,aAC/B,KAAI,aAAa,oBAAoB,SACnC,cAAa;WACJ,aAAa,oBAAoB,SAC1C,cAAa;WACJ,aAAa,oBAAoB,SAC1C,cAAa;MAEb,cAAa;OAEV;AAEL,gBAAa;AACb,OAAI,MAAM,cACR,cAAa,aAAa;;AAG9B,SAAO,GAAG,mBAAmB,YAAY,MAAM,WAAW;GACxD,6BAA6B;GAC7B,8BAA8B,WAAW;GAC1C,CAAC;;CAMJ,MAAM,iBADJ,aAAa,SAAS,YAAY,aAAa,SAAS,eAEtD;EAAE,OAAO;EAAG,QAAQ;EAAG,UAAU;EAAU,GAC3C;AAEJ,QACE,qBAAC,SAAD;EAAO,WAAW,iBAAiB;EAAE,SAAS;EAAI,KAAK;YAAvD,CACE,qBAAC,QAAD;GAAM,WAAW;GAAe,OAAO;aAAvC,CACE,oBAAC,SAAD;IACM;IACJ,MAAK;IACL,WAAU;IAEV,SAAS,CAAC,CAAC;IACX,UAAU,WAAW;IACrB,OAAO,MAAM;IACb,WAAW,MAAM;AACf,SAAI,WAAW,SAAU;AACzB,SAAI,CAAC,WAAW,CAAC,aACf,iBAAgB,EAAE,OAAO,QAAQ;AAEnC,WAAM,WAAW,EAAE;;IAErB,UAAU,MAAM;AACd,WAAM,UAAU,EAAE;AAElB,SAAI,WAAW,cAAc,SAE3B,cAAa,SAAS,MAAM,MAAM;;IAGtC,CAAA,EACF,oBAAC,QAAD,EAAM,WAAU,mBAAoB,CAAA,CAC/B;MACN,MAAM,YACL,oBAAC,QAAD;GAAM,WAAU;aAAkB,MAAM;GAAgB,CAAA,CAEpD"}
|
|
@@ -44,4 +44,8 @@ export interface IRadioGroupProps {
|
|
|
44
44
|
*/
|
|
45
45
|
className?: string;
|
|
46
46
|
children?: ReactNode[] | ReactNode;
|
|
47
|
+
/** 透传到 RadioGroup 根容器的 data-testid,用于自动化测试定位 */
|
|
48
|
+
'data-testid'?: string;
|
|
49
|
+
/** 透传到 RadioGroup 根容器的 aria-label,用于可访问性与自动化测试定位 */
|
|
50
|
+
'aria-label'?: string;
|
|
47
51
|
}
|
|
@@ -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, allowOverlap, style, ...restProps } = props;
|
|
29
|
+
const { id, className, displayValues, onDisplayValuesChange, displayMenu, notFoundContent, onClear, width, mode, status: customStatus, onOptionSelect, onClick, size: customSize, borderLess = false, disabled, placeholder, loading = false, open, defaultOpen, onOpenChange, showSearch, innerSearchValue, setInnerSearchValue, allowClear, showArrow = true, prefix, suffixIcon, dropdownRender, overlayStyle, dropdownStyle, popupMatchSelectWidth = true, placement, popupClassName, allowOverlap, style, "data-testid": dataTestid, "aria-label": ariaLabel, ...restProps } = props;
|
|
30
30
|
const setClassNames = prefixCls("select");
|
|
31
31
|
const selectRef = useRef(null);
|
|
32
32
|
const widthStyle = getWidthStyle(width);
|
|
@@ -87,6 +87,7 @@ var BaseSelect = React$1.forwardRef((props, ref) => {
|
|
|
87
87
|
active: mergedOpen || focus,
|
|
88
88
|
borderless: borderLess,
|
|
89
89
|
disabled,
|
|
90
|
+
loading,
|
|
90
91
|
[`${mergedStatus}`]: !!mergedStatus,
|
|
91
92
|
"multiple-responsive": isResponsiveMode,
|
|
92
93
|
"multiple-default": isMultipleMode && !isResponsiveMode,
|
|
@@ -140,6 +141,8 @@ var BaseSelect = React$1.forwardRef((props, ref) => {
|
|
|
140
141
|
ref: selectRef,
|
|
141
142
|
id,
|
|
142
143
|
onClick: onSelectClick,
|
|
144
|
+
"data-testid": dataTestid,
|
|
145
|
+
"aria-label": ariaLabel,
|
|
143
146
|
children: [/* @__PURE__ */ jsx(RefSelectTrigger, {
|
|
144
147
|
...restProps,
|
|
145
148
|
open: !!mergedOpen,
|
|
@@ -190,6 +193,7 @@ var BaseSelect = React$1.forwardRef((props, ref) => {
|
|
|
190
193
|
showArrow,
|
|
191
194
|
allowClear,
|
|
192
195
|
disabled,
|
|
196
|
+
loading,
|
|
193
197
|
isHover,
|
|
194
198
|
onClear: () => {
|
|
195
199
|
onToggleOpen(false);
|
|
@@ -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 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
|
+
{"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 loading = false,\n\n // Open\n open,\n defaultOpen,\n onOpenChange,\n showSearch,\n innerSearchValue,\n setInnerSearchValue,\n // Icons\n allowClear,\n showArrow = true,\n prefix,\n suffixIcon,\n dropdownRender,\n overlayStyle,\n dropdownStyle,\n popupMatchSelectWidth = true,\n placement,\n popupClassName,\n allowOverlap,\n style,\n 'data-testid': dataTestid,\n 'aria-label': ariaLabel,\n ...restProps\n // Rest Props\n } = props;\n const setClassNames = prefixCls('select');\n const selectRef = useRef<HTMLDivElement>(null);\n const widthStyle = getWidthStyle(width);\n const dropdownRef = useRef<RefTriggerProps>(null);\n const 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 loading: loading,\n [`${mergedStatus}`]: !!mergedStatus,\n 'multiple-responsive': isResponsiveMode,\n 'multiple-default': isMultipleMode && !isResponsiveMode,\n // 仅 width:auto 生效:固定宽度下 -1 收纳态的收缩省略是预期行为,\n // 钳 min-width 反而会把固定宽撑破\n 'overflow-collapsed':\n overflowCollapsed && width === 'auto' && !_.isEmpty(displayValues),\n }),\n 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 data-testid={dataTestid}\n aria-label={ariaLabel}\n >\n <SelectTrigger\n {...restProps}\n open={!!mergedOpen}\n notFoundContent={notFoundContent}\n menu={showMenu}\n ref={dropdownRef}\n showSearch={showSearch}\n searchValue={innerSearchValue}\n setInnerSearchValue={setInnerSearchValue}\n popupMatchSelectWidth={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 loading={loading}\n isHover={isHover}\n onClear={() => {\n onToggleOpen(false);\n\n onDisplayValuesChange([], {\n type: 'clear',\n values: displayValues,\n });\n onClear?.();\n }}\n isActive={innerOpen}\n icon={suffixIcon}\n displayValues={displayValues}\n ></Suffix>\n </div>\n );\n },\n);\n\nexport default BaseSelect;\n"],"mappings":"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"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { DisplayValueType } from '../interface';
|
|
3
|
-
export default function Suffix({ showArrow, allowClear, isActive, isHover, icon, onClear, displayValues, disabled, }: {
|
|
3
|
+
export default function Suffix({ showArrow, allowClear, isActive, isHover, icon, onClear, displayValues, disabled, loading, }: {
|
|
4
4
|
showArrow?: boolean;
|
|
5
5
|
allowClear?: boolean;
|
|
6
6
|
isActive?: boolean;
|
|
7
7
|
isHover?: boolean;
|
|
8
8
|
disabled?: boolean;
|
|
9
|
+
loading?: boolean;
|
|
9
10
|
icon: React.ReactNode;
|
|
10
11
|
onClear?: () => void;
|
|
11
12
|
displayValues: DisplayValueType[];
|
|
@@ -1,11 +1,20 @@
|
|
|
1
|
-
import Memo from "../../Icon/components/
|
|
2
|
-
import Memo$1 from "../../Icon/components/
|
|
1
|
+
import Memo from "../../Icon/components/LoadingLine.js";
|
|
2
|
+
import Memo$1 from "../../Icon/components/ArrowDownRightFill.js";
|
|
3
|
+
import Memo$2 from "../../Icon/components/CloseCircleRightFill.js";
|
|
3
4
|
import prefixCls from "../../_utils/prefixCls.js";
|
|
4
5
|
import "react";
|
|
5
6
|
import { jsx } from "react/jsx-runtime";
|
|
6
7
|
//#region src/Select/components/Suffix.tsx
|
|
7
|
-
function Suffix({ showArrow, allowClear, isActive, isHover, icon, onClear, displayValues, disabled }) {
|
|
8
|
+
function Suffix({ showArrow, allowClear, isActive, isHover, icon, onClear, displayValues, disabled, loading }) {
|
|
8
9
|
const classNames = prefixCls("select");
|
|
10
|
+
if (loading) return /* @__PURE__ */ jsx("div", {
|
|
11
|
+
className: `${classNames("suffix", "loading")} beta-ald-select-suffix-loading`,
|
|
12
|
+
children: /* @__PURE__ */ jsx(Memo, {
|
|
13
|
+
className: "ald-loading-spin tw-animate-spin",
|
|
14
|
+
size: 16,
|
|
15
|
+
color: "#6B7280"
|
|
16
|
+
})
|
|
17
|
+
});
|
|
9
18
|
if ((isActive || isHover) && !disabled && allowClear && displayValues.length > 0) return /* @__PURE__ */ jsx("div", {
|
|
10
19
|
className: classNames("suffix", "clear"),
|
|
11
20
|
onClick: (event) => {
|
|
@@ -13,13 +22,13 @@ function Suffix({ showArrow, allowClear, isActive, isHover, icon, onClear, displ
|
|
|
13
22
|
event.preventDefault();
|
|
14
23
|
onClear?.();
|
|
15
24
|
},
|
|
16
|
-
children: /* @__PURE__ */ jsx(Memo$
|
|
25
|
+
children: /* @__PURE__ */ jsx(Memo$2, {
|
|
17
26
|
size: 16,
|
|
18
27
|
color: "#6B7280"
|
|
19
28
|
})
|
|
20
29
|
});
|
|
21
30
|
if (showArrow) {
|
|
22
|
-
const dropdownIcon = icon || /* @__PURE__ */ jsx(Memo, {
|
|
31
|
+
const dropdownIcon = icon || /* @__PURE__ */ jsx(Memo$1, {
|
|
23
32
|
color: "#6B7280",
|
|
24
33
|
size: 16
|
|
25
34
|
});
|
|
@@ -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 {
|
|
1
|
+
{"version":3,"file":"Suffix.js","names":[],"sources":["../../../src/Select/components/Suffix.tsx"],"sourcesContent":["import React from 'react';\nimport prefixCls from '../../_utils/prefixCls';\nimport {\n ArrowDownRightFill,\n CloseCircleRightFill,\n LoadingLine,\n} 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 loading,\n}: {\n showArrow?: boolean;\n allowClear?: boolean;\n isActive?: boolean;\n isHover?: boolean;\n disabled?: boolean;\n loading?: boolean;\n icon: React.ReactNode;\n onClear?: () => void;\n displayValues: DisplayValueType[];\n}) {\n const classNames = prefixCls('select');\n\n if (loading) {\n return (\n <div\n className={`${classNames(\n 'suffix',\n 'loading',\n )} beta-ald-select-suffix-loading`}\n >\n <LoadingLine\n className=\"ald-loading-spin tw-animate-spin\"\n size={16}\n color=\"#6B7280\"\n />\n </div>\n );\n }\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":";;;;;;;AASA,SAAwB,OAAO,EAC7B,WACA,YACA,UACA,SACA,MACA,SACA,eACA,UACA,WAWC;CACD,MAAM,aAAa,UAAU,SAAS;AAEtC,KAAI,QACF,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,WACZ,UACA,UACD,CAAC;YAEF,oBAAC,MAAD;GACE,WAAU;GACV,MAAM;GACN,OAAM;GACN,CAAA;EACE,CAAA;AAIV,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,QAAD;GAAoB,OAAM;GAAU,MAAM;GAAM,CAAA;AAIlD,SACE,oBAAC,OAAD;GAAK,WAAW,WAAW,UAAU,QAAQ,GAAG;aAC7C;GACG,CAAA;;AAIV,QAAO"}
|
|
@@ -59,6 +59,10 @@ export interface ISelectProps<ValueType = any, OptionType extends BaseOptionType
|
|
|
59
59
|
maxTagPlaceholder?: React.ReactNode | ((omittedValues: DisplayValueType[]) => React.ReactNode);
|
|
60
60
|
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
|
61
61
|
optionLabelProp?: string;
|
|
62
|
+
/** 透传到 select 根 DOM 的 data-testid,用于自动化测试定位 */
|
|
63
|
+
'data-testid'?: string;
|
|
64
|
+
/** 透传到 select 根 DOM 的 aria-label,用于可访问性与自动化测试定位 */
|
|
65
|
+
'aria-label'?: string;
|
|
62
66
|
}
|
|
63
67
|
export interface BaseOptionType {
|
|
64
68
|
disabled?: boolean;
|
package/dist/Slider/index.js
CHANGED
|
@@ -20,7 +20,7 @@ function SliderThumbWithTooltip({ tooltip, value, className }) {
|
|
|
20
20
|
});
|
|
21
21
|
}
|
|
22
22
|
function Slider(props) {
|
|
23
|
-
const { className, style, disabled, min = 0, max = 100, step = 1, range, vertical, marks, tooltip } = props;
|
|
23
|
+
const { className, style, disabled, min = 0, max = 100, step = 1, range, vertical, marks, included = true, tooltip } = props;
|
|
24
24
|
const [currentValues, setCurrentValues] = useState(() => {
|
|
25
25
|
if (range) return props.value || props.defaultValue || [min, max];
|
|
26
26
|
const v = props.value;
|
|
@@ -61,7 +61,7 @@ function Slider(props) {
|
|
|
61
61
|
children: [
|
|
62
62
|
/* @__PURE__ */ jsx(SliderPrimitive.Track, {
|
|
63
63
|
className: cn("tw-relative tw-grow tw-rounded-full tw-bg-[var(--interaction-neutral-subtle-normal)]", vertical ? "tw-w-1" : "tw-h-1"),
|
|
64
|
-
children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "tw-absolute tw-rounded-full tw-bg-[var(--interaction-default-normal)] hover:tw-bg-[var(--interaction-default-hover)]" })
|
|
64
|
+
children: included && /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "ald-slider-range tw-absolute tw-rounded-full tw-bg-[var(--interaction-default-normal)] hover:tw-bg-[var(--interaction-default-hover)]" })
|
|
65
65
|
}),
|
|
66
66
|
tooltip ? /* @__PURE__ */ jsx(SliderThumbWithTooltip, {
|
|
67
67
|
tooltip,
|
package/dist/Slider/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/Slider/index.tsx"],"sourcesContent":["import * as SliderPrimitive from '@radix-ui/react-slider';\nimport React, { useRef, useState } from 'react';\nimport { cn } from '../lib/utils';\n\ninterface SliderBaseProps {\n className?: string;\n style?: React.CSSProperties;\n disabled?: boolean;\n min?: number;\n max?: number;\n step?: number;\n vertical?: boolean;\n marks?: Record<\n number,\n React.ReactNode | { style?: React.CSSProperties; label?: React.ReactNode }\n >;\n included?: boolean;\n tooltip?: { open?: boolean; formatter?: (value?: number) => React.ReactNode };\n}\n\ninterface SliderSingleProps extends SliderBaseProps {\n range?: false;\n value?: number;\n defaultValue?: number;\n onChange?: (value: number) => void;\n onAfterChange?: (value: number) => void;\n}\n\ninterface SliderRangeProps extends SliderBaseProps {\n range: true;\n value?: [number, number];\n defaultValue?: [number, number];\n onChange?: (value: [number, number]) => void;\n onAfterChange?: (value: [number, number]) => void;\n}\n\nfunction SliderThumbWithTooltip({\n tooltip,\n value,\n className,\n}: {\n tooltip?: SliderBaseProps['tooltip'];\n value: number;\n className: string;\n}) {\n const [hovered, setHovered] = useState(false);\n const thumbRef = useRef<HTMLSpanElement>(null);\n\n const showTooltip = tooltip?.open !== undefined ? tooltip.open : hovered;\n const formattedValue = tooltip?.formatter ? tooltip.formatter(value) : value;\n\n return (\n <SliderPrimitive.Thumb\n ref={thumbRef}\n className={cn('tw-relative', className)}\n onPointerEnter={() => setHovered(true)}\n onPointerLeave={() => setHovered(false)}\n >\n {tooltip && showTooltip && (\n <div className=\"tw-absolute tw-bottom-full tw-left-1/2 tw-mb-2 -tw-translate-x-1/2 tw-whitespace-nowrap tw-rounded-r-50 tw-bg-[var(--alias-colors-bg-tooltip)] tw-px-2 tw-py-1 tw-text-xs tw-text-[var(--alias-colors-text-inverse-default)]\">\n {formattedValue}\n </div>\n )}\n </SliderPrimitive.Thumb>\n );\n}\n\nfunction Slider(props: SliderSingleProps | SliderRangeProps) {\n const {\n className,\n style,\n disabled,\n min = 0,\n max = 100,\n step = 1,\n range,\n vertical,\n marks,\n tooltip,\n } = props;\n\n const [currentValues, setCurrentValues] = useState<number[]>(() => {\n if (range) {\n return (\n (props as SliderRangeProps).value ||\n (props as SliderRangeProps).defaultValue || [min, max]\n );\n }\n const v = (props as SliderSingleProps).value;\n if (v !== undefined) return [v];\n return [(props as SliderSingleProps).defaultValue ?? min];\n });\n\n const handleValueChange = (values: number[]) => {\n setCurrentValues(values);\n if (range && 'onChange' in props && props.onChange) {\n (props.onChange as (v: [number, number]) => void)([values[0], values[1]]);\n } else if (!range && 'onChange' in props && props.onChange) {\n (props.onChange as (v: number) => void)(values[0]);\n }\n };\n\n const handleValueCommit = (values: number[]) => {\n if (range && 'onAfterChange' in props && props.onAfterChange) {\n (props.onAfterChange as (v: [number, number]) => void)([\n values[0],\n values[1],\n ]);\n } else if (!range && 'onAfterChange' in props && props.onAfterChange) {\n (props.onAfterChange as (v: number) => void)(values[0]);\n }\n };\n\n const defaultVal = range\n ? (props as SliderRangeProps).defaultValue || [min, max]\n : [(props as SliderSingleProps).defaultValue ?? min];\n\n const controlledVal = range\n ? (props as SliderRangeProps).value\n : (props as SliderSingleProps).value !== undefined\n ? [(props as SliderSingleProps).value!]\n : undefined;\n\n // Sync controlled values — use stringified key to detect content changes\n const controlledValKey = controlledVal ? controlledVal.join(',') : undefined;\n React.useEffect(() => {\n if (controlledValKey !== undefined) {\n setCurrentValues(controlledValKey.split(',').map(Number));\n }\n }, [controlledValKey]);\n\n const thumbClass =\n 'tw-block tw-size-[10px] tw-cursor-pointer tw-rounded-full tw-bg-[var(--interaction-default-normal)] tw-shadow-[0_0_0_1px_var(--interaction-default-normal)] hover:tw-shadow-[0_0_0_3px_var(--interaction-default-hover)] focus-visible:tw-shadow-[0_0_0_3px_var(--interaction-default-active)] focus-visible:tw-outline-none';\n\n const markEntries = marks ? Object.entries(marks) : [];\n\n return (\n <div className={cn('tw-relative', vertical ? 'tw-h-full' : 'tw-w-full')}>\n <SliderPrimitive.Root\n className={cn(\n 'ald-slider tw-relative tw-flex tw-touch-none tw-select-none tw-items-center',\n vertical ? 'tw-h-full tw-w-5 tw-flex-col' : 'tw-h-5 tw-w-full',\n disabled && 'tw-pointer-events-none tw-opacity-50',\n className,\n )}\n style={style}\n min={min}\n max={max}\n step={step}\n disabled={disabled}\n orientation={vertical ? 'vertical' : 'horizontal'}\n defaultValue={defaultVal}\n value={controlledVal}\n onValueChange={handleValueChange}\n onValueCommit={handleValueCommit}\n >\n <SliderPrimitive.Track\n className={cn(\n 'tw-relative tw-grow tw-rounded-full tw-bg-[var(--interaction-neutral-subtle-normal)]',\n vertical ? 'tw-w-1' : 'tw-h-1',\n )}\n >\n <SliderPrimitive.Range className=\"tw-absolute tw-rounded-full tw-bg-[var(--interaction-default-normal)] hover:tw-bg-[var(--interaction-default-hover)]\" />\n </SliderPrimitive.Track>\n {tooltip ? (\n <SliderThumbWithTooltip\n tooltip={tooltip}\n value={currentValues[0] ?? min}\n className={thumbClass}\n />\n ) : (\n <SliderPrimitive.Thumb className={thumbClass} />\n )}\n {range &&\n (tooltip ? (\n <SliderThumbWithTooltip\n tooltip={tooltip}\n value={currentValues[1] ?? max}\n className={thumbClass}\n />\n ) : (\n <SliderPrimitive.Thumb className={thumbClass} />\n ))}\n </SliderPrimitive.Root>\n {markEntries.length > 0 && (\n <div className=\"ald-slider-marks tw-relative tw-mt-2 tw-w-full\">\n {markEntries.map(([key, mark]) => {\n const numKey = Number(key);\n const percent = ((numKey - min) / (max - min)) * 100;\n const isNode =\n typeof mark === 'object' &&\n mark !== null &&\n 'label' in (mark as Record<string, unknown>);\n const label = isNode\n ? (mark as { label?: React.ReactNode }).label\n : (mark as React.ReactNode);\n const markStyle = isNode\n ? (mark as { style?: React.CSSProperties }).style\n : undefined;\n\n return (\n <span\n key={key}\n className=\"ald-slider-mark tw-absolute tw-text-xs tw-text-[var(--content-secondary)]\"\n style={{\n left: `${percent}%`,\n transform: 'translateX(-50%)',\n ...markStyle,\n }}\n >\n {label}\n </span>\n );\n })}\n </div>\n )}\n </div>\n );\n}\n\nexport default Slider;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/Slider/index.tsx"],"sourcesContent":["import * as SliderPrimitive from '@radix-ui/react-slider';\nimport React, { useRef, useState } from 'react';\nimport { cn } from '../lib/utils';\n\ninterface SliderBaseProps {\n className?: string;\n style?: React.CSSProperties;\n disabled?: boolean;\n min?: number;\n max?: number;\n step?: number;\n vertical?: boolean;\n marks?: Record<\n number,\n React.ReactNode | { style?: React.CSSProperties; label?: React.ReactNode }\n >;\n included?: boolean;\n tooltip?: { open?: boolean; formatter?: (value?: number) => React.ReactNode };\n}\n\ninterface SliderSingleProps extends SliderBaseProps {\n range?: false;\n value?: number;\n defaultValue?: number;\n onChange?: (value: number) => void;\n onAfterChange?: (value: number) => void;\n}\n\ninterface SliderRangeProps extends SliderBaseProps {\n range: true;\n value?: [number, number];\n defaultValue?: [number, number];\n onChange?: (value: [number, number]) => void;\n onAfterChange?: (value: [number, number]) => void;\n}\n\nfunction SliderThumbWithTooltip({\n tooltip,\n value,\n className,\n}: {\n tooltip?: SliderBaseProps['tooltip'];\n value: number;\n className: string;\n}) {\n const [hovered, setHovered] = useState(false);\n const thumbRef = useRef<HTMLSpanElement>(null);\n\n const showTooltip = tooltip?.open !== undefined ? tooltip.open : hovered;\n const formattedValue = tooltip?.formatter ? tooltip.formatter(value) : value;\n\n return (\n <SliderPrimitive.Thumb\n ref={thumbRef}\n className={cn('tw-relative', className)}\n onPointerEnter={() => setHovered(true)}\n onPointerLeave={() => setHovered(false)}\n >\n {tooltip && showTooltip && (\n <div className=\"tw-absolute tw-bottom-full tw-left-1/2 tw-mb-2 -tw-translate-x-1/2 tw-whitespace-nowrap tw-rounded-r-50 tw-bg-[var(--alias-colors-bg-tooltip)] tw-px-2 tw-py-1 tw-text-xs tw-text-[var(--alias-colors-text-inverse-default)]\">\n {formattedValue}\n </div>\n )}\n </SliderPrimitive.Thumb>\n );\n}\n\nfunction Slider(props: SliderSingleProps | SliderRangeProps) {\n const {\n className,\n style,\n disabled,\n min = 0,\n max = 100,\n step = 1,\n range,\n vertical,\n marks,\n included = true,\n tooltip,\n } = props;\n\n const [currentValues, setCurrentValues] = useState<number[]>(() => {\n if (range) {\n return (\n (props as SliderRangeProps).value ||\n (props as SliderRangeProps).defaultValue || [min, max]\n );\n }\n const v = (props as SliderSingleProps).value;\n if (v !== undefined) return [v];\n return [(props as SliderSingleProps).defaultValue ?? min];\n });\n\n const handleValueChange = (values: number[]) => {\n setCurrentValues(values);\n if (range && 'onChange' in props && props.onChange) {\n (props.onChange as (v: [number, number]) => void)([values[0], values[1]]);\n } else if (!range && 'onChange' in props && props.onChange) {\n (props.onChange as (v: number) => void)(values[0]);\n }\n };\n\n const handleValueCommit = (values: number[]) => {\n if (range && 'onAfterChange' in props && props.onAfterChange) {\n (props.onAfterChange as (v: [number, number]) => void)([\n values[0],\n values[1],\n ]);\n } else if (!range && 'onAfterChange' in props && props.onAfterChange) {\n (props.onAfterChange as (v: number) => void)(values[0]);\n }\n };\n\n const defaultVal = range\n ? (props as SliderRangeProps).defaultValue || [min, max]\n : [(props as SliderSingleProps).defaultValue ?? min];\n\n const controlledVal = range\n ? (props as SliderRangeProps).value\n : (props as SliderSingleProps).value !== undefined\n ? [(props as SliderSingleProps).value!]\n : undefined;\n\n // Sync controlled values — use stringified key to detect content changes\n const controlledValKey = controlledVal ? controlledVal.join(',') : undefined;\n React.useEffect(() => {\n if (controlledValKey !== undefined) {\n setCurrentValues(controlledValKey.split(',').map(Number));\n }\n }, [controlledValKey]);\n\n const thumbClass =\n 'tw-block tw-size-[10px] tw-cursor-pointer tw-rounded-full tw-bg-[var(--interaction-default-normal)] tw-shadow-[0_0_0_1px_var(--interaction-default-normal)] hover:tw-shadow-[0_0_0_3px_var(--interaction-default-hover)] focus-visible:tw-shadow-[0_0_0_3px_var(--interaction-default-active)] focus-visible:tw-outline-none';\n\n const markEntries = marks ? Object.entries(marks) : [];\n\n return (\n <div className={cn('tw-relative', vertical ? 'tw-h-full' : 'tw-w-full')}>\n <SliderPrimitive.Root\n className={cn(\n 'ald-slider tw-relative tw-flex tw-touch-none tw-select-none tw-items-center',\n vertical ? 'tw-h-full tw-w-5 tw-flex-col' : 'tw-h-5 tw-w-full',\n disabled && 'tw-pointer-events-none tw-opacity-50',\n className,\n )}\n style={style}\n min={min}\n max={max}\n step={step}\n disabled={disabled}\n orientation={vertical ? 'vertical' : 'horizontal'}\n defaultValue={defaultVal}\n value={controlledVal}\n onValueChange={handleValueChange}\n onValueCommit={handleValueCommit}\n >\n <SliderPrimitive.Track\n className={cn(\n 'tw-relative tw-grow tw-rounded-full tw-bg-[var(--interaction-neutral-subtle-normal)]',\n vertical ? 'tw-w-1' : 'tw-h-1',\n )}\n >\n {included && (\n <SliderPrimitive.Range className=\"ald-slider-range tw-absolute tw-rounded-full tw-bg-[var(--interaction-default-normal)] hover:tw-bg-[var(--interaction-default-hover)]\" />\n )}\n </SliderPrimitive.Track>\n {tooltip ? (\n <SliderThumbWithTooltip\n tooltip={tooltip}\n value={currentValues[0] ?? min}\n className={thumbClass}\n />\n ) : (\n <SliderPrimitive.Thumb className={thumbClass} />\n )}\n {range &&\n (tooltip ? (\n <SliderThumbWithTooltip\n tooltip={tooltip}\n value={currentValues[1] ?? max}\n className={thumbClass}\n />\n ) : (\n <SliderPrimitive.Thumb className={thumbClass} />\n ))}\n </SliderPrimitive.Root>\n {markEntries.length > 0 && (\n <div className=\"ald-slider-marks tw-relative tw-mt-2 tw-w-full\">\n {markEntries.map(([key, mark]) => {\n const numKey = Number(key);\n const percent = ((numKey - min) / (max - min)) * 100;\n const isNode =\n typeof mark === 'object' &&\n mark !== null &&\n 'label' in (mark as Record<string, unknown>);\n const label = isNode\n ? (mark as { label?: React.ReactNode }).label\n : (mark as React.ReactNode);\n const markStyle = isNode\n ? (mark as { style?: React.CSSProperties }).style\n : undefined;\n\n return (\n <span\n key={key}\n className=\"ald-slider-mark tw-absolute tw-text-xs tw-text-[var(--content-secondary)]\"\n style={{\n left: `${percent}%`,\n transform: 'translateX(-50%)',\n ...markStyle,\n }}\n >\n {label}\n </span>\n );\n })}\n </div>\n )}\n </div>\n );\n}\n\nexport default Slider;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Steps/components/Step/index.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { ProcessIcon } from '../ProcessIcon';\n\nexport type TStatus = 'wait' | 'process' | 'finish' | 'error';\n\nexport interface IStepProps {\n description?: ReactNode;\n status?: TStatus;\n title?: ReactNode;\n}\n\nexport function Step(props: IStepProps) {\n const { status } = props;\n return (\n <div className=\"ald-step\">\n <div className=\"ald-step-icon\">\n <ProcessIcon type={status || 'wait'} />\n </div>\n {props.title && <div className=\"ald-step-title\">{props.title}</div>}\n {props.description && (\n <div className=\"ald-step-description\">{props.description}</div>\n )}\n </div>\n );\n}\n"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Steps/components/Step/index.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { ProcessIcon } from '../ProcessIcon';\n\nexport type TStatus = 'wait' | 'process' | 'finish' | 'error';\n\nexport interface IStepProps {\n description?: ReactNode;\n disabled?: boolean;\n status?: TStatus;\n title?: ReactNode;\n}\n\nexport function Step(props: IStepProps) {\n const { status } = props;\n return (\n <div className=\"ald-step\">\n <div className=\"ald-step-icon\">\n <ProcessIcon type={status || 'wait'} />\n </div>\n {props.title && <div className=\"ald-step-title\">{props.title}</div>}\n {props.description && (\n <div className=\"ald-step-description\">{props.description}</div>\n )}\n </div>\n );\n}\n"],"mappings":";;;;AAYA,SAAgB,KAAK,OAAmB;CACtC,MAAM,EAAE,WAAW;AACnB,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,aAAD,EAAa,MAAM,UAAU,QAAU,CAAA;IACnC,CAAA;GACL,MAAM,SAAS,oBAAC,OAAD;IAAK,WAAU;cAAkB,MAAM;IAAY,CAAA;GAClE,MAAM,eACL,oBAAC,OAAD;IAAK,WAAU;cAAwB,MAAM;IAAkB,CAAA;GAE7D"}
|
package/dist/Steps/index.d.ts
CHANGED
|
@@ -19,7 +19,7 @@ export interface IStepsProps {
|
|
|
19
19
|
items?: IStepItem[];
|
|
20
20
|
children?: ReactElement<IStepProps>[] | ReactElement<IStepProps>;
|
|
21
21
|
}
|
|
22
|
-
declare function Steps({ className, current, direction, status, items, children, }: IStepsProps): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
declare function Steps({ className, current: controlledCurrent, direction, defaultCurrent, status, items, children, }: IStepsProps): import("react/jsx-runtime").JSX.Element;
|
|
23
23
|
declare namespace Steps {
|
|
24
24
|
var Step: typeof import("./components/Step").Step;
|
|
25
25
|
}
|
package/dist/Steps/index.js
CHANGED
|
@@ -9,10 +9,12 @@ function getStepStatus(index, current, globalStatus) {
|
|
|
9
9
|
if (index === current) return globalStatus || "process";
|
|
10
10
|
return "wait";
|
|
11
11
|
}
|
|
12
|
-
function Steps({ className, current
|
|
12
|
+
function Steps({ className, current: controlledCurrent, direction = "horizontal", defaultCurrent = 0, status, items, children }) {
|
|
13
|
+
const current = controlledCurrent ?? defaultCurrent;
|
|
13
14
|
const resolvedItems = items || React.Children.toArray(children).filter(React.isValidElement).map((child) => ({
|
|
14
15
|
title: child.props.title,
|
|
15
16
|
description: child.props.description,
|
|
17
|
+
disabled: child.props.disabled,
|
|
16
18
|
status: child.props.status,
|
|
17
19
|
icon: child.props.icon
|
|
18
20
|
}));
|
|
@@ -22,7 +24,7 @@ function Steps({ className, current = 0, direction = "horizontal", status, items
|
|
|
22
24
|
const stepStatus = item.status || getStepStatus(index, current, status);
|
|
23
25
|
const isLast = index === resolvedItems.length - 1;
|
|
24
26
|
return /* @__PURE__ */ jsx("div", {
|
|
25
|
-
className: cn("ald-steps-item tw-flex", direction === "horizontal" ? "tw-flex-1 tw-flex-col tw-items-center tw-text-center" : "tw-flex-row tw-gap-3 tw-py-2", `ald-steps-item-${stepStatus}
|
|
27
|
+
className: cn("ald-steps-item tw-flex", direction === "horizontal" ? "tw-flex-1 tw-flex-col tw-items-center tw-text-center" : "tw-flex-row tw-gap-3 tw-py-2", `ald-steps-item-${stepStatus}`, item.disabled && "ald-steps-item-disabled tw-pointer-events-none tw-opacity-50"),
|
|
26
28
|
children: direction === "horizontal" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
|
|
27
29
|
className: "tw-flex tw-w-full tw-items-center",
|
|
28
30
|
children: [
|
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
|
|
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: controlledCurrent,\n direction = 'horizontal',\n defaultCurrent = 0,\n status,\n items,\n children,\n}: IStepsProps) {\n const current = controlledCurrent ?? defaultCurrent;\n // Support children-based API: convert children to items\n const resolvedItems: IStepItem[] =\n items ||\n React.Children.toArray(children)\n .filter(React.isValidElement)\n .map((child: any) => ({\n title: child.props.title,\n description: child.props.description,\n disabled: child.props.disabled,\n status: child.props.status,\n icon: child.props.icon,\n }));\n\n return (\n <div\n className={cn(\n 'ald-steps 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 item.disabled &&\n 'ald-steps-item-disabled tw-pointer-events-none tw-opacity-50',\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,SAAS,mBACT,YAAY,cACZ,iBAAiB,GACjB,QACA,OACA,YACc;CACd,MAAM,UAAU,qBAAqB;CAErC,MAAM,gBACJ,SACA,MAAM,SAAS,QAAQ,SAAS,CAC7B,OAAO,MAAM,eAAe,CAC5B,KAAK,WAAgB;EACpB,OAAO,MAAM,MAAM;EACnB,aAAa,MAAM,MAAM;EACzB,UAAU,MAAM,MAAM;EACtB,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,cAClB,KAAK,YACH,+DACH;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,EA1HC,MA0HD;IAER;EACE,CAAA;;AAIV,MAAM,OAAO"}
|
package/dist/Switch/index.d.ts
CHANGED
|
@@ -12,6 +12,10 @@ export interface ISwitchProps {
|
|
|
12
12
|
onClick?: SwitchChangeEventHandler;
|
|
13
13
|
onChange?: SwitchChangeEventHandler;
|
|
14
14
|
children?: React.ReactNode;
|
|
15
|
+
/** 透传到内部 switch 按钮元素的 data-testid,用于自动化测试定位 */
|
|
16
|
+
'data-testid'?: string;
|
|
17
|
+
/** 透传到内部 switch 按钮元素的 aria-label,用于可访问性与自动化测试定位 */
|
|
18
|
+
'aria-label'?: string;
|
|
15
19
|
}
|
|
16
20
|
declare const Switch: React.FC<ISwitchProps>;
|
|
17
21
|
export default Switch;
|
package/dist/Switch/index.js
CHANGED
|
@@ -21,7 +21,7 @@ var switchSizeConfig = {
|
|
|
21
21
|
thumbSize: 8
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
|
-
var Switch = ({ className = "", disabled: customDisabled, loading = false, size: customSize, checked, defaultChecked, onChange, onClick, children }) => {
|
|
24
|
+
var Switch = ({ className = "", disabled: customDisabled, loading = false, size: customSize, checked, defaultChecked, onChange, onClick, children, "data-testid": dataTestid, "aria-label": ariaLabel }) => {
|
|
25
25
|
const contentSize = useContext(SizeContext);
|
|
26
26
|
const size = customSize || contentSize || "middle";
|
|
27
27
|
const [userChecked, setUserChecked] = useState(typeof checked === "undefined" ? defaultChecked : checked);
|
|
@@ -49,6 +49,8 @@ var Switch = ({ className = "", disabled: customDisabled, loading = false, size:
|
|
|
49
49
|
type: "button",
|
|
50
50
|
role: "switch",
|
|
51
51
|
"aria-checked": !!userChecked,
|
|
52
|
+
"data-testid": dataTestid,
|
|
53
|
+
"aria-label": ariaLabel,
|
|
52
54
|
disabled: currentDisabled,
|
|
53
55
|
className: cn("ald-switch-btn tw-relative tw-inline-flex tw-cursor-pointer tw-items-center tw-rounded-full tw-border-0 tw-p-0 tw-transition-colors tw-duration-200", userChecked ? "tw-bg-[var(--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"),
|
|
54
56
|
style: {
|
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 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":";;;;;;
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/Switch/index.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState } from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { cn } from '../lib/utils';\n\nexport type SwitchChangeEventHandler = (\n checked: boolean,\n event: React.MouseEvent<HTMLButtonElement>,\n) => void;\nexport type SwitchClickEventHandler = SwitchChangeEventHandler;\nexport type SwitchSize = 'large' | 'middle' | 'small';\n\nexport interface ISwitchProps {\n className?: string;\n checked?: boolean;\n defaultChecked?: boolean;\n disabled?: boolean;\n loading?: boolean;\n size?: SwitchSize;\n onClick?: SwitchChangeEventHandler;\n onChange?: SwitchChangeEventHandler;\n children?: React.ReactNode;\n /** 透传到内部 switch 按钮元素的 data-testid,用于自动化测试定位 */\n 'data-testid'?: string;\n /** 透传到内部 switch 按钮元素的 aria-label,用于可访问性与自动化测试定位 */\n 'aria-label'?: string;\n}\n\nconst switchSizeConfig: Record<\n SwitchSize,\n {\n trackW: number;\n trackH: number;\n thumbSize: number;\n }\n> = {\n large: {\n trackW: 36,\n trackH: 20,\n thumbSize: 16,\n },\n middle: {\n trackW: 28,\n trackH: 16,\n thumbSize: 12,\n },\n small: {\n trackW: 22,\n trackH: 12,\n thumbSize: 8,\n },\n};\n\nconst Switch: React.FC<ISwitchProps> = ({\n className = '',\n disabled: customDisabled,\n loading = false,\n size: customSize,\n checked,\n defaultChecked,\n onChange,\n onClick,\n children,\n 'data-testid': dataTestid,\n 'aria-label': ariaLabel,\n}) => {\n const contentSize = useContext(SizeContext);\n const size = customSize || contentSize || 'middle';\n\n const [userChecked, setUserChecked] = useState(\n typeof checked === 'undefined' ? defaultChecked : checked,\n );\n\n const disabled = useContext(DisabledContext);\n const mergedDisabled = customDisabled ?? disabled;\n\n const currentDisabled = loading ? true : mergedDisabled;\n\n useEffect(() => {\n if (typeof checked === 'boolean') {\n setUserChecked(checked);\n }\n }, [checked]);\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (currentDisabled) return;\n const newChecked = !userChecked;\n if (checked === undefined) {\n setUserChecked(newChecked);\n }\n onChange?.(newChecked, e);\n onClick?.(newChecked, e);\n };\n\n const { trackW, trackH, thumbSize } = switchSizeConfig[size];\n const thumbOffset = 2;\n const thumbTranslate = trackW - thumbSize - thumbOffset * 2;\n\n return (\n <span\n className={cn(\n className,\n 'ald-switch tw-inline-flex tw-items-center tw-gap-1.5 tw-text-[0]',\n `ald-switch-${size}`,\n currentDisabled && 'tw-pointer-events-none tw-cursor-default',\n {\n 'ald-switch-disabled': currentDisabled,\n 'ald-switch-checked': userChecked,\n },\n )}\n >\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={!!userChecked}\n data-testid={dataTestid}\n aria-label={ariaLabel}\n disabled={currentDisabled}\n className={cn(\n 'ald-switch-btn tw-relative tw-inline-flex tw-cursor-pointer tw-items-center tw-rounded-full tw-border-0 tw-p-0 tw-transition-colors tw-duration-200',\n userChecked\n ? 'tw-bg-[var(--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":";;;;;;AA4BA,IAAM,mBAOF;CACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACD,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACD,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACF;AAED,IAAM,UAAkC,EACtC,YAAY,IACZ,UAAU,gBACV,UAAU,OACV,MAAM,YACN,SACA,gBACA,UACA,SACA,UACA,eAAe,YACf,cAAc,gBACV;CACJ,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,OAAO,cAAc,eAAe;CAE1C,MAAM,CAAC,aAAa,kBAAkB,SACpC,OAAO,YAAY,cAAc,iBAAiB,QACnD;CAED,MAAM,WAAW,WAAW,gBAAgB;CAG5C,MAAM,kBAAkB,UAAU,OAFX,kBAAkB;AAIzC,iBAAgB;AACd,MAAI,OAAO,YAAY,UACrB,gBAAe,QAAQ;IAExB,CAAC,QAAQ,CAAC;CAEb,MAAM,eAAe,MAA2C;AAC9D,MAAI,gBAAiB;EACrB,MAAM,aAAa,CAAC;AACpB,MAAI,YAAY,OACd,gBAAe,WAAW;AAE5B,aAAW,YAAY,EAAE;AACzB,YAAU,YAAY,EAAE;;CAG1B,MAAM,EAAE,QAAQ,QAAQ,cAAc,iBAAiB;CACvD,MAAM,cAAc;CACpB,MAAM,iBAAiB,SAAS,YAAY,cAAc;AAE1D,QACE,qBAAC,QAAD;EACE,WAAW,GACT,WACA,oEACA,cAAc,QACd,mBAAmB,4CACnB;GACE,uBAAuB;GACvB,sBAAsB;GACvB,CACF;YAVH,CAYE,oBAAC,UAAD;GACE,MAAK;GACL,MAAK;GACL,gBAAc,CAAC,CAAC;GAChB,eAAa;GACb,cAAY;GACZ,UAAU;GACV,WAAW,GACT,uJACA,cACI,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"}
|