@aloudata/aloudata-design 3.0.0-beta.14 → 3.0.0-beta.15
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/Badge/index.js +4 -4
- package/dist/Badge/index.js.map +1 -1
- package/dist/MemberPicker/components/Panel.js +13 -14
- package/dist/MemberPicker/components/Panel.js.map +1 -1
- package/dist/MemberPicker/index.js +6 -3
- package/dist/MemberPicker/index.js.map +1 -1
- package/dist/Popover/index.js +3 -2
- package/dist/Popover/index.js.map +1 -1
- package/dist/Select/BaseSelect.js +2 -1
- package/dist/Select/BaseSelect.js.map +1 -1
- package/dist/Select/interface.d.ts +4 -0
- package/dist/Tree/Tree2.js +1 -1
- package/dist/Tree/Tree2.js.map +1 -1
- package/dist/aloudata-design.css +1 -1
- package/package.json +1 -1
package/dist/Badge/index.js
CHANGED
|
@@ -13,8 +13,8 @@ var STATUS_DOT_COLORS = {
|
|
|
13
13
|
var badgeVariants = cva("ald-badge tw-inline-flex tw-cursor-default tw-items-center tw-justify-center tw-rounded-[99px]", {
|
|
14
14
|
variants: {
|
|
15
15
|
size: {
|
|
16
|
-
default: "tw-h-[var(--3xs)] tw-min-w-[var(--3xs)] tw-
|
|
17
|
-
large: "ald-badge-large tw-h-[var(--2xs)] tw-min-w-[var(--2xs)] tw-
|
|
16
|
+
default: "tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-h-[var(--3xs)] tw-min-w-[var(--3xs)] tw-gap-[var(--component-gap-xs)] tw-px-[var(--component-padding-xs)] tw-text-xs tw-font-normal tw-leading-4",
|
|
17
|
+
large: "ald-badge-large tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-h-[var(--2xs)] tw-min-w-[var(--2xs)] tw-gap-[var(--component-gap-xs)] tw-px-[var(--component-padding-sm)] tw-text-sm tw-font-normal tw-leading-5"
|
|
18
18
|
},
|
|
19
19
|
status: {
|
|
20
20
|
default: "ald-badge-default tw-bg-[var(--non-semantic-background-grey-muted)] tw-text-[var(--non-semantic-content-grey-primary)]",
|
|
@@ -38,7 +38,7 @@ function Badge(props) {
|
|
|
38
38
|
const { count, status = "default", size, className, style, onClick, ...rest } = props;
|
|
39
39
|
if (count === "" || count === void 0) return /* @__PURE__ */ jsx("div", {
|
|
40
40
|
...rest,
|
|
41
|
-
className: cn("ald-badge ald-badge-dot tw-flex tw-items-start tw-rounded-full
|
|
41
|
+
className: cn("ald-badge ald-badge-dot tw-flex tw-aspect-square tw-items-start tw-rounded-full", STATUS_DOT_COLORS[status], typeof onClick === "function" && "tw-cursor-pointer", className),
|
|
42
42
|
style: {
|
|
43
43
|
width: 8,
|
|
44
44
|
height: 8,
|
|
@@ -47,7 +47,7 @@ function Badge(props) {
|
|
|
47
47
|
},
|
|
48
48
|
onClick
|
|
49
49
|
});
|
|
50
|
-
const isNumeric = typeof count === "number" || typeof count === "string" && /^[
|
|
50
|
+
const isNumeric = typeof count === "number" || typeof count === "string" && /^[+-]?\d+$/.test(count.trim());
|
|
51
51
|
return /* @__PURE__ */ jsx("div", {
|
|
52
52
|
...rest,
|
|
53
53
|
className: cn(badgeVariants({
|
package/dist/Badge/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/Badge/index.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface BadgeProps {\n /**\n * 展示的文本内容\n */\n count: string | number;\n /**\n * 状态\n */\n status?: 'success' | 'error' | 'default' | 'info' | 'warning';\n /**\n * 大小\n */\n size?: 'default' | 'large';\n className?: string;\n style?: React.CSSProperties;\n onClick?: React.MouseEventHandler;\n}\n\nconst STATUS_DOT_COLORS: Record<string, string> = {\n default: 'tw-bg-[var(--content-secondary)]',\n success: 'tw-bg-[var(--content-positive-secondary)]',\n error: 'tw-bg-[var(--content-negative-secondary)]',\n info: 'tw-bg-[var(--content-informative-secondary)]',\n warning: 'tw-bg-[var(--content-warning-secondary)]',\n};\n\nconst badgeVariants = cva(\n 'ald-badge tw-inline-flex tw-cursor-default tw-items-center tw-justify-center tw-rounded-[99px]',\n {\n variants: {\n size: {\n default:\n 'tw-h-[var(--3xs)] tw-min-w-[var(--3xs)] tw-
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/Badge/index.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface BadgeProps {\n /**\n * 展示的文本内容\n */\n count: string | number;\n /**\n * 状态\n */\n status?: 'success' | 'error' | 'default' | 'info' | 'warning';\n /**\n * 大小\n */\n size?: 'default' | 'large';\n className?: string;\n style?: React.CSSProperties;\n onClick?: React.MouseEventHandler;\n}\n\nconst STATUS_DOT_COLORS: Record<string, string> = {\n default: 'tw-bg-[var(--content-secondary)]',\n success: 'tw-bg-[var(--content-positive-secondary)]',\n error: 'tw-bg-[var(--content-negative-secondary)]',\n info: 'tw-bg-[var(--content-informative-secondary)]',\n warning: 'tw-bg-[var(--content-warning-secondary)]',\n};\n\nconst badgeVariants = cva(\n 'ald-badge tw-inline-flex tw-cursor-default tw-items-center tw-justify-center tw-rounded-[99px]',\n {\n variants: {\n size: {\n default:\n 'tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-h-[var(--3xs)] tw-min-w-[var(--3xs)] tw-gap-[var(--component-gap-xs)] tw-px-[var(--component-padding-xs)] tw-text-xs tw-font-normal tw-leading-4',\n large:\n 'ald-badge-large tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-h-[var(--2xs)] tw-min-w-[var(--2xs)] tw-gap-[var(--component-gap-xs)] tw-px-[var(--component-padding-sm)] tw-text-sm tw-font-normal tw-leading-5',\n },\n status: {\n default:\n 'ald-badge-default tw-bg-[var(--non-semantic-background-grey-muted)] tw-text-[var(--non-semantic-content-grey-primary)]',\n success:\n 'ald-badge-success tw-bg-[var(--non-semantic-background-green-muted)] tw-text-[var(--non-semantic-content-green-primary)]',\n error:\n 'ald-badge-error tw-bg-[var(--non-semantic-background-red-muted)] tw-text-[var(--non-semantic-content-red-primary)]',\n info: 'ald-badge-info tw-bg-[var(--non-semantic-background-blue-muted)] tw-text-[var(--non-semantic-content-blue-primary)]',\n warning:\n 'ald-badge-warning tw-bg-[var(--non-semantic-background-orange-muted)] tw-text-[var(--non-semantic-content-orange-primary)]',\n },\n clickable: {\n true: 'ald-badge-clickable tw-cursor-pointer',\n false: '',\n },\n },\n defaultVariants: {\n size: 'default',\n status: 'default',\n clickable: false,\n },\n },\n);\n\nexport default function Badge(props: BadgeProps) {\n const {\n count,\n status = 'default',\n size,\n className,\n style,\n onClick,\n ...rest\n } = props;\n\n const isDot = count === '' || count === undefined;\n\n if (isDot) {\n return (\n <div\n {...rest}\n className={cn(\n 'ald-badge ald-badge-dot tw-flex tw-aspect-square tw-items-start tw-rounded-full',\n STATUS_DOT_COLORS[status],\n typeof onClick === 'function' && 'tw-cursor-pointer',\n className,\n )}\n style={{ width: 8, height: 8, gap: 8, ...style }}\n onClick={onClick}\n />\n );\n }\n\n const isNumeric =\n typeof count === 'number' ||\n (typeof count === 'string' && /^[+-]?\\d+$/.test(count.trim()));\n\n return (\n <div\n {...rest}\n className={cn(\n badgeVariants({\n size: size || 'default',\n status,\n clickable: typeof onClick === 'function',\n }),\n className,\n )}\n style={isNumeric ? { fontFamily: 'monospace', ...style } : style}\n onClick={onClick}\n >\n {count}\n </div>\n );\n}\n"],"mappings":";;;;;AAsBA,IAAM,oBAA4C;CAChD,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACV;AAED,IAAM,gBAAgB,IACpB,kGACA;CACE,UAAU;EACR,MAAM;GACJ,SACE;GACF,OACE;GACH;EACD,QAAQ;GACN,SACE;GACF,SACE;GACF,OACE;GACF,MAAM;GACN,SACE;GACH;EACD,WAAW;GACT,MAAM;GACN,OAAO;GACR;EACF;CACD,iBAAiB;EACf,MAAM;EACN,QAAQ;EACR,WAAW;EACZ;CACF,CACF;AAED,SAAwB,MAAM,OAAmB;CAC/C,MAAM,EACJ,OACA,SAAS,WACT,MACA,WACA,OACA,SACA,GAAG,SACD;AAIJ,KAFc,UAAU,MAAM,UAAU,OAGtC,QACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW,GACT,mFACA,kBAAkB,SAClB,OAAO,YAAY,cAAc,qBACjC,UACD;EACD,OAAO;GAAE,OAAO;GAAG,QAAQ;GAAG,KAAK;GAAG,GAAG;GAAO;EACvC;EACT,CAAA;CAIN,MAAM,YACJ,OAAO,UAAU,YAChB,OAAO,UAAU,YAAY,aAAa,KAAK,MAAM,MAAM,CAAC;AAE/D,QACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW,GACT,cAAc;GACZ,MAAM,QAAQ;GACd;GACA,WAAW,OAAO,YAAY;GAC/B,CAAC,EACF,UACD;EACD,OAAO,YAAY;GAAE,YAAY;GAAa,GAAG;GAAO,GAAG;EAClD;YAER;EACG,CAAA"}
|
|
@@ -105,12 +105,12 @@ function Panel(props) {
|
|
|
105
105
|
["ald-member-picker-single"]: !multiple
|
|
106
106
|
}),
|
|
107
107
|
style: { width: panelwidth },
|
|
108
|
-
children: multiple ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
109
|
-
|
|
108
|
+
children: multiple ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
|
|
109
|
+
className: "ald-member-picker-inner",
|
|
110
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
110
111
|
className: "ald-member-picker-member-selection-wrapper",
|
|
111
112
|
children: renderDropdown()
|
|
112
|
-
}),
|
|
113
|
-
/* @__PURE__ */ jsx(SelectedMemberTags, {
|
|
113
|
+
}), /* @__PURE__ */ jsx(SelectedMemberTags, {
|
|
114
114
|
className: "ald-member-picker-selected-member-tags",
|
|
115
115
|
selectedUsers,
|
|
116
116
|
width: (panelwidth - 3) / 2,
|
|
@@ -118,16 +118,15 @@ function Panel(props) {
|
|
|
118
118
|
lockedIds,
|
|
119
119
|
userList: dataList,
|
|
120
120
|
renderSelectedTag
|
|
121
|
-
})
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [type === EMemberPicker.USER && /* @__PURE__ */ jsx(MemberSelection, {
|
|
121
|
+
})]
|
|
122
|
+
}), /* @__PURE__ */ jsx(SelectorFooter, {
|
|
123
|
+
className: "ald-member-picker-selector-footer",
|
|
124
|
+
onCancel,
|
|
125
|
+
onOk: () => {
|
|
126
|
+
onChange?.(selectedUsers);
|
|
127
|
+
},
|
|
128
|
+
footer
|
|
129
|
+
})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [type === EMemberPicker.USER && /* @__PURE__ */ jsx(MemberSelection, {
|
|
131
130
|
className: "ald-member-picker-member-selection-single",
|
|
132
131
|
userList: dataList.filter(isUser),
|
|
133
132
|
width: panelwidth - 2,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Panel.js","names":[],"sources":["../../../src/MemberPicker/components/Panel.tsx"],"sourcesContent":["import { cn } from '../../lib/utils';\n\nimport React, {\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport {\n EUserType,\n IUserGroup,\n TUser,\n TUserGroupValue,\n TUserValue,\n} from '../../ConfigProvider/getUserList';\nimport Tabs from '../../Tabs';\nimport { LocaleContext, getTranslator } from '../../locale/default';\nimport { EMemberPicker, IUser } from '../interface';\nimport { getId } from '../utils';\nimport { isUser, isUserGroup } from '../utils/getUsersWithUserId';\nimport MemberSelection from './MemberSelection';\nimport SelectedMemberTags from './SelectedMemberTags';\nimport SelectorFooter from './SelectorFooter';\nimport UserGroupSelection from './UserGroupSelection';\n\ninterface IPanelProps {\n type: EMemberPicker;\n multiple?: boolean;\n onChange?: (value: TUser) => void;\n dropdownWidth?: number;\n value?: TUser | (IUser | IUserGroup);\n dataList: TUser;\n onSearchValueChange?: (value: string) => void;\n onCancel?: () => void;\n loading: boolean;\n className?: string;\n lockedIds: Array<TUserValue | TUserGroupValue>;\n footer?: ReactNode;\n renderItem?: (\n item: IUser | IUserGroup,\n context: {\n isSelected: boolean;\n disabled: boolean;\n onClick: () => void;\n onNextLevel?: () => void;\n originNode: ReactNode;\n },\n ) => ReactNode;\n renderSelectedTag?: (\n user: IUser | IUserGroup,\n originNode: ReactNode,\n ) => ReactNode;\n filterItem?: (item: IUser | IUserGroup) => boolean;\n}\n\nexport const userDisplayNameIsRepeated = (\n userList: TUser,\n displayName?: string,\n) => {\n return (\n userList.filter(\n (user) => user.type === EUserType.USER && user.nickname === displayName,\n ).length > 1\n );\n};\n\nexport default function Panel(props: IPanelProps) {\n const { locale } = useContext(LocaleContext);\n const t = getTranslator(locale);\n\n const {\n type,\n multiple,\n dropdownWidth,\n value,\n onChange,\n dataList,\n onSearchValueChange,\n className,\n lockedIds,\n footer,\n onCancel,\n renderItem,\n renderSelectedTag,\n filterItem,\n } = props;\n\n const [selectedUsers, setSelected] = useState<TUser>([]);\n\n const onSelectionChange = useCallback(\n (selected: boolean, user: IUser | IUserGroup) => {\n if (multiple) {\n if (selected) {\n setSelected([...selectedUsers, user]);\n } else {\n setSelected(\n selectedUsers.filter((item) => getId(item) !== getId(user)),\n );\n }\n } else {\n if (selected) {\n setSelected([user]);\n onChange?.([user]);\n } else {\n setSelected([]);\n onChange?.([]);\n }\n }\n },\n [multiple, selectedUsers, onChange],\n );\n\n const onRemove = useCallback(\n (user: IUser | IUserGroup) => {\n setSelected(selectedUsers.filter((item) => getId(item) !== getId(user)));\n },\n [selectedUsers],\n );\n\n const panelwidth = useMemo(() => {\n if (dropdownWidth) {\n return dropdownWidth;\n } else if (multiple) {\n return 480;\n } else {\n return 160;\n }\n }, [dropdownWidth, multiple]);\n\n useEffect(() => {\n if (value) {\n if (Array.isArray(value)) {\n setSelected(value);\n } else {\n setSelected([value]);\n }\n }\n }, [setSelected, value]);\n\n const renderDropdown = useCallback(() => {\n const userSelection = (\n <MemberSelection\n className={'ald-member-picker-member-selection-multiple'}\n userList={dataList.filter(isUser)}\n filterItem={filterItem}\n width={(panelwidth - 6) / 2}\n selectedUsers={selectedUsers.filter(isUser)}\n onChange={onSelectionChange}\n onSearchValueChange={onSearchValueChange}\n multiple={true}\n lockedIds={lockedIds}\n loading={props.loading}\n renderItem={renderItem}\n ></MemberSelection>\n );\n const userGroupSelection = (\n <UserGroupSelection\n className={'ald-member-picker-member-selection-multiple'}\n userGroupList={dataList.filter(isUserGroup)}\n filterItem={filterItem}\n width={(panelwidth - 6) / 2}\n selectedUsersGroup={selectedUsers.filter(isUserGroup)}\n onChange={onSelectionChange}\n onSearchValueChange={onSearchValueChange}\n multiple={true}\n lockedIds={lockedIds}\n loading={props.loading}\n renderItem={renderItem}\n ></UserGroupSelection>\n );\n if (type === EMemberPicker.USER) {\n return userSelection;\n }\n if (type === EMemberPicker.GROUP) {\n return userGroupSelection;\n }\n if (type === EMemberPicker.BOTH) {\n return (\n <Tabs\n centered\n destroyInactiveTabPane\n items={[\n {\n key: 'user',\n label: t.MemberPicker.users,\n children: userSelection,\n },\n {\n key: 'userGroup',\n label: t.MemberPicker.userGroups,\n children: userGroupSelection,\n },\n ]}\n className=\"ald-member-tabs\"\n ></Tabs>\n );\n }\n }, [\n t,\n dataList,\n panelwidth,\n selectedUsers,\n onSelectionChange,\n onSearchValueChange,\n lockedIds,\n props.loading,\n type,\n renderItem,\n filterItem,\n ]);\n\n return (\n <div\n className={cn(className, 'ald-member-picker-wrapper', {\n ['ald-member-picker-multiple']: multiple,\n ['ald-member-picker-single']: !multiple,\n })}\n style={{ width: panelwidth }}\n >\n {multiple ? (\n <>\n <div className=\"ald-member-picker-member-selection-wrapper\">\n {renderDropdown()}\n </div>\n <SelectedMemberTags\n className={'ald-member-picker-selected-member-tags'}\n selectedUsers={selectedUsers}\n width={(panelwidth - 3) / 2}\n onRemove={onRemove}\n lockedIds={lockedIds}\n userList={dataList}\n renderSelectedTag={renderSelectedTag}\n ></SelectedMemberTags>\n <SelectorFooter\n className={'ald-member-picker-selector-footer'}\n onCancel={onCancel}\n onOk={() => {\n onChange?.(selectedUsers);\n }}\n footer={footer}\n ></SelectorFooter>\n </>\n ) : (\n <>\n {type === EMemberPicker.USER && (\n <MemberSelection\n className={'ald-member-picker-member-selection-single'}\n userList={dataList.filter(isUser)}\n width={panelwidth - 2}\n onChange={onSelectionChange}\n selectedUsers={selectedUsers.filter(isUser)}\n onSearchValueChange={onSearchValueChange}\n multiple={false && multiple}\n lockedIds={lockedIds}\n loading={props.loading}\n renderItem={renderItem}\n ></MemberSelection>\n )}\n {type === EMemberPicker.GROUP && (\n <UserGroupSelection\n className={'ald-member-picker-member-selection-multiple'}\n userGroupList={dataList.filter(isUserGroup)}\n width={(panelwidth - 3) / 2}\n selectedUsersGroup={selectedUsers.filter(isUserGroup)}\n onChange={onSelectionChange}\n onSearchValueChange={onSearchValueChange}\n multiple={false}\n lockedIds={lockedIds}\n loading={props.loading}\n renderItem={renderItem}\n ></UserGroupSelection>\n )}\n </>\n )}\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;AAoEA,SAAwB,MAAM,OAAoB;CAChD,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,EACJ,MACA,UACA,eACA,OACA,UACA,UACA,qBACA,WACA,WACA,QACA,UACA,YACA,mBACA,eACE;CAEJ,MAAM,CAAC,eAAe,eAAe,SAAgB,EAAE,CAAC;CAExD,MAAM,oBAAoB,aACvB,UAAmB,SAA6B;AAC/C,MAAI,SACF,KAAI,SACF,aAAY,CAAC,GAAG,eAAe,KAAK,CAAC;MAErC,aACE,cAAc,QAAQ,SAAS,MAAM,KAAK,KAAK,MAAM,KAAK,CAAC,CAC5D;WAGC,UAAU;AACZ,eAAY,CAAC,KAAK,CAAC;AACnB,cAAW,CAAC,KAAK,CAAC;SACb;AACL,eAAY,EAAE,CAAC;AACf,cAAW,EAAE,CAAC;;IAIpB;EAAC;EAAU;EAAe;EAAS,CACpC;CAED,MAAM,WAAW,aACd,SAA6B;AAC5B,cAAY,cAAc,QAAQ,SAAS,MAAM,KAAK,KAAK,MAAM,KAAK,CAAC,CAAC;IAE1E,CAAC,cAAc,CAChB;CAED,MAAM,aAAa,cAAc;AAC/B,MAAI,cACF,QAAO;WACE,SACT,QAAO;MAEP,QAAO;IAER,CAAC,eAAe,SAAS,CAAC;AAE7B,iBAAgB;AACd,MAAI,MACF,KAAI,MAAM,QAAQ,MAAM,CACtB,aAAY,MAAM;MAElB,aAAY,CAAC,MAAM,CAAC;IAGvB,CAAC,aAAa,MAAM,CAAC;CAExB,MAAM,iBAAiB,kBAAkB;EACvC,MAAM,gBACJ,oBAAC,iBAAD;GACE,WAAW;GACX,UAAU,SAAS,OAAO,OAAO;GACrB;GACZ,QAAQ,aAAa,KAAK;GAC1B,eAAe,cAAc,OAAO,OAAO;GAC3C,UAAU;GACW;GACrB,UAAU;GACC;GACX,SAAS,MAAM;GACH;GACK,CAAA;EAErB,MAAM,qBACJ,oBAAC,oBAAD;GACE,WAAW;GACX,eAAe,SAAS,OAAO,YAAY;GAC/B;GACZ,QAAQ,aAAa,KAAK;GAC1B,oBAAoB,cAAc,OAAO,YAAY;GACrD,UAAU;GACW;GACrB,UAAU;GACC;GACX,SAAS,MAAM;GACH;GACQ,CAAA;AAExB,MAAI,SAAS,cAAc,KACzB,QAAO;AAET,MAAI,SAAS,cAAc,MACzB,QAAO;AAET,MAAI,SAAS,cAAc,KACzB,QACE,oBAAC,MAAD;GACE,UAAA;GACA,wBAAA;GACA,OAAO,CACL;IACE,KAAK;IACL,OAAO,EAAE,aAAa;IACtB,UAAU;IACX,EACD;IACE,KAAK;IACL,OAAO,EAAE,aAAa;IACtB,UAAU;IACX,CACF;GACD,WAAU;GACJ,CAAA;IAGX;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAM;EACN;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,WAAW,6BAA6B;IACnD,+BAA+B;IAC/B,6BAA6B,CAAC;GAChC,CAAC;EACF,OAAO,EAAE,OAAO,YAAY;YAE3B,WACC,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,OAAD;IAAK,WAAU;cACZ,gBAAgB;IACb,CAAA;GACN,oBAAC,oBAAD;IACE,WAAW;IACI;IACf,QAAQ,aAAa,KAAK;IAChB;IACC;IACX,UAAU;IACS;IACC,CAAA;GACtB,oBAAC,gBAAD;IACE,WAAW;IACD;IACV,YAAY;AACV,gBAAW,cAAc;;IAEnB;IACQ,CAAA;GACjB,EAAA,CAAA,GAEH,qBAAA,UAAA,EAAA,UAAA,CACG,SAAS,cAAc,QACtB,oBAAC,iBAAD;GACE,WAAW;GACX,UAAU,SAAS,OAAO,OAAO;GACjC,OAAO,aAAa;GACpB,UAAU;GACV,eAAe,cAAc,OAAO,OAAO;GACtB;GACrB,UAAU;GACC;GACX,SAAS,MAAM;GACH;GACK,CAAA,EAEpB,SAAS,cAAc,SACtB,oBAAC,oBAAD;GACE,WAAW;GACX,eAAe,SAAS,OAAO,YAAY;GAC3C,QAAQ,aAAa,KAAK;GAC1B,oBAAoB,cAAc,OAAO,YAAY;GACrD,UAAU;GACW;GACrB,UAAU;GACC;GACX,SAAS,MAAM;GACH;GACQ,CAAA,CAEvB,EAAA,CAAA;EAED,CAAA"}
|
|
1
|
+
{"version":3,"file":"Panel.js","names":[],"sources":["../../../src/MemberPicker/components/Panel.tsx"],"sourcesContent":["import { cn } from '../../lib/utils';\n\nimport React, {\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport {\n EUserType,\n IUserGroup,\n TUser,\n TUserGroupValue,\n TUserValue,\n} from '../../ConfigProvider/getUserList';\nimport Tabs from '../../Tabs';\nimport { LocaleContext, getTranslator } from '../../locale/default';\nimport { EMemberPicker, IUser } from '../interface';\nimport { getId } from '../utils';\nimport { isUser, isUserGroup } from '../utils/getUsersWithUserId';\nimport MemberSelection from './MemberSelection';\nimport SelectedMemberTags from './SelectedMemberTags';\nimport SelectorFooter from './SelectorFooter';\nimport UserGroupSelection from './UserGroupSelection';\n\ninterface IPanelProps {\n type: EMemberPicker;\n multiple?: boolean;\n onChange?: (value: TUser) => void;\n dropdownWidth?: number;\n value?: TUser | (IUser | IUserGroup);\n dataList: TUser;\n onSearchValueChange?: (value: string) => void;\n onCancel?: () => void;\n loading: boolean;\n className?: string;\n lockedIds: Array<TUserValue | TUserGroupValue>;\n footer?: ReactNode;\n renderItem?: (\n item: IUser | IUserGroup,\n context: {\n isSelected: boolean;\n disabled: boolean;\n onClick: () => void;\n onNextLevel?: () => void;\n originNode: ReactNode;\n },\n ) => ReactNode;\n renderSelectedTag?: (\n user: IUser | IUserGroup,\n originNode: ReactNode,\n ) => ReactNode;\n filterItem?: (item: IUser | IUserGroup) => boolean;\n}\n\nexport const userDisplayNameIsRepeated = (\n userList: TUser,\n displayName?: string,\n) => {\n return (\n userList.filter(\n (user) => user.type === EUserType.USER && user.nickname === displayName,\n ).length > 1\n );\n};\n\nexport default function Panel(props: IPanelProps) {\n const { locale } = useContext(LocaleContext);\n const t = getTranslator(locale);\n\n const {\n type,\n multiple,\n dropdownWidth,\n value,\n onChange,\n dataList,\n onSearchValueChange,\n className,\n lockedIds,\n footer,\n onCancel,\n renderItem,\n renderSelectedTag,\n filterItem,\n } = props;\n\n const [selectedUsers, setSelected] = useState<TUser>([]);\n\n const onSelectionChange = useCallback(\n (selected: boolean, user: IUser | IUserGroup) => {\n if (multiple) {\n if (selected) {\n setSelected([...selectedUsers, user]);\n } else {\n setSelected(\n selectedUsers.filter((item) => getId(item) !== getId(user)),\n );\n }\n } else {\n if (selected) {\n setSelected([user]);\n onChange?.([user]);\n } else {\n setSelected([]);\n onChange?.([]);\n }\n }\n },\n [multiple, selectedUsers, onChange],\n );\n\n const onRemove = useCallback(\n (user: IUser | IUserGroup) => {\n setSelected(selectedUsers.filter((item) => getId(item) !== getId(user)));\n },\n [selectedUsers],\n );\n\n const panelwidth = useMemo(() => {\n if (dropdownWidth) {\n return dropdownWidth;\n } else if (multiple) {\n return 480;\n } else {\n return 160;\n }\n }, [dropdownWidth, multiple]);\n\n useEffect(() => {\n if (value) {\n if (Array.isArray(value)) {\n setSelected(value);\n } else {\n setSelected([value]);\n }\n }\n }, [setSelected, value]);\n\n const renderDropdown = useCallback(() => {\n const userSelection = (\n <MemberSelection\n className={'ald-member-picker-member-selection-multiple'}\n userList={dataList.filter(isUser)}\n filterItem={filterItem}\n width={(panelwidth - 6) / 2}\n selectedUsers={selectedUsers.filter(isUser)}\n onChange={onSelectionChange}\n onSearchValueChange={onSearchValueChange}\n multiple={true}\n lockedIds={lockedIds}\n loading={props.loading}\n renderItem={renderItem}\n ></MemberSelection>\n );\n const userGroupSelection = (\n <UserGroupSelection\n className={'ald-member-picker-member-selection-multiple'}\n userGroupList={dataList.filter(isUserGroup)}\n filterItem={filterItem}\n width={(panelwidth - 6) / 2}\n selectedUsersGroup={selectedUsers.filter(isUserGroup)}\n onChange={onSelectionChange}\n onSearchValueChange={onSearchValueChange}\n multiple={true}\n lockedIds={lockedIds}\n loading={props.loading}\n renderItem={renderItem}\n ></UserGroupSelection>\n );\n if (type === EMemberPicker.USER) {\n return userSelection;\n }\n if (type === EMemberPicker.GROUP) {\n return userGroupSelection;\n }\n if (type === EMemberPicker.BOTH) {\n return (\n <Tabs\n centered\n destroyInactiveTabPane\n items={[\n {\n key: 'user',\n label: t.MemberPicker.users,\n children: userSelection,\n },\n {\n key: 'userGroup',\n label: t.MemberPicker.userGroups,\n children: userGroupSelection,\n },\n ]}\n className=\"ald-member-tabs\"\n ></Tabs>\n );\n }\n }, [\n t,\n dataList,\n panelwidth,\n selectedUsers,\n onSelectionChange,\n onSearchValueChange,\n lockedIds,\n props.loading,\n type,\n renderItem,\n filterItem,\n ]);\n\n return (\n <div\n className={cn(className, 'ald-member-picker-wrapper', {\n ['ald-member-picker-multiple']: multiple,\n ['ald-member-picker-single']: !multiple,\n })}\n style={{ width: panelwidth }}\n >\n {multiple ? (\n <>\n <div className=\"ald-member-picker-inner\">\n <div className=\"ald-member-picker-member-selection-wrapper\">\n {renderDropdown()}\n </div>\n <SelectedMemberTags\n className={'ald-member-picker-selected-member-tags'}\n selectedUsers={selectedUsers}\n width={(panelwidth - 3) / 2}\n onRemove={onRemove}\n lockedIds={lockedIds}\n userList={dataList}\n renderSelectedTag={renderSelectedTag}\n ></SelectedMemberTags>\n </div>\n <SelectorFooter\n className={'ald-member-picker-selector-footer'}\n onCancel={onCancel}\n onOk={() => {\n onChange?.(selectedUsers);\n }}\n footer={footer}\n ></SelectorFooter>\n </>\n ) : (\n <>\n {type === EMemberPicker.USER && (\n <MemberSelection\n className={'ald-member-picker-member-selection-single'}\n userList={dataList.filter(isUser)}\n width={panelwidth - 2}\n onChange={onSelectionChange}\n selectedUsers={selectedUsers.filter(isUser)}\n onSearchValueChange={onSearchValueChange}\n multiple={false && multiple}\n lockedIds={lockedIds}\n loading={props.loading}\n renderItem={renderItem}\n ></MemberSelection>\n )}\n {type === EMemberPicker.GROUP && (\n <UserGroupSelection\n className={'ald-member-picker-member-selection-multiple'}\n userGroupList={dataList.filter(isUserGroup)}\n width={(panelwidth - 3) / 2}\n selectedUsersGroup={selectedUsers.filter(isUserGroup)}\n onChange={onSelectionChange}\n onSearchValueChange={onSearchValueChange}\n multiple={false}\n lockedIds={lockedIds}\n loading={props.loading}\n renderItem={renderItem}\n ></UserGroupSelection>\n )}\n </>\n )}\n </div>\n );\n}\n"],"mappings":"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"}
|
|
@@ -19,6 +19,7 @@ var Component = (props) => {
|
|
|
19
19
|
const { locale } = useContext(LocaleContext);
|
|
20
20
|
const t = getTranslator(locale);
|
|
21
21
|
const { value, type = EMemberPicker.USER, onChange, multiple, dropdownWidth, open, onOpenChange, placeholder = t.MemberPicker.select, className, allowClear, disabled, onClear, size, prefix: propPrefix, lockedIds = [], footer, onCancel, filterItem, mode: propsMode, renderItem, renderSelectedTag, ...restProps } = props;
|
|
22
|
+
const allowOverlap = props.allowOverlap ?? false;
|
|
22
23
|
const { getUsersByIds, getUsersByKeywords } = AldCustomConfigProvider.useGetUserList();
|
|
23
24
|
const [selectedUserList, setSelectedUserList] = useState([]);
|
|
24
25
|
const prevValue = usePrevious(value);
|
|
@@ -213,7 +214,7 @@ var Component = (props) => {
|
|
|
213
214
|
else onChange?.();
|
|
214
215
|
onClear?.();
|
|
215
216
|
},
|
|
216
|
-
popupClassName: cn("ald-member-picker-popup", props.popupClassName),
|
|
217
|
+
popupClassName: cn("ald-member-picker-popup", allowOverlap && "ald-member-picker-popup-adaptive", props.popupClassName),
|
|
217
218
|
mode,
|
|
218
219
|
options: selectedUserList.map((item) => {
|
|
219
220
|
if (item.type === EUserType.USER_GROUP) return {
|
|
@@ -222,7 +223,7 @@ var Component = (props) => {
|
|
|
222
223
|
tag: /* @__PURE__ */ jsxs("div", {
|
|
223
224
|
className: "ald-member-picker-tag",
|
|
224
225
|
children: [/* @__PURE__ */ jsx(Avatar, {
|
|
225
|
-
type: "
|
|
226
|
+
type: "team",
|
|
226
227
|
size: 20,
|
|
227
228
|
children: item.name || item.groupId
|
|
228
229
|
}), item.name || item.groupId]
|
|
@@ -236,7 +237,7 @@ var Component = (props) => {
|
|
|
236
237
|
children: [/* @__PURE__ */ jsx(Avatar, {
|
|
237
238
|
size: 20,
|
|
238
239
|
src: item.photo,
|
|
239
|
-
type: item.type === EUserType.USER ? "user" : "
|
|
240
|
+
type: item.type === EUserType.USER ? "user" : "team",
|
|
240
241
|
children: item.nickname || item.name || item.userId
|
|
241
242
|
}), item.nickname || item.name || item.userId]
|
|
242
243
|
})
|
|
@@ -246,10 +247,12 @@ var Component = (props) => {
|
|
|
246
247
|
open: selectOpen,
|
|
247
248
|
onOpenChange: onDropdownOpenChange,
|
|
248
249
|
popupMatchSelectWidth: false,
|
|
250
|
+
allowOverlap,
|
|
249
251
|
placeholder,
|
|
250
252
|
dropdownRender: () => {
|
|
251
253
|
return /* @__PURE__ */ jsx("div", {
|
|
252
254
|
ref: triggerRef,
|
|
255
|
+
className: cn({ "ald-member-picker-popup-body": allowOverlap }),
|
|
253
256
|
children: /* @__PURE__ */ jsx(Panel, {
|
|
254
257
|
type,
|
|
255
258
|
footer,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/MemberPicker/index.tsx"],"sourcesContent":["import { usePrevious, useRequest } from 'ahooks';\nimport { cn } from '../lib/utils';\nimport _ from 'lodash';\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Avatar from '../Avatar';\nimport ConfigProvider from '../ConfigProvider';\nimport './member-picker.css';\nimport {\n EUserType,\n IUser,\n IUserGroup,\n TUser,\n} from '../ConfigProvider/getUserList';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport message from '../message';\nimport Panel from './components/Panel';\nimport MemberPanel from './components/PanelWrapper';\nimport {\n EMemberPicker,\n IMemberPickerProps,\n TUserGroupValue,\n TUserValue,\n} from './interface';\nimport { isUser, isUserGroup } from './utils/getUsersWithUserId';\nimport Select from '../Select';\nimport { Mode } from '../Select/BaseSelect';\n\nconst Component: React.FC<IMemberPickerProps> = (props) => {\n const { locale } = useContext(LocaleContext);\n const t = getTranslator(locale);\n\n const {\n value,\n type = EMemberPicker.USER,\n onChange,\n multiple,\n dropdownWidth,\n open,\n onOpenChange,\n placeholder = t.MemberPicker.select,\n className,\n allowClear,\n disabled,\n onClear,\n size,\n prefix: propPrefix,\n lockedIds = [],\n footer,\n onCancel,\n filterItem,\n mode: propsMode,\n renderItem,\n renderSelectedTag,\n ...restProps\n } = props;\n const { getUsersByIds, getUsersByKeywords } = ConfigProvider.useGetUserList();\n const [selectedUserList, setSelectedUserList] = useState<TUser>([]);\n const prevValue = usePrevious(value);\n const [searchUserList, setSearchUserList] = useState<TUser>([]);\n const [searchString, setSearchString] = useState<string>('');\n const [dropdownContentWidth, setDropdownContentWidth] =\n useState(dropdownWidth);\n\n const triggerRef = useRef<HTMLDivElement>(null);\n const onSearchValueChange = useCallback((v: string) => {\n setSearchString(v);\n }, []);\n const [dropdownOpen, setDropdownOpen] = useState<boolean>(!!open);\n const queryByKeywords = useMemo(() => {\n if (getUsersByKeywords) {\n return getUsersByKeywords;\n }\n\n return (_params = {}) =>\n Promise.reject({\n message: t.MemberPicker.pleaseConfigGetUserByKeywordsMethod,\n });\n }, [getUsersByKeywords, t.MemberPicker.pleaseConfigGetUserByKeywordsMethod]);\n const queryByIds = useMemo(() => {\n if (getUsersByIds) {\n return getUsersByIds;\n }\n\n return (_params = {}) =>\n Promise.reject({\n message: t.MemberPicker.pleaseConfigGetUserByIdsMethod,\n });\n }, [getUsersByIds, t.MemberPicker.pleaseConfigGetUserByIdsMethod]);\n const { loading, run } = useRequest(() => queryByKeywords(searchString), {\n refreshDeps: [searchString],\n manual: true,\n cacheKey: 'member-selector',\n cacheTime: 1000 * 60 * 2, // 2分钟内不重复请求\n onSuccess: (result) => {\n setSearchUserList(result);\n },\n onError: (error) => {\n message.error(error.message);\n },\n });\n\n const totalUserList: TUser = useMemo(() => {\n const totalUsers = searchUserList.concat(\n selectedUserList.filter((item) => {\n const name =\n (item.type === EUserType.USER ? item.nickname : item.name) || '';\n\n return name.toUpperCase().includes(searchString.trim().toUpperCase());\n }),\n );\n\n return _.uniqBy(totalUsers, (data: IUser | IUserGroup) => {\n if (data.type === EUserType.USER) return data.userId;\n\n return data.groupId;\n }).filter((item) => {\n if (filterItem) {\n return filterItem(item);\n }\n\n return true;\n });\n }, [filterItem, searchString, searchUserList, selectedUserList]);\n\n useEffect(() => {\n if (!dropdownOpen) return;\n run();\n }, [dropdownOpen, run, searchString]);\n\n useEffect(() => {\n if (_.isEqual(value, prevValue)) {\n return;\n }\n if (Array.isArray(value) && (isUser(value[0]) || isUserGroup(value[0]))) {\n setSelectedUserList(value as TUser);\n } else if (isUser(value) || isUserGroup(value)) {\n setSelectedUserList([value]);\n } else {\n let param: Array<TUserValue | TUserGroupValue> = [];\n if (!value) return;\n if (Array.isArray(value) && value.length === 0) {\n setSelectedUserList([]);\n\n return;\n }\n if (!Array.isArray(value)) {\n param = [value];\n } else {\n param = value;\n }\n queryByIds(param).then((result) => {\n // 如果用户已被删除,则需要展示出id\n const valueNotInResult: TUser = param\n .filter((item) => {\n if (item.type === EUserType.USER) {\n return result\n .filter(isUser)\n .every((user) => user.userId !== item.userId);\n }\n\n return result\n .filter(isUserGroup)\n .every((user) => user.groupId !== item.groupId);\n })\n .map((item) => {\n if (item.type === EUserType.USER) {\n return {\n type: EUserType.USER,\n userId: item.userId,\n } as IUser;\n }\n\n return {\n type: EUserType.USER_GROUP,\n groupId: item.groupId,\n } as IUserGroup;\n });\n\n setSelectedUserList([...result, ...valueNotInResult]);\n });\n }\n }, [value, queryByIds, prevValue]);\n\n const onSelectedChange = useCallback(\n (users: TUser) => {\n if (multiple) {\n setSelectedUserList(users);\n onChange?.(users);\n } else {\n setSelectedUserList(users);\n onChange?.(users[0]);\n }\n setDropdownOpen(false);\n },\n [multiple, onChange, setDropdownOpen],\n );\n\n useEffect(() => {\n if (typeof open === 'boolean') {\n setDropdownOpen(open);\n }\n }, [open]);\n\n useEffect(() => {\n if (!dropdownContentWidth) {\n const resizeEle = triggerRef.current;\n if (!resizeEle) return;\n const resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n const { width } = entry.contentRect;\n setDropdownContentWidth(width);\n }\n });\n resizeObserver.observe(resizeEle);\n\n return () => {\n resizeObserver.unobserve(resizeEle);\n };\n }\n }, [triggerRef, dropdownContentWidth]);\n const onDropdownOpenChange = useCallback(\n (open: boolean) => {\n setDropdownOpen(open);\n onOpenChange?.(open);\n },\n [onOpenChange],\n );\n const panelKey = useMemo(() => {\n if (dropdownOpen) {\n return _.sampleSize('abcdefghijklmnopqrstuvwxyz0123456789', 8).join('');\n }\n }, [dropdownOpen]);\n const mode = useMemo(() => {\n if (multiple === true) {\n if (typeof propsMode === 'object')\n return {\n ...(propsMode || {}),\n type: 'multiple',\n responsive: _.isNil(propsMode.responsive)\n ? true\n : propsMode.responsive,\n } as Mode;\n return {\n type: 'multiple',\n responsive: true,\n } as Mode;\n }\n\n return multiple ? (multiple as Mode) : propsMode;\n }, [multiple, propsMode]);\n\n const selectOpen = typeof open === 'boolean' ? open : dropdownOpen;\n\n return (\n <Select\n prefix={propPrefix}\n {...restProps}\n size={size}\n className={cn('ald-member-picker-select', className)}\n value={selectedUserList.map((item) => {\n if (item.type === EUserType.USER_GROUP) {\n return item.groupId;\n } else {\n return item.userId;\n }\n })}\n onChange={(value) => {\n if (_.isEmpty(value)) {\n setSelectedUserList([]);\n if (multiple) {\n onChange?.([]);\n } else {\n onChange?.();\n }\n } else {\n const valueList = Array.isArray(value) ? value : [value];\n if (multiple) {\n const users = valueList\n .map((item) => {\n const user = totalUserList.find((user) => {\n if (user.type === EUserType.USER) {\n return user.userId === item;\n }\n\n return user.groupId === item;\n });\n\n return user;\n })\n .filter(Boolean) as TUser;\n setSelectedUserList(users);\n onChange?.(users);\n } else {\n const user = totalUserList.find((user) => {\n if (user.type === EUserType.USER) {\n return user.userId === value;\n }\n\n return user.groupId === value;\n });\n if (user) {\n setSelectedUserList([user]);\n onChange?.(user);\n } else {\n setSelectedUserList([]);\n onChange?.();\n }\n }\n }\n }}\n disabled={disabled}\n allowClear={allowClear}\n onClear={() => {\n setSelectedUserList([]);\n if (multiple) {\n onChange?.([]);\n } else {\n onChange?.();\n }\n onClear?.();\n }}\n popupClassName={cn('ald-member-picker-popup', props.popupClassName)}\n mode={mode}\n options={selectedUserList.map((item) => {\n if (item.type === EUserType.USER_GROUP)\n return {\n label: item.name || item.groupId,\n value: item.groupId,\n tag: (\n <div className={'ald-member-picker-tag'}>\n <Avatar type=\"userGroup\" size={20}>\n {item.name || item.groupId}\n </Avatar>\n {item.name || item.groupId}\n </div>\n ),\n };\n\n return {\n label: item.nickname || item.name || item.userId,\n value: item.userId,\n tag: (\n <div className={'ald-member-picker-tag'}>\n <Avatar\n size={20}\n src={item.photo}\n type={item.type === EUserType.USER ? 'user' : 'userGroup'}\n >\n {item.nickname || item.name || item.userId}\n </Avatar>\n {item.nickname || item.name || item.userId}\n </div>\n ),\n };\n })}\n optionLabelProp={multiple ? 'label' : 'tag'}\n open={selectOpen}\n onOpenChange={onDropdownOpenChange}\n popupMatchSelectWidth={false}\n placeholder={placeholder}\n dropdownRender={() => {\n return (\n <div ref={triggerRef}>\n <Panel\n type={type}\n footer={footer}\n value={selectedUserList}\n dataList={totalUserList}\n lockedIds={lockedIds}\n multiple={!!multiple}\n key={panelKey}\n loading={loading}\n dropdownWidth={dropdownContentWidth}\n onSearchValueChange={onSearchValueChange}\n onChange={onSelectedChange}\n onCancel={() => {\n onCancel?.();\n setDropdownOpen(false);\n }}\n renderItem={renderItem}\n renderSelectedTag={renderSelectedTag}\n ></Panel>\n </div>\n );\n }}\n ></Select>\n );\n};\n\nconst MemberSelector = Component as React.FC<IMemberPickerProps> & {\n MemberPanel: typeof MemberPanel;\n};\n\nMemberSelector.MemberPanel = MemberPanel;\nexport default MemberSelector;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/MemberPicker/index.tsx"],"sourcesContent":["import { usePrevious, useRequest } from 'ahooks';\nimport { cn } from '../lib/utils';\nimport _ from 'lodash';\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Avatar from '../Avatar';\nimport ConfigProvider from '../ConfigProvider';\nimport './member-picker.css';\nimport {\n EUserType,\n IUser,\n IUserGroup,\n TUser,\n} from '../ConfigProvider/getUserList';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport message from '../message';\nimport Panel from './components/Panel';\nimport MemberPanel from './components/PanelWrapper';\nimport {\n EMemberPicker,\n IMemberPickerProps,\n TUserGroupValue,\n TUserValue,\n} from './interface';\nimport { isUser, isUserGroup } from './utils/getUsersWithUserId';\nimport Select from '../Select';\nimport { Mode } from '../Select/BaseSelect';\n\nconst Component: React.FC<IMemberPickerProps> = (props) => {\n const { locale } = useContext(LocaleContext);\n const t = getTranslator(locale);\n\n const {\n value,\n type = EMemberPicker.USER,\n onChange,\n multiple,\n dropdownWidth,\n open,\n onOpenChange,\n placeholder = t.MemberPicker.select,\n className,\n allowClear,\n disabled,\n onClear,\n size,\n prefix: propPrefix,\n lockedIds = [],\n footer,\n onCancel,\n filterItem,\n mode: propsMode,\n renderItem,\n renderSelectedTag,\n ...restProps\n } = props;\n const allowOverlap = props.allowOverlap ?? false;\n const { getUsersByIds, getUsersByKeywords } = ConfigProvider.useGetUserList();\n const [selectedUserList, setSelectedUserList] = useState<TUser>([]);\n const prevValue = usePrevious(value);\n const [searchUserList, setSearchUserList] = useState<TUser>([]);\n const [searchString, setSearchString] = useState<string>('');\n const [dropdownContentWidth, setDropdownContentWidth] =\n useState(dropdownWidth);\n\n const triggerRef = useRef<HTMLDivElement>(null);\n const onSearchValueChange = useCallback((v: string) => {\n setSearchString(v);\n }, []);\n const [dropdownOpen, setDropdownOpen] = useState<boolean>(!!open);\n const queryByKeywords = useMemo(() => {\n if (getUsersByKeywords) {\n return getUsersByKeywords;\n }\n\n return (_params = {}) =>\n Promise.reject({\n message: t.MemberPicker.pleaseConfigGetUserByKeywordsMethod,\n });\n }, [getUsersByKeywords, t.MemberPicker.pleaseConfigGetUserByKeywordsMethod]);\n const queryByIds = useMemo(() => {\n if (getUsersByIds) {\n return getUsersByIds;\n }\n\n return (_params = {}) =>\n Promise.reject({\n message: t.MemberPicker.pleaseConfigGetUserByIdsMethod,\n });\n }, [getUsersByIds, t.MemberPicker.pleaseConfigGetUserByIdsMethod]);\n const { loading, run } = useRequest(() => queryByKeywords(searchString), {\n refreshDeps: [searchString],\n manual: true,\n cacheKey: 'member-selector',\n cacheTime: 1000 * 60 * 2, // 2分钟内不重复请求\n onSuccess: (result) => {\n setSearchUserList(result);\n },\n onError: (error) => {\n message.error(error.message);\n },\n });\n\n const totalUserList: TUser = useMemo(() => {\n const totalUsers = searchUserList.concat(\n selectedUserList.filter((item) => {\n const name =\n (item.type === EUserType.USER ? item.nickname : item.name) || '';\n\n return name.toUpperCase().includes(searchString.trim().toUpperCase());\n }),\n );\n\n return _.uniqBy(totalUsers, (data: IUser | IUserGroup) => {\n if (data.type === EUserType.USER) return data.userId;\n\n return data.groupId;\n }).filter((item) => {\n if (filterItem) {\n return filterItem(item);\n }\n\n return true;\n });\n }, [filterItem, searchString, searchUserList, selectedUserList]);\n\n useEffect(() => {\n if (!dropdownOpen) return;\n run();\n }, [dropdownOpen, run, searchString]);\n\n useEffect(() => {\n if (_.isEqual(value, prevValue)) {\n return;\n }\n if (Array.isArray(value) && (isUser(value[0]) || isUserGroup(value[0]))) {\n setSelectedUserList(value as TUser);\n } else if (isUser(value) || isUserGroup(value)) {\n setSelectedUserList([value]);\n } else {\n let param: Array<TUserValue | TUserGroupValue> = [];\n if (!value) return;\n if (Array.isArray(value) && value.length === 0) {\n setSelectedUserList([]);\n\n return;\n }\n if (!Array.isArray(value)) {\n param = [value];\n } else {\n param = value;\n }\n queryByIds(param).then((result) => {\n // 如果用户已被删除,则需要展示出id\n const valueNotInResult: TUser = param\n .filter((item) => {\n if (item.type === EUserType.USER) {\n return result\n .filter(isUser)\n .every((user) => user.userId !== item.userId);\n }\n\n return result\n .filter(isUserGroup)\n .every((user) => user.groupId !== item.groupId);\n })\n .map((item) => {\n if (item.type === EUserType.USER) {\n return {\n type: EUserType.USER,\n userId: item.userId,\n } as IUser;\n }\n\n return {\n type: EUserType.USER_GROUP,\n groupId: item.groupId,\n } as IUserGroup;\n });\n\n setSelectedUserList([...result, ...valueNotInResult]);\n });\n }\n }, [value, queryByIds, prevValue]);\n\n const onSelectedChange = useCallback(\n (users: TUser) => {\n if (multiple) {\n setSelectedUserList(users);\n onChange?.(users);\n } else {\n setSelectedUserList(users);\n onChange?.(users[0]);\n }\n setDropdownOpen(false);\n },\n [multiple, onChange, setDropdownOpen],\n );\n\n useEffect(() => {\n if (typeof open === 'boolean') {\n setDropdownOpen(open);\n }\n }, [open]);\n\n useEffect(() => {\n if (!dropdownContentWidth) {\n const resizeEle = triggerRef.current;\n if (!resizeEle) return;\n const resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n const { width } = entry.contentRect;\n setDropdownContentWidth(width);\n }\n });\n resizeObserver.observe(resizeEle);\n\n return () => {\n resizeObserver.unobserve(resizeEle);\n };\n }\n }, [triggerRef, dropdownContentWidth]);\n const onDropdownOpenChange = useCallback(\n (open: boolean) => {\n setDropdownOpen(open);\n onOpenChange?.(open);\n },\n [onOpenChange],\n );\n const panelKey = useMemo(() => {\n if (dropdownOpen) {\n return _.sampleSize('abcdefghijklmnopqrstuvwxyz0123456789', 8).join('');\n }\n }, [dropdownOpen]);\n const mode = useMemo(() => {\n if (multiple === true) {\n if (typeof propsMode === 'object')\n return {\n ...(propsMode || {}),\n type: 'multiple',\n responsive: _.isNil(propsMode.responsive)\n ? true\n : propsMode.responsive,\n } as Mode;\n return {\n type: 'multiple',\n responsive: true,\n } as Mode;\n }\n\n return multiple ? (multiple as Mode) : propsMode;\n }, [multiple, propsMode]);\n\n const selectOpen = typeof open === 'boolean' ? open : dropdownOpen;\n\n return (\n <Select\n prefix={propPrefix}\n {...restProps}\n size={size}\n className={cn('ald-member-picker-select', className)}\n value={selectedUserList.map((item) => {\n if (item.type === EUserType.USER_GROUP) {\n return item.groupId;\n } else {\n return item.userId;\n }\n })}\n onChange={(value) => {\n if (_.isEmpty(value)) {\n setSelectedUserList([]);\n if (multiple) {\n onChange?.([]);\n } else {\n onChange?.();\n }\n } else {\n const valueList = Array.isArray(value) ? value : [value];\n if (multiple) {\n const users = valueList\n .map((item) => {\n const user = totalUserList.find((user) => {\n if (user.type === EUserType.USER) {\n return user.userId === item;\n }\n\n return user.groupId === item;\n });\n\n return user;\n })\n .filter(Boolean) as TUser;\n setSelectedUserList(users);\n onChange?.(users);\n } else {\n const user = totalUserList.find((user) => {\n if (user.type === EUserType.USER) {\n return user.userId === value;\n }\n\n return user.groupId === value;\n });\n if (user) {\n setSelectedUserList([user]);\n onChange?.(user);\n } else {\n setSelectedUserList([]);\n onChange?.();\n }\n }\n }\n }}\n disabled={disabled}\n allowClear={allowClear}\n onClear={() => {\n setSelectedUserList([]);\n if (multiple) {\n onChange?.([]);\n } else {\n onChange?.();\n }\n onClear?.();\n }}\n popupClassName={cn(\n 'ald-member-picker-popup',\n allowOverlap && 'ald-member-picker-popup-adaptive',\n props.popupClassName,\n )}\n mode={mode}\n options={selectedUserList.map((item) => {\n if (item.type === EUserType.USER_GROUP)\n return {\n label: item.name || item.groupId,\n value: item.groupId,\n tag: (\n <div className={'ald-member-picker-tag'}>\n <Avatar type=\"team\" size={20}>\n {item.name || item.groupId}\n </Avatar>\n {item.name || item.groupId}\n </div>\n ),\n };\n\n return {\n label: item.nickname || item.name || item.userId,\n value: item.userId,\n tag: (\n <div className={'ald-member-picker-tag'}>\n <Avatar\n size={20}\n src={item.photo}\n type={item.type === EUserType.USER ? 'user' : 'team'}\n >\n {item.nickname || item.name || item.userId}\n </Avatar>\n {item.nickname || item.name || item.userId}\n </div>\n ),\n };\n })}\n optionLabelProp={multiple ? 'label' : 'tag'}\n open={selectOpen}\n onOpenChange={onDropdownOpenChange}\n popupMatchSelectWidth={false}\n allowOverlap={allowOverlap}\n placeholder={placeholder}\n dropdownRender={() => {\n return (\n <div\n ref={triggerRef}\n className={cn({\n 'ald-member-picker-popup-body': allowOverlap,\n })}\n >\n <Panel\n type={type}\n footer={footer}\n value={selectedUserList}\n dataList={totalUserList}\n lockedIds={lockedIds}\n multiple={!!multiple}\n key={panelKey}\n loading={loading}\n dropdownWidth={dropdownContentWidth}\n onSearchValueChange={onSearchValueChange}\n onChange={onSelectedChange}\n onCancel={() => {\n onCancel?.();\n setDropdownOpen(false);\n }}\n renderItem={renderItem}\n renderSelectedTag={renderSelectedTag}\n ></Panel>\n </div>\n );\n }}\n ></Select>\n );\n};\n\nconst MemberSelector = Component as React.FC<IMemberPickerProps> & {\n MemberPanel: typeof MemberPanel;\n};\n\nMemberSelector.MemberPanel = MemberPanel;\nexport default MemberSelector;\n"],"mappings":"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"}
|
package/dist/Popover/index.js
CHANGED
|
@@ -3,6 +3,7 @@ import React from "react";
|
|
|
3
3
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
4
|
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
5
5
|
//#region src/Popover/index.tsx
|
|
6
|
+
var DEFAULT_POPOVER_Z_INDEX = 1100;
|
|
6
7
|
var placementMap = {
|
|
7
8
|
top: "top",
|
|
8
9
|
bottom: "bottom",
|
|
@@ -65,10 +66,10 @@ function Popover(props) {
|
|
|
65
66
|
side,
|
|
66
67
|
align,
|
|
67
68
|
sideOffset: 4,
|
|
68
|
-
className: cn("ald-popover ant-popover-inner tw-
|
|
69
|
+
className: cn("ald-popover ant-popover-inner tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-default-alpha)] tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-p-3 tw-outline-none", "tw-animate-in tw-fade-in-0 tw-zoom-in-95", overlayClassName),
|
|
69
70
|
style: {
|
|
70
71
|
boxShadow: "var(--elevation-bottom-bottom-sm)",
|
|
71
|
-
zIndex,
|
|
72
|
+
zIndex: zIndex ?? DEFAULT_POPOVER_Z_INDEX,
|
|
72
73
|
...overlayStyle
|
|
73
74
|
},
|
|
74
75
|
onMouseEnter: isHoverTrigger ? () => handleOpenChange(true) : void 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/Popover/index.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover';\nimport React from 'react';\nimport { cn } from '../lib/utils';\n\ntype TriggerType = 'hover' | 'click' | 'focus';\n\nexport interface PopoverProps {\n content?: React.ReactNode;\n title?: React.ReactNode;\n children?: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n trigger?: TriggerType | TriggerType[];\n rootClassName?: string;\n placement?:\n | 'top'\n | 'bottom'\n | 'left'\n | 'right'\n | 'topLeft'\n | 'topRight'\n | 'bottomLeft'\n | 'bottomRight'\n | 'leftTop'\n | 'leftBottom'\n | 'rightTop'\n | 'rightBottom';\n overlayClassName?: string;\n overlayStyle?: React.CSSProperties;\n arrow?: boolean;\n mouseEnterDelay?: number;\n mouseLeaveDelay?: number;\n className?: string;\n style?: React.CSSProperties;\n getPopupContainer?: () => HTMLElement;\n zIndex?: number;\n}\n\nconst placementMap: Record<\n string,\n PopoverPrimitive.PopoverContentProps['side']\n> = {\n top: 'top',\n bottom: 'bottom',\n left: 'left',\n right: 'right',\n topLeft: 'top',\n topRight: 'top',\n bottomLeft: 'bottom',\n bottomRight: 'bottom',\n leftTop: 'left',\n leftBottom: 'left',\n rightTop: 'right',\n rightBottom: 'right',\n};\n\nconst alignMap: Record<string, PopoverPrimitive.PopoverContentProps['align']> =\n {\n topLeft: 'start',\n topRight: 'end',\n bottomLeft: 'start',\n bottomRight: 'end',\n leftTop: 'start',\n leftBottom: 'end',\n rightTop: 'start',\n rightBottom: 'end',\n };\n\nfunction normalizeTrigger(trigger: PopoverProps['trigger']): Set<TriggerType> {\n if (Array.isArray(trigger)) return new Set(trigger);\n if (trigger) return new Set([trigger]);\n return new Set<TriggerType>(['hover']);\n}\n\nfunction Popover(props: PopoverProps) {\n const {\n content,\n title,\n children,\n open,\n defaultOpen,\n onOpenChange,\n trigger = 'hover',\n placement = 'top',\n overlayClassName,\n overlayStyle,\n arrow = false,\n getPopupContainer,\n zIndex,\n } = props;\n\n const containerRef = React.useRef<HTMLElement | undefined>(\n getPopupContainer?.(),\n );\n\n const [hoverOpen, setHoverOpen] = React.useState(false);\n const triggers = normalizeTrigger(trigger);\n\n const isControlled = open !== undefined;\n const isHoverTrigger = triggers.has('hover');\n const isOpen = isControlled\n ? open\n : isHoverTrigger\n ? hoverOpen\n : triggers.size === 0\n ? false\n : undefined;\n\n const handleOpenChange = (val: boolean) => {\n if (!isControlled && isHoverTrigger) {\n setHoverOpen(val);\n }\n onOpenChange?.(val);\n };\n\n const side = placementMap[placement] || 'top';\n const align = alignMap[placement] || 'center';\n\n const triggerChild = React.isValidElement(children) ? (\n children\n ) : (\n <span>{children}</span>\n );\n\n if (triggers.size === 0 && !isControlled) {\n return <>{children}</>;\n }\n\n return (\n <PopoverPrimitive.Root\n open={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={handleOpenChange}\n >\n <PopoverPrimitive.Trigger asChild>\n {isHoverTrigger ? (\n <span\n onMouseEnter={() => handleOpenChange(true)}\n onMouseLeave={() => handleOpenChange(false)}\n >\n {triggerChild}\n </span>\n ) : (\n triggerChild\n )}\n </PopoverPrimitive.Trigger>\n <PopoverPrimitive.Portal container={containerRef.current}>\n <PopoverPrimitive.Content\n side={side}\n align={align}\n sideOffset={4}\n // antd 兼容:保留 ant-popover-inner class,消费方 CSS 可能通过该选择器自定义内边距、背景等样式\n className={cn(\n 'ald-popover ant-popover-inner tw-
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/Popover/index.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover';\nimport React from 'react';\nimport { cn } from '../lib/utils';\n\ntype TriggerType = 'hover' | 'click' | 'focus';\n\nconst DEFAULT_POPOVER_Z_INDEX = 1100;\n\nexport interface PopoverProps {\n content?: React.ReactNode;\n title?: React.ReactNode;\n children?: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n trigger?: TriggerType | TriggerType[];\n rootClassName?: string;\n placement?:\n | 'top'\n | 'bottom'\n | 'left'\n | 'right'\n | 'topLeft'\n | 'topRight'\n | 'bottomLeft'\n | 'bottomRight'\n | 'leftTop'\n | 'leftBottom'\n | 'rightTop'\n | 'rightBottom';\n overlayClassName?: string;\n overlayStyle?: React.CSSProperties;\n arrow?: boolean;\n mouseEnterDelay?: number;\n mouseLeaveDelay?: number;\n className?: string;\n style?: React.CSSProperties;\n getPopupContainer?: () => HTMLElement;\n zIndex?: number;\n}\n\nconst placementMap: Record<\n string,\n PopoverPrimitive.PopoverContentProps['side']\n> = {\n top: 'top',\n bottom: 'bottom',\n left: 'left',\n right: 'right',\n topLeft: 'top',\n topRight: 'top',\n bottomLeft: 'bottom',\n bottomRight: 'bottom',\n leftTop: 'left',\n leftBottom: 'left',\n rightTop: 'right',\n rightBottom: 'right',\n};\n\nconst alignMap: Record<string, PopoverPrimitive.PopoverContentProps['align']> =\n {\n topLeft: 'start',\n topRight: 'end',\n bottomLeft: 'start',\n bottomRight: 'end',\n leftTop: 'start',\n leftBottom: 'end',\n rightTop: 'start',\n rightBottom: 'end',\n };\n\nfunction normalizeTrigger(trigger: PopoverProps['trigger']): Set<TriggerType> {\n if (Array.isArray(trigger)) return new Set(trigger);\n if (trigger) return new Set([trigger]);\n return new Set<TriggerType>(['hover']);\n}\n\nfunction Popover(props: PopoverProps) {\n const {\n content,\n title,\n children,\n open,\n defaultOpen,\n onOpenChange,\n trigger = 'hover',\n placement = 'top',\n overlayClassName,\n overlayStyle,\n arrow = false,\n getPopupContainer,\n zIndex,\n } = props;\n\n const containerRef = React.useRef<HTMLElement | undefined>(\n getPopupContainer?.(),\n );\n\n const [hoverOpen, setHoverOpen] = React.useState(false);\n const triggers = normalizeTrigger(trigger);\n\n const isControlled = open !== undefined;\n const isHoverTrigger = triggers.has('hover');\n const isOpen = isControlled\n ? open\n : isHoverTrigger\n ? hoverOpen\n : triggers.size === 0\n ? false\n : undefined;\n\n const handleOpenChange = (val: boolean) => {\n if (!isControlled && isHoverTrigger) {\n setHoverOpen(val);\n }\n onOpenChange?.(val);\n };\n\n const side = placementMap[placement] || 'top';\n const align = alignMap[placement] || 'center';\n\n const triggerChild = React.isValidElement(children) ? (\n children\n ) : (\n <span>{children}</span>\n );\n\n if (triggers.size === 0 && !isControlled) {\n return <>{children}</>;\n }\n\n return (\n <PopoverPrimitive.Root\n open={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={handleOpenChange}\n >\n <PopoverPrimitive.Trigger asChild>\n {isHoverTrigger ? (\n <span\n onMouseEnter={() => handleOpenChange(true)}\n onMouseLeave={() => handleOpenChange(false)}\n >\n {triggerChild}\n </span>\n ) : (\n triggerChild\n )}\n </PopoverPrimitive.Trigger>\n <PopoverPrimitive.Portal container={containerRef.current}>\n <PopoverPrimitive.Content\n side={side}\n align={align}\n sideOffset={4}\n // antd 兼容:保留 ant-popover-inner class,消费方 CSS 可能通过该选择器自定义内边距、背景等样式\n className={cn(\n 'ald-popover ant-popover-inner tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-default-alpha)] tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-p-3 tw-outline-none',\n 'tw-animate-in tw-fade-in-0 tw-zoom-in-95',\n overlayClassName,\n )}\n style={{\n boxShadow: 'var(--elevation-bottom-bottom-sm)',\n zIndex: zIndex ?? DEFAULT_POPOVER_Z_INDEX,\n ...overlayStyle,\n }}\n onMouseEnter={\n isHoverTrigger ? () => handleOpenChange(true) : undefined\n }\n onMouseLeave={\n isHoverTrigger ? () => handleOpenChange(false) : undefined\n }\n >\n {title && (\n <div className=\"ald-popover-title tw-mb-2 tw-text-sm tw-font-medium tw-text-[var(--content-primary)]\">\n {title}\n </div>\n )}\n {content && (\n // antd 兼容:保留 ant-popover-inner-content class,消费方 CSS 可能通过该选择器自定义样式\n <div className=\"ald-popover-inner-content ant-popover-inner-content\">\n {content}\n </div>\n )}\n {arrow && (\n <PopoverPrimitive.Arrow\n style={{ fill: 'var(--alias-colors-bg-skeleton-subtler, #fff)' }}\n />\n )}\n </PopoverPrimitive.Content>\n </PopoverPrimitive.Portal>\n </PopoverPrimitive.Root>\n );\n}\n\nexport default Popover;\n"],"mappings":";;;;;AAMA,IAAM,0BAA0B;AAmChC,IAAM,eAGF;CACF,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACP,SAAS;CACT,UAAU;CACV,YAAY;CACZ,aAAa;CACb,SAAS;CACT,YAAY;CACZ,UAAU;CACV,aAAa;CACd;AAED,IAAM,WACJ;CACE,SAAS;CACT,UAAU;CACV,YAAY;CACZ,aAAa;CACb,SAAS;CACT,YAAY;CACZ,UAAU;CACV,aAAa;CACd;AAEH,SAAS,iBAAiB,SAAoD;AAC5E,KAAI,MAAM,QAAQ,QAAQ,CAAE,QAAO,IAAI,IAAI,QAAQ;AACnD,KAAI,QAAS,QAAO,IAAI,IAAI,CAAC,QAAQ,CAAC;AACtC,QAAO,IAAI,IAAiB,CAAC,QAAQ,CAAC;;AAGxC,SAAS,QAAQ,OAAqB;CACpC,MAAM,EACJ,SACA,OACA,UACA,MACA,aACA,cACA,UAAU,SACV,YAAY,OACZ,kBACA,cACA,QAAQ,OACR,mBACA,WACE;CAEJ,MAAM,eAAe,MAAM,OACzB,qBAAqB,CACtB;CAED,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,MAAM;CACvD,MAAM,WAAW,iBAAiB,QAAQ;CAE1C,MAAM,eAAe,SAAS;CAC9B,MAAM,iBAAiB,SAAS,IAAI,QAAQ;CAC5C,MAAM,SAAS,eACX,OACA,iBACA,YACA,SAAS,SAAS,IAClB,QACA;CAEJ,MAAM,oBAAoB,QAAiB;AACzC,MAAI,CAAC,gBAAgB,eACnB,cAAa,IAAI;AAEnB,iBAAe,IAAI;;CAGrB,MAAM,OAAO,aAAa,cAAc;CACxC,MAAM,QAAQ,SAAS,cAAc;CAErC,MAAM,eAAe,MAAM,eAAe,SAAS,GACjD,WAEA,oBAAC,QAAD,EAAO,UAAgB,CAAA;AAGzB,KAAI,SAAS,SAAS,KAAK,CAAC,aAC1B,QAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;AAGxB,QACE,qBAAC,iBAAiB,MAAlB;EACE,MAAM;EACO;EACb,cAAc;YAHhB,CAKE,oBAAC,iBAAiB,SAAlB;GAA0B,SAAA;aACvB,iBACC,oBAAC,QAAD;IACE,oBAAoB,iBAAiB,KAAK;IAC1C,oBAAoB,iBAAiB,MAAM;cAE1C;IACI,CAAA,GAEP;GAEuB,CAAA,EAC3B,oBAAC,iBAAiB,QAAlB;GAAyB,WAAW,aAAa;aAC/C,qBAAC,iBAAiB,SAAlB;IACQ;IACC;IACP,YAAY;IAEZ,WAAW,GACT,0LACA,4CACA,iBACD;IACD,OAAO;KACL,WAAW;KACX,QAAQ,UAAU;KAClB,GAAG;KACJ;IACD,cACE,uBAAuB,iBAAiB,KAAK,GAAG;IAElD,cACE,uBAAuB,iBAAiB,MAAM,GAAG;cAnBrD;KAsBG,SACC,oBAAC,OAAD;MAAK,WAAU;gBACZ;MACG,CAAA;KAEP,WAEC,oBAAC,OAAD;MAAK,WAAU;gBACZ;MACG,CAAA;KAEP,SACC,oBAAC,iBAAiB,OAAlB,EACE,OAAO,EAAE,MAAM,iDAAiD,EAChE,CAAA;KAEqB;;GACH,CAAA,CACJ"}
|
|
@@ -26,7 +26,7 @@ function isShowSelectedSection(mode) {
|
|
|
26
26
|
return typeof mode === "object" && mode.showSelectedSection && mode.responsive;
|
|
27
27
|
}
|
|
28
28
|
var BaseSelect = React$1.forwardRef((props, ref) => {
|
|
29
|
-
const { id, className, displayValues, onDisplayValuesChange, displayMenu, notFoundContent, onClear, width, mode, status: customStatus, onOptionSelect, onClick, size: customSize, borderLess = false, disabled, placeholder, open, defaultOpen, onOpenChange, showSearch, innerSearchValue, setInnerSearchValue, allowClear, showArrow = true, prefix, suffixIcon, dropdownRender, overlayStyle, dropdownStyle, popupMatchSelectWidth = true, placement, popupClassName, style, ...restProps } = props;
|
|
29
|
+
const { id, className, displayValues, onDisplayValuesChange, displayMenu, notFoundContent, onClear, width, mode, status: customStatus, onOptionSelect, onClick, size: customSize, borderLess = false, disabled, placeholder, open, defaultOpen, onOpenChange, showSearch, innerSearchValue, setInnerSearchValue, allowClear, showArrow = true, prefix, suffixIcon, dropdownRender, overlayStyle, dropdownStyle, popupMatchSelectWidth = true, placement, popupClassName, allowOverlap, style, ...restProps } = props;
|
|
30
30
|
const setClassNames = prefixCls("select");
|
|
31
31
|
const selectRef = useRef(null);
|
|
32
32
|
const widthStyle = getWidthStyle(width);
|
|
@@ -151,6 +151,7 @@ var BaseSelect = React$1.forwardRef((props, ref) => {
|
|
|
151
151
|
dropdownRender,
|
|
152
152
|
overlayStyle: overlayStyle || dropdownStyle,
|
|
153
153
|
placement,
|
|
154
|
+
allowOverlap,
|
|
154
155
|
onOpenChange: (open) => {
|
|
155
156
|
if (isResponsiveMode) if (!mergedOpen && !showResponsiveSelectedSection && displayValues.length > 0 && isShowSelectedSection(mode)) setShowResponsiveSelectedSection(true);
|
|
156
157
|
else onToggleOpen(open);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseSelect.js","names":[],"sources":["../../src/Select/BaseSelect.tsx"],"sourcesContent":["import './ald-select.css';\nimport * as React from 'react';\nimport useMergedState from 'rc-util/es/hooks/useMergedState';\nimport { cn } from '../lib/utils';\nimport prefixCls from '../_utils/prefixCls';\n\n/** Align config type (locally defined to avoid rc-trigger dependency) */\nexport interface AlignType {\n points?: string[];\n offset?: (number | string)[];\n targetOffset?: (number | string)[];\n overflow?: { adjustX?: boolean; adjustY?: boolean };\n _experimental?: Record<string, any>;\n}\nimport SelectTrigger, { RefTriggerProps } from './SelectTrigger';\nimport Selector from './Selector';\nimport _ from 'lodash';\nimport { useContext, useRef, useState } from 'react';\nimport { FormItemInputContext } from '../Form/FormItemContext';\nimport getWidthStyle from './utils/getWidthStyle';\nimport Suffix from './components/Suffix';\nimport { PlacementType } from '../Dropdown';\nimport {\n BaseSelectRef,\n DisplayValueType,\n ISelectProps,\n LabelInValueType,\n SelectMenuProps,\n} from './interface';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { ConfigContext } from '../ConfigProvider';\nimport { useCompactItemContext } from '../Space/CompactContext';\nimport { MenuInfo } from '../Menu';\n\nexport type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);\n\nexport type RenderDOMFunc = (props: any) => HTMLElement;\n\nexport type Mode =\n | 'multiple'\n | {\n type: 'multiple';\n responsive?: boolean;\n maxRows?: number;\n showSelectedSection?: boolean;\n };\n\nexport type RawValueType = string | number;\n\nexport type CustomTagProps = {\n label: React.ReactNode;\n value: any;\n disabled: boolean;\n onClose: (event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n closable: boolean;\n};\nexport interface BaseSelectPrivateProps {\n // >>> MISC\n omitDomProps?: string[];\n\n // >>> Value\n displayValues: LabelInValueType[];\n onDisplayValuesChange: (\n values: LabelInValueType[],\n info: {\n type: 'add' | 'remove' | 'clear';\n values: LabelInValueType[];\n },\n ) => void;\n\n // >>> Active\n /** Current dropdown list active item string value */\n activeValue?: string;\n /** Link search input with target element */\n activeDescendantId?: string;\n onActiveValueChange?: (value: string | null) => void;\n}\n\nexport type BaseSelectPropsWithoutPrivate = Omit<\n BaseSelectProps,\n keyof BaseSelectPrivateProps\n>;\n\nexport interface BaseSelectProps\n extends BaseSelectPrivateProps,\n ISelectProps,\n React.AriaAttributes {\n className?: string;\n style?: React.CSSProperties;\n notFoundContent?: React.ReactNode;\n onClear?: () => void;\n innerSearchValue?: string;\n setInnerSearchValue?: (value: string) => void;\n displayMenu?: SelectMenuProps;\n // >>> Open\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n onOptionSelect?: (val: RawValueType) => void;\n\n // >>> Icons\n allowClear?: boolean;\n showArrow?: boolean;\n suffixIcon?: React.ReactNode;\n\n // >>> Dropdown\n dropdownAlign?: AlignType;\n placement?: PlacementType;\n getPopupContainer?: () => HTMLElement;\n\n // >>> Focus\n onBlur?: React.FocusEventHandler<HTMLElement>;\n onFocus?: React.FocusEventHandler<HTMLElement>;\n\n // >>> Rest Events\n onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n onMouseDown?: React.MouseEventHandler<HTMLDivElement>;\n onPopupScroll?: React.UIEventHandler<HTMLDivElement>;\n onInputKeyDown?: React.KeyboardEventHandler<\n HTMLInputElement | HTMLTextAreaElement\n >;\n onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n onClick?: React.MouseEventHandler<HTMLDivElement>;\n}\n\nexport function isMultiple(mode?: Mode) {\n return !!mode;\n}\nexport function isResponsive(mode?: Mode) {\n return mode === 'multiple' || (typeof mode === 'object' && mode?.responsive);\n}\nexport function isShowSelectedSection(mode?: Mode) {\n if (!mode || mode === 'multiple') {\n return false;\n }\n\n return (\n typeof mode === 'object' && mode.showSelectedSection && mode.responsive\n );\n}\nconst BaseSelect = React.forwardRef(\n (props: BaseSelectProps, ref: React.Ref<BaseSelectRef>) => {\n const {\n id,\n className,\n // Value\n displayValues,\n onDisplayValuesChange,\n displayMenu,\n notFoundContent,\n onClear,\n width,\n mode,\n status: customStatus,\n onOptionSelect,\n onClick,\n size: customSize,\n borderLess = false,\n // Status\n disabled,\n placeholder,\n\n // Open\n open,\n defaultOpen,\n onOpenChange,\n showSearch,\n innerSearchValue,\n setInnerSearchValue,\n // Icons\n allowClear,\n showArrow = true,\n prefix,\n suffixIcon,\n dropdownRender,\n overlayStyle,\n dropdownStyle,\n popupMatchSelectWidth = true,\n placement,\n popupClassName,\n style,\n ...restProps\n // Rest Props\n } = props;\n const setClassNames = prefixCls('select');\n const selectRef = useRef<HTMLDivElement>(null);\n const widthStyle = getWidthStyle(width);\n const dropdownRef = useRef<RefTriggerProps>(null);\n const isResponsiveMode = isResponsive(mode);\n const isMultipleMode = isMultiple(mode);\n /** Used for component focused management */\n const contentSize = useContext(SizeContext);\n const { direction } = React.useContext(ConfigContext);\n // ===================== Compact Item =====================\n const { compactSize, compactItemClassnames } = useCompactItemContext(\n 'ald-select',\n direction,\n );\n const size = compactSize || customSize || contentSize || 'middle';\n const {\n status: contextStatus,\n // hasFeedback,\n // isFormItemInput,\n // feedbackIcon,\n } = useContext(FormItemInputContext);\n\n const mergedStatus = customStatus || contextStatus || undefined;\n\n // =========================== Imperative ===========================\n React.useImperativeHandle(ref, () => ({\n focus: () => setFocus(true),\n blur: () => setFocus(false),\n open: () => onToggleOpen(true),\n close: () => {\n console.log('ref close');\n onToggleOpen(false);\n },\n }));\n const [focus, setFocus] = useState(false);\n const [isHover, setIsHover] = useState(false);\n // ============================== Open ==============================\n const [innerOpen, setInnerOpen] = useMergedState<boolean>(false, {\n defaultValue: defaultOpen,\n value: open,\n });\n const mergedOpen = innerOpen;\n const onToggleOpen = React.useCallback(\n (newOpen?: boolean) => {\n const nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;\n if (!nextOpen) {\n setShowResponsiveSelectedSection(false);\n setFocus(false);\n }\n if (mergedOpen !== nextOpen && !disabled) {\n setInnerOpen(nextOpen);\n onOpenChange?.(nextOpen);\n }\n },\n [mergedOpen, disabled, setInnerOpen, onOpenChange],\n );\n const [showResponsiveSelectedSection, setShowResponsiveSelectedSection] =\n useState(false);\n\n // ============================ Selector ============================\n const onSelectorRemove = (val: DisplayValueType) => {\n const newValues = displayValues.filter((i) => i !== val);\n\n onDisplayValuesChange(newValues, {\n type: 'remove',\n values: [\n {\n label: val.label,\n value: val.value as RawValueType,\n },\n ],\n });\n };\n\n const mergedClassName = cn(\n setClassNames('beta-ald-select', size, {\n active: mergedOpen || focus,\n borderless: borderLess,\n disabled: disabled,\n [`${mergedStatus}`]: !!mergedStatus,\n 'multiple-responsive': isResponsiveMode,\n 'multiple-default': isMultipleMode && !isResponsiveMode,\n }),\n className,\n compactItemClassnames,\n );\n const showMenu = React.useMemo(() => {\n if (!displayMenu) {\n return undefined;\n }\n\n return {\n ...displayMenu,\n onClick: (info: MenuInfo) => {\n displayMenu?.onClick?.(info);\n if (displayMenu && !isMultipleMode) {\n console.log('menu onClick', info);\n onToggleOpen(false);\n setFocus(false);\n }\n setIsHover(false);\n onOptionSelect?.(info.key);\n },\n };\n }, [displayMenu, isMultipleMode, onToggleOpen, onOptionSelect]);\n const onSelectClick = React.useCallback(\n (e: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) {\n return;\n }\n onClick?.(e);\n },\n [disabled, onClick],\n );\n React.useEffect(() => {\n const element = selectRef.current;\n if (element) {\n const handleMouseOver = () => setIsHover(true);\n const handleMouseOut = () => setIsHover(false);\n\n element.addEventListener('mouseover', handleMouseOver);\n element.addEventListener('mouseout', handleMouseOut);\n\n return () => {\n element.removeEventListener('mouseover', handleMouseOver);\n element.removeEventListener('mouseout', handleMouseOut);\n };\n }\n }, []);\n return (\n <div\n className={mergedClassName}\n style={{\n ...widthStyle,\n ...style,\n }}\n ref={selectRef}\n id={id}\n onClick={onSelectClick}\n >\n <SelectTrigger\n {...restProps}\n open={!!mergedOpen}\n notFoundContent={notFoundContent}\n menu={showMenu}\n ref={dropdownRef}\n showSearch={showSearch}\n searchValue={innerSearchValue}\n setInnerSearchValue={setInnerSearchValue}\n popupMatchSelectWidth={popupMatchSelectWidth}\n overlayClassName={popupClassName}\n // @ts-ignore\n dropdownRender={dropdownRender}\n overlayStyle={overlayStyle || dropdownStyle}\n placement={placement}\n onOpenChange={(open) => {\n if (isResponsiveMode) {\n if (\n !mergedOpen &&\n !showResponsiveSelectedSection &&\n displayValues.length > 0 &&\n isShowSelectedSection(mode)\n ) {\n setShowResponsiveSelectedSection(true);\n } else {\n onToggleOpen(open);\n }\n } else {\n onToggleOpen(open);\n }\n }}\n >\n {/* 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 ></Selector>\n )}\n </div>\n </SelectTrigger>\n <Suffix\n showArrow={showArrow}\n allowClear={allowClear}\n disabled={disabled}\n isHover={isHover}\n onClear={() => {\n onToggleOpen(false);\n\n onDisplayValuesChange([], {\n type: 'clear',\n values: displayValues,\n });\n onClear?.();\n }}\n isActive={innerOpen}\n icon={suffixIcon}\n displayValues={displayValues}\n ></Suffix>\n </div>\n );\n },\n);\n\nexport default BaseSelect;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BaseSelect.js","names":[],"sources":["../../src/Select/BaseSelect.tsx"],"sourcesContent":["import './ald-select.css';\nimport * as React from 'react';\nimport useMergedState from 'rc-util/es/hooks/useMergedState';\nimport { cn } from '../lib/utils';\nimport prefixCls from '../_utils/prefixCls';\n\n/** Align config type (locally defined to avoid rc-trigger dependency) */\nexport interface AlignType {\n points?: string[];\n offset?: (number | string)[];\n targetOffset?: (number | string)[];\n overflow?: { adjustX?: boolean; adjustY?: boolean };\n _experimental?: Record<string, any>;\n}\nimport SelectTrigger, { RefTriggerProps } from './SelectTrigger';\nimport Selector from './Selector';\nimport _ from 'lodash';\nimport { useContext, useRef, useState } from 'react';\nimport { FormItemInputContext } from '../Form/FormItemContext';\nimport getWidthStyle from './utils/getWidthStyle';\nimport Suffix from './components/Suffix';\nimport { PlacementType } from '../Dropdown';\nimport {\n BaseSelectRef,\n DisplayValueType,\n ISelectProps,\n LabelInValueType,\n SelectMenuProps,\n} from './interface';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { ConfigContext } from '../ConfigProvider';\nimport { useCompactItemContext } from '../Space/CompactContext';\nimport { MenuInfo } from '../Menu';\n\nexport type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);\n\nexport type RenderDOMFunc = (props: any) => HTMLElement;\n\nexport type Mode =\n | 'multiple'\n | {\n type: 'multiple';\n responsive?: boolean;\n maxRows?: number;\n showSelectedSection?: boolean;\n };\n\nexport type RawValueType = string | number;\n\nexport type CustomTagProps = {\n label: React.ReactNode;\n value: any;\n disabled: boolean;\n onClose: (event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n closable: boolean;\n};\nexport interface BaseSelectPrivateProps {\n // >>> MISC\n omitDomProps?: string[];\n\n // >>> Value\n displayValues: LabelInValueType[];\n onDisplayValuesChange: (\n values: LabelInValueType[],\n info: {\n type: 'add' | 'remove' | 'clear';\n values: LabelInValueType[];\n },\n ) => void;\n\n // >>> Active\n /** Current dropdown list active item string value */\n activeValue?: string;\n /** Link search input with target element */\n activeDescendantId?: string;\n onActiveValueChange?: (value: string | null) => void;\n}\n\nexport type BaseSelectPropsWithoutPrivate = Omit<\n BaseSelectProps,\n keyof BaseSelectPrivateProps\n>;\n\nexport interface BaseSelectProps\n extends BaseSelectPrivateProps,\n ISelectProps,\n React.AriaAttributes {\n className?: string;\n style?: React.CSSProperties;\n notFoundContent?: React.ReactNode;\n onClear?: () => void;\n innerSearchValue?: string;\n setInnerSearchValue?: (value: string) => void;\n displayMenu?: SelectMenuProps;\n // >>> Open\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n onOptionSelect?: (val: RawValueType) => void;\n\n // >>> Icons\n allowClear?: boolean;\n showArrow?: boolean;\n suffixIcon?: React.ReactNode;\n\n // >>> Dropdown\n dropdownAlign?: AlignType;\n placement?: PlacementType;\n getPopupContainer?: () => HTMLElement;\n\n // >>> Focus\n onBlur?: React.FocusEventHandler<HTMLElement>;\n onFocus?: React.FocusEventHandler<HTMLElement>;\n\n // >>> Rest Events\n onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n onMouseDown?: React.MouseEventHandler<HTMLDivElement>;\n onPopupScroll?: React.UIEventHandler<HTMLDivElement>;\n onInputKeyDown?: React.KeyboardEventHandler<\n HTMLInputElement | HTMLTextAreaElement\n >;\n onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n onClick?: React.MouseEventHandler<HTMLDivElement>;\n}\n\nexport function isMultiple(mode?: Mode) {\n return !!mode;\n}\nexport function isResponsive(mode?: Mode) {\n return mode === 'multiple' || (typeof mode === 'object' && mode?.responsive);\n}\nexport function isShowSelectedSection(mode?: Mode) {\n if (!mode || mode === 'multiple') {\n return false;\n }\n\n return (\n typeof mode === 'object' && mode.showSelectedSection && mode.responsive\n );\n}\nconst BaseSelect = React.forwardRef(\n (props: BaseSelectProps, ref: React.Ref<BaseSelectRef>) => {\n const {\n id,\n className,\n // Value\n displayValues,\n onDisplayValuesChange,\n displayMenu,\n notFoundContent,\n onClear,\n width,\n mode,\n status: customStatus,\n onOptionSelect,\n onClick,\n size: customSize,\n borderLess = false,\n // Status\n disabled,\n placeholder,\n\n // Open\n open,\n defaultOpen,\n onOpenChange,\n showSearch,\n innerSearchValue,\n setInnerSearchValue,\n // Icons\n allowClear,\n showArrow = true,\n prefix,\n suffixIcon,\n dropdownRender,\n overlayStyle,\n dropdownStyle,\n popupMatchSelectWidth = true,\n placement,\n popupClassName,\n allowOverlap,\n style,\n ...restProps\n // Rest Props\n } = props;\n const setClassNames = prefixCls('select');\n const selectRef = useRef<HTMLDivElement>(null);\n const widthStyle = getWidthStyle(width);\n const dropdownRef = useRef<RefTriggerProps>(null);\n const isResponsiveMode = isResponsive(mode);\n const isMultipleMode = isMultiple(mode);\n /** Used for component focused management */\n const contentSize = useContext(SizeContext);\n const { direction } = React.useContext(ConfigContext);\n // ===================== Compact Item =====================\n const { compactSize, compactItemClassnames } = useCompactItemContext(\n 'ald-select',\n direction,\n );\n const size = compactSize || customSize || contentSize || 'middle';\n const {\n status: contextStatus,\n // hasFeedback,\n // isFormItemInput,\n // feedbackIcon,\n } = useContext(FormItemInputContext);\n\n const mergedStatus = customStatus || contextStatus || undefined;\n\n // =========================== Imperative ===========================\n React.useImperativeHandle(ref, () => ({\n focus: () => setFocus(true),\n blur: () => setFocus(false),\n open: () => onToggleOpen(true),\n close: () => {\n console.log('ref close');\n onToggleOpen(false);\n },\n }));\n const [focus, setFocus] = useState(false);\n const [isHover, setIsHover] = useState(false);\n // ============================== Open ==============================\n const [innerOpen, setInnerOpen] = useMergedState<boolean>(false, {\n defaultValue: defaultOpen,\n value: open,\n });\n const mergedOpen = innerOpen;\n const onToggleOpen = React.useCallback(\n (newOpen?: boolean) => {\n const nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;\n if (!nextOpen) {\n setShowResponsiveSelectedSection(false);\n setFocus(false);\n }\n if (mergedOpen !== nextOpen && !disabled) {\n setInnerOpen(nextOpen);\n onOpenChange?.(nextOpen);\n }\n },\n [mergedOpen, disabled, setInnerOpen, onOpenChange],\n );\n const [showResponsiveSelectedSection, setShowResponsiveSelectedSection] =\n useState(false);\n\n // ============================ Selector ============================\n const onSelectorRemove = (val: DisplayValueType) => {\n const newValues = displayValues.filter((i) => i !== val);\n\n onDisplayValuesChange(newValues, {\n type: 'remove',\n values: [\n {\n label: val.label,\n value: val.value as RawValueType,\n },\n ],\n });\n };\n\n const mergedClassName = cn(\n setClassNames('beta-ald-select', size, {\n active: mergedOpen || focus,\n borderless: borderLess,\n disabled: disabled,\n [`${mergedStatus}`]: !!mergedStatus,\n 'multiple-responsive': isResponsiveMode,\n 'multiple-default': isMultipleMode && !isResponsiveMode,\n }),\n className,\n compactItemClassnames,\n );\n const showMenu = React.useMemo(() => {\n if (!displayMenu) {\n return undefined;\n }\n\n return {\n ...displayMenu,\n onClick: (info: MenuInfo) => {\n displayMenu?.onClick?.(info);\n if (displayMenu && !isMultipleMode) {\n console.log('menu onClick', info);\n onToggleOpen(false);\n setFocus(false);\n }\n setIsHover(false);\n onOptionSelect?.(info.key);\n },\n };\n }, [displayMenu, isMultipleMode, onToggleOpen, onOptionSelect]);\n const onSelectClick = React.useCallback(\n (e: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) {\n return;\n }\n onClick?.(e);\n },\n [disabled, onClick],\n );\n React.useEffect(() => {\n const element = selectRef.current;\n if (element) {\n const handleMouseOver = () => setIsHover(true);\n const handleMouseOut = () => setIsHover(false);\n\n element.addEventListener('mouseover', handleMouseOver);\n element.addEventListener('mouseout', handleMouseOut);\n\n return () => {\n element.removeEventListener('mouseover', handleMouseOver);\n element.removeEventListener('mouseout', handleMouseOut);\n };\n }\n }, []);\n return (\n <div\n className={mergedClassName}\n style={{\n ...widthStyle,\n ...style,\n }}\n ref={selectRef}\n id={id}\n onClick={onSelectClick}\n >\n <SelectTrigger\n {...restProps}\n open={!!mergedOpen}\n notFoundContent={notFoundContent}\n menu={showMenu}\n ref={dropdownRef}\n showSearch={showSearch}\n searchValue={innerSearchValue}\n setInnerSearchValue={setInnerSearchValue}\n popupMatchSelectWidth={popupMatchSelectWidth}\n overlayClassName={popupClassName}\n // @ts-ignore\n dropdownRender={dropdownRender}\n overlayStyle={overlayStyle || dropdownStyle}\n placement={placement}\n 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 ></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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"}
|
|
@@ -21,6 +21,10 @@ export interface ISelectProps<ValueType = any, OptionType extends BaseOptionType
|
|
|
21
21
|
dropdownClassName?: string;
|
|
22
22
|
popupClassName?: string;
|
|
23
23
|
placement?: PlacementType;
|
|
24
|
+
/**
|
|
25
|
+
* 空间不足时自动计算下拉面板最大高度并启用内部滚动,继承自 Dropdown。
|
|
26
|
+
*/
|
|
27
|
+
allowOverlap?: boolean;
|
|
24
28
|
labelInValue?: boolean;
|
|
25
29
|
options?: OptionType[];
|
|
26
30
|
menu?: SelectMenuProps;
|
package/dist/Tree/Tree2.js
CHANGED
package/dist/Tree/Tree2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tree2.js","names":[],"sources":["../../src/Tree/Tree.tsx"],"sourcesContent":["import './tree.css';\nimport { cn } from '../lib/utils';\nimport { produce } from 'immer';\nimport { noop } from 'lodash';\nimport type { BasicDataNode, TreeProps as RcTreeProps } from 'rc-tree';\nimport RcTree from 'rc-tree';\nimport type { DataNode, Key } from 'rc-tree/es/interface';\nimport * as React from 'react';\nimport { ConfigContext } from '../ConfigProvider';\nimport HighlightText from '../HighlightText';\nimport { ArrowRightLightLine, DragLine } from '../Icon';\nimport collapseMotion from '../_utils/motion';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport dropIndicatorRender from './utils/dropIndicator';\nimport renderSwitcherIcon from './utils/iconUtil';\nconst TREE_SWITCH_CION_SIZE = 16;\nconst NODE_DISABLE_CLASS_NAME = 'ald-tree-node-disabled';\nexport type SwitcherIcon =\n | React.ReactNode\n | ((props: AldTreeNodeProps) => React.ReactNode);\nexport type TreeLeafIcon =\n | React.ReactNode\n | ((props: AldTreeNodeProps) => React.ReactNode);\n\nexport interface AldTreeNodeAttribute {\n eventKey: string;\n prefixCls: string;\n className: string;\n expanded: boolean;\n selected: boolean;\n checked: boolean;\n halfChecked: boolean;\n children: React.ReactNode;\n title: React.ReactNode;\n pos: string;\n dragOver: boolean;\n dragOverGapTop: boolean;\n dragOverGapBottom: boolean;\n isLeaf: boolean;\n selectable: boolean;\n disabled: boolean;\n disableCheckbox: boolean;\n}\n\nexport interface AldTreeNodeProps {\n className?: string;\n checkable?: boolean;\n disabled?: boolean;\n disableCheckbox?: boolean;\n title?: string | React.ReactNode;\n key?: Key;\n eventKey?: string;\n isLeaf?: boolean;\n checked?: boolean;\n expanded?: boolean;\n loading?: boolean;\n selected?: boolean;\n selectable?: boolean;\n icon?:\n | ((treeNode: AldTreeNodeAttribute) => React.ReactNode)\n | React.ReactNode;\n children?: React.ReactNode;\n [customProp: string]: any;\n}\n\nexport type AldTreeNode = React.Component<AldTreeNodeProps, object>;\n\nexport interface AldTreeNodeBaseEvent {\n node: AldTreeNode;\n nativeEvent: MouseEvent;\n}\n\nexport interface AldTreeNodeCheckedEvent extends AldTreeNodeBaseEvent {\n event: 'check';\n checked?: boolean;\n checkedNodes?: AldTreeNode[];\n}\n\nexport interface AldTreeNodeSelectedEvent extends AldTreeNodeBaseEvent {\n event: 'select';\n selected?: boolean;\n selectedNodes?: DataNode[];\n}\n\nexport interface AldTreeNodeExpandedEvent extends AldTreeNodeBaseEvent {\n expanded?: boolean;\n}\n\nexport interface AldTreeNodeMouseEvent {\n node: AldTreeNode;\n event: React.DragEvent<HTMLElement>;\n}\n\nexport interface AldTreeNodeDragEnterEvent extends AldTreeNodeMouseEvent {\n expandedKeys: Key[];\n}\n\nexport interface AldTreeNodeAttribute {\n node: AldTreeNode;\n dragNode: AldTreeNode;\n dragNodesKeys: Key[];\n dropPosition: number;\n dropToGap?: boolean;\n event: React.MouseEvent<HTMLElement>;\n}\n\n// [Legacy] Compatible for v3\nexport type TreeNodeNormal = DataNode;\n\ntype DraggableFn = (node: DataNode) => boolean;\n\ninterface DraggableConfig {\n icon?: React.ReactNode | false;\n nodeDraggable?: DraggableFn;\n}\n\nexport interface TreeProps<T extends BasicDataNode = DataNode>\n extends Omit<\n RcTreeProps<T>,\n | 'prefixCls'\n | 'showLine'\n | 'direction'\n | 'draggable'\n | 'icon'\n | 'switcherIcon'\n | 'filterTreeNode'\n > {\n showLine?: boolean | { showLeafIcon: boolean | TreeLeafIcon };\n className?: string;\n /** 是否支持多选 */\n multiple?: boolean;\n /** 是否自动展开父节点 */\n autoExpandParent?: boolean;\n /** Checkable状态下节点选择完全受控(父子节点选中状态不再关联) */\n checkStrictly?: boolean;\n /** 是否支持选中 */\n checkable?: boolean;\n /** 是否禁用树 */\n disabled?: boolean;\n /** 默认展开所有树节点 */\n defaultExpandAll?: boolean;\n /** 默认展开对应树节点 */\n defaultExpandParent?: boolean;\n /** 默认展开指定的树节点 */\n defaultExpandedKeys?: Key[];\n /** (受控)展开指定的树节点 */\n expandedKeys?: Key[];\n /** (受控)选中复选框的树节点 */\n checkedKeys?: Key[] | { checked: Key[]; halfChecked: Key[] };\n /** 默认选中复选框的树节点 */\n defaultCheckedKeys?: Key[];\n /** (受控)设置选中的树节点 */\n selectedKeys?: Key[];\n /** 默认选中的树节点 */\n defaultSelectedKeys?: Key[];\n selectable?: boolean;\n /** 点击树节点触发 */\n filterTreeNode?: (node: DataNode) => boolean;\n loadedKeys?: Key[];\n /** 设置节点可拖拽(IE>8) */\n draggable?: DraggableFn | boolean | DraggableConfig;\n style?: React.CSSProperties;\n showIcon?: boolean;\n icon?:\n | ((nodeProps: AldTreeNodeAttribute) => React.ReactNode)\n | React.ReactNode\n | RcTreeProps<T>['icon'];\n switcherIcon?: SwitcherIcon | RcTreeProps<T>['switcherIcon'];\n prefixCls?: string;\n children?: React.ReactNode;\n blockNode?: boolean;\n size?: 'large' | 'small';\n titleRender?: (node: T) => React.ReactNode;\n showTabLeader?: boolean;\n handlerRender?: (node: T) => React.ReactNode;\n highlightKeywords?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst Tree = React.forwardRef<any, TreeProps>((props, ref) => {\n const { locale } = React.useContext(LocaleContext);\n const t = getTranslator(locale);\n\n const { getPrefixCls, direction, virtual } = React.useContext(ConfigContext);\n const size = props.size || 'large';\n const {\n className,\n showIcon = false,\n showLine,\n blockNode = false,\n children,\n checkable = false,\n selectable = true,\n draggable,\n titleRender,\n showTabLeader,\n handlerRender = noop,\n filterTreeNode,\n treeData,\n highlightKeywords,\n motion = { ...collapseMotion, motionAppear: false },\n ...rest\n } = props;\n const prefixCls = getPrefixCls('tree', 'ald-tree');\n\n const customTitleRender = React.useCallback(\n (node: DataNode) => {\n const renderedTitle = titleRender\n ? titleRender(node)\n : typeof node.title === 'function'\n ? node.title(node)\n : node.title;\n return (\n <>\n {renderedTitle}\n {showTabLeader && <div className=\"ald-tree-tab-leader\"></div>}\n {handlerRender && (handlerRender(node) as React.ReactNode)}\n </>\n );\n },\n [titleRender, showTabLeader, handlerRender],\n );\n const newProps = {\n ...rest,\n checkable,\n selectable,\n showIcon,\n motion,\n blockNode,\n showLine: Boolean(showLine),\n dropIndicatorRender,\n titleRender: customTitleRender,\n };\n\n const draggableConfig = React.useMemo(() => {\n if (!draggable) {\n return false;\n }\n const newIcon = (\n <DragLine\n size={TREE_SWITCH_CION_SIZE}\n color={'var(--alias-colors-icon-subtle)'}\n ></DragLine>\n );\n let mergedDraggable: DraggableConfig = {\n icon: newIcon,\n };\n switch (typeof draggable) {\n case 'function':\n mergedDraggable.nodeDraggable = draggable;\n break;\n case 'object':\n mergedDraggable = { ...draggable, icon: newIcon };\n break;\n default:\n break;\n // Do nothing\n }\n\n return mergedDraggable;\n }, [draggable]);\n const renderIndent = (nodeProps: AldTreeNodeProps) => {\n const { pos, isLeaf } = nodeProps as AldTreeNodeProps & { pos?: string };\n // Determine level from `pos` string (e.g. \"0-0-1\" → level 2)\n const level = pos ? pos.split('-').length - 1 : 0;\n const iconSize = TREE_SWITCH_CION_SIZE;\n let indentWidth = isLeaf ? iconSize : 0;\n indentWidth += level * (iconSize / 2);\n return <span style={{ width: indentWidth, flexShrink: 0 }}></span>;\n };\n const newTreeData = React.useMemo(() => {\n if (!filterTreeNode || !treeData) return treeData;\n\n const shouldNodeDisabled = (node: DataNode): boolean => {\n // 初始化一个标志来表示是否需要为当前节点添加className\n let shouldAddDisabled = true;\n if (filterTreeNode(node)) {\n shouldAddDisabled = false;\n }\n\n if (node.children) {\n // 遍历当前节点的子节点,只要有一个子节点不disable,则该不需要添加className\n const allChildrenShouldAddDisabled = node.children.reduce(\n (pre, child) => {\n return shouldNodeDisabled(child) && pre;\n },\n shouldAddDisabled,\n );\n shouldAddDisabled = allChildrenShouldAddDisabled;\n }\n\n // 如果shouldAddDisabled为true,就为当前节点添加className\n if (shouldAddDisabled) {\n node.className = node.className?.includes(NODE_DISABLE_CLASS_NAME)\n ? node.className\n : cn(node.className, NODE_DISABLE_CLASS_NAME);\n } else {\n const reg = /ald-tree-node-disabled/g;\n node.className?.replace(reg, ' ');\n }\n if (highlightKeywords && typeof node.title !== 'function') {\n node.title = (\n <HighlightText keyword={highlightKeywords}>\n {node.title}\n </HighlightText>\n );\n }\n return shouldAddDisabled;\n };\n const newTreeData = produce(treeData, (draft) => {\n for (const rootNode of draft) {\n shouldNodeDisabled(rootNode);\n }\n });\n return newTreeData;\n }, [filterTreeNode, treeData, highlightKeywords]);\n\n const noChildren = React.useMemo(() => {\n if (newTreeData?.length) {\n return newTreeData.every((node) => {\n return !node.children?.length && node.isLeaf !== false;\n });\n }\n return true;\n }, [newTreeData]);\n\n return (\n <RcTree\n itemHeight={20}\n ref={ref}\n virtual={virtual}\n {...newProps}\n prefixCls={prefixCls}\n treeData={newTreeData}\n className={cn(\n {\n [`${prefixCls}-icon-hide`]: !showIcon,\n [`${prefixCls}-block-node`]: blockNode,\n [`${prefixCls}-unselectable`]: !selectable,\n [`${prefixCls}-large`]: size === 'large',\n [`${prefixCls}-rtl`]: direction === 'rtl',\n ['ald-draggable-tree']: draggable,\n [`${prefixCls}-no-children`]: noChildren,\n },\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ant-tree',\n className,\n )}\n direction={direction as any}\n checkable={\n checkable ? (\n <span className={`${prefixCls}-checkbox-inner`} />\n ) : (\n checkable\n )\n }\n selectable={selectable}\n // @ts-ignore\n switcherIcon={(nodeProps: AldTreeNodeProps) => {\n return (\n <>\n {renderIndent(nodeProps)}\n {renderSwitcherIcon(\n prefixCls,\n <ArrowRightLightLine\n size={TREE_SWITCH_CION_SIZE}\n color={'var(--alias-colors-icon-subtle)'}\n >\n {t.Tree.expand}\n </ArrowRightLightLine>,\n showLine,\n nodeProps,\n TREE_SWITCH_CION_SIZE,\n )}\n </>\n );\n }}\n draggable={draggableConfig}\n >\n {children}\n </RcTree>\n );\n});\n\nexport default Tree;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tree2.js","names":[],"sources":["../../src/Tree/Tree.tsx"],"sourcesContent":["import './tree.css';\nimport { cn } from '../lib/utils';\nimport { produce } from 'immer';\nimport { noop } from 'lodash';\nimport type { BasicDataNode, TreeProps as RcTreeProps } from 'rc-tree';\nimport RcTree from 'rc-tree';\nimport type { DataNode, Key } from 'rc-tree/es/interface';\nimport * as React from 'react';\nimport { ConfigContext } from '../ConfigProvider';\nimport HighlightText from '../HighlightText';\nimport { ArrowRightLightLine, DragLine } from '../Icon';\nimport collapseMotion from '../_utils/motion';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport dropIndicatorRender from './utils/dropIndicator';\nimport renderSwitcherIcon from './utils/iconUtil';\nconst TREE_SWITCH_CION_SIZE = 16;\nconst NODE_DISABLE_CLASS_NAME = 'ald-tree-node-disabled';\nexport type SwitcherIcon =\n | React.ReactNode\n | ((props: AldTreeNodeProps) => React.ReactNode);\nexport type TreeLeafIcon =\n | React.ReactNode\n | ((props: AldTreeNodeProps) => React.ReactNode);\n\nexport interface AldTreeNodeAttribute {\n eventKey: string;\n prefixCls: string;\n className: string;\n expanded: boolean;\n selected: boolean;\n checked: boolean;\n halfChecked: boolean;\n children: React.ReactNode;\n title: React.ReactNode;\n pos: string;\n dragOver: boolean;\n dragOverGapTop: boolean;\n dragOverGapBottom: boolean;\n isLeaf: boolean;\n selectable: boolean;\n disabled: boolean;\n disableCheckbox: boolean;\n}\n\nexport interface AldTreeNodeProps {\n className?: string;\n checkable?: boolean;\n disabled?: boolean;\n disableCheckbox?: boolean;\n title?: string | React.ReactNode;\n key?: Key;\n eventKey?: string;\n isLeaf?: boolean;\n checked?: boolean;\n expanded?: boolean;\n loading?: boolean;\n selected?: boolean;\n selectable?: boolean;\n icon?:\n | ((treeNode: AldTreeNodeAttribute) => React.ReactNode)\n | React.ReactNode;\n children?: React.ReactNode;\n [customProp: string]: any;\n}\n\nexport type AldTreeNode = React.Component<AldTreeNodeProps, object>;\n\nexport interface AldTreeNodeBaseEvent {\n node: AldTreeNode;\n nativeEvent: MouseEvent;\n}\n\nexport interface AldTreeNodeCheckedEvent extends AldTreeNodeBaseEvent {\n event: 'check';\n checked?: boolean;\n checkedNodes?: AldTreeNode[];\n}\n\nexport interface AldTreeNodeSelectedEvent extends AldTreeNodeBaseEvent {\n event: 'select';\n selected?: boolean;\n selectedNodes?: DataNode[];\n}\n\nexport interface AldTreeNodeExpandedEvent extends AldTreeNodeBaseEvent {\n expanded?: boolean;\n}\n\nexport interface AldTreeNodeMouseEvent {\n node: AldTreeNode;\n event: React.DragEvent<HTMLElement>;\n}\n\nexport interface AldTreeNodeDragEnterEvent extends AldTreeNodeMouseEvent {\n expandedKeys: Key[];\n}\n\nexport interface AldTreeNodeAttribute {\n node: AldTreeNode;\n dragNode: AldTreeNode;\n dragNodesKeys: Key[];\n dropPosition: number;\n dropToGap?: boolean;\n event: React.MouseEvent<HTMLElement>;\n}\n\n// [Legacy] Compatible for v3\nexport type TreeNodeNormal = DataNode;\n\ntype DraggableFn = (node: DataNode) => boolean;\n\ninterface DraggableConfig {\n icon?: React.ReactNode | false;\n nodeDraggable?: DraggableFn;\n}\n\nexport interface TreeProps<T extends BasicDataNode = DataNode>\n extends Omit<\n RcTreeProps<T>,\n | 'prefixCls'\n | 'showLine'\n | 'direction'\n | 'draggable'\n | 'icon'\n | 'switcherIcon'\n | 'filterTreeNode'\n > {\n showLine?: boolean | { showLeafIcon: boolean | TreeLeafIcon };\n className?: string;\n /** 是否支持多选 */\n multiple?: boolean;\n /** 是否自动展开父节点 */\n autoExpandParent?: boolean;\n /** Checkable状态下节点选择完全受控(父子节点选中状态不再关联) */\n checkStrictly?: boolean;\n /** 是否支持选中 */\n checkable?: boolean;\n /** 是否禁用树 */\n disabled?: boolean;\n /** 默认展开所有树节点 */\n defaultExpandAll?: boolean;\n /** 默认展开对应树节点 */\n defaultExpandParent?: boolean;\n /** 默认展开指定的树节点 */\n defaultExpandedKeys?: Key[];\n /** (受控)展开指定的树节点 */\n expandedKeys?: Key[];\n /** (受控)选中复选框的树节点 */\n checkedKeys?: Key[] | { checked: Key[]; halfChecked: Key[] };\n /** 默认选中复选框的树节点 */\n defaultCheckedKeys?: Key[];\n /** (受控)设置选中的树节点 */\n selectedKeys?: Key[];\n /** 默认选中的树节点 */\n defaultSelectedKeys?: Key[];\n selectable?: boolean;\n /** 点击树节点触发 */\n filterTreeNode?: (node: DataNode) => boolean;\n loadedKeys?: Key[];\n /** 设置节点可拖拽(IE>8) */\n draggable?: DraggableFn | boolean | DraggableConfig;\n style?: React.CSSProperties;\n showIcon?: boolean;\n icon?:\n | ((nodeProps: AldTreeNodeAttribute) => React.ReactNode)\n | React.ReactNode\n | RcTreeProps<T>['icon'];\n switcherIcon?: SwitcherIcon | RcTreeProps<T>['switcherIcon'];\n prefixCls?: string;\n children?: React.ReactNode;\n blockNode?: boolean;\n size?: 'large' | 'small';\n titleRender?: (node: T) => React.ReactNode;\n showTabLeader?: boolean;\n handlerRender?: (node: T) => React.ReactNode;\n highlightKeywords?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst Tree = React.forwardRef<any, TreeProps>((props, ref) => {\n const { locale } = React.useContext(LocaleContext);\n const t = getTranslator(locale);\n\n const { getPrefixCls, direction, virtual } = React.useContext(ConfigContext);\n const size = props.size || 'large';\n const {\n className,\n showIcon = false,\n showLine,\n blockNode = false,\n children,\n checkable = false,\n selectable = true,\n draggable,\n titleRender,\n showTabLeader,\n handlerRender = noop,\n filterTreeNode,\n treeData,\n highlightKeywords,\n motion = { ...collapseMotion, motionAppear: false },\n ...rest\n } = props;\n const prefixCls = getPrefixCls('tree', 'ald-tree');\n\n const customTitleRender = React.useCallback(\n (node: DataNode) => {\n const renderedTitle = titleRender\n ? titleRender(node)\n : typeof node.title === 'function'\n ? node.title(node)\n : node.title;\n return (\n <>\n {renderedTitle}\n {showTabLeader && <div className=\"ald-tree-tab-leader\"></div>}\n {handlerRender && (handlerRender(node) as React.ReactNode)}\n </>\n );\n },\n [titleRender, showTabLeader, handlerRender],\n );\n const newProps = {\n ...rest,\n checkable,\n selectable,\n showIcon,\n motion,\n blockNode,\n showLine: Boolean(showLine),\n dropIndicatorRender,\n titleRender: customTitleRender,\n };\n\n const draggableConfig = React.useMemo(() => {\n if (!draggable) {\n return false;\n }\n const newIcon = (\n <DragLine\n size={TREE_SWITCH_CION_SIZE}\n color={'var(--alias-colors-icon-subtle)'}\n ></DragLine>\n );\n let mergedDraggable: DraggableConfig = {\n icon: newIcon,\n };\n switch (typeof draggable) {\n case 'function':\n mergedDraggable.nodeDraggable = draggable;\n break;\n case 'object':\n mergedDraggable = {\n ...draggable,\n icon: draggable.icon === undefined ? newIcon : draggable.icon,\n };\n break;\n default:\n break;\n // Do nothing\n }\n\n return mergedDraggable;\n }, [draggable]);\n const renderIndent = (nodeProps: AldTreeNodeProps) => {\n const { pos, isLeaf } = nodeProps as AldTreeNodeProps & { pos?: string };\n // Determine level from `pos` string (e.g. \"0-0-1\" → level 2)\n const level = pos ? pos.split('-').length - 1 : 0;\n const iconSize = TREE_SWITCH_CION_SIZE;\n let indentWidth = isLeaf ? iconSize : 0;\n indentWidth += level * (iconSize / 2);\n return <span style={{ width: indentWidth, flexShrink: 0 }}></span>;\n };\n const newTreeData = React.useMemo(() => {\n if (!filterTreeNode || !treeData) return treeData;\n\n const shouldNodeDisabled = (node: DataNode): boolean => {\n // 初始化一个标志来表示是否需要为当前节点添加className\n let shouldAddDisabled = true;\n if (filterTreeNode(node)) {\n shouldAddDisabled = false;\n }\n\n if (node.children) {\n // 遍历当前节点的子节点,只要有一个子节点不disable,则该不需要添加className\n const allChildrenShouldAddDisabled = node.children.reduce(\n (pre, child) => {\n return shouldNodeDisabled(child) && pre;\n },\n shouldAddDisabled,\n );\n shouldAddDisabled = allChildrenShouldAddDisabled;\n }\n\n // 如果shouldAddDisabled为true,就为当前节点添加className\n if (shouldAddDisabled) {\n node.className = node.className?.includes(NODE_DISABLE_CLASS_NAME)\n ? node.className\n : cn(node.className, NODE_DISABLE_CLASS_NAME);\n } else {\n const reg = /ald-tree-node-disabled/g;\n node.className?.replace(reg, ' ');\n }\n if (highlightKeywords && typeof node.title !== 'function') {\n node.title = (\n <HighlightText keyword={highlightKeywords}>\n {node.title}\n </HighlightText>\n );\n }\n return shouldAddDisabled;\n };\n const newTreeData = produce(treeData, (draft) => {\n for (const rootNode of draft) {\n shouldNodeDisabled(rootNode);\n }\n });\n return newTreeData;\n }, [filterTreeNode, treeData, highlightKeywords]);\n\n const noChildren = React.useMemo(() => {\n if (newTreeData?.length) {\n return newTreeData.every((node) => {\n return !node.children?.length && node.isLeaf !== false;\n });\n }\n return true;\n }, [newTreeData]);\n\n return (\n <RcTree\n itemHeight={20}\n ref={ref}\n virtual={virtual}\n {...newProps}\n prefixCls={prefixCls}\n treeData={newTreeData}\n className={cn(\n {\n [`${prefixCls}-icon-hide`]: !showIcon,\n [`${prefixCls}-block-node`]: blockNode,\n [`${prefixCls}-unselectable`]: !selectable,\n [`${prefixCls}-large`]: size === 'large',\n [`${prefixCls}-rtl`]: direction === 'rtl',\n ['ald-draggable-tree']: draggable,\n [`${prefixCls}-no-children`]: noChildren,\n },\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ant-tree',\n className,\n )}\n direction={direction as any}\n checkable={\n checkable ? (\n <span className={`${prefixCls}-checkbox-inner`} />\n ) : (\n checkable\n )\n }\n selectable={selectable}\n // @ts-ignore\n switcherIcon={(nodeProps: AldTreeNodeProps) => {\n return (\n <>\n {renderIndent(nodeProps)}\n {renderSwitcherIcon(\n prefixCls,\n <ArrowRightLightLine\n size={TREE_SWITCH_CION_SIZE}\n color={'var(--alias-colors-icon-subtle)'}\n >\n {t.Tree.expand}\n </ArrowRightLightLine>,\n showLine,\n nodeProps,\n TREE_SWITCH_CION_SIZE,\n )}\n </>\n );\n }}\n draggable={draggableConfig}\n >\n {children}\n </RcTree>\n );\n});\n\nexport default Tree;\n"],"mappings":"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"}
|