@oceanbase/design 0.4.6 → 0.4.8
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/design.min.js +1 -1
- package/es/descriptions/hooks/useItems.d.ts +5 -11
- package/es/form/FormItem.d.ts +1 -1
- package/es/form/FormItem.js +6 -0
- package/es/menu/interface.d.ts +1 -0
- package/es/menu/interface.js +1 -0
- package/es/table/index.d.ts +2 -2
- package/es/table/style/index.js +8 -4
- package/es/tooltip/MouseTooltip.js +6 -7
- package/es/tooltip/ReactStickyMouseTooltip.d.ts +40 -0
- package/es/tooltip/ReactStickyMouseTooltip.js +103 -0
- package/lib/descriptions/hooks/useItems.d.ts +2 -8
- package/lib/form/FormItem.js +11 -1
- package/lib/menu/interface.d.ts +1 -0
- package/lib/menu/interface.js +23 -0
- package/lib/table/style/index.js +17 -1
- package/lib/tooltip/MouseTooltip.js +5 -3
- package/lib/tooltip/ReactStickyMouseTooltip.d.ts +40 -0
- package/lib/tooltip/ReactStickyMouseTooltip.js +100 -0
- package/package.json +8 -8
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { DescriptionsItemType } from '..';
|
|
3
3
|
export default function useItems(items?: DescriptionsItemType[], children?: React.ReactNode, bordered?: boolean): {
|
|
4
|
-
children: string | number | boolean |
|
|
4
|
+
children: string | number | boolean | import("@emotion/react/types/jsx-namespace").EmotionJSX.Element | Iterable<React.ReactNode>;
|
|
5
5
|
span?: number | "filled" | {
|
|
6
6
|
xxl?: number;
|
|
7
7
|
xl?: number;
|
|
@@ -11,18 +11,12 @@ export default function useItems(items?: DescriptionsItemType[], children?: Reac
|
|
|
11
11
|
xs?: number;
|
|
12
12
|
};
|
|
13
13
|
prefixCls?: string;
|
|
14
|
-
style?: React.CSSProperties;
|
|
15
|
-
label?: React.ReactNode;
|
|
16
14
|
className?: string;
|
|
15
|
+
style?: React.CSSProperties;
|
|
16
|
+
styles?: Partial<Record<"content" | "label", React.CSSProperties>>;
|
|
17
|
+
classNames?: Partial<Record<"content" | "label", string>>;
|
|
17
18
|
key?: React.Key;
|
|
18
|
-
|
|
19
|
-
label?: string;
|
|
20
|
-
content?: string;
|
|
21
|
-
};
|
|
22
|
-
styles?: {
|
|
23
|
-
label?: React.CSSProperties;
|
|
24
|
-
content?: React.CSSProperties;
|
|
25
|
-
};
|
|
19
|
+
label?: React.ReactNode;
|
|
26
20
|
labelStyle?: React.CSSProperties;
|
|
27
21
|
contentStyle?: React.CSSProperties;
|
|
28
22
|
}[];
|
package/es/form/FormItem.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ export interface FormItemProps extends AntFormItemProps {
|
|
|
11
11
|
}
|
|
12
12
|
declare const FormItem: (<Values = any>(props: AntFormItemProps<Values>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
|
|
13
13
|
useStatus: () => {
|
|
14
|
-
status?: "" | "
|
|
14
|
+
status?: "" | "warning" | "error" | "success" | "validating";
|
|
15
15
|
errors: ReactNode[];
|
|
16
16
|
warnings: ReactNode[];
|
|
17
17
|
};
|
package/es/form/FormItem.js
CHANGED
|
@@ -11,9 +11,11 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
11
11
|
import { Form as AntForm } from 'antd';
|
|
12
12
|
import React from 'react';
|
|
13
13
|
import { useTooltipTypeList } from "../tooltip/hooks/useTooltipTypeList";
|
|
14
|
+
import { isPlainObject } from 'lodash';
|
|
14
15
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
16
|
var AntFormItem = AntForm.Item;
|
|
16
17
|
var Item = function Item(_ref) {
|
|
18
|
+
var _children$type;
|
|
17
19
|
var children = _ref.children,
|
|
18
20
|
tooltip = _ref.tooltip,
|
|
19
21
|
restProps = _objectWithoutProperties(_ref, _excluded);
|
|
@@ -37,6 +39,10 @@ var Item = function Item(_ref) {
|
|
|
37
39
|
}
|
|
38
40
|
return /*#__PURE__*/_jsx(AntFormItem, _objectSpread(_objectSpread({
|
|
39
41
|
tooltip: tooltip
|
|
42
|
+
// auto set required for Switch children to hide optional mark
|
|
43
|
+
// @ts-ignore
|
|
44
|
+
,
|
|
45
|
+
required: isPlainObject(children) && (_children$type = children.type) !== null && _children$type !== void 0 && _children$type.__ANT_SWITCH ? true : undefined
|
|
40
46
|
}, restProps), {}, {
|
|
41
47
|
children: children
|
|
42
48
|
}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from 'antd/es/menu/interface';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from 'antd/es/menu/interface';
|
package/es/table/index.d.ts
CHANGED
|
@@ -37,8 +37,8 @@ declare const _default: (<RecordType extends AnyObject = AnyObject>(props: Table
|
|
|
37
37
|
SELECTION_ALL: "SELECT_ALL";
|
|
38
38
|
SELECTION_INVERT: "SELECT_INVERT";
|
|
39
39
|
SELECTION_NONE: "SELECT_NONE";
|
|
40
|
-
Column: <
|
|
41
|
-
ColumnGroup: <
|
|
40
|
+
Column: <RecordType extends import("antd/es/_util/type").AnyObject>(_: import("antd").TableColumnProps<RecordType>) => null;
|
|
41
|
+
ColumnGroup: <RecordType_1 extends import("antd/es/_util/type").AnyObject>(_: import("antd/es/table/ColumnGroup").ColumnGroupProps<RecordType_1>) => null;
|
|
42
42
|
Summary: typeof Summary;
|
|
43
43
|
useStyle: (prefixCls: string) => {
|
|
44
44
|
wrapSSR: (node: ReactNode) => ReactElement<any, string | React.JSXElementConstructor<any>>;
|
package/es/table/style/index.js
CHANGED
|
@@ -55,7 +55,7 @@ export var genTableStyle = function genTableStyle(token) {
|
|
|
55
55
|
}), "".concat(componentCls, "-placeholder td"), {
|
|
56
56
|
borderBottom: 'none'
|
|
57
57
|
}), "".concat(componentCls, "-empty-wrapper"), {
|
|
58
|
-
minHeight: 360,
|
|
58
|
+
minHeight: 360 - token.paddingSM * 2,
|
|
59
59
|
display: 'flex',
|
|
60
60
|
justifyContent: 'center',
|
|
61
61
|
alignItems: 'center'
|
|
@@ -69,7 +69,11 @@ export var genTableStyle = function genTableStyle(token) {
|
|
|
69
69
|
borderRadius: 0
|
|
70
70
|
}), "".concat(componentCls, "-empty-wrapper"), {
|
|
71
71
|
minHeight: 'auto'
|
|
72
|
-
}))))), "".concat(componentCls, "-wrapper ").concat(componentCls).concat(componentCls, "-
|
|
72
|
+
}))))), "".concat(componentCls, "-wrapper ").concat(componentCls).concat(componentCls, "-middle"), _defineProperty({}, "".concat(componentCls, "-tbody"), _defineProperty({}, "".concat(componentCls, "-empty-wrapper"), {
|
|
73
|
+
minHeight: 260 - token.paddingXS * 2
|
|
74
|
+
}))), "".concat(componentCls, "-wrapper ").concat(componentCls).concat(componentCls, "-small"), _defineProperty({}, "".concat(componentCls, "-tbody"), _defineProperty({}, "".concat(componentCls, "-empty-wrapper"), {
|
|
75
|
+
minHeight: 160 - token.paddingXXS * 2
|
|
76
|
+
}))), "".concat(componentCls, "-wrapper ").concat(componentCls).concat(componentCls, "-scroll-horizontal, ").concat(componentCls, "-wrapper ").concat(componentCls).concat(componentCls, "-fixed-header"), _defineProperty({}, "".concat(componentCls, "-tbody"), _defineProperty(_defineProperty({}, "tr:nth-child(2n + 1):not(".concat(componentCls, "-placeholder):not(").concat(componentCls, "-row-selected):not(").concat(antCls, "-descriptions-row) > td"), {
|
|
73
77
|
backgroundColor: colorFillQuaternary
|
|
74
78
|
}), "tr:nth-child(2n):not(".concat(componentCls, "-placeholder):not(").concat(componentCls, "-row-selected):not(").concat(componentCls, "-expanded-row):not(").concat(antCls, "-descriptions-row) > td"), {
|
|
75
79
|
backgroundColor: colorBgBase
|
|
@@ -105,7 +109,7 @@ export var genTableStyle = function genTableStyle(token) {
|
|
|
105
109
|
marginLeft: token.margin + token.marginXL + token.lineWidth * 2
|
|
106
110
|
}))), "".concat(componentCls, "-middle, ").concat(componentCls, "-small"), _defineProperty({}, "".concat(componentCls, "-tbody"), _defineProperty({}, "tr > td > ".concat(componentCls, "-wrapper:only-child ").concat(componentCls), {
|
|
107
111
|
marginLeft: token.margin + token.marginXL + token.lineWidth * 2 + token.margin
|
|
108
|
-
})))), "".concat(componentCls, "-wrapper ").concat(antCls, "-spin-blur"), _defineProperty({}, "".concat(componentCls, "-tbody"), _defineProperty({}, "".concat(componentCls, "-placeholder"), {
|
|
112
|
+
})))), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref, "".concat(componentCls, "-wrapper ").concat(antCls, "-spin-blur"), _defineProperty({}, "".concat(componentCls, "-tbody"), _defineProperty({}, "".concat(componentCls, "-placeholder"), {
|
|
109
113
|
// hide empty when Table loading
|
|
110
114
|
visibility: 'hidden'
|
|
111
115
|
}))), "".concat(componentCls, "-wrapper"), _defineProperty({}, "".concat(componentCls, "-pagination"), _defineProperty(_defineProperty({}, "&".concat(antCls, "-pagination"), {
|
|
@@ -122,7 +126,7 @@ export var genTableStyle = function genTableStyle(token) {
|
|
|
122
126
|
}, "".concat(componentCls, "-batch-operation-selection-count"), {
|
|
123
127
|
margin: "0 ".concat(marginXS, "px"),
|
|
124
128
|
color: colorLink
|
|
125
|
-
}))))),
|
|
129
|
+
}))))), "".concat(antCls, "-popover").concat(componentCls, "-batch-operation-selection-popover"), _defineProperty({}, "".concat(antCls, "-popover-inner"), {
|
|
126
130
|
padding: 0
|
|
127
131
|
})), "".concat(antCls, "-popover, ").concat(antCls, "-tooltip"), _defineProperty({}, "".concat(componentCls, " ").concat(componentCls, "-tbody"), _defineProperty({}, "".concat(componentCls, "-empty-wrapper"), {
|
|
128
132
|
minHeight: 'auto'
|
|
@@ -16,8 +16,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
|
16
16
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
17
17
|
import { useMouse, useSize } from 'ahooks';
|
|
18
18
|
import React, { useRef, useState } from 'react';
|
|
19
|
-
|
|
20
|
-
import ReactStickyMouseTooltip from 'react-sticky-mouse-tooltip';
|
|
19
|
+
import ReactStickyMouseTooltip from "./ReactStickyMouseTooltip";
|
|
21
20
|
import theme from "../theme";
|
|
22
21
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
23
22
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
@@ -55,11 +54,11 @@ var MouseTooltip = function MouseTooltip(_ref) {
|
|
|
55
54
|
};
|
|
56
55
|
|
|
57
56
|
// 获取鼠标位置
|
|
58
|
-
var
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
57
|
+
var mouseInfo = useMouse();
|
|
58
|
+
// clientX and clientY maybe NaN, should use 0 as fallback value
|
|
59
|
+
// ref: https://github.com/oceanbase/oceanbase-design/pull/968
|
|
60
|
+
var clientX = (mouseInfo === null || mouseInfo === void 0 ? void 0 : mouseInfo.clientX) || 0;
|
|
61
|
+
var clientY = (mouseInfo === null || mouseInfo === void 0 ? void 0 : mouseInfo.clientY) || 0;
|
|
63
62
|
var ref = useRef(null);
|
|
64
63
|
var size = useSize(ref);
|
|
65
64
|
// tooltip 宽高,由于 ref 是设置在内容区上的,因此还需要加上外部的 padding
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface ReactStickyMouseTooltipProps {
|
|
3
|
+
visible?: boolean;
|
|
4
|
+
offsetX?: number;
|
|
5
|
+
offsetY?: number;
|
|
6
|
+
className?: string;
|
|
7
|
+
style?: React.CSSProperties;
|
|
8
|
+
children?: React.ReactElement;
|
|
9
|
+
}
|
|
10
|
+
export interface ReactStickyMouseTooltipState {
|
|
11
|
+
xPosition: number;
|
|
12
|
+
yPosition: number;
|
|
13
|
+
mouseMoved: boolean;
|
|
14
|
+
listenerActive: boolean;
|
|
15
|
+
}
|
|
16
|
+
declare class ReactStickyMouseTooltip extends React.PureComponent<ReactStickyMouseTooltipProps, ReactStickyMouseTooltipState> {
|
|
17
|
+
static defaultProps: {
|
|
18
|
+
visible: boolean;
|
|
19
|
+
offsetX: number;
|
|
20
|
+
offsetY: number;
|
|
21
|
+
};
|
|
22
|
+
state: {
|
|
23
|
+
xPosition: number;
|
|
24
|
+
yPosition: number;
|
|
25
|
+
mouseMoved: boolean;
|
|
26
|
+
listenerActive: boolean;
|
|
27
|
+
};
|
|
28
|
+
componentDidMount(): void;
|
|
29
|
+
componentDidUpdate(): void;
|
|
30
|
+
componentWillUnmount(): void;
|
|
31
|
+
getTooltipPosition: ({ clientX: xPosition, clientY: yPosition }: {
|
|
32
|
+
clientX: any;
|
|
33
|
+
clientY: any;
|
|
34
|
+
}) => void;
|
|
35
|
+
addListener: () => void;
|
|
36
|
+
removeListener: () => void;
|
|
37
|
+
updateListener: () => void;
|
|
38
|
+
render(): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
|
|
39
|
+
}
|
|
40
|
+
export default ReactStickyMouseTooltip;
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
5
|
+
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
|
|
6
|
+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
7
|
+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
8
|
+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
9
|
+
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
10
|
+
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
11
|
+
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
12
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
13
|
+
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
14
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
15
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
16
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
17
|
+
import React from 'react';
|
|
18
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
19
|
+
var ReactStickyMouseTooltip = /*#__PURE__*/function (_React$PureComponent) {
|
|
20
|
+
_inherits(ReactStickyMouseTooltip, _React$PureComponent);
|
|
21
|
+
var _super = _createSuper(ReactStickyMouseTooltip);
|
|
22
|
+
function ReactStickyMouseTooltip() {
|
|
23
|
+
var _this;
|
|
24
|
+
_classCallCheck(this, ReactStickyMouseTooltip);
|
|
25
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
26
|
+
args[_key] = arguments[_key];
|
|
27
|
+
}
|
|
28
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
29
|
+
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
30
|
+
xPosition: 0,
|
|
31
|
+
yPosition: 0,
|
|
32
|
+
mouseMoved: false,
|
|
33
|
+
listenerActive: false
|
|
34
|
+
});
|
|
35
|
+
_defineProperty(_assertThisInitialized(_this), "getTooltipPosition", function (_ref) {
|
|
36
|
+
var xPosition = _ref.clientX,
|
|
37
|
+
yPosition = _ref.clientY;
|
|
38
|
+
_this.setState({
|
|
39
|
+
xPosition: xPosition,
|
|
40
|
+
yPosition: yPosition,
|
|
41
|
+
mouseMoved: true
|
|
42
|
+
});
|
|
43
|
+
});
|
|
44
|
+
_defineProperty(_assertThisInitialized(_this), "addListener", function () {
|
|
45
|
+
window.addEventListener('mousemove', _this.getTooltipPosition);
|
|
46
|
+
_this.setState({
|
|
47
|
+
listenerActive: true
|
|
48
|
+
});
|
|
49
|
+
});
|
|
50
|
+
_defineProperty(_assertThisInitialized(_this), "removeListener", function () {
|
|
51
|
+
window.removeEventListener('mousemove', _this.getTooltipPosition);
|
|
52
|
+
_this.setState({
|
|
53
|
+
listenerActive: false
|
|
54
|
+
});
|
|
55
|
+
});
|
|
56
|
+
_defineProperty(_assertThisInitialized(_this), "updateListener", function () {
|
|
57
|
+
if (!_this.state.listenerActive && _this.props.visible) {
|
|
58
|
+
_this.addListener();
|
|
59
|
+
}
|
|
60
|
+
if (_this.state.listenerActive && !_this.props.visible) {
|
|
61
|
+
_this.removeListener();
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
return _this;
|
|
65
|
+
}
|
|
66
|
+
_createClass(ReactStickyMouseTooltip, [{
|
|
67
|
+
key: "componentDidMount",
|
|
68
|
+
value: function componentDidMount() {
|
|
69
|
+
this.addListener();
|
|
70
|
+
}
|
|
71
|
+
}, {
|
|
72
|
+
key: "componentDidUpdate",
|
|
73
|
+
value: function componentDidUpdate() {
|
|
74
|
+
this.updateListener();
|
|
75
|
+
}
|
|
76
|
+
}, {
|
|
77
|
+
key: "componentWillUnmount",
|
|
78
|
+
value: function componentWillUnmount() {
|
|
79
|
+
this.removeListener();
|
|
80
|
+
}
|
|
81
|
+
}, {
|
|
82
|
+
key: "render",
|
|
83
|
+
value: function render() {
|
|
84
|
+
return /*#__PURE__*/_jsx("div", {
|
|
85
|
+
className: this.props.className,
|
|
86
|
+
style: _objectSpread({
|
|
87
|
+
display: this.props.visible && this.state.mouseMoved ? 'block' : 'none',
|
|
88
|
+
position: 'fixed',
|
|
89
|
+
top: this.state.yPosition + this.props.offsetY,
|
|
90
|
+
left: this.state.xPosition + this.props.offsetX
|
|
91
|
+
}, this.props.style),
|
|
92
|
+
children: this.props.children
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
}]);
|
|
96
|
+
return ReactStickyMouseTooltip;
|
|
97
|
+
}(React.PureComponent);
|
|
98
|
+
_defineProperty(ReactStickyMouseTooltip, "defaultProps", {
|
|
99
|
+
visible: true,
|
|
100
|
+
offsetX: 0,
|
|
101
|
+
offsetY: 0
|
|
102
|
+
});
|
|
103
|
+
export default ReactStickyMouseTooltip;
|
|
@@ -15,14 +15,8 @@ export default function useItems(items?: DescriptionsItemType[], children?: Reac
|
|
|
15
15
|
label?: React.ReactNode;
|
|
16
16
|
className?: string;
|
|
17
17
|
key?: React.Key;
|
|
18
|
-
classNames?:
|
|
19
|
-
|
|
20
|
-
content?: string;
|
|
21
|
-
};
|
|
22
|
-
styles?: {
|
|
23
|
-
label?: React.CSSProperties;
|
|
24
|
-
content?: React.CSSProperties;
|
|
25
|
-
};
|
|
18
|
+
classNames?: Partial<Record<"content" | "label", string>>;
|
|
19
|
+
styles?: Partial<Record<"content" | "label", React.CSSProperties>>;
|
|
26
20
|
labelStyle?: React.CSSProperties;
|
|
27
21
|
contentStyle?: React.CSSProperties;
|
|
28
22
|
}[];
|
package/lib/form/FormItem.js
CHANGED
|
@@ -35,8 +35,10 @@ module.exports = __toCommonJS(FormItem_exports);
|
|
|
35
35
|
var import_antd = require("antd");
|
|
36
36
|
var import_react = __toESM(require("react"));
|
|
37
37
|
var import_useTooltipTypeList = require("../tooltip/hooks/useTooltipTypeList");
|
|
38
|
+
var import_lodash = require("lodash");
|
|
38
39
|
var AntFormItem = import_antd.Form.Item;
|
|
39
40
|
var Item = ({ children, tooltip, ...restProps }) => {
|
|
41
|
+
var _a;
|
|
40
42
|
const typeList = (0, import_useTooltipTypeList.useTooltipTypeList)();
|
|
41
43
|
if (typeof tooltip === "object" && !import_react.default.isValidElement(tooltip)) {
|
|
42
44
|
const { icon, type, overlayInnerStyle, ...restTooltipProps } = tooltip;
|
|
@@ -50,7 +52,15 @@ var Item = ({ children, tooltip, ...restProps }) => {
|
|
|
50
52
|
...restTooltipProps
|
|
51
53
|
};
|
|
52
54
|
}
|
|
53
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
55
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
56
|
+
AntFormItem,
|
|
57
|
+
{
|
|
58
|
+
tooltip,
|
|
59
|
+
required: (0, import_lodash.isPlainObject)(children) && ((_a = children.type) == null ? void 0 : _a.__ANT_SWITCH) ? true : void 0,
|
|
60
|
+
...restProps
|
|
61
|
+
},
|
|
62
|
+
children
|
|
63
|
+
);
|
|
54
64
|
};
|
|
55
65
|
var FormItem = Item;
|
|
56
66
|
FormItem.useStatus = AntFormItem.useStatus;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from 'antd/es/menu/interface';
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __copyProps = (to, from, except, desc) => {
|
|
6
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
7
|
+
for (let key of __getOwnPropNames(from))
|
|
8
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
9
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
10
|
+
}
|
|
11
|
+
return to;
|
|
12
|
+
};
|
|
13
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
|
+
|
|
16
|
+
// src/menu/interface.ts
|
|
17
|
+
var interface_exports = {};
|
|
18
|
+
module.exports = __toCommonJS(interface_exports);
|
|
19
|
+
__reExport(interface_exports, require("antd/es/menu/interface"), module.exports);
|
|
20
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
21
|
+
0 && (module.exports = {
|
|
22
|
+
...require("antd/es/menu/interface")
|
|
23
|
+
});
|
package/lib/table/style/index.js
CHANGED
|
@@ -106,7 +106,7 @@ var genTableStyle = (token) => {
|
|
|
106
106
|
borderBottom: "none"
|
|
107
107
|
},
|
|
108
108
|
[`${componentCls}-empty-wrapper`]: {
|
|
109
|
-
minHeight: 360,
|
|
109
|
+
minHeight: 360 - token.paddingSM * 2,
|
|
110
110
|
display: "flex",
|
|
111
111
|
justifyContent: "center",
|
|
112
112
|
alignItems: "center"
|
|
@@ -132,6 +132,22 @@ var genTableStyle = (token) => {
|
|
|
132
132
|
}
|
|
133
133
|
}
|
|
134
134
|
},
|
|
135
|
+
// middle 表格样式
|
|
136
|
+
[`${componentCls}-wrapper ${componentCls}${componentCls}-middle`]: {
|
|
137
|
+
[`${componentCls}-tbody`]: {
|
|
138
|
+
[`${componentCls}-empty-wrapper`]: {
|
|
139
|
+
minHeight: 260 - token.paddingXS * 2
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
// small 表格样式
|
|
144
|
+
[`${componentCls}-wrapper ${componentCls}${componentCls}-small`]: {
|
|
145
|
+
[`${componentCls}-tbody`]: {
|
|
146
|
+
[`${componentCls}-empty-wrapper`]: {
|
|
147
|
+
minHeight: 160 - token.paddingXXS * 2
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
},
|
|
135
151
|
// 滚动表格样式
|
|
136
152
|
// 由于滚动表格会在 tbody 下最前面多一个 tr 元素,因此需要设置相反的斑马条样式
|
|
137
153
|
// .ant-table-scroll-horizontal: 水平滚动
|
|
@@ -34,7 +34,7 @@ __export(MouseTooltip_exports, {
|
|
|
34
34
|
module.exports = __toCommonJS(MouseTooltip_exports);
|
|
35
35
|
var import_ahooks = require("ahooks");
|
|
36
36
|
var import_react = __toESM(require("react"));
|
|
37
|
-
var
|
|
37
|
+
var import_ReactStickyMouseTooltip = __toESM(require("./ReactStickyMouseTooltip"));
|
|
38
38
|
var import_theme = __toESM(require("../theme"));
|
|
39
39
|
var MouseTooltip = ({
|
|
40
40
|
children,
|
|
@@ -58,7 +58,9 @@ var MouseTooltip = ({
|
|
|
58
58
|
onOpenChange == null ? void 0 : onOpenChange(value);
|
|
59
59
|
onVisibleChange == null ? void 0 : onVisibleChange(value);
|
|
60
60
|
};
|
|
61
|
-
const
|
|
61
|
+
const mouseInfo = (0, import_ahooks.useMouse)();
|
|
62
|
+
const clientX = (mouseInfo == null ? void 0 : mouseInfo.clientX) || 0;
|
|
63
|
+
const clientY = (mouseInfo == null ? void 0 : mouseInfo.clientY) || 0;
|
|
62
64
|
const ref = (0, import_react.useRef)(null);
|
|
63
65
|
const size = (0, import_ahooks.useSize)(ref);
|
|
64
66
|
const tooltipWidth = ((size == null ? void 0 : size.width) || 0) + 16;
|
|
@@ -86,7 +88,7 @@ var MouseTooltip = ({
|
|
|
86
88
|
},
|
|
87
89
|
children
|
|
88
90
|
), title && /* @__PURE__ */ import_react.default.createElement(
|
|
89
|
-
|
|
91
|
+
import_ReactStickyMouseTooltip.default,
|
|
90
92
|
{
|
|
91
93
|
visible,
|
|
92
94
|
style: {
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface ReactStickyMouseTooltipProps {
|
|
3
|
+
visible?: boolean;
|
|
4
|
+
offsetX?: number;
|
|
5
|
+
offsetY?: number;
|
|
6
|
+
className?: string;
|
|
7
|
+
style?: React.CSSProperties;
|
|
8
|
+
children?: React.ReactElement;
|
|
9
|
+
}
|
|
10
|
+
export interface ReactStickyMouseTooltipState {
|
|
11
|
+
xPosition: number;
|
|
12
|
+
yPosition: number;
|
|
13
|
+
mouseMoved: boolean;
|
|
14
|
+
listenerActive: boolean;
|
|
15
|
+
}
|
|
16
|
+
declare class ReactStickyMouseTooltip extends React.PureComponent<ReactStickyMouseTooltipProps, ReactStickyMouseTooltipState> {
|
|
17
|
+
static defaultProps: {
|
|
18
|
+
visible: boolean;
|
|
19
|
+
offsetX: number;
|
|
20
|
+
offsetY: number;
|
|
21
|
+
};
|
|
22
|
+
state: {
|
|
23
|
+
xPosition: number;
|
|
24
|
+
yPosition: number;
|
|
25
|
+
mouseMoved: boolean;
|
|
26
|
+
listenerActive: boolean;
|
|
27
|
+
};
|
|
28
|
+
componentDidMount(): void;
|
|
29
|
+
componentDidUpdate(): void;
|
|
30
|
+
componentWillUnmount(): void;
|
|
31
|
+
getTooltipPosition: ({ clientX: xPosition, clientY: yPosition }: {
|
|
32
|
+
clientX: any;
|
|
33
|
+
clientY: any;
|
|
34
|
+
}) => void;
|
|
35
|
+
addListener: () => void;
|
|
36
|
+
removeListener: () => void;
|
|
37
|
+
updateListener: () => void;
|
|
38
|
+
render(): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
|
|
39
|
+
}
|
|
40
|
+
export default ReactStickyMouseTooltip;
|
|
@@ -0,0 +1,100 @@
|
|
|
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/tooltip/ReactStickyMouseTooltip.tsx
|
|
30
|
+
var ReactStickyMouseTooltip_exports = {};
|
|
31
|
+
__export(ReactStickyMouseTooltip_exports, {
|
|
32
|
+
default: () => ReactStickyMouseTooltip_default
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(ReactStickyMouseTooltip_exports);
|
|
35
|
+
var import_react = __toESM(require("react"));
|
|
36
|
+
var ReactStickyMouseTooltip = class extends import_react.default.PureComponent {
|
|
37
|
+
constructor() {
|
|
38
|
+
super(...arguments);
|
|
39
|
+
this.state = {
|
|
40
|
+
xPosition: 0,
|
|
41
|
+
yPosition: 0,
|
|
42
|
+
mouseMoved: false,
|
|
43
|
+
listenerActive: false
|
|
44
|
+
};
|
|
45
|
+
this.getTooltipPosition = ({ clientX: xPosition, clientY: yPosition }) => {
|
|
46
|
+
this.setState({
|
|
47
|
+
xPosition,
|
|
48
|
+
yPosition,
|
|
49
|
+
mouseMoved: true
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
this.addListener = () => {
|
|
53
|
+
window.addEventListener("mousemove", this.getTooltipPosition);
|
|
54
|
+
this.setState({ listenerActive: true });
|
|
55
|
+
};
|
|
56
|
+
this.removeListener = () => {
|
|
57
|
+
window.removeEventListener("mousemove", this.getTooltipPosition);
|
|
58
|
+
this.setState({ listenerActive: false });
|
|
59
|
+
};
|
|
60
|
+
this.updateListener = () => {
|
|
61
|
+
if (!this.state.listenerActive && this.props.visible) {
|
|
62
|
+
this.addListener();
|
|
63
|
+
}
|
|
64
|
+
if (this.state.listenerActive && !this.props.visible) {
|
|
65
|
+
this.removeListener();
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
componentDidMount() {
|
|
70
|
+
this.addListener();
|
|
71
|
+
}
|
|
72
|
+
componentDidUpdate() {
|
|
73
|
+
this.updateListener();
|
|
74
|
+
}
|
|
75
|
+
componentWillUnmount() {
|
|
76
|
+
this.removeListener();
|
|
77
|
+
}
|
|
78
|
+
render() {
|
|
79
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
80
|
+
"div",
|
|
81
|
+
{
|
|
82
|
+
className: this.props.className,
|
|
83
|
+
style: {
|
|
84
|
+
display: this.props.visible && this.state.mouseMoved ? "block" : "none",
|
|
85
|
+
position: "fixed",
|
|
86
|
+
top: this.state.yPosition + this.props.offsetY,
|
|
87
|
+
left: this.state.xPosition + this.props.offsetX,
|
|
88
|
+
...this.props.style
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
this.props.children
|
|
92
|
+
);
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
ReactStickyMouseTooltip.defaultProps = {
|
|
96
|
+
visible: true,
|
|
97
|
+
offsetX: 0,
|
|
98
|
+
offsetY: 0
|
|
99
|
+
};
|
|
100
|
+
var ReactStickyMouseTooltip_default = ReactStickyMouseTooltip;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oceanbase/design",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.8",
|
|
4
4
|
"description": "The Design System of OceanBase",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"oceanbase",
|
|
@@ -39,24 +39,24 @@
|
|
|
39
39
|
"build": "father build && cp src/style/reset.css dist/"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@ant-design/cssinjs": "^1.
|
|
42
|
+
"@ant-design/cssinjs": "^1.23.0",
|
|
43
|
+
"@ctrl/tinycolor": "^4.1.0",
|
|
43
44
|
"@oceanbase/aliyun-theme": "^0.1.6",
|
|
44
|
-
"@oceanbase/icons": "^0.4.
|
|
45
|
+
"@oceanbase/icons": "^0.4.5",
|
|
45
46
|
"@oceanbase/util": "^0.4.2",
|
|
46
47
|
"ahooks": "^2.10.14",
|
|
47
|
-
"antd": "^5.
|
|
48
|
+
"antd": "^5.24.0",
|
|
48
49
|
"classnames": "^2.5.1",
|
|
49
50
|
"lodash": "^4.17.21",
|
|
50
51
|
"lottie-web": "^5.12.2",
|
|
51
52
|
"prop-types": "^15.8.1",
|
|
52
|
-
"rc-util": "^5.44.
|
|
53
|
-
"react-sticky-mouse-tooltip": "^0.0.1"
|
|
53
|
+
"rc-util": "^5.44.4"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
56
|
"@babel/cli": "^7.25.9",
|
|
57
57
|
"@babel/preset-env": "^7.26.0",
|
|
58
58
|
"antd-token-previewer": "^2.0.8",
|
|
59
|
-
"rc-select": "^14.16.
|
|
59
|
+
"rc-select": "^14.16.6",
|
|
60
60
|
"rc-slider": "^11.1.8",
|
|
61
61
|
"rc-table": "^7.50.2",
|
|
62
62
|
"rc-tree-select": "^5.27.0"
|
|
@@ -65,5 +65,5 @@
|
|
|
65
65
|
"react": ">=16.9.0",
|
|
66
66
|
"react-dom": ">=16.9.0"
|
|
67
67
|
},
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "617efa9eb09833f74f0ab0065467b556b5b6843e"
|
|
69
69
|
}
|