@pisell/materials 1.0.512 → 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 +21 -21
- 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/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 +3 -3
|
@@ -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";
|
|
@@ -59,7 +59,7 @@ var PisellHeaderProgressBar = ({
|
|
|
59
59
|
boxShadow: enableShadow ? "0px 1px 2px 0px rgba(16, 24, 40, 0.05)" : "none",
|
|
60
60
|
borderBottom: enableBorder ? `${borderWidth}px solid ${borderColor}` : "none"
|
|
61
61
|
};
|
|
62
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
62
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
63
63
|
import_pisellSectionHeaders.default,
|
|
64
64
|
{
|
|
65
65
|
backNode: /* @__PURE__ */ import_react.default.createElement(
|
|
@@ -78,9 +78,10 @@ var PisellHeaderProgressBar = ({
|
|
|
78
78
|
}
|
|
79
79
|
) : null,
|
|
80
80
|
style: customStyle,
|
|
81
|
+
className: classes,
|
|
81
82
|
onAction: onClose,
|
|
82
83
|
onBack
|
|
83
84
|
}
|
|
84
|
-
)
|
|
85
|
+
);
|
|
85
86
|
};
|
|
86
87
|
var pisellHeaderProgressBar_default = PisellHeaderProgressBar;
|
|
@@ -48,6 +48,7 @@ var PisellImageCarousels = ({
|
|
|
48
48
|
autoplay = true,
|
|
49
49
|
interval = 3e3,
|
|
50
50
|
borderRadius = 8,
|
|
51
|
+
loop = true,
|
|
51
52
|
className,
|
|
52
53
|
style
|
|
53
54
|
}) => {
|
|
@@ -59,7 +60,7 @@ var PisellImageCarousels = ({
|
|
|
59
60
|
modules: [import_swiper.Navigation, import_swiper.Pagination, import_swiper.Autoplay],
|
|
60
61
|
slidesPerView: 1,
|
|
61
62
|
spaceBetween: 0,
|
|
62
|
-
loop
|
|
63
|
+
loop,
|
|
63
64
|
// 导航箭头
|
|
64
65
|
navigation: showArrows ? {
|
|
65
66
|
nextEl: ".pisell-carousel-next",
|
|
@@ -82,7 +83,7 @@ var PisellImageCarousels = ({
|
|
|
82
83
|
swiperInstance.current.destroy();
|
|
83
84
|
}
|
|
84
85
|
};
|
|
85
|
-
}, [showArrows, showDots, autoplay, interval]);
|
|
86
|
+
}, [showArrows, showDots, autoplay, interval, loop]);
|
|
86
87
|
return /* @__PURE__ */ import_react.default.createElement(
|
|
87
88
|
"div",
|
|
88
89
|
{
|
|
@@ -45,18 +45,22 @@ var PisellList01 = ({
|
|
|
45
45
|
renderItem,
|
|
46
46
|
className,
|
|
47
47
|
style,
|
|
48
|
-
onChange
|
|
48
|
+
onChange,
|
|
49
|
+
onSearch
|
|
49
50
|
}) => {
|
|
50
51
|
const [currentAnchor, setCurrentAnchor] = (0, import_react.useState)("");
|
|
51
52
|
const [products, setProducts] = (0, import_react.useState)([]);
|
|
52
53
|
(0, import_react.useEffect)(() => {
|
|
54
|
+
if (!showCategory) {
|
|
55
|
+
return setProducts(dataSource ?? []);
|
|
56
|
+
}
|
|
53
57
|
if (currentAnchor) {
|
|
54
58
|
const currentData = dataSource == null ? void 0 : dataSource.find(
|
|
55
59
|
(item) => item.href === currentAnchor
|
|
56
60
|
);
|
|
57
61
|
setProducts((currentData == null ? void 0 : currentData.children) ?? []);
|
|
58
62
|
}
|
|
59
|
-
}, [currentAnchor, dataSource]);
|
|
63
|
+
}, [currentAnchor, dataSource, showCategory]);
|
|
60
64
|
(0, import_react.useEffect)(() => {
|
|
61
65
|
var _a;
|
|
62
66
|
setCurrentAnchor(((_a = dataSource == null ? void 0 : dataSource[0]) == null ? void 0 : _a.href) ?? "");
|
|
@@ -70,6 +74,7 @@ var PisellList01 = ({
|
|
|
70
74
|
{
|
|
71
75
|
placeholder: "Search",
|
|
72
76
|
prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.SearchOutlined, { style: { color: "#667085" } }),
|
|
77
|
+
onChange: onSearch,
|
|
73
78
|
allowClear: true,
|
|
74
79
|
size: "large",
|
|
75
80
|
className: "pisell-list-01-search-input"
|
|
@@ -84,7 +89,7 @@ var PisellList01 = ({
|
|
|
84
89
|
setCurrentAnchor(e);
|
|
85
90
|
}
|
|
86
91
|
}
|
|
87
|
-
)) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-list-01-products" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-list-01-products-title" }, categoryTitle), /* @__PURE__ */ import_react.default.createElement(
|
|
92
|
+
)) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-list-01-products" }, showCategory ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-list-01-products-title" }, categoryTitle) : null, /* @__PURE__ */ import_react.default.createElement(
|
|
88
93
|
import_pisellViewGrid.default,
|
|
89
94
|
{
|
|
90
95
|
dataSource: products,
|
|
@@ -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,118 @@
|
|
|
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/components/profileMenu/index.tsx
|
|
30
|
+
var profileMenu_exports = {};
|
|
31
|
+
__export(profileMenu_exports, {
|
|
32
|
+
default: () => profileMenu_default
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(profileMenu_exports);
|
|
35
|
+
var import_react = __toESM(require("react"));
|
|
36
|
+
var import_antd = require("antd");
|
|
37
|
+
var import_classnames = __toESM(require("classnames"));
|
|
38
|
+
var import_pisellAvatar = __toESM(require("./../pisellAvatar"));
|
|
39
|
+
var import_index = require("./index.less");
|
|
40
|
+
var ProfileMenu = ({
|
|
41
|
+
menuIcon,
|
|
42
|
+
userName = "",
|
|
43
|
+
email = "",
|
|
44
|
+
isShowUserName = false,
|
|
45
|
+
isShowEmail = false,
|
|
46
|
+
isShowUserInfo = false,
|
|
47
|
+
onClick,
|
|
48
|
+
avatar,
|
|
49
|
+
className,
|
|
50
|
+
style,
|
|
51
|
+
menuItems = [],
|
|
52
|
+
placement = "bottomRight",
|
|
53
|
+
trigger = ["click"],
|
|
54
|
+
showBadge = false,
|
|
55
|
+
badgeCount = 1
|
|
56
|
+
}) => {
|
|
57
|
+
(0, import_react.useEffect)(() => {
|
|
58
|
+
document.body.id = "body";
|
|
59
|
+
}, []);
|
|
60
|
+
const handleClick = (e) => {
|
|
61
|
+
e.preventDefault();
|
|
62
|
+
onClick == null ? void 0 : onClick();
|
|
63
|
+
};
|
|
64
|
+
const finalMenuItems = (0, import_react.useMemo)(() => {
|
|
65
|
+
if (!isShowUserInfo)
|
|
66
|
+
return menuItems;
|
|
67
|
+
const userInfoItem = {
|
|
68
|
+
key: "user-info",
|
|
69
|
+
label: /* @__PURE__ */ import_react.default.createElement("div", { className: "profile-menu-user-info-item" }, /* @__PURE__ */ import_react.default.createElement(
|
|
70
|
+
import_pisellAvatar.default,
|
|
71
|
+
{
|
|
72
|
+
size: "md",
|
|
73
|
+
src: avatar == null ? void 0 : avatar.src,
|
|
74
|
+
alt: avatar == null ? void 0 : avatar.alt
|
|
75
|
+
}
|
|
76
|
+
), /* @__PURE__ */ import_react.default.createElement("div", { className: "profile-menu-user-info" }, userName && /* @__PURE__ */ import_react.default.createElement("p", { className: "profile-menu-user-info-name" }, userName), email && /* @__PURE__ */ import_react.default.createElement("p", { className: "profile-menu-user-info-email" }, email)))
|
|
77
|
+
};
|
|
78
|
+
return [
|
|
79
|
+
userInfoItem,
|
|
80
|
+
{ type: "divider" },
|
|
81
|
+
...menuItems || []
|
|
82
|
+
];
|
|
83
|
+
}, [isShowUserInfo, menuItems, userName, email, avatar]);
|
|
84
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
85
|
+
import_antd.Dropdown,
|
|
86
|
+
{
|
|
87
|
+
menu: { items: finalMenuItems },
|
|
88
|
+
placement,
|
|
89
|
+
trigger,
|
|
90
|
+
overlayClassName: "profile-menu-dropdown"
|
|
91
|
+
},
|
|
92
|
+
/* @__PURE__ */ import_react.default.createElement(
|
|
93
|
+
"div",
|
|
94
|
+
{
|
|
95
|
+
className: (0, import_classnames.default)("profile-menu-wrap", className),
|
|
96
|
+
style: {
|
|
97
|
+
...style,
|
|
98
|
+
paddingRight: isShowUserName && userName || isShowEmail && email ? 16 : 0
|
|
99
|
+
},
|
|
100
|
+
onClick: handleClick
|
|
101
|
+
},
|
|
102
|
+
menuIcon && /* @__PURE__ */ import_react.default.createElement("div", { className: "profile-menu-icon" }, menuIcon),
|
|
103
|
+
/* @__PURE__ */ import_react.default.createElement(import_antd.Badge, { count: showBadge ? badgeCount : 0, offset: [-6, 6] }, /* @__PURE__ */ import_react.default.createElement(
|
|
104
|
+
import_pisellAvatar.default,
|
|
105
|
+
{
|
|
106
|
+
size: "md",
|
|
107
|
+
style: {
|
|
108
|
+
margin: "0 6px"
|
|
109
|
+
},
|
|
110
|
+
src: avatar == null ? void 0 : avatar.src,
|
|
111
|
+
alt: avatar == null ? void 0 : avatar.alt
|
|
112
|
+
}
|
|
113
|
+
)),
|
|
114
|
+
(isShowUserName && userName || isShowEmail && email) && /* @__PURE__ */ import_react.default.createElement("div", { className: "profile-menu-user-info" }, isShowUserName && userName && /* @__PURE__ */ import_react.default.createElement("p", { className: "profile-menu-user-info-name", title: userName }, userName), isShowEmail && email && /* @__PURE__ */ import_react.default.createElement("p", { className: "profile-menu-user-info-email", title: email }, email))
|
|
115
|
+
)
|
|
116
|
+
);
|
|
117
|
+
};
|
|
118
|
+
var profileMenu_default = ProfileMenu;
|