@oceanbase/ui 1.0.0-alpha.0 → 1.0.0-alpha.2
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/DateRanger/Ranger.d.ts +4 -0
- package/es/DateRanger/Ranger.js +158 -14
- package/es/DateRanger/constant/index.js +1 -1
- package/es/DateRanger/index.less +24 -1
- package/es/GraphToolbar/index.less +1 -1
- package/es/Highlight/index.d.ts +1 -1
- package/es/Highlight/index.less +2 -2
- package/es/PageContainer/index.js +14 -4
- package/es/PageContainer/style/index.js +5 -7
- package/es/ProCard/index.d.ts +2 -1
- package/es/ProCard/index.js +20 -8
- package/es/ProCard/style/index.js +3 -1
- package/es/ProTable/index.d.ts +1 -1
- package/es/ProTable/index.js +11 -5
- package/es/ProTable/style/index.js +4 -2
- package/lib/DateRanger/Ranger.d.ts +4 -0
- package/lib/DateRanger/Ranger.js +134 -1
- package/lib/DateRanger/constant/index.js +1 -1
- package/lib/DateRanger/index.less +24 -1
- package/lib/GraphToolbar/index.less +1 -1
- package/lib/Highlight/index.d.ts +1 -1
- package/lib/Highlight/index.less +2 -2
- package/lib/PageContainer/index.js +9 -2
- package/lib/PageContainer/style/index.js +5 -6
- package/lib/ProCard/index.d.ts +2 -1
- package/lib/ProCard/index.js +18 -5
- package/lib/ProCard/style/index.js +3 -0
- package/lib/ProTable/index.d.ts +1 -1
- package/lib/ProTable/index.js +14 -4
- package/lib/ProTable/style/index.js +7 -0
- package/package.json +5 -5
|
@@ -8,6 +8,7 @@ import type { Rule } from './PickerPanel';
|
|
|
8
8
|
import './index.less';
|
|
9
9
|
export type RangeName = 'customize' | string;
|
|
10
10
|
export type RangeValue = [Moment, Moment] | [Dayjs, Dayjs] | [] | null;
|
|
11
|
+
export type RangeValueFormat = [string, string] | [] | null;
|
|
11
12
|
export type RangeDateValue = {
|
|
12
13
|
name: RangeName;
|
|
13
14
|
range: RangeValue;
|
|
@@ -20,6 +21,9 @@ export interface DateRangerProps extends Omit<RangePickerProps, 'mode' | 'picker
|
|
|
20
21
|
hasSync?: boolean;
|
|
21
22
|
hasForward?: boolean;
|
|
22
23
|
hasZoomOut?: boolean;
|
|
24
|
+
history?: boolean | {
|
|
25
|
+
capacity: number;
|
|
26
|
+
};
|
|
23
27
|
hasTagInPicker?: boolean;
|
|
24
28
|
tip?: string;
|
|
25
29
|
rules?: Rule[];
|
package/lib/DateRanger/Ranger.js
CHANGED
|
@@ -46,6 +46,8 @@ var import_PickerPanel = __toESM(require("./PickerPanel"));
|
|
|
46
46
|
var import_zh_CN = __toESM(require("./locale/zh-CN"));
|
|
47
47
|
var import_index = require("./index.less");
|
|
48
48
|
var import_ahooks = require("ahooks");
|
|
49
|
+
var import_util2 = require("@oceanbase/util");
|
|
50
|
+
var DefaultMaxHistoryCapacity = 20;
|
|
49
51
|
var prefix = (0, import_util.getPrefix)("date-ranger");
|
|
50
52
|
var Ranger = import_react.default.forwardRef((props, ref) => {
|
|
51
53
|
var _a;
|
|
@@ -73,6 +75,7 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
|
|
|
73
75
|
hideYear = false,
|
|
74
76
|
hideSecond = false,
|
|
75
77
|
autoCalcRange = false,
|
|
78
|
+
history: historyProp = false,
|
|
76
79
|
onChange = import_lodash.noop,
|
|
77
80
|
disabledDate,
|
|
78
81
|
locale,
|
|
@@ -106,10 +109,47 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
|
|
|
106
109
|
const [open, setOpen] = (0, import_react.useState)(false);
|
|
107
110
|
const [tooltipOpen, setTooltipOpen] = (0, import_react.useState)(false);
|
|
108
111
|
const [backRadioFocused, setBackRadioFocused] = (0, import_react.useState)(false);
|
|
112
|
+
const [historyMenuVisible, setHistoryMenuVisible] = (0, import_react.useState)(false);
|
|
109
113
|
const rangeRef = (0, import_react.useRef)(null);
|
|
110
114
|
const popRef = (0, import_react.useRef)(null);
|
|
111
115
|
const labelRef = (0, import_react.useRef)(null);
|
|
112
116
|
const [isPlay, setIsPlay] = (0, import_react.useState)(rangeName !== import_constant.CUSTOMIZE);
|
|
117
|
+
const history = (0, import_react.useMemo)(() => {
|
|
118
|
+
if (historyProp) {
|
|
119
|
+
return {
|
|
120
|
+
capacity: typeof historyProp === "object" ? historyProp.capacity : DefaultMaxHistoryCapacity
|
|
121
|
+
};
|
|
122
|
+
}
|
|
123
|
+
return false;
|
|
124
|
+
}, [historyProp]);
|
|
125
|
+
const [rangeHistory, setRangeHistory] = (0, import_util2.useLocalStorageState)(
|
|
126
|
+
"ob-design-date-ranger-local-storage-range-history-state",
|
|
127
|
+
{ defaultValue: [], listenStorageChange: true }
|
|
128
|
+
);
|
|
129
|
+
const updateRangeHistory = (range) => {
|
|
130
|
+
if (!range) {
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
if (range.length < 2 || !history) {
|
|
134
|
+
return;
|
|
135
|
+
}
|
|
136
|
+
const formattedValue = [
|
|
137
|
+
range[0].format(import_constant.YEAR_DATE_TIME_SECOND_FORMAT_CN),
|
|
138
|
+
range[1].format(import_constant.YEAR_DATE_TIME_SECOND_FORMAT_CN)
|
|
139
|
+
];
|
|
140
|
+
if (rangeHistory.find((item) => (0, import_lodash.isEqual)(item, formattedValue))) {
|
|
141
|
+
return;
|
|
142
|
+
}
|
|
143
|
+
const updatedValue = [formattedValue, ...rangeHistory];
|
|
144
|
+
if (updatedValue.length > history.capacity) {
|
|
145
|
+
updatedValue.splice(0, history.capacity);
|
|
146
|
+
}
|
|
147
|
+
setRangeHistory(updatedValue);
|
|
148
|
+
};
|
|
149
|
+
const delRangeHistory = (range) => {
|
|
150
|
+
const updatedValue = rangeHistory.filter((item) => !(0, import_lodash.isEqual)(item, range));
|
|
151
|
+
setRangeHistory(updatedValue);
|
|
152
|
+
};
|
|
113
153
|
const compare = (m1, m2) => {
|
|
114
154
|
if (Array.isArray(m1) && !Array.isArray(m2))
|
|
115
155
|
return false;
|
|
@@ -151,6 +191,7 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
|
|
|
151
191
|
const rangeChange = (range) => {
|
|
152
192
|
setInnerValue(range);
|
|
153
193
|
onChange(range);
|
|
194
|
+
updateRangeHistory(range);
|
|
154
195
|
};
|
|
155
196
|
const datePickerChange = (range) => {
|
|
156
197
|
rangeChange(range);
|
|
@@ -212,6 +253,9 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
|
|
|
212
253
|
}
|
|
213
254
|
return isEN ? `Nearly ${differenceSeconds} seconds` : `近 ${differenceSeconds} 秒`;
|
|
214
255
|
};
|
|
256
|
+
const getHistoryTitle = () => {
|
|
257
|
+
return isEN ? "History records" : "历史记录";
|
|
258
|
+
};
|
|
215
259
|
const setNow = () => {
|
|
216
260
|
const selected = selects.find((item) => item.name === rangeName);
|
|
217
261
|
if (selected == null ? void 0 : selected.range) {
|
|
@@ -276,7 +320,96 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
|
|
|
276
320
|
className: (0, import_classnames.default)(`${prefix}-dropdown-picker`, overlayClassName),
|
|
277
321
|
style: overlayStyle
|
|
278
322
|
},
|
|
279
|
-
originNode,
|
|
323
|
+
/* @__PURE__ */ import_react.default.createElement(import_design.Flex, { vertical: true, justify: "space-between" }, !historyMenuVisible && /* @__PURE__ */ import_react.default.createElement("div", { className: "options" }, originNode), history && historyMenuVisible && /* @__PURE__ */ import_react.default.createElement("div", { className: "history" }, /* @__PURE__ */ import_react.default.createElement(
|
|
324
|
+
import_design.Button,
|
|
325
|
+
{
|
|
326
|
+
type: "link",
|
|
327
|
+
style: { paddingLeft: 8, color: token.colorTextBase },
|
|
328
|
+
onClick: (e) => {
|
|
329
|
+
setHistoryMenuVisible(false);
|
|
330
|
+
e.stopPropagation();
|
|
331
|
+
}
|
|
332
|
+
},
|
|
333
|
+
/* @__PURE__ */ import_react.default.createElement(import_icons.ArrowLeftOutlined, { color: token.colorTextLabel }),
|
|
334
|
+
getHistoryTitle()
|
|
335
|
+
), /* @__PURE__ */ import_react.default.createElement(
|
|
336
|
+
import_design.Menu,
|
|
337
|
+
{
|
|
338
|
+
onClick: ({ key: rangeString }) => {
|
|
339
|
+
const vList = rangeString.split(",").map((v) => v.trim());
|
|
340
|
+
rangeChange(
|
|
341
|
+
vList.map((v) => {
|
|
342
|
+
return isMoment ? (0, import_moment.default)(v) : (0, import_dayjs.default)(v);
|
|
343
|
+
})
|
|
344
|
+
);
|
|
345
|
+
handleNameChange(import_constant.CUSTOMIZE);
|
|
346
|
+
},
|
|
347
|
+
style: { maxHeight: 480, overflowY: "auto" },
|
|
348
|
+
items: rangeHistory.map((range) => {
|
|
349
|
+
return {
|
|
350
|
+
key: String(range),
|
|
351
|
+
label: /* @__PURE__ */ import_react.default.createElement(
|
|
352
|
+
import_design.Flex,
|
|
353
|
+
{
|
|
354
|
+
className: `${prefix}-history-menu-item`,
|
|
355
|
+
key: String(range),
|
|
356
|
+
vertical: true
|
|
357
|
+
},
|
|
358
|
+
/* @__PURE__ */ import_react.default.createElement("span", null, (isMoment ? (0, import_moment.default)(range[0]) : (0, import_dayjs.default)(range[0])).format(
|
|
359
|
+
import_constant.YEAR_DATE_TIME_SECOND_FORMAT_CN
|
|
360
|
+
), "~"),
|
|
361
|
+
/* @__PURE__ */ import_react.default.createElement("span", null, (isMoment ? (0, import_moment.default)(range[1]) : (0, import_dayjs.default)(range[1])).format(
|
|
362
|
+
import_constant.YEAR_DATE_TIME_SECOND_FORMAT_CN
|
|
363
|
+
)),
|
|
364
|
+
/* @__PURE__ */ import_react.default.createElement(import_design.Space, { className: `${prefix}-menu-text-btn-wrapper` }, /* @__PURE__ */ import_react.default.createElement(
|
|
365
|
+
import_design.Button,
|
|
366
|
+
{
|
|
367
|
+
className: `${prefix}-menu-text-btn`,
|
|
368
|
+
type: "text",
|
|
369
|
+
color: "default",
|
|
370
|
+
variant: "filled",
|
|
371
|
+
size: "small",
|
|
372
|
+
onClick: (e) => {
|
|
373
|
+
e.stopPropagation();
|
|
374
|
+
const vList = range.map((v) => v);
|
|
375
|
+
const text = `${vList.join("~")}`;
|
|
376
|
+
navigator.clipboard.writeText(text);
|
|
377
|
+
import_design.message.success(text);
|
|
378
|
+
}
|
|
379
|
+
},
|
|
380
|
+
/* @__PURE__ */ import_react.default.createElement(import_icons.CopyOutlined, null)
|
|
381
|
+
), /* @__PURE__ */ import_react.default.createElement(
|
|
382
|
+
import_design.Button,
|
|
383
|
+
{
|
|
384
|
+
className: `${prefix}-menu-text-btn`,
|
|
385
|
+
type: "text",
|
|
386
|
+
color: "default",
|
|
387
|
+
variant: "filled",
|
|
388
|
+
size: "small",
|
|
389
|
+
onClick: (e) => {
|
|
390
|
+
e.stopPropagation();
|
|
391
|
+
delRangeHistory(range);
|
|
392
|
+
}
|
|
393
|
+
},
|
|
394
|
+
/* @__PURE__ */ import_react.default.createElement(import_icons.DeleteOutlined, null)
|
|
395
|
+
))
|
|
396
|
+
)
|
|
397
|
+
};
|
|
398
|
+
})
|
|
399
|
+
}
|
|
400
|
+
)), history && !historyMenuVisible && /* @__PURE__ */ import_react.default.createElement(
|
|
401
|
+
import_design.Button,
|
|
402
|
+
{
|
|
403
|
+
type: "link",
|
|
404
|
+
style: { width: "max-content" },
|
|
405
|
+
onClick: (e) => {
|
|
406
|
+
setHistoryMenuVisible(true);
|
|
407
|
+
e.stopPropagation();
|
|
408
|
+
}
|
|
409
|
+
},
|
|
410
|
+
getHistoryTitle(),
|
|
411
|
+
/* @__PURE__ */ import_react.default.createElement(import_icons.RightOutlined, null)
|
|
412
|
+
)),
|
|
280
413
|
/* @__PURE__ */ import_react.default.createElement(import_design.Divider, { type: "vertical", style: { height: "auto", margin: "0px 4px 0px 0px" } }),
|
|
281
414
|
/* @__PURE__ */ import_react.default.createElement(
|
|
282
415
|
import_PickerPanel.default,
|
|
@@ -258,7 +258,7 @@ var THIS_WEEK = {
|
|
|
258
258
|
var LAST_WEEK = {
|
|
259
259
|
label: "上周",
|
|
260
260
|
enLabel: "Last week",
|
|
261
|
-
rangeLabel: "
|
|
261
|
+
rangeLabel: "1w",
|
|
262
262
|
name: "LAST_WEEK",
|
|
263
263
|
range: (current = (0, import_moment.default)()) => [
|
|
264
264
|
current.clone().startOf(WEEK_UNIT).add(-1, WEEK_UNIT),
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
border: 1px solid @colorBorder;
|
|
11
11
|
box-sizing: border-box;
|
|
12
12
|
display: flex;
|
|
13
|
-
border-radius:
|
|
13
|
+
border-radius: @borderRadius;
|
|
14
14
|
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
15
15
|
// FIXED: 存在不生效情况
|
|
16
16
|
.@{prefix}-picker {
|
|
@@ -155,3 +155,26 @@
|
|
|
155
155
|
}
|
|
156
156
|
}
|
|
157
157
|
}
|
|
158
|
+
|
|
159
|
+
.@{prefix}-history-menu-item {
|
|
160
|
+
.@{prefix}-menu-text-btn-wrapper {
|
|
161
|
+
justify-content: space-between;
|
|
162
|
+
height: 0;
|
|
163
|
+
transition: height 0.2s;
|
|
164
|
+
overflow: hidden;
|
|
165
|
+
}
|
|
166
|
+
&:hover {
|
|
167
|
+
.@{prefix}-menu-text-btn-wrapper {
|
|
168
|
+
height: 22px;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.@{prefix}-menu-text-btn {
|
|
174
|
+
width: 72px;
|
|
175
|
+
|
|
176
|
+
background-color: @colorFillSecondary !important;
|
|
177
|
+
&:hover {
|
|
178
|
+
background-color: @colorFill !important;
|
|
179
|
+
}
|
|
180
|
+
}
|
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: ("
|
|
32
|
+
declare const supportedLanguages: ("css" | "json" | "jsx" | "tsx" | "ruby" | "javascript" | "typescript" | "groovy" | "java" | "python" | "bash" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "go" | "yaml" | "solidity")[];
|
|
33
33
|
export type LanguageType = (typeof supportedLanguages)[number] | 'html';
|
|
34
34
|
export interface HighlightProps extends LocaleWrapperProps {
|
|
35
35
|
/**
|
package/lib/Highlight/index.less
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
font-size: 14px;
|
|
11
11
|
line-height: 1.5714285714285714;
|
|
12
12
|
list-style: none;
|
|
13
|
-
border-radius:
|
|
13
|
+
border-radius: @borderRadius;
|
|
14
14
|
|
|
15
15
|
&:not(:hover) .@{prefix}-copy {
|
|
16
16
|
visibility: hidden;
|
|
@@ -192,7 +192,7 @@
|
|
|
192
192
|
overflow-x: auto;
|
|
193
193
|
color: #c0c5ce;
|
|
194
194
|
background: #2b303b;
|
|
195
|
-
border-radius:
|
|
195
|
+
border-radius: @borderRadius;
|
|
196
196
|
|
|
197
197
|
&.@{prefix}-index {
|
|
198
198
|
border-inline-end: 1px solid rgba(255, 255, 255, 0.05);
|
|
@@ -62,7 +62,13 @@ var PageContainer = ({
|
|
|
62
62
|
const rootPrefixCls = getPrefixCls();
|
|
63
63
|
const prefixCls = getPrefixCls("pro-page-container", customizePrefixCls);
|
|
64
64
|
const { wrapSSR } = (0, import_style.default)(prefixCls);
|
|
65
|
-
const {
|
|
65
|
+
const { token } = import_design.theme.useToken();
|
|
66
|
+
const {
|
|
67
|
+
reload,
|
|
68
|
+
subTitle,
|
|
69
|
+
breadcrumb,
|
|
70
|
+
backIcon = /* @__PURE__ */ import_react.default.createElement(import_design.Button, { style: { fontSize: token.fontSizeLG }, icon: /* @__PURE__ */ import_react.default.createElement(import_icons.ArrowLeftOutlined, null) })
|
|
71
|
+
} = header || {};
|
|
66
72
|
const reloadProps = (0, import_lodash.isObject)(reload) && !import_react.default.isValidElement(reload) ? reload : {};
|
|
67
73
|
const reloadCls = (0, import_classnames.default)(
|
|
68
74
|
`${rootPrefixCls}-page-header-heading-reload`,
|
|
@@ -75,7 +81,8 @@ var PageContainer = ({
|
|
|
75
81
|
breadcrumb: breadcrumb && {
|
|
76
82
|
itemRender: (route, params, routes, paths) => /* @__PURE__ */ import_react.default.createElement(import_ItemRender.default, { route, params, routes, paths }),
|
|
77
83
|
...breadcrumb
|
|
78
|
-
}
|
|
84
|
+
},
|
|
85
|
+
backIcon
|
|
79
86
|
};
|
|
80
87
|
const noHasHeader = !title && ["title", "subTitle", "extra", "tags", "avatar", "backIcon", "breadcrumb"].every(
|
|
81
88
|
(item) => !(newHeader == null ? void 0 : newHeader[item])
|
|
@@ -31,13 +31,11 @@ var genPageContainerStyle = (token) => {
|
|
|
31
31
|
proComponentsCls,
|
|
32
32
|
componentCls,
|
|
33
33
|
colorBgLayout,
|
|
34
|
-
|
|
34
|
+
fontSizeHeading2,
|
|
35
35
|
controlHeightLG,
|
|
36
36
|
padding,
|
|
37
37
|
paddingLG
|
|
38
38
|
} = token;
|
|
39
|
-
const height = controlHeightLG;
|
|
40
|
-
const lineHeight = `${controlHeightLG}px`;
|
|
41
39
|
return {
|
|
42
40
|
[`${componentCls}`]: {
|
|
43
41
|
minHeight: "100vh",
|
|
@@ -60,7 +58,7 @@ var genPageContainerStyle = (token) => {
|
|
|
60
58
|
paddingBlockStart: 0
|
|
61
59
|
},
|
|
62
60
|
[`${antCls}-page-header-heading-title`]: {
|
|
63
|
-
fontSize:
|
|
61
|
+
fontSize: fontSizeHeading2,
|
|
64
62
|
marginInlineEnd: token.marginXS
|
|
65
63
|
},
|
|
66
64
|
[`${antCls}-page-header-heading-reload`]: {
|
|
@@ -68,9 +66,10 @@ var genPageContainerStyle = (token) => {
|
|
|
68
66
|
fontSize: token.fontSizeLG,
|
|
69
67
|
marginTop: token.marginXXS
|
|
70
68
|
},
|
|
69
|
+
[`${antCls}-page-header-heading-left`]: {
|
|
70
|
+
marginBlock: 0
|
|
71
|
+
},
|
|
71
72
|
[`${antCls}-page-header-heading-extra`]: {
|
|
72
|
-
height,
|
|
73
|
-
lineHeight,
|
|
74
73
|
marginBlock: 0
|
|
75
74
|
},
|
|
76
75
|
[`${antCls}-page-header-footer`]: {
|
package/lib/ProCard/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ProCard as AntProCard } from '@ant-design/pro-components';
|
|
2
2
|
import type { ProCardProps } from '@ant-design/pro-components';
|
|
3
3
|
export { ProCardProps };
|
|
4
|
-
|
|
4
|
+
export type ProCardType = typeof AntProCard;
|
|
5
|
+
declare const ProCard: ProCardType;
|
|
5
6
|
export default ProCard;
|
package/lib/ProCard/index.js
CHANGED
|
@@ -36,11 +36,12 @@ var import_react = __toESM(require("react"));
|
|
|
36
36
|
var import_pro_components = require("@ant-design/pro-components");
|
|
37
37
|
var import_design = require("@oceanbase/design");
|
|
38
38
|
var import_util = require("@oceanbase/design/es/_util");
|
|
39
|
-
var
|
|
39
|
+
var import_icons = require("@oceanbase/icons");
|
|
40
40
|
var import_classnames = __toESM(require("classnames"));
|
|
41
41
|
var import_style = __toESM(require("./style"));
|
|
42
|
-
var import_icons = require("@oceanbase/icons");
|
|
43
42
|
var ProCard = ({
|
|
43
|
+
loading,
|
|
44
|
+
bordered,
|
|
44
45
|
ghost,
|
|
45
46
|
title,
|
|
46
47
|
tabs,
|
|
@@ -48,12 +49,17 @@ var ProCard = ({
|
|
|
48
49
|
bodyStyle,
|
|
49
50
|
prefixCls: customizePrefixCls,
|
|
50
51
|
className,
|
|
52
|
+
style,
|
|
51
53
|
...restProps
|
|
52
54
|
}) => {
|
|
53
|
-
const {
|
|
55
|
+
const {
|
|
56
|
+
getPrefixCls,
|
|
57
|
+
iconPrefixCls,
|
|
58
|
+
card: contextCard
|
|
59
|
+
} = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
|
|
54
60
|
const prefixCls = getPrefixCls("pro-card", customizePrefixCls);
|
|
55
61
|
const { wrapSSR } = (0, import_style.default)(prefixCls);
|
|
56
|
-
const { token } =
|
|
62
|
+
const { token } = import_design.theme.useToken();
|
|
57
63
|
const noBodyHorizontalPadding = (0, import_util.isHorizontalPaddingZero)(bodyStyle == null ? void 0 : bodyStyle.padding) || ghost;
|
|
58
64
|
const proCardCls = (0, import_classnames.default)(
|
|
59
65
|
{
|
|
@@ -62,22 +68,29 @@ var ProCard = ({
|
|
|
62
68
|
[`${prefixCls}-no-divider`]: !headerBordered,
|
|
63
69
|
[`${prefixCls}-contain-tabs`]: !!tabs
|
|
64
70
|
},
|
|
71
|
+
contextCard == null ? void 0 : contextCard.className,
|
|
65
72
|
className
|
|
66
73
|
);
|
|
67
74
|
return wrapSSR(
|
|
68
75
|
/* @__PURE__ */ import_react.default.createElement(
|
|
69
76
|
import_pro_components.ProCard,
|
|
70
77
|
{
|
|
78
|
+
loading: loading === true ? /* @__PURE__ */ import_react.default.createElement(import_design.Skeleton, { active: true, title: false, paragraph: { rows: 4 } }) : loading,
|
|
71
79
|
prefixCls: customizePrefixCls,
|
|
80
|
+
bordered: bordered ?? ((contextCard == null ? void 0 : contextCard.variant) ? (contextCard == null ? void 0 : contextCard.variant) === "outlined" : void 0),
|
|
72
81
|
ghost,
|
|
73
82
|
title,
|
|
74
83
|
tabs: typeof tabs === "object" ? {
|
|
75
84
|
size: "large",
|
|
76
85
|
...tabs
|
|
77
86
|
} : tabs,
|
|
78
|
-
headerBordered,
|
|
87
|
+
headerBordered: headerBordered ?? (contextCard == null ? void 0 : contextCard.divided),
|
|
79
88
|
bodyStyle,
|
|
80
89
|
className: proCardCls,
|
|
90
|
+
style: {
|
|
91
|
+
...contextCard == null ? void 0 : contextCard.style,
|
|
92
|
+
...style
|
|
93
|
+
},
|
|
81
94
|
collapsibleIconRender: ({ collapsed }) => {
|
|
82
95
|
return /* @__PURE__ */ import_react.default.createElement(
|
|
83
96
|
import_icons.CaretRightFilled,
|
|
@@ -36,6 +36,9 @@ var genProCardStyle = (token) => {
|
|
|
36
36
|
[`div${componentCls}`]: {
|
|
37
37
|
borderRadius: token.borderRadiusLG
|
|
38
38
|
},
|
|
39
|
+
[`${componentCls}${componentCls}-border`]: {
|
|
40
|
+
border: `${token.lineWidth}px solid ${token.colorBorderSecondary}`
|
|
41
|
+
},
|
|
39
42
|
[`${componentCls}:not(${componentCls}-border):not(${componentCls}-ghost)`]: {
|
|
40
43
|
boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.03),0 1px 6px -1px rgba(0, 0, 0, 0.02),0 2px 4px 0 rgba(0, 0, 0, 0.02)"
|
|
41
44
|
},
|
package/lib/ProTable/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import type { ProTableProps as AntProTableProps } from '@ant-design/pro-componen
|
|
|
3
3
|
export interface ProTableProps<T, U, ValueType> extends AntProTableProps<T, U, ValueType> {
|
|
4
4
|
innerBordered?: boolean;
|
|
5
5
|
}
|
|
6
|
-
declare function ProTable<T, U, ValueType>({ form, headerTitle, options, optionsRender, toolbar, toolBarRender, size, bordered, innerBordered, expandable, rowSelection, pagination: customPagination, footer, locale, cardProps: outerCardProps, prefixCls: customizePrefixCls, tableClassName, className, ...restProps }: ProTableProps<T, U, ValueType>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
6
|
+
declare function ProTable<T, U, ValueType>({ form, headerTitle, options, optionsRender, toolbar, toolBarRender, size, bordered, innerBordered, cardBordered, expandable, rowSelection, pagination: customPagination, footer, locale, cardProps: outerCardProps, prefixCls: customizePrefixCls, tableClassName, className, ...restProps }: ProTableProps<T, U, ValueType>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
7
7
|
declare namespace ProTable {
|
|
8
8
|
var Summary;
|
|
9
9
|
}
|
package/lib/ProTable/index.js
CHANGED
|
@@ -49,6 +49,7 @@ function ProTable({
|
|
|
49
49
|
size,
|
|
50
50
|
bordered,
|
|
51
51
|
innerBordered,
|
|
52
|
+
cardBordered,
|
|
52
53
|
expandable,
|
|
53
54
|
rowSelection,
|
|
54
55
|
pagination: customPagination,
|
|
@@ -60,7 +61,7 @@ function ProTable({
|
|
|
60
61
|
className,
|
|
61
62
|
...restProps
|
|
62
63
|
}) {
|
|
63
|
-
const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
|
|
64
|
+
const { getPrefixCls, card: contextCard } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
|
|
64
65
|
const tablePrefixCls = getPrefixCls("table", customizePrefixCls);
|
|
65
66
|
const { wrapSSR: tableWrapSSR } = import_design.Table.useStyle(tablePrefixCls);
|
|
66
67
|
const pagination = import_design.Table.useDefaultPagination(customPagination);
|
|
@@ -79,7 +80,11 @@ function ProTable({
|
|
|
79
80
|
const { wrapSSR } = (0, import_style2.default)(prefixCls);
|
|
80
81
|
const proTableCls = (0, import_classnames.default)(className);
|
|
81
82
|
const { emptyText = /* @__PURE__ */ import_react.default.createElement(import_design.Empty, { image: import_design.Empty.PRESENTED_IMAGE_SIMPLE }), ...restLocale } = locale || {};
|
|
82
|
-
const cardProps =
|
|
83
|
+
const cardProps = (0, import_lodash.merge)(
|
|
84
|
+
{},
|
|
85
|
+
contextCard,
|
|
86
|
+
typeof outerCardProps === "boolean" ? {} : outerCardProps
|
|
87
|
+
);
|
|
83
88
|
const proCardCls = getPrefixCls("pro-card", customizePrefixCls);
|
|
84
89
|
return tableWrapSSR(
|
|
85
90
|
lightFilterWrapSSR(
|
|
@@ -90,6 +95,7 @@ function ProTable({
|
|
|
90
95
|
defaultSize: "large",
|
|
91
96
|
size,
|
|
92
97
|
bordered: bordered || innerBordered,
|
|
98
|
+
cardBordered: cardBordered ?? ((contextCard == null ? void 0 : contextCard.variant) ? (contextCard == null ? void 0 : contextCard.variant) === "outlined" : void 0),
|
|
93
99
|
form: {
|
|
94
100
|
// query form should remove required mark
|
|
95
101
|
requiredMark: false,
|
|
@@ -105,12 +111,16 @@ function ProTable({
|
|
|
105
111
|
className: (0, import_classnames.default)(
|
|
106
112
|
{
|
|
107
113
|
[`${proCardCls}-has-title`]: !!headerTitle || options || options === void 0 || optionsRender || toolbar || toolBarRender,
|
|
108
|
-
[`${proCardCls}-no-divider`]: !(cardProps == null ? void 0 : cardProps.headerBordered),
|
|
114
|
+
[`${proCardCls}-no-divider`]: !(cardProps == null ? void 0 : cardProps.headerBordered) && !(cardProps == null ? void 0 : cardProps.divided),
|
|
109
115
|
[`${proCardCls}-no-padding`]: true,
|
|
110
116
|
[`${proCardCls}-contain-tabs`]: !!(cardProps == null ? void 0 : cardProps.tabs)
|
|
111
117
|
},
|
|
112
118
|
cardProps == null ? void 0 : cardProps.className
|
|
113
|
-
)
|
|
119
|
+
),
|
|
120
|
+
bodyStyle: {
|
|
121
|
+
paddingBlock: 0,
|
|
122
|
+
...cardProps == null ? void 0 : cardProps.bodyStyle
|
|
123
|
+
}
|
|
114
124
|
},
|
|
115
125
|
expandable: expandable ? {
|
|
116
126
|
columnWidth: !size || size === "large" ? 40 : 32,
|
|
@@ -36,6 +36,13 @@ var genProTableStyle = (token) => {
|
|
|
36
36
|
flexDirection: "row-reverse"
|
|
37
37
|
}
|
|
38
38
|
},
|
|
39
|
+
[`${proCardComponentCls}:not(${proCardComponentCls}-no-divider)`]: {
|
|
40
|
+
[`${proCardComponentCls}-body`]: {
|
|
41
|
+
[`${componentCls}-list-toolbar-container`]: {
|
|
42
|
+
borderBottom: `${token.lineWidth}px solid ${token.colorBorderSecondary}`
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
},
|
|
39
46
|
[`${proCardComponentCls}${proCardComponentCls}-no-padding`]: {
|
|
40
47
|
[`${proCardComponentCls}-body`]: {
|
|
41
48
|
paddingInline: 0,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oceanbase/ui",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.2",
|
|
4
4
|
"description": "The UI library based on OceanBase Design",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"oceanbase",
|
|
@@ -41,9 +41,9 @@
|
|
|
41
41
|
"@ant-design/cssinjs": "^1.24.0",
|
|
42
42
|
"@ant-design/pro-components": "^2.8.10",
|
|
43
43
|
"@antv/g6": "3.4.10",
|
|
44
|
-
"@oceanbase/design": "^1.0.0-alpha.
|
|
45
|
-
"@oceanbase/icons": "^0.
|
|
46
|
-
"@oceanbase/util": "^0.
|
|
44
|
+
"@oceanbase/design": "^1.0.0-alpha.2",
|
|
45
|
+
"@oceanbase/icons": "^1.0.0-alpha.0",
|
|
46
|
+
"@oceanbase/util": "^1.0.0-alpha.1",
|
|
47
47
|
"ahooks": "^2.10.14",
|
|
48
48
|
"classnames": "^2.5.1",
|
|
49
49
|
"dayjs": "^1.11.18",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"react": ">=16.9.0",
|
|
71
71
|
"react-dom": ">=16.9.0"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "72910b1a2b037811f3ed5561ee5e897d7b744135"
|
|
74
74
|
}
|