@oceanbase/ui 0.2.14 → 0.2.16
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/ui.min.css +1 -1
- package/dist/ui.min.js +1 -1
- package/es/BasicLayout/index.js +2 -3
- package/es/BasicLayout/style/index.d.ts +5 -1
- package/es/ContentWithIcon/index.d.ts +21 -0
- package/es/ContentWithIcon/index.js +110 -0
- package/{lib/ContentWithQuestion → es/ContentWithIcon}/index.less +5 -1
- package/es/Highlight/index.d.ts +1 -1
- package/es/Lottie/index.d.ts +2 -1
- package/es/PageContainer/index.js +2 -3
- package/es/PageContainer/style/index.d.ts +5 -1
- package/es/TagSelect/Group.d.ts +23 -0
- package/es/TagSelect/Group.js +121 -0
- package/es/TagSelect/Item.d.ts +17 -0
- package/es/TagSelect/Item.js +84 -0
- package/es/TagSelect/TagSelectContext.d.ts +13 -0
- package/es/TagSelect/TagSelectContext.js +3 -0
- package/es/TagSelect/index.d.ts +6 -0
- package/es/TagSelect/index.js +6 -0
- package/es/TagSelect/style/index.d.ts +9 -0
- package/es/TagSelect/style/index.js +98 -0
- package/es/_util/genComponentStyleHook.d.ts +5 -1
- package/es/_util/useNavigate.d.ts +1 -1
- package/es/index.d.ts +2 -1
- package/es/index.js +3 -2
- package/lib/BasicLayout/index.js +2 -2
- package/lib/BasicLayout/style/index.d.ts +5 -1
- package/lib/ContentWithIcon/index.d.ts +21 -0
- package/lib/ContentWithIcon/index.js +130 -0
- package/{es/ContentWithQuestion → lib/ContentWithIcon}/index.less +5 -1
- package/lib/Highlight/index.d.ts +1 -1
- package/lib/Lottie/index.d.ts +2 -1
- package/lib/PageContainer/index.js +2 -3
- package/lib/PageContainer/style/index.d.ts +5 -1
- package/lib/TagSelect/Group.d.ts +23 -0
- package/lib/TagSelect/Group.js +128 -0
- package/lib/TagSelect/Item.d.ts +17 -0
- package/lib/TagSelect/Item.js +108 -0
- package/lib/TagSelect/TagSelectContext.d.ts +13 -0
- package/lib/TagSelect/TagSelectContext.js +27 -0
- package/lib/TagSelect/index.d.ts +6 -0
- package/lib/TagSelect/index.js +37 -0
- package/lib/TagSelect/style/index.d.ts +9 -0
- package/lib/TagSelect/style/index.js +152 -0
- package/lib/_util/genComponentStyleHook.d.ts +5 -1
- package/lib/_util/useNavigate.d.ts +1 -1
- package/lib/index.d.ts +2 -1
- package/lib/index.js +6 -3
- package/package.json +9 -9
- package/es/ContentWithQuestion/index.d.ts +0 -13
- package/es/ContentWithQuestion/index.js +0 -46
- package/lib/ContentWithQuestion/index.d.ts +0 -13
- package/lib/ContentWithQuestion/index.js +0 -76
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: () => import("
|
|
1
|
+
declare const _default: () => import("packages/design/es/config-provider").NavigateFunction;
|
|
2
2
|
export default _default;
|
package/es/index.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ export { default as BasicLayout } from './BasicLayout';
|
|
|
8
8
|
export { default as BatchOperationBar } from './BatchOperationBar';
|
|
9
9
|
export { default as Boundary } from './Boundary';
|
|
10
10
|
export * from './constant';
|
|
11
|
-
export { default as
|
|
11
|
+
export { default as ContentWithIcon } from './ContentWithIcon';
|
|
12
12
|
export { default as Dialog } from './Dialog';
|
|
13
13
|
export { default as DocDialog } from './DocDialog';
|
|
14
14
|
export { default as FullscreenBox } from './FullscreenBox';
|
|
@@ -26,3 +26,4 @@ export { default as SideTip } from './SideTip';
|
|
|
26
26
|
export { default as TaskGraph } from './TaskGraph';
|
|
27
27
|
export { default as TreeSearch } from './TreeSearch';
|
|
28
28
|
export { default as Welcome } from './Welcome';
|
|
29
|
+
export { default as TagSelect } from './TagSelect';
|
package/es/index.js
CHANGED
|
@@ -7,7 +7,7 @@ export { default as BasicLayout } from "./BasicLayout";
|
|
|
7
7
|
export { default as BatchOperationBar } from "./BatchOperationBar";
|
|
8
8
|
export { default as Boundary } from "./Boundary";
|
|
9
9
|
export * from "./constant";
|
|
10
|
-
export { default as
|
|
10
|
+
export { default as ContentWithIcon } from "./ContentWithIcon";
|
|
11
11
|
export { default as Dialog } from "./Dialog";
|
|
12
12
|
export { default as DocDialog } from "./DocDialog";
|
|
13
13
|
export { default as FullscreenBox } from "./FullscreenBox";
|
|
@@ -24,4 +24,5 @@ export { default as Ranger } from "./Ranger";
|
|
|
24
24
|
export { default as SideTip } from "./SideTip";
|
|
25
25
|
export { default as TaskGraph } from "./TaskGraph";
|
|
26
26
|
export { default as TreeSearch } from "./TreeSearch";
|
|
27
|
-
export { default as Welcome } from "./Welcome";
|
|
27
|
+
export { default as Welcome } from "./Welcome";
|
|
28
|
+
export { default as TagSelect } from "./TagSelect";
|
package/lib/BasicLayout/index.js
CHANGED
|
@@ -72,8 +72,8 @@ var BasicLayout = ({
|
|
|
72
72
|
}) => {
|
|
73
73
|
const { getPrefixCls } = (0, import_react.useContext)(import_design2.ConfigProvider.ConfigContext);
|
|
74
74
|
const prefixCls = getPrefixCls("basic-layout", customizePrefixCls);
|
|
75
|
-
const { wrapSSR
|
|
76
|
-
const basicLayoutCls = (0, import_classnames.default)(className
|
|
75
|
+
const { wrapSSR } = (0, import_style.default)(prefixCls);
|
|
76
|
+
const basicLayoutCls = (0, import_classnames.default)(className);
|
|
77
77
|
const navigate = (0, import_useNavigate.default)();
|
|
78
78
|
const [collapsed, setCollapsed] = (0, import_react.useState)(defaultCollapsed);
|
|
79
79
|
const [selectedKeys, setSelectedKeys] = (0, import_react.useState)(defaultSelectedKeys);
|
|
@@ -1,5 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import type { FullToken, GenerateStyle } from '@oceanbase/design/es/theme';
|
|
2
3
|
export type BasicLayoutToken = FullToken<any>;
|
|
3
4
|
export declare const genBasicLayoutStyle: GenerateStyle<BasicLayoutToken>;
|
|
4
|
-
declare const _default: (prefixCls: string) =>
|
|
5
|
+
declare const _default: (prefixCls: string) => {
|
|
6
|
+
wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
|
|
7
|
+
hashId: string;
|
|
8
|
+
};
|
|
5
9
|
export default _default;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './index.less';
|
|
3
|
+
export interface ContentWithIconProps {
|
|
4
|
+
content?: React.ReactNode;
|
|
5
|
+
tooltip?: any;
|
|
6
|
+
prefixIcon?: React.ReactNode | boolean;
|
|
7
|
+
suffixIcon?: React.ReactNode;
|
|
8
|
+
className?: string;
|
|
9
|
+
iconType?: 'question' | 'info' | 'exclamation';
|
|
10
|
+
color?: string;
|
|
11
|
+
style?: React.CSSProperties;
|
|
12
|
+
onClick?: (e: React.SyntheticEvent) => void;
|
|
13
|
+
tooltipWithLink?: boolean;
|
|
14
|
+
textHidden?: boolean;
|
|
15
|
+
popOver?: any;
|
|
16
|
+
size?: number;
|
|
17
|
+
infoColor?: string;
|
|
18
|
+
exclamationColor?: string;
|
|
19
|
+
}
|
|
20
|
+
declare const ContentWithIcon: React.FC<ContentWithIconProps>;
|
|
21
|
+
export default ContentWithIcon;
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
|
|
29
|
+
// src/ContentWithIcon/index.tsx
|
|
30
|
+
var ContentWithIcon_exports = {};
|
|
31
|
+
__export(ContentWithIcon_exports, {
|
|
32
|
+
default: () => ContentWithIcon_default
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(ContentWithIcon_exports);
|
|
35
|
+
var import_react = __toESM(require("react"));
|
|
36
|
+
var import_antd = require("antd");
|
|
37
|
+
var import_icons = require("@ant-design/icons");
|
|
38
|
+
var import_classnames = __toESM(require("classnames"));
|
|
39
|
+
var import_util = require("../_util");
|
|
40
|
+
var import_index = require("./index.less");
|
|
41
|
+
var prefix = (0, import_util.getPrefix)("content-with-question");
|
|
42
|
+
var ContentWithIcon = ({
|
|
43
|
+
content,
|
|
44
|
+
tooltip,
|
|
45
|
+
prefixIcon = null,
|
|
46
|
+
suffixIcon,
|
|
47
|
+
className,
|
|
48
|
+
children,
|
|
49
|
+
iconType,
|
|
50
|
+
color,
|
|
51
|
+
tooltipWithLink = false,
|
|
52
|
+
popOver,
|
|
53
|
+
textHidden = true,
|
|
54
|
+
size = 14,
|
|
55
|
+
infoColor,
|
|
56
|
+
exclamationColor = "#FAAD14",
|
|
57
|
+
...restProps
|
|
58
|
+
}) => {
|
|
59
|
+
const defaultIconType = () => {
|
|
60
|
+
if (iconType === "question") {
|
|
61
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
62
|
+
import_icons.QuestionCircleOutlined,
|
|
63
|
+
{
|
|
64
|
+
style: { color: color === "default" ? "#132039" : color, fontSize: size },
|
|
65
|
+
className: `${prefix}-help`
|
|
66
|
+
}
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
if (iconType === "info") {
|
|
70
|
+
if (infoColor) {
|
|
71
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
72
|
+
import_icons.InfoCircleFilled,
|
|
73
|
+
{
|
|
74
|
+
style: { color: infoColor, fontSize: size },
|
|
75
|
+
className: `${prefix}-help`
|
|
76
|
+
}
|
|
77
|
+
);
|
|
78
|
+
} else {
|
|
79
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
80
|
+
import_icons.InfoCircleOutlined,
|
|
81
|
+
{
|
|
82
|
+
style: { color: "3333333", fontSize: size },
|
|
83
|
+
className: `${prefix}-help`
|
|
84
|
+
}
|
|
85
|
+
);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
if (iconType === "exclamation") {
|
|
89
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
90
|
+
import_icons.ExclamationCircleFilled,
|
|
91
|
+
{
|
|
92
|
+
style: { color: exclamationColor, fontSize: size },
|
|
93
|
+
className: `${prefix}-help`
|
|
94
|
+
}
|
|
95
|
+
);
|
|
96
|
+
}
|
|
97
|
+
};
|
|
98
|
+
suffixIcon = suffixIcon !== null && iconType ? defaultIconType() : suffixIcon;
|
|
99
|
+
const getIcon = (iconConfig) => {
|
|
100
|
+
return iconConfig ? !textHidden && iconType === "info" ? (
|
|
101
|
+
// 文本描述直接展示且只在 info 类型下生效
|
|
102
|
+
/* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: 4 }, iconConfig, /* @__PURE__ */ import_react.default.createElement("span", { style: { color: "#5C6B8A" } }, "文本示意不超过二十字文本示意不超过二十字"))
|
|
103
|
+
) : (
|
|
104
|
+
// 提示文案描述带有链接
|
|
105
|
+
tooltipWithLink ? /* @__PURE__ */ import_react.default.createElement(import_antd.Popover, { ...popOver }, (0, import_react.isValidElement)(iconConfig) ? iconConfig : defaultIconType()) : /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { ...tooltip }, (0, import_react.isValidElement)(iconConfig) ? iconConfig : defaultIconType())
|
|
106
|
+
) : null;
|
|
107
|
+
};
|
|
108
|
+
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
|
|
109
|
+
"span",
|
|
110
|
+
{
|
|
111
|
+
className: (0, import_classnames.default)({
|
|
112
|
+
[`${prefix}-item`]: true,
|
|
113
|
+
[className]: !!className
|
|
114
|
+
}),
|
|
115
|
+
...restProps
|
|
116
|
+
},
|
|
117
|
+
/* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: 4 }, getIcon(
|
|
118
|
+
// 图标在文字前
|
|
119
|
+
prefixIcon === true ? defaultIconType() : prefixIcon
|
|
120
|
+
), /* @__PURE__ */ import_react.default.createElement(
|
|
121
|
+
"span",
|
|
122
|
+
{
|
|
123
|
+
"data-testid": "content",
|
|
124
|
+
style: { color: color === "default" ? "#5C6B8A" : color, fontSize: size }
|
|
125
|
+
},
|
|
126
|
+
content ?? children
|
|
127
|
+
), getIcon(suffixIcon))
|
|
128
|
+
));
|
|
129
|
+
};
|
|
130
|
+
var ContentWithIcon_default = ContentWithIcon;
|
package/lib/Highlight/index.d.ts
CHANGED
|
@@ -29,7 +29,7 @@ export declare const THEME_DARK = "dark";
|
|
|
29
29
|
export declare const THEME_LIGHT = "light";
|
|
30
30
|
declare const ThemeTypes: ["dark", "light"];
|
|
31
31
|
export type ThemeType = (typeof ThemeTypes)[number];
|
|
32
|
-
declare const supportedLanguages: ("ruby" | "javascript" | "typescript" | "css" | "groovy" | "java" | "python" | "bash" | "
|
|
32
|
+
declare const supportedLanguages: ("ruby" | "json" | "javascript" | "typescript" | "css" | "groovy" | "java" | "python" | "bash" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "go" | "yaml" | "solidity" | "tsx" | "jsx")[];
|
|
33
33
|
export type LanguageType = (typeof supportedLanguages)[number] | 'html';
|
|
34
34
|
export interface HighlightProps extends LocaleWrapperProps {
|
|
35
35
|
/**
|
package/lib/Lottie/index.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import type { AnimationConfig, AnimationItem } from 'lottie-web';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
export interface LottieProps extends Omit<AnimationConfig, 'container'> {
|
|
4
|
-
path
|
|
4
|
+
path?: string;
|
|
5
|
+
animationData?: any;
|
|
5
6
|
mode?: 'default' | 'icon';
|
|
6
7
|
loop?: boolean;
|
|
7
8
|
speed?: number;
|
|
@@ -56,7 +56,7 @@ var PageContainer = ({
|
|
|
56
56
|
const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
|
|
57
57
|
const rootPrefixCls = getPrefixCls();
|
|
58
58
|
const prefixCls = getPrefixCls("pro-page-container", customizePrefixCls);
|
|
59
|
-
const { wrapSSR
|
|
59
|
+
const { wrapSSR } = (0, import_style.default)(prefixCls);
|
|
60
60
|
const { reload, subTitle, breadcrumb } = header || {};
|
|
61
61
|
const reloadProps = (0, import_lodash.isObject)(reload) && !import_react.default.isValidElement(reload) ? reload : {};
|
|
62
62
|
const reloadCls = (0, import_classnames.default)(
|
|
@@ -79,8 +79,7 @@ var PageContainer = ({
|
|
|
79
79
|
{
|
|
80
80
|
[`${prefixCls}-no-page-header`]: noHasHeader
|
|
81
81
|
},
|
|
82
|
-
className
|
|
83
|
-
hashId
|
|
82
|
+
className
|
|
84
83
|
);
|
|
85
84
|
return wrapSSR(
|
|
86
85
|
/* @__PURE__ */ import_react.default.createElement(
|
|
@@ -1,5 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import type { PageContainerToken } from '@ant-design/pro-layout/es/components/PageContainer/style';
|
|
2
3
|
import type { GenerateStyle } from '@oceanbase/design/es/theme';
|
|
3
4
|
export declare const genPageContainerStyle: GenerateStyle<PageContainerToken>;
|
|
4
|
-
declare const _default: (prefixCls: string) =>
|
|
5
|
+
declare const _default: (prefixCls: string) => {
|
|
6
|
+
wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
|
|
7
|
+
hashId: string;
|
|
8
|
+
};
|
|
5
9
|
export default _default;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
export type TagSelectValueType = string | number;
|
|
3
|
+
export interface TagSelectOptionType {
|
|
4
|
+
label: React.ReactNode;
|
|
5
|
+
value: TagSelectValueType;
|
|
6
|
+
style?: React.CSSProperties;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
onChange?: (e: any) => void;
|
|
9
|
+
}
|
|
10
|
+
export interface TagSelectGroupProps {
|
|
11
|
+
title?: string;
|
|
12
|
+
children?: ReactNode;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
className?: string;
|
|
15
|
+
multiple?: boolean;
|
|
16
|
+
defaultValue?: TagSelectValueType | Array<TagSelectValueType>;
|
|
17
|
+
value?: TagSelectValueType | Array<TagSelectValueType>;
|
|
18
|
+
size?: string;
|
|
19
|
+
options?: Array<TagSelectOptionType | string | number>;
|
|
20
|
+
onChange?: (value: Array<TagSelectValueType> | TagSelectValueType) => void;
|
|
21
|
+
}
|
|
22
|
+
declare const Group: React.FC<TagSelectGroupProps>;
|
|
23
|
+
export default Group;
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
|
|
29
|
+
// src/TagSelect/Group.tsx
|
|
30
|
+
var Group_exports = {};
|
|
31
|
+
__export(Group_exports, {
|
|
32
|
+
default: () => Group_default
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(Group_exports);
|
|
35
|
+
var import_classnames = __toESM(require("classnames"));
|
|
36
|
+
var import_util = require("../_util");
|
|
37
|
+
var import_react = __toESM(require("react"));
|
|
38
|
+
var import_TagSelectContext = __toESM(require("./TagSelectContext"));
|
|
39
|
+
var import_Item = __toESM(require("./Item"));
|
|
40
|
+
var import_style = __toESM(require("./style"));
|
|
41
|
+
function toArray(value) {
|
|
42
|
+
let res = value;
|
|
43
|
+
if (value === void 0) {
|
|
44
|
+
res = [];
|
|
45
|
+
} else if (!Array.isArray(value)) {
|
|
46
|
+
res = [value];
|
|
47
|
+
}
|
|
48
|
+
return res;
|
|
49
|
+
}
|
|
50
|
+
var Group = ({
|
|
51
|
+
title,
|
|
52
|
+
multiple,
|
|
53
|
+
defaultValue,
|
|
54
|
+
size = "middle",
|
|
55
|
+
options = [],
|
|
56
|
+
children,
|
|
57
|
+
className,
|
|
58
|
+
...restProps
|
|
59
|
+
}) => {
|
|
60
|
+
const prefix = (0, import_util.getPrefix)("tag-select");
|
|
61
|
+
const { wrapSSR, hashId } = (0, import_style.default)(prefix);
|
|
62
|
+
const [value, setValue] = (0, import_react.useState)(toArray(defaultValue || restProps.value));
|
|
63
|
+
const [registeredValues, setRegisteredValues] = import_react.default.useState([]);
|
|
64
|
+
const registerValue = (val) => {
|
|
65
|
+
setRegisteredValues((prev) => [...prev, val]);
|
|
66
|
+
};
|
|
67
|
+
(0, import_react.useEffect)(() => {
|
|
68
|
+
if ("value" in restProps) {
|
|
69
|
+
setValue(toArray(restProps.value));
|
|
70
|
+
}
|
|
71
|
+
}, [restProps.value]);
|
|
72
|
+
const handleValueChange = (v) => {
|
|
73
|
+
var _a;
|
|
74
|
+
const registeredValue = value.filter((v1) => registeredValues.includes(v1));
|
|
75
|
+
const newValue = [...registeredValue];
|
|
76
|
+
const index = newValue.indexOf(v);
|
|
77
|
+
const checkedValue = index === -1 ? v : void 0;
|
|
78
|
+
if (multiple) {
|
|
79
|
+
if (index === -1) {
|
|
80
|
+
newValue.push(v);
|
|
81
|
+
} else {
|
|
82
|
+
newValue.splice(index, 1);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
if (!("value" in restProps)) {
|
|
86
|
+
setValue(multiple ? newValue : [checkedValue]);
|
|
87
|
+
}
|
|
88
|
+
(_a = restProps.onChange) == null ? void 0 : _a.call(restProps, multiple ? newValue : checkedValue);
|
|
89
|
+
};
|
|
90
|
+
const contextValue = {
|
|
91
|
+
multiple,
|
|
92
|
+
size,
|
|
93
|
+
value,
|
|
94
|
+
disabled: restProps.disabled,
|
|
95
|
+
onChange: restProps.onChange,
|
|
96
|
+
registerValue,
|
|
97
|
+
handleValueChange
|
|
98
|
+
};
|
|
99
|
+
const memoOptions = (0, import_react.useMemo)(() => {
|
|
100
|
+
return options.map((option) => {
|
|
101
|
+
if (typeof option === "string" || typeof option === "number") {
|
|
102
|
+
return { label: option, value: option };
|
|
103
|
+
}
|
|
104
|
+
return option;
|
|
105
|
+
});
|
|
106
|
+
}, [options]);
|
|
107
|
+
const childrenNode = options.length ? memoOptions.map((option) => /* @__PURE__ */ import_react.default.createElement(
|
|
108
|
+
import_Item.default,
|
|
109
|
+
{
|
|
110
|
+
key: option.value.toString(),
|
|
111
|
+
disabled: "disabled" in option ? option.disabled : restProps.disabled,
|
|
112
|
+
value: option.value,
|
|
113
|
+
onChange: option.onChange,
|
|
114
|
+
style: option.style,
|
|
115
|
+
checked: value == null ? void 0 : value.includes(option.value)
|
|
116
|
+
},
|
|
117
|
+
option.label
|
|
118
|
+
)) : children;
|
|
119
|
+
const groupCls = (0, import_classnames.default)(
|
|
120
|
+
`${prefix}-container`,
|
|
121
|
+
hashId,
|
|
122
|
+
className
|
|
123
|
+
);
|
|
124
|
+
return wrapSSR(
|
|
125
|
+
/* @__PURE__ */ import_react.default.createElement(import_TagSelectContext.default.Provider, { value: contextValue }, /* @__PURE__ */ import_react.default.createElement("div", { className: groupCls }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-title` }, title), childrenNode))
|
|
126
|
+
);
|
|
127
|
+
};
|
|
128
|
+
var Group_default = Group;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { TagSelectValueType } from './Group';
|
|
3
|
+
export interface TagSelectItemProps {
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
cover?: React.ReactNode;
|
|
6
|
+
value?: string | number;
|
|
7
|
+
defaultChecked?: boolean;
|
|
8
|
+
checked?: boolean;
|
|
9
|
+
title?: string;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
style?: React.CSSProperties;
|
|
12
|
+
multiple?: boolean;
|
|
13
|
+
handleChange?: (value: TagSelectValueType) => void;
|
|
14
|
+
onChange?: (e: any) => void;
|
|
15
|
+
}
|
|
16
|
+
declare const Item: React.FC<TagSelectItemProps>;
|
|
17
|
+
export default Item;
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
|
|
29
|
+
// src/TagSelect/Item.tsx
|
|
30
|
+
var Item_exports = {};
|
|
31
|
+
__export(Item_exports, {
|
|
32
|
+
default: () => Item_default
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(Item_exports);
|
|
35
|
+
var import_rc_checkbox = __toESM(require("rc-checkbox"));
|
|
36
|
+
var import_classnames = __toESM(require("classnames"));
|
|
37
|
+
var import_lodash = require("lodash");
|
|
38
|
+
var import_react = __toESM(require("react"));
|
|
39
|
+
var import_style = __toESM(require("./style"));
|
|
40
|
+
var import_util = require("../_util");
|
|
41
|
+
var import_TagSelectContext = __toESM(require("./TagSelectContext"));
|
|
42
|
+
var Item = ({
|
|
43
|
+
children,
|
|
44
|
+
handleChange,
|
|
45
|
+
onChange,
|
|
46
|
+
cover,
|
|
47
|
+
...restProps
|
|
48
|
+
}) => {
|
|
49
|
+
const [checked, setChecked] = (0, import_react.useState)(restProps.defaultChecked);
|
|
50
|
+
const coverType = typeof cover;
|
|
51
|
+
const prefixCls = (0, import_util.getPrefix)("tag-select");
|
|
52
|
+
const { wrapSSR, hashId } = (0, import_style.default)(prefixCls);
|
|
53
|
+
const tagSelectGroup = import_react.default.useContext(import_TagSelectContext.default);
|
|
54
|
+
const wrapperClassName = (0, import_classnames.default)(
|
|
55
|
+
`${prefixCls}-wrapper`,
|
|
56
|
+
{
|
|
57
|
+
[`${prefixCls}-checked`]: checked,
|
|
58
|
+
multiple: tagSelectGroup.multiple,
|
|
59
|
+
[`${prefixCls}-${tagSelectGroup.size}`]: tagSelectGroup.size,
|
|
60
|
+
[`${prefixCls}-disabled`]: tagSelectGroup.disabled || restProps.disabled,
|
|
61
|
+
[`${prefixCls}-img`]: coverType === "string",
|
|
62
|
+
[`${prefixCls}-custom`]: coverType !== "string"
|
|
63
|
+
},
|
|
64
|
+
hashId
|
|
65
|
+
);
|
|
66
|
+
(0, import_react.useEffect)(() => {
|
|
67
|
+
if ((0, import_lodash.isBoolean)(restProps.checked)) {
|
|
68
|
+
setChecked(restProps.checked);
|
|
69
|
+
}
|
|
70
|
+
}, [restProps.checked]);
|
|
71
|
+
(0, import_react.useEffect)(() => {
|
|
72
|
+
var _a;
|
|
73
|
+
return (_a = tagSelectGroup.registerValue) == null ? void 0 : _a.call(tagSelectGroup, restProps.value);
|
|
74
|
+
}, [restProps.value]);
|
|
75
|
+
(0, import_react.useEffect)(() => {
|
|
76
|
+
var _a;
|
|
77
|
+
if (((_a = tagSelectGroup.value) == null ? void 0 : _a.includes(restProps.value)) || restProps.checked || restProps.defaultChecked) {
|
|
78
|
+
setChecked(true);
|
|
79
|
+
} else {
|
|
80
|
+
setChecked(false);
|
|
81
|
+
}
|
|
82
|
+
}, [tagSelectGroup.value, restProps.value]);
|
|
83
|
+
const renderCover = () => {
|
|
84
|
+
return coverType === "string" ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-cover` }, /* @__PURE__ */ import_react.default.createElement("img", { src: cover, alt: "tagselect" })) : cover;
|
|
85
|
+
};
|
|
86
|
+
return wrapSSR(
|
|
87
|
+
/* @__PURE__ */ import_react.default.createElement("label", { className: wrapperClassName, style: restProps.style }, /* @__PURE__ */ import_react.default.createElement(
|
|
88
|
+
import_rc_checkbox.default,
|
|
89
|
+
{
|
|
90
|
+
...restProps,
|
|
91
|
+
checked,
|
|
92
|
+
prefixCls,
|
|
93
|
+
onChange: (e) => {
|
|
94
|
+
if (!("checked" in restProps) && !Object.keys(tagSelectGroup).length) {
|
|
95
|
+
setChecked(e.target.checked);
|
|
96
|
+
}
|
|
97
|
+
if (onChange) {
|
|
98
|
+
onChange(e);
|
|
99
|
+
}
|
|
100
|
+
if (tagSelectGroup.handleValueChange) {
|
|
101
|
+
tagSelectGroup.handleValueChange(e.target.value);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
), cover ? renderCover() : /* @__PURE__ */ import_react.default.createElement("span", null, children))
|
|
106
|
+
);
|
|
107
|
+
};
|
|
108
|
+
var Item_default = Item;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { TagSelectValueType } from './Group';
|
|
3
|
+
export type TagSelectContextProps = {
|
|
4
|
+
multiple?: boolean;
|
|
5
|
+
size?: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
value?: Array<TagSelectValueType>;
|
|
8
|
+
onChange?: (value: Array<TagSelectValueType> | TagSelectValueType) => void;
|
|
9
|
+
registerValue?: (val: TagSelectValueType) => void;
|
|
10
|
+
handleValueChange?: (val: TagSelectValueType) => void;
|
|
11
|
+
};
|
|
12
|
+
declare const TagSelectContext: import("react").Context<TagSelectContextProps>;
|
|
13
|
+
export default TagSelectContext;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// src/TagSelect/TagSelectContext.ts
|
|
20
|
+
var TagSelectContext_exports = {};
|
|
21
|
+
__export(TagSelectContext_exports, {
|
|
22
|
+
default: () => TagSelectContext_default
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(TagSelectContext_exports);
|
|
25
|
+
var import_react = require("react");
|
|
26
|
+
var TagSelectContext = (0, import_react.createContext)({});
|
|
27
|
+
var TagSelectContext_default = TagSelectContext;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
|
|
29
|
+
// src/TagSelect/index.tsx
|
|
30
|
+
var TagSelect_exports = {};
|
|
31
|
+
__export(TagSelect_exports, {
|
|
32
|
+
default: () => TagSelect_default
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(TagSelect_exports);
|
|
35
|
+
var import_Group = __toESM(require("./Group"));
|
|
36
|
+
var import_Item = __toESM(require("./Item"));
|
|
37
|
+
var TagSelect_default = { Group: import_Group.default, Item: import_Item.default };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { FullToken, GenerateStyle } from 'antd/lib/theme/internal';
|
|
3
|
+
export type TagSelectToken = FullToken<any>;
|
|
4
|
+
export declare const genTagSelectStyle: GenerateStyle<TagSelectToken>;
|
|
5
|
+
declare const _default: (prefixCls: string) => {
|
|
6
|
+
wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
|
|
7
|
+
hashId: string;
|
|
8
|
+
};
|
|
9
|
+
export default _default;
|