@pisell/materials 1.0.511 → 1.0.513
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/build/lowcode/assets-daily.json +11 -11
- package/build/lowcode/assets-dev.json +2 -2
- package/build/lowcode/assets-prod.json +11 -11
- package/build/lowcode/index.js +1 -1
- package/build/lowcode/meta.js +3 -3
- package/build/lowcode/preview.js +7 -7
- package/build/lowcode/render/default/view.css +1 -1
- package/build/lowcode/render/default/view.js +21 -21
- package/build/lowcode/view.css +1 -1
- package/build/lowcode/view.js +13 -13
- package/es/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.d.ts +1 -1
- package/es/components/pisellAnchor/index.js +6 -37
- package/es/components/pisellAnchor/index.less +36 -34
- package/es/components/pisellHeaderProgressBar/index.js +3 -4
- package/es/components/pisellHeaderProgressBar/index.less +0 -1
- package/es/components/pisellImageCarousels/index.d.ts +1 -0
- package/es/components/pisellImageCarousels/index.js +4 -2
- package/es/components/pisellList01/index.d.ts +1 -0
- package/es/components/pisellList01/index.js +11 -7
- package/es/components/profileMenu/index.d.ts +25 -0
- package/es/components/profileMenu/index.js +110 -0
- package/es/components/profileMenu/index.less +112 -0
- package/es/index.d.ts +1 -0
- package/es/index.js +1 -0
- package/lib/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.d.ts +1 -1
- package/lib/components/pisellAnchor/index.js +8 -35
- package/lib/components/pisellAnchor/index.less +36 -34
- package/lib/components/pisellHeaderProgressBar/index.js +3 -2
- package/lib/components/pisellHeaderProgressBar/index.less +0 -1
- package/lib/components/pisellImageCarousels/index.d.ts +1 -0
- package/lib/components/pisellImageCarousels/index.js +3 -2
- package/lib/components/pisellList01/index.d.ts +1 -0
- package/lib/components/pisellList01/index.js +8 -3
- package/lib/components/profileMenu/index.d.ts +25 -0
- package/lib/components/profileMenu/index.js +118 -0
- package/lib/components/profileMenu/index.less +112 -0
- package/lib/index.d.ts +1 -0
- package/lib/index.js +3 -0
- package/lowcode/profile-menu/meta.ts +175 -0
- package/lowcode/profile-menu/snippets.ts +67 -0
- package/package.json +2 -2
|
@@ -65,7 +65,7 @@ declare const useTableProps: (props: UseTablePropsProps) => {
|
|
|
65
65
|
useCustomAction: boolean;
|
|
66
66
|
actionType: string;
|
|
67
67
|
openMode: "modal" | "drawer";
|
|
68
|
-
openContentSize: "small" | "
|
|
68
|
+
openContentSize: "small" | "large" | "middle";
|
|
69
69
|
openTitle: string;
|
|
70
70
|
key: string;
|
|
71
71
|
} | undefined;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
var _excluded = ["items", "getContainer", "className"];
|
|
2
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
2
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
4
3
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
5
4
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
@@ -9,12 +8,10 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
9
8
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
10
9
|
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; }
|
|
11
10
|
import React, { useRef, useState, useEffect } from 'react';
|
|
12
|
-
import { Anchor
|
|
13
|
-
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
|
|
11
|
+
import { Anchor } from 'antd';
|
|
14
12
|
import classNames from 'classnames';
|
|
15
13
|
import "./index.less";
|
|
16
14
|
var PisellAnchor = function PisellAnchor(props) {
|
|
17
|
-
var _items$;
|
|
18
15
|
var _props$items = props.items,
|
|
19
16
|
items = _props$items === void 0 ? [] : _props$items,
|
|
20
17
|
getContainer = props.getContainer,
|
|
@@ -86,40 +83,12 @@ var PisellAnchor = function PisellAnchor(props) {
|
|
|
86
83
|
requestAnimationFrame(animation);
|
|
87
84
|
};
|
|
88
85
|
return /*#__PURE__*/React.createElement("div", {
|
|
89
|
-
className: classNames('pisell-anchor-
|
|
90
|
-
}, /*#__PURE__*/React.createElement(
|
|
91
|
-
|
|
92
|
-
ref: scrollRef
|
|
93
|
-
}, /*#__PURE__*/React.createElement(Anchor, _extends({
|
|
94
|
-
className: "pisell-lowcode-anchor",
|
|
86
|
+
className: classNames('pisell-anchor-containers', className)
|
|
87
|
+
}, /*#__PURE__*/React.createElement(Anchor, {
|
|
88
|
+
direction: "horizontal",
|
|
95
89
|
getContainer: getContainer,
|
|
96
90
|
items: items,
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
getCurrentAnchor: items === null || items === void 0 ? void 0 : (_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.href,
|
|
100
|
-
showInkInFixed: true
|
|
101
|
-
// targetOffset={40}
|
|
102
|
-
// bounds={40}
|
|
103
|
-
,
|
|
104
|
-
affix: false
|
|
105
|
-
}, rest))), (canScrollRight || canScrollLeft) && /*#__PURE__*/React.createElement("div", {
|
|
106
|
-
className: "pisell-anchor-buttons"
|
|
107
|
-
}, /*#__PURE__*/React.createElement(Button, {
|
|
108
|
-
className: classNames('scroll-button', {
|
|
109
|
-
disabled: !canScrollLeft
|
|
110
|
-
}),
|
|
111
|
-
onClick: function onClick() {
|
|
112
|
-
return handleScroll('left');
|
|
113
|
-
},
|
|
114
|
-
disabled: !canScrollLeft
|
|
115
|
-
}, /*#__PURE__*/React.createElement(LeftOutlined, null)), /*#__PURE__*/React.createElement(Button, {
|
|
116
|
-
className: classNames('scroll-button', {
|
|
117
|
-
disabled: !canScrollRight
|
|
118
|
-
}),
|
|
119
|
-
onClick: function onClick() {
|
|
120
|
-
return handleScroll('right');
|
|
121
|
-
},
|
|
122
|
-
disabled: !canScrollRight
|
|
123
|
-
}, /*#__PURE__*/React.createElement(RightOutlined, null))));
|
|
91
|
+
targetOffset: 39
|
|
92
|
+
}));
|
|
124
93
|
};
|
|
125
94
|
export default PisellAnchor;
|
|
@@ -1,47 +1,49 @@
|
|
|
1
|
-
.pisell-anchor-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
.pisell-lowcode-anchor {
|
|
11
|
-
height: 40px;
|
|
12
|
-
border-bottom: none !important;
|
|
13
|
-
|
|
14
|
-
.pisell-lowcode-anchor-ink {
|
|
1
|
+
.pisell-anchor-containers {
|
|
2
|
+
// display: flex;
|
|
3
|
+
// align-items: center;
|
|
4
|
+
// background-color: #fff;
|
|
5
|
+
// height: 40px;
|
|
6
|
+
.pisell-lowcode-anchor-wrapper {
|
|
7
|
+
&::before {
|
|
8
|
+
content: '';
|
|
15
9
|
display: none;
|
|
16
10
|
}
|
|
11
|
+
.pisell-lowcode-anchor {
|
|
12
|
+
height: 40px;
|
|
13
|
+
border-bottom: none !important;
|
|
14
|
+
background-color: #fff;
|
|
17
15
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
16
|
+
.pisell-lowcode-anchor-ink {
|
|
17
|
+
display: none;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.pisell-lowcode-anchor-link {
|
|
21
|
+
height: 100%;
|
|
22
|
+
padding: 0 16px;
|
|
23
|
+
display: flex;
|
|
24
|
+
align-items: center;
|
|
23
25
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
&-title {
|
|
27
|
+
color: var(--Gray-900, #101828);
|
|
28
|
+
font-family: Inter;
|
|
29
|
+
font-size: 16px;
|
|
30
|
+
font-weight: 600;
|
|
31
|
+
line-height: 40px;
|
|
32
|
+
}
|
|
30
33
|
}
|
|
31
|
-
}
|
|
32
34
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
35
|
+
.pisell-lowcode-anchor-link-active {
|
|
36
|
+
border-radius: 100px;
|
|
37
|
+
background: var(--theme-color, #7f56d9);
|
|
38
|
+
height: 40px;
|
|
37
39
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
40
|
+
.pisell-lowcode-anchor-link-title {
|
|
41
|
+
color: var(--White, #fff);
|
|
42
|
+
line-height: 40px;
|
|
43
|
+
}
|
|
41
44
|
}
|
|
42
45
|
}
|
|
43
46
|
}
|
|
44
|
-
|
|
45
47
|
.pisell-anchor-scroll {
|
|
46
48
|
height: 40px;
|
|
47
49
|
flex: 1;
|
|
@@ -49,9 +49,7 @@ var PisellHeaderProgressBar = function PisellHeaderProgressBar(_ref) {
|
|
|
49
49
|
boxShadow: enableShadow ? '0px 1px 2px 0px rgba(16, 24, 40, 0.05)' : 'none',
|
|
50
50
|
borderBottom: enableBorder ? "".concat(borderWidth, "px solid ").concat(borderColor) : 'none'
|
|
51
51
|
});
|
|
52
|
-
return /*#__PURE__*/React.createElement(
|
|
53
|
-
className: classes
|
|
54
|
-
}, /*#__PURE__*/React.createElement(PisellSectionHeaders, {
|
|
52
|
+
return /*#__PURE__*/React.createElement(PisellSectionHeaders, {
|
|
55
53
|
backNode: /*#__PURE__*/React.createElement(Iconfont, {
|
|
56
54
|
className: "".concat(prefixCls, "-back-icon"),
|
|
57
55
|
type: "pisell2-chevron-left"
|
|
@@ -68,8 +66,9 @@ var PisellHeaderProgressBar = function PisellHeaderProgressBar(_ref) {
|
|
|
68
66
|
className: "".concat(prefixCls, "-close-icon")
|
|
69
67
|
}) : null,
|
|
70
68
|
style: customStyle,
|
|
69
|
+
className: classes,
|
|
71
70
|
onAction: onClose,
|
|
72
71
|
onBack: onBack
|
|
73
|
-
})
|
|
72
|
+
});
|
|
74
73
|
};
|
|
75
74
|
export default PisellHeaderProgressBar;
|
|
@@ -28,6 +28,8 @@ var PisellImageCarousels = function PisellImageCarousels(_ref) {
|
|
|
28
28
|
interval = _ref$interval === void 0 ? 3000 : _ref$interval,
|
|
29
29
|
_ref$borderRadius = _ref.borderRadius,
|
|
30
30
|
borderRadius = _ref$borderRadius === void 0 ? 8 : _ref$borderRadius,
|
|
31
|
+
_ref$loop = _ref.loop,
|
|
32
|
+
loop = _ref$loop === void 0 ? true : _ref$loop,
|
|
31
33
|
className = _ref.className,
|
|
32
34
|
style = _ref.style;
|
|
33
35
|
var swiperRef = useRef(null);
|
|
@@ -38,7 +40,7 @@ var PisellImageCarousels = function PisellImageCarousels(_ref) {
|
|
|
38
40
|
modules: [Navigation, Pagination, Autoplay],
|
|
39
41
|
slidesPerView: 1,
|
|
40
42
|
spaceBetween: 0,
|
|
41
|
-
loop:
|
|
43
|
+
loop: loop,
|
|
42
44
|
// 导航箭头
|
|
43
45
|
navigation: showArrows ? {
|
|
44
46
|
nextEl: '.pisell-carousel-next',
|
|
@@ -61,7 +63,7 @@ var PisellImageCarousels = function PisellImageCarousels(_ref) {
|
|
|
61
63
|
swiperInstance.current.destroy();
|
|
62
64
|
}
|
|
63
65
|
};
|
|
64
|
-
}, [showArrows, showDots, autoplay, interval]);
|
|
66
|
+
}, [showArrows, showDots, autoplay, interval, loop]);
|
|
65
67
|
return /*#__PURE__*/React.createElement("div", {
|
|
66
68
|
className: classNames('pisell-image-carousel', className),
|
|
67
69
|
style: _objectSpread({
|
|
@@ -17,7 +17,8 @@ var PisellList01 = function PisellList01(_ref) {
|
|
|
17
17
|
renderItem = _ref.renderItem,
|
|
18
18
|
className = _ref.className,
|
|
19
19
|
style = _ref.style,
|
|
20
|
-
_onChange = _ref.onChange
|
|
20
|
+
_onChange = _ref.onChange,
|
|
21
|
+
onSearch = _ref.onSearch;
|
|
21
22
|
var _useState = useState(''),
|
|
22
23
|
_useState2 = _slicedToArray(_useState, 2),
|
|
23
24
|
currentAnchor = _useState2[0],
|
|
@@ -27,6 +28,10 @@ var PisellList01 = function PisellList01(_ref) {
|
|
|
27
28
|
products = _useState4[0],
|
|
28
29
|
setProducts = _useState4[1];
|
|
29
30
|
useEffect(function () {
|
|
31
|
+
// 不显示分类时,默认展示所有数据
|
|
32
|
+
if (!showCategory) {
|
|
33
|
+
return setProducts(dataSource !== null && dataSource !== void 0 ? dataSource : []);
|
|
34
|
+
}
|
|
30
35
|
if (currentAnchor) {
|
|
31
36
|
var _currentData$children;
|
|
32
37
|
var currentData = dataSource === null || dataSource === void 0 ? void 0 : dataSource.find(function (item) {
|
|
@@ -34,7 +39,7 @@ var PisellList01 = function PisellList01(_ref) {
|
|
|
34
39
|
});
|
|
35
40
|
setProducts((_currentData$children = currentData === null || currentData === void 0 ? void 0 : currentData.children) !== null && _currentData$children !== void 0 ? _currentData$children : []);
|
|
36
41
|
}
|
|
37
|
-
}, [currentAnchor, dataSource]);
|
|
42
|
+
}, [currentAnchor, dataSource, showCategory]);
|
|
38
43
|
useEffect(function () {
|
|
39
44
|
var _dataSource$0$href, _dataSource$;
|
|
40
45
|
setCurrentAnchor((_dataSource$0$href = dataSource === null || dataSource === void 0 ? void 0 : (_dataSource$ = dataSource[0]) === null || _dataSource$ === void 0 ? void 0 : _dataSource$.href) !== null && _dataSource$0$href !== void 0 ? _dataSource$0$href : '');
|
|
@@ -65,9 +70,8 @@ var PisellList01 = function PisellList01(_ref) {
|
|
|
65
70
|
style: {
|
|
66
71
|
color: '#667085'
|
|
67
72
|
}
|
|
68
|
-
})
|
|
69
|
-
|
|
70
|
-
,
|
|
73
|
+
}),
|
|
74
|
+
onChange: onSearch,
|
|
71
75
|
allowClear: true,
|
|
72
76
|
size: "large",
|
|
73
77
|
className: "pisell-list-01-search-input"
|
|
@@ -82,9 +86,9 @@ var PisellList01 = function PisellList01(_ref) {
|
|
|
82
86
|
}
|
|
83
87
|
})) : null, /*#__PURE__*/React.createElement("div", {
|
|
84
88
|
className: "pisell-list-01-products"
|
|
85
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
89
|
+
}, showCategory ? /*#__PURE__*/React.createElement("div", {
|
|
86
90
|
className: "pisell-list-01-products-title"
|
|
87
|
-
}, categoryTitle), /*#__PURE__*/React.createElement(PisellViewGrid, {
|
|
91
|
+
}, categoryTitle) : null, /*#__PURE__*/React.createElement(PisellViewGrid, {
|
|
88
92
|
dataSource: products,
|
|
89
93
|
columns: 1,
|
|
90
94
|
verticalGap: 16,
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { MenuProps } from 'antd';
|
|
3
|
+
import './index.less';
|
|
4
|
+
interface ProfileMenuProps {
|
|
5
|
+
menuIcon?: React.ReactNode;
|
|
6
|
+
userName?: string;
|
|
7
|
+
email?: string;
|
|
8
|
+
isShowUserName?: boolean;
|
|
9
|
+
isShowEmail?: boolean;
|
|
10
|
+
isShowUserInfo?: boolean;
|
|
11
|
+
onClick?: () => void;
|
|
12
|
+
avatar?: {
|
|
13
|
+
src?: string;
|
|
14
|
+
alt?: string;
|
|
15
|
+
};
|
|
16
|
+
className?: string;
|
|
17
|
+
style?: React.CSSProperties;
|
|
18
|
+
menuItems?: MenuProps['items'];
|
|
19
|
+
placement?: 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight';
|
|
20
|
+
trigger?: ('click' | 'hover')[];
|
|
21
|
+
showBadge?: boolean;
|
|
22
|
+
badgeCount?: number;
|
|
23
|
+
}
|
|
24
|
+
declare const ProfileMenu: React.FC<ProfileMenuProps>;
|
|
25
|
+
export default ProfileMenu;
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
2
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
+
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; }
|
|
5
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
6
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
7
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
8
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
9
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
10
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
11
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
12
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
13
|
+
import React, { useEffect, useMemo } from 'react';
|
|
14
|
+
import { Dropdown, Badge } from 'antd';
|
|
15
|
+
import classNames from 'classnames';
|
|
16
|
+
import PisellAvatar from "./../pisellAvatar";
|
|
17
|
+
import "./index.less";
|
|
18
|
+
var ProfileMenu = function ProfileMenu(_ref) {
|
|
19
|
+
var menuIcon = _ref.menuIcon,
|
|
20
|
+
_ref$userName = _ref.userName,
|
|
21
|
+
userName = _ref$userName === void 0 ? '' : _ref$userName,
|
|
22
|
+
_ref$email = _ref.email,
|
|
23
|
+
email = _ref$email === void 0 ? '' : _ref$email,
|
|
24
|
+
_ref$isShowUserName = _ref.isShowUserName,
|
|
25
|
+
isShowUserName = _ref$isShowUserName === void 0 ? false : _ref$isShowUserName,
|
|
26
|
+
_ref$isShowEmail = _ref.isShowEmail,
|
|
27
|
+
isShowEmail = _ref$isShowEmail === void 0 ? false : _ref$isShowEmail,
|
|
28
|
+
_ref$isShowUserInfo = _ref.isShowUserInfo,
|
|
29
|
+
isShowUserInfo = _ref$isShowUserInfo === void 0 ? false : _ref$isShowUserInfo,
|
|
30
|
+
onClick = _ref.onClick,
|
|
31
|
+
avatar = _ref.avatar,
|
|
32
|
+
className = _ref.className,
|
|
33
|
+
style = _ref.style,
|
|
34
|
+
_ref$menuItems = _ref.menuItems,
|
|
35
|
+
menuItems = _ref$menuItems === void 0 ? [] : _ref$menuItems,
|
|
36
|
+
_ref$placement = _ref.placement,
|
|
37
|
+
placement = _ref$placement === void 0 ? 'bottomRight' : _ref$placement,
|
|
38
|
+
_ref$trigger = _ref.trigger,
|
|
39
|
+
trigger = _ref$trigger === void 0 ? ['click'] : _ref$trigger,
|
|
40
|
+
_ref$showBadge = _ref.showBadge,
|
|
41
|
+
showBadge = _ref$showBadge === void 0 ? false : _ref$showBadge,
|
|
42
|
+
_ref$badgeCount = _ref.badgeCount,
|
|
43
|
+
badgeCount = _ref$badgeCount === void 0 ? 1 : _ref$badgeCount;
|
|
44
|
+
useEffect(function () {
|
|
45
|
+
document.body.id = 'body';
|
|
46
|
+
}, []);
|
|
47
|
+
var handleClick = function handleClick(e) {
|
|
48
|
+
e.preventDefault();
|
|
49
|
+
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
// 构建菜单项,如果显示用户信息,添加用户信息项
|
|
53
|
+
var finalMenuItems = useMemo(function () {
|
|
54
|
+
if (!isShowUserInfo) return menuItems;
|
|
55
|
+
var userInfoItem = {
|
|
56
|
+
key: 'user-info',
|
|
57
|
+
label: /*#__PURE__*/React.createElement("div", {
|
|
58
|
+
className: "profile-menu-user-info-item"
|
|
59
|
+
}, /*#__PURE__*/React.createElement(PisellAvatar, {
|
|
60
|
+
size: "md",
|
|
61
|
+
src: avatar === null || avatar === void 0 ? void 0 : avatar.src,
|
|
62
|
+
alt: avatar === null || avatar === void 0 ? void 0 : avatar.alt
|
|
63
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
64
|
+
className: "profile-menu-user-info"
|
|
65
|
+
}, userName && /*#__PURE__*/React.createElement("p", {
|
|
66
|
+
className: "profile-menu-user-info-name"
|
|
67
|
+
}, userName), email && /*#__PURE__*/React.createElement("p", {
|
|
68
|
+
className: "profile-menu-user-info-email"
|
|
69
|
+
}, email)))
|
|
70
|
+
};
|
|
71
|
+
return [userInfoItem, {
|
|
72
|
+
type: 'divider'
|
|
73
|
+
}].concat(_toConsumableArray(menuItems || []));
|
|
74
|
+
}, [isShowUserInfo, menuItems, userName, email, avatar]);
|
|
75
|
+
return /*#__PURE__*/React.createElement(Dropdown, {
|
|
76
|
+
menu: {
|
|
77
|
+
items: finalMenuItems
|
|
78
|
+
},
|
|
79
|
+
placement: placement,
|
|
80
|
+
trigger: trigger,
|
|
81
|
+
overlayClassName: "profile-menu-dropdown"
|
|
82
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
83
|
+
className: classNames('profile-menu-wrap', className),
|
|
84
|
+
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
85
|
+
paddingRight: isShowUserName && userName || isShowEmail && email ? 16 : 0
|
|
86
|
+
}),
|
|
87
|
+
onClick: handleClick
|
|
88
|
+
}, menuIcon && /*#__PURE__*/React.createElement("div", {
|
|
89
|
+
className: "profile-menu-icon"
|
|
90
|
+
}, menuIcon), /*#__PURE__*/React.createElement(Badge, {
|
|
91
|
+
count: showBadge ? badgeCount : 0,
|
|
92
|
+
offset: [-6, 6]
|
|
93
|
+
}, /*#__PURE__*/React.createElement(PisellAvatar, {
|
|
94
|
+
size: "md",
|
|
95
|
+
style: {
|
|
96
|
+
margin: '0 6px'
|
|
97
|
+
},
|
|
98
|
+
src: avatar === null || avatar === void 0 ? void 0 : avatar.src,
|
|
99
|
+
alt: avatar === null || avatar === void 0 ? void 0 : avatar.alt
|
|
100
|
+
})), (isShowUserName && userName || isShowEmail && email) && /*#__PURE__*/React.createElement("div", {
|
|
101
|
+
className: "profile-menu-user-info"
|
|
102
|
+
}, isShowUserName && userName && /*#__PURE__*/React.createElement("p", {
|
|
103
|
+
className: "profile-menu-user-info-name",
|
|
104
|
+
title: userName
|
|
105
|
+
}, userName), isShowEmail && email && /*#__PURE__*/React.createElement("p", {
|
|
106
|
+
className: "profile-menu-user-info-email",
|
|
107
|
+
title: email
|
|
108
|
+
}, email))));
|
|
109
|
+
};
|
|
110
|
+
export default ProfileMenu;
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
.profile-menu-wrap {
|
|
2
|
+
display: flex;
|
|
3
|
+
|
|
4
|
+
gap: 10px;
|
|
5
|
+
width: fit-content;
|
|
6
|
+
align-items: center;
|
|
7
|
+
padding-top: 6px;
|
|
8
|
+
padding-bottom: 6px;
|
|
9
|
+
padding-left: 16px;
|
|
10
|
+
|
|
11
|
+
border-radius: 50px;
|
|
12
|
+
border: 1px solid var(--Gray-100, #f2f4f7);
|
|
13
|
+
background: var(--Base-White, #fff);
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
transition: all 0.3s ease;
|
|
16
|
+
|
|
17
|
+
/* Shadow/sm */
|
|
18
|
+
box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),
|
|
19
|
+
0px 1px 2px 0px rgba(16, 24, 40, 0.06);
|
|
20
|
+
|
|
21
|
+
&:hover {
|
|
22
|
+
border-color: var(--Gray-200, #e5e7eb);
|
|
23
|
+
box-shadow: 0px 2px 4px 0px rgba(16, 24, 40, 0.15);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.profile-menu-icon {
|
|
27
|
+
display: flex;
|
|
28
|
+
align-items: center;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
.profile-menu-user-info {
|
|
35
|
+
display: flex;
|
|
36
|
+
flex-direction: column;
|
|
37
|
+
justify-content: center;
|
|
38
|
+
min-width: 0;
|
|
39
|
+
padding: 0;
|
|
40
|
+
|
|
41
|
+
&-item {
|
|
42
|
+
display: flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
gap: 12px;
|
|
45
|
+
width: 100%;
|
|
46
|
+
flex-wrap: nowrap;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&-name {
|
|
50
|
+
color: var(--Gray-700, #344054);
|
|
51
|
+
font-family: Inter;
|
|
52
|
+
font-size: 14px;
|
|
53
|
+
font-weight: 600;
|
|
54
|
+
line-height: 20px;
|
|
55
|
+
margin: 0;
|
|
56
|
+
white-space: nowrap;
|
|
57
|
+
overflow: hidden;
|
|
58
|
+
text-overflow: ellipsis;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&-email {
|
|
62
|
+
color: var(--Gray-600, #475467);
|
|
63
|
+
font-family: Inter;
|
|
64
|
+
font-size: 14px;
|
|
65
|
+
font-weight: 400;
|
|
66
|
+
line-height: 20px;
|
|
67
|
+
margin: 0;
|
|
68
|
+
white-space: nowrap;
|
|
69
|
+
overflow: hidden;
|
|
70
|
+
text-overflow: ellipsis;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.profile-menu-dropdown {
|
|
75
|
+
.ant-dropdown-menu {
|
|
76
|
+
padding: 8px;
|
|
77
|
+
border-radius: 8px;
|
|
78
|
+
border: 1px solid var(--Gray-100, #f2f4f7);
|
|
79
|
+
background: var(--Base-White, #fff);
|
|
80
|
+
box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03),
|
|
81
|
+
0px 12px 16px -4px rgba(16, 24, 40, 0.08);
|
|
82
|
+
|
|
83
|
+
.ant-dropdown-menu-item {
|
|
84
|
+
padding: 8px 12px;
|
|
85
|
+
border-radius: 6px;
|
|
86
|
+
min-height: 40px;
|
|
87
|
+
display: flex;
|
|
88
|
+
align-items: center;
|
|
89
|
+
|
|
90
|
+
&:hover {
|
|
91
|
+
background: var(--Gray-50, #f9fafb);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
&:active {
|
|
95
|
+
background: var(--Gray-100, #f2f4f7);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.profile-menu-user-info-item {
|
|
99
|
+
display: flex;
|
|
100
|
+
align-items: center;
|
|
101
|
+
gap: 12px;
|
|
102
|
+
width: 100%;
|
|
103
|
+
flex-wrap: nowrap;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.ant-dropdown-menu-item-divider {
|
|
108
|
+
margin: 8px 0;
|
|
109
|
+
background-color: var(--Gray-100, #f2f4f7);
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
package/es/index.d.ts
CHANGED
|
@@ -104,6 +104,7 @@ export { default as PisellToast } from './components/pisellToast';
|
|
|
104
104
|
export { default as PisellWalletPassCard } from './components/pisellWalletPassCard';
|
|
105
105
|
export { default as PisellScan } from './components/pisellScan';
|
|
106
106
|
export { default as PisellAlert } from './components/pisellAlert';
|
|
107
|
+
export { default as ProfileMenu } from './components/profileMenu';
|
|
107
108
|
export { default as PisellCard } from './components/pisellCard';
|
|
108
109
|
export { default as CropPhoto } from './components/cropPhoto';
|
|
109
110
|
export { default as PisellQrcode } from './components/pisellQrcode';
|
package/es/index.js
CHANGED
|
@@ -134,6 +134,7 @@ export { default as PisellToast } from "./components/pisellToast";
|
|
|
134
134
|
export { default as PisellWalletPassCard } from "./components/pisellWalletPassCard";
|
|
135
135
|
export { default as PisellScan } from "./components/pisellScan";
|
|
136
136
|
export { default as PisellAlert } from "./components/pisellAlert";
|
|
137
|
+
export { default as ProfileMenu } from "./components/profileMenu";
|
|
137
138
|
export { default as PisellCard } from "./components/pisellCard";
|
|
138
139
|
export { default as CropPhoto } from "./components/cropPhoto";
|
|
139
140
|
export { default as PisellQrcode } from "./components/pisellQrcode";
|
|
@@ -65,7 +65,7 @@ declare const useTableProps: (props: UseTablePropsProps) => {
|
|
|
65
65
|
useCustomAction: boolean;
|
|
66
66
|
actionType: string;
|
|
67
67
|
openMode: "modal" | "drawer";
|
|
68
|
-
openContentSize: "small" | "
|
|
68
|
+
openContentSize: "small" | "large" | "middle";
|
|
69
69
|
openTitle: string;
|
|
70
70
|
key: string;
|
|
71
71
|
} | undefined;
|
|
@@ -34,11 +34,9 @@ __export(pisellAnchor_exports, {
|
|
|
34
34
|
module.exports = __toCommonJS(pisellAnchor_exports);
|
|
35
35
|
var import_react = __toESM(require("react"));
|
|
36
36
|
var import_antd = require("antd");
|
|
37
|
-
var import_icons = require("@ant-design/icons");
|
|
38
37
|
var import_classnames = __toESM(require("classnames"));
|
|
39
38
|
var import_index = require("./index.less");
|
|
40
39
|
var PisellAnchor = (props) => {
|
|
41
|
-
var _a;
|
|
42
40
|
const { items = [], getContainer, className, ...rest } = props;
|
|
43
41
|
const scrollRef = (0, import_react.useRef)(null);
|
|
44
42
|
const [canScrollLeft, setCanScrollLeft] = (0, import_react.useState)(false);
|
|
@@ -51,13 +49,13 @@ var PisellAnchor = (props) => {
|
|
|
51
49
|
}
|
|
52
50
|
};
|
|
53
51
|
(0, import_react.useEffect)(() => {
|
|
54
|
-
var
|
|
52
|
+
var _a;
|
|
55
53
|
document.body.id = "body";
|
|
56
54
|
checkScroll();
|
|
57
|
-
(
|
|
55
|
+
(_a = scrollRef.current) == null ? void 0 : _a.addEventListener("scroll", checkScroll);
|
|
58
56
|
return () => {
|
|
59
|
-
var
|
|
60
|
-
(
|
|
57
|
+
var _a2;
|
|
58
|
+
(_a2 = scrollRef.current) == null ? void 0 : _a2.removeEventListener("scroll", checkScroll);
|
|
61
59
|
};
|
|
62
60
|
}, []);
|
|
63
61
|
const handleScroll = (direction) => {
|
|
@@ -90,39 +88,14 @@ var PisellAnchor = (props) => {
|
|
|
90
88
|
};
|
|
91
89
|
requestAnimationFrame(animation);
|
|
92
90
|
};
|
|
93
|
-
return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-anchor-
|
|
91
|
+
return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-anchor-containers", className) }, /* @__PURE__ */ import_react.default.createElement(
|
|
94
92
|
import_antd.Anchor,
|
|
95
93
|
{
|
|
96
|
-
|
|
94
|
+
direction: "horizontal",
|
|
97
95
|
getContainer,
|
|
98
96
|
items,
|
|
99
|
-
|
|
100
|
-
replace: true,
|
|
101
|
-
getCurrentAnchor: (_a = items == null ? void 0 : items[0]) == null ? void 0 : _a.href,
|
|
102
|
-
showInkInFixed: true,
|
|
103
|
-
affix: false,
|
|
104
|
-
...rest
|
|
97
|
+
targetOffset: 39
|
|
105
98
|
}
|
|
106
|
-
))
|
|
107
|
-
import_antd.Button,
|
|
108
|
-
{
|
|
109
|
-
className: (0, import_classnames.default)("scroll-button", {
|
|
110
|
-
disabled: !canScrollLeft
|
|
111
|
-
}),
|
|
112
|
-
onClick: () => handleScroll("left"),
|
|
113
|
-
disabled: !canScrollLeft
|
|
114
|
-
},
|
|
115
|
-
/* @__PURE__ */ import_react.default.createElement(import_icons.LeftOutlined, null)
|
|
116
|
-
), /* @__PURE__ */ import_react.default.createElement(
|
|
117
|
-
import_antd.Button,
|
|
118
|
-
{
|
|
119
|
-
className: (0, import_classnames.default)("scroll-button", {
|
|
120
|
-
disabled: !canScrollRight
|
|
121
|
-
}),
|
|
122
|
-
onClick: () => handleScroll("right"),
|
|
123
|
-
disabled: !canScrollRight
|
|
124
|
-
},
|
|
125
|
-
/* @__PURE__ */ import_react.default.createElement(import_icons.RightOutlined, null)
|
|
126
|
-
)));
|
|
99
|
+
));
|
|
127
100
|
};
|
|
128
101
|
var pisellAnchor_default = PisellAnchor;
|